WIP: better visualization of graph structure

src/frontend/versioned_model/graph_view.tsx

@@ -44,13 +44,26 @@ export function GraphView<N,L>(props: GraphViewProps<N,L>) {
     }
   }
 
+  const dot1 = `digraph {
+    bgcolor="transparent";
+    ${graphData.nodes.map(node => `"${esc(node.id)}" [${node.label===""?`shape=circle, width=0.3, height=0.3`:`shape=box`}, label="${esc(node.label)}", fillcolor="${node.color}", style="filled,rounded", ${node.bold?`penwidth=4.0,`:``} URL="javascript:${esc2(`graphvizClicked('${id+node.id}', 2)`)}"]`).join('\n')}
+    ${graphData.links.map(link => `"${esc(link.source.id || link.source)}" -> "${esc(link.target.id || link.target)}" [label="${esc(link.label)}", fontcolor="${link.color}", color="${link.color}"${link.bidirectional?`, dir=none`:``}]`).join('\n')}
+  }`;
+
+  const dot2 = `digraph {
+    bgcolor="transparent";
+    node[shape=record];
+    ${graphData.nodes.filter(node => !node.id.startsWith("V")).map(node => {
+      const outgoing = graphData.links.filter(link => (link.source.id || link.source) === node.id);
+      return `"${esc(node.id)}" [label="{ ${["", ...outgoing.map(o => `${o.label}`)].join('|')} } | { ${[esc(node.label), ...outgoing.map(o => (o.target.id || o.target).startsWith("V") ? `${esc(o.target.label)}` : `<L${o.label}>`)].join('|')} }", fillcolor="${node.color}", style="filled,rounded", ${node.bold?`penwidth=4.0,`:``} URL="javascript:${esc2(`graphvizClicked('${id+node.id}', 2)`)}"]`;
+    }).join('\n')}
+
+    ${graphData.links.filter(link => !link.target.id.startsWith("V")).map(link => `"${esc(link.source.id || link.source)}":"L${link.label}" -> "${esc(link.target.id || link.target)}" [label="${esc(link.label)}", fontcolor="${link.color}", color="${link.color}"${link.bidirectional?`, dir=none`:``}]`).join('\n')}
+  }`;
+
   // @ts-ignore:
   const graphviz = <Mantine.ScrollArea style={{backgroundColor:"#eee"}}>
-      <GraphvizComponent dot={`digraph {
-        bgcolor="transparent";
-        ${graphData.nodes.map(node => `"${esc(node.id)}" [${node.label===""?`shape=circle, width=0.3, height=0.3`:`shape=box`}, label="${esc(node.label)}", fillcolor="${node.color}", style="filled,rounded", ${node.bold?`penwidth=4.0,`:``} URL="javascript:${esc2(`graphvizClicked('${id+node.id}', 2)`)}"]`).join('\n')}
-        ${graphData.links.map(link => `"${esc(link.source.id || link.source)}" -> "${esc(link.target.id || link.target)}" [label="${esc(link.label)}", fontcolor="${link.color}", color="${link.color}"${link.bidirectional?`, dir=none`:``}]`).join('\n')}
-      }`}
+      <GraphvizComponent dot={dot2}
       />
     </Mantine.ScrollArea>;
 
@@ -67,6 +80,7 @@ export function GraphView<N,L>(props: GraphViewProps<N,L>) {
       />
       </Mantine.Tooltip>
       {props.children}
+      <Mantine.Button onClick={()=>alert(dot2)}>Get Graphviz dot</Mantine.Button>
     </Mantine.Group>
     {renderer==="d3"?
       <InfoHoverCardOverlay contents={help}>