Adding meshbased example, upgrading package dependencies

Author: harshita-adsk

client/loader/STLLoader.js

@@ -229,9 +229,6 @@ function AnimatedSprites(props) {
      * @alias Autodesk.DataVisualization.Examples.AnimatedSprites#onModelLoaded
      */
     async function onModelLoaded(viewer, data) {
-
-        const dataVizExtension = await viewer.loadExtension("Autodesk.DataVisualization", { useInternal: true });
-
         const viewerDocument = data.model.getDocumentNode().getDocument();
         const aecModelData = await viewerDocument.downloadAecModelData();
 
@@ -242,6 +239,8 @@ function AnimatedSprites(props) {
             });
         }
 
+        const dataVizExtension = viewer.getExtension("Autodesk.DataVisualization")
+
         if (levelsExtension) {
             levelsExtension.floorSelector.selectFloor(0, true);
         }
@@ -298,6 +297,7 @@ function AnimatedSprites(props) {
             env={env}
             docUrn={docUrn}
             onModelLoaded={onModelLoaded}
+            extensions={{ "Autodesk.DataVisualization": { useInternal: true } }}
             getToken={async () =>
                 await fetch("/api/token")
                     .then((res) => res.json())

client/pages/AnimatedSprites.jsx

@@ -12,6 +12,7 @@ import AnimatedSprites from "./AnimatedSprites.jsx";
 import StructureInfo from "./StructureInfo.jsx";
 import Navisworks from "./Navisworks.jsx";
 import CustomPage from "./CustomPage.jsx";
+import MeshHeatmap from "./MeshHeatmap.jsx";
 
 /**
  * 
@@ -58,7 +59,10 @@ function App(props) {
                 <Route path="/app">
                     <CustomPage {...props} />
                 </Route>
-                <Route exact={true} path="/">
+                <Route exact={true} path="/meshheatmap">
+                    <MeshHeatmap {...props} />
+                </Route>
+                <Route path="/">
                     <ReferenceApp {...props} />
                 </Route>
             </Switch>

client/pages/App.jsx

@@ -66,7 +66,7 @@ function Dot(props) {
      * @param {Autodesk.Viewing.GuiViewer3D} viewer The viewer in which the model is loaded.
      */
     async function onModelLoaded(viewer) {
-        const dataVizExt = await viewer.loadExtension("Autodesk.DataVisualization", { useInternal: true });
+        const dataVizExt = viewer.getExtension("Autodesk.DataVisualization");
         const DATAVIZEXTN = Autodesk.DataVisualization.Core;
         var styleMap = {};
 
@@ -119,6 +119,7 @@ function Dot(props) {
                 env={env}
                 docUrn={docUrn}
                 onModelLoaded={onModelLoaded}
+                extensions={{ "Autodesk.DataVisualization": { useInternal: true } }}
                 getToken={async () => await fetch("/api/token").then(res => res.json()).then(data => data.access_token)}
             />
         </React.Fragment>

client/pages/Dot.jsx

@@ -3,6 +3,7 @@
  */
 
 import React, { useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router";
 import { BaseApp } from "forge-dataviz-iot-react-components";
 import DataHelper from "./DataHelper";
 import { EventTypes } from "forge-dataviz-iot-react-components";
@@ -128,7 +129,7 @@ THREE.EventDispatcher.prototype.apply(EventBus.prototype);
  * @param {"derivativeV2"|"derivativeV2_EU"|"modelDerivativeV2"|"fluent"|"D3S"|"D3S_EU"} [props.appData.api] Please refer to LMV documentation for more information.
  * @param {Object} props.appContext Contains base urls used to query assets, LMV, data etc.
  * @param {string} [props.appContext.dataUrl] The base url used to configure a specific {@link DataAdapter}
- * 
+ * @param {number|undefined} geomIndex Index of geometry to be shown. Forwarded via URL params.
  * @memberof Autodesk.DataVisualization.Examples
  */
 function EngineSimulation(props) {
@@ -138,6 +139,9 @@ function EngineSimulation(props) {
     const dataRef = useRef();
     const viewerRef = useRef(null);
 
+    const queryParams = new URLSearchParams(useLocation().search);
+    const geomIndex = queryParams.get("geometryIndex") ? parseInt(queryParams.get("geometryIndex")) : undefined;
+
     props.appData.docUrn = "urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Zm9yZ2V0X2h5cGVyaW9uX3Rlc3QvRW5naW5lX1N0YW5kLmR3Zg";
     props.appData.adapterType = "synthetic";
 
@@ -162,7 +166,7 @@ function EngineSimulation(props) {
 
     return (
         <React.Fragment>
-            <BaseApp {...props} eventBus={eventBusRef.current} data={data} />
+            <BaseApp {...props} eventBus={eventBusRef.current} data={data} geomIndex={geomIndex} />
         </React.Fragment>
     );
 }

client/pages/EngineSimulation.jsx

@@ -74,7 +74,7 @@ function Heatmap(props) {
      * @param {Object} data Event data that contains the loaded model.
      */
     async function onModelLoaded(viewer, data) {
-        const dataVizExt = await viewer.loadExtension("Autodesk.DataVisualization", { useInternal: true });
+        const dataVizExt = viewer.getExtension("Autodesk.DataVisualization");
         const DATAVIZEXTN = Autodesk.DataVisualization.Core;
         var styleMap = {};
 
@@ -117,9 +117,7 @@ function Heatmap(props) {
 
         const structureInfo = new DATAVIZEXTN.ModelStructureInfo(data.model);
         const heatmapData = await structureInfo.generateSurfaceShadingData(devices);
-
-        dataVizExt.setupSurfaceShading(data.model, heatmapData);
-
+        await dataVizExt.setupSurfaceShading(data.model, heatmapData);
         dataVizExt.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
         dataVizExt.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
 
@@ -145,6 +143,7 @@ function Heatmap(props) {
                 env={env}
                 docUrn={docUrn}
                 onModelLoaded={onModelLoaded}
+                extensions={{ "Autodesk.DataVisualization": { useInternal: true } }}
                 getToken={async () => await fetch("/api/token").then(res => res.json()).then(data => data.access_token)}
             />
         </React.Fragment>