1 files changed, 23 insertions, 63 deletions

diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
index 29e750f5..291314ec 100644
--- a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
+++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -8,76 +8,24 @@ import * as d3 from 'd3';
 import { type Graphviz, graphviz } from 'd3-graphviz';
 import type { BaseType, Selection } from 'd3-selection';
 import { reaction, type IReactionDisposer } from 'mobx';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useRef } from 'react';
 
 import { useRootStore } from '../RootStoreProvider';
-import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults';
+import getLogger from '../utils/getLogger';
 
 import GraphTheme from './GraphTheme';
 import { FitZoomCallback } from './ZoomCanvas';
+import dotSource from './dotSource';
 import postProcessSvg from './postProcessSVG';
 
-function toGraphviz(
-  semantics: SemanticsSuccessResult | undefined,
-): string | undefined {
-  if (semantics === undefined) {
-    return undefined;
-  }
-  const lines = [
-    'digraph {',
-    'graph [bgcolor=transparent];',
-    `node [fontsize=12, shape=plain, fontname="OpenSans"];`,
-    'edge [fontsize=10.5, color=black, fontname="OpenSans"];',
-  ];
-  const nodeIds = semantics.nodes.map((name, i) => name ?? `n${i}`);
-  lines.push(
-    ...nodeIds.map(
-      (id, i) =>
-        `n${i} [id="${id}", label=<<table border="1" cellborder="0" cellspacing="0" cellpadding="4.5" style="rounded" bgcolor="green"><tr><td>${id}</td></tr><hr/><tr><td bgcolor="white">node</td></tr></table>>];`,
-    ),
-  );
-  Object.keys(semantics.partialInterpretation).forEach((relation) => {
-    if (relation === 'builtin::equals' || relation === 'builtin::contains') {
-      return;
-    }
-    const tuples = semantics.partialInterpretation[relation];
-    if (tuples === undefined) {
-      return;
-    }
-    const first = tuples[0];
-    if (first === undefined || first.length !== 3) {
-      return;
-    }
-    const nameFragments = relation.split('::');
-    const simpleName = nameFragments[nameFragments.length - 1] ?? relation;
-    lines.push(
-      ...tuples.map(([from, to, value]) => {
-        if (
-          typeof from !== 'number' ||
-          typeof to !== 'number' ||
-          typeof value !== 'string'
-        ) {
-          return '';
-        }
-        const isUnknown = value === 'UNKNOWN';
-        return `n${from} -> n${to} [
-            id="${nodeIds[from]},${nodeIds[to]},${relation}",
-            xlabel="${simpleName}",
-            style="${isUnknown ? 'dashed' : 'solid'}",
-            class="edge-${value}"
-          ];`;
-      }),
-    );
-  });
-  lines.push('}');
-  return lines.join('\n');
-}
+const LOG = getLogger('graph.DotGraphVisualizer');
 
 function ptToPx(pt: number): number {
   return (pt * 4) / 3;
 }
 
-export default function DotGraphVisualizer({
+function DotGraphVisualizer({
   fitZoom,
   transitionTime,
 }: {
@@ -88,6 +36,7 @@ export default function DotGraphVisualizer({
     transitionTime ?? DotGraphVisualizer.defaultProps.transitionTime;
 
   const { editorStore } = useRootStore();
+  const graph = editorStore?.graph;
   const disposerRef = useRef<IReactionDisposer | undefined>();
   const graphvizRef = useRef<
     Graphviz<BaseType, unknown, null, undefined> | undefined
@@ -113,6 +62,9 @@ export default function DotGraphVisualizer({
           undefined
         >;
         renderer.keyMode('id');
+        ['TRUE', 'UNKNOWN', 'ERROR'].forEach((icon) =>
+          renderer.addImage(`#${icon}`, 16, 16),
+        );
         renderer.zoom(false);
         renderer.tweenPrecision('5%');
         renderer.tweenShapes(false);
@@ -125,6 +77,7 @@ export default function DotGraphVisualizer({
         */
         renderer.transition(transition as any);
         let newViewBox = { width: 0, height: 0 };
+        renderer.onerror(LOG.error.bind(LOG));
         renderer.on(
           'postProcessSVG',
           // @ts-expect-error Custom `d3-graphviz` hook not covered by typings.
@@ -139,19 +92,24 @@ export default function DotGraphVisualizer({
                 height: ptToPx(svg.viewBox.baseVal.height),
               };
             } else {
+              // Do not trigger fit zoom.
               newViewBox = { width: 0, height: 0 };
             }
           },
         );
+        renderer.on('renderEnd', () => {
+          // `d3-graphviz` uses `<title>` elements for traceability,
+          // so we only remove them after the rendering is finished.
+          d3.select(element).selectAll('title').remove();
+        });
         if (fitZoom !== undefined) {
           renderer.on('transitionStart', () => fitZoom(newViewBox));
         }
         disposerRef.current = reaction(
-          () => editorStore?.semantics,
-          (semantics) => {
-            const str = toGraphviz(semantics);
-            if (str !== undefined) {
-              renderer.renderDot(str);
+          () => dotSource(graph),
+          (source) => {
+            if (source !== undefined) {
+              renderer.renderDot(source);
             }
           },
           { fireImmediately: true },
@@ -159,7 +117,7 @@ export default function DotGraphVisualizer({
         graphvizRef.current = renderer;
       }
     },
-    [editorStore, fitZoom, transitionTimeOrDefault],
+    [graph, fitZoom, transitionTimeOrDefault],
   );
 
   return <GraphTheme ref={setElement} />;
@@ -169,3 +127,5 @@ DotGraphVisualizer.defaultProps = {
   fitZoom: undefined,
   transitionTime: 250,
 };
+
+export default observer(DotGraphVisualizer);