@hpcc-js/graph 2.87.3 → 2.87.4

package/src/graph2/layouts/forceDirectedWorker.ts

@@ -1,33 +1,33 @@
-export interface Node {
-    id: string;
-    text: string;
-}
-
-export interface Link {
-    id: string;
-    source: Node;
-    target: Node;
-}
-
-export interface Data {
-    nodes: Node[];
-    links: Link[];
-}
-
-export interface Options {
-    alpha: number;
-    alphaMin: number;
-    alphaDecay: number;
-    velocityDecay: number;
-    repulsionStrength: number;
-    linkDistance: number;
-    linkStrength: number;
-    iterations: number;
-    pinCentroid: boolean;
-    forceStrength: number;
-    distanceMin: number;
-    distanceMax: number;
-}
+export interface Node {
+    id: string;
+    text: string;
+}
+
+export interface Link {
+    id: string;
+    source: Node;
+    target: Node;
+}
+
+export interface Data {
+    nodes: Node[];
+    links: Link[];
+}
+
+export interface Options {
+    alpha: number;
+    alphaMin: number;
+    alphaDecay: number;
+    velocityDecay: number;
+    repulsionStrength: number;
+    linkDistance: number;
+    linkStrength: number;
+    iterations: number;
+    pinCentroid: boolean;
+    forceStrength: number;
+    distanceMin: number;
+    distanceMax: number;
+}
 
 export function forceDirected(data: Data, options: Options) {
     // eslint-disable-next-line quotes

package/src/graph2/layouts/geoForceDirected.ts

@@ -1,112 +1,112 @@
-export const tmp = 42;
-/*
-import { forceLink as d3ForceLink, forceManyBody as d3ForceManyBody, forceSimulation as d3ForceSimulation } from "d3-force";
-import { Layout } from "./layout";
-
-export class GeoForceDirectedBase extends Layout {
-
-    protected _links;
-    protected _charge;
-    protected _simulation;
-
-    constructor(graph, readonly _options = defaultOptions) {
-        super(graph);
-    }
-
-    start() {
-        return super.start().then(() => {
-            const data = this._graph.graphData();
-            this._links = d3ForceLink(data.edges())
-                .id(d => d.id)
-                .distance(this._options.linkDistance)
-                .strength(this._options.linkStrength)
-                ;
-            this._charge = d3ForceManyBody()
-                .strength(d => this._options.charge * Math.max(d.width, d.height))
-                ;
-            this._simulation = d3ForceSimulation()
-                .force("link", this._links)
-                .force("charge", this._charge)
-                .nodes(data.vertices().map(v => {
-                    // const { width, height } = v.widget.getBBox();
-                    // v["width"] = width;
-                    // v["height"] = height;
-                    return v;
-                }))
-                .stop()
-                ;
-
-            return this;
-        });
-    }
-
-    stop() {
-        this._simulation.stop();
-        return super.stop();
-    }
-}
-
-export class GeoForceDirected extends GeoForceDirectedBase {
-
-    start() {
-        return super.start().then(() => {
-            const vertices = this._graph.graphData().vertices();
-            vertices.forEach(vp => {
-                if (vp.lat && vp.lng) {
-                    // const [x, y] = this._graph.project(vp.lat, vp.lng);
-                    // vp.fx = x;
-                    // vp.fy = y;
-                }
-            });
-
-            this._simulation
-                // .velocityDecay(0.1)
-                .restart()
-                ;
-            let total = vertices.length;
-            total = Math.min(total * total, 500);
-            for (let i = 0; i < total; ++i) {
-                this._simulation.tick();
-            }
-            this._simulation.stop();
-            vertices.forEach(vp => {
-                if (vp.lat && vp.lng) {
-                    delete vp.fx;
-                    delete vp.fy;
-                }
-            });
-
-            this._graph
-                .moveVertices(true)
-                .moveEdges(true)
-                ;
-            this.stop();
-
-            return this;
-        });
-    }
-}
-
-export class GeoForceDirectedAnimated extends GeoForceDirectedBase {
-
-    start() {
-        super.start();
-        return new Promise<this>(resolve => {
-            this._simulation
-                .velocityDecay(this._options.velocityDecay)
-                .on("tick", () => {
-                    this._graph
-                        .moveVertices(false)
-                        .moveEdges(false)
-                        ;
-                })
-                .on("end", () => {
-                    this._running = false;
-                    resolve(this);
-                })
-                .restart()
-                ;
-        });
-    }
-}
-*/
+export const tmp = 42;
+/*
+import { forceLink as d3ForceLink, forceManyBody as d3ForceManyBody, forceSimulation as d3ForceSimulation } from "d3-force";
+import { Layout } from "./layout";
+
+export class GeoForceDirectedBase extends Layout {
+
+    protected _links;
+    protected _charge;
+    protected _simulation;
+
+    constructor(graph, readonly _options = defaultOptions) {
+        super(graph);
+    }
+
+    start() {
+        return super.start().then(() => {
+            const data = this._graph.graphData();
+            this._links = d3ForceLink(data.edges())
+                .id(d => d.id)
+                .distance(this._options.linkDistance)
+                .strength(this._options.linkStrength)
+                ;
+            this._charge = d3ForceManyBody()
+                .strength(d => this._options.charge * Math.max(d.width, d.height))
+                ;
+            this._simulation = d3ForceSimulation()
+                .force("link", this._links)
+                .force("charge", this._charge)
+                .nodes(data.vertices().map(v => {
+                    // const { width, height } = v.widget.getBBox();
+                    // v["width"] = width;
+                    // v["height"] = height;
+                    return v;
+                }))
+                .stop()
+                ;
+
+            return this;
+        });
+    }
+
+    stop() {
+        this._simulation.stop();
+        return super.stop();
+    }
+}
+
+export class GeoForceDirected extends GeoForceDirectedBase {
+
+    start() {
+        return super.start().then(() => {
+            const vertices = this._graph.graphData().vertices();
+            vertices.forEach(vp => {
+                if (vp.lat && vp.lng) {
+                    // const [x, y] = this._graph.project(vp.lat, vp.lng);
+                    // vp.fx = x;
+                    // vp.fy = y;
+                }
+            });
+
+            this._simulation
+                // .velocityDecay(0.1)
+                .restart()
+                ;
+            let total = vertices.length;
+            total = Math.min(total * total, 500);
+            for (let i = 0; i < total; ++i) {
+                this._simulation.tick();
+            }
+            this._simulation.stop();
+            vertices.forEach(vp => {
+                if (vp.lat && vp.lng) {
+                    delete vp.fx;
+                    delete vp.fy;
+                }
+            });
+
+            this._graph
+                .moveVertices(true)
+                .moveEdges(true)
+                ;
+            this.stop();
+
+            return this;
+        });
+    }
+}
+
+export class GeoForceDirectedAnimated extends GeoForceDirectedBase {
+
+    start() {
+        super.start();
+        return new Promise<this>(resolve => {
+            this._simulation
+                .velocityDecay(this._options.velocityDecay)
+                .on("tick", () => {
+                    this._graph
+                        .moveVertices(false)
+                        .moveEdges(false)
+                        ;
+                })
+                .on("end", () => {
+                    this._running = false;
+                    resolve(this);
+                })
+                .restart()
+                ;
+        });
+    }
+}
+*/

package/src/graph2/layouts/graphviz.ts

@@ -1,124 +1,124 @@
-import { curveBasis as d3CurveBasis, line as d3Line } from "d3-shape";
-import { Cluster, graphviz as gvWorker, Node, isLayoutSuccess, LayoutError } from "./graphvizWorker";
-import { Layout, Point } from "./layout";
-import { EdgePlaceholder } from "./placeholders";
-
-type Engine = "circo" | "dot" | "fdp" | "neato" | "osage" | "patchwork" | "twopi";
-
-const lineBasis = d3Line<Point>()
-    .x(d => d[0])
-    .y(d => d[1])
-    .curve(d3CurveBasis)
-    ;
-
-export class Graphviz extends Layout {
-
-    _engine: Engine;
-    _wasmFolder: string;
-
-    constructor(graph, engine: Engine, wasmFolder: string) {
-        super(graph);
-        this._engine = engine;
-        this._wasmFolder = wasmFolder;
-    }
-
-    start() {
-        super.start();
-        const size = this._graph.size();
-        const data = this._graph.graphData();
-        const nodeIdx = {};
-        const hierarchy: Array<Cluster | Node> = data.hierarchy((type, item, children) => {
-            switch (type) {
-                case "subgraph":
-                    return {
-                        id: item.id,
-                        text: item.props.text,
-                        children
-                    };
-                case "vertex":
-                    delete item["fx"];
-                    delete item["fy"];
-                    const bbox = item.element.node().getBBox();
-                    const retVal = {
-                        id: item.id,
-                        text: item.props.text,
-                        width: bbox.width,
-                        height: bbox.height
-                    };
-                    nodeIdx[retVal.id] = retVal;
-                    return retVal;
-            }
-        }) as Array<Cluster | Node>;
-        return gvWorker({
-            items: hierarchy,
-            links: data.allEdges().map(e => ({
-                id: String(e.props.id),
-                source: nodeIdx[e.source.id],
-                target: nodeIdx[e.target.id],
-                text: e.props.label || ""
-            })),
-            raw: ""
-        }, {
-            engine: this._engine
-        }).response.then(response => {
-            if (this.running()) {
-                if (isLayoutSuccess(response)) {
-                    response.clusters.forEach(n => {
-                        const sg = data.subgraph(n.id);
-                        sg.x = n.x + size.width / 2 - n.width;
-                        sg.y = n.y + size.height / 2 - n.height;
-                        sg.props.width = n.width;
-                        sg.props.height = n.height;
-                    });
-                    response.nodes.forEach(n => {
-                        const v = data.vertex(n.id);
-                        v.x = n.x + size.width / 2;
-                        v.y = n.y + size.height / 2;
-                    });
-                    response.links.forEach(l => {
-                        const e = data.edge(l.id);
-                        const start: [number, number] = [e.source.x, e.source.y];
-                        const mid: [number, number][] = l.points !== undefined ? l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]) : [];
-                        const end: [number, number] = [e.target.x, e.target.y];
-                        e.points = [start, ...mid, end];
-                        // e.points = l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]);
-                    });
-                    this._graph
-                        .moveSubgraphs(true)
-                        .moveVertices(true)
-                        .moveEdges(true)
-                        ;
-                    this.stop();
-                } else {
-                    const err = response as LayoutError;
-                    console.error(`Graphviz layout fail:  ${err.error}`, err.errorDot);
-                }
-            }
-            return this;
-        });
-    }
-
-    edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
-        let points = [];
-        let hasNaN = false;
-        if (ep.points) {
-            points = ep.points.map(p => {
-                const x = this._graph.project(p[0], false);
-                const y = this._graph.project(p[1], false);
-                if (isNaN(x) || isNaN(y)) {
-                    hasNaN = true;
-                }
-                return [x, y];
-            });
-        }
-        if (hasNaN || points.length < 2) {
-            return super.edgePath(ep, curveDepth);
-        }
-        return {
-            path: lineBasis(points),
-            labelPos: this.center(points)
-        };
-    }
-
-}
-
+import { curveBasis as d3CurveBasis, line as d3Line } from "d3-shape";
+import { Cluster, graphviz as gvWorker, Node, isLayoutSuccess, LayoutError } from "./graphvizWorker";
+import { Layout, Point } from "./layout";
+import { EdgePlaceholder } from "./placeholders";
+
+type Engine = "circo" | "dot" | "fdp" | "neato" | "osage" | "patchwork" | "twopi";
+
+const lineBasis = d3Line<Point>()
+    .x(d => d[0])
+    .y(d => d[1])
+    .curve(d3CurveBasis)
+    ;
+
+export class Graphviz extends Layout {
+
+    _engine: Engine;
+    _wasmFolder: string;
+
+    constructor(graph, engine: Engine, wasmFolder: string) {
+        super(graph);
+        this._engine = engine;
+        this._wasmFolder = wasmFolder;
+    }
+
+    start() {
+        super.start();
+        const size = this._graph.size();
+        const data = this._graph.graphData();
+        const nodeIdx = {};
+        const hierarchy: Array<Cluster | Node> = data.hierarchy((type, item, children) => {
+            switch (type) {
+                case "subgraph":
+                    return {
+                        id: item.id,
+                        text: item.props.text,
+                        children
+                    };
+                case "vertex":
+                    delete item["fx"];
+                    delete item["fy"];
+                    const bbox = item.element.node().getBBox();
+                    const retVal = {
+                        id: item.id,
+                        text: item.props.text,
+                        width: bbox.width,
+                        height: bbox.height
+                    };
+                    nodeIdx[retVal.id] = retVal;
+                    return retVal;
+            }
+        }) as Array<Cluster | Node>;
+        return gvWorker({
+            items: hierarchy,
+            links: data.allEdges().map(e => ({
+                id: String(e.props.id),
+                source: nodeIdx[e.source.id],
+                target: nodeIdx[e.target.id],
+                text: e.props.label || ""
+            })),
+            raw: ""
+        }, {
+            engine: this._engine
+        }).response.then(response => {
+            if (this.running()) {
+                if (isLayoutSuccess(response)) {
+                    response.clusters.forEach(n => {
+                        const sg = data.subgraph(n.id);
+                        sg.x = n.x + size.width / 2 - n.width;
+                        sg.y = n.y + size.height / 2 - n.height;
+                        sg.props.width = n.width;
+                        sg.props.height = n.height;
+                    });
+                    response.nodes.forEach(n => {
+                        const v = data.vertex(n.id);
+                        v.x = n.x + size.width / 2;
+                        v.y = n.y + size.height / 2;
+                    });
+                    response.links.forEach(l => {
+                        const e = data.edge(l.id);
+                        const start: [number, number] = [e.source.x, e.source.y];
+                        const mid: [number, number][] = l.points !== undefined ? l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]) : [];
+                        const end: [number, number] = [e.target.x, e.target.y];
+                        e.points = [start, ...mid, end];
+                        // e.points = l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]);
+                    });
+                    this._graph
+                        .moveSubgraphs(true)
+                        .moveVertices(true)
+                        .moveEdges(true)
+                        ;
+                    this.stop();
+                } else {
+                    const err = response as LayoutError;
+                    console.error(`Graphviz layout fail:  ${err.error}`, err.errorDot);
+                }
+            }
+            return this;
+        });
+    }
+
+    edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
+        let points = [];
+        let hasNaN = false;
+        if (ep.points) {
+            points = ep.points.map(p => {
+                const x = this._graph.project(p[0], false);
+                const y = this._graph.project(p[1], false);
+                if (isNaN(x) || isNaN(y)) {
+                    hasNaN = true;
+                }
+                return [x, y];
+            });
+        }
+        if (hasNaN || points.length < 2) {
+            return super.edgePath(ep, curveDepth);
+        }
+        return {
+            path: lineBasis(points),
+            labelPos: this.center(points)
+        };
+    }
+
+}
+