fix: no data plot in chart with data (#8935)

* fix: `no data plot` in chart with data

* fix: fault torelant

* chore: Revert "fix: fault torelant"

This reverts commit ab00628.

* chore: add comment

(cherry picked from commit 77d1ede)

webui/react/src/hooks/useMetricNames.ts

@@ -10,32 +10,29 @@ import { metricKeyToMetric, metricSorter, metricToKey } from 'utils/metric';
 
 import usePrevious from './usePrevious';
 
+// DO NOT pass a raw object for experimentIds param
+// That causes unwanted API call
 const useMetricNames = (
   experimentIds: number[],
   errorHandler?: (e: unknown) => void,
   quickPoll?: boolean,
 ): Loadable<Metric[]> => {
   const [metrics, setMetrics] = useState<Loadable<Metric[]>>(NotLoaded);
-  const [actualExpIds, setActualExpIds] = useState<number[]>([]);
-  const previousExpIds = usePrevious(actualExpIds, []);
-  useEffect(
-    () => setActualExpIds((prev) => (_.isEqual(prev, experimentIds) ? prev : experimentIds)),
-    [experimentIds],
-  );
+  const previousExpIds = usePrevious(experimentIds, []);
 
   useEffect(() => {
-    if (actualExpIds.length === 0) {
+    if (experimentIds.length === 0) {
       setMetrics(Loaded([]));
       return;
     }
-    if (!_.isEqual(actualExpIds, previousExpIds)) setMetrics(NotLoaded);
+    if (!_.isEqual(experimentIds, previousExpIds)) setMetrics(NotLoaded);
     const canceler = new AbortController();
 
     // We do not want to plot any x-axis metric values as y-axis data
     const xAxisMetrics = Object.values(XAxisDomain).map((v) => v.toLowerCase());
 
     readStream<V1ExpMetricNamesResponse>(
-      detApi.StreamingInternal.expMetricNames(actualExpIds, quickPoll ? 5 : undefined, {
+      detApi.StreamingInternal.expMetricNames(experimentIds, quickPoll ? 5 : undefined, {
         signal: canceler.signal,
       }),
       (event: V1ExpMetricNamesResponse) => {
@@ -82,7 +79,7 @@ const useMetricNames = (
       errorHandler,
     );
     return () => canceler.abort();
-  }, [actualExpIds, previousExpIds, errorHandler, quickPoll]);
+  }, [experimentIds, previousExpIds, errorHandler, quickPoll]);
 
   return metrics;
 };

webui/react/src/pages/ExperimentDetails/ExperimentVisualization.tsx

@@ -122,8 +122,10 @@ const ExperimentVisualization: React.FC<Props> = ({ basePath, experiment }: Prop
     setPageError(PageError.MetricNames);
   }, []);
 
+  const experimentIds = useMemo(() => [experiment.id], [experiment.id]);
+
   // Stream available metrics.
-  const loadableMetrics = useMetricNames([experiment.id], handleMetricNamesError);
+  const loadableMetrics = useMetricNames(experimentIds, handleMetricNamesError);
   const metrics = Loadable.getOrElse([], loadableMetrics);
 
   const { hasData, hasLoaded, isExperimentTerminal, isSupported } = useMemo(() => {

webui/react/src/pages/TrialDetails/MultiTrialDetailsHyperparameters.tsx

@@ -76,8 +76,10 @@ const MultiTrialDetailsHyperparameters: React.FC<Props> = ({
     ],
   );
 
+  const experimentIds = useMemo(() => [experiment.id], [experiment.id]);
+
   // Stream available metrics.
-  const loadableMetrics = useMetricNames([experiment.id], handleError);
+  const loadableMetrics = useMetricNames(experimentIds, handleError);
   const metrics = Loadable.getOrElse([], loadableMetrics);
 
   const isSupported = useMemo(() => {

webui/react/src/pages/TrialDetails/TrialDetailsOverview.tsx

@@ -44,13 +44,17 @@ const TrialDetailsOverview: React.FC<Props> = ({ experiment, trial }: Props) =>
 
   const trialNonTerminal = !terminalRunStates.has(experiment.state ?? RunState.Error);
 
+  const experimentIds = useMemo(() => [experiment.id], [experiment.id]);
   const loadableMetricNames = useMetricNames(
-    [experiment.id],
+    experimentIds,
     handleMetricNamesError,
     trialNonTerminal,
   );
+
   const defaultMetricNames = useMemo(() => [], []);
-  const metricNames = Loadable.getOrElse(defaultMetricNames, loadableMetricNames);
+  const metricNames = useMemo(() => {
+    return Loadable.getOrElse(defaultMetricNames, loadableMetricNames);
+  }, [defaultMetricNames, loadableMetricNames]);
 
   const { defaultMetrics, metrics } = useMemo(() => {
     const validationMetric = experiment?.config?.searcher.metric;