use icons for showing which node can be created, removed all edge labeling

webapp/static/core.css

@@ -6,6 +6,11 @@
     font-size: 12px;
 }
 
+#node-select {
+    width: 40px;
+    height: 40px;
+}
+
 .navbar-text {
     color: #fff !important;
     font-weight: bold;

webapp/static/corenetwork.js

@@ -115,8 +115,6 @@ class CoreNode {
 
 function setEdgeData(edge, linkId, fromNode, toNode, interfaceOne, interfaceTwo) {
     edge.core = linkId;
-    edge.label = 'from: name\nto: name';
-    edge.title = 'from: name\nto: name';
     edge.nodeOne = fromNode.name;
     edge.interfaceOne = interfaceOne;
     edge.nodeTwo = toNode.name;
@@ -157,10 +155,20 @@ class CoreNetwork {
         };
         this.network = new vis.Network(this.container, this.networkData, this.networkOptions);
         this.network.on('doubleClick', this.addNode.bind(this));
+        this.network.on('oncontext', this.onContext.bind(this));
         this.edges.on('add', this.addEdge.bind(this));
         this.nodesEnabled = false;
     }
 
+    async initialSession() {
+        const session = await this.coreRest.retrieveSession();
+        console.log('retrieved session: ', session);
+        const response = await coreRest.getSession();
+        console.log('session info: ', response);
+        this.joinedSessionNodes(response.nodes);
+        return session;
+    }
+
     enableNodeCreation(enabled) {
         console.log('node created enabled: ', enabled);
         this.nodesEnabled = enabled;
@@ -186,7 +194,7 @@ class CoreNetwork {
         return this.nodeId;
     }
 
-    joinedSessions(nodes) {
+    joinedSessionNodes(nodes) {
         const self = this;
         const nodeIds = [0];
 
@@ -284,6 +292,25 @@ class CoreNetwork {
         return await coreRest.setSessionState(SessionStates.instantiation);
     }
 
+    onContext(properties) {
+        console.log('context event: ', properties);
+        properties.event.preventDefault();
+
+        const location = properties.pointer.DOM;
+        const nodeId = this.network.getNodeAt(location);
+        if (nodeId) {
+            const node = this.nodes.get(nodeId);
+            console.log('context node: ', node);
+
+        } else {
+            const edgeId = this.network.getEdgeAt(location);
+            if (edgeId) {
+                const edge = this.edges.get(edgeId);
+                console.log('context edge: ', edge);
+            }
+        }
+    }
+
     addNode(properties) {
         if (!this.nodesEnabled) {
             console.log('node creation disabled');

webapp/templates/index.html

@@ -55,12 +55,15 @@
             </ul>
 
             <span id="session-id" class="navbar-text p-2 mr-3">Session #</span>
-            <span id="node-display" class="navbar-text p-2">Node: Default</span>
+            <div>
+                <span id="node-display" class="navbar-text p-2">Create:</span>
+                <img id="node-select" src="static/router.svg" />
+            </div>
         </div>
     </nav>
 
     <div class="row col">
-        <div class="col-2 col-xl-2">
+        <div class="col-3 col-xl-2">
             <div class="btn-group-vertical w-100" role="group" aria-label="Side Menu">
                 <button id="run-button" type="button" class="btn btn-success">Start</button>
                 <button id="link-button" type="button" class="btn btn-secondary" data-toggle="button">Link Mode</button>
@@ -127,25 +130,19 @@
     const $infoCard = $('#info-card');
     const $infoCardTable = $('#info-card-table');
     const $infoCardHeader = $('#info-card-header');
+    const $nodeSelect = $('#node-select');
 
     // initial core setup
     const coreRest = new CoreRest();
     const coreNetwork = new CoreNetwork('core-network', coreRest);
-    coreRest.retrieveSession()
+    coreNetwork.initialSession()
             .then(function(session) {
-                console.log('get session: ', session);
                 $sessionId.text(`Session: ${session.id}`);
                 const isStartEnabled = session.state !== SessionStates.runtime;
                 setRunButton(isStartEnabled);
-                return coreRest.getSession();
-            })
-            .then(function(response) {
-                console.log('session: ', response);
-                const nodes = response.nodes;
-                coreNetwork.joinedSessions(nodes);
             })
             .catch(function (err) {
-                console.log('get session error: ', err);
+                console.log('initial session error: ', err);
             });
 
     function setRunButton(start) {
@@ -253,7 +250,7 @@
         }
     });
 
-    $nodeDisplay.text(`Node: ${coreNetwork.nodeModel}`);
+    //$nodeDisplay.text(`Node: ${coreNetwork.nodeModel}`);
     $nodeButtons.click(function () {
         const $this = $(this);
         const nodeType = $this.data('node');
@@ -263,11 +260,12 @@
         coreNetwork.setNodeMode(nodeType, model);
         const currentType = CoreNodeHelper.getDisplay(coreNetwork.nodeType);
         const defaultType = CoreNodeHelper.getDisplay(CoreNodeHelper.defaultNode);
-        let nodeDisplay = currentType.display;
+        let nodeName = currentType.name;
         if (currentType.display === defaultType.display) {
-            nodeDisplay = coreNetwork.nodeModel;
+            nodeName = coreNetwork.nodeModel;
         }
-        $nodeDisplay.text(`Node: ${nodeDisplay}`);
+        const icon = CoreNodeHelper.icons[nodeName];
+        $nodeSelect.attr('src', icon);
     });
 
     // show sessions