perf(hparams): keep the live pane cheap and quiet between refreshes

A refresh replaces the window content every second, and every derived
value in the pane keyed off those new array identities: buildColumns and
the whole filter/spec chain re-ran each tick, the Metrics tab re-parsed
every selected run history, and Plotly redrew. useKeyedMemo holds the
previous value while a content key is unchanged, so the column set, the
colour index and the fetched histories keep their identity when nothing
about them actually changed.

The Metrics tab also revalidates quietly now. A background re-fetch
keeps the current curves on screen instead of flashing the loading
overlay every tick, and a failed one keeps them too, reporting the
failure in the toolbar rather than replacing a working chart. An
explicit Refresh still shows the overlay, since the user asked.

Fixes the updated marker under continuous logging: it is keyed by
content id so the animation restarts per update, and fades out only,
so a run logging every second reads as steady rather than blinking.
Recolours it to the running-status blue; the green it used appeared
nowhere else in the pane.

Author: Manik-Khajuria-5

js/panes/HParamsPane.js

@@ -31,6 +31,7 @@ import {
   filterRecords,
 } from './hparams/hparamsUtils';
 import useHParamsColumns from './hparams/useHParamsColumns';
+import useKeyedMemo, { listKey } from './hparams/useKeyedMemo';
 import Pane from './Pane';
 
 const VIEWS = [
@@ -107,9 +108,15 @@ var HParamsPane = (props) => {
   }, [props.contentID]);
 
   const records = data ? data.records : NO_RECORDS;
-  const paramKeys = data ? data.paramKeys : NO_KEYS;
-  const metricKeys = data ? data.metricKeys : NO_KEYS;
-  const tagKeys = data ? data.tagKeys : NO_KEYS;
+  const nextParamKeys = data ? data.paramKeys : NO_KEYS;
+  const nextMetricKeys = data ? data.metricKeys : NO_KEYS;
+  const nextTagKeys = data ? data.tagKeys : NO_KEYS;
+  const paramKeys = useKeyedMemo(() => nextParamKeys, listKey(nextParamKeys));
+  const metricKeys = useKeyedMemo(
+    () => nextMetricKeys,
+    listKey(nextMetricKeys)
+  );
+  const tagKeys = useKeyedMemo(() => nextTagKeys, listKey(nextTagKeys));
   const columns = useHParamsColumns(paramKeys, metricKeys, tagKeys);
   const specs = useMemo(
     () => buildFilterSpecs(records, columns),
@@ -325,7 +332,12 @@ var HParamsPane = (props) => {
             </span>
           ) : null}
           {justUpdated ? (
-            <span className="hparams-stat hparams-stat-live">updated</span>
+            <span
+              key={props.contentID}
+              className="hparams-stat hparams-stat-live"
+            >
+              updated
+            </span>
           ) : null}
         </div>
         <div className="hparams-views">

js/panes/hparams/HParamsMetrics.js

@@ -20,6 +20,7 @@ import {
 } from './hparamsPlot';
 import { selectMetricSeries } from './hparamsUtils';
 import useExperimentMetrics from './useExperimentMetrics';
+import useKeyedMemo, { listKey } from './useKeyedMemo';
 
 const MAX_MISSING_NAMED = 3;
 
@@ -39,13 +40,16 @@ var HParamsMetrics = (props) => {
     cacheRef
   );
 
