From fd5059b6dca4c39c53bf30460fae6f83ed2c3be1 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 4 Dec 2023 14:18:59 +0100
Subject: [PATCH] sorting on cluster table

---
 .../src/components/ComparisonTableFilter.vue  | 123 +++++++
 .../src/components/ComparisonsTable.vue       | 332 ++++++++++++------
 .../src/components/SearchBarComponent.vue     |  25 +-
 report-viewer/src/views/ClusterView.vue       |   7 +-
 report-viewer/src/views/OverviewView.vue      | 180 +---------
 5 files changed, 366 insertions(+), 301 deletions(-)
 create mode 100644 report-viewer/src/components/ComparisonTableFilter.vue

diff --git a/report-viewer/src/components/ComparisonTableFilter.vue b/report-viewer/src/components/ComparisonTableFilter.vue
new file mode 100644
index 000000000..646a7d2c7
--- /dev/null
+++ b/report-viewer/src/components/ComparisonTableFilter.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="space-y-2">
+    <div class="flex flex-row flex-wrap items-center gap-x-8 gap-y-2">
+      <h2>{{ header }}</h2>
+      <ToolTipComponent direction="bottom" class="min-w-[50%] flex-grow">
+        <template #default>
+          <SearchBarComponent placeholder="Filter/Unhide Comparisons" v-model="searchStringValue" />
+        </template>
+        <template #tooltip>
+          <p class="whitespace-pre text-sm">
+            Type in the name of a submission to only show comparisons that contain this submission.
+          </p>
+          <p class="whitespace-pre text-sm">Fully written out names get unhidden.</p>
+        </template>
+      </ToolTipComponent>
+
+      <ButtonComponent class="w-24" @click="changeAnonymousForAll()">
+        {{
+          store().state.anonymous.size == store().getSubmissionIds.length ? 'Show All' : 'Hide All'
+        }}
+      </ButtonComponent>
+    </div>
+    <OptionsSelector
+      title="Sort By:"
+      :defaultSelected="getSortingMetric()"
+      :labels="tableSortingOptions"
+      @selection-changed="(index: number) => changeSortingMetric(index)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import SearchBarComponent from './SearchBarComponent.vue'
+import ToolTipComponent from './ToolTipComponent.vue'
+import ButtonComponent from './ButtonComponent.vue'
+import OptionsSelector from './optionsSelectors/OptionsSelectorComponent.vue'
+import { store } from '@/stores/store'
+import { MetricType, metricToolTips } from '@/model/MetricType'
+import type { ToolTipLabel } from '@/model/ui/ToolTip'
+
+const props = defineProps({
+  searchString: {
+    type: String,
+    default: ''
+  },
+  enableClusterSorting: {
+    type: Boolean,
+    default: true
+  },
+  header: {
+    type: String,
+    default: 'Top Comparisons:'
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'update:searchString', v: string): void
+}>()
+
+const searchStringValue = computed({
+  get: () => props.searchString,
+  set: (value) => {
+    emit('update:searchString', value)
+    // Update the anonymous set
+
+    const searches = value
+      .trimEnd()
+      .toLowerCase()
+      .split(/ +/g)
+      .map((s) => s.trim().replace(/,/g, ''))
+    if (searches.length == 0) {
+      return
+    }
+
+    for (const search of searches) {
+      for (const submissionId of store().getSubmissionIds) {
+        if (submissionId.toLowerCase() == search) {
+          store().state.anonymous.delete(submissionId)
+        }
+      }
+    }
+  }
+})
+
+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 && props.enableClusterSorting) {
+    return tableSortingOptions.value.indexOf('Cluster')
+  }
+  return tableSortingMetricOptions.indexOf(store().uiState.comparisonTableSortingMetric)
+}
+
+const tableSortingMetricOptions = [MetricType.AVERAGE, MetricType.MAXIMUM]
+const tableSortingOptions = computed(() => {
+  const options: (ToolTipLabel | string)[] = tableSortingMetricOptions.map((metric) => {
+    return {
+      displayValue: metricToolTips[metric].longName,
+      tooltip: metricToolTips[metric].tooltip
+    }
+  })
+  if (props.enableClusterSorting) {
+    options.push('Cluster')
+  }
+  return options
+})
+
+/**
+ * Sets the anonymous set to empty if it is full or adds all submission ids to it if it is not full
+ */
+function changeAnonymousForAll() {
+  if (store().state.anonymous.size == store().getSubmissionIds.length) {
+    store().state.anonymous.clear()
+  } else {
+    store().state.anonymous = new Set(store().getSubmissionIds)
+  }
+}
+</script>
diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 8798379a2..bc205c56e 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -3,135 +3,151 @@
 -->
 <template>
   <div class="flex flex-col">
