Merge pull request #95 from RENCI/checkbox-issues

pushing up latest changes to graph and hurricane layers
RENCI · Feb 27, 2024 · 143e33d · 143e33d
2 parents 260188c + 894fa38
commit 143e33d
Show file tree

Hide file tree

Showing 10 changed files with 1,009 additions and 137 deletions.
diff --git a/compose-dev.yaml b/compose-dev.yaml
@@ -0,0 +1,11 @@
+services:
+  app:
+    entrypoint:
+      - sleep
+      - infinity
+    image: docker/dev-environments-javascript:stable-1
+    init: true
+    volumes:
+      - type: bind
+        source: /var/run/docker.sock
+        target: /var/run/docker.sock
diff --git a/lib/custom-ui/components/drawer/drawer.js b/lib/custom-ui/components/drawer/drawer.js
@@ -14,7 +14,7 @@ import { useLayers } from "../../context";
 import { observer } from "mobx-react";
 
 const TOGGLER_HEIGHT = "2rem";
-const DRAWER_MAX_HEIGHT = "360px";
+const DRAWER_MAX_HEIGHT = "460px";
 
 observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>);
 

diff --git a/lib/custom-ui/components/drawer/layer-details/active-layer-details.js b/lib/custom-ui/components/drawer/layer-details/active-layer-details.js
@@ -9,6 +9,7 @@ import { useLayers } from "../../../context";
 import { ConfigTab, DetailsTab, GraphTab } from "./tabs";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import React from "react";
