@hpcc-js/graph 2.87.0 → 3.1.0

package/package.json

@@ -1,81 +1,64 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "2.87.0",
+    "version": "3.1.0",
     "description": "hpcc-js - Viz Graph",
-    "main": "dist/index.js",
-    "module": "dist/index.es6",
-    "unpkg": "dist/index.min.js",
-    "jsdelivr": "dist/index.min.js",
-    "types": "types/index.d.ts",
-    "typesVersions": {
-        "<3.8": {
-            "*": [
-                "types-3.4/index.d.ts"
-            ]
-        }
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./types/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./dist/*": "./dist/*"
     },
+    "module": "./dist/index.js",
+    "browser": "./dist/index.js",
+    "types": "./types/index.d.ts",
     "files": [
         "dist/*",
-        "types/*",
-        "types-3.4/*",
-        "src/*"
+        "src/*",
+        "types/*"
     ],
     "scripts": {
-        "clean": "rimraf --glob lib* types dist *.tsbuildinfo  workers/lib-* workers/dist workers/types workers/*.tsbuildinfo",
-        "compile-es6": "tsc --module es6 --outDir ./lib-es6",
-        "compile-es6-watch": "npm run compile-es6 -- -w",
-        "compile-umd": "tsc --module umd --outDir ./lib-umd",
-        "compile-umd-watch": "npm run compile-umd -- -w",
-        "compile-workers": "tsc --project ./workers/tsconfig.json",
-        "bundle": "rollup -c",
-        "bundle-workers": "rollup -c ./workers/rollup.config.js",
-        "bundle-watch": "npm run bundle -- -w",
-        "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
-        "minimize-workers-forceDirected": "terser workers/dist/forceDirected.js -c -m -o workers/dist/forceDirected.min.js",
-        "minimize-workers-dagre": "terser workers/dist/dagre.js -c -m -o workers/dist/dagre.min.js",
-        "minimize-workers-graphviz": "terser workers/dist/graphviz.js -c -m -o workers/dist/graphviz.min.js",
-        "minimize-workers": "run-p minimize-workers-forceDirected minimize-workers-dagre minimize-workers-graphviz",
-        "wrap-workers-forceDirected": "node util/wrapWorker.js forceDirected",
-        "wrap-workers-dagre": "node util/wrapWorker.js dagre",
-        "wrap-workers-graphviz": "node util/wrapWorker.js graphviz",
-        "wrap-workers": "run-p wrap-workers-forceDirected wrap-workers-dagre wrap-workers-graphviz",
-        "build-workers": "run-s compile-workers bundle-workers minimize-workers wrap-workers",
-        "build-package": "npm run compile-es6 && npm run bundle",
-        "gen-legacy-types": "downlevel-dts ./types ./types-3.4",
-        "build": "run-s build-workers build-package",
-        "watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
-        "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
+        "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo",
+        "bundle": "node esbuild.js",
+        "bundle-watch": "npm run bundle -- --development --watch",
+        "gen-types": "tsc --project tsconfig.json",
+        "gen-types-watch": "npm run gen-types -- --watch",
+        "build": "run-p gen-types bundle",
         "lint": "eslint ./src",
+        "lint-fix": "eslint --fix src/**/*.ts",
         "docs": "typedoc --options tdoptions.json .",
-        "ddd": "downlevel-dts . ts3.4",
-        "update": "npx --yes npm-check-updates -u -t minor"
+        "test-browser": "vitest run --project browser",
+        "test": "vitest run",
+        "coverage": "vitest run --coverage",
+        "update": "npx --yes npm-check-updates -u -t minor",
+        "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^2.14.0",
-        "@hpcc-js/common": "^2.73.0",
-        "@hpcc-js/html": "^2.44.0",
-        "@hpcc-js/react": "^2.55.0",
-        "@hpcc-js/util": "^2.53.0"
+        "@hpcc-js/api": "^3.2.0",
+        "@hpcc-js/common": "^3.2.0",
+        "@hpcc-js/html": "^3.1.0",
+        "@hpcc-js/react": "^3.1.0",
+        "@hpcc-js/util": "^3.2.0"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.12.0",
-        "@hpcc-js/wasm-graphviz": "1.5.0",
-        "@types/d3-transition": "1.3.5",
-        "@types/dagre": "0.7.52",
-        "d3-array": "^1",
-        "d3-drag": "^1",
+        "@dagrejs/dagre": "1.1.4",
+        "@hpcc-js/esbuild-plugins": "^1.3.0",
+        "@hpcc-js/wasm-graphviz": "1.6.1",
+        "@types/d3-transition": "1.3.6",
         "d3-force": "^1",
         "d3-geo": "^1",
         "d3-interpolate-path": "2.3.0",
         "d3-sankey": "^0",
-        "d3-scale": "^1",
-        "d3-selection": "^1",
         "d3-shape": "^1",
         "d3-tile": "^1",
         "d3-transition": "^1",
-        "dagre": "0.8.5",
-        "es6-promise": "4.2.8",
-        "tslib": "2.7.0"
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+    },
+    "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
     },
     "repository": {
         "type": "git",
@@ -88,5 +71,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "fbbef050700b0e9d76ef99714856383d95155149"
+    "gitHead": "658c50fd965a7744ba8db675ba6878607c44d5e2"
 }