-    <div class="font-bold">
-      <!-- Header -->
-      <div class="tableRow">
-        <div class="tableCellNumber"></div>
-        <div class="tableCellName items-center">Submissions in Comparison</div>
-        <div class="tableCellSimilarity !flex-col">
-          <div>Similarity</div>
-          <div class="flex w-full flex-row">
-            <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
-              <template #default>
-                <p class="w-full text-center">{{ metricToolTips[MetricType.AVERAGE].shortName }}</p>
-              </template>
-              <template #tooltip>
-                <p class="whitespace-pre text-sm">
-                  {{ metricToolTips[MetricType.AVERAGE].tooltip }}
-                </p>
-              </template>
-            </ToolTipComponent>
-
-            <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
-              <template #default>
-                <p class="w-full text-center">{{ metricToolTips[MetricType.MAXIMUM].shortName }}</p>
-              </template>
-              <template #tooltip>
-                <p class="whitespace-pre text-sm">
-                  {{ metricToolTips[MetricType.MAXIMUM].tooltip }}
-                </p>
-              </template>
-            </ToolTipComponent>
+    <ComparisonTableFilter
+      v-model:search-string="searchString"
+      :enable-cluster-sorting="clusters != undefined"
+      :header="header"
+    />
+
+    <div class="flex flex-col overflow-hidden">
+      <div class="font-bold">
+        <!-- Header -->
+        <div class="tableRow">
+          <div class="tableCellNumber"></div>
+          <div class="tableCellName items-center">Submissions in Comparison</div>
+          <div class="tableCellSimilarity !flex-col">
+            <div>Similarity</div>
+            <div class="flex w-full flex-row">
+              <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
+                <template #default>
+                  <p class="w-full text-center">
+                    {{ metricToolTips[MetricType.AVERAGE].shortName }}
+                  </p>
+                </template>
+                <template #tooltip>
+                  <p class="whitespace-pre text-sm">
+                    {{ metricToolTips[MetricType.AVERAGE].tooltip }}
+                  </p>
+                </template>
+              </ToolTipComponent>
+
+              <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
+                <template #default>
+                  <p class="w-full text-center">
+                    {{ metricToolTips[MetricType.MAXIMUM].shortName }}
+                  </p>
+                </template>
+                <template #tooltip>
+                  <p class="whitespace-pre text-sm">
+                    {{ metricToolTips[MetricType.MAXIMUM].tooltip }}
+                  </p>
+                </template>
+              </ToolTipComponent>
+            </div>
           </div>
+          <div class="tableCellCluster items-center" v-if="displayClusters">Cluster</div>
         </div>
-        <div class="tableCellCluster items-center" v-if="displayClusters">Cluster</div>
       </div>
-    </div>
 
-    <!-- Body -->
-    <div class="flex flex-grow flex-col overflow-hidden">
-      <DynamicScroller v-if="topComparisons.length > 0" :items="comparisonList" :min-item-size="48">
-        <template #default="{ item, index, active }">
-          <DynamicScrollerItem
-            :item="item"
-            :active="active"
-            :size-dependencies="[
-              item.firstSubmissionId,
-              item.secondSubmissionId,
-              store().isAnonymous(item.firstSubmissionId),
-              store().isAnonymous(item.secondSubmissionId)
-            ]"
-            :data-index="index"
-          >
-            <!-- Row -->
-            <div
-              class="tableRow"
-              :class="{
-                'bg-container-secondary-light dark:bg-container-secondary-dark': item.id % 2 == 1
-              }"
+      <!-- Body -->
+      <div class="flex flex-grow flex-col overflow-hidden">
+        <DynamicScroller
+          v-if="topComparisons.length > 0"
+          :items="displayedComparisons"
+          :min-item-size="48"
+        >
+          <template #default="{ item, index, active }">
+            <DynamicScrollerItem
+              :item="item"
+              :active="active"
+              :size-dependencies="[
+                item.firstSubmissionId,
+                item.secondSubmissionId,
+                store().isAnonymous(item.firstSubmissionId),
+                store().isAnonymous(item.secondSubmissionId)
+              ]"
+              :data-index="index"
             >
