tsichart-core 2.0.0-beta.2 → 2.0.0-beta.6

package/dist/index.mjs

@@ -1047,8 +1047,7 @@ Utils.getTimeSeriesIdToDisplay = (instance, emptyDisplayString) => {
     return Utils.instanceHasEmptyTSID(instance) ? emptyDisplayString : instance.timeSeriesId.map(id => id === null ? Utils.guidForNullTSID : id).join(', ');
 };
 Utils.getHighlightedTimeSeriesIdToDisplay = (instance) => {
-    var _a;
-    return (_a = instance.highlights) === null || _a === void 0 ? void 0 : _a.timeSeriesId.map((id, idx) => instance.timeSeriesId[idx] === null ? Utils.guidForNullTSID : id).join(', ');
+    return instance.highlights?.timeSeriesId.map((id, idx) => instance.timeSeriesId[idx] === null ? Utils.guidForNullTSID : id).join(', ');
 };
 Utils.instanceHasEmptyTSID = (instance) => {
     return !instance.timeSeriesId || instance.timeSeriesId.length === 0;
@@ -1481,10 +1480,10 @@ class Component {
     }
     themify(targetElement, theme) {
         var theme = Utils.getTheme(theme);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.classed(this.currentTheme, false);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.classed('tsi-light', false);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.classed('tsi-dark', false);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.classed(theme, true);
+        targetElement?.classed(this.currentTheme, false);
+        targetElement?.classed('tsi-light', false);
+        targetElement?.classed('tsi-dark', false);
+        targetElement?.classed(theme, true);
         this.currentTheme = theme;
     }
     tooltipFormat(d, text, measureFormat, xyrMeasures = null) {
@@ -1707,7 +1706,7 @@ class Legend extends Component {
     }
     labelMouseoutWrapper(labelMouseout, svgSelection, event) {
         return (svgSelection, aggKey) => {
-            event === null || event === void 0 ? void 0 : event.stopPropagation();
+            event?.stopPropagation();
             svgSelection.selectAll(".tsi-valueElement")
                 .filter(function () { return !d3.select(this).classed("tsi-valueEnvelope"); })
                 .attr("stroke-opacity", 1)
@@ -2073,7 +2072,7 @@ class ChartComponentData {
         let aggKeys = Utils.getAggKeys(this.data);
         this.data = this.data.map((aggregate, i) => {
             var aggName = Object.keys(aggregate)[0];
-            let aggregateCopy = Object.assign({}, aggregate);
+            let aggregateCopy = { ...aggregate };
             let aggKey = aggKeys[i];
             this.data[i].aggKey = aggKey;
             aggregateCopy.aggKey = aggKey;
@@ -4010,7 +4009,7 @@ class LinePlot extends Plot {
             }
             let envelopeData = {};
             if ((self.chartComponentData.displayState[aggKey].includeEnvelope || self.chartOptions.includeEnvelope) && self.chartComponentData.isPossibleEnvelope(aggKey, splitBy)) {
-                envelopeData = self.chartComponentData.timeArrays[aggKey][splitBy].map((d) => (Object.assign(Object.assign({}, d), { isEnvelope: true })));
+                envelopeData = self.chartComponentData.timeArrays[aggKey][splitBy].map((d) => ({ ...d, isEnvelope: true }));
             }
             let envelope = d3.select(this).selectAll(".tsi-valueEnvelope")
                 .data([envelopeData]);
@@ -6100,7 +6099,6 @@ class LineChart extends TemporalXAxisComponent {
         let visibleCDOs = this.aggregateExpressionOptions.filter((cDO) => this.chartComponentData.displayState[cDO.aggKey]["visible"]);
         const markerList = [];
         const pushMarker = (cDO, marker, markerList) => {
-            var _a, _b;
             if (this.chartOptions.yAxisState === YAxisStates.Overlap) {
                 return;
             }
@@ -6109,10 +6107,10 @@ class LineChart extends TemporalXAxisComponent {
                 this.swimlaneYExtents[0];
             // filter out markers not in the y range of that lane and in lanes that have overlap axis
             if (domain &&
-                ((_b = (_a = this.chartOptions.swimLaneOptions) === null || _a === void 0 ? void 0 : _a[cDO.swimLane]) === null || _b === void 0 ? void 0 : _b.yAxisType) !== YAxisStates.Overlap &&
+                this.chartOptions.swimLaneOptions?.[cDO.swimLane]?.yAxisType !== YAxisStates.Overlap &&
                 marker.value >= domain[0] &&
                 marker.value <= domain[1]) {
-                markerList.push(Object.assign({ yScale: this.yMap[cDO.aggKey] }, marker));
+                markerList.push({ yScale: this.yMap[cDO.aggKey], ...marker });
             }
         };
         visibleCDOs.forEach((cDO) => {
@@ -6128,9 +6126,8 @@ class LineChart extends TemporalXAxisComponent {
         };
         if (this.chartOptions.yAxisState !== YAxisStates.Overlap && this.chartOptions.swimLaneOptions) {
             Object.keys(this.chartOptions.swimLaneOptions).forEach((swimlaneNumber) => {
-                var _a;
                 const swimlaneOptions = this.chartOptions.swimLaneOptions[swimlaneNumber];
-                (_a = swimlaneOptions.horizontalMarkers) === null || _a === void 0 ? void 0 : _a.forEach((horizontalMarkerParams) => {
+                swimlaneOptions.horizontalMarkers?.forEach((horizontalMarkerParams) => {
                     const firstVisibleCDO = findFirstVisibleCDO(Number(swimlaneNumber));
                     if (firstVisibleCDO) {
                         pushMarker(firstVisibleCDO, horizontalMarkerParams, markerList);
@@ -6199,17 +6196,16 @@ class LineChart extends TemporalXAxisComponent {
             current height of the lane.
         */
         const useAggForLaneLabel = (aggGroup) => {
-            var _a, _b, _c, _d, _e, _f;
             let swimLane = aggGroup.swimLane;
             let aggIndex = visibleCDOs.findIndex(el => el.aggKey === aggGroup.aggKey);
             let onClick = null;
-            if (typeof ((_c = (_b = (_a = this.chartOptions) === null || _a === void 0 ? void 0 : _a.swimLaneOptions) === null || _b === void 0 ? void 0 : _b[swimLane]) === null || _c === void 0 ? void 0 : _c.onClick) === 'function') {
-                onClick = () => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = this.chartOptions) === null || _a === void 0 ? void 0 : _a.swimLaneOptions) === null || _b === void 0 ? void 0 : _b[swimLane]) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.call(_c, swimLane); };
+            if (typeof this.chartOptions?.swimLaneOptions?.[swimLane]?.onClick === 'function') {
+                onClick = () => this.chartOptions?.swimLaneOptions?.[swimLane]?.onClick?.(swimLane);
             }
             swimLaneLabels[swimLane] = {
                 offset: offsetsAndHeights[aggIndex][0],
                 height: offsetsAndHeights[aggIndex][1],
-                label: (_f = (_e = (_d = this.chartOptions) === null || _d === void 0 ? void 0 : _d.swimLaneOptions) === null || _e === void 0 ? void 0 : _e[swimLane]) === null || _f === void 0 ? void 0 : _f.label,
+                label: this.chartOptions?.swimLaneOptions?.[swimLane]?.label,
                 onClick
             };
         };
@@ -6221,13 +6217,12 @@ class LineChart extends TemporalXAxisComponent {
         });
         // Then, map over any non-numeric dataType and increment heights if they're sharing a lane
         visibleCDOs.filter(aggGroup => aggGroup.dataType !== DataTypes.Numeric).forEach(aggGroup => {
-            var _a, _b, _c;
             let aggIndex = visibleCDOs.findIndex(el => el.aggKey === aggGroup.aggKey);
             if (!(aggGroup.swimLane in swimLaneLabels)) { // Only add swimlanes once to swimLaneLabels map
                 useAggForLaneLabel(aggGroup);
             }
             else { // if lane contains non-numeric data and is being added to another lane
-                if (!((_c = (_b = (_a = this.chartOptions) === null || _a === void 0 ? void 0 : _a.swimLaneOptions) === null || _b === void 0 ? void 0 : _b[aggGroup.swimLane]) === null || _c === void 0 ? void 0 : _c.collapseEvents)) { // Only increment event heights if collapseEvents === false
+                if (!this.chartOptions?.swimLaneOptions?.[aggGroup.swimLane]?.collapseEvents) { // Only increment event heights if collapseEvents === false
                     swimLaneLabels[aggGroup.swimLane].height += offsetsAndHeights[aggIndex][1]; // add heights (non-numerics don't share Y axis)
                 }
             }
@@ -6285,6 +6280,7 @@ class LineChart extends TemporalXAxisComponent {
         });
     }
     render(data, options, aggregateExpressionOptions) {
+        console.log('LineChart render called a');
         super.render(data, options, aggregateExpressionOptions);
         this.originalSwimLanes = this.aggregateExpressionOptions.map((aEO) => {
             return aEO.swimLane;
@@ -6339,7 +6335,7 @@ class LineChart extends TemporalXAxisComponent {
                 .attr("type", "button")
                 .on("click", function () {
                 self.overwriteSwimLanes();
-                self.render(self.data, Object.assign(Object.assign({}, self.chartOptions), { yAxisState: self.nextStackedState() }), self.aggregateExpressionOptions);
+                self.render(self.data, { ...self.chartOptions, yAxisState: self.nextStackedState() }, self.aggregateExpressionOptions);
                 d3.select(this).attr("aria-label", () => self.getString("set axis state to") + ' ' + self.nextStackedState());
                 setTimeout(() => d3.select(this).node().focus(), 200);
             });
@@ -6429,8 +6425,7 @@ class LineChart extends TemporalXAxisComponent {
                 this.aggregateExpressionOptions.filter((aggExpOpt) => {
                     return this.chartComponentData.displayState[aggExpOpt.aggKey]["visible"];
                 }).forEach(visibleAgg => {
-                    var _a, _b;
-                    if ((_b = (_a = this.originalSwimLaneOptions) === null || _a === void 0 ? void 0 : _a[visibleAgg.swimLane]) === null || _b === void 0 ? void 0 : _b.label) {
+                    if (this.originalSwimLaneOptions?.[visibleAgg.swimLane]?.label) {
                         isLabelVisible = true;
                     }
                 });
@@ -6587,7 +6582,6 @@ class LineChart extends TemporalXAxisComponent {
                     return self.chartOptions.isArea ? null : 'translate(0,' + offsetsAndHeights[i][0] + ')';
                 })
                     .each(function (agg, i) {
-                    var _a, _b, _c;
                     let yExtent;
                     let aggVisible = true;
                     var aggValues = [];
@@ -6627,8 +6621,8 @@ class LineChart extends TemporalXAxisComponent {
                     }
                     let axisState = new AxisState(self.getAggAxisType(agg), yExtent, positionInGroup);
                     let yAxisOnClick = null;
-                    if (typeof ((_c = (_b = (_a = self.chartOptions) === null || _a === void 0 ? void 0 : _a.swimLaneOptions) === null || _b === void 0 ? void 0 : _b[swimLane]) === null || _c === void 0 ? void 0 : _c.onClick) === 'function') {
-                        yAxisOnClick = () => { var _a, _b; return (_b = (_a = self.chartOptions.swimLaneOptions[swimLane]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, swimLane); };
+                    if (typeof self.chartOptions?.swimLaneOptions?.[swimLane]?.onClick === 'function') {
+                        yAxisOnClick = () => self.chartOptions.swimLaneOptions[swimLane].onClick?.(swimLane);
                     }
                     self.plotComponents[aggKey].render(self.chartOptions, visibleNumericI, agg, true, d3.select(this), self.chartComponentData, axisState, self.chartHeight, self.visibleAggCount, self.colorMap, self.previousAggregateData, self.x, self.areaPath, self.strokeOpacity, self.y, self.yMap, defs, visibleCDOs[i], self.previousIncludeDots, offsetsAndHeights[i], g, mouseoverFunction, mouseoutFunction, yAxisOnClick);
                     //increment index of visible numerics if appropriate
@@ -8556,7 +8550,7 @@ class DateTimePicker extends ChartComponent {
 const MAXCARD = 150000;
 class AggregateExpression extends ChartDataOptions {
     constructor(predicateObject, measureObject, measureTypes, searchSpan, splitByObject = null, colorOrOptionsObject, alias, contextMenu) {
-        super((typeof (colorOrOptionsObject) === 'object' && !!colorOrOptionsObject) ? Object.assign(Object.assign({}, colorOrOptionsObject), { searchSpan: searchSpan, measureTypes: measureTypes }) : { color: colorOrOptionsObject, searchSpan: searchSpan, measureTypes: measureTypes, alias: alias, contextMenu: contextMenu });
+        super((typeof (colorOrOptionsObject) === 'object' && !!colorOrOptionsObject) ? { ...colorOrOptionsObject, searchSpan: searchSpan, measureTypes: measureTypes } : { color: colorOrOptionsObject, searchSpan: searchSpan, measureTypes: measureTypes, alias: alias, contextMenu: contextMenu });
         this.visibleSplitByCap = 10;
         this.predicate = predicateObject;
         this.splitByObject = splitByObject;
@@ -8743,16 +8737,18 @@ class AvailabilityChart extends ChartComponent {
         event.preventDefault && event.preventDefault();
     }
     setChartOptions(chartOptions) {
-        this.chartOptions.setOptions(Object.assign(Object.assign({}, chartOptions), {
-            keepBrush: true,
-            isArea: true,
-            noAnimate: true,
-            minutesForTimeLabels: true,
-            aggTopMargin: 0,
-            yAxisHidden: true,
-            focusHidden: true,
-            singleLineXAxisLabel: false
-        }));
+        this.chartOptions.setOptions({
+            ...chartOptions, ...{
+                keepBrush: true,
+                isArea: true,
+                noAnimate: true,
+                minutesForTimeLabels: true,
+                aggTopMargin: 0,
+                yAxisHidden: true,
+                focusHidden: true,
+                singleLineXAxisLabel: false
+            }
+        });
     }
     dateTimePickerAction(fromMillis, toMillis) {
         this.setBrush(fromMillis, toMillis, true);
@@ -9114,12 +9110,14 @@ class AvailabilityChart extends ChartComponent {
         this.zoomedToMillis = toMillis;
         var visibileAvailability = this.createDisplayBuckets(fromMillis, toMillis);
         this.chartOptions.keepBrush = true;
-        var aeWithNewTimeSpan = Object.assign(Object.assign({}, this.ae[0]), {
-            searchSpan: {
-                from: (new Date(fromMillis)),
-                to: (new Date(toMillis))
+        var aeWithNewTimeSpan = {
+            ...this.ae[0], ...{
+                searchSpan: {
+                    from: (new Date(fromMillis)),
+                    to: (new Date(toMillis))
+                }
             }
-        });
+        };
         this.timePickerLineChart.render(visibileAvailability, this.chartOptions, [aeWithNewTimeSpan]);
         this.setTicks();
         this.drawWarmRange();
@@ -9562,7 +9560,7 @@ class PieChart extends ChartVisualizationComponent {
                     var yPos = mousePosition[1];
                     tooltip.render(self.chartOptions.theme);
                     let color = Utils.colorSplitBy(self.chartComponentData.displayState, d.data.splitByI, d.data.aggKey, self.chartOptions.keepSplitByColor);
-                    tooltip.draw(d, self.chartComponentData, xPos, yPos, Object.assign(Object.assign({}, self.chartMargins), { top: 0, bottom: 0 }), (text) => {
+                    tooltip.draw(d, self.chartComponentData, xPos, yPos, { ...self.chartMargins, top: 0, bottom: 0 }, (text) => {
                         self.tooltipFormat(self.convertToTimeValueFormat(d.data), text, TooltipMeasureFormat.SingleValue);
                     }, null, 20, 20, color);
                 }
@@ -10106,8 +10104,7 @@ class ScatterPlot extends ChartVisualizationComponent {
         let connectedSeriesMap = {};
         // Find measure by which to connect series of points
         const getPointConnectionMeasure = (point => {
-            var _a;
-            let pConMes = (_a = this.aggregateExpressionOptions[point.aggregateKeyI]) === null || _a === void 0 ? void 0 : _a.pointConnectionMeasure;
+            let pConMes = this.aggregateExpressionOptions[point.aggregateKeyI]?.pointConnectionMeasure;
             return pConMes && pConMes in point.measures ? pConMes : null;
         });
         // Map data into groups of connected points, if connectedPoints enabled for agg
@@ -11769,7 +11766,7 @@ class Heatmap extends TemporalXAxisComponent {
         super.render(data, chartOptions, aggregateExpressionOptions);
         // override visibleSplitByCap
         this.aggregateExpressionOptions = this.aggregateExpressionOptions.map((aE) => {
-            return Object.assign(Object.assign({}, aE), { visibleSplitByCap: 10000 });
+            return { ...aE, visibleSplitByCap: 10000 };
         });
         this.chartOptions.setOptions(chartOptions);
         var targetElement = d3.select(this.renderTarget).classed("tsi-heatmapComponent", true);
@@ -12540,9 +12537,13 @@ class ModelSearch extends Component {
             }
         };
         let modelAutocomplete = new ModelAutocomplete(inputWrapper.node());
-        modelAutocomplete.render(environmentFqdn, getToken, Object.assign({ onInput: autocompleteOnInput, onKeydown: (event, ap) => {
+        modelAutocomplete.render(environmentFqdn, getToken, {
+            onInput: autocompleteOnInput,
+            onKeydown: (event, ap) => {
                 this.handleKeydown(event, ap);
-            } }, chartOptions));
+            },
+            ...chartOptions,
+        });
         modelAutocomplete.ap;
         let results = this.wrapper
             .append("div")
@@ -12577,7 +12578,10 @@ class ModelSearch extends Component {
             .append("div")
             .attr("class", "tsi-hierarchyWrapper");
         let hierarchy = new Hierarchy(hierarchyElement.node());
-        hierarchy.render(hierarchyData, Object.assign(Object.assign({}, this.chartOptions), { withContextMenu: true }));
+        hierarchy.render(hierarchyData, {
+            ...this.chartOptions,
+            withContextMenu: true,
+        });
         let searchInstances = (searchText, ct = null) => {
             var self = this;
             if (ct === "END")
@@ -12676,13 +12680,18 @@ class TsqExpression extends ChartDataOptions {
         // new TsqExpression(instanceObject, variableObject, searchSpan, color, alias, contextMenu)
         // Here we differentiate between both and call the parent class's constructor as appropriate.
         let optionsObject = (typeof (colorOrOptionsObject) === 'object' && !!colorOrOptionsObject)
-            ? Object.assign(Object.assign({}, colorOrOptionsObject), { searchSpan: searchSpan, measureTypes: Object.keys(variableObject) }) : {
-            color: colorOrOptionsObject,
-            searchSpan: searchSpan,
-            measureTypes: Object.keys(variableObject),
-            alias: alias,
-            contextMenu: contextMenu
-        };
+            ? {
+                ...colorOrOptionsObject,
+                searchSpan: searchSpan,
+                measureTypes: Object.keys(variableObject)
+            }
+            : {
+                color: colorOrOptionsObject,
+                searchSpan: searchSpan,
+                measureTypes: Object.keys(variableObject),
+                alias: alias,
+                contextMenu: contextMenu
+            };
         super(optionsObject);
         this.instanceObject = instanceObject;
         this.variableObject = variableObject;
@@ -12705,13 +12714,13 @@ class TsqExpression extends ChartDataOptions {
             return { getEvents: tsq };
         }
         else if (getSeries) {
-            tsq['inlineVariables'] = Object.assign({}, this.variableObject);
+            tsq['inlineVariables'] = { ...this.variableObject };
             tsq['projectedVariables'] = Object.keys(this.variableObject);
             return { getSeries: tsq };
         }
         else {
             tsq['interval'] = Utils.bucketSizeToTsqInterval(this.searchSpan.bucketSize);
-            tsq['inlineVariables'] = Object.assign({}, this.variableObject);
+            tsq['inlineVariables'] = { ...this.variableObject };
             tsq['projectedVariables'] = Object.keys(this.variableObject);
             return { aggregateSeries: tsq };
         }
@@ -12740,38 +12749,6 @@ class TsqExpression extends ChartDataOptions {
     }
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 class HierarchyNavigation extends Component {
     constructor(renderTarget) {
         super(renderTarget);
@@ -12780,24 +12757,23 @@ class HierarchyNavigation extends Component {
         this.selectedIds = [];
         this.searchEnabled = true;
         this.renderSearchResult = (r, payload, target) => {
-            var _a, _b, _c, _d, _e, _f;
-            const hierarchyData = ((_b = (_a = r.hierarchyNodes) === null || _a === void 0 ? void 0 : _a.hits) === null || _b === void 0 ? void 0 : _b.length)
+            const hierarchyData = r.hierarchyNodes?.hits?.length
                 ? this.fillDataRecursively(r.hierarchyNodes, payload, payload)
                 : {};
-            const instancesData = ((_d = (_c = r.instances) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.length)
+            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);
                     return acc;
                 }, {})
                 : {};
-            if ((_f = (_e = r.hierarchyNodes) === null || _e === void 0 ? void 0 : _e.hits) === null || _f === void 0 ? void 0 : _f.length) {
+            if (r.hierarchyNodes?.hits?.length) {
                 let hitCountElem = target.select(".tsi-hitCount");
                 if (hitCountElem.size() === 0) {
                     hitCountElem = target.append('span').classed('tsi-hitCount', true).text('');
                 }
                 hitCountElem.text(r.hierarchyNodes.hitCount);
             }
-            this.renderTree(Object.assign(Object.assign({}, hierarchyData), instancesData), target);
+            this.renderTree({ ...hierarchyData, ...instancesData }, target);
         };
         this.hierarchyNodeIdentifier = (hName) => {
             return hName ? hName : '(' + this.getString("Empty") + ')';
@@ -12806,31 +12782,25 @@ class HierarchyNavigation extends Component {
             return `instance-${Utils.getInstanceKey(instance)}`;
         };
         this.instanceNodeStringToDisplay = (instance) => {
-            var _a;
-            return ((_a = instance.highlights) === null || _a === void 0 ? void 0 : _a.name) || Utils.getHighlightedTimeSeriesIdToDisplay(instance)
+            return instance.highlights?.name || Utils.getHighlightedTimeSeriesIdToDisplay(instance)
                 || instance.name || Utils.getTimeSeriesIdToDisplay(instance, this.getString('Empty'));
         };
         this.instanceNodeString = (instance) => {
             return instance.name || Utils.getTimeSeriesIdString(instance);
         };
     }
-    render(searchF_1) {
-        const _super = Object.create(null, {
-            themify: { get: () => super.themify }
-        });
-        return __awaiter(this, arguments, void 0, function* (searchF, hierarchyNavOptions = {}, preselectedIds) {
-            this.chartOptions.setOptions(hierarchyNavOptions);
-            this.searchFunction = searchF;
-            const targetElement = d3.select(this.renderTarget).text('');
-            this.hierarchyNavWrapper = this.createHierarchyNavWrapper(targetElement);
-            this.selectedIds = preselectedIds;
-            //render search wrapper
-            //this.renderSearchBox()
-            _super.themify.call(this, 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 } });
-        });
+    async render(searchF, hierarchyNavOptions = {}, preselectedIds) {
+        this.chartOptions.setOptions(hierarchyNavOptions);
+        this.searchFunction = searchF;
+        const targetElement = d3.select(this.renderTarget).text('');
+        this.hierarchyNavWrapper = this.createHierarchyNavWrapper(targetElement);
+        this.selectedIds = preselectedIds;
+        //render search wrapper
+        //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 } });
     }
     createHierarchyNavWrapper(targetElement) {
         return targetElement.append('div').attr('class', 'tsi-hierarchy-nav-wrapper');
@@ -12843,8 +12813,7 @@ class HierarchyNavigation extends Component {
     }
     // prepares the parameters for search request
     requestPayload(hierarchy = null) {
-        var _a;
-        const path = (_a = hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.path) !== null && _a !== void 0 ? _a : this.path;
+        const path = hierarchy?.path ?? this.path;
         return { path, hierarchy };
     }
     // 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
@@ -12908,22 +12877,20 @@ class HierarchyNavigation extends Component {
             }
         });
     }
-    pathSearchAndRenderResult(_a) {
-        return __awaiter(this, arguments, void 0, function* ({ search: { payload, bubbleUpReject = false }, render: { target, locInTarget = null } }) {
-            try {
-                const result = yield this.searchFunction(payload);
-                if (result.error) {
-                    throw result.error;
-                }
-                this.renderSearchResult(result, payload, target);
+    async pathSearchAndRenderResult({ search: { payload, bubbleUpReject = false }, render: { target, locInTarget = null } }) {
+        try {
+            const result = await this.searchFunction(payload);
+            if (result.error) {
+                throw result.error;
             }
-            catch (err) {
-                this.chartOptions.onError("Error in hierarchy navigation", "Failed to complete search", err instanceof XMLHttpRequest ? err : null);
-                if (bubbleUpReject) {
-                    throw err;
-                }
+            this.renderSearchResult(result, payload, target);
+        }
+        catch (err) {
+            this.chartOptions.onError("Error in hierarchy navigation", "Failed to complete search", err instanceof XMLHttpRequest ? err : null);
+            if (bubbleUpReject) {
+                throw err;
             }
-        });
+        }
     }
     filterTree(searchText) {
         let tree = this.hierarchyElem.selectAll('ul').nodes()[0];
@@ -12942,7 +12909,6 @@ class HierarchyNavigation extends Component {
     fillDataRecursively(hierarchyNodes, payload, payloadForContinuation = null) {
         let data = {};
         hierarchyNodes.hits.forEach((h) => {
-            var _a;
             let hierarchy = new HierarchyNode(h.name, payload.path, payload.path.length - this.path.length, h.cumulativeInstanceCount, h.id);
             hierarchy.expand = () => {
                 hierarchy.isExpanded = true;
@@ -12953,7 +12919,7 @@ class HierarchyNavigation extends Component {
                 });
             };
             data[this.hierarchyNodeIdentifier(h.name)] = hierarchy;
-            if ((_a = h.hierarchyNodes) === null || _a === void 0 ? void 0 : _a.hits.length) {
+            if (h.hierarchyNodes?.hits.length) {
                 hierarchy.children = this.fillDataRecursively(h.hierarchyNodes, this.requestPayload(hierarchy), payloadForContinuation);
             }
         });
@@ -12970,36 +12936,34 @@ class HierarchyNavigation extends Component {
             .attr('arialabel', isHierarchyNode ? key : self.getAriaLabel(hORi))
             .attr('title', isHierarchyNode ? key : self.getAriaLabel(hORi))
             .attr("role", "treeitem").attr('aria-expanded', hORi.isExpanded)
-            .on('click keydown', function (event) {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (Utils.isKeyDownAndNotEnter(event)) {
-                    return;
-                }
-                if (!isHierarchyNode) { // means it is an instance
-                    event.stopPropagation();
-                    //we want to store clicked instance and hightlight it in the hierarchy
-                    //if the instance is already selected, we want to deselect it
-                    if (self.chartOptions.onInstanceClick) {
-                        if (self.selectedIds && self.selectedIds.includes(hORi.id)) {
-                            self.selectedIds = self.selectedIds.filter(id => id !== hORi.id);
-                            hORi.node.classed('tsi-selected', false);
-                        }
-                        else {
-                            self.selectedIds.push(hORi.id);
-                            hORi.node.classed('tsi-selected', true);
-                        }
-                    }
-                    self.chartOptions.onInstanceClick(hORi);
-                }
-                else {
-                    if (hORi.isExpanded) {
-                        hORi.collapse();
+            .on('click keydown', async function (event) {
+            if (Utils.isKeyDownAndNotEnter(event)) {
+                return;
+            }
+            if (!isHierarchyNode) { // means it is an instance
+                event.stopPropagation();
+                //we want to store clicked instance and hightlight it in the hierarchy
+                //if the instance is already selected, we want to deselect it
+                if (self.chartOptions.onInstanceClick) {
+                    if (self.selectedIds && self.selectedIds.includes(hORi.id)) {
+                        self.selectedIds = self.selectedIds.filter(id => id !== hORi.id);
+                        hORi.node.classed('tsi-selected', false);
                     }
                     else {
-                        yield hORi.expand();
+                        self.selectedIds.push(hORi.id);
+                        hORi.node.classed('tsi-selected', true);
                     }
                 }
-            });
+                self.chartOptions.onInstanceClick(hORi);
+            }
+            else {
+                if (hORi.isExpanded) {
+                    hORi.collapse();
+                }
+                else {
+                    await hORi.expand();
+                }
+            }
         });
         if (isHierarchyNode) {
             hierarchyItemElem.append('span').classed('tsi-caret-icon', true).attr('style', `left: ${(hORi.level) * 18 + 20}px`);