tsichart-core 2.0.0-beta.7 → 2.1.0

package/dist/index.umd.js

@@ -29013,7 +29013,7 @@
       swimLaneLabelHeightPadding: 8,
       labelLeftPadding: 28
   };
-  const CharactersToEscapeForExactSearchInstance = ['"', '`', '\'', '!', '(', ')', '^', '[', '{', ':', ']', '}', '~', '/', '\\', '@', '#', '$', '%', '&', '*', ';', '=', '.', '_', '-', '<', '>', ',', '?'];
+  const CharactersToEscapeForExactSearchInstance = ['"', '`', '\'', '!', '(', ')', '^', '[', '{', ':', '}', ']', '~', '/', '\\', '@', '#', '$', '%', '&', '*', ';', '=', '.', '_', '-', '<', '>', ',', '?'];
   const NONNUMERICTOPMARGIN = 8;
   const LINECHARTTOPPADDING = 16;
   const GRIDCONTAINERCLASS = 'tsi-gridContainer';
@@ -29457,50 +29457,89 @@
           }
           return hclColor.toString();
       }
+      /**
+       * Creates an array of colors for split-by series
+       * @param displayState - The current display state
+       * @param aggKey - The aggregate key
+       * @param ignoreIsOnlyAgg - Whether to ignore the "only aggregate" optimization
+       * @returns Array of color strings for each split-by
+       */
       static createSplitByColors(displayState, aggKey, ignoreIsOnlyAgg = false) {
-          if (Object.keys(displayState[aggKey]["splitBys"]).length == 1)
+          const splitBys = displayState[aggKey]?.splitBys;
+          if (!splitBys) {
+              return [];
+          }
+          const splitByCount = Object.keys(splitBys).length;
+          // Early return for single split-by
+          if (splitByCount === 1) {
               return [displayState[aggKey].color];
-          var isOnlyAgg = Object.keys(displayState).reduce((accum, currAgg) => {
-              if (currAgg == aggKey)
-                  return accum;
-              if (displayState[currAgg]["visible"] == false)
-                  return accum && true;
-              return false;
-          }, true);
-          if (isOnlyAgg && !ignoreIsOnlyAgg) {
-              return this.generateColors(Object.keys(displayState[aggKey]["splitBys"]).length);
           }
-          var aggColor = displayState[aggKey].color;
-          var interpolateColor = linear().domain([0, Object.keys(displayState[aggKey]["splitBys"]).length])
-              .range([hcl$2(aggColor).darker().l, hcl$2(aggColor).brighter().l]);
-          var colors = [];
-          for (var i = 0; i < Object.keys(displayState[aggKey]["splitBys"]).length; i++) {
-              const newColor = hcl$2(aggColor);
+          // Create cache key for memoization
+          const cacheKey = `${aggKey}_${splitByCount}_${displayState[aggKey].color}_${ignoreIsOnlyAgg}`;
+          if (this.splitByColorCache.has(cacheKey)) {
+              return this.splitByColorCache.get(cacheKey);
+          }
+          const isOnlyVisibleAgg = !ignoreIsOnlyAgg && this.isOnlyVisibleAggregate(displayState, aggKey);
+          let colors;
+          if (isOnlyVisibleAgg) {
+              // Generate distinct colors when this is the only visible aggregate
+              colors = this.generateColors(splitByCount);
+          }
+          else {
+              // Generate color variations based on aggregate color
+              colors = this.generateSplitByColorVariations(displayState[aggKey].color, splitByCount);
+          }
+          // Cache the result
+          this.splitByColorCache.set(cacheKey, colors);
+          // Limit cache size to prevent memory leaks
+          if (this.splitByColorCache.size > 100) {
+              const firstKey = this.splitByColorCache.keys().next().value;
+              this.splitByColorCache.delete(firstKey);
+          }
+          return colors;
+      }
+      /**
+       * Helper method to check if an aggregate is the only visible one
+       */
+      static isOnlyVisibleAggregate(displayState, aggKey) {
+          for (const currAgg in displayState) {
+              if (currAgg !== aggKey && displayState[currAgg]?.visible !== false) {
+                  return false;
+              }
+          }
+          return true;
+      }
+      /**
+       * Helper method to generate color variations for split-bys
+       */
+      static generateSplitByColorVariations(baseColor, count) {
+          const baseHcl = hcl$2(baseColor);
+          const interpolateColor = linear()
+              .domain([0, count])
+              .range([baseHcl.darker().l, baseHcl.brighter().l]);
+          const colors = new Array(count);
+          for (let i = 0; i < count; i++) {
+              const newColor = hcl$2(baseColor);
               newColor.l = interpolateColor(i);
-              colors.push(newColor.formatHex());
+              colors[i] = newColor.formatHex();
           }
           return colors;
       }
+      /**
+       * Clears the split-by color cache (useful when display state changes significantly)
+       */
+      static clearSplitByColorCache() {
+          this.splitByColorCache.clear();
+      }
       static colorSplitBy(displayState, splitByIndex, aggKey, ignoreIsOnlyAgg = false) {
-          if (Object.keys(displayState[aggKey]["splitBys"]).length == 1)
-              return displayState[aggKey].color;
-          var isOnlyAgg = Object.keys(displayState).reduce((accum, currAgg) => {
-              if (currAgg == aggKey)
-                  return accum;
-              if (displayState[currAgg]["visible"] == false)
-                  return accum && true;
-              return false;
-          }, true);
-          if (isOnlyAgg && !ignoreIsOnlyAgg) {
-              var splitByColors = this.generateColors(Object.keys(displayState[aggKey]["splitBys"]).length);
-              return splitByColors[splitByIndex];
+          const colors = this.createSplitByColors(displayState, aggKey, ignoreIsOnlyAgg);
+          if (typeof splitByIndex === 'number' &&
+              Number.isInteger(splitByIndex) &&
+              splitByIndex >= 0 &&
+              splitByIndex < colors.length) {
+              return colors[splitByIndex];
           }
-          var aggColor = displayState[aggKey].color;
-          var interpolateColor = linear().domain([0, Object.keys(displayState[aggKey]["splitBys"]).length])
-              .range([hcl$2(aggColor).darker().l, hcl$2(aggColor).brighter().l]);
-          const newColor = hcl$2(aggColor);
-          newColor.l = interpolateColor(splitByIndex);
-          return newColor.formatHex();
+          return displayState[aggKey]?.color || '#000000';
       }
       static getTheme(theme) {
           return theme ? 'tsi-' + theme : 'tsi-dark';
@@ -29924,6 +29963,7 @@
       }
   }
   Utils.guidForNullTSID = Utils.guid();
+  Utils.splitByColorCache = new Map();
   Utils.equalToEventTarget = (function (current, event) {
       return (current == event.target);
   });
@@ -30409,35 +30449,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)
@@ -30451,135 +30497,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();
                       }
                   }
