diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
index 0635fbfbb50..1fb9ebb2087 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
@@ -928,6 +928,7 @@ const CompareEvaluationsBinding = () => {
   const evaluationCallIds = useMemo(() => {
     return JSON.parse(query.evaluationCallIds);
   }, [query.evaluationCallIds]);
+
   const onEvaluationCallIdsUpdate = useCallback(
     (newEvaluationCallIds: string[]) => {
       const newQuery = new URLSearchParams(location.search);
@@ -936,12 +937,27 @@ const CompareEvaluationsBinding = () => {
     },
     [history, location.search]
   );
+
+  const selectedMetrics: Record<string, boolean> | null = useMemo(() => {
+    try {
+      return JSON.parse(query.metrics);
+    } catch (e) {
+      return null;
+    }
+  }, [query.metrics]);
+  const setSelectedMetrics = (newModel: Record<string, boolean>) => {
+    const newQuery = new URLSearchParams(location.search);
+    newQuery.set('metrics', JSON.stringify(newModel));
+    history.push({search: newQuery.toString()});
+  };
   return (
     <CompareEvaluationsPage
       entity={entity}
       project={project}
       evaluationCallIds={evaluationCallIds}
       onEvaluationCallIdsUpdate={onEvaluationCallIdsUpdate}
+      selectedMetrics={selectedMetrics}
+      setSelectedMetrics={setSelectedMetrics}
     />
   );
 };
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
index 8e179da6742..037c0f9c8e9 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
@@ -64,6 +64,9 @@ const useCallTabs = (call: CallSchema) => {
                 entity={call.entity}
                 project={call.project}
                 evaluationCallIds={[call.callId]}
+                // Dont persist metric selection in the URL
+                selectedMetrics={{}}
+                setSelectedMetrics={() => {}}
                 // Dont persist changes to evaluationCallIds in the URL
                 onEvaluationCallIdsUpdate={() => {}}
               />
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx
index 7cd3385f8ae..58148278cfb 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx
@@ -39,6 +39,8 @@ type CompareEvaluationsPageProps = {
   project: string;
   evaluationCallIds: string[];
   onEvaluationCallIdsUpdate: (newEvaluationCallIds: string[]) => void;
+  selectedMetrics: Record<string, boolean> | null;
+  setSelectedMetrics: (newModel: Record<string, boolean>) => void;
 };
 
 export const CompareEvaluationsPage: React.FC<
@@ -57,6 +59,8 @@ export const CompareEvaluationsPage: React.FC<
               project={props.project}
               evaluationCallIds={props.evaluationCallIds}
               onEvaluationCallIdsUpdate={props.onEvaluationCallIdsUpdate}
+              selectedMetrics={props.selectedMetrics}
+              setSelectedMetrics={props.setSelectedMetrics}
             />
           ),
         },
@@ -112,6 +116,8 @@ export const CompareEvaluationsPageContent: React.FC<
     <CompareEvaluationsProvider
       entity={props.entity}
       project={props.project}
+      selectedMetrics={props.selectedMetrics}
+      setSelectedMetrics={props.setSelectedMetrics}
       initialEvaluationCallIds={props.evaluationCallIds}
       baselineEvaluationCallId={baselineEvaluationCallId ?? undefined}
       comparisonDimensions={comparisonDimensions ?? undefined}
