Enhance search bar of comparison table

report-viewer/src/components/ComparisonTableFilter.vue

@@ -2,7 +2,7 @@
   <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">
+      <ToolTipComponent direction="left" class="min-w-[50%] flex-grow">
         <template #default>
           <SearchBarComponent placeholder="Filter/Unhide Comparisons" v-model="searchStringValue" />
         </template>
@@ -11,6 +11,15 @@
             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>
+          <p class="whitespace-pre text-sm">
+            You can also filter by index by entering a number or typing <i>index:number</i>
+          </p>
+          <p class="whitespace-pre text-sm">
+            You can filter for specific similarity thresholds via &lt;/&gt;/&lt;=/&gt;= followed by
+            the percentage. <br />
+            You can filter for a specific metric by prefacing the percentage with the three-letter
+            metric name (e.g. <i>avg:>80</i>)
+          </p>
         </template>
       </ToolTipComponent>
 

report-viewer/src/components/ComparisonsTable.vue

@@ -228,11 +228,83 @@ function getFilteredComparisons(comparisons: ComparisonListElement[]) {
     return comparisons
   }
 
+  const indexSearches = searches
+    .filter((s) => /index:[0-9]+/.test(s))
+    .map((s) => s.substring(6))
+    .map((s) => parseInt(s))
+
+  const metricSearches = searches.filter((s) => /((avg|max):)?([<>])=?[0-9]+%?/.test(s))
+
   return comparisons.filter((c) => {
+    // name search
     const id1 = c.firstSubmissionId.toLowerCase()
     const id2 = c.secondSubmissionId.toLowerCase()
-    return searches.some((s) => id1.includes(s) || id2.includes(s))
+    if (searches.some((s) => id1.includes(s) || id2.includes(s))) {
+      return true
+    }
+
+    // index search
+    if (indexSearches.includes(c.sortingPlace + 1)) {
+      return true
+    }
+    if (searches.some((s) => (c.sortingPlace + 1).toString().includes(s))) {
+      return true
+    }
+
+    // metric search
+    const searchPerMetric: Record<MetricType, string[]> = {
+      [MetricType.AVERAGE]: [],
+      [MetricType.MAXIMUM]: []
+    }
+    metricSearches.forEach((s) => {
+      const regexResult = /^(?:(avg|max):)?((?:[<>])=?[0-9]+%?$)/.exec(s)
+      if (regexResult) {
+        const metricName = regexResult[1]
+        let metric = MetricType.AVERAGE
+        for (const m of [MetricType.AVERAGE, MetricType.MAXIMUM]) {
+          if (metricToolTips[m].shortName.toLowerCase() == metricName) {
+            metric = m
+            break
+          }
+        }
+        searchPerMetric[metric].push(regexResult[2])
+      } else {
+        searchPerMetric[MetricType.AVERAGE].push(s)
+        searchPerMetric[MetricType.MAXIMUM].push(s)
+      }
+    })
+    for (const metric of [MetricType.AVERAGE, MetricType.MAXIMUM]) {
+      for (const search of searchPerMetric[metric]) {
+        const regexResult = /((?:[<>])=?)([0-9]+)%?/.exec(search)!
+        const operator = regexResult[1]
+        const value = parseInt(regexResult[2])
+        if (evaluateMetricComparison(c.similarities[metric] * 100, operator, value)) {
+          return true
+        }
+      }
+    }
+
+    return false
   })
+
+  function evaluateMetricComparison(
+    comparisonMetric: number,
+    operator: string,
+    checkValue: number
+  ) {
+    switch (operator) {
+      case '>':
+        return comparisonMetric > checkValue
+      case '<':
+        return comparisonMetric < checkValue
+      case '>=':
+        return comparisonMetric >= checkValue
+      case '<=':
+        return comparisonMetric <= checkValue
+      default:
+        return false
+    }
+  }
 }
 
 function getSortedComparisons(comparisons: ComparisonListElement[]) {

report-viewer/tests/e2e/Comparison.spec.ts

@@ -6,9 +6,7 @@ test('Test comparison table and comparsion view', async ({ page }) => {
 
   await uploadFile('progpedia-report.zip', page)
 
-  const comparisonContainer = page.getByText(
-    'Top Comparisons: Type in the name of a submission to only show comparisons that contain this submission. Fully written out names get unhidden.Hide AllSort By'
-  )
+  const comparisonContainer = page.getByText('Hide AllSort By')
 
   // check for elements in average similarity table
   await page.getByPlaceholder('Filter/Unhide Comparisons').fill('Purple')