@hpcc-js/graph 2.71.0 → 2.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "2.71.0",
+    "version": "2.75.0",
     "description": "hpcc-js - Viz Graph",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -51,22 +51,22 @@
         "ddd": "downlevel-dts . ts3.4"
     },
     "dependencies": {
-        "@hpcc-js/api": "^2.8.54",
-        "@hpcc-js/common": "^2.59.0",
-        "@hpcc-js/html": "^2.34.0",
-        "@hpcc-js/react": "^2.42.0",
-        "@hpcc-js/util": "^2.40.0"
+        "@hpcc-js/api": "^2.8.57",
+        "@hpcc-js/common": "^2.62.0",
+        "@hpcc-js/html": "^2.37.0",
+        "@hpcc-js/react": "^2.45.0",
+        "@hpcc-js/util": "^2.42.0"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.10.20",
+        "@hpcc-js/bundle": "^2.10.21",
         "@hpcc-js/wasm": "1.7.1",
-        "@rollup/plugin-alias": "3.1.0",
-        "@rollup/plugin-commonjs": "12.0.0",
-        "@rollup/plugin-node-resolve": "8.0.0",
+        "@rollup/plugin-alias": "3.1.9",
+        "@rollup/plugin-commonjs": "21.0.1",
+        "@rollup/plugin-node-resolve": "13.1.3",
         "@types/d3-transition": "1.3.2",
         "@types/dagre": "0.7.41",
-        "@typescript-eslint/eslint-plugin": "4.31.0",
-        "@typescript-eslint/parser": "4.31.0",
+        "@typescript-eslint/eslint-plugin": "5.10.1",
+        "@typescript-eslint/parser": "5.10.1",
         "cpx": "1.5.0",
         "d3-array": "^1",
         "d3-drag": "^1",
@@ -81,16 +81,17 @@
         "dagre": "0.8.5",
         "downlevel-dts": "0.6.0",
         "es6-promise": "4.2.8",
-        "eslint": "7.32.0",
+        "eslint": "8.8.0",
+        "eslint-plugin-react-hooks": "^4.3.0",
         "npm-run-all": "4.1.5",
-        "rimraf": "2.6.3",
-        "rollup": "2.10.7",
-        "rollup-plugin-postcss": "3.1.1",
-        "rollup-plugin-sourcemaps": "0.6.2",
-        "terser": "4.0.0",
-        "tslib": "2.3.0",
-        "typedoc": "0.14.2",
-        "typescript": "4.3.4"
+        "rimraf": "3.0.2",
+        "rollup": "2.66.1",
+        "rollup-plugin-postcss": "4.0.2",
+        "rollup-plugin-sourcemaps": "0.6.3",
+        "terser": "5.10.0",
+        "tslib": "2.3.1",
+        "typedoc": "0.22.11",
+        "typescript": "4.5.5"
     },
     "repository": {
         "type": "git",
@@ -103,5 +104,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "7800ddc2075f4e2e64c2e3454bf271c60ebb2a0e"
+    "gitHead": "481c2fc2b4389cb32900bf2735bed31e7bfb7dfd"
 }

package/src/Sankey.ts

@@ -68,7 +68,6 @@ export class Sankey extends SVGWidget {
     constructor() {
         super();
         Utility.SimpleSelectionMixin.call(this);
-
         this._drawStartPos = "origin";
     }
 
@@ -79,6 +78,7 @@ export class Sankey extends SVGWidget {
         };
         if (this.data().length === 0) return retVal;
         const vertexIndex = {};
+        const valueIdx = 2;
         const mappings = this.mappings().filter(mapping => mapping.valid());
         mappings.forEach(function (mapping, idx) {
             const view = this._db.rollupView([mapping.column()]);
@@ -89,7 +89,8 @@ export class Sankey extends SVGWidget {
                         __id: id,
                         __category: mapping.column(),
                         name: row.key,
-                        origRow: row.values
+                        origRow: row.value,
+                        value: row.value[idx][valueIdx]
                     });
                     vertexIndex[id] = retVal.vertices.length - 1;
                 }
@@ -107,7 +108,7 @@ export class Sankey extends SVGWidget {
                             __id: sourceID + "_" + targetID,
                             source: vertexIndex[sourceID],
                             target: vertexIndex[targetID],
-                            value: mapping2.aggregate(value.value)
+                            value: value.value[0][valueIdx]
                         });
                     });
                 });
@@ -116,7 +117,6 @@ export class Sankey extends SVGWidget {
 
         return retVal;
     }
