@hpcc-js/graph 2.72.0 → 2.73.0

package/dist/index.js

@@ -5,8 +5,8 @@
 }(this, (function (exports, common, util$3, api, react, html) { 'use strict';
 
     var PKG_NAME = "@hpcc-js/graph";
-    var PKG_VERSION = "2.72.0";
-    var BUILD_VERSION = "2.93.0";
+    var PKG_VERSION = "2.73.0";
+    var BUILD_VERSION = "2.94.0";
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -14462,6 +14462,7 @@
             if (this.data().length === 0)
                 return retVal;
             var vertexIndex = {};
+            var valueIdx = 2;
             var mappings = this.mappings().filter(function (mapping) { return mapping.valid(); });
             mappings.forEach(function (mapping, idx) {
                 var view = this._db.rollupView([mapping.column()]);
@@ -14472,7 +14473,8 @@
                             __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;
                     }
@@ -14490,7 +14492,7 @@
                                 __id: sourceID + "_" + targetID,
                                 source: vertexIndex[sourceID],
                                 target: vertexIndex[targetID],
-                                value: mapping2_1.aggregate(value.value)
+                                value: value.value[0][valueIdx]
                             });
                         });
                     });
@@ -14506,12 +14508,20 @@
         Sankey$1.prototype.update = function (domNode, element) {
             _super.prototype.update.call(this, domNode, element);
             this._palette = this._palette.switch(this.paletteID());
+            var strokeWidth = this.vertexStrokeWidth();
             var sankeyData = this.sankeyData();
+            var 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
+            });
             var context = this;
             // Links ---
             var link = element.selectAll(".link").data(sankeyData.edges);
@@ -14523,8 +14533,10 @@
             })
                 .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;
@@ -14557,23 +14569,33 @@
                 */
                 .merge(node)
                 .attr("transform", function (d) {
-                return "translate(" + d.x + "," + d.y + ")";
+                var _x = 0;
+                var _y = 0;
+                if (d.x0)
+                    _x = d.x0;
+                if (d.y0)
+                    _y = d.y0;
+                return "translate(" + (_x + strokeWidth) + "," + (_y + strokeWidth) + ")";
             })
                 .each(function () {
                 var n = common.select(this);
                 n.select("rect")
-                    .attr("height", function (d) { return d.dy; })
+                    .attr("height", function (d) { return d.y1 - d.y0; })
                     .attr("width", context._d3Sankey.nodeWidth())
                     .style("fill", function (d) { return context._palette(d.name); })
+                    .style("stroke", function (d) { return context.vertexStrokeColor(); })
+                    .style("stroke-width", function (d) { return strokeWidth; })
                     .style("cursor", (context.xAxisMovement() || context.yAxisMovement()) ? null : "default");
                 n.select("text")
                     .attr("x", -6)
-                    .attr("y", function (d) { return d.dy / 2; })
+                    .attr("y", function (d) {
+                    return (d.y1 - d.y0) / 2;
+                })
                     .attr("dy", ".35em")
                     .attr("text-anchor", "end")
                     .attr("transform", null)
                     .text(function (d) { return d.name; })
-                    .filter(function (d) { return d.x < context.width() / 2; })
+                    .filter(function (d) { return d.x0 < context.width() / 2; })
                     .attr("x", 6 + context._d3Sankey.nodeWidth())
                     .attr("text-anchor", "start");
             });
@@ -14623,6 +14645,8 @@
     Sankey$1.prototype._palette = common.Palette.ordinal("default");
     Sankey$1.prototype.publish("paletteID", "default", "set", "Color palette for this widget", Sankey$1.prototype._palette.switch());
     Sankey$1.prototype.publish("mappings", [], "propertyArray", "Source Columns", null, { autoExpand: SankeyColumn });
+    Sankey$1.prototype.publish("vertexStrokeWidth", 1, "number", "Vertex Stroke Width");
+    Sankey$1.prototype.publish("vertexStrokeColor", "darkgray", "string", "Vertex Stroke Color");
     Sankey$1.prototype.publish("vertexWidth", 36, "number", "Vertex Width");
     Sankey$1.prototype.publish("vertexPadding", 40, "number", "Vertex Padding");
     Sankey$1.prototype.publish("xAxisMovement", false, "boolean", "Enable x-axis movement");
@@ -17061,6 +17085,7 @@
             _this._masterVerticesMap = {};
             _this._prevEdges = [];
             _this._masterEdges = [];
+            _this._masterEdgesMap = {};
             _this._prevHierarchy = [];
             _this._masterHierarchy = [];
             _this._masterHierarchyMap = {};
@@ -17097,19 +17122,24 @@
             var columns = this.subgraphColumns();
             var idIdx = this.indexOf(columns, this.subgraphIDColumn(), "id");
             var labelIdx = this.indexOf(columns, this.subgraphLabelColumn(), "label");