+              <!-- Row -->
               <div
-                @click="
-                  router.push({
-                    name: 'ComparisonView',
-                    params: { firstId: item.firstSubmissionId, secondId: item.secondSubmissionId }
-                  })
-                "
-                class="flex flex-grow cursor-pointer flex-row"
+                class="tableRow"
+                :class="{
+                  'bg-container-secondary-light dark:bg-container-secondary-dark': item.id % 2 == 1
+                }"
               >
-                <!-- Index in sorted list -->
-                <div class="tableCellNumber">
-                  <div class="w-full text-center">{{ item.sortingPlace + 1 }}</div>
-                </div>
-
-                <!-- Names -->
-                <div class="tableCellName">
-                  <NameElement :id="item.firstSubmissionId" class="h-full w-1/2 px-2" />
-                  <NameElement :id="item.secondSubmissionId" class="h-full w-1/2 px-2" />
-                </div>
+                <div
+                  @click="
+                    router.push({
+                      name: 'ComparisonView',
+                      params: { firstId: item.firstSubmissionId, secondId: item.secondSubmissionId }
+                    })
+                  "
+                  class="flex flex-grow cursor-pointer flex-row"
+                >
+                  <!-- Index in sorted list -->
+                  <div class="tableCellNumber">
+                    <div class="w-full text-center">{{ item.sortingPlace + 1 }}</div>
+                  </div>
 
-                <!-- Similarities -->
-                <div class="tableCellSimilarity">
-                  <div class="w-1/2">
-                    {{ (item.similarities[MetricType.AVERAGE] * 100).toFixed(2) }}%
+                  <!-- Names -->
+                  <div class="tableCellName">
+                    <NameElement :id="item.firstSubmissionId" class="h-full w-1/2 px-2" />
+                    <NameElement :id="item.secondSubmissionId" class="h-full w-1/2 px-2" />
                   </div>
