fix(hparams): keep scatter matrix axis and color choices across view switches

The scatter matrix held its picked dimensions and color-by in local state,
so switching to the table and back unmounted the view and reset the axes to
the default first six. Lift the selection into HParamsPane and make
HParamsSplom a controlled component so the choice persists while the view
stays lazily mounted.

Author: Manik-Khajuria-5

js/panes/HParamsPane.js

@@ -38,6 +38,8 @@ var HParamsPane = (props) => {
   const { content } = props;
   const data = readContent(content);
   const [view, setView] = useState('table');
+  const [splomDims, setSplomDims] = useState(null);
+  const [splomColorBy, setSplomColorBy] = useState(null);
 
   const handleDownload = () => {
     let blob = new Blob([JSON.stringify(content)], {
@@ -104,6 +106,10 @@ var HParamsPane = (props) => {
               paramKeys={data.paramKeys}
               metricKeys={data.metricKeys}
               tagKeys={data.tagKeys}
+              selectedDims={splomDims}
+              onSelectedDims={setSplomDims}
+              colorBy={splomColorBy}
+              onColorBy={setSplomColorBy}
             />
           ) : (
             <HParamsTable

js/panes/hparams/HParamsSplom.js

@@ -8,7 +8,7 @@
  */
 
 import TreeSelect from 'rc-tree-select';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
 import {
   buildColumns,
@@ -73,7 +73,16 @@ function downloadSnapshot(gd) {
     });
 }
 
-const HParamsSplom = ({ records, paramKeys, metricKeys, tagKeys }) => {
+const HParamsSplom = ({
+  records,
+  paramKeys,
+  metricKeys,
+  tagKeys,
+  selectedDims,
+  onSelectedDims,
+  colorBy,
+  onColorBy,
+}) => {
   const plotRef = useRef(null);
   const prevDimCount = useRef(0);
 
@@ -86,9 +95,6 @@ const HParamsSplom = ({ records, paramKeys, metricKeys, tagKeys }) => {
     [records, columns]
   );
 
-  const [selectedDims, setSelectedDims] = useState(null);
-  const [colorBy, setColorBy] = useState(null);
-
   const effectiveDims = useMemo(() => {
     const validIds = new Set(numericCols.map((c) => c.id));
     let ids = (selectedDims || []).filter((id) => validIds.has(id));
@@ -251,7 +257,7 @@ const HParamsSplom = ({ records, paramKeys, metricKeys, tagKeys }) => {
   }, [records, columns, effectiveDims, effectiveColorBy]);
 
   const handleDims = (value) => {
-    setSelectedDims(Array.isArray(value) ? value.slice(0, MAX_DIMS) : []);
+    onSelectedDims(Array.isArray(value) ? value.slice(0, MAX_DIMS) : []);
   };
 
   if (!hasPlot) {
@@ -296,7 +302,7 @@ const HParamsSplom = ({ records, paramKeys, metricKeys, tagKeys }) => {
             treeDefaultExpandAll
             dropdownMatchSelectWidth={false}
             treeData={treeData}
-            onChange={(value) => setColorBy(value || null)}
+            onChange={(value) => onColorBy(value || null)}
             aria-label="Color scatter matrix by"
           />
         </span>