Fully implemented plot update behaviour fix

DiamondLightSource · Sep 12, 2018 · 262e0dc · 262e0dc
1 parent 907df46
commit 262e0dc
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "axios": "^0.18.0",
     "circular-buffer": "^1.0.2",
     "classnames": "^2.2.5",
+    "d3-time-format": "^2.1.3",
     "elkjs": "^0.3.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",

diff --git a/src/malcolm/reducer/malcolmReducer.js b/src/malcolm/reducer/malcolmReducer.js
@@ -30,7 +30,7 @@ import methodReducer from './method.reducer';
 import tableReducer from './table.reducer';
 
 const ARCHIVE_BUFFER_LENGTH = 1000; // length of circular buffer used for archiving
-export const ARCHIVE_REFRESH_INTERVAL = 0.5; // minimum time in seconds between updates of displayed archive data
+export const ARCHIVE_REFRESH_INTERVAL = 2.0; // minimum time in seconds between updates of displayed archive data
 
 const initialMalcolmState = {
   messagesInFlight: {},

diff --git a/src/malcolmWidgets/table/table.component.js b/src/malcolmWidgets/table/table.component.js
@@ -226,7 +226,7 @@ const WidgetTable = props => {
     <TableCell
       className={props.classes.textHeadings}
       padding="none"
-      key={column}
+      key={[-1, column]}
     >
       <Typography variant="subheading">{columnTitle}</Typography>
     </TableCell>
@@ -252,13 +252,13 @@ const WidgetTable = props => {
         }
       >
         <TableHead>
-          <TableRow className={props.classes.rowFormat}>
+          <TableRow className={props.classes.rowFormat} key={-1}>
             {[
               props.hideInfo ? null : (
                 <TableCell
                   className={props.classes.textHeadings}
                   padding="none"
-                  key={-1}
+                  key={[-1, -1]}
                 />
               ),
               ...columnHeadings,
@@ -318,7 +318,7 @@ const WidgetTable = props => {
         <TableFooter>
           <TableRow className={props.classes.rowFormat}>
             {props.footerItems.map((item, key) => (
-              <TableCell key={key}>{item}</TableCell>
+              <TableCell key={[values.length + 1, key]}>{item}</TableCell>
             ))}
           </TableRow>
         </TableFooter>

diff --git a/src/middlePanelViews/plotter.component.js b/src/middlePanelViews/plotter.component.js
@@ -3,9 +3,30 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withTheme } from '@material-ui/core/styles';
 import Plot from 'react-plotly.js/react-plotly';
+import { timeFormat } from 'd3-time-format';
 import { MalcolmTickArchive } from '../malcolm/malcolm.types';
 import { ARCHIVE_REFRESH_INTERVAL } from '../malcolm/reducer/malcolmReducer';
 
+const plotlyDateFormatter = timeFormat('%Y-%m-%d %H:%M:%S.%L');
+
+const comparePlotlyDateString = (date1, date2) => {
+  if (date1 instanceof Date || date2 instanceof Date) {
+    return false;
+  }
+  const date1Split = date1.split('.');
+  const date2Split = date2.split('.');
+  const date1Millis = parseFloat(`0.${date1Split[1].slice(0, 3)}`);
+  const date2Millis = parseFloat(`0.${date2Split[1].slice(0, 3)}`);
+  return date1Split[0] === date2Split[0] && date1Millis === date2Millis;
+};
+
+const returnedToInitialXRange = state =>
+  comparePlotlyDateString(
+    state.layout.xaxis.range[0],
+    state.originalXRange[0]
+  ) &&
+  comparePlotlyDateString(state.layout.xaxis.range[1], state.originalXRange[1]);
+
 const initialiseData = (color, name, dash) => ({
   x: [],
   y: [],
@@ -36,6 +57,11 @@ class Plotter extends React.Component {
             ],
           };
         }
+        if (!state.originalXRange) {
+          newState.originalXRange = newState.layout.xaxis.range.map(date =>
+            plotlyDateFormatter(date)
+          );
+        }
       }
       return newState;
     }
@@ -74,6 +100,7 @@ class Plotter extends React.Component {
     };
     this.startChangingViewState = this.startChangingViewState.bind(this);
     this.finishChangingViewState = this.finishChangingViewState.bind(this);
+    this.recalcRange = this.recalcRange.bind(this);
     this.renderTimeout = setTimeout(() => {}, 4000);
   }
 
@@ -95,13 +122,38 @@ class Plotter extends React.Component {
   }
 
   startChangingViewState() {
-    this.setState({ userChangingViewState: true });
+    this.setState({ ...this.state, userChangingViewState: true });
   }
 
   finishChangingViewState() {
+    if (returnedToInitialXRange(this.state)) {
+      this.recalcRange();
+    } else {
+      this.setState({
+        ...this.props.deriveState(this.props, this.state),
+        userChangingViewState: false,
+      });
+    }
+  }
+
+  recalcRange() {
     this.setState({
-      ...this.props.deriveState(this.props, this.state),
-      userChangingViewState: false,
+      ...this.state,
+      layout: {
+        ...this.state.layout,
+        datarevision: this.state.layout.datarevision + 1,
+        xaxis: {
+          color: this.props.theme.palette.text.primary,
+          range: [
+            new Date(this.state.data[0].x.slice(-1)[0].getTime() - 30000),
+            this.state.data[0].x.slice(-1)[0],
+          ],
+        },
+        yaxis: {
+          color: this.props.theme.palette.text.primary,
+          autorange: true,
+        },
+      },
     });
   }
 
@@ -121,7 +173,10 @@ class Plotter extends React.Component {
         layout={this.state.layout}
         style={{ width: '100%', height: '100%' }}
         useResizeHandler
-        onRelayout={this.finishChangingViewState}
+        onRelayout={event => {
+          console.log(event);
+          this.finishChangingViewState();
+        }}
         divId="plotComponent"
       />
     );