tsichart-core 2.0.0 → 2.1.0

package/dist/index.js

@@ -132,7 +132,7 @@ const swimlaneLabelConstants = {
     swimLaneLabelHeightPadding: 8,
     labelLeftPadding: 28
 };
-const CharactersToEscapeForExactSearchInstance = ['"', '`', '\'', '!', '(', ')', '^', '[', '{', ':', ']', '}', '~', '/', '\\', '@', '#', '$', '%', '&', '*', ';', '=', '.', '_', '-', '<', '>', ',', '?'];
+const CharactersToEscapeForExactSearchInstance = ['"', '`', '\'', '!', '(', ')', '^', '[', '{', ':', '}', ']', '~', '/', '\\', '@', '#', '$', '%', '&', '*', ';', '=', '.', '_', '-', '<', '>', ',', '?'];
 const NONNUMERICTOPMARGIN = 8;
 const LINECHARTTOPPADDING = 16;
 const GRIDCONTAINERCLASS = 'tsi-gridContainer';
@@ -1568,35 +1568,41 @@ class Component {
     }
 }
 
-const NUMERICSPLITBYHEIGHT = 44;
-const NONNUMERICSPLITBYHEIGHT = 24;
+/**
+ * Constants for Legend component layout and behavior
+ */
+const LEGEND_CONSTANTS = {
+    /** Height in pixels for each numeric split-by item (includes type selector dropdown) */
+    NUMERIC_SPLITBY_HEIGHT: 44,
+    /** Height in pixels for each non-numeric (categorical/events) split-by item */
+    NON_NUMERIC_SPLITBY_HEIGHT: 24,
+    /** Height in pixels for the series name label header */
+    NAME_LABEL_HEIGHT: 24,
+    /** Buffer distance in pixels from scroll edge before triggering "load more" */
+    SCROLL_BUFFER: 40,
+    /** Number of split-by items to load per batch when paginating */
+    BATCH_SIZE: 20,
+    /** Minimum height in pixels for aggregate container */
+    MIN_AGGREGATE_HEIGHT: 201,
+    /** Minimum width in pixels for each series label in compact mode */
+    MIN_SERIES_WIDTH: 124,
+};
 class Legend extends Component {
     constructor(drawChart, renderTarget, legendWidth) {
         super(renderTarget);
         this.renderSplitBys = (aggKey, aggSelection, dataType, noSplitBys) => {
-            var splitByLabelData = Object.keys(this.chartComponentData.timeArrays[aggKey]);
-            var firstSplitBy = this.chartComponentData.displayState[aggKey].splitBys[Object.keys(this.chartComponentData.displayState[aggKey].splitBys)[0]];
-            var firstSplitByType = firstSplitBy ? firstSplitBy.visibleType : null;
-            Object.keys(this.chartComponentData.displayState[aggKey].splitBys).reduce((isSame, curr) => {
-                return (firstSplitByType == this.chartComponentData.displayState[aggKey].splitBys[curr].visibleType) && isSame;
-            }, true);
-            let showMoreSplitBys = () => {
-                const oldShownSplitBys = this.chartComponentData.displayState[aggKey].shownSplitBys;
-                this.chartComponentData.displayState[aggKey].shownSplitBys = Math.min(oldShownSplitBys + 20, splitByLabelData.length);
-                if (oldShownSplitBys != this.chartComponentData.displayState[aggKey].shownSplitBys) {
-                    this.renderSplitBys(aggKey, aggSelection, dataType, noSplitBys);
-                }
-            };
+            const splitByLabelData = Object.keys(this.chartComponentData.timeArrays[aggKey]);
+            const showMoreSplitBys = () => this.handleShowMoreSplitBys(aggKey, splitByLabelData, aggSelection, dataType, noSplitBys);
             let splitByContainer = aggSelection.selectAll(".tsi-splitByContainer").data([aggKey]);
-            var splitByContainerEntered = splitByContainer.enter().append("div")
+            const splitByContainerEntered = splitByContainer.enter().append("div")
                 .merge(splitByContainer)
                 .classed("tsi-splitByContainer", true);
-            var splitByLabels = splitByContainerEntered.selectAll('.tsi-splitByLabel')
+            const splitByLabels = splitByContainerEntered.selectAll('.tsi-splitByLabel')
                 .data(splitByLabelData.slice(0, this.chartComponentData.displayState[aggKey].shownSplitBys), function (d) {
                 return d;
             });
-            let self = this;
-            var splitByLabelsEntered = splitByLabels
+            const self = this;
+            const splitByLabelsEntered = splitByLabels
                 .enter()
                 .append("div")
                 .merge(splitByLabels)
@@ -1610,135 +1616,60 @@ class Legend extends Component {
                 }
             })
                 .on("click", function (event, splitBy) {
-                if (self.legendState == "compact") {
-                    self.toggleSplitByVisible(aggKey, splitBy);
-                }
-                else {
-                    self.toggleSticky(aggKey, splitBy);
-                }
-                self.drawChart();
+                self.handleSplitByClick(aggKey, splitBy);
             })
                 .on("mouseover", function (event, splitBy) {
                 event.stopPropagation();
-                self.labelMouseover(aggKey, splitBy);
+                self.handleSplitByMouseOver(aggKey, splitBy);
             })
                 .on("mouseout", function (event) {
                 event.stopPropagation();
-                self.svgSelection.selectAll(".tsi-valueElement")
-                    .attr("stroke-opacity", 1)
-                    .attr("fill-opacity", 1);
-                self.labelMouseout(self.svgSelection, aggKey);
+                self.handleSplitByMouseOut(aggKey);
             })
                 .attr("class", (splitBy, i) => {
-                let compact = (dataType !== DataTypes.Numeric) ? 'tsi-splitByLabelCompact' : '';
-                let shown = Utils.getAgVisible(self.chartComponentData.displayState, aggKey, splitBy) ? 'shown' : '';
-                return `tsi-splitByLabel tsi-splitByLabel ${compact} ${shown}`;
+                const compact = (dataType !== DataTypes.Numeric) ? 'tsi-splitByLabelCompact' : '';
+                const shown = Utils.getAgVisible(self.chartComponentData.displayState, aggKey, splitBy) ? 'shown' : '';
+                return `tsi-splitByLabel ${compact} ${shown}`;
             })
-                .classed("stickied", (splitBy, i) => {
-                if (self.chartComponentData.stickiedKey != null) {
-                    return aggKey == self.chartComponentData.stickiedKey.aggregateKey && splitBy == self.chartComponentData.stickiedKey.splitBy;
-                }
-            });
-            var colors = Utils.createSplitByColors(self.chartComponentData.displayState, aggKey, self.chartOptions.keepSplitByColor);
+                .classed("stickied", (splitBy, i) => self.isStickied(aggKey, splitBy));
+            // Use helper methods to render each split-by element
             splitByLabelsEntered.each(function (splitBy, j) {
-                let color = (self.chartComponentData.isFromHeatmap) ? self.chartComponentData.displayState[aggKey].color : colors[j];
+                const selection = d3__namespace.select(this);
+                // Add color key (conditionally based on data type and legend state)
                 if (dataType === DataTypes.Numeric || noSplitBys || self.legendState === 'compact') {
-                    let colorKey = d3__namespace.select(this).selectAll('.tsi-colorKey').data([color]);
-                    let colorKeyEntered = colorKey.enter()
-                        .append("div")
-                        .attr("class", 'tsi-colorKey')
-                        .merge(colorKey);
-                    if (dataType === DataTypes.Numeric) {
-                        colorKeyEntered.style('background-color', (d) => {
-                            return d;
-                        });
-                    }
-                    else {
-                        self.createNonNumericColorKey(dataType, colorKeyEntered, aggKey);
-                    }
-                    d3__namespace.select(this).classed('tsi-nonCompactNonNumeric', (dataType === DataTypes.Categorical || dataType === DataTypes.Events) && this.legendState !== 'compact');
-                    colorKey.exit().remove();
+                    self.addColorKey(selection, aggKey, splitBy, dataType);
+                    selection.classed('tsi-nonCompactNonNumeric', (dataType === DataTypes.Categorical || dataType === DataTypes.Events) && self.legendState !== 'compact');
                 }
                 else {
-                    d3__namespace.select(this).selectAll('.tsi-colorKey').remove();
-                }
-                if (d3__namespace.select(this).select('.tsi-eyeIcon').empty()) {
-                    d3__namespace.select(this).append("button")
-                        .attr("class", "tsi-eyeIcon")
-                        .attr('aria-label', () => {
-                        let showOrHide = self.chartComponentData.displayState[aggKey].splitBys[splitBy].visible ? self.getString('hide series') : self.getString('show series');
-                        return `${showOrHide} ${splitBy} ${self.getString('in group')} ${self.chartComponentData.displayState[aggKey].name}`;
-                    })
-                        .attr('title', () => self.getString('Show/Hide values'))
-                        .on("click", function (event) {
-                        event.stopPropagation();
-                        self.toggleSplitByVisible(aggKey, splitBy);
-                        d3__namespace.select(this)
-                            .classed("shown", Utils.getAgVisible(self.chartComponentData.displayState, aggKey, splitBy));
-                        self.drawChart();
-                    });
-                }
-                if (d3__namespace.select(this).select('.tsi-seriesName').empty()) {
-                    let seriesName = d3__namespace.select(this)
-                        .append('div')
-                        .attr('class', 'tsi-seriesName');
-                    Utils.appendFormattedElementsFromString(seriesName, noSplitBys ? (self.chartComponentData.displayState[aggKey].name) : splitBy);
+                    selection.selectAll('.tsi-colorKey').remove();
                 }
+                // Add eye icon
+                self.addEyeIcon(selection, aggKey, splitBy);
+                // Add series name
+                self.addSeriesName(selection, aggKey, splitBy);
+                // Add series type selection for numeric data
                 if (dataType === DataTypes.Numeric) {
-                    if (d3__namespace.select(this).select('.tsi-seriesTypeSelection').empty()) {
-                        d3__namespace.select(this).append("select")
-                            .attr('aria-label', `${self.getString("Series type selection for")} ${splitBy} ${self.getString('in group')} ${self.chartComponentData.displayState[aggKey].name}`)
-                            .attr('class', 'tsi-seriesTypeSelection')
-                            .on("change", function (data) {
-                            var seriesType = d3__namespace.select(this).property("value");
-                            self.chartComponentData.displayState[aggKey].splitBys[splitBy].visibleType = seriesType;
-                            self.drawChart();
-                        })
-                            .on("click", (event) => {
-                            event.stopPropagation();
-                        });
-                    }
-                    d3__namespace.select(this).select('.tsi-seriesTypeSelection')
-                        .each(function (d) {
-                        var typeLabels = d3__namespace.select(this).selectAll('option')
-                            .data(data => self.chartComponentData.displayState[aggKey].splitBys[splitBy].types.map((type) => {
-                            return {
-                                type: type,
-                                aggKey: aggKey,
-                                splitBy: splitBy,
-                                visibleMeasure: Utils.getAgVisibleMeasure(self.chartComponentData.displayState, aggKey, splitBy)
-                            };
-                        }));
-                        typeLabels
-                            .enter()
-                            .append("option")
-                            .attr("class", "seriesTypeLabel")
-                            .merge(typeLabels)
-                            .property("selected", (data) => {
-                            return ((data.type == Utils.getAgVisibleMeasure(self.chartComponentData.displayState, data.aggKey, data.splitBy)) ?
-                                " selected" : "");
-                        })
-                            .text((data) => data.type);
-                        typeLabels.exit().remove();
-                    });
+                    self.addSeriesTypeSelection(selection, aggKey, splitBy);
                 }
                 else {
-                    d3__namespace.select(this).selectAll('.tsi-seriesTypeSelection').remove();
+                    selection.selectAll('.tsi-seriesTypeSelection').remove();
                 }
             });
             splitByLabels.exit().remove();
-            let shouldShowMore = self.chartComponentData.displayState[aggKey].shownSplitBys < splitByLabelData.length;
+            // Show more button
+            const shouldShowMore = self.chartComponentData.displayState[aggKey].shownSplitBys < splitByLabelData.length;
             splitByContainerEntered.selectAll('.tsi-legendShowMore').remove();
             if (this.legendState === 'shown' && shouldShowMore) {
                 splitByContainerEntered.append('button')
                     .text(this.getString('Show more'))
                     .attr('class', 'tsi-legendShowMore')
-                    .style('display', (this.legendState === 'shown' && shouldShowMore) ? 'block' : 'none')
+                    .style('display', 'block')
                     .on('click', showMoreSplitBys);
             }
+            // Scroll handler for infinite scrolling
             splitByContainerEntered.on("scroll", function () {
                 if (self.chartOptions.legend === 'shown') {
-                    if (this.scrollTop + this.clientHeight + 40 > this.scrollHeight) {
+                    if (this.scrollTop + this.clientHeight + LEGEND_CONSTANTS.SCROLL_BUFFER > this.scrollHeight) {
                         showMoreSplitBys();
                     }
                 }
@@ -1763,10 +1694,125 @@ class Legend extends Component {
         };
         this.drawChart = drawChart;
         this.legendWidth = legendWidth;
-        this.legendElement = d3__namespace.select(renderTarget).insert("div", ":first-child")
+        this.legendElement = d3__namespace.select(renderTarget)
+            .insert("div", ":first-child")
             .attr("class", "tsi-legend")
-            .style("left", "0px")
-            .style("width", (this.legendWidth) + "px"); // - 16 for the width of the padding
+            .style("left", "0px");
+        // Note: width is set conditionally in draw() based on legendState
+        // to allow CSS to control width in compact mode
+    }
+    getHeightPerSplitBy(aggKey) {
+        const dataType = this.chartComponentData.displayState[aggKey].dataType;
+        return dataType === DataTypes.Numeric
+            ? LEGEND_CONSTANTS.NUMERIC_SPLITBY_HEIGHT
+            : LEGEND_CONSTANTS.NON_NUMERIC_SPLITBY_HEIGHT;
+    }
+    addColorKey(selection, aggKey, splitBy, dataType) {
+        const colors = Utils.createSplitByColors(this.chartComponentData.displayState, aggKey, this.chartOptions.keepSplitByColor);
+        const splitByKeys = Object.keys(this.chartComponentData.timeArrays[aggKey]);
+        const splitByIndex = splitByKeys.indexOf(splitBy);
+        const color = this.chartComponentData.isFromHeatmap
+            ? this.chartComponentData.displayState[aggKey].color
+            : colors[splitByIndex];
+        const colorKey = selection.selectAll('.tsi-colorKey').data([color]);
+        const colorKeyEntered = colorKey.enter()
+            .append('div')
+            .attr('class', 'tsi-colorKey')
+            .merge(colorKey);
+        if (dataType === DataTypes.Numeric) {
+            colorKeyEntered.style('background-color', d => d);
+        }
+        else {
+            this.createNonNumericColorKey(dataType, colorKeyEntered, aggKey);
+        }
+        colorKey.exit().remove();
+    }
+    addEyeIcon(selection, aggKey, splitBy) {
+        if (selection.select('.tsi-eyeIcon').empty()) {
+            selection.append('button')
+                .attr('class', 'tsi-eyeIcon')
+                .attr('aria-label', () => {
+                const showOrHide = this.chartComponentData.displayState[aggKey].splitBys[splitBy].visible
+                    ? this.getString('hide series')
+                    : this.getString('show series');
+                return `${showOrHide} ${splitBy} ${this.getString('in group')} ${this.chartComponentData.displayState[aggKey].name}`;
+            })
+                .attr('title', () => this.getString('Show/Hide values'))
+                .on('click', (event) => {
+                event.stopPropagation();
+                this.toggleSplitByVisible(aggKey, splitBy);
+                this.drawChart();
+            });
+        }
+        selection.select('.tsi-eyeIcon')
+            .classed('shown', Utils.getAgVisible(this.chartComponentData.displayState, aggKey, splitBy));
+    }
+    addSeriesName(selection, aggKey, splitBy) {
+        if (selection.select('.tsi-seriesName').empty()) {
+            const seriesName = selection.append('div')
+                .attr('class', 'tsi-seriesName');
+            const noSplitBys = Object.keys(this.chartComponentData.timeArrays[aggKey]).length === 1
+                && Object.keys(this.chartComponentData.timeArrays[aggKey])[0] === '';
+            const displayText = noSplitBys
+                ? this.chartComponentData.displayState[aggKey].name
+                : splitBy;
+            Utils.appendFormattedElementsFromString(seriesName, displayText);
+        }
+    }
+    addSeriesTypeSelection(selection, aggKey, splitBy) {
+        if (selection.select('.tsi-seriesTypeSelection').empty()) {
+            selection.append('select')
+                .attr('aria-label', `${this.getString('Series type selection for')} ${splitBy} ${this.getString('in group')} ${this.chartComponentData.displayState[aggKey].name}`)
+                .attr('class', 'tsi-seriesTypeSelection')
+                .on('change', (event) => {
+                const seriesType = d3__namespace.select(event.target).property('value');
+                this.chartComponentData.displayState[aggKey].splitBys[splitBy].visibleType = seriesType;
+                this.drawChart();
+            })
+                .on('click', (event) => {
+                event.stopPropagation();
+            });
+        }
+        selection.select('.tsi-seriesTypeSelection')
+            .each((d, i, nodes) => {
+            const typeLabels = d3__namespace.select(nodes[i])
+                .selectAll('option')
+                .data(this.chartComponentData.displayState[aggKey].splitBys[splitBy].types.map(type => ({
+                type,
+                aggKey,
+                splitBy,
+                visibleMeasure: Utils.getAgVisibleMeasure(this.chartComponentData.displayState, aggKey, splitBy)
+            })));
+            typeLabels.enter()
+                .append('option')
+                .attr('class', 'seriesTypeLabel')
+                .merge(typeLabels)
+                .property('selected', (data) => data.type === Utils.getAgVisibleMeasure(this.chartComponentData.displayState, data.aggKey, data.splitBy))
+                .text((data) => data.type);
+            typeLabels.exit().remove();
+        });
+    }
+    handleSplitByClick(aggKey, splitBy) {
+        if (this.legendState === 'compact') {
+            this.toggleSplitByVisible(aggKey, splitBy);
+        }
+        else {
+            this.toggleSticky(aggKey, splitBy);
+        }
+        this.drawChart();
+    }
+    handleSplitByMouseOver(aggKey, splitBy) {
+        this.labelMouseover(aggKey, splitBy);
+    }
+    handleSplitByMouseOut(aggKey) {
+        this.svgSelection.selectAll(".tsi-valueElement")
+            .attr("stroke-opacity", 1)
+            .attr("fill-opacity", 1);
+        this.labelMouseout(this.svgSelection, aggKey);
+    }
+    isStickied(aggKey, splitBy) {
+        const stickied = this.chartComponentData.stickiedKey;
+        return stickied?.aggregateKey === aggKey && stickied?.splitBy === splitBy;
     }
     labelMouseoutWrapper(labelMouseout, svgSelection, event) {
         return (svgSelection, aggKey) => {
@@ -1808,14 +1854,11 @@ class Legend extends Component {
                 return d == aggKey;
             }).node();
             var prospectiveScrollTop = Math.max((indexOfSplitBy - 1) * this.getHeightPerSplitBy(aggKey), 0);
-            if (splitByNode.scrollTop < prospectiveScrollTop - (splitByNode.clientHeight - 40) || splitByNode.scrollTop > prospectiveScrollTop) {
+            if (splitByNode.scrollTop < prospectiveScrollTop - (splitByNode.clientHeight - LEGEND_CONSTANTS.SCROLL_BUFFER) || splitByNode.scrollTop > prospectiveScrollTop) {
                 splitByNode.scrollTop = prospectiveScrollTop;
             }
         }
     }
-    getHeightPerSplitBy(aggKey) {
-        return (this.chartComponentData.displayState[aggKey].dataType === DataTypes.Numeric ? NUMERICSPLITBYHEIGHT : NONNUMERICSPLITBYHEIGHT);
-    }
     createGradient(gradientKey, svg, values) {
         let gradient = svg.append('defs').append('linearGradient')
             .attr('id', gradientKey).attr('x1', '0%').attr('x2', '0%').attr('y1', '0%').attr('y2', '100%');
@@ -1834,10 +1877,6 @@ class Legend extends Component {
                 .attr("stop-opacity", 1);
         });
     }
-    isNonNumeric(aggKey) {
-        let dataType = this.chartComponentData.displayState[aggKey].dataType;
-        return (dataType === DataTypes.Categorical || dataType === DataTypes.Events);
-    }
     createNonNumericColorKey(dataType, colorKey, aggKey) {
         if (dataType === DataTypes.Categorical) {
             this.createCategoricalColorKey(colorKey, aggKey);
@@ -1893,6 +1932,13 @@ class Legend extends Component {
             rect.attr('fill', "url(#" + gradientKey + ")");
         }
     }
+    handleShowMoreSplitBys(aggKey, splitByLabelData, aggSelection, dataType, noSplitBys) {
+        const oldShownSplitBys = this.chartComponentData.displayState[aggKey].shownSplitBys;
+        this.chartComponentData.displayState[aggKey].shownSplitBys = Math.min(oldShownSplitBys + LEGEND_CONSTANTS.BATCH_SIZE, splitByLabelData.length);
+        if (oldShownSplitBys !== this.chartComponentData.displayState[aggKey].shownSplitBys) {
+            this.renderSplitBys(aggKey, aggSelection, dataType, noSplitBys);
+        }
+    }
     draw(legendState, chartComponentData, labelMouseover, svgSelection, options, labelMouseoutAction = null, stickySeriesAction = null, event) {
         this.chartOptions.setOptions(options);
         this.chartComponentData = chartComponentData;
@@ -1907,6 +1953,13 @@ class Legend extends Component {
         legend.style('visibility', this.legendState != 'hidden')
             .classed('compact', this.legendState == 'compact')
             .classed('hidden', this.legendState == 'hidden');
+        // Set width conditionally - let CSS handle compact mode width
+        if (this.legendState !== 'compact') {
+            legend.style('width', `${this.legendWidth}px`);
+        }
+        else {
+            legend.style('width', null); // Remove inline width style in compact mode
+        }
         let seriesNames = Object.keys(this.chartComponentData.displayState);
         var seriesLabels = legend.selectAll(".tsi-seriesLabel")
             .data(seriesNames, d => d);
@@ -1917,7 +1970,7 @@ class Legend extends Component {
             return "tsi-seriesLabel " + (this.chartComponentData.displayState[d]["visible"] ? " shown" : "");
         })
             .style("min-width", () => {
-            return Math.min(124, this.legendElement.node().clientWidth / seriesNames.length) + 'px';
+            return Math.min(LEGEND_CONSTANTS.MIN_SERIES_WIDTH, this.legendElement.node().clientWidth / seriesNames.length) + 'px';
         })
             .style("border-color", function (d, i) {
             if (d3__namespace.select(this).classed("shown"))
@@ -1925,9 +1978,8 @@ class Legend extends Component {
             return "lightgray";
         });
         var self = this;
-        const heightPerNameLabel = 25;
         const usableLegendHeight = legend.node().clientHeight;
-        var prospectiveAggregateHeight = Math.ceil(Math.max(201, (usableLegendHeight / seriesLabelsEntered.size())));
+        var prospectiveAggregateHeight = Math.ceil(Math.max(LEGEND_CONSTANTS.MIN_AGGREGATE_HEIGHT, (usableLegendHeight / seriesLabelsEntered.size())));
         var contentHeight = 0;
         seriesLabelsEntered.each(function (aggKey, i) {
             let heightPerSplitBy = self.getHeightPerSplitBy(aggKey);
@@ -1983,12 +2035,12 @@ class Legend extends Component {
             seriesNameLabel.exit().remove();
             var splitByContainerHeight;
             if (splitByLabelData.length > (prospectiveAggregateHeight / heightPerSplitBy)) {
-                splitByContainerHeight = prospectiveAggregateHeight - heightPerNameLabel;
-                contentHeight += splitByContainerHeight + heightPerNameLabel;
+                splitByContainerHeight = prospectiveAggregateHeight - LEGEND_CONSTANTS.NAME_LABEL_HEIGHT;
+                contentHeight += splitByContainerHeight + LEGEND_CONSTANTS.NAME_LABEL_HEIGHT;
             }
             else if (splitByLabelData.length > 1 || (splitByLabelData.length === 1 && splitByLabelData[0] !== "")) {
-                splitByContainerHeight = splitByLabelData.length * heightPerSplitBy + heightPerNameLabel;
-                contentHeight += splitByContainerHeight + heightPerNameLabel;
+                splitByContainerHeight = splitByLabelData.length * heightPerSplitBy + LEGEND_CONSTANTS.NAME_LABEL_HEIGHT;
+                contentHeight += splitByContainerHeight + LEGEND_CONSTANTS.NAME_LABEL_HEIGHT;
             }
             else {
                 splitByContainerHeight = heightPerSplitBy;
@@ -2001,43 +2053,28 @@ class Legend extends Component {
                 d3__namespace.select(this).style("height", "unset");
             }
             var splitByContainer = d3__namespace.select(this).selectAll(".tsi-splitByContainer").data([aggKey]);
-            var splitByContainerEntered = splitByContainer.enter().append("div")
+            splitByContainer.enter().append("div")
                 .merge(splitByContainer)
                 .classed("tsi-splitByContainer", true);
             let aggSelection = d3__namespace.select(this);
             self.renderSplitBys(aggKey, aggSelection, dataType, noSplitBys);
-            splitByContainerEntered.on("scroll", function () {
-                if (self.chartOptions.legend == "shown") {
-                    if (this.scrollTop + this.clientHeight + 40 > this.scrollHeight) {
-                        const oldShownSplitBys = self.chartComponentData.displayState[aggKey].shownSplitBys;
-                        self.chartComponentData.displayState[aggKey].shownSplitBys = Math.min(oldShownSplitBys + 20, splitByLabelData.length);
-                        if (oldShownSplitBys != self.chartComponentData.displayState[aggKey].shownSplitBys) {
-                            self.renderSplitBys(aggKey, aggSelection, dataType, noSplitBys);
-                        }
-                    }
-                }
-            });
+            // Compact mode horizontal scroll handler
             d3__namespace.select(this).on('scroll', function () {
                 if (self.chartOptions.legend == "compact") {
-                    if (this.scrollLeft + this.clientWidth + 40 > this.scrollWidth) {
-                        const oldShownSplitBys = self.chartComponentData.displayState[aggKey].shownSplitBys;
-                        self.chartComponentData.displayState[aggKey].shownSplitBys = Math.min(oldShownSplitBys + 20, splitByLabelData.length);
-                        if (oldShownSplitBys != self.chartComponentData.displayState[aggKey].shownSplitBys) {
-                            this.renderSplitBys(dataType);
-                        }
+                    if (this.scrollLeft + this.clientWidth + LEGEND_CONSTANTS.SCROLL_BUFFER > this.scrollWidth) {
+                        self.handleShowMoreSplitBys(aggKey, splitByLabelData, aggSelection, dataType, noSplitBys);
                     }
                 }
             });
             splitByContainer.exit().remove();
         });
         if (this.chartOptions.legend == 'shown') {
-            legend.node().clientHeight;
             //minSplitBysForFlexGrow: the minimum number of split bys for flex-grow to be triggered 
             if (contentHeight < usableLegendHeight) {
                 this.legendElement.classed("tsi-flexLegend", true);
                 seriesLabelsEntered.each(function (d) {
                     let heightPerSplitBy = self.getHeightPerSplitBy(d);
-                    var minSplitByForFlexGrow = (prospectiveAggregateHeight - heightPerNameLabel) / heightPerSplitBy;
+                    var minSplitByForFlexGrow = (prospectiveAggregateHeight - LEGEND_CONSTANTS.NAME_LABEL_HEIGHT) / heightPerSplitBy;
                     var splitBysCount = Object.keys(self.chartComponentData.displayState[String(d3__namespace.select(this).data()[0])].splitBys).length;
                     if (splitBysCount > minSplitByForFlexGrow) {
                         d3__namespace.select(this).style("flex-grow", 1);
@@ -2050,6 +2087,12 @@ class Legend extends Component {
         }
         seriesLabels.exit().remove();
     }
+    destroy() {
+        this.legendElement.remove();
+        // Note: Virtual list cleanup will be added when virtual scrolling is implemented
+        // this.virtualLists.forEach(list => list.destroy());
+        // this.virtualLists.clear();
+    }
 }
 
 class ChartComponentData {
@@ -6325,6 +6368,8 @@ class LineChart extends TemporalXAxisComponent {
                 .append("text")
                 .attr("class", (d) => `tsi-swimLaneLabel-${lane} tsi-swimLaneLabel ${onClickPresentAndValid(d) ? 'tsi-boldOnHover' : ''}`)
                 .attr("role", "heading")
+                .attr("aria-roledescription", this.getString("Swimlane label"))
+                .attr("aria-label", d => d.label)
                 .attr("aria-level", "3")
                 .merge(label)
                 .style("text-anchor", "middle")
@@ -6863,1205 +6908,6 @@ class TimezonePicker extends ChartComponent {
     }
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var pikaday$1 = {exports: {}};
-
-/*!
- * Pikaday
- *
- * Copyright © 2014 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday
- */
-var pikaday = pikaday$1.exports;
-
-var hasRequiredPikaday;
-
-function requirePikaday () {
-	if (hasRequiredPikaday) return pikaday$1.exports;
-	hasRequiredPikaday = 1;
-	(function (module, exports) {
-		(function (root, factory) {
-
-		    var moment;
-		    {
-		        // CommonJS module
-		        // Load moment.js as an optional dependency
-		        try { moment = require('moment'); } catch (e) { moment = (typeof window !== 'undefined' && window.moment) || undefined; }
-		        module.exports = factory(moment);
-		    }
-		}(typeof self !== 'undefined' ? self :
-		    typeof window !== 'undefined' ? window :
-		        typeof commonjsGlobal !== 'undefined' ? commonjsGlobal :
-		            pikaday, function (moment) {
-
-		                /**
-		                 * feature detection and helper functions
-		                 */
-		                var hasMoment = typeof moment === 'function' || (moment && typeof moment.version === 'string'),
-
-		                    hasEventListeners = !!window.addEventListener,
-
-		                    document = window.document,
-
-		                    sto = window.setTimeout,
-
-		                    addEvent = function (el, e, callback, capture) {
-		                        if (hasEventListeners) {
-		                            el.addEventListener(e, callback, !!capture);
-		                        } else {
-		                            el.attachEvent('on' + e, callback);
-		                        }
-		                    },
-
-		                    removeEvent = function (el, e, callback, capture) {
-		                        if (hasEventListeners) {
-		                            el.removeEventListener(e, callback, !!capture);
-		                        } else {
-		                            el.detachEvent('on' + e, callback);
-		                        }
-		                    },
-
-		                    trim = function (str) {
-		                        return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
-		                    },
-
-		                    hasClass = function (el, cn) {
-		                        return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
-		                    },
-
-		                    addClass = function (el, cn) {
-		                        if (!hasClass(el, cn)) {
-		                            el.className = (el.className === '') ? cn : el.className + ' ' + cn;
-		                        }
-		                    },
-
-		                    removeClass = function (el, cn) {
-		                        el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
-		                    },
-
-		                    isArray = function (obj) {
-		                        return (/Array/).test(Object.prototype.toString.call(obj));
-		                    },
-
-		                    isDate = function (obj) {
-		                        return (/Date/).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
-		                    },
-
-		                    isWeekend = function (date) {
-		                        var day = date.getDay();
-		                        return day === 0 || day === 6;
-		                    },
-
-		                    isLeapYear = function (year) {
-		                        // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
-		                        return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
-		                    },
-
-		                    getDaysInMonth = function (year, month) {
-		                        return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
-		                    },
-
-		                    setToStartOfDay = function (date) {
-		                        if (isDate(date)) date.setHours(0, 0, 0, 0);
-		                    },
-
-		                    compareDates = function (a, b) {
-		                        // weak date comparison (use setToStartOfDay(date) to ensure correct result)
-		                        return a.getTime() === b.getTime();
-		                    },
-
-		                    extend = function (to, from, overwrite) {
-		                        var prop, hasProp;
-		                        for (prop in from) {
-		                            hasProp = to[prop] !== undefined;
-		                            if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
-		                                if (isDate(from[prop])) {
-		                                    if (overwrite) {
-		                                        to[prop] = new Date(from[prop].getTime());
-		                                    }
-		                                }
-		                                else if (isArray(from[prop])) {
-		                                    if (overwrite) {
-		                                        to[prop] = from[prop].slice(0);
-		                                    }
-		                                } else {
-		                                    to[prop] = extend({}, from[prop], overwrite);
-		                                }
-		                            } else if (overwrite || !hasProp) {
-		                                to[prop] = from[prop];
-		                            }
-		                        }
-		                        return to;
-		                    },
-
-		                    fireEvent = function (el, eventName, data) {
-		                        var ev;
-
-		                        if (document.createEvent) {
-		                            ev = document.createEvent('HTMLEvents');
-		                            ev.initEvent(eventName, true, false);
-		                            ev = extend(ev, data);
-		                            el.dispatchEvent(ev);
-		                        } else if (document.createEventObject) {
-		                            ev = document.createEventObject();
-		                            ev = extend(ev, data);
-		                            el.fireEvent('on' + eventName, ev);
-		                        }
-		                    },
-
-		                    adjustCalendar = function (calendar) {
-		                        if (calendar.month < 0) {
-		                            calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
-		                            calendar.month += 12;
-		                        }
-		                        if (calendar.month > 11) {
-		                            calendar.year += Math.floor(Math.abs(calendar.month) / 12);
-		                            calendar.month -= 12;
-		                        }
-		                        return calendar;
-		                    },
-
-		                    /**
-		                     * defaults and localisation
-		                     */
-		                    defaults = {
-
-		                        // bind the picker to a form field
-		                        field: null,
-
-		                        // automatically show/hide the picker on `field` focus (default `true` if `field` is set)
-		                        bound: undefined,
-
-		                        // position of the datepicker, relative to the field (default to bottom & left)
-		                        // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
-		                        position: 'bottom left',
-
-		                        // automatically fit in the viewport even if it means repositioning from the position option
-		                        reposition: true,
-
-		                        // the default output format for `.toString()` and `field` value
-		                        format: 'YYYY-MM-DD',
-
-		                        // the toString function which gets passed a current date object and format
-		                        // and returns a string
-		                        toString: null,
-
-		                        // used to create date object from current input string
-		                        parse: null,
-
-		                        // the initial date to view when first opened
-		                        defaultDate: null,
-
-		                        // make the `defaultDate` the initial selected value
-		                        setDefaultDate: false,
-
-		                        // first day of week (0: Sunday, 1: Monday etc)
-		                        firstDay: 0,
-
-		                        // the default flag for moment's strict date parsing
-		                        formatStrict: false,
-
-		                        // the minimum/earliest date that can be selected
-		                        minDate: null,
-		                        // the maximum/latest date that can be selected
-		                        maxDate: null,
-
-		                        // number of years either side, or array of upper/lower range
-		                        yearRange: 10,
-
-		                        // show week numbers at head of row
-		                        showWeekNumber: false,
-
-		                        // Week picker mode
-		                        pickWholeWeek: false,
-
-		                        // used internally (don't config outside)
-		                        minYear: 0,
-		                        maxYear: 9999,
-		                        minMonth: undefined,
-		                        maxMonth: undefined,
-
-		                        startRange: null,
-		                        endRange: null,
-
-		                        isRTL: false,
-
-		                        // Additional text to append to the year in the calendar title
-		                        yearSuffix: '',
-
-		                        // Render the month after year in the calendar title
-		                        showMonthAfterYear: false,
-
-		                        // Render days of the calendar grid that fall in the next or previous month
-		                        showDaysInNextAndPreviousMonths: false,
-
-		                        // Allows user to select days that fall in the next or previous month
-		                        enableSelectionDaysInNextAndPreviousMonths: false,
-
-		                        // how many months are visible
-		                        numberOfMonths: 1,
-
-		                        // when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`)
-		                        // only used for the first display or when a selected date is not visible
-		                        mainCalendar: 'left',
-
-		                        // Specify a DOM element to render the calendar in
-		                        container: undefined,
-
-		                        // Blur field when date is selected
-		                        blurFieldOnSelect: true,
-
-		                        // internationalization
-		                        i18n: {
-		                            previousMonth: 'Previous Month',
-		                            nextMonth: 'Next Month',
-		                            months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-		                            weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-		                            weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-		                        },
-
-		                        // Theme Classname
-		                        theme: null,
-
-		                        // events array
-		                        events: [],
-
-		                        // callback function
-		                        onSelect: null,
-		                        onOpen: null,
-		                        onClose: null,
-		                        onDraw: null,
-
-		                        // Enable keyboard input
-		                        keyboardInput: true
-		                    },
-
-
-		                    /**
-		                     * templating functions to abstract HTML rendering
-		                     */
-		                    renderDayName = function (opts, day, abbr) {
-		                        day += opts.firstDay;
-		                        while (day >= 7) {
-		                            day -= 7;
-		                        }
-		                        return abbr ? opts.i18n.weekdaysShort[day] : opts.i18n.weekdays[day];
-		                    },
-
-		                    renderDay = function (opts) {
-		                        var arr = [];
-		                        var ariaSelected = 'false';
-		                        if (opts.isEmpty) {
-		                            if (opts.showDaysInNextAndPreviousMonths) {
-		                                arr.push('is-outside-current-month');
-
-		                                if (!opts.enableSelectionDaysInNextAndPreviousMonths) {
-		                                    arr.push('is-selection-disabled');
-		                                }
-
-		                            } else {
-		                                return '<td class="is-empty"></td>';
-		                            }
-		                        }
-		                        if (opts.isDisabled) {
-		                            arr.push('is-disabled');
-		                        }
-		                        if (opts.isToday) {
-		                            arr.push('is-today');
-		                        }
-		                        if (opts.isSelected) {
-		                            arr.push('is-selected');
-		                            ariaSelected = 'true';
-		                        }
-		                        if (opts.hasEvent) {
-		                            arr.push('has-event');
-		                        }
-		                        if (opts.isInRange) {
-		                            arr.push('is-inrange');
-		                        }
-		                        if (opts.isStartRange) {
-		                            arr.push('is-startrange');
-		                        }
-		                        if (opts.isEndRange) {
-		                            arr.push('is-endrange');
-		                        }
-		                        return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '" aria-selected="' + ariaSelected + '">' +
-		                            '<button tabIndex="-1" class="pika-button pika-day" type="button" ' +
-		                            'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' +
-		                            opts.day +
-		                            '</button>' +
-		                            '</td>';
-		                    },
-
-		                    renderWeek = function (d, m, y) {
-		                        // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
-		                        var onejan = new Date(y, 0, 1),
-		                            weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay() + 1) / 7);
-		                        return '<td class="pika-week">' + weekNum + '</td>';
-		                    },
-
-		                    renderRow = function (days, isRTL, pickWholeWeek, isRowSelected) {
-		                        return '<tr class="pika-row' + (pickWholeWeek ? ' pick-whole-week' : '') + (isRowSelected ? ' is-selected' : '') + '">' + (isRTL ? days.reverse() : days).join('') + '</tr>';
-		                    },
-
-		                    renderBody = function (rows) {
-		                        return '<tbody>' + rows.join('') + '</tbody>';
-		                    },
-
-		                    renderHead = function (opts) {
-		                        var i, arr = [];
-		                        if (opts.showWeekNumber) {
-		                            arr.push('<th></th>');
-		                        }
-		                        for (i = 0; i < 7; i++) {
-		                            arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
-		                        }
-		                        return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
-		                    },
-
-		                    renderTitle = function (instance, c, year, month, refYear, randId) {
-		                        var i, j, arr,
-		                            opts = instance._o,
-		                            isMinYear = year === opts.minYear,
-		                            isMaxYear = year === opts.maxYear,
-		                            html = '<div id="' + randId + '" class="pika-title">',
-		                            monthHtml,
-		                            yearHtml,
-		                            prev = true,
-		                            next = true;
-
-		                        for (arr = [], i = 0; i < 12; i++) {
-		                            arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
-		                                (i === month ? ' selected="selected"' : '') +
-		                                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled="disabled"' : '') + '>' +
-		                                opts.i18n.months[i] + '</option>');
-		                        }
-
-		                        monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select aria-label="select month" class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
-
-		                        if (isArray(opts.yearRange)) {
-		                            i = opts.yearRange[0];
-		                            j = opts.yearRange[1] + 1;
-		                        } else {
-		                            i = year - opts.yearRange;
-		                            j = 1 + year + opts.yearRange;
-		                        }
-
-		                        for (arr = []; i < j && i <= opts.maxYear; i++) {
-		                            if (i >= opts.minYear) {
-		                                arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"' : '') + '>' + (i) + '</option>');
-		                            }
-		                        }
-		                        yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select aria-label="select year" class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
-
-		                        if (opts.showMonthAfterYear) {
-		                            html += yearHtml + monthHtml;
-		                        } else {
-		                            html += monthHtml + yearHtml;
-		                        }
-
-		                        if (isMinYear && (month === 0 || opts.minMonth >= month)) {
-		                            prev = false;
-		                        }
-
-		                        if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
-		                            next = false;
-		                        }
-
-		                        if (c === 0) {
-		                            html += '<button tabIndex="-1" class="pika-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + opts.i18n.previousMonth + '</button>';
-		                        }
-		                        if (c === (instance._o.numberOfMonths - 1)) {
-		                            html += '<button tabIndex="-1" class="pika-next' + (next ? '' : ' is-disabled') + '" type="button">' + opts.i18n.nextMonth + '</button>';
-		                        }
-
-		                        return html += '</div>';
-		                    },
-
-		                    renderTable = function (opts, data, randId) {
-		                        return '<table cellpadding="0" cellspacing="0" class="pika-table" role="grid" aria-labelledby="' + randId + '">' + renderHead(opts) + renderBody(data) + '</table>';
-		                    },
-
-
-		                    /**
-		                     * Pikaday constructor
-		                     */
-		                    Pikaday = function (options) {
-		                        var self = this,
-		                            opts = self.config(options);
-
-		                        self._onMouseDown = function (e) {
-		                            if (!self._v) {
-		                                return;
-		                            }
-		                            e = e || window.event;
-		                            var target = e.target || e.srcElement;
-		                            if (!target) {
-		                                return;
-		                            }
-
-		                            if (!hasClass(target, 'is-disabled')) {
-		                                if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty') && !hasClass(target.parentNode, 'is-disabled')) {
-		                                    self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
-		                                    if (opts.bound) {
-		                                        sto(function () {
-		                                            self.hide();
-		                                            if (opts.blurFieldOnSelect && opts.field) {
-		                                                opts.field.blur();
-		                                            }
-		                                        }, 100);
-		                                    }
-		                                }
-		                                else if (hasClass(target, 'pika-prev')) {
-		                                    self.prevMonth();
-		                                }
-		                                else if (hasClass(target, 'pika-next')) {
-		                                    self.nextMonth();
-		                                }
-		                            }
-		                            if (!hasClass(target, 'pika-select')) {
-		                                // if this is touch event prevent mouse events emulation
-		                                if (e.preventDefault) {
-		                                    e.preventDefault();
-		                                } else {
-		                                    e.returnValue = false;
-		                                    return false;
-		                                }
-		                            } else {
-		                                self._c = true;
-		                            }
-		                        };
-
-		                        self._onChange = function (e) {
-		                            e = e || window.event;
-		                            var target = e.target || e.srcElement;
-		                            if (!target) {
-		                                return;
-		                            }
-		                            if (hasClass(target, 'pika-select-month')) {
-		                                self.gotoMonth(target.value);
-		                            }
-		                            else if (hasClass(target, 'pika-select-year')) {
-		                                self.gotoYear(target.value);
-		                            }
-		                        };
-
-		                        self._onKeyChange = function (e) {
-		                            e = e || window.event;
-		                            // ignore if event comes from input box
-		                            if (self.isVisible() && e.target && e.target.type !== 'text') {
-
-		                                switch (e.keyCode) {
-		                                    case 13:
-		                                    case 27:
-		                                        if (opts.field) {
-		                                            opts.field.blur();
-		                                        }
-		                                        break;
-		                                    case 37:
-		                                        e.preventDefault();
-		                                        self.adjustDate('subtract', 1);
-		                                        break;
-		                                    case 38:
-		                                        self.adjustDate('subtract', 7);
-		                                        break;
-		                                    case 39:
-		                                        self.adjustDate('add', 1);
-		                                        break;
-		                                    case 40:
-		                                        self.adjustDate('add', 7);
-		                                        break;
-		                                }
-		                            }
-		                        };
-
-		                        self._onInputChange = function (e) {
-		                            var date;
-
-		                            if (e.firedBy === self) {
-		                                return;
-		                            }
-		                            if (opts.parse) {
-		                                date = opts.parse(opts.field.value, opts.format);
-		                            } else if (hasMoment) {
-		                                date = moment(opts.field.value, opts.format, opts.formatStrict);
-		                                date = (date && date.isValid()) ? date.toDate() : null;
-		                            }
-		                            else {
-		                                date = new Date(Date.parse(opts.field.value));
-		                            }
-		                            // if (isDate(date)) {
-		                            //   self.setDate(date);
-		                            // }
-		                            // if (!self._v) {
-		                            //     self.show();
-		                            // }
-		                        };
-
-		                        self._onInputFocus = function () {
-		                            self.show();
-		                        };
-
-		                        self._onInputClick = function () {
-		                            self.show();
-		                        };
-
-		                        self._onInputBlur = function () {
-		                            // IE allows pika div to gain focus; catch blur the input field
-		                            var pEl = document.activeElement;
-		                            do {
-		                                if (hasClass(pEl, 'pika-single')) {
-		                                    return;
-		                                }
-		                            }
-		                            while ((pEl = pEl.parentNode));
-
-		                            if (!self._c) {
-		                                self._b = sto(function () {
-		                                    self.hide();
-		                                }, 50);
-		                            }
-		                            self._c = false;
-		                        };
-
-		                        self._onClick = function (e) {
-		                            e = e || window.event;
-		                            var target = e.target || e.srcElement,
-		                                pEl = target;
-		                            if (!target) {
-		                                return;
-		                            }
-		                            if (!hasEventListeners && hasClass(target, 'pika-select')) {
-		                                if (!target.onchange) {
-		                                    target.setAttribute('onchange', 'return;');
-		                                    addEvent(target, 'change', self._onChange);
-		                                }
-		                            }
-		                            do {
-		                                if (hasClass(pEl, 'pika-single') || pEl === opts.trigger) {
-		                                    return;
-		                                }
-		                            }
-		                            while ((pEl = pEl.parentNode));
-		                            if (self._v && target !== opts.trigger && pEl !== opts.trigger) {
-		                                self.hide();
-		                            }
-		                        };
-
-		                        self.el = document.createElement('div');
-		                        self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '') + (opts.theme ? ' ' + opts.theme : '');
-
-		                        addEvent(self.el, 'mousedown', self._onMouseDown, true);
-		                        addEvent(self.el, 'touchend', self._onMouseDown, true);
-		                        addEvent(self.el, 'change', self._onChange);
-
-		                        if (opts.keyboardInput) {
-		                            addEvent(document, 'keydown', self._onKeyChange);
-		                        }
-
-		                        if (opts.field) {
-		                            if (opts.container) {
-		                                opts.container.appendChild(self.el);
-		                            } else if (opts.bound) {
-		                                document.body.appendChild(self.el);
-		                            } else {
-		                                opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
-		                            }
-		                            addEvent(opts.field, 'change', self._onInputChange);
-
-		                            if (!opts.defaultDate) {
-		                                if (hasMoment && opts.field.value) {
-		                                    opts.defaultDate = moment(opts.field.value, opts.format).toDate();
-		                                } else {
-		                                    opts.defaultDate = new Date(Date.parse(opts.field.value));
-		                                }
-		                                opts.setDefaultDate = true;
-		                            }
-		                        }
-
-		                        var defDate = opts.defaultDate;
-
-		                        if (isDate(defDate)) {
-		                            if (opts.setDefaultDate) {
-		                                self.setDate(defDate, true);
-		                            } else {
-		                                self.gotoDate(defDate);
-		                            }
-		                        } else {
-		                            self.gotoDate(new Date());
-		                        }
-
-		                        if (opts.bound) {
-		                            this.hide();
-		                            self.el.className += ' is-bound';
-		                            addEvent(opts.trigger, 'click', self._onInputClick);
-		                            addEvent(opts.trigger, 'focus', self._onInputFocus);
-		                            addEvent(opts.trigger, 'blur', self._onInputBlur);
-		                        } else {
-		                            this.show();
-		                        }
-		                    };
-
-
-		                /**
-		                 * public Pikaday API
-		                 */
-		                Pikaday.prototype = {
-
-
-		                    /**
-		                     * configure functionality
-		                     */
-		                    config: function (options) {
-		                        if (!this._o) {
-		                            this._o = extend({}, defaults, true);
-		                        }
-
-		                        var opts = extend(this._o, options, true);
-
-		                        opts.isRTL = !!opts.isRTL;
-
-		                        opts.field = (opts.field && opts.field.nodeName) ? opts.field : null;
-
-		                        opts.theme = (typeof opts.theme) === 'string' && opts.theme ? opts.theme : null;
-
-		                        opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);
-
-		                        opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;
-
-		                        opts.disableWeekends = !!opts.disableWeekends;
-
-		                        opts.disableDayFn = (typeof opts.disableDayFn) === 'function' ? opts.disableDayFn : null;
-
-		                        var nom = parseInt(opts.numberOfMonths, 10) || 1;
-		                        opts.numberOfMonths = nom > 4 ? 4 : nom;
-
-		                        if (!isDate(opts.minDate)) {
-		                            opts.minDate = false;
-		                        }
-		                        if (!isDate(opts.maxDate)) {
-		                            opts.maxDate = false;
-		                        }
-		                        if ((opts.minDate && opts.maxDate) && opts.maxDate < opts.minDate) {
-		                            opts.maxDate = opts.minDate = false;
-		                        }
-		                        if (opts.minDate) {
-		                            this.setMinDate(opts.minDate);
-		                        }
-		                        if (opts.maxDate) {
-		                            this.setMaxDate(opts.maxDate);
-		                        }
-
-		                        if (isArray(opts.yearRange)) {
-		                            var fallback = new Date().getFullYear() - 10;
-		                            opts.yearRange[0] = parseInt(opts.yearRange[0], 10) || fallback;
-		                            opts.yearRange[1] = parseInt(opts.yearRange[1], 10) || fallback;
-		                        } else {
-		                            opts.yearRange = Math.abs(parseInt(opts.yearRange, 10)) || defaults.yearRange;
-		                            if (opts.yearRange > 100) {
-		                                opts.yearRange = 100;
-		                            }
-		                        }
-
-		                        return opts;
-		                    },
-
-		                    /**
-		                     * return a formatted string of the current selection (using Moment.js if available)
-		                     */
-		                    toString: function (format) {
-		                        format = format || this._o.format;
-		                        if (!isDate(this._d)) {
-		                            return '';
-		                        }
-		                        if (this._o.toString) {
-		                            return this._o.toString(this._d, format);
-		                        }
-		                        if (hasMoment) {
-		                            return moment(this._d).format(format);
-		                        }
-		                        return this._d.toDateString();
-		                    },
-
-		                    /**
-		                     * return a Moment.js object of the current selection (if available)
-		                     */
-		                    getMoment: function () {
-		                        return hasMoment ? moment(this._d) : null;
-		                    },
-
-		                    /**
-		                     * set the current selection from a Moment.js object (if available)
-		                     */
-		                    setMoment: function (date, preventOnSelect) {
-		                        if (hasMoment && moment.isMoment(date)) {
-		                            this.setDate(date.toDate(), preventOnSelect);
-		                        }
-		                    },
-
-		                    /**
-		                     * return a Date object of the current selection
-		                     */
-		                    getDate: function () {
-		                        return isDate(this._d) ? new Date(this._d.getTime()) : null;
-		                    },
-
-		                    /**
-		                     * set the current selection
-		                     */
-		                    setDate: function (date, preventOnSelect) {
-		                        if (!date) {
-		                            this._d = null;
-
-		                            if (this._o.field) {
-		                                this._o.field.value = '';
-		                                fireEvent(this._o.field, 'change', { firedBy: this });
-		                            }
-
-		                            return this.draw();
-		                        }
-		                        if (typeof date === 'string') {
-		                            date = new Date(Date.parse(date));
-		                        }
-		                        if (!isDate(date)) {
-		                            return;
-		                        }
-
-		                        var min = this._o.minDate,
-		                            max = this._o.maxDate;
-
-		                        if (isDate(min) && date < min) {
-		                            date = min;
-		                        } else if (isDate(max) && date > max) {
-		                            date = max;
-		                        }
-
-		                        this._d = new Date(date.getTime());
-		                        setToStartOfDay(this._d);
-		                        this.gotoDate(this._d);
-
-		                        if (this._o.field) {
-		                            this._o.field.value = this.toString();
-		                            fireEvent(this._o.field, 'change', { firedBy: this });
-		                        }
-		                        if (!preventOnSelect && typeof this._o.onSelect === 'function') {
-		                            this._o.onSelect.call(this, this.getDate());
-		                        }
-		                    },
-
-		                    /**
-		                     * change view to a specific date
-		                     */
-		                    gotoDate: function (date) {
-		                        var newCalendar = true;
-
-		                        if (!isDate(date)) {
-		                            return;
-		                        }
-
-		                        if (this.calendars) {
-		                            var firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1),
-		                                lastVisibleDate = new Date(this.calendars[this.calendars.length - 1].year, this.calendars[this.calendars.length - 1].month, 1),
-		                                visibleDate = date.getTime();
-		                            // get the end of the month
-		                            lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1);
-		                            lastVisibleDate.setDate(lastVisibleDate.getDate() - 1);
-		                            newCalendar = (visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate);
-		                        }
-
-		                        if (newCalendar) {
-		                            this.calendars = [{
-		                                month: date.getMonth(),
-		                                year: date.getFullYear()
-		                            }];
-		                            if (this._o.mainCalendar === 'right') {
-		                                this.calendars[0].month += 1 - this._o.numberOfMonths;
-		                            }
-		                        }
-
-		                        this.adjustCalendars();
-		                    },
-
-		                    adjustDate: function (sign, days) {
-
-		                        var day = this.getDate() || new Date();
-		                        var difference = parseInt(days) * 24 * 60 * 60 * 1000;
-
-		                        var newDay;
-
-		                        if (sign === 'add') {
-		                            newDay = new Date(day.valueOf() + difference);
-		                        } else if (sign === 'subtract') {
-		                            newDay = new Date(day.valueOf() - difference);
-		                        }
-
-		                        this.setDate(newDay);
-		                    },
-
-		                    adjustCalendars: function () {
-		                        this.calendars[0] = adjustCalendar(this.calendars[0]);
-		                        for (var c = 1; c < this._o.numberOfMonths; c++) {
-		                            this.calendars[c] = adjustCalendar({
-		                                month: this.calendars[0].month + c,
-		                                year: this.calendars[0].year
-		                            });
-		                        }
-		                        this.draw();
-		                    },
-
-		                    gotoToday: function () {
-		                        this.gotoDate(new Date());
-		                    },
-
-		                    /**
-		                     * change view to a specific month (zero-index, e.g. 0: January)
-		                     */
-		                    gotoMonth: function (month) {
-		                        if (!isNaN(month)) {
-		                            this.calendars[0].month = parseInt(month, 10);
-		                            this.adjustCalendars();
-		                        }
-		                    },
-
-		                    nextMonth: function () {
-		                        this.calendars[0].month++;
-		                        this.adjustCalendars();
-		                    },
-
-		                    prevMonth: function () {
-		                        this.calendars[0].month--;
-		                        this.adjustCalendars();
-		                    },
-
-		                    /**
-		                     * change view to a specific full year (e.g. "2012")
-		                     */
-		                    gotoYear: function (year) {
-		                        if (!isNaN(year)) {
-		                            this.calendars[0].year = parseInt(year, 10);
-		                            this.adjustCalendars();
-		                        }
-		                    },
-
-		                    /**
-		                     * change the minDate
-		                     */
-		                    setMinDate: function (value) {
-		                        if (value instanceof Date) {
-		                            setToStartOfDay(value);
-		                            this._o.minDate = value;
-		                            this._o.minYear = value.getFullYear();
-		                            this._o.minMonth = value.getMonth();
-		                        } else {
-		                            this._o.minDate = defaults.minDate;
-		                            this._o.minYear = defaults.minYear;
-		                            this._o.minMonth = defaults.minMonth;
-		                            this._o.startRange = defaults.startRange;
-		                        }
-
-		                        this.draw();
-		                    },
-
-		                    /**
-		                     * change the maxDate
-		                     */
-		                    setMaxDate: function (value) {
-		                        if (value instanceof Date) {
-		                            setToStartOfDay(value);
-		                            this._o.maxDate = value;
-		                            this._o.maxYear = value.getFullYear();
-		                            this._o.maxMonth = value.getMonth();
-		                        } else {
-		                            this._o.maxDate = defaults.maxDate;
-		                            this._o.maxYear = defaults.maxYear;
-		                            this._o.maxMonth = defaults.maxMonth;
-		                            this._o.endRange = defaults.endRange;
-		                        }
-
-		                        this.draw();
-		                    },
-
-		                    setStartRange: function (value) {
-		                        this._o.startRange = value;
-		                    },
-
-		                    setEndRange: function (value) {
-		                        this._o.endRange = value;
-		                    },
-
-		                    /**
-		                     * refresh the HTML
-		                     */
-		                    draw: function (force) {
-		                        if (!this._v && !force) {
-		                            return;
-		                        }
-		                        var opts = this._o,
-		                            minYear = opts.minYear,
-		                            maxYear = opts.maxYear,
-		                            minMonth = opts.minMonth,
-		                            maxMonth = opts.maxMonth,
-		                            html = '',
-		                            randId;
-
-		                        if (this._y <= minYear) {
-		                            this._y = minYear;
-		                            if (!isNaN(minMonth) && this._m < minMonth) {
-		                                this._m = minMonth;
-		                            }
-		                        }
-		                        if (this._y >= maxYear) {
-		                            this._y = maxYear;
-		                            if (!isNaN(maxMonth) && this._m > maxMonth) {
-		                                this._m = maxMonth;
-		                            }
-		                        }
-
-		                        for (var c = 0; c < opts.numberOfMonths; c++) {
-		                            randId = 'pika-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2);
-		                            html += '<div class="pika-lendar">' + renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId) + '</div>';
-		                        }
-
-		                        this.el.innerHTML = html;
-
-		                        if (opts.bound) {
-		                            if (opts.field.type !== 'hidden') {
-		                                sto(function () {
-		                                    opts.trigger.focus();
-		                                }, 1);
-		                            }
-		                        }
-
-		                        if (typeof this._o.onDraw === 'function') {
-		                            this._o.onDraw(this);
-		                        }
-
-		                        if (opts.bound) {
-		                            // let the screen reader user know to use arrow keys
-		                            opts.field.setAttribute('aria-label', 'Use the arrow keys to pick a date');
-		                        }
-		                    },
-
-		                    adjustPosition: function () {
-		                        var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect;
-
-		                        if (this._o.container) return;
-
-		                        this.el.style.position = 'absolute';
-
-		                        field = this._o.trigger;
-		                        pEl = field;
-		                        width = this.el.offsetWidth;
-		                        height = this.el.offsetHeight;
-		                        viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-		                        viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-		                        scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
-
-		                        if (typeof field.getBoundingClientRect === 'function') {
-		                            clientRect = field.getBoundingClientRect();
-		                            left = clientRect.left + window.pageXOffset;
-		                            top = clientRect.bottom + window.pageYOffset;
-		                        } else {
-		                            left = pEl.offsetLeft;
-		                            top = pEl.offsetTop + pEl.offsetHeight;
-		                            while ((pEl = pEl.offsetParent)) {
-		                                left += pEl.offsetLeft;
-		                                top += pEl.offsetTop;
-		                            }
-		                        }
-
-		                        // default position is bottom & left
-		                        if ((this._o.reposition && left + width > viewportWidth) ||
-		                            (
-		                                this._o.position.indexOf('right') > -1 &&
-		                                left - width + field.offsetWidth > 0
-		                            )
-		                        ) {
-		                            left = left - width + field.offsetWidth;
-		                        }
-		                        if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
-		                            (
-		                                this._o.position.indexOf('top') > -1 &&
-		                                top - height - field.offsetHeight > 0
-		                            )
-		                        ) {
-		                            top = top - height - field.offsetHeight;
-		                        }
-
-		                        this.el.style.left = left + 'px';
-		                        this.el.style.top = top + 'px';
-		                    },
-
-		                    /**
-		                     * render HTML for a particular month
-		                     */
-		                    render: function (year, month, randId) {
-		                        var opts = this._o,
-		                            now = new Date(),
-		                            days = getDaysInMonth(year, month),
-		                            before = new Date(year, month, 1).getDay(),
-		                            data = [],
-		                            row = [];
-		                        setToStartOfDay(now);
-		                        if (opts.firstDay > 0) {
-		                            before -= opts.firstDay;
-		                            if (before < 0) {
-		                                before += 7;
-		                            }
-		                        }
-		                        var previousMonth = month === 0 ? 11 : month - 1,
-		                            nextMonth = month === 11 ? 0 : month + 1,
-		                            yearOfPreviousMonth = month === 0 ? year - 1 : year,
-		                            yearOfNextMonth = month === 11 ? year + 1 : year,
-		                            daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
-		                        var cells = days + before,
-		                            after = cells;
-		                        while (after > 7) {
-		                            after -= 7;
-		                        }
-		                        cells += 7 - after;
-		                        var isWeekSelected = false;
-		                        for (var i = 0, r = 0; i < cells; i++) {
-		                            var day = new Date(year, month, 1 + (i - before)),
-		                                isSelected = isDate(this._d) ? compareDates(day, this._d) : false,
-		                                isToday = compareDates(day, now),
-		                                hasEvent = opts.events.indexOf(day.toDateString()) !== -1 ? true : false,
-		                                isEmpty = i < before || i >= (days + before),
-		                                dayNumber = 1 + (i - before),
-		                                monthNumber = month,
-		                                yearNumber = year,
-		                                isStartRange = opts.startRange && compareDates(opts.startRange, day),
-		                                isEndRange = opts.endRange && compareDates(opts.endRange, day),
-		                                isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange,
-		                                isDisabled = (opts.minDate && day < opts.minDate) ||
-		                                    (opts.maxDate && day > opts.maxDate) ||
-		                                    (opts.disableWeekends && isWeekend(day)) ||
-		                                    (opts.disableDayFn && opts.disableDayFn(day));
-
-		                            if (isEmpty) {
-		                                if (i < before) {
-		                                    dayNumber = daysInPreviousMonth + dayNumber;
-		                                    monthNumber = previousMonth;
-		                                    yearNumber = yearOfPreviousMonth;
-		                                } else {
-		                                    dayNumber = dayNumber - days;
-		                                    monthNumber = nextMonth;
-		                                    yearNumber = yearOfNextMonth;
-		                                }
-		                            }
-
-		                            var dayConfig = {
-		                                day: dayNumber,
-		                                month: monthNumber,
-		                                year: yearNumber,
-		                                hasEvent: hasEvent,
-		                                isSelected: isSelected,
-		                                isToday: isToday,
-		                                isDisabled: isDisabled,
-		                                isEmpty: isEmpty,
-		                                isStartRange: isStartRange,
-		                                isEndRange: isEndRange,
-		                                isInRange: isInRange,
-		                                showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths,
-		                                enableSelectionDaysInNextAndPreviousMonths: opts.enableSelectionDaysInNextAndPreviousMonths
-		                            };
-
-		                            if (opts.pickWholeWeek && isSelected) {
-		                                isWeekSelected = true;
-		                            }
-
-		                            row.push(renderDay(dayConfig));
-
-		                            if (++r === 7) {
-		                                if (opts.showWeekNumber) {
-		                                    row.unshift(renderWeek(i - before, month, year));
-		                                }
-		                                data.push(renderRow(row, opts.isRTL, opts.pickWholeWeek, isWeekSelected));
-		                                row = [];
-		                                r = 0;
-		                                isWeekSelected = false;
-		                            }
-		                        }
-		                        return renderTable(opts, data, randId);
-		                    },
-
-		                    isVisible: function () {
-		                        return this._v;
-		                    },
-
-		                    show: function () {
-		                        if (!this.isVisible()) {
-		                            this._v = true;
-		                            this.draw();
-		                            removeClass(this.el, 'is-hidden');
-		                            if (this._o.bound) {
-		                                addEvent(document, 'click', this._onClick);
-		                                this.adjustPosition();
-		                            }
-		                            if (typeof this._o.onOpen === 'function') {
-		                                this._o.onOpen.call(this);
-		                            }
-		                        }
-		                    },
-
-		                    hide: function () {
-		                        var v = this._v;
-		                        if (v !== false) {
-		                            if (this._o.bound) {
-		                                removeEvent(document, 'click', this._onClick);
-		                            }
-		                            this.el.style.position = 'static'; // reset
-		                            this.el.style.left = 'auto';
-		                            this.el.style.top = 'auto';
-		                            addClass(this.el, 'is-hidden');
-		                            this._v = false;
-		                            if (v !== undefined && typeof this._o.onClose === 'function') {
-		                                this._o.onClose.call(this);
-		                            }
-		                        }
-		                    },
-
-		                    /**
-		                     * GAME OVER
-		                     */
-		                    destroy: function () {
-		                        var opts = this._o;
-
-		                        this.hide();
-		                        removeEvent(this.el, 'mousedown', this._onMouseDown, true);
-		                        removeEvent(this.el, 'touchend', this._onMouseDown, true);
-		                        removeEvent(this.el, 'change', this._onChange);
-		                        if (opts.keyboardInput) {
-		                            removeEvent(document, 'keydown', this._onKeyChange);
-		                        }
-		                        if (opts.field) {
-		                            removeEvent(opts.field, 'change', this._onInputChange);
-		                            if (opts.bound) {
-		                                removeEvent(opts.trigger, 'click', this._onInputClick);
-		                                removeEvent(opts.trigger, 'focus', this._onInputFocus);
-		                                removeEvent(opts.trigger, 'blur', this._onInputBlur);
-		                            }
-		                        }
-		                        if (this.el.parentNode) {
-		                            this.el.parentNode.removeChild(this.el);
-		                        }
-		                    }
-
-		                };
-
-		                return Pikaday;
-		            })); 
-	} (pikaday$1));
-	return pikaday$1.exports;
-}
-
-var pikadayExports = /*@__PURE__*/ requirePikaday();
-var Pikaday = /*@__PURE__*/getDefaultExportFromCjs(pikadayExports);
-
 // Ensure moment is available globally for Pikaday
 if (typeof window !== 'undefined') {
     window.moment = moment$1;
@@ -8656,7 +7502,30 @@ class DateTimeButton extends ChartComponent {
         this.pickerIsVisible = false;
     }
     buttonDateTimeFormat(millis) {
-        return Utils.timeFormat(!this.chartOptions.minutesForTimeLabels, !this.chartOptions.minutesForTimeLabels, this.chartOptions.offset, this.chartOptions.is24HourTime, 0, null, this.chartOptions.dateLocale)(millis);
+        const date = new Date(millis);
+        const locale = this.chartOptions.dateLocale || 'en-US';
+        const is24Hour = this.chartOptions.is24HourTime !== false;
+        const formatOptions = {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: !is24Hour
+        };
+        try {
+            if (this.chartOptions.offset && this.chartOptions.offset !== 'Local') {
+                formatOptions.timeZone = this.getTimezoneFromOffset(this.chartOptions.offset);
+            }
+            const baseFormat = date.toLocaleString(locale, formatOptions);
+            const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+            return `${baseFormat}.${milliseconds}`;
+        }
+        catch (error) {
+            console.warn(`Failed to format date for locale ${locale}:`, error);
+            return Utils.timeFormat(!this.chartOptions.minutesForTimeLabels, !this.chartOptions.minutesForTimeLabels, this.chartOptions.offset, this.chartOptions.is24HourTime, 0, null, this.chartOptions.dateLocale)(millis);
+        }
     }
     render(chartOptions, minMillis, maxMillis, onSet = null) {
         this.chartOptions.setOptions(chartOptions);
@@ -8676,11 +7545,22 @@ class DateTimeButton extends ChartComponent {
         }
         super.themify(d3__namespace.select(this.renderTarget), this.chartOptions.theme);
     }
+    getTimezoneFromOffset(offset) {
+        const timezoneMap = {
+            'UTC': 'UTC',
+            'EST': 'America/New_York',
+            'PST': 'America/Los_Angeles',
+            'CST': 'America/Chicago',
+            'MST': 'America/Denver'
+        };
+        return timezoneMap[offset] || 'UTC';
+    }
 }
 
 class DateTimeButtonRange extends DateTimeButton {
     constructor(renderTarget) {
         super(renderTarget);
+        this.clickOutsideHandler = null;
     }
     setButtonText(fromMillis, toMillis, isRelative, quickTime) {
         let fromString = this.buttonDateTimeFormat(fromMillis);
@@ -8700,10 +7580,38 @@ class DateTimeButtonRange extends DateTimeButton {
     onClose() {
         this.dateTimePickerContainer.style("display", "none");
         this.dateTimeButton.node().focus();
+        this.removeClickOutsideHandler();
+    }
+    removeClickOutsideHandler() {
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('click', this.clickOutsideHandler);
+            this.clickOutsideHandler = null;
+        }
+    }
+    setupClickOutsideHandler() {
+        // Remove any existing handler first
+        this.removeClickOutsideHandler();
+        // Add handler after a small delay to prevent the opening click from immediately closing the picker
+        setTimeout(() => {
+            this.clickOutsideHandler = (event) => {
+                const pickerElement = this.dateTimePickerContainer.node();
+                const buttonElement = this.dateTimeButton.node();
+                const target = event.target;
+                // Check if click is outside both the picker and the button
+                if (pickerElement && buttonElement &&
+                    !pickerElement.contains(target) &&
+                    !buttonElement.contains(target)) {
+                    this.onClose();
+                }
+            };
+            document.addEventListener('click', this.clickOutsideHandler);
+        }, 0);
     }
     render(chartOptions = {}, minMillis, maxMillis, fromMillis = null, toMillis = null, onSet = null, onCancel = null) {
         super.render(chartOptions, minMillis, maxMillis, onSet);
-        d3__namespace.select(this.renderTarget).classed('tsi-dateTimeContainerRange', true);
+        let container = d3__namespace.select(this.renderTarget);
+        container.classed('tsi-dateTimeContainerRange', true);
+        container.style('position', 'relative');
         this.fromMillis = fromMillis;
         this.toMillis = toMillis;
         this.onCancel = onCancel ? onCancel : () => { };
@@ -8729,6 +7637,7 @@ class DateTimeButtonRange extends DateTimeButton {
                     this.onClose();
                     this.onCancel();
                 });
+                this.setupClickOutsideHandler();
             }
         });
     }
