Removed hardcoding of element id. (#537)

* Removed hardcoding of element id. - element that will contain the plot * Fix linting.
equinor · Sep 3, 2021 · 1382fac · 1382fac
1 parent 4e0679d
commit 1382fac
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/react/src/lib/components/GroupTree/components/GroupTreeComponent.tsx b/react/src/lib/components/GroupTree/components/GroupTreeComponent.tsx
@@ -21,7 +21,7 @@ const GroupTreeComponent: React.FC<Props> = React.memo(
     ({ id, data }: Props) => {
         return (
             <DataProvider id={id} data={data}>
-                <GroupTreeViewer />
+                <GroupTreeViewer id={id} />
             </DataProvider>
         );
     }

diff --git a/react/src/lib/components/GroupTree/components/GroupTreeViewer.tsx b/react/src/lib/components/GroupTree/components/GroupTreeViewer.tsx
@@ -20,7 +20,11 @@ const useStyles = makeStyles(() =>
     })
 );
 
-const GroupTreeViewer: React.FC = () => {
+interface Props {
+    id: string;
+}
+
+const GroupTreeViewer: React.FC<Props> = ({ id }: Props) => {
     const classes = useStyles();
     const divRef = useRef<HTMLDivElement>(null);
     const data = useContext(DataContext);
@@ -35,13 +39,13 @@ const GroupTreeViewer: React.FC = () => {
     );
     useEffect(() => {
         // Clear possible elements added from earlier updates.
-        const node = document.getElementById("grouptree_tree");
+        const node = document.getElementById(id);
         if (node) {
             node.innerHTML = "";
         }
 
         renderer.current = new GroupTree(
-            "#grouptree_tree",
+            id,
             cloneDeep(data),
             "oilrate",
             currentDateTime
@@ -62,7 +66,7 @@ const GroupTreeViewer: React.FC = () => {
     return (
         <div className={classes.root}>
             <SettingsBar />
-            <div id="grouptree_tree" ref={divRef} />
+            <div id={id} ref={divRef} />
             {/* <GroupTreePlot root={root} currentFlowRate={currentFlowRate} /> */}
         </div>
     );

diff --git a/react/src/lib/components/GroupTree/components/Plot/group_tree.js b/react/src/lib/components/GroupTree/components/Plot/group_tree.js
@@ -26,6 +26,11 @@ export default class GroupTree {
      * @param defaultFlowrate
      */
     constructor(dom_element_id, tree_data, defaultFlowrate, currentDateTime) {
+        // Add "#" if missing.
+        if (dom_element_id.charAt(0) !== "#") {
+            dom_element_id = "#" + dom_element_id;
+        }
+
         this._currentFlowrate = defaultFlowrate;
         this._currentDateTime = currentDateTime;
         this._transitionTime = 200;