Add changes to support scenes app

Author: hnn0003

package-lock.json

@@ -59,6 +59,10 @@
     "vite": "^7.0.1",
     "vite-plugin-static-copy": "^3.1.0"
   },
+  "overrides": {
+    "lodash": "^4.17.23",
+    "seroval": "^1.5.0"
+  },
   "scripts": {
     "build": "tsc -b && vite build",
     "lint": "eslint .",

package.json

@@ -13,6 +13,7 @@ import {
 import {
   FitViewTool,
   IModelApp,
+  IModelConnection,
   type ScreenViewport,
   StandardViewId,
 } from "@itwin/core-frontend";
@@ -25,8 +26,11 @@ import {
   MeasureToolsUiItemsProvider,
 } from "@itwin/measure-tools-react";
 import { selectionStorage } from "../selectionStorage";
-import { propertyGridUiProvider, treeWidgetUiProvider } from "./UiProviders";
+import { propertyGridUiProvider } from "./UiProviders";
 import { useAuthorizationContext } from "./Authorization";
+import { ScenesWidgetProvider } from "./ScenesWidget";
+import { ScenesClient } from "./ScenesClient";
+import { ScenesCache } from "./ScenesCache";
 
 interface AppProps {
   iTwinId: string;
@@ -45,6 +49,15 @@ export function App({ iTwinId, iModelId, changesetId }: AppProps) {
     MeasurementActionToolbar.setDefaultActionProvider();
   }, []);
 
+  const onIModelReady = useCallback(
+    async (iModelConnection: IModelConnection) => {
+      // Populate the information needed for this app.
+      await ScenesClient.populateContext(iModelConnection);
+      await ScenesCache.populateRealityModels(iModelConnection);
+    },
+    [],
+  );
+
   return (
     <Viewer
       iTwinId={iTwinId}
@@ -54,13 +67,15 @@ export function App({ iTwinId, iModelId, changesetId }: AppProps) {
       viewCreatorOptions={viewCreatorOptions}
       enablePerformanceMonitors={true} // see description in the README (https://www.npmjs.com/package/@itwin/web-viewer-react)
       onIModelAppInit={onIModelAppInit}
+      onIModelConnected={onIModelReady}
       mapLayerOptions={{
         BingMaps: {
           key: "key",
           value: import.meta.env.IMJS_BING_MAPS_KEY ?? "",
         },
       }}
       uiProviders={[
+        new ScenesWidgetProvider(),
         new ViewerNavigationToolsProvider(),
         new ViewerContentToolsProvider({
           vertical: {
@@ -69,7 +84,6 @@ export function App({ iTwinId, iModelId, changesetId }: AppProps) {
         }),
         new ViewerStatusbarItemsProvider(),
         new MeasureToolsUiItemsProvider(),
-        treeWidgetUiProvider,
         propertyGridUiProvider,
       ]}
       selectionStorage={selectionStorage}
@@ -96,7 +110,7 @@ function viewConfiguration(viewPort: ScreenViewport) {
           ViewerPerformance.addMeasure(
             "TileTreesLoaded",
             "ViewerStarting",
-            "TilesLoaded"
+            "TilesLoaded",
           );
           clearInterval(intvl);
           resolve(true);

src/components/App.tsx

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.scenes-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  padding: 8px;
+  box-sizing: border-box;
+
+  .scenes-banner {
+    flex: none;
+  }
+
+  .scenes-controls {
+    height: 40px;
+    flex: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  .scenes-tile-list {
+    flex: auto;
+    overflow-y: auto;
+  }
+
+  .scenes-group {
+    margin-left: 10px;
+  }
+
+  .scenes-tile {
+    width: -webkit-fill-available;
+    margin-bottom: 10px;
+    margin-right: 5px;
+  }
+
+  .scenes-tile-div {
+    cursor: pointer;
+  }
+}