Adding Playground page for adding sensor positions, formatting, dependency updates

Author: harshita-adsk

.gitignore

@@ -12,5 +12,4 @@ dist/
 node_modules/
 .DS_Store
 .env
-package-lock.json
-.vscode/*
+package-lock.json

README.md

@@ -2,7 +2,7 @@
 
 ![Application](docs/dataviz-intro.jpg)
 
-This sample application demonstrates the functionality of the Forge Data Visualization extension. To learn more about the extension and the features it offers, see the [Data Visualization Extension  Developer's Guide](https://forge.autodesk.com/en/docs/dataviz/v1/developers_guide/introduction/overview/).
+This sample application demonstrates the functionality of the Forge Data Visualization extension. To learn more about the extension and the features it offers, see the [Data Visualization Extension Developer's Guide](https://forge.autodesk.com/en/docs/dataviz/v1/developers_guide/introduction/overview/).
 
 ## Directory Structure
 

client/app.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+
 /**
  * Initialize the configurations
  *
@@ -17,7 +19,6 @@ import ReactDOM from "react-dom";
 import App from "./pages/App.jsx";
 import { BrowserRouter } from "react-router-dom";
 
-
 ReactDOM.render(
     <BrowserRouter>
         <App {...{ appData: __app.dataContext, appContext: ApplicationContext }} />

client/pages/AnimatedSprites.jsx

@@ -107,13 +107,13 @@ const sensorPositions = {
 
 /**
  * An example illustrating how to animate sprite viewables. Can be viewed at: https://hyperion.autodesk.io/animation
- * 
+ *
  * @component
  * @param {Object} props
  * @param {Object} props.appData Data passed to the AnimatedSprites.
  * @param {("AutodeskStaging"|"AutodeskProduction")} props.appData.env Forge API environment
  * @param {string} props.appData.docUrn Document URN of model
- * 
+ *
  * @memberof Autodesk.DataVisualization.Examples
  * @alias Autodesk.DataVisualization.Examples.AnimatedSprites
  */
@@ -155,15 +155,14 @@ function AnimatedSprites(props) {
     async function generateViewableData(dataItems) {
         // Create a visual style shared by all the thermometers since they're the same type.
         const styleColor = 0xffffff;
-        const dataVizExtn = Autodesk.DataVisualization.Core
+        const dataVizExtn = Autodesk.DataVisualization.Core;
 
         const ductFanStyle = new dataVizExtn.ViewableStyle(
             dataVizExtn.ViewableType.SPRITE,
             new THREE.Color(styleColor),
             fan00
         );
 
-
         fans.forEach((fan) => ductFanStyle.preloadSprite(fan));
 
         const motionStyle = new dataVizExtn.ViewableStyle(
@@ -211,7 +210,7 @@ function AnimatedSprites(props) {
 
     /**
      * Determines a random set of viewable ids that will be animated.
-     * 
+     *
      * @param {SpriteViewable[]} viewables Array of {@link SpriteViewable} in scene.
      * @returns {number[]} Subset of viewable ids to animate.
      */
@@ -239,7 +238,7 @@ function AnimatedSprites(props) {
             });
         }
 
-        const dataVizExtension = viewer.getExtension("Autodesk.DataVisualization")
+        const dataVizExtension = viewer.getExtension("Autodesk.DataVisualization");
 
         if (levelsExtension) {
             levelsExtension.floorSelector.selectFloor(0, true);

client/pages/App.jsx

@@ -12,10 +12,11 @@ import AnimatedSprites from "./AnimatedSprites.jsx";
 import StructureInfo from "./StructureInfo.jsx";
 import Navisworks from "./Navisworks.jsx";
 import CustomPage from "./CustomPage.jsx";
+import Playground from "./Playground.jsx";
 
 /**
- * 
- * @param {Object} props 
+ *
+ * @param {Object} props
  * @param {Object} props.appData Data passed to the application.
  * @param {("AutodeskStaging"|"AutodeskProduction")} props.appData.env Forge API environment
  * @param {string} props.appData.docUrn Document URN of model
@@ -58,6 +59,9 @@ function App(props) {
                 <Route path="/app">
                     <CustomPage {...props} />
                 </Route>
+                <Route path="/playground">
+                    <Playground {...props} />
+                </Route>
                 <Route path="/">
                     <ReferenceApp {...props} />
                 </Route>

client/pages/CustomPage.jsx

@@ -4,11 +4,7 @@ import React from "react";
  * An interface file to allow customers to have their custom built application page.
  */
 function CustomPage() {
-
-    return (
-        <div id='customPage'>
-        </div>
-    );
+    return <div id="customPage"></div>;
 }
 
 export default CustomPage;