- {hasData ? (
-
- {(zoom) => {
- const newXScale = rescaleXAxis(xScale, zoom.transformMatrix);
- const newYScale = rescaleYAxis(yScale, zoom.transformMatrix);
- const safeXTicks = getSafeXTicks(newXScale);
-
- return (
- <>
-
- {yAxisLabel && (
-
- {yAxisLabel}
-
- )}
-
-
- ({
- fill: axisTickTextColor,
- fontSize: 12,
- fontWeight: 500,
- textAnchor: 'end',
- })}
- />
- ({
- fill: axisTickTextColor,
- fontSize: 12,
- fontWeight: 500,
- textAnchor: 'middle',
- })}
- tickValues={safeXTicks}
- />
-
-
- {data.map((series, index) => (
- newXScale(getDate(d)) ?? 0}
- y={(d) => newYScale(getYValue(d)) ?? 0}
- />
- ))}
-
- {tooltipData && (
-
-
- )}
-
-
- {
- zoom.dragMove(e);
- handleTooltip(e, zoom);
- }}
- onMouseUp={zoom.dragEnd}
- onMouseLeave={(e) => {
- if (zoom.isDragging) zoom.dragEnd();
- hideTooltip();
- }}
- onTouchStart={zoom.dragStart}
- onTouchMove={zoom.dragMove}
- onTouchEnd={zoom.dragEnd}
- onDoubleClick={(e) => {
- const point = localPoint(e) || { x: 0, y: 0 };
- zoom.scale({
- scaleX: 1.5,
- scaleY: 1.5,
- point,
- });
- }}
- onWheel={(e) => {
- const point = localPoint(e) || { x: 0, y: 0 };
- const delta = -e.deltaY / 500;
- const scale = 1 + delta;
- zoom.scale({
- scaleX: scale,
- scaleY: scale,
- point,
- });
- }}
- style={{
- cursor: zoom.isDragging ? 'grabbing' : 'grab',
- }}
- />
-
-
-
- {tooltipData && (
-
-
- Date:
- {formatTooltipDate(
- getDate(tooltipData[0].dataPoint)
- )}
-
- {tooltipData.map((d, i) => (
-
-
- {d.seriesLabel}:{' '}
-
- {formatYValue(getYValue(d.dataPoint))}
-
- ))}
-
- )}
-
- );
- }}
-
- ) : (
+
+ {noData ? (
- 🛠️ No data to display
+ 🛠 No data to display
+ ) : (
+ <>
+ {/* STATIC layer (won't rerender on tooltip changes) */}
+
+
+ {/* TOOLTIP svg layer (rerenders only when tooltip changes) */}
+
+
+ {/* interaction overlay (captures mouse events) */}
+
+
+ {
+ lastTooltipKeyRef.current = '';
+ hideTooltip();
+ }}
+ onTouchMove={handleTooltip}
+ onTouchEnd={() => {
+ lastTooltipKeyRef.current = '';
+ hideTooltip();
+ }}
+ style={{ cursor: 'crosshair', pointerEvents: 'all' }}
+ />
+
+
+
+ {/* HTML tooltip (rerenders only when tooltip changes) */}
+ {tooltipData && (
+
+
+ Date:
+ {formatTooltipDate(getDate(tooltipData[0].dataPoint))}
+
+ {tooltipData.map((d, i) => (
+
+
+ {d.seriesLabel}:{' '}
+
+ {formatYValue(getYValue(d.dataPoint))}
+
+ ))}
+
+ )}
+
)}
);
-}
+});
export default LineChart;
diff --git a/reactapp/features/DataStream/components/forecast/TimeSlider.css b/reactapp/features/DataStream/components/forecast/TimeSlider.css
new file mode 100644
index 0000000..1c6d707
--- /dev/null
+++ b/reactapp/features/DataStream/components/forecast/TimeSlider.css
@@ -0,0 +1,145 @@
+/* TimeSlider.css */
+
+.panel {
+ color: var(--map-panel-text);
+}
+
+.panel-title {
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-bottom: 12px;
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm, 8px);
+}
+
+.panel-title svg {
+ width: var(--space-md, 16px);
+ height: var(--space-md, 16px);
+}
+
+/* Time slider block */
+.time-control {
+ margin-top: 12px;
+}
+
+.time-display {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: var(--space-sm, 8px);
+}
+
+.time-label {
+ font-size: 12px;
+ color: var(--accent-text,#009989);
+}
+
+.time-value {
+ /* font-family: "IBM Plex Mono", monospace; */
+ font-size: 14px;
+ color: var(--accent-text, #00d4ff);
+}
+
+/* Range slider styling */
+input[type="range"] {
+ width: 100%;
+ height: 6px;
+ -webkit-appearance: none;
+ appearance: none;
+ background: var(--accent-text);
+ border-radius: var(--radius-sm, 4px);
+ outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: var(--space-md, 16px);
+ height: var(--space-md, 16px);
+ background: var(--select-option-selected-bg);
+ border-radius: 50%;
+ cursor: pointer;
+ box-shadow: 0 0 10px var(--dropshadow-color, rgba(0, 212, 255, 0.15));
+}
+
+/* Firefox */
+input[type="range"]::-moz-range-thumb {
+ width: var(--space-md, 16px);
+ height: var(--space-md, 16px);
+ background: var(--select-option-selected-bg);
+ border: 0;
+ border-radius: 50%;
+ cursor: pointer;
+ box-shadow: 0 0 10px var(--dropshadow-color, rgba(0, 212, 255, 0.15));
+}
+
+input[type="range"]::-moz-range-track {
+ height: 6px;
+ background: var(--select-option-selected-bg, #0a0e14);
+ border-radius: var(--radius-sm, 4px);
+}
+
+/* Play controls row */
+.play-controls {
+ display: flex;
+ gap: var(--space-sm, 8px);
+ margin-top: 12px;
+ justify-content: center;
+}
+
+.play-btn {
+ /* flex: 1; */
+ padding: var(--space-sm, 8px);
+ background: var(--accent-text, #0a0e14);
+ border: 1px solid var(--border-color, #2a3a4a);
+ border-radius: var(--radius-sm, 4px);
+ color: var(--primary-color);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.play-btn:hover {
+ background-color: var(--select-option-selected-bg);
+ color: var(--text-color);
+}
+
+.play-btn.active {
+ background: var(--select-option-selected-bg);
+ border-color: var(--select-option-selected-bg);
+ color: var(--bg-primary, #0a0e14);
+}
+
+.play-btn svg {
+ width: 18px;
+ height: 18px;
+}
+
+/* Speed control row */
+.speed-control {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm, 8px);
+ margin-top: 12px;
+}
+
+.speed-control label {
+ font-size: 11px;
+ color: var(--accent-text);
+ text-transform: uppercase;
+}
+
+.speed-control input {
+ flex: 1;
+}
+
+.speed-value {
+ font-family: "IBM Plex Mono", monospace;
+ font-size: 12px;
+ color: var(--accent-text);
+ min-width: 40px;
+ text-align: right;
+}
diff --git a/reactapp/features/DataStream/components/forecast/TimeSlider.js b/reactapp/features/DataStream/components/forecast/TimeSlider.js
new file mode 100644
index 0000000..f0cb05c
--- /dev/null
+++ b/reactapp/features/DataStream/components/forecast/TimeSlider.js
@@ -0,0 +1,145 @@
+// TimeSlider.jsx
+import React, { useEffect, useMemo, useRef, useCallback } from "react";
+import useTimeSeriesStore from "features/DataStream/store/Timeseries";
+import "./TimeSlider.css";
+
+export const TimeSlider = React.memo(() => {
+ const series = useTimeSeriesStore((s) => s.series);
+ const currentTimeIndex = useTimeSeriesStore((s) => s.currentTimeIndex);
+ const setCurrentTimeIndex = useTimeSeriesStore((s) => s.setCurrentTimeIndex);
+ const stepForward = useTimeSeriesStore((s) => s.stepForward);
+ const stepBackward = useTimeSeriesStore((s) => s.stepBackward);
+
+ const isPlaying = useTimeSeriesStore((s) => s.isPlaying);
+ const toggleIsPlaying = useTimeSeriesStore((s) => s.toggleIsPlaying);
+
+ const playSpeed = useTimeSeriesStore((s) => s.playSpeed);
+ const setPlaySpeed = useTimeSeriesStore((s) => s.setPlaySpeed);
+
+ const baseFrameMs = useTimeSeriesStore((s) => s.baseFrameMs);
+
+ const intervalRef = useRef(null);
+
+ const timeSteps = Array.isArray(series) ? series.length : 0;
+
+ const currentLabel = useMemo(() => {
+ if (!timeSteps) return "T+0h";
+ const t0 = series?.[0]?.x;
+ const t = series?.[currentTimeIndex]?.x;
+ if (typeof t0 !== "object" || typeof t !== "object") return "T+0h";
+ const hours = Math.round((t - t0) / 3600000); // ms -> hours
+ return `T+${hours}h`;
+ }, [series, currentTimeIndex, timeSteps]);
+
+ // Keep index in range if series changes
+ useEffect(() => {
+ if (!timeSteps) return;
+ if (currentTimeIndex > timeSteps - 1) setCurrentTimeIndex(timeSteps - 1);
+ }, [timeSteps, currentTimeIndex, setCurrentTimeIndex]);
+
+ // Start/stop autoplay
+ useEffect(() => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ intervalRef.current = null;
+ }
+
+ if (!isPlaying) return;
+ if (!timeSteps) return;
+ // get ids
+ const ms = Math.max(1, Math.floor(baseFrameMs / Math.max(1, playSpeed)));
+
+ intervalRef.current = setInterval(() => {
+ stepForward();
+ }, ms);
+
+ return () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ intervalRef.current = null;
+ }
+ };
+ }, [isPlaying, playSpeed, baseFrameMs, timeSteps, stepForward]);
+
+ const onSliderChange = useCallback(
+ (e) => setCurrentTimeIndex(parseInt(e.target.value, 10)),
+ [setCurrentTimeIndex]
+ );
+
+ const onSpeedChange = useCallback(
+ (e) => setPlaySpeed(parseInt(e.target.value, 10)),
+ [setPlaySpeed]
+ );
+
+ const maxIdx = Math.max(0, timeSteps - 1);
+ const safeIdx = Math.min(currentTimeIndex, maxIdx);
+
+ return (
+
+
+
+ Current Time
+ {currentLabel}
+
+
+
+
+
+
+
+ {isPlaying ? (
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Speed
+ {playSpeed}x
+
+
+ );
+});
diff --git a/reactapp/features/DataStream/components/forecast/TimeseriesCard.js b/reactapp/features/DataStream/components/forecast/TimeseriesCard.js
index aea4b03..7d57142 100644
--- a/reactapp/features/DataStream/components/forecast/TimeseriesCard.js
+++ b/reactapp/features/DataStream/components/forecast/TimeseriesCard.js
@@ -1,15 +1,35 @@
-import { Fragment, Suspense } from 'react';
+import { Fragment, Suspense, useMemo, useCallback } from 'react';
import { TimeSeriesContainer } from '../styles/Styles';
import useTimeSeriesStore from 'features/DataStream/store/Timeseries';
import LoadingAnimation from 'features/Tethys/components/loader/LoadingAnimation';
import ParentSize from '@visx/responsive/lib/components/ParentSize';
import LineChart from 'features/DataStream/components/forecast/Plot';
+import { useShallow } from 'zustand/react/shallow';
const TimeSeriesCard = () => {
- const series = useTimeSeriesStore((state) => state.series);
- const variable = useTimeSeriesStore((state) => state.variable);
- const layout = useTimeSeriesStore((state) => state.layout);
+ const { series, variable, layout } = useTimeSeriesStore(useShallow((state) => ({
+ series: state.series,
+ variable: state.variable,
+ layout: state.layout,
+ })));
+
+ const chartData = useMemo(() => {
+ return [
+ {
+ label: variable,
+ data: series,
+ },
+ ];
+ }, [series, variable]);
+
+ const renderChart = useCallback(
+ ({ width, height }) => (
+
+ ),
+ [chartData, layout]
+ );
+
return (
@@ -17,26 +37,9 @@ const TimeSeriesCard = () => {
- {({ width, height }) =>
- (
-
-
}
diff --git a/reactapp/features/DataStream/components/forecast/cacheHandler.js b/reactapp/features/DataStream/components/forecast/cacheHandler.js
deleted file mode 100644
index e35187d..0000000
--- a/reactapp/features/DataStream/components/forecast/cacheHandler.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// ResetDataButton.js
-import React, { useState } from 'react';
-import { StyledButton } from 'features/Tethys/components/Styles';
-import { dropAllVpuDataTables } from 'features/DataStream/lib/queryData';
-import { resetDatabase } from 'features/DataStream/lib/duckdbClient';
-import { DeleteDataIcon } from 'features/DataStream/lib/layers';
-const ResetDataButton = () => {
- const [isResetting, setIsResetting] = useState(false);
- const [error, setError] = useState(null);
-
- const handleResetClick = async () => {
- const confirmed = window.confirm(
- 'This will drop all VPU data tables and reset the in-memory DuckDB database.\n\n' +
- 'The index_data_table will be preserved.\n\n' +
- 'Do you want to continue?'
- );
-
- if (!confirmed) return;
-
- setIsResetting(true);
- setError(null);
-
- try {
- await dropAllVpuDataTables();
- await resetDatabase();
- console.log('Data reset complete.');
- } catch (err) {
- console.error('Error while resetting data:', err);
- setError('Failed to reset data. Check the console for details.');
- } finally {
- setIsResetting(false);
- }
- };
-
- return (
-
-
- {isResetting ? 'Resetting…' :
-
- {error && (
-
- {error}
-
- )}
-
- );
-};
-
-export default ResetDataButton;
diff --git a/reactapp/features/DataStream/components/forecast/cacheTable.js b/reactapp/features/DataStream/components/forecast/cacheTable.js
new file mode 100644
index 0000000..f6af2d4
--- /dev/null
+++ b/reactapp/features/DataStream/components/forecast/cacheTable.js
@@ -0,0 +1,96 @@
+import React, { Fragment, useCallback } from 'react';
+import { IoFolderOpenOutline, IoClose, IoSkullOutline } from "react-icons/io5";
+import { IconLabel, Title, SButton } from '../styles/Styles';
+import { useCacheTablesStore } from 'features/DataStream/store/CacheTables';
+
+export const CacheTable = React.memo(({tables}) => {
+ const deleteCacheTable = useCacheTablesStore((state) => state.delete_cacheTable);
+ const resetCacheTables = useCacheTablesStore((state) => state.reset);
+
+ const deleteSingleCache = useCallback(
+ async (tableId) => {
+ console.log("Delete cache table:", tableId);
+ deleteCacheTable(tableId);
+ },
+ [deleteCacheTable]
+ );
+
+ const deleteAllCache = useCallback(async () => {
+ console.log("Delete all cache tables");
+ resetCacheTables();
+ }, [resetCacheTables]);
+
+
+ return (
+
+
+ Files Loaded
+ deleteAllCache()} >
+
+
+
+
+ {tables && tables.length > 0 ? (
+
+
+
+ File
+ Size
+
+
+
+ {tables.map((table, index) => (
+
+
+ {
+ deleteSingleCache(table.id);
+ }}>
+
+
+
+ {table.name || 'Unknown'}
+
+
+ {table.size || 'N/A'}
+
+
+ ))}
+
+
+ ) : (
+ No cached tables available.
+ )}
+
+ );
+});
diff --git a/reactapp/features/DataStream/components/forecast/dataMenu.js b/reactapp/features/DataStream/components/forecast/dataMenu.js
new file mode 100644
index 0000000..1e4658d
--- /dev/null
+++ b/reactapp/features/DataStream/components/forecast/dataMenu.js
@@ -0,0 +1,530 @@
+// DataMenu.js
+import React, { Fragment, useMemo } from 'react';
+import { Spinner } from 'react-bootstrap';
+import { XButton, LoadingMessage, Row, IconLabel } from '../styles/Styles';
+import SelectComponent from '../SelectComponent';
+import { getOptionsFromURL, makePrefix } from 'features/DataStream/lib/s3Utils';
+import { getCacheKey } from 'features/DataStream/lib/opfsCache';
+import useTimeSeriesStore from 'features/DataStream/store/Timeseries';
+import useDataStreamStore from 'features/DataStream/store/Datastream';
+import useS3DataStreamBucketStore from 'features/DataStream/store/s3Store';
+import { useShallow } from 'zustand/react/shallow';
+import {
+ ModelIcon,
+ DateIcon,
+ ForecastIcon,
+ CycleIcon,
+ EnsembleIcon,
+ FileIcon
+} from 'features/DataStream/lib/layers';
+
+// -------------------- helpers --------------------
+const firstOpt = (v) => (Array.isArray(v) ? v[0] : v);
+
+function useEvent(fn) {
+ const ref = React.useRef(fn);
+ React.useLayoutEffect(() => {
+ ref.current = fn;
+ });
+ return React.useCallback((...args) => ref.current(...args), []);
+}
+
+const DataMenuLoading = React.memo(function DataMenuLoading() {
+ const { loading, loadingText } = useTimeSeriesStore(
+ useShallow((s) => ({
+ loading: s.loading,
+ loadingText: s.loadingText,
+ }))
+ );
+
+ return (
+
+ {loading && (
+ <>
+
+ );
+});
+
+const DataMenuControls = React.memo(function DataMenuControls() {
+ const { vpu, date, forecast, ensemble, cycle, model, outputFile } =
+ useDataStreamStore(
+ useShallow((state) => ({
+ vpu: state.vpu,
+ date: state.date,
+ forecast: state.forecast,
+ ensemble: state.ensemble,
+ cycle: state.cycle,
+ model: state.model,
+ outputFile: state.outputFile,
+ }))
+ );
+
+ // setters
+ const {
+ set_date,
+ set_forecast,
+ set_ensemble,
+ set_cycle,
+ set_model,
+ set_outputFile,
+ set_cache_key,
+ } = useDataStreamStore(
+ useShallow((state) => ({
+ set_date: state.set_date,
+ set_forecast: state.set_forecast,
+ set_ensemble: state.set_ensemble,
+ set_cycle: state.set_cycle,
+ set_model: state.set_model,
+ set_outputFile: state.set_outputFile,
+ set_cache_key: state.set_cache_key,
+ }))
+ );
+
+ const feature_id = useTimeSeriesStore((s) => s.feature_id);
+
+ const {
+ availableModelsList,
+ availableDatesList,
+ availableForecastList,
+ availableCyclesList,
+ availableEnsembleList,
+ availableOutputFiles,
+ } = useS3DataStreamBucketStore(
+ useShallow((state) => ({
+ availableModelsList: state.models,
+ availableDatesList: state.dates,
+ availableForecastList: state.forecasts,
+ availableCyclesList: state.cycles,
+ availableEnsembleList: state.ensembles,
+ availableOutputFiles: state.outputFiles,
+ }))
+ );
+
+ const {
+ set_prefix,
+ setForecastOptions,
+ setAvailableDatesList,
+ setAvailableCyclesList,
+ setAvailableEnsembleList,
+ setAvailableOutputFiles,
+ } = useS3DataStreamBucketStore(
+ useShallow((state) => ({
+ set_prefix: state.set_prefix,
+ setForecastOptions: state.set_forecasts,
+ setAvailableDatesList: state.set_dates,
+ setAvailableCyclesList: state.set_cycles,
+ setAvailableEnsembleList: state.set_ensembles,
+ setAvailableOutputFiles: state.set_outputFiles,
+ }))
+ );
+
+ const handleVisulization = useEvent(async () => {
+ const { loading, set_loading_text } = useTimeSeriesStore.getState();
+ if (!feature_id || !vpu) {
+ set_loading_text('Please select a feature on the map first');
+ set_loading_text('');
+ return;
+ }
+ if (!outputFile) {
+ set_loading_text('No Output File selected');
+ set_loading_text('');
+ return;
+ }
+ if (loading) {
+ set_loading_text('Data is already loading, please wait...');
+ set_loading_text('');
+ return;
+ }
+
+ const cacheKey = getCacheKey(model, date, forecast, cycle, ensemble, vpu, outputFile);
+ set_cache_key(cacheKey);
+
+ const _prefix = makePrefix(model, date, forecast, cycle, ensemble, vpu, outputFile);
+ set_prefix(_prefix);
+ });
+
+ const handleChangeModel = useEvent(async (v) => {
+ const opt = firstOpt(v);
+ if (!opt) return;
+
+ set_model(opt.value);
+
+ const datesOptions = await getOptionsFromURL(`outputs/${opt.value}/v2.2_hydrofabric/`);
+ const nextDate = datesOptions[0]?.value ?? '';
+ setAvailableDatesList(datesOptions);
+ set_date(nextDate);
+
+
+ const forecastOptions = await getOptionsFromURL(`outputs/${opt.value}/v2.2_hydrofabric/${nextDate}/`);
+ const nextForecast = forecastOptions[0]?.value ?? '';
+ setForecastOptions(forecastOptions);
+ set_forecast(nextForecast);
+
+ const cycleOptions = await getOptionsFromURL(
+ `outputs/${opt.value}/v2.2_hydrofabric/${nextDate}/${nextForecast}/`
+ );
+ setAvailableCyclesList(cycleOptions);
+
+ const nextCycle = cycleOptions[0]?.value ?? '';
+ set_cycle(nextCycle);
+
+ if (nextForecast === 'medium_range') {
+ const ensembleOptions = await getOptionsFromURL(
+ `outputs/${opt.value}/v2.2_hydrofabric/${nextDate}/${nextForecast}/${nextCycle}/`
+ );
+ setAvailableEnsembleList(ensembleOptions);
+ const nextEns = ensembleOptions[0]?.value ?? '';
+ set_ensemble(nextEns);
+
+ const outputFileOptions = await getOptionsFromURL(
+ `outputs/${opt.value}/v2.2_hydrofabric/${nextDate}/${nextForecast}/${nextCycle}/${nextEns}/${vpu}/ngen-run/outputs/troute/`
+ );
+ setAvailableOutputFiles(outputFileOptions);
+ set_outputFile(outputFileOptions[0]?.value ?? '');
+ } else {
+ setAvailableEnsembleList([]);
+ set_ensemble('');
+
+ const outputFileOptions = await getOptionsFromURL(
+ `outputs/${opt.value}/v2.2_hydrofabric/${nextDate}/${nextForecast}/${nextCycle}/${vpu}/ngen-run/outputs/troute/`
+ );
+ setAvailableOutputFiles(outputFileOptions);
+ set_outputFile(outputFileOptions[0]?.value ?? '');
+ }
+
+ });
+
+ const handleChangeDate = useEvent(async (v) => {
+ const opt = firstOpt(v);
+ if (!opt) return;
+
+ set_date(opt.value);
+
+ const forecastOptions = await getOptionsFromURL(`outputs/${model}/v2.2_hydrofabric/${opt.value}/`);
+ const nextForecast = forecastOptions[0]?.value ?? '';
+ setForecastOptions(forecastOptions);
+ set_forecast(nextForecast);
+
+ const cycleOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${opt.value}/${nextForecast}/`
+ );
+ setAvailableCyclesList(cycleOptions);
+
+ const nextCycle = cycleOptions[0]?.value ?? '';
+ set_cycle(nextCycle);
+
+ if (nextForecast === 'medium_range') {
+ const ensembleOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${opt.value}/${nextForecast}/${nextCycle}/`
+ );
+ setAvailableEnsembleList(ensembleOptions);
+ const nextEns = ensembleOptions[0]?.value ?? '';
+ set_ensemble(nextEns);
+
+ const outputFileOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${opt.value}/${nextForecast}/${nextCycle}/${nextEns}/${vpu}/ngen-run/outputs/troute/`
+ );
+ setAvailableOutputFiles(outputFileOptions);
+ set_outputFile(outputFileOptions[0]?.value ?? '');
+ } else {
+ setAvailableEnsembleList([]);
+ set_ensemble('');
+
+ const outputFileOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${opt.value}/${nextForecast}/${nextCycle}/${vpu}/ngen-run/outputs/troute/`
+ );
+ setAvailableOutputFiles(outputFileOptions);
+ set_outputFile(outputFileOptions[0]?.value ?? '');
+ }
+
+ });
+
+ const handleChangeForecast = useEvent(async (v) => {
+ const opt = firstOpt(v);
+ if (!opt) return;
+
+ set_forecast(opt.value);
+
+ const cycleOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${date}/${opt.value}/`
+ );
+ setAvailableCyclesList(cycleOptions);
+ const nextCycle = cycleOptions[0]?.value ?? '';
+ set_cycle(nextCycle);
+
+ if (opt.value === 'medium_range') {
+ const ensembleOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${date}/${opt.value}/${nextCycle}/`
+ );
+ setAvailableEnsembleList(ensembleOptions);
+ const nextEns = ensembleOptions[0]?.value ?? '';
+ set_ensemble(nextEns);
+
+ const outputFileOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${date}/${opt.value}/${nextCycle}/${nextEns}/${vpu}/ngen-run/outputs/troute/`
+ );
+ setAvailableOutputFiles(outputFileOptions);
+ set_outputFile(outputFileOptions[0]?.value ?? '');
+ } else {
+ setAvailableEnsembleList([]);
+ set_ensemble('');
+
+ const outputFileOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${date}/${opt.value}/${nextCycle}/${vpu}/ngen-run/outputs/troute/`
+ );
+ setAvailableOutputFiles(outputFileOptions);
+ set_outputFile(outputFileOptions[0]?.value ?? '');
+ }
+ });
+
+ const handleChangeCycle = useEvent(async (v) => {
+ const opt = firstOpt(v);
+ if (!opt) return;
+
+ set_cycle(opt.value);
+
+ if (forecast === 'medium_range') {
+ const ensembleOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${date}/${forecast}/${opt.value}/`
+ );
+ setAvailableEnsembleList(ensembleOptions);
+ const nextEns = ensembleOptions[0]?.value ?? '';
+ set_ensemble(nextEns);
+
+ const outputFileOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${date}/${forecast}/${opt.value}/${nextEns}/${vpu}/ngen-run/outputs/troute/`
+ );
+ setAvailableOutputFiles(outputFileOptions);
+ set_outputFile(outputFileOptions[0]?.value ?? '');
+ } else {
+ setAvailableEnsembleList([]);
+ set_ensemble('');
+
+ const outputFileOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${date}/${forecast}/${opt.value}/${vpu}/ngen-run/outputs/troute/`
+ );
+ setAvailableOutputFiles(outputFileOptions);
+ set_outputFile(outputFileOptions[0]?.value ?? '');
+ }
+ });
+
+ const handleChangeEnsemble = useEvent(async (v) => {
+ const opt = firstOpt(v);
+ if (!opt) return;
+
+ set_ensemble(opt.value);
+
+ const outputFileOptions = await getOptionsFromURL(
+ `outputs/${model}/v2.2_hydrofabric/${date}/${forecast}/${cycle}/${opt.value}/${vpu}/ngen-run/outputs/troute/`
+ );
+ setAvailableOutputFiles(outputFileOptions);
+ set_outputFile(outputFileOptions[0]?.value ?? '');
+ });
+
+ const handleChangeOutputFile = useEvent((v) => {
+ const opt = firstOpt(v);
+ if (!opt) return;
+ set_outputFile(opt.value);
+ });
+
+ // -------------------- selected values --------------------
+ const selectedDateOption = useMemo(
+ () =>
+ availableDatesList.find((opt) => opt.value === date) ??
+ availableDatesList[0] ??
+ null,
+ [date, availableDatesList]
+ );
+
+ const selectedForecastOption = useMemo(
+ () =>
+ availableForecastList.find((opt) => opt.value === forecast) ??
+ availableForecastList[0] ??
+ null,
+ [forecast, availableForecastList]
+ );
+
+ const selectedModelOption = useMemo(
+ () =>
+ availableModelsList.find((opt) => opt.value === model) ??
+ availableModelsList[0] ??
+ null,
+ [model, availableModelsList]
+ );
+
+ const selectedCycleOption = useMemo(
+ () =>
+ availableCyclesList.find((opt) => opt.value === cycle) ??
+ availableCyclesList[0] ??
+ null,
+ [availableCyclesList, cycle]
+ );
+
+ const selectedEnsembleOption = useMemo(
+ () =>
+ availableEnsembleList.find((opt) => opt.value === ensemble) ??
+ availableEnsembleList[0] ??
+ null,
+ [availableEnsembleList, ensemble]
+ );
+
+ const selectedOutputFileOption = useMemo(
+ () =>
+ availableOutputFiles.find((opt) => opt.value === outputFile) ??
+ availableOutputFiles[0] ??
+ null,
+ [availableOutputFiles, outputFile]
+ );
+
+ const rows = useMemo(() => {
+ const out = [];
+
+ if (availableModelsList?.length > 0) {
+ out.push({
+ key: 'model',
+ label: (
+ <>
+
+ {rows.map((r) => (
+
+ {r.label}
+
+ ))}
+
+ {availableOutputFiles?.length > 0 ? null : No Outputs Available
}
+
+
+ Update
+
+
+ );
+});
+
+
+function DataMenu() {
+ return (
+ <>
+
+ { availableVariablesList.length > 0 && (
+
+
+
+ )}
+
+ );
+}
+
+
+export default React.memo(VariablesMenu);
\ No newline at end of file
diff --git a/reactapp/features/DataStream/components/map/LayersControl.js b/reactapp/features/DataStream/components/map/LayersControl.js
index b4d71b8..b598f7c 100644
--- a/reactapp/features/DataStream/components/map/LayersControl.js
+++ b/reactapp/features/DataStream/components/map/LayersControl.js
@@ -3,7 +3,7 @@ import { Fragment, useMemo, useState } from 'react';
import { Switch } from '../styles/Styles';
import { IoLayers } from "react-icons/io5";
import { MdInfoOutline } from "react-icons/md";
-import { IconLabel, Row, Title, SButton, Content } from '../styles/Styles';
+import { IconLabel, Row, Title, SButton} from '../styles/Styles';
import { NexusSymbol, CatchmentSymbol, FlowPathSymbol, GaugeSymbol, symbologyColors, CursorSymbol } from '../../lib/layers';
import useTheme from 'hooks/useTheme';
import { LayerInfoModal } from '../Modals';
diff --git a/reactapp/features/DataStream/components/map/MapLayers.js b/reactapp/features/DataStream/components/map/MapLayers.js
index 8d4be59..7b0d383 100644
--- a/reactapp/features/DataStream/components/map/MapLayers.js
+++ b/reactapp/features/DataStream/components/map/MapLayers.js
@@ -69,6 +69,7 @@ export function useFlowPathsLayer({ isFlowPathsVisible, flowpathsLineColor }) {
if (!isFlowPathsVisible) return null;
return (
+ // null
{nexusLayers}
-
- {hovered_feature?.id && (
-
-
- Feature
- {Object.keys(hovered_feature).map((key) => (
-
- {key}
- {hovered_feature[key]}
-
- ))}
-
-
- )}
+
+
+ Feature
+ {rows.map(([k, v]) => (
+
+ {k}
+ {String(v)}
+
+ ))}
+
+
+ );
+});
+
+export default CustomPopUp;
\ No newline at end of file
diff --git a/reactapp/features/DataStream/components/map/SearchBar.js b/reactapp/features/DataStream/components/map/SearchBar.js
index dad4cc8..c4cefaa 100644
--- a/reactapp/features/DataStream/components/map/SearchBar.js
+++ b/reactapp/features/DataStream/components/map/SearchBar.js
@@ -1,122 +1,30 @@
-import React, {useState, useEffect } from 'react';
+import React, {useEffect} from 'react';
import { SearchBarWrapper, SearchIcon, SearchInput } from '../styles/Styles';
import { loadIndexData, getFeatureProperties } from 'features/DataStream/lib/queryData';
import useTimeSeriesStore from 'features/DataStream/store/Timeseries';
import useDataStreamStore from 'features/DataStream/store/Datastream';
import {useFeatureStore} from 'features/DataStream/store/Layers';
-import { getTimeseries, getVariables, checkForTable, loadVpuData } from 'features/DataStream/lib/queryData';
-import { makeTitle } from 'features/DataStream/lib/utils';
-import { getCacheKey } from 'features/DataStream/lib/opfsCache';
-import { makeGpkgUrl } from 'features/DataStream/lib/s3Utils';
-import ResetDataButton from '../forecast/cacheHandler';
-import { toast } from 'react-toastify';
const SearchBar = ({ placeholder = 'Search for an id' }) => {
- // const [searchInput, setSearchInput] = useState('');
+
const hydrofabric_index_url = useDataStreamStore((state) => state.hydrofabric_index);
- const forecast = useDataStreamStore((state) => state.forecast);
- const model = useDataStreamStore((state) => state.model);
- const date = useDataStreamStore((state) => state.date);
- const cycle = useDataStreamStore((state) => state.cycle);
- const time = useDataStreamStore((state) => state.time);
- const vpu = useDataStreamStore((state) => state.vpu);
- const set_variables = useDataStreamStore((state) => state.set_variables);
-
- const set_table = useTimeSeriesStore((state) => state.set_table);
- const variable = useTimeSeriesStore((state) => state.variable);
- const set_series = useTimeSeriesStore((state) => state.set_series);
- const set_layout = useTimeSeriesStore((state) => state.set_layout);
- const set_variable = useTimeSeriesStore((state) => state.set_variable);
+ const set_vpu = useDataStreamStore((state) => state.set_vpu);
+
const feature_id = useTimeSeriesStore((state) => state.feature_id);
const set_feature_id = useTimeSeriesStore((state) => state.set_feature_id);
- const loading = useTimeSeriesStore((state) => state.loading);
- const setLoading = useTimeSeriesStore((state) => state.set_loading);
const set_selected_feature = useFeatureStore((state) => state.set_selected_feature);
const handleChange = async (e) => {
- if (loading) {
- toast.info('Data is already loading, please wait...', { autoClose: 300 });
- return
- };
- setLoading(true);
const unbiased_id = e.target.value;
+ const features = await getFeatureProperties({ cacheKey: 'index_data_table', feature_id: unbiased_id });
+ if (features.length === 0) {
+ return
+ };
+ const feature = features.length > 0 ? features[0] : null;
+ set_selected_feature(feature || null);
+ const vpu_str = `VPU_${feature.vpuid}`;
+ set_vpu(vpu_str);
set_feature_id(unbiased_id);
- const id = unbiased_id.split('-')[1];
- const toastId = toast.loading(`Loading data for id: ${id}...`, {
- closeOnClick: false,
- draggable: false,
- });
- try{
- const features = await getFeatureProperties({ cacheKey: 'index_data_table', feature_id: unbiased_id });
- if (features.length === 0) {
- setLoading(false);
- return
- };
- const feature = features.length > 0 ? features[0] : null;
- set_selected_feature(feature || null);
- const vpu_str = `VPU_${feature.vpuid}`;
- const cacheKey = getCacheKey(
- model,
- date,
- forecast,
- cycle,
- time,
- vpu_str
- );
-
- const tableExists = await checkForTable(cacheKey);
- if (!tableExists) {
- await loadVpuData(
- model,
- date,
- forecast,
- cycle,
- time,
- vpu_str,
- makeGpkgUrl(vpu)
- );
- } else {
- console.log(`Table ${cacheKey} already exists.`);
- }
- const variables = await getVariables({cacheKey});
- const _variable = variable ? variable : variables[0];
- console.log("Using variable:", _variable);
- const series = await getTimeseries(id, cacheKey, _variable);
- const xy = series.map((d) => ({
- x: new Date(d.time),
- y: d[variables[0]],
- }));
- const textToat = `Loaded ${xy.length} points for id: ${id}`;
- set_series(xy);
- set_table(cacheKey);
- set_variables(variables);
- set_variable(_variable);
- set_layout({
- 'yaxis': _variable,
- 'xaxis': "Time",
- 'title': makeTitle(forecast, unbiased_id),
- });
- toast.update(toastId, {
- render: `${textToat}`,
- type: 'success',
- isLoading: false,
- autoClose: 3000,
- closeOnClick: true,
- });
- }
- catch (error) {
- console.error('Error fetching data for feature id:', unbiased_id, error);
- toast.update(toastId, {
- render: `No data for id: ${id}`,
- type: 'warning',
- isLoading: false,
- autoClose: 500,
- closeOnClick: true,
- });
- } finally {
- setLoading(false);
- }
-
}
useEffect(() => {
@@ -130,7 +38,7 @@ const SearchBar = ({ placeholder = 'Search for an id' }) => {
loadSearchData();
return () => {
};
- }, []); // dependencies array
+ }, []);
return (
<>
@@ -144,7 +52,6 @@ const SearchBar = ({ placeholder = 'Search for an id' }) => {
aria-label={placeholder}
/>
-
+ {open ? (
+ <>
+ setIsOpen(prev => !prev)}
+ >
+
+
+
+
+
+ ) : (
+ setIsOpen(prev => !prev)}>
+
+ )}
+
+ );
+};
+
diff --git a/reactapp/features/DataStream/components/menus/ForecastMenu.js b/reactapp/features/DataStream/components/menus/ForecastMenu.js
index e66b57a..642170b 100644
--- a/reactapp/features/DataStream/components/menus/ForecastMenu.js
+++ b/reactapp/features/DataStream/components/menus/ForecastMenu.js
@@ -1,35 +1,46 @@
-import React, { Fragment, useMemo } from 'react';
-import DataMenu from '../forecast/DataMenu';
+import React, { Fragment, useMemo, useCallback } from 'react';
+import DataMenu from '../forecast/dataMenu';
+import VariablesMenu from '../forecast/variablesMenu';
import { Content, Container } from '../styles/Styles';
import TimeSeriesCard from '../forecast/TimeseriesCard';
import useTimeSeriesStore from 'features/DataStream/store/Timeseries';
+import { useVPUStore } from 'features/DataStream/store/Layers';
import { ForecastHeader } from '../forecast/ForecastHeader';
import { FeatureInformation } from '../forecast/FeatureInformation';
+import { TimeSlider } from '../forecast/TimeSlider';
+import { useShallow } from 'zustand/react/shallow';
const ForecastMenu = () => {
+ const { feature_id, layout, reset } = useTimeSeriesStore(
+ useShallow((state) => ({
+ feature_id: state.feature_id,
+ layout: state.layout,
+ reset: state.reset,
+ }))
+ );
+ const { resetVPU } = useVPUStore(
+ useShallow((state) => ({
+ resetVPU: state.resetVPU,
+ }))
+ );
- // const feature_id = useTimeSeriesStore((state) => state.feature_id);
- const series = useTimeSeriesStore((state) => state.series);
- const layout = useTimeSeriesStore((state) => state.layout);
- const reset_ts_store = useTimeSeriesStore((state) => state.reset);
const isopen = useMemo(() => {
- // return feature_id ? true : false;
- return series.length > 0;
- // }, [feature_id]);
- }, [series]);
-
- // const set_feature_id = useTimeSeriesStore((state) => state.set_feature_id);
+ return feature_id != null;
+ }, [feature_id]);
+ const onReset = useCallback(() => {
+ reset();
+ resetVPU();
+ }, [reset, resetVPU]);
+
return (
-
-
+
{layout?.title && (
{set_feature_id(null)}}
- onClick={()=> {reset_ts_store()}}
+ onClick={onReset}
/>
)}
@@ -39,8 +50,12 @@ const ForecastMenu = () => {
-
+
+
diff --git a/reactapp/features/DataStream/components/menus/LayersMenu.js b/reactapp/features/DataStream/components/menus/LayersMenu.js
index cf5ba02..5beed11 100644
--- a/reactapp/features/DataStream/components/menus/LayersMenu.js
+++ b/reactapp/features/DataStream/components/menus/LayersMenu.js
@@ -1,10 +1,11 @@
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
import { LayerControl } from '../map/LayersControl';
import { LayersContainer, LayerButton } from '../styles/Styles';
import { IoLayers, IoClose } from "react-icons/io5";
export const LayersMenu = () => {
const [open, setIsOpen] = useState(false);
+ const toggle = useCallback(() => setIsOpen(o => !o), []);
return (
@@ -12,7 +13,7 @@ export const LayersMenu = () => {
<>
setIsOpen(prev => !prev)}
+ onClick={toggle}
>
diff --git a/reactapp/features/DataStream/components/menus/MainMenu.js b/reactapp/features/DataStream/components/menus/MainMenu.js
index b8f2de3..83bee43 100644
--- a/reactapp/features/DataStream/components/menus/MainMenu.js
+++ b/reactapp/features/DataStream/components/menus/MainMenu.js
@@ -1,13 +1,14 @@
import React, { Fragment } from 'react';
import ForecastMenu from 'features/DataStream/components/menus/ForecastMenu';
import { LayersMenu } from './LayersMenu';
-
+import { CacheMenu } from './CacheMenu';
const MainMenu = () => {
return (
);
};
diff --git a/reactapp/features/DataStream/components/styles/Styles.js b/reactapp/features/DataStream/components/styles/Styles.js
index 38b0e56..251e8ef 100644
--- a/reactapp/features/DataStream/components/styles/Styles.js
+++ b/reactapp/features/DataStream/components/styles/Styles.js
@@ -10,7 +10,7 @@ export const TimeSeriesContainer = styled.div`
background-color: var(--panel-background);
`;
-// Themed Modal wrapper – now fully CSS-variable based
+// Themed Modal wrapper - now fully CSS-variable based
export const ThemedModal = styled(Modal)`
.modal-content {
background-color: var(--modal-bg);
@@ -122,6 +122,51 @@ export const LayersContainer = styled.div`
}
`;
+export const CacheTableContainer = styled.div`
+ position: absolute;
+ top: calc(var(--ts-header-height) + 300px);
+ right: 10px;
+ // height: 300px;
+ overflow-y: scroll;
+ width: 250px;
+ padding: 15px;
+ background-color: var(--map-panel-bg);
+ color: var(--map-panel-text);
+ z-index: 1000;
+ border-radius: 8px;
+ font-size: 13px;
+ transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ @media (max-width: 768px) {
+ width: 100%;
+ border-radius: 0;
+ }
+`;
+export const CacheButton = styled(Button)`
+ top: 360px;
+ right: 1%;
+ position: absolute;
+ margin-top: 10px;
+ transition: transform 0.3s ease;
+
+ background-color: ${({ $bgColor = 'var(--button-primary-bg)' }) =>
+ $bgColor};
+ border: none;
+ color: var(--accent-text);
+ border-radius: 20px;
+ padding: 7px 8px;
+ z-index: 1001;
+
+ &:hover,
+ &:focus {
+ color: var(--hover-text);
+ background-color: ${({ $bgColor = 'var(--button-primary-bg)' }) => $bgColor};
+ border: none;
+ box-shadow: none;
+ }
+`;
+
export const LayerButton = styled(Button)`
top: 60px;
right: 1%;
@@ -147,16 +192,14 @@ export const LayerButton = styled(Button)`
`;
export const XButton = styled(Button)`
- background-color: var(--button-primary-bg);
- color: var(--accent-text);
- border-radius: 8px;
+ background: var(--accent-text, #0a0e14);
+ border: 1px solid var(--border-color, #2a3a4a);
+ border-radius: var(--radius-sm, 4px);
+ color: var(--primary-color);
padding: 7px 8px;
width: 100%;
z-index: 1001;
box-shadow: none;
- border-radius: 20px;
- border-color: transparent;
- border: none;
&:hover,
&:focus {
background-color: var(--button-primary-hover-bg);
diff --git a/reactapp/features/DataStream/lib/data.js b/reactapp/features/DataStream/lib/data.js
index a58f5f5..4406a2b 100644
--- a/reactapp/features/DataStream/lib/data.js
+++ b/reactapp/features/DataStream/lib/data.js
@@ -1,56 +1,3 @@
-
-export const availableModelsList = [
- { value: 'cfe_nom', label: 'cfe_nom' },
- { value: 'lstm', label: 'lstm' },
-];
-export const availableForecastList = [
- { value: 'short_range', label: 'short_range' },
- // { value: 'medium_range', label: 'medium_range' },
- { value: 'analysis_assim_extend', label: 'analysis_assim_extend' },
-];
-
-export const availableCyclesList = {
- short_range: [
- { value: '00', label: '00' },
- { value: '01', label: '01' },
- { value: '02', label: '02' },
- { value: '03', label: '03' },
- { value: '04', label: '04' },
- { value: '05', label: '05' },
- { value: '06', label: '06' },
- { value: '07', label: '07' },
- { value: '08', label: '08' },
- { value: '09', label: '09' },
- { value: '10', label: '10' },
- { value: '11', label: '11' },
- { value: '12', label: '12' },
- { value: '13', label: '13' },
- { value: '14', label: '14' },
- { value: '15', label: '15' },
- { value: '16', label: '16' },
- { value: '17', label: '17' },
- { value: '18', label: '18' },
- { value: '19', label: '19' },
- { value: '20', label: '20' },
- { value: '21', label: '21' },
- { value: '22', label: '22' },
- { value: '23', label: '23' }
- ],
- medium_range: [
- { value: '00', label: '00' },
- { value: '06', label: '06' },
- { value: '12', label: '12' },
- { value: '18', label: '18' }
- ],
- analysis_assim_extend: [{ value: '16', label: '16' }],
-};
-
-export const availableEnsembleList = {
- short_range: [],
- medium_range: [{ value: '1', label: '1' }],
- analysis_assim_extend: [],
-};
-
export const FEATURE_PROPERTIES = {
'tot_drainage_areasqkm': 'Total Drainage Area (km2)',
'areasqkm': 'Area (km2)',
diff --git a/reactapp/features/DataStream/lib/layers.js b/reactapp/features/DataStream/lib/layers.js
index 5b4dc1b..e3d1f1c 100644
--- a/reactapp/features/DataStream/lib/layers.js
+++ b/reactapp/features/DataStream/lib/layers.js
@@ -1,3 +1,34 @@
+// --- Read CSS variables for map styles/colors ---
+const rootStyles = getComputedStyle(document.documentElement);
+
+export const mapStyleUrl =
+ rootStyles.getPropertyValue('--map-style-url').trim() ||
+ 'https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/styles/light-style.json';
+
+export const dividesOutlineColor =
+ rootStyles.getPropertyValue('--map-divides-outline-color').trim() ||
+ 'rgba(91, 44, 111, 0.5)';
+export const dividesHighlightFillColor =
+ rootStyles.getPropertyValue('--map-divides-highlight-fill').trim() ||
+ 'rgba(5, 49, 243, 0.32)';
+export const dividesHighlightOutlineColor =
+ rootStyles.getPropertyValue('--map-divides-highlight-outline').trim() ||
+ 'rgba(253, 0, 253, 0.7)';
+
+export const flowpathsLineColor =
+ rootStyles.getPropertyValue('--map-flowpaths-color').trim() || '#000000';
+
+export const gaugesCircleColor =
+ rootStyles.getPropertyValue('--map-gauges-color').trim() || '#646464';
+
+export const nexusCircleColor =
+ rootStyles.getPropertyValue('--map-nexus-circle-color').trim() || '#1f78b4';
+export const nexusStrokeColor =
+ rootStyles.getPropertyValue('--map-nexus-stroke-color').trim() || '#ffffff';
+export const nexusHighlightCircleColor =
+ rootStyles.getPropertyValue('--map-nexus-highlight-circle-color').trim() ||
+ nexusCircleColor;
+
export const reorderLayers = (map) => {
if (!map) return;
// Draw order from bottom → top
@@ -373,6 +404,23 @@ export const EnsembleIcon = (props) => (
);
+export const FileIcon = (props) => (
+
+
+);
+
// Variable: axes + curve
export const VariableIcon = (props) => (
@@ -398,4 +446,95 @@ export const VariableIcon = (props) => (
strokeLinejoin="round"
/>
-);
\ No newline at end of file
+);
+
+export function getValueAtTimeFlat(varData, numTimes, featureIndex, timeIndex) {
+ if (!varData || featureIndex === undefined || featureIndex === null) return null;
+ const idx = featureIndex * numTimes + timeIndex;
+ if (idx < 0 || idx >= varData.length) return null;
+ return varData[idx];
+}
+
+export function valueToColor(value, bounds) {
+ const colorScale = [
+ [0, 119, 187],
+ [0, 180, 216],
+ [144, 224, 239],
+ [255, 186, 8],
+ [255, 107, 53],
+ [208, 0, 0],
+ ];
+ if (value === null || value === undefined || value <= -9998) return [100, 100, 100, 150];
+ if (!bounds || bounds.max === bounds.min) return colorScale[0];
+
+ const t = Math.max(0, Math.min(1, (value - bounds.min) / (bounds.max - bounds.min)));
+ const idx = t * (colorScale.length - 1);
+ const lower = Math.floor(idx);
+ const upper = Math.ceil(idx);
+ const frac = idx - lower;
+ if (lower === upper) return colorScale[lower];
+ return colorScale[lower].map((c, i) => Math.round(c + (colorScale[upper][i] - c) * frac));
+}
+
+export function computeBounds(varData) {
+ let min = Infinity, max = -Infinity;
+ for (let i = 0; i < varData.length; i++) {
+ const v = varData[i];
+ if (v <= -9998) continue;
+ if (v < min) min = v;
+ if (v > max) max = v;
+ }
+ if (!isFinite(min) || !isFinite(max)) return { min: 0, max: 1 };
+ return { min, max };
+}
+
+
+export function convertFeaturesToPaths(features, featureIdToIndex) {
+ const out = [];
+
+ for (const f of features) {
+ const rawId = f.id ?? f.properties?.id;
+ if (rawId == null) continue;
+
+ const id = String(rawId);
+ const featureIndex = featureIdToIndex[id];
+ if (featureIndex === undefined) continue;
+
+ const geom = f.geometry;
+ if (!geom) continue;
+
+ if (geom.type === "LineString") {
+ out.push({ id, featureIndex, path: geom.coordinates, properties: f.properties });
+ } else if (geom.type === "MultiLineString") {
+ geom.coordinates.forEach((line, i) => {
+ out.push({ id: `${id}-${i}`, featureIndex, path: line, properties: f.properties });
+ });
+ }
+ }
+
+ return out;
+}
+
+export function flowpathsSignature(features) {
+ const parts = [];
+
+ for (const f of features) {
+ const rawId = f.id ?? f.properties?.id;
+ if (rawId == null) continue;
+
+ const id = String(rawId);
+ const g = f.geometry;
+ if (!g) continue;
+
+ if (g.type === "LineString") {
+ parts.push(`${id}:L:${g.coordinates.length}`);
+ } else if (g.type === "MultiLineString") {
+ const lines = g.coordinates.length;
+ const totalPts = g.coordinates.reduce((sum, line) => sum + line.length, 0);
+ parts.push(`${id}:M:${lines}:${totalPts}`);
+ }
+ }
+
+ parts.sort(); // make stable regardless of render order
+ return parts.join("|");
+}
diff --git a/reactapp/features/DataStream/lib/opfsCache.js b/reactapp/features/DataStream/lib/opfsCache.js
index 7c3fbc3..0795b85 100644
--- a/reactapp/features/DataStream/lib/opfsCache.js
+++ b/reactapp/features/DataStream/lib/opfsCache.js
@@ -1,5 +1,12 @@
const CACHE_DIR = "nrds-arrow-cache";
-
+function formatBytes(bytes, decimals = 2) {
+ if (bytes === 0) return '0 Bytes';
+ const k = 1024;
+ const dm = decimals < 0 ? 0 : decimals;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
async function getCacheDir() {
if (!("storage" in navigator) || !navigator.storage.getDirectory) {
// OPFS not supported (e.g., non-Chromium / http)
@@ -34,6 +41,8 @@ export async function saveArrowToCache(key, buffer) {
await writable.write(dataToWrite);
await writable.close();
+ const file = await fileHandle.getFile();
+ return formatBytes(file.size);
}
export async function loadArrowFromCache(key) {
@@ -50,10 +59,57 @@ export async function loadArrowFromCache(key) {
}
}
+async function* getFilesRecursively(entry) {
+ if (entry.kind === "file") {
+ const file = await entry.getFile();
+ if (file !== null) {
+ yield file;
+ }
+ } else if (entry.kind === "directory") {
+ for await (const handle of entry.values()) {
+ yield* getFilesRecursively(handle);
+ }
+ }
+}
+
+
+export async function getFilesFromCache() {
+ const dir = await getCacheDir();
+ if (!dir) return null;
+ const files = [];
+ const fileHandlers = await getFilesRecursively(dir);
+
+ for await (const file of fileHandlers) {
+ const id = decodeURIComponent(file.name.replace(".arrow", ""));
+ files.push({id: id, name: id.replaceAll("_", "/"), size: formatBytes(file.size)});
+ }
+ return files;
+}
+
+export async function deleteFileFromCache(key) {
+ const dir = await getCacheDir();
+ if (!dir) return;
+ const safeName = encodeURIComponent(key) + ".arrow";
+ try {
+ await dir.removeEntry(safeName);
+ return true;
+ } catch (e) {
+ console.error("Error deleting file from cache:", e);
+ return false;
+ }
+}
+
+export async function clearCache() {
+ const dir = await getCacheDir();
+ if (!dir) return;
+ for await (const handle of dir.values()) {
+ await dir.removeEntry(handle.name);
+ }
+}
-export function getCacheKey(model, date, forecast, cycle, time, vpu) {
- if (!time){
- return `${model}_${date}_${forecast}_${cycle}_${vpu}`.replace(/\./g,'_').replace(/\//g,'_');
+export function getCacheKey(model, date, forecast, cycle, ensemble, vpu, outputFile) {
+ if (!ensemble){
+ return `${model}_${date}_${forecast}_${cycle}_${vpu}_${outputFile}`.replace(/\./g,'_').replace(/\//g,'_');
}
- return `${model}_${date}_${forecast}_${cycle}_${time}_${vpu}`.replace(/\./g,'_').replace(/\//g,'_');
+ return `${model}_${date}_${forecast}_${cycle}_${ensemble}_${vpu}_${outputFile}`.replace(/\./g,'_').replace(/\//g,'_');
}
diff --git a/reactapp/features/DataStream/lib/queryData.js b/reactapp/features/DataStream/lib/queryData.js
index 10be185..ad26c41 100644
--- a/reactapp/features/DataStream/lib/queryData.js
+++ b/reactapp/features/DataStream/lib/queryData.js
@@ -1,7 +1,7 @@
// // nexusTimeseries.js
import { tableFromIPC } from "apache-arrow";
import appAPI from "features/Tethys/services/api/app";
-import { saveArrowToCache, loadArrowFromCache, getCacheKey } from "./opfsCache";
+import { saveArrowToCache, loadArrowFromCache } from "./opfsCache";
import { getConnection } from "./duckdbClient";
import { getNCFiles } from "./s3Utils";
@@ -15,6 +15,12 @@ export async function getTimeseries(id, cacheKey, variable) {
WHERE feature_id = ${id}
ORDER BY time
`);
+ console.log("Query executed:", `
+ SELECT time, ${variable}
+ FROM ${cacheKey}
+ WHERE feature_id = ${id}
+ ORDER BY time
+ `);
const rows = q.toArray().map(Object.fromEntries);
rows.columns = q.schema.fields.map((d) => d.name);
@@ -24,11 +30,32 @@ export async function getTimeseries(id, cacheKey, variable) {
);
return rows;
} finally {
- // 🔑 make sure the connection is always closed
await conn.close();
}
}
+export async function getFeatureIDs(cacheKey) {
+ console.log("getFeatureIDs called with cacheKey:", cacheKey);
+
+ const conn = await getConnection();
+
+ try {
+ const q = await conn.query(`
+ SELECT feature_id
+ FROM "${cacheKey}"
+ `);
+
+ const rows = q.toArray().map(Object.fromEntries);
+ rows.columns = q.schema.fields.map((d) => d.name);
+
+ console.log(
+ `[updateDataInfo] (literal) rows=${rows.length}`
+ );
+ return rows;
+ } finally {
+ await conn.close();
+ }
+}
export async function loadIndexData({ remoteUrl }) {
const cacheKey = "index_data_table";
@@ -95,30 +122,22 @@ export async function getFeatureProperties({ cacheKey, feature_id }) {
export async function loadVpuData(
- model,
- date,
- forecast,
- cycle,
- time,
- vpu,
+ cacheKey,
+ prefix,
vpu_gpkg
) {
- const cacheKey = getCacheKey(model, date, forecast, cycle, time, vpu);
console.log("loadVpuData called with cacheKey:", cacheKey);
let buffer = await loadArrowFromCache(cacheKey);
-
+ let fileSize;
if (!buffer) {
- const nc_files = await getNCFiles(model, date, forecast, cycle, time, vpu);
- if (nc_files.length === 0) {
- throw new Error(`No NC files found for VPU ${vpu} with prefix.`);
- }
+ const ncFile = getNCFiles(prefix);
const res = await appAPI.getParquetPerVpu({
- nc_files,
+ ncFile,
vpu_gpkg,
});
buffer = res; // ArrayBuffer from axios
- await saveArrowToCache(cacheKey, buffer);
+ fileSize = await saveArrowToCache(cacheKey, buffer);
}
const arrowTable = tableFromIPC(new Uint8Array(buffer));
@@ -144,6 +163,7 @@ export async function loadVpuData(
}
} finally {
await conn.close();
+ return fileSize;
}
}
@@ -162,6 +182,19 @@ export async function checkForTable(cacheKey) {
await conn.close();
}
}
+
+export async function deleteTable(tableName){
+ const conn = await getConnection();
+ try {
+ await conn.query(`
+ DROP TABLE IF EXISTS "${tableName}"
+ `);
+ console.log(`Table ${tableName} has been deleted.`);
+ } finally {
+ await conn.close();
+ }
+}
+
export async function dropAllVpuDataTables() {
const conn = await getConnection();
@@ -223,3 +256,55 @@ export async function getVariables({ cacheKey }) {
}
+function rowsToObjects(q) {
+ // matches your pattern: q.toArray().map(Object.fromEntries)
+ return q.toArray().map(Object.fromEntries);
+}
+
+export async function getDistinctFeatureIds(cacheKey) {
+ const conn = await getConnection();
+ try {
+ const q = await conn.query(`
+ SELECT DISTINCT feature_id
+ FROM "${cacheKey}"
+ ORDER BY feature_id
+ `);
+ const rows = rowsToObjects(q);
+ return rows.map((r) => r.feature_id);
+ } finally {
+ await conn.close();
+ }
+}
+
+export async function getDistinctTimes(cacheKey) {
+ const conn = await getConnection();
+ try {
+ const q = await conn.query(`
+ SELECT DISTINCT time
+ FROM "${cacheKey}"
+ ORDER BY time
+ `);
+ const rows = rowsToObjects(q);
+ return rows.map((r) => r.time);
+ } finally {
+ await conn.close();
+ }
+}
+
+// Returns a flattened array ordered by (feature_id, time)
+export async function getVpuVariableFlat(cacheKey, variable) {
+ const conn = await getConnection();
+ try {
+ const q = await conn.query(`
+ SELECT ${variable} AS v
+ FROM "${cacheKey}"
+ ORDER BY feature_id, time
+ `);
+ const rows = rowsToObjects(q);
+ return Float32Array.from(rows.map((r) => Number(r.v)));
+ } finally {
+ await conn.close();
+ }
+}
+
+
diff --git a/reactapp/features/DataStream/lib/s3Utils.js b/reactapp/features/DataStream/lib/s3Utils.js
index d721143..da485ce 100644
--- a/reactapp/features/DataStream/lib/s3Utils.js
+++ b/reactapp/features/DataStream/lib/s3Utils.js
@@ -1,18 +1,16 @@
-import { getCacheKey, loadArrowFromCache } from "./opfsCache";
-
-export async function listPublicS3Directories(prefix = "v2.2/") {
+export async function listPublicS3Directories(prefix = "v2.2/", { signal } = {}) {
const bucket = "ciroh-community-ngen-datastream";
// Ensure trailing slash
const normalizedPrefix = prefix.endsWith("/") ? prefix : `${prefix}/`;
- // S3 ListObjectsV2 with delimiter to get “folders”
+ // S3 ListObjectsV2 with delimiter to get "folders"
const url =
`https://${bucket}.s3.us-east-1.amazonaws.com/` +
`?list-type=2&prefix=${encodeURIComponent(normalizedPrefix)}` +
`&delimiter=/`;
- const resp = await fetch(url);
+ const resp = await fetch(url, { signal });
if (!resp.ok) {
throw new Error(`S3 list error: ${resp.status} ${resp.statusText}`);
}
@@ -40,42 +38,88 @@ export async function listPublicS3Directories(prefix = "v2.2/") {
return { fullPrefixes, childNames };
}
-export async function listPublicS3Files(prefix = "v2.2/") {
+export async function listPublicS3Files(prefix = "v2.2/", { signal } = {}) {
const bucket = "ciroh-community-ngen-datastream";
const url =
`https://${bucket}.s3.us-east-1.amazonaws.com` +
`/?list-type=2&prefix=${encodeURIComponent(prefix)}`;
- const resp = await fetch(url);
+ const resp = await fetch(url,{ signal });
+ if (!resp.ok) {
+ throw new Error(`S3 list error: ${resp.status} ${resp.statusText}`);
+ }
const xml = await resp.text();
// parse XML -> extract elements
const parser = new DOMParser();
const doc = parser.parseFromString(xml, "application/xml");
const contents = [...doc.getElementsByTagName("Contents")];
-
return contents.map(node => node.getElementsByTagName("Key")[0].textContent);
}
-export const makePrefix = (model, avail_date,ngen_forecast,ngen_cycle, ngen_time, ngen_vpu) => {
+export async function getOptionsFromURL(url, { signal } = {}) {
+ try{
+ if (url.split('/').includes('troute')){
+ const files = await listPublicS3Files(url, { signal });
+ const ncFiles = files.filter(f => f.endsWith('.nc'));
+ // const ncFilesParsed = ncFiles.map(f => `s3://ciroh-community-ngen-datastream/${f}`);
+ const options = ncFiles.map((d) => ({ value: d.split('/').pop(), label: d.split('/').pop() }));
+ const sortedOptions = Array.from(options).sort().reverse();
+ return sortedOptions;
+ }
+ const { childNames } = await listPublicS3Directories(url, { signal });
+ const options = childNames.map((d) => ({ value: d, label: d }));
+ const sortedOptions = Array.from(options).sort();
+ return sortedOptions;
+ }catch(error){
+ return [];
+ }
+
+}
+
+export const makePrefix = (model, avail_date,ngen_forecast,ngen_cycle, ngen_ensemble, ngen_vpu, outputFile) => {
let prefix_path = `outputs/${model}/v2.2_hydrofabric/${avail_date}/${ngen_forecast}/${ngen_cycle}`
- let time_path = ngen_time ? `${ngen_time}/` : '';
- prefix_path = `${prefix_path}/${time_path}${ngen_vpu}/ngen-run/outputs/troute/`;
+ let ensemble_path = ngen_ensemble ? `${ngen_ensemble}/` : '';
+ prefix_path = `${prefix_path}/${ensemble_path}${ngen_vpu}/ngen-run/outputs/troute/${outputFile}`;
return prefix_path;
}
-export async function getNCFiles(model, date, forecast, cycle, time, vpu, buffer) {
- if (buffer){ return []; }
- const prefix = makePrefix(model, date, forecast, cycle, time, vpu);
- const filesPrefix = await listPublicS3Files(prefix);
- console.log("files_prefix", filesPrefix);
- const ncFiles = filesPrefix.filter(f => f.endsWith('.nc'));
- const ncFilesParsed = ncFiles.map(f => `s3://ciroh-community-ngen-datastream/${f}`);
- return ncFilesParsed;
+// export function getNCFiles(model, date, forecast, cycle, time, vpu, outputFile) {
+export function getNCFiles(prefix) {
+ // const prefix = makePrefix(model, date, forecast, cycle, time, vpu);
+ // const ncFileParsed = `s3://ciroh-community-ngen-datastream/${prefix}${outputFile}`;
+ const ncFileParsed = `s3://ciroh-community-ngen-datastream/${prefix}`;
+ return ncFileParsed
}
export const makeGpkgUrl = (vpu) => {
const vpu_gpkg = `s3://ciroh-community-ngen-datastream/v2.2_resources/${vpu}/config/nextgen_${vpu}.gpkg`;
return vpu_gpkg;
-}
\ No newline at end of file
+}
+
+export const initialS3Data = async(vpu, { signal } = {}) => {
+ let _models = await getOptionsFromURL(`outputs`, { signal });
+ if (_models.length === 0){
+ return {models: [], dates: [], forecasts: [], cycles: [], outputFiles: []};
+ }
+ const models = _models.filter(m => m.value !== 'test');
+ const dates = (await getOptionsFromURL(`outputs/${models[0]?.value}/v2.2_hydrofabric/`, { signal })).reverse();
+ if (dates.length === 0){
+ return {models, dates: [], forecasts: [], cycles: [], outputFiles: []};
+ }
+ const forecasts = (await getOptionsFromURL(`outputs/${models[0]?.value}/v2.2_hydrofabric/${dates[1]?.value}/`, { signal })).reverse();
+ if (forecasts.length === 0){
+ return {models, dates, forecasts: [], cycles: [], outputFiles: []};
+ }
+ const cycles = await getOptionsFromURL(`outputs/${models[0]?.value}/v2.2_hydrofabric/${dates[1]?.value}/${forecasts[0]?.value}/`, { signal });
+ if (cycles.length === 0){
+ return {models, dates, forecasts, cycles: [], outputFiles: []};
+ }
+ if (!vpu) {
+ return {models, dates, forecasts, cycles, outputFiles: []};
+ }
+ const outputFiles = await getOptionsFromURL(`outputs/${models[0]?.value}/v2.2_hydrofabric/${dates[1]?.value}/${forecasts[0]?.value}/${cycles[0]?.value}/${vpu}/ngen-run/outputs/troute/`, { signal });
+ return {models, dates, forecasts, cycles, outputFiles};
+}
+
diff --git a/reactapp/features/DataStream/store/CacheTables.js b/reactapp/features/DataStream/store/CacheTables.js
new file mode 100644
index 0000000..4d777bb
--- /dev/null
+++ b/reactapp/features/DataStream/store/CacheTables.js
@@ -0,0 +1,31 @@
+import {create} from 'zustand';
+import { deleteFileFromCache, clearCache } from '../lib/opfsCache';
+import { deleteTable, dropAllVpuDataTables } from '../lib/queryData';
+
+const EMPTY_TABLE = []
+
+export const useCacheTablesStore = create((set) => ({
+ cacheTables: EMPTY_TABLE,
+ add_cacheTable: (newCacheTable) => set((state) => ({
+ cacheTables: [...state.cacheTables, newCacheTable],
+ })),
+ delete_cacheTable: async (tableId) =>
+ {
+ await deleteFileFromCache(tableId);
+ await deleteTable(tableId);
+ set(
+ (state) => ({
+ cacheTables: state.cacheTables.filter(
+ (table) => table.id !== tableId
+ ),
+ })
+ )
+ },
+ reset: async () => {
+ await dropAllVpuDataTables();
+ await clearCache();
+ set({ cacheTables: EMPTY_TABLE });
+ },
+
+ set_cacheTables: (newCacheTables) => set({ cacheTables: newCacheTables }),
+}));
\ No newline at end of file
diff --git a/reactapp/features/DataStream/store/Datastream.js b/reactapp/features/DataStream/store/Datastream.js
index 1e498e4..503c4bf 100644
--- a/reactapp/features/DataStream/store/Datastream.js
+++ b/reactapp/features/DataStream/store/Datastream.js
@@ -1,50 +1,70 @@
import { create } from 'zustand';
import { getYesterdayDateString } from '../lib/utils';
-// Define the store
+const DEFAULTS = {
+ bucket: "ciroh-community-ngen-datastream",
+ nexus_pmtiles: "https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/nexus.pmtiles",
+ community_pmtiles: "https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/merged.pmtiles",
+ hydrofabric_index: "https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/hydrofabric_index.parquet",
+ cache_key: null,
+ vpu: null,
+ model: "cfe_nom",
+ date: `ngen.${getYesterdayDateString()}`,
+ forecast: "analysis_assim_extend",
+ ensemble: null,
+ cycle: "00",
+ outputFile: null,
+ variables: [],
+};
+
+const sameArrayValues = (a, b) => {
+ if (a === b) return true;
+ if (!Array.isArray(a) || !Array.isArray(b)) return false;
+ if (a.length !== b.length) return false;
+ for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+ return true;
+};
+
const useDataStreamStore = create((set) => ({
- bucket: 'ciroh-community-ngen-datastream',
- nexus_pmtiles: 'https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/nexus.pmtiles',
- community_pmtiles: 'https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/merged.pmtiles',
- hydrofabric_index: 'https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/hydrofabric_index.parquet',
- cache_key: null,
- vpu: `VPU_01`,
- model: 'cfe_nom',
- date: `ngen.${getYesterdayDateString()}`,
- dates: [],
- forecast: 'short_range',
- time: null,
- cycle: '00',
- variables: [],
+ ...DEFAULTS,
+ set_bucket: (bucket) => set((s) => (s.bucket === bucket ? s : { bucket })),
+ set_cache_key: (cache_key) => set((s) => (s.cache_key === cache_key ? s : { cache_key })),
+ set_vpu: (vpu) => set((s) => (s.vpu === vpu ? s : { vpu })),
+ set_date: (date) => set((s) => (s.date === date ? s : { date })),
+ set_forecast: (forecast) => set((s) => (s.forecast === forecast ? s : { forecast })),
+ set_ensemble: (ensemble) => set((s) => (s.ensemble === ensemble ? s : { ensemble })),
+ set_cycle: (cycle) => set((s) => (s.cycle === cycle ? s : { cycle })),
+ set_model: (model) => set((s) => (s.model === model ? s : { model })),
+ set_outputFile: (outputFile) =>
+ set((s) => (s.outputFile === outputFile ? s : { outputFile })),
+ set_nexus_pmtiles: (nexus_pmtiles) =>
+ set((s) => (s.nexus_pmtiles === nexus_pmtiles ? s : { nexus_pmtiles })),
+ set_community_pmtiles: (community_pmtiles) =>
+ set((s) => (s.community_pmtiles === community_pmtiles ? s : { community_pmtiles })),
+ set_hydrofabric_index: (hydrofabric_index) =>
+ set((s) => (s.hydrofabric_index === hydrofabric_index ? s : { hydrofabric_index })),
+ set_variables: (variables) =>
+ set((s) => (sameArrayValues(s.variables, variables) ? s : { variables })),
+ reset: () =>
+ set((s) => {
+ const already =
+ s.bucket === DEFAULTS.bucket &&
+ s.nexus_pmtiles === DEFAULTS.nexus_pmtiles &&
+ s.community_pmtiles === DEFAULTS.community_pmtiles &&
+ s.hydrofabric_index === DEFAULTS.hydrofabric_index &&
+ s.cache_key === DEFAULTS.cache_key &&
+ s.vpu === DEFAULTS.vpu &&
+ s.model === DEFAULTS.model &&
+ s.date === DEFAULTS.date &&
+ s.forecast === DEFAULTS.forecast &&
+ s.ensemble === DEFAULTS.ensemble &&
+ s.cycle === DEFAULTS.cycle &&
+ s.outputFile === DEFAULTS.outputFile &&
+ sameArrayValues(s.variables, DEFAULTS.variables);
- set_bucket: (newBucket) => set({ bucket: newBucket }),
- set_cache_key: (newCacheKey) => set({ cache_key: newCacheKey }),
- set_vpu: (newVpu) => set({ vpu: newVpu }),
- set_date: (newDate) => set({ date: newDate }),
- set_forecast: (newForecast) => set({ forecast: newForecast }),
- set_time: (newTime) => set({ time: newTime }),
- set_cycle: (newCycle) => set({ cycle: newCycle }),
- set_model: (newModel) => set({ model: newModel }),
- set_nexus_pmtiles: (newNexusPmtiles) => set({ nexus_pmtiles: newNexusPmtiles }),
- set_community_pmtiles: (newCommunityPmtiles) => set({ community_pmtiles: newCommunityPmtiles }),
- set_hydrofabric_index: (newHydrofabricIndex) => set({ hydrofabric_index: newHydrofabricIndex }),
- set_variables: (newVariables) => set({ variables: newVariables }),
- set_dates: (newDates) => set({ dates: newDates }),
- reset: () => set({
- bucket: 'ciroh-community-ngen-datastream',
- nexus_pmtiles: 'https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/nexus.pmtiles',
- community_pmtiles: 'https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/merged.pmtiles',
- hydrofabric_index: 'https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/hydrofabric_index.parquet',
- model: 'cfe_nom',
- cache_key: null,
- vpu: `VPU_01`,
- date: 'ngen.20251125',
- forecast: 'short_range',
- time: null,
- cycle: '00',
- variables: [],
- dates: [],
- }),
+ return already ? s : { ...DEFAULTS };
+ }),
}));
+
export default useDataStreamStore;
\ No newline at end of file
diff --git a/reactapp/features/DataStream/store/Layers.js b/reactapp/features/DataStream/store/Layers.js
index b4ab6b0..933c6c8 100644
--- a/reactapp/features/DataStream/store/Layers.js
+++ b/reactapp/features/DataStream/store/Layers.js
@@ -1,59 +1,188 @@
import { create } from 'zustand';
+import { subscribeWithSelector } from "zustand/middleware";
-export const useLayersStore = create((set) => ({
- nexus: {
- visible: true,
- },
- catchments: {
- visible: true,
- },
- flowpaths: {
- visible: true
- },
- conus_gauges: {
- visible: false
+const sameArrayRefOrValues = (a, b) =>
+ a === b ||
+ (!!a &&
+ !!b &&
+ a.length === b.length &&
+ a.every((v, i) => v === b[i]));
+
+const shallowEqualObj = (a, b) => {
+ if (a === b) return true;
+ if (!a || !b) return false;
+ const aKeys = Object.keys(a);
+ const bKeys = Object.keys(b);
+ if (aKeys.length !== bKeys.length) return false;
+ for (const k of aKeys) {
+ if (a[k] !== b[k]) return false;
+ }
+ return true;
+};
+
+const buildFeatureIdToIndex = (featureIds) => {
+ const m = {};
+ for (let idx = 0; idx < featureIds.length; idx++) {
+ const id = featureIds[idx];
+ m[id] = idx;
+ m[`wb-${id}`] = idx;
+ }
+ return m;
+};
+
+const featureKey = (f) =>
+ f?.id ?? f?.properties?.id ?? f?.properties?.feature_id ?? null;
+
+export const useLayersStore = create(
+ subscribeWithSelector((set, get) => ({
+ nexus: { visible: false },
+ catchments: { visible: true },
+ flowpaths: { visible: true },
+ conus_gauges: { visible: false },
+
+ colorBounds: {
+ flow: { min: 0, max: 100 },
+ velocity: { min: 0, max: 5 },
+ depth: { min: 0, max: 3 },
},
+
hovered_enabled: false,
- set_hovered_enabled: (isEnabled) => set({ hovered_enabled: isEnabled }),
+
+ // ---- getters (fine to keep, but note: using get() doesn't subscribe) ----
get_nexus_visibility: () => get().nexus.visible,
get_catchments_visibility: () => get().catchments.visible,
- set_nexus_visibility: (isVisible) => set((state) => ({
- nexus: {
- ...state.nexus,
- visible: isVisible,
- },
- })),
- set_catchments_visibility: (isVisible) => set((state) => ({
- catchments: {
- ...state.catchments,
- visible: isVisible,
- },
- })),
- set_flowpaths_visibility: (isVisible) => set((state) => ({
- flowpaths: {
- ...state.flowpaths,
- visible: isVisible
- }
- })),
- set_conus_gauges_visibility: (isVisible) => set((state) => ({
- conus_gauges: {
- ...state.conus_gauges,
- visible: isVisible
- }
- }))
-}));
+
+ // ---- setters with guards ----
+ set_hovered_enabled: (isEnabled) =>
+ set((s) => (s.hovered_enabled === isEnabled ? s : { hovered_enabled: isEnabled })),
+
+ set_nexus_visibility: (isVisible) =>
+ set((s) => (s.nexus.visible === isVisible ? s : { nexus: { ...s.nexus, visible: isVisible } })),
+
+ set_catchments_visibility: (isVisible) =>
+ set((s) =>
+ s.catchments.visible === isVisible ? s : { catchments: { ...s.catchments, visible: isVisible } }
+ ),
+
+ set_flowpaths_visibility: (isVisible) =>
+ set((s) =>
+ s.flowpaths.visible === isVisible ? s : { flowpaths: { ...s.flowpaths, visible: isVisible } }
+ ),
+
+ set_conus_gauges_visibility: (isVisible) =>
+ set((s) =>
+ s.conus_gauges.visible === isVisible
+ ? s
+ : { conus_gauges: { ...s.conus_gauges, visible: isVisible } }
+ ),
+
+ set_colorBounds: (key, bounds) =>
+ set((s) => {
+ const prev = s.colorBounds?.[key];
+ if (!prev) return s;
+ if (prev.min === bounds.min && prev.max === bounds.max) return s;
+ return {
+ colorBounds: {
+ ...s.colorBounds,
+ [key]: { ...prev, ...bounds },
+ },
+ };
+ }),
+ }))
+);
+
export const useFeatureStore = create((set) => ({
- hovered_feature: null,
- selected_feature: null,
-
- set_selected_feature: (feature) =>
- set(() => ({
- selected_feature: feature,
- })),
- set_hovered_feature: (feature) =>
- set(() => ({
- hovered_feature: feature,
- })),
-}));
\ No newline at end of file
+ hovered_feature: null,
+ selected_feature: null,
+
+ set_selected_feature: (feature) =>
+ set((s) => {
+ // same reference OR same id => no update
+ if (s.selected_feature === feature) return s;
+ if (featureKey(s.selected_feature) === featureKey(feature)) return s;
+ return { selected_feature: feature };
+ }),
+
+ set_hovered_feature: (feature) =>
+ set((s) => {
+ if (s.hovered_feature === feature) return s;
+ if (featureKey(s.hovered_feature) === featureKey(feature)) return s;
+ return { hovered_feature: feature };
+ }),
+}));
+
+
+export const useVPUStore = create(
+ subscribeWithSelector((set, get) => ({
+ featureIds: [],
+ featureIdToIndex: {},
+ times: [],
+ valuesByVar: {},
+
+ // Optional convenience getters
+ getVarData: (variable) => get().valuesByVar?.[variable],
+ set_feature_ids: (featureIds) =>
+ set((s) => {
+ if (sameArrayRefOrValues(s.featureIds, featureIds)) return s;
+ return { featureIds };
+ }),
+
+ /**
+ * Sets featureIds + times + featureIdToIndex
+ * - avoids rebuilding objects if inputs are identical
+ * - avoids replacing featureIdToIndex if it would be identical by value
+ */
+ setAnimationIndex: (featureIds, times) =>
+ set((s) => {
+ const sameIds = sameArrayRefOrValues(s.featureIds, featureIds);
+ const sameTimes = sameArrayRefOrValues(s.times, times);
+
+ // if both are same, do nothing
+ if (sameIds && sameTimes) return s;
+
+ // Only rebuild mapping if featureIds changed
+ let nextMap = s.featureIdToIndex;
+ if (!sameIds) {
+ const built = buildFeatureIdToIndex(featureIds);
+ nextMap = shallowEqualObj(s.featureIdToIndex, built) ? s.featureIdToIndex : built;
+ }
+
+ return {
+ featureIds: sameIds ? s.featureIds : featureIds,
+ times: sameTimes ? s.times : times,
+ featureIdToIndex: nextMap,
+ };
+ }),
+
+
+ setVarData: (variable, flatValues) =>
+ set((s) => {
+ const prev = s.valuesByVar?.[variable];
+
+ // if same reference, no update (most important guard)
+ if (prev === flatValues) return s;
+
+ const nextValuesByVar = { ...s.valuesByVar, [variable]: flatValues };
+
+ if (shallowEqualObj(s.valuesByVar, nextValuesByVar)) return s;
+
+ return { valuesByVar: nextValuesByVar };
+ }),
+
+ resetVPU: () =>
+ set((s) => {
+ const emptyObj = {};
+ if (
+ s.featureIds.length === 0 &&
+ s.times.length === 0 &&
+ Object.keys(s.featureIdToIndex).length === 0 &&
+ Object.keys(s.valuesByVar).length === 0
+ ) {
+ return s;
+ }
+ return { featureIds: [], times: [], featureIdToIndex: emptyObj, valuesByVar: emptyObj };
+ }),
+ }))
+);
\ No newline at end of file
diff --git a/reactapp/features/DataStream/store/Timeseries.js b/reactapp/features/DataStream/store/Timeseries.js
index e3e4bdf..2362403 100644
--- a/reactapp/features/DataStream/store/Timeseries.js
+++ b/reactapp/features/DataStream/store/Timeseries.js
@@ -1,34 +1,130 @@
import { create } from 'zustand';
-// Define the store
-const useTimeSeriesStore = create((set) => ({
- series: [],
- feature_id: null,
- variable: '',
- layout: {
- "yaxis": "Streamflow",
- "xaxis": "Simulation Time Period (YYYY-MM-DD)",
- "title": "TimeSeries",
- },
- table: '',
- loading: false,
- set_loading: (isLoading) => set({ loading: isLoading }),
- set_table: (newTable) => set({table: newTable}),
- set_feature_id: (newFeatureId) => set({ feature_id: newFeatureId }),
- set_series: (newSeries) => set({ series: newSeries }),
- set_chart_layout: (newLayout) => set({ chart_layout: newLayout }),
- set_variable: (newVariable) => set({ variable: newVariable }),
- set_layout: (newLayout) => set({layout: newLayout }),
- reset_series: () => set({ series: [] }),
- reset: () => set({
- series: [],
- feature_id: null,
- variable: '',
- layout: {
- "yaxis": "Streamflow",
- "xaxis": "Simulation Time Period (YYYY-MM-DD)",
- "title": "TimeSeries",
- },
- table: '',
- }),
-}));
+import { subscribeWithSelector } from 'zustand/middleware';
+
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+
+const EMPTY_SERIES = [];
+const DEFAULT_LAYOUT = Object.freeze({
+ yaxis: 'Streamflow',
+ xaxis: 'Simulation Time Period (YYYY-MM-DD)',
+ title: 'TimeSeries',
+});
+
+function seriesFingerprint(arr) {
+ if (!Array.isArray(arr) || arr.length === 0) return 'empty';
+ const first = arr[0];
+ const last = arr[arr.length - 1];
+ const fx = first?.x instanceof Date ? first.x.getTime() : first?.x;
+ const lx = last?.x instanceof Date ? last.x.getTime() : last?.x;
+ return `${arr.length}|${fx}|${first?.y}|${lx}|${last?.y}`;
+}
+
+const useTimeSeriesStore = create(
+ subscribeWithSelector((set, get ) => ({
+ series: EMPTY_SERIES,
+ feature_id: null,
+ variable: '',
+ layout: DEFAULT_LAYOUT,
+
+ loading: false,
+ loadingText: '' ,
+ currentTimeIndex: 0,
+
+ isPlaying: false,
+ playSpeed: 10,
+ baseFrameMs: 2500,
+ set_series: (nextSeries) => {
+ set((s) => {
+ const prev = s.series;
+
+ // same ref => no update
+ if (prev === nextSeries) return s;
+
+ // both empty => no update (this is the one your screenshot screams about)
+ const prevEmpty = !prev || prev.length === 0;
+ const nextEmpty = !nextSeries || nextSeries.length === 0;
+ if (prevEmpty && nextEmpty) return s;
+
+ // "equal by value" guard (cheap)
+ if (seriesFingerprint(prev) === seriesFingerprint(nextSeries)) return s;
+
+ return { series: nextSeries };
+ });
+ },
+ set_layout: (next) =>
+ set((s) => {
+ const prev = s.layout;
+ if (
+ prev?.title === next?.title &&
+ prev?.xaxis === next?.xaxis &&
+ prev?.yaxis === next?.yaxis
+ ) {
+ return s;
+ }
+ return { layout: next };
+ }),
+ setCurrentTimeIndex: (idx) => {
+ set((s) => {
+ const maxIdx = Math.max(0, (s.series?.length || 0) - 1);
+ const next = clamp(Number(idx) || 0, 0, maxIdx);
+ if (next === s.currentTimeIndex) return s; // IMPORTANT
+ return { currentTimeIndex: next };
+ });
+ },
+
+ setPlaySpeed: (speed) => {
+ const s = clamp(Number(speed) || 1, 1, 20);
+ set({ playSpeed: s });
+ },
+
+ toggleIsPlaying: () => set((s) => ({ isPlaying: !s.isPlaying })),
+
+ // --- stepping used by back/forward buttons + autoplay ---
+ stepForward: () => {
+ const { series, currentTimeIndex } = get();
+ const maxIdx = series.length - 1;
+ if (maxIdx < 0) return;
+ set({ currentTimeIndex: (currentTimeIndex + 1) % (maxIdx + 1) });
+ },
+
+ stepBackward: () => {
+ const { series, currentTimeIndex } = get();
+ const maxIdx = series.length - 1;
+ if (maxIdx < 0) return;
+ set({ currentTimeIndex: currentTimeIndex === 0 ? maxIdx : currentTimeIndex - 1 });
+ },
+
+ // returns "T+Nh" assuming 1-hour timesteps;
+ getCurrentTimeLabel: () => {
+ const { series, currentTimeIndex } = get();
+ const t0 = series?.[0]?.time;
+ const t = series?.[currentTimeIndex]?.time;
+ if (typeof t0 !== "number" || typeof t !== "number") return "T+0h";
+ const hours = Math.round((t - t0) / 3600000); // ms -> hours
+ return `T+${hours}h`;
+ },
+ set_loading: (isLoading) => set({ loading: isLoading }),
+ set_loading_text: (newLoadingText) => set({ loadingText: newLoadingText }),
+ set_feature_id: (newFeatureId) => set({ feature_id: newFeatureId }),
+
+ set_chart_layout: (newLayout) => set({ chart_layout: newLayout }),
+ set_variable: (newVariable) => set({ variable: newVariable }),
+ reset_series: () =>
+ set((s) => {
+ if (s.series === EMPTY_SERIES && s.currentTimeIndex === 0 && s.isPlaying === false) return s;
+ return { series: EMPTY_SERIES, currentTimeIndex: 0, isPlaying: false };
+ }),
+
+ reset: () =>
+ set((s) => ({
+ ...s,
+ series: EMPTY_SERIES,
+ feature_id: null,
+ variable: '',
+ layout: DEFAULT_LAYOUT,
+ currentTimeIndex: 0,
+ isPlaying: false,
+ })),
+ }))
+);
export default useTimeSeriesStore;
\ No newline at end of file
diff --git a/reactapp/features/DataStream/store/s3Store.js b/reactapp/features/DataStream/store/s3Store.js
new file mode 100644
index 0000000..92b518e
--- /dev/null
+++ b/reactapp/features/DataStream/store/s3Store.js
@@ -0,0 +1,151 @@
+import { create } from "zustand";
+
+const DEFAULT_BUCKET = "ciroh-community-ngen-datastream";
+
+/**
+ * Compare arrays of option objects by value.
+ * Assumes items look like: { value: string, label?: string, ... }
+ * If your arrays are big, this is still O(n) but avoids lots of re-renders.
+ */
+function sameOptionsByValue(a, b) {
+ if (a === b) return true;
+ if (!Array.isArray(a) || !Array.isArray(b)) return false;
+ if (a.length !== b.length) return false;
+
+ for (let i = 0; i < a.length; i++) {
+ const ai = a[i];
+ const bi = b[i];
+ // stable "identity" for options
+ if (ai?.value !== bi?.value) return false;
+ // optionally also compare label if you want
+ }
+ return true;
+}
+
+/**
+ * Compare primitive/strings safely.
+ */
+function samePrimitive(a, b) {
+ return a === b;
+}
+
+const useS3DataStreamBucketStore = create((set, get) => ({
+ bucket: DEFAULT_BUCKET,
+ models: [],
+ dates: [],
+ forecasts: [],
+ cycles: [],
+ ensembles: [],
+ outputFiles: [],
+ prefix: "",
+
+ set_bucket: (newBucket) =>
+ set((s) => (samePrimitive(s.bucket, newBucket) ? s : { bucket: newBucket })),
+
+ set_prefix: (newPrefix) =>
+ set((s) => (samePrimitive(s.prefix, newPrefix) ? s : { prefix: newPrefix })),
+
+ set_models: (newModels) =>
+ set((s) => (sameOptionsByValue(s.models, newModels) ? s : { models: newModels })),
+
+ set_dates: (newDates) =>
+ set((s) => (sameOptionsByValue(s.dates, newDates) ? s : { dates: newDates })),
+
+ set_forecasts: (newForecasts) =>
+ set((s) =>
+ sameOptionsByValue(s.forecasts, newForecasts) ? s : { forecasts: newForecasts }
+ ),
+
+ set_cycles: (newCycles) =>
+ set((s) => (sameOptionsByValue(s.cycles, newCycles) ? s : { cycles: newCycles })),
+
+ set_ensembles: (newEnsembles) =>
+ set((s) =>
+ sameOptionsByValue(s.ensembles, newEnsembles) ? s : { ensembles: newEnsembles }
+ ),
+
+ set_outputFiles: (newOutputFiles) =>
+ set((s) =>
+ sameOptionsByValue(s.outputFiles, newOutputFiles) ? s : { outputFiles: newOutputFiles }
+ ),
+
+ /**
+ * Only update fields that truly changed.
+ * Also keeps your "ensembles: []" default behavior unless explicitly provided.
+ */
+ setInitialData: (next) =>
+ set((s) => {
+ const patch = {};
+ let changed = false;
+
+ const nextBucket = next.bucket ?? DEFAULT_BUCKET;
+ if (!samePrimitive(s.bucket, nextBucket)) {
+ patch.bucket = nextBucket;
+ changed = true;
+ }
+
+ if (next.models && !sameOptionsByValue(s.models, next.models)) {
+ patch.models = next.models;
+ changed = true;
+ }
+ if (next.dates && !sameOptionsByValue(s.dates, next.dates)) {
+ patch.dates = next.dates;
+ changed = true;
+ }
+ if (next.forecasts && !sameOptionsByValue(s.forecasts, next.forecasts)) {
+ patch.forecasts = next.forecasts;
+ changed = true;
+ }
+ if (next.cycles && !sameOptionsByValue(s.cycles, next.cycles)) {
+ patch.cycles = next.cycles;
+ changed = true;
+ }
+
+ // Your original behavior: default ensembles to [] unless given.
+ const nextEnsembles = next.ensembles ?? [];
+ if (!sameOptionsByValue(s.ensembles, nextEnsembles)) {
+ patch.ensembles = nextEnsembles;
+ changed = true;
+ }
+
+ if (next.outputFiles && !sameOptionsByValue(s.outputFiles, next.outputFiles)) {
+ patch.outputFiles = next.outputFiles;
+ changed = true;
+ }
+
+ if (typeof next.prefix === "string" && !samePrimitive(s.prefix, next.prefix)) {
+ patch.prefix = next.prefix;
+ changed = true;
+ }
+
+ return changed ? patch : s;
+ }),
+
+ reset: () =>
+ set((s) => {
+ const alreadyDefault =
+ s.bucket === DEFAULT_BUCKET &&
+ s.prefix === "" &&
+ s.models.length === 0 &&
+ s.dates.length === 0 &&
+ s.forecasts.length === 0 &&
+ s.cycles.length === 0 &&
+ s.ensembles.length === 0 &&
+ s.outputFiles.length === 0;
+
+ return alreadyDefault
+ ? s
+ : {
+ bucket: DEFAULT_BUCKET,
+ models: [],
+ dates: [],
+ forecasts: [],
+ cycles: [],
+ ensembles: [],
+ outputFiles: [],
+ prefix: "",
+ };
+ }),
+}));
+
+export default useS3DataStreamBucketStore;
diff --git a/reactapp/features/DataStream/views/DatastreamView.js b/reactapp/features/DataStream/views/DatastreamView.js
index fa5e6fa..a88aa15 100644
--- a/reactapp/features/DataStream/views/DatastreamView.js
+++ b/reactapp/features/DataStream/views/DatastreamView.js
@@ -1,23 +1,251 @@
-import React from 'react';
+import React,{ useEffect} from 'react';
import { MapContainer, ViewContainer } from 'features/DataStream/components/styles/Styles';
import { ToastContainer } from 'react-toastify';
import MapComponent from 'features/DataStream/components/map/Mapg.js';
import MainMenu from 'features/DataStream/components/menus/MainMenu';
+import useDataStreamStore from 'features/DataStream/store/Datastream';
+import useTimeSeriesStore from '../store/Timeseries';
+import { useCacheTablesStore } from '../store/CacheTables';
+import { useVPUStore } from '../store/Layers';
+import useS3DataStreamBucketStore from 'features/DataStream/store/s3Store';
+import { initialS3Data, makePrefix, makeGpkgUrl } from 'features/DataStream/lib/s3Utils';
+import { getCacheKey } from 'features/DataStream/lib/opfsCache';
+import { checkForTable,
+ getTimeseries,
+ loadVpuData,
+ getFeatureIDs,
+ getDistinctFeatureIds,
+ getDistinctTimes,
+ getVpuVariableFlat,
+ getVariables
+} from 'features/DataStream/lib/queryData';
+import { makeTitle } from 'features/DataStream/lib/utils';
import 'maplibre-gl/dist/maplibre-gl.css';
+import { useShallow } from "zustand/react/shallow";
+function InitialS3Loader() {
+ // const { vpu, ensemble, setAllState } = useDataStreamStore(
+ // useShallow((s) => ({
+ // vpu: s.vpu,
+ // ensemble: s.ensemble,
+ // setAllState: s.setAllState,
+ // }))
+ // );
+ const { vpu, ensemble } = useDataStreamStore(
+ useShallow((s) => ({
+ vpu: s.vpu,
+ ensemble: s.ensemble,
+ }))
+ );
-const DataStreamView = () => {
+ const { set_model, set_forecast, set_cycle, set_outputFile, set_date, set_ensemble, set_cache_key } = useDataStreamStore(
+ useShallow((s) => ({
+ set_model: s.set_model,
+ set_forecast: s.set_forecast,
+ set_cycle: s.set_cycle,
+ set_outputFile: s.set_outputFile,
+ set_date: s.set_date,
+ set_ensemble: s.set_ensemble,
+ set_cache_key: s.set_cache_key,
+ }))
+ );
+ const { setInitialData } = useS3DataStreamBucketStore(
+ useShallow((s) => ({ setInitialData: s.setInitialData }))
+ );
+
+ useEffect(() => {
+ const controller = new AbortController();
+ let alive = true;
+
+ async function fetchInitialData() {
+ if (!vpu) return;
+ try {
+ const { models, dates, forecasts, cycles, outputFiles } =
+ await initialS3Data(vpu, { signal: controller.signal });
+
+ if (!alive) return; // <- prevents any setState after unmount/dep change
+
+ const _models = models.filter(m => m.value !== 'test');
+
+ const cacheKey = getCacheKey(
+ _models[0]?.value,
+ dates[1]?.value,
+ forecasts[0]?.value,
+ cycles[0]?.value,
+ ensemble,
+ vpu,
+ outputFiles[0]?.value
+ );
+
+ set_model(_models[0]?.value);
+ set_forecast(forecasts[0]?.value);
+ set_cycle(cycles[0]?.value);
+ set_outputFile(outputFiles[0]?.value);
+ set_date(dates[1]?.value);
+ set_ensemble(ensemble);
+ set_cache_key(cacheKey);
+ // setAllState({
+ // model: _models[0]?.value,
+ // date: dates[1]?.value,
+ // forecast: forecasts[0]?.value,
+ // cycle: cycles[0]?.value,
+ // ensemble: null,
+ // outputFile: outputFiles[0]?.value,
+ // cache_key: cacheKey,
+ // });
+
+ const _prefix = makePrefix(
+ _models[0]?.value,
+ dates[1]?.value,
+ forecasts[0]?.value,
+ cycles[0]?.value,
+ ensemble,
+ vpu,
+ outputFiles[0]?.value
+ );
+
+ setInitialData({
+ models: _models,
+ dates: dates,
+ forecasts: forecasts,
+ cycles: cycles,
+ outputFiles: outputFiles,
+ prefix: _prefix,
+ });
+
+ } catch (error) {
+ // fetch abort throws DOMException with name AbortError
+ if (error?.name === 'AbortError') return;
+ console.error('Error fetching initial S3 data:', error);
+ }
+ }
+
+ fetchInitialData();
+
+ return () => {
+ alive = false;
+ controller.abort();
+ };
+ }, [vpu]);
+
+ return null;
+}
+
+function TimeseriesLoader() {
+ const { cacheKey, outputFile, forecast, vpu, set_variables } = useDataStreamStore(
+ useShallow((s) => ({
+ cacheKey: s.cache_key,
+ outputFile: s.outputFile,
+ forecast: s.forecast,
+ vpu: s.vpu,
+ set_variables: s.set_variables,
+ }))
+ );
+ const { add_cacheTable } = useCacheTablesStore(
+ useShallow((s) => ({
+ add_cacheTable: s.add_cacheTable,
+ }))
+ );
+ const { prefix } = useS3DataStreamBucketStore(
+ useShallow((s) => ({ prefix: s.prefix }))
+ );
+
+ const { feature_id, loading, variable, set_variable, set_loading_text, set_series, set_layout, set_loading } = useTimeSeriesStore(
+ useShallow((s) => ({
+ feature_id: s.feature_id,
+ loading: s.loading,
+ variable: s.variable,
+ set_variable: s.set_variable,
+ set_loading_text: s.set_loading_text,
+ set_series: s.set_series,
+ set_layout: s.set_layout,
+ set_loading: s.set_loading,
+ }))
+ );
+ const { set_feature_ids, setVarData, setAnimationIndex } = useVPUStore(
+ useShallow((s) => ({
+ set_feature_ids: s.set_feature_ids,
+ setVarData: s.setVarData,
+ setAnimationIndex: s.setAnimationIndex,
+ }))
+ );
+
+ useEffect( () => {
+ async function getData(){
+ if (!outputFile || loading || !feature_id ) return;
+ const vpu_gpkg = makeGpkgUrl(vpu);
+ const id = feature_id.split('-')[1];
+ set_loading(true);
+ set_loading_text('Loading feature properties...');
+ let currentVariable = variable;
+ try {
+ const tableExists = await checkForTable(cacheKey);
+ if (!tableExists) {
+ try{
+ const fileSize = await loadVpuData(cacheKey, prefix, vpu_gpkg);
+ add_cacheTable({id: cacheKey, name: cacheKey.replaceAll('_',' '), size: fileSize});
+ }catch(err){
+ console.error('No data for VPU', vpu, err);
+ set_loading_text('No data available for selected VPU');
+ set_loading(false);
+ }
+ const featureIDs = await getFeatureIDs(cacheKey);
+ set_feature_ids(featureIDs);
+ const variables = await getVariables({ cacheKey });
+ set_variables(variables);
+ set_variable(variables[0]);
+ currentVariable = variables[0];
+ const [featureIds, times, flat] = await Promise.all([
+ getDistinctFeatureIds(cacheKey),
+ getDistinctTimes(cacheKey),
+ getVpuVariableFlat(cacheKey, currentVariable),
+ ]);
+ setAnimationIndex(featureIds, times);
+ setVarData(currentVariable, flat);
+ }
+ const series = await getTimeseries(id, cacheKey, currentVariable);
+ const xy = series.map((d) => ({
+ x: new Date(d.time),
+ y: d[currentVariable],
+ }));
+ set_loading_text(`Loaded ${xy.length} points for id: ${id}`);
+ set_series(xy);
+ set_layout({
+ yaxis: currentVariable,
+ xaxis: '',
+ title: makeTitle(forecast, feature_id),
+ });
+ set_loading_text('');
+ set_loading(false);
+ }
+ catch (err) {
+ set_loading_text(`Failed to load timeseries for id: ${id}`);
+ set_loading(false);
+ console.error('Failed to load timeseries for', id, err);
+ }
+ }
+ getData();
+
+ }, [cacheKey, feature_id]);
+
+
+ return null;
+}
+
+
+const DataStreamView = () => {
return (
-
-
-
+
+
);
};
-
export default DataStreamView;
diff --git a/reactapp/index.js b/reactapp/index.js
index 1bb55af..9e5797c 100644
--- a/reactapp/index.js
+++ b/reactapp/index.js
@@ -1,3 +1,5 @@
+// import './wdyr'
+
import { BrowserRouter } from 'react-router-dom';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
diff --git a/reactapp/wdyr.js b/reactapp/wdyr.js
new file mode 100644
index 0000000..c22e626
--- /dev/null
+++ b/reactapp/wdyr.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+if (process.env.NODE_ENV === 'development') {
+ console.log("WDYR enabled");
+ const whyDidYouRender = require('@welldone-software/why-did-you-render');
+ whyDidYouRender(React, {
+ trackAllPureComponents: true,
+ });
+}
\ No newline at end of file
diff --git a/tethysapp/nrds/controllers.py b/tethysapp/nrds/controllers.py
index 17df987..c1b3c2b 100644
--- a/tethysapp/nrds/controllers.py
+++ b/tethysapp/nrds/controllers.py
@@ -25,23 +25,21 @@
@controller
def home(request):
"""Controller for the app home page."""
- # The index.html template loads the React frontend
return App.render(request, "index.html")
@controller
def getParquetPerVpu(request):
print("Getting parquet file per vpu...")
- file_prefix_list = json.loads(request.body.decode("utf-8"))['nc_files']
+
+ file_prefix = json.loads(request.body.decode("utf-8"))['ncFile']
vpu_gpkg = json.loads(request.body.decode("utf-8"))['vpu_gpkg']
- dfs = []
- for file_prefix in file_prefix_list:
- df = convert_nc_2_df(
- s3_nc_url=file_prefix,
- s3_gpkg_url=vpu_gpkg,
- )
- dfs.append(df)
- complete_df = pd.concat(dfs, ignore_index=True)
+ print("file_prefix", file_prefix)
+ print("vpu_gpkg", vpu_gpkg)
+ complete_df = convert_nc_2_df(
+ s3_nc_url=file_prefix,
+ s3_gpkg_url=vpu_gpkg,
+ )
table = pa.Table.from_pandas(complete_df)
buf = io.BytesIO()