Dashboard improvements

gsa/package.json

@@ -43,6 +43,7 @@
     "i18next": "^11.3.3",
     "i18next-xhr-backend": "1.5.1",
     "ical.js": "^1.2.2",
+    "memoize-one": "^4.0.2",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.21",
     "prop-types": "^15.6.2",

gsa/src/web/components/chart/line.js

@@ -189,6 +189,7 @@ class LineChart extends React.Component {
       nextState.infoX !== this.state.infoX ||
       nextState.mouseX !== this.state.mouseX ||
       nextState.mouseY !== this.state.mouseY ||
+      nextState.data !== this.state.data ||
       nextState.displayInfo !== this.state.displayInfo;
   }
 
@@ -301,7 +302,10 @@ class LineChart extends React.Component {
 
   update() {
     const width = this.getWidth();
-    if (width !== this.state.width) {
+    if (width !== this.state.width ||
+      this.props.data !== this.state.data ||
+      this.props.height !== this.state.height) {
+      // update state if width, data or height has changed since last render
       this.setState(this.stateFromWidth(width));
     }
   }
@@ -361,6 +365,7 @@ class LineChart extends React.Component {
       .nice();
 
     return {
+      data,
       xScale,
       yScale,
       y2Scale,

gsa/src/web/components/dashboard/dashboard.js

@@ -23,6 +23,8 @@
 import 'core-js/fn/array/find-index';
 import 'core-js/fn/object/entries';
 
+import memoize from 'memoize-one';
+
 import React from 'react';
 
 import {connect} from 'react-redux';
@@ -114,6 +116,8 @@ export class Dashboard extends React.Component {
     this.handleRowResize = this.handleRowResize.bind(this);
     this.handleUpdateDisplay = this.handleUpdateDisplay.bind(this);
     this.handleRemoveDisplay = this.handleRemoveDisplay.bind(this);
+
+    this.getDisplaysById = memoize(rows => getDisplaysById(rows));
   }
 
   componentDidMount() {
@@ -140,37 +144,13 @@ export class Dashboard extends React.Component {
   handleItemsChange(gridItems = []) {
     const rows = this.getRows();
 
-    const displaysById = getDisplaysById(rows);
+    const displaysById = this.getDisplaysById(rows);
 
     this.updateRows(convertGridItemsToDisplays(gridItems, displaysById));
   }
 
   handleUpdateDisplay(id, props) {
-    const rows = this.getRows();
-
-    const rowIndex = rows.findIndex(
-      row => row.items.some(item => item.id === id));
-
-    const row = rows[rowIndex];
-
-    const rowItems = [
-      ...row.items,
-    ];
-
-    const displayIndex = rowItems.findIndex(i => i.id === id);
-
-    rowItems[displayIndex] = {
-      ...rowItems[displayIndex],
-      ...props,
-    };
-
-    const newRows = [...rows];
-    newRows[rowIndex] = {
-      ...row,
-      rows: rowItems,
-    };
-
-    this.updateRows(newRows);
+    this.updateDisplay(id, props);
   }
 
   handleRemoveDisplay(id) {
@@ -188,18 +168,15 @@ export class Dashboard extends React.Component {
     const newRows = [
       ...rows,
     ];
-    newRows[rowIndex] = {
+    const newRow = {
       ...row,
       height,
     };
+    newRows[rowIndex] = newRow;
 
     this.updateRows(newRows);
   }
 
-  getRows(defaultRows) {
-    return getRows(this.props.settings, defaultRows);
-  }
-
   handleInteraction() {
     const {onInteraction} = this.props;
 
@@ -208,6 +185,63 @@ export class Dashboard extends React.Component {
     }
   }
 
+  handleSetDisplayState(id, stateFunc) {
+    const currentState = this.getDisplayState(id);
+    const newState = stateFunc(currentState);
+
+    this.updateDisplayState(id, {
+      ...currentState,
+      ...newState,
+    });
+  };
+
+  getRows(defaultRows) {
+    return getRows(this.props.settings, defaultRows);
+  }
+
+  getDisplayState(id) {
+    const rows = this.getRows();
+    const displaysById = this.getDisplaysById(rows);
+    const display = displaysById[id];
+    return isDefined(display) ? display.state : undefined;
+  }
+
+  updateDisplayState(id, state) {
+    this.updateDisplay(id, {state});
+  }
+
+  updateDisplay(id, props) {
+    const rows = this.getRows();
+
+    const rowIndex = rows.findIndex(
+      row => row.items.some(item => item.id === id));
+
+    const row = rows[rowIndex];
+
+    const rowItems = [
+      ...row.items,
+    ];
+
+    const displayIndex = rowItems.findIndex(i => i.id === id);
+
+    const newDisplay = {
+      ...rowItems[displayIndex],
+      ...props,
+    };
+
+    rowItems[displayIndex] = newDisplay;
+
+    const newRows = [...rows];
+    const newRow = {
+      ...row,
+      items: rowItems,
+    };
+
+    newRows[rowIndex] = newRow;
+
+    this.updateRows(newRows);
+  }
+
   updateRows(rows) {
     this.save({rows});
   }
@@ -245,7 +279,7 @@ export class Dashboard extends React.Component {
       );
     }
 
-    const displaysById = getDisplaysById(rows);
+    const displaysById = this.getDisplaysById(rows);
 
     const getDisplayComponent = displayId => this.components[displayId];
     const getDisplaySettings = id => displaysById[id];
@@ -273,6 +307,7 @@ export class Dashboard extends React.Component {
         }) => {
           const {displayId, ...displayProps} = getDisplaySettings(id);
           const Component = getDisplayComponent(displayId);
+          const state = this.getDisplayState(id);
           return (
             <Component
               {...other}
@@ -281,6 +316,8 @@ export class Dashboard extends React.Component {
               height={height}
               width={width}
               id={id}
+              state={state}
+              setState={stateFunc => this.handleSetDisplayState(id, stateFunc)}
               onFilterIdChanged={
                 filterId => this.handleUpdateDisplay(id, {filterId})}
               onInteractive={this.props.onInteraction}

gsa/src/web/components/dashboard/display/datadisplay.js

@@ -29,7 +29,7 @@ import equal from 'fast-deep-equal';
 
 import _ from 'gmp/locale';
 
-import {isDefined, isFunction} from 'gmp/utils/identity';
+import {isDefined} from 'gmp/utils/identity';
 import {excludeObjectProps} from 'gmp/utils/object';
 
 import IconDivider from 'web/components/layout/icondivider';
@@ -125,15 +125,11 @@ class DataDisplay extends React.Component {
       data,
       originalData: this.props.data,
       title: this.props.title({data, id: this.props.id}),
-      childState: {
-        showLegend: true,
-        ...this.props.initialState,
-      },
     };
 
     this.handleDownloadSvg = this.handleDownloadSvg.bind(this);
     this.handleDownloadCsv = this.handleDownloadCsv.bind(this);
-    this.handleSetChildState = this.setChildState.bind(this);
+    this.handleSetState = this.handleSetState.bind(this);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -171,7 +167,7 @@ class DataDisplay extends React.Component {
       nextProps.width !== this.props.width ||
       nextState.data !== this.state.data ||
       nextProps.showFilterString !== this.props.showFilterString ||
-      nextState.childState !== this.state.childState ||
+      nextProps.state !== this.props.state ||
       this.hasFilterChanged(nextProps);
   }
 
@@ -215,23 +211,12 @@ class DataDisplay extends React.Component {
     }
   }
 
-  setChildState(state) {
-    if (isFunction(state)) {
-      this.setState(({childState}) => ({
-        childState: {
-          ...childState,
-          ...state(childState),
-        },
-      }));
-    }
-    else {
-      this.setState(({childState}) => ({
-        childState: {
-          ...childState,
-          ...state,
-        },
-      }));
-    }
+  getCurrentState(state = this.props.state) {
+    return {
+      showLegend: true,
+      ...this.props.initialState,
+      ...state,
+    };
   }
 
   handleDownloadSvg() {
@@ -274,9 +259,12 @@ class DataDisplay extends React.Component {
     download.click();
   }
 
+  handleSetState(stateFunc) {
+    return this.props.setState(state => stateFunc(this.getCurrentState(state)));
+  }
+
   render() {
     const {
-      childState,
       data: transformedData,
       title,
     } = this.state;
@@ -316,6 +304,7 @@ class DataDisplay extends React.Component {
     }
 
     const showContent = height > 0 && width > 0; // > 0 also checks for null, undefined and null
+    const state = this.getCurrentState();
     return (
       <Display
         title={`${title}`}
@@ -334,16 +323,16 @@ class DataDisplay extends React.Component {
                     width,
                     height,
                     svgRef: this.svgRef,
-                    state: childState,
-                    setState: this.handleSetChildState,
+                    state,
+                    setState: this.handleSetState,
                   })}
                 </React.Fragment>
             }
             <IconBar>
               <IconDivider flex="column">
                 {icons && icons({
-                  state: childState,
-                  setState: this.handleSetChildState,
+                  state,
+                  setState: this.handleSetState,
                   showFilterSelection,
                   showCsvDownload,
                   showSvgDownload,

gsa/src/web/pages/start/dashboard.js

@@ -70,6 +70,7 @@ const StartDashboard = ({
   id,
   loadSettings,
   saveSettings,
+  settings,
   onInteraction,
   onNewDisplay,
   onResetDashboard,
@@ -78,6 +79,7 @@ const StartDashboard = ({
   <Layout flex="column" grow>
     <Layout align="end">
       <DashboardControls
+        settings={settings}
         canAdd={canAddDisplay(props)}
         dashboardId={id}
         displayIds={ALL_DISPLAYS}
@@ -89,6 +91,8 @@ const StartDashboard = ({
     <Dashboard
       {...props}
       id={id}
+      isLoading={false}
+      settings={settings}
       showFilterSelection
       showFilterString
       defaultDisplays={DEFAULT_DISPLAYS}