Skip to content

Commit

Permalink
Merge pull request #66 from lukashornych/feature-62-console-visualiser
Browse files Browse the repository at this point in the history 
#62: improvements and fixes for result visualiser
  • Loading branch information
@lukashornych
lukashornych authored Nov 4, 2023
2 parents 5f19242 + 31c0810 commit a212ca2
Show file tree
Hide file tree
Showing 15 changed files with 545 additions and 195 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"uuid": "^9.0.0",
"vue": "^3.2.0",
"vue-codemirror": "^6.1.1",
"vue-histogram-slider": "^0.3.8",
"vue-hotkeys-rt": "^0.2.3",
"vue-router": "^4.0.0",
"vue-toastification": "^2.0.0-rc.5",
Expand Down
41 changes: 41 additions & 0 deletions src/components/base/VListItemLazyIterator.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<script setup lang="ts">
/**
* Allows pagination in form of a "show more" button.
*/
import { computed } from 'vue'
const props = defineProps<{
items: any[],
page: number,
pageSize: number
}>()
const emit = defineEmits<{
(e: 'update:page', page: number): void
}>()
const lastPage = computed<number>(() => {
return Math.ceil(props.items.length / props.pageSize)
})
const pageOfItems = computed<any[]>(() => {
return props.items.slice(0, props.page * props.pageSize)
})
</script>

<template>
<template v-for="(item, index) in pageOfItems" :key="index">
<slot name="item" :item="item" :index="index" />
</template>
<VListItem v-if="lastPage > 1 && page < lastPage>">

Check failure on line 29 in src/components/base/VListItemLazyIterator.vue

View workflow job for this annotation

GitHub Actions / Build 

Type 'number' has no signatures for which the type argument list is applicable.

Check failure on line 29 in src/components/base/VListItemLazyIterator.vue

View workflow job for this annotation

GitHub Actions / Build 

'lastPage' refers to a value, but is being used as a type here. Did you mean 'typeof lastPage'?
<VBtn
variant="outlined"
@click="emit('update:page', page + 1)"
>
Show more
</VBtn>
</VListItem>
</template>

