@hpcc-js/graph 3.9.0 → 3.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "3.9.0",
+    "version": "3.9.1",
     "description": "hpcc-js - Viz Graph",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -40,18 +40,18 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^3.5.5",
-        "@hpcc-js/common": "^3.9.0",
-        "@hpcc-js/html": "^3.4.5",
-        "@hpcc-js/react": "^3.5.5",
-        "@hpcc-js/util": "^3.6.5"
+        "@hpcc-js/api": "^3.5.6",
+        "@hpcc-js/common": "^3.9.1",
+        "@hpcc-js/html": "^3.4.6",
+        "@hpcc-js/react": "^3.5.6",
+        "@hpcc-js/util": "^3.6.6"
     },
     "optionalPeerDependencies": {
         "react": ">=17.0.0"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.9.5",
-        "@hpcc-js/wasm-graphviz": "1.26.0",
+        "@hpcc-js/esbuild-plugins": "^1.9.6",
+        "@hpcc-js/wasm-graphviz": "1.27.3",
         "@types/d3-transition": "1.3.6",
         "@types/dagre": "0.7.54",
         "d3-force": "^1",
@@ -76,5 +76,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "f6408d3f4eb56d5c8360923ec8ecc0391351a3ac"
+    "gitHead": "0128487e97c3ca56f55697c40c340de2c5c61ff2"
 }

package/src/common/layouts/graphvizDot.ts

@@ -0,0 +1,33 @@
+import { type Engine } from "@hpcc-js/wasm-graphviz";
+import { isLayoutSuccess, type LayoutSVG } from "./workers/graphvizDotOptions.ts";
+// @ts-ignore
+import GraphvizDotWorker from "./workers/graphvizDot.ts?worker&inline";
+
+export {
+    isLayoutSuccess,
+    type LayoutSVG
+};
+
+export interface GraphvizDotResponse {
+    response: Promise<string>;
+    terminate: () => void;
+}
+
+export function graphvizDot(dot: string, layout: Engine = "dot"): GraphvizDotResponse {
+    const worker = new GraphvizDotWorker();
+    const response = new Promise<string>((resolve, reject) => {
+        worker.onmessage = event => {
+            if (isLayoutSuccess(event.data)) {
+                resolve(event.data.svg);
+            } else {
+                reject(new Error(event.data.error));
+            }
+            worker.terminate();
+        };
+        worker.postMessage({ dot, layout });
+    });
+    return {
+        terminate: (): void => worker.terminate(),
+        response
+    };
+}

package/src/common/layouts/index.ts

@@ -3,5 +3,6 @@ export * from "./dagre.ts";
 export * from "./forceDirected.ts";
 export * from "./geoForceDirected.ts";
 export * from "./graphviz.ts";
+export * from "./graphvizDot.ts";
 export type { ILayout } from "./layout.ts";
 export * from "./null.ts";

package/src/common/layouts/workers/graphvizDot.ts

@@ -0,0 +1,25 @@
+import { Graphviz, type Engine } from "@hpcc-js/wasm-graphviz";
+import { LayoutSVG } from "./graphvizDotOptions.js";
+
+async function graphvizDot(dot: string, layout: Engine): Promise<LayoutSVG> {
+    const graphviz = await Graphviz.load();
+    try {
+        return {
+            svg: graphviz.layout(dot, "svg", layout)
+        };
+    } catch (e: any) {
+        if (e instanceof Error) {
+            return {
+                error: e.message,
+                errorDot: dot
+            };
+        }
+        throw e;
+    }
+}
+
+self.onmessage = event => {
+    graphvizDot(event.data.dot, event.data.layout).then(result => {
+        self.postMessage(result);
+    });
+};

package/src/common/layouts/workers/graphvizDotOptions.ts

@@ -0,0 +1,14 @@
+export interface LayoutError {
+    error?: string;
+    errorDot?: string;
+}
+
+export interface LayoutSVG extends LayoutError {
+    svg?: string;
+}
+
+export type LayoutSuccess = { svg: string };
+
+export function isLayoutSuccess(item: any): item is LayoutSuccess {
+    return (item as LayoutSuccess)?.svg !== undefined;
+}

package/src/graphviz/Widget.css

