wip: highlight node based on url parameter

Author: sanjayankur31

graph.js

@@ -49,6 +49,13 @@ function layoutNodes() {
         quality: "proof",
     });
     cy_layout.run();
+    // only once, when the layout has finished, parse the URL to see what selection is provided
+    cy_layout.one("layoutstop", function(event) {
+        if ((url_highlighted_node !== null) && (url_highlighted_node.nonempty())) {
+            var node = url_highlighted_node[0];
+            highlightNode(node);
+        }
+    });
 }
 
 const BUTTON_ICON_FNAMES = {

index.js

@@ -6,6 +6,7 @@ const DATA_FOLDER = "simtools";
 var SIMULATORS = [];
 var TOOL_DESCRIPTIONS = {};
 const selected = [];
+var url_highlighted_node;
 
 // If params  are null, show a default message
 function showDetails(data, connected) {
@@ -183,6 +184,7 @@ function resetSearch() {
     updateHighlights();
 }
 
+// INIT
 // Load style and data from JSON files
 Promise.all([
     fetch('assets/cy-style.json')
@@ -221,6 +223,45 @@ Promise.all([
         selected.push(simulator);
     create_cy_elements(data, style);
     create_filters();
-    showDetails(null, null);
+
+    // showDetails of node selected in URL
+    // Note: do not change layout here to select node, because we need to wait
+    // for the initial layout to finish running
+    const providedURL = new URL(window.location.href);
+    const params = new URLSearchParams(providedURL.search);
+
+    if (params.size === 0)
+    {
+        console.log("No parameters passed, no op");
+        showDetails(null, null);
+        url_highlighted_node = null;
+    }
+    // We only process the first value of "selected" if there are multiples
+    else
+    {
+        var simulator = params.get('selected');
+        console.log("Simulator selected in url param list: " + simulator);
+
+        url_highlighted_node = cy.nodes("[id='" + simulator + "']")
+
+        if (url_highlighted_node.empty()) {
+            console.log("Provided parameter not in simulator list. No op");
+            showDetails(null, null);
+        }
+        else
+        {
+            var node = url_highlighted_node[0];
+            console.log("Selecting provided parameter: " + simulator);
+            showDetails(url_highlighted_node.data(), url_highlighted_node.outgoers("edge").map((edge) => {
+                return { type: "outgoing", target: edge.target().id(), label: edge.data("label"), source: edge.source().id() };
+            }).concat(
+                url_highlighted_node.incomers("edge").map((edge) => {
+                    return { type: "incoming", target: edge.target().id(), label: edge.data("label"), source: edge.source().id() }
+                })
+            )
+            );
+        }
+    }
+
     }
 );