Merge pull request #401 from dls-controls/feature/fast-update-graph-p…

…erf-#317

Feature/fast update graph perf #317

demos/sprint10/bug-fixes.md

@@ -0,0 +1,14 @@
+# Bug fixes
+
+## Demo
+
+### Details footer
+
+1. Add a footer to the main site
+1. Open the details panel for a block and show there is no footer there.
+
+### Layout loading
+
+1. I couldn't find what was causing the `nulls` to be sent but I've added defensive code to stop `nulls` being sent to the server for the block MRIs.
+
+

demos/sprint10/child-panel.md

@@ -0,0 +1,5 @@
+# Child panel open state
+
+## Demo
+1. Run through the story details to see the various scenarios
+1. Run the e2e tests to show these scenarios

demos/sprint10/code-quality.md

@@ -0,0 +1,16 @@
+# Code Quality
+
+**Stories covered:** 208, 205, 388, 333
+
+## Demo
+
+1. Go to https://sonarcloud.io/dashboard?id=malcolmjs
+1. Comment on the code smells going down and the duplication down to 1%
+
+1. Show the test utilities as a make-shift documentation for the store, describe the top level structure and then the various methods underneath.
+
+1. Show the updated screenshots in the documentation at https://malcolmjs.readthedocs.io/en/latest/userguide/quick-start.html
+
+1. Style updates:
+   - show the site running in firefox and then show that combo highlights are now white.
+

demos/sprint10/overview.md

@@ -0,0 +1,48 @@
+# Sprint 10
+
+## Stories
+
+### Done
+- 331: Port target should be bigger
+- 338: Show a drop zone for port when making links
+- 208: Address code smells in SonarQube
+- 378: /details route shouldn't apply footerHeight
+- 205: Work out how to document the store in a maintainable way
+- 316: Layout loading doesn't stop
+- 333: Attribute style updates
+- 212: update the table components to have fixed or growing width
+- 307: persist localstate for text input on redux
+- 274: sort out when the child panel should be visible
+- 207: refactor the malcolm reducer
+- 388: fix screenshots
+
+### In Progress
+- 317: fix performance when showing a fast updating graph
+
+
+
+## Demo Running Order
+
+Ray
+
+-------
+
+- 331: Port target should be bigger
+- 338: Show a drop zone for port when making links
+- 208: Address code smells in SonarQube
+- 205: Work out how to document the store in a maintainable way
+- 388: fix screenshots
+- 333: Attribute style updates
+- 378: /details route shouldn't apply footerHeight
+- 316: Layout loading doesn't stop
+- 274: sort out when the child panel should be visible
+
+
+
+Bryan
+
+--------
+
+- 212: update the table components to have fixed or growing width
+- 307: persist localstate for text input on redux
+- 207: refactor the malcolm reducer

demos/sprint10/port-target.md

@@ -0,0 +1,11 @@
+# Port Updates
+
+**Stories covered:** 331, 338
+
+## Demo
+
+1. Go to http://localhost:3000/gui/PANDA/layout
+1. Run autolayout
+1. Make a new link from a source port, show that the drop zone only appears for a sink port of the same type
+1. Show it doesn't appear for another source port
+1. Show it doesn't appear if it is a different type

server/subscriptionFeed.js

