Frontend - 3D View, Data view and bugs (#392)

amosproj · Jul 13, 2024 · 0ea60a5 · 0ea60a5
2 parents 3d29d11 + 4b6dae1
commit 0ea60a5
Show file tree

Hide file tree

Showing 23 changed files with 833 additions and 460 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -33,13 +33,17 @@
     "proj4leaflet": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-leaflet": "^4.2.1"
+    "react-leaflet": "^4.2.1",
+    "three": "^0.166.1",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.12",
     "@types/node": "^20.12.12",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@types/three": "^0.166.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -2,7 +2,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%; 
+  width: 100%;
   height: 100%;
   overflow: hidden;
 }
@@ -12,30 +12,35 @@
   overflow: hidden;
   height: 100%;
   position: relative;
+  padding: 0.6rem;
 }
 
 .multi-map {
   position: relative;
   width: 50%;
-  transition: width 0.5s; 
-  padding-top: 10px;
-  padding-left: 0px;
-  padding-bottom: 10px;
+  transition: width 0.5s;
+}
+
+.multimap-container {
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-right: 10px;
+  position: relative;
 }
 
 .data-view {
   width: 50%;
   position: relative;
-  transition: width 0.5s; 
+  transition: width 0.5s;
   overflow: hidden;
   box-sizing: border-box;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-right:10px;
 }
 
 .hidden {
-  width: 0; 
+  width: 0;
   overflow: hidden;
   padding: 0px;
 }
@@ -44,21 +49,14 @@
   width: 100%;
 }
 
-.multimap-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  height: 100%;
-}
-
-.toggle-button {
+.toggle-data-view-button {
   position: absolute;
   z-index: 5;
-  top: 13px; 
-  right: 0px; 
-  align-self: end; 
+  top: 7px;
+  right: 0px;
+  align-self: end;
   padding: 0;
-  padding-top:3px;
+  padding-top: 3px;
   align-items: center;
   justify-content: center;
   min-width: 2rem;
@@ -82,4 +80,4 @@
 .toggle-button:focus {
   color: black;
   border-color: black;
-}
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -11,13 +11,12 @@ import { TabsContext } from "./contexts/TabsContext";
 import MainMenu from "./components/MainMenu/MainMenu";
 import ErrorAlert from "./components/Alerts/ErrorAlert";
 
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from "@mui/material/Tooltip";
 import { CaretDoubleLeft, CaretDoubleRight } from "@phosphor-icons/react";
 
 import { MapContext } from "./contexts/MapContext";
 
 function App() {
-
   const { currentMapCache } = useContext(MapContext);
 
   const { currentTabsCache } = useContext(TabsContext);
@@ -27,7 +26,9 @@ function App() {
   const toggleDataView = () => {
     setDataViewVisible((prevVisible) => !prevVisible);
     const { mapInstance } = currentMapCache;
-    setTimeout(function(){ mapInstance?.invalidateSize()}, 400);
+    setTimeout(function () {
+      mapInstance?.invalidateSize();
+    }, 400);
   };
 
   return (
@@ -37,24 +38,30 @@ function App() {
       ) : (
         <Fragment>
           <div className="content-container">
-          <div className={`multi-map ${!dataViewVisible ? "full-width" : ""}`}>
-          <div className="multimap-container">
-
-          <Tooltip title={dataViewVisible ? "Hide Data View" : "Show Data View"} arrow>
-                  <button onClick={toggleDataView} className="toggle-button">
+            <div
+              className={`multi-map ${!dataViewVisible ? "full-width" : ""}`}
+            >
+              <div className="multimap-container">
+                <Tooltip
+                  title={dataViewVisible ? "Hide Data View" : "Show Data View"}
+                  arrow
+                >
+                  <button
+                    onClick={toggleDataView}
+                    className="toggle-data-view-button"
+                  >
                     {dataViewVisible ? (
-                      <CaretDoubleRight/>
+                      <CaretDoubleRight />
                     ) : (
                       <CaretDoubleLeft />
                     )}
                   </button>
                 </Tooltip>
-
-            <MultiMap />
-            </div>
+                <MultiMap />
+              </div>
             </div>
             <div className={`data-view ${!dataViewVisible ? "hidden" : ""}`}>
-            <DataView />
+              <DataView />
             </div>
           </div>
         </Fragment>

diff --git a/frontend/src/components/DataView/DataPanel.css b/frontend/src/components/DataView/DataPanel.css