-                  <div class="w-1/2">
-                    {{ (item.similarities[MetricType.MAXIMUM] * 100).toFixed(2) }}%
+
+                  <!-- Similarities -->
+                  <div class="tableCellSimilarity">
+                    <div class="w-1/2">
+                      {{ (item.similarities[MetricType.AVERAGE] * 100).toFixed(2) }}%
+                    </div>
+                    <div class="w-1/2">
+                      {{ (item.similarities[MetricType.MAXIMUM] * 100).toFixed(2) }}%
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <!-- Clusters -->
-              <div class="tableCellCluster flex !flex-col items-center" v-if="displayClusters">
-                <RouterLink
-                  v-for="index of getClusterIndexesFor(
-                    item.firstSubmissionId,
-                    item.secondSubmissionId
-                  )"
-                  v-bind:key="index"
-                  :to="{
-                    name: 'ClusterView',
-                    params: { clusterIndex: index }
-                  }"
-                  class="tect-center flex w-full justify-center"
-                >
-                  <ToolTipComponent class="w-fit" direction="left">
-                    <template #default>
-                      {{ clusters?.[index].members?.length }}
-                      <FontAwesomeIcon
-                        :icon="['fas', 'user-group']"
-                        :style="{ color: clusterIconColors[index] }"
-                      />
-                      {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
-                    </template>
-                    <template #tooltip>
-                      <p class="whitespace-nowrap text-sm">
-                        {{ clusters?.[index].members?.length }} submissions in cluster with average
-                        similarity of
+                <!-- Clusters -->
+                <div class="tableCellCluster flex !flex-col items-center" v-if="displayClusters">
+                  <RouterLink
+                    v-for="index of getClusterIndexesFor(
+                      item.firstSubmissionId,
+                      item.secondSubmissionId
+                    )"
+                    v-bind:key="index"
+                    :to="{
+                      name: 'ClusterView',
+                      params: { clusterIndex: index }
+                    }"
+                    class="flex w-full justify-center text-center"
+                  >
+                    <ToolTipComponent class="w-fit" direction="left">
+                      <template #default>
+                        {{ clusters?.[index].members?.length }}
+                        <FontAwesomeIcon
+                          :icon="['fas', 'user-group']"
+                          :style="{ color: clusterIconColors[index] }"
+                        />
                         {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
-                      </p>
-                    </template>
-                  </ToolTipComponent>
-                </RouterLink>
+                      </template>
+                      <template #tooltip>
+                        <p class="whitespace-nowrap text-sm">
+                          {{ clusters?.[index].members?.length }} submissions in cluster with
+                          average similarity of
+                          {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
+                        </p>
+                      </template>
+                    </ToolTipComponent>
+                  </RouterLink>
+                </div>
               </div>
-            </div>
-          </DynamicScrollerItem>
-        </template>
+            </DynamicScrollerItem>
+          </template>
 
-        <template #after>
-          <slot name="footer"></slot>
-        </template>
-      </DynamicScroller>
+          <template #after>
+            <slot name="footer"></slot>
+          </template>
+        </DynamicScroller>
+      </div>
     </div>
   </div>
 </template>
@@ -139,7 +155,7 @@
 <script setup lang="ts">
 import type { Cluster } from '@/model/Cluster'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
-import { toRef } from 'vue'
+import { computed, ref } from 'vue'
 import { store } from '@/stores/store'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -150,6 +166,7 @@ import ToolTipComponent from './ToolTipComponent.vue'
 import { MetricType, metricToolTips } from '@/model/MetricType'
 import NameElement from './NameElement.vue'
 import { router } from '@/router'
+import ComparisonTableFilter from './ComparisonTableFilter.vue'
 
 library.add(faUserGroup)
 
@@ -161,10 +178,93 @@ const props = defineProps({
   clusters: {
     type: Array<Cluster>,
     required: false
+  },
+  header: {
+    type: String,
+    default: 'Top Comparisons:'
   }
 })
 
-const comparisonList = toRef(props, 'topComparisons')
+const displayedComparisons = computed(() => {
+  const comparisons = getFilteredComparisons(getSortedComparisons(props.topComparisons))
+  let index = 1
+  comparisons.forEach((c) => {
+    c.id = index++
+  })
+  return comparisons
+})
+
+const searchString = ref('')
+
+/**
+ * This function gets called when the search bar for the comparison table has been updated.
+ * It updates the displayed comparisons to only show the ones that  have part of any search result in their id. The search is not case sensitive. The parts can be separated by commas or spaces.
+ * It also updates the anonymous set to unhide a submission if its name was typed in the search bar at any point in time.
+ *
+ * @param newVal The new value of the search bar
+ */
+function getFilteredComparisons(comparisons: ComparisonListElement[]) {
+  const searches = searchString.value
+    .trimEnd()
+    .toLowerCase()
+    .split(/ +/g)
+    .map((s) => s.trim().replace(/,/g, ''))
+  if (searches.length == 0) {
+    return comparisons
+  }
+
+  return comparisons.filter((c) => {
+    const id1 = c.firstSubmissionId.toLowerCase()
+    const id2 = c.secondSubmissionId.toLowerCase()
+    return searches.some((s) => id1.includes(s) || id2.includes(s))
+  })
+}
+
+function getClusterIndexFor(id1: string, id2: string) {
+  let clusterIndex = -1
+  props.clusters?.forEach((c: Cluster, index: number) => {
+    if (c.members.includes(id1) && c.members.includes(id2) && c.members.length > 2) {
+      clusterIndex = index
+    }
+  })
+  return clusterIndex
+}
+
+function getSortedComparisons(comparisons: ComparisonListElement[]) {
+  comparisons.sort(
+    (a, b) =>
+      b.similarities[store().uiState.comparisonTableSortingMetric] -
+      a.similarities[store().uiState.comparisonTableSortingMetric]
+  )
+
+  if (store().uiState.comparisonTableClusterSorting) {
+    comparisons.sort(
+      (a, b) =>
+        getClusterIndexFor(b.firstSubmissionId, b.secondSubmissionId) -
+        getClusterIndexFor(a.firstSubmissionId, a.secondSubmissionId)
+    )
+
+    comparisons.sort(
+      (a, b) =>
+        getClusterFor(b.firstSubmissionId, b.secondSubmissionId).averageSimilarity -
+        getClusterFor(a.firstSubmissionId, a.secondSubmissionId).averageSimilarity
+    )
+  }
+
+  let index = 0
+  comparisons.forEach((c) => {
+    c.sortingPlace = index++
+  })
+  return props.topComparisons
+}
+
+function getClusterFor(id1: string, id2: string) {
+  const index = getClusterIndexFor(id1, id2)
+  if (index < 0 || !props.clusters) {
+    return { averageSimilarity: 0 }
+  }
+  return props.clusters[index]
+}
 
 const displayClusters = props.clusters != undefined
 
diff --git a/report-viewer/src/components/SearchBarComponent.vue b/report-viewer/src/components/SearchBarComponent.vue
index 1c9b315f5..56b60ffde 100644
--- a/report-viewer/src/components/SearchBarComponent.vue
+++ b/report-viewer/src/components/SearchBarComponent.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed } from 'vue'
 import Interactable from './InteractableComponent.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -26,19 +26,30 @@ import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faMagnifyingGlass)
 
-defineProps({
+const props = defineProps({
   placeholder: {
     type: String,
     default: 'Search...',
     required: false
+  },
+  modelValue: {
+    type: String,
+    default: '',
+    required: false
   }
 })
 
-const emit = defineEmits(['inputChanged', 'searchClicked'])
+const emit = defineEmits<{
+  (e: 'inputChanged', v: string): void
+  (e: 'searchClicked', v: string): void
+  (e: 'update:modelValue', v: string): void
+}>()
 
-const inputText = ref('')
-
-watch(inputText, (newVal) => {
-  emit('inputChanged', newVal)
+const inputText = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+    emit('inputChanged', value)
+  }
 })
 </script>
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index e5984b199..5313f5202 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -16,8 +16,11 @@
         <ClusterRadarChart :cluster="clusterListElement" class="flex-grow" />
       </Container>
       <Container class="flex max-h-0 min-h-full w-1/3 flex-col space-y-2">
-        <h2>Comparisons of Cluster Members:</h2>
-        <ComparisonsTable :topComparisons="comparisons" class="min-h-0 flex-1">
+        <ComparisonsTable
+          :topComparisons="comparisons"
+          class="min-h-0 flex-1"
+          header="Comparisons of Cluster Members:"
+        >
           <template #footer v-if="comparisons.length < maxAmountOfComparisonsInCluster">
             <p class="w-full pt-1 text-center font-bold">
               Not all comparisons inside the cluster are shown. To see more, re-run JPlag with a
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 14d9eb7f3..86717add0 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -98,42 +98,10 @@
         </div>
       </Container>
 
-      <Container class="flex max-h-0 min-h-full flex-1 flex-col space-y-2">
-        <div class="flex flex-row items-center space-x-8">
-          <h2>Top Comparisons:</h2>
-          <ToolTipComponent direction="bottom" class="flex-grow">
-            <template #default>
-              <SearchBarComponent
-                placeholder="Filter/Unhide Comparisons"
-                @input-changed="(value) => (searchString = value)"
-              />
-            </template>
-            <template #tooltip>
-              <p class="whitespace-pre text-sm">
-                Type in the name of a submission to only show comparisons that contain this
-                submission.
-              </p>
-              <p class="whitespace-pre text-sm">Fully written out names get unhidden.</p>
-            </template>
-          </ToolTipComponent>
-
-          <Button class="w-24" @click="changeAnnoymousForAll()">
-            {{
-              store().state.anonymous.size == store().getSubmissionIds.length
-                ? 'Show All'
-                : 'Hide All'
-            }}
-          </Button>
-        </div>
-        <OptionsSelector
-          title="Sort By:"
-          :defaultSelected="getSortingMetric()"
-          :labels="tableSortingOptions"
-          @selection-changed="(index: number) => changeSortingMetric(index)"
-        />
+      <Container class="flex max-h-0 min-h-full flex-1 flex-col">
         <ComparisonsTable
           :clusters="overview.clusters"
-          :top-comparisons="displayedComparisons"
+          :top-comparisons="overview.topComparisons"
           class="min-h-0 flex-1"
         >
           <template #footer v-if="overview.topComparisons.length < overview.totalComparisons">
@@ -149,7 +117,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, type PropType, onErrorCaptured } from 'vue'
+import { computed, type PropType, onErrorCaptured } from 'vue'
 import { redirectOnError, router } from '@/router'
 import DistributionDiagram from '@/components/DistributionDiagram.vue'
 import ComparisonsTable from '@/components/ComparisonsTable.vue'
@@ -157,16 +125,12 @@ import { store } from '@/stores/store'
 import Container from '@/components/ContainerComponent.vue'
 import Button from '@/components/ButtonComponent.vue'
 import ScrollableComponent from '@/components/ScrollableComponent.vue'
-import { MetricType, metricToolTips } from '@/model/MetricType'
-import SearchBarComponent from '@/components/SearchBarComponent.vue'
+import { MetricType } from '@/model/MetricType'
 import TextInformation from '@/components/TextInformation.vue'
-import type { ComparisonListElement } from '@/model/ComparisonListElement'
 import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
 import ToolTipComponent from '@/components/ToolTipComponent.vue'
 import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
 import { Overview } from '@/model/Overview'
-import type { Cluster } from '@/model/Cluster'
-import type { ToolTipLabel } from '@/model/ui/ToolTip'
 
 const props = defineProps({
   overview: {
@@ -175,142 +139,6 @@ const props = defineProps({
   }
 })
 
-const searchString = ref('')
-const tableSortingMetricOptions = [MetricType.AVERAGE, MetricType.MAXIMUM]
-const tableSortingOptions = computed(() => {
-  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.
- * It updates the displayed comparisons to only show the ones that  have part of any search result in their id. The search is not case sensitive. The parts can be seprarated by commas or spaces.
- * It also updates the annonmous set to unhide a submission if its name was typed in the search bar at any point in time.
- *
- * @param newVal The new value of the search bar
- */
-function getFilteredComparisons(comparisons: ComparisonListElement[]) {
-  const searches = searchString.value
-    .trimEnd()
-    .toLowerCase()
-    .split(/ +/g)
-    .map((s) => s.trim().replace(/,/g, ''))
-  if (searches.length == 0) {
-    return comparisons
-  }
-
-  return comparisons.filter((c) => {
-    const id1 = c.firstSubmissionId.toLowerCase()
-    const id2 = c.secondSubmissionId.toLowerCase()
-    return searches.some((s) => id1.includes(s) || id2.includes(s))
-  })
-}
-
-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) {
-    comparisons.sort(
-      (a, b) =>
-        getClusterIndexFor(b.firstSubmissionId, b.secondSubmissionId) -
-        getClusterIndexFor(a.firstSubmissionId, a.secondSubmissionId)
-    )
-
-    comparisons.sort(
-      (a, b) =>
-        getClusterFor(b.firstSubmissionId, b.secondSubmissionId).averageSimilarity -
-        getClusterFor(a.firstSubmissionId, a.secondSubmissionId).averageSimilarity
-    )
-  }
-
-  let index = 0
-  comparisons.forEach((c) => {
-    c.sortingPlace = index++
-  })
-  return props.overview.topComparisons
-}
-
-const displayedComparisons = computed(() => {
-  const comparisons = getFilteredComparisons(getSortedComparisons(props.overview.topComparisons))
-  let index = 1
-  comparisons.forEach((c) => {
-    c.id = index++
-  })
-  return comparisons
-})
-
-// Update the anonymous set
-watch(searchString, () => {
-  const searches = searchString.value
-    .trimEnd()
-    .toLowerCase()
-    .split(/ +/g)
-    .map((s) => s.trim().replace(/,/g, ''))
-  if (searches.length == 0) {
-    return
-  }
-
-  for (const search of searches) {
-    for (const submissionId of store().getSubmissionIds) {
-      if (submissionId.toLowerCase() == search) {
-        store().state.anonymous.delete(submissionId)
-      }
-    }
-  }
-})
-
-/**
- * Sets the annonymous set to empty if it is full or adds all submission ids to it if it is not full
- */
-function changeAnnoymousForAll() {
-  if (store().state.anonymous.size == store().getSubmissionIds.length) {
-    store().state.anonymous.clear()
-  } else {
-    store().state.anonymous = new Set(store().getSubmissionIds)
-  }
-}
-
 const hasMoreSubmissionPaths = computed(() => props.overview.submissionFolderPath.length > 1)
 const submissionPathValue = computed(() =>
   hasMoreSubmissionPaths.value