Create the scenes widget

Author: hnn0003

.env

@@ -8,13 +8,3 @@ IMJS_AUTH_AUTHORITY="https://ims.bentley.com"
 # ---- Test ids ----
 IMJS_ITWIN_ID = ""
 IMJS_IMODEL_ID = ""
-
-# Advanced CRA Config: https://create-react-app.dev/docs/advanced-configuration/
-SKIP_PREFLIGHT_CHECK=true
-
-# # Advanced iTwin.js CRA Config: https://github.com/imodeljs/create-react-app/blob/imodeljs/packages/react-scripts/README-imodeljs.md
-# USE_FAST_SASS=true
-# USE_FULL_SOURCEMAP=true
-# TRANSPILE_DEPS=false
-# # Remove the following env var if using a different package manager
-# USING_NPM=true

.npmrc

@@ -1,3 +1,4 @@
+registry=https://registry.npmjs.org/
 @bentley:registry=https://registry.npmjs.org/
 @itwin:registry=https://registry.npmjs.org/
 legacy-peer-deps=true

LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2017-2021 Bentley Systems, Incorporated. All rights reserved.
+Copyright © Bentley Systems, Incorporated. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,84 +1,77 @@
-# Getting Started with the iTwin Viewer Template
+# iTwin Scenes Tutorial
 
