- [FP-2468 - Study performance decrease in tree view flow editor](htt…

…ps://movai.atlassian.net/browse/FP-2468)
MOV-AI · Jul 10, 2023 · a95e770 · a95e770
1 parent cbdb9bc
commit a95e770
Show file tree

Hide file tree

Showing 19 changed files with 364 additions and 430 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -40,3 +40,4 @@
 - [FP-2277 - Give back focus to Flow Editor after losing focus on some cases](https://movai.atlassian.net/browse/FP-2277)
 - [FP-2473 - IDE Flows appear as running but nodes don't in tree view](https://movai.atlassian.net/browse/FP-2473)
 - [FP-2519 - nodes on tree view show as alive when they are not](https://movai.atlassian.net/browse/FP-2519)
+- [FP-2468 - Study performance decrease in tree view flow editor](https://movai.atlassian.net/browse/FP-2468)
diff --git a/src/decorators/withBookmarks.jsx b/src/decorators/withBookmarks.jsx
@@ -204,7 +204,7 @@ const withBookmarks = Component => {
               {Object.values(bookmarks).map(bookmark => (
                 <BookmarkTab
                   data-testid="section_bookmark-tab"
-                  key={bookmark.name}
+                  key={bookmark?.name}
                   classes={classes}
                   bookmark={bookmark}
                   active={active}

diff --git a/src/editors/Flow/view/Components/Explorer/Preview.jsx b/src/editors/Flow/view/Components/Explorer/Preview.jsx
@@ -1,16 +1,17 @@
-import React, { useEffect, useRef, useCallback } from "react";
+import React, { useEffect, useRef, useCallback, useMemo } from "react";
 import * as d3 from "d3";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import Factory from "../Nodes/Factory";
-import { generateContainerId } from "../../Constants/constants";
+import { useSub, flowSub } from "./../interface/MainInterface";
 import { previewStyles } from "./styles";
 
 const Preview = props => {
   const { flowId, node, call } = props;
   const classes = previewStyles();
   const { t } = useTranslation();
-  const containerId = useRef(`preview_${generateContainerId(flowId)}`);
+  const mainInterface = useSub(flowSub)[flowId];
+  const containerId = useMemo(() => "preview_" + flowId, [flowId]);
   const svg = useRef(null);
 
   //========================================================================================
@@ -32,7 +33,8 @@ const Preview = props => {
       // Add temp node
       Factory.create(call, factoryOutput[scope], {
         canvas: {
-          containerId: containerId.current,
+          containerId,
+          mInterface: mainInterface,
           setMode: () => {
             /* empty */
           }
@@ -47,7 +49,7 @@ const Preview = props => {
           d3.select(obj.el)
             .append("svg:defs")
             .append("filter")
-            .attr("id", `shadow-${containerId.current}`)
+            .attr("id", `shadow-${containerId}`)
             .append("feDropShadow")
             .attr("dx", "1.5")
             .attr("dy", "1.5")
@@ -56,7 +58,7 @@ const Preview = props => {
         }
       });
     },
-    [call]
+    [call, mainInterface]
   );
 
   //========================================================================================
@@ -75,7 +77,7 @@ const Preview = props => {
   return (
     <div className={classes.previewHolder}>
       {!node.children && node.name ? (
-        <div id={containerId.current} ref={svg}></div>
+        <div id={containerId} ref={svg}></div>
       ) : (
         <p>{t("PreviewHelperText")}</p>
       )}

diff --git a/src/editors/Flow/view/Components/FlowBottomBar/FlowBottomBar.jsx b/src/editors/Flow/view/Components/FlowBottomBar/FlowBottomBar.jsx
@@ -26,7 +26,7 @@ const FlowBottomBar = props => {
 
   // Prop(s)
   const {
-    onToggleWarnings,
+    mainInterface,
     robotSelected,
     runningFlow,
     warnings,
@@ -36,6 +36,16 @@ const FlowBottomBar = props => {
   } = props;
 
   // Hook(s)
+
+  /**
+   * Toggle Warnings
+   */
+  const onToggleWarnings = useCallback(() => {
+    const newVisibility = !mainInterface?.canvas.warningsVisibility;
+    mainInterface?.onToggleWarnings({ data: newVisibility });
+    return newVisibility;
+  }, [mainInterface]);
+
   const classes = useStyles();
 
   //========================================================================================
@@ -180,7 +190,8 @@ FlowBottomBar.propTypes = {
   toggleFlowDebug: PropTypes.func,
   robotSelected: PropTypes.string,
   runningFlow: PropTypes.string,
-  flowDebugging: PropTypes.bool
+  flowDebugging: PropTypes.bool,
+  mainInterface: PropTypes.object,
 };
 
 FlowBottomBar.defaultProps = {

diff --git a/src/editors/Flow/view/Components/FlowTopBar/FlowTopBar.jsx b/src/editors/Flow/view/Components/FlowTopBar/FlowTopBar.jsx
@@ -67,7 +67,6 @@ const FlowTopBar = props => {
     call,
     alert,
     scope,
-    loading,
     mainInterface,
     id,
     name,
@@ -276,7 +275,7 @@ const FlowTopBar = props => {
    */
   const canRunFlow = useCallback(
     action => {
-      const graph = mainInterface.current?.graph;
+      const graph = mainInterface?.graph;
       // let's validate flow before continuing
       graph?.validateFlow();
 
@@ -555,7 +554,7 @@ const FlowTopBar = props => {
             <ToggleButton
               data-testid="input_default-flow"
               value={FLOW_VIEW_MODE.default}
-              disabled={loading}
+              disabled={mainInterface?.loading}
             >
               <Tooltip title={t("DefaultFlowView")}>
                 <GrainIcon fontSize="small" />
@@ -564,7 +563,7 @@ const FlowTopBar = props => {
             <ToggleButton
               data-testid="input_tree-view-flow"
               value={FLOW_VIEW_MODE.treeView}
-              disabled={loading}
+              disabled={mainInterface?.loading}
             >
               <Tooltip title={t("TreeView")}>
                 <i className={`icon-tree ${classes.treeIcon}`}></i>

diff --git a/src/editors/Flow/view/Components/FlowTopBar/hooks/useNodeStatusUpdate.js b/src/editors/Flow/view/Components/FlowTopBar/hooks/useNodeStatusUpdate.js
@@ -97,7 +97,7 @@ const useNodeStatusUpdate = (props, robotSelected, viewMode) => {
     nodeStatusRef.current = emptyNodeStatus;
     allNodeStatusRef.current = emptyAllNodeStatus;
     // Send updates to canvas
-    mainInterface.current?.resetAllNodeStatus();
+    mainInterface?.resetAllNodeStatus();
   }, [mainInterface]);
 
   /**
@@ -154,10 +154,10 @@ const useNodeStatusUpdate = (props, robotSelected, viewMode) => {
 
         activeFlow = isOnline ? robotStatusData.active_flow : "";
         onStartStopFlow(activeFlow);
-        mainInterface.current?.nodeStatusUpdated(running ? runningNodes.reduce(
-          (a, key) => ({ ...a, [mainInterface.current?.id + "__" + key]: 1 }),
+        mainInterface?.nodeStatusUpdated(running ? runningNodes.reduce(
+          (a, key) => ({ ...a, [mainInterface.id + "__" + key]: 1 }),
           {}
-        ) : { [mainInterface.current?.id]: 0 }, { isOnline, activeFlow });
+        ) : { [mainInterface?.id]: 0 }, { isOnline, activeFlow });
       }
       // Robot doesn't have "Status" key in Redis
       else {

diff --git a/src/editors/Flow/view/Components/Links/BaseLink.js b/src/editors/Flow/view/Components/Links/BaseLink.js
@@ -137,7 +137,7 @@ export default class BaseLink extends BaseLinkStruct {
     const { pathPoints } = this;
     this.object = d3
       .create("svg")
-      .attr("id", `path-${this.canvas.containerId}-${this.data.id}`)
+      .attr("id", `path-${this.canvas.mInterface.containerId}-${this.data.id}`)
       .attr("x", 0)
       .attr("y", 0)
       .attr("width", this.maxMovingPixels)
@@ -146,7 +146,7 @@ export default class BaseLink extends BaseLinkStruct {
     this.object
       .append("svg:defs")
       .append("filter")
-      .attr("id", `link-shadow-${this.canvas.containerId}-${this.data.id}`)
+      .attr("id", `link-shadow-${this.canvas.mInterface.containerId}-${this.data.id}`)
       .append("feDropShadow")
       .attr("dx", "1")
       .attr("dy", "1")
@@ -226,7 +226,7 @@ export default class BaseLink extends BaseLinkStruct {
   styleMouseOver = () => {
     this.changeStrokeColor()
       .path.attr("stroke-width", this.style.stroke.overWidth)
-      .attr("marker-mid", `url(#${this.canvas.containerId}-markerselected)`);
+      .attr("marker-mid", `url(#${this.canvas.mInterface.containerId}-markerselected)`);
   };
 
   /**

diff --git a/src/editors/Flow/view/Components/Nodes/BaseNode/BaseNode.js b/src/editors/Flow/view/Components/Nodes/BaseNode/BaseNode.js
@@ -53,7 +53,6 @@ class BaseNode extends BaseNodeStruct {
     this.object = null;
     this._drag = { handler: null, debounce: null, delta: { x: 0, y: 0 } };
     this._header = null;
-    this._selected = false;
     this._status = false; // true -> running: flase -> stopped
   }
 
@@ -127,17 +126,7 @@ class BaseNode extends BaseNodeStruct {
    * @returns {boolean} true if the node is selected, false otherwise
    */
   get selected() {
-    return this._selected;
-  }
-
-  /**
-   * selected - set node to selected
-   *
-   * @param {boolean} value true if the node is selected, false otherwise
-   */
-  set selected(value) {
-    this._selected = Boolean(value);
-    this.onSelected();
+    return this.canvas.mInterface.selectedNodes.filter(node => node === this).length;
   }
 
   /**
@@ -227,7 +216,7 @@ class BaseNode extends BaseNodeStruct {
       .create("svg")
       .attr(
         "id",
-        `${this.canvas.containerId}-${this.data.id || this.data.Template}`
+        `${this.canvas.mInterface.containerId}-${this.data.id || this.data.Template}`
       )
       .style("overflow", "visible")
       .attr("width", this.width + maxPadding)
@@ -246,7 +235,7 @@ class BaseNode extends BaseNodeStruct {
       .attr("width", this.width)
       .attr("height", this.height)
       .attr("class", convertTypeCss(this._template))
-      .attr("filter", `url(#shadow-${this.canvas.containerId})`)
+      .attr("filter", `url(#shadow-${this.canvas.mInterface.containerId})`)
       .attr("stroke", stroke.color.default)
       .attr("stroke-width", stroke.width.default);
 
@@ -623,9 +612,7 @@ class BaseNode extends BaseNodeStruct {
     this.object.style("cursor", "default");
 
     if (this.canvas.mode.current.id === EVT_NAMES.DRAG) {
-      this.canvas.mode.previous.id === EVT_NAMES.SELECT_NODE
-        ? this.canvas.setPreviousMode()
-        : this.canvas.setMode(EVT_NAMES.DEFAULT);
+      this.canvas.setMode(EVT_NAMES.DEFAULT);
     }
   };
 
@@ -656,24 +643,10 @@ class BaseNode extends BaseNodeStruct {
   };
 
   handleSelectionChange(shiftKey) {
-    clearTimeout(this.dbClickTimeout);
-    this.dbClickTimeout = setTimeout(() => {
-      // toggle node selection
-      const selection = !this.selected;
-
-      // shift key not pressed, set mode to default
-      if (!shiftKey) this.canvas.setMode(EVT_NAMES.DEFAULT, null);
-
-      // set the node selection
-      this.selected = selection;
-
-      // node selected mode
-      this.canvas.setMode(
-        EVT_NAMES.SELECT_NODE,
-        { nodes: [this], shiftKey },
-        true
-      );
-    }, 100);
+    // shift key not pressed, set mode to default
+    if (!shiftKey) this.canvas.setMode(EVT_NAMES.DEFAULT, null);
+    this.canvas.mInterface.onSelectNode({ nodes: [this], shiftKey });
+    this.canvas.mInterface.onNodeSelected(this);
   }
 
   /**