tsichart-core 1.0.0

package/dist/Hierarchy-QkWLHkxo.js

@@ -0,0 +1,260 @@
+import { _ as __extends } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { U as Utils } from './Utils-C_j8IgZh.js';
+import { C as Component } from './Component-CofgyEw0.js';
+
+var HierarchyNode = /** @class */ (function () {
+    function HierarchyNode(name, level) {
+        this.children = [];
+        this.isExpanded = false;
+        this.isSelected = false;
+        this.isLeaf = false;
+        this.childrenInFilter = false;
+        this.selfInFilter = false;
+        this.color = function () { return null; };
+        this.click = function (n) { };
+        this.isLeafParent = false; // used in the event of context menut to denote that we should use a context menu for children
+        this.name = name;
+        this.level = level;
+        this.markedName = name;
+    }
+    HierarchyNode.prototype.filter = function (filterText) {
+        var regExp = new RegExp(filterText, 'i');
+        var isInFilter = function (node) {
+            var childrenInFilter = node.children.reduce(function (p, c) {
+                p = isInFilter(c) || p;
+                return p;
+            }, false);
+            var selfInFilter = regExp.test(node.name);
+            node.markedName = selfInFilter ? Utils.mark(filterText, node.name) : node.name;
+            if (node.parent != null)
+                node.parent.childrenInFilter = (selfInFilter || childrenInFilter) && filterText.length > 0;
+            node.selfInFilter = selfInFilter && filterText.length > 0;
+            node.childrenInFilter = childrenInFilter && filterText.length > 0;
+            return childrenInFilter || selfInFilter;
+        };
+        isInFilter(this);
+    };
+    HierarchyNode.prototype.traverse = function (condition) {
+        var traversal = [];
+        if (condition(this))
+            traversal.push(this);
+        this.children.forEach(function (n) {
+            traversal = traversal.concat(n.traverse(condition));
+        });
+        return traversal;
+    };
+    HierarchyNode.prototype.colorify = function (el) {
+        if (this.isLeaf && this.isSelected && this.color(this))
+            el.style('background-color', this.color(this));
+        if (!this.isSelected && this.isLeaf)
+            el.style('background-color', null);
+    };
+    return HierarchyNode;
+}());
+
+var Hierarchy = /** @class */ (function (_super) {
+    __extends(Hierarchy, _super);
+    function Hierarchy(renderTarget) {
+        var _this = _super.call(this, renderTarget) || this;
+        _this.filterText = '';
+        _this.withContextMenu = false;
+        _this.expandCollapseList = function (node, el, isFromClick, event) {
+            if (isFromClick === void 0) { isFromClick = false; }
+            _this.closeContextMenu();
+            if (el.classed('tsi-expanded') && !(_this.withContextMenu && node.isLeafParent)) {
+                el.selectAll('ul').remove();
+                el.classed('tsi-expanded', false);
+                node.isExpanded = false;
+            }
+            else {
+                if (_this.withContextMenu && node.isLeafParent) {
+                    if (_this.clickedNode != el.node()) {
+                        _this.clickedNode = el.node();
+                        _this.contextMenu = _this.hierarchyList.append('div');
+                        node.children.filter(function (n) { return n.name[0] !== '~'; }).forEach(function (n) {
+                            _this.contextMenu.append('div').text("".concat(n.name)).on('click', function () { return n.click(n); });
+                        });
+                        _this.contextMenu.append('div').classed('tsi-break', true);
+                        node.children.filter(function (n) { return n.name[0] === '~'; }).forEach(function (n) {
+                            var noTildeName = n.name.slice(1);
+                            _this.contextMenu.append('div').text("".concat(noTildeName)).on('click', function () { return n.click(n); });
+                        });
+                        _this.contextMenu.classed('tsi-hierarchyContextMenu', true);
+                        if (event) {
+                            var mouseWrapper_1 = d3.pointer(event, _this.hierarchyList.node());
+                            var mouseElt_1 = d3.pointer(event, el.node());
+                            _this.contextMenu.attr('style', function () { return "top: ".concat(mouseWrapper_1[1] - mouseElt_1[1], "px"); });
+                        }
+                        el.classed('tsi-resultSelected', true);
+                        _this.hierarchyList.selectAll('.tsi-noPad').on('scroll', function () { _this.closeContextMenu(); });
+                    }
+                    else {
+                        _this.clickedNode = null;
+                    }
+                }
+                else {
+                    var list = el.append('ul');
+                    node.children.forEach(function (n) {
+                        if (isFromClick || n.selfInFilter || n.childrenInFilter || (node.isExpanded && _this.filterText.length == 0)) {
+                            var self = _this;
+                            var clickMethod = function () {
+                                if (n.isLeaf) {
+                                    var parent = n.parent;
+                                    while (parent != this.root) {
+                                        parent.isExpanded = true;
+                                        parent = parent.parent;
+                                    }
+                                    n.isSelected = !n.isSelected;
+                                    n.click(n);
+                                    var selector = d3.select(this);
+                                    n.colorify(selector);
+                                    selector.classed('tsi-selected', n.isSelected);
+                                }
+                                else {
+                                    self.expandCollapseList(n, d3.select(this), true, event);
+                                }
+                                event.stopPropagation();
+                            };
+                            var li = list.append('li').classed('tsi-leaf', n.isLeaf)
+                                .classed('tsi-leafParent', n.isLeafParent && _this.withContextMenu)
+                                .classed('tsi-selected', n.isSelected).on('click', clickMethod);
+                            li.append('span').classed('tsi-caret', true).attr('style', "left: ".concat((n.level - 1) * 18, "px"));
+                            li.append('span').classed('tsi-markedName', true).html(n.markedName) // known unsafe usage of .html
+                                .attr('style', "padding-left: ".concat(40 + (n.level - 1) * 18 - (n.isLeafParent && _this.withContextMenu ? 16 : 0), "px"))
+                                .attr('title', n.isLeafParent && _this.withContextMenu ? n.name : '');
+                            n.colorify(li);
+                            if ((n.isExpanded || n.childrenInFilter) && !n.isLeaf) {
+                                _this.expandCollapseList(n, li, isFromClick, event);
+                            }
+                        }
+                    });
+                    node.isExpanded = (node.isExpanded || isFromClick) || (node == _this.root);
+                    el.classed('tsi-expanded', true);
+                }
+            }
+        };
+        return _this;
+    }
+    Hierarchy.prototype.render = function (data, options) {
+        var _this = this;
+        var self = this;
+        var targetElement = d3.select(this.renderTarget).classed('tsi-hierarchy', true);
+        targetElement.html('');
+        this.chartOptions.setOptions(options);
+        _super.prototype.themify.call(this, targetElement, this.chartOptions.theme);
+        this.withContextMenu = this.chartOptions.withContextMenu;
+        this.root = this.buildTree(data);
+        this.root.isExpanded = true;
+        d3.select("html").on("click." + Utils.guid(), function (event) {
+            if (_this.clickedNode && event.target != _this.clickedNode && _this.contextMenu) {
+                _this.closeContextMenu();
+                _this.clickedNode = null;
+            }
+        });
+        var inputDebounceTimeout;
+        var filter = targetElement.append('div').classed('tsi-filterWrapper', true).append('input').attr('placeholder', 'Search...').on('input', function (event) {
+            var _this = this;
+            clearTimeout(inputDebounceTimeout);
+            inputDebounceTimeout = setTimeout(function () {
+                self.filterText = _this.value.trim();
+                if (self.filterText.length == 1)
+                    return; // quick return for small sets
+                var splitFilterText = self.filterText.split('/');
+                self.root.filter(splitFilterText[0]);
+                if (splitFilterText.length > 1) {
+                    for (var i = 1; i < splitFilterText.length; i++) {
+                        if (splitFilterText[i].length) {
+                            var nodesInFilter = self.root.traverse(function (n) { return n.selfInFilter; });
+                            nodesInFilter.forEach(function (n) {
+                                var markedName = n.markedName;
+                                n.filter(splitFilterText[i], false);
+                                n.markedName = markedName;
+                            });
+                            nodesInFilter.forEach(function (n) {
+                                if (!n.childrenInFilter)
+                                    n.selfInFilter = false;
+                            });
+                        }
+                    }
+                }
+                list.selectAll('ul').remove();
+                list.classed('tsi-expanded', false);
+                self.root.childrenInFilter = self.root.childrenInFilter || self.filterText.length == 0;
+                if (self.root.childrenInFilter == false)
+                    list.append('ul').append('div').text(self.getString('No filter results'));
+                else
+                    self.expandCollapseList(self.root, list, false, event);
+                list.select('ul').classed('tsi-noPad', true);
+            }, 250);
+        });
+        var navTabs = targetElement.append('div').classed('tsi-navTabWrapper', true);
+        var allTab = navTabs.append('div').classed('tsi-navTab tsi-selected', true).text(this.getString('All hierarchies'));
+        var selectedTab = navTabs.append('div').classed('tsi-navTab', true).text(this.getString('Selected'));
+        var list = targetElement.append('div').classed('tsi-hierarchyList', true);
+        this.hierarchyList = list;
+        allTab.on('click', function (event) {
+            if (!allTab.classed('tsi-selected')) {
+                allTab.classed('tsi-selected', true);
+                selectedTab.classed('tsi-selected', false);
+                list.html('').classed('tsi-expanded', false);
+                _this.expandCollapseList(_this.root, list, true, event);
+                list.select('ul').classed('tsi-noPad', true);
+                filter.attr('disabled', null);
+            }
+        });
+        selectedTab.on('click', function () {
+            if (!selectedTab.classed('tsi-selected')) {
+                allTab.classed('tsi-selected', false);
+                selectedTab.classed('tsi-selected', true);
+                list.html('');
+                var ul = list.append('ul').classed('tsi-noPad', true);
+                var leafs = _this.root.traverse(function (n) { return n.isSelected; });
+                leafs.forEach(function (n) {
+                    var li = ul.append('li').classed('tsi-leaf', n.isLeaf).classed('tsi-selected', n.isSelected).on('click', function () {
+                        n.isSelected = !n.isSelected;
+                        d3.select(this).classed('tsi-selected', n.isSelected);
+                        n.click(n);
+                        n.colorify(d3.select(this));
+                    });
+                    li.append('span').text(n.name).classed('tsi-markedName', true);
+                    n.colorify(li);
+                });
+                filter.attr('disabled', true);
+            }
+        });
+        this.expandCollapseList(this.root, list, false);
+        list.select('ul').classed('tsi-noPad', true);
+    };
+    Hierarchy.prototype.buildTree = function (data) {
+        var traverse = function (data, key, level, parent) {
+            if (parent === void 0) { parent = null; }
+            var node = new HierarchyNode(key, level);
+            node.parent = parent;
+            if (data.hasOwnProperty('$leaf')) {
+                node.isLeaf = true;
+                if (data.hasOwnProperty('click'))
+                    node.click = data.click;
+                if (data.hasOwnProperty('color'))
+                    node.color = data.color;
+                node.parent.isLeafParent = true;
+            }
+            else {
+                Object.keys(data).sort().forEach(function (k) {
+                    node.children.push(traverse(data[k], k, level + 1, node));
+                });
+            }
+            return node;
+        };
+        return traverse(data, '', 0);
+    };
+    Hierarchy.prototype.closeContextMenu = function () {
+        if (this.contextMenu) {
+            this.contextMenu.remove();
+        }
+        d3.selectAll('.tsi-resultSelected').classed('tsi-resultSelected', false);
+    };
+    return Hierarchy;
+}(Component));
+
+export { Hierarchy as H };

