From 1fa852d7422a3c6d5ac832a6285c97ae3756dec2 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Mon, 9 Oct 2023 15:11:01 +0200 Subject: [PATCH 1/7] hiding in table --- .../src/components/ComparisonsTable.vue | 58 +++++-------------- report-viewer/src/components/NameElement.vue | 55 ++++++++++++++++++ report-viewer/src/stores/store.ts | 9 ++- 3 files changed, 77 insertions(+), 45 deletions(-) create mode 100644 report-viewer/src/components/NameElement.vue diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue index c22f40f70..4aee674c0 100644 --- a/report-viewer/src/components/ComparisonsTable.vue +++ b/report-viewer/src/components/ComparisonsTable.vue @@ -48,8 +48,8 @@ :size-dependencies="[ item.firstSubmissionId, item.secondSubmissionId, - isAnonymous(item.firstSubmissionId), - isAnonymous(item.secondSubmissionId) + store().isAnonymous(item.firstSubmissionId), + store().isAnonymous(item.secondSubmissionId) ]" :data-index="index" > @@ -60,11 +60,13 @@ 'bg-container-secondary-light dark:bg-container-secondary-dark': item.id % 2 == 1 }" > - @@ -74,26 +76,8 @@
-
- {{ - isAnonymous(item.firstSubmissionId) - ? 'Hidden' - : displayName(item.firstSubmissionId) - }} -
-
- {{ - isAnonymous(item.secondSubmissionId) - ? 'Hidden' - : displayName(item.secondSubmissionId) - }} -
+ +
@@ -105,7 +89,7 @@ {{ (item.similarities[MetricType.MAXIMUM] * 100).toFixed(2) }}% - +
@@ -160,6 +144,8 @@ import { faUserGroup } from '@fortawesome/free-solid-svg-icons' import { generateColors } from '@/utils/ColorUtils' import ToolTipComponent from './ToolTipComponent.vue' import { MetricType, metricToolTips } from '@/model/MetricType' +import NameElement from './NameElement.vue' +import { router } from '@/router' library.add(faUserGroup) @@ -178,22 +164,6 @@ const comparisonList = toRef(props, 'topComparisons') const displayClusters = props.clusters != undefined -/** - * @param submissionId Id to get name for - * @returns The display name of the submission with the given id. - */ -function displayName(submissionId: string) { - return store().submissionDisplayName(submissionId) -} - -/** - * @param id SubmissionId to check - * @returns Whether the name should be hidden. - */ -function isAnonymous(id: string) { - return store().state.anonymous.has(id) -} - let clusterIconColors = [] as Array if (props.clusters != undefined) { clusterIconColors = generateColors(props.clusters.length, 0.8, 0.5, 1) diff --git a/report-viewer/src/components/NameElement.vue b/report-viewer/src/components/NameElement.vue new file mode 100644 index 000000000..ce9eb8c2b --- /dev/null +++ b/report-viewer/src/components/NameElement.vue @@ -0,0 +1,55 @@ + + + diff --git a/report-viewer/src/stores/store.ts b/report-viewer/src/stores/store.ts index 08f2ad702..90a0203a1 100644 --- a/report-viewer/src/stores/store.ts +++ b/report-viewer/src/stores/store.ts @@ -48,7 +48,7 @@ const store = defineStore('store', { * @returns the display name of the submission */ submissionDisplayName: (state) => (id: string) => { - return state.state.fileIdToDisplayName.get(id) + return state.state.fileIdToDisplayName.get(id) ?? id }, /** * @returns the Ids of all submissions @@ -77,6 +77,13 @@ const store = defineStore('store', { : undefined return index != undefined ? this.state.files[index] : undefined } + }, + /** + * @param id the id to check for + * @returns whether this submission should be anonymised + */ + isAnonymous: (state) => (submissionId: string) => { + return state.state.anonymous.has(submissionId) } }, actions: { From 14cc2600c2a68899ad70e36dad991992f14e948e Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Tue, 10 Oct 2023 10:55:07 +0200 Subject: [PATCH 2/7] sort by cluster --- .../OptionsSelectorComponent.vue | 6 +- report-viewer/src/model/MetricType.ts | 2 +- report-viewer/src/model/ui/ToolTip.ts | 4 + report-viewer/src/stores/state.ts | 1 + report-viewer/src/stores/store.ts | 1 + report-viewer/src/views/OverviewView.vue | 73 +++++++++++++++++-- 6 files changed, 74 insertions(+), 13 deletions(-) create mode 100644 report-viewer/src/model/ui/ToolTip.ts diff --git a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue index 94397decd..1e825d587 100644 --- a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue +++ b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue @@ -36,11 +36,7 @@ import { ref } from 'vue' import ToolTipComponent from '../ToolTipComponent.vue' import OptionComponent from './OptionComponent.vue' - -type ToolTipLabel = { - displayValue: string - tooltip: string -} +import { type ToolTipLabel } from '@/model/ui/ToolTip' const props = defineProps({ title: { diff --git a/report-viewer/src/model/MetricType.ts b/report-viewer/src/model/MetricType.ts index 08c81d072..5b4ab874e 100644 --- a/report-viewer/src/model/MetricType.ts +++ b/report-viewer/src/model/MetricType.ts @@ -6,7 +6,7 @@ export enum MetricType { MAXIMUM = 'MAX' } -type MetricToolTipData = { +export type MetricToolTipData = { longName: string shortName: string tooltip: string diff --git a/report-viewer/src/model/ui/ToolTip.ts b/report-viewer/src/model/ui/ToolTip.ts new file mode 100644 index 000000000..c8149957c --- /dev/null +++ b/report-viewer/src/model/ui/ToolTip.ts @@ -0,0 +1,4 @@ +export type ToolTipLabel = { + displayValue: string + tooltip: string +} diff --git a/report-viewer/src/stores/state.ts b/report-viewer/src/stores/state.ts index 9eb9d80db..03e5543d8 100644 --- a/report-viewer/src/stores/state.ts +++ b/report-viewer/src/stores/state.ts @@ -70,6 +70,7 @@ export interface LoadConfiguration { export interface UIState { useDarkMode: boolean comparisonTableSortingMetric: MetricType + comparisonTableClusterSorting: boolean distributionChartConfig: DistributionChartConfig } diff --git a/report-viewer/src/stores/store.ts b/report-viewer/src/stores/store.ts index 90a0203a1..b4b714459 100644 --- a/report-viewer/src/stores/store.ts +++ b/report-viewer/src/stores/store.ts @@ -23,6 +23,7 @@ const store = defineStore('store', { uiState: { useDarkMode: false, comparisonTableSortingMetric: MetricType.AVERAGE, + comparisonTableClusterSorting: false, distributionChartConfig: { metric: MetricType.AVERAGE, xScale: 'linear' diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue index fb6d9f33d..54dc9f4da 100644 --- a/report-viewer/src/views/OverviewView.vue +++ b/report-viewer/src/views/OverviewView.vue @@ -91,12 +91,11 @@ }}
- { + const options: (ToolTipLabel | string)[] = tableSortingMetricOptions.map((metric) => { + return { + displayValue: metricToolTips[metric].longName, + tooltip: metricToolTips[metric].tooltip + } + }) + options.push('Cluster') + return options +}) + +function changeSortingMetric(index: number) { + store().uiState.comparisonTableSortingMetric = + index < tableSortingMetricOptions.length ? tableSortingMetricOptions[index] : MetricType.AVERAGE + store().uiState.comparisonTableClusterSorting = tableSortingOptions.value[index] == 'Cluster' +} + +function getSortingMetric() { + if (store().uiState.comparisonTableClusterSorting) { + return tableSortingOptions.value.indexOf('Cluster') + } + return tableSortingMetricOptions.indexOf(store().uiState.comparisonTableSortingMetric) +} /** * This funtion gets called when the search bar for the compariosn table has been updated. @@ -159,12 +184,46 @@ function getFilteredComparisons(comparisons: ComparisonListElement[]) { }) } +function getClusterIndexFor(id1: string, id2: string) { + let clusterIndex = -1 + props.overview.clusters.forEach((c: Cluster, index: number) => { + if (c.members.includes(id1) && c.members.includes(id2) && c.members.length > 2) { + clusterIndex = index + } + }) + return clusterIndex +} + +function getClusterFor(id1: string, id2: string) { + const index = getClusterIndexFor(id1, id2) + if (index < 0) { + return { averageSimilarity: 0 } + } + return props.overview.clusters[index] +} + function getSortedComparisons(comparisons: ComparisonListElement[]) { comparisons.sort( (a, b) => b.similarities[store().uiState.comparisonTableSortingMetric] - a.similarities[store().uiState.comparisonTableSortingMetric] ) + + if (store().uiState.comparisonTableClusterSorting) { + console.log('CLuster') + comparisons.sort( + (a, b) => + getClusterFor(b.firstSubmissionId, b.secondSubmissionId).averageSimilarity - + getClusterFor(a.firstSubmissionId, a.secondSubmissionId).averageSimilarity + ) + + comparisons.sort( + (a, b) => + getClusterIndexFor(b.firstSubmissionId, b.secondSubmissionId) - + getClusterIndexFor(a.firstSubmissionId, a.secondSubmissionId) + ) + } + let index = 0 comparisons.forEach((c) => { c.sortingPlace = index++ From 6df5368a7b51376560b7a0f399154fad4ce76769 Mon Sep 17 00:00:00 2001 From: Alex | Kronox Date: Tue, 10 Oct 2023 12:25:01 +0200 Subject: [PATCH 3/7] missing comparisons warning --- report-viewer/src/components/ComparisonsTable.vue | 6 +++++- report-viewer/src/views/ClusterView.vue | 12 +++++++++++- report-viewer/src/views/OverviewView.vue | 9 ++++++++- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue index 4aee674c0..50f28906e 100644 --- a/report-viewer/src/components/ComparisonsTable.vue +++ b/report-viewer/src/components/ComparisonsTable.vue @@ -41,7 +41,7 @@
-