Benchmarking Data Popup (#41)

* working popup

* separate into 2 components

* formatting

* add comments

Author: leongmichael

client/src/components/Benchmarking.js

@@ -1,20 +1,15 @@
 import React, { useState, useEffect } from "react";
 import DeckGL from "@deck.gl/react";
-import { LineLayer } from "@deck.gl/layers";
-import { GeoJsonLayer } from "deck.gl";
 import { Map } from "react-map-gl";
-import mapbox_token from "./mapbox_token.js";
 import { IconLayer } from "@deck.gl/layers";
 import axios from "axios";
-import { Button } from "@mui/material";
-
-import { useNavigate } from "react-router-dom";
+import mapbox_token from "./mapbox_token.js";
+import BenchmarkingData from "./BenchmarkingData.js";
 
 const MAPBOX_ACCESS_TOKEN = mapbox_token;
 const MAP_STYLE =
   "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
 
-// Viewport settings
 const INITIAL_VIEW_STATE = {
   longitude: -111,
   latitude: 33,
@@ -24,7 +19,6 @@ const INITIAL_VIEW_STATE = {
   bearing: 0,
 };
 
-// retrieve benchmarking collection data from database
 const getBenchmarkingCollection = async () => {
   try {
     const response = await axios.get(
@@ -44,10 +38,12 @@ const getBenchmarkingCollection = async () => {
 };
 
 // https://deck.gl/docs/api-reference/layers/icon-layer
-export default function Benchmarking() {
-  let navigate = useNavigate(); // navigate to diff pages
 
-  const [benchmarkingData, setBenchmarkingData] = useState();
+export default function Benchmarking() {
+  const [benchmarkingData, setBenchmarkingData] = useState([]);
+  const [selectedSite, setSelectedSite] = useState(null);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [model, setModel] = useState("regressionBaseline");
 
   useEffect(() => {
     getBenchmarkingCollection().then((data) => {
@@ -57,12 +53,15 @@ export default function Benchmarking() {
 
   const onClick = (info) => {
     if (info.object) {
-      const siteID = info.object.siteID;
-      // Use the navigate function to go to a new page with the siteID parameter
-      navigate(`/benchmarking/${siteID}`);
+      setSelectedSite(info.object);
+      setIsPanelOpen(true);
     }
   };
 
+  const chooseModel = (event) => {
+    setModel(event.target.value);
+  };
+
   const ICON_MAPPING = {
     marker: { x: 0, y: 0, width: 120, height: 120, mask: true },
   };
@@ -71,34 +70,74 @@ export default function Benchmarking() {
     id: "icon-layer",
     data: benchmarkingData,
     pickable: true,
-    // iconAtlas and iconMapping are required
-    // getIcon: return a string
     iconAtlas:
       "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png",
     iconMapping: ICON_MAPPING,
+    // iconAtlas and iconMapping are required
+    // getIcon: return a string
     getIcon: (d) => "marker",
-
     sizeScale: 6,
     getPosition: (d) => d.coordinates,
     getSize: (d) => 5,
     getColor: (d) => [Math.sqrt(d.exits), 140, 0],
   });
 
   return (
-    <DeckGL
-      initialViewState={INITIAL_VIEW_STATE}
-      controller={true}
-      layers={[layers]}
-      getTooltip={({ object }) =>
-        object &&
-        `${object.siteInfo.city}, ${object.siteInfo.state} \
-        \nSite ID: ${object.siteID} \
-        \nDOE Climate Zone: ${object.siteInfo.doe_climate_zone}
-        \n Click for detailed information`
-      }
-      onClick={onClick}
-    >
-      <Map mapStyle={MAP_STYLE} mapboxAccessToken={MAPBOX_ACCESS_TOKEN} />
-    </DeckGL>
+    <div style={{ position: "relative", height: "100vh", width: "100%" }}>
+      <DeckGL
+        initialViewState={INITIAL_VIEW_STATE}
+        controller={true}
+        layers={[layers]}
+        getTooltip={({ object }) =>
+          object &&
+          `${object.siteInfo.city}, ${object.siteInfo.state}
+          \nSite ID: ${object.siteID}
+          \nDOE Climate Zone: ${object.siteInfo.doe_climate_zone}
+          \n Click for detailed information`
+        }
+        onClick={onClick}
+      >
+        <Map mapStyle={MAP_STYLE} mapboxAccessToken={MAPBOX_ACCESS_TOKEN} />
+      </DeckGL>
+
+      {isPanelOpen && selectedSite && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "60%", // popup window height
+            backgroundColor: "white",
+            padding: "20px",
+            boxShadow: "0 -2px 10px rgba(0, 0, 0, 0.1)",
+            overflowY: "auto",
+            transition: "transform 0.3s ease-out",
+            transform: isPanelOpen ? "translateY(0)" : "translateY(100%)",
+          }}
+        >
+          <button
+            onClick={() => setIsPanelOpen(false)}
+            style={{
+              position: "absolute",
+              top: "10px",
+              right: "10px",
+              background: "none",
+              border: "none",
+              fontSize: "1.5em",
+              cursor: "pointer",
+            }}
+          >
+            &times;
+          </button>
+
+          <BenchmarkingData
+            selectedSite={selectedSite}
+            model={model}
+            chooseModel={chooseModel}
+          />
+        </div>
+      )}
+    </div>
   );
 }