From 28b81efb552fac24bfd054998eacb720bf72096d Mon Sep 17 00:00:00 2001
From: Oliver Stolz <oliver.stolz@iml.fraunhofer.de>
Date: Tue, 7 May 2024 18:34:29 +0200
Subject: [PATCH] Enable dashboard to update token nodes

---
 .../code_visualization/element_creation.ts    |  2 +-
 client/src/code_visualization/main.ts         | 47 +++++++++++++++++--
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/client/src/code_visualization/element_creation.ts b/client/src/code_visualization/element_creation.ts
index 65227c5..c79b808 100644
--- a/client/src/code_visualization/element_creation.ts
+++ b/client/src/code_visualization/element_creation.ts
@@ -162,7 +162,7 @@ const loopTree = (
  * @param fileString a JSON string containing the graph objects
  * @returns an array containing all existing nodes and edges in the dotfile
  */
-const parseElementsFromDotFileString = (
+export const parseElementsFromDotFileString = (
   fileString: any,
   standaloneTesting = false
 ) => {
diff --git a/client/src/code_visualization/main.ts b/client/src/code_visualization/main.ts
index 43b1a30..e571bdb 100644
--- a/client/src/code_visualization/main.ts
+++ b/client/src/code_visualization/main.ts
@@ -6,6 +6,7 @@ import { setupCytoscapeInstance } from './setup_cytoscape';
 import { setupEventHandlers } from './event_handler';
 import { createGraph } from './graph_creation';
 import { rotateNodes } from './context_menu';
+import { parseElementsFromDotFileString } from './element_creation';
 
 const cytoscapeDiv = document.getElementById('cy');
 if (cytoscapeDiv) {
@@ -14,14 +15,14 @@ if (cytoscapeDiv) {
 
   // create the graph
   createGraph(cy, null);
+
   // global function to enable the dashboard in the standalone browser version to access the cytoscape instance
   (window as any).getCy = function () {
     return cy;
   };
+
   // global function used to update the dashboard in the standalone browser version
-  (window as any).createCodeVisualization = async function (
-    parsedDotfile = null
-  ) {
+  (window as any).createCodeVisualization = function (parsedDotfile = null) {
     cy.elements().remove();
     createGraph(cy, parsedDotfile);
     const imgElement = document.getElementById('codeVisuImg');
@@ -30,4 +31,44 @@ if (cytoscapeDiv) {
       rotateNodes(cy.nodes(), cy.nodes('.container'), false);
     }
   };
+
+  // global function for the dashboard in the standalone browser version to enable the comparison of two dotfiles
+  (window as any).getElementsFromDotfile = function (dotfile) {
+    return parseElementsFromDotFileString(dotfile);
+  };
+
+  (window as any).flipTokensForNodeIds = function (nodeIds) {
+    nodeIds.forEach((id) => {
+      const node = cy.getElementById(id);
+      const tokenNode = cy.getElementById(id + '_token');
+      if (tokenNode.length && tokenNode.inside()) {
+        // node had a token before, remove it
+        const newParentId = tokenNode.data('parent');
+        node.data('label', '');
+        node.move({ parent: newParentId });
+        node.classes(['single_node', 'upper_round_node']);
+        tokenNode.remove();
+      } else {
+        if (tokenNode.removed()) {
+          tokenNode.restore();
+        } else {
+          // create a new token node for the object
+          const newTokenNode = {
+            group: 'nodes',
+            classes: ['upper_round_node', 'token_label'],
+            data: {
+              id: id + '_token',
+              label: '',
+              tippyContent: node.label,
+              parent: node.parentId
+            }
+          };
+          cy.add(newTokenNode);
+        }
+        node.data('label', '•');
+        node.move({ parent: node.id + '_token' });
+        node.classes(['single_node', 'token_node']);
+      }
+    });
+  };
 }