clean up code

Author: jonnyz32

media/explain/borderAndIconDraw.js

@@ -9,7 +9,6 @@ export function deleteAllBorders() {
   document.querySelectorAll(".border").forEach((el) => el.remove());
 }
 
-// @ts-ignore
 const iconMap = window.iconMap;
 
 const getCodiconClass = (label) => {

media/explain/explain.css

@@ -1,30 +1,16 @@
-    
-/* .diagram-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: none;
-    margin: 0;
-} */
-
-.diagram-container{
-    position: absolute;
-    top: 0;
-    box-sizing: border-box;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    overflow: hidden;
-    height: 100%;
-    border: none;
-    margin: 0;
-    /* border: 2px solid red; */
+.diagram-container {
+  position: absolute;
+  margin: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  overflow: hidden;
+  border: none;
+  box-sizing: border-box;
 }
 
-
 .hover-box {
   border-radius: 6px;
   padding: 6px 10px;
@@ -44,8 +30,7 @@
 }
 
 .border {
-    border: 3px solid #007acc;
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .warning-div {

media/explain/explain.js

@@ -25,30 +25,19 @@ if (isWindowTooSmall(GRAPH_PADDING)) {
     style: [
       {
         selector: "node",
-        // style: {
-        //   padding: "5px",
-        //   height: "15px",
-        //   width: "label",
-        //   "background-color": "var(--vscode-list-activeSelectionBackground)",
-        //   color: "var(--vscode-list-activeSelectionForeground)",
-        //   label: "data(label)",
-        //   "text-valign": "center",
-        //   "font-size": "14px",
-        // },
         style: {
           padding: "5px",
-          width: "150px", // fixed width
+          width: "150px", 
           shape: "roundrectangle",
           "background-color": "lightgray",
           color: "var(--vscode-list-activeSelectionForeground)",
           label: "data(label)",
-          "text-wrap": "wrap", // enable wrapping
-          "text-max-width": "150px", // must match or be less than width
+          "text-wrap": "wrap", 
+          "text-max-width": "150px", 
           "text-valign": "center",
           "text-halign": "center",
           "font-size": "14px",
           "line-height": "1.2",
-          // "text-overflow-wrap": "anywhere",
         },
       },
       {
@@ -70,41 +59,14 @@ if (isWindowTooSmall(GRAPH_PADDING)) {
       avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
       avoidOverlapPadding: 10, // extra spacing around nodes when avoidOverlap: true
       nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
-      spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
       condense: false, // uses all available space on false, uses minimal space on true
-      rows: undefined, // force num of rows in the grid
-      cols: undefined, // force num of columns in the grid
-      position: function (node) {}, // returns { row, col } for element
-      sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
       animate: false, // whether to transition the node positions
-      animationDuration: 500, // duration of animation in ms if enabled
-      animationEasing: undefined, // easing of animation if enabled
-      animateFilter: function (node, i) {
-        return true;
-      }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
-      ready: undefined, // callback on layoutready
-      stop: undefined, // callback on layoutstop
-      transform: function (node, position) {
-        return position;
-      }, // transform a given node position. Useful for changing flow direction in discrete layouts
     },
-
-    // layout: {
-    //   name: "breadthfirst",
-    //   fit: true, // whether to fit the viewport to the graph
-    //   directed: false,
-    //   padding: GRAPH_PADDING, // paddinsg used on fit
-    //   boudingBox: { x1: 0, y1: 0, w: window.innerWidth, h: window.innerHeight },
-    //   circle: false, // put depths in concentric circles if true, put depths top down if false
-    //   grid: false,
-    //   avoidOverlap: true,
-    //   nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
-    // },
   });
 
   window.addEventListener("resize", () => {
-    cy.resize(); // Resize Cytoscape's canvas
-    cy.fit(cy.nodes().boundingBox(), GRAPH_PADDING); // Optional: Fit all nodes back into view
+    cy.resize(); 
+    cy.fit(cy.nodes().boundingBox(), GRAPH_PADDING); 
     cy.center();
   });
 

src/views/cytoscape/index.ts

@@ -35,7 +35,7 @@ export class CytoscapeGraph {
   constructor() {}
 
   addNode(node: NewNode): string {
-    const id = randomId(); // TODO: is this unique enough?
+    const id = randomId();
 
     if (node.data) {
       this.elementData.set(id, node.data);