added seek to selected row + row select combobox in table

DiamondLightSource · Dec 17, 2019 · 68b3fac · 68b3fac
1 parent 68dc596
commit 68b3fac
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 3 deletions.
diff --git a/src/malcolmWidgets/table/__snapshots__/table.container.test.js.snap b/src/malcolmWidgets/table/__snapshots__/table.container.test.js.snap
@@ -1073,7 +1073,41 @@ exports[`Table container renders correctly 1`] = `
     <div
       style={
         Object {
+          "display": "flex",
           "flexGrow": 1,
+          "justifyContent": "center",
+          "padding": "4px",
+        }
+      }
+    >
+      <WithStyles(Typography)
+        style={
+          Object {
+            "minWidth": "120px",
+          }
+        }
+      >
+        Selected Row:
+      </WithStyles(Typography)>
+      <WithStyles(WidgetComboBox)
+        Choices={
+          Array [
+            0,
+            1,
+            2,
+            3,
+            4,
+          ]
+        }
+        selectEventHandler={[Function]}
+      />
+    </div>
+    <div
+      style={
+        Object {
+          "display": "flex",
+          "flexGrow": 1,
+          "justifyContent": "center",
           "padding": "4px",
         }
       }
@@ -1085,7 +1119,9 @@ exports[`Table container renders correctly 1`] = `
     <div
       style={
         Object {
+          "display": "flex",
           "flexGrow": 1,
+          "justifyContent": "center",
           "padding": "4px",
         }
       }
@@ -1099,7 +1135,9 @@ exports[`Table container renders correctly 1`] = `
     <div
       style={
         Object {
+          "display": "flex",
           "flexGrow": 1,
+          "justifyContent": "center",
           "padding": "4px",
         }
       }
@@ -2186,7 +2224,42 @@ exports[`Table container subelement in url selects row correctly 1`] = `
     <div
       style={
         Object {
+          "display": "flex",
+          "flexGrow": 1,
+          "justifyContent": "center",
+          "padding": "4px",
+        }
+      }
+    >
+      <WithStyles(Typography)
+        style={
+          Object {
+            "minWidth": "120px",
+          }
+        }
+      >
+        Selected Row:
+      </WithStyles(Typography)>
+      <WithStyles(WidgetComboBox)
+        Choices={
+          Array [
+            0,
+            1,
+            2,
+            3,
+            4,
+          ]
+        }
+        Value={1}
+        selectEventHandler={[Function]}
+      />
+    </div>
+    <div
+      style={
+        Object {
+          "display": "flex",
           "flexGrow": 1,
+          "justifyContent": "center",
           "padding": "4px",
         }
       }
@@ -2198,7 +2271,9 @@ exports[`Table container subelement in url selects row correctly 1`] = `
     <div
       style={
         Object {
+          "display": "flex",
           "flexGrow": 1,
+          "justifyContent": "center",
           "padding": "4px",
         }
       }
@@ -2212,7 +2287,9 @@ exports[`Table container subelement in url selects row correctly 1`] = `
     <div
       style={
         Object {
+          "display": "flex",
           "flexGrow": 1,
+          "justifyContent": "center",
           "padding": "4px",
         }
       }

diff --git a/src/malcolmWidgets/table/table.container.js b/src/malcolmWidgets/table/table.container.js
@@ -15,6 +15,7 @@ import {
   malcolmRevertAction,
 } from '../../malcolm/malcolmActionCreators';
 import WidgetTable from './virtualizedTable.component';
+import WidgetComboBox from '../comboBox/comboBox.component';
 import navigationActions from '../../malcolm/actions/navigation.actions';
 import NavTypes from '../../malcolm/NavTypes';
 
@@ -51,13 +52,33 @@ const TableContainer = props => {
     props.copyTable(path);
   }
   const pad = child => (
-    <div style={{ padding: '4px', flexGrow: 1 }}>{child}</div>
+    <div
+      style={{
+        display: 'flex',
+        padding: '4px',
+        flexGrow: 1,
+        justifyContent: 'center',
+      }}
+    >
+      {child}
+    </div>
   );
   const updateTime = `Update received @   ${new Date(
     props.attribute.raw.timeStamp.secondsPastEpoch * 1000
   ).toISOString()}`;
   const footerItems = [
     ...props.footerItems,
+    props.attribute.localState &&
+      pad([
+        <Typography style={{ minWidth: '120px' }}>Selected Row:</Typography>,
+        <WidgetComboBox
+          Choices={props.attribute.localState.value.map((val, ind) => ind)}
+          Value={props.selectedRow}
+          selectEventHandler={event => {
+            props.rowClickHandler(path, `row.${event}`);
+          }}
+        />,
+      ]),
     props.attribute.localState && props.attribute.localState.flags.table.fresh
       ? pad(<Typography>Up to date!</Typography>)
       : pad(<Typography>{updateTime}</Typography>),
@@ -192,7 +213,7 @@ TableContainer.propTypes = {
       meta: PropTypes.shape({
         writeable: PropTypes.bool,
       }),
-      value: PropTypes.shape({}),
+      value: PropTypes.array,
       isDirty: PropTypes.bool,
       flags: PropTypes.shape({
         table: PropTypes.shape({

diff --git a/src/malcolmWidgets/table/virtualizedTable.component.js b/src/malcolmWidgets/table/virtualizedTable.component.js
@@ -325,7 +325,6 @@ const WidgetTable = props => {
     rowFlagHandler: mapRowFlagHandler(props.localState, props.setFlag),
   };
   const columnWidgetTags = getTableWidgetTags(tableState.meta);
-  console.log(JSON.stringify(tableState));
   return (
     <div
       role="presentation"
@@ -362,6 +361,7 @@ const WidgetTable = props => {
             return (
               <div>
                 <Table
+                  scrollToIndex={props.selectedRow}
                   noRowsRenderer={() => (
                     <div className={props.classes.textBody}>
                       <Typography style={{ fontSize: '14pt' }}>
@@ -462,6 +462,7 @@ WidgetTable.propTypes = {
       path: PropTypes.string,
     }),
   }).isRequired,
+  selectedRow: PropTypes.number,
   eventHandler: PropTypes.func.isRequired,
   closePanelHandler: PropTypes.func.isRequired,
   rowClickHandler: PropTypes.func.isRequired,
@@ -476,6 +477,7 @@ WidgetTable.defaultProps = {
   localState: undefined,
   hideInfo: false,
   showFooter: false,
+  selectedRow: undefined,
   addRow: () => {},
 };