chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add differentiating capabilities according to widget size in rs

Browse Source
This commit is contained in:
vkuchenik
2026-08-19 12:39:24 -07:00
parent a5f2f012dc
commit 1f2b578c91
1 changed files with 50 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/RemoteSensing.jsx
+50 -127
View File
@@ -1,14 +1,17 @@
import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
import {useEffect, useMemo } from 'react';
import {useEffect, useMemo, useCallback} from 'react';
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
import VdapApi from '../../hooks/useVdapApi.js';
import VdapApi from '@/hooks/useVdapApi.js';
import useBuildUrl from "@/hooks/useBuildUrl.js";
export default function RemoteSensing({ settings, widgetID }) {
console.log("RS widget ID: ", widgetID);
console.log("RS settings: ", settings, "RS ID: ", widgetID);
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
const isCopy = settings?.copyToClipboard === true; // acts as a fail-safe if no default setting is set
const sorts = settings?.activeSorts;
// Find this specific widgets object in the state list of active & displayed widgets
const thisWidget = useDashboardStore(useCallback((state) =>
state.widgets.find((widget) => widget.id === widgetID), [widgetID]
));
// build url, defaults to 7 days past
const url = useBuildUrl('/api/v2/remote_sensing', settings?.startDate, settings?.endDate);
@@ -16,100 +19,21 @@ export default function RemoteSensing({ settings, widgetID }) {
// VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data
const {data: apiData, isLoading, error} = VdapApi(url);
// TEST DATA
// const apiData = useMemo(() => {
// return ([
// {
// id: 1848,
// volcano_name: "Lewotolok",
// country: "Indonesia",
// report_time: "2026-01-13T20:39:39Z",
// summary: "Dear friends,\n\nOur latest satellite view from 13 January (~0900 local time) shows that the lava has began to flow over the crater rim onto the northwest flank (see attached). The lava flow spreads into three lobes from the single source vent on the northwest flank of the active cone. The longest portion of the flow was about 530 meters from the vent with the toe draping about 30-40 meters over the rim of the main crater just north of the May 2024 lava flow. A narrow deposit of volcanoclastic debris extends about 300 meters below the toe of the lava flow (white dashed outline on sketch).\n\nPlease let us know if you have any questions.\nBest wishes,\nRick",
// sender: "rwessels@usgs.gov",
// files: [
// {
// name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
// url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
// type: "image"
// },
// {
// name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
// url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
// type: "image"
// }
// ]
// },
// {
// id: 1847,
// volcano_name: "Mayon",
// country: "Philippines",
// report_time: "2026-01-13T17:56:46Z",
// summary: "Dear PHIVOLCS friends,\nOur most recent satellite data from 13 January (1500 local) show the new lava flow extending southeast from the summit and splitting into two lobes (see attached pdf). The total length of the longest lobe was about 1 kilometer. Compared to data from 12 January, the longest part of the flow advanced almost 200 meters over 11 hours while the shorter section advanced about 80 meters over the same time. Debris falling from the front of both lava flow lobes extend another several hundred meters below each lobe. We continue to watch the activity at Mayon volcano and will share anything that might help. \n\nPlease let us know if you have any questions, requests, or comments.\n\nBest wishes,\nRick",
// sender: "rwessels@usgs.gov",
// files: [
// {
// name: "Mayon-RP-images-20260113_ICEYE_lava.pdf",
// url: "https://vdap.org/commcoordashboard/rs/attachments/1847-Mayon-RP-images-20260113_ICEYE_lava.pdf",
// type: "pdf"
// }
// ]
// },
// {
// id: 1889,
// volcano_name: "Bagana",
// country: "Papua New Guinea",
// report_time: "2026-06-24T21:28:58Z",
// summary: "Hi Steve and RVO,\nI'm now back in the office after some time away and have looked closely at the recent data for Bagana Volcano. \nSatellite data from 15 June show that an increase in lava effusion caused the upper part of the active lava flow at the summit to inflate and likely contributed to the 19-20 June collapse. By 16 June, the inflated area was about 260-meters-long by 140-meters-wide. The northeast edge of the inflated section of the lava flow was the source of rockfalls down the northeast flank where some of the larger blocks tumbled over 1.3 kilometer from the flow. The 22 June data that Julie mentioned shows that all of the inflated area was removed by the collapse (~36,000 square meter area of the upper flow removed). The collapse PDC deposits scoured a deep gorge and removed a broad area of vegetation near the lake. The distal portion of the collapse deposits formed a small delta extending into the lake and possibly raising the lake level slightly based on overall shore outline changes.\n\nI've attached a sketch map showing the features described above. Please let us know if you have any questions.\n\nBest wishes,\nRick",
// sender: "rwessels@usgs.gov",
// files: [
// {
// name: "Bagana-PG-sketch-20260622_collapse+lava.jpg",
// url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_collapse+lava.jpg",
// type: "image"
// },
// {
// name: "Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg",
// url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg",
// type: "image"
// },
// {
// name: "Bagana_22_Jun_2026_collapse2.kml",
// url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana_22_Jun_2026_collapse2.kml",
// type: "download"
// }
// ]
// },
// {
// id: 1845,
// volcano_name: "Lewotolok",
// country: "Indonesia",
// report_time: "2026-01-07T21:42:17Z",
// summary: "Dear friends,\nThe increased activity at Lewotolok Volcano over the past week reminded me that we have not sent you a Remote Sensing Summary since June 2025. Over the two days from 3 to 5 January 2026, explosions from the central cone intensified, doubling the area impacted by proximal ballistics and tephra to over 20 hectares, while increased effusion has produced a new ~20,000 m² lava flow on the west–northwest flank that extends ~270 meters from the vent. So far, all recent lava flows have been confined to the summit crater.\n\nPlease let us know if you have any questions or additions.\n\nBest Wishes,\nRick",
// sender: "rwessels@usgs.gov",
// files: []
// },
// ])
// }, []);
// sort apiData
const data = useMemo(() => {
if (apiData?.length === 0) return [];
let sorted;
const sorts = settings?.activeSorts;
if (sorts?.volcanoSort && sorts?.timeSort === "asc") {
sorted = [...apiData].sort(ascTimeVolcanoSort);
} else if (sorts?.volcanoSort && sorts?.timeSort === "desc") {
sorted = [...apiData].sort(descTimeVolcanoSort);
} else if (sorts?.timeSort === "asc") {
sorted = [...apiData].sort(ascTimeSort);
} else {
sorted = [...apiData].sort(descTimeSort);
}
if (sorts?.volcanoSort && sorts?.timeSort === "asc") return [...apiData].sort(ascTimeVolcanoSort);
else if (sorts?.volcanoSort && sorts?.timeSort === "desc") return [...apiData].sort(descTimeVolcanoSort);
else if (sorts?.timeSort === "asc") return [...apiData].sort(ascTimeSort);
else return [...apiData].sort(descTimeSort);
return sorted;
}, [apiData, sorts]);
}, [apiData, settings]);
// check if user wants to copy all RS
useEffect(() => {
if(isCopy) {
if(settings?.copyToClipboard === true) {
const dataText = data.map((item) => {
return `${item.country}, ${item.volcano_name}\n` +
`Report Time: ${item.report_time}\n` +
@@ -125,7 +49,7 @@ export default function RemoteSensing({ settings, widgetID }) {
}));
updateSettings(widgetID, {copyToClipboard: false});
}
}, [isCopy, data, widgetID, updateSettings]);
}, [settings, data, widgetID, updateSettings]);
if (isLoading) return (
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="md" bg="gray.800">
@@ -146,45 +70,24 @@ export default function RemoteSensing({ settings, widgetID }) {
);
return (
<Flex direction="column"
w="100%" h="100%"
pos="relative"
justify="top" align="center"
p={2} gap={2}
overflow="auto"
borderRadius="xl"
bg="gray.800"
>
<Flex direction="column" w="100%" h="100%" pos="relative" justify="top" align="center" p={2} gap={2} overflow="auto" borderRadius="xl" bg="gray.800">
{data.map((item, index) => {
return (
if (thisWidget?.size === "large" || thisWidget?.size === "medium") return (
<Collapsible.Root key={index} w="100%">
{/* Using context to dynamically change the border radii of the triggers */}
<Collapsible.Context>
{(collapsible) => (
<>
<Collapsible.Trigger w="100%" overflow="hidden">
<Flex
direction="row"
w="100%" h="100%"
justify="space-between" align="center"
gap={2}
p={1} pl={3} pr={3}
borderTopRadius="lg"
borderBottomRadius={collapsible.open ? "0" : "lg"}
bg="gray.600"
<Flex direction="row" w="100%" h="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3}
borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} bg="gray.600"
>
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
<Text truncate>{item?.volcano_name}</Text>
<Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
</Flex>
<Flex w="100%" minW={0} justify="right">
<Text
truncate
pl={2} pr={2}
borderRadius="lg"
bg="gray.800/50" color="gray.100"
fontSize="sm" fontWeight="semibold"
>
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm" fontWeight="semibold">
{item?.report_time}
</Text>
</Flex>
@@ -235,19 +138,20 @@ export default function RemoteSensing({ settings, widgetID }) {
<a href={file?.url} target="_blank" rel="noopener noreferrer">
<img src={file?.url} alt={file?.name} />
</a>
<br />
</Box>
);
// DOWNLOADABLE LINK
else if (file?.type === "download") return (
<Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
<>
<br />
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
<Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
<a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>
</Button>
</Flex>
<Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
<Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
<a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>
</Button>
</Flex>
</>
)
})}
</Box>
@@ -257,6 +161,25 @@ export default function RemoteSensing({ settings, widgetID }) {
</Collapsible.Context>
</Collapsible.Root>
)
else if (thisWidget?.size === "small") return (
<Flex key={index} direction="row" w="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3} borderRadius="lg" bg="gray.600">
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
<Text truncate>{item?.volcano_name}</Text>
<Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
</Flex>
<Flex w="100%" minW={0} justify="right">
<Text
truncate
pl={2} pr={2}
borderRadius="lg"
bg="gray.800/50" color="gray.100"
fontSize="sm" fontWeight="semibold"
>
{item?.report_time}
</Text>
</Flex>
</Flex>
)
})}
</Flex>
);