-  const colorIndex = useMemo(() => {
-    const index = new Map();
-    (columnRecords || []).forEach((record, i) => {
-      if (record && record.env_id) index.set(record.env_id, i);
-    });
-    return index;
-  }, [columnRecords]);
+  const colorIndex = useKeyedMemo(
+    () => {
+      const index = new Map();
+      (columnRecords || []).forEach((record, i) => {
+        if (record && record.env_id) index.set(record.env_id, i);
+      });
+      return index;
+    },
+    listKey((columnRecords || []).map((record) => record && record.env_id))
+  );
 
   const activeMetric = useMemo(() => {
     if (metric && metricKeys.indexOf(metric) > -1) return metric;
@@ -124,7 +128,7 @@ var HParamsMetrics = (props) => {
     );
   }
 
-  if (status === 'error') {
+  if (status === 'error' && runs.length === 0) {
     return (
       <HParamsMessage wrapClass="hparams-metrics-wrap" tone="error">
         {error}{' '}
@@ -165,9 +169,17 @@ var HParamsMetrics = (props) => {
           </select>
         </label>
         <span className="hparams-plot-note">
-          {plotted.length} of {records.length}{' '}
-          {records.length === 1 ? 'run' : 'runs'}
-          {note ? ' · ' + note : ''}
+          {status === 'error' ? (
+            <span className="hparams-plot-stale">
+              {error} Showing the last history loaded.
+            </span>
+          ) : (
+            <>
+              {plotted.length} of {records.length}{' '}
+              {records.length === 1 ? 'run' : 'runs'}
+              {note ? ' · ' + note : ''}
+            </>
+          )}
         </span>
         <button type="button" className="hparams-link-btn" onClick={refresh}>
           Refresh

js/panes/hparams/useExperimentMetrics.js

@@ -7,15 +7,20 @@
  *
  */
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { fetchExperimentComparison } from '../../api/experimentsApi';
 import { buildMetricSeries } from './hparamsUtils';
 
 const NO_EXPERIMENTS = [];
 
+function sameExperiments(a, b) {
+  return a.length === b.length && a.every((exp, i) => exp === b[i]);
+}
+
 export default function useExperimentMetrics(records, cacheRef) {
   const [nonce, setNonce] = useState(0);
+  const askedRef = useRef(false);
   const [state, setState] = useState({
     status: 'idle',
     error: null,
@@ -38,13 +43,20 @@ export default function useExperimentMetrics(records, cacheRef) {
   const refresh = useCallback(() => {
     const cache = cacheRef.current;
     if (cache) envIds.forEach((id) => cache.delete(id));
+    askedRef.current = true;
     setNonce((n) => n + 1);
   }, [cacheRef, envIds]);
 
   useEffect(() => {
     const cache = cacheRef.current;
+    const asked = askedRef.current;
+    askedRef.current = false;
     if (envIds.length === 0) {
-      setState({ status: 'idle', error: null, experiments: NO_EXPERIMENTS });
+      setState((prev) =>
+        prev.status === 'idle'
+          ? prev
+          : { status: 'idle', error: null, experiments: NO_EXPERIMENTS }
+      );
       return undefined;
     }
 
@@ -58,15 +70,27 @@ export default function useExperimentMetrics(records, cacheRef) {
         .map((id) => cache.get(id))
         .filter(Boolean)
         .map((entry) => entry.experiment);
+    const settle = (experiments) =>
+      setState((prev) =>
+        prev.status === 'ready' &&
+        sameExperiments(prev.experiments, experiments)
+          ? prev
+          : { status: 'ready', error: null, experiments }
+      );
+
     const wanted = envIds.filter((id) => !cache.has(id));
     if (wanted.length === 0) {
-      setState({ status: 'ready', error: null, experiments: readCache() });
+      settle(readCache());
       return undefined;
     }
 
     let cancelled = false;
     const controller = new AbortController();
-    setState((prev) => ({ ...prev, status: 'loading', error: null }));
+    setState((prev) =>
+      asked || prev.experiments.length === 0
+        ? { ...prev, status: 'loading', error: null }
+        : prev
+    );
 
     fetchExperimentComparison(wanted, controller.signal)
       .then((reply) => {
@@ -80,15 +104,15 @@ export default function useExperimentMetrics(records, cacheRef) {
             });
           }
         });
-        setState({ status: 'ready', error: null, experiments: readCache() });
+        settle(readCache());
       })
       .catch((err) => {
         if (cancelled || (err && err.name === 'AbortError')) return;
-        setState({
+        setState((prev) => ({
           status: 'error',
           error: (err && err.message) || 'Could not load metric history.',
-          experiments: NO_EXPERIMENTS,
-        });
+          experiments: prev.experiments,
+        }));
       });
 
     return () => {

js/panes/hparams/useKeyedMemo.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2017-present, The Visdom Authors
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useRef } from 'react';
+
+const SEPARATOR = '\u001f';
+
+export function listKey(list) {
+  return (list || []).join(SEPARATOR);
+}
+
+export default function useKeyedMemo(factory, key) {
+  const held = useRef(null);
+  if (held.current === null || held.current.key !== key) {
+    held.current = { key, value: factory() };
+  }
+  return held.current.value;
+}

py/visdom/static/css/hparams.css

@@ -516,6 +516,10 @@
   pointer-events: none;
 }
 
+.hparams-plot-stale {
+  color: #b94a48;
+}
+
 .hparams-plot-note {
   margin-left: auto;
   color: #888;
@@ -872,28 +876,28 @@
 }
 
 /* A live refresh swaps the content in place, so nothing else on screen says it
-   happened; the chip fades out on its own rather than sitting there blinking. */
+   happened; the marker fades out on its own rather than sitting there blinking.
+   The 4s here is paired with UPDATED_FLASH_MS in HParamsPane.js. */
 .hparams-stat-live {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  color: #4a7a4a;
+  color: #6389d8;
   animation: hparams-live-fade 4s ease-out forwards;
 }
 
 .hparams-stat-live::before {
   content: '';
   width: 6px;
   height: 6px;
-  background-color: #5ea75e;
+  background-color: #6389d8;
   border-radius: 50%;
 }
 
+/* Fades out only. A run logging every second remounts this element every
+   second, and a fade-in would read as a blink on each restart. */
 @keyframes hparams-live-fade {
   0% {
-    opacity: 0;
-  }
-  8% {
     opacity: 1;
   }
   70% {