-            var subgraphs = this.subgraphs();
-            var diff = util$3.compare2(this._prevSubgraphs, subgraphs, function (d) { return d[idIdx]; });
+            var subgraphs = this.subgraphs().map(function (sg) {
+                return {
+                    id: "" + sg[idIdx],
+                    text: "" + sg[labelIdx],
+                    origData: toJsonObj(sg, columns)
+                };
+            });
+            var diff = util$3.compare2(this._prevSubgraphs, subgraphs, function (d) { return d.id; });
             diff.exit.forEach(function (item) {
-                _this._masterSubgraphs = _this._masterSubgraphs.filter(function (i) { return i.id !== item[idIdx]; });
+                _this._masterSubgraphs = _this._masterSubgraphs.filter(function (i) { return i.id !== item.id; });
+                delete _this._masterSubgraphsMap[item.id];
             });
             diff.enter.forEach(function (item) {
-                var sg = {
-                    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(function (item) {
+                _this._masterSubgraphsMap[item.id].origData = item.origData;
             });
             this._prevSubgraphs = subgraphs;
         };
@@ -17141,11 +17171,15 @@
             var diff = util$3.compare2(this._prevVertices, vertices, function (d) { return d.id; });
             diff.exit.forEach(function (item) {
                 _this._masterVertices = _this._masterVertices.filter(function (i) { return i.id !== item.id; });
+                delete _this._masterVerticesMap[item.id];
             });
             diff.enter.forEach(function (item) {
                 _this._masterVertices.push(item);
                 _this._masterVerticesMap[item.id] = item;
             });
+            diff.update.forEach(function (item) {
+                _this._masterVerticesMap[item.id].origData = item.origData;
+            });
             this._prevVertices = vertices;
         };
         DataGraph.prototype.mergeEdges = function () {
@@ -17178,9 +17212,14 @@
             var diff = util$3.compare2(this._masterEdges, edges, function (d) { return d.id; });
             diff.exit.forEach(function (item) {
                 _this._masterEdges = _this._masterEdges.filter(function (i) { return i.id !== item.id; });
+                delete _this._masterEdgesMap[item.id];
             });
             diff.enter.forEach(function (item) {
                 _this._masterEdges.push(item);
+                _this._masterEdgesMap[item.id] = item;
+            });
+            diff.update.forEach(function (item) {
+                _this._masterEdgesMap[item.id].origData = item.origData;
             });
             this._prevEdges = edges;
         };
@@ -17199,6 +17238,7 @@
             var diff = util$3.compare2(this._prevHierarchy, hierarchy, function (d) { return d.id; });
             diff.exit.forEach(function (item) {
                 _this._masterHierarchy = _this._masterHierarchy.filter(function (i) { return i.id !== item.id; });
+                delete _this._masterHierarchyMap[item.id];
             });
             diff.enter.forEach(function (item) {
                 _this._masterHierarchy.push(item);
@@ -17330,6 +17370,9 @@
     }(Graph2));
     DataGraph.prototype._class += " graph_DataGraph";
 
+    var css_248z$6 = ".graph_SankeyGraph .node rect{cursor:move;fill-opacity:.9;shape-rendering:crispEdges;stroke:#a9a9a9}.graph_SankeyGraph .node.selected rect{stroke:red}.graph_SankeyGraph .node.over rect{stroke:orange}.graph_SankeyGraph .node.selected.over rect{stroke:red}.graph_SankeyGraph .node text{pointer-events:none;text-shadow:0 1px 0 #fff}.graph_SankeyGraph .node.selected text{fill:red}.graph_SankeyGraph .node.over text{fill:orange}.graph_SankeyGraph .node.selected.over text{fill:red}.graph_SankeyGraph .link{fill:none;stroke:#000;stroke-opacity:.2}.graph_SankeyGraph .link:hover{stroke-opacity:.5}";
+    styleInject(css_248z$6);
+
     var SankeyGraph = /** @class */ (function (_super) {
         __extends(SankeyGraph, _super);
         function SankeyGraph() {
@@ -17441,10 +17484,12 @@
                 [0, 0],
                 [this.width(), this.height()]
             ]);
-            this._d3Sankey({
-                nodes: sankeyData.vertices,
-                links: sankeyData.edges
-            });
+            if (sankeyData.vertices.length > 0) {
+                this._d3Sankey({
+                    nodes: sankeyData.vertices,
+                    links: sankeyData.edges
+                });
+            }
             var context = this;
             // Links --- 
             var link = element.selectAll(".link").data(sankeyData.edges);
@@ -17469,10 +17514,10 @@
                 .attr("class", "node")
                 .call(this._selection.enter.bind(this._selection))
                 .on("click", function (d) {
-                context.click(context.rowToObj(d.origRow), "", context._selection.selected(this));
+                context.click(d.origData, "", context._selection.selected(this));
             })
                 .on("dblclick", function (d) {
-                context.dblclick(context.rowToObj(d.origRow[0]), "", context._selection.selected(this));
+                context.dblclick(d.origData, "", context._selection.selected(this));
             })
                 .each(function () {
                 var gElement = common.select(this);