@hpcc-js/graph 2.84.2 → 2.84.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "2.84.2",
+    "version": "2.84.4",
     "description": "hpcc-js - Viz Graph",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -22,7 +22,6 @@
     ],
     "scripts": {
         "clean": "rimraf lib* types dist *.tsbuildinfo  workers/lib-* workers/dist workers/types workers/*.tsbuildinfo",
-        "copy-resources": "cpx \"../../node_modules/@hpcc-js/wasm/dist/graphvizlib.wasm\" \"./dist\"",
         "compile-es6": "tsc --module es6 --outDir ./lib-es6",
         "compile-es6-watch": "npm run compile-es6 -- -w",
         "compile-umd": "tsc --module umd --outDir ./lib-umd",
@@ -43,7 +42,7 @@
         "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 copy-resources build-package",
+        "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",
         "lint": "eslint ./src",
@@ -52,15 +51,15 @@
         "update": "npx --yes npm-check-updates -u -t minor"
     },
     "dependencies": {
-        "@hpcc-js/api": "^2.12.5",
-        "@hpcc-js/common": "^2.71.5",
-        "@hpcc-js/html": "^2.42.6",
-        "@hpcc-js/react": "^2.53.1",
-        "@hpcc-js/util": "^2.50.1"
+        "@hpcc-js/api": "^2.12.7",
+        "@hpcc-js/common": "^2.71.7",
+        "@hpcc-js/html": "^2.42.8",
+        "@hpcc-js/react": "^2.53.3",
+        "@hpcc-js/util": "^2.50.2"
     },
     "devDependencies": {
         "@hpcc-js/bundle": "^2.11.3",
-        "@hpcc-js/wasm": "1.16.5",
+        "@hpcc-js/wasm": "2.1.0",
         "@types/d3-transition": "1.3.2",
         "@types/dagre": "0.7.48",
         "d3-array": "^1",
@@ -76,7 +75,7 @@
         "d3-transition": "^1",
         "dagre": "0.8.5",
         "es6-promise": "4.2.8",
-        "tslib": "2.4.0"
+        "tslib": "2.4.1"
     },
     "repository": {
         "type": "git",
@@ -89,5 +88,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "f44f2fba05bc3ac886f1169e43c884773e97d8fc"
+    "gitHead": "cec45fe4a28dff27d43cf0bb9238d751534c8e88"
 }

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/graph";
-export const PKG_VERSION = "2.84.2";
-export const BUILD_VERSION = "2.104.11";
+export const PKG_VERSION = "2.84.4";
+export const BUILD_VERSION = "2.104.14";

package/src/__tests__/index.ts

@@ -1 +1 @@
-export { Test5 as Test } from "./test5";
+export { Test4 as Test } from "./test4";

package/src/__tests__/test5.ts

@@ -42,7 +42,7 @@ const VERTEX_ARR_UPDATED = [{
     text: "Vertex Three",
 }];
 
