Adding support for overriding styles.

Author: harshita-adsk

client/components/BaseApp.jsx

@@ -25,7 +25,7 @@ import Viewer from "./Viewer.jsx";
 import CustomToolTip from "./CustomToolTip.jsx";
 import DataPanelContainer from "./DataPanelContainer.jsx";
 import HyperionToolContainer from "./HyperionToolContainer.jsx";
-import { SpriteSize, SensorStyleDefinitions, PropIdGradientMap } from "../config/SensorStyles.js";
+import { SpriteSize, SensorStyleDefinitions, PropIdGradientMap, PropertyIconMap } from "../config/SensorStyles.js";
 import adskLogoSvg from "../../assets/images/autodesk-logo.svg";
 import ChronosTimeSlider from "./ChronosTimeSlider.jsx";
 import BasicDatePicker from "./BasicDatePicker.jsx";
@@ -815,9 +815,9 @@ export default function BaseApp(props) {
     }
 
     /**
-     * Uses the application based on user changes to the {@link SurfaceShader} component.
+     * Uses the application based on user changes to the {@link HeatmapOptions} component.
      * 
-     * @param {Object} options Settings defined in the {@link SurfaceShader}.
+     * @param {Object} options Settings defined in the {@link HeatmapOptions}.
      * @private
      */
     function onHeatmapOptionChange(options) {
@@ -1129,7 +1129,7 @@ export default function BaseApp(props) {
 
     return (
         <React.Fragment>
-            <div id="main_header" style={{ display: "flex", backgroundColor: "#474747" }}>
+            <div id="main_header">
                 <ChronosTimeSlider
                     rangeStart={startRange.toISOString()}
                     rangeEnd={endRange.toISOString()}
@@ -1157,7 +1157,7 @@ export default function BaseApp(props) {
                     onViewerInitialized={onViewerInitialized}
                     onModelLoaded={onModelLoaded}
                     getToken={getToken}
-                    extensions={{ "Autodesk.Viewing.ZoomWindow": {}, "Autodesk.DataVisualization": { useInternal: true } }}
+                    extensions={{ "Autodesk.Viewing.ZoomWindow": {}, "Autodesk.DataVisualization": {} }}
                     geomIndex={props.geomIndex}
                 />
             </div>
@@ -1189,18 +1189,14 @@ export default function BaseApp(props) {
                     devices={props.data.devicePanelData}
                     onNodeSelected={onNodeSelected}
                     onNavigateBack={navigateBackToDevices}
-                    propertyIconMap={props.propertyIconMap}
+                    propertyIconMap={props.propertyIconMap ? props.propertyIconMap : PropertyIconMap}
                     selectedGroupNode={selectedGroupNode}
                     currentDeviceData={currentDeviceDataRef.current}
                     chartData={chartDataRef.current}
                     eventBus={props.eventBus}
                 />
             )}
-            <img
-                className="logo"
-                src={adskLogoSvg}
-                style={{ width: "9%", bottom: "22px", position: "absolute", zIndex: 2, left: "15px", opacity: 0.85 }}
-            ></img>
+            <img className="logo" src={adskLogoSvg} alt="Autodesk Logo" />
         </React.Fragment>
     );
 }

client/components/BasicTree.jsx

@@ -18,6 +18,7 @@ import TreeView from "@material-ui/lab/TreeView";
 import ArrowRightIcon from "@material-ui/icons/ArrowRight";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import TreeItem from "@material-ui/lab/TreeItem";
+import { withStyles } from "@material-ui/core/styles";
 
 /**
  * A basic tree structure component.
@@ -32,23 +33,20 @@ import TreeItem from "@material-ui/lab/TreeItem";
  * @param {OnMouseEvent} props.onLabelClick Function to be invoked when a label is clicked
  * @param {OnMouseEvent} props.onMouseOver Function to be invoked on the mouseover of a {@link TreeNode}
  * @param {OnMouseEvent} props.onMouseOut Function to be invoked when the mouse hovers off a {@link TreeNode}.
- * @param {Object} props.classes Material UI Styles object applied to a {@link TreeNode}. See {@link https://material-ui.com/api/tree-item/#css} for structure.
- * @param {Object} [props.classes.root] 
- * @param {Object} [props.classes.selected]
- * @param {Object} [props.classes.group]
- * @param {Object} [props.classes.categoryContent] Content styles applied applied to a {@link TreeNode} with children.
- * @param {Object} [props.classes.itemContent] Content styles applied to a {@link TreeNode} without children.
- * @param {Object} [props.classes.categoryLabel] Label styles applied to a {@link TreeNode} with children.
- * @param {Object} [props.classes.itemLabel] Label styles applied to a {@link TreeNode} without children.
- * @param {Object} [props.classes.iconContainer]
+ * @param {Object} [props.styles]
+ * @param {Object} [props.styles.treeNode] Material UI styles to apply to {@link TreeNode} with children. See https://material-ui.com/api/tree-item/#css
+ * @param {Object} [props.styles.leafNode] Material UI styles to apply to {@link TreeNode} without children. See https://material-ui.com/api/tree-item/#css
  *
  * @memberof Autodesk.DataVisualization.UI
  * @alias Autodesk.DataVisualization.UI.BasicTree
  */
 export default function BasicTree(props) {
+    const TreeNodeItem = withStyles(() => (props.styles ? props.styles.treeNode : {}))(TreeItem);
+    const LeafNodeItem = withStyles(() => (props.styles ? props.styles.leafNode : {}))(TreeItem);
+
     /**
      * Calls the corresponding handler with data if found.
-     * 
+     *
      * @param {string} handlerName Name of event handler.
      * @param {TreeNode} data Node that triggered event.
      * @private
@@ -61,8 +59,6 @@ export default function BasicTree(props) {
         };
     }
 
-    const classes = props.classes;
-
     /**
      *
      * @param {Object} node Represents a node in props.data
@@ -79,10 +75,10 @@ export default function BasicTree(props) {
 
     /**
      * Finds a path from the root of the tree to the target {@link TreeNode}.
-     * 
+     *
      * @param {TreeNode[]} tree Tree of device {@link TreeNode} in the scene.
      * @param {string} goal Id of {@link TreeNode}
-     * @returns {string[]} An array of node identifiers representing the path from root to goal. Returns [] if a path to the 
+     * @returns {string[]} An array of node identifiers representing the path from root to goal. Returns [] if a path to the
      *  {@link TreeNode} cannot be found.
      * @private
      */
@@ -112,30 +108,35 @@ export default function BasicTree(props) {
      * @param {TreeNode} node Represents a node in props.data
      * @private
      */
-    const renderTree = (node) => (
-        <TreeItem
-            classes={{
-                root: classes.root,
-                selected: classes.selected,
-                group: classes.group,
-                content: node.children.length > 0 ? classes.categoryContent : classes.itemContent,
-                label: node.children.length > 0 ? classes.categoryLabel : classes.itemLabel,
-                iconContainer: classes.iconContainer,
-            }}
-            key={node.id}
-            nodeId={node.id.toString()}
-            onMouseOver={onEvent("onMouseOver", node)}
-            onMouseOut={onEvent("onMouseOut", node)}
-            onLabelClick={onEvent("onLabelClick", node)}
-            onIconClick={onEvent("onIconClick", node)}
-            label={props.onLabelRequest(node)}
-        >
-            {
-                // Render only child nodes of the expanded node.
-                getChildNodes(node).map((child) => renderTree(child))
-            }
-        </TreeItem>
-    );
+    const renderTree = (node) => {
+        if (node.children.length > 0) {
+            return (
+                <TreeNodeItem
+                    key={node.id}
+                    nodeId={node.id.toString()}
+                    onMouseOver={onEvent("onMouseOver", node)}
+                    onMouseOut={onEvent("onMouseOut", node)}
+                    onLabelClick={onEvent("onLabelClick", node)}
+                    onIconClick={onEvent("onIconClick", node)}
+                    label={props.onLabelRequest(node)}
+                >
+                    {getChildNodes(node).map((child) => renderTree(child))}
+                </TreeNodeItem>
+            );
+        } else {
+            return (
+                <LeafNodeItem
+                    key={node.id}
+                    nodeId={node.id.toString()}
+                    onMouseOver={onEvent("onMouseOver", node)}
+                    onMouseOut={onEvent("onMouseOut", node)}
+                    onLabelClick={onEvent("onLabelClick", node)}
+                    onIconClick={onEvent("onIconClick", node)}
+                    label={props.onLabelRequest(node)}
+                />
+            );
+        }
+    };
 
     return (
         <TreeView
@@ -148,4 +149,3 @@ export default function BasicTree(props) {
         </TreeView>
     );
 }
-

client/components/ChronosTimeSlider.jsx

@@ -31,6 +31,7 @@ import { TimeSlider } from "chronos-etu";
  * @param {HandleCurrTimeUpdated} props.onCurrTimeUpdated A callback
  *  handler invoked when the current time marker is updated without
  *  changing the time selection.
+ * @param {Object} [props.styles] Styles to apply to TimeSlider container.
  *
  * @memberof Autodesk.DataVisualization.UI
  * @alias Autodesk.DataVisualization.UI.ChronosTimeSlider
@@ -42,11 +43,10 @@ function ChronosTimeSlider(props) {
     const [timeSelectionId, setTimeselectionId] = useState(null);
     const containerRef = useRef();
 
-    const cntrStyle = {
+    const cntrStyle = Object.assign({}, {
         height: "120px",
-        backgroundColor: "gray",
         width: "75%",
-    };
+    }, props.styles);
 
     /**
      * Creates a timeline selection for the provided Date range.

client/components/CustomToolTip.jsx

@@ -15,35 +15,12 @@
 //
 import React from "react";
 import Tooltip from "@material-ui/core/Tooltip";
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from "@material-ui/core/CircularProgress";
 import DataChart from "../components/DataChart.jsx";
-import { withStyles, makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
+import * as _ from "lodash";
 // eslint-disable-next-line no-unused-vars
 
-const HtmlTooltip = withStyles(() => ({
-    tooltip: {
-        backgroundColor: "#373737",
-        fontSize: "12px",
-        padding: "0px",
-        paddingTop: "2px",
-        paddingBottom: "3px",
-        margin: "0px",
-    },
-    arrow: {
-        color: "#373737",
-        marginBottom: "0px",
-        fontSize: "20px",
-    },
-}))(Tooltip);
-
-const loadingIconStyles = makeStyles({
-    loadingIcon: {
-        display: "block",
-        margin: "auto",
-        padding: "5px"
-    }
-});
-
 /**
  * A custom tool-tip that is displayed over Forge Viewer canvas when a user hovers over a device. Contains a {@link DataChart} for each property along with the estimated current property value.
  * @component
@@ -54,46 +31,50 @@ const loadingIconStyles = makeStyles({
  * @param {ChartData} props.chartData Data used to generate charts for each property associated with props.hoveredDeviceInfo
  * @param {CurrentDeviceData} props.currentDeviceData Data containing the estimated propertyValue for each property
  *  associated with props.hoveredDeviceInfo
+ * @param {Object} props.styles Material UI styles to apply to the Tooltip component. See https://material-ui.com/api/tooltip/#css
  *
  * @memberof Autodesk.DataVisualization.UI
  * @alias Autodesk.DataVisualization.UI.CustomToolTip
  */
 function CustomToolTip(props) {
-    const classes = loadingIconStyles();
-
     if (props.hoveredDeviceInfo.id) {
         const chartData = props.chartData[props.hoveredDeviceInfo.id];
-        const deviceName = chartData ? chartData.name : <CircularProgress color="secondary" size={30} classes={{ root: classes.loadingIcon }} />;
+        const deviceName = chartData ? chartData.name : <CircularProgress className="tooltip-loading-icon" color="secondary" size={30} />;
         const properties = chartData ? Object.keys(chartData["properties"]) : [];
 
         const currentDeviceData = props.currentDeviceData[props.hoveredDeviceInfo.id];
 
+        const useStyles = makeStyles(
+            _.merge(
+                {
+                    tooltip: {
+                        backgroundColor: "#373737",
+                        fontSize: "12px",
+                        padding: "0px",
+                        paddingTop: "2px",
+                        paddingBottom: "3px",
+                        margin: "0px",
+                    },
+                    arrow: {
+                        color: "#373737",
+                        marginBottom: "0px",
+                        fontSize: "20px",
+                    },
+                },
+                props.styles
+            )
+        );
+
+        const classes = useStyles();
+
         return (
-            <HtmlTooltip
+            <Tooltip
                 title={
                     <React.Fragment>
-                        <span
-                            style={{
-                                display: "flex",
-                                justifyContent: "center",
-                                fontWeight: "bold",
-                                fontSize: "12px",
-                                paddingTop: "1px",
-                                paddingBottom: "3px",
-                            }}
-                        >
-                            {deviceName}
-                        </span>
-
+                        <span className="tooltip-device-name">{deviceName}</span>
                         {properties.map((property) => (
                             <React.Fragment key={`${props.hoveredDeviceInfo.id}-${property}`}>
-                                <span
-                                    style={{
-                                        fontSize: "13px",
-                                        display: "flex",
-                                        justifyContent: "center",
-                                    }}
-                                >
+                                <span className="tooltip-property-val">
                                     {currentDeviceData ? currentDeviceData[property] : ""}
                                 </span>
                                 <DataChart
@@ -110,17 +91,16 @@ function CustomToolTip(props) {
                 arrow={true}
                 placement="top"
                 open={Boolean(props.hoveredDeviceInfo.id)}
+                classes={classes}
             >
                 <span
-                    id="tooltip"
+                    className="tooltip"
                     style={{
-                        position: "absolute",
                         left: `${props.hoveredDeviceInfo.xcoord}px`,
                         top: `${props.hoveredDeviceInfo.ycoord - 2}px`,
-                        zIndex: 2,
                     }}
                 ></span>
-            </HtmlTooltip>
+            </Tooltip>
         );
     }