feat (Performance Overview): Allow user to hide metrics from tables.

src/components/filters/Filters.tsx

@@ -26,6 +26,7 @@ import { FilterableMultiSelect, Tag, Tooltip, Button } from '@carbon/react';
 import { ChevronUp, ChevronDown, Filter } from '@carbon/icons-react';
 
 import classes from './Filters.module.scss';
+
 // ===================================================================================
 //                                TYPES
 // ===================================================================================

src/views/performance-overview/FilterMetrics.module.scss

@@ -0,0 +1,69 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/colors' as *;
+
+.filterMetricsBtnTooltip {
+  align-self: center;
+  margin-bottom: $spacing-03;
+}
+
+.filterMetricsBtn {
+  display: flex;
+  column-gap: $spacing-04;
+  padding: $spacing-03;
+  color: inherit !important;
+}
+
+.filterMetricsBtnElements {
+  display: flex;
+  column-gap: $spacing-04;
+  align-items: center;
+}
+
+.filterMetricsBtnCaptionElements {
+  display: flex;
+  column-gap: $spacing-02;
+  align-items: center;
+}
+
+.container {
+  margin: 0 0 $spacing-03 $spacing-05;
+  padding: $spacing-05;
+  display: none;
+  column-gap: $spacing-09;
+  box-shadow: 0 0 5px 2px $gray-40;
+}
+
+.visible {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: fade-in 0.5s;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

src/views/performance-overview/FilterMetrics.tsx

@@ -0,0 +1,109 @@
+/**
+ *
+ * Copyright 2023-2024 InspectorRAGet Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ **/
+
+'use client';
+
+import cx from 'classnames';
+import { useState } from 'react';
+
+import { FilterableMultiSelect, Tag, Tooltip, Button } from '@carbon/react';
+import { ChevronUp, ChevronDown, SubtractAlt } from '@carbon/icons-react';
+
+import { Metric } from '@/src/types';
+import { extractMetricDisplayName } from '@/src/utilities/metrics';
+
+import classes from './FilterMetrics.module.scss';
+
+// ===================================================================================
+//                                TYPES
+// ===================================================================================
+interface Props {
+  metrics: Metric[];
+  hiddenMetrics: Metric[];
+  setHiddenMetrics: Function;
+}
+
+export default function FilterMetrics({
+  metrics,
+  hiddenMetrics: ignoredMetrics,
+  setHiddenMetrics: setIgnoredMetrics,
+}: Props) {
+  // Step 1: Initialize state and necessary variables
+  const [showIgnoreMetrics, setShowIgnoreMetrics] = useState<boolean>(true);
+
+  // Step 2: Render
+  return (
+    <>
+      <Tooltip
+        label={'Click to hide certain metrics'}
+        align={'right'}
+        className={classes.filterMetricsBtnTooltip}
+      >
+        <Button
+          id={'PerformanceOverview-metrics--Ignore'}
+          className={classes.filterMetricsBtn}
+          kind={'ghost'}
+          size={'sm'}
+          onClick={() => {
+            setShowIgnoreMetrics(!showIgnoreMetrics);
+          }}
+        >
+          <div className={classes.filterMetricsBtnElements}>
+            {showIgnoreMetrics ? (
+              <ChevronUp size={24} />
+            ) : (
+              <ChevronDown size={24} />
+            )}
+            <div className={classes.filterMetricsBtnCaptionElements}>
+              <h5>Hide Metrics</h5>
+              <SubtractAlt />
+            </div>
+          </div>
+        </Button>
+      </Tooltip>
+      {showIgnoreMetrics ? (
+        <div
+          className={cx(
+            classes.container,
+            showIgnoreMetrics && classes.visible,
+          )}
+        >
+          <FilterableMultiSelect
+            id={'metrics--limiter'}
+            items={metrics}
+            itemToString={(item) =>
+              item.displayName ? item.displayName : item.name
+            }
+            onChange={(event) => {
+              setIgnoredMetrics(event.selectedItems);
+            }}
+          ></FilterableMultiSelect>
+          <div>
+            {ignoredMetrics.map((metric) => {
+              return (
+                <Tag type={'cool-gray'} key={`filtered-metric--` + metric.name}>
+                  {extractMetricDisplayName(metric)}
+                </Tag>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}

src/views/performance-overview/PerformanceOverview.module.scss

@@ -52,7 +52,7 @@
 }
 
 .seperator {
-  border: 1px dotted black;
+  border: 1px dotted var(--cds-border-inverse);
   margin: 0 $spacing-03;
 }
 
@@ -108,7 +108,7 @@
   display: flex;
   column-gap: $spacing-03;
   justify-content: center;
-  align-items: flex-end;
+  align-items: center;
 }
 
 .warningContainerIcon {

src/views/performance-overview/PerformanceOverview.tsx

@@ -60,6 +60,7 @@ import { areObjectsIntersecting } from '@/src/utilities/objects';
 import { getModelColorPalette } from '@/src/utilities/colors';
 import AggregatorSelector from '@/src/components/selectors/AggregatorSelector';
 import Filters from '@/src/components/filters/Filters';
+import FilterMetrics from '@/src/views/performance-overview/FilterMetrics';
 
 import '@carbon/charts-react/styles.css';
 import classes from './PerformanceOverview.module.scss';
@@ -378,6 +379,7 @@ export default function PerformanceOverview({
     [key: string]: string[];
   }>({});
   const [modelColors, modelOrder] = getModelColorPalette(models);
+  const [hiddenMetrics, setHiddenMetrics] = useState<Metric[]>([]);
 
   // Step 2: Run effects
   // Step 2.a: Adjust graph width & heigh based on window size
@@ -407,7 +409,7 @@ export default function PerformanceOverview({
         metrics.map((metric) => [metric.name, metric]),
       );
 
-      const hData: {
+      let hData: {
         model: string;
         metric: string;
         score: number;
@@ -416,7 +418,7 @@ export default function PerformanceOverview({
         size: number;
         levels: { low: number; medium: number; high: number };
       }[] = [];
-      const aData: {
+      let aData: {
         model: string;
         metric: string;
         score: number;
@@ -610,6 +612,23 @@ export default function PerformanceOverview({
         }
       }
 
+      // Step 3: Filter hidden metrics data
+      const hiddenMetricNames = hiddenMetrics.map((metric) =>
+        extractMetricDisplayName(metric),
+      );
+      // Step 3.a: Human metrics
+      if (Array.isArray(hData)) {
+        hData = hData.filter(
+          (entry) => !hiddenMetricNames.includes(entry.metric),
+        );
+      }
+      // Step 3.b: Algorithmic metrics
+      if (Array.isArray(aData)) {
+        aData = aData.filter(
+          (entry) => !hiddenMetricNames.includes(entry.metric),
+        );
+      }
+
       // Step 4: Generate add rank information
       // Step 4.a: Human metrics
       if (Array.isArray(hData)) {
@@ -628,6 +647,7 @@ export default function PerformanceOverview({
       models,
       selectedAggregators,
       selectedFilters,
+      hiddenMetrics,
     ]);
 
   const humanMetricsInData = new Set(
@@ -684,6 +704,12 @@ export default function PerformanceOverview({
         />
       ) : null}
 
+      <FilterMetrics
+        metrics={metrics}
+        hiddenMetrics={hiddenMetrics}
+        setHiddenMetrics={setHiddenMetrics}
+      />
+
       <div
         className={cx(
           classes.row,
@@ -697,6 +723,7 @@ export default function PerformanceOverview({
             <h4>
               Human Evaluations ({numSelectedTasks}/{numTasks})
             </h4>
+
             <div className={classes.performanceTable}>
               {drawTable(
                 humanMetricsData,
@@ -741,6 +768,7 @@ export default function PerformanceOverview({
                       legend: {
                         order: modelOrder,
                       },
+                      theme: theme,
                     }}
                   ></GroupedBarChart>
                 </>
@@ -908,7 +936,9 @@ export default function PerformanceOverview({
               )}
             </div>
           </div>
-        ) : (
+        ) : null}
+        {humanMetricsInData.size === 0 &&
+        algorithmicmetricsInData.size === 0 ? (
           <div className={classes.warningContainer}>
             <WarningAlt
               height={'32px'}
@@ -919,7 +949,7 @@ export default function PerformanceOverview({
               {`No matching evaluations found. ${!isEmpty(selectedFilters) ? 'Please try again by removing one or more additional filters.' : ''}`}
             </span>
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   );