-const EDGE_ARR_UPDATE = [{
+export const EDGE_ARR_UPDATE = [{
     id: 0,
     source: VERTEX_ARR_UPDATED[1],
     target: VERTEX_ARR_UPDATED[2]
@@ -73,9 +73,13 @@ export class Test5 extends Graph2 {
             .edgeArcDepth(0)
             .layout("ForceDirected")
             .on("vertex_click", (vertex, col, sel, anno) => {
-                this
-                    .data({ vertices: VERTEX_ARR_UPDATED, edges: EDGE_ARR_UPDATE })
-                    .lazyRender();
+                console.info("vertex_click", vertex);
+            })
+            .on("vertex_dblclick", (vertex, col, sel, anno) => {
+                console.info("vertex_dblclick", vertex);
+            })
+            .on("vertex_contextmenu", (vertex, col, sel, anno) => {
+                console.info("vertex_contextmenu", vertex);
             })
             ;
     }

package/src/graph2/dataGraph.ts

@@ -1,9 +1,11 @@
 import { PropertyExt, publish, Widget } from "@hpcc-js/common";
-import { CentroidVertex3, IVertex3, SubgraphProps, Vertex3 } from "@hpcc-js/react";
+import { Vertex3, CentroidVertex3, Vertex3Props, EdgeProps, SubgraphProps } from "@hpcc-js/react";
 import { compare2 } from "@hpcc-js/util";
 import { Graph2 } from "./graph";
 import { HierarchyBase } from "./layouts/placeholders";
-import { BasicEdgeProps } from "./edge";
+
+//  Backward compatibility layer  ---
+export type IVertex3 = Vertex3Props;
 
 export function toJsonObj<T>(row, columns): T {
     const retVal: T = {} as T;
@@ -206,9 +208,9 @@ export class DataGraph extends Graph2 {
         this._prevVertices = vertices;
     }
 
-    protected _prevEdges: readonly BasicEdgeProps[] = [];
-    protected _masterEdges: BasicEdgeProps[] = [];
-    private _masterEdgesMap: { [key: string]: BasicEdgeProps } = {};
+    protected _prevEdges: readonly EdgeProps<IVertex3>[] = [];
+    protected _masterEdges: EdgeProps<IVertex3>[] = [];
+    private _masterEdgesMap: { [key: string]: EdgeProps<IVertex3> } = {};
     mergeEdges() {
         const columns = this.edgeColumns();
         const idIdx = this.indexOf(columns, this.edgeIDColumn(), "id");
@@ -217,7 +219,7 @@ export class DataGraph extends Graph2 {
         const labelIdx = this.indexOf(columns, this.edgeLabelColumn(), "label");
         const weightIdx = this.indexOf(columns, this.edgeWeightColumn(), "weight");
         const colorIdx = this.indexOf(columns, this.edgeColorColumn(), "color");
-        const edges: BasicEdgeProps[] = this.edges().map((e): BasicEdgeProps => {
+        const edges: EdgeProps<IVertex3>[] = this.edges().map((e): EdgeProps<IVertex3> => {
             const source = this._masterVerticesMap["" + e[sourceIdx]];
             if (!source) console.error(`Invalid edge source entity "${e[sourceIdx]}" does not exist.`);
             const target = this._masterVerticesMap["" + e[targetIdx]];
@@ -227,7 +229,7 @@ export class DataGraph extends Graph2 {
                 source,
                 target,
                 weight: +e[weightIdx] || 1,
-                color: e[colorIdx] as string,
+                stroke: e[colorIdx] as string,
                 label: labelIdx >= 0 ? ("" + e[labelIdx]) : "",
                 origData: toJsonObj(e, columns),
                 labelPos: [0, 0],

package/src/graph2/graph.ts

@@ -1,11 +1,19 @@
-import { React, Subgraph, SubgraphProps, Vertex, VertexProps } from "@hpcc-js/react";
-import { BasicEdge, BasicEdgeProps } from "./edge";
+import { React, Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
+// import { IVertexEdgeProps, VertexEdge } from "./edge";
 import { GraphReactT } from "./graphReactT";
+import { GraphDataProps, HierarchyBase } from "./graphT";
 
-export class Graph2 extends GraphReactT<SubgraphProps, VertexProps, BasicEdgeProps> {
+//  Backward compatibility layer  ---
+export type ISubgraph = SubgraphProps;
+export type IVertex = VertexProps;
+export type IEdge = EdgeProps;
+export type IHierarchy = HierarchyBase<ISubgraph, IVertex>;
+export type IGraphData2 = GraphDataProps<ISubgraph, IVertex, IEdge>;
+
+export class Graph2 extends GraphReactT<ISubgraph, IVertex, IEdge> {
 
     constructor() {
-        super(Subgraph, Vertex, BasicEdge);
+        super(Subgraph, Vertex, Edge);
         this._reactCentroidRenderer = Vertex;
         this._reactVertexRenderer2 = Vertex;
         super.vertexRenderer((props) => {

package/src/graph2/graphReactT.ts

@@ -1,11 +1,11 @@
-import { render, React, SubgraphProps, VertexProps } from "@hpcc-js/react";
-import { EdgeProps, GraphT, RendererT } from "./graphT";
+import { render, React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
+import { GraphT, RendererT } from "./graphT";
 
 function adapter<T>(reactRenderer: React.FunctionComponent<T>): RendererT<T> {
     return (props: T, element: SVGGElement) => render(reactRenderer, props, element);
 }
 
-export class GraphReactT<SG extends SubgraphProps, V extends VertexProps, E extends EdgeProps> extends GraphT<SG, V, E>  {
+export 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>) {
         super(adapter(subgraphRenderer), adapter(vertexRenderer), adapter(edgeRenderer));

package/src/graph2/graphT.ts

@@ -7,7 +7,7 @@ import "d3-transition";
 import { interpolatePath as d3InterpolatePath } from "d3-interpolate-path";
 import { Circle, Dagre, ForceDirected, ForceDirectedAnimated, Graphviz, ILayout, Null } from "./layouts/index";
 import { Options as FDOptions } from "./layouts/forceDirectedWorker";
-import type { VertexProps, EdgeProps, IGraphData2, HierarchyBase, SubgraphProps } from "./layouts/placeholders";
+import type { VertexBaseProps, EdgeBaseProps, GraphDataProps, HierarchyBase, SubgraphBaseProps } from "./layouts/placeholders";
 import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder, isEdgePlaceholder } from "./layouts/placeholders";
 import { Engine, graphviz as gvWorker } from "./layouts/graphvizWorker";
 import { Tree, RadialTree, Dendrogram, RadialDendrogram } from "./layouts/tree";
@@ -18,25 +18,25 @@ let scriptDir = (globalThis?.document?.currentScript as HTMLScriptElement)?.src
 scriptDir = scriptDir.substring(0, scriptDir.replace(/[?#].*/, "").lastIndexOf("/") + 1);
 
 export {
-    IGraphData2,
-    SubgraphProps,
-    VertexProps,
-    EdgeProps,
+    GraphDataProps,
+    SubgraphBaseProps,
+    VertexBaseProps,
+    EdgeBaseProps,
     HierarchyBase
 };
 
 type GraphLayoutType = "Hierarchy" | "DOT" | "Tree" | "Dendrogram" | "RadialTree" | "RadialDendrogram" | "ForceDirected" | "ForceDirected2" | "ForceDirectedHybrid" | "Neato" | "FDP" | "Circle" | "TwoPI" | "Circo" | "None";
 const GraphLayoutTypeSet = ["Hierarchy", "DOT", "Tree", "Dendrogram", "RadialTree", "RadialDendrogram", "ForceDirected", "ForceDirected2", "ForceDirectedHybrid", "Neato", "FDP", "Circle", "TwoPI", "Circo", "None"];
 
-function dragStart<V extends VertexProps>(n: VertexPlaceholder<V>) {
+function dragStart<V extends VertexBaseProps>(n: VertexPlaceholder<V>) {
     n.fx = n.sx = n.x;
     n.fy = n.sy = n.y;
 }
-function dragTick(n: VertexPlaceholder<VertexProps>, d: VertexPlaceholder<VertexProps>) {
+function dragTick(n: VertexPlaceholder<VertexBaseProps>, d: VertexPlaceholder<VertexBaseProps>) {
     n.fx = n.sx + d.fx - d.sx;
     n.fy = n.sy + d.fy - d.sy;
 }
-function dragEnd<V extends VertexProps>(n: VertexPlaceholder<V>) {
+function dragEnd<V extends VertexBaseProps>(n: VertexPlaceholder<V>) {
     n.x = n.fx;
     n.y = n.fy;
     n.fx = n.sx = undefined;
@@ -45,7 +45,7 @@ function dragEnd<V extends VertexProps>(n: VertexPlaceholder<V>) {
 
 export type RendererT<T> = (props: T, element: SVGGElement) => void;
 
-export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends EdgeProps> extends SVGZoomWidget {
+export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends SVGZoomWidget {
 
     protected _centroidFilter: SVGGlowFilter;
 
@@ -63,11 +63,11 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
     private _toggleD = new ToggleButton().faChar("fa-sitemap fa-rotate-270").tooltip("Dendrogram").on("click", () => this.layoutClick("Dendrogram"));
     private _toggleRD = new ToggleButton().faChar("fa-asterisk").tooltip("Radial Dendrogram").on("click", () => this.layoutClick("RadialDendrogram"));
 
-    protected _graphData = new GraphCollection<VertexPlaceholder<V>, EdgePlaceholder<E, V>, SubgraphPlaceholder<SG>>()
+    protected _graphData = new GraphCollection<VertexPlaceholder<V>, EdgePlaceholder<V, E>, SubgraphPlaceholder<SG>>()
         .idFunc(d => d.id)
         .sourceFunc(e => e.source.id)
         .targetFunc(e => e.target.id)
-        .updateFunc((b: VertexPlaceholder<V> | EdgePlaceholder<E, V> | SubgraphPlaceholder<SG>, a: VertexPlaceholder<V> | EdgePlaceholder<E, V> | SubgraphPlaceholder<SG>) => {
+        .updateFunc((b: VertexPlaceholder<V> | EdgePlaceholder<V, E> | SubgraphPlaceholder<SG>, a: VertexPlaceholder<V> | EdgePlaceholder<V, E> | SubgraphPlaceholder<SG>) => {
             b.props = a.props;
             if (isEdgePlaceholder(a) && isEdgePlaceholder(b)) {
                 b.source = a.source;
@@ -192,14 +192,19 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
                     d3Select(this).classed("grabbed", false);
                 }
                 if (doClick) {
+                    const event = d3Event();
                     context._selection.click({
                         _id: String(d.id),
                         element: () => d.element
-                    }, d3Event().sourceEvent);
+                    }, event.sourceEvent);
                     context.selectionChanged();
                     const selected = d.element.classed("selected");
                     const eventOrigin = context.resolveEventOrigin();
-                    context.vertex_click(d.props.origData || d.props, "", selected, eventOrigin);
+                    if (event?.sourceEvent?.button === 2) {
+                        context.vertex_contextmenu(d.props.origData || d.props, "", selected, eventOrigin);
+                    } else {
+                        context.vertex_click(d.props.origData || d.props, "", selected, eventOrigin);
+                    }
                     const doClickTime = Date.now();
                     if (doClickTime - context._prevDoClickTime < context.doubleClickMaxDelay()) {
                         context.vertex_dblclick(d.props.origData || d.props, "", selected, eventOrigin);
@@ -254,15 +259,15 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
         return this;
     }
 
-    private _origData: IGraphData2<SG, V, E> = {
+    private _origData: GraphDataProps<SG, V, E> = {
         subgraphs: [],
         vertices: [],
         edges: [],
         hierarchy: []
     };
-    data(): IGraphData2<SG, V, E>;
-    data(_: IGraphData2<SG, V, E>, merge?: boolean): this;
-    data(_?: IGraphData2<SG, V, E>, merge?: boolean): IGraphData2<SG, V, E> | this {
+    data(): GraphDataProps<SG, V, E>;
+    data(_: GraphDataProps<SG, V, E>, merge?: boolean): this;
+    data(_?: GraphDataProps<SG, V, E>, merge?: boolean): GraphDataProps<SG, V, E> | this {
         if (_ === void 0) return this._origData;
         this._origData = _;
 
@@ -320,7 +325,7 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
         return this;
     }
 
-    graphData(): GraphCollection<VertexPlaceholder<V>, EdgePlaceholder<E, V>> {
+    graphData(): GraphCollection<VertexPlaceholder<V>, EdgePlaceholder<V, E>> {
         return this._graphData;
     }
 
@@ -504,7 +509,7 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
 
     highlightEdges(edgeMap?: { [id: string]: boolean }) {
         const context = this;
-        const edgeElements = this._edgeG.selectAll<SVGGElement, EdgePlaceholder<E, V>>(".graphEdge");
+        const edgeElements = this._edgeG.selectAll<SVGGElement, EdgePlaceholder<V, E>>(".graphEdge");
         edgeElements
             .classed("graphEdge-highlighted", d => !edgeMap || edgeMap[d.id])
             .style("stroke-width", function (o) {
@@ -538,7 +543,7 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
         }
     }
 
-    highlightEdge(_element, d?: EdgePlaceholder<E, V>) {
+    highlightEdge(_element, d?: EdgePlaceholder<V, E>) {
         if (this.highlightOnMouseOverEdge()) {
             if (d) {
                 const vertices = {};
@@ -572,7 +577,7 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
         return this;
     }
 
-    moveEdgePlaceholder(ep: EdgePlaceholder<E, V>, transition: boolean): this {
+    moveEdgePlaceholder(ep: EdgePlaceholder<V, E>, transition: boolean): this {
         const edgeLayout = {
             ...this._layoutAlgo.edgePath(ep, this.edgeArcDepth())
         };
@@ -589,7 +594,7 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
                             path: pathInterpolator(t),
                             labelPos: labelPosInterpolator(t),
                             strokeWidth: ep.props.strokeWidth ?? context.edgeStrokeWidth(),
-                            color: ep.props.color ?? context.edgeColor()
+                            color: ep.props.stroke ?? context.edgeColor()
                         };
                         context._edgeRenderer({ ...edgeLayout, ...ep.props, ...updated }, ep.element.node());
                     };
@@ -600,7 +605,7 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
 
     moveVertexPlaceholder(vp: VertexPlaceholder<V>, transition: boolean, moveNeighbours: boolean): this {
         const { x, y } = this.projectPlacholder(vp);
-        vp.element && (transition ? vp.element.transition().duration(this.transitionDuration()) as unknown as Selection<SVGPathElement, EdgePlaceholder<E, V>, SVGGElement, any> : vp.element)
+        vp.element && (transition ? vp.element.transition().duration(this.transitionDuration()) as unknown as Selection<SVGPathElement, EdgePlaceholder<V, E>, SVGGElement, any> : vp.element)
             .attr("transform", `translate(${x} ${y})`)
             ;
         if (moveNeighbours) {
@@ -690,7 +695,7 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
     updateEdges(): this {
         const context = this;
         this._edgeG.selectAll(".graphEdge")
-            .data(this._graphData.allEdges(), (d: EdgePlaceholder<E, V>) => d.id)
+            .data(this._graphData.allEdges(), (d: EdgePlaceholder<V, E>) => d.id)
             .join(
                 enter => enter.append("g")
                     .attr("class", "graphEdge")
@@ -763,6 +768,9 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
                     .on("dblclick", function (this: SVGElement, d) {
                         d3Event().stopPropagation();
                     })
+                    .on("contextmenu", function (this: SVGElement, d) {
+                        d3Event().preventDefault();
+                    })
                     .on("mousein", function (d) {
                         Utility.safeRaise(this);
                         context.highlightVertex(d3Select(this), d);
@@ -1132,6 +1140,9 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
     vertex_dblclick(row, _col, sel, data) {
     }
 
+    vertex_contextmenu(row, _col, sel, data) {
+    }
+
     vertex_mousein(row, _col, sel, data) {
     }
 
@@ -1157,7 +1168,7 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
 }
 GraphT.prototype._class += " graph_GraphT";
 
-export interface GraphT<SG extends SubgraphProps = any, V extends VertexProps = any, E extends EdgeProps = any> {
+export interface GraphT<SG extends SubgraphBaseProps = any, V extends VertexBaseProps = any, E extends EdgeBaseProps<V> = any> {
     allowDragging(): boolean;
     allowDragging(_: boolean): this;
     dragSingleNeighbors(): boolean;
@@ -1314,7 +1325,6 @@ export function graphviz(dot: string, engine: Engine = "dot", _scriptDir: string
         links: [],
         raw: dot
     }, {
-        engine: engine,
-        wasmFolder: new URL(scriptDir, document.baseURI).href
+        engine: engine
     });
 }

package/src/graph2/index.ts

@@ -5,4 +5,3 @@ export * from "./dataGraph";
 export * from "./sankeyGraph";
 export * from "./subgraph";
 export * from "./vertex";
-export * from "./edge";

package/src/graph2/layouts/graphviz.ts

@@ -59,8 +59,7 @@ export class Graphviz extends Layout {
             })),
             raw: ""
         }, {
-            engine: this._engine,
-            wasmFolder: this._wasmFolder
+            engine: this._engine
         }).response.then((response: any) => {
             if (this.running()) {
                 response.clusters.forEach(n => {