[app] Fix usage of cytoscape in topology graph

CHANGELOG.md

@@ -24,6 +24,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#358](https://github.com/kobsio/kobs/pull/#358): [app] Fix namespace handling, when multiple namespaces are selected.
 - [#359](https://github.com/kobsio/kobs/pull/#359): [app] Fix pagination, when the number of items per page is changed.
 - [#360](https://github.com/kobsio/kobs/pull/#360): [app] Fix static file handling, when url contains a dot (`.`).
+- [#364](https://github.com/kobsio/kobs/pull/#364): [app] Fix usage of cytoscape in the topology graph. The fix was also applied for the `istio` and `kiali` plugin.
 
 ### Changed
 

plugins/app/src/components/topology/ApplicationsTopologyGraph.tsx

@@ -138,19 +138,21 @@ const TopologyGraph: React.FunctionComponent<ITopologyGraphProps> = ({
   );
 
   useEffect(() => {
-    if (graph.current) {
-      if (layout.current) {
-        layout.current.stop();
-      }
+    setTimeout(() => {
+      if (graph.current) {
+        if (layout.current) {
+          layout.current.stop();
+        }
 
-      graph.current.add({
-        edges: edges,
-        nodes: nodes,
-      });
+        graph.current.add({
+          edges: edges,
+          nodes: nodes,
+        });
 
-      layout.current = graph.current.elements().makeLayout(dagreLayout);
-      layout.current.run();
-    }
+        layout.current = graph.current.elements().makeLayout(dagreLayout);
+        layout.current.run();
+      }
+    }, 100);
   }, [edges, nodes, size]);
 
   useEffect(() => {
@@ -165,10 +167,6 @@ const TopologyGraph: React.FunctionComponent<ITopologyGraphProps> = ({
 
         graph.current = cytoscape({
           container: container.current,
-          elements: {
-            edges: edges,
-            nodes: nodes,
-          },
           style: styleSheet,
         });
         graph.current.on('tap', onTap);

plugins/plugin-istio/src/components/panel/TopologyGraph.tsx

@@ -169,19 +169,21 @@ const TopologyGraph: React.FunctionComponent<ITopologyGraphProps> = ({
   );
 
   useEffect(() => {
-    if (graph.current) {
-      if (layout.current) {
-        layout.current.stop();
-      }
+    setTimeout(() => {
+      if (graph.current) {
+        if (layout.current) {
+          layout.current.stop();
+        }
 
-      graph.current.add({
-        edges: edges,
-        nodes: nodes,
-      });
+        graph.current.add({
+          edges: edges,
+          nodes: nodes,
+        });
 
-      layout.current = graph.current.elements().makeLayout(dagreLayout);
-      layout.current.run();
-    }
+        layout.current = graph.current.elements().makeLayout(dagreLayout);
+        layout.current.run();
+      }
+    }, 100);
   }, [edges, nodes, size]);
 
   useEffect(() => {
@@ -196,10 +198,6 @@ const TopologyGraph: React.FunctionComponent<ITopologyGraphProps> = ({
 
         graph.current = cytoscape({
           container: container.current,
-          elements: {
-            edges: edges,
-            nodes: nodes,
-          },
           style: styleSheet,
         });
         graph.current.on('tap', onTap);

plugins/plugin-kiali/src/components/panel/Graph.tsx

@@ -231,19 +231,21 @@ const Graph: React.FunctionComponent<IGraphProps> = ({ instance, times, edges, n
   );
 
   useEffect(() => {
-    if (graph.current) {
-      if (layout.current) {
-        layout.current.stop();
-      }
+    setTimeout(() => {
+      if (graph.current) {
+        if (layout.current) {
+          layout.current.stop();
+        }
 
-      graph.current.add({
-        edges: edges as cytoscape.EdgeDefinition[],
-        nodes: nodes as cytoscape.NodeDefinition[],
-      });
+        graph.current.add({
+          edges: edges as cytoscape.EdgeDefinition[],
+          nodes: nodes as cytoscape.NodeDefinition[],
+        });
 
-      layout.current = graph.current.elements().makeLayout(dagreLayout);
-      layout.current.run();
-    }
+        layout.current = graph.current.elements().makeLayout(dagreLayout);
+        layout.current.run();
+      }
+    }, 100);
   }, [edges, nodes, size]);
 
   useEffect(() => {
@@ -258,10 +260,6 @@ const Graph: React.FunctionComponent<IGraphProps> = ({ instance, times, edges, n
 
         graph.current = cytoscape({
           container: container.current,
-          elements: {
-            edges: edges as cytoscape.EdgeDefinition[],
-            nodes: nodes as cytoscape.NodeDefinition[],
-          },
           style: styleSheet,
         });
         graph.current.on('tap', onTap);