-
     enter(domNode, element) {
         super.enter(domNode, element);
 
@@ -129,14 +129,22 @@ export class Sankey extends SVGWidget {
 
         this._palette = this._palette.switch(this.paletteID());
 
+        const strokeWidth = this.vertexStrokeWidth();
+
         const sankeyData = this.sankeyData();
+        const sw2 = strokeWidth * 2;
         this._d3Sankey
-            .extent([[0, 0], [this.width(), this.height()]])
+            .extent([
+                [strokeWidth, strokeWidth],
+                [this.width() - sw2, this.height() - sw2]
+            ])
             .nodeWidth(this.vertexWidth())
             .nodePadding(this.vertexPadding())
             ;
-
-        this._d3Sankey({ nodes: sankeyData.vertices, links: sankeyData.edges });
+        this._d3Sankey({
+            nodes: sankeyData.vertices,
+            links: sankeyData.edges
+        });
         const context = this;
 
         // Links ---
@@ -150,15 +158,16 @@ export class Sankey extends SVGWidget {
             })
             .merge(link)
             .attr("d", d3SankeyLinkHorizontal())
-            .style("stroke-width", function (d) { return Math.max(1, d.dy); })
-            .sort(function (a, b) { return b.dy - a.dy; })
+            .style("stroke-width", function (d) {
+                return Math.max(1, d.width);
+            })
+            .sort(function (a, b) { return b.width - a.width; })
             .select("title")
             .text(function (d) {
                 return d.source.name + " → " + d.target.name + "\n" + d.value;
             })
             ;
         link.exit().remove();
-
         // Nodes ---
         const node = element.selectAll(".node").data(sankeyData.vertices);
         node.enter().append("g")
@@ -186,24 +195,32 @@ export class Sankey extends SVGWidget {
             */
             .merge(node)
             .attr("transform", function (d) {
-                return "translate(" + d.x + "," + d.y + ")";
+                let _x = 0;
+                let _y = 0;
+                if(d.x0)_x=d.x0;
+                if(d.y0)_y=d.y0;
+                return "translate(" + (_x+strokeWidth) + "," + (_y+strokeWidth) + ")";
             })
             .each(function () {
                 const n = d3Select(this);
                 n.select("rect")
-                    .attr("height", function (d: any) { return d.dy; })
+                    .attr("height", function (d: any) { return d.y1 - d.y0; })
                     .attr("width", context._d3Sankey.nodeWidth())
                     .style("fill", function (d: any) { return context._palette(d.name); })
+                    .style("stroke", function (d: any) { return context.vertexStrokeColor(); })
+                    .style("stroke-width", function (d: any) { return strokeWidth; })
                     .style("cursor", (context.xAxisMovement() || context.yAxisMovement()) ? null : "default")
                     ;
                 n.select("text")
                     .attr("x", -6)
-                    .attr("y", function (d: any) { return d.dy / 2; })
+                    .attr("y", function (d: any) {
+                        return (d.y1 - d.y0)/2;
+                    })
                     .attr("dy", ".35em")
                     .attr("text-anchor", "end")
                     .attr("transform", null)
                     .text(function (d: any) { return d.name; })
-                    .filter(function (d: any) { return d.x < context.width() / 2; })
+                    .filter(function (d: any) { return d.x0 < context.width() / 2; })
                     .attr("x", 6 + context._d3Sankey.nodeWidth())
                     .attr("text-anchor", "start")
                     ;
@@ -240,6 +257,8 @@ export class Sankey extends SVGWidget {
 
     paletteID: { (): string; (_: string): Sankey; };
     mappings: { (): SankeyColumn[]; (_: SankeyColumn[]): Sankey; };
+    vertexStrokeWidth: { (): number; (_: number): Sankey; };
+    vertexStrokeColor: { (): string; (_: string): Sankey; };
     vertexWidth: { (): number; (_: number): Sankey; };
     vertexPadding: { (): number; (_: number): Sankey; };
     xAxisMovement: { (): boolean; (_: boolean): Sankey; };
@@ -266,6 +285,8 @@ Sankey.prototype._palette = Palette.ordinal("default");
 
 Sankey.prototype.publish("paletteID", "default", "set", "Color palette for this widget", Sankey.prototype._palette.switch());
 Sankey.prototype.publish("mappings", [], "propertyArray", "Source Columns", null, { autoExpand: SankeyColumn });
+Sankey.prototype.publish("vertexStrokeWidth", 1, "number", "Vertex Stroke Width");
+Sankey.prototype.publish("vertexStrokeColor", "darkgray", "string", "Vertex Stroke Color");
 Sankey.prototype.publish("vertexWidth", 36, "number", "Vertex Width");
 Sankey.prototype.publish("vertexPadding", 40, "number", "Vertex Padding");
 Sankey.prototype.publish("xAxisMovement", false, "boolean", "Enable x-axis movement");

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/graph";
-export const PKG_VERSION = "2.71.0";
-export const BUILD_VERSION = "2.92.0";
+export const PKG_VERSION = "2.75.0";
+export const BUILD_VERSION = "2.97.0";

package/src/graph2/dataGraph.ts

@@ -76,8 +76,10 @@ export class DataGraph extends Graph2 {
     edgeSourceColumn: publish<this, string>;
     @publish("", "set", "Edge target ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
     edgeTargetColumn: publish<this, string>;
-    @publish("", "set", "Edge target ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
+    @publish("", "set", "Edge weight column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
     edgeWeightColumn: publish<this, string>;
+    @publish("", "set", "Edge color column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
+    edgeColorColumn: publish<this, string>;
 
     @publish([], "any", "Subgraph Columns")
     hierarchyColumns: publish<this, string[]>;
@@ -124,26 +126,31 @@ export class DataGraph extends Graph2 {
         return retVal >= 0 ? retVal : columns.indexOf(defColumn);
     }
 
-    private _prevSubgraphs: Array<Array<string | number | boolean>> = [];
+    private _prevSubgraphs: readonly ISubgraph[] = [];
     private _masterSubgraphs: ISubgraph[] = [];
     private _masterSubgraphsMap: { [key: string]: ISubgraph } = {};
     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();
-        const diff = compare2(this._prevSubgraphs, subgraphs, d => d[idIdx] as string);
+        const subgraphs = this.subgraphs().map((sg): ISubgraph => {
+            return {
+                id: "" + sg[idIdx],
+                text: "" + sg[labelIdx],
+                origData: toJsonObj(sg, columns)
+            };
+        });
+        const diff = compare2(this._prevSubgraphs, subgraphs, d => d.id);
         diff.exit.forEach(item => {
-            this._masterSubgraphs = this._masterSubgraphs.filter(i => i.id !== item[idIdx]);
+            this._masterSubgraphs = this._masterSubgraphs.filter(i => i.id !== item.id);
+            delete this._masterSubgraphsMap[item.id];
         });
         diff.enter.forEach(item => {
-            const sg: ISubgraph = {
-                id: "" + item[idIdx],
-                text: "" + item[labelIdx],
-                origData: toJsonObj(item, columns)
-            };
-            this._masterSubgraphs.push(sg);
-            this._masterSubgraphsMap[sg.id] = sg;
+            this._masterSubgraphs.push(item);
+            this._masterSubgraphsMap[item.id] = item;
+        });
+        diff.update.forEach(item => {
+            this._masterSubgraphsMap[item.id].origData = item.origData;
         });
         this._prevSubgraphs = subgraphs;
     }
@@ -178,16 +185,21 @@ export class DataGraph extends Graph2 {
         const diff = compare2(this._prevVertices, vertices, d => d.id);
         diff.exit.forEach(item => {
             this._masterVertices = this._masterVertices.filter(i => i.id !== item.id);
+            delete this._masterVerticesMap[item.id];
         });
         diff.enter.forEach(item => {
             this._masterVertices.push(item);
             this._masterVerticesMap[item.id] = item;
         });
+        diff.update.forEach(item => {
+            this._masterVerticesMap[item.id].origData = item.origData;
+        });
         this._prevVertices = vertices;
     }
 
     protected _prevEdges: readonly IEdge[] = [];
     protected _masterEdges: IEdge[] = [];
+    private _masterEdgesMap: { [key: string]: IEdge } = {};
     mergeEdges() {
         const columns = this.edgeColumns();
         const idIdx = this.indexOf(columns, this.edgeIDColumn(), "id");
@@ -195,6 +207,7 @@ export class DataGraph extends Graph2 {
         const targetIdx = this.indexOf(columns, this.edgeTargetColumn(), "target");
         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 source = this._masterVerticesMap["" + e[sourceIdx]];
             if (!source) console.error(`Invalid edge source entity "${e[sourceIdx]}" does not exist.`);
@@ -206,6 +219,7 @@ export class DataGraph extends Graph2 {
                 source,
                 target,
                 weight: +e[weightIdx] || 1,
+                color: e[colorIdx] as string,
                 label: labelIdx >= 0 ? ("" + e[labelIdx]) : "",
                 origData: toJsonObj(e, columns)
             };
@@ -213,9 +227,15 @@ export class DataGraph extends Graph2 {
         const diff = compare2(this._masterEdges, edges, d => d.id);
         diff.exit.forEach(item => {
             this._masterEdges = this._masterEdges.filter(i => i.id !== item.id);
+            delete this._masterEdgesMap[item.id];
         });
         diff.enter.forEach(item => {
             this._masterEdges.push(item);
+            this._masterEdgesMap[item.id] = item;
+
+        });
+        diff.update.forEach(item => {
+            this._masterEdgesMap[item.id].origData = item.origData;
         });
         this._prevEdges = edges;
     }
@@ -237,6 +257,7 @@ export class DataGraph extends Graph2 {
         const diff = compare2(this._prevHierarchy, hierarchy, d => d.id);
         diff.exit.forEach(item => {
             this._masterHierarchy = this._masterHierarchy.filter(i => i.id !== item.id);
+            delete this._masterHierarchyMap[item.id];
         });
         diff.enter.forEach(item => {
             this._masterHierarchy.push(item);

package/src/graph2/graph.ts

@@ -281,7 +281,9 @@ export class Graph2 extends SVGZoomWidget {
             const vp = this._graphData.item(item.id);
             return {
                 _id: vp.id,
-                element: () => vp.element
+                element: () => {
+                    return vp.element;
+                }
             };
         }));
         return this;
@@ -701,7 +703,9 @@ export class Graph2 extends SVGZoomWidget {
                     })
                     .remove()
             )
-            .style("stroke", this.edgeColor())
+            .style("stroke", d => {
+                return d.props?.color ?? this.edgeColor();
+            })
             .style("stroke-width", this.edgeStrokeWidth() + "px")
             ;
         return this;