fix(topology): fix to layout nodes correctly on first load

janus-idp · Feb 12, 2024 · 96395fc · 96395fc
1 parent ee8cc1d
commit 96395fc
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 12 deletions.
diff --git a/plugins/topology/package.json b/plugins/topology/package.json
@@ -48,6 +48,7 @@
     "git-url-parse": "^13.1.0",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
+    "mobx-react": "^7.6.0",
     "react-use": "^17.4.0"
   },
   "peerDependencies": {

diff --git a/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.tsx b/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.tsx
@@ -11,6 +11,7 @@ import {
   useVisualizationController,
   VisualizationSurface,
 } from '@patternfly/react-topology';
+import { observer } from 'mobx-react';
 
 import { TYPE_WORKLOAD } from '../../const';
 import { K8sResourcesContext } from '../../hooks/K8sResourcesContext';
@@ -36,6 +37,9 @@ const TopologyViewWorkloadComponent = ({
   const { loaded, dataModel } = useWorkloadsWatcher();
   const { clusters, selectedClusterErrors, responseError } =
     React.useContext(K8sResourcesContext);
+  const graphDimensions = controller.hasGraph()
+    ? controller.getGraph().getDimensions()
+    : undefined;
   const [
     sideBar,
     sideBarOpen,
@@ -51,18 +55,21 @@ const TopologyViewWorkloadComponent = ({
   ];
 
   React.useEffect(() => {
-    if (loaded && dataModel) {
-      const model = {
-        graph: {
-          id: 'g1',
-          type: 'graph',
-          layout,
-        },
-        ...dataModel,
-      };
-      controller.fromModel(model, true);
+    const model = {
+      graph: {
+        id: 'g1',
+        type: 'graph',
+        layout,
+      },
+    };
+    controller.fromModel(model);
+  }, [controller]);
+
+  React.useEffect(() => {
+    if (graphDimensions && loaded && dataModel) {
+      controller.fromModel(dataModel, true);
     }
-  }, [layout, loaded, dataModel, controller]);
+  }, [graphDimensions, layout, loaded, dataModel, controller]);
 
   React.useEffect(() => {
     if (dataModel) {
@@ -131,4 +138,4 @@ const TopologyViewWorkloadComponent = ({
   );
 };
 
-export default TopologyViewWorkloadComponent;
+export default observer(TopologyViewWorkloadComponent);
diff --git a/yarn.lock b/yarn.lock
@@ -3110,6 +3110,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.22.5":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -8198,6 +8205,13 @@
   dependencies:
     "@babel/runtime" "^7.23.6"
 
+"@mui/icons-material@^5.15.8":
+  version "5.15.9"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.9.tgz#8d11839d35cf3cfd62df40934d8e9485f66be620"
+  integrity sha512-6tLQoM6RylQuDnHR6qQay0G0pJgKmrhn5MIm0IfrwtmSO8eV5iUFR+nNUTXsWa24gt7ZbIKnJ962UlYaeXa4bg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+
 "@mui/material@^5.12.2":
   version "5.14.14"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.14.tgz#e47f3992b609002cd57a71f70e829dc2d286028c"
@@ -12200,6 +12214,18 @@
     telejson "^7.2.0"
     tiny-invariant "^1.3.1"
 
+"@storybook/[email protected]":
+  version "7.6.14"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.6.14.tgz#32c3854208bd54d04ba816867bf442c9216f9997"
+  integrity sha512-tyrnnXTh7Ca6HbtzYtZGZmbUkC+eYPdot41+YDERMxXCnejd18BnsH/pyGW66GwgY079Q7uhdDFyM63ynZrt/A==
+  dependencies:
+    "@storybook/client-logger" "7.6.14"
+    "@storybook/core-events" "7.6.14"
+    "@storybook/global" "^5.0.0"
+    qs "^6.10.0"
+    telejson "^7.2.0"
+    tiny-invariant "^1.3.1"
+
 "@storybook/[email protected]":
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.5.3.tgz#127ae3bcad169bf8c3eb3e1e6c9d587ad5f57e81"
@@ -12254,6 +12280,13 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
+"@storybook/[email protected]":
+  version "7.6.14"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.6.14.tgz#98dfb0092ed77d61d2e159a4504f375f1dfb7deb"
+  integrity sha512-rHa2hLU+80BN5E58Shf1g09YS6QEEOk5hwMuJ4WJfAypMDYPjnIsOYUboHClkCA9TDCH/iVhyRSPy83NWN2MZg==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+
 "@storybook/[email protected]":
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.5.3.tgz#8a294b8d12f304a2a9db902848977147394d451c"
@@ -12334,6 +12367,13 @@
   dependencies:
     ts-dedent "^2.0.0"
 
+"@storybook/[email protected]":
+  version "7.6.14"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.6.14.tgz#4ba595ea6df1bd760e8ed5c9ec8a39a722e09339"
+  integrity sha512-zuSMjOgju7WLFL+okTXVvOKKNzwqVGRVp5UhXeSikT4aXuVdpfepCfikkjntn12G1ybL7mfFCsBU2DV1lwwp6Q==
+  dependencies:
+    ts-dedent "^2.0.0"
+
 "@storybook/[email protected]":
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.5.3.tgz#23ea0757d6ffc0e9acc269b58efd7f75f5d781f6"
@@ -12429,6 +12469,13 @@
   dependencies:
     type-fest "^2.19.0"
 
+"@storybook/csf@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.2.tgz#8e7452f0097507f5841b5ade3f5da1525bc9afb2"
+  integrity sha512-ePrvE/pS1vsKR9Xr+o+YwdqNgHUyXvg+1Xjx0h9LrVx7Zq4zNe06pd63F5EvzTbCbJsHj7GHr9tkiaqm7U8WRA==
+  dependencies:
+    type-fest "^2.19.0"
+
 "@storybook/docs-mdx@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz#33ba0e39d1461caf048b57db354b2cc410705316"
@@ -12545,6 +12592,26 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/preview-api@^7.5.3":
+  version "7.6.14"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.6.14.tgz#50d2794e269c5182f285aaf3a07d50a2e1cf6a54"
+  integrity sha512-CnUEkTUK3ei3vw4Ypa9EOxEO9lCKc3HvVHxXu4z6Caoe/hRUc10Q6Nj1A7brqok1QLZ304qc715XdYFMahDhyA==
+  dependencies:
+    "@storybook/channels" "7.6.14"
+    "@storybook/client-logger" "7.6.14"
+    "@storybook/core-events" "7.6.14"
+    "@storybook/csf" "^0.1.2"
+    "@storybook/global" "^5.0.0"
+    "@storybook/types" "7.6.14"
+    "@types/qs" "^6.9.5"
+    dequal "^2.0.2"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    synchronous-promise "^2.0.15"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/[email protected]":
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.5.3.tgz#9abe434ea9fb280a7d2141b72be2958f7eb9cc5b"
@@ -12657,6 +12724,16 @@
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
+"@storybook/[email protected]":
+  version "7.6.14"
+  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.6.14.tgz#3cb9bcbc3142000cbe0808f3c8772376835dee9f"
+  integrity sha512-sJ3qn45M2XLXlOi+wkhXK5xsXbSVzi8YGrusux//DttI3s8wCP3BQSnEgZkBiEktloxPferINHT1er8/9UK7Xw==
+  dependencies:
+    "@storybook/channels" "7.6.14"
+    "@types/babel__core" "^7.0.0"
+    "@types/express" "^4.7.0"
+    file-system-cache "2.3.0"
+
 "@sucrase/webpack-loader@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@sucrase/webpack-loader/-/webpack-loader-2.0.0.tgz#b8a70b8d3df3eeb570e6a3315e1a9c6b723e4a37"