@vertexvis/viewer 0.17.4 → 0.17.5-testing.0

package/dist/collection/testing/sceneTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"sceneTree.js","sourceRoot":"","sources":["../../src/testing/sceneTree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oDAAoD,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,MAAM,kDAAkD,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,yDAAyD,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,iEAAiE,CAAC;AAKlG,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,OAAO,kBAAkB;EAA/B;IACU,WAAM,GAAG,IAAI,eAAe,EAAK,CAAC;IAClC,aAAQ,GAAG,IAAI,eAAe,EAAU,CAAC;IACzC,UAAK,GAAG,IAAI,eAAe,EAAsB,CAAC;EA4B5D,CAAC;EA1BQ,MAAM;IACX,QAAQ;EACV,CAAC;EAEM,EAAE,CAAC,IAAY,EAAE,OAAY;IAClC,IAAI,IAAI,KAAK,MAAM,EAAE;MACnB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;KACzB;SAAM,IAAI,IAAI,KAAK,KAAK,EAAE;MACzB,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;KACxB;SAAM;MACL,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;KAC3B;IACD,OAAO,IAAI,CAAC;EACd,CAAC;EAEM,YAAY,CAAC,GAAM;IACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EACxB,CAAC;EAEM,WAAW,CAAC,MAAe;IAChC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAC1B,CAAC;EAEM,cAAc,CAAC,MAAc;IAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAC7B,CAAC;CACF;AAED,MAAM,UAAU,qBAAqB,CACnC,SAAiB,EACjB,UAAyB,EACzB,SAAgC;EAEhC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAC3D,MAAM,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC;IACtB,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;IACzB,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;IACxB,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACf,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACjB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACtB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACvB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,IAAI,CAAC,CAAC;IAClB,OAAO,IAAI,CAAC;EACd,CAAC,CAAC,CAAC;EAEH,MAAM,MAAM,GAAG,IAAI,YAAY,EAAE,CAAC;EAClC,IAAI,UAAU,IAAI,IAAI,EAAE;IACtB,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;GAC7B;EAED,MAAM,GAAG,GAAG,IAAI,eAAe,EAAE,CAAC;EAClC,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;EACxB,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;EAEtB,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["import { OffsetCursor } from '@vertexvis/scene-tree-protos/core/protos/paging_pb';\nimport { Uuid } from '@vertexvis/scene-tree-protos/core/protos/uuid_pb';\nimport { Node } from '@vertexvis/scene-tree-protos/scenetree/protos/domain_pb';\nimport { GetTreeResponse } from '@vertexvis/scene-tree-protos/scenetree/protos/scene_tree_api_pb';\nimport type {\n  ResponseStream,\n  Status,\n} from '@vertexvis/scene-tree-protos/scenetree/protos/scene_tree_api_pb_service';\nimport { EventDispatcher } from '@vertexvis/utils';\n\nimport { random } from './random';\n\nexport class ResponseStreamMock<T> implements ResponseStream<T> {\n  private onData = new EventDispatcher<T>();\n  private onStatus = new EventDispatcher<Status>();\n  private onEnd = new EventDispatcher<Status | undefined>();\n\n  public cancel(): void {\n    // no op\n  }\n\n  public on(type: string, handler: any): ResponseStream<T> {\n    if (type === 'data') {\n      this.onData.on(handler);\n    } else if (type === 'end') {\n      this.onEnd.on(handler);\n    } else {\n      this.onStatus.on(handler);\n    }\n    return this;\n  }\n\n  public invokeOnData(msg: T): void {\n    this.onData.emit(msg);\n  }\n\n  public invokeOnEnd(status?: Status): void {\n    this.onEnd.emit(status);\n  }\n\n  public invokeOnStatus(status: Status): void {\n    this.onStatus.emit(status);\n  }\n}\n\nexport function createGetTreeResponse(\n  itemCount: number,\n  totalCount: number | null,\n  transform?: (node: Node) => void\n): GetTreeResponse {\n  const nodes = Array.from({ length: itemCount }).map((_, i) => {\n    const id = new Uuid();\n    id.setHex(random.guid());\n    const node = new Node();\n    node.setId(id);\n    node.setDepth(0);\n    node.setExpanded(false);\n    node.setIsLeaf(false);\n    node.setName(random.string());\n    node.setSelected(false);\n    node.setVisible(false);\n    transform?.(node);\n    return node;\n  });\n\n  const cursor = new OffsetCursor();\n  if (totalCount != null) {\n    cursor.setTotal(totalCount);\n  }\n\n  const res = new GetTreeResponse();\n  res.setItemsList(nodes);\n  res.setCursor(cursor);\n\n  return res;\n}\n"]}
+{"version":3,"file":"sceneTree.js","sourceRoot":"","sources":["../../src/testing/sceneTree.ts"],"names":[],"mappings":"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","sourcesContent":["import { OffsetCursor } from '@vertexvis/scene-tree-protos/core/protos/paging_pb';\nimport { Uuid } from '@vertexvis/scene-tree-protos/core/protos/uuid_pb';\nimport {\n  ListChange,\n  Node,\n  TreeChangeType,\n} from '@vertexvis/scene-tree-protos/scenetree/protos/domain_pb';\nimport {\n  FilterResponse,\n  GetTreeResponse,\n  SubscribeResponse,\n} from '@vertexvis/scene-tree-protos/scenetree/protos/scene_tree_api_pb';\nimport type {\n  ResponseStream,\n  Status,\n} from '@vertexvis/scene-tree-protos/scenetree/protos/scene_tree_api_pb_service';\nimport { EventDispatcher } from '@vertexvis/utils';\n\nimport { random } from './random';\n\nexport class ResponseStreamMock<T> implements ResponseStream<T> {\n  private onData = new EventDispatcher<T>();\n  private onStatus = new EventDispatcher<Status>();\n  private onEnd = new EventDispatcher<Status | undefined>();\n\n  public cancel(): void {\n    // no op\n  }\n\n  public on(type: string, handler: any): ResponseStream<T> {\n    if (type === 'data') {\n      this.onData.on(handler);\n    } else if (type === 'end') {\n      this.onEnd.on(handler);\n    } else {\n      this.onStatus.on(handler);\n    }\n    return this;\n  }\n\n  public invokeOnData(msg: T): void {\n    this.onData.emit(msg);\n  }\n\n  public invokeOnEnd(status?: Status): void {\n    this.onEnd.emit(status);\n  }\n\n  public invokeOnStatus(status: Status): void {\n    this.onStatus.emit(status);\n  }\n}\n\nexport function createGetTreeResponse(\n  itemCount: number,\n  totalCount: number | null,\n  transform?: (node: Node) => void\n): GetTreeResponse {\n  const nodes = Array.from({ length: itemCount }).map((_, i) => {\n    const id = new Uuid();\n    id.setHex(random.guid());\n    const node = new Node();\n    node.setId(id);\n    node.setDepth(0);\n    node.setExpanded(false);\n    node.setIsLeaf(false);\n    node.setName(random.string());\n    node.setSelected(false);\n    node.setVisible(false);\n    transform?.(node);\n    return node;\n  });\n\n  const cursor = new OffsetCursor();\n  if (totalCount != null) {\n    cursor.setTotal(totalCount);\n  }\n\n  const res = new GetTreeResponse();\n  res.setItemsList(nodes);\n  res.setCursor(cursor);\n\n  return res;\n}\n\nexport function createFilterTreeResponse(resultCount: number): FilterResponse {\n  const res = new FilterResponse();\n  res.setNumberOfResults(resultCount);\n\n  return res;\n}\n\nexport function createSubscribeResponse(\n  change: TreeChangeType\n): SubscribeResponse {\n  const res = new SubscribeResponse();\n  res.setChange(change);\n\n  return res;\n}\n\nexport function createListChange(start: number): TreeChangeType {\n  const change = new TreeChangeType();\n  const listChange = new ListChange();\n  listChange.setStart(start);\n  change.setListChange(listChange);\n\n  return change;\n}\n"]}

package/dist/custom-elements/index.js

@@ -12267,7 +12267,8 @@ class SceneTreeController {
       connection.subscriptionStatusState.stream.cancel();
       this.clearHandshakeTimer();
       const stream = await this.subscribe();
-      this.invalidatePage(0);
+      this.invalidateAfterOffset(0);
+      this.fetchUnloadedPagesInActiveRows();
       this.updateState(Object.assign(Object.assign({}, this.state), { connection: Object.assign(Object.assign({}, connection), { type: 'connected', subscription: {
             dispose: () => stream.cancel(),
           }, subscriptionStatusState: {
@@ -12312,19 +12313,21 @@ class SceneTreeController {
         this.fetchPage(0),
         this.subscribe(),
       ]);
-      this.updateState(Object.assign(Object.assign({}, this.state), { connection: {
-          jwtProvider,
-          sceneViewId,
-          type: 'connected',
-          subscription: { dispose: () => stream.cancel() },
-          subscriptionStatusState: {
-            attempt: 0,
-            stream,
-          },
-        } }));
-      this.subscriptionHandshakeTimer = window.setTimeout(() => {
-        this.handleSubscriptionHandshakeTimeout(jwtProvider, sceneViewId);
-      }, this.connectOptions.subscriptionHandshakeGracePeriodInMs);
+      if (this.state.connection.type !== 'cancelled') {
+        this.updateState(Object.assign(Object.assign({}, this.state), { connection: {
+            jwtProvider,
+            sceneViewId,
+            type: 'connected',
+            subscription: { dispose: () => stream.cancel() },
+            subscriptionStatusState: {
+              attempt: 0,
+              stream,
+            },
+          } }));
+        this.subscriptionHandshakeTimer = window.setTimeout(() => {
+          this.handleSubscriptionHandshakeTimeout(jwtProvider, sceneViewId);
+        }, this.connectOptions.subscriptionHandshakeGracePeriodInMs);
+      }
     }
     catch (e) {
       this.ifErrorIsFatal(e, () => {
@@ -12339,9 +12342,6 @@ class SceneTreeController {
       });
     }
     this.startIdleReconnectTimer();
-    if (this.metadataKeys.length > 0) {
-      this.setMetadataKeys(this.metadataKeys);
-    }
   }
   clearReconnectTimer() {
     if (this.reconnectTimer != null) {
@@ -12405,6 +12405,9 @@ class SceneTreeController {
       this.activeRowRange = [];
     }
     const { connection } = this.state;
+    if (connection.type === 'connected') {
+      connection.subscription.dispose();
+    }
     this.updateState({
       connection: {
         type: 'disconnected',
@@ -12414,6 +12417,11 @@ class SceneTreeController {
       isSearching: false,
       totalRows: reset ? 0 : this.state.totalRows,
       rows: reset ? [] : this.state.rows,
+      filterTerm: reset ? undefined : this.state.filterTerm,
+      totalFilteredRows: reset ? undefined : this.state.totalFilteredRows,
+      shouldShowEmptyResults: reset
+        ? undefined
+        : this.state.shouldShowEmptyResults,
     });
   }
   cancel() {
@@ -12588,7 +12596,7 @@ class SceneTreeController {
    */
   async filter(term, options = {}) {
     return this.ifConnectionHasJwt(async (jwt) => {
-      this.updateState(Object.assign(Object.assign({}, this.state), { isSearching: true }));
+      this.updateState(Object.assign(Object.assign({}, this.state), { isSearching: true, filterTerm: term !== '' ? term : undefined }));
       try {
         const res = await this.requestUnary(jwt, (metadata, handler) => {
           var _a;
@@ -12689,6 +12697,7 @@ class SceneTreeController {
    */
   async updateActiveRowRange(start, end) {
     this.activeRowRange = this.constrainRowOffsets(start, end);
+    this.tryClearLoadingTimer(this.state);
     await this.fetchUnloadedPagesInActiveRows();
   }
   /**
@@ -12750,7 +12759,9 @@ class SceneTreeController {
       });
       stream.on('end', () => {
         this.invalidateAfterOffset(0);
-        this.startConnectionLostReconnectTimer();
+        if (this.state.connection.type === 'connected') {
+          this.startConnectionLostReconnectTimer();
+        }
       });
       return stream;
     });
@@ -12787,13 +12798,13 @@ class SceneTreeController {
         const fill = new Array(Math.max(0, totalRows - start.length - fetchedRows.length - end.length));
         const rows = [...start, ...fetchedRows, ...end, ...fill];
         if (this.isViewLoading(rows) && this.loadingTimer == null) {
-          this.loadingTimer = window.setTimeout(() => {
-            this.updateState(Object.assign(Object.assign({}, this.getState()), { shouldShowLoading: true }));
-          }, this.connectOptions.spinnerDelay);
-          this.updateState(Object.assign(Object.assign({}, this.state), { totalRows: totalRows, rows: rows }));
+          this.restartLoadingTimer();
+          this.updateState(Object.assign(Object.assign({}, this.state), { totalRows: totalRows, rows: rows, shouldShowEmptyResults: this.state.filterTerm != null &&
+              (rows.length === 0 || this.state.totalFilteredRows === 0) }));
         }
         else {
-          this.updateState(Object.assign(Object.assign({}, this.state), { totalRows: totalRows, rows: rows }));
+          this.updateState(Object.assign(Object.assign({}, this.state), { totalRows: totalRows, rows: rows, shouldShowEmptyResults: this.state.filterTerm != null &&
+              (rows.length === 0 || this.state.totalFilteredRows === 0) }));
         }
       }
     }
@@ -12823,19 +12834,39 @@ class SceneTreeController {
     return this.state;
   }
   isViewLoading(rows) {
-    return (rows[this.activeRowRange[0]] == null &&
+    return (this.state.filterTerm == null &&
+      rows[this.activeRowRange[0]] == null &&
       rows[this.activeRowRange[1]] == null);
   }
-  updateState(newState) {
-    const updateLoadingTimer = this.loadingTimer && !this.isViewLoading(newState.rows);
-    if (updateLoadingTimer) {
+  restartLoadingTimer() {
+    if (this.loadingTimer != null) {
+      this.clearLoadingTimer();
+    }
+    this.loadingTimer = window.setTimeout(() => {
+      this.loadingTimer = undefined;
+      this.updateState(Object.assign(Object.assign({}, this.getState()), { shouldShowLoading: true }));
+    }, this.connectOptions.spinnerDelay);
+  }
+  clearLoadingTimer() {
+    if (this.loadingTimer != null) {
       clearTimeout(this.loadingTimer);
       this.loadingTimer = undefined;
-      this.state = Object.assign(Object.assign({}, newState), { shouldShowLoading: false });
     }
-    else {
-      this.state = Object.assign({}, newState);
+  }
+  tryClearLoadingTimer(state) {
+    const loadingShowingOrTimerStarted = this.state.shouldShowLoading || this.loadingTimer != null;
+    const updateLoadingTimer = loadingShowingOrTimerStarted && !this.isViewLoading(state.rows);
+    if (updateLoadingTimer) {
+      this.clearLoadingTimer();
+      return true;
     }
+    return false;
+  }
+  updateState(newState) {
+    const didClearLoadingTimer = this.tryClearLoadingTimer(newState);
+    this.state = Object.assign(Object.assign({}, newState), { shouldShowLoading: didClearLoadingTimer
+        ? false
+        : newState.shouldShowLoading });
     this.onStateChange.emit(this.state);
   }
   getPageForOffset(offset) {
@@ -12949,7 +12980,7 @@ class SceneTreeController {
     return connection.type === 'connected';
   }
 }
-SceneTreeController.IDLE_RECONNECT_IN_SECONDS = 4 * 60;
+SceneTreeController.IDLE_RECONNECT_IN_SECONDS = 4 * 1;
 SceneTreeController.LOST_CONNECTION_RECONNECT_IN_SECONDS = 2;
 SceneTreeController.MAX_SUBSCRIPTION_RETRY_COUNT = 2;
 
@@ -108632,7 +108663,7 @@ async function deselectItem(viewer, id, { 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{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}";
+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
@@ -108676,6 +108707,7 @@ const SceneTree = class extends HTMLElement$1 {
     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
@@ -109000,6 +109032,7 @@ const SceneTree = class extends HTMLElement$1 {
    * @ignore
    */
   componentWillLoad() {
+    var _a;
     if (this.controller == null) {
       const { sceneTreeHost } = this.getConfig().network;
       const client = new SceneTreeAPIClient_1(sceneTreeHost, this.getConfig().flags.grpcUseStreamingWebSocketTransport
@@ -109008,6 +109041,7 @@ const SceneTree = class extends HTMLElement$1 {
         }
         : 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();
@@ -109040,7 +109074,7 @@ const SceneTree = class extends HTMLElement$1 {
    * @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" }))), h("slot", null))), h("div", { class: "footer" }, h("slot", { name: "footer" }))));
+    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) {
@@ -109127,6 +109161,7 @@ const SceneTree = class extends HTMLElement$1 {
   }
   handleControllerStateChange(state) {
     this.showLoader = !!state.shouldShowLoading;
+    this.showEmptyResults = !!state.shouldShowEmptyResults;
     this.rows = state.rows;
     this.totalRows = state.totalRows;
     if (state.connection.type === 'failure') {
@@ -109544,7 +109579,9 @@ const SceneTreeTableCell = class extends HTMLElement$1 {
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    return (h(Host, { onPointerEnter: this.handleCellPointerEnter, onPointerLeave: this.handleCellPointerLeave, onPointerUp: this.handleCellPointerUp, onPointerDown: this.handleCellPointerDown }, h("div", { class: "wrapper" }, h("div", { class: "no-shrink" }, h("slot", { name: "left-gutter" })), this.expandToggle && (h("button", { class: "expand-btn no-shrink", "data-test-id": 'expand-' + ((_a = this.node) === null || _a === void 0 ? void 0 : _a.name), onPointerUp: (event) => {
+    // Overrides the `.hydrated` visibility when we have nothing to display
+    const hiddenStyle = this.node == null ? { visibility: 'hidden' } : undefined;
+    return (h(Host, { onPointerEnter: this.handleCellPointerEnter, onPointerLeave: this.handleCellPointerLeave, onPointerUp: this.handleCellPointerUp, onPointerDown: this.handleCellPointerDown, style: hiddenStyle }, h("div", { class: "wrapper" }, h("div", { class: "no-shrink" }, h("slot", { name: "left-gutter" })), this.expandToggle && (h("button", { class: "expand-btn no-shrink", "data-test-id": 'expand-' + ((_a = this.node) === null || _a === void 0 ? void 0 : _a.name), onPointerUp: (event) => {
         event.preventDefault();
         this.toggleExpansion(event);
       } }, !((_b = this.node) === null || _b === void 0 ? void 0 : _b.isLeaf) && !((_c = this.node) === null || _c === void 0 ? void 0 : _c.endItem) && (h("div", { class: classnames('icon', {
@@ -110344,7 +110381,9 @@ const SceneTreeTableLayout = class extends HTMLElement$1 {
   async computeAndUpdateViewportRows() {
     var _a;
     this.computeViewportRows();
-    if ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.isConnected) {
+    if (((_a = this.controller) === null || _a === void 0 ? void 0 : _a.isConnected) &&
+      this.viewportStartIndex >= 0 &&
+      this.viewportEndIndex >= 0) {
       await this.controller.updateActiveRowRange(this.viewportStartIndex, this.viewportEndIndex);
     }
   }
@@ -133018,7 +133057,7 @@ const ViewerViewCube = class extends HTMLElement$1 {
 };
 
 globalScripts();
-const VertexSceneTree = /*@__PURE__*/proxyCustomElement(SceneTree, [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],"stateMap":[32],"errorDetails":[32],"attemptingRetry":[32]},[[0,"search","handleSearch"],[0,"cellLoaded","handleCellLoaded"]]]);
+const VertexSceneTree = /*@__PURE__*/proxyCustomElement(SceneTree, [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]},[[0,"search","handleSearch"],[0,"cellLoaded","handleCellLoaded"]]]);
 const VertexSceneTreeSearch = /*@__PURE__*/proxyCustomElement(SceneTreeSearch, [1,"vertex-scene-tree-search",{"debounce":[2],"disabled":[4],"placeholder":[1],"controller":[16],"value":[1025],"focused":[32],"isSearching":[32]}]);
 const VertexSceneTreeTableCell = /*@__PURE__*/proxyCustomElement(SceneTreeTableCell, [1,"vertex-scene-tree-table-cell",{"node":[16],"tree":[16],"value":[1],"placeholder":[1],"hovered":[1028],"isScrolling":[4,"is-scrolling"],"expandToggle":[4,"expand-toggle"],"visibilityToggle":[4,"visibility-toggle"],"selectionHandler":[16],"visibilityHandler":[16],"expansionHandler":[16],"hoverController":[16]}]);
 const VertexSceneTreeTableColumn = /*@__PURE__*/proxyCustomElement(SceneTreeTableColumn, [1,"vertex-scene-tree-table-column",{"initialWidth":[2,"initial-width"],"minWidth":[2,"min-width"],"maxWidth":[2,"max-width"]}]);