package/dist/Hierarchy.d.ts

@@ -0,0 +1,39 @@
+import { C as Component } from './Component-Rp30sSAW.js';
+import './Enums-ChUuTtHV.js';
+import './Interfaces-BKRQ685G.js';
+
+declare class HierarchyNode {
+    name: string;
+    markedName: string;
+    children: Array<HierarchyNode>;
+    parent: HierarchyNode;
+    isExpanded: boolean;
+    isSelected: boolean;
+    isLeaf: boolean;
+    childrenInFilter: boolean;
+    selfInFilter: boolean;
+    color: (n: HierarchyNode) => string;
+    click: (n: any) => void;
+    isLeafParent: boolean;
+    level: number;
+    constructor(name: string, level: number);
+    filter(filterText: any): void;
+    traverse(condition: (n: HierarchyNode) => boolean): any[];
+    colorify(el: any): void;
+}
+
+declare class Hierarchy extends Component {
+    private filterText;
+    private root;
+    private withContextMenu;
+    private contextMenu;
+    private clickedNode;
+    private hierarchyList;
+    constructor(renderTarget: Element);
+    render(data: any, options: any): void;
+    expandCollapseList: (node: HierarchyNode, el: any, isFromClick?: boolean, event?: any) => void;
+    buildTree(data: any): HierarchyNode;
+    private closeContextMenu;
+}
+
+export { Hierarchy as default };

