better handle initial state and derived metrics

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

@@ -928,7 +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);

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

@@ -257,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 = [

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

@@ -10,7 +10,7 @@ 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, {useMemo, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 
 import {buildCompositeMetricsMap} from '../../compositeMetricsUtil';
 import {
@@ -43,6 +43,15 @@ export const SummaryPlots: React.FC<{
   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(() => {