fix(topology): merge topology elements on update

[aptmac]

Welcome to Cryostat! 👋

Before contributing, make sure you have:

• Read the contributing guidelines
• Linked a relevant issue which this PR resolves
• Linked any other relevant issues, PR's, or documentation, if any
• Resolved all conflicts, if any
• Rebased your branch PR on top of the latest upstream main branch
• Attached at least one of the following labels to the PR: [chore, ci, docs, feat, fix, test]
• Signed all commits using a GPG signature

To recreate commits with GPG signature git fetch upstream && git rebase --force --gpg-sign upstream/main

---

Fixes: #122

Description of the change:

This change switches the boolean in visualization.fromModel() in TopologyGraphView from false to true, in-order to "merge" the topology elements on update instead of removing and rebuilding them.

Motivation for the change:

What seems to be the issue is that when the boolean is false the visualization clears out all the old elements before re-creating them. This results in the error because it ends up setting the controller to undefined, but during the process of destroying the colalayout there is a check for that controller.

With merge set to true the old elements are cleaned up after the new elements are created, and we don't run into this issue where the controller doesn't exist.

Before:

After:

[tthvo]

Looks good to me! There is one thing I think might be worth it to do here too. We should create an initial model for the visualization controller.

The fromModel method must be called on the controller to create the nodes

https://www.patternfly.org/topology/getting-started

I am unsure it is truely necessary but in case it is required elsewhere that a model must be available at all time. The OCP console also does so: https://github.com/openshift/console/blob/126e3fab46c9cc85542783e5e50e272b4d6bd1f0/frontend/packages/topology/src/components/graph-view/Topology.tsx#L200

diff --git a/src/app/Topology/GraphView/TopologyGraphView.tsx b/src/app/Topology/GraphView/TopologyGraphView.tsx
index 466b1a8..e43b714 100644
--- a/src/app/Topology/GraphView/TopologyGraphView.tsx
+++ b/src/app/Topology/GraphView/TopologyGraphView.tsx
@@ -55,6 +55,15 @@ export const MAX_NODE_LIMIT = 100;
 export const DEFAULT_SIZEBAR_SIZE = 500;
 export const MIN_SIZEBAR_SIZE = 400;
 
+export const BASE_MODEL: Model = {
+  graph: {
+    id: TOPOLOGY_GRAPH_ID,
+    type: 'graph',
+    layout: 'Cola',
+    layers: [BOTTOM_LAYER, GROUPS_LAYER, DEFAULT_LAYER, TOP_LAYER],
+  },
+};
+
 export type SavedGraphPosition = {
   id?: string;
   type?: string;
@@ -146,6 +155,9 @@ export const TopologyGraphView: React.FC<TopologyGraphViewProps> = ({ transformC
         }
       }, 200),
     );
+
+    _newVisualization.fromModel(BASE_MODEL);
+
     return _newVisualization;
   }, [setSelectedIds, setSelectedEntity]);
 
@@ -171,10 +183,7 @@ export const TopologyGraphView: React.FC<TopologyGraphViewProps> = ({ transformC
       }),
       edges: _transformData.edges,
       graph: {
-        id: TOPOLOGY_GRAPH_ID,
-        type: 'graph',
-        layout: 'Cola',
-        layers: [BOTTOM_LAYER, GROUPS_LAYER, DEFAULT_LAYER, TOP_LAYER],
+        ...BASE_MODEL.graph!,
         data: { ...discoveryTree },
         x: graphData.x,
         y: graphData.y,