@hpcc-js/graph 3.1.0 → 3.2.0

package/src/graph2/layouts/workers/dagre.ts

@@ -0,0 +1,46 @@
+import { GraphLabel, graphlib, layout } from "dagre";
+import { Data, Options } from "./dagreOptions.js";
+
+function dagre(data: Data, options: Options) {
+    const subgraphs = data.subgraphs;
+    const nodes = data.nodes;
+    const links = data.links;
+    const hierarchy = data.hierarchy;
+
+    const digraph = new graphlib.Graph({ multigraph: true, compound: true, directed: options.digraph !== false })
+        .setGraph(options)
+        .setDefaultNodeLabel(function () { return {}; })
+        .setDefaultEdgeLabel(function () { return {}; })
+        ;
+    subgraphs.forEach(sp => {
+        digraph.setNode(sp.id, sp);
+    });
+    nodes.forEach(vp => {
+        digraph.setNode(vp.id, vp);
+    });
+    links.forEach(ep => {
+        digraph.setEdge(ep.source.id, ep.target.id, ep, ep.id);
+    });
+    hierarchy.forEach(h => {
+        digraph.setParent(h.child, h.parent);
+    });
+    layout(digraph, { debugTiming: false } as GraphLabel);
+    const deltaX = (-digraph.graph().width / 2) || 0;
+    const deltaY = -digraph.graph().height / 2;
+    digraph.nodes().forEach(function (u) {
+        const vp = digraph.node(u) as any;
+        vp.x += deltaX;
+        vp.y += deltaY;
+    });
+    digraph.edges().forEach(function (e) {
+        const ep = digraph.edge(e) as any;
+        ep.points = ep.points.map(p => [p.x + deltaX, p.y + deltaY]);
+    });
+
+    return { subgraphs, nodes, links };
+}
+
+self.onmessage = event => {
+    const result = dagre.apply(undefined, event.data);
+    self.postMessage(result);
+};

package/src/graph2/layouts/workers/dagreOptions.ts

@@ -0,0 +1,35 @@
+export interface Subgraph {
+    id: string;
+    text: string;
+}
+
+export interface Node {
+    id: string;
+    text: string;
+}
+
+export interface Link {
+    id: string;
+    source: Node;
+    target: Node;
+}
+
+export interface Hierarchy {
+    parent: string;
+    child: string;
+}
+
+export interface Data {
+    subgraphs: Subgraph[];
+    nodes: Node[];
+    links: Link[];
+    hierarchy: Hierarchy[];
+}
+
+export interface Options {
+    rankdir: "TB" | "BT" | "LR" | "RL";
+    nodesep: number;
+    edgesep: number;
+    ranksep: number;
+    digraph: boolean;
+}

package/src/graph2/layouts/workers/forceDirected.ts

@@ -0,0 +1,38 @@
+import { forceCenter, forceLink as d3ForceLink, forceManyBody as d3ForceManyBody, forceSimulation } from "d3-force";
+import "es6-promise/auto";
+import { Data, Options } from "./forceDirectedOptions.js";
+
+export function forceDirected(data: Data, options: Options) {
+    const nodes = data.nodes;
+    const links = data.links;
+
+    const forceLink = d3ForceLink(links)
+        .id(d => d.id)
+        .distance(options.linkDistance)
+        .strength(options.linkStrength)
+        ;
+
+    const forceManyBody = d3ForceManyBody()
+        .strength(options.repulsionStrength)
+        ;
+
+    forceSimulation(nodes)
+        .force("link", forceLink)
+        .force("charge", forceManyBody)
+        .force("center", forceCenter())
+        .alpha(options.alpha)
+        .alphaMin(options.alphaMin)
+        .alphaDecay(options.alphaDecay)
+        .velocityDecay(options.velocityDecay)
+        .stop()
+        .tick(options.iterations)
+        ;
+
+    return { nodes, links };
+}
+
+self.onmessage = event => {
+    const result = forceDirected.apply(undefined, event.data);
+    // @ts-ignore
+    self.postMessage(result);
+};

