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] 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