From 06edb481e91758f6a832171b8aa23bd981aea1d7 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 21 Jul 2025 11:33:44 -0700 Subject: [PATCH 1/5] Restructure file system to seperate Sidebar, Header, and Canvas components --- client/src/App.jsx | 8 ++++---- .../{ => layout/Canvas}/CanvasHeader.jsx | 6 +++--- .../{ => layout/Canvas}/CanvasHeaderNav.jsx | 0 .../components/{ => layout/Canvas}/SearchBar.jsx | 0 .../{ => layout/Canvas}/SettingsButton.jsx | 0 .../src/components/{ => layout/Canvas}/Widget.jsx | 0 .../components/layout/Canvas/views/AdminCanvas.jsx | 0 .../components/layout/Canvas/views/MapCanvas.jsx | 0 .../layout/Canvas/views/WidgetCanvas.jsx | 0 .../src/components/{ => layout/Header}/Header.jsx | 14 ++++++++------ .../{ => layout/Header}/UserAvatarMenu.jsx | 0 .../components/{ => layout/Sidebar}/Sidebar.jsx | 0 12 files changed, 15 insertions(+), 13 deletions(-) rename client/src/components/{ => layout/Canvas}/CanvasHeader.jsx (84%) rename client/src/components/{ => layout/Canvas}/CanvasHeaderNav.jsx (100%) rename client/src/components/{ => layout/Canvas}/SearchBar.jsx (100%) rename client/src/components/{ => layout/Canvas}/SettingsButton.jsx (100%) rename client/src/components/{ => layout/Canvas}/Widget.jsx (100%) create mode 100644 client/src/components/layout/Canvas/views/AdminCanvas.jsx create mode 100644 client/src/components/layout/Canvas/views/MapCanvas.jsx create mode 100644 client/src/components/layout/Canvas/views/WidgetCanvas.jsx rename client/src/components/{ => layout/Header}/Header.jsx (89%) rename client/src/components/{ => layout/Header}/UserAvatarMenu.jsx (100%) rename client/src/components/{ => layout/Sidebar}/Sidebar.jsx (100%) diff --git a/client/src/App.jsx b/client/src/App.jsx index cad1a7d..33e47ac 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,9 +1,9 @@ import { useState } from 'react' -import Header from './components/header.jsx'; -import Sidebar from './components/sidebar.jsx'; -import Widget from './components/Widget.jsx' +import Header from './components/layout/Header/Header.jsx'; +import Sidebar from './components/layout/Sidebar/Sidebar.jsx'; +import Widget from './components/layout/Canvas/Widget.jsx' import { Grid, GridItem, useRecipe } from "@chakra-ui/react" -import CanvasHeader from './components/CanvasHeader.jsx' +import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx' function App() { diff --git a/client/src/components/CanvasHeader.jsx b/client/src/components/layout/Canvas/CanvasHeader.jsx similarity index 84% rename from client/src/components/CanvasHeader.jsx rename to client/src/components/layout/Canvas/CanvasHeader.jsx index 57ff277..08a61cc 100644 --- a/client/src/components/CanvasHeader.jsx +++ b/client/src/components/layout/Canvas/CanvasHeader.jsx @@ -1,7 +1,7 @@ import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react"; -import { CanvasHeaderNav } from "./CanvasHeaderNav"; -import { SearchBar } from "./SearchBar"; -import { SettingsButton } from "./SettingsButton"; +import { CanvasHeaderNav } from "./CanvasHeaderNav.jsx"; +import { SearchBar } from "./SearchBar.jsx"; +import { SettingsButton } from "./SettingsButton.jsx"; diff --git a/client/src/components/CanvasHeaderNav.jsx b/client/src/components/layout/Canvas/CanvasHeaderNav.jsx similarity index 100% rename from client/src/components/CanvasHeaderNav.jsx rename to client/src/components/layout/Canvas/CanvasHeaderNav.jsx diff --git a/client/src/components/SearchBar.jsx b/client/src/components/layout/Canvas/SearchBar.jsx similarity index 100% rename from client/src/components/SearchBar.jsx rename to client/src/components/layout/Canvas/SearchBar.jsx diff --git a/client/src/components/SettingsButton.jsx b/client/src/components/layout/Canvas/SettingsButton.jsx similarity index 100% rename from client/src/components/SettingsButton.jsx rename to client/src/components/layout/Canvas/SettingsButton.jsx diff --git a/client/src/components/Widget.jsx b/client/src/components/layout/Canvas/Widget.jsx similarity index 100% rename from client/src/components/Widget.jsx rename to client/src/components/layout/Canvas/Widget.jsx diff --git a/client/src/components/layout/Canvas/views/AdminCanvas.jsx b/client/src/components/layout/Canvas/views/AdminCanvas.jsx new file mode 100644 index 0000000..e69de29 diff --git a/client/src/components/layout/Canvas/views/MapCanvas.jsx b/client/src/components/layout/Canvas/views/MapCanvas.jsx new file mode 100644 index 0000000..e69de29 diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx new file mode 100644 index 0000000..e69de29 diff --git a/client/src/components/Header.jsx b/client/src/components/layout/Header/Header.jsx similarity index 89% rename from client/src/components/Header.jsx rename to client/src/components/layout/Header/Header.jsx index a9ee737..d11f2d6 100644 --- a/client/src/components/Header.jsx +++ b/client/src/components/layout/Header/Header.jsx @@ -1,5 +1,12 @@ import { chakra, useRecipe, Box, Button, Stack, Text, Flex } from "@chakra-ui/react" -import UserAvatarMenu from "./UserAvatarMenu"; +import UserAvatarMenu from "./UserAvatarMenu.jsx"; + +//TODO: Dynamically populate per each user +const user = { + name: "venessa kuchenik", + email: "vkuchenik@contractor.usgs.gov", + // avatar: "src\\assets\\user_profile.svg" +} export default function Header() { const recipe = useRecipe({ key: "header" }); @@ -19,8 +26,3 @@ export default function Header() { ); } -const user = { - name: "venessa kuchenik", - email: "vkuchenik@contractor.usgs.gov", - // avatar: "src\\assets\\user_profile.svg" -} \ No newline at end of file diff --git a/client/src/components/UserAvatarMenu.jsx b/client/src/components/layout/Header/UserAvatarMenu.jsx similarity index 100% rename from client/src/components/UserAvatarMenu.jsx rename to client/src/components/layout/Header/UserAvatarMenu.jsx diff --git a/client/src/components/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx similarity index 100% rename from client/src/components/Sidebar.jsx rename to client/src/components/layout/Sidebar/Sidebar.jsx From a1f2fcc9be1f1883d19a28fc2f10da4162257023 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 21 Jul 2025 13:01:16 -0700 Subject: [PATCH 2/5] Refactor: moved Widget and CanvasHeader code into Canvas.jsx to handle both as a parent element --- client/src/App.jsx | 51 ++++--- .../src/components/layout/Canvas/Canvas.jsx | 45 +++++++ .../src/components/layout/Canvas/Widget.jsx | 127 ++++++++++-------- 3 files changed, 153 insertions(+), 70 deletions(-) create mode 100644 client/src/components/layout/Canvas/Canvas.jsx diff --git a/client/src/App.jsx b/client/src/App.jsx index 33e47ac..a2cbd81 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,15 +1,34 @@ import { useState } from 'react' import Header from './components/layout/Header/Header.jsx'; import Sidebar from './components/layout/Sidebar/Sidebar.jsx'; -import Widget from './components/layout/Canvas/Widget.jsx' -import { Grid, GridItem, useRecipe } from "@chakra-ui/react" -import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx' +import Canvas from './components/layout/Canvas/Canvas.jsx'; +import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react'; + +// REMOVE AFTER TESTING +import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx'; +import { GridLayout } from 'react-grid-layout'; function App() { const recipe = useRecipe({ key: "canvas" }); const styles = recipe(); + // TEST TEST TEST +// return ( +// +// {/* ← This should render something visible */} +// {/* +// {layout.map((item) => ( +//
+// +//
+// ))} +// */} +// +// ); +// } + + return ( - - - - - - - - + {/* */} + + + + {/* + + */} + {/* */} ); diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx new file mode 100644 index 0000000..06075a6 --- /dev/null +++ b/client/src/components/layout/Canvas/Canvas.jsx @@ -0,0 +1,45 @@ +// This component defines a generic Widget that can be dynamically resized and +// dragged inside the canvas +// Content not included, must be populated using custom charts plots and notifications +import { useState } from 'react'; +import CanvasHeader from './CanvasHeader'; +import GridLayout from 'react-grid-layout'; +import Widget from './Widget.jsx'; +import { Box } from '@chakra-ui/react'; + +export default function Canvas() { + // Define widgets initial position and size + // TODO Add dynamic adding/deleting of widgets via options button + const [layout, setLayout] = useState([ + { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false }, + { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false }, + { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false } + ]); + + const onLayoutChange = (newLayout) => { + setLayout(newLayout); + console.log('Updated layout:', newLayout) + }; + + return ( + + + + {layout.map((item) => ( +
+ +
+ ))} + + + ); +} diff --git a/client/src/components/layout/Canvas/Widget.jsx b/client/src/components/layout/Canvas/Widget.jsx index b3413ad..b012bba 100644 --- a/client/src/components/layout/Canvas/Widget.jsx +++ b/client/src/components/layout/Canvas/Widget.jsx @@ -1,57 +1,76 @@ -// This component defines a generic Widget that can be dynamically resized and -// dragged inside the canvas -// Content not included, must be populated using custom charts plots and notifications - -import { useState } from 'react'; -import GridLayout from 'react-grid-layout'; - -export default function Widget() { - // Define widgets initial position and size - // TODO Add dynamic adding/deleting of widgets via options button - const [layout, setLayout] = useState([ - { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false }, - { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false }, - { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false } - ]); - - const onLayoutChange = (newLayout) => { - setLayout(newLayout); - console.log('Updated layout:', newLayout) - }; - +// Widget.jsx +export default function Widget({ title }) { return ( - +
-
-
- VDAP Widget -
-
- This is the widget content - drag or resize me! -
-
-
- VDAP Widget -
-
- This is the widget content - drag or resize me! -
-
-
- VDAP Widget -
-
- This is the widget content - drag or resize me! -
-
- + {title} +
+
+ This is the widget content - drag or resize me! +
+ ); -} + } + +// The below code has been moved to Canvas.jsx + +// // This component defines a generic Widget that can be dynamically resized and +// // dragged inside the canvas +// // Content not included, must be populated using custom charts plots and notifications + +// import { useState } from 'react'; +// import GridLayout from 'react-grid-layout'; + +// export default function Widget() { +// // Define widgets initial position and size +// // TODO Add dynamic adding/deleting of widgets via options button +// const [layout, setLayout] = useState([ +// { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false }, +// { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false }, +// { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false } +// ]); + +// const onLayoutChange = (newLayout) => { +// setLayout(newLayout); +// console.log('Updated layout:', newLayout) +// }; + +// return ( +// +//
+//
+// VDAP Widget +//
+//
+// This is the widget content - drag or resize me! +//
+//
+//
+// VDAP Widget +//
+//
+// This is the widget content - drag or resize me! +//
+//
+//
+// VDAP Widget +//
+//
+// This is the widget content - drag or resize me! +//
+//
+// +// ); +// } From 8a34f11a464dc0aadb5f6053f3c6521616a6d31c Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 21 Jul 2025 14:12:32 -0700 Subject: [PATCH 3/5] Add new 'views' directory that handles what the Canvas displays. Refactor Canvas.jsx to act as a router between canvas views. Add /views/WidgetCanvas to handle default view --- .../src/components/layout/Canvas/Canvas.jsx | 52 +++++----------- .../components/layout/Canvas/CanvasHeader.jsx | 6 +- .../src/components/layout/Canvas/Widget.jsx | 60 ------------------- .../layout/Header/UserAvatarMenu.jsx | 2 +- 4 files changed, 19 insertions(+), 101 deletions(-) diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx index 06075a6..d1fbf6d 100644 --- a/client/src/components/layout/Canvas/Canvas.jsx +++ b/client/src/components/layout/Canvas/Canvas.jsx @@ -1,45 +1,23 @@ -// This component defines a generic Widget that can be dynamically resized and -// dragged inside the canvas -// Content not included, must be populated using custom charts plots and notifications -import { useState } from 'react'; -import CanvasHeader from './CanvasHeader'; -import GridLayout from 'react-grid-layout'; -import Widget from './Widget.jsx'; -import { Box } from '@chakra-ui/react'; +// This Canvas component will be used to dynamically populate +// the main canvas section of the web App with a default state +// of 'WidgetCanvas' +import { useState } from "react"; +import { Box } from "@chakra-ui/react"; +import CanvasHeader from "./CanvasHeader"; +import WidgetCanvas from "./views/WidgetCanvas"; +import MapCanvas from "./views/MapCanvas"; +import AdminCanvas from "./views/AdminCanvas"; export default function Canvas() { - // Define widgets initial position and size - // TODO Add dynamic adding/deleting of widgets via options button - const [layout, setLayout] = useState([ - { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false }, - { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false }, - { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false } - ]); - - const onLayoutChange = (newLayout) => { - setLayout(newLayout); - console.log('Updated layout:', newLayout) - }; + const [view, setView] = useState("widget"); return ( - - - {layout.map((item) => ( -
- -
- ))} - + + {view === "widget" && } + {view === "map" && } + {view === "admin" && } ); } + diff --git a/client/src/components/layout/Canvas/CanvasHeader.jsx b/client/src/components/layout/Canvas/CanvasHeader.jsx index 08a61cc..57ff277 100644 --- a/client/src/components/layout/Canvas/CanvasHeader.jsx +++ b/client/src/components/layout/Canvas/CanvasHeader.jsx @@ -1,7 +1,7 @@ import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react"; -import { CanvasHeaderNav } from "./CanvasHeaderNav.jsx"; -import { SearchBar } from "./SearchBar.jsx"; -import { SettingsButton } from "./SettingsButton.jsx"; +import { CanvasHeaderNav } from "./CanvasHeaderNav"; +import { SearchBar } from "./SearchBar"; +import { SettingsButton } from "./SettingsButton"; diff --git a/client/src/components/layout/Canvas/Widget.jsx b/client/src/components/layout/Canvas/Widget.jsx index b012bba..489c98c 100644 --- a/client/src/components/layout/Canvas/Widget.jsx +++ b/client/src/components/layout/Canvas/Widget.jsx @@ -1,4 +1,3 @@ -// Widget.jsx export default function Widget({ title }) { return ( <> @@ -15,62 +14,3 @@ export default function Widget({ title }) { ); } -// The below code has been moved to Canvas.jsx - -// // This component defines a generic Widget that can be dynamically resized and -// // dragged inside the canvas -// // Content not included, must be populated using custom charts plots and notifications - -// import { useState } from 'react'; -// import GridLayout from 'react-grid-layout'; - -// export default function Widget() { -// // Define widgets initial position and size -// // TODO Add dynamic adding/deleting of widgets via options button -// const [layout, setLayout] = useState([ -// { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false }, -// { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false }, -// { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false } -// ]); - -// const onLayoutChange = (newLayout) => { -// setLayout(newLayout); -// console.log('Updated layout:', newLayout) -// }; - -// return ( -// -//
-//
-// VDAP Widget -//
-//
-// This is the widget content - drag or resize me! -//
-//
-//
-// VDAP Widget -//
-//
-// This is the widget content - drag or resize me! -//
-//
-//
-// VDAP Widget -//
-//
-// This is the widget content - drag or resize me! -//
-//
-// -// ); -// } diff --git a/client/src/components/layout/Header/UserAvatarMenu.jsx b/client/src/components/layout/Header/UserAvatarMenu.jsx index d7a5850..cbef63d 100644 --- a/client/src/components/layout/Header/UserAvatarMenu.jsx +++ b/client/src/components/layout/Header/UserAvatarMenu.jsx @@ -8,7 +8,7 @@ export default function UserAvatarMenu({ name, avatar }) { From 35aa0347a9cb46e6b4189e32d07b86bb22659919 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 21 Jul 2025 14:27:53 -0700 Subject: [PATCH 4/5] Save point, page renders and is functional --- client/src/App.jsx | 14 +++---- .../src/components/layout/Canvas/Canvas.jsx | 8 ++-- .../layout/Canvas/views/WidgetCanvas.jsx | 42 +++++++++++++++++++ 3 files changed, 53 insertions(+), 11 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index a2cbd81..7044e94 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -5,8 +5,8 @@ import Canvas from './components/layout/Canvas/Canvas.jsx'; import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react'; // REMOVE AFTER TESTING -import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx'; -import { GridLayout } from 'react-grid-layout'; +// import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx'; +// import { GridLayout } from 'react-grid-layout'; function App() { @@ -42,21 +42,21 @@ function App() { - + {/* */} {/* */} - - - + + + {/* */} {/* */} - + {/* */} ); } diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx index d1fbf6d..ef6e2a8 100644 --- a/client/src/components/layout/Canvas/Canvas.jsx +++ b/client/src/components/layout/Canvas/Canvas.jsx @@ -5,8 +5,8 @@ import { useState } from "react"; import { Box } from "@chakra-ui/react"; import CanvasHeader from "./CanvasHeader"; import WidgetCanvas from "./views/WidgetCanvas"; -import MapCanvas from "./views/MapCanvas"; -import AdminCanvas from "./views/AdminCanvas"; +// import MapCanvas from "./views/MapCanvas"; +// import AdminCanvas from "./views/AdminCanvas"; export default function Canvas() { const [view, setView] = useState("widget"); @@ -15,8 +15,8 @@ export default function Canvas() { {view === "widget" && } - {view === "map" && } - {view === "admin" && } + {/* {view === "map" && } */} + {/* {view === "admin" && } */} ); } diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx index e69de29..2395ae8 100644 --- a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx +++ b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx @@ -0,0 +1,42 @@ +// This component defines a generic Widget that can be dynamically resized and +// dragged inside the canvas +// Content not included, must be populated using custom charts plots and notifications + +import { useState } from 'react'; +import GridLayout from 'react-grid-layout'; +import Widget from '../Widget.jsx'; +import { Box } from '@chakra-ui/react'; + +export default function WidgetCanvas() { + // Define widgets initial position and size + // TODO Add dynamic adding/deleting of widgets via options button + const [layout, setLayout] = useState([ + { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false }, + { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false }, + { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false } + ]); + + const onLayoutChange = (newLayout) => { + setLayout(newLayout); + console.log('Updated layout:', newLayout) + }; + + return ( + + {layout.map((item) => ( +
+ +
+ ))} + + ); +} From 73d85a324790037cc019c6c614df125501d6b013 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 21 Jul 2025 14:30:41 -0700 Subject: [PATCH 5/5] Remove garbage comments --- client/src/App.jsx | 33 ------------------- .../components/layout/Canvas/CanvasHeader.jsx | 1 - 2 files changed, 34 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 7044e94..b98cd78 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -4,31 +4,10 @@ import Sidebar from './components/layout/Sidebar/Sidebar.jsx'; import Canvas from './components/layout/Canvas/Canvas.jsx'; import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react'; -// REMOVE AFTER TESTING -// import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx'; -// import { GridLayout } from 'react-grid-layout'; - - function App() { const recipe = useRecipe({ key: "canvas" }); const styles = recipe(); - // TEST TEST TEST -// return ( -// -// {/* ← This should render something visible */} -// {/* -// {layout.map((item) => ( -//
-// -//
-// ))} -// */} -// -// ); -// } - - return ( - {/* */} - {/* */} - {/* - - */} - {/* */} - {/* */} ); } diff --git a/client/src/components/layout/Canvas/CanvasHeader.jsx b/client/src/components/layout/Canvas/CanvasHeader.jsx index 57ff277..cfe2076 100644 --- a/client/src/components/layout/Canvas/CanvasHeader.jsx +++ b/client/src/components/layout/Canvas/CanvasHeader.jsx @@ -14,7 +14,6 @@ export default function CanvasHeader() { as="header" position="sticky" top="0" - // zIndex="banner" bg="base200" borderBottom="1px solid" borderColor="gray.200"