From 6c4fae9b821cb667655cbe2deb1757284f61cc42 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Wed, 6 Aug 2025 16:25:54 -0700
Subject: [PATCH 1/2] Add boilerplate Volcano view page

---
 client/src/components/Canvas/views/Home.jsx   |  1 +
 .../src/components/Canvas/views/Volcano.jsx   | 71 ++++++++++++++-----
 2 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx
index bc95eb8..21f1b50 100644
--- a/client/src/components/Canvas/views/Home.jsx
+++ b/client/src/components/Canvas/views/Home.jsx
@@ -111,6 +111,7 @@ export default function Home({...props}) {
 				bg="base200"
 				px={6}
 				pt={3}
+        pb={2}
 				align="center"
 				justify="space-between"
         width="100%"
diff --git a/client/src/components/Canvas/views/Volcano.jsx b/client/src/components/Canvas/views/Volcano.jsx
index c2a5a50..26303da 100644
--- a/client/src/components/Canvas/views/Volcano.jsx
+++ b/client/src/components/Canvas/views/Volcano.jsx
@@ -1,24 +1,59 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Box, Text, Heading, DataList } from '@chakra-ui/react';
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 
 export default function Volcano() {
+    const position = [46.2, -122.18]; // Mt. St. Helens
+    const stats = [
+        { label: "Elevation", value: "2,539 (m) 8,330 (ft)", helpText: "Volcano Elevation" },
+        { label: "Volcano Type", value: "Stratovolcano", helpText: "Volcano Type" },
+        { label: "Composition", value: "Basalt to Ryodacite", helpText: "Volcano Composition" },
+        { label: "Recent Eruptions", value: "1980, 2004-2008", helpText: "Last Eruption" },
+        { label: "Threat Potential", value: "Very High", helpText: "Threat Potential" },
+    
+    ]
     return (
-        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
-            <Box 
-                bg="bg" 
-                shadow="md" 
-                borderRadius="md"
-                p={8}
-                width="600px"
-                height="100px"
-                textAlign="center"
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-            >
-                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
-                    Volcano Canvas coming soon!
-                </Text>
-            </Box>
+        <Box height="550px" width="100%">
+            <Heading as="h1" pb={3}>
+                Mt. St. Helens - United States CVO
+            </Heading>
+            <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
+                <TileLayer
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                attribution='&copy; OpenStreetMap contributors'
+                />
+                <Marker position={position}>
+                    <Popup>
+                        CVO — Home of the volcanoligists
+                    </Popup>
+                </Marker>
+            </MapContainer>
+            <DataList.Root orientation="horizontal">
+                {stats.map((item) => (
+                    <DataList.Item key={item.label}>
+                        <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
+                        <DataList.ItemValue>{item.value}</DataList.ItemValue>
+                    </DataList.Item>
+                ))}
+            </DataList.Root>
         </Box>
+        // <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+        //     <Box 
+        //         bg="bg" 
+        //         shadow="md" 
+        //         borderRadius="md"
+        //         p={8}
+        //         width="600px"
+        //         height="100px"
+        //         textAlign="center"
+        //         display="flex"
+        //         alignItems="center"
+        //         justifyContent="center"
+        //     >
+        //         <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+        //             Volcano Canvas coming soon!
+        //         </Text>
+        //     </Box>
+        // </Box>
     );
 }
\ No newline at end of file

From c91216d214f2a9a67eda52f638c7e37e8a678047 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Wed, 6 Aug 2025 17:10:33 -0700
Subject: [PATCH 2/2] Add Volcano view DataList, historical summary, and map

---
 .../src/components/Canvas/views/Volcano.jsx   | 93 +++++++++++--------
 1 file changed, 52 insertions(+), 41 deletions(-)

diff --git a/client/src/components/Canvas/views/Volcano.jsx b/client/src/components/Canvas/views/Volcano.jsx
index 26303da..985b7e6 100644
--- a/client/src/components/Canvas/views/Volcano.jsx
+++ b/client/src/components/Canvas/views/Volcano.jsx
@@ -1,4 +1,4 @@
-import { Box, Text, Heading, DataList } from '@chakra-ui/react';
+import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react';
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 
@@ -12,48 +12,59 @@ export default function Volcano() {
         { label: "Threat Potential", value: "Very High", helpText: "Threat Potential" },
     
     ]
+
+    const historyText = `
+    Mount St. Helens, located in the Cascade Range of Washington State, is one of the most
+    active and well-known volcanoes in the United States. It famously erupted on May 18, 1980,
+    in one of the most significant volcanic events in U.S. history, which caused widespread
+    devastation and loss of life. The eruption reduced the mountain’s summit and created a large
+    crater. Subsequent dome-building eruptions continued through the 2000s, and the volcano
+    remains closely monitored today.
+  `;
+
     return (
-        <Box height="550px" width="100%">
-            <Heading as="h1" pb={3}>
-                Mt. St. Helens - United States CVO
+        <Box width="100%" px={6} py={4}>
+            <Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
+                Mount St. Helens - United States CVO
             </Heading>
-            <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
-                <TileLayer
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                attribution='&copy; OpenStreetMap contributors'
-                />
-                <Marker position={position}>
-                    <Popup>
-                        CVO — Home of the volcanoligists
-                    </Popup>
-                </Marker>
-            </MapContainer>
-            <DataList.Root orientation="horizontal">
-                {stats.map((item) => (
-                    <DataList.Item key={item.label}>
-                        <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
-                        <DataList.ItemValue>{item.value}</DataList.ItemValue>
-                    </DataList.Item>
-                ))}
-            </DataList.Root>
+            
+            <Box height="550px" borderRadius="md" overflow="hidden" boxShadow="md" mb={6}>
+                <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
+                    <TileLayer
+                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        attribution='&copy; OpenStreetMap contributors'
+                    />
+                    <Marker position={position}>
+                        <Popup>
+                            CVO — Home of the volcanoligists
+                        </Popup>
+                    </Marker>
+                </MapContainer>
+            </Box>
+            
+            <HStack align="start" spacing={10} mt={4}>
+                <Box width="300px" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
+                    <DataList.Root orientation="horizontal">
+                        {stats.map((item) => (
+                            <DataList.Item key={item.label}>
+                                <DataList.ItemLabel>
+                                    {item.label}
+                                </DataList.ItemLabel>
+                                <DataList.ItemValue>
+                                    {item.value}
+                                </DataList.ItemValue>
+                            </DataList.Item>
+                        ))}
+                    </DataList.Root>
+                </Box>
+
+                <Box flex="1" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
+                    <Heading textAlign="center" pb={2}>Historical Summary</Heading>
+                    <Text>
+                        { historyText}
+                    </Text>
+                </Box>
+            </HStack>
         </Box>
-        // <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
-        //     <Box 
-        //         bg="bg" 
-        //         shadow="md" 
-        //         borderRadius="md"
-        //         p={8}
-        //         width="600px"
-        //         height="100px"
-        //         textAlign="center"
-        //         display="flex"
-        //         alignItems="center"
-        //         justifyContent="center"
-        //     >
-        //         <Text fontsize="2xl" fontWeight="bold" color="gray.700">
-        //             Volcano Canvas coming soon!
-        //         </Text>
-        //     </Box>
-        // </Box>
     );
 }
\ No newline at end of file