package/src/graph2/layouts/workers/forceDirectedOptions.ts

@@ -0,0 +1,30 @@
+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;
+}

package/src/graph2/layouts/workers/graphviz.ts

@@ -0,0 +1,225 @@
+import { Graphviz } from "@hpcc-js/wasm-graphviz";
+import { Cluster, Data, Engine, isCluster, Layout, LayoutJSON, LayoutSVG, Link, Node, Options } from "./graphvizOptions.js";
+
+const clusterTpl = (cluster: Cluster): string => {
+    const childTpls: string[] = [];
+    cluster.children.forEach(child => {
+        if (isCluster(child)) {
+            childTpls.push(clusterTpl(child));
+        } else {
+            childTpls.push(nodeTpl(child));
+        }
+    });
+    return `subgraph cluster_${cluster.id} {
+id="${cluster.id}";
+label="${cluster.text}";
+margin=16;
+${childTpls.join("\n")}
+}`;
+};
+
+const nodeTpl = (vc: Node): string => `${vc.id} [id="${vc.id}" label="${vc.text}" width=${pxToInch(vc.width)} height=${pxToInch(vc.height)}]`;
+
+const linkTpl = (s, t, id, label) => `${s} -> ${t} [id="${id}", label="${label}"]`;
+
+type GVPos = {
+    x: number;
+    y: number;
+};
+
+type GVBox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+
+const pointToPx = (pt: number) => pt * 96 / 72;
+const inchToPx = (inch: number) => inch * 96;
+const pxToInch = (inch: number) => inch / 96;
+
+function parseBB(bb?: string): GVBox {
+    const [llx, lly, urx, ury] = bb ? bb.split(",").map(p => pointToPx(+p)) : [0, 0, 0, 0];
+    const width = urx - llx;
+    const height = ury - lly;
+    return {
+        x: llx - width / 2,
+        y: lly - height / 2,
+        width,
+        height
+    };
+}
+
+function parseBB2(_bb: string, page: GVBox): GVBox {
+    const bb = parseBB(_bb);
+    return {
+        x: -bb.x + page.width,
+        y: -bb.y + page.height,
+        width: bb.width,
+        height: bb.height
+    };
+}
+
+function parsePos(pos: string, page: GVBox): GVPos {
+    const [x, y] = pos.split(",").map(p => pointToPx(+p));
+    return {
+        x: -x + page.width,
+        y: -y + page.height
+    };
+}
+
+function parseNode(posStr: string, width: string, height: string, page: GVBox): GVBox {
+    const cpos = parsePos(posStr, page);
+    const w = inchToPx(+width);
+    const h = inchToPx(+height);
+    return {
+        x: cpos.x,
+        y: cpos.y,
+        width: w,
+        height: h
+    };
+}
+
+function parseLink(l: any, page: GVBox) {
+    if (l.pos) {
+        const posStr = l.pos.substr(2);
+        const posParts = posStr.split(" ");
+        const points: Array<[number, number]> = posParts.map(p => parsePos(p, page)).map(pos => [pos.x - page.width / 2, pos.y - page.height / 2]);
+        const endpoint = points.shift();
+        return [...points, endpoint];
+    }
+    return [];
+}
+
+async function doLayoutSVG(mode: Engine, dot: string): Promise<LayoutSVG> {
+    const graphviz = await Graphviz.load();
+    try {
+        return {
+            svg: graphviz.layout(dot, "svg", mode)
+        };
+    } catch (e: any) {
+        if (e instanceof Error) {
+            return {
+                error: e.message,
+                errorDot: dot
+            };
+        } else {
+            throw e;
+        }
+    }
+}
+
+async function doLayoutJSON(mode: Engine, dot: string): Promise<LayoutJSON> {
+    const graphviz = await Graphviz.load();
+    try {
+        return {
+            json: JSON.parse(graphviz.layout(dot, "json", mode))
+        };
+    } catch (e: any) {
+        if (e instanceof Error) {
+            return {
+                error: e.message,
+                errorDot: dot
+            };
+        } else {
+            throw e;
+        }
+    }
+}
+
+function graphvizLayout(data: Data, options: Options): Promise<Layout> {
+    if (data.raw) {
+        return doLayoutSVG(options.engine, data.raw);
+    }
+
+    const clusterIdx: { [id: string]: Cluster } = {};
+    const clusters: Cluster[] = [];
+    const dotClusters: string[] = [];
+
+    const nodeIdx: { [id: string]: Node } = {};
+    const nodes: Node[] = [];
+    const dotNodes: string[] = [];
+
+    const linkIdx: { [id: string]: Link } = {};
+    const links: Link[] = [];
+    const dotLinks: string[] = [];
+
+    function walk(item: Cluster | Node, top: boolean) {
+        if (isCluster(item)) {
+            clusterIdx[item.id] = item;
+            clusters.push(item);
+            item.children.forEach(child => walk(child, false));
+            if (top) {
+                dotClusters.push(clusterTpl(item));
+            }
+        } else {
+            nodeIdx[item.id] = item;
+            nodes.push(item);
+            if (top) {
+                dotNodes.push(nodeTpl(item));
+            }
+        }
+    }
+    data.items.forEach(item => walk(item, true));
+
+    data.links.forEach(link => {
+        linkIdx[link.id] = link;
+        links.push(link);
+        dotLinks.push(linkTpl(link.source.id, link.target.id, link.id, link.text));
+    });
+
+    return doLayoutJSON(options.engine, `\
+digraph G {
+    graph [fontname=Verdana,fontsize=11.0];
+    graph [rankdir=TB];
+    node [shape=rect,fontname=Verdana,fontsize=11.0,fixedsize=true];
+    edge [fontname=Verdana,fontsize=11.0];
+
+${dotClusters.join("\n")}
+
+${dotLinks.join("\n")}
+
+${dotNodes.join("\n")}
+}`).then(response => {
+        if (response.json) {
+            const pageBBox = parseBB(response.json.bb);
+
+            if (response.json.objects) {
+                response.json.objects.forEach(n => {
+                    if (n.nodes) {
+                        const bb = parseBB2(n.bb, pageBBox);
+                        const c = clusterIdx[n.id];
+                        c.x = bb.x - pageBBox.width / 2;
+                        c.y = bb.y - pageBBox.height / 2;
+                        c.width = bb.width;
+                        c.height = bb.height;
+                    } else {
+                        const pos = parseNode(n.pos, n.width, n.height, pageBBox);
+                        const v = nodeIdx[n.id];
+                        if (v) {
+                            v.x = pos.x - pageBBox.width / 2;
+                            v.y = pos.y - pageBBox.height / 2;
+                        }
+                    }
+                });
+            }
+            if (response.json.edges) {
+                response.json.edges.forEach(l => {
+                    const e = linkIdx[l.id];
+                    if (e) {
+                        e.points = parseLink(l, pageBBox);
+                    }
+                });
+            }
+            return { clusters, nodes, links };
+        } else {
+            return response;
+        }
+    });
+}
+
+self.onmessage = event => {
+    graphvizLayout.apply(undefined, event.data).then(result => {
+        self.postMessage(result);
+    });
+};

