fix(hparams): persist table sort, filter, color, and selection across view switches

Lift the table's sort, filter, color-by, and row-selection state into
HParamsPane so switching to the scatter matrix and back no longer resets
them, matching the persistence the scatter matrix already has. HParamsTable
becomes a controlled component driven by the parent-held state.

Author: Manik-Khajuria-5

js/panes/HParamsPane.js

@@ -38,6 +38,10 @@ var HParamsPane = (props) => {
   const { content } = props;
   const data = readContent(content);
   const [view, setView] = useState('table');
+  const [tableSort, setTableSort] = useState({ by: null, dir: null });
+  const [tableFilter, setTableFilter] = useState('');
+  const [tableColorBy, setTableColorBy] = useState(null);
+  const [tableSelected, setTableSelected] = useState(() => new Set());
   const [splomDims, setSplomDims] = useState(null);
   const [splomColorBy, setSplomColorBy] = useState(null);
 
@@ -117,6 +121,14 @@ var HParamsPane = (props) => {
               paramKeys={data.paramKeys}
               metricKeys={data.metricKeys}
               tagKeys={data.tagKeys}
+              sort={tableSort}
+              setSort={setTableSort}
+              filter={tableFilter}
+              setFilter={setTableFilter}
+              colorBy={tableColorBy}
+              setColorBy={setTableColorBy}
+              selected={tableSelected}
+              setSelected={setTableSelected}
             />
           )}
         </div>

js/panes/hparams/HParamsTable.js

@@ -8,7 +8,7 @@
  */
 
 import TreeSelect from 'rc-tree-select';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import {
   buildColumns,
@@ -140,12 +140,20 @@ const HParamsRow = React.memo(function HParamsRow({
   );
 });
 
-const HParamsTable = ({ records, paramKeys, metricKeys, tagKeys }) => {
-  const [sort, setSort] = useState({ by: null, dir: null });
-  const [filter, setFilter] = useState('');
-  const [colorBy, setColorBy] = useState(null);
-  const [selected, setSelected] = useState(() => new Set());
-
+const HParamsTable = ({
+  records,
+  paramKeys,
+  metricKeys,
+  tagKeys,
+  sort,
+  setSort,
+  filter,
+  setFilter,
+  colorBy,
+  setColorBy,
+  selected,
+  setSelected,
+}) => {
   const columns = useMemo(
     () => buildColumns(paramKeys, metricKeys, tagKeys),
     [paramKeys, metricKeys, tagKeys]