@@ -6,13 +6,13 @@
     --gv-select-fill: light-dark(#deecf9, #1b3a5c);
 
     --gv-unknown-stroke: light-dark(#616161, #9e9e9e);
-    --gv-unknown-fill: light-dark(#e0e0e0, #2a2a3e);
+    --gv-unknown-fill: light-dark(#e0e0e020, #2a2a3e20);
     --gv-complete-stroke: light-dark(#2e7d32, #66bb6a);
-    --gv-complete-fill: light-dark(#e8f5e9, #1b3a1e);
+    --gv-complete-fill: light-dark(#e8f5e920, #1b3a1e20);
     --gv-failed-stroke: light-dark(#c62828, #ef5350);
-    --gv-failed-fill: light-dark(#ffebee, #3a1b1b);
+    --gv-failed-fill: light-dark(#ffebee20, #3a1b1b20);
     --gv-running-stroke: light-dark(#e65100, #ffa726);
-    --gv-running-fill: light-dark(#fff3e0, #3a2a1b);
+    --gv-running-fill: light-dark(#fff3e020, #3a2a1b20);
 
     background-color: var(--gv-shadow);
     stroke: var(--gv-fg);
@@ -124,6 +124,23 @@
     --_fill: var(--gv-running-fill);
 }
 
+/* When selected and stateful, keep state color on border but selected color on fill. */
+.graph_GraphvizWidget :is(.unknown, .complete, .failed, .running).selected>:is(path, polygon, ellipse, polyline, rect) {
+    stroke: var(--_stroke);
+}
+
+.graph_GraphvizWidget :is(.unknown, .complete, .failed, .running).cluster.selected>:is(path, polygon, ellipse, polyline, rect) {
+    stroke: var(--_stroke);
+}
+
+.graph_GraphvizWidget :is(.unknown, .complete, .failed, .running):is(.node, .cluster).selected>:is(path, polygon, ellipse, polyline, rect):first-of-type {
+    fill: var(--gv-select-fill);
+}
+
+.graph_GraphvizWidget :is(.unknown, .complete, .failed, .running).edge.selected>:is(polygon, ellipse, polyline) {
+    fill: var(--gv-select-stroke);
+}
+
 /* Keep node and cluster outlines visible when zoomed out */
 .graph_GraphvizWidget .node>path,
 .graph_GraphvizWidget .node>polygon,

package/src/graphviz/Widget.ts

@@ -1,5 +1,6 @@
 import type { Graph } from "@hpcc-js/wasm-graphviz";
 import { d3Event, SVGZoomWidget, type Widget as WidgetT } from "@hpcc-js/common";
+import { graphvizDot, GraphvizDotResponse } from "../common/layouts/index.ts";
 
 import "./Widget.css";
 
@@ -24,8 +25,6 @@ export class Widget extends SVGZoomWidget {
     protected _selection: { [id: string]: boolean } = {};
     protected _selectionPreferredNode: { [id: string]: SVGGElement } = {};
 
-    protected _customVertices: CustomVertex[] = [];
-
     constructor() {
         super();
         this._drawStartPos = "origin";
@@ -341,8 +340,6 @@ export class Widget extends SVGZoomWidget {
         }
     }
 
-    protected _prevDot: string | undefined;
-
     itemBBox(scopeID: string): ReturnType<Widget["getRenderElementBBox"]>;
     itemBBox(node: SVGGraphicsElement): ReturnType<Widget["getRenderElementBBox"]>;
     itemBBox(scopeIDOrNode: string | SVGGraphicsElement) {
@@ -386,18 +383,6 @@ export class Widget extends SVGZoomWidget {
 
     update(domNode: HTMLElement | SVGElement, element: SVGGElement): this {
         super.update(domNode, element);
-
-        this._customVertices = this.collectCustomVertices();
-        const dot = this._data.toDot();
-        if (this._prevDot !== dot) {
-            this._prevDot = dot;
-            const svg = this._data.layout("svg", "dot").replace(Widget._svgColorRe, m => Widget._svgColorMap[m]);
-            const svgDoc = new DOMParser().parseFromString(svg, "image/svg+xml");
-            const renderNode = this._renderElement.node();
-            renderNode.replaceChildren(...svgDoc.documentElement.childNodes);
-            this.postrenderCustomVertices(this._customVertices);
-            this._selectionChanged();
-        }
         return this;
     }
 
@@ -406,11 +391,48 @@ export class Widget extends SVGZoomWidget {
         return this;
     }
 
+    protected _prevDot: string | undefined;
+    protected _prevLayout: GraphvizDotResponse | undefined;
     render(callback?: (w: WidgetT) => void): this {
         super.render((w: WidgetT) => {
-
-            if (callback) {
-                callback(w);
+            const customVertices = this.collectCustomVertices();
+            const dot = this._data.toDot();
+            if (this._prevDot !== dot) {
+                this._prevDot = dot;
+                if (this._prevLayout) {
+                    this._prevLayout.terminate();
+                }
+                const renderNode = this._renderElement.node();
+                renderNode.innerHTML = "";
+
+                this._prevLayout = graphvizDot(dot, "dot");
+                this._prevLayout.response
+                    .then(svg => {
+                        if (this._prevLayout) {
+                            this._prevLayout = undefined;
+                        }
+                        svg = svg.replace(Widget._svgColorRe, m => Widget._svgColorMap[m]);
+                        const svgDoc = new DOMParser().parseFromString(svg, "image/svg+xml");
+                        renderNode.replaceChildren(...svgDoc.documentElement.childNodes);
+                        this.postrenderCustomVertices(customVertices);
+                        this._selectionChanged();
+                    }).catch(e => {
+                        if (this._prevLayout) {
+                            this._prevLayout = undefined;
+                        }
+                        renderNode.innerHTML = "";
+                        this.postrenderCustomVertices([]);
+                        this._selectionChanged();
+                        console.error(e);
+                    }).finally(() => {
+                        if (callback) {
+                            callback(w);
+                        }
+                    });
+            } else {
+                if (callback) {
+                    callback(w);
+                }
             }
         });
         return this;

package/types/common/layouts/graphvizDot.d.ts

@@ -0,0 +1,8 @@
+import { type Engine } from "@hpcc-js/wasm-graphviz";
+import { isLayoutSuccess, type LayoutSVG } from "./workers/graphvizDotOptions.ts";
+export { isLayoutSuccess, type LayoutSVG };
+export interface GraphvizDotResponse {
+    response: Promise<string>;
+    terminate: () => void;
+}
+export declare function graphvizDot(dot: string, layout?: Engine): GraphvizDotResponse;

package/types/common/layouts/index.d.ts

@@ -3,5 +3,6 @@ export * from "./dagre.ts";
 export * from "./forceDirected.ts";
 export * from "./geoForceDirected.ts";
 export * from "./graphviz.ts";
+export * from "./graphvizDot.ts";
 export type { ILayout } from "./layout.ts";
 export * from "./null.ts";

package/types/common/layouts/workers/graphvizDotOptions.d.ts

@@ -0,0 +1,11 @@
+export interface LayoutError {
+    error?: string;
+    errorDot?: string;
+}
+export interface LayoutSVG extends LayoutError {
+    svg?: string;
+}
+export type LayoutSuccess = {
+    svg: string;
+};
+export declare function isLayoutSuccess(item: any): item is LayoutSuccess;

package/types/graphviz/Widget.d.ts

@@ -1,5 +1,6 @@
 import type { Graph } from "@hpcc-js/wasm-graphviz";
 import { SVGZoomWidget, type Widget as WidgetT } from "@hpcc-js/common";
+import { GraphvizDotResponse } from "../common/layouts/index.ts";
 import "./Widget.css";
 export declare const CUSTOM_HTML = "htmlContent";
 export declare const CUSTOM_SVG = "svgContent";
@@ -18,7 +19,6 @@ export declare class Widget extends SVGZoomWidget {
     protected _selectionPreferredNode: {
         [id: string]: SVGGElement;
     };
-    protected _customVertices: CustomVertex[];
     constructor();
     protected _data: Graph;
     data(_: Graph): this;
@@ -36,13 +36,14 @@ export declare class Widget extends SVGZoomWidget {
     enter(domNode: HTMLElement | SVGElement, element?: SVGGElement): this;
     protected collectCustomVertices(): CustomVertex[];
     protected postrenderCustomVertices(customVertices: CustomVertex[]): void;
-    protected _prevDot: string | undefined;
     itemBBox(scopeID: string): ReturnType<Widget["getRenderElementBBox"]>;
     itemBBox(node: SVGGraphicsElement): ReturnType<Widget["getRenderElementBBox"]>;
     zoomToItem(scopeID: string): this;
     zoomToItem(node: SVGGraphicsElement): this;
     update(domNode: HTMLElement | SVGElement, element: SVGGElement): this;
     exit(domNode: HTMLElement | SVGElement, element?: SVGGElement): this;
+    protected _prevDot: string | undefined;
+    protected _prevLayout: GraphvizDotResponse | undefined;
     render(callback?: (w: WidgetT) => void): this;
     selectionChanged(): void;
     vertexButtonClicked(id: string, action: string): void;