tsichart-core 2.0.0 → 2.1.2

package/dist/index.umd.js

@@ -4,6 +4,21 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TsiClient = {}));
 })(this, (function (exports) { 'use strict';
 
+  function _mergeNamespaces(n, m) {
+    m.forEach(function (e) {
+      e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
+        if (k !== 'default' && !(k in n)) {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    });
+    return Object.freeze(n);
+  }
+
   function ascending$3(a, b) {
     return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
   }
@@ -29015,7 +29030,7 @@
       swimLaneLabelHeightPadding: 8,
       labelLeftPadding: 28
   };
-  const CharactersToEscapeForExactSearchInstance = ['"', '`', '\'', '!', '(', ')', '^', '[', '{', ':', ']', '}', '~', '/', '\\', '@', '#', '$', '%', '&', '*', ';', '=', '.', '_', '-', '<', '>', ',', '?'];
+  const CharactersToEscapeForExactSearchInstance = ['"', '`', '\'', '!', '(', ')', '^', '[', '{', ':', '}', ']', '~', '/', '\\', '@', '#', '$', '%', '&', '*', ';', '=', '.', '_', '-', '<', '>', ',', '?'];
   const NONNUMERICTOPMARGIN = 8;
   const LINECHARTTOPPADDING = 16;
   const GRIDCONTAINERCLASS = 'tsi-gridContainer';
@@ -30451,35 +30466,41 @@
       }
   }
 
-  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)
@@ -30493,135 +30514,60 @@
                   }
               })
                   .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 = select(this);
+                  // Add color key (conditionally based on data type and legend state)
                   if (dataType === DataTypes.Numeric || noSplitBys || self.legendState === 'compact') {
-                      let colorKey = 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);
-                      }
-                      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 {
-                      select(this).selectAll('.tsi-colorKey').remove();
-                  }
-                  if (select(this).select('.tsi-eyeIcon').empty()) {
-                      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);
-                          select(this)
-                              .classed("shown", Utils.getAgVisible(self.chartComponentData.displayState, aggKey, splitBy));
-                          self.drawChart();
-                      });
-                  }
-                  if (select(this).select('.tsi-seriesName').empty()) {
-                      let seriesName = 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 (select(this).select('.tsi-seriesTypeSelection').empty()) {
-                          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 = select(this).property("value");
-                              self.chartComponentData.displayState[aggKey].splitBys[splitBy].visibleType = seriesType;
-                              self.drawChart();
-                          })
-                              .on("click", (event) => {
-                              event.stopPropagation();
-                          });
-                      }
-                      select(this).select('.tsi-seriesTypeSelection')
-                          .each(function (d) {
-                          var typeLabels = 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 {
-                      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();
                       }
                   }
@@ -30646,10 +30592,125 @@
           };
           this.drawChart = drawChart;
           this.legendWidth = legendWidth;
-          this.legendElement = select(renderTarget).insert("div", ":first-child")
+          this.legendElement = 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 = 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 = 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) => {
@@ -30691,14 +30752,11 @@
                   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%');
@@ -30717,10 +30775,6 @@
                   .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);
@@ -30776,6 +30830,13 @@
               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;
@@ -30790,6 +30851,13 @@
           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);
@@ -30800,7 +30868,7 @@
               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 (select(this).classed("shown"))
@@ -30808,9 +30876,8 @@
               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);
@@ -30866,12 +30933,12 @@
               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;
@@ -30884,43 +30951,28 @@
                   select(this).style("height", "unset");
               }
               var splitByContainer = 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 = 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
               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(select(this).data()[0])].splitBys).length;
                       if (splitBysCount > minSplitByForFlexGrow) {
                           select(this).style("flex-grow", 1);
@@ -30933,6 +30985,12 @@
           }
           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 {
@@ -36749,6 +36807,8 @@
                   .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")
@@ -37290,19 +37350,19 @@
   var momentExports = requireMoment();
   var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);
 
-  var pikaday$1 = {exports: {}};
+  var pikaday$2 = {exports: {}};
 
   /*!
    * Pikaday
    *
    * Copyright © 2014 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday
    */
