Show vertex ids in graph

forum-network/src/classes/supporting/edge.js

@@ -29,16 +29,21 @@ export class Edge {
   }
 
   getHtml() {
-    let html = '<table>';
-    for (const { type, weight } of this.getComorphicEdges()) {
+    const edges = this.getComorphicEdges();
+    let html = '';
+    html += `<span class=small>edge${edges.length > 1 ? 's' : ''}</span><br>`;
+    html += '<table>';
+    for (const { type, weight } of edges) {
       html += `<tr><td>${type}</td><td>${weight}</td></tr>`;
     }
     html += '</table>';
+    html += `<span class=small>${this.from.id} &rarr; ${this.to.id}</span><br>`;
+
     return html;
   }
 
   getFlowchartNode() {
-    return `${Edge.getCombinedKey(this)}(${this.getHtml()})`;
+    return `${Edge.getCombinedKey(this)}("${this.getHtml()}")`;
   }
 
   displayEdgeNode() {

forum-network/src/classes/supporting/vertex.js

@@ -39,7 +39,7 @@ export class Vertex {
     }
 
     let html = '';
-    html += `<span class=small>${this.type}</span><br>`;
+    html += '<span class=small>vertex</span><br>';
     html += `${this.label}`;
     html += '<table>';
     for (const [key, value] of this.properties.entries()) {
@@ -47,8 +47,11 @@ export class Vertex {
       html += `<tr><td>${key}</td><td>${displayValue}</td></tr>`;
     }
     html += '</table>';
+    if (this.id !== this.label) {
+      html += `<span class=small>${this.id}</span><br>`;
+    }
     html = html.replaceAll(/\n\s*/g, '');
-    this.graph.flowchart?.log(`${this.id}[${html}]`);
+    this.graph.flowchart?.log(`${this.id}["${html}"]`);
 
     if (this.graph.editable && !this.installedClickCallback) {
       this.graph.flowchart?.log(`click ${this.id} WDGHandler${this.graph.index} "Edit Vertex ${this.id}"`);

forum-network/src/classes/supporting/wdg.js

@@ -23,7 +23,7 @@ export class WeightedDirectedGraph {
     this.vertices = new Map();
     this.edgeTypes = new Map();
     this.nextVertexId = 0;
-    this.flowchart = undefined;
+    this.flowchart = scene?.flowchart;
     this.editable = options.editable;
 
     // Mermaid supports a click callback, but we can't customize arguments; we just get the vertex ID.

forum-network/src/index.css

@@ -89,8 +89,6 @@ table {
 form {
   min-width: 20em;
 }
-.small {
-  font-size: 8pt;
-  line-height: 0;
-  color: #999999;
+span.small {
+  font-size: smaller;
 }