@hpcc-js/graph 2.83.0 → 2.83.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "2.83.0",
+    "version": "2.83.2",
     "description": "hpcc-js - Viz Graph",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -52,21 +52,22 @@
         "update": "npx --yes npm-check-updates -u -t minor"
     },
     "dependencies": {
-        "@hpcc-js/api": "^2.12.1",
-        "@hpcc-js/common": "^2.71.1",
-        "@hpcc-js/html": "^2.42.2",
-        "@hpcc-js/react": "^2.52.0",
-        "@hpcc-js/util": "^2.49.0"
+        "@hpcc-js/api": "^2.12.3",
+        "@hpcc-js/common": "^2.71.3",
+        "@hpcc-js/html": "^2.42.4",
+        "@hpcc-js/react": "^2.52.2",
+        "@hpcc-js/util": "^2.49.1"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.11.2",
-        "@hpcc-js/wasm": "1.15.0",
+        "@hpcc-js/bundle": "^2.11.3",
+        "@hpcc-js/wasm": "1.16.5",
         "@types/d3-transition": "1.3.2",
-        "@types/dagre": "0.7.47",
+        "@types/dagre": "0.7.48",
         "d3-array": "^1",
         "d3-drag": "^1",
         "d3-force": "^1",
         "d3-geo": "^1",
+        "d3-interpolate-path": "2.3.0",
         "d3-sankey": "^0",
         "d3-scale": "^1",
         "d3-selection": "^1",
@@ -88,5 +89,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "3a4f1ba7a59e2e7f5283830e0a884187a6c42fe7"
+    "gitHead": "0b196092f8781f2f56a7f688496d1ae9bc229ace"
 }

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/graph";
-export const PKG_VERSION = "2.83.0";
-export const BUILD_VERSION = "2.104.3";
+export const PKG_VERSION = "2.83.2";
+export const BUILD_VERSION = "2.104.7";

package/src/graph2/dataGraph.ts

@@ -1,11 +1,12 @@
 import { PropertyExt, publish, Widget } from "@hpcc-js/common";
-import { CentroidVertex3, Vertex3 } from "@hpcc-js/react";
+import { CentroidVertex3, IVertex3, SubgraphProps, Vertex3 } from "@hpcc-js/react";
 import { compare2 } from "@hpcc-js/util";
 import { Graph2 } from "./graph";
-import { IEdge, IHierarchy, ISubgraph, IVertex } from "./layouts/placeholders";
+import { HierarchyBase } from "./layouts/placeholders";
+import { BasicEdgeProps } from "./edge";
 
