@hpcc-js/graph 2.87.2 → 2.87.3

package/src/graph2/sankeyGraph.ts

@@ -1,316 +1,316 @@
-import { Palette, publish, SVGWidget, Utility } from "@hpcc-js/common";
-import { compare2 } from "@hpcc-js/util";
-import { sankey as d3Sankey, sankeyLinkHorizontal as d3SankeyLinkHorizontal } from "d3-sankey";
-import { select as d3Select } from "d3-selection";
-import { AnnotationColumn, toJsonObj } from "./dataGraph";
-
-import "../../src/graph2/sankeyGraph.css";
-import { EdgeBaseProps, VertexBaseProps } from "./graphT";
-
-export class SankeyGraph extends SVGWidget {
-    @publish([], "any", "Vertex Columns", null, { internal: true })
-    vertexColumns: publish<this, string[]>;
-    @publish([], "any", "Vertices (Nodes)", null, { internal: true })
-    vertices: publish<this, Array<Array<string | number | boolean>>>;
-    @publish("", "set", "Vertex Category ID column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexCategoryColumn: publish<this, string>;
-    @publish("", "set", "Vertex ID column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexIDColumn: publish<this, string>;
-    @publish("", "set", "Vertex label column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexLabelColumn: publish<this, string>;
-    @publish("", "set", "Vertex centroid column (boolean)", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexCentroidColumn: publish<this, string>;
-    @publish("?", "string", "Vertex default FAChar")
-    vertexFAChar: publish<this, string>;
-    @publish("", "set", "Vertex FAChar column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexFACharColumn: publish<this, string>;
-    @publish("", "set", "Vertex tooltip column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexTooltipColumn: publish<this, string>;
-    @publish([], "propertyArray", "Annotations", null, { autoExpand: AnnotationColumn })
-    vertexAnnotationColumns: publish<this, AnnotationColumn[]>;
-
-    @publish([], "any", "Edge columns", null, { internal: true })
-    edgeColumns: publish<this, string[]>;
-    @publish([], "any", "Edges (Edges)", null, { internal: true })
-    edges: publish<this, Array<Array<string | number | boolean>>>;
-    @publish("", "set", "Edge ID column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeIDColumn: publish<this, string>;
-    @publish("", "set", "Edge label column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeLabelColumn: publish<this, string>;
-    @publish("", "set", "Edge source ID column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeSourceColumn: publish<this, string>;
-    @publish("", "set", "Edge target ID column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeTargetColumn: publish<this, string>;
-    @publish("", "set", "Edge target ID column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeWeightColumn: publish<this, string>;
-
-    protected _d3Sankey: any;
-    protected _selection: any;
-    _palette: any;
-
-    constructor() {
-        super();
-        Utility.SimpleSelectionMixin.call(this);
-
-        this._drawStartPos = "origin";
-    }
-
-    private _prevVertices: readonly VertexBaseProps[] = [];
-    private _masterVertices: VertexBaseProps[] = [];
-    private _masterVerticesMap: { [key: string]: VertexBaseProps } = {};
-    mergeVertices() {
-        const columns = this.vertexColumns();
-        const annotationColumns = this.vertexAnnotationColumns();
-        const catIdx = this.indexOf(columns, this.vertexCategoryColumn(), "category");
-        const idIdx = this.indexOf(columns, this.vertexIDColumn(), "id");
-        const labelIdx = this.indexOf(columns, this.vertexLabelColumn(), "label");
-        const centroidIdx = this.indexOf(columns, this.vertexCentroidColumn(), "centroid");
-        const vertexTooltipIdx = this.indexOf(columns, this.vertexTooltipColumn(), "tooltip");
-        const annotationIdxs = annotationColumns.map(ac => this.indexOf(columns, ac.columnID(), ""));
-        const vertices: VertexBaseProps[] = this.vertices().map((v): VertexBaseProps => {
-            return {
-                categoryID: "" + v[catIdx],
-                id: "" + v[idIdx],
-                text: "" + v[labelIdx],
-                tooltip: "" + v[vertexTooltipIdx],
-                origData: toJsonObj(v, columns),
-                centroid: !!v[centroidIdx],
-                annotationIDs: annotationIdxs.map((ai, i) => !!v[ai] ? annotationColumns[i].annotationID() : undefined).filter(a => !!a)
-            };
-        });
-        const diff = compare2(this._prevVertices, vertices, d => d.id);
-        diff.exit.forEach(item => {
-            this._masterVertices = this._masterVertices.filter(i => i.id !== item.id);
-        });
-        diff.enter.forEach(item => {
-            this._masterVertices.push(item);
-            this._masterVerticesMap[item.id] = item;
-        });
-        this._prevVertices = vertices;
-    }
-
-    indexOf(columns: readonly string[], column: string, defColumn: string = ""): number {
-        const retVal = columns.indexOf(column);
-        return retVal >= 0 ? retVal : columns.indexOf(defColumn);
-    }
-
-    protected _prevEdges: readonly EdgeBaseProps[] = [];
-    protected _masterEdges: EdgeBaseProps[] = [];
-    mergeEdges() {
-        const columns = this.edgeColumns();
-        const idIdx = this.indexOf(columns, this.edgeIDColumn(), "id");
-        const sourceIdx = this.indexOf(columns, this.edgeSourceColumn(), "source");
-        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 edges: EdgeBaseProps[] = this.edges().map(e => {
-            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,
-                value: +e[weightIdx] || 0,
-                label: labelIdx >= 0 ? ("" + e[labelIdx]) : "",
-                origData: toJsonObj(e, columns)
-            };
-        }).filter(e => e.source && e.target);
-        const diff = compare2(this._masterEdges, edges, d => d.id);
-        diff.exit.forEach(item => {
-            this._masterEdges = this._masterEdges.filter(i => i.id !== item.id);
-        });
-        diff.enter.forEach(item => {
-            this._masterEdges.push(item);
-        });
-        this._prevEdges = edges;
-    }
-
-    sankeyData() {
-        this.mergeVertices();
-        this.mergeEdges();
-        return {
-            vertices: this._masterVertices,
-            edges: this._masterEdges
-        };
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-
-        this._d3Sankey = d3Sankey();
-        this._selection.widgetElement(element);
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-
-        this._palette = this._palette.switch(this.paletteID());
-
-        const strokeWidth = this.vertexStrokeWidth();
-
-        const sankeyData = this.sankeyData();
-        this._d3Sankey
-            .nodeId(d => d.id)
-            .extent([
-                [0, 0],
-                [this.width(), this.height()]
-            ])
-            // .nodeAlign(sankeyCenter)
-            // .nodeWidth(this.vertexWidth())
-            // .nodePadding(this.vertexPadding())
-            ;
-        if (sankeyData.vertices.length > 0) {
-            this._d3Sankey({
-                nodes: sankeyData.vertices,
-                links: sankeyData.edges
-            });
-        }
-        const context = this;
-
-        // Links --- 
-        const link = element.selectAll(".link").data(sankeyData.edges);
-        link.enter().append("path")
-            .attr("class", "link")
-            .each(function () {
-                d3Select(this)
-                    .append("title")
-                    ;
-            })
-            .merge(link)
-            .attr("d", d3SankeyLinkHorizontal())
-            .style("stroke-width", (d: any) => Math.max(1, d.width))
-            // .sort(function (a, b) { return b.width - a.width; })
-            .select("title")
-            .text(function (d) {
-                return d.source.text + " → " + d.target.text + "\n" + d.value;
-            })
-            ;
-        link.exit().remove();
-
-        // Nodes ---
-        const node = element.selectAll(".node").data(sankeyData.vertices);
-        node.enter().append("g")
-            .attr("class", "node")
-            .call(this._selection.enter.bind(this._selection))
-            .on("click", function (d) {
-                context.click(d.origData, "", context._selection.selected(this));
-            })
-            .on("dblclick", function (d) {
-                context.dblclick(d.origData, "", context._selection.selected(this));
-            })
-            .each(function () {
-                const gElement = d3Select(this);
-                gElement.append("rect");
-                gElement.append("text");
-            })
-            /*
-            .call(d3.behavior.drag()
-                .origin(function (d) { return d; })
-                .on("dragstart", function () {
-                    this.parentNode.appendChild(this);
-                })
-                .on("drag", dragmove)
-            )
-            */
-            .merge(node)
-            .attr("transform", function (d) {
-                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", (d: any) => {
-                        return d.y1 - d.y0;
-                    })
-                    .attr("width", (d: any) => d.x1 - d.x0)
-                    .style("fill", function (d: any) { return context._palette(d.categoryID); })
-                    .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.y1 - d.y0) / 2;
-                    })
-                    .attr("dy", ".35em")
-                    .attr("text-anchor", "end")
-                    .attr("transform", null)
-                    .text(function (d: any) {
-                        return d.text;
-                    })
-                    .filter(function (d: any) {
-                        return d.x0 < context.width() / 2;
-                    })
-                    .attr("x", 6 + context._d3Sankey.nodeWidth())
-                    .attr("text-anchor", "start")
-                    ;
-            });
-        node.exit().remove();
-
-        /*
-        function dragmove(d) {
-            var gElement = d3.select(this);
-            if (context.xAxisMovement()) {
-                d.x = Math.max(0, Math.min(context.width() - d.dx, d3.event.x));
-            }
-            if (context.yAxisMovement()) {
-                d.y = Math.max(0, Math.min(context.height() - d.dy, d3.event.y));
-            }
-            gElement.attr("transform", "translate(" + d.x + "," + d.y + ")");
-            context._d3Sankey.relayout();
-            link.attr("d", context._d3SankeyPath);
-     
-            gElement.select("text")
-                .attr("x", -6)
-                .attr("y", function (d) { return d.dy / 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; })
-                    .attr("x", 6 + context._d3Sankey.nodeWidth())
-                    .attr("text-anchor", "start")
-            ;
-        }
-        */
-    }
-
-    paletteID: { (): string; (_: string): SankeyGraph; };
-    vertexStrokeWidth: { (): number; (_: number): SankeyGraph; };
-    vertexStrokeColor: { (): string; (_: string): SankeyGraph; };
-    vertexWidth: { (): number; (_: number): SankeyGraph; };
-    vertexPadding: { (): number; (_: number): SankeyGraph; };
-    xAxisMovement: { (): boolean; (_: boolean): SankeyGraph; };
-    yAxisMovement: { (): boolean; (_: boolean): SankeyGraph; };
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-    //  Events  ---
-    click(row, column, selected) {
-    }
-
-    dblclick(row, column, selected) {
-    }
-}
-SankeyGraph.prototype._class += " graph_SankeyGraph";
-SankeyGraph.prototype.mixin(Utility.SimpleSelectionMixin);
-
-SankeyGraph.prototype._palette = Palette.ordinal("category10");
-
-SankeyGraph.prototype.publish("paletteID", "category10", "set", "Color palette for this widget", SankeyGraph.prototype._palette.switch());
-SankeyGraph.prototype.publish("vertexStrokeWidth", 1, "number", "Vertex Stroke Width");
-SankeyGraph.prototype.publish("vertexStrokeColor", "darkgray", "string", "Vertex Stroke Color");
-SankeyGraph.prototype.publish("vertexWidth", 36, "number", "Vertex Width");
-SankeyGraph.prototype.publish("vertexPadding", 20, "number", "Vertex Padding");
-SankeyGraph.prototype.publish("xAxisMovement", false, "boolean", "Enable x-axis movement");
-SankeyGraph.prototype.publish("yAxisMovement", false, "boolean", "Enable y-axis movement");
+import { Palette, publish, SVGWidget, Utility } from "@hpcc-js/common";
+import { compare2 } from "@hpcc-js/util";
+import { sankey as d3Sankey, sankeyLinkHorizontal as d3SankeyLinkHorizontal } from "d3-sankey";
+import { select as d3Select } from "d3-selection";
+import { AnnotationColumn, toJsonObj } from "./dataGraph";
+
+import "../../src/graph2/sankeyGraph.css";
+import { EdgeBaseProps, VertexBaseProps } from "./graphT";
+
+export class SankeyGraph extends SVGWidget {
+    @publish([], "any", "Vertex Columns", null, { internal: true })
+    vertexColumns: publish<this, string[]>;
+    @publish([], "any", "Vertices (Nodes)", null, { internal: true })
+    vertices: publish<this, Array<Array<string | number | boolean>>>;
+    @publish("", "set", "Vertex Category ID column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
+    vertexCategoryColumn: publish<this, string>;
+    @publish("", "set", "Vertex ID column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
+    vertexIDColumn: publish<this, string>;
+    @publish("", "set", "Vertex label column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
+    vertexLabelColumn: publish<this, string>;
+    @publish("", "set", "Vertex centroid column (boolean)", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
+    vertexCentroidColumn: publish<this, string>;
+    @publish("?", "string", "Vertex default FAChar")
+    vertexFAChar: publish<this, string>;
+    @publish("", "set", "Vertex FAChar column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
+    vertexFACharColumn: publish<this, string>;
+    @publish("", "set", "Vertex tooltip column", function (this: SankeyGraph) { return this.vertexColumns(); }, { optional: true })
+    vertexTooltipColumn: publish<this, string>;
+    @publish([], "propertyArray", "Annotations", null, { autoExpand: AnnotationColumn })
+    vertexAnnotationColumns: publish<this, AnnotationColumn[]>;
+
+    @publish([], "any", "Edge columns", null, { internal: true })
+    edgeColumns: publish<this, string[]>;
+    @publish([], "any", "Edges (Edges)", null, { internal: true })
+    edges: publish<this, Array<Array<string | number | boolean>>>;
+    @publish("", "set", "Edge ID column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
+    edgeIDColumn: publish<this, string>;
+    @publish("", "set", "Edge label column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
+    edgeLabelColumn: publish<this, string>;
+    @publish("", "set", "Edge source ID column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
+    edgeSourceColumn: publish<this, string>;
+    @publish("", "set", "Edge target ID column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
+    edgeTargetColumn: publish<this, string>;
+    @publish("", "set", "Edge target ID column", function (this: SankeyGraph) { return this.edgeColumns(); }, { optional: true })
+    edgeWeightColumn: publish<this, string>;
+
+    protected _d3Sankey: any;
+    protected _selection: any;
+    _palette: any;
+
+    constructor() {
+        super();
+        Utility.SimpleSelectionMixin.call(this);
+
+        this._drawStartPos = "origin";
+    }
+
+    private _prevVertices: readonly VertexBaseProps[] = [];
+    private _masterVertices: VertexBaseProps[] = [];
+    private _masterVerticesMap: { [key: string]: VertexBaseProps } = {};
+    mergeVertices() {
+        const columns = this.vertexColumns();
+        const annotationColumns = this.vertexAnnotationColumns();
+        const catIdx = this.indexOf(columns, this.vertexCategoryColumn(), "category");
+        const idIdx = this.indexOf(columns, this.vertexIDColumn(), "id");
+        const labelIdx = this.indexOf(columns, this.vertexLabelColumn(), "label");
+        const centroidIdx = this.indexOf(columns, this.vertexCentroidColumn(), "centroid");
+        const vertexTooltipIdx = this.indexOf(columns, this.vertexTooltipColumn(), "tooltip");
+        const annotationIdxs = annotationColumns.map(ac => this.indexOf(columns, ac.columnID(), ""));
+        const vertices: VertexBaseProps[] = this.vertices().map((v): VertexBaseProps => {
+            return {
+                categoryID: "" + v[catIdx],
+                id: "" + v[idIdx],
+                text: "" + v[labelIdx],
+                tooltip: "" + v[vertexTooltipIdx],
+                origData: toJsonObj(v, columns),
+                centroid: !!v[centroidIdx],
+                annotationIDs: annotationIdxs.map((ai, i) => !!v[ai] ? annotationColumns[i].annotationID() : undefined).filter(a => !!a)
+            };
+        });
+        const diff = compare2(this._prevVertices, vertices, d => d.id);
+        diff.exit.forEach(item => {
+            this._masterVertices = this._masterVertices.filter(i => i.id !== item.id);
+        });
+        diff.enter.forEach(item => {
+            this._masterVertices.push(item);
+            this._masterVerticesMap[item.id] = item;
+        });
+        this._prevVertices = vertices;
+    }
+
+    indexOf(columns: readonly string[], column: string, defColumn: string = ""): number {
+        const retVal = columns.indexOf(column);
+        return retVal >= 0 ? retVal : columns.indexOf(defColumn);
+    }
+
+    protected _prevEdges: readonly EdgeBaseProps[] = [];
+    protected _masterEdges: EdgeBaseProps[] = [];
+    mergeEdges() {
+        const columns = this.edgeColumns();
+        const idIdx = this.indexOf(columns, this.edgeIDColumn(), "id");
+        const sourceIdx = this.indexOf(columns, this.edgeSourceColumn(), "source");
+        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 edges: EdgeBaseProps[] = this.edges().map(e => {
+            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,
+                value: +e[weightIdx] || 0,
+                label: labelIdx >= 0 ? ("" + e[labelIdx]) : "",
+                origData: toJsonObj(e, columns)
+            };
+        }).filter(e => e.source && e.target);
+        const diff = compare2(this._masterEdges, edges, d => d.id);
+        diff.exit.forEach(item => {
+            this._masterEdges = this._masterEdges.filter(i => i.id !== item.id);
+        });
+        diff.enter.forEach(item => {
+            this._masterEdges.push(item);
+        });
+        this._prevEdges = edges;
+    }
+
+    sankeyData() {
+        this.mergeVertices();
+        this.mergeEdges();
+        return {
+            vertices: this._masterVertices,
+            edges: this._masterEdges
+        };
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+
+        this._d3Sankey = d3Sankey();
+        this._selection.widgetElement(element);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+
+        this._palette = this._palette.switch(this.paletteID());
+
+        const strokeWidth = this.vertexStrokeWidth();
+
+        const sankeyData = this.sankeyData();
+        this._d3Sankey
+            .nodeId(d => d.id)
+            .extent([
+                [0, 0],
+                [this.width(), this.height()]
+            ])
+            // .nodeAlign(sankeyCenter)
+            // .nodeWidth(this.vertexWidth())
+            // .nodePadding(this.vertexPadding())
+            ;
+        if (sankeyData.vertices.length > 0) {
+            this._d3Sankey({
+                nodes: sankeyData.vertices,
+                links: sankeyData.edges
+            });
+        }
+        const context = this;
+
+        // Links --- 
+        const link = element.selectAll(".link").data(sankeyData.edges);
+        link.enter().append("path")
+            .attr("class", "link")
+            .each(function () {
+                d3Select(this)
+                    .append("title")
+                    ;
+            })
+            .merge(link)
+            .attr("d", d3SankeyLinkHorizontal())
+            .style("stroke-width", (d: any) => Math.max(1, d.width))
+            // .sort(function (a, b) { return b.width - a.width; })
+            .select("title")
+            .text(function (d) {
+                return d.source.text + " → " + d.target.text + "\n" + d.value;
+            })
+            ;
+        link.exit().remove();
+
+        // Nodes ---
+        const node = element.selectAll(".node").data(sankeyData.vertices);
+        node.enter().append("g")
+            .attr("class", "node")
+            .call(this._selection.enter.bind(this._selection))
+            .on("click", function (d) {
+                context.click(d.origData, "", context._selection.selected(this));
+            })
+            .on("dblclick", function (d) {
+                context.dblclick(d.origData, "", context._selection.selected(this));
+            })
+            .each(function () {
+                const gElement = d3Select(this);
+                gElement.append("rect");
+                gElement.append("text");
+            })
+            /*
+            .call(d3.behavior.drag()
+                .origin(function (d) { return d; })
+                .on("dragstart", function () {
+                    this.parentNode.appendChild(this);
+                })
+                .on("drag", dragmove)
+            )
+            */
+            .merge(node)
+            .attr("transform", function (d) {
+                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", (d: any) => {
+                        return d.y1 - d.y0;
+                    })
+                    .attr("width", (d: any) => d.x1 - d.x0)
+                    .style("fill", function (d: any) { return context._palette(d.categoryID); })
+                    .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.y1 - d.y0) / 2;
+                    })
+                    .attr("dy", ".35em")
+                    .attr("text-anchor", "end")
+                    .attr("transform", null)
+                    .text(function (d: any) {
+                        return d.text;
+                    })
+                    .filter(function (d: any) {
+                        return d.x0 < context.width() / 2;
+                    })
+                    .attr("x", 6 + context._d3Sankey.nodeWidth())
+                    .attr("text-anchor", "start")
+                    ;
+            });
+        node.exit().remove();
+
+        /*
+        function dragmove(d) {
+            var gElement = d3.select(this);
+            if (context.xAxisMovement()) {
+                d.x = Math.max(0, Math.min(context.width() - d.dx, d3.event.x));
+            }
+            if (context.yAxisMovement()) {
+                d.y = Math.max(0, Math.min(context.height() - d.dy, d3.event.y));
+            }
+            gElement.attr("transform", "translate(" + d.x + "," + d.y + ")");
+            context._d3Sankey.relayout();
+            link.attr("d", context._d3SankeyPath);
+     
+            gElement.select("text")
+                .attr("x", -6)
+                .attr("y", function (d) { return d.dy / 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; })
+                    .attr("x", 6 + context._d3Sankey.nodeWidth())
+                    .attr("text-anchor", "start")
+            ;
+        }
+        */
+    }
+
+    paletteID: { (): string; (_: string): SankeyGraph; };
+    vertexStrokeWidth: { (): number; (_: number): SankeyGraph; };
+    vertexStrokeColor: { (): string; (_: string): SankeyGraph; };
+    vertexWidth: { (): number; (_: number): SankeyGraph; };
+    vertexPadding: { (): number; (_: number): SankeyGraph; };
+    xAxisMovement: { (): boolean; (_: boolean): SankeyGraph; };
+    yAxisMovement: { (): boolean; (_: boolean): SankeyGraph; };
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+    //  Events  ---
+    click(row, column, selected) {
+    }
+
+    dblclick(row, column, selected) {
+    }
+}
+SankeyGraph.prototype._class += " graph_SankeyGraph";
+SankeyGraph.prototype.mixin(Utility.SimpleSelectionMixin);
+
+SankeyGraph.prototype._palette = Palette.ordinal("category10");
+
+SankeyGraph.prototype.publish("paletteID", "category10", "set", "Color palette for this widget", SankeyGraph.prototype._palette.switch());
+SankeyGraph.prototype.publish("vertexStrokeWidth", 1, "number", "Vertex Stroke Width");
+SankeyGraph.prototype.publish("vertexStrokeColor", "darkgray", "string", "Vertex Stroke Color");
+SankeyGraph.prototype.publish("vertexWidth", 36, "number", "Vertex Width");
+SankeyGraph.prototype.publish("vertexPadding", 20, "number", "Vertex Padding");
+SankeyGraph.prototype.publish("xAxisMovement", false, "boolean", "Enable x-axis movement");
+SankeyGraph.prototype.publish("yAxisMovement", false, "boolean", "Enable y-axis movement");