package/dist/Hierarchy.js

@@ -0,0 +1,6 @@
+export { H as default } from './Hierarchy-QkWLHkxo.js';
+import './_tslib-5_9pMg1F.js';
+import 'd3';
+import './Utils-C_j8IgZh.js';
+import 'moment-timezone';
+import './Component-CofgyEw0.js';

package/dist/HierarchyNavigation-CR6YUilh.js

@@ -0,0 +1,336 @@
+import { _ as __extends, a as __assign, b as __awaiter, c as __generator } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { U as Utils } from './Utils-C_j8IgZh.js';
+import { C as Component } from './Component-CofgyEw0.js';
+
+var HierarchyNavigation = /** @class */ (function (_super) {
+    __extends(HierarchyNavigation, _super);
+    function HierarchyNavigation(renderTarget) {
+        var _this = _super.call(this, renderTarget) || this;
+        _this.path = [];
+        //selectedIds
+        _this.selectedIds = [];
+        _this.searchEnabled = true;
+        _this.renderSearchResult = function (r, payload, target) {
+            var _a, _b, _c, _d, _e, _f;
+            var hierarchyData = ((_b = (_a = r.hierarchyNodes) === null || _a === void 0 ? void 0 : _a.hits) === null || _b === void 0 ? void 0 : _b.length)
+                ? _this.fillDataRecursively(r.hierarchyNodes, payload, payload)
+                : {};
+            var instancesData = ((_d = (_c = r.instances) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.length)
+                ? r.instances.hits.reduce(function (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) {
+                var 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(__assign(__assign({}, hierarchyData), instancesData), target);
+        };
+        _this.hierarchyNodeIdentifier = function (hName) {
+            return hName ? hName : '(' + _this.getString("Empty") + ')';
+        };
+        _this.instanceNodeIdentifier = function (instance) {
+            return "instance-".concat(Utils.getInstanceKey(instance));
+        };
+        _this.instanceNodeStringToDisplay = function (instance) {
+            var _a;
+            return ((_a = instance.highlights) === null || _a === void 0 ? void 0 : _a.name) || Utils.getHighlightedTimeSeriesIdToDisplay(instance)
+                || instance.name || Utils.getTimeSeriesIdToDisplay(instance, _this.getString('Empty'));
+        };
+        _this.instanceNodeString = function (instance) {
+            return instance.name || Utils.getTimeSeriesIdString(instance);
+        };
+        return _this;
+    }
+    HierarchyNavigation.prototype.render = function (searchF_1) {
+        return __awaiter(this, arguments, void 0, function (searchF, hierarchyNavOptions, preselectedIds) {
+            var targetElement, results;
+            if (hierarchyNavOptions === void 0) { hierarchyNavOptions = {}; }
+            return __generator(this, function (_a) {
+                this.chartOptions.setOptions(hierarchyNavOptions);
+                this.searchFunction = searchF;
+                targetElement = d3.select(this.renderTarget).text('');
+                this.hierarchyNavWrapper = this.createHierarchyNavWrapper(targetElement);
+                this.selectedIds = preselectedIds;
+                //render search wrapper
+                //this.renderSearchBox()
+                _super.prototype.themify.call(this, this.hierarchyNavWrapper, this.chartOptions.theme);
+                results = this.createResultsWrapper(this.hierarchyNavWrapper);
+                this.hierarchyElem = this.createHierarchyElem(results);
+                this.pathSearchAndRenderResult({ search: { payload: this.requestPayload() }, render: { target: this.hierarchyElem } });
+                return [2 /*return*/];
+            });
+        });
+    };
+    HierarchyNavigation.prototype.createHierarchyNavWrapper = function (targetElement) {
+        return targetElement.append('div').attr('class', 'tsi-hierarchy-nav-wrapper');
+    };
+    HierarchyNavigation.prototype.createResultsWrapper = function (hierarchyNavWrapper) {
+        return hierarchyNavWrapper.append('div').classed('tsi-hierarchy-or-list-wrapper', true);
+    };
+    HierarchyNavigation.prototype.createHierarchyElem = function (results) {
+        return results.append('div').classed('tsi-hierarchy', true).attr("role", "navigation").on('scroll', function () { });
+    };
+    // prepares the parameters for search request
+    HierarchyNavigation.prototype.requestPayload = function (hierarchy) {
+        var _a;
+        if (hierarchy === void 0) { hierarchy = null; }
+        var path = (_a = hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.path) !== null && _a !== void 0 ? _a : this.path;
+        return { path: path, hierarchy: 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
+    HierarchyNavigation.prototype.renderTree = function (data, target) {
+        var _this = this;
+        var list = target.append('ul').attr("role", target === this.hierarchyElem ? "tree" : "group");
+        Object.keys(data).forEach(function (el) {
+            var nodeNameToCheckIfExists = data[el] instanceof InstanceNode ? _this.instanceNodeString(data[el]) : el;
+            var li;
+            if (list.selectAll(".tsi-name").nodes().find(function (e) { return 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");
+            var 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);
+            }
+        });
+    };
+    HierarchyNavigation.prototype.renderSearchBox = function () {
+        var _this = this;
+        this.searchWrapperElem = this.hierarchyNavWrapper.append('div').classed('tsi-hierarchy-search', true);
+        var inputWrapper = this.searchWrapperElem.append("div").attr("class", "tsi-search");
+        inputWrapper.append("i").classed("tsi-search-icon", true);
+        var input = inputWrapper
+            .append("input")
+            .attr("class", "tsi-searchInput")
+            .attr("aria-label", this.getString("Search Time Series Instances"))
+            .attr("aria-describedby", "tsi-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") + "...");
+        var self = this;
+        input.on("keydown", function (event) {
+            _this.chartOptions.onKeydown(event, _this.ap);
+        });
+        var searchText;
+        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 } });
+            }
+            else {
+                //filter the tree
+                self.filterTree(searchText);
+            }
+        });
+    };
+    HierarchyNavigation.prototype.pathSearchAndRenderResult = function (_a) {
+        return __awaiter(this, arguments, void 0, function (_b) {
+            var result, err_1;
+            var _c = _b.search, payload = _c.payload, _d = _c.bubbleUpReject, bubbleUpReject = _d === void 0 ? false : _d, _e = _b.render, target = _e.target; _e.locInTarget;
+            return __generator(this, function (_g) {
+                switch (_g.label) {
+                    case 0:
+                        _g.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, this.searchFunction(payload)];
+                    case 1:
+                        result = _g.sent();
+                        if (result.error) {
+                            throw result.error;
+                        }
+                        this.renderSearchResult(result, payload, target);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        err_1 = _g.sent();
+                        this.chartOptions.onError("Error in hierarchy navigation", "Failed to complete search", err_1 instanceof XMLHttpRequest ? err_1 : null);
+                        if (bubbleUpReject) {
+                            throw err_1;
+                        }
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    HierarchyNavigation.prototype.filterTree = function (searchText) {
+        var tree = this.hierarchyElem.selectAll('ul').nodes()[0];
+        var list = tree.querySelectorAll('li');
+        list.forEach(function (li) {
+            var name = li.querySelector('.tsi-name').innerText;
+            if (name.toLowerCase().includes(searchText.toLowerCase())) {
+                li.style.display = 'block';
+            }
+            else {
+                li.style.display = 'none';
+            }
+        });
+    };
+    // creates in-depth data object using the server response for hierarchyNodes to show in the tree all expanded, considering UntilChildren
+    HierarchyNavigation.prototype.fillDataRecursively = function (hierarchyNodes, payload, payloadForContinuation) {
+        var _this = this;
+        if (payloadForContinuation === void 0) { payloadForContinuation = null; }
+        var data = {};
+        hierarchyNodes.hits.forEach(function (h) {
+            var _a;
+            var hierarchy = new HierarchyNode(h.name, payload.path, payload.path.length - _this.path.length, h.cumulativeInstanceCount, h.id);
+            hierarchy.expand = function () {
+                hierarchy.isExpanded = true;
+                hierarchy.node.classed('tsi-expanded', true);
+                return _this.pathSearchAndRenderResult({
+                    search: { payload: _this.requestPayload(hierarchy), bubbleUpReject: true },
+                    render: { target: hierarchy.node }
+                });
+            };
+            data[_this.hierarchyNodeIdentifier(h.name)] = hierarchy;
+            if ((_a = h.hierarchyNodes) === null || _a === void 0 ? void 0 : _a.hits.length) {
+                hierarchy.children = _this.fillDataRecursively(h.hierarchyNodes, _this.requestPayload(hierarchy), payloadForContinuation);
+            }
+        });
+        return data;
+    };
+    //returns the dom element of one hierarchy level item for tree rendering
+    HierarchyNavigation.prototype.createHierarchyItemElem = function (hORi, key) {
+        var self = this;
+        var isHierarchyNode = hORi instanceof HierarchyNode;
+        var hierarchyItemElem = d3.create('div').classed('tsi-hierarchyItem', true)
+            .attr('style', "padding-left: ".concat(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('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 () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (Utils.isKeyDownAndNotEnter(event)) {
+                                return [2 /*return*/];
+                            }
+                            if (!!isHierarchyNode) return [3 /*break*/, 1];
+                            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(function (id) { return 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);
+                            return [3 /*break*/, 4];
+                        case 1:
+                            if (!hORi.isExpanded) return [3 /*break*/, 2];
+                            hORi.collapse();
+                            return [3 /*break*/, 4];
+                        case 2: return [4 /*yield*/, hORi.expand()];
+                        case 3:
+                            _a.sent();
+                            _a.label = 4;
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        });
+        if (isHierarchyNode) {
+            hierarchyItemElem.append('span').classed('tsi-caret-icon', true).attr('style', "left: ".concat((hORi.level) * 18 + 20, "px"));
+            hierarchyItemElem.append('span').classed('tsi-name', true).text(key);
+            hierarchyItemElem.append('span').classed('tsi-instanceCount', true).text(hORi.cumulativeInstanceCount);
+            hierarchyItemElem.append('span').classed('tsi-hitCount', true).text(''); // hit count is the number of hierarchy nodes below, it is filled after expand is clicked for this node (after search is done for this path)
+        }
+        else {
+            var spanElem = hierarchyItemElem.append('span').classed('tsi-name', true);
+            Utils.appendFormattedElementsFromString(spanElem, this.instanceNodeStringToDisplay(hORi));
+        }
+        return hierarchyItemElem;
+    };
+    HierarchyNavigation.prototype.getAriaLabel = function (hORi) {
+        if (hORi instanceof HierarchyNode) {
+            return hORi.name;
+        }
+        //check description first then name then id
+        return hORi.description || hORi.name || hORi.id || Utils.getTimeSeriesIdString(hORi);
+    };
+    return HierarchyNavigation;
+}(Component));
+var HierarchyNode = /** @class */ (function () {
+    function HierarchyNode(name, parentPath, level, cumulativeInstanceCount, id) {
+        if (cumulativeInstanceCount === void 0) { cumulativeInstanceCount = null; }
+        if (id === void 0) { id = null; }
+        this.name = name;
+        this.id = id;
+        this.path = parentPath.concat([name]);
+        this.level = level;
+        this.cumulativeInstanceCount = cumulativeInstanceCount;
+        this.node = null;
+        this.children = null;
+        this.isExpanded = false;
+    }
+    HierarchyNode.prototype.expand = function () { };
+    HierarchyNode.prototype.collapse = function () {
+        this.isExpanded = false;
+        this.node.classed('tsi-expanded', false);
+        this.node.selectAll('ul').remove();
+    };
+    return HierarchyNode;
+}());
+var InstanceNode = /** @class */ (function () {
+    function InstanceNode(tsId, name, level, id, description) {
+        if (name === void 0) { name = null; }
+        if (id === void 0) { id = null; }
+        if (description === void 0) { description = null; }
+        this.timeSeriesId = tsId;
+        this.name = name;
+        this.suppressDrawContextMenu = false;
+        this.isLeaf = true;
+        this.level = level;
+        this.node = null;
+        this.id = id;
+        this.description = description;
+    }
+    return InstanceNode;
+}());
+var HierarchySelectionValues;
+(function (HierarchySelectionValues) {
+    HierarchySelectionValues["All"] = "0";
+    HierarchySelectionValues["Unparented"] = "-1";
+})(HierarchySelectionValues || (HierarchySelectionValues = {}));
+var ViewType;
+(function (ViewType) {
+    ViewType[ViewType["Hierarchy"] = 0] = "Hierarchy";
+    ViewType[ViewType["List"] = 1] = "List";
+})(ViewType || (ViewType = {}));
+var State;
+(function (State) {
+    State[State["Navigate"] = 0] = "Navigate";
+    State[State["Search"] = 1] = "Search";
+    State[State["Filter"] = 2] = "Filter";
+})(State || (State = {}));
+
+export { HierarchyNavigation as H };