tsichart-core 2.0.0 → 2.1.0

package/dist/index.umd.js

@@ -21599,8 +21599,6 @@
     return voronoi;
   }
 
-  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
   function getDefaultExportFromCjs (x) {
   	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
   }
@@ -29015,7 +29013,7 @@
       swimLaneLabelHeightPadding: 8,
       labelLeftPadding: 28
   };
-  const CharactersToEscapeForExactSearchInstance = ['"', '`', '\'', '!', '(', ')', '^', '[', '{', ':', ']', '}', '~', '/', '\\', '@', '#', '$', '%', '&', '*', ';', '=', '.', '_', '-', '<', '>', ',', '?'];
+  const CharactersToEscapeForExactSearchInstance = ['"', '`', '\'', '!', '(', ')', '^', '[', '{', ':', '}', ']', '~', '/', '\\', '@', '#', '$', '%', '&', '*', ';', '=', '.', '_', '-', '<', '>', ',', '?'];
   const NONNUMERICTOPMARGIN = 8;
   const LINECHARTTOPPADDING = 16;
   const GRIDCONTAINERCLASS = 'tsi-gridContainer';
@@ -30451,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)
@@ -30493,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();
                       }
                   }
@@ -30646,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) => {
@@ -30691,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%');
@@ -30717,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);
@@ -30776,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;
@@ -30790,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);
@@ -30800,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"))
@@ -30808,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);
@@ -30866,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;
@@ -30884,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);
@@ -30933,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 {
@@ -31579,9 +31620,9 @@
   // maintainable code, while at the same time manually optimizing for tiny minified file size,
   // browser compatibility without additional requirements
   // and very few assumptions about the user's page layout.
-  var global$1 = typeof window !== 'undefined' ? window : null;
-  var ssr = global$1 === null;
-  var document$1 = !ssr ? global$1.document : undefined;
+  var global = typeof window !== 'undefined' ? window : null;
+  var ssr = global === null;
+  var document$1 = !ssr ? global.document : undefined;
 
   // Save a couple long function names that are used frequently.
   // This optimization saves around 400 bytes.
@@ -32047,11 +32088,11 @@
           self.dragging = false;
 
           // Remove the stored event listeners. This is why we store them.
-          global$1[removeEventListener]('mouseup', self.stop);
-          global$1[removeEventListener]('touchend', self.stop);
-          global$1[removeEventListener]('touchcancel', self.stop);
-          global$1[removeEventListener]('mousemove', self.move);
-          global$1[removeEventListener]('touchmove', self.move);
+          global[removeEventListener]('mouseup', self.stop);
+          global[removeEventListener]('touchend', self.stop);
+          global[removeEventListener]('touchcancel', self.stop);
+          global[removeEventListener]('mousemove', self.move);
+          global[removeEventListener]('touchmove', self.move);
 
           // Clear bound function references
           self.stop = null;
@@ -32108,11 +32149,11 @@
           self.stop = stopDragging.bind(self);
 
           // All the binding. `window` gets the stop events in case we drag out of the elements.
-          global$1[addEventListener]('mouseup', self.stop);
-          global$1[addEventListener]('touchend', self.stop);
-          global$1[addEventListener]('touchcancel', self.stop);
-          global$1[addEventListener]('mousemove', self.move);
-          global$1[addEventListener]('touchmove', self.move);
+          global[addEventListener]('mouseup', self.stop);
+          global[addEventListener]('touchend', self.stop);
+          global[addEventListener]('touchcancel', self.stop);
+          global[addEventListener]('mousemove', self.move);
+          global[addEventListener]('touchmove', self.move);
 
           // Disable selection. Disable!
           a[addEventListener]('selectstart', NOOP);
@@ -36749,6 +36790,8 @@
                   .append("text")
                   .attr("class", (d) => `tsi-swimLaneLabel-${lane} tsi-swimLaneLabel ${onClickPresentAndValid(d) ? 'tsi-boldOnHover' : ''}`)
                   .attr("role", "heading")
+                  .attr("aria-roledescription", this.getString("Swimlane label"))
+                  .attr("aria-label", d => d.label)
                   .attr("aria-level", "3")
                   .merge(label)
                   .style("text-anchor", "middle")
@@ -37290,1220 +37333,27 @@
   var momentExports = requireMoment();
   var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);
 