<style lang="scss" scoped>
</style>
28 changes: 25 additions & 3 deletions src/components/lab/editor/result-visualiser/LabEditorResultVisualiser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,12 @@ const queries = computed<string[]>(() => {
}
})
watch(queries, (newValue) => {
// pre-select first a query on first load
if (selectedQuery.value == undefined && newValue.length > 0) {
selectedQuery.value = newValue[0]
return
}
if (!supportsMultipleQueries.value) {
if (newValue.length > 0) {
selectedQuery.value = newValue[0]
Expand All @@ -54,7 +60,12 @@ watch(queries, (newValue) => {
} else {
if (selectedQuery.value != undefined && !newValue.includes(selectedQuery.value as string)) {
// selected query was removed
selectedQuery.value = undefined
if (newValue.length > 0) {
// pre-select next available query
selectedQuery.value = newValue[0]
} else {
selectedQuery.value = undefined
}
}
}
})
Expand Down Expand Up @@ -103,9 +114,20 @@ const visualiserTypes = computed<VisualiserType[]>(() => {
}
})
watch(visualiserTypes, (newValue) => {
// pre-select first a visualiser type on first load
if (selectedVisualiserType.value == undefined && newValue.length > 0) {
selectedVisualiserType.value = newValue[0].value
return
}
if (selectedVisualiserType.value != undefined && !newValue.map(it => it.value).includes(selectedVisualiserType.value as VisualiserTypeType)) {
// selected result-result-visualiser type was removed
selectedVisualiserType.value = undefined
// selected visualiser type was removed
if (newValue.length > 0) {
// pre-select next available visualiser type
selectedVisualiserType.value = newValue[0].value
} else {
selectedVisualiserType.value = undefined
}
}
})
const selectedVisualiserType = ref<VisualiserTypeType | undefined>()
Expand Down
99 changes: 62 additions & 37 deletions .../editor/result-visualiser/facet-summary/LabEditorResultVisualiserFacetGroupStatistics.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,16 @@ import LabEditorResultVisualiserFacetStatistics
from '@/components/lab/editor/result-visualiser/facet-summary/LabEditorResultVisualiserFacetStatistics.vue'
import { ResultVisualiserService } from '@/services/editor/result-visualiser/result-visualiser.service'
import { Result, VisualisedFacetGroupStatistics } from '@/model/editor/result-visualiser'
import VListItemLazyIterator from '@/components/base/VListItemLazyIterator.vue'
import { ReferenceSchema } from '@/model/evitadb'
const facetStatisticsPageSize: number = 10
const toaster: Toaster = useToaster()
const props = defineProps<{
visualiserService: ResultVisualiserService,
referenceSchema: ReferenceSchema
queryResult: Result,
groupStatisticsResult: Result | undefined,
groupRepresentativeAttributes: string[],
Expand Down Expand Up @@ -50,7 +55,7 @@ const facetStatisticsResults = computed<Result[]>(() => {
return []
}
})
const facetStatisticsResultsPage = ref<number>(1)
function initializeFacets(): void {
// todo lho this makes quick hide of the facet group, it looks weird
Expand All @@ -73,47 +78,67 @@ function copyPrimaryKey(): void {
<VListGroup>
<template #activator="{ props }">
<VListItem v-bind="props" @click="initializeFacets">
<VListItemTitle class="group-title">
<span
v-if="groupStatistics?.primaryKey != undefined"
class="text-disabled d-flex align-center"
@click.stop="copyPrimaryKey"
>
<VIcon size="20" class="mr-1">mdi-key</VIcon>
{{ groupStatistics?.primaryKey }}{{ groupStatistics?.title ? ':' : '' }}
</span>
<span>
{{ groupStatistics?.title ?? 'Unknown' }}
<VTooltip v-if="!groupStatistics?.title" activator="parent">
<VMarkdown source="No `primaryKey` property or representative attributes were fetched." />
</VTooltip>
</span>
<template #prepend>
<VIcon>mdi-format-list-group</VIcon>
</template>
<template #title>
<VListItemTitle class="group-title">
<span
v-if="groupStatistics?.primaryKey != undefined"
class="text-disabled d-flex align-center"
@click.stop="copyPrimaryKey"
>
<VIcon size="20" class="mr-1">mdi-key</VIcon>
{{ groupStatistics?.primaryKey }}{{ groupStatistics?.title ? ':' : '' }}
</span>
<span>
{{ groupStatistics?.title ?? 'Unknown' }}
<VTooltip v-if="!groupStatistics?.title" activator="parent">
<VMarkdown source="No `primaryKey` property or representative attributes were fetched." />
</VTooltip>
</span>

<VChipGroup>
<VChip prepend-icon="mdi-counter">
<span>
{{ groupStatistics?.count ?? '-' }}
<VTooltip activator="parent">
<VMarkdown v-if="groupStatistics?.count == undefined" source="No `count` property was fetched." />
<!-- todo jno review explanation -->
<span v-else>The total number of entities matching any facet from this group without user filter.</span>
</VTooltip>
</span>
</VChip>
</VChipGroup>
</VListItemTitle>
<VLazy>
<VChipGroup>
<VChip prepend-icon="mdi-counter">
<span>
{{ groupStatistics?.count ?? '-' }}
<VTooltip activator="parent">
<VMarkdown v-if="groupStatistics?.count == undefined" source="No `count` property was fetched." />
<!-- todo jno review explanation -->
<span v-else>The total number of entities matching any facet from this group without user filter.</span>
</VTooltip>
</span>
</VChip>
<VChip v-if="!referenceSchema.referencedGroupTypeManaged" prepend-icon="mdi-open-in-new">
External
<VTooltip activator="parent">
This is only a reference to an external entity that is managed by external system.
</VTooltip>
</VChip>
</VChipGroup>
</VLazy>
</VListItemTitle>
</template>
</VListItem>
</template>

<template v-if="facetStatisticsInitialized">
<LabEditorResultVisualiserFacetStatistics
v-for="(facetStatisticsResult, index) in facetStatisticsResults"
:key="index"
:visualiser-service="visualiserService"
:query-result="queryResult"
:facet-statistics-result="facetStatisticsResult"
:facet-representative-attributes="facetRepresentativeAttributes"
/>
<VListItemLazyIterator
:items="facetStatisticsResults"
v-model:page="facetStatisticsResultsPage"
:page-size="facetStatisticsPageSize"
>
<template #item="{ item: facetStatisticsResult }">
<LabEditorResultVisualiserFacetStatistics
:visualiser-service="visualiserService"
:reference-schema="referenceSchema"
:query-result="queryResult"
:facet-statistics-result="facetStatisticsResult"
:facet-representative-attributes="facetRepresentativeAttributes"
/>
</template>
</VListItemLazyIterator>
</template>
</VListGroup>
</template>
Expand Down
99 changes: 68 additions & 31 deletions ...s/lab/editor/result-visualiser/facet-summary/LabEditorResultVisualiserFacetStatistics.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ import { UnexpectedError } from '@/model/lab'
import { Toaster, useToaster } from '@/services/editor/toaster'
import { ResultVisualiserService } from '@/services/editor/result-visualiser/result-visualiser.service'
import { Result, VisualisedFacetStatistics } from '@/model/editor/result-visualiser'
import { ReferenceSchema } from '@/model/evitadb'
const toaster: Toaster = useToaster()
const props = defineProps<{
visualiserService: ResultVisualiserService,
referenceSchema: ReferenceSchema,
queryResult: Result
facetStatisticsResult: Result,
facetRepresentativeAttributes: string[]
Expand Down Expand Up @@ -81,45 +83,68 @@ function copyPrimaryKey(): void {
</VTooltip>
</span>

<VChipGroup>
<VChip prepend-icon="mdi-numeric-positive-1">
<span>
{{ facetStatistics?.numberOfEntities ?? '-' }}
<VLazy>
<VChipGroup>
<VChip>
<div class="facet-title-counter">
<div class="facet-title-counter__section">
<VIcon>mdi-set-right</VIcon>
<span>{{ facetStatistics?.numberOfEntities ?? '-' }}&nbsp;/&nbsp;{{ facetStatistics?.impactDifference ?? '-' }}</span>
</div>
<div class="facet-title-counter__section">
<VIcon>mdi-set-all</VIcon>
<span>{{ facetStatistics?.impactMatchCount ?? '-' }}</span>
</div>
<div class="facet-title-counter__section">
<VIcon>mdi-counter</VIcon>
<span>{{ facetStatistics?.count ?? '-' }}</span>
</div>
</div>

<VTooltip activator="parent">
<VIcon>mdi-set-right</VIcon>
<br/>

<VMarkdown v-if="facetStatistics?.numberOfEntities == undefined" source="The `totalRecordCount` property was not found in neither `recordPage` nor `recordStrip`." />
<!-- todo jno review explanation -->
<span v-else>The total number of entities matching the user filter.</span>
</VTooltip>
</span>
<span>&nbsp;/&nbsp;</span>
<span>
{{ facetStatistics?.impactDifference ?? '-' }}
<VTooltip activator="parent">

<br/>

<VMarkdown v-if="facetStatistics?.impactDifference == undefined" source="The `impact.difference` property was not found." />
<!-- todo jno review explanation -->
<span v-else>The difference from the current number of entities matching the user filter if this facet was requested.</span>

<br/>
<br/>

<VIcon>mdi-set-all</VIcon>
<br/>

<VMarkdown v-if="facetStatistics?.impactMatchCount == undefined" source="The `impact.matchCount` property was not found." />
<!-- todo jno review explanation -->
<span v-else>The total number of entities matching the user filter if this facet was requested.</span>

<br/>
<br/>

<VIcon>mdi-counter</VIcon>
<br/>

<VMarkdown v-if="facetStatistics?.count == undefined" source="The `count` property was not found." />
<!-- todo jno review explanation -->
<span v-else>The total number of entities matching this facet without the user filter.</span>
</VTooltip>
</VChip>

<VChip v-if="!referenceSchema.referencedEntityTypeManaged" prepend-icon="mdi-open-in-new">
External
<VTooltip activator="parent">
This is only a reference to an external entity that is managed by external system.
</VTooltip>
</span>
</VChip>

<VChip prepend-icon="mdi-set-none">
{{ facetStatistics?.impactMatchCount ?? '-' }}
<VTooltip activator="parent">
<VMarkdown v-if="facetStatistics?.impactMatchCount == undefined" source="The `impact.matchCount` property was not found." />
<!-- todo jno review explanation -->
<span v-else>The total number of entities matching the user filter if this facet was requested.</span>
</VTooltip>
</VChip>

<VChip prepend-icon="mdi-counter">
{{ facetStatistics?.count ?? '-' }}
<VTooltip activator="parent">
<VMarkdown v-if="facetStatistics?.count == undefined" source="The `count` property was not found." />
<!-- todo jno review explanation -->
<span v-else>The total number of entities matching this facet without the user filter.</span>
</VTooltip>
</VChip>
</VChipGroup>
</VChip>
</VChipGroup>
</VLazy>
</VListItemTitle>
</template>
</VListItem>
Expand All @@ -137,4 +162,16 @@ function copyPrimaryKey(): void {
.facet-checkbox--disabled {
opacity: var(--v-disabled-opacity)
}
.facet-title-counter {
display: flex;
column-gap: 0.625rem;
align-items: center;
&__section {
display: flex;
column-gap: 0.25rem;
align-items: center;
}
}
</style>
14 changes: 13 additions & 1 deletion ...ents/lab/editor/result-visualiser/facet-summary/LabEditorResultVisualiserFacetSummary.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,25 @@ const referencesWithGroupStatisticsResults = computed<[ReferenceSchema, Result[]
return []
}
})
function getCountForReference(referenceSchema: ReferenceSchema, groupStatisticsResults: Result[]): number {
if (referenceSchema.referencedGroupType != undefined) {
return groupStatisticsResults.length
} else {
return props.visualiserService
.getFacetSummaryService()
.findFacetStatisticsResults(groupStatisticsResults[0])
.length
}
}
</script>

<template>
<VExpansionPanels v-if="referencesWithGroupStatisticsResults && referencesWithGroupStatisticsResults.length > 0" variant="accordion">
<VExpansionPanel v-for="referenceWithGroup in referencesWithGroupStatisticsResults" :key="referenceWithGroup[0].name">
<VExpansionPanelTitle>
{{ referenceWithGroup[0].name }} ({{ referenceWithGroup[1].length }})
<VIcon class="mr-8">mdi-link-variant</VIcon>
{{ referenceWithGroup[0].name }} ({{ getCountForReference(referenceWithGroup[0], referenceWithGroup[1]) }})
</VExpansionPanelTitle>
<VExpansionPanelText>
<LabEditorResultVisualiserReferenceFacetGroupStatistics
Expand Down
Loading

0 comments on commit a212ca2

Please sign in to comment.