Experimental styling and removal of cytoscape-node-edge-html-label

Author: aamanrebello

calm-hub-ui/package.json

@@ -24,7 +24,6 @@
         "cytoscape-cola": "^2.5.1",
         "cytoscape-dagre": "^2.5.0",
         "cytoscape-expand-collapse": "^4.1.1",
-        "cytoscape-node-edge-html-label": "^1.0.6",
         "oidc-client": "^1.11.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

calm-hub-ui/src/visualizer/components/cytoscape-renderer/CytoscapeRenderer.tsx

@@ -1,13 +1,11 @@
 import './cytoscape.css';
 import { useEffect, useRef } from 'react';
 import cytoscape, { EdgeSingular, NodeSingular } from 'cytoscape';
-import nodeEdgeHtmlLabel from 'cytoscape-node-edge-html-label';
 import expandCollapse from 'cytoscape-expand-collapse';
 import { Edge, CalmNode } from '../../contracts/contracts.js';
 import { LayoutCorrectionService } from '../../services/layout-correction-service.js';
 
 // Initialize Cytoscape plugins
-nodeEdgeHtmlLabel(cytoscape);
 expandCollapse(cytoscape);
 
 // Layout configuration
@@ -21,6 +19,8 @@ const breadthFirstLayout = {
     padding: 30,
     spacingFactor: 1.25,
 };
+// Text font size for node and edge labels
+const textFontSize = '20px';
 
 export interface CytoscapeRendererProps {
     isNodeDescActive: boolean;
@@ -31,16 +31,6 @@ export interface CytoscapeRendererProps {
     edgeClickedCallback: (x: CalmNode['data'] | Edge['data']) => void;
 }
 
-function getNodeLabelTemplateGenerator(selected: boolean, includeDescription: boolean) {
-    return (data: CalmNode['data']) => `
-        <div class="node element ${selected ? 'selected-node' : ''}">
-            <p class="title">${data.label}</p>
-            <p class="type">${data.type}</p>
-            <p class="description">${includeDescription ? data.description : ''}</p>
-        </div>
-    `;
-}
-
 function getEdgeStyle(showDescription: boolean): cytoscape.Css.Edge {
     return {
         width: 2,
@@ -51,6 +41,7 @@ function getEdgeStyle(showDescription: boolean): cytoscape.Css.Edge {
         'text-background-color': 'white',
         'text-background-opacity': 1,
         'text-background-padding': '5px',
+        'font-size': textFontSize,
     };
 }
 
@@ -64,6 +55,11 @@ function getNodeStyle(showDescription: boolean): cytoscape.Css.Node {
         'text-wrap': 'wrap',
         'text-max-width': '180px',
         'font-family': 'Arial',
+        'background-color': '#f5f5f5',
+        'border-color': 'black',
+        'border-width': 1,
+        'padding': '10px',
+        'font-size': textFontSize,
         width: '200px',
         height: 'label',
         shape: 'rectangle',
@@ -102,6 +98,7 @@ export function CytoscapeRenderer({
                     selector: ':parent',
                     style: {
                         label: 'data(label)',
+                        "background-color": 'white',
                     },
                 },
             ],
@@ -121,23 +118,6 @@ export function CytoscapeRenderer({
             edgeClickedCallback(edge?.data());
         });
 
-        // This function comes from a plugin which doesn't have proper types, which is why the hacky casting is needed
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (cy as unknown as any).nodeHtmlLabel([
-            {
-                query: '.node',
-                valign: 'top',
-                valignBox: 'top',
-                tpl: getNodeLabelTemplateGenerator(false, isNodeDescActive),
-            },
-            {
-                query: '.node:selected',
-                valign: 'top',
-                valignBox: 'top',
-                tpl: getNodeLabelTemplateGenerator(true, isNodeDescActive),
-            },
-        ]);
-
         layoutCorrectionService.calculateAndUpdateNodePositions(cy, nodes);
     }, [
         nodes,