@hpcc-js/graph 2.70.0 → 2.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "2.70.0",
+    "version": "2.74.0",
     "description": "hpcc-js - Viz Graph",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -51,11 +51,11 @@
         "ddd": "downlevel-dts . ts3.4"
     },
     "dependencies": {
-        "@hpcc-js/api": "^2.8.53",
-        "@hpcc-js/common": "^2.58.0",
-        "@hpcc-js/html": "^2.33.0",
-        "@hpcc-js/react": "^2.41.0",
-        "@hpcc-js/util": "^2.39.0"
+        "@hpcc-js/api": "^2.8.56",
+        "@hpcc-js/common": "^2.61.0",
+        "@hpcc-js/html": "^2.36.0",
+        "@hpcc-js/react": "^2.44.0",
+        "@hpcc-js/util": "^2.41.0"
     },
     "devDependencies": {
         "@hpcc-js/bundle": "^2.10.20",
@@ -82,6 +82,7 @@
         "downlevel-dts": "0.6.0",
         "es6-promise": "4.2.8",
         "eslint": "7.32.0",
+        "eslint-plugin-react-hooks": "^4.3.0",
         "npm-run-all": "4.1.5",
         "rimraf": "2.6.3",
         "rollup": "2.10.7",
@@ -103,5 +104,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "57aaf182adc54cbf5c002b061a6669db7e98a981"
+    "gitHead": "0ecc9bdf1688d237242e998f5c23e4355ee0586d"
 }

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.70.0";
-export const BUILD_VERSION = "2.88.0";
+export const PKG_VERSION = "2.74.0";
+export const BUILD_VERSION = "2.95.0";

package/src/graph2/dataGraph.ts

@@ -4,7 +4,7 @@ import { compare2 } from "@hpcc-js/util";
 import { Graph2 } from "./graph";
 import { IEdge, IHierarchy, ISubgraph, IVertex } from "./layouts/placeholders";
 
