@fluentui/react-charting 5.19.24 → 5.19.26

package/lib/components/SankeyChart/SankeyChart.base.js

@@ -1,7 +1,7 @@
 import { __assign, __extends } from "tslib";
 import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
-import { classNamesFunction, getId, getRTL, memoizeFunction } from '@fluentui/react/lib/Utilities';
+import { classNamesFunction, getId, getRTL, memoizeFunction, } from '@fluentui/react/lib/Utilities';
 import { sum as d3Sum } from 'd3-array';
 import { sankey as d3Sankey, sankeyJustify, sankeyRight } from 'd3-sankey';
 import { select, selectAll } from 'd3-selection';
@@ -267,6 +267,176 @@ export function preRenderLayout(margins, containerWidth, containerHeight, isRtl)
         .nodeAlign(isRtl ? sankeyRight : sankeyJustify);
     return { sankey: sankey, height: height, width: width };
 }
+var elipsis = '...';
+/**
+ * This is used to assign node fillcolors and borderColor cyclically when the user doesnt
+ * provide color to  individual node.
+ */
+function assignNodeColors(nodes, colorsForNodes, borderColorsForNodes) {
+    var colors;
+    var borders;
+    if (colorsForNodes && borderColorsForNodes) {
+        colors = colorsForNodes;
+        borders = borderColorsForNodes;
+    }
+    else {
+        colors = DEFAULT_NODE_COLORS.map(function (color) { return color.fillColor; });
+        borders = DEFAULT_NODE_COLORS.map(function (color) { return color.borderColor; });
+    }
+    var currentIndex = 0;
+    nodes.forEach(function (node) {
+        if (!node.color && !node.borderColor) {
+            node.color = colors[currentIndex];
+            node.borderColor = borders[currentIndex];
+        }
+        else if (node.color && !node.borderColor) {
+            node.borderColor = '#757575';
+        }
+        else if (node.borderColor && !node.color) {
+            node.color = '#F5F5F5';
+        }
+        currentIndex = (currentIndex + 1) % colors.length;
+    });
+}
+/**
+ * Takes in the display name for the node and potentially returns a trimmed version of the name.
+ * @param tspan the `tspan` element to use for text visual length measurement
+ * @param text is the text which we will potentially truncate
+ * @param rectangleWidth is the width of the rectangle which will contain the text
+ * @param padding is the space we need to leave between the rect lines and other text
+ * @returns the name to show on the node which might be the truncated `text` if the `text` is too long
+ */
+function truncateText(tspan, text, rectangleWidth, padding) {
+    // NOTE: This method is the most-expensive in terms of rerendering components.
+    var textLengthForNodeName = rectangleWidth - padding; // This can likely be computed once and passed in.
+    // The following `select` statement injects a `tempText` element into the DOM. This injection
+    // (and subsequent removal) is causing a layout recalculation. This is a performance issue.
+    // Note that this code will always inject a `tempText` element, but doesn't always remove it. This is a bug.
+    if (fitsWithinNode(tspan, text, textLengthForNodeName)) {
+        return text;
+    }
+    // Computing the size of elipsis is performed with each node. This should be computed once and used everywhere.
+    // TODO: Compute the size of the elipsis once and use it everywhere.
+    var elipsisLength = computeElipsisLength(tspan);
+    var line = '';
+    // Calculate how much of the original text to show.
+    // TODO: The folllowing is O(n). We could use a binary search to make this faster: O(log(n)).
+    for (var i = 0; i < text.length; i++) {
+        line += text[i];
+        tspan.text(line);
+        var currentNode = tspan.node();
+        if (currentNode !== null) {
+            var w = currentNode.getComputedTextLength();
+            if (w >= textLengthForNodeName - elipsisLength) {
+                line = line.slice(0, -1);
+                line += elipsis;
+                break;
+            }
+        }
+    }
+    tspan.text(null);
+    return line;
+}
+function fitsWithinNode(tspan, text, textLengthForNodeName) {
+    var measurement = measureText(tspan, text);
+    if (measurement === undefined) {
+        return false;
+    }
+    return measurement <= textLengthForNodeName;
+}
+function measureText(tspan, text) {
+    var _a;
+    try {
+        tspan.text(text);
+        return (_a = tspan.node()) === null || _a === void 0 ? void 0 : _a.getComputedTextLength();
+    }
+    finally {
+        tspan.text(null);
+    }
+}
+function computeElipsisLength(tspan) {
+    var measurement = measureText(tspan, elipsis);
+    return measurement === undefined ? 0 : measurement;
+}
+function computeNodeAttributes(nodes) {
+    var result = {};
+    var weightSpan = select('.nodeName').append('text').attr('class', 'tempText').append('tspan').text(null);
+    var nameSpan = select('.nodeName')
+        .append('text')
+        .attr('class', 'tempText')
+        .attr('font-size', '10')
+        .append('tspan')
+        .text(null);
+    nodes.forEach(function (singleNode) {
+        var height = Math.max(singleNode.y1 - singleNode.y0, 0);
+        var padding = 8;
+        var textLengthForNodeWeight = 0;
+        // If the nodeWeight is in the same line as node description an extra padding
+        // of 6 px is required between node description and node weight.
+        if (height < MIN_HEIGHT_FOR_DOUBLINE_TYPE) {
+            padding = padding + 6;
+            // The following `select` statement injects a `tempText` element into the DOM. This injection
+            // (and subsequent removal) is causing a layout recalculation. This is a performance issue.
+            var measurement = measureText(weightSpan, singleNode.actualValue);
+            if (measurement !== undefined) {
+                textLengthForNodeWeight = measurement;
+                padding = padding + textLengthForNodeWeight;
+            }
+        }
+        // Since the total width of the node is 124 and we are giving margin of 8px from the left .
+        // So the actual value on which it will be truncated is 124-8=116.
+        var truncatedname = truncateText(nameSpan, singleNode.name, 116, padding);
+        var isTruncated = truncatedname.slice(-3) === elipsis;
+        result[singleNode.nodeId] = {
+            reactId: getId('nodeBar'),
+            gElementId: getId('nodeGElement'),
+            name: truncatedname,
+            trimmed: isTruncated,
+            height: height,
+            weightOffset: textLengthForNodeWeight,
+        };
+    });
+    selectAll('.tempText').remove();
+    return result;
+}
+function computeLinkAttributes(links) {
+    var result = {};
+    links.forEach(function (link) {
+        var sourceId = idFromNumberOrSNode(link.source);
+        var sourceToTarget = result[sourceId];
+        if (!sourceToTarget) {
+            sourceToTarget = {};
+            result[sourceId] = sourceToTarget;
+        }
+        sourceToTarget[idFromNumberOrSNode(link.target)] = { reactId: getId('link') };
+    });
+    return result;
+}
+var linkToDataPoints = function (d) {
+    var halfWidth = d.width * 0.5;
+    var y0 = d.y0;
+    var y1 = d.y1;
+    return [
+        { x: d.source.x1, y0: y0 + halfWidth, y1: y0 - halfWidth },
+        { x: d.target.x0, y0: y1 + halfWidth, y1: y1 - halfWidth },
+    ];
+};
+var linkArea = d3Area()
+    .x(function (p) { return p.x; })
+    .y0(function (p) { return p.y0; })
+    .y1(function (p) { return p.y1; })
+    .curve(d3CurveBasis);
+function nodeTextColor(state, singleNode) {
+    return !(!state.selectedState ||
+        (state.selectedNodes.has(singleNode.index) && state.selectedNode) ||
+        !state.selectedNode)
+        ? DEFAULT_TEXT_COLOR
+        : NON_SELECTED_TEXT_COLOR;
+}
+// NOTE: To start employing React.useMemo properly, we need to convert this code from a React.Component
+// to a function component. This will require a significant refactor of the code in this file.
+// https://stackoverflow.com/questions/60223362/fast-way-to-convert-react-class-component-to-functional-component
+// I am concerned that doing so would break this contract, making it difficult for consuming code.
 var SankeyChartBase = /** @class */ (function (_super) {
     __extends(SankeyChartBase, _super);
     function SankeyChartBase(props) {
@@ -287,11 +457,14 @@ var SankeyChartBase = /** @class */ (function (_super) {
             if (!state.selectedState) {
                 return singleNode.color;
             }
-            else if (state.selectedState && state.selectedNodes.has(singleNode.index) && state.selectedNode) {
-                return state.selectedNode.color;
-            }
-            else if (state.selectedState && !state.selectedNode) {
-                return singleNode.color;
+            else {
+                var selectedNode = state.selectedNode;
+                if (selectedNode && state.selectedNodes.has(singleNode.index)) {
+                    return selectedNode.color;
+                }
+                else if (!selectedNode) {
+                    return singleNode.color;
+                }
             }
         };
         _this._fillNodeBorder = function (singleNode) {
@@ -299,13 +472,13 @@ var SankeyChartBase = /** @class */ (function (_super) {
             if (!state.selectedState) {
                 return singleNode.borderColor;
             }
-            else if (state.selectedState && state.selectedNodes.has(singleNode.index) && state.selectedNode) {
-                return state.selectedNode.borderColor;
-            }
-            else if (state.selectedState && state.selectedNodes.has(singleNode.index)) {
+            else {
+                if (state.selectedNodes.has(singleNode.index)) {
+                    var selectedNode = state.selectedNode;
+                    return selectedNode ? selectedNode.borderColor : singleNode.borderColor;
+                }
                 return singleNode.borderColor;
             }
-            return singleNode.borderColor;
         };
         _this.state = {
             containerHeight: 468,
@@ -318,12 +491,40 @@ var SankeyChartBase = /** @class */ (function (_super) {
         };
         _this._calloutId = getId('callout');
         _this._linkId = getId('link');
+        _this._chartId = getId('sankeyChart');
+        _this._emptyChartId = getId('_SankeyChart_empty');
+        _this._labelTooltipId = getId('tooltip');
         _this._margins = { top: 36, right: 48, bottom: 32, left: 48 };
-        _this._normalizeData = memoizeFunction(function (data, containerWidth, containerHeight) {
-            return _this._normalizeSankeyData(data, containerWidth, containerHeight);
+        // We memo-ize creation so that we only create a new object when any of the fields change.
+        _this._computeClassNamesProps = memoizeFunction(function (theme, pathColor, className, containerWidth, containerHeight) { return ({
+            theme: theme,
+            width: containerWidth,
+            height: containerHeight,
+            pathColor: pathColor,
+            className: className,
+        }); });
+        // `getClassNames` is memoized underneath, so it only recomputes when the `styles` or `classNamesProps` change.
+        // We memoize `classNamesProps` so that we only create new class names when absolutely necessary,
+        // and so that we can memoize the `_createNodes` method.
+        _this._computeClassNames = memoizeFunction(function (styles, classNamesProps) { return getClassNames(styles, classNamesProps); });
+        _this._normalizeData = memoizeFunction(function (data, containerWidth, containerHeight, colorsForNodes, borderColorsForNodes) { return _this._normalizeSankeyData(data, containerWidth, containerHeight, colorsForNodes, borderColorsForNodes); });
+        _this._fetchTooltip = memoizeFunction(function (classNames) {
+            return _this._labelTooltipDiv(classNames);
         });
-        _this._emptyChartId = getId('_SankeyChart_empty');
+        // NOTE: Memoizing the `_createNodes` and `_createLinks` methods breaks the hoverability of the chart
+        // because the nodes are currently created differently based on the layout information.
+        _this._nodeAttributes = memoizeFunction(function (nodes) { return computeNodeAttributes(nodes); });
+        _this._fetchNodes = function (classNames, nodes, nodeAttributes, tooltipDiv) { return _this._createNodes(classNames, nodes, nodeAttributes, tooltipDiv); };
+        _this._linkAttributes = memoizeFunction(function (links) { return computeLinkAttributes(links); });
+        _this._fetchLinks = function (links, linkAttributes) {
+            return _this._createLinks(links, linkAttributes);
+        };
         return _this;
+        // Our shorter path to performance is to pre-compute the truncated labels of each node because
+        // that should not change based on the position of the mouse. This is a shorter path becase the code which
+        // computes the truncated labels creates and destroys a `tempText` element in the DOM. This is causing a
+        // reflow and repaint of the entire chart. This is a performance issue, and so computing the truncated labels
+        // once will help to mitigate this issue.
     }
     SankeyChartBase.prototype.componentDidMount = function () {
         this._fitParentContainer();
@@ -339,22 +540,22 @@ var SankeyChartBase = /** @class */ (function (_super) {
     SankeyChartBase.prototype.render = function () {
         var _this = this;
         if (!this._isChartEmpty()) {
-            var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles, pathColor = _a.pathColor;
+            var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles, pathColor = _a.pathColor, colorsForNodes = _a.colorsForNodes, borderColorsForNodes = _a.borderColorsForNodes;
             var state = this.state;
-            var classNames = getClassNames(styles, {
-                theme: theme,
-                width: state.containerWidth,
-                height: state.containerHeight,
-                pathColor: pathColor,
-                className: className,
-            });
-            var _b = this._normalizeData(this.props.data.SankeyChartData, state.containerWidth, state.containerHeight), sankeyChartData = _b.data, width = _b.width, height = _b.height;
-            // NEXT: Move the following into _normalizeSankeyData to see if we can cache computation of
-            // colors, nodes, and links.
-            var dataNodes = sankeyChartData.nodes;
-            this._assignNodeColors(dataNodes); // This can probably safely move.
-            var nodeData = this._createNodes(classNames, dataNodes);
-            var linkData = this._createLinks(sankeyChartData.links);
+            var classNamesProps = this._computeClassNamesProps(theme, pathColor, className, state.containerWidth, state.containerHeight);
+            var classNames = this._computeClassNames(styles, classNamesProps);
+            // Compute the position of each node and link
+            var _b = this._normalizeData(this.props.data.SankeyChartData, state.containerWidth, state.containerHeight, colorsForNodes, borderColorsForNodes), nodes = _b.nodes, links = _b.links, width = _b.width, height = _b.height;
+            // NOTE: I don't love this approach to caching the "select" result. Is it still valid from render-to-render?
+            // although local testing seems to indicate so, I do not trust that React will always support that instance.
+            // It might be better to perform this `fetch` within the `_showTooltip` and `_hideTooltip` methods.
+            var tooltipDiv = this._fetchTooltip(classNames);
+            // Pre-compute some important attributes about nodes, specifically text
+            var nodeAttributes = this._nodeAttributes(nodes);
+            // Build the nodes and links as rendered in the UX.
+            var nodeData = this._fetchNodes(classNames, nodes, nodeAttributes, tooltipDiv);
+            var linkAttributes = this._linkAttributes(links);
+            var linkData = this._fetchLinks(links, linkAttributes);
             var calloutProps = {
                 isCalloutVisible: state.isCalloutVisible,
                 directionalHint: DirectionalHint.topAutoEdge,
@@ -372,7 +573,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
             };
             return (React.createElement("div", { className: classNames.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); }, onMouseLeave: this._onCloseCallout },
                 React.createElement(FocusZone, { direction: FocusZoneDirection.bidirectional, isCircularNavigation: true, handleTabKey: FocusZoneTabbableElements.all },
-                    React.createElement("svg", { width: width, height: height, id: getId('sankeyChart') },
+                    React.createElement("svg", { width: width, height: height, id: this._chartId },
                         React.createElement("g", { className: classNames.links, strokeOpacity: 1 }, linkData),
                         React.createElement("g", { className: classNames.nodes }, nodeData),
                         calloutProps.isCalloutVisible && (React.createElement(Callout, __assign({}, calloutProps),
@@ -380,11 +581,19 @@ var SankeyChartBase = /** @class */ (function (_super) {
         }
         return (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
     };
-    SankeyChartBase.prototype._normalizeSankeyData = function (data, containerWidth, containerHeight) {
+    SankeyChartBase.prototype._normalizeSankeyData = function (data, containerWidth, containerHeight, colorsForNodes, borderColorsForNodes) {
         var _a = preRenderLayout(this._margins, containerWidth, containerHeight, this._isRtl), sankey = _a.sankey, height = _a.height, width = _a.width;
         // Clone the data before mutating it (via the SankeyLayoutGenerator) so that we don't mutate the original data.
         var transformed = duplicateData(data);
         sankey(transformed);
+        // NOTE: After the prior line, `transformed` is now a more-complex object than the incoming `ISankeyChartData`.
+        // `transformed` should be cast to a more-specific type. This is a breaking change because we would be eliminating
+        // fields from `ISankeyChartData` and putting those fields on a now-local type. But doing so makes it clearer what
+        // the caller needs to supply and why. For example, the `actualValue` and `layer` fields of `ISNodeExtra` should
+        // both be moved. Similarly for `unnormalizedValue` in `ISLinkExtra`.
+        // `SankeyNodeMinimal` and `SankeyLinkMinimal` are both the types after `sankey(transformed)`, but have almost no
+        // bearing on the data before `sankey(transformed)` (which is basically nodes with ids and names along with links
+        // with source index, target index, and value).
         var nodesInColumn = groupNodesByColumn(transformed);
         // Keep track of the original values of the links and their acccumulated values in the nodes
         // Setting these in external objects so they cannot be mutated by other code.
@@ -401,99 +610,75 @@ var SankeyChartBase = /** @class */ (function (_super) {
         // Without the second call, the links are not hoverable.
         sankey(transformed);
         populateNodeActualValue(transformed, nodeValues, linkValues);
+        assignNodeColors(transformed.nodes, colorsForNodes, borderColorsForNodes);
         return {
             width: width,
             height: height,
-            data: transformed,
+            nodes: transformed.nodes,
+            links: transformed.links,
         };
     };
-    SankeyChartBase.prototype._createLinks = function (dataLinks) {
+    SankeyChartBase.prototype._labelTooltipDiv = function (classNames) {
+        // find the tooltip div. If it doesn't exist, then create it.
+        var tooltipDiv = select("#".concat(this._labelTooltipId));
+        if (tooltipDiv.empty()) {
+            tooltipDiv = select('body')
+                .append('div')
+                .attr('id', this._labelTooltipId)
+                .attr('class', classNames.toolTip)
+                .style('opacity', 0);
+        }
+        // If the div exists, then `classNames` has changed; update the `class` on the `div`.
+        tooltipDiv.attr('class', classNames.toolTip);
+        return tooltipDiv;
+    };
+    SankeyChartBase.prototype._createLinks = function (dataLinks, linkAttributes) {
         var _this = this;
-        var links = [];
         if (dataLinks) {
             var linkId_1 = this._linkId;
-            dataLinks.forEach(function (singleLink, index) {
+            return dataLinks.map(function (singleLink, index) {
                 var onMouseOut = function () {
                     _this._onStreamLeave(singleLink);
                 };
+                var reactId = linkValue(linkAttributes, singleLink).reactId;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var data = function (d) {
-                    return [
-                        { x: d.source.x1, y0: d.y0 + d.width / 2, y1: d.y0 - d.width / 2 },
-                        { x: d.target.x0, y0: d.y1 + d.width / 2, y1: d.y1 - d.width / 2 },
-                    ];
-                };
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var dataPoints = data(singleLink);
-                var linkArea = d3Area()
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    .x(function (p) { return p.x; })
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    .y0(function (p) { return p.y0; })
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    .y1(function (p) { return p.y1; })
-                    .curve(d3CurveBasis);
-                var gradientUrl = "url(#gradient-".concat(linkId_1, "-").concat(index, ")");
-                var link = (React.createElement("g", { key: "".concat(linkId_1, "-").concat(index) },
+                var dataPoints = linkToDataPoints(singleLink);
+                var key = "".concat(linkId_1, "-").concat(index);
+                var gradientId = "gradient-".concat(key);
+                var gradientUrl = "url(#".concat(gradientId, ")");
+                var source = singleLink.source;
+                var target = singleLink.target;
+                // TODO: localize the aria-label string
+                return (React.createElement("g", { key: key },
                     React.createElement("defs", null,
-                        React.createElement("linearGradient", { id: "gradient-".concat(linkId_1, "-").concat(index), x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
-                            React.createElement("stop", { offset: "0", stopColor: singleLink.source.color }),
-                            React.createElement("stop", { offset: "100%", stopColor: singleLink.target.color }))),
-                    React.createElement("path", { d: linkArea(dataPoints), id: getId('link'), fill: _this._fillStreamColors(singleLink, gradientUrl), stroke: _this._fillStreamBorder(singleLink, gradientUrl), strokeWidth: "2", strokeOpacity: _this._getOpacityStreamBorder(singleLink), onMouseOver: _this._onStreamHover.bind(_this, singleLink), onMouseOut: onMouseOut, onFocus: _this._onFocusLink.bind(_this, singleLink), onBlur: _this._onBlur, fillOpacity: _this._getOpacityStream(singleLink), "data-is-focusable": true, "aria-label": "link from ".concat(singleLink.source.name, " to ").concat(singleLink.target.name, " with weight ").concat(singleLink.unnormalizedValue), role: "img" })));
-                links.push(link);
+                        React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
+                            React.createElement("stop", { offset: "0", stopColor: source.color }),
+                            React.createElement("stop", { offset: "100%", stopColor: target.color }))),
+                    React.createElement("path", { d: linkArea(dataPoints), id: reactId, fill: _this._fillStreamColors(singleLink, gradientUrl), stroke: _this._fillStreamBorder(singleLink, gradientUrl), strokeWidth: "2", strokeOpacity: _this._getOpacityStreamBorder(singleLink), onMouseOver: _this._onStreamHover.bind(_this, singleLink), onMouseOut: onMouseOut, onFocus: _this._onFocusLink.bind(_this, singleLink), onBlur: _this._onBlur, fillOpacity: _this._getOpacityStream(singleLink), "data-is-focusable": true, "aria-label": "link from ".concat(source.name, " to ").concat(target.name, " with weight ").concat(singleLink.unnormalizedValue), role: "img" })));
             });
         }
-        return links;
+        return [];
     };
-    SankeyChartBase.prototype._createNodes = function (classNames, dataNodes) {
+    SankeyChartBase.prototype._createNodes = function (classNames, dataNodes, nodeAttributes, tooltipDiv) {
         var _this = this;
-        var nodes = [];
         if (dataNodes) {
             var state_1 = this.state;
-            dataNodes.forEach(function (singleNode, index) {
+            var textAnchor_1 = this._isRtl ? 'end' : 'start';
+            return dataNodes.map(function (singleNode, index) {
                 var onMouseOut = function () {
                     _this._onLeave(singleNode);
                 };
-                var height = singleNode.y1 - singleNode.y0 > 0 ? singleNode.y1 - singleNode.y0 : 0;
-                var padding = 8;
-                var textLengthForNodeWeight = 0;
-                // If the nodeWeight is in the same line as node description an extra padding
-                // of 6 px is required between node description and node weight.
-                if (height < MIN_HEIGHT_FOR_DOUBLINE_TYPE) {
-                    padding = padding + 6;
-                    var tspan = select('.nodeName').append('text').attr('class', 'tempText').append('tspan').text(null);
-                    tspan.text(singleNode.actualValue);
-                    if (tspan.node() !== null) {
-                        textLengthForNodeWeight = tspan.node().getComputedTextLength();
-                        padding = padding + textLengthForNodeWeight;
-                    }
-                    tspan.text(null);
-                    selectAll('.tempText').remove();
-                }
-                // Since the total width of the node is 124 and we are giving margin of 8px from the left .
-                //So the actual value on which it will be truncated is 124-8=116.
-                var truncatedname = _this._truncateText(singleNode.name, 116, padding);
-                var isTruncated = truncatedname.slice(-3) === '...';
-                var id = getId('tooltip');
-                var div = select('body').append('div').attr('id', id).attr('class', classNames.toolTip).style('opacity', 0);
-                var nodeId = getId('nodeBar');
-                var node = (React.createElement("g", { key: index, id: getId('nodeGElement') },
-                    React.createElement("rect", { x: singleNode.x0, y: singleNode.y0, height: height, width: singleNode.x1 - singleNode.x0, fill: _this._fillNodeColors(singleNode), id: nodeId, onMouseOver: _this._onHover.bind(_this, singleNode), onMouseOut: onMouseOut, onFocus: _this._onCloseCallout.bind(_this), stroke: _this._fillNodeBorder(singleNode), strokeWidth: "2", opacity: "1", "data-is-focusable": true, "aria-label": "node ".concat(singleNode.name, " with weight ").concat(singleNode.actualValue), role: "img" }),
-                    singleNode.y1 - singleNode.y0 > MIN_HEIGHT_FOR_TYPE && (React.createElement("g", { className: classNames.nodeTextContainer },
+                var _a = nodeAttributes[singleNode.nodeId], nodeId = _a.reactId, gElementId = _a.gElementId, height = _a.height, isTruncated = _a.trimmed, truncatedName = _a.name, textLengthForNodeWeight = _a.weightOffset;
+                var tooTall = height > MIN_HEIGHT_FOR_DOUBLINE_TYPE;
+                var name = singleNode.name, actualValue = singleNode.actualValue, x0 = singleNode.x0, x1 = singleNode.x1, y0 = singleNode.y0;
+                var textColor = nodeTextColor(state_1, singleNode);
+                return (React.createElement("g", { key: index, id: gElementId },
+                    React.createElement("rect", { x: x0, y: y0, height: height, width: x1 - x0, fill: _this._fillNodeColors(singleNode), id: nodeId, onMouseOver: _this._onHover.bind(_this, singleNode), onMouseOut: onMouseOut, onFocus: _this._onCloseCallout.bind(_this), stroke: _this._fillNodeBorder(singleNode), strokeWidth: "2", opacity: "1", "data-is-focusable": true, "aria-label": "node ".concat(name, " with weight ").concat(actualValue), role: "img" }),
+                    height > MIN_HEIGHT_FOR_TYPE && (React.createElement("g", { className: classNames.nodeTextContainer },
                         React.createElement("g", { className: "nodeName" },
-                            React.createElement("text", { id: "".concat(nodeId, "-name"), x: singleNode.x0, y: singleNode.y0, dy: '1.2em', dx: '0.4em', textAnchor: _this._isRtl ? 'end' : 'start', fontWeight: "regular", "aria-hidden": "true", fill: !(!state_1.selectedState ||
-                                    (state_1.selectedState && state_1.selectedNodes.has(singleNode.index) && state_1.selectedNode) ||
-                                    (state_1.selectedState && !state_1.selectedNode))
-                                    ? DEFAULT_TEXT_COLOR
-                                    : NON_SELECTED_TEXT_COLOR, fontSize: 10, onMouseOver: _this._showTooltip.bind(_this, singleNode.name, isTruncated, div), onMouseOut: _this._hideTooltip.bind(_this, div) }, truncatedname)),
-                        React.createElement("text", { x: height > MIN_HEIGHT_FOR_DOUBLINE_TYPE ? singleNode.x0 : singleNode.x1 - textLengthForNodeWeight - 8, y: singleNode.y0, dy: height > MIN_HEIGHT_FOR_DOUBLINE_TYPE ? '2em' : '1em', dx: height > MIN_HEIGHT_FOR_DOUBLINE_TYPE ? '0.4em' : '0em', textAnchor: _this._isRtl ? 'end' : 'start', fontWeight: "bold", "aria-hidden": "true", fill: !(!state_1.selectedState ||
-                                (state_1.selectedState && state_1.selectedNodes.has(singleNode.index) && state_1.selectedNode) ||
-                                (state_1.selectedState && !state_1.selectedNode))
-                                ? DEFAULT_TEXT_COLOR
-                                : NON_SELECTED_TEXT_COLOR, fontSize: 14 }, singleNode.actualValue)))));
-                nodes.push(node);
+                            React.createElement("text", { id: "".concat(nodeId, "-name"), x: x0, y: y0, dy: '1.2em', dx: '0.4em', textAnchor: textAnchor_1, fontWeight: "regular", "aria-hidden": "true", fill: textColor, fontSize: 10, onMouseOver: _this._showTooltip.bind(_this, name, isTruncated, tooltipDiv), onMouseOut: _this._hideTooltip.bind(_this, tooltipDiv) }, truncatedName)),
+                        React.createElement("text", { x: tooTall ? x0 : x1 - textLengthForNodeWeight - 8, y: y0, dy: tooTall ? '2em' : '1em', dx: tooTall ? '0.4em' : '0em', textAnchor: textAnchor_1, fontWeight: "bold", "aria-hidden": "true", fill: textColor, fontSize: 14 }, actualValue)))));
             });
-            return nodes;
         }
     };
     SankeyChartBase.prototype._onLeave = function (singleNode) {
@@ -570,44 +755,11 @@ var SankeyChartBase = /** @class */ (function (_super) {
             descriptionMessage: 'from ' + singleLink.source.name, // TODO: Does this need to be localized?
         });
     };
-    /**
-     * This is used to assign node fillcolors and borderColor cyclically when the user doesnt
-     * provide color to  individual node.
-     */
-    SankeyChartBase.prototype._assignNodeColors = function (nodes) {
-        var colors;
-        var borders;
-        var _a = this.props, colorsForNodes = _a.colorsForNodes, borderColorsForNodes = _a.borderColorsForNodes;
-        if (colorsForNodes && borderColorsForNodes) {
-            colors = colorsForNodes;
-            borders = borderColorsForNodes;
-        }
-        else {
-            colors = DEFAULT_NODE_COLORS.map(function (color) { return color.fillColor; });
-            borders = DEFAULT_NODE_COLORS.map(function (color) { return color.borderColor; });
-        }
-        var currentIndex = 0;
-        nodes.forEach(function (node) {
-            if (!node.color && !node.borderColor) {
-                node.color = colors[currentIndex];
-                node.borderColor = borders[currentIndex];
-            }
-            else if (node.color && !node.borderColor) {
-                node.borderColor = '#757575';
-            }
-            else if (node.borderColor && !node.color) {
-                node.color = '#F5F5F5';
-            }
-            currentIndex = (currentIndex + 1) % colors.length;
-        });
-    };
     SankeyChartBase.prototype._fillStreamColors = function (singleLink, gradientUrl) {
         var state = this.state;
-        if (state.selectedState && state.selectedLinks.has(singleLink.index) && state.selectedNode) {
-            return state.selectedNode.color;
-        }
-        else if (state.selectedState && state.selectedLinks.has(singleLink.index)) {
-            return gradientUrl;
+        if (state.selectedState && state.selectedLinks.has(singleLink.index)) {
+            var selectedNode = state.selectedNode;
+            return selectedNode ? selectedNode.color : gradientUrl;
         }
     };
     SankeyChartBase.prototype._fillStreamBorder = function (singleLink, gradientUrl) {
@@ -615,13 +767,13 @@ var SankeyChartBase = /** @class */ (function (_super) {
         if (!state.selectedState) {
             return NON_SELECTED_NODE_AND_STREAM_COLOR;
         }
-        else if (state.selectedState && state.selectedLinks.has(singleLink.index) && state.selectedNode) {
-            return state.selectedNode.borderColor;
-        }
-        else if (state.selectedState && state.selectedLinks.has(singleLink.index)) {
-            return gradientUrl;
+        else {
+            if (state.selectedLinks.has(singleLink.index)) {
+                var selectedNode = state.selectedNode;
+                return selectedNode ? selectedNode.borderColor : gradientUrl;
+            }
+            return NON_SELECTED_NODE_AND_STREAM_COLOR;
         }
-        return NON_SELECTED_NODE_AND_STREAM_COLOR;
     };
     SankeyChartBase.prototype._getOpacityStream = function (singleLink) {
         var state = this.state;
@@ -629,7 +781,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
             if (!state.selectedLinks.has(singleLink.index)) {
                 return NON_SELECTED_OPACITY;
             }
-            else if (state.selectedLinks.has(singleLink.index) && !state.selectedNode) {
+            else if (!state.selectedNode) {
                 return SELECTED_STREAM_OPACITY;
             }
         }
@@ -659,49 +811,6 @@ var SankeyChartBase = /** @class */ (function (_super) {
             }
         });
     };
-    /**
-     * @param text is the text which we are trying to truncate
-     * @param rectangleWidth is the width of the rectangle which will contain the text
-     * @param padding is the space we need to leave between the rect lines and other text
-     * @param nodeWeight is the text if present needs to be accomodate in the same line as text.
-     * @returns the truncated text , if truncated given the above parameters.
-     */
-    SankeyChartBase.prototype._truncateText = function (text, rectangleWidth, padding) {
-        var textLengthForNodeName = rectangleWidth - padding;
-        var elipsisLength = 0;
-        var tspan = select('.nodeName')
-            .append('text')
-            .attr('class', 'tempText')
-            .attr('font-size', '10')
-            .append('tspan')
-            .text(null);
-        tspan.text(text);
-        if (tspan.node() !== null && tspan.node().getComputedTextLength() <= textLengthForNodeName) {
-            return text;
-        }
-        tspan.text(null);
-        tspan.text('...');
-        if (tspan.node() !== null) {
-            elipsisLength = tspan.node().getComputedTextLength();
-        }
-        tspan.text(null);
-        var line = '';
-        for (var i = 0; i < text.length; i++) {
-            line += text[i];
-            tspan.text(line);
-            if (tspan.node() !== null) {
-                var w = tspan.node().getComputedTextLength();
-                if (w >= textLengthForNodeName - elipsisLength) {
-                    line = line.slice(0, -1);
-                    line += '...';
-                    break;
-                }
-            }
-        }
-        tspan.text(null);
-        selectAll('.tempText').remove();
-        return line;
-    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     SankeyChartBase.prototype._showTooltip = function (text, checkTrcuncated, div, evt) {
         if (checkTrcuncated) {