@fluentui/react-charting 5.19.24 → 5.19.26

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

@@ -264,6 +264,176 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
         return { sankey: sankey, height: height, width: width };
     }
     exports.preRenderLayout = preRenderLayout;
+    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 = (0, d3_selection_1.select)('.nodeName').append('text').attr('class', 'tempText').append('tspan').text(null);
+        var nameSpan = (0, d3_selection_1.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: (0, Utilities_1.getId)('nodeBar'),
+                gElementId: (0, Utilities_1.getId)('nodeGElement'),
+                name: truncatedname,
+                trimmed: isTruncated,
+                height: height,
+                weightOffset: textLengthForNodeWeight,
+            };
+        });
+        (0, d3_selection_1.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: (0, Utilities_1.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 = (0, d3_shape_1.area)()
+        .x(function (p) { return p.x; })
+        .y0(function (p) { return p.y0; })
+        .y1(function (p) { return p.y1; })
+        .curve(d3_shape_1.curveBumpX);
+    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) {
         tslib_1.__extends(SankeyChartBase, _super);
         function SankeyChartBase(props) {
@@ -284,11 +454,14 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                 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) {
@@ -296,13 +469,13 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                 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,
@@ -315,12 +488,40 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
             };
             _this._calloutId = (0, Utilities_1.getId)('callout');
             _this._linkId = (0, Utilities_1.getId)('link');
+            _this._chartId = (0, Utilities_1.getId)('sankeyChart');
+            _this._emptyChartId = (0, Utilities_1.getId)('_SankeyChart_empty');
+            _this._labelTooltipId = (0, Utilities_1.getId)('tooltip');
             _this._margins = { top: 36, right: 48, bottom: 32, left: 48 };
-            _this._normalizeData = (0, Utilities_1.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 = (0, Utilities_1.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 = (0, Utilities_1.memoizeFunction)(function (styles, classNamesProps) { return getClassNames(styles, classNamesProps); });
+            _this._normalizeData = (0, Utilities_1.memoizeFunction)(function (data, containerWidth, containerHeight, colorsForNodes, borderColorsForNodes) { return _this._normalizeSankeyData(data, containerWidth, containerHeight, colorsForNodes, borderColorsForNodes); });
+            _this._fetchTooltip = (0, Utilities_1.memoizeFunction)(function (classNames) {
+                return _this._labelTooltipDiv(classNames);
             });
-            _this._emptyChartId = (0, Utilities_1.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 = (0, Utilities_1.memoizeFunction)(function (nodes) { return computeNodeAttributes(nodes); });
+            _this._fetchNodes = function (classNames, nodes, nodeAttributes, tooltipDiv) { return _this._createNodes(classNames, nodes, nodeAttributes, tooltipDiv); };
+            _this._linkAttributes = (0, Utilities_1.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();
@@ -336,22 +537,22 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
         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: Callout_1.DirectionalHint.topAutoEdge,
@@ -369,7 +570,7 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                 };
                 return (React.createElement("div", { className: classNames.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); }, onMouseLeave: this._onCloseCallout },
                     React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.bidirectional, isCircularNavigation: true, handleTabKey: react_focus_1.FocusZoneTabbableElements.all },
-                        React.createElement("svg", { width: width, height: height, id: (0, Utilities_1.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_1.Callout, tslib_1.__assign({}, calloutProps),
@@ -377,11 +578,19 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
             }
             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.
@@ -398,99 +607,75 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
             // 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 = (0, d3_selection_1.select)("#".concat(this._labelTooltipId));
+            if (tooltipDiv.empty()) {
+                tooltipDiv = (0, d3_selection_1.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 = (0, d3_shape_1.area)()
-                        // 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(d3_shape_1.curveBumpX);
-                    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: (0, Utilities_1.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 = (0, d3_selection_1.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);
-                        (0, d3_selection_1.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 = (0, Utilities_1.getId)('tooltip');
-                    var div = (0, d3_selection_1.select)('body').append('div').attr('id', id).attr('class', classNames.toolTip).style('opacity', 0);
-                    var nodeId = (0, Utilities_1.getId)('nodeBar');
-                    var node = (React.createElement("g", { key: index, id: (0, Utilities_1.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) {
@@ -567,44 +752,11 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                 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) {
@@ -612,13 +764,13 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
             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;
@@ -626,7 +778,7 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                 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;
                 }
             }
@@ -656,49 +808,6 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                 }
             });
         };
-        /**
-         * @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 = (0, d3_selection_1.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);
-            (0, d3_selection_1.selectAll)('.tempText').remove();
-            return line;
-        };
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         SankeyChartBase.prototype._showTooltip = function (text, checkTrcuncated, div, evt) {
             if (checkTrcuncated) {