Merge remote-tracking branch 'origin/dev' into dev

src/components/base/VExecuteQueryButton.vue

@@ -2,14 +2,19 @@
 /**
  * Pre-defined button to execute queries.
  */
-
+const props = withDefaults(defineProps<{
+    loading?: boolean
+}>(), {
+    loading: false
+})
 const emit = defineEmits<{
     (e: 'click'): void
 }>()
 </script>
 
 <template>
     <VBtn
+        :loading="loading"
         density="compact"
         @click="emit('click')"
         class="v-btn--variant-primary"

src/components/base/VListItemDivider.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/**
+ * Pre-styles divider for separating list items.
+ */
+
+const props = withDefaults(defineProps<{
+    inset?: boolean
+}>(), {
+    inset: false
+})
+</script>
+
+<template>
+    <VDivider :inset="inset" class="mt-2 mb-2"/>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/base/VSideTabs.vue

@@ -3,6 +3,7 @@
  * Pre-configured VTabs component for vertical tabs.
  */
 
+// todo lho the slider is currently disabled because i don't know how to move it between sides
 enum Side {
     Left = 'left',
     Right = 'right'
@@ -19,6 +20,7 @@ const emit = defineEmits<{
 
 <template>
     <VTabs
+        hide-slider
         :model-value="modelValue"
         @update:model-value="emit('update:modelValue', $event)"
         direction="vertical"

src/components/base/VTabToolbar.vue

@@ -51,7 +51,7 @@ const normalizedFlags = computed<Flag[]>(() => {
                     class="pl-0 pr-0 pt-0 pb-0 mr-4"
                 />
 
-                <VChipGroup v-if="normalizedFlags" variant="plain">
+                <VChipGroup v-if="normalizedFlags">
                     <VChip
                         v-for="flag in normalizedFlags"
                         :key="flag.title"

src/components/lab/editor/data-grid/LabEditorDataGridDataLocaleSelector.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import VListItemDivider from '@/components/base/VListItemDivider.vue'
+
 const props = defineProps<{
     selected: string | undefined,
     dataLocales: string[]
@@ -46,7 +48,7 @@ function handleDataLocaleSelect(selected: unknown[]) {
                     <VListItemTitle>None</VListItemTitle>
                 </VListItem>
 
-                <VDivider class="mt-2 mb-2" />
+                <VListItemDivider />
 
                 <VListItem
                     v-for="locale in dataLocales"

src/components/lab/editor/data-grid/LabEditorDataGridToolbar.vue

@@ -35,7 +35,7 @@ const flags = computed<any>(() => {
         :flags="flags"
     >
         <template #append>
-            <VExecuteQueryButton @click="emit('executeQuery')" />
+            <VExecuteQueryButton :loading="loading" @click="emit('executeQuery')" />
         </template>
 
         <template #extension>

src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelector.vue

@@ -16,6 +16,7 @@ import { Toaster, useToaster } from '@/services/editor/toaster'
 import { UnexpectedError } from '@/model/lab'
 import { TabComponentProps } from '@/model/editor/editor'
 import Hotkeys from 'vue-hotkeys-rt/Hotkeys.vue'
+import VListItemDivider from '@/components/base/VListItemDivider.vue'
 
 const toaster: Toaster = useToaster()
 
@@ -234,6 +235,7 @@ function togglePropertySectionSelection(sectionType: EntityPropertyType, newSele
                             />
                         </template>
                     </LabEditorDataGridPropertySelectorSection>
+                    <VListItemDivider />
                     <LabEditorDataGridPropertySelectorSection
                         :grid-props="gridProps"
                         title="Attributes"
@@ -252,6 +254,7 @@ function togglePropertySectionSelection(sectionType: EntityPropertyType, newSele
                             />
                         </template>
                     </LabEditorDataGridPropertySelectorSection>
+                    <VListItemDivider />
                     <LabEditorDataGridPropertySelectorSection
                         :grid-props="gridProps"
                         title="Associated data"
@@ -270,6 +273,7 @@ function togglePropertySectionSelection(sectionType: EntityPropertyType, newSele
                             />
                         </template>
                     </LabEditorDataGridPropertySelectorSection>
+                    <VListItemDivider />
                     <LabEditorDataGridPropertySelectorSection
                         :grid-props="gridProps"
                         title="References"

src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelectorSection.vue

@@ -10,6 +10,7 @@ import {
 } from '@/model/editor/data-grid'
 import LabEditorDataGridPropertySelectorSectionEmptyItem from './LabEditorDataGridPropertySelectorSectionEmptyItem.vue'
 import { TabComponentProps } from '@/model/editor/editor'
+import VListItemDivider from '@/components/base/VListItemDivider.vue'
 
 const props = defineProps<{
     gridProps: TabComponentProps<DataGridConsoleParams, DataGridConsoleData>,
@@ -77,9 +78,9 @@ function resolveNewSelection() {
                 :key="property.key.toString()"
             >
                 <slot :property="property" />
-                <VDivider
+                <VListItemDivider
                     v-if="index < filteredPropertyDescriptors.length - 1"
-                    class="mt-2 mb-2"
+                    inset
                 />
             </template>
         </template>

src/components/lab/editor/data-grid/property-selector/LabEditorDataGridPropertySelectorSectionItem.vue

@@ -35,7 +35,6 @@ const emit = defineEmits<{
                     <VChip
                         v-for="flag in flags"
                         :key="flag"
-                        variant="plain"
                         class="text-sm-body-2"
                     >
                         {{ flag }}

src/components/lab/editor/evitaql-console/LabEditorEvitaQLConsole.vue

@@ -18,33 +18,56 @@ import { TabComponentEvents, TabComponentProps } from '@/model/editor/editor'
 import VExecuteQueryButton from '@/components/base/VExecuteQueryButton.vue'
 import VTabToolbar from '@/components/base/VTabToolbar.vue'
 import VSideTabs from '@/components/base/VSideTabs.vue'
+import { ResultVisualiserService } from '@/services/editor/result-visualiser/result-visualiser.service'
+import {
+    useEvitaQLResultVisualiserService
+} from '@/services/editor/result-visualiser/evitaql-result-visualiser.service'
+import LabEditorResultVisualiser from '@/components/lab/editor/result-visualiser/LabEditorResultVisualiser.vue'
+
+enum EditorTabType {
+    Query = 'query',
+    Variables = 'variables'
+}
+
+enum ResultTabType {
+    Raw = 'raw',
+    Visualiser = 'visualiser'
+}
 
 const evitaQLConsoleService: EvitaQLConsoleService = useEvitaQLConsoleService()
 const toaster: Toaster = useToaster()
+const visualiserService: ResultVisualiserService = useEvitaQLResultVisualiserService()
 
 const props = defineProps<TabComponentProps<EvitaQLConsoleParams, EvitaQLConsoleData>>()
 const emit = defineEmits<TabComponentEvents>()
 
 const path = ref<string[]>([
     props.params.dataPointer.catalogName
 ])
-const editorTab = ref<string>('query')
+const editorTab = ref<EditorTabType>(EditorTabType.Query)
+const resultTab = ref<ResultTabType>(ResultTabType.Raw)
 
 const queryCode = ref<string>(props.data?.query ? props.data.query : `// Write your EvitaQL query for catalog ${props.params.dataPointer.catalogName} here.\n`)
 const queryExtensions = ref<any[]>([])
 
 const variablesCode = ref<string>(props.data?.variables ? props.data.variables : '{\n  \n}')
 const variablesExtensions: Extension[] = [json()]
 
+const enteredQueryCode = ref<string>('')
 const resultCode = ref<string>('')
 const resultExtensions: Extension[] = [json()]
 
+const loading = ref<boolean>(false)
+
 async function executeQuery(): Promise<void> {
+    loading.value = true
     try {
         resultCode.value = await evitaQLConsoleService.executeEvitaQLQuery(props.params.dataPointer, queryCode.value, JSON.parse(variablesCode.value))
+        enteredQueryCode.value = queryCode.value
     } catch (error: any) {
         toaster.error(error)
     }
+    loading.value = false
 }
 
 emit('ready')
@@ -61,7 +84,7 @@ if (props.params.executeOnOpen) {
             :path="path"
         >
             <template #append>
-                <VExecuteQueryButton @click="executeQuery" />
+                <VExecuteQueryButton :loading="loading" @click="executeQuery" />
             </template>
         </VTabToolbar>
 
@@ -71,38 +94,36 @@ if (props.params.executeOnOpen) {
                     v-model="editorTab"
                     side="left"
                 >
-                    <VTab value="query">
+                    <VTab :value="EditorTabType.Query">
                         <VIcon>mdi-database-search</VIcon>
                         <VTooltip activator="parent">
                             Query
                         </VTooltip>
                     </VTab>
-                    <VTab value="variables">
+                    <VTab :value="EditorTabType.Variables">
                         <VIcon>mdi-variable</VIcon>
                         <VTooltip activator="parent">
                             Variables
                         </VTooltip>
                     </VTab>
                 </VSideTabs>
-
-                <VDivider class="mt-2 mb-2" />
             </VSheet>
 
             <Splitpanes vertical>
-                <Pane class="evitaql-editor-query">
+                <Pane class="evitaql-editor-pane">
                     <VWindow
                         v-model="editorTab"
                         direction="vertical"
                     >
-                        <VWindowItem value="query">
+                        <VWindowItem :value="EditorTabType.Query">
                             <CodemirrorFull
                                 v-model="queryCode"
                                 :additional-extensions="queryExtensions"
                                 @execute="executeQuery"
                             />
                         </VWindowItem>
 
-                        <VWindowItem value="variables">
+                        <VWindowItem :value="EditorTabType.Variables">
                             <CodemirrorFull
                                 v-model="variablesCode"
                                 :additional-extensions="variablesExtensions"
@@ -112,15 +133,51 @@ if (props.params.executeOnOpen) {
                     </VWindow>
                 </Pane>
 
-                <Pane>
-                    <CodemirrorFull
-                        v-model="resultCode"
-                        placeholder="Results will be displayed here..."
-                        read-only
-                        :additional-extensions="resultExtensions"
-                    />
+                <Pane min-size="20" class="evitaql-editor-pane">
+                    <VWindow
+                        v-model="resultTab"
+                        direction="vertical"
+                    >
+                        <VWindowItem :value="ResultTabType.Raw">
+                            <CodemirrorFull
+                                v-model="resultCode"
+                                placeholder="Results will be displayed here..."
+                                read-only
+                                :additional-extensions="resultExtensions"
+                            />
+                        </VWindowItem>
+
+                        <VWindowItem :value="ResultTabType.Visualiser">
+                            <LabEditorResultVisualiser
+                                :catalog-pointer="params.dataPointer"
+                                :visualiser-service="visualiserService"
+                                :input-query="enteredQueryCode || ''"
+                                :result="resultCode == undefined || !resultCode ? undefined : JSON.parse(resultCode)"
+                            />
+                        </VWindowItem>
+                    </VWindow>
                 </Pane>
             </Splitpanes>
+
+            <VSheet class="evitaql-editor-result-sections">
+                <VSideTabs
+                    v-model="resultTab"
+                    side="right"
+                >
+                    <VTab :value="ResultTabType.Raw">
+                        <VIcon>mdi-code-braces</VIcon>
+                        <VTooltip activator="parent">
+                            Raw JSON result
+                        </VTooltip>
+                    </VTab>
+                    <VTab :value="ResultTabType.Visualiser">
+                        <VIcon>mdi-file-tree-outline</VIcon>
+                        <VTooltip activator="parent">
+                            Result visualiser
+                        </VTooltip>
+                    </VTab>
+                </VSideTabs>
+            </VSheet>
         </div>
     </div>
 </template>
@@ -132,11 +189,11 @@ if (props.params.executeOnOpen) {
 
     &__body {
         display: grid;
-        grid-template-columns: 3rem 1fr;
+        grid-template-columns: 3rem 1fr 3rem;
     }
 }
 
-.evitaql-editor-query {
+.evitaql-editor-pane {
     & :deep(.v-window) {
         // we need to override the default tab window styles used in LabEditor
         position: absolute;
@@ -147,22 +204,8 @@ if (props.params.executeOnOpen) {
     }
 }
 
-.evitaql-editor-query-sections {
+.evitaql-editor-query-sections, .evitaql-editor-result-sections {
     display: flex;
     width: 3rem;
 }
-
-.v-slide-group {
-    & :deep(.v-tab) {
-
-        &:hover {
-            color: var(--el-color-primary-lightest);
-        }
-
-        &.v-tab--selected {
-            color: var(--el-color-primary-lightest);
-        }
-
-    }
-}
 </style>