+import { useLayout } from "../../layout";
 
 function a11yProps(id) {
   return {
@@ -18,7 +19,9 @@ function a11yProps(id) {
 }
 
 export const ActiveLayerDetails = ({ viewState, terria }) => {
-  const { activatedLayer, currentTabIndex, setCurrentTabIndex } = useLayers();
+  const { activatedLayer, currentTabIndex, setCurrentTabIndex, chartItems } =
+    useLayers();
+  const { drawerIsOpen } = useLayout();
 
   const TABS = [
     {
@@ -36,6 +39,8 @@ export const ActiveLayerDetails = ({ viewState, terria }) => {
           terria={terria}
           viewState={viewState}
           activatedLayer={activatedLayer}
+          drawerIsOpen={drawerIsOpen}
+          chartItems={chartItems}
         />
       )
     },

diff --git a/lib/custom-ui/components/drawer/layer-details/tabs/graph-tab.js b/lib/custom-ui/components/drawer/layer-details/tabs/graph-tab.js
@@ -1,13 +1,18 @@
 import { Box } from "@mui/material";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ChartPanel from "terriajs/lib/ReactViews/Custom/Chart/ChartPanel";
 import ChartView from "terriajs/lib/Charts/ChartView";
 import Checkbox from "@mui/material/Checkbox";
+import { useLayers } from "../../../../context";
+import Legend from "terriajs/lib/ReactViews/Workbench/Controls/Legend";
+import ChartItemSelector from "terriajs/lib/ReactViews/Workbench/Controls/ChartItemSelector";
 
 const label = { inputProps: { "aria-label": "Checkbox" } };
 
 export const ChartItem = ({ chartItem }) => {
-  const [shouldSelect, setShouldSelect] = useState(true);
+  const [shouldSelect, setShouldSelect] = useState(
+    chartItem.isSelectedInWorkbench
+  );
   const lineColor = shouldSelect ? chartItem.getColor() : "#fff";
 
   const toggleActive = () => {
@@ -42,12 +47,17 @@ export const ChartItem = ({ chartItem }) => {
   );
 };
 
-export const GraphTab = ({ viewState, terria }) => {
-  const chartView = new ChartView(viewState.terria.workbench.items[0].terria);
-  const chartItems = chartView.chartItems;
+export const GraphTab = ({ viewState, terria, chartItems }) => {
+  const { setChartItems } = useLayers();
+  const chartView = new ChartView(terria);
+  const chartItems2 = chartView.chartItems;
+
+  useEffect(() => {
+    setChartItems(chartItems2);
+  }, []);
 
   return (
-    <Box sx={{ height: "294px", overflow: "auto" }}>
+    <Box sx={{ height: "400px", overflow: "auto" }}>
       {chartItems.length > 0 && (
         <h1
           style={{

diff --git a/lib/custom-ui/components/drawer/layers-list/layer-card.js b/lib/custom-ui/components/drawer/layers-list/layer-card.js
@@ -42,6 +42,7 @@ export const LayerCard = ({
     layerIsSelected
   } = useLayers();
   const [checked, setChecked] = React.useState(false);
+  const [ch, setCh] = React.useState(true);
   setAddHurricaneLayers(true);
 
   // convert the product type to a readable layer name
@@ -68,17 +69,37 @@ export const LayerCard = ({
   const currentlyActive = useMemo(() => id === activeLayerId, [activeLayerId]);
 
   useEffect(() => {
-    let newArr = checkedLayers.filter((o) => o.id !== id);
+    // if (checkedLayers.includes(layer) == false) {
+    // console.log(layer)
+    // let newArr = checkedLayers.filter((o) => o.id !== id);
 
-    setCheckedLayers([
-      ...newArr,
-      {
-        id: id,
-        delete: handleRemoveLayer,
-        checked: false,
-        setChecked: setChecked
-      }
-    ]);
+    // setCheckedLayers([
+    //   ...newArr,
+    //   {
+    //     id: id,
+    //     delete: handleRemoveLayer,
+    //     checked: checked,
+    //     setChecked: setChecked
+    //   }
+    // ]);
+    if (ch) {
+      console.log(Math.random() + Math.random());
+      setCheckedLayers([
+        ...checkedLayers,
+        {
+          id: Math.random() + Math.random(),
+          delete: handleRemoveLayer,
+          checked: checked,
+          setChecked: setChecked
+        }
+      ]);
+      setCh(false);
+      console.log(checkedLayers);
+    }
+
+    // }
+
+    // handleChange({ target: { checked: false } })
   }, []);
 
   // This function removes the layer from the workbench/map and from the context to sync the changes to the UI

diff --git a/lib/custom-ui/components/drawer/layers-list/layers-list.js b/lib/custom-ui/components/drawer/layers-list/layers-list.js
@@ -20,20 +20,44 @@ export const LayersList = ({ viewState, terria }) => {
   const [checked, setChecked] = React.useState(false);
   const [disableDelete, setDisableDelete] = React.useState(true);
   const [addHurricaneLayers, setAddHurricaneLayers] = React.useState(true);
+  const [clearGraph, setClearGraph] = React.useState("");
+  const [hurricaneLayers, setHurricaneLayers] = React.useState([]);
 
   useEffect(() => {
-    let csvLayers = viewState.terria.workbench.items.map((layer) => {
-      if (layer.type === "csv") {
-        return layer;
-      }
-    });
-    csvLayers.forEach((layer, i) => {
-      if (i > 0) {
-        viewState.terria.workbench.remove(layer);
-      }
-    });
+    const csvType = viewState.terria.workbench.items.find(
+      (element) => element.type == "csv"
+    );
+    if (clearGraph !== csvType) {
+      // Used to clear the old plot point from the graph
+      let csvLayers = viewState.terria.workbench.items.map((layer) => {
+        if (layer.type === "csv") {
+          return layer;
+        }
+      });
+      csvLayers.forEach((layer, i) => {
+        if (i > 0) {
+          viewState.terria.workbench.remove(layer);
+        }
+      });
+      setClearGraph(csvType);
+    }
   }, [viewState.terria.workbench.items]);
 
+  // useEffect(() => {
+  //   viewState.terria.workbench.items.map(item=>{
+  //     let newArr = checkedLayers.filter((o) => o.id !== item.id);
+
+  //     setCheckedLayers([
+  //       ...newArr,
+  //       {
+  //         id: item.id,
+  //         checked: false
+  //       }
+  //     ]);
+  //   })
+
+  // }, [viewState.terria.workbench.items]);
+
   useEffect(
     () => {
       // add any hurricane layers associated with
@@ -58,6 +82,7 @@ export const LayersList = ({ viewState, terria }) => {
   );
 
   const handleSelectAll = (e) => {
+    console.log(checkedLayers);
     if (checked === false) {
       setChecked(true);
       setDisableDelete(false);
@@ -119,7 +144,7 @@ export const LayersList = ({ viewState, terria }) => {
             {...provided.droppableProps}
             ref={provided.innerRef}
           >
-            <div
+            {/* <div
               style={{
                 display: "flex",
                 "justify-content": "start",
@@ -150,13 +175,13 @@ export const LayersList = ({ viewState, terria }) => {
               >
                 <DeleteIcon />
               </Button>
-            </div>
+            </div> */}
             {viewState.terria &&
               viewState.terria.workbench.items.map(
                 (layer, index) =>
                   layer.type !== "csv" && (
                     <Draggable
-                      key={layer.uniqueId}
+                      key={layer.uniqueId + index}
                       draggableId={layer.uniqueId}
                       index={index}
                     >