package/src/graph2/layouts/workers/graphvizOptions.ts

@@ -0,0 +1,70 @@
+export type Engine = "circo" | "dot" | "fdp" | "neato" | "osage" | "patchwork" | "twopi";
+
+export interface Cluster {
+    id: string;
+    text: string;
+    children: Array<Cluster | Node>;
+
+    // result  ---
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+
+export interface Node {
+    id: string;
+    text: string;
+    width: number;
+    height: number;
+
+    // result  ---
+    x?: number;
+    y?: number;
+}
+
+export function isCluster(item: Cluster | Node): item is Cluster {
+    return (item as Cluster).children !== undefined;
+}
+
+export interface Link {
+    id: string;
+    source: Node;
+    target: Node;
+    text: string;
+
+    // result  ---
+    points?: Array<[number, number]>;
+}
+
+export interface Data {
+    items: Array<Cluster | Node>;
+    links: Link[];
+    raw: string;
+}
+
+export interface Options {
+    engine: Engine;
+}
+
+export interface LayoutError {
+    error?: string;
+    errorDot?: string;
+}
+
+export interface LayoutSVG extends LayoutError {
+    svg?: string;
+}
+
+export interface LayoutJSON extends LayoutError {
+    json?: any;
+}
+
+export type LayoutSuccess = { clusters: Cluster[], nodes: Node[], links: Link[] };
+export type Layout = LayoutSuccess | LayoutJSON | LayoutSVG;
+
+export function isLayoutSuccess(item: any): item is LayoutSuccess {
+    return (item as LayoutSuccess)?.clusters !== undefined &&
+        (item as LayoutSuccess)?.nodes !== undefined &&
+        (item as LayoutSuccess)?.links !== undefined;
+}

package/src/graph2/subgraph.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { Text } from "@hpcc-js/react";
+import { React, Text } from "@hpcc-js/react";
 import { SubgraphBaseProps } from "./layouts/placeholders.ts";
 
 export interface BasicSubgraphProps extends SubgraphBaseProps {

package/src/graph2/vertex.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { Text } from "@hpcc-js/react";
+import { React, Text } from "@hpcc-js/react";
 import { VertexBaseProps } from "./layouts/placeholders.ts";
 
 export interface BasicVertexProps extends VertexBaseProps {

package/types/GraphData.d.ts

@@ -1,4 +1,4 @@
-import { Edge as GLEdge, GraphEdge, Node } from "@dagrejs/dagre";
+import { Edge as GLEdge, GraphEdge, Node } from "dagre";
 import { Vertex } from "./Vertex.ts";
 type GLNode = Node<Vertex>;
 export interface GraphLabel {

package/types/__package__.d.ts

@@ -1,3 +1,3 @@
 export declare const PKG_NAME = "@hpcc-js/graph";
-export declare const PKG_VERSION = "3.1.0";
-export declare const BUILD_VERSION = "3.2.0";
+export declare const PKG_VERSION = "3.1.1";
+export declare const BUILD_VERSION = "3.2.1";

package/types/graph2/graph.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
-import { SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
+import { React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
 import { GraphReactT } from "./graphReactT.ts";
 import { GraphDataProps, HierarchyBase } from "./graphT.ts";
 export type ISubgraph = SubgraphProps;

package/types/graph2/graphReactT.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
-import { SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
+import { React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
 import { GraphT } from "./graphT.ts";
 export declare class GraphReactT<SG extends SubgraphProps, V extends VertexProps, E extends EdgeProps<V>> extends GraphT<SG, V, E> {
     constructor(subgraphRenderer: React.FunctionComponent<SG>, vertexRenderer: React.FunctionComponent<V>, edgeRenderer: React.FunctionComponent<E>);

package/types/graph2/graphT.d.ts

@@ -228,6 +228,6 @@ export interface GraphT<SG extends SubgraphBaseProps = any, V extends VertexBase
     wasmFolder(_: string): this;
 }
 export declare function graphviz(dot: string, engine?: Engine, _scriptDir?: string): {
-    terminate: () => void;
+    terminate: () => any;
     response: Promise<string>;
 };

package/types/graph2/layouts/dagreWorker.d.ts

@@ -1,34 +1,6 @@
-export interface Subgraph {
-    id: string;
-    text: string;
-}
-export interface Node {
-    id: string;
-    text: string;
-}
-export interface Link {
-    id: string;
-    source: Node;
-    target: Node;
-}
-export interface Hierarchy {
-    parent: string;
-    child: string;
-}
-export interface Data {
-    subgraphs: Subgraph[];
-    nodes: Node[];
-    links: Link[];
-    hierarchy: Hierarchy[];
-}
-export interface Options {
-    rankdir: "TB" | "BT" | "LR" | "RL";
-    nodesep: number;
-    edgesep: number;
-    ranksep: number;
-    digraph: boolean;
-}
+import { Data, type Hierarchy, type Options } from "./workers/dagreOptions.ts";
+export { type Hierarchy, type Options };
 export declare function dagre(data: Data, options: Options): {
-    terminate: () => void;
+    terminate: () => any;
     response: Promise<string>;
 };

package/types/graph2/layouts/forceDirectedWorker.d.ts

@@ -1,31 +1,6 @@
-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;
-}
+import { type Data, type Options } from "./workers/forceDirectedOptions.ts";
+export { type Options };
 export declare function forceDirected(data: Data, options: Options): {
-    terminate: () => void;
+    terminate: () => any;
     response: Promise<string>;
 };

package/types/graph2/layouts/graphvizWorker.d.ts

@@ -1,55 +1,6 @@
-export type Engine = "circo" | "dot" | "fdp" | "neato" | "osage" | "patchwork" | "twopi";
-export interface Cluster {
-    id: string;
-    text: string;
-    children: Array<Cluster | Node>;
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
-}
-export interface Node {
-    id: string;
-    text: string;
-    width: number;
-    height: number;
-    x?: number;
-    y?: number;
-}
-export declare function isCluster(item: Cluster | Node): item is Cluster;
-export interface Link {
-    id: string;
-    source: Node;
-    target: Node;
-    text: string;
-    points?: Array<[number, number]>;
-}
-export interface Data {
-    items: Array<Cluster | Node>;
-    links: Link[];
-    raw: string;
-}
-export interface Options {
-    engine: Engine;
-}
-export interface LayoutError {
-    error?: string;
-    errorDot?: string;
-}
-export interface LayoutSVG extends LayoutError {
-    svg?: string;
-}
-export interface LayoutJSON extends LayoutError {
-    json?: any;
-}
-export type LayoutSuccess = {
-    clusters: Cluster[];
-    nodes: Node[];
-    links: Link[];
-};
-export type Layout = LayoutSuccess | LayoutJSON | LayoutSVG;
-export declare function isLayoutSuccess(item: any): item is LayoutSuccess;
+import { type Cluster, type Data, type Engine, isLayoutSuccess, type Node, type LayoutError, type Options } from "./workers/graphvizOptions.ts";
+export { type Cluster, type Engine, isLayoutSuccess, type Node, type LayoutError, type Options };
 export declare function graphviz(data: Data, options: Options): {
-    terminate: () => void;
+    terminate: () => any;
     response: Promise<string>;
 };

package/types/graph2/layouts/workers/dagreOptions.d.ts

@@ -0,0 +1,30 @@
+export interface Subgraph {
+    id: string;
+    text: string;
+}
+export interface Node {
+    id: string;
+    text: string;
+}
+export interface Link {
+    id: string;
+    source: Node;
+    target: Node;
+}
+export interface Hierarchy {
+    parent: string;
+    child: string;
+}
+export interface Data {
+    subgraphs: Subgraph[];
+    nodes: Node[];
+    links: Link[];
+    hierarchy: Hierarchy[];
+}
+export interface Options {
+    rankdir: "TB" | "BT" | "LR" | "RL";
+    nodesep: number;
+    edgesep: number;
+    ranksep: number;
+    digraph: boolean;
+}

package/types/graph2/layouts/workers/forceDirectedOptions.d.ts

@@ -0,0 +1,27 @@
+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;
+}