-  var pikaday = pikaday$1.exports;
+  var pikaday$1 = pikaday$2.exports;
 
   var hasRequiredPikaday;
 
   function requirePikaday () {
-  	if (hasRequiredPikaday) return pikaday$1.exports;
+  	if (hasRequiredPikaday) return pikaday$2.exports;
   	hasRequiredPikaday = 1;
   	(function (module, exports) {
   		(function (root, factory) {
@@ -37317,7 +37377,7 @@
   		}(typeof self !== 'undefined' ? self :
   		    typeof window !== 'undefined' ? window :
   		        typeof commonjsGlobal !== 'undefined' ? commonjsGlobal :
-  		            pikaday, function (moment) {
+  		            pikaday$1, function (moment) {
 
   		                /**
   		                 * feature detection and helper functions
@@ -38476,33 +38536,77 @@
 
   		                return Pikaday;
   		            })); 
-  	} (pikaday$1));
-  	return pikaday$1.exports;
+  	} (pikaday$2));
+  	return pikaday$2.exports;
   }
 
   var pikadayExports = /*@__PURE__*/ requirePikaday();
-  var Pikaday = /*@__PURE__*/getDefaultExportFromCjs(pikadayExports);
+  var pikaday = /*@__PURE__*/getDefaultExportFromCjs(pikadayExports);
+
+  var pikadayNamespace = /*#__PURE__*/_mergeNamespaces({
+    __proto__: null,
+    default: pikaday
+  }, [pikadayExports]);
 
   // Ensure moment is available globally for Pikaday
   if (typeof window !== 'undefined') {
       window.moment = moment;
   }
+  // Get Pikaday from the module or window
+  // The UMD wrapper will execute and either:
+  // 1. Return the constructor via module.exports (Rollup/CommonJS)
+  // 2. Attach it to window.Pikaday (Browser/UMD)
+  let Pikaday$1 = null;
+  if (typeof window !== 'undefined') {
+      // Check window first (UMD attached it there)
+      if (window.Pikaday) {
+          Pikaday$1 = window.Pikaday;
+      }
+      // Check if imported as default (CommonJS module.exports)
+      else if (pikaday && typeof pikaday === 'function') {
+          Pikaday$1 = pikaday;
+          window.Pikaday = Pikaday$1;
+      }
+      // Check if it's the namespace itself (rare)
+      else if (typeof pikadayNamespace === 'function') {
+          Pikaday$1 = pikadayNamespace;
+          window.Pikaday = Pikaday$1;
+      }
+      // Try any other property that might be the constructor
+      else if (pikadayNamespace) {
+          const possiblePikaday = Object.values(pikadayNamespace).find(val => typeof val === 'function');
+          if (possiblePikaday) {
+              Pikaday$1 = possiblePikaday;
+              window.Pikaday = Pikaday$1;
+          }
+      }
+  }
   // Export a function to safely create Pikaday instances
   function createPikaday(options) {
       if (typeof window === 'undefined') {
           console.warn('Pikaday requires a browser environment');
           return null;
       }
-      const Pikaday = window.Pikaday;
-      if (!Pikaday) {
+      // Try multiple sources for Pikaday
+      const PikadayConstructor = Pikaday$1 || window.Pikaday;
+      if (!PikadayConstructor) {
           console.error('Pikaday not available. Make sure pikaday.js is loaded.');
+          console.error('Failed to create Pikaday calendar. Check moment.js availability.');
           return null;
       }
       if (!moment || !window.moment) {
           console.error('Moment.js not available. Pikaday requires moment.js.');
+          console.error('Failed to create Pikaday calendar. Check moment.js availability.');
+          return null;
+      }
+      try {
+          return new PikadayConstructor(options);
+      }
+      catch (error) {
+          console.error('Failed to create Pikaday instance:', error);
+          console.error('Failed to create Pikaday calendar. Check moment.js availability.');
           return null;
       }
-      return new Pikaday(options);
   }
 
   class DateTimePicker extends ChartComponent {
@@ -39077,7 +39181,30 @@
           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);
@@ -39097,11 +39224,22 @@
           }
           super.themify(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);
@@ -39121,10 +39259,38 @@
       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);
-          select(this.renderTarget).classed('tsi-dateTimeContainerRange', true);
+          let container = select(this.renderTarget);
+          container.classed('tsi-dateTimeContainerRange', true);
+          container.style('position', 'relative');
           this.fromMillis = fromMillis;
           this.toMillis = toMillis;
           this.onCancel = onCancel ? onCancel : () => { };
@@ -39150,6 +39316,7 @@
                       this.onClose();
                       this.onCancel();
                   });
+                  this.setupClickOutsideHandler();
               }
           });
       }
@@ -43455,7 +43622,7 @@
           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 = select(this.renderTarget);
           targetElement.html("");
@@ -43809,20 +43976,102 @@
       }
   }
 
+  // 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 = 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;
                   }, {})
                   : {};
@@ -43833,7 +44082,17 @@
                   }
                   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") + ')';
@@ -43855,12 +44114,20 @@
           const targetElement = 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');
@@ -43868,8 +44135,129 @@
       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) {
@@ -43878,32 +44266,7 @@
       }
       // 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);
@@ -43912,40 +44275,140 @@
           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();
+              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;
@@ -43953,11 +44416,18 @@
           }
       }
       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 {
@@ -43965,11 +44435,300 @@
               }
           });
       }
+      // 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 = 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);
+                          select(this).classed('tsi-selected', false);
+                      }
+                      else {
+                          self.selectedIds.push(d.id);
+                          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)) {
+                  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);
@@ -43993,7 +44752,7 @@
               .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) {
@@ -44045,6 +44804,8 @@
           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;
@@ -44289,6 +45050,7 @@
   class DateTimeButtonSingle extends DateTimeButton {
       constructor(renderTarget) {
           super(renderTarget);
+          this.clickOutsideHandler = null;
           this.sDTPOnSet = (millis = null) => {
               if (millis !== null) {
                   this.dateTimeButton.text(this.buttonDateTimeFormat(millis));
@@ -44301,6 +45063,32 @@
       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);
@@ -44310,12 +45098,11 @@
           if (!this.dateTimePicker) {
               this.dateTimePicker = new SingleDateTimePicker(this.dateTimePickerContainer.node());
           }
-          let targetElement = 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();
           });
       }
   }
@@ -44613,8 +45400,16 @@
   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;
       }
@@ -44622,6 +45417,21 @@
           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);
@@ -44683,6 +45493,9 @@
           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();
@@ -44734,6 +45547,27 @@
           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);
@@ -44742,9 +45576,17 @@
           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);
@@ -44767,6 +45609,12 @@
               .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);