@@ -66,7 +66,7 @@ const activeSubscriptions = [
   {
     path: [ "PANDA:INENC1", "a" ],
     index: 0,
-    interval: 200,
+    interval: 50,
     update: (response, index) => {
       response.changes[0][1].value = (index%4 < 2);
       const now = (new Date());
@@ -78,7 +78,7 @@ const activeSubscriptions = [
   {
     path: [ "PANDA:INENC1", "b" ],
     index: 0,
-    interval: 200,
+    interval: 50,
     update: (response, index) => {
       response.changes[0][1].value = ((index+1)%4 < 2);
       const now = (new Date());

src/index.css

@@ -15,6 +15,10 @@ body {
   }
 }
 
+.srd-default-link--hover-path {
+  stroke: #ffffffa6 !important;
+}
+
 .srd-default-link--highlight-path {
   stroke: #f50057 !important;
 }

src/layout/block/blockWidget.component.js

@@ -108,7 +108,11 @@ const BlockWidget = props => {
       })}
       elevation={8}
       onClick={e => props.node.clickHandler(e)}
-      onMouseDown={() => props.node.mouseDownHandler(true)}
+      onMouseDown={e => {
+        if (!e.isPortClick) {
+          props.node.mouseDownHandler(true);
+        }
+      }}
       onMouseUp={() => props.node.mouseDownHandler(false)}
     >
       <Typography className={props.classes.title}>

src/layout/blockPort/blockPortWidget.component.js

@@ -98,7 +98,10 @@ class BlockPortWidget extends BaseWidget {
         {...this.getProps()}
         data-name={this.props.portName}
         data-nodeid={this.props.nodeId}
-        onMouseDown={() => this.props.mouseDownHandler(this.props.portId, true)}
+        onMouseDown={e => {
+          e.isPortClick = true;
+          this.props.mouseDownHandler(this.props.portId, true);
+        }}
         onMouseUp={() => this.props.mouseDownHandler(this.props.portId, false)}
       >
         <div

src/layout/link/__snapshots__/link.factory.test.js.snap

@@ -8,14 +8,14 @@ exports[`LinkFactory generates react widget 1`] = `
     key="link-0"
   >
     <path
-      className=""
+      className="srd-default-link--highlight-path "
       d="M 0,0 C 50,0 50,0 100,0"
       onClick={[Function]}
       stroke="rgba(255,255,255,0.5)"
       strokeWidth={3}
     />
     <path
-      className=""
+      className="srd-default-link--highlight-path "
       d="M 0,0 C 50,0 50,0 100,0"
       data-linkid="1"
       data-point={0}

src/layout/link/autoLinkSegment.js

@@ -9,6 +9,7 @@ class MalcolmAutoLinkSegment extends BaseWidget {
     this.refPaths = [];
     this.state = {
       selected: false,
+      hovering: false,
     };
   }
 
@@ -29,10 +30,10 @@ class MalcolmAutoLinkSegment extends BaseWidget {
         />
         <circle
           onMouseLeave={() => {
-            this.setState({ selected: false });
+            this.setState({ ...this.state, hovering: false });
           }}
           onMouseEnter={() => {
-            this.setState({ selected: true });
+            this.setState({ ...this.state, hovering: true });
           }}
           data-id={this.props.link.points[pointIndex].id}
           data-linkid={this.props.link.id}
@@ -56,6 +57,7 @@ class MalcolmAutoLinkSegment extends BaseWidget {
           this.props.link,
           this,
           this.state.selected || this.props.link.isSelected(),
+          this.state.hovering,
           path
         ),
       {
@@ -67,14 +69,14 @@ class MalcolmAutoLinkSegment extends BaseWidget {
       ...extraProps,
       strokeLinecap: 'round',
       onMouseLeave: () => {
-        this.setState({ selected: false });
+        this.setState({ ...this.state, hovering: false });
       },
       onMouseEnter: () => {
-        this.setState({ selected: true });
+        this.setState({ ...this.state, hovering: true });
       },
       ref: null,
       'data-linkid': this.props.link.getID(),
-      strokeOpacity: this.state.selected ? 0.1 : 0,
+      strokeOpacity: this.state.hovering ? 0.1 : 0,
       strokeWidth: 20,
     });
 

src/layout/link/link.factory.js

@@ -3,6 +3,12 @@ import { DefaultLinkFactory } from 'storm-react-diagrams';
 import MalcolmLinkModel from './link.model';
 import MalcolmAutoLinkSegment from './autoLinkSegment';
 
+const findHightlightClass = (model, widget, selected, hovering) => {
+  if (selected || !model.targetPort) {
+    return widget.bem('--highlight-path');
+  }
+  return hovering ? widget.bem('--hover-path') : '';
+};
 /* eslint class-methods-use-this: ["error", { "exceptMethods": ["generateReactWidget", "getNewInstance", "generateLinkSegment"] }] */
 class MalcolmLinkFactory extends DefaultLinkFactory {
   constructor() {
@@ -21,10 +27,10 @@ class MalcolmLinkFactory extends DefaultLinkFactory {
     return new MalcolmLinkModel();
   }
 
-  generateLinkSegment(model, widget, selected, path) {
+  generateLinkSegment(model, widget, selected, hovering, path) {
     return (
       <path
-        className={selected ? widget.bem('--highlight-path') : ''}
+        className={findHightlightClass(model, widget, selected, hovering)}
         strokeWidth={model.width}
         stroke={model.color}
         d={path}

src/mainMalcolmView/__snapshots__/middlePanel.container.test.js.snap

@@ -93,12 +93,6 @@ exports[`MalcolmMiddlePanel renders an archive viewer pane if the mainAttribute
       <Connect(WithTheme(AttributeViewer))
         attributeName="health"
         blockName="test1"
-        openPanels={
-          Object {
-            "child": false,
-            "parent": true,
-          }
-        }
         typeId="malcolm:core/StringMeta:1.0"
         widgetTag="widget:textupdate"
       />

src/mainMalcolmView/middlePanel.container.js

@@ -211,7 +211,7 @@ const findAttributeComponent = props => {
               blockName={props.parentBlock}
               widgetTag={widgetTag}
               typeId={props.typeId}
-              openPanels={{ parent: props.openParent, child: props.openChild }}
+              // openPanels={{ parent: props.openParent, child: props.openChild }}
             />
           </div>
         </div>

src/malcolm/actions/navigation.actions.js

@@ -135,10 +135,15 @@ const navigateToPalette = () => (dispatch, getState) => {
     .reverse()
     .findIndex(nav => nav.navType === NavTypes.Attribute);
   if (lastAttributeNav > -1) {
+    const routeEnding =
+      navigationLists[navigationLists.length - 1].navType === NavTypes.Palette
+        ? ''
+        : '.palette';
+
     const newPath = `/gui/${navigationLists
       .filter((nav, i) => i <= navigationLists.length - 1 - lastAttributeNav)
       .map(nav => nav.path)
-      .join('/')}/.palette`;
+      .join('/')}/${routeEnding}`;
     dispatch(push(newPath));
   }
 };

src/malcolm/actions/navigation.actions.test.js

@@ -71,6 +71,23 @@ describe('navigateToPalette', () => {
   it('changes the url to show the palette', () => {
     const dispatches = [];
     const state = buildNavState();
+    state.malcolm.navigation.navigationLists.push({
+      navType: NavTypes.Palette,
+      path: '.palette',
+    });
+
+    const navAction = navigationActions.navigateToPalette();
+
+    navAction(action => dispatches.push(action), () => state);
+
+    expect(dispatches).toHaveLength(1);
+    expect(dispatches[0].type).toEqual('@@router/CALL_HISTORY_METHOD');
+    expect(dispatches[0].payload.args[0]).toEqual('/gui/PANDA/layout/');
+  });
+
+  it('closes the palette if it is already open', () => {
+    const dispatches = [];
+    const state = buildNavState();
 
     const navAction = navigationActions.navigateToPalette();
 

src/malcolm/reducer/attribute.reducer.js

@@ -127,12 +127,15 @@ export const portsAreDifferent = (oldAttribute, newAttribute) => {
   return true;
 };
 
-export const updateNavigation = (state, attributeName) => {
+export const updateNavigation = (state, attributeName, attribute) => {
   let { navigation } = state;
+  const matchingNav = navigation.navigationLists.find(
+    nav => nav.path.split('.')[0] === attributeName
+  );
   if (
-    navigation.navigationLists.findIndex(
-      nav => nav.path.split('.')[0] === attributeName
-    ) > -1
+    matchingNav &&
+    (matchingNav.children !== attribute.calculated.children ||
+      matchingNav.label !== attribute.raw.meta.label)
   ) {
     navigation = processNavigationLists(
       state.navigation.navigationLists.map(nav => {
@@ -471,9 +474,12 @@ export function updateAttribute(
           : updatedState.layoutEngine;
 
       if (!ignoreSecondaryCalculations) {
-        const navigation = updateNavigation(updatedState, attributeName);
+        const navigation = updateNavigation(
+          updatedState,
+          attributeName,
+          attributes[matchingAttributeIndex]
+        );
         updatedState.navigation = navigation;
-
         updatedState = navigationReducer.updateNavTypes(updatedState);
       }
 
@@ -492,19 +498,6 @@ export function updateMultipleAttributes(oldState, payload) {
     updatedState = updateAttribute(updatedState, innerPayload);
   }
 
-  for (let i = 0; i < payload.actions.length; i += 1) {
-    const innerPayload = payload.actions[i].payload;
-    const { path } = updatedState.messagesInFlight[innerPayload.id];
-    const attributeName = path[1];
-
-    const navigation = updateNavigation(updatedState, attributeName);
-
-    if (navigation !== updatedState.navigation) {
-      updatedState.navigation = navigation;
-      break;
-    }
-  }
-
   updatedState = navigationReducer.updateNavTypes(updatedState);
 
   return updatedState;
@@ -548,23 +541,12 @@ export function revertLocalState(oldState, payload) {
     const blocks = { ...state.blocks };
     blocks[blockName] = { ...state.blocks[blockName], attributes };
 
-    let updatedState = {
+    const updatedState = {
       ...state,
       blocks,
     };
 
-    // update the navigation if the attribute was part of the path
-    const navigation = updateNavigation(updatedState, attributeName);
-
-    const layout = updateLayout(state, updatedState, blockName, attributeName);
-
-    updatedState = {
-      ...updatedState,
-      layout,
-      navigation,
-    };
-
-    return navigationReducer.updateNavTypes(updatedState);
+    return updatedState;
   }
   return oldState;
 }