@@ -30604,10 +30575,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) => {
@@ -30649,14 +30735,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%');
@@ -30675,10 +30758,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);
@@ -30734,6 +30813,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;
@@ -30748,6 +30834,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);
@@ -30758,7 +30851,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"))
@@ -30766,9 +30859,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);
@@ -30824,12 +30916,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;
@@ -30842,43 +30934,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);
@@ -30891,6 +30968,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 {
@@ -33114,6 +33197,8 @@
           this.drawChart = drawChart;
           this.contextMenuElement = select(renderTarget).insert("div", ":first-child")
               .attr("class", "tsi-contextMenu")
+              .attr("aria-label", "Context Menu")
+              .attr("role", "menu")
               .style("left", "0px")
               .style("top", "0px");
       }
@@ -33202,6 +33287,7 @@
           var actionElementsEntered = actionElements.enter()
               .append("div")
               .attr("class", `tsi-actionElement`)
+              .attr("role", "menuitem")
               .classed('tsi-hasSubMenu', d => d.isNested)
               .merge(actionElements)
               .text(d => d.name)
@@ -33328,6 +33414,7 @@
           }).data([theme]);
           this.tooltipDiv = tooltip.enter().append('div')
               .attr('class', 'tsi-tooltip')
+              .attr('role', 'tooltip')
               .merge(tooltip)
               .each(function (d) {
               select(this).selectAll("*").remove();
@@ -36702,6 +36789,10 @@
               label.enter()
                   .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")
                   .attr("transform", d => `translate(${(-this.horizontalLabelOffset + swimlaneLabelConstants.labelLeftPadding)},${(d.offset + d.height / 2)}) rotate(-90)`)
@@ -36726,13 +36817,12 @@
           });
       }
       render(data, options, aggregateExpressionOptions) {
-          console.log('LineChart render called a');
           super.render(data, options, aggregateExpressionOptions);
           this.originalSwimLanes = this.aggregateExpressionOptions.map((aEO) => {
               return aEO.swimLane;
           });
           this.originalSwimLaneOptions = options.swimLaneOptions;
-          this.hasBrush = options && (options.brushMoveAction || options.brushMoveEndAction || options.brushContextMenuActions);
+          this.hasBrush = !!(options && (options.brushMoveAction || options.brushMoveEndAction || options.brushContextMenuActions));
           this.chartOptions.setOptions(options);
           this.chartMargins.right = this.chartOptions.labelSeriesWithMarker ? (SERIESLABELWIDTH + 8) : LINECHARTCHARTMARGINS.right;
           this.width = this.getWidth();
@@ -36781,6 +36871,7 @@
                   .attr("type", "button")
                   .on("click", function () {
                   self.overwriteSwimLanes();
+                  // cast to any to avoid TS incompatibility when spreading chartOptions instance into ILineChartOptions
                   self.render(self.data, { ...self.chartOptions, yAxisState: self.nextStackedState() }, self.aggregateExpressionOptions);
                   select(this).attr("aria-label", () => self.getString("set axis state to") + ' ' + self.nextStackedState());
                   setTimeout(() => select(this).node().focus(), 200);
@@ -36807,6 +36898,7 @@
               this.svgSelection = this.targetElement.append("svg")
                   .attr("class", "tsi-lineChartSVG tsi-chartSVG")
                   .attr('title', this.getString('Line chart'))
+                  .attr("role", "img")
                   .attr("height", this.height);
               var g = this.svgSelection.append("g")
                   .classed("svgGroup", true)
@@ -37192,1301 +37284,76 @@
       }
   }
 
-  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 = requireMoment(); } catch (e) {}
-  		        module.exports = factory(moment);
-  		    }
-  		}(pikaday, function (moment)
-  		{
-
-  		    /**
-  		     * feature detection and helper functions
-  		     */
-  		    var hasMoment = typeof moment === 'function',
-
-  		    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>';
-  		    },
+  class TimezonePicker extends ChartComponent {
+      constructor(renderTarget) {
+          super(renderTarget);
+          this.timeZones = ["Local", "UTC", "Africa/Algiers", "Africa/Cairo", "Africa/Casablanca", "Africa/Harare", "Africa/Johannesburg", "Africa/Lagos", "Africa/Nairobi", "Africa/Windhoek", "America/Anchorage", "America/Bogota", "America/Buenos Aires", "America/Caracas", "America/Chicago", "America/Chihuahua", "America/Denver", "America/Edmonton", "America/Godthab", "America/Guatemala", "America/Halifax", "America/Indiana/Indianapolis", "America/Los Angeles", "America/Manaus", "America/Mexico City", "America/Montevideo", "America/New York", "America/Phoenix", "America/Santiago", "America/Sao Paulo", "America/St Johns", "America/Tijuana", "America/Toronto", "America/Vancouver", "America/Winnipeg", "Asia/Amman", "Asia/Beirut", "Asia/Baghdad", "Asia/Baku", "Asia/Bangkok", "Asia/Calcutta", "Asia/Colombo", "Asia/Dhaka", "Asia/Dubai", "Asia/Ho Chi Minh", "Asia/Hong Kong", "Asia/Irkutsk", "Asia/Istanbul", "Asia/Jakarta", "Asia/Jerusalem", "Asia/Kabul", "Asia/Karachi", "Asia/Kathmandu", "Asia/Krasnoyarsk", "Asia/Kuala Lumpur", "Asia/Kuwait", "Asia/Magadan", "Asia/Muscat", "Asia/Novosibirsk", "Asia/Qatar", "Asia/Rangoon", "Asia/Seoul", "Asia/Shanghai", "Asia/Singapore", "Asia/Taipei", "Asia/Tbilisi", "Asia/Tehran", "Asia/Tokyo", "Asia/Vladivostok", "Asia/Yakutsk", "Asia/Yekaterinburg", "Asia/Yerevan", "Atlantic/Azores", "Atlantic/Cape Verde", "Atlantic/South Georgia", "Australia/Adelaide", "Australia/Brisbane", "Australia/Canberra", "Australia/Darwin", "Australia/Hobart", "Australia/Melbourne", "Australia/Perth", "Australia/Queensland", "Australia/Sydney", "Europe/Amsterdam", "Europe/Andorra", "Europe/Athens", "Europe/Belfast", "Europe/Belgrade", "Europe/Berlin", "Europe/Brussels", "Europe/Budapest", "Europe/Dublin", "Europe/Helsinki", "Europe/Kiev", "Europe/Lisbon", "Europe/London", "Europe/Luxembourg", "Europe/Madrid", "Europe/Minsk", "Europe/Monaco", "Europe/Moscow", "Europe/Oslo", "Europe/Paris", "Europe/Rome", "Europe/Stockholm", "Europe/Vienna", "Europe/Warsaw", "Europe/Zurich", "Pacific/Auckland", "Pacific/Fiji", "Pacific/Guam", "Pacific/Honolulu", "Pacific/Midway", "Pacific/Tongatapu"];
+      }
+      sortTimezones() {
+          let filteredTimezones = this.timeZones.filter((tz) => {
+              return !(tz.toLowerCase() == 'local' || tz == 'UTC');
+          });
+          filteredTimezones.sort((a, b) => {
+              let aOffset = moment$1.tz(new Date(), a.split(' ').join('_')).utcOffset();
+              let bOffset = moment$1.tz(new Date(), b.split(' ').join('_')).utcOffset();
+              if (aOffset < bOffset) {
+                  return -1;
+              }
+              if (aOffset > bOffset) {
+                  return 1;
+              }
+              return 0;
+          });
+          this.timeZones = ['Local', 'UTC'].concat(filteredTimezones);
+      }
+      render(onTimezoneSelect, defaultTimeZone = null) {
+          this.targetElement = select(this.renderTarget)
+              .classed("tsi-timezonePicker", true);
+          var timezoneSelection = this.targetElement.append("select")
+              .attr("class", "tsi-timezonePicker tsi-select");
+          this.sortTimezones();
+          var options = timezoneSelection.selectAll("option")
+              .data(this.timeZones)
+              .enter()
+              .append("option")
+              .attr('value', d => d)
+              .text((tz) => Utils.convertTimezoneToLabel(tz, this.getString('Local')));
+          timezoneSelection.on("change", function (d) {
+              var timezone = select(this).node().value.replace(/\s/g, "_");
+              onTimezoneSelect(timezone);
+          });
+          defaultTimeZone = defaultTimeZone.replace(/_/g, " ");
+          if (defaultTimeZone != null) {
+              options.filter((d) => d == defaultTimeZone).attr("selected", true);
+          }
+          return;
+      }
+  }
 
-  		    renderTable = function(opts, data, randId)
-  		    {
-  		        return '<table cellpadding="0" cellspacing="0" class="pika-table" role="grid" aria-labelledby="' + randId + '">' + renderHead(opts) + renderBody(data) + '</table>';
-  		    },
+  var momentExports = requireMoment();
+  var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);
 