-function toJsonObj(row, columns) {
+export function toJsonObj(row, columns) {
     const retVal = {};
     columns.forEach((c, i) => retVal[c] = row[i]);
     return retVal;
@@ -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

@@ -119,10 +119,10 @@ export class Graph2 extends SVGZoomWidget {
 
                     const selection = context.selection();
                     const isSelected = context.selected(d.props, selection as IVertex[]);
-                    if(isSelected) {
+                    if (isSelected) {
                         selection
-                            .filter(v=>v.id !== d.props.id)
-                            .forEach(v=>{
+                            .filter(v => v.id !== d.props.id)
+                            .forEach(v => {
                                 const n = context._graphData.vertex(v.id);
                                 dragStart(n);
                             });
@@ -141,11 +141,11 @@ export class Graph2 extends SVGZoomWidget {
                     context.moveVertexPlaceholder(d, false, true);
                     const selection = context.selection();
                     const isSelected = context.selected(d.props, selection as IVertex[]);
-                    
-                    if(isSelected) {
+
+                    if (isSelected) {
                         selection
-                            .filter(v=>v.id !== d.props.id)
-                            .forEach(v=>{
+                            .filter(v => v.id !== d.props.id)
+                            .forEach(v => {
                                 const n = context._graphData.vertex(v.id);
                                 dragTick(n, d);
                                 context.moveVertexPlaceholder(n, false, true);
@@ -166,20 +166,20 @@ export class Graph2 extends SVGZoomWidget {
 
                     const selection = context.selection();
                     const isSelected = context.selected(d.props, selection as IVertex[]);
-                    if(isSelected) {
+                    if (isSelected) {
                         selection
-                            .filter(v=>v.id !== d.props.id)
-                            .forEach(v=>{
+                            .filter(v => v.id !== d.props.id)
+                            .forEach(v => {
                                 const n = context._graphData.vertex(v.id);
                                 dragEnd(n);
                             });
                     } else if (context.dragSingleNeighbors()) {
                         context._graphData.singleNeighbors(d.id).forEach(dragEnd);
                     }
-                    
+
                     d3Select(this).classed("grabbed", false);
                 }
-                if(doClick) {
+                if (doClick) {
                     context._selection.click({
                         _id: d.id,
                         element: () => d.element
@@ -188,13 +188,13 @@ export class Graph2 extends SVGZoomWidget {
                     const selected = d.element.classed("selected");
                     context.vertex_click(d.props.origData || d.props, "", selected);
                     const doClickTime = Date.now();
-                    if(doClickTime - context._prevDoClickTime < context.doubleClickMaxDelay()){
+                    if (doClickTime - context._prevDoClickTime < context.doubleClickMaxDelay()) {
                         context.vertex_dblclick(d.props.origData || d.props, "", selected);
                     }
                     context._prevDoClickTime = doClickTime;
                 }
             })
-            .filter(()=>true)
+            .filter(() => true)
             ;
         this.zoomToFitLimit(1);
     }
@@ -270,7 +270,7 @@ export class Graph2 extends SVGZoomWidget {
     }
 
     selected(vertex: IVertex, _?: Array<IVertex>): boolean {
-        return (_ || this.selection()).some(n=>n.id === vertex.id);
+        return (_ || this.selection()).some(n => n.id === vertex.id);
     }
 
     selection(_: Array<IVertex | ISubgraph | IEdge>): this;
@@ -293,6 +293,7 @@ export class Graph2 extends SVGZoomWidget {
 
     resetLayout() {
         delete this._prevLayout;
+        return this;
     }
 
     layoutRunning() {
@@ -534,11 +535,11 @@ export class Graph2 extends SVGZoomWidget {
         if (sp.element) {
             //  TODO:  any should not be needed (tsc issue?)
             (transition ? sp.element.transition() as any : sp.element)
-            .attr("transform", `translate(${x} ${y})`)
-            .each(function (d) {
-                render(Subgraph, { ...d.props, width, height }, this);
-            })
-            ;
+                .attr("transform", `translate(${x} ${y})`)
+                .each(function (d) {
+                    render(Subgraph, { ...d.props, width, height }, this);
+                })
+                ;
         }
         return this;
     }
@@ -548,9 +549,9 @@ export class Graph2 extends SVGZoomWidget {
         if (ep.elementPath) {
             //  TODO:  any should not be needed (tsc issue?)
             (transition ? ep.elementPath.transition() as any : ep.elementPath)
-            .attr("d", edgeLayout.path)
-            .attr("stroke-dasharray", d => d.props.strokeDasharray)
-            ;
+                .attr("d", edgeLayout.path)
+                .attr("stroke-dasharray", d => d.props.strokeDasharray)
+                ;
         }
 
         if (ep.elementText) {
@@ -567,7 +568,7 @@ export class Graph2 extends SVGZoomWidget {
                         .text(d => d),
                     exit => exit.remove()
                 )
-            ;
+                ;
             //  TODO:  any should not be needed (tsc issue?)
             (transition ? ep.elementText.transition() as any : ep.elementText)
                 .attr("transform", `translate(${edgeLayout.labelPos[0]} ${edgeLayout.labelPos[1]})`)
@@ -700,7 +701,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;
@@ -808,9 +811,9 @@ export class Graph2 extends SVGZoomWidget {
         return this;
     }
 
-    calcProps(isCentroid: boolean, props){
-        if(!props.icon)props.icon={};
-        if(isCentroid) {
+    calcProps(isCentroid: boolean, props) {
+        if (!props.icon) props.icon = {};
+        if (isCentroid) {
             props.textHeight = props.textHeight ? props.textHeight : this.centroidTextHeight() * this.centroidScale();
             props.textPadding = props.textPadding ? props.textPadding : this.centroidTextPadding() * this.centroidScale();
             props.textFontFamily = props.textFontFamily ? props.textFontFamily : this.centroidLabelFontFamily();
@@ -832,7 +835,7 @@ export class Graph2 extends SVGZoomWidget {
         const fontSize = props.icon.height - props.icon.padding;
         const rect = this.textRect(text, fontFamily, fontSize);
 
-        props.icon.yOffset = -(rect.top - (fontSize/2)) - (rect.height/2) + (props.icon.padding > 0 ? fontSize/props.icon.padding/2 : 0);
+        props.icon.yOffset = -(rect.top - (fontSize / 2)) - (rect.height / 2) + (props.icon.padding > 0 ? fontSize / props.icon.padding / 2 : 0);
         return props;
     }
 
@@ -943,7 +946,7 @@ export class Graph2 extends SVGZoomWidget {
                 };
             case "Tree":
             case "Dendrogram":
-                return { rankdir: "LR" };
+                return { rankdir: this.treeRankDirection() };
             case "DOT":
             case "Neato":
             case "FDP":
@@ -1254,6 +1257,9 @@ export interface Graph2 {
     forceDirectedMaxDistance(): number;
     forceDirectedMaxDistance(_: number): this;
 
+    treeRankDirection(): "TB" | "LR";
+    treeRankDirection(_: "TB" | "LR"): this;
+
     edgeColor(): string;
     edgeColor(_: string): this;
     edgeStrokeWidth(): number;
@@ -1336,6 +1342,8 @@ Graph2.prototype.publish("forceDirectedForceStrength", 0, "number", "Strength of
 Graph2.prototype.publish("forceDirectedMinDistance", 1, "number", "Min distance between nodes", null, { disable: (w: Graph2) => w.layout().indexOf("ForceDirected") !== 0 });
 Graph2.prototype.publish("forceDirectedMaxDistance", Infinity, "number", "Max distance between nodes", null, { disable: (w: Graph2) => w.layout().indexOf("ForceDirected") !== 0 });
 
+Graph2.prototype.publish("treeRankDirection", "LR", "set", "Direction for Rank Nodes", ["TB", "LR"], { disable: (w: Graph2) => w.layout() !== "Tree" && w.layout() !== "Dendrogram" });
+
 Graph2.prototype.publish("wasmFolder", null, "string", "WASM Folder", null, { optional: true, disable: (w: Graph2) => ["DOT", "Neato", "FDP", "TwoPI", "Circo"].indexOf(w.layout()) < 0 });
 
 const _origScale = Graph2.prototype.scale;

package/src/graph2/index.ts

@@ -1,2 +1,3 @@
 export * from "./graph";
 export * from "./dataGraph";
+export * from "./sankeyGraph";

package/src/graph2/layouts/graphviz.ts

@@ -1,10 +1,18 @@
+import { curveBasis as d3CurveBasis, line as d3Line } from "d3-shape";
 import { Cluster, graphviz as gvWorker, Node } from "./graphvizWorker";
-import { Layout } from "./layout";
+import { Layout, Point } from "./layout";
+import { EdgePlaceholder } from "./placeholders";
 
 declare const window: any;
 
 type Engine = "circo" | "dot" | "fdp" | "neato" | "osage" | "patchwork" | "twopi";
 
+const lineBasis = d3Line<Point>()
+    .x(d => d[0])
+    .y(d => d[1])
+    .curve(d3CurveBasis)
+    ;
+
 export class Graphviz extends Layout {
 
     _engine: Engine;
@@ -84,4 +92,28 @@ export class Graphviz extends Layout {
             return this;
         });
     }
+
+    edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
+        let points = [];
+        let hasNaN = false;
+        if (ep.points) {
+            points = ep.points.map(p => {
+                const x = this._graph.project(p[0], false);
+                const y = this._graph.project(p[1], false);
+                if (isNaN(x) || isNaN(y)) {
+                    hasNaN = true;
+                }
+                return [x, y];
+            });
+        }
+        if (hasNaN || points.length < 2) {
+            return super.edgePath(ep, curveDepth);
+        }
+        return {
+            path: lineBasis(points),
+            labelPos: this.center(points)
+        };
+    }
+
 }
+

package/src/graph2/layouts/placeholders.ts

@@ -19,6 +19,7 @@ export interface IEdge extends Edge {
     source: IVertex;
     target: IVertex;
     label?: string;
+    color?: string;
     fontFamily?: string;
     origData?: any;
 }

package/src/graph2/sankeyGraph.css

@@ -0,0 +1,45 @@
+.graph_SankeyGraph .node rect {
+  cursor: move;
+  fill-opacity: .9;
+  shape-rendering: crispEdges;
+  stroke: darkgray;
+}
+
+.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;
+}