@@ -179,7 +185,7 @@ const ReturnToEvaluationsButton: FC<{entity: string; project: string}> = ({
 const CompareEvaluationsPageInner: React.FC<{
   height: number;
 }> = props => {
-  const {state} = useCompareEvaluationsState();
+  const {state, setSelectedMetrics} = useCompareEvaluationsState();
   const showExampleFilter =
     Object.keys(state.data.evaluationCalls).length === 2;
   const showExamples = Object.keys(state.data.resultRows).length > 0;
@@ -200,7 +206,7 @@ const CompareEvaluationsPageInner: React.FC<{
           evaluationCalls={Object.values(state.data.evaluationCalls)}
         />
         <ComparisonDefinitionSection state={state} />
-        <SummaryPlots state={state} />
+        <SummaryPlots state={state} setSelectedMetrics={setSelectedMetrics} />
         <ScorecardSection state={state} />
         {showExamples ? (
           <>
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx
index 768ab2555a2..c72e07bc1fc 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx
@@ -16,6 +16,7 @@ const CompareEvaluationsContext = React.createContext<{
     React.SetStateAction<ComparisonDimensionsType | null>
   >;
   setSelectedInputDigest: React.Dispatch<React.SetStateAction<string | null>>;
+  setSelectedMetrics: (newModel: Record<string, boolean>) => void;
   addEvaluationCall: (newCallId: string) => void;
   removeEvaluationCall: (callId: string) => void;
 } | null>(null);
@@ -31,6 +32,9 @@ export const useCompareEvaluationsState = () => {
 export const CompareEvaluationsProvider: React.FC<{
   entity: string;
   project: string;
+  selectedMetrics: Record<string, boolean> | null;
+  setSelectedMetrics: (newModel: Record<string, boolean>) => void;
+
   initialEvaluationCallIds: string[];
   onEvaluationCallIdsUpdate: (newEvaluationCallIds: string[]) => void;
   setBaselineEvaluationCallId: React.Dispatch<
@@ -46,13 +50,15 @@ export const CompareEvaluationsProvider: React.FC<{
 }> = ({
   entity,
   project,
+  selectedMetrics,
+  setSelectedMetrics,
+
   initialEvaluationCallIds,
   onEvaluationCallIdsUpdate,
   setBaselineEvaluationCallId,
   setComparisonDimensions,
 
   setSelectedInputDigest,
-
   baselineEvaluationCallId,
   comparisonDimensions,
   selectedInputDigest,
@@ -67,7 +73,8 @@ export const CompareEvaluationsProvider: React.FC<{
     evaluationCallIds,
     baselineEvaluationCallId,
     comparisonDimensions,
-    selectedInputDigest
+    selectedInputDigest,
+    selectedMetrics ?? undefined
   );
 
   const value = useMemo(() => {
@@ -79,6 +86,7 @@ export const CompareEvaluationsProvider: React.FC<{
       setBaselineEvaluationCallId,
       setComparisonDimensions,
       setSelectedInputDigest,
+      setSelectedMetrics,
       addEvaluationCall: (newCallId: string) => {
         const newEvaluationCallIds = [...evaluationCallIds, newCallId];
         setEvaluationCallIds(newEvaluationCallIds);
@@ -101,6 +109,7 @@ export const CompareEvaluationsProvider: React.FC<{
     setBaselineEvaluationCallId,
     setComparisonDimensions,
     setSelectedInputDigest,
+    setSelectedMetrics,
   ]);
 
   if (!value) {
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compositeMetricsUtil.ts b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compositeMetricsUtil.ts
index c286541d234..a29fb74ffe9 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compositeMetricsUtil.ts
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compositeMetricsUtil.ts
@@ -75,7 +75,8 @@ export type CompositeSummaryMetricGroupForKeyPath = {
  */
 export const buildCompositeMetricsMap = (
   data: EvaluationComparisonData,
-  mType: MetricType
+  mType: MetricType,
+  selectedMetrics: Record<string, boolean> | undefined = undefined
 ): CompositeScoreMetrics => {
   const composite: CompositeScoreMetrics = {};
 
@@ -93,6 +94,12 @@ export const buildCompositeMetricsMap = (
   Object.entries(metricDefinitionMap).forEach(([metricId, metric]) => {
     const groupName = groupNameForMetric(metric);
     const ref = refForMetric(metric);
+    const keyPath = flattenedDimensionPath(metric);
+
+    if (selectedMetrics && !selectedMetrics[keyPath]) {
+      // Skip metrics that are not in the selectedMetrics map
+      return;
+    }
 
     if (!composite[groupName]) {
       composite[groupName] = {
@@ -105,8 +112,6 @@ export const buildCompositeMetricsMap = (
       metricGroup.scorerRefs.push(ref);
     }
 
-    const keyPath = flattenedDimensionPath(metric);
-
     if (!metricGroup.metrics[keyPath]) {
       metricGroup.metrics[keyPath] = {
         scorerAgnosticMetricDef: _.omit(metric, 'scorerOpOrObjRef'),
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpState.ts b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpState.ts
index ea28cc417e8..35f95dbf14f 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpState.ts
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpState.ts
@@ -24,6 +24,8 @@ export type EvaluationComparisonState = {
   comparisonDimensions?: ComparisonDimensionsType;
   // The current digest which is in view
   selectedInputDigest?: string;
+  // The selected metrics to display
+  selectedMetrics?: Record<string, boolean>;
 };
 
 export type ComparisonDimensionsType = Array<{
@@ -43,7 +45,8 @@ export const useEvaluationComparisonState = (
   evaluationCallIds: string[],
   baselineEvaluationCallId?: string,
   comparisonDimensions?: ComparisonDimensionsType,
-  selectedInputDigest?: string
+  selectedInputDigest?: string,
+  selectedMetrics?: Record<string, boolean>
 ): Loadable<EvaluationComparisonState> => {
   const data = useEvaluationComparisonData(entity, project, evaluationCallIds);
 
@@ -93,6 +96,7 @@ export const useEvaluationComparisonState = (
           baselineEvaluationCallId ?? evaluationCallIds[0],
         comparisonDimensions: newComparisonDimensions,
         selectedInputDigest,
+        selectedMetrics,
       },
     };
   }, [
@@ -102,6 +106,7 @@ export const useEvaluationComparisonState = (
     evaluationCallIds,
     comparisonDimensions,
     selectedInputDigest,
+    selectedMetrics,
   ]);
 
   return value;
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx
index 2573c7f4477..e0c3938f16e 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx
@@ -229,8 +229,13 @@ export const ExampleCompareSection: React.FC<{
   const {ref1, ref2} = useLinkHorizontalScroll();
 
   const compositeScoreMetrics = useMemo(
-    () => buildCompositeMetricsMap(props.state.data, 'score'),
-    [props.state.data]
+    () =>
+      buildCompositeMetricsMap(
+        props.state.data,
+        'score',
+        props.state.selectedMetrics
+      ),
+    [props.state.data, props.state.selectedMetrics]
   );
 
   if (target == null) {
@@ -252,9 +257,13 @@ export const ExampleCompareSection: React.FC<{
       .length;
   });
   const numEvals = numTrials.length;
+  // Get derived scores, then filter out any not in the selected metrics
   const derivedScores = Object.values(
     getMetricIds(props.state.data, 'score', 'derived')
+  ).filter(
+    score => props.state.selectedMetrics?.[flattenedDimensionPath(score)]
   );
+
   const numMetricScorers = metricGroupNames.length;
   const numDerivedScores = derivedScores.length;
   const numMetricsPerScorer = [
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/exampleCompareSectionUtil.ts b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/exampleCompareSectionUtil.ts
index 59570f4c14e..bf20f6bffa4 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/exampleCompareSectionUtil.ts
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/exampleCompareSectionUtil.ts
@@ -118,8 +118,8 @@ const rowIsSelected = (
 export const useFilteredAggregateRows = (state: EvaluationComparisonState) => {
   const leafDims = useMemo(() => getOrderedCallIds(state), [state]);
   const compositeMetricsMap = useMemo(
-    () => buildCompositeMetricsMap(state.data, 'score'),
-    [state.data]
+    () => buildCompositeMetricsMap(state.data, 'score', state.selectedMetrics),
+    [state.data, state.selectedMetrics]
   );
 
   const flattenedRows = useMemo(() => {
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ScorecardSection/ScorecardSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ScorecardSection/ScorecardSection.tsx
index 2422104f964..2b39cc1578d 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ScorecardSection/ScorecardSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ScorecardSection/ScorecardSection.tsx
@@ -114,7 +114,11 @@ export const ScorecardSection: React.FC<{
   const [diffOnly, setDiffOnly] = React.useState(true);
 
   const compositeSummaryMetrics = useMemo(() => {
-    return buildCompositeMetricsMap(props.state.data, 'summary');
+    return buildCompositeMetricsMap(
+      props.state.data,
+      'summary',
+      props.state.selectedMetrics
+    );
   }, [props.state]);
 
   const onCallClick = usePeekCall(
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/SummaryPlotsSection/SummaryPlotsSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/SummaryPlotsSection/SummaryPlotsSection.tsx
index 4e685d14f93..5bfaa8fcb04 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/SummaryPlotsSection/SummaryPlotsSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/SummaryPlotsSection/SummaryPlotsSection.tsx
@@ -1,5 +1,16 @@
 import {Box} from '@material-ui/core';
-import React, {useMemo} from 'react';
+import {Popover} from '@mui/material';
+import {Switch} from '@wandb/weave/components';
+import {Button} from '@wandb/weave/components/Button';
+import {
+  DraggableGrow,
+  DraggableHandle,
+} from '@wandb/weave/components/DraggablePopups';
+import {TextField} from '@wandb/weave/components/Form/TextField';
+import {Tailwind} from '@wandb/weave/components/Tailwind';
+import {maybePluralize} from '@wandb/weave/core/util/string';
+import classNames from 'classnames';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 
 import {buildCompositeMetricsMap} from '../../compositeMetricsUtil';
 import {
@@ -24,8 +35,44 @@ import {PlotlyRadarPlot, RadarPlotData} from './PlotlyRadarPlot';
  */
 export const SummaryPlots: React.FC<{
   state: EvaluationComparisonState;
+  setSelectedMetrics: (newModel: Record<string, boolean>) => void;
 }> = props => {
-  const plotlyRadarData = useNormalizedPlotDataFromMetrics(props.state);
+  const {radarData, allMetricNames} = useNormalizedPlotDataFromMetrics(
+    props.state
+  );
+  const {selectedMetrics} = props.state;
+  const setSelectedMetrics = props.setSelectedMetrics;
+
+  useEffect(() => {
+    // If selectedMetrics is null, we should show all metrics
+    if (selectedMetrics == null) {
+      setSelectedMetrics(
+        Object.fromEntries(Array.from(allMetricNames).map(m => [m, true]))
+      );
+    }
+  }, [selectedMetrics, setSelectedMetrics, allMetricNames]);
+
+  // filter down the plotlyRadarData to only include the selected metrics, after
+  // computation, to allow quick addition/removal of metrics
+  const filteredPlotlyRadarData = useMemo(() => {
+    const filteredData: RadarPlotData = {};
+    for (const [callId, metricBin] of Object.entries(radarData)) {
+      const metrics: {[metric: string]: number} = {};
+      for (const [metric, value] of Object.entries(metricBin.metrics)) {
+        if (selectedMetrics?.[metric]) {
+          metrics[metric] = value;
+        }
+      }
+      if (Object.keys(metrics).length > 0) {
+        filteredData[callId] = {
+          metrics,
+          name: metricBin.name,
+          color: metricBin.color,
+        };
+      }
+    }
+    return filteredData;
+  }, [radarData, selectedMetrics]);
 
   return (
     <VerticalBox
@@ -48,6 +95,16 @@ export const SummaryPlots: React.FC<{
           }}>
           Summary Metrics
         </Box>
+        <Box sx={{marginLeft: 'auto'}}>
+          <div style={{display: 'flex', alignItems: 'center'}}>
+            <div style={{marginRight: '4px'}}>Configure displayed metrics</div>
+            <MetricsSelector
+              selectedMetrics={selectedMetrics}
+              setSelectedMetrics={setSelectedMetrics}
+              allMetrics={Array.from(allMetricNames)}
+            />
+          </div>
+        </Box>
       </HorizontalBox>
       <HorizontalBox
         sx={{
@@ -63,7 +120,10 @@ export const SummaryPlots: React.FC<{
             alignContent: 'center',
             width: PLOT_HEIGHT,
           }}>
-          <PlotlyRadarPlot height={PLOT_HEIGHT} data={plotlyRadarData} />
+          <PlotlyRadarPlot
+            height={PLOT_HEIGHT}
+            data={filteredPlotlyRadarData}
+          />
         </Box>
         <Box
           sx={{
@@ -75,13 +135,174 @@ export const SummaryPlots: React.FC<{
             padding: PLOT_PADDING,
             width: PLOT_HEIGHT,
           }}>
-          <PlotlyBarPlot height={PLOT_HEIGHT} data={plotlyRadarData} />
+          <PlotlyBarPlot height={PLOT_HEIGHT} data={filteredPlotlyRadarData} />
         </Box>
       </HorizontalBox>
     </VerticalBox>
   );
 };
 
+const MetricsSelector: React.FC<{
+  setSelectedMetrics: (newModel: Record<string, boolean>) => void;
+  selectedMetrics: Record<string, boolean> | undefined;
+  allMetrics: string[];
+}> = ({setSelectedMetrics, selectedMetrics, allMetrics}) => {
+  const [search, setSearch] = useState('');
+
+  const ref = useRef<HTMLDivElement>(null);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const onClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : ref.current);
+    setSearch('');
+  };
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  const filteredCols = search
+    ? allMetrics.filter(col => col.toLowerCase().includes(search.toLowerCase()))
+    : allMetrics;
+
+  const shownMetrics = Object.values(selectedMetrics ?? {}).filter(Boolean);
+
+  const numHidden = allMetrics.length - shownMetrics.length;
+  const buttonSuffix = search ? `(${filteredCols.length})` : 'all';
+
+  return (
+    <>
+      <span ref={ref}>
+        <Button
+          variant="ghost"
+          icon="column"
+          tooltip="Manage metrics"
+          onClick={onClick}
+        />
+      </span>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        slotProps={{
+          paper: {
+            sx: {
+              overflow: 'visible',
+            },
+          },
+        }}
+        onClose={() => setAnchorEl(null)}
+        TransitionComponent={DraggableGrow}>
+        <Tailwind>
+          <div className="min-w-[360px] p-12">
+            <DraggableHandle>
+              <div className="flex items-center pb-8">
+                <div className="flex-auto text-xl font-semibold">
+                  Manage metrics
+                </div>
+                <div className="ml-16 text-moon-500">
+                  {maybePluralize(numHidden, 'hidden column', 's')}
+                </div>
+              </div>
+            </DraggableHandle>
+            <div className="mb-8">
+              <TextField
+                placeholder="Filter columns"
+                autoFocus
+                value={search}
+                onChange={setSearch}
+              />
+            </div>
+            <div className="max-h-[300px] overflow-auto">
+              {Array.from(allMetrics).map((metric: string) => {
+                const value = metric;
+                const idSwitch = `toggle-vis_${value}`;
+                const checked = selectedMetrics?.[metric] ?? false;
+                const label = metric;
+                const disabled = false;
+                if (
+                  search &&
+                  !label.toLowerCase().includes(search.toLowerCase())
+                ) {
+                  return null;
+                }
+                return (
+                  <div key={value}>
+                    <div
+                      className={classNames(
+                        'flex items-center py-2',
+                        disabled ? 'opacity-40' : ''
+                      )}>
+                      <Switch.Root
+                        id={idSwitch}
+                        size="small"
+                        checked={checked}
+                        onCheckedChange={isOn => {
+                          setSelectedMetrics(
+                            isOn
+                              ? {...selectedMetrics, [metric]: true}
+                              : {...selectedMetrics, [metric]: false}
+                          );
+                        }}
+                        disabled={disabled}>
+                        <Switch.Thumb size="small" checked={checked} />
+                      </Switch.Root>
+                      <label
+                        htmlFor={idSwitch}
+                        className={classNames(
+                          'ml-6',
+                          disabled ? '' : 'cursor-pointer'
+                        )}>
+                        {label}
+                      </label>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <div className="mt-8 flex items-center">
+              <Button
+                size="small"
+                variant="quiet"
+                icon="hide-hidden"
+                disabled={filteredCols.length === 0}
+                onClick={() => {
+                  const newModel = {...selectedMetrics};
+                  for (const metric of filteredCols) {
+                    newModel[metric] = false;
+                  }
+                  setSelectedMetrics(newModel);
+                }}>
+                {`Hide ${buttonSuffix}`}
+              </Button>
+              <div className="flex-auto" />
+              <Button
+                size="small"
+                variant="quiet"
+                icon="show-visible"
+                disabled={filteredCols.length === 0}
+                onClick={() => {
+                  const newModel = {...selectedMetrics};
+                  for (const metric of filteredCols) {
+                    newModel[metric] = true;
+                  }
+                  setSelectedMetrics(newModel);
+                }}>
+                {`Show ${buttonSuffix}`}
+              </Button>
+            </div>
+          </div>
+        </Tailwind>
+      </Popover>
+    </>
+  );
+};
+
 const normalizeValues = (values: Array<number | undefined>): number[] => {
   // find the max value
   // find the power of 2 that is greater than the max value
@@ -93,7 +314,7 @@ const normalizeValues = (values: Array<number | undefined>): number[] => {
 
 const useNormalizedPlotDataFromMetrics = (
   state: EvaluationComparisonState
-): RadarPlotData => {
+): {radarData: RadarPlotData; allMetricNames: Set<string>} => {
   const compositeMetrics = useMemo(() => {
     return buildCompositeMetricsMap(state.data, 'summary');
   }, [state]);
@@ -137,7 +358,7 @@ const useNormalizedPlotDataFromMetrics = (
           evalScores,
         };
       });
-    return Object.fromEntries(
+    const radarData = Object.fromEntries(
       callIds.map(callId => {
         const evalCall = state.data.evaluationCalls[callId];
         return [
@@ -157,5 +378,7 @@ const useNormalizedPlotDataFromMetrics = (
         ];
       })
     );
+    const allMetricNames = new Set(normalizedMetrics.map(m => m.metricLabel));
+    return {radarData, allMetricNames};
   }, [callIds, compositeMetrics, state.data.evaluationCalls]);
 };