@@ -12443,7 +11352,7 @@ class ModelAutocomplete extends Component {
         super(renderTarget);
         this.chartOptions = new ChartOptions(); // TODO handle onkeyup and oninput in chart options
     }
-    render(environmentFqdn, getToken, chartOptions) {
+    render(chartOptions) {
         this.chartOptions.setOptions(chartOptions);
         let targetElement = d3__namespace.select(this.renderTarget);
         targetElement.html("");
@@ -12797,20 +11706,102 @@ class TsqExpression extends ChartDataOptions {
     }
 }
 
+// Centralized renderer for the hierarchy tree. Keeps a stable D3 data-join and
+// updates existing DOM nodes instead of fully recreating them on each render.
+class TreeRenderer {
+    static render(owner, data, target) {
+        // Ensure an <ul> exists for this target (one list per level)
+        let list = target.select('ul');
+        if (list.empty()) {
+            list = target.append('ul').attr('role', target === owner.hierarchyElem ? 'tree' : 'group');
+        }
+        const entries = Object.keys(data).map(k => ({ key: k, item: data[k] }));
+        const liSelection = list.selectAll('li').data(entries, (d) => d && d.key);
+        liSelection.exit().remove();
+        const liEnter = liSelection.enter().append('li')
+            .attr('role', 'none')
+            .classed('tsi-leaf', (d) => !!d.item.isLeaf);
+        const liMerged = liEnter.merge(liSelection);
+        const setSize = entries.length;
+        liMerged.each((d, i, nodes) => {
+            const entry = d;
+            const li = d3__namespace.select(nodes[i]);
+            if (owner.selectedIds && owner.selectedIds.includes(entry.item.id)) {
+                li.classed('tsi-selected', true);
+            }
+            else {
+                li.classed('tsi-selected', false);
+            }
+            // determine instance vs hierarchy node by presence of isLeaf flag
+            const isInstance = !!entry.item.isLeaf;
+            const nodeNameToCheckIfExists = isInstance ? owner.instanceNodeString(entry.item) : entry.key;
+            const displayName = (entry.item && (entry.item.displayName || nodeNameToCheckIfExists)) || nodeNameToCheckIfExists;
+            li.attr('data-display-name', displayName);
+            let itemElem = li.select('.tsi-hierarchyItem');
+            if (itemElem.empty()) {
+                const newListElem = owner.createHierarchyItemElem(entry.item, entry.key);
+                li.node().appendChild(newListElem.node());
+                itemElem = li.select('.tsi-hierarchyItem');
+            }
+            itemElem.attr('aria-label', isInstance ? owner.getAriaLabel(entry.item) : entry.key);
+            itemElem.attr('title', isInstance ? owner.getAriaLabel(entry.item) : entry.key);
+            itemElem.attr('aria-expanded', String(entry.item.isExpanded));
+            // accessibility: set treeitem level and position in set
+            const ariaLevel = String(((entry.item && typeof entry.item.level === 'number') ? entry.item.level : 0) + 1);
+            itemElem.attr('aria-level', ariaLevel);
+            itemElem.attr('aria-posinset', String(i + 1));
+            itemElem.attr('aria-setsize', String(setSize));
+            if (!isInstance) {
+                itemElem.select('.tsi-caret-icon').attr('style', `left: ${(entry.item.level) * 18 + 20}px`);
+                itemElem.select('.tsi-name').text(entry.key);
+                itemElem.select('.tsi-instanceCount').text(entry.item.cumulativeInstanceCount);
+            }
+            else {
+                const nameSpan = itemElem.select('.tsi-name');
+                nameSpan.html('');
+                Utils.appendFormattedElementsFromString(nameSpan, owner.instanceNodeStringToDisplay(entry.item));
+            }
+            entry.item.node = li;
+            if (entry.item.children) {
+                entry.item.isExpanded = true;
+                li.classed('tsi-expanded', true);
+                // recurse using TreeRenderer to keep rendering logic centralized
+                TreeRenderer.render(owner, entry.item.children, li);
+            }
+            else {
+                li.classed('tsi-expanded', false);
+                li.selectAll('ul').remove();
+            }
+        });
+    }
+}
+
 class HierarchyNavigation extends Component {
     constructor(renderTarget) {
         super(renderTarget);
         this.path = [];
+        // debounce + request cancellation fields
+        this.debounceTimer = null;
+        this.debounceDelay = 250; // ms
+        this.requestCounter = 0; // increments for each outgoing request
+        this.latestRequestId = 0; // id of the most recent request
         //selectedIds
         this.selectedIds = [];
         this.searchEnabled = true;
-        this.renderSearchResult = (r, payload, target) => {
+        this.autocompleteEnabled = true; // Enable/disable autocomplete suggestions
+        // Search mode state
+        this.isSearchMode = false;
+        // Paths that should be auto-expanded (Set of path strings like "Factory North/Building A")
+        this.pathsToAutoExpand = new Set();
+        this.renderSearchResult = async (r, payload, target) => {
             const hierarchyData = r.hierarchyNodes?.hits?.length
                 ? this.fillDataRecursively(r.hierarchyNodes, payload, payload)
                 : {};
             const instancesData = r.instances?.hits?.length
                 ? r.instances.hits.reduce((acc, i) => {
-                    acc[this.instanceNodeIdentifier(i)] = new InstanceNode(i.timeSeriesId, i.name, payload.path.length - this.path.length, i.id, i.description);
+                    const inst = new InstanceNode(i.timeSeriesId, i.name, payload.path.length - this.path.length, i.id, i.description);
+                    inst.displayName = this.instanceNodeStringToDisplay(i) || '';
+                    acc[this.instanceNodeIdentifier(i)] = inst;
                     return acc;
                 }, {})
                 : {};
@@ -12821,7 +11812,17 @@ class HierarchyNavigation extends Component {
                 }
                 hitCountElem.text(r.hierarchyNodes.hitCount);
             }
-            this.renderTree({ ...hierarchyData, ...instancesData }, target);
+            const merged = { ...hierarchyData, ...instancesData };
+            this.renderTree(merged, target);
+            // Auto-expand nodes that should be expanded and load their children
+            for (const key in hierarchyData) {
+                const node = hierarchyData[key];
+                if (node.isExpanded && !node.children) {
+                    // This node should be expanded but doesn't have children loaded yet
+                    // We need to trigger expansion after the node is rendered
+                    await this.autoExpandNode(node);
+                }
+            }
         };
         this.hierarchyNodeIdentifier = (hName) => {
             return hName ? hName : '(' + this.getString("Empty") + ')';
@@ -12843,12 +11844,20 @@ class HierarchyNavigation extends Component {
         const targetElement = d3__namespace.select(this.renderTarget).text('');
         this.hierarchyNavWrapper = this.createHierarchyNavWrapper(targetElement);
         this.selectedIds = preselectedIds;
+        // Allow disabling autocomplete via options
+        if (hierarchyNavOptions.autocompleteEnabled !== undefined) {
+            this.autocompleteEnabled = hierarchyNavOptions.autocompleteEnabled;
+        }
+        // Pre-compute paths that need to be auto-expanded for preselected instances
+        if (preselectedIds && preselectedIds.length > 0) {
+            await this.computePathsToAutoExpand(preselectedIds);
+        }
         //render search wrapper
-        //this.renderSearchBox()
+        this.renderSearchBox();
         super.themify(this.hierarchyNavWrapper, this.chartOptions.theme);
         const results = this.createResultsWrapper(this.hierarchyNavWrapper);
         this.hierarchyElem = this.createHierarchyElem(results);
-        this.pathSearchAndRenderResult({ search: { payload: this.requestPayload() }, render: { target: this.hierarchyElem } });
+        await this.pathSearchAndRenderResult({ search: { payload: this.requestPayload() }, render: { target: this.hierarchyElem } });
     }
     createHierarchyNavWrapper(targetElement) {
         return targetElement.append('div').attr('class', 'tsi-hierarchy-nav-wrapper');
@@ -12856,8 +11865,129 @@ class HierarchyNavigation extends Component {
     createResultsWrapper(hierarchyNavWrapper) {
         return hierarchyNavWrapper.append('div').classed('tsi-hierarchy-or-list-wrapper', true);
     }
+    // create hierarchy container and attach keyboard handler
     createHierarchyElem(results) {
-        return results.append('div').classed('tsi-hierarchy', true).attr("role", "navigation").on('scroll', () => { });
+        const sel = results.append('div').classed('tsi-hierarchy', true).attr("role", "navigation").on('scroll', () => { });
+        // attach keydown listener for keyboard navigation (delegated)
+        // use native event to preserve focus handling
+        const node = sel.node();
+        if (node) {
+            node.addEventListener('keydown', (ev) => this.onKeyDown(ev));
+        }
+        return sel;
+    }
+    // Keyboard navigation handlers and helpers
+    onKeyDown(ev) {
+        const key = ev.key;
+        const active = document.activeElement;
+        const container = this.hierarchyElem?.node();
+        if (!container)
+            return;
+        const isInside = active && container.contains(active);
+        if (!isInside && (key === 'ArrowDown' || key === 'ArrowUp')) {
+            // focus first visible item on navigation keys
+            const visible = this.getVisibleItemElems();
+            if (visible.length) {
+                this.focusItem(visible[0]);
+                ev.preventDefault();
+            }
+            return;
+        }
+        if (!active)
+            return;
+        const current = active.classList && active.classList.contains('tsi-hierarchyItem') ? active : active.closest('.tsi-hierarchyItem');
+        if (!current)
+            return;
+        switch (key) {
+            case 'ArrowDown':
+                this.focusNext(current);
+                ev.preventDefault();
+                break;
+            case 'ArrowUp':
+                this.focusPrev(current);
+                ev.preventDefault();
+                break;
+            case 'ArrowRight':
+                this.handleArrowRight(current);
+                ev.preventDefault();
+                break;
+            case 'ArrowLeft':
+                this.handleArrowLeft(current);
+                ev.preventDefault();
+                break;
+            case 'Enter':
+            case ' ':
+                // activate (toggle expand or select)
+                current.click();
+                ev.preventDefault();
+                break;
+        }
+    }
+    getVisibleItemElems() {
+        if (!this.hierarchyElem)
+            return [];
+        const root = this.hierarchyElem.node();
+        if (!root)
+            return [];
+        const items = Array.from(root.querySelectorAll('.tsi-hierarchyItem'));
+        return items.filter(i => i.offsetParent !== null && getComputedStyle(i).display !== 'none');
+    }
+    focusItem(elem) {
+        if (!this.hierarchyElem)
+            return;
+        const root = this.hierarchyElem.node();
+        if (!root)
+            return;
+        const items = Array.from(root.querySelectorAll('.tsi-hierarchyItem'));
+        items.forEach(i => i.setAttribute('tabindex', '-1'));
+        elem.setAttribute('tabindex', '0');
+        elem.focus();
+    }
+    focusNext(current) {
+        const visible = this.getVisibleItemElems();
+        const idx = visible.indexOf(current);
+        if (idx >= 0 && idx < visible.length - 1) {
+            this.focusItem(visible[idx + 1]);
+        }
+    }
+    focusPrev(current) {
+        const visible = this.getVisibleItemElems();
+        const idx = visible.indexOf(current);
+        if (idx > 0) {
+            this.focusItem(visible[idx - 1]);
+        }
+    }
+    handleArrowRight(current) {
+        const caret = current.querySelector('.tsi-caret-icon');
+        const expanded = current.getAttribute('aria-expanded') === 'true';
+        if (caret && !expanded) {
+            // expand
+            current.click();
+            return;
+        }
+        // if already expanded, move to first child
+        if (caret && expanded) {
+            const li = current.closest('li');
+            const childLi = li?.querySelector('ul > li');
+            const childItem = childLi?.querySelector('.tsi-hierarchyItem');
+            if (childItem)
+                this.focusItem(childItem);
+        }
+    }
+    handleArrowLeft(current) {
+        const caret = current.querySelector('.tsi-caret-icon');
+        const expanded = current.getAttribute('aria-expanded') === 'true';
+        if (caret && expanded) {
+            // collapse
+            current.click();
+            return;
+        }
+        // move focus to parent
+        const li = current.closest('li');
+        const parentLi = li?.parentElement?.closest('li');
+        const parentItem = parentLi?.querySelector('.tsi-hierarchyItem');
+        if (parentItem)
+            this.focusItem(parentItem);
     }
     // prepares the parameters for search request
     requestPayload(hierarchy = null) {
@@ -12866,32 +11996,7 @@ class HierarchyNavigation extends Component {
     }
     // renders tree for both 'Navigate' and 'Filter' mode (with Hierarchy View option selected), locInTarget refers to the 'show more' element -either hierarchy or instance- within the target
     renderTree(data, target) {
-        let list = target.append('ul').attr("role", target === this.hierarchyElem ? "tree" : "group");
-        Object.keys(data).forEach(el => {
-            let nodeNameToCheckIfExists = data[el] instanceof InstanceNode ? this.instanceNodeString(data[el]) : el;
-            let li;
-            if (list.selectAll(".tsi-name").nodes().find(e => e.innerText === nodeNameToCheckIfExists)) {
-                li = null;
-            }
-            else {
-                li = list.append('li').classed('tsi-leaf', data[el].isLeaf);
-                //if the node is already selected, we want to highlight it
-                if (this.selectedIds && this.selectedIds.includes(data[el].id)) {
-                    li.classed('tsi-selected', true);
-                }
-            }
-            if (!li)
-                return;
-            li.attr("role", "none");
-            let newListElem = this.createHierarchyItemElem(data[el], el);
-            li.node().appendChild(newListElem.node());
-            data[el].node = li;
-            if (data[el].children) {
-                data[el].isExpanded = true;
-                data[el].node.classed('tsi-expanded', true);
-                this.renderTree(data[el].children, data[el].node);
-            }
-        });
+        TreeRenderer.render(this, data, target);
     }
     renderSearchBox() {
         this.searchWrapperElem = this.hierarchyNavWrapper.append('div').classed('tsi-hierarchy-search', true);
@@ -12900,40 +12005,140 @@ class HierarchyNavigation extends Component {
         let input = inputWrapper
             .append("input")
             .attr("class", "tsi-searchInput")
-            .attr("aria-label", this.getString("Search Time Series Instances"))
-            .attr("aria-describedby", "tsi-search-desc")
+            .attr("aria-label", this.getString("Search"))
+            .attr("aria-describedby", "tsi-hierarchy-search-desc")
             .attr("role", "combobox")
             .attr("aria-owns", "tsi-search-results")
             .attr("aria-expanded", "false")
             .attr("aria-haspopup", "listbox")
-            .attr("placeholder", this.getString("Search Time Series Instances") + "...");
+            .attr("placeholder", this.getString("Search") + "...");
+        // Add ARIA description for screen readers
+        inputWrapper
+            .append("span")
+            .attr("id", "tsi-hierarchy-search-desc")
+            .style("display", "none")
+            .text(this.getString("Search suggestion instruction") || "Use arrow keys to navigate suggestions");
+        // Add live region for search results info
+        inputWrapper
+            .append("div")
+            .attr("class", "tsi-search-results-info")
+            .attr("aria-live", "assertive");
+        // Add clear button
+        let clear = inputWrapper
+            .append("div")
+            .attr("class", "tsi-clear")
+            .attr("tabindex", "0")
+            .attr("role", "button")
+            .attr("aria-label", "Clear Search")
+            .on("click keydown", function (event) {
+            if (Utils.isKeyDownAndNotEnter(event)) {
+                return;
+            }
+            input.node().value = "";
+            self.exitSearchMode();
+            self.ap.close();
+            d3__namespace.select(this).classed("tsi-shown", false);
+        });
+        // Initialize Awesomplete for autocomplete (only if enabled)
+        let Awesomplete = window.Awesomplete;
+        if (this.autocompleteEnabled && Awesomplete) {
+            this.ap = new Awesomplete(input.node(), {
+                minChars: 1,
+                maxItems: 10,
+                autoFirst: true
+            });
+        }
+        else {
+            // Create a dummy object if autocomplete is disabled
+            this.ap = {
+                list: [],
+                close: () => { },
+                evaluate: () => { }
+            };
+        }
         let self = this;
+        let noSuggest = false;
+        let justAwesompleted = false;
+        // Handle autocomplete selection (only if enabled)
+        if (this.autocompleteEnabled) {
+            input.node().addEventListener("awesomplete-selectcomplete", (event) => {
+                noSuggest = true;
+                const selectedValue = event.text.value;
+                // Trigger search with selected value
+                self.performDeepSearch(selectedValue);
+                justAwesompleted = true;
+            });
+        }
         input.on("keydown", (event) => {
+            // Handle ESC key to clear the search box
+            if (event.key === 'Escape') {
+                const inputElement = event.target;
+                inputElement.value = '';
+                // Trigger input event to clear search results
+                self.exitSearchMode();
+                self.ap.close();
+                clear.classed("tsi-shown", false);
+                return;
+            }
             this.chartOptions.onKeydown(event, this.ap);
         });
-        var searchText;
+        input.node().addEventListener("keyup", function (event) {
+            if (justAwesompleted) {
+                justAwesompleted = false;
+                return;
+            }
+            let key = event.which || event.keyCode;
+            if (key === 13) {
+                noSuggest = true;
+            }
+        });
+        // Debounced input handler to reduce work while typing
         input.on("input", function (event) {
-            searchText = event.target.value;
-            if (searchText.length === 0) {
-                //clear the tree
-                self.hierarchyElem.selectAll('ul').remove();
-                self.pathSearchAndRenderResult({ search: { payload: self.requestPayload() }, render: { target: self.hierarchyElem } });
+            const val = event.target.value;
+            // always clear existing timer
+            if (self.debounceTimer) {
+                clearTimeout(self.debounceTimer);
+                self.debounceTimer = null;
+            }
+            // Show/hide clear button
+            clear.classed("tsi-shown", val.length > 0);
+            if (!val || val.length === 0) {
+                // Exit search mode and restore navigation view
+                self.exitSearchMode();
+                self.ap.close();
+                return;
+            }
+            // Populate autocomplete suggestions with instance leaves (only if enabled)
+            if (self.autocompleteEnabled && !noSuggest && val.length >= 1) {
+                self.fetchAutocompleteSuggestions(val);
             }
             else {
-                //filter the tree
-                self.filterTree(searchText);
+                self.ap.close();
             }
+            // Use deep search for comprehensive results
+            self.debounceTimer = setTimeout(() => {
+                self.performDeepSearch(val);
+            }, self.debounceDelay);
+            noSuggest = false;
         });
     }
     async pathSearchAndRenderResult({ search: { payload, bubbleUpReject = false }, render: { target, locInTarget = null } }) {
+        const requestId = ++this.requestCounter;
+        this.latestRequestId = requestId;
         try {
             const result = await this.searchFunction(payload);
+            if (requestId !== this.latestRequestId) {
+                return;
+            }
             if (result.error) {
                 throw result.error;
             }
-            this.renderSearchResult(result, payload, target);
+            await this.renderSearchResult(result, payload, target);
         }
         catch (err) {
+            if (requestId !== this.latestRequestId) {
+                return;
+            }
             this.chartOptions.onError("Error in hierarchy navigation", "Failed to complete search", err instanceof XMLHttpRequest ? err : null);
             if (bubbleUpReject) {
                 throw err;
@@ -12941,11 +12146,18 @@ class HierarchyNavigation extends Component {
         }
     }
     filterTree(searchText) {
-        let tree = this.hierarchyElem.selectAll('ul').nodes()[0];
-        let list = tree.querySelectorAll('li');
+        const nodes = this.hierarchyElem.selectAll('ul').nodes();
+        if (!nodes || !nodes.length)
+            return;
+        const tree = nodes[0];
+        if (!tree)
+            return;
+        const list = tree.querySelectorAll('li');
+        const needle = searchText.toLowerCase();
         list.forEach((li) => {
-            let name = li.querySelector('.tsi-name').innerText;
-            if (name.toLowerCase().includes(searchText.toLowerCase())) {
+            const attrName = li.getAttribute('data-display-name');
+            let name = attrName && attrName.length ? attrName : (li.querySelector('.tsi-name')?.textContent || '');
+            if (name.toLowerCase().includes(needle)) {
                 li.style.display = 'block';
             }
             else {
@@ -12953,11 +12165,300 @@ class HierarchyNavigation extends Component {
             }
         });
     }
+    // Fetch autocomplete suggestions for instances (leaves)
+    async fetchAutocompleteSuggestions(searchText) {
+        if (!searchText || searchText.length < 1) {
+            this.ap.list = [];
+            return;
+        }
+        try {
+            // Call server search to get instance suggestions
+            const payload = {
+                path: this.path,
+                searchTerm: searchText,
+                recursive: true,
+                includeInstances: true,
+                // Limit results for autocomplete
+                maxResults: 10
+            };
+            const results = await this.searchFunction(payload);
+            if (results.error) {
+                this.ap.list = [];
+                return;
+            }
+            // Extract instance names for autocomplete suggestions
+            const suggestions = [];
+            if (results.instances?.hits) {
+                results.instances.hits.forEach((i) => {
+                    const displayName = this.instanceNodeStringToDisplay(i);
+                    const pathStr = i.hierarchyPath && i.hierarchyPath.length > 0
+                        ? i.hierarchyPath.join(' > ') + ' > '
+                        : '';
+                    suggestions.push({
+                        label: pathStr + displayName,
+                        value: displayName
+                    });
+                });
+            }
+            // Update Awesomplete list
+            this.ap.list = suggestions;
+        }
+        catch (err) {
+            // Silently fail for autocomplete - don't interrupt user experience
+            this.ap.list = [];
+        }
+    }
+    // Perform deep search across entire hierarchy using server-side search
+    async performDeepSearch(searchText) {
+        if (!searchText || searchText.length < 2) {
+            this.exitSearchMode();
+            return;
+        }
+        this.isSearchMode = true;
+        const requestId = ++this.requestCounter;
+        this.latestRequestId = requestId;
+        try {
+            // Call server search with recursive flag
+            const payload = {
+                path: this.path,
+                searchTerm: searchText,
+                recursive: true, // Search entire subtree
+                includeInstances: true
+            };
+            const results = await this.searchFunction(payload);
+            if (requestId !== this.latestRequestId)
+                return; // Stale request
+            if (results.error) {
+                throw results.error;
+            }
+            // Render search results in flat list view
+            this.renderSearchResults(results, searchText);
+        }
+        catch (err) {
+            if (requestId !== this.latestRequestId)
+                return;
+            this.chartOptions.onError("Search failed", "Unable to search hierarchy", err instanceof XMLHttpRequest ? err : null);
+        }
+    }
+    // Render search results with breadcrumb paths
+    renderSearchResults(results, searchText) {
+        this.hierarchyElem.selectAll('*').remove();
+        const flatResults = [];
+        // Flatten hierarchy results with full paths
+        if (results.hierarchyNodes?.hits) {
+            results.hierarchyNodes.hits.forEach((h) => {
+                flatResults.push({
+                    type: 'hierarchy',
+                    name: h.name,
+                    path: h.path || [],
+                    id: h.id,
+                    cumulativeInstanceCount: h.cumulativeInstanceCount,
+                    highlightedName: this.highlightMatch(h.name, searchText),
+                    node: h
+                });
+            });
+        }
+        // Flatten instance results with full paths
+        if (results.instances?.hits) {
+            results.instances.hits.forEach((i) => {
+                const displayName = this.instanceNodeStringToDisplay(i);
+                flatResults.push({
+                    type: 'instance',
+                    name: i.name,
+                    path: i.hierarchyPath || [],
+                    id: i.id,
+                    timeSeriesId: i.timeSeriesId,
+                    description: i.description,
+                    highlightedName: this.highlightMatch(displayName, searchText),
+                    node: i
+                });
+            });
+        }
+        // Render flat list with breadcrumbs
+        const searchList = this.hierarchyElem
+            .append('div')
+            .classed('tsi-search-results', true);
+        if (flatResults.length === 0) {
+            searchList.append('div')
+                .classed('tsi-noResults', true)
+                .text(this.getString('No results'));
+            return;
+        }
+        searchList.append('div')
+            .classed('tsi-search-results-header', true)
+            .html(`<strong>${flatResults.length}</strong> ${this.getString('results found') || 'results found'}`);
+        const resultItems = searchList.selectAll('.tsi-search-result-item')
+            .data(flatResults)
+            .enter()
+            .append('div')
+            .classed('tsi-search-result-item', true)
+            .attr('tabindex', '0')
+            .attr('role', 'option')
+            .attr('aria-label', (d) => {
+            const pathStr = d.path.length > 0 ? d.path.join(' > ') + ' > ' : '';
+            return pathStr + d.name;
+        });
+        const self = this;
+        resultItems.each(function (d) {
+            const item = d3__namespace.select(this);
+            // Breadcrumb path
+            if (d.path.length > 0) {
+                item.append('div')
+                    .classed('tsi-search-breadcrumb', true)
+                    .text(d.path.join(' > '));
+            }
+            // Highlighted name
+            item.append('div')
+                .classed('tsi-search-result-name', true)
+                .html(d.highlightedName);
+            // Instance description or count
+            if (d.type === 'instance' && d.description) {
+                item.append('div')
+                    .classed('tsi-search-result-description', true)
+                    .text(d.description);
+            }
+            else if (d.type === 'hierarchy') {
+                item.append('div')
+                    .classed('tsi-search-result-count', true)
+                    .text(`${d.cumulativeInstanceCount || 0} instances`);
+            }
+        });
+        // Click handlers
+        resultItems.on('click keydown', function (event, d) {
+            if (Utils.isKeyDownAndNotEnter(event))
+                return;
+            if (d.type === 'instance') {
+                // Handle instance selection
+                if (self.chartOptions.onInstanceClick) {
+                    const inst = new InstanceNode(d.timeSeriesId, d.name, d.path.length, d.id, d.description);
+                    // Update selection state
+                    if (self.selectedIds && self.selectedIds.includes(d.id)) {
+                        self.selectedIds = self.selectedIds.filter(id => id !== d.id);
+                        d3__namespace.select(this).classed('tsi-selected', false);
+                    }
+                    else {
+                        self.selectedIds.push(d.id);
+                        d3__namespace.select(this).classed('tsi-selected', true);
+                    }
+                    self.chartOptions.onInstanceClick(inst);
+                }
+            }
+            else {
+                // Navigate to hierarchy node - exit search and expand to that path
+                self.navigateToPath(d.path);
+            }
+        });
+        // Apply selection state to already-selected instances
+        resultItems.each(function (d) {
+            if (d.type === 'instance' && self.selectedIds && self.selectedIds.includes(d.id)) {
+                d3__namespace.select(this).classed('tsi-selected', true);
+            }
+        });
+    }
+    // Exit search mode and restore tree
+    exitSearchMode() {
+        this.isSearchMode = false;
+        this.hierarchyElem.selectAll('*').remove();
+        this.pathSearchAndRenderResult({
+            search: { payload: this.requestPayload() },
+            render: { target: this.hierarchyElem }
+        });
+    }
+    // Navigate to a specific path in the hierarchy
+    async navigateToPath(targetPath) {
+        this.exitSearchMode();
+        // For now, just exit search mode and return to root
+        // In a more advanced implementation, this would progressively
+        // expand nodes along the path to reveal the target
+        // This would require waiting for each level to load before expanding the next
+    }
+    // Pre-compute which paths need to be auto-expanded for preselected instances
+    async computePathsToAutoExpand(instanceIds) {
+        if (!instanceIds || instanceIds.length === 0) {
+            return;
+        }
+        //        console.log('[HierarchyNavigation] Computing paths to auto-expand for:', instanceIds);
+        try {
+            this.pathsToAutoExpand.clear();
+            for (const instanceId of instanceIds) {
+                // Search for this specific instance
+                const result = await this.searchFunction({
+                    path: this.path,
+                    searchTerm: instanceId,
+                    recursive: true,
+                    includeInstances: true
+                });
+                if (result?.instances?.hits) {
+                    for (const instance of result.instances.hits) {
+                        // Match by ID
+                        if (instance.id === instanceId ||
+                            (instance.id && instance.id.includes(instanceId))) {
+                            if (instance.hierarchyPath && instance.hierarchyPath.length > 0) {
+                                // Add all parent paths that need to be expanded
+                                const hierarchyPath = instance.hierarchyPath;
+                                for (let i = 1; i <= hierarchyPath.length; i++) {
+                                    const pathArray = hierarchyPath.slice(0, i);
+                                    const pathKey = pathArray.join('/');
+                                    this.pathsToAutoExpand.add(pathKey);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            // console.log('[HierarchyNavigation] Paths to auto-expand:', Array.from(this.pathsToAutoExpand));
+        }
+        catch (err) {
+            console.warn('Failed to compute paths to auto-expand:', err);
+        }
+    }
+    // Check if a path should be auto-expanded
+    shouldAutoExpand(pathArray) {
+        if (this.pathsToAutoExpand.size === 0) {
+            return false;
+        }
+        const pathKey = pathArray.join('/');
+        return this.pathsToAutoExpand.has(pathKey);
+    }
+    // Auto-expand a node by triggering its expand function
+    async autoExpandNode(node) {
+        if (!node || !node.expand || !node.node) {
+            return;
+        }
+        try {
+            // Wait for the DOM node to be available
+            await new Promise(resolve => setTimeout(resolve, 10));
+            // Mark as expanded visually
+            node.node.classed('tsi-expanded', true);
+            // Call the expand function to load children
+            await node.expand();
+            // console.log(`[HierarchyNavigation] Auto-expanded node: ${node.path.join('/')}`);
+        }
+        catch (err) {
+            console.warn(`Failed to auto-expand node ${node.path.join('/')}:`, err);
+        }
+    }
+    // Highlight search term in text
+    highlightMatch(text, searchTerm) {
+        if (!text)
+            return '';
+        const escapedTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(`(${escapedTerm})`, 'gi');
+        return text.replace(regex, '<mark>$1</mark>');
+    }
     // creates in-depth data object using the server response for hierarchyNodes to show in the tree all expanded, considering UntilChildren
     fillDataRecursively(hierarchyNodes, payload, payloadForContinuation = null) {
         let data = {};
         hierarchyNodes.hits.forEach((h) => {
             let hierarchy = new HierarchyNode(h.name, payload.path, payload.path.length - this.path.length, h.cumulativeInstanceCount, h.id);
+            // cache display name on node for client-side filtering
+            hierarchy.displayName = h.name || '';
+            // Check if this path should be auto-expanded
+            const shouldExpand = this.shouldAutoExpand(hierarchy.path);
+            if (shouldExpand) {
+                hierarchy.isExpanded = true;
+                //console.log(`[HierarchyNavigation] Auto-expanding node: ${hierarchy.path.join('/')}`);
+            }
             hierarchy.expand = () => {
                 hierarchy.isExpanded = true;
                 hierarchy.node.classed('tsi-expanded', true);
@@ -12981,7 +12482,7 @@ class HierarchyNavigation extends Component {
             .attr('style', `padding-left: ${hORi.isLeaf ? hORi.level * 18 + 20 : (hORi.level + 1) * 18 + 20}px`)
             .attr('tabindex', 0)
             //.attr('arialabel', isHierarchyNode ? key : Utils.getTimeSeriesIdString(hORi))
-            .attr('arialabel', isHierarchyNode ? key : self.getAriaLabel(hORi))
+            .attr('aria-label', isHierarchyNode ? key : self.getAriaLabel(hORi))
             .attr('title', isHierarchyNode ? key : self.getAriaLabel(hORi))
             .attr("role", "treeitem").attr('aria-expanded', hORi.isExpanded)
             .on('click keydown', async function (event) {
@@ -13033,6 +12534,8 @@ class HierarchyNavigation extends Component {
         return hORi.description || hORi.name || hORi.id || Utils.getTimeSeriesIdString(hORi);
     }
 }
+// TreeRenderer has been moved to its own module: ./TreeRenderer
+// The rendering logic was extracted to reduce file size and improve testability.
 class HierarchyNode {
     constructor(name, parentPath, level, cumulativeInstanceCount = null, id = null) {
         this.name = name;
@@ -13277,6 +12780,7 @@ class SingleDateTimePicker extends ChartComponent {
 class DateTimeButtonSingle extends DateTimeButton {
     constructor(renderTarget) {
         super(renderTarget);
+        this.clickOutsideHandler = null;
         this.sDTPOnSet = (millis = null) => {
             if (millis !== null) {
                 this.dateTimeButton.text(this.buttonDateTimeFormat(millis));
@@ -13289,6 +12793,32 @@ class DateTimeButtonSingle extends DateTimeButton {
     closeSDTP() {
         this.dateTimePickerContainer.style("display", "none");
         this.dateTimeButton.node().focus();
+        this.removeClickOutsideHandler();
+    }
+    removeClickOutsideHandler() {
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('click', this.clickOutsideHandler);
+            this.clickOutsideHandler = null;
+        }
+    }
+    setupClickOutsideHandler() {
+        // Remove any existing handler first
+        this.removeClickOutsideHandler();
+        // Add handler after a small delay to prevent the opening click from immediately closing the picker
+        setTimeout(() => {
+            this.clickOutsideHandler = (event) => {
+                const pickerElement = this.dateTimePickerContainer.node();
+                const buttonElement = this.dateTimeButton.node();
+                const target = event.target;
+                // Check if click is outside both the picker and the button
+                if (pickerElement && buttonElement &&
+                    !pickerElement.contains(target) &&
+                    !buttonElement.contains(target)) {
+                    this.closeSDTP();
+                }
+            };
+            document.addEventListener('click', this.clickOutsideHandler);
+        }, 0);
     }
     render(chartOptions = {}, minMillis, maxMillis, selectedMillis = null, onSet = null) {
         super.render(chartOptions, minMillis, maxMillis, onSet);
@@ -13298,12 +12828,11 @@ class DateTimeButtonSingle extends DateTimeButton {
         if (!this.dateTimePicker) {
             this.dateTimePicker = new SingleDateTimePicker(this.dateTimePickerContainer.node());
         }
-        let targetElement = d3__namespace.select(this.renderTarget);
-        (targetElement.select(".tsi-dateTimePickerContainer")).selectAll("*");
         this.dateTimeButton.on("click", () => {
             this.chartOptions.dTPIsModal = true;
             this.dateTimePickerContainer.style("display", "block");
             this.dateTimePicker.render(this.chartOptions, this.minMillis, this.maxMillis, this.selectedMillis, this.sDTPOnSet);
+            this.setupClickOutsideHandler();
         });
     }
 }
@@ -13601,8 +13130,16 @@ class ProcessGraphic extends HistoryPlayback {
 class PlaybackControls extends Component {
     constructor(renderTarget, initialTimeStamp = null) {
         super(renderTarget);
-        this.handleRadius = 7;
-        this.minimumPlaybackInterval = 1000; // 1 second
+        this.playbackInterval = null;
+        this.playButton = null;
+        this.handleElement = null;
+        this.controlsContainer = null;
+        this.track = null;
+        this.selectTimeStampCallback = null;
+        this.wasPlayingWhenDragStarted = false;
+        this.rafId = null;
+        this.handleRadius = PlaybackControls.CONSTANTS.HANDLE_RADIUS;
+        this.minimumPlaybackInterval = PlaybackControls.CONSTANTS.MINIMUM_PLAYBACK_INTERVAL_MS;
         this.playbackInterval = null;
         this.selectedTimeStamp = initialTimeStamp;
     }
@@ -13610,6 +13147,21 @@ class PlaybackControls extends Component {
         return this.selectedTimeStamp;
     }
     render(start, end, onSelectTimeStamp, options, playbackSettings) {
+        // Validate inputs
+        if (!(start instanceof Date) || !(end instanceof Date)) {
+            throw new TypeError('start and end must be Date objects');
+        }
+        if (start >= end) {
+            throw new RangeError('start must be before end');
+        }
+        if (!onSelectTimeStamp || typeof onSelectTimeStamp !== 'function') {
+            throw new TypeError('onSelectTimeStamp must be a function');
+        }
+        // Clean up any pending animation frames before re-rendering
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
         this.end = end;
         this.selectTimeStampCallback = onSelectTimeStamp;
         this.chartOptions.setOptions(options);
@@ -13671,6 +13223,9 @@ class PlaybackControls extends Component {
         this.playButton = this.controlsContainer.append('button')
             .classed('tsi-play-button', this.playbackInterval === null)
             .classed('tsi-pause-button', this.playbackInterval !== null)
+            // Accessibility attributes
+            .attr('aria-label', 'Play/Pause playback')
+            .attr('title', 'Play/Pause playback')
             .on('click', () => {
             if (this.playbackInterval === null) {
                 this.play();
@@ -13722,6 +13277,27 @@ class PlaybackControls extends Component {
         this.updateSelection(handlePosition, this.selectedTimeStamp);
         this.selectTimeStampCallback(this.selectedTimeStamp);
     }
+    /**
+     * Cleanup resources to prevent memory leaks
+     */
+    destroy() {
+        this.pause();
+        // Cancel any pending animation frames
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        // Remove event listeners
+        if (this.controlsContainer) {
+            this.controlsContainer.selectAll('*').on('.', null);
+        }
+        // Clear DOM references
+        this.playButton = null;
+        this.handleElement = null;
+        this.controlsContainer = null;
+        this.track = null;
+        this.selectTimeStampCallback = null;
+    }
     clamp(number, min, max) {
         let clamped = Math.max(number, min);
         return Math.min(clamped, max);
@@ -13730,9 +13306,17 @@ class PlaybackControls extends Component {
         this.wasPlayingWhenDragStarted = this.wasPlayingWhenDragStarted ||
             (this.playbackInterval !== null);
         this.pause();
-        let handlePosition = this.clamp(positionX, 0, this.trackWidth);
-        this.selectedTimeStamp = this.timeStampToPosition.invert(handlePosition);
-        this.updateSelection(handlePosition, this.selectedTimeStamp);
+        // Use requestAnimationFrame to batch DOM updates for better performance
+        // Cancel any pending animation frame to prevent stacking updates
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+        }
+        this.rafId = requestAnimationFrame(() => {
+            const handlePosition = this.clamp(positionX, 0, this.trackWidth);
+            this.selectedTimeStamp = this.timeStampToPosition.invert(handlePosition);
+            this.updateSelection(handlePosition, this.selectedTimeStamp);
+            this.rafId = null;
+        });
     }
     onDragEnd() {
         this.selectTimeStampCallback(this.selectedTimeStamp);
@@ -13755,6 +13339,12 @@ class PlaybackControls extends Component {
             .text(this.timeFormatter(timeStamp));
     }
 }
+PlaybackControls.CONSTANTS = {
+    HANDLE_RADIUS: 7,
+    MINIMUM_PLAYBACK_INTERVAL_MS: 1000,
+    HANDLE_PADDING: 8,
+    AXIS_OFFSET: 6,
+};
 class TimeAxis extends TemporalXAxisComponent {
     constructor(renderTarget) {
         super(renderTarget);