-This project was scaffolded with [degit](https://github.com/Rich-Harris/degit).
+This repository contains the completed sample application for the [Working with iTwin Scenes in your Viewer Application](https://developer.bentley.com/tutorials/scenes-tutorial/) tutorial. The app demonstrates how to integrate the [Scenes API](https://developer.bentley.com/apis/scenes/) into an iTwin Viewer: listing scenes, creating a new scene that captures the current camera position, activating a scene to restore that camera position, and deleting a scene.
+
+## Prerequisites
+
+Before running this app, you should have:
+
+- A registered application on the [iTwin Developer Portal](https://developer.bentley.com/register/) with the `itwin-platform` OAuth scope. This scope covers both the viewer and the Scenes API.
+  - See [Register an application](https://developer.bentley.com/tutorials/web-application-quick-start/#3-register-an-application) for step-by-step instructions.
+- An iTwin with appropriate permissions to manage scenes.
+- An iModel to open in the viewer. The tutorial uses the "House Model" sample iModel.
+  - See [Create a test iModel from a Bentley provided sample](https://developer.bentley.com/tutorials/create-test-imodel-sample/) for instructions.
 
 ## Environment Variables
 
-Prior to running the app, you will need to add OIDC client configuration to the variables in the .env file:
+Prior to running the app, add your OIDC client configuration to the variables in the `.env` file:
 
 ```
 # ---- Authorization Client Settings ----
 IMJS_AUTH_CLIENT_CLIENT_ID=""
 IMJS_AUTH_CLIENT_REDIRECT_URI=""
 IMJS_AUTH_CLIENT_LOGOUT_URI=""
-IMJS_AUTH_CLIENT_SCOPES=""
+IMJS_AUTH_CLIENT_SCOPES="itwin-platform"
 ```
 
-- You can generate a [test client](https://developer.bentley.com/tutorials/web-application-quick-start/#3-register-an-application) to get started.
-
-- Viewer expects the `itwin-platform` scope to be set.
+- The `itwin-platform` scope is already set in `.env` and grants access to both the iModel viewer and the Scenes API.
+- The redirect URI must match exactly what is registered for your application.
 
-- The application will use the path of the redirect URI to handle the redirection, it must simply match what is defined in your client.
-
-- When you are ready to build a production application, [register here](https://developer.bentley.com/register/).
-
-You should also add a valid iTwinId and iModelId for your user in the this file:
+You should also add a valid iTwinId and iModelId in the same file:
 
 ```
 # ---- Test ids ----
 IMJS_ITWIN_ID = ""
 IMJS_IMODEL_ID = ""
 ```
 
-- For the IMJS_ITWIN_ID variable, you can use the id of one of your existing iTwins. You can obtain their ids via the [iTwin REST APIs](https://developer.bentley.com/apis/itwins/operations/get-itwin/).
-
-- For the IMJS_IMODEL_ID variable, use the id of an iModel that belongs to the iTwin that you specified in the IMJS_ITWIN_ID variable. You can obtain iModel ids via the [iModel REST APIs](https://developer.bentley.com/apis/imodels-v2/operations/get-imodel-details/).
+- For `IMJS_ITWIN_ID`, use the id of one of your existing iTwins. You can obtain iTwin ids via the [iTwin REST APIs](https://developer.bentley.com/apis/itwins/operations/get-itwin/).
+- For `IMJS_IMODEL_ID`, use the id of an iModel that belongs to the iTwin above. You can obtain iModel ids via the [iModel REST APIs](https://developer.bentley.com/apis/imodels-v2/operations/get-imodel-details/).
+- Alternatively, you can [create a test iModel from a sample](https://developer.bentley.com/tutorials/create-test-imodel-sample/) to get started without an existing iModel.
 
-- Alternatively, you can [generate a test iModel](https://developer.bentley.com/tutorials/web-application-quick-start/#4-create-an-imodel) to get started without an existing iModel.
-
-- If at any time you wish to change the iModel that you are viewing, you can change the values of the iTwinId or iModelId query parameters in the url (i.e. localhost:3000?iTwinId=myNewITwinId&iModelId=myNewIModelId)
+You can also switch the iModel at runtime by changing the `iTwinId` or `iModelId` query parameters in the URL (e.g. `localhost:3000?iTwinId=myITwinId&iModelId=myIModelId`).
 
 ## Available Scripts
 
 In the project directory, you can run:
 
 ### `npm install`
 
-Installs all the dependencies listed in your package.json.
+Installs all dependencies listed in `package.json`.
 
 ### `npm start`
 
-Runs the app in the development mode.\
-It automatically opens [http://localhost:3000](http://localhost:3000) in your default browser.
+Runs the app in development mode. It automatically opens [http://localhost:3000](http://localhost:3000) in your default browser.
 
-The page will reload if you make edits.\
+The page will reload if you make edits.
 
 ### `npm run build`
 
-Builds the app for production to the `dist` folder.\
-It bundles your code in production mode and applies optimizations for best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+Builds the app for production to the `dist` folder. The build is minified and filenames include content hashes.
 
-See the section about [deployment](https://vite.dev/guide/static-deploy.html) for more information.
+See the [Vite static deploy guide](https://vite.dev/guide/static-deploy.html) for deployment options.
 
 ### `npm run preview`
 
-Once you have built the app using `npm run build` you may test it locally by running this command.
-
-This will boot up a local static web server that serves the files from `dist` at [http://localhost:3000](http://localhost:3000).
+Once you have built the app using `npm run build`, you can test it locally by running this command. It boots up a local static web server that serves the files from `dist` at [http://localhost:3000](http://localhost:3000).
 
 ### `npm run lint`
 
 Runs ESLint on all source files to check for code style issues and potential errors.
 
-## Next Steps
-
-- [iTwin Viewer options](https://www.npmjs.com/package/@itwin/web-viewer-react)
-
-- [Extending the iTwin Viewer](https://developer.bentley.com/tutorials/itwin-viewer-hello-world/)
-
-- [Using the iTwin Platform](https://developer.bentley.com/)
+## Related Resources
 
-- [iTwin Developer Program](https://www.youtube.com/playlist?list=PL6YCKeNfXXd_dXq4u9vtSFfsP3OTVcL8N)
+- [Working with iTwin Scenes in your Viewer Application](https://developer.bentley.com/tutorials/scenes-tutorial/) — the tutorial this repository accompanies
+- [Scenes API documentation](https://developer.bentley.com/apis/scenes/overview/)
+- [iTwin Viewer React package](https://www.npmjs.com/package/@itwin/web-viewer-react)
+- [iTwin Platform](https://developer.bentley.com/)

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="favicon.ico" />
-    <title>iTwin Viewer React Sample</title>
+    <title>iTwin Scenes Tutorial</title>
   </head>
   <body>
     <div id="root"></div>

package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "itwin-web-viewer-template",
-  "version": "5.0.0",
+  "name": "itwin-scenes-tutorial",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@bentley/icons-generic": "^1.0.13",
@@ -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;
+  }
+}