chore: add column selection in eval comparison page

weave-js/src/components/PagePanelComponents/Home/Browse3.tsx

@@ -921,16 +921,34 @@ const OpPageBinding = () => {
 };
 
 const CompareEvaluationsBinding = () => {
+  const history = useHistory();
+  const location = useLocation();
   const {entity, project} = useParamsDecoded<Browse3TabParams>();
   const query = useURLSearchParamsDict();
   const evaluationCallIds = useMemo(() => {
     return JSON.parse(query.evaluationCallIds);
   }, [query.evaluationCallIds]);
+
+  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}
+      selectedMetrics={selectedMetrics}
+      setSelectedMetrics={setSelectedMetrics}
     />
   );
 };

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx

@@ -64,6 +64,8 @@ const useCallTabs = (call: CallSchema) => {
                 entity={call.entity}
                 project={call.project}
                 evaluationCallIds={[call.callId]}
+                selectedMetrics={{}}
+                setSelectedMetrics={() => {}}
               />
             ),
           },

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx

@@ -38,6 +38,8 @@ type CompareEvaluationsPageProps = {
   entity: string;
   project: string;
   evaluationCallIds: string[];
+  selectedMetrics: Record<string, boolean> | null;
+  setSelectedMetrics: (newModel: Record<string, boolean>) => void;
 };
 
 export const CompareEvaluationsPage: React.FC<
@@ -55,6 +57,8 @@ export const CompareEvaluationsPage: React.FC<
               entity={props.entity}
               project={props.project}
               evaluationCallIds={props.evaluationCallIds}
+              selectedMetrics={props.selectedMetrics}
+              setSelectedMetrics={props.setSelectedMetrics}
             />
           ),
         },
@@ -109,6 +113,8 @@ export const CompareEvaluationsPageContent: React.FC<
       entity={props.entity}
       project={props.project}
       evaluationCallIds={props.evaluationCallIds}
+      selectedMetrics={props.selectedMetrics}
+      setSelectedMetrics={props.setSelectedMetrics}
       baselineEvaluationCallId={baselineEvaluationCallId ?? undefined}
       comparisonDimensions={comparisonDimensions ?? undefined}
       setBaselineEvaluationCallId={setBaselineEvaluationCallId}
@@ -174,7 +180,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;
@@ -195,7 +201,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 ? (
           <>

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;
 } | null>(null);
 
 export const useCompareEvaluationsState = () => {
@@ -30,6 +31,9 @@ export const CompareEvaluationsProvider: React.FC<{
   entity: string;
   project: string;
   evaluationCallIds: string[];
+  selectedMetrics: Record<string, boolean> | null;
+  setSelectedMetrics: (newModel: Record<string, boolean>) => void;
+
   setBaselineEvaluationCallId: React.Dispatch<
     React.SetStateAction<string | null>
   >;
@@ -44,11 +48,13 @@ export const CompareEvaluationsProvider: React.FC<{
   entity,
   project,
   evaluationCallIds,
+  selectedMetrics,
+  setSelectedMetrics,
+
   setBaselineEvaluationCallId,
   setComparisonDimensions,
 
   setSelectedInputDigest,
-
   baselineEvaluationCallId,
   comparisonDimensions,
   selectedInputDigest,
@@ -60,7 +66,8 @@ export const CompareEvaluationsProvider: React.FC<{
     evaluationCallIds,
     baselineEvaluationCallId,
     comparisonDimensions,
-    selectedInputDigest
+    selectedInputDigest,
+    selectedMetrics ?? undefined
   );
 
   const value = useMemo(() => {
@@ -72,13 +79,15 @@ export const CompareEvaluationsProvider: React.FC<{
       setBaselineEvaluationCallId,
       setComparisonDimensions,
       setSelectedInputDigest,
+      setSelectedMetrics,
     };
   }, [
     initialState.loading,
     initialState.result,
     setBaselineEvaluationCallId,
     setComparisonDimensions,
     setSelectedInputDigest,
+    setSelectedMetrics,
   ]);
 
   if (!value) {

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'),

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;

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) {

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(() => {

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(