-export function toJsonObj(row, columns) {
-    const retVal = {};
+export function toJsonObj<T>(row, columns): T {
+    const retVal: T = {} as T;
     columns.forEach((c, i) => retVal[c] = row[i]);
     return retVal;
 }
@@ -128,18 +129,18 @@ export class DataGraph extends Graph2 {
         return retVal >= 0 ? retVal : columns.indexOf(defColumn);
     }
 
-    private _prevSubgraphs: readonly ISubgraph[] = [];
-    private _masterSubgraphs: ISubgraph[] = [];
-    private _masterSubgraphsMap: { [key: string]: ISubgraph } = {};
+    private _prevSubgraphs: readonly SubgraphProps[] = [];
+    private _masterSubgraphs: SubgraphProps[] = [];
+    private _masterSubgraphsMap: { [key: string]: SubgraphProps } = {};
     mergeSubgraphs() {
         const columns = this.subgraphColumns();
         const idIdx = this.indexOf(columns, this.subgraphIDColumn(), "id");
         const labelIdx = this.indexOf(columns, this.subgraphLabelColumn(), "label");
-        const subgraphs = this.subgraphs().map((sg): ISubgraph => {
+        const subgraphs = this.subgraphs().map((sg): SubgraphProps => {
             return {
                 id: "" + sg[idIdx],
                 text: "" + sg[labelIdx],
-                origData: toJsonObj(sg, columns)
+                origData: toJsonObj<SubgraphProps>(sg, columns)
             };
         });
         const diff = compare2(this._prevSubgraphs, subgraphs, d => d.id);
@@ -157,9 +158,9 @@ export class DataGraph extends Graph2 {
         this._prevSubgraphs = subgraphs;
     }
 
-    private _prevVertices: readonly IVertex[] = [];
-    private _masterVertices: IVertex[] = [];
-    private _masterVerticesMap: { [key: string]: IVertex } = {};
+    private _prevVertices: readonly IVertex3[] = [];
+    private _masterVertices: IVertex3[] = [];
+    private _masterVerticesMap: { [key: string]: IVertex3 } = {};
     mergeVertices() {
         const columns = this.vertexColumns();
         const annotationColumns = this.vertexAnnotationColumns();
@@ -171,7 +172,7 @@ export class DataGraph extends Graph2 {
         const vertexTooltipIdx = this.indexOf(columns, this.vertexTooltipColumn(), "tooltip");
         const annotationIdxs = annotationColumns.map(ac => this.indexOf(columns, ac.columnID(), ""));
         const expansionFACharIdx = this.indexOf(columns, this.vertexExpansionFACharColumn(), "expansionFAChar");
-        const vertices: IVertex[] = this.vertices().map((v): IVertex => {
+        const vertices: IVertex3[] = this.vertices().map((v): IVertex3 => {
             const annotationIDs = annotationIdxs.map((ai, i) => !!v[ai] ? annotationColumns[i].annotationID() : undefined).filter(a => !!a);
             return {
                 categoryID: "" + v[catIdx],
@@ -188,7 +189,7 @@ export class DataGraph extends Graph2 {
                 expansionIcon: v[expansionFACharIdx] ? {
                     imageChar: "" + v[expansionFACharIdx]
                 } : undefined
-            } as IVertex;
+            } as IVertex3;
         });
         const diff = compare2(this._prevVertices, vertices, d => d.id);
         diff.exit.forEach(item => {
@@ -205,9 +206,9 @@ export class DataGraph extends Graph2 {
         this._prevVertices = vertices;
     }
 
-    protected _prevEdges: readonly IEdge[] = [];
-    protected _masterEdges: IEdge[] = [];
-    private _masterEdgesMap: { [key: string]: IEdge } = {};
+    protected _prevEdges: readonly BasicEdgeProps[] = [];
+    protected _masterEdges: BasicEdgeProps[] = [];
+    private _masterEdgesMap: { [key: string]: BasicEdgeProps } = {};
     mergeEdges() {
         const columns = this.edgeColumns();
         const idIdx = this.indexOf(columns, this.edgeIDColumn(), "id");
@@ -216,20 +217,21 @@ 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: IEdge[] = this.edges().map(e => {
+        const edges: BasicEdgeProps[] = this.edges().map((e): BasicEdgeProps => {
             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]];
             if (!target) console.error(`Invalid edge target entity "${e[targetIdx]}" does not exist.`);
             return {
-                type: "edge",
                 id: idIdx >= 0 ? "" + e[idIdx] : "" + e[sourceIdx] + "->" + e[targetIdx],
                 source,
                 target,
                 weight: +e[weightIdx] || 1,
                 color: e[colorIdx] as string,
                 label: labelIdx >= 0 ? ("" + e[labelIdx]) : "",
-                origData: toJsonObj(e, columns)
+                origData: toJsonObj(e, columns),
+                labelPos: [0, 0],
+                path: ""
             };
         }).filter(e => e.source && e.target);
         const diff = compare2(this._masterEdges, edges, d => d.id);
@@ -248,17 +250,17 @@ export class DataGraph extends Graph2 {
         this._prevEdges = edges;
     }
 
-    private _prevHierarchy: readonly IHierarchy[] = [];
-    private _masterHierarchy: IHierarchy[] = [];
-    private _masterHierarchyMap: { [key: string]: IHierarchy } = {};
+    private _prevHierarchy: readonly HierarchyBase<SubgraphProps, IVertex3>[] = [];
+    private _masterHierarchy: HierarchyBase<SubgraphProps, IVertex3>[] = [];
+    private _masterHierarchyMap: { [key: string]: HierarchyBase<SubgraphProps, IVertex3> } = {};
     mergeHierarchy() {
         const columns = this.hierarchyColumns();
         const parentIDIdx = this.indexOf(columns, this.hierarchyParentIDColumn(), "parentID");
         const childIDIdx = this.indexOf(columns, this.hierarchyChildIDColumn(), "childID");
-        const hierarchy: IHierarchy[] = this.hierarchy().map((h): IHierarchy => {
+        const hierarchy: HierarchyBase<SubgraphProps, IVertex3>[] = this.hierarchy().map((h): HierarchyBase<SubgraphProps, IVertex3> => {
             return {
                 id: "" + h[parentIDIdx] + "=>" + h[childIDIdx],
-                parent: this._masterSubgraphsMap["" + h[parentIDIdx]],
+                parent: this._masterSubgraphsMap["" + h[parentIDIdx]] as SubgraphProps,
                 child: this._masterSubgraphsMap["" + h[childIDIdx]] || this._masterVerticesMap["" + h[childIDIdx]]
             };
         });

package/src/graph2/edge.tsx

@@ -0,0 +1,30 @@
+// , Shape, Text,
+import { React, Text } from "@hpcc-js/react";
+import { EdgeProps as EdgeProps } from "./layouts/placeholders";
+
+export interface BasicEdgeProps extends EdgeProps {
+    labelFill?: string;
+    labelHeight?: number,
+    path?: string;
+}
+
+export const BasicEdge: React.FunctionComponent<BasicEdgeProps> = ({
+    label,
+    labelPos,
+    labelFill = "black",
+    labelHeight = 12,
+    path,
+    color,
+    strokeWidth,
+    strokeDasharray
+}) => {
+    return <>
+        <path d={path} stroke={color} style={{ strokeWidth, strokeDasharray }}></path>
+        {
+            label && labelPos && labelPos.length === 2 ?
+                <g transform={`translate(${labelPos[0]} ${labelPos[1]})`}>
+                    <Text text={label} fill={labelFill} height={labelHeight} />
+                </g> : undefined
+        }
+    </>;
+};