-  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) { moment = (typeof window !== 'undefined' && window.moment) || undefined; }
-  		        module.exports = factory(moment);
-  		    }
-  		}(typeof self !== 'undefined' ? self :
-  		    typeof window !== 'undefined' ? window :
-  		        typeof commonjsGlobal !== 'undefined' ? commonjsGlobal :
-  		            pikaday, function (moment) {
-
-  		                /**
-  		                 * feature detection and helper functions
-  		                 */
-  		                var hasMoment = typeof moment === 'function' || (moment && typeof moment.version === 'string'),
-
-  		                    hasEventListeners = !!window.addEventListener,
-
-  		                    document = window.document,
-
-  		                    sto = window.setTimeout,
-
-  		                    addEvent = function (el, e, callback, capture) {
-  		                        if (hasEventListeners) {
-  		                            el.addEventListener(e, callback, !!capture);
-  		                        } else {
-  		                            el.attachEvent('on' + e, callback);
-  		                        }
-  		                    },
-
-  		                    removeEvent = function (el, e, callback, capture) {
-  		                        if (hasEventListeners) {
-  		                            el.removeEventListener(e, callback, !!capture);
-  		                        } else {
-  		                            el.detachEvent('on' + e, callback);
-  		                        }
-  		                    },
-
-  		                    trim = function (str) {
-  		                        return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
-  		                    },
-
-  		                    hasClass = function (el, cn) {
-  		                        return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
-  		                    },
-
-  		                    addClass = function (el, cn) {
-  		                        if (!hasClass(el, cn)) {
-  		                            el.className = (el.className === '') ? cn : el.className + ' ' + cn;
-  		                        }
-  		                    },
-
-  		                    removeClass = function (el, cn) {
-  		                        el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
-  		                    },
-
-  		                    isArray = function (obj) {
-  		                        return (/Array/).test(Object.prototype.toString.call(obj));
-  		                    },
-
-  		                    isDate = function (obj) {
-  		                        return (/Date/).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
-  		                    },
-
-  		                    isWeekend = function (date) {
-  		                        var day = date.getDay();
-  		                        return day === 0 || day === 6;
-  		                    },
-
-  		                    isLeapYear = function (year) {
-  		                        // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
-  		                        return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
-  		                    },
-
-  		                    getDaysInMonth = function (year, month) {
-  		                        return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
-  		                    },
-
-  		                    setToStartOfDay = function (date) {
-  		                        if (isDate(date)) date.setHours(0, 0, 0, 0);
-  		                    },
-
-  		                    compareDates = function (a, b) {
-  		                        // weak date comparison (use setToStartOfDay(date) to ensure correct result)
-  		                        return a.getTime() === b.getTime();
-  		                    },
-
-  		                    extend = function (to, from, overwrite) {
-  		                        var prop, hasProp;
-  		                        for (prop in from) {
-  		                            hasProp = to[prop] !== undefined;
-  		                            if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
-  		                                if (isDate(from[prop])) {
-  		                                    if (overwrite) {
-  		                                        to[prop] = new Date(from[prop].getTime());
-  		                                    }
-  		                                }
-  		                                else if (isArray(from[prop])) {
-  		                                    if (overwrite) {
-  		                                        to[prop] = from[prop].slice(0);
-  		                                    }
-  		                                } else {
-  		                                    to[prop] = extend({}, from[prop], overwrite);
-  		                                }
-  		                            } else if (overwrite || !hasProp) {
-  		                                to[prop] = from[prop];
-  		                            }
-  		                        }
-  		                        return to;
-  		                    },
-
-  		                    fireEvent = function (el, eventName, data) {
-  		                        var ev;
-
-  		                        if (document.createEvent) {
-  		                            ev = document.createEvent('HTMLEvents');
-  		                            ev.initEvent(eventName, true, false);
-  		                            ev = extend(ev, data);
-  		                            el.dispatchEvent(ev);
-  		                        } else if (document.createEventObject) {
-  		                            ev = document.createEventObject();
-  		                            ev = extend(ev, data);
-  		                            el.fireEvent('on' + eventName, ev);
-  		                        }
-  		                    },
-
-  		                    adjustCalendar = function (calendar) {
-  		                        if (calendar.month < 0) {
-  		                            calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
-  		                            calendar.month += 12;
-  		                        }
-  		                        if (calendar.month > 11) {
-  		                            calendar.year += Math.floor(Math.abs(calendar.month) / 12);
-  		                            calendar.month -= 12;
-  		                        }
-  		                        return calendar;
-  		                    },
-
-  		                    /**
-  		                     * defaults and localisation
-  		                     */
-  		                    defaults = {
-
-  		                        // bind the picker to a form field
-  		                        field: null,
-
-  		                        // automatically show/hide the picker on `field` focus (default `true` if `field` is set)
-  		                        bound: undefined,
-
-  		                        // position of the datepicker, relative to the field (default to bottom & left)
-  		                        // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
-  		                        position: 'bottom left',
-
-  		                        // automatically fit in the viewport even if it means repositioning from the position option
-  		                        reposition: true,
-
-  		                        // the default output format for `.toString()` and `field` value
-  		                        format: 'YYYY-MM-DD',
-
-  		                        // the toString function which gets passed a current date object and format
-  		                        // and returns a string
-  		                        toString: null,
-
-  		                        // used to create date object from current input string
-  		                        parse: null,
-
-  		                        // the initial date to view when first opened
-  		                        defaultDate: null,
-
-  		                        // make the `defaultDate` the initial selected value
-  		                        setDefaultDate: false,
-
-  		                        // first day of week (0: Sunday, 1: Monday etc)
-  		                        firstDay: 0,
-
-  		                        // the default flag for moment's strict date parsing
-  		                        formatStrict: false,
-
-  		                        // the minimum/earliest date that can be selected
-  		                        minDate: null,
-  		                        // the maximum/latest date that can be selected
-  		                        maxDate: null,
-
-  		                        // number of years either side, or array of upper/lower range
-  		                        yearRange: 10,
-
-  		                        // show week numbers at head of row
-  		                        showWeekNumber: false,
-
-  		                        // Week picker mode
-  		                        pickWholeWeek: false,
-
-  		                        // used internally (don't config outside)
-  		                        minYear: 0,
-  		                        maxYear: 9999,
-  		                        minMonth: undefined,
-  		                        maxMonth: undefined,
-
-  		                        startRange: null,
-  		                        endRange: null,
-
-  		                        isRTL: false,
-
-  		                        // Additional text to append to the year in the calendar title
-  		                        yearSuffix: '',
-
-  		                        // Render the month after year in the calendar title
-  		                        showMonthAfterYear: false,
-
-  		                        // Render days of the calendar grid that fall in the next or previous month
-  		                        showDaysInNextAndPreviousMonths: false,
-
-  		                        // Allows user to select days that fall in the next or previous month
-  		                        enableSelectionDaysInNextAndPreviousMonths: false,
-
-  		                        // how many months are visible
-  		                        numberOfMonths: 1,
-
-  		                        // when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`)
-  		                        // only used for the first display or when a selected date is not visible
-  		                        mainCalendar: 'left',
-
-  		                        // Specify a DOM element to render the calendar in
-  		                        container: undefined,
-
-  		                        // Blur field when date is selected
-  		                        blurFieldOnSelect: true,
-
-  		                        // internationalization
-  		                        i18n: {
-  		                            previousMonth: 'Previous Month',
-  		                            nextMonth: 'Next Month',
-  		                            months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-  		                            weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-  		                            weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-  		                        },
-
-  		                        // Theme Classname
-  		                        theme: null,
-
-  		                        // events array
-  		                        events: [],
-
-  		                        // callback function
-  		                        onSelect: null,
-  		                        onOpen: null,
-  		                        onClose: null,
-  		                        onDraw: null,
-
-  		                        // Enable keyboard input
-  		                        keyboardInput: true
-  		                    },
-
-
-  		                    /**
-  		                     * templating functions to abstract HTML rendering
-  		                     */
-  		                    renderDayName = function (opts, day, abbr) {
-  		                        day += opts.firstDay;
-  		                        while (day >= 7) {
-  		                            day -= 7;
-  		                        }
-  		                        return abbr ? opts.i18n.weekdaysShort[day] : opts.i18n.weekdays[day];
-  		                    },
-
-  		                    renderDay = function (opts) {
-  		                        var arr = [];
-  		                        var ariaSelected = 'false';
-  		                        if (opts.isEmpty) {
-  		                            if (opts.showDaysInNextAndPreviousMonths) {
-  		                                arr.push('is-outside-current-month');
-
-  		                                if (!opts.enableSelectionDaysInNextAndPreviousMonths) {
-  		                                    arr.push('is-selection-disabled');
-  		                                }
-
-  		                            } else {
-  		                                return '<td class="is-empty"></td>';
-  		                            }
-  		                        }
-  		                        if (opts.isDisabled) {
-  		                            arr.push('is-disabled');
-  		                        }
-  		                        if (opts.isToday) {
-  		                            arr.push('is-today');
-  		                        }
-  		                        if (opts.isSelected) {
-  		                            arr.push('is-selected');
-  		                            ariaSelected = 'true';
-  		                        }
-  		                        if (opts.hasEvent) {
-  		                            arr.push('has-event');
-  		                        }
-  		                        if (opts.isInRange) {
-  		                            arr.push('is-inrange');
-  		                        }
-  		                        if (opts.isStartRange) {
-  		                            arr.push('is-startrange');
-  		                        }
-  		                        if (opts.isEndRange) {
-  		                            arr.push('is-endrange');
-  		                        }
-  		                        return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '" aria-selected="' + ariaSelected + '">' +
-  		                            '<button tabIndex="-1" class="pika-button pika-day" type="button" ' +
-  		                            'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' +
-  		                            opts.day +
-  		                            '</button>' +
-  		                            '</td>';
-  		                    },
-
-  		                    renderWeek = function (d, m, y) {
-  		                        // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
-  		                        var onejan = new Date(y, 0, 1),
-  		                            weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay() + 1) / 7);
-  		                        return '<td class="pika-week">' + weekNum + '</td>';
-  		                    },
-
-  		                    renderRow = function (days, isRTL, pickWholeWeek, isRowSelected) {
-  		                        return '<tr class="pika-row' + (pickWholeWeek ? ' pick-whole-week' : '') + (isRowSelected ? ' is-selected' : '') + '">' + (isRTL ? days.reverse() : days).join('') + '</tr>';
-  		                    },
-
-  		                    renderBody = function (rows) {
-  		                        return '<tbody>' + rows.join('') + '</tbody>';
-  		                    },
-
-  		                    renderHead = function (opts) {
-  		                        var i, arr = [];
-  		                        if (opts.showWeekNumber) {
-  		                            arr.push('<th></th>');
-  		                        }
-  		                        for (i = 0; i < 7; i++) {
-  		                            arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
-  		                        }
-  		                        return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
-  		                    },
-
-  		                    renderTitle = function (instance, c, year, month, refYear, randId) {
-  		                        var i, j, arr,
-  		                            opts = instance._o,
-  		                            isMinYear = year === opts.minYear,
-  		                            isMaxYear = year === opts.maxYear,
-  		                            html = '<div id="' + randId + '" class="pika-title">',
-  		                            monthHtml,
-  		                            yearHtml,
-  		                            prev = true,
-  		                            next = true;
-
-  		                        for (arr = [], i = 0; i < 12; i++) {
-  		                            arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
-  		                                (i === month ? ' selected="selected"' : '') +
-  		                                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled="disabled"' : '') + '>' +
-  		                                opts.i18n.months[i] + '</option>');
-  		                        }
-
-  		                        monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select aria-label="select month" class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
-
-  		                        if (isArray(opts.yearRange)) {
-  		                            i = opts.yearRange[0];
-  		                            j = opts.yearRange[1] + 1;
-  		                        } else {
-  		                            i = year - opts.yearRange;
-  		                            j = 1 + year + opts.yearRange;
-  		                        }
-
-  		                        for (arr = []; i < j && i <= opts.maxYear; i++) {
-  		                            if (i >= opts.minYear) {
-  		                                arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"' : '') + '>' + (i) + '</option>');
-  		                            }
-  		                        }
-  		                        yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select aria-label="select year" class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
-
-  		                        if (opts.showMonthAfterYear) {
-  		                            html += yearHtml + monthHtml;
-  		                        } else {
-  		                            html += monthHtml + yearHtml;
-  		                        }
-
-  		                        if (isMinYear && (month === 0 || opts.minMonth >= month)) {
-  		                            prev = false;
-  		                        }
-
-  		                        if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
-  		                            next = false;
-  		                        }
-
-  		                        if (c === 0) {
-  		                            html += '<button tabIndex="-1" class="pika-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + opts.i18n.previousMonth + '</button>';
-  		                        }
-  		                        if (c === (instance._o.numberOfMonths - 1)) {
-  		                            html += '<button tabIndex="-1" class="pika-next' + (next ? '' : ' is-disabled') + '" type="button">' + opts.i18n.nextMonth + '</button>';
-  		                        }
-
-  		                        return html += '</div>';
-  		                    },
-
-  		                    renderTable = function (opts, data, randId) {
-  		                        return '<table cellpadding="0" cellspacing="0" class="pika-table" role="grid" aria-labelledby="' + randId + '">' + renderHead(opts) + renderBody(data) + '</table>';
-  		                    },
-
-
-  		                    /**
-  		                     * Pikaday constructor
-  		                     */
-  		                    Pikaday = function (options) {
-  		                        var self = this,
-  		                            opts = self.config(options);
-
-  		                        self._onMouseDown = function (e) {
-  		                            if (!self._v) {
-  		                                return;
-  		                            }
-  		                            e = e || window.event;
-  		                            var target = e.target || e.srcElement;
-  		                            if (!target) {
-  		                                return;
-  		                            }
-
-  		                            if (!hasClass(target, 'is-disabled')) {
-  		                                if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty') && !hasClass(target.parentNode, 'is-disabled')) {
-  		                                    self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
-  		                                    if (opts.bound) {
-  		                                        sto(function () {
-  		                                            self.hide();
-  		                                            if (opts.blurFieldOnSelect && opts.field) {
-  		                                                opts.field.blur();
-  		                                            }
-  		                                        }, 100);
-  		                                    }
-  		                                }
-  		                                else if (hasClass(target, 'pika-prev')) {
-  		                                    self.prevMonth();
-  		                                }
-  		                                else if (hasClass(target, 'pika-next')) {
-  		                                    self.nextMonth();
-  		                                }
-  		                            }
-  		                            if (!hasClass(target, 'pika-select')) {
-  		                                // if this is touch event prevent mouse events emulation
-  		                                if (e.preventDefault) {
-  		                                    e.preventDefault();
-  		                                } else {
-  		                                    e.returnValue = false;
-  		                                    return false;
-  		                                }
-  		                            } else {
-  		                                self._c = true;
-  		                            }
-  		                        };
-
-  		                        self._onChange = function (e) {
-  		                            e = e || window.event;
-  		                            var target = e.target || e.srcElement;
-  		                            if (!target) {
-  		                                return;
-  		                            }
-  		                            if (hasClass(target, 'pika-select-month')) {
-  		                                self.gotoMonth(target.value);
-  		                            }
-  		                            else if (hasClass(target, 'pika-select-year')) {
-  		                                self.gotoYear(target.value);
-  		                            }
-  		                        };
-
-  		                        self._onKeyChange = function (e) {
-  		                            e = e || window.event;
-  		                            // ignore if event comes from input box
-  		                            if (self.isVisible() && e.target && e.target.type !== 'text') {
-
-  		                                switch (e.keyCode) {
-  		                                    case 13:
-  		                                    case 27:
-  		                                        if (opts.field) {
-  		                                            opts.field.blur();
-  		                                        }
-  		                                        break;
-  		                                    case 37:
-  		                                        e.preventDefault();
-  		                                        self.adjustDate('subtract', 1);
-  		                                        break;
-  		                                    case 38:
-  		                                        self.adjustDate('subtract', 7);
-  		                                        break;
-  		                                    case 39:
-  		                                        self.adjustDate('add', 1);
-  		                                        break;
-  		                                    case 40:
-  		                                        self.adjustDate('add', 7);
-  		                                        break;
-  		                                }
-  		                            }
-  		                        };
-
-  		                        self._onInputChange = function (e) {
-  		                            var date;
-
-  		                            if (e.firedBy === self) {
-  		                                return;
-  		                            }
-  		                            if (opts.parse) {
-  		                                date = opts.parse(opts.field.value, opts.format);
-  		                            } else if (hasMoment) {
-  		                                date = moment(opts.field.value, opts.format, opts.formatStrict);
-  		                                date = (date && date.isValid()) ? date.toDate() : null;
-  		                            }
-  		                            else {
-  		                                date = new Date(Date.parse(opts.field.value));
-  		                            }
-  		                            // if (isDate(date)) {
-  		                            //   self.setDate(date);
-  		                            // }
-  		                            // if (!self._v) {
-  		                            //     self.show();
-  		                            // }
-  		                        };
-
-  		                        self._onInputFocus = function () {
-  		                            self.show();
-  		                        };
-
-  		                        self._onInputClick = function () {
-  		                            self.show();
-  		                        };
-
-  		                        self._onInputBlur = function () {
-  		                            // IE allows pika div to gain focus; catch blur the input field
-  		                            var pEl = document.activeElement;
-  		                            do {
-  		                                if (hasClass(pEl, 'pika-single')) {
-  		                                    return;
-  		                                }
-  		                            }
-  		                            while ((pEl = pEl.parentNode));
-
-  		                            if (!self._c) {
-  		                                self._b = sto(function () {
-  		                                    self.hide();
-  		                                }, 50);
-  		                            }
-  		                            self._c = false;
-  		                        };
-
-  		                        self._onClick = function (e) {
-  		                            e = e || window.event;
-  		                            var target = e.target || e.srcElement,
-  		                                pEl = target;
-  		                            if (!target) {
-  		                                return;
-  		                            }
-  		                            if (!hasEventListeners && hasClass(target, 'pika-select')) {
-  		                                if (!target.onchange) {
-  		                                    target.setAttribute('onchange', 'return;');
-  		                                    addEvent(target, 'change', self._onChange);
-  		                                }
-  		                            }
-  		                            do {
-  		                                if (hasClass(pEl, 'pika-single') || pEl === opts.trigger) {
-  		                                    return;
-  		                                }
-  		                            }
-  		                            while ((pEl = pEl.parentNode));
-  		                            if (self._v && target !== opts.trigger && pEl !== opts.trigger) {
-  		                                self.hide();
-  		                            }
-  		                        };
-
-  		                        self.el = document.createElement('div');
-  		                        self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '') + (opts.theme ? ' ' + opts.theme : '');
-
-  		                        addEvent(self.el, 'mousedown', self._onMouseDown, true);
-  		                        addEvent(self.el, 'touchend', self._onMouseDown, true);
-  		                        addEvent(self.el, 'change', self._onChange);
-
-  		                        if (opts.keyboardInput) {
-  		                            addEvent(document, 'keydown', self._onKeyChange);
-  		                        }
-
-  		                        if (opts.field) {
-  		                            if (opts.container) {
-  		                                opts.container.appendChild(self.el);
-  		                            } else if (opts.bound) {
-  		                                document.body.appendChild(self.el);
-  		                            } else {
-  		                                opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
-  		                            }
-  		                            addEvent(opts.field, 'change', self._onInputChange);
-
-  		                            if (!opts.defaultDate) {
-  		                                if (hasMoment && opts.field.value) {
-  		                                    opts.defaultDate = moment(opts.field.value, opts.format).toDate();
-  		                                } else {
-  		                                    opts.defaultDate = new Date(Date.parse(opts.field.value));
-  		                                }
-  		                                opts.setDefaultDate = true;
-  		                            }
-  		                        }
-
-  		                        var defDate = opts.defaultDate;
-
-  		                        if (isDate(defDate)) {
-  		                            if (opts.setDefaultDate) {
-  		                                self.setDate(defDate, true);
-  		                            } else {
-  		                                self.gotoDate(defDate);
-  		                            }
-  		                        } else {
-  		                            self.gotoDate(new Date());
-  		                        }
-
-  		                        if (opts.bound) {
-  		                            this.hide();
-  		                            self.el.className += ' is-bound';
-  		                            addEvent(opts.trigger, 'click', self._onInputClick);
-  		                            addEvent(opts.trigger, 'focus', self._onInputFocus);
-  		                            addEvent(opts.trigger, 'blur', self._onInputBlur);
-  		                        } else {
-  		                            this.show();
-  		                        }
-  		                    };
-
-
-  		                /**
-  		                 * public Pikaday API
-  		                 */
-  		                Pikaday.prototype = {
-
-
-  		                    /**
-  		                     * configure functionality
-  		                     */
-  		                    config: function (options) {
-  		                        if (!this._o) {
-  		                            this._o = extend({}, defaults, true);
-  		                        }
-
-  		                        var opts = extend(this._o, options, true);
-
-  		                        opts.isRTL = !!opts.isRTL;
-
-  		                        opts.field = (opts.field && opts.field.nodeName) ? opts.field : null;
-
-  		                        opts.theme = (typeof opts.theme) === 'string' && opts.theme ? opts.theme : null;
-
-  		                        opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);
-
-  		                        opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;
-
-  		                        opts.disableWeekends = !!opts.disableWeekends;
-
-  		                        opts.disableDayFn = (typeof opts.disableDayFn) === 'function' ? opts.disableDayFn : null;
-
-  		                        var nom = parseInt(opts.numberOfMonths, 10) || 1;
-  		                        opts.numberOfMonths = nom > 4 ? 4 : nom;
-
-  		                        if (!isDate(opts.minDate)) {
-  		                            opts.minDate = false;
-  		                        }
-  		                        if (!isDate(opts.maxDate)) {
-  		                            opts.maxDate = false;
-  		                        }
-  		                        if ((opts.minDate && opts.maxDate) && opts.maxDate < opts.minDate) {
-  		                            opts.maxDate = opts.minDate = false;
-  		                        }
-  		                        if (opts.minDate) {
-  		                            this.setMinDate(opts.minDate);
-  		                        }
-  		                        if (opts.maxDate) {
-  		                            this.setMaxDate(opts.maxDate);
-  		                        }
-
-  		                        if (isArray(opts.yearRange)) {
-  		                            var fallback = new Date().getFullYear() - 10;
-  		                            opts.yearRange[0] = parseInt(opts.yearRange[0], 10) || fallback;
-  		                            opts.yearRange[1] = parseInt(opts.yearRange[1], 10) || fallback;
-  		                        } else {
-  		                            opts.yearRange = Math.abs(parseInt(opts.yearRange, 10)) || defaults.yearRange;
-  		                            if (opts.yearRange > 100) {
-  		                                opts.yearRange = 100;
-  		                            }
-  		                        }
-
-  		                        return opts;
-  		                    },
-
-  		                    /**
-  		                     * return a formatted string of the current selection (using Moment.js if available)
-  		                     */
-  		                    toString: function (format) {
-  		                        format = format || this._o.format;
-  		                        if (!isDate(this._d)) {
-  		                            return '';
-  		                        }
-  		                        if (this._o.toString) {
-  		                            return this._o.toString(this._d, format);
-  		                        }
-  		                        if (hasMoment) {
-  		                            return moment(this._d).format(format);
-  		                        }
-  		                        return this._d.toDateString();
-  		                    },
-
-  		                    /**
-  		                     * return a Moment.js object of the current selection (if available)
-  		                     */
-  		                    getMoment: function () {
-  		                        return hasMoment ? moment(this._d) : null;
-  		                    },
-
-  		                    /**
-  		                     * set the current selection from a Moment.js object (if available)
-  		                     */
-  		                    setMoment: function (date, preventOnSelect) {
-  		                        if (hasMoment && moment.isMoment(date)) {
-  		                            this.setDate(date.toDate(), preventOnSelect);
-  		                        }
-  		                    },
-
-  		                    /**
-  		                     * return a Date object of the current selection
-  		                     */
-  		                    getDate: function () {
-  		                        return isDate(this._d) ? new Date(this._d.getTime()) : null;
-  		                    },
-
-  		                    /**
-  		                     * set the current selection
-  		                     */
-  		                    setDate: function (date, preventOnSelect) {
-  		                        if (!date) {
-  		                            this._d = null;
-
-  		                            if (this._o.field) {
-  		                                this._o.field.value = '';
-  		                                fireEvent(this._o.field, 'change', { firedBy: this });
-  		                            }
-
-  		                            return this.draw();
-  		                        }
-  		                        if (typeof date === 'string') {
-  		                            date = new Date(Date.parse(date));
-  		                        }
-  		                        if (!isDate(date)) {
-  		                            return;
-  		                        }
-
-  		                        var min = this._o.minDate,
-  		                            max = this._o.maxDate;
-
-  		                        if (isDate(min) && date < min) {
-  		                            date = min;
-  		                        } else if (isDate(max) && date > max) {
-  		                            date = max;
-  		                        }
-
-  		                        this._d = new Date(date.getTime());
-  		                        setToStartOfDay(this._d);
-  		                        this.gotoDate(this._d);
-
-  		                        if (this._o.field) {
-  		                            this._o.field.value = this.toString();
-  		                            fireEvent(this._o.field, 'change', { firedBy: this });
-  		                        }
-  		                        if (!preventOnSelect && typeof this._o.onSelect === 'function') {
-  		                            this._o.onSelect.call(this, this.getDate());
-  		                        }
-  		                    },
-
-  		                    /**
-  		                     * change view to a specific date
-  		                     */
-  		                    gotoDate: function (date) {
-  		                        var newCalendar = true;
-
-  		                        if (!isDate(date)) {
-  		                            return;
-  		                        }
-
-  		                        if (this.calendars) {
-  		                            var firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1),
-  		                                lastVisibleDate = new Date(this.calendars[this.calendars.length - 1].year, this.calendars[this.calendars.length - 1].month, 1),
-  		                                visibleDate = date.getTime();
-  		                            // get the end of the month
-  		                            lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1);
-  		                            lastVisibleDate.setDate(lastVisibleDate.getDate() - 1);
-  		                            newCalendar = (visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate);
-  		                        }
-
-  		                        if (newCalendar) {
-  		                            this.calendars = [{
-  		                                month: date.getMonth(),
-  		                                year: date.getFullYear()
-  		                            }];
-  		                            if (this._o.mainCalendar === 'right') {
-  		                                this.calendars[0].month += 1 - this._o.numberOfMonths;
-  		                            }
-  		                        }
-
-  		                        this.adjustCalendars();
-  		                    },
-
-  		                    adjustDate: function (sign, days) {
-
-  		                        var day = this.getDate() || new Date();
-  		                        var difference = parseInt(days) * 24 * 60 * 60 * 1000;
-
-  		                        var newDay;
-
-  		                        if (sign === 'add') {
-  		                            newDay = new Date(day.valueOf() + difference);
-  		                        } else if (sign === 'subtract') {
-  		                            newDay = new Date(day.valueOf() - difference);
-  		                        }
-
-  		                        this.setDate(newDay);
-  		                    },
-
-  		                    adjustCalendars: function () {
-  		                        this.calendars[0] = adjustCalendar(this.calendars[0]);
-  		                        for (var c = 1; c < this._o.numberOfMonths; c++) {
-  		                            this.calendars[c] = adjustCalendar({
-  		                                month: this.calendars[0].month + c,
-  		                                year: this.calendars[0].year
-  		                            });
-  		                        }
-  		                        this.draw();
-  		                    },
-
-  		                    gotoToday: function () {
-  		                        this.gotoDate(new Date());
-  		                    },
-
-  		                    /**
-  		                     * change view to a specific month (zero-index, e.g. 0: January)
-  		                     */
-  		                    gotoMonth: function (month) {
-  		                        if (!isNaN(month)) {
-  		                            this.calendars[0].month = parseInt(month, 10);
-  		                            this.adjustCalendars();
-  		                        }
-  		                    },
-
-  		                    nextMonth: function () {
-  		                        this.calendars[0].month++;
-  		                        this.adjustCalendars();
-  		                    },
-
-  		                    prevMonth: function () {
-  		                        this.calendars[0].month--;
-  		                        this.adjustCalendars();
-  		                    },
-
-  		                    /**
-  		                     * change view to a specific full year (e.g. "2012")
-  		                     */
-  		                    gotoYear: function (year) {
-  		                        if (!isNaN(year)) {
-  		                            this.calendars[0].year = parseInt(year, 10);
-  		                            this.adjustCalendars();
-  		                        }
-  		                    },
-
-  		                    /**
-  		                     * change the minDate
-  		                     */
-  		                    setMinDate: function (value) {
-  		                        if (value instanceof Date) {
-  		                            setToStartOfDay(value);
-  		                            this._o.minDate = value;
-  		                            this._o.minYear = value.getFullYear();
-  		                            this._o.minMonth = value.getMonth();
-  		                        } else {
-  		                            this._o.minDate = defaults.minDate;
-  		                            this._o.minYear = defaults.minYear;
-  		                            this._o.minMonth = defaults.minMonth;
-  		                            this._o.startRange = defaults.startRange;
-  		                        }
-
-  		                        this.draw();
-  		                    },
-
-  		                    /**
-  		                     * change the maxDate
-  		                     */
-  		                    setMaxDate: function (value) {
-  		                        if (value instanceof Date) {
-  		                            setToStartOfDay(value);
-  		                            this._o.maxDate = value;
-  		                            this._o.maxYear = value.getFullYear();
-  		                            this._o.maxMonth = value.getMonth();
-  		                        } else {
-  		                            this._o.maxDate = defaults.maxDate;
-  		                            this._o.maxYear = defaults.maxYear;
-  		                            this._o.maxMonth = defaults.maxMonth;
-  		                            this._o.endRange = defaults.endRange;
-  		                        }
-
-  		                        this.draw();
-  		                    },
-
-  		                    setStartRange: function (value) {
-  		                        this._o.startRange = value;
-  		                    },
-
-  		                    setEndRange: function (value) {
-  		                        this._o.endRange = value;
-  		                    },
-
-  		                    /**
-  		                     * refresh the HTML
-  		                     */
-  		                    draw: function (force) {
-  		                        if (!this._v && !force) {
-  		                            return;
-  		                        }
-  		                        var opts = this._o,
-  		                            minYear = opts.minYear,
-  		                            maxYear = opts.maxYear,
-  		                            minMonth = opts.minMonth,
-  		                            maxMonth = opts.maxMonth,
-  		                            html = '',
-  		                            randId;
-
-  		                        if (this._y <= minYear) {
-  		                            this._y = minYear;
-  		                            if (!isNaN(minMonth) && this._m < minMonth) {
-  		                                this._m = minMonth;
-  		                            }
-  		                        }
-  		                        if (this._y >= maxYear) {
-  		                            this._y = maxYear;
-  		                            if (!isNaN(maxMonth) && this._m > maxMonth) {
-  		                                this._m = maxMonth;
-  		                            }
-  		                        }
-
-  		                        for (var c = 0; c < opts.numberOfMonths; c++) {
-  		                            randId = 'pika-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2);
-  		                            html += '<div class="pika-lendar">' + renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId) + '</div>';
-  		                        }
-
-  		                        this.el.innerHTML = html;
-
-  		                        if (opts.bound) {
-  		                            if (opts.field.type !== 'hidden') {
-  		                                sto(function () {
-  		                                    opts.trigger.focus();
-  		                                }, 1);
-  		                            }
-  		                        }
-
-  		                        if (typeof this._o.onDraw === 'function') {
-  		                            this._o.onDraw(this);
-  		                        }
-
-  		                        if (opts.bound) {
-  		                            // let the screen reader user know to use arrow keys
-  		                            opts.field.setAttribute('aria-label', 'Use the arrow keys to pick a date');
-  		                        }
-  		                    },
-
-  		                    adjustPosition: function () {
-  		                        var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect;
-
-  		                        if (this._o.container) return;
-
-  		                        this.el.style.position = 'absolute';
-
-  		                        field = this._o.trigger;
-  		                        pEl = field;
-  		                        width = this.el.offsetWidth;
-  		                        height = this.el.offsetHeight;
-  		                        viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-  		                        viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-  		                        scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
-
-  		                        if (typeof field.getBoundingClientRect === 'function') {
-  		                            clientRect = field.getBoundingClientRect();
-  		                            left = clientRect.left + window.pageXOffset;
-  		                            top = clientRect.bottom + window.pageYOffset;
-  		                        } else {
-  		                            left = pEl.offsetLeft;
-  		                            top = pEl.offsetTop + pEl.offsetHeight;
-  		                            while ((pEl = pEl.offsetParent)) {
-  		                                left += pEl.offsetLeft;
-  		                                top += pEl.offsetTop;
-  		                            }
-  		                        }
-
-  		                        // default position is bottom & left
-  		                        if ((this._o.reposition && left + width > viewportWidth) ||
-  		                            (
-  		                                this._o.position.indexOf('right') > -1 &&
-  		                                left - width + field.offsetWidth > 0
-  		                            )
-  		                        ) {
-  		                            left = left - width + field.offsetWidth;
-  		                        }
-  		                        if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
-  		                            (
-  		                                this._o.position.indexOf('top') > -1 &&
-  		                                top - height - field.offsetHeight > 0
-  		                            )
-  		                        ) {
-  		                            top = top - height - field.offsetHeight;
-  		                        }
-
-  		                        this.el.style.left = left + 'px';
-  		                        this.el.style.top = top + 'px';
-  		                    },
-
-  		                    /**
-  		                     * render HTML for a particular month
-  		                     */
-  		                    render: function (year, month, randId) {
-  		                        var opts = this._o,
-  		                            now = new Date(),
-  		                            days = getDaysInMonth(year, month),
-  		                            before = new Date(year, month, 1).getDay(),
-  		                            data = [],
-  		                            row = [];
-  		                        setToStartOfDay(now);
-  		                        if (opts.firstDay > 0) {
-  		                            before -= opts.firstDay;
-  		                            if (before < 0) {
-  		                                before += 7;
-  		                            }
-  		                        }
-  		                        var previousMonth = month === 0 ? 11 : month - 1,
-  		                            nextMonth = month === 11 ? 0 : month + 1,
-  		                            yearOfPreviousMonth = month === 0 ? year - 1 : year,
-  		                            yearOfNextMonth = month === 11 ? year + 1 : year,
-  		                            daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
-  		                        var cells = days + before,
-  		                            after = cells;
-  		                        while (after > 7) {
-  		                            after -= 7;
-  		                        }
-  		                        cells += 7 - after;
-  		                        var isWeekSelected = false;
-  		                        for (var i = 0, r = 0; i < cells; i++) {
-  		                            var day = new Date(year, month, 1 + (i - before)),
-  		                                isSelected = isDate(this._d) ? compareDates(day, this._d) : false,
-  		                                isToday = compareDates(day, now),
-  		                                hasEvent = opts.events.indexOf(day.toDateString()) !== -1 ? true : false,
-  		                                isEmpty = i < before || i >= (days + before),
-  		                                dayNumber = 1 + (i - before),
-  		                                monthNumber = month,
-  		                                yearNumber = year,
-  		                                isStartRange = opts.startRange && compareDates(opts.startRange, day),
-  		                                isEndRange = opts.endRange && compareDates(opts.endRange, day),
-  		                                isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange,
-  		                                isDisabled = (opts.minDate && day < opts.minDate) ||
-  		                                    (opts.maxDate && day > opts.maxDate) ||
-  		                                    (opts.disableWeekends && isWeekend(day)) ||
-  		                                    (opts.disableDayFn && opts.disableDayFn(day));
-
-  		                            if (isEmpty) {
-  		                                if (i < before) {
-  		                                    dayNumber = daysInPreviousMonth + dayNumber;
-  		                                    monthNumber = previousMonth;
-  		                                    yearNumber = yearOfPreviousMonth;
-  		                                } else {
-  		                                    dayNumber = dayNumber - days;
-  		                                    monthNumber = nextMonth;
-  		                                    yearNumber = yearOfNextMonth;
-  		                                }
-  		                            }
-
-  		                            var dayConfig = {
-  		                                day: dayNumber,
-  		                                month: monthNumber,
-  		                                year: yearNumber,
-  		                                hasEvent: hasEvent,
-  		                                isSelected: isSelected,
-  		                                isToday: isToday,
-  		                                isDisabled: isDisabled,
-  		                                isEmpty: isEmpty,
-  		                                isStartRange: isStartRange,
-  		                                isEndRange: isEndRange,
-  		                                isInRange: isInRange,
-  		                                showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths,
-  		                                enableSelectionDaysInNextAndPreviousMonths: opts.enableSelectionDaysInNextAndPreviousMonths
-  		                            };
-
-  		                            if (opts.pickWholeWeek && isSelected) {
-  		                                isWeekSelected = true;
-  		                            }
-
-  		                            row.push(renderDay(dayConfig));
-
-  		                            if (++r === 7) {
-  		                                if (opts.showWeekNumber) {
-  		                                    row.unshift(renderWeek(i - before, month, year));
-  		                                }
-  		                                data.push(renderRow(row, opts.isRTL, opts.pickWholeWeek, isWeekSelected));
-  		                                row = [];
-  		                                r = 0;
-  		                                isWeekSelected = false;
-  		                            }
-  		                        }
-  		                        return renderTable(opts, data, randId);
-  		                    },
-
-  		                    isVisible: function () {
-  		                        return this._v;
-  		                    },
-
-  		                    show: function () {
-  		                        if (!this.isVisible()) {
-  		                            this._v = true;
-  		                            this.draw();
-  		                            removeClass(this.el, 'is-hidden');
-  		                            if (this._o.bound) {
-  		                                addEvent(document, 'click', this._onClick);
-  		                                this.adjustPosition();
-  		                            }
-  		                            if (typeof this._o.onOpen === 'function') {
-  		                                this._o.onOpen.call(this);
-  		                            }
-  		                        }
-  		                    },
-
-  		                    hide: function () {
-  		                        var v = this._v;
-  		                        if (v !== false) {
-  		                            if (this._o.bound) {
-  		                                removeEvent(document, 'click', this._onClick);
-  		                            }
-  		                            this.el.style.position = 'static'; // reset
-  		                            this.el.style.left = 'auto';
-  		                            this.el.style.top = 'auto';
-  		                            addClass(this.el, 'is-hidden');
-  		                            this._v = false;
-  		                            if (v !== undefined && typeof this._o.onClose === 'function') {
-  		                                this._o.onClose.call(this);
-  		                            }
-  		                        }
-  		                    },
-
-  		                    /**
-  		                     * GAME OVER
-  		                     */
-  		                    destroy: function () {
-  		                        var opts = this._o;
-
-  		                        this.hide();
-  		                        removeEvent(this.el, 'mousedown', this._onMouseDown, true);
-  		                        removeEvent(this.el, 'touchend', this._onMouseDown, true);
-  		                        removeEvent(this.el, 'change', this._onChange);
-  		                        if (opts.keyboardInput) {
-  		                            removeEvent(document, 'keydown', this._onKeyChange);
-  		                        }
-  		                        if (opts.field) {
-  		                            removeEvent(opts.field, 'change', this._onInputChange);
-  		                            if (opts.bound) {
-  		                                removeEvent(opts.trigger, 'click', this._onInputClick);
-  		                                removeEvent(opts.trigger, 'focus', this._onInputFocus);
-  		                                removeEvent(opts.trigger, 'blur', this._onInputBlur);
-  		                            }
-  		                        }
-  		                        if (this.el.parentNode) {
-  		                            this.el.parentNode.removeChild(this.el);
-  		                        }
-  		                    }
-
-  		                };
-
-  		                return Pikaday;
-  		            })); 
-  	} (pikaday$1));
-  	return pikaday$1.exports;
-  }
-
-  var pikadayExports = /*@__PURE__*/ requirePikaday();
-  var Pikaday = /*@__PURE__*/getDefaultExportFromCjs(pikadayExports);
-
-  // Ensure moment is available globally for Pikaday
-  if (typeof window !== 'undefined') {
-      window.moment = moment;
-  }
-  // 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);
-  }
+  // 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) {
@@ -39077,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);
@@ -39097,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);
@@ -39121,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 : () => { };
@@ -39150,6 +38062,7 @@
                       this.onClose();
                       this.onCancel();
                   });
+                  this.setupClickOutsideHandler();
               }
           });
       }
@@ -43455,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("");
@@ -43809,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;
                   }, {})
                   : {};
@@ -43833,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") + ')';
@@ -43855,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');
@@ -43868,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) {
@@ -43878,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);
@@ -43912,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;
@@ -43953,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 {
@@ -43965,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);
@@ -43993,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) {
@@ -44045,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;
@@ -44289,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));
@@ -44301,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);
@@ -44310,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();
           });
       }
   }
@@ -44613,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;
       }
@@ -44622,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);
@@ -44683,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();
@@ -44734,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);
@@ -44742,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);
@@ -44767,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);