@hpcc-js/graph 3.8.4 → 3.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "3.8.4",
+    "version": "3.9.1",
     "description": "hpcc-js - Viz Graph",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -26,7 +26,7 @@
         "bundle-workers": "vite build -c ./workers/vite.config.ts",
         "bundle-watch": "vite build --watch",
         "bundle-serve": "vite --port 5509",
-        "gen-types": "tsgo --project tsconfig.json",
+        "gen-types": "tsc --project tsconfig.json",
         "gen-types-watch": "npm run gen-types -- --watch",
         "build": "run-p gen-types bundle",
         "watch": "run-p gen-types-watch bundle-watch",
@@ -40,18 +40,18 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^3.5.4",
-        "@hpcc-js/common": "^3.8.4",
-        "@hpcc-js/html": "^3.4.4",
-        "@hpcc-js/react": "^3.5.4",
-        "@hpcc-js/util": "^3.6.4"
+        "@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.4",
-        "@hpcc-js/wasm-graphviz": "1.22.2",
+        "@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": "a6973b3f3ccb25e7c88830fb8ad76e076e6716f6"
+    "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

@@ -0,0 +1,155 @@
+.graph_GraphvizWidget {
+    --gv-bg: light-dark(#ffffff, #1a1a2e);
+    --gv-shadow: light-dark(#e6e6e6, #0d0d18);
+    --gv-fg: light-dark(#242424, #e0e0e0);
+    --gv-select-stroke: light-dark(#0078d4, #4cc2ff);
+    --gv-select-fill: light-dark(#deecf9, #1b3a5c);
+
+    --gv-unknown-stroke: light-dark(#616161, #9e9e9e);
+    --gv-unknown-fill: light-dark(#e0e0e020, #2a2a3e20);
+    --gv-complete-stroke: light-dark(#2e7d32, #66bb6a);
+    --gv-complete-fill: light-dark(#e8f5e920, #1b3a1e20);
+    --gv-failed-stroke: light-dark(#c62828, #ef5350);
+    --gv-failed-fill: light-dark(#ffebee20, #3a1b1b20);
+    --gv-running-stroke: light-dark(#e65100, #ffa726);
+    --gv-running-fill: light-dark(#fff3e020, #3a2a1b20);
+
+    background-color: var(--gv-shadow);
+    stroke: var(--gv-fg);
+}
+
+.graph_GraphvizWidget > g > rect.zoomBackground {
+    fill: var(--gv-shadow) !important;
+    stroke: none;
+}
+
+/* Selection rules */
+.graph_GraphvizWidget .node>path,
+.graph_GraphvizWidget .node>polygon,
+.graph_GraphvizWidget .node>ellipse,
+.graph_GraphvizWidget .node>polyline,
+.graph_GraphvizWidget .node>rect,
+.graph_GraphvizWidget .cluster>path,
+.graph_GraphvizWidget .cluster>polygon,
+.graph_GraphvizWidget .cluster>ellipse,
+.graph_GraphvizWidget .cluster>polyline,
+.graph_GraphvizWidget .cluster>rect {
+    pointer-events: all;
+}
+
+.graph_GraphvizWidget .node.selected>path,
+.graph_GraphvizWidget .node.selected>polygon,
+.graph_GraphvizWidget .node.selected>ellipse,
+.graph_GraphvizWidget .node.selected>polyline,
+.graph_GraphvizWidget .node.selected>rect,
+.graph_GraphvizWidget .cluster.selected>:is(path, polygon, ellipse, polyline, rect):first-of-type {
+    stroke: var(--gv-select-stroke);
+}
+
+.graph_GraphvizWidget .node>path:first-of-type,
+.graph_GraphvizWidget .node>polygon:first-of-type,
+.graph_GraphvizWidget .node>ellipse:first-of-type,
+.graph_GraphvizWidget .node>polyline:first-of-type,
+.graph_GraphvizWidget .cluster>path:first-of-type,
+.graph_GraphvizWidget .cluster>polygon:first-of-type,
+.graph_GraphvizWidget .cluster>ellipse:first-of-type,
+.graph_GraphvizWidget .cluster>polyline:first-of-type {
+    fill: var(--gv-bg);
+}
+
+.graph_GraphvizWidget .node.selected>path:first-of-type,
+.graph_GraphvizWidget .node.selected>polygon:first-of-type,
+.graph_GraphvizWidget .node.selected>ellipse:first-of-type,
+.graph_GraphvizWidget .node.selected>polyline:first-of-type,
+.graph_GraphvizWidget .cluster.selected>path:first-of-type,
+.graph_GraphvizWidget .cluster.selected>polygon:first-of-type,
+.graph_GraphvizWidget .cluster.selected>ellipse:first-of-type,
+.graph_GraphvizWidget .cluster.selected>polyline:first-of-type {
+    fill: var(--gv-select-fill);
+}
+
+.graph_GraphvizWidget .edge.selected path,
+.graph_GraphvizWidget .edge.selected polygon,
+.graph_GraphvizWidget .edge.selected ellipse,
+.graph_GraphvizWidget .edge.selected polyline {
+    stroke: var(--gv-select-stroke);
+}
+
+.graph_GraphvizWidget .edge.selected polygon,
+.graph_GraphvizWidget .edge.selected ellipse,
+.graph_GraphvizWidget .edge.selected polyline {
+    fill: var(--gv-select-stroke);
+}
+
+.graph_GraphvizWidget text {
+    stroke: none;
+    fill: var(--gv-fg);
+}
+
+.graph_GraphvizWidget .selected text {
+    font-weight: bold;
+    stroke: none;
+}
+
+/* Generic state rules */
+.graph_GraphvizWidget :is(.unknown, .complete, .failed, .running)>:is(path, polygon, ellipse, polyline) {
+    stroke: var(--_stroke);
+}
+
+.graph_GraphvizWidget :is(.unknown, .complete, .failed, .running):is(.node, .cluster)>:is(path, polygon, ellipse, polyline):first-of-type {
+    fill: var(--_fill);
+}
+
+.graph_GraphvizWidget :is(.unknown, .complete, .failed, .running).edge>:is(polygon, ellipse, polyline) {
+    fill: var(--_stroke);
+}
+
+.graph_GraphvizWidget .unknown {
+    --_stroke: var(--gv-unknown-stroke);
+    --_fill: var(--gv-unknown-fill);
+}
+
+.graph_GraphvizWidget .complete {
+    --_stroke: var(--gv-complete-stroke);
+    --_fill: var(--gv-complete-fill);
+}
+
+.graph_GraphvizWidget .failed {
+    --_stroke: var(--gv-failed-stroke);
+    --_fill: var(--gv-failed-fill);
+}
+
+.graph_GraphvizWidget .running {
+    --_stroke: var(--gv-running-stroke);
+    --_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,
+.graph_GraphvizWidget .node>ellipse,
+.graph_GraphvizWidget .node>polyline,
+.graph_GraphvizWidget .cluster>path,
+.graph_GraphvizWidget .cluster>polygon,
+.graph_GraphvizWidget .cluster>ellipse,
+.graph_GraphvizWidget .cluster>polyline {
+    vector-effect: non-scaling-stroke;
+    stroke-width: 0.75px;
+}