@vertexvis/viewer 0.18.2-testing.0 → 0.18.2-testing.1

package/dist/components/vertex-scene-tree.js

@@ -1,803 +0,0 @@
-/*!
- * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
- */
-import { h, Fragment, proxyCustomElement, HTMLElement, createEvent, forceUpdate, Host } from '@stencil/core/internal/client';
-import { f as __rest } from './tslib.es6.js';
-import { a as SceneTreeAPIClient_1, w as webSocketSubscriptionTransportFactory, S as SceneTreeController, b as SceneTreeErrorDetails, c as SceneTreeErrorCode } from './controller.js';
-import { p as parseConfig } from './config.js';
-import { g as getSceneTreeContainsElement, d as defineCustomElement$5 } from './scene-tree-table-layout.js';
-import { i as isLoadedRow } from './row.js';
-import { d as defineCustomElement$6 } from './scene-tree-search.js';
-import { d as defineCustomElement$4 } from './scene-tree-toolbar.js';
-import { d as defineCustomElement$3 } from './viewer-icon.js';
-import { d as defineCustomElement$2 } from './viewer-spinner.js';
-
-window.requestIdleCallback =
-    window.requestIdleCallback ||
-    function(cb) {
-        var start = Date.now();
-        return setTimeout(function() {
-            cb({
-                didTimeout: false,
-                timeRemaining: function() {
-                    return Math.max(0, 50 - (Date.now() - start));
-                },
-            });
-        }, 1);
-    };
-
-window.cancelIdleCallback =
-    window.cancelIdleCallback ||
-    function(id) {
-        clearTimeout(id);
-    };
-
-function isSceneTreeTableCellElement(el) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return el != null && el.nodeName === 'VERTEX-SCENE-TREE-TABLE-CELL';
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const SceneTreeError = ({ details }, children) => {
-  return (h("div", { class: "error" },
-    h("div", { class: "error-section error-message" },
-      h("span", null, details.message),
-      details.link && (h(Fragment, null,
-        h("span", null, " See our "),
-        h("a", { href: details.link, target: "_blank" }, "documentation"),
-        ' ',
-        h("span", null, " for more information.")))),
-    h("div", { class: "error-section" }, children)));
-};
-
-async function showItem(viewer, id, { suppliedCorrelationId } = {}) {
-  const scene = await viewer.scene();
-  return scene
-    .items((op) => op.where((q) => q.withItemId(id)).show())
-    .execute({ suppliedCorrelationId });
-}
-async function hideItem(viewer, id, { suppliedCorrelationId } = {}) {
-  const scene = await viewer.scene();
-  return scene
-    .items((op) => op.where((q) => q.withItemId(id)).hide())
-    .execute({
-    suppliedCorrelationId,
-  });
-}
-async function selectItem(viewer, id, { append = false, suppliedCorrelationId }) {
-  const scene = await viewer.scene();
-  return scene
-    .items((op) => [
-    ...(append ? [] : [op.where((q) => q.all()).deselect()]),
-    op.where((q) => q.withItemId(id)).select(),
-  ])
-    .execute({ suppliedCorrelationId });
-}
-async function selectRangeInSceneTree(viewer, start, end, { append = true, suppliedCorrelationId }) {
-  const scene = await viewer.scene();
-  return scene
-    .items((op) => [
-    ...(append ? [] : [op.where((q) => q.all()).deselect()]),
-    op.where((q) => q.withSceneTreeRange({ start, end })).select(),
-  ])
-    .execute({
-    suppliedCorrelationId,
-  });
-}
-async function selectFilterResults(viewer, filter, keys, exactMatch, { append = false, suppliedCorrelationId }) {
-  const scene = await viewer.scene();
-  return scene
-    .items((op) => [
-    ...(append ? [] : [op.where((q) => q.all()).deselect()]),
-    op.where((q) => q.withMetadata(filter, keys, exactMatch)).select(),
-  ])
-    .execute({
-    suppliedCorrelationId,
-  });
-}
-async function deselectItem(viewer, id, { suppliedCorrelationId } = {}) {
-  const scene = await viewer.scene();
-  return scene
-    .items((op) => op.where((q) => q.withItemId(id)).deselect())
-    .execute({
-    suppliedCorrelationId,
-  });
-}
-
-const sceneTreeCss = "button{border:none;background:transparent;cursor:pointer;margin:0;padding:0}.button{padding:0.5rem;border-radius:0.25rem}.button-secondary{color:var(--neutral-800);background-color:var(--neutral-300)}.button-secondary:hover{color:var(--neutral-900)}.button-secondary:hover:enabled{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.button-secondary:disabled{opacity:0.8}.button-secondary:hover:disabled{cursor:not-allowed}:host{--scene-tree-toolbar-separator:1px solid var(--neutral-300);width:300px;height:100%;user-select:none;-webkit-user-select:none;cursor:default;display:flex;flex-direction:column}.rows-scroll{position:relative;height:var(--scene-tree-row-height, 0);flex-grow:1}.rows{position:relative}.row{position:absolute;display:flex;align-items:center;width:100%;height:var(--scene-tree-row-height);padding:var(--scene-tree-row-padding);box-sizing:border-box}.row:hover{background-color:var(--scene-tree-row-hover-color)}.row.is-selected{background-color:var(--scene-tree-row-selected-color)}.expand-toggle{cursor:pointer;width:16px}.row-text{margin-left:0.25rem;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.visibility-btn{display:flex;align-items:center;visibility:hidden;padding:4px}.visibility-btn.is-hidden{visibility:visible}.row:hover .visibility-btn{visibility:visible}.error,.empty-results{display:flex;flex-direction:column;align-items:center;font-size:0.875rem;width:100%;height:100%;padding:1rem;box-sizing:border-box;justify-content:center}.error-section{margin-top:1rem}.error-message{text-align:center}.search-toolbar,slot[name='header']::slotted(*){border-bottom:var(--scene-tree-toolbar-separator)}slot[name='footer']::slotted(:not(:last-child)){border-top:var(--scene-tree-toolbar-separator)}.header{display:flex;flex-direction:column}.footer{display:flex;flex-direction:column}.loading{position:absolute;top:150px;left:50%;transform:translate(-50%, -50%);text-align:center}";
-
-/**
- * The minimum amount of time provided by requestIdleCallback to clear purged
- * data. A value too low may cause contention with browser rendering. A value
- * too high will cause too many items to be accumulated.
- */
-const MIN_CLEAR_UNUSED_DATA_MS = 25;
-const SceneTree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.connectionError = createEvent(this, "connectionError", 7);
-    this.firstRowRendered = createEvent(this, "firstRowRendered", 7);
-    /**
-     * The number of offscreen rows above and below the viewport to render. Having
-     * a higher number reduces the chance of the browser not displaying a row
-     * while scrolling.
-     */
-    this.overScanCount = 25;
-    /**
-     * Sets the default environment for the viewer. This setting is used for
-     * auto-configuring network hosts.
-     *
-     * Use the `config` property for manually setting hosts.
-     */
-    this.configEnv = 'platprod';
-    /**
-     * Indicates whether the metadata search should use an exact match.
-     */
-    this.metadataSearchExactMatch = false;
-    /**
-     * A list of the metadata keys that a scene tree search should be performed on.
-     */
-    this.metadataSearchKeys = [];
-    /**
-     * A list of part metadata keys that will be made available to each row. This
-     * metadata can be used for data binding inside the scene tree's template.
-     */
-    this.metadataKeys = [];
-    this.rows = [];
-    this.totalRows = 0;
-    this.showLoader = false;
-    this.showEmptyResults = false;
-    /**
-     * This stores internal state that you want to preserve across live-reloads,
-     * but shouldn't trigger a refresh if the data changes. Marking this with
-     * @State to allow to preserve state across live-reloads.
-     */
-    this.stateMap = {
-      componentLoaded: false,
-    };
-    this.attemptingRetry = false;
-    this.firstCellRendered = false;
-  }
-  /**
-   * Schedules a render of the rows in the scene tree. Useful if any custom
-   * data in your scene tree has changed, and you want to update the row's
-   * contents.
-   *
-   * **Note:** This is an asynchronous operation. The update may happen on the
-   * next frame.
-   */
-  async invalidateRows() {
-    forceUpdate(this.getLayoutElement());
-  }
-  /**
-   * Scrolls the tree to the given row index.
-   *
-   * @param index An index of the row to scroll to.
-   * @param options A set of options to configure the scrolling behavior.
-   */
-  async scrollToIndex(index, options = {}) {
-    const { animate, position = 'middle' } = options;
-    const i = Math.max(0, Math.min(index, this.totalRows));
-    const top = this.getScrollToPosition(i, position);
-    this.getLayoutElement().scrollToPosition(top, {
-      behavior: animate ? 'smooth' : undefined,
-    });
-  }
-  /**
-   * Scrolls the tree to an item with the given ID. If the node for the item is
-   * not expanded, the tree will expand each of its parent nodes.
-   *
-   * @param itemId An ID of an item to scroll to.
-   * @param options A set of options to configure the scrolling behavior.
-   * @returns A promise that resolves when the operation is finished.
-   */
-  async scrollToItem(itemId, options = {}) {
-    var _a;
-    const rowsBeforeExpand = this.totalRows;
-    const index = await ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.expandParentNodes(itemId));
-    if (index != null && rowsBeforeExpand !== this.totalRows) {
-      return new Promise((resolve) => {
-        const layoutEl = this.getLayoutElement();
-        const handleLayoutRendered = async () => {
-          layoutEl.removeEventListener('layoutRendered', handleLayoutRendered);
-          await this.scrollToIndex(index, options);
-          resolve();
-        };
-        layoutEl.addEventListener('layoutRendered', handleLayoutRendered);
-      });
-    }
-    else if (index != null) {
-      await this.scrollToIndex(index, options);
-    }
-  }
-  /**
-   * Performs an API call to expand all nodes in the tree.
-   */
-  async expandAll() {
-    var _a;
-    await ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.expandAll());
-  }
-  /**
-   * Performs an API call to collapse all nodes in the tree.
-   */
-  async collapseAll() {
-    var _a;
-    await ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.collapseAll());
-  }
-  /**
-   * Performs an API call that will expand the node associated to the specified
-   * row or row index.
-   *
-   * @param row A row, row index, or node to expand.
-   */
-  async expandItem(row) {
-    await this.performRowOperation(row, async ({ id, node }) => {
-      var _a;
-      if (!node.expanded) {
-        await ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.expandNode(id));
-      }
-    });
-  }
-  /**
-   * Performs an API call that will collapse the node associated to the
-   * specified row or row index.
-   *
-   * @param row A row, row index, or node to collapse.
-   */
-  async collapseItem(row) {
-    await this.performRowOperation(row, async ({ id, node }) => {
-      var _a;
-      if (node.expanded) {
-        await ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.collapseNode(id));
-      }
-    });
-  }
-  /**
-   * Performs an API call that will either expand or collapse the node
-   * associated to the given row or row index.
-   *
-   * @param row The row, row index, or node to collapse or expand.
-   */
-  async toggleExpandItem(row) {
-    await this.performRowOperation(row, async ({ node }) => {
-      if (node.expanded) {
-        await this.collapseItem(node);
-      }
-      else {
-        await this.expandItem(node);
-      }
-    });
-  }
-  /**
-   * Performs an API call that will either hide or show the item associated to
-   * the given row or row index.
-   *
-   * @param row The row, row index, or node to toggle visibility.
-   */
-  async toggleItemVisibility(row) {
-    await this.performRowOperation(row, async ({ viewer, id, node }) => {
-      if (node.visible || node.partiallyVisible) {
-        await hideItem(viewer, id);
-      }
-      else {
-        await showItem(viewer, id);
-      }
-    });
-  }
-  /**
-   * Performs an API call that will hide the item associated to the given row
-   * or row index.
-   *
-   * @param row The row, row index, or node to hide.
-   */
-  async hideItem(row) {
-    await this.performRowOperation(row, async ({ viewer, id, node }) => {
-      if (node.visible) {
-        await hideItem(viewer, id);
-      }
-    });
-  }
-  /**
-   * Performs an API call that will show the item associated to the given row
-   * or row index.
-   *
-   * @param row The row, row index, or node to show.
-   */
-  async showItem(row) {
-    await this.performRowOperation(row, async ({ viewer, id, node }) => {
-      if (!node.visible) {
-        await showItem(viewer, id);
-      }
-    });
-  }
-  /**
-   * Performs an API call that will select the item associated to the given row
-   * or row index.
-   *
-   * This method supports a `recurseParent` option that allows for recursively
-   * selecting the next unselected parent node. This behavior is considered
-   * stateful. Each call to `selectItem` will track the ancestry of the passed
-   * in `rowArg`. If calling `selectItem` with a row not belonging to the
-   * ancestry of a previous selection, then this method will perform a standard
-   * selection.
-   *
-   * @param row The row, row index or node to select.
-   * @param options A set of options to configure selection behavior.
-   */
-  async selectItem(row, _a = {}) {
-    var { recurseParent } = _a, options = __rest(_a, ["recurseParent"]);
-    await this.performRowOperation(row, async ({ viewer, id }) => {
-      var _a, _b, _c, _d;
-      const ancestors = (await ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.fetchNodeAncestors(id))) || [];
-      const isInPath = (_b = this.stateMap.selectionPath) === null || _b === void 0 ? void 0 : _b.includes(id);
-      if (recurseParent && isInPath) {
-        const nextNode = ancestors.find(({ selected }) => !selected);
-        if (nextNode != null) {
-          await this.selectItem(nextNode, options);
-          this.lastSelectedItemId = id;
-        }
-      }
-      else if (options.range && this.lastSelectedItemId != null) {
-        const currentRowIndex = await ((_c = this.controller) === null || _c === void 0 ? void 0 : _c.expandParentNodes(id));
-        const previouslySelectedIndex = await ((_d = this.controller) === null || _d === void 0 ? void 0 : _d.expandParentNodes(this.lastSelectedItemId));
-        if (previouslySelectedIndex && currentRowIndex) {
-          const start = Math.min(previouslySelectedIndex, currentRowIndex);
-          const end = Math.max(previouslySelectedIndex, currentRowIndex);
-          await selectRangeInSceneTree(viewer, start, end, options);
-        }
-      }
-      else {
-        await selectItem(viewer, id, options);
-        this.lastSelectedItemId = id;
-      }
-      this.stateMap.selectionPath = [
-        ...ancestors.map(({ id }) => (id === null || id === void 0 ? void 0 : id.hex) || ''),
-        id,
-      ];
-    });
-  }
-  /**
-   * Performs an API call that will deselect the item associated to the given
-   * row or row index.
-   *
-   * @param row The row, row index, or node to deselect.
-   */
-  async deselectItem(row) {
-    await this.performRowOperation(row, async ({ viewer, id, node }) => {
-      if (node.selected) {
-        this.lastSelectedItemId = undefined;
-        await deselectItem(viewer, id);
-      }
-    });
-  }
-  /**
-   * Returns a row at the given index. If the row data has not been loaded,
-   * returns `undefined`.
-   *
-   * @param index The index of the row.
-   * @returns A row, or `undefined` if the row hasn't been loaded.
-   */
-  async getRowAtIndex(index) {
-    return this.rows[index];
-  }
-  /**
-   * Returns the row data from the given mouse or pointer event. The event must
-   * originate from a `vertex-scene-tree-table-cell` contained by this element,
-   * otherwise `undefined` is returned.
-   *
-   * @param event A mouse or pointer event that originated from this component.
-   * @returns A row, or `undefined` if the row hasn't been loaded.
-   */
-  async getRowForEvent(event) {
-    const { clientY, target } = event;
-    if (target != null &&
-      this.errorDetails == null &&
-      getSceneTreeContainsElement(this.el, target) &&
-      isSceneTreeTableCellElement(target)) {
-      return this.getRowAtClientY(clientY);
-    }
-    else {
-      return undefined;
-    }
-  }
-  /**
-   * Returns the row data from the given vertical client position.
-   *
-   * @param clientY The vertical client position.
-   * @returns A row or `undefined` if the row hasn't been loaded.
-   */
-  getRowAtClientY(clientY) {
-    const layoutEl = this.getLayoutElement();
-    const top = layoutEl.layoutOffset;
-    const index = Math.floor((clientY - top + layoutEl.scrollOffset) / layoutEl.rowHeight);
-    return this.getRowAtIndex(index);
-  }
-  /**
-   * Performs an async request that will filter the displayed items in the tree
-   * that match the given term and options.
-   *
-   * @param term The filter term.
-   * @param options The options to apply to the filter.
-   * @returns A promise that completes when the request has completed. Note,
-   *  items are displayed asynchronously. So the displayed items may not reflect
-   *  the result of this filter when the promise completes.
-   */
-  async filterItems(term, options = {}) {
-    var _a;
-    return (_a = this.controller) === null || _a === void 0 ? void 0 : _a.filter(term, options);
-  }
-  /**
-   * Performs an async request that will select the filtered items in the tree
-   * that match the given term.
-   *
-   * @param term The filter term.
-   * @returns A promise that completes when the request has completed.
-   */
-  async selectFilteredItems(term, options) {
-    if (this.viewer != null) {
-      const definedMetadataKeys = this.metadataSearchKeys.length > 0
-        ? this.metadataSearchKeys
-        : this.metadataKeys;
-      if (definedMetadataKeys.length === 0) {
-        console.warn("No metadata keys were found to perform the selection. Defaulting to ['VERTEX_SCENE_ITEM_NAME']");
-      }
-      const columnsToSearch = definedMetadataKeys.length > 0
-        ? definedMetadataKeys
-        : ['VERTEX_SCENE_ITEM_NAME'];
-      await selectFilterResults(this.viewer, term, columnsToSearch, this.metadataSearchExactMatch, Object.assign({ append: false }, options));
-    }
-  }
-  /**
-   * Fetches the metadata keys that are available to the scene tree. Metadata
-   * keys can be assigned to the scene tree using the `metadataKeys` property.
-   * The scene tree will fetch this metadata and make these values available
-   * for data binding.
-   *
-   * @returns A promise that resolves with the names of available keys.
-   */
-  async fetchMetadataKeys() {
-    var _a, _b;
-    return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.fetchMetadataKeys()) !== null && _b !== void 0 ? _b : [];
-  }
-  /**
-   * @ignore
-   */
-  disconnectedCallback() {
-    var _a, _b;
-    (_a = this.stateMap.viewerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    (_b = this.controller) === null || _b === void 0 ? void 0 : _b.cancel();
-  }
-  /**
-   * @ignore
-   */
-  componentWillLoad() {
-    var _a;
-    if (this.controller == null) {
-      const { sceneTreeHost } = this.getConfig().network;
-      const client = new SceneTreeAPIClient_1(sceneTreeHost, this.getConfig().flags.grpcUseStreamingWebSocketTransport
-        ? {
-          transport: webSocketSubscriptionTransportFactory,
-        }
-        : undefined);
-      this.controller = new SceneTreeController(client, 100);
-      (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setMetadataKeys(this.metadataKeys);
-    }
-    this.stateMap.onStateChangeDisposable = this.controller.onStateChange.on((state) => this.handleControllerStateChange(state));
-    this.connectToViewer();
-  }
-  /**
-   * @ignore
-   */
-  async componentDidLoad() {
-    var _a;
-    this.ensureLayoutDefined();
-    this.updateLayoutElement();
-    const layoutEl = this.getLayoutElement();
-    const resizeObserver = new ResizeObserver(() => {
-      this.invalidateRows();
-    });
-    resizeObserver.observe(layoutEl);
-    this.stateMap.resizeObserver = resizeObserver;
-    this.stateMap.componentLoaded = true;
-    (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setMetadataKeys(this.metadataKeys);
-    if (this.viewer == null) {
-      this.errorDetails = new SceneTreeErrorDetails('MISSING_VIEWER', SceneTreeErrorCode.MISSING_VIEWER);
-    }
-  }
-  componentWillRender() {
-    // The controller can load data prior to the first render
-    // ensure that this renders any time the state changes.
-    this.updateLayoutElement();
-  }
-  /**
-   * @ignore
-   */
-  render() {
-    return (h(Host, null, h("div", { class: "header" }, h("slot", { name: "header" }, h("vertex-scene-tree-toolbar", { class: "search-toolbar" }, h("vertex-scene-tree-search", { controller: this.controller })))), this.errorDetails != null && this.renderError(this.errorDetails), this.errorDetails == null && (h("div", { class: "rows-scroll" }, this.showLoader && (h("slot", { name: "loading" }, h("vertex-viewer-spinner", { class: "loading", size: "md" }))), this.showEmptyResults && (h("slot", { name: "empty-results" }, h("div", { class: "empty-results" }, "No Results Found."))), h("slot", null))), h("div", { class: "footer" }, h("slot", { name: "footer" }))));
-  }
-  renderError(details) {
-    if (details.code !== SceneTreeErrorCode.SCENE_TREE_DISABLED) {
-      return (h(SceneTreeError, { details: details }, h("button", { class: "button button-secondary", onClick: () => this.retryConnectToViewer(), disabled: this.attemptingRetry }, "Retry")));
-    }
-    else {
-      return h(SceneTreeError, { details: details });
-    }
-  }
-  /**
-   * @ignore
-   */
-  handleViewerChanged(newViewer, oldViewer) {
-    // StencilJS will invoke this callback even before the component has been
-    // loaded. According to their docs, this shouldn't happen. Return if the
-    // component hasn't been loaded.
-    // See https://stenciljs.com/docs/reactive-data#watch-decorator
-    if (!this.stateMap.componentLoaded) {
-      return;
-    }
-    this.connectToViewer();
-  }
-  /**
-   * @ignore
-   */
-  handleControllerChanged(newController) {
-    var _a;
-    // StencilJS will invoke this callback even before the component has been
-    // loaded. According to their docs, this shouldn't happen. Return if the
-    // component hasn't been loaded.
-    // See https://stenciljs.com/docs/reactive-data#watch-decorator
-    if (!this.stateMap.componentLoaded) {
-      return;
-    }
-    (_a = this.stateMap.onStateChangeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    this.stateMap.onStateChangeDisposable = newController.onStateChange.on((state) => this.handleControllerStateChange(state));
-    newController.setMetadataKeys(this.metadataKeys);
-  }
-  /**
-   * @ignore
-   */
-  handleMetadataKeysChanged() {
-    var _a;
-    (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setMetadataKeys(this.metadataKeys);
-  }
-  retryConnectToViewer() {
-    this.attemptingRetry = true;
-    this.errorDetails = undefined;
-    this.connectToViewer();
-  }
-  connectToViewer() {
-    var _a, _b;
-    (_a = this.stateMap.viewerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    if (this.viewer == null && this.viewerSelector != null) {
-      this.viewer = document.querySelector(this.viewerSelector);
-    }
-    if (this.viewer != null) {
-      this.stateMap.viewerDisposable = (_b = this.controller) === null || _b === void 0 ? void 0 : _b.connectToViewer(this.viewer);
-    }
-    else {
-      this.attemptingRetry = false;
-    }
-  }
-  scheduleClearUnusedData() {
-    if (this.stateMap.idleCallbackId != null) {
-      window.cancelIdleCallback(this.stateMap.idleCallbackId);
-    }
-    this.stateMap.idleCallbackId = window.requestIdleCallback((foo) => {
-      var _a, _b, _c;
-      const remaining = (_a = foo.timeRemaining) === null || _a === void 0 ? void 0 : _a.call(foo);
-      if (remaining == null || remaining >= MIN_CLEAR_UNUSED_DATA_MS) {
-        const layoutEl = this.getLayoutElement();
-        const startIndex = layoutEl.viewportStartIndex;
-        const endIndex = layoutEl.viewportEndIndex;
-        const [start, end] = ((_b = this.controller) === null || _b === void 0 ? void 0 : _b.getPageIndexesForRange(startIndex, endIndex)) || [];
-        if (start != null && end != null) {
-          (_c = this.controller) === null || _c === void 0 ? void 0 : _c.invalidatePagesOutsideRange(start, end, 50);
-        }
-      }
-      else {
-        this.scheduleClearUnusedData();
-      }
-    });
-  }
-  handleControllerStateChange(state) {
-    this.showLoader = !!state.shouldShowLoading;
-    this.showEmptyResults = !!state.shouldShowEmptyResults;
-    this.rows = state.rows;
-    this.totalRows = state.totalRows;
-    if (state.connection.type === 'failure') {
-      this.errorDetails = state.connection.details;
-      this.connectionError.emit(state.connection.details);
-    }
-    else if (state.connection.type === 'disconnected') {
-      this.errorDetails = new SceneTreeErrorDetails('DISCONNECTED', SceneTreeErrorCode.DISCONNECTED);
-    }
-    else {
-      this.errorDetails = undefined;
-    }
-    if (state.connection.type === 'connected' ||
-      state.connection.type === 'failure') {
-      this.attemptingRetry = false;
-    }
-  }
-  async performRowOperation(rowOrIndex, op) {
-    const row = typeof rowOrIndex === 'number' ? this.rows[rowOrIndex] : rowOrIndex;
-    if (row == null) {
-      throw new Error(`Cannot perform scene tree operation. Row not found.`);
-    }
-    const node = isLoadedRow(row) ? row.node : row;
-    if (node.id == null) {
-      throw new Error(`Cannot perform scene tree operation. ID is undefined.`);
-    }
-    if (this.viewer == null) {
-      throw new Error(`Cannot perform scene tree operation. Cannot get reference to viewer.`);
-    }
-    await op({ viewer: this.viewer, id: node.id.hex, node });
-  }
-  async handleSearch(event) {
-    const columnsToSearch = this.metadataSearchKeys.length > 0
-      ? this.metadataSearchKeys
-      : this.metadataKeys;
-    try {
-      await this.filterItems(event.detail, {
-        columns: columnsToSearch,
-        exactMatch: this.metadataSearchExactMatch,
-      });
-    }
-    catch (e) {
-      console.error('Failed to filter tree with exception: ', e);
-    }
-  }
-  async handleCellLoaded() {
-    if (!this.firstCellRendered && this.rows.length > 0) {
-      this.firstCellRendered = true;
-      this.firstRowRendered.emit();
-    }
-  }
-  getScrollToPosition(index, position) {
-    var _a;
-    const layoutEl = this.getLayoutElement();
-    const constrainedIndex = Math.max(0, Math.min(index, this.totalRows - 1));
-    const viewportHeight = (_a = layoutEl.layoutHeight) !== null && _a !== void 0 ? _a : 0;
-    const rowHeight = layoutEl.rowHeight;
-    if (position === 'start') {
-      return constrainedIndex * rowHeight;
-    }
-    else if (position === 'middle') {
-      const rowCenterY = constrainedIndex * rowHeight + rowHeight / 2;
-      return rowCenterY - viewportHeight / 2;
-    }
-    else {
-      const rowBottomY = constrainedIndex * rowHeight + rowHeight;
-      return rowBottomY - viewportHeight;
-    }
-  }
-  getConfig() {
-    return parseConfig(this.configEnv, this.config);
-  }
-  ensureLayoutDefined() {
-    let layout = this.el.querySelector('vertex-scene-tree-table-layout');
-    if (layout == null) {
-      layout = document.createElement('vertex-scene-tree-table-layout');
-      layout.innerHTML = `
-      <vertex-scene-tree-table-column>
-        <template>
-        <vertex-scene-tree-table-cell prop:value="{{row.node.name}}" expand-toggle visibility-toggle></vertex-scene-tree-table-cell>
-        </template>
-      </vertex-scene-tree-table-column>
-      `;
-      this.el.appendChild(layout);
-    }
-    this.stateMap.layoutEl = layout;
-  }
-  updateLayoutElement() {
-    const layout = this.stateMap.layoutEl;
-    if (layout != null) {
-      layout.rows = this.rows;
-      layout.tree = this.el;
-      layout.totalRows = this.totalRows;
-      layout.controller = this.controller;
-      layout.rowData = this.rowData;
-    }
-    else if (!this.stateMap.componentLoaded && this.totalRows > 0) {
-      console.debug('Scene tree has rows, but the component has not yet rendered');
-    }
-  }
-  getLayoutElement() {
-    if (this.stateMap.layoutEl != null) {
-      return this.stateMap.layoutEl;
-    }
-    else {
-      throw new Error('Layout element is undefined');
-    }
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "viewer": ["handleViewerChanged"],
-    "controller": ["handleControllerChanged"],
-    "metadataKeys": ["handleMetadataKeysChanged"]
-  }; }
-  static get style() { return sceneTreeCss; }
-}, [1, "vertex-scene-tree", {
-    "overScanCount": [2, "over-scan-count"],
-    "viewerSelector": [1, "viewer-selector"],
-    "viewer": [1040],
-    "rowData": [16],
-    "config": [1],
-    "configEnv": [1, "config-env"],
-    "controller": [1040],
-    "metadataSearchExactMatch": [1028, "metadata-search-exact-match"],
-    "metadataSearchKeys": [1040],
-    "metadataKeys": [16],
-    "rows": [32],
-    "totalRows": [32],
-    "showLoader": [32],
-    "showEmptyResults": [32],
-    "stateMap": [32],
-    "errorDetails": [32],
-    "attemptingRetry": [32],
-    "invalidateRows": [64],
-    "scrollToIndex": [64],
-    "scrollToItem": [64],
-    "expandAll": [64],
-    "collapseAll": [64],
-    "expandItem": [64],
-    "collapseItem": [64],
-    "toggleExpandItem": [64],
-    "toggleItemVisibility": [64],
-    "hideItem": [64],
-    "showItem": [64],
-    "selectItem": [64],
-    "deselectItem": [64],
-    "getRowAtIndex": [64],
-    "getRowForEvent": [64],
-    "getRowAtClientY": [64],
-    "filterItems": [64],
-    "selectFilteredItems": [64],
-    "fetchMetadataKeys": [64]
-  }, [[0, "search", "handleSearch"], [0, "cellLoaded", "handleCellLoaded"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-scene-tree", "vertex-scene-tree-search", "vertex-scene-tree-table-layout", "vertex-scene-tree-toolbar", "vertex-viewer-icon", "vertex-viewer-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-scene-tree":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SceneTree);
-      }
-      break;
-    case "vertex-scene-tree-search":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "vertex-scene-tree-table-layout":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "vertex-scene-tree-toolbar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "vertex-viewer-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-viewer-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const VertexSceneTree = SceneTree;
-const defineCustomElement = defineCustomElement$1;
-
-export { VertexSceneTree, defineCustomElement };
-
-//# sourceMappingURL=vertex-scene-tree.js.map