feat (Filters): Allow user to select all values in a filter.

src/components/filters/Filters.module.scss

@@ -75,3 +75,13 @@
 .filterSelector {
   max-width: 25%;
 }
+
+.filterSelector label {
+  width: 100%;
+}
+
+.filterLabel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/components/filters/Filters.tsx

@@ -128,15 +128,43 @@ export default function Filters({
                     {Object.entries(filters).map(([filterType, values]) => {
                       return (
                         <div
-                          key={`${keyPrefix}-filter` + filterType + '-selector'}
+                          key={
+                            `${keyPrefix}-filter` +
+                            filterType +
+                            '-selector--' +
+                            `${selectedFilters && selectedFilters[filterType] && selectedFilters[filterType] === values}`
+                          }
                           className={classes.filterSelector}
                         >
                           <FilterableMultiSelect
                             id={
                               `${keyPrefix}-filter` + filterType + '-selector'
                             }
-                            titleText={filterType}
+                            titleText={
+                              <div className={classes.filterLabel}>
+                                <span>{filterType}</span>
+                                <Button
+                                  kind="ghost"
+                                  size="sm"
+                                  onClick={() =>
+                                    setSelectedFilters((prevState) => {
+                                      return {
+                                        ...prevState,
+                                        [filterType]: values,
+                                      };
+                                    })
+                                  }
+                                >
+                                  select all
+                                </Button>
+                              </div>
+                            }
                             items={values}
+                            initialSelectedItems={
+                              selectedFilters && selectedFilters[filterType]
+                                ? selectedFilters[filterType]
+                                : []
+                            }
                             itemToString={(item) => String(item)}
                             onChange={(event) => {
                               setSelectedFilters((prevState) =>
@@ -185,13 +213,41 @@ export default function Filters({
               {Object.entries(filters).map(([filterType, values]) => {
                 return (
                   <div
-                    key={`${keyPrefix}-filter` + filterType + '-selector'}
+                    key={
+                      `${keyPrefix}-filter` +
+                      filterType +
+                      '-selector--' +
+                      `${selectedFilters && selectedFilters[filterType] && selectedFilters[filterType] === values}`
+                    }
                     className={classes.filterSelector}
                   >
                     <FilterableMultiSelect
                       id={`${keyPrefix}-filter` + filterType + '-selector'}
-                      titleText={filterType}
+                      titleText={
+                        <div className={classes.filterLabel}>
+                          <span>{filterType}</span>
+                          <Button
+                            kind="ghost"
+                            size="sm"
+                            onClick={() =>
+                              setSelectedFilters((prevState) => {
+                                return {
+                                  ...prevState,
+                                  [filterType]: values,
+                                };
+                              })
+                            }
+                          >
+                            select all
+                          </Button>
+                        </div>
+                      }
                       items={values}
+                      initialSelectedItems={
+                        selectedFilters && selectedFilters[filterType]
+                          ? selectedFilters[filterType]
+                          : []
+                      }
                       itemToString={(item) => String(item)}
                       onChange={(event) => {
                         setSelectedFilters((prevState) =>

src/views/performance-overview/{FilterMetrics.module.scss → Hide.module.scss}

@@ -19,25 +19,25 @@
 @use '@carbon/react/scss/spacing' as *;
 @use '@carbon/colors' as *;
 
-.filterMetricsBtnTooltip {
+.hideBtnTooltip {
   align-self: center;
   margin-bottom: $spacing-03;
 }
 
-.filterMetricsBtn {
+.hideBtn {
   display: flex;
   column-gap: $spacing-04;
   padding: $spacing-03;
   color: inherit !important;
 }
 
-.filterMetricsBtnElements {
+.hideBtnElements {
   display: flex;
   column-gap: $spacing-04;
   align-items: center;
 }
 
-.filterMetricsBtnCaptionElements {
+.hideBtnCaptionElements {
   display: flex;
   column-gap: $spacing-02;
   align-items: center;
@@ -53,8 +53,9 @@
 
 .visible {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
   animation: fade-in 0.5s;
 }
 
@@ -67,3 +68,7 @@
     opacity: 1;
   }
 }
+
+.selector {
+  max-width: 30%;
+}

src/views/performance-overview/{FilterMetrics.tsx → Hide.tsx}

@@ -24,83 +24,109 @@ 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 { Metric, Model } from '@/src/types';
 import { extractMetricDisplayName } from '@/src/utilities/metrics';
 
-import classes from './FilterMetrics.module.scss';
+import classes from './Hide.module.scss';
 
 // ===================================================================================
 //                                TYPES
 // ===================================================================================
 interface Props {
+  models: Model[];
   metrics: Metric[];
+  hiddenModels: Model[];
   hiddenMetrics: Metric[];
+  setHiddenModels: Function;
   setHiddenMetrics: Function;
 }
 
-export default function FilterMetrics({
+export default function HidePanel({
+  models,
   metrics,
+  hiddenModels: ignoredModels,
   hiddenMetrics: ignoredMetrics,
+  setHiddenModels: setIgnoredModels,
   setHiddenMetrics: setIgnoredMetrics,
 }: Props) {
   // Step 1: Initialize state and necessary variables
-  const [showIgnoreMetrics, setShowIgnoreMetrics] = useState<boolean>(true);
+  const [show, setShow] = useState<boolean>(true);
 
   // Step 2: Render
   return (
     <>
       <Tooltip
-        label={'Click to hide certain metrics'}
+        label={'Click to hide certain models & metrics'}
         align={'right'}
-        className={classes.filterMetricsBtnTooltip}
+        className={classes.hideBtnTooltip}
       >
         <Button
-          id={'PerformanceOverview-metrics--Ignore'}
-          className={classes.filterMetricsBtn}
+          id={'PerformanceOverview-hide--Ignore'}
+          className={classes.hideBtn}
           kind={'ghost'}
           size={'sm'}
           onClick={() => {
-            setShowIgnoreMetrics(!showIgnoreMetrics);
+            setShow(!show);
           }}
         >
-          <div className={classes.filterMetricsBtnElements}>
-            {showIgnoreMetrics ? (
-              <ChevronUp size={24} />
-            ) : (
-              <ChevronDown size={24} />
-            )}
-            <div className={classes.filterMetricsBtnCaptionElements}>
-              <h5>Hide Metrics</h5>
+          <div className={classes.hideBtnElements}>
+            {show ? <ChevronUp size={24} /> : <ChevronDown size={24} />}
+            <div className={classes.hideBtnCaptionElements}>
+              <h5>Hide Models & 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>
-              );
-            })}
+      {show ? (
+        <div className={cx(classes.container, show && classes.visible)}>
+          <div className={classes.selector}>
+            <FilterableMultiSelect
+              id={'model--limiter'}
+              titleText="Models"
+              items={models}
+              itemToString={(item) => (item.name ? item.name : item.modelId)}
+              onChange={(event) => {
+                setIgnoredModels(event.selectedItems);
+              }}
+            ></FilterableMultiSelect>
+            <div>
+              {ignoredModels.map((model) => {
+                return (
+                  <Tag
+                    type={'cool-gray'}
+                    key={`filtered-model--` + model.modelId}
+                  >
+                    {model.name ? model.name : model.modelId}
+                  </Tag>
+                );
+              })}
+            </div>
+          </div>
+          <div className={classes.selector}>
+            <FilterableMultiSelect
+              id={'metrics--limiter'}
+              titleText="Metrics"
+              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>
         </div>
       ) : null}

src/views/performance-overview/PerformanceOverview.tsx

@@ -61,7 +61,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 HidePanel from '@/src/views/performance-overview/Hide';
 
 import '@carbon/charts-react/styles.css';
 import classes from './PerformanceOverview.module.scss';
@@ -398,6 +398,7 @@ export default function PerformanceOverview({
     [key: string]: string[];
   }>({});
   const [modelColors, modelOrder] = getModelColorPalette(models);
+  const [hiddenModels, setHiddenModels] = useState<Model[]>([]);
   const [hiddenMetrics, setHiddenMetrics] = useState<Metric[]>([]);
 
   // Step 2: Run effects
@@ -656,13 +657,30 @@ export default function PerformanceOverview({
         );
       }
 
-      // Step 4: Generate add rank information
+      // Step 4: Filter hidden models data
+      const hiddenModelNames = hiddenModels.map((model) =>
+        model.name ? model.name : model.modelId,
+      );
       // Step 4.a: Human metrics
+      if (Array.isArray(hData)) {
+        hData = hData.filter(
+          (entry) => !hiddenModelNames.includes(entry.model),
+        );
+      }
+      // Step 4.b: Algorithmic metrics
+      if (Array.isArray(aData)) {
+        aData = aData.filter(
+          (entry) => !hiddenModelNames.includes(entry.model),
+        );
+      }
+
+      // Step 5: Generate add rank information
+      // Step 5.a: Human metrics
       if (Array.isArray(hData)) {
         calculateRanks(hData);
       }
 
-      // Step 4.b: Algorithmic metrics
+      // Step 5.b: Algorithmic metrics
       if (Array.isArray(aData)) {
         calculateRanks(aData);
       }
@@ -674,6 +692,7 @@ export default function PerformanceOverview({
       models,
       selectedAggregators,
       selectedFilters,
+      hiddenModels,
       hiddenMetrics,
     ]);
 
@@ -731,9 +750,12 @@ export default function PerformanceOverview({
         />
       ) : null}
 
-      <FilterMetrics
+      <HidePanel
+        models={models}
         metrics={metrics}
+        hiddenModels={hiddenModels}
         hiddenMetrics={hiddenMetrics}
+        setHiddenModels={setHiddenModels}
         setHiddenMetrics={setHiddenMetrics}
       />