-
-  		    /**
-  		     * 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);
-
-  var momentExports = requireMoment();
-  var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);
-
-  class TimezonePicker extends ChartComponent {
-      constructor(renderTarget) {
-          super(renderTarget);
-          this.timeZones = ["Local", "UTC", "Africa/Algiers", "Africa/Cairo", "Africa/Casablanca", "Africa/Harare", "Africa/Johannesburg", "Africa/Lagos", "Africa/Nairobi", "Africa/Windhoek", "America/Anchorage", "America/Bogota", "America/Buenos Aires", "America/Caracas", "America/Chicago", "America/Chihuahua", "America/Denver", "America/Edmonton", "America/Godthab", "America/Guatemala", "America/Halifax", "America/Indiana/Indianapolis", "America/Los Angeles", "America/Manaus", "America/Mexico City", "America/Montevideo", "America/New York", "America/Phoenix", "America/Santiago", "America/Sao Paulo", "America/St Johns", "America/Tijuana", "America/Toronto", "America/Vancouver", "America/Winnipeg", "Asia/Amman", "Asia/Beirut", "Asia/Baghdad", "Asia/Baku", "Asia/Bangkok", "Asia/Calcutta", "Asia/Colombo", "Asia/Dhaka", "Asia/Dubai", "Asia/Ho Chi Minh", "Asia/Hong Kong", "Asia/Irkutsk", "Asia/Istanbul", "Asia/Jakarta", "Asia/Jerusalem", "Asia/Kabul", "Asia/Karachi", "Asia/Kathmandu", "Asia/Krasnoyarsk", "Asia/Kuala Lumpur", "Asia/Kuwait", "Asia/Magadan", "Asia/Muscat", "Asia/Novosibirsk", "Asia/Qatar", "Asia/Rangoon", "Asia/Seoul", "Asia/Shanghai", "Asia/Singapore", "Asia/Taipei", "Asia/Tbilisi", "Asia/Tehran", "Asia/Tokyo", "Asia/Vladivostok", "Asia/Yakutsk", "Asia/Yekaterinburg", "Asia/Yerevan", "Atlantic/Azores", "Atlantic/Cape Verde", "Atlantic/South Georgia", "Australia/Adelaide", "Australia/Brisbane", "Australia/Canberra", "Australia/Darwin", "Australia/Hobart", "Australia/Melbourne", "Australia/Perth", "Australia/Queensland", "Australia/Sydney", "Europe/Amsterdam", "Europe/Andorra", "Europe/Athens", "Europe/Belfast", "Europe/Belgrade", "Europe/Berlin", "Europe/Brussels", "Europe/Budapest", "Europe/Dublin", "Europe/Helsinki", "Europe/Kiev", "Europe/Lisbon", "Europe/London", "Europe/Luxembourg", "Europe/Madrid", "Europe/Minsk", "Europe/Monaco", "Europe/Moscow", "Europe/Oslo", "Europe/Paris", "Europe/Rome", "Europe/Stockholm", "Europe/Vienna", "Europe/Warsaw", "Europe/Zurich", "Pacific/Auckland", "Pacific/Fiji", "Pacific/Guam", "Pacific/Honolulu", "Pacific/Midway", "Pacific/Tongatapu"];
-      }
-      sortTimezones() {
-          let filteredTimezones = this.timeZones.filter((tz) => {
-              return !(tz.toLowerCase() == 'local' || tz == 'UTC');
-          });
-          filteredTimezones.sort((a, b) => {
-              let aOffset = moment$1.tz(new Date(), a.split(' ').join('_')).utcOffset();
-              let bOffset = moment$1.tz(new Date(), b.split(' ').join('_')).utcOffset();
-              if (aOffset < bOffset) {
-                  return -1;
-              }
-              if (aOffset > bOffset) {
-                  return 1;
-              }
-              return 0;
-          });
-          this.timeZones = ['Local', 'UTC'].concat(filteredTimezones);
-      }
-      render(onTimezoneSelect, defaultTimeZone = null) {
-          this.targetElement = select(this.renderTarget)
-              .classed("tsi-timezonePicker", true);
-          var timezoneSelection = this.targetElement.append("select")
-              .attr("class", "tsi-timezonePicker tsi-select");
-          this.sortTimezones();
-          var options = timezoneSelection.selectAll("option")
-              .data(this.timeZones)
-              .enter()
-              .append("option")
-              .attr('value', d => d)
-              .text((tz) => Utils.convertTimezoneToLabel(tz, this.getString('Local')));
-          timezoneSelection.on("change", function (d) {
-              var timezone = select(this).node().value.replace(/\s/g, "_");
-              onTimezoneSelect(timezone);
-          });
-          defaultTimeZone = defaultTimeZone.replace(/_/g, " ");
-          if (defaultTimeZone != null) {
-              options.filter((d) => d == defaultTimeZone).attr("selected", true);
-          }
-          return;
-      }
-  }
+  // Ensure moment is available globally for Pikaday
+  if (typeof window !== 'undefined') {
+      window.moment = moment;
+  }
+  // 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) {
+          console.error('Pikaday not available. Make sure pikaday.js is loaded.');
+          return null;
+      }
+      if (!moment || !window.moment) {
+          console.error('Moment.js not available. Pikaday requires moment.js.');
+          return null;
+      }
+      return new Pikaday(options);
+  }
 
   class DateTimePicker extends ChartComponent {
       constructor(renderTarget) {
@@ -38758,8 +37625,8 @@
               weekdays: moment.localeData().weekdays(),
               weekdaysShort: moment.localeData().weekdaysMin()
           };
-          //@ts-ignore
-          this.calendarPicker = new Pikaday({
+          // Use the safe Pikaday wrapper
+          this.calendarPicker = createPikaday({
               bound: false,
               container: this.calendar.node(),
               field: this.calendar.node(),
@@ -38795,6 +37662,11 @@
               maxDate: this.convertToCalendarDate(this.maxMillis),
               defaultDate: Utils.adjustDateFromTimezoneOffset(new Date(this.fromMillis))
           });
+          // Check if Pikaday was created successfully
+          if (!this.calendarPicker) {
+              console.error('Failed to create Pikaday calendar. Check moment.js availability.');
+              return;
+          }
       }
       setSelectedQuickTimes() {
           let isSelected = d => {
@@ -39055,7 +37927,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);
@@ -39075,11 +37970,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);
@@ -39099,10 +38005,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 : () => { };
@@ -39128,6 +38062,7 @@
                       this.onClose();
                       this.onCancel();
                   });
+                  this.setupClickOutsideHandler();
               }
           });
       }
@@ -39203,6 +38138,7 @@
       }
       //transformation of buckets created by the UX client to buckets for the availabilityChart
       createDisplayBuckets(fromMillis, toMillis) {
+          //TODO: "" key is confusing, should be "count" or something similar
           var keysInRange = Object.keys(this.transformedAvailability[0].availabilityCount[""]).reduce((inRangeObj, timestamp, i, timestamps) => {
               var currTSMillis = (new Date(timestamp)).valueOf();
               var nextTSMillis = currTSMillis + this.bucketSize;
@@ -39255,6 +38191,7 @@
               this.bucketSize = null;
           }
       }
+      //TODO: should have proper types for parameters
       render(transformedAvailability, chartOptions, rawAvailability = {}) {
           this.setChartOptions(chartOptions);
           this.rawAvailability = rawAvailability;
@@ -43431,7 +42368,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("");
@@ -43785,20 +42722,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;
                   }, {})
                   : {};
@@ -43809,7 +42828,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") + ')';
@@ -43831,12 +42860,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');
@@ -43844,8 +42881,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) {
@@ -43854,32 +43012,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);
@@ -43888,40 +43021,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;
@@ -43929,11 +43162,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 {
@@ -43941,11 +43181,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);
@@ -43969,7 +43498,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) {
@@ -44021,6 +43550,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;
@@ -44265,6 +43796,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));
@@ -44277,6 +43809,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);
@@ -44286,12 +43844,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();
           });
       }
   }
@@ -44589,8 +44146,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;
       }
@@ -44598,6 +44163,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);
@@ -44659,6 +44239,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();
@@ -44710,6 +44293,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);
@@ -44718,9 +44322,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);
@@ -44743,6 +44355,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);
@@ -45009,6 +44627,10 @@
       }
   }
 
+  // Ensure moment is available globally for Pikaday and other components
+  if (typeof window !== 'undefined') {
+      window.moment = moment;
+  }
   class UXClient {
       constructor() {
           // Public facing components have class constructors exposed as public UXClient members.