Prevent unnecessary DAG render (#332)

* Prevent unnecessary DAG render

* no log

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

gui/package-lock.json

@@ -17,9 +17,11 @@
         "@mui/x-date-pickers": "^6.0.0",
         "@projectstorm/react-diagrams": "^7.0.2",
         "date-fns": "^2.29.3",
+        "fast-deep-equal": "^3.1.3",
         "formik": "^2.2.9",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "taipy-gui": "file:../../../.virtualenvs/taipy-OW_uNObx/Lib/site-packages/taipy/gui/webapp"
       },
       "devDependencies": {
         "@types/react": "^18.0.15",
@@ -38,6 +40,9 @@
         "webpack-cli": "^5.0.1"
       }
     },
+    "../../../.virtualenvs/taipy-OW_uNObx/Lib/site-packages/taipy/gui/webapp": {
+      "version": "3.0.0"
+    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -2668,8 +2673,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.1",
@@ -4796,6 +4800,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/taipy-gui": {
+      "resolved": "../../../.virtualenvs/taipy-OW_uNObx/Lib/site-packages/taipy/gui/webapp",
+      "link": true
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

gui/package.json

@@ -27,6 +27,7 @@
     "@mui/x-date-pickers": "^6.0.0",
     "@projectstorm/react-diagrams": "^7.0.2",
     "date-fns": "^2.29.3",
+    "fast-deep-equal": "^3.1.3",
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

gui/src/ScenarioDag.tsx

@@ -7,6 +7,7 @@ import Paper from "@mui/material/Paper";
 import Toolbar from "@mui/material/Toolbar";
 import { ZoomIn } from "@mui/icons-material";
 import createEngine from "@projectstorm/react-diagrams";
+import deepEqual from "fast-deep-equal/es6";
 
 import { DisplayModel } from "./utils/types";
 import { createDagreEngine, initDiagram, populateModel, relayoutDiagram } from "./utils/diagram";
@@ -67,6 +68,7 @@ const ScenarioDag = (props: ScenarioDagProps) => {
     const [scenarioId, setScenarioId] = useState("");
     const [engine] = useState(createEngine);
     const [dagreEngine] = useState(createDagreEngine);
+    const [displayModel, setDisplayModel] = useState<DisplayModel>();
     const dispatch = useDispatch();
     const module = useModule();
 
@@ -74,7 +76,13 @@ const ScenarioDag = (props: ScenarioDagProps) => {
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
 
     const sizeSx = useMemo(
-        () => ({ width: props.width || "100%", height: props.height || "50vh", display: "grid", gridTemplateRows: showToolbar ? "auto 1fr" : "1fr", gridTemplateColumns: "1fr" }),
+        () => ({
+            width: props.width || "100%",
+            height: props.height || "50vh",
+            display: "grid",
+            gridTemplateRows: showToolbar ? "auto 1fr" : "1fr",
+            gridTemplateColumns: "1fr",
+        }),
         [props.width, props.height, showToolbar]
     );
 
@@ -86,7 +94,7 @@ const ScenarioDag = (props: ScenarioDagProps) => {
         }
     }, [props.coreChanged, props.updateVarName, scenarioId, module, dispatch, props.id]);
 
-    const displayModel = useMemo(() => {
+    useEffect(() => {
         let dm: DisplayModel | undefined = undefined;
         if (Array.isArray(props.scenario)) {
             dm = getValidScenario(props.scenario);
@@ -97,7 +105,7 @@ const ScenarioDag = (props: ScenarioDagProps) => {
                 // Do nothing
             }
         }
-        return dm;
+        setDisplayModel((oldDm) => (deepEqual(oldDm, dm) ? oldDm : dm));
     }, [props.scenario, props.defaultScenario]);
 
     const relayout = useCallback(() => relayoutDiagram(engine, dagreEngine), [engine, dagreEngine]);