Swiping upgrade (#290)

* Upgraded Fire Decorator Sample to 3.0

* WIP

* Including clipping plane on the TGP agian

* Debugging in progress

* assertion not nessisary

* Swiping with Feature Appearance Provider

* Upgrade to 3.0 (#295)

* Updated packages

* Progress on Compilation Errors. Finished Components

* Common finished except startup

* Progress on 3.0. Api folder compiles. Geo and UiComponents compile

* More progress

* All non-sample files compile

* Progress on API samples

* More compilation fixes

* More sample progress

* Fronstage fixes. Still need queryRealityData fix

* No compilation errors in the code

* Updated modules

* Css changes

* Fixed all viewer instances

* Compiles!! :)

* Showcase running

* Fixes for samples with tools

* CSS Fixes

* Upgraded Viewer to newest dev version

* Updated @itwinjs-sandbox files to fix widgets from being initialized twice

* Increased default tree size. Still need to add responsive sizing

* Added dynamic resizing for trees

* fixes for markerpin sample

* Fixed crash caused by viewSetup

* Fixed a few sample specific issues with viewFlags

* Removed console.logs

* Removed Unused Files

* Updated most samples to fix default view state bug

* package-lock update

* Progress on IoT alert

* Explode Sample Upgraded 3.0

* More IoT alert improvements

* Updating Explode Sample Readme verbage

* Fixed tooltip customize not working

* Upgrade to newest rc version of 3.0

* Linting & updated packages (#284)

* updated package.json & panels

* added working overlay version

* quick linting fixes

* fixed linter to catch comma-dangles

* removed duplicate react-error-overlay entry

* added flder to ignore

* removed unnecessary files

* added scripts to generate required files for compilation

* refactored editor/viewer logic

* fixed more linting issues

* A few small changes

* Fix for crash on Camera Path Sample

* Logging statements for Marker Pin Bug

* Update view clip to itwinui-react

* Classifier to 3.0

* More reality data sample cleanup

* Updated Viewer Props

* Component Samples and Tree Cleanup

* Slider Components

* More UI Component Samples

* More UI Components

* Last component sample

* Use @itwin/reality-data-client

* Progress on Map Keys

* Map data provided to samples

* Upgraded to official 3.0.0 version.

* Fix for Multi-Viewport samples resetting initial view constantly

* Changed Viewer version

* Upgrade to Newest Viewer Version

* moved sandbox package to @itwin/sandbox

* renamed imports

* Updated stale readme links

* upgraded IoT App

* Added cesium key to MapLayerOptions

* Fixed query issue with Volume Query sample

* fixed cross probing

* removed @bentley/itwin-client

* removed referenced to styles that are not necessary

* Added cesium key to samples using map data

* Fire Sample Fixed

* - serializeView UI deprecated fix.

* fixed marker pin sample

* minor edits to auth client

* removed unnecessary files

* Fixed Element Name List on Volume Query (#292)

* Heatmap WIP

* fixed theming issues & panel issues

* removed font overrides

* added some common files to modules

* added theme control to samples

* removed text color

* Upgrade to3.0 (#293)

* Fixed Element Name List on Volume Query

* Updated component thumbnails, and tweaked a few style issues

* fixed unifed selection sample

* - ChangedElements updated

* ClashReview problems tab fixes

* - issues Sample Problem tab fixes

* - transformation problem tab fix

* moved tileAdminOptions

* - validiation sample problem tab fix

* moved global data sample initial camera

* refactor/updated display styles

* updated to itwinui, included styles

* updated to itwinui

* upgrade to itwinui

* Updated to itwinui

* Thematic display sample upgrade (#294)

* Terrain Not working

* fixed stated updating

* - Thematic display ui control fix.

* - updated UI from Linas

* fixed value for option being invalid

* revered change for debugging

Co-authored-by: Dustin Lebsock <dustin.lebsock@bentley.com>

* viewclip problem fix

* - Volume query fix

* - readded volumequeryapi clearcoloroverrides

* - serialize view itwinui react upgrade

* classifier, displaystyles, explode problem fixes

* - hypermodeling problem fix with pointselector not found

* Fire Decoration and IOT problem tab fixes

* - snow decoration sample deprecated changes

* - property widget sample start of deprecated content fix

* scientific viz deprecated updated

* updated packages

* added ability to add public files

* reverted quick fix

* added images to public files

* modified to reset files between samples

* fixed minor issues

* upgrade deprecated

* temp fix for stale viewport

* typo

* modified how public files are handled

* - removed inital view on load from the serialize view sample. This fixes the imodel not rendering. Will need to be brought back

* fixed floating widgets

* disabled broken sample temporarily

* fixed floating for issues widget

* increased memory for build and start

* workaround for tests

* - screenspace effect bug fix and deprecated fix

* -thematic display problems tab

* undo workaround

* - tooltip deprecated buttons fix

* - global display deprecated updated

* Add missing copyright headers

* remove test script

* fixed style foe selector

* floating widget fix, update packages, removed tests

* fix dropdowns

* fixed styling

* fixed styling

* Remove model. Adjust description

* another fix for dropdowns

* more floating widget fixes

* added missing package

* fixed rearrangement

Co-authored-by: tomdicarlo <24437642+tomdicarlo@users.noreply.github.com>
Co-authored-by: Josh Schifter <josh.schifter@bentley.com>
Co-authored-by: Ellord207 <30239292+Ellord207@users.noreply.github.com>
Co-authored-by: Will Bentley <38542573+williamkbentley@users.noreply.github.com>
Co-authored-by: Dustin Lebsock <dustin.lebsock@bentley.com>

* modified generate script to use relative url (#296)

* Module fixes (#297)

* modified generate script to use relative url

* another minor fix for resolving modules

* more minor fixes for module loading

* Set transparency to get heatmap to display (#298)

* Set transparency to get heatmap to display

* Adding Stefan as code owner

* updated modules location (#301)

* swiping comparison update

* package-lock

Co-authored-by: Stefan Retief <stefan.retief@me.com>
Co-authored-by: tomdicarlo <24437642+tomdicarlo@users.noreply.github.com>
Co-authored-by: Josh Schifter <josh.schifter@bentley.com>
Co-authored-by: Will Bentley <38542573+williamkbentley@users.noreply.github.com>
Co-authored-by: Dustin Lebsock <dustin.lebsock@bentley.com>
Co-authored-by: Stefan Retief <stefan.retief@bentley.com>

.github/CODEOWNERS

@@ -8,4 +8,4 @@
 # the repo. Unless a later match takes precedence,
 # @global-owner1 and @global-owner2 will be requested for
 # review when someone opens a pull request.
-*  @Josh-Schifter @BaoTon @williamkbentley
+*  @Josh-Schifter @BaoTon @williamkbentley @StefanRetief

scripts/generate.js

@@ -51,9 +51,9 @@ async function handleExec(source, generatedFilesDest) {
         return {
           dependency: mod.dependency,
           version: mod.version,
-          lib: mod.fileName.replace(path.join(process.cwd(), "public"), "").replace(/\\/g, "/"),
+          lib: mod.fileName.replace(path.join(process.cwd(), "public", "/"), "").replace(/\\/g, "/"),
           global: camelCase(mod.dependency),
-          types: typedef ? typedef.fileName.replace(path.join(process.cwd(), "public"), "").replace(/\\/g, "/") : undefined,
+          types: typedef ? typedef.fileName.replace(path.join(process.cwd(), "public", "/"), "").replace(/\\/g, "/") : undefined,
         }
       })
     );

src/Components/SampleEditor/ModuleManager.ts

@@ -32,11 +32,23 @@ export class ModuleManager {
     return ModuleManager.moduleRegistry;
   }
 
+  private static _isValidHttpUrl(val: string) {
+    let url;
+
+    try {
+      url = new URL(val);
+    } catch (_) {
+      return false;
+    }
+
+    return url.protocol === "http:" || url.protocol === "https:";
+  }
+
   public static formatModule(name: string, version: string, options: { lib: string, global: string, types?: string }) {
     return new InternalModule(name, version, {
-      libUrl: ModuleManager.root && options.lib.startsWith("/") ? new URL(options.lib, ModuleManager.root).href : options.lib,
+      libUrl: ModuleManager.root && !ModuleManager._isValidHttpUrl(options.lib) ? new URL(options.lib, ModuleManager.root).href : options.lib,
       global: options.global,
-      typesUrl: options.types ? ModuleManager.root && options.types.startsWith("/") ? new URL(options.types, ModuleManager.root).href : options.types : undefined,
+      typesUrl: options.types ? ModuleManager.root && !ModuleManager._isValidHttpUrl(options.types) ? new URL(options.types, ModuleManager.root).href : options.types : undefined,
     });
   }
 }

src/frontend-samples/heatmap-decorator-sample/HeatmapDecorator.ts

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 import { DecorateContext, Decorator, GraphicBranch, GraphicType, IModelApp, RenderGraphic, TextureImage } from "@itwin/core-frontend";
 import { Geometry, Point3d, Range2d, Range3d, Transform } from "@itwin/core-geometry";
-import { ColorDef, ColorDefProps, Gradient, GraphicParams, ImageBuffer, ImageBufferFormat, RenderMaterial, RenderTexture, TextureMapping, ThematicGradientColorScheme, ThematicGradientMode, ThematicGradientSettings } from "@itwin/core-common";
+import { ColorDef, ColorDefProps, Gradient, GraphicParams, ImageBuffer, ImageBufferFormat, RenderMaterial, RenderTexture, TextureMapping, TextureTransparency, ThematicGradientColorScheme, ThematicGradientMode, ThematicGradientSettings } from "@itwin/core-common";
 import { dispose } from "@itwin/core-bentley";
 
 /** This file contains the code that implements the heatmap decorator including
@@ -265,7 +265,7 @@ export default class HeatmapDecorator implements Decorator {
       return undefined;
 
     /* Step 3: Convert the image buffer to a texture */
-    const image: TextureImage = { source: imageBuffer };
+    const image: TextureImage = { source: imageBuffer, transparency: TextureTransparency.Translucent };
     const texture = IModelApp.renderSystem.createTexture({ type: RenderTexture.Type.Normal, image });
 
     if (undefined === texture)

src/frontend-samples/heatmap-decorator-sample/HeatmapDecoratorWidget.tsx

@@ -37,7 +37,6 @@ export const HeatmapDecoratorWidget: React.FunctionComponent = () => {
 
     setRangeState(range);
     setHeightState(height);
-
   }, []);
 
   /** When the images are loaded, initalize the MarkerPin */

src/frontend-samples/swiping-viewport/Divider.tsx

@@ -10,7 +10,7 @@ export interface DividerComponentState {
 }
 
 export interface DividerComponentProps {
-  bounds: ClientRect;
+  bounds: DOMRect;
   menuChildren?: React.ReactNode;
   leftChildren?: React.ReactNode;
   rightChildren?: React.ReactNode;

src/frontend-samples/swiping-viewport/SwipingComparison.scss

@@ -13,4 +13,10 @@
   column-gap: 8px;
   grid-template-columns: 1fr 2fr;
   align-items: center;
+}
+
+.sample-app-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
 }

src/frontend-samples/swiping-viewport/SwipingComparisonApi.ts

@@ -2,11 +2,9 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-
-import { BeEvent } from "@itwin/core-bentley";
+import { ContextRealityModelProps, FeatureAppearance, FeatureAppearanceProps, Frustum, RealityDataFormat, RealityDataProvider, RenderMode, ViewFlagOverrides } from "@itwin/core-common";
+import { AccuDrawHintBuilder, FeatureSymbology, GraphicBranch, IModelApp, RenderClipVolume, SceneContext, ScreenViewport, TiledGraphicsProvider, TileTreeReference, Viewport } from "@itwin/core-frontend";
 import { ClipPlane, ClipPrimitive, ClipVector, ConvexClipPlaneSet, Point3d, Transform, Vector3d } from "@itwin/core-geometry";
-import { ContextRealityModelProps, FeatureAppearance, Frustum, RealityDataFormat, RealityDataProvider, RenderMode } from "@itwin/core-common";
-import { AccuDrawHintBuilder, FeatureSymbology, GraphicBranch, IModelApp, IModelConnection, RenderClipVolume, SceneContext, ScreenViewport, TiledGraphicsProvider, TileTreeReference, Viewport } from "@itwin/core-frontend";
 import { RealityDataAccessClient, RealityDataResponse } from "@itwin/reality-data-client";
 
 export enum ComparisonType {
@@ -18,30 +16,12 @@ export default class SwipingComparisonApi {
   private static _provider: SampleTiledGraphicsProvider | undefined;
   private static _viewport?: Viewport;
 
-  public static readonly onSwipeEvent = new BeEvent<(dividerLeft: number | undefined) => void>();
-  public static readonly onLockEvent = new BeEvent<(isLocked: boolean) => void>();
-
   /** Called by the showcase before swapping to another sample. */
   public static teardown(): void {
     if (undefined !== SwipingComparisonApi._viewport && undefined !== SwipingComparisonApi._provider) {
       SwipingComparisonApi.disposeProvider(SwipingComparisonApi._viewport, SwipingComparisonApi._provider);
       SwipingComparisonApi._provider = undefined;
     }
-    if (undefined !== SwipingComparisonApi._viewport) {
-      SwipingComparisonApi._viewport.view.setViewClip(undefined);
-      SwipingComparisonApi._viewport.synchWithView();
-      SwipingComparisonApi._viewport = undefined;
-    }
-  }
-
-  /** Gets the selected viewport using the IModelApp API. */
-  public static getSelectedViewport(): ScreenViewport | undefined {
-    return IModelApp.viewManager.selectedView;
-  }
-
-  /** Adds a listener that will be triggered only once for the next opened view.  Returns a functions to remove that listener. */
-  public static listenOnceForViewOpen(onOpen: (viewport: ScreenViewport) => void): () => void {
-    return IModelApp.viewManager.onViewOpen.addOnce(onOpen);
   }
 
   /** Adds a listener that will be triggered when the viewport is updated. Returns a functions to remove that listener. */
@@ -57,8 +37,9 @@ export default class SwipingComparisonApi {
   }
 
   /** Get the rectangle defining the area of the HTML canvas using the viewport API. */
-  public static getClientRect(vp: ScreenViewport): ClientRect {
-    return vp.getClientRect();
+  public static getRect(vp: ScreenViewport): DOMRect {
+    // Calling DOMRect.fromRect to clone the rect so the state in the App will update properly.
+    return DOMRect.fromRect(vp.getClientRect());
   }
 
   /** Convert a point in the view space to the world space using the viewport API. */
@@ -77,25 +58,37 @@ export default class SwipingComparisonApi {
   }
 
   /** Will create an effect allowing for different views on either side of an arbitrary point in the view space.  This will allows us to compare the effect the views have on the iModel. */
-  public static compare(screenPoint: Point3d, viewport: Viewport, comparisonType: ComparisonType) {
+  public static compare(screenPoint: Point3d | undefined, viewport: Viewport, comparisonType: ComparisonType) {
     if (viewport.viewportId !== SwipingComparisonApi._viewport?.viewportId)
       SwipingComparisonApi.teardown();
     SwipingComparisonApi._viewport = viewport;
     const provider = SwipingComparisonApi._provider;
     if (!viewport.view.isSpatialView())
       return;
 
+    let oldClipVector: ClipVector | undefined;
     if (undefined !== provider && provider.comparisonType !== comparisonType) {
-      SwipingComparisonApi.disposeProvider(SwipingComparisonApi._viewport, SwipingComparisonApi._provider!);
+      // Save the old ClipVector if the screen point is not provided.
+      // We will use this if a new provider is needed.
+      if (screenPoint === undefined)
+        oldClipVector = this._provider?.clipVolume?.clipVector;
+      SwipingComparisonApi.disposeProvider(viewport, SwipingComparisonApi._provider!);
       SwipingComparisonApi._provider = undefined;
     }
 
-    if (undefined === SwipingComparisonApi._provider) {
-      SwipingComparisonApi._provider = SwipingComparisonApi.createProvider(screenPoint, viewport, comparisonType);
-      viewport.addTiledGraphicsProvider(SwipingComparisonApi._provider);
+    if (undefined === SwipingComparisonApi._provider && (screenPoint || oldClipVector)) {
+      if (screenPoint)
+        // Use the screen point if provided.
+        SwipingComparisonApi._provider = SwipingComparisonApi.createProvider(screenPoint, viewport, comparisonType);
+      else if (oldClipVector)
+        // Use the old Clip Vector if it's available.
+        SwipingComparisonApi._provider = SwipingComparisonApi.createProvider(oldClipVector, viewport, comparisonType);
+      if (SwipingComparisonApi._provider)
+        // If the provider was created, add that to the viewport.
+        viewport.addTiledGraphicsProvider(SwipingComparisonApi._provider);
     }
-
-    SwipingComparisonApi.updateProvider(screenPoint, viewport, SwipingComparisonApi._provider);
+    if (screenPoint !== undefined && SwipingComparisonApi._provider)
+      SwipingComparisonApi.updateProvider(screenPoint, viewport, SwipingComparisonApi._provider);
   }
 
   /** Creates a [ClipVector] based on the arguments. */
@@ -117,16 +110,20 @@ export default class SwipingComparisonApi {
 
     // Update in Viewport
     viewport.view.setViewClip(SwipingComparisonApi.createClip(normal.clone(), worldPoint));
+
     viewport.synchWithView();
   }
 
   /** Creates a [TiledGraphicsProvider] and adds it to the viewport.  This also sets the clipping plane used for the comparison. */
-  private static createProvider(screenPoint: Point3d, viewport: Viewport, type: ComparisonType): SampleTiledGraphicsProvider {
-    const normal = SwipingComparisonApi.getPerpendicularNormal(viewport, screenPoint);
-    let rtnProvider;
-
-    // Note the normal is negated, this is flip the clipping plane created from it.
-    const negatedClip = SwipingComparisonApi.createClip(normal.clone().negate(), SwipingComparisonApi.getWorldPoint(viewport, screenPoint));
+  private static createProvider(arg: Point3d | ClipVector, viewport: Viewport, type: ComparisonType): SampleTiledGraphicsProvider {
+    let rtnProvider: SampleTiledGraphicsProvider;
+    const createClipVectorFromPoint = (point: Point3d) => {
+      const normal = SwipingComparisonApi.getPerpendicularNormal(viewport, point);
+
+      // Note the normal is negated, this is flip the clipping plane created from it.
+      return SwipingComparisonApi.createClip(normal.clone().negate(), SwipingComparisonApi.getWorldPoint(viewport, point));
+    };
+    const negatedClip: ClipVector = arg instanceof ClipVector ? arg : createClipVectorFromPoint(arg);
     switch (type) {
       case ComparisonType.Wireframe:
       default:
@@ -145,7 +142,8 @@ export default class SwipingComparisonApi {
   }
 
   /** Get first available reality models and attach it to displayStyle. */
-  public static async attachRealityData(viewport: Viewport, imodel: IModelConnection) {
+  public static async attachRealityData(viewport: Viewport) {
+    const imodel = viewport.iModel;
     const style = viewport.displayStyle.clone();
     const RealityDataClient = new RealityDataAccessClient();
     const available: RealityDataResponse = await RealityDataClient.getRealityDatas(await IModelApp.authorizationClient!.getAccessToken(), imodel.iTwinId, undefined);
@@ -181,8 +179,8 @@ export default class SwipingComparisonApi {
   }
 
   /** Set the transparency of the reality models using the Feature Override API. */
-  public static setRealityModelTransparent(vp: Viewport, transparency: boolean | undefined): void {
-    const override = { transparency: (transparency ?? false) ? 1.0 : 0.0 };
+  public static setRealityModelTransparent(vp: Viewport, transparent: boolean): void {
+    const override: FeatureAppearanceProps = { transparency: (transparent ?? false) ? 1 : 0 };
     vp.displayStyle.settings.contextRealityModels.models.forEach((model) => {
       model.appearanceOverrides = model.appearanceOverrides ? model.appearanceOverrides.clone(override) : FeatureAppearance.fromJSON(override);
     });
@@ -191,7 +189,7 @@ export default class SwipingComparisonApi {
 
 abstract class SampleTiledGraphicsProvider implements TiledGraphicsProvider {
   public readonly abstract comparisonType: ComparisonType;
-  public viewFlagOverrides = { renderMode: RenderMode.Wireframe, showClipVolume: false };
+  public viewFlagOverrides: ViewFlagOverrides = { clipVolume: false };
   public clipVolume: RenderClipVolume | undefined;
   constructor(clipVector: ClipVector) {
     // Create the object that will be used later by the "addToScene" method.
@@ -203,7 +201,7 @@ abstract class SampleTiledGraphicsProvider implements TiledGraphicsProvider {
     viewport.view.forEachTileTreeRef(func);
 
     // Do not apply the view's clip to this provider's graphics - it applies its own (opposite) clip to its graphics.
-    this.viewFlagOverrides.showClipVolume = false;
+    this.viewFlagOverrides.clipVolume = false;
   }
 
   /** Overrides the logic for adding this provider's graphics into the scene. */

src/frontend-samples/swiping-viewport/SwipingComparisonApp.tsx

@@ -2,80 +2,41 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
+import { IModelConnection, ViewState } from "@itwin/core-frontend";
 import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
-import React, { FunctionComponent, useEffect, useState } from "react";
 import { Viewer } from "@itwin/web-viewer-react";
-import { IModelApp, IModelConnection, ScreenViewport } from "@itwin/core-frontend";
-import { IModelViewportControlOptions } from "@itwin/appui-react";
+import React, { FunctionComponent, useMemo } from "react";
 import { SwipingComparisonWidgetProvider } from "./SwipingComparisonWidget";
-import { DividerComponent } from "./Divider";
-import SwipingComparisonApi from "./SwipingComparisonApi";
 
-const uiProviders = [new SwipingComparisonWidgetProvider()];
+const containerId = "swiping_comparison_app_container";
+const uiProviders = [new SwipingComparisonWidgetProvider(containerId)];
 
 const SwipingComparisonApp: FunctionComponent = () => {
-  const sampleIModelInfo = useSampleWidget("Drag the divider to compare the two halves of the view. Try rotating the view with the 'Lock Plane' toggle on and off.", [SampleIModels.ExtonCampus]);
-  const [viewportOptions, setViewportOptions] = useState<IModelViewportControlOptions>();
-  const [boundsState, setBoundsState] = React.useState<ClientRect>();
-  const [dividerLeftState, setDividerLeftState] = React.useState<number>();
-  const [isLockedState, setIsLockedState] = React.useState<boolean>(false);
-
-  /** On function component initialization, subscribe to the locked event for when the widget toggles a locked the state is updated */
-  useEffect(() => {
-    const unSubscribe = SwipingComparisonApi.onLockEvent.addListener((isLocked) => setIsLockedState(isLocked));
-    return () => { unSubscribe(); };
-  }, []);
-
-  const _oniModelReady = async (iModelConnection: IModelConnection) => {
-    IModelApp.viewManager.onViewOpen.addOnce((_vp: ScreenViewport) => {
-      setBoundsState(SwipingComparisonApi.getClientRect(_vp));
-      const dividerPos = initPositionDivider(SwipingComparisonApi.getClientRect(_vp));
-      setDividerLeftState(dividerPos);
-    });
+  const getDefaultView = React.useCallback(async (iModelConnection: IModelConnection): Promise<ViewState> => {
     const viewState = await ViewSetup.getDefaultView(iModelConnection);
-    setViewportOptions({ viewState });
-  };
-
-  // Returns the position the divider will start at based on the bounds of the divider
-  const initPositionDivider = (bounds: ClientRect): number => {
-    return bounds.left + (bounds.width / 2);
-  };
-
-  const _onDividerMoved = (leftWidth: number, rightWidth: number) => {
-    // leftWidth is relative to the canvas.  We need to track left based on the window
-    const sliderWidth = boundsState!.width - (leftWidth + rightWidth);
-    const left = leftWidth + (sliderWidth / 2);
-    const updatedLeft = left + boundsState!.left;
-
-    // Raise the event to be sent to the widget
-    SwipingComparisonApi.onSwipeEvent.raiseEvent(updatedLeft);
-    setDividerLeftState(updatedLeft);
-  };
+    return viewState;
+  }, []);
+  const viewportOptions = useMemo(() => ({ viewState: getDefaultView }), [getDefaultView]);
+  const sampleIModelInfo = useSampleWidget("Drag the divider to compare the two halves of the view. Try rotating the view with the 'Lock Plane' toggle on and off.", [SampleIModels.ExtonCampus]);
 
   /** The sample's render method */
   return (
     <>
       { /** Viewport to display the iModel */}
       {sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
-        <>
+        <div id={containerId} className="sample-app-container">
           <Viewer
             iTwinId={sampleIModelInfo.contextId}
             iModelId={sampleIModelInfo.iModelId}
             authClient={AuthorizationClient.oidcClient}
             enablePerformanceMonitors={true}
             viewportOptions={viewportOptions}
             mapLayerOptions={mapLayerOptions}
-            onIModelConnected={_oniModelReady}
             defaultUiConfig={default3DSandboxUi}
             theme="dark"
             uiProviders={uiProviders}
           />
-
-          {/** The divider to move left and right. */}
-          {boundsState && dividerLeftState && !isLockedState ?
-            <DividerComponent sideL={dividerLeftState - boundsState.left} bounds={boundsState} onDragged={_onDividerMoved} />
-            : <></>}
-        </>
+        </div>
       }
     </>
   );