package/src/AdjacencyGraph.ts

@@ -1,8 +1,8 @@
 import { PropertyExt } from "@hpcc-js/common";
 import { hashSum } from "@hpcc-js/util";
-import { Edge } from "./Edge";
-import { Graph, IGraphData } from "./Graph";
-import { IAnnotation, Vertex } from "./Vertex";
+import { Edge } from "./Edge.ts";
+import { Graph, IGraphData } from "./Graph.ts";
+import { IAnnotation, Vertex } from "./Vertex.ts";
 
 interface IAnnotationIndexes {
     iconCol: number;

package/src/Graph.ts

@@ -2,11 +2,11 @@
 import { d3Event, drag as d3Drag, ISize, Platform, select as d3Select, Spacer, SVGGlowFilter, SVGZoomWidget, ToggleButton, Utility, Widget } from "@hpcc-js/common";
 
 import "d3-transition";
-import { Edge } from "./Edge";
-import { GraphData } from "./GraphData";
-import * as GraphLayouts from "./GraphLayouts";
-import { Subgraph } from "./Subgraph";
-import { Vertex } from "./Vertex";
+import { Edge } from "./Edge.ts";
+import { GraphData } from "./GraphData.ts";
+import * as GraphLayouts from "./GraphLayouts.ts";
+import { Subgraph } from "./Subgraph.ts";
+import { Vertex } from "./Vertex.ts";
 
 import "../src/Graph.css";
 
@@ -105,7 +105,7 @@ export class Graph extends SVGZoomWidget {
     size(): ISize;
     size(_): this;
     size(_?): ISize | this {
-        const retVal = super.size.apply(this, arguments);
+        const retVal = super.size.apply(this, arguments as any);
         return retVal;
     }
 
@@ -117,7 +117,7 @@ export class Graph extends SVGZoomWidget {
     data(): IGraphData;
     data(_: IGraphData, merge?: boolean): this;
     data(_?: IGraphData, merge?: boolean): IGraphData | this {
-        const retVal = super.data.apply(this, arguments);
+        const retVal = super.data.apply(this, arguments as any);
         if (arguments.length) {
             if (!merge) {
                 this._graphData = new GraphData();
@@ -283,7 +283,7 @@ export class Graph extends SVGZoomWidget {
             this._neighborOffsets = [];
 
             if (Platform.svgMarkerGlitch) {
-                this._graphData.nodeEdges(d.id()).forEach(function (id) {
+                this._graphData.nodeEdges(d.id()).forEach(function (this, id) {
                     const edge = this._graphData.edge(id);
                     this._popMarkers(edge.element());
                 });
@@ -639,7 +639,7 @@ export class Graph extends SVGZoomWidget {
             }
 
             const context = this;
-            const layoutEngine = this.getLayoutEngine();
+            const layoutEngine = this.getLayoutEngine() as GraphLayouts.ForceDirected;
             if (this.layout() === "ForceDirected2") {
                 this.forceLayout = layoutEngine;
                 this.forceLayout.force
@@ -964,15 +964,6 @@ export class Graph extends SVGZoomWidget {
             ;
     }
 
-    //  IGraph  ---
-    edge_click: (_row, _col, _sel, _more) => void;
-    edge_dblclick: (_row, _col, _sel, _more) => void;
-
-    //  ITooltip  ---
-    tooltip;
-    tooltipHTML: (_) => string;
-    tooltipFormat: (_) => string;
-
     //  Progess Events ---
     progress(what: "start" | "end" | "layout-start" | "layout-tick" | "layout-end") {
     }
@@ -988,7 +979,8 @@ export interface Graph {
     dragSingleNeighbors(_: boolean): this;
     layout(): GraphLayoutType;
     layout(_: GraphLayoutType): this;
-    // scale: { (): string; (_: string): this; };
+    // scale(): string;
+    // scale(_: string): this;
     applyScaleOnLayout(): boolean;
     applyScaleOnLayout(_: boolean): this;
     highlightOnMouseOverVertex(): boolean;
@@ -1034,6 +1026,15 @@ export interface Graph {
     forceDirectedTheta(_: number): this;
     forceDirectedGravity(): number;
     forceDirectedGravity(_: number): this;
+
+    //  IGraph  ---
+    edge_click(_row, _col, _sel, _more): void;
+    edge_dblclick(_row, _col, _sel, _more): void;
+
+    //  ITooltip  ---
+    tooltip;
+    tooltipHTML(_): string;
+    tooltipFormat(_): string;
 }
 
 Graph.prototype.publish("allowDragging", true, "boolean", "Allow Dragging of Vertices", null, { tags: ["Advanced"] });
@@ -1066,8 +1067,9 @@ Graph.prototype.publish("forceDirectedTheta", 0.8, "number", "Barnes–Hut appro
 Graph.prototype.publish("forceDirectedGravity", 0.1, "number", "Gravitational strength", null, { tags: ["Advanced"] });
 
 const _origScale = Graph.prototype.scale;
+//@ts-ignore
 Graph.prototype.scale = function (_?, transitionDuration?) {
-    const retVal = _origScale.apply(this, arguments);
+    const retVal = _origScale.apply(this, arguments as any);
     if (arguments.length) {
         this.zoomTo(_, transitionDuration);
     }

package/src/GraphData.ts

@@ -1,5 +1,5 @@
-import { Edge as GLEdge, GraphEdge, graphlib, Node } from "dagre";
-import { Vertex } from "./Vertex";
+import { Edge as GLEdge, GraphEdge, graphlib, Node } from "@dagrejs/dagre";
+import { Vertex } from "./Vertex.ts";
 
 type GLNode = Node<Vertex>;
 
@@ -40,9 +40,9 @@ export class GraphData {
     }
 
     eachNode(callback) {
-        this._g.nodes().forEach(function (item) {
+        this._g.nodes().forEach(item => {
             callback(item, this.node(item));
-        }, this);
+        });
     }
 
     private filterEdges(pred): GLEdge[] {
@@ -56,9 +56,9 @@ export class GraphData {
     }
 
     eachEdge(callback) {
-        this._g.edges().forEach(function (item) {
+        this._g.edges().forEach(item => {
             callback(item, item.v, item.w, this.edge(item));
-        }, this);
+        });
     }
 
     setData(subgraphs, vertices, edges, hierarchy, merge) {

package/src/GraphLayouts.ts

@@ -1,173 +1,214 @@
 import { forceCenter as d3ForceCenter, forceLink as d3ForceLink, forceManyBody as d3ForceManyBody, forceSimulation as d3ForceSimulation } from "d3-force";
-import { GraphLabel, graphlib, layout } from "dagre";
-import { GraphData } from "./GraphData";
-
-export function Circle(graphData: GraphData, width?, height?, radius?) {
-    const context = this;
-    this.pos = {};
-
-    //  Initial Positions  ---
-    const padding = 0;
-    radius = radius || (width < height ? width - padding : height - padding) / 2;
-    const order = graphData.nodeCount();
-    let currStep = -Math.PI / 2;
-    const step = 2 * Math.PI / order;
-    graphData.eachNode(function (u, value) {
-        const size = value.getBBox();
-        const maxSize = 0; // Math.max(size.width, size.height);
-        context.pos[u] = {
-            x: value.fixed ? value.x : width / 2 + Math.cos(currStep) * (radius - maxSize),
-            y: value.fixed ? value.y : height / 2 + Math.sin(currStep) * (radius - maxSize),
-            width: size.width,
-            height: size.height
-        };
-        currStep += step;
-    });
+import { GraphLabel, graphlib, layout } from "@dagrejs/dagre";
+import { GraphData } from "./GraphData.ts";
+
+interface Pos {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+
+export class Circle {
+
+    protected pos: { [id: string]: Pos } = {};
+
+    constructor(graphData: GraphData, width?, height?, radius?) {
+        const context = this;
+        this.pos = {};
+
+        //  Initial Positions  ---
+        const padding = 0;
+        radius = radius || (width < height ? width - padding : height - padding) / 2;
+        const order = graphData.nodeCount();
+        let currStep = -Math.PI / 2;
+        const step = 2 * Math.PI / order;
+        graphData.eachNode(function (u, value) {
+            const size = value.getBBox();
+            const maxSize = 0; // Math.max(size.width, size.height);
+            context.pos[u] = {
+                x: value.fixed ? value.x : width / 2 + Math.cos(currStep) * (radius - maxSize),
+                y: value.fixed ? value.y : height / 2 + Math.sin(currStep) * (radius - maxSize),
+                width: size.width,
+                height: size.height
+            };
+            currStep += step;
+        });
+    }
+
+    nodePos(u) {
+        return this.pos[u];
+    }
+
+    edgePoints(_e) {
+        return [];
+    }
+
 }
-Circle.prototype.nodePos = function (u) {
-    return this.pos[u];
-};
-Circle.prototype.edgePoints = function (_e) {
-    return [];
-};
-
-export function None(graphData: GraphData, _width, _height, _radius) {
-    const context = this;
-    this.pos = {};
-
-    graphData.eachNode(function (u, value) {
-        context.pos[u] = {
-            x: value.x,
-            y: value.y,
-            width: value.width,
-            height: value.height
-        };
-    });
+
+export class None {
+
+    protected pos: { [id: string]: Pos } = {};
+
+    constructor(graphData: GraphData, _width, _height, _radius) {
+        const context = this;
+        this.pos = {};
+
+        graphData.eachNode(function (u, value) {
+            context.pos[u] = {
+                x: value.x,
+                y: value.y,
+                width: value.width,
+                height: value.height
+            };
+        });
+    }
+
+    nodePos(u) {
+        return this.pos[u];
+    }
+
+    edgePoints(_e) {
+        return [];
+    }
 }
-None.prototype.nodePos = function (u) {
-    return this.pos[u];
-};
-None.prototype.edgePoints = function (_e) {
-    return [];
-};
-
-export function ForceDirected(graphData: GraphData, width, height, options) {
-    options = options || {};
-    const context = this;
-    this.pos = {};
-
-    this.vertices = [];
-    this.vertexMap = {};
-    graphData.eachNode(function (u) {
-        const vertex = graphData.node(u);
-        const size = vertex.getBBox();
-        const newItem = {
-            id: u,
-            x: vertex.pos().x,
-            y: vertex.pos().y,
-            width: size.width,
-            height: size.height,
-            value: vertex
-        };
-        context.vertices.push(newItem);
-        context.vertexMap[u] = newItem;
-    });
-    this.edges = [];
-    graphData.eachEdge(function (_e, s, t) {
-        context.edges.push({
-            source: s,
-            target: t
+
+export class ForceDirected {
+
+    protected pos: { [id: string]: Pos } = {};
+    vertices: any[] = [];
+    protected vertexMap: { [id: string]: any } = {};
+    protected edges: any[] = [];
+    protected force: any;
+
+    constructor(graphData: GraphData, width, height, options) {
+        options = options || {};
+        this.pos = {};
+        this.vertices = [];
+        this.vertexMap = {};
+
+        graphData.eachNode(u => {
+            const vertex = graphData.node(u);
+            const size = vertex.getBBox();
+            const newItem = {
+                id: u,
+                x: vertex.pos().x,
+                y: vertex.pos().y,
+                width: size.width,
+                height: size.height,
+                value: vertex
+            };
+            this.vertices.push(newItem);
+            this.vertexMap[u] = newItem;
         });
-    });
-    const forceLink = d3ForceLink()
-        .id(function (d: any) {
-            return d.id;
-        })
-        .distance(options.linkDistance)
-        .strength(options.linkStrength)
-        ;
-    const forceManyBody = d3ForceManyBody()
-        .strength(function (d: any) {
-            const cs = d.value.getBBox();
-            return options.charge * Math.max(cs.width, cs.height);
-        })
-        ;
-    this.force = d3ForceSimulation()
-        .force("link", forceLink)
-        .force("charge", forceManyBody)
-        .force("center", d3ForceCenter(width / 2, height / 2))
-        .velocityDecay(options.oneShot ? 0.1 : options.friction)
-        .nodes(this.vertices)
-        ;
-    forceLink
-        .links(this.edges)
-        ;
-
-    if (options.oneShot) {
-        this.force.restart();
-        let total = graphData.nodeCount();
-        total = Math.min(total * total, 500);
-        for (let i = 0; i < total; ++i) {
-            this.force.tick();
+        this.edges = [];
+        graphData.eachEdge((_e, s, t) => {
+            this.edges.push({
+                source: s,
+                target: t
+            });
+        });
+        const forceLink = d3ForceLink()
+            .id(function (d: any) {
+                return d.id;
+            })
+            .distance(options.linkDistance)
+            .strength(options.linkStrength)
+            ;
+        const forceManyBody = d3ForceManyBody()
+            .strength(function (d: any) {
+                const cs = d.value.getBBox();
+                return options.charge * Math.max(cs.width, cs.height);
+            })
+            ;
+        this.force = d3ForceSimulation()
+            .force("link", forceLink)
+            .force("charge", forceManyBody)
+            .force("center", d3ForceCenter(width / 2, height / 2))
+            .velocityDecay(options.oneShot ? 0.1 : options.friction)
+            .nodes(this.vertices)
+            ;
+        forceLink
+            .links(this.edges)
+            ;
+
+        if (options.oneShot) {
+            this.force.restart();
+            let total = graphData.nodeCount();
+            total = Math.min(total * total, 500);
+            for (let i = 0; i < total; ++i) {
+                this.force.tick();
+            }
+            this.force.stop();
         }
-        this.force.stop();
+    }
+
+    nodePos(u) {
+        return this.vertexMap[u];
+    }
+
+    edgePoints(_e) {
+        return [];
     }
 }
-ForceDirected.prototype.nodePos = function (u) {
-    return this.vertexMap[u];
-};
-ForceDirected.prototype.edgePoints = function (_e) {
-    return [];
-};
-
-export function Hierarchy(graphData: GraphData, _width, _height, options) {
-    const digraph = new graphlib.Graph({ multigraph: true, compound: true })
-        .setGraph(options)
-        .setDefaultNodeLabel(function () { return {}; })
-        .setDefaultEdgeLabel(function () { return {}; })
-        ;
-    graphData.eachNode(function (u) {
-        const value = graphData.node(u);
-        const clientSize = value.getBBox();
-        digraph.setNode(u, {
-            width: clientSize.width,
-            height: clientSize.height
+
+export class Hierarchy {
+
+    protected digraph: any;
+    protected dagreLayout: any;
+
+    constructor(graphData: GraphData, _width, _height, options) {
+        this.digraph = new graphlib.Graph({ multigraph: true, compound: true })
+            .setGraph(options)
+            .setDefaultNodeLabel(function () { return {}; })
+            .setDefaultEdgeLabel(function () { return {}; })
+            ;
+        graphData.eachNode(u => {
+            const value = graphData.node(u);
+            const clientSize = value.getBBox();
+            this.digraph.setNode(u, {
+                width: clientSize.width,
+                height: clientSize.height
+            });
         });
-    });
-    graphData.eachEdge(function (e, s, t) {
-        const value = graphData.edge(e);
-        digraph.setEdge(s, t, {
-            weight: value.weight()
-        }, value._id);
-        if (!options.digraph) {
-            digraph.setEdge(t, s, {
+        graphData.eachEdge((e, s, t) => {
+            const value = graphData.edge(e);
+            this.digraph.setEdge(s, t, {
                 weight: value.weight()
             }, value._id);
-        }
-    });
-    graphData.eachNode(function (u) {
-        digraph.setParent(u, graphData.parent(u));
-    });
-    this.dagreLayout = layout(digraph, { debugTiming: false } as GraphLabel);
-    const deltaX = -digraph.graph().width / 2;
-    const deltaY = -digraph.graph().height / 2;
-    digraph.nodes().forEach(function (u) {
-        const value = digraph.node(u);
-        value.x += deltaX + _width / 2;
-        value.y += deltaY + _height / 2;
-    });
-    digraph.edges().forEach(function (e) {
-        const value = digraph.edge(e);
-        for (let i = 0; i < value.points.length; ++i) {
-            value.points[i].x += deltaX + _width / 2;
-            value.points[i].y += deltaY + _height / 2;
-        }
-    });
-    this.digraph = digraph;
+            if (!options.digraph) {
+                this.digraph.setEdge(t, s, {
+                    weight: value.weight()
+                }, value._id);
+            }
+        });
+        graphData.eachNode(u => {
+            this.digraph.setParent(u, graphData.parent(u));
+        });
+
+        this.dagreLayout = layout(this.digraph, { debugTiming: false } as GraphLabel);
+        const deltaX = -this.digraph.graph().width / 2;
+        const deltaY = -this.digraph.graph().height / 2;
+        this.digraph.nodes().forEach(u => {
+            const value = this.digraph.node(u);
+            value.x += deltaX + _width / 2;
+            value.y += deltaY + _height / 2;
+        });
+        this.digraph.edges().forEach(e => {
+            const value = this.digraph.edge(e);
+            for (let i = 0; i < value.points.length; ++i) {
+                value.points[i].x += deltaX + _width / 2;
+                value.points[i].y += deltaY + _height / 2;
+            }
+        });
+        this.digraph = this.digraph;
+    }
+
+    nodePos(u) {
+        return this.digraph.node(u);
+    }
+
+    edgePoints(edge) {
+        return this.digraph.edge(edge._sourceVertex.id(), edge._targetVertex.id(), edge._id).points;
+    }
 }
-Hierarchy.prototype.nodePos = function (u) {
-    return this.digraph.node(u);
-};
-Hierarchy.prototype.edgePoints = function (edge) {
-    return this.digraph.edge(edge._sourceVertex.id(), edge._targetVertex.id(), edge._id).points;
-};