Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adelle/obs pred indication #3060

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 68 additions & 22 deletions src/Features/ERDDAP/Map/WLPlatformLayer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { PlatformLayer } from "."
import { platformName } from "../utils/platformName"
import Link from "next/link"
import { Feature } from "ol"
import { RStyleArray } from "rlayers/style"

export interface Props {
// Bounding box for fitting to a region
Expand Down Expand Up @@ -66,7 +67,11 @@ export const WLPlatformLayer = ({ platform, selected, old = false }: PlatformLay
const path = usePathname()
const searchParams = useSearchParams()
const [floodThreshold, setFloodThreshold] = useState<string>("")
const [predictedfloodThreshold, setPredictedFloodThreshold] = useState<string>("")

const [display, setDisplay] = useState("grey")
const [predictedDisplay, setPredictedDisplay] = useState()

let radius: number
if (selected) {
radius = window.innerWidth > adjustPxWidth ? 12 : 17
Expand All @@ -76,21 +81,45 @@ export const WLPlatformLayer = ({ platform, selected, old = false }: PlatformLay
const isSensorPage = path.includes("sensor")

useEffect(() => {
const currentWaterLevel = platform.properties.readings.find(
const latestMaxLevel = platform.properties.readings.find(
(r) => r.flood_levels.length && r.variable !== "predictedWL",
)
if (!currentWaterLevel) {
if (!latestMaxLevel) {
setFloodThreshold("NA")
} else {
const value = currentWaterLevel?.value
const waterLevelThresholds = getWaterLevelThresholdsMapRawComp(currentWaterLevel?.flood_levels)
}
if (latestMaxLevel) {
const value = latestMaxLevel?.maxReading
const waterLevelThresholds = getWaterLevelThresholdsMapRawComp(latestMaxLevel?.flood_levels)
const surpassedThreshold = getSurpassedThreshold(value, waterLevelThresholds)
setFloodThreshold(surpassedThreshold)
const opacity = selected ? "f2" : "bf"
const display = floodLevelThresholdColors(surpassedThreshold, old, opacity, platform)
setDisplay(display)
}
}, [platform.properties.readings, selected, old, platform])
}, [platform])

useEffect(() => {
const latestMaxLevel = platform.properties.readings.find(
(r) => r.flood_levels.length && r.variable !== "predictedWL",
)
const predictedMax = platform.properties.readings.find((r) => r.variable === "predictedWL")
if (!predictedMax) {
setPredictedFloodThreshold("NA")
} else if (predictedMax) {
const waterLevelThresholds = getWaterLevelThresholdsMapRawComp(latestMaxLevel?.flood_levels)
const predictedSurpassedThreshold = getSurpassedThreshold(predictedMax?.maxReading, waterLevelThresholds)
setPredictedFloodThreshold(predictedSurpassedThreshold)
}
}, [platform.properties, platform.id])

useEffect(() => {
const opacity = selected ? "f2" : "bf"
const display = floodLevelThresholdColors(floodThreshold, old, opacity, platform)
setDisplay(display)
}, [floodThreshold])

useEffect(() => {
const opacity = selected ? "f2" : "bf"
const display = floodLevelThresholdColors(floodThreshold, old, opacity, platform)
setPredictedDisplay(display)
}, [predictedfloodThreshold])

const query = isSensorPage
? buildSearchParamsQuery(
Expand All @@ -103,10 +132,9 @@ export const WLPlatformLayer = ({ platform, selected, old = false }: PlatformLay
getIsoForPicker(weeksInFuture(1)),
"datum_mllw_meters",
)

return (
<div style={{ zIndex: 10 }}>
{platform && display && floodThreshold && (
{platform && display && (
<Layer
platform={platform}
url={{
Expand All @@ -116,24 +144,41 @@ export const WLPlatformLayer = ({ platform, selected, old = false }: PlatformLay
router={router}
radius={radius}
color={display}
predColor={predictedDisplay}
floodThreshold={floodThreshold}
predFloodThreshold={predictedfloodThreshold}
/>
)}
</div>
)
}

const Layer = ({ platform, url, router, radius, color, floodThreshold }) => {
const Layer = ({ platform, url, router, radius, color, floodThreshold, predColor, predFloodThreshold }) => {
const [key, setKey] = useState(0)

useEffect(() => {
setKey((prevKey) => prevKey + 1) // Increment key on state change
}, [predColor, color])

return (
<RLayerVector zIndex={10}>
{color && (
<RStyle.RStyle>
<RStyle.RRegularShape radius={radius} points={4} angle={2.35}>
<RStyle.RFill color={color} />
<RStyle.RStroke color={"000000"} width={0.5} />
</RStyle.RRegularShape>
</RStyle.RStyle>
)}
<RLayerVector zIndex={10} key={key}>
{
<RStyleArray>
<RStyle.RStyle zIndex={20}>
<RStyle.RRegularShape radius={radius} points={4} angle={2.35}>
<RStyle.RFill color={predColor ? predColor : "grey"} />
<RStyle.RStroke color={"000000"} width={0.5} />
</RStyle.RRegularShape>
</RStyle.RStyle>

<RStyle.RStyle zIndex={25}>
<RStyle.RRegularShape radius={radius / 2} points={40} angle={0}>
<RStyle.RFill color={color ? color : "grey"} />
<RStyle.RStroke color={"#000000"} width={0.5} />
</RStyle.RRegularShape>
</RStyle.RStyle>
</RStyleArray>
}

<Link href={url}>
<RFeature
Expand All @@ -147,7 +192,8 @@ const Layer = ({ platform, url, router, radius, color, floodThreshold }) => {
>
<RPopup trigger={"hover"} autoPosition={true}>
<div className="map-popup-custom">
{platformName(platform)} <br></br>Flood level: {floodThreshold ? floodThreshold : "None"}
{platformName(platform)} <br></br>Flood level: {floodThreshold ? floodThreshold : "None"} <br></br>{" "}
Predicted Flood Level: {predFloodThreshold ? predFloodThreshold : "None"}
</div>
</RPopup>
</RFeature>
Expand Down
15 changes: 13 additions & 2 deletions src/Features/ERDDAP/hooks/TableDAPComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { useQueries, useQueryClient } from "@tanstack/react-query"
import { tabledapHtmlUrl } from "Shared/erddap/tabledap"
import { aWeekAgoRounded } from "Shared/time"
import { aDayAgoRounded, aWeekAgoRounded, daysInFuture } from "Shared/time"
import * as React from "react"
import { Alert } from "reactstrap"

Expand Down Expand Up @@ -82,17 +82,28 @@ export const UseDatasets: React.FunctionComponent<UseDatasetsProps> = ({
if (platforms) {
const platform = platforms.features.find((f) => f.id === platformId)
const latestReading = loadedDatasets.map((d) => {
const max = !d.name.includes("predicted")
? Math.max(...d.timeSeries.filter((ts) => ts.time < aDayAgoRounded()).map((t) => t.reading))
: Math.max(
...d.timeSeries
.filter((ts) => ts.time > new Date(Date.now()) && ts.time < daysInFuture(1))
.map((t) => t.reading),
)
return {
name: d.name,
latestValue: d.timeSeries[d.timeSeries.length - 1].reading,
time: d.timeSeries[d.timeSeries.length - 1].time.toISOString(),
maxReading: max,
}
})

const updatedReadings = platform.properties.readings.map((reading) => {
const update = latestReading.find((r) => r.name === reading.variable)
return update ? { ...reading, value: update.latestValue, time: update.time } : { ...reading }
return update
? { ...reading, value: update.latestValue, time: update.time, maxReading: update.maxReading }
: { ...reading }
})

const updatedPlatform = {
...platform,
properties: {
Expand Down
1 change: 1 addition & 0 deletions src/Features/ERDDAP/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export interface PlatformTimeSeries {
cors_proxy_url?: string
variable: string
dataset: string
maxReading?: number
start_time: string
flood_levels: FloodLevels[]
datum_offsets: DatumOffsets
Expand Down
3 changes: 1 addition & 2 deletions src/Features/ERDDAP/utils/waterLevelThresholds.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export const getWaterLevelThresholdsMapRawComp = (floodThresholds) => {
}
})
}
return null
}

const compChart = {
Expand All @@ -23,7 +22,7 @@ const compChart = {
}

export const getSurpassedThreshold = (value, thresholds) => {
const range = thresholds.find((t) => {
const range = thresholds?.find((t) => {
if (t.name === "Major") {
return value >= t.min_value
}
Expand Down
Loading