feat(app): let the Explorer name the elevation of an interpolated point (#1899)

* feat(app): let the Explorer name the elevation of an interpolated point

The backend answers for a point's elevation now, bringing each station's
readings to it before using them, and the app had no way to say one -- so
interpolating in the Alps blended a valley station and a summit one as though
altitude did not exist, which is 15 K around Garmisch.

The field sits beside the coordinates and is optional: left empty nothing is
corrected, as before. Choosing the point by station fills it with that station's
own height, a station naming its altitude as well as its position -- and that is
also what the REST API does when a station names the point, so the two agree.

Eleven locales, each in its own words.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BMmz23eRedUH9VTYaMQzV

* fix(app): let the elevation change the answer, and survive a station without one

Four from review, two of which made the field unusable.

The Explorer holds the parameters it last fetched with and disables the button
while they are unchanged -- and it did not hold the elevation. Typing one after
a fetch left the button dead and the uncorrected answer on screen, with no way
to ask again and nothing said about why.

`station?.height` is null for a station whose provider reports no height, and
several report none for any station -- FMI, IPMA, LHMT, the Environment Agency,
WSV and IMGW's hydrology, which is the same list the backend change turns away.
Null is not undefined, so it reached `toString()` and took the download with it.
The shared type says `number | null` now, so the compiler has the same say.

The input was seeded once while the station watcher writes the model directly,
so choosing a station and switching to manual showed an empty box against a
query carrying that station's height -- a correction applied invisibly. The box
follows the model.

And a shared Explorer link carries the elevation, a link that reproduces a
different answer being worse than one that reproduces none.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BMmz23eRedUH9VTYaMQzV

* fix(app): stop the elevation dragging the coordinates out of a chosen station

The watcher I added to keep the elevation box in step with the model fed the
watcher that rebuilds the model from the boxes, and those boxes hold only what
was typed into them -- nothing, when the point came from a station. So choosing
a station set its coordinates and then immediately cleared them, leaving the
Fetch button dead for the whole station source. It survived only for stations
whose provider reports no height, which made it look intermittent.

The coordinates and the elevation are watched apart now: what fills the
coordinates is the station, not the manual boxes. Confirmed by running the
watchers, as the report did -- the station's 47.9/8.0 stay put and typing an
elevation afterwards moves only the elevation.

The fetch guard compared an elevation the fetch never recorded, so the button
stayed enabled for the rest of the session once one was set. It records it.

And the elevation went into the shared URL without anything reading it back, or
watching the point to write it in the first place. The URL watcher follows the
interpolation now, and the coordinates and elevation are read from the query on
the way in, which the coordinates never were either.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BMmz23eRedUH9VTYaMQzV

* test(app): cover the wiring of the interpolated point

Three bugs in three rounds, all in the same watchers, and no test could reach
them: the wiring lived in `<script setup>`, where nothing can import it. It is a
composable now, and the component calls it.

Six tests over what broke -- a station's coordinates surviving its elevation, a
station whose provider reports no height, a typed elevation leaving the
coordinates alone, an empty box meaning no correction. Each was checked against
the bug it describes by putting that bug back: watching the three inputs
together fails two of them, and passing a null height through fails a third.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BMmz23eRedUH9VTYaMQzV

* fix(app): show the whole point, and let its boxes follow it

The elevation field was drawn only for a point given by coordinates, so a point
given by a station carried that station's height without showing it -- and with
an elevation set the backend drops every neighbouring station whose own height
is unknown, which for ECCC and met.no is some of them. A quietly different
answer with nothing on screen to explain it. The field belongs to the point
rather than to one way of naming it, so it is drawn for both.

The coordinate boxes were seeded once and never followed the model, which the
elevation sync made dangerous rather than merely untidy: after choosing a
station and switching to manual entry, the boxes read empty while the model held
the station's position, and typing a latitude read the still-empty longitude box
and wiped a coordinate nobody had touched. All three boxes follow the model now,
by one function, and a test says so -- it fails when the coordinate half is
taken out again.

`numberFromQuery` took `1e400` for a number and a repeated key for a string.

A link that names its point by a station still restores nothing, the station
having to be fetched before it can be selected. That is unchanged, and the
comment says so rather than claiming a round trip that is half there.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BMmz23eRedUH9VTYaMQzV

* fix(app): take only numbers an answer can be given for, from either side

The explorer's query parser rejects `1e400` because Infinity would travel into a
shared link and on to an API that can say nothing about it -- and the boxes it
guards took the same value happily, `Number.isNaN` letting through what
`Number.isFinite` was there to stop. One parser reads a box now, and a test
types `1e400` into two of them.

A `UInput` of type number writes a number back through a model its own props
declare as a string, so the guard that keeps a box in step compared `'1000'`
against `1000`, always found them different, and wrote on every model change --
each write firing the box's watcher again, and with the URL now following the
point, twice the router calls per keystroke. It compares the box as text. The
refs stay typed as the component declares them, since saying `string | number`
there is what the template will not take.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BMmz23eRedUH9VTYaMQzV

* fix(app): let a station's height go when the point is described afresh

Choosing a summit station filled the elevation with its 1000 m, and switching to
typing coordinates kept it: a city at 34 m answered as though it stood on the
mountain, six degrees of air temperature, with every neighbouring station of
unknown height dropped for company. The height came from the point, so it goes
when the point is described afresh.

A shared link carries the elevation from either source now. The box is drawn for
both and sent for both, and a height typed over a station's is the user's rather
than the station's, so writing it only for hand-typed coordinates dropped what
someone had chosen deliberately.

And the composable's own docstring sat above the parser declared before it,
which left it describing the wrong function and the composable describing
nothing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BMmz23eRedUH9VTYaMQzV

* fix(app): change the source once, and only when it changes

Clicking the source already in use was treated as a change, and dropped the
height of a station that stayed selected: nothing moved on screen, and the next
answer came back uncorrected -- six degrees of air temperature at 1000 m. It
returns early now.

Going back to the station source left the elevation empty, the station never
having left the select and its watcher therefore staying silent. The source
change names the station's height again.

Writing that took two assignments in a tick, and the second spread the model the
first had replaced, so the source change was undone by the elevation change that
followed it -- which a component test caught, the composable tests being blind
to `setSource`. A station's contribution to the point is given as a patch now,
so one assignment carries both.

`forgetPoint` said it forgot the point while forgetting only the elevation, and
is named for what it does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BMmz23eRedUH9VTYaMQzV

* fix(app): let the source button leave a typed point alone, and drop a stale station

Switching to the station source took the empty answer of a select with nothing
chosen in it and wrote that over the point -- so typing coordinates, clicking
through to the station list and back left both boxes blank. A select with
nothing in it has nothing to say about the point.

The select itself never followed the model. A provider or dataset change
replaces the model and clears the station, and the select went on holding the
old one, ready to write it back -- coordinates, height and all -- for a dataset
that may not have that station at all.

Both have tests, and both tests fail with the bugs put back. `forgetElevation`
went with them: the source change does that inline now, and the only thing left
calling it was its own test. The component test waits on promises rather than on
twenty milliseconds.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BMmz23eRedUH9VTYaMQzV

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: gutzbenj

CHANGELOG_APP.md

@@ -16,6 +16,15 @@ Types of changes:
 
 ## [Unreleased]
 
+### Added
+
+- `[Explorer]` An elevation for the point an interpolation or summary answers for, in metres above
+  sea level, beside the coordinates. Air temperature falls about 0.65 K per 100 m, so a point in a
+  valley and one on the ridge above it get different answers from the same stations; left empty,
+  the readings are used as they come. Choosing the point by station fills it with that station's
+  own height, a station naming its altitude as well as its position, and the field is shown either
+  way so that a height is never carried without being seen
+
 ### Fixed
 
 - `[Meteogram]` Wind barbs convert metres per second to knots the way the API does, a knot being a

app/app/components/DataViewer.vue

@@ -24,7 +24,7 @@ const stationSelection = computed(() => {
     return {
       mode: 'station' as const,
       selection: { stations: [] as { station_id: string }[] },
-      interpolation: { source: 'manual' as const, latitude: undefined, longitude: undefined, station: undefined },
+      interpolation: { source: 'manual' as const, latitude: undefined, longitude: undefined, elevation: undefined, station: undefined },
       dateRange: { startDate: undefined, endDate: undefined },
     }
   }
@@ -149,6 +149,7 @@ const apiQuery = computed(() => {
       ...base,
       latitude: interp?.latitude,
       longitude: interp?.longitude,
+      elevation: interp?.elevation,
       use_nearby_station_distance: props.settings.useNearbyStationDistance,
     }
     // Add interpolation station distance if provided (filter out empty values)
@@ -171,6 +172,7 @@ const apiQuery = computed(() => {
       ...base,
       latitude: interp?.latitude,
       longitude: interp?.longitude,
+      elevation: interp?.elevation,
       use_nearby_station_distance: props.settings.useNearbyStationDistance,
     }
     // Add summary station distance if provided (filter out empty values)
@@ -431,6 +433,8 @@ async function downloadValues(format: string, extension: string) {
       params.set('latitude', interp.latitude.toString())
     if (interp?.longitude !== undefined)
       params.set('longitude', interp.longitude.toString())
+    if (interp?.elevation !== undefined)
+      params.set('elevation', interp.elevation.toString())
     // Add interpolation settings
     params.set('use_nearby_station_distance', props.settings.useNearbyStationDistance.toString())
     const stationDistance = Object.entries(props.settings.useStationDistancePerParameter)
@@ -456,6 +460,8 @@ async function downloadValues(format: string, extension: string) {
       params.set('latitude', interp.latitude.toString())
     if (interp?.longitude !== undefined)
       params.set('longitude', interp.longitude.toString())
+    if (interp?.elevation !== undefined)
+      params.set('elevation', interp.elevation.toString())
     // Add summary settings (uses same settings as interpolation)
     params.set('use_nearby_station_distance', props.settings.useNearbyStationDistance.toString())
     const stationDistance = Object.entries(props.settings.useStationDistancePerParameter)

app/app/components/InterpolationSummarySelection.vue

@@ -15,31 +15,21 @@ const sourceOptions = computed(() => [
   { value: 'station' as InterpolationSource, label: t('interpolation.fromStation'), icon: 'i-lucide-map-pin' },
 ])
 
-// For manual input
-const latitudeInput = ref<string>(modelValue.value.latitude?.toString() ?? '')
-const longitudeInput = ref<string>(modelValue.value.longitude?.toString() ?? '')
-
-// Watch inputs and update model
-watch([latitudeInput, longitudeInput], ([lat, lon]) => {
-  const latNum = Number.parseFloat(lat)
-  const lonNum = Number.parseFloat(lon)
-  modelValue.value = {
-    ...modelValue.value,
-    latitude: Number.isNaN(latNum) ? undefined : latNum,
-    longitude: Number.isNaN(lonNum) ? undefined : lonNum,
-  }
-})
+// the point, and the boxes that describe it -- see `useInterpolationPoint` for why the coordinates
+// and the elevation are kept apart
+const { latitudeInput, longitudeInput, elevationInput, fromStation, pointFromStation } = useInterpolationPoint(modelValue)
 
 // For station selection
 const selectedStation = ref<Station | undefined>(modelValue.value.station)
 
-watch(selectedStation, (station) => {
-  modelValue.value = {
-    ...modelValue.value,
-    station,
-    latitude: station?.latitude,
-    longitude: station?.longitude,
-  }
+watch(selectedStation, fromStation)
+
+// the parent replaces the whole model when the provider or dataset changes, which clears the
+// station -- and a select still holding the old one would write it back, coordinates, height and
+// all, for a station the new dataset may not have
+watch(() => modelValue.value.station, (station) => {
+  if (station !== selectedStation.value)
+    selectedStation.value = station
 })
 
 // Fetch stations for station source
@@ -85,10 +75,20 @@ watch(() => props.parameterSelection, () => {
 }, { deep: true, immediate: true })
 
 function setSource(source: InterpolationSource) {
-  modelValue.value = {
-    ...modelValue.value,
-    source,
-  }
+  // clicking the source already in use is not a change, and treating it as one dropped the height
+  // of a station that stayed selected -- the form unchanged on screen, the next answer
+  // uncorrected, which at 1000 m is six degrees of air temperature
+  if (source === modelValue.value.source)
+    return
+  // one assignment: a second write in the same tick spreads the model the first replaced, and the
+  // source change was being undone by the elevation change that followed it
+  modelValue.value = source === 'station'
+    // back to the station still in the select: it names its height again, where the watcher below
+    // stays silent, the selection itself not having changed. With nothing selected it says
+    // nothing -- taking its empty answer would clear coordinates someone had just typed
+    ? { ...modelValue.value, source, ...(selectedStation.value ? pointFromStation(selectedStation.value) : {}) }
+    // the elevation came from wherever the point did, so it goes with it
+    : { ...modelValue.value, source, elevation: undefined }
 }
 
 // Display coordinates
@@ -159,6 +159,18 @@ const displayCoords = computed(() => {
       </UFormField>
     </div>
 
+    <!-- part of the point whichever way the point was given: a station fills it with its own
+         height, and leaving it filled in silently is what drops the neighbours that have none -->
+    <UFormField :label="t('interpolation.elevation')" :hint="t('interpolation.elevationHint')">
+      <UInput
+        v-model="elevationInput"
+        type="number"
+        step="1"
+        placeholder="e.g. 34"
+        class="w-full"
+      />
+    </UFormField>
+
     <div v-if="displayCoords" class="text-sm text-gray-500">
       {{ t('interpolation.coords', { coords: displayCoords }) }}
     </div>

app/app/composables/useInterpolationPoint.ts

@@ -0,0 +1,87 @@
+import type { Ref } from 'vue'
+import type { InterpolationSelection } from '~/types/station-selection-state.type'
+
+/**
+ * Read a box as the number it names, or nothing.
+ *
+ * Finite, not merely not-NaN: `1e400` parses to Infinity, which would travel into the model, into
+ * a shared link, and on to an API that can give no answer for it.
+ */
+function numberFromBox(value: string | number): number | undefined {
+  const parsed = Number.parseFloat(String(value))
+  return Number.isFinite(parsed) ? parsed : undefined
+}
+
+/**
+ * Wire the point an interpolation or summary answers for to the boxes that describe it.
+ *
+ * Three values, filled from two places: the coordinates and the elevation are typed in manual
+ * mode, while choosing a station writes all three at once. Keeping that straight is the whole of
+ * this, and getting it wrong is quiet -- a query that carries a height the form does not show, or
+ * a station whose coordinates are cleared by an elevation arriving after them.
+ */
+export function useInterpolationPoint(modelValue: Ref<InterpolationSelection>) {
+  // `string`, which is what `UInput` declares its model to be -- though one of type number writes
+  // a number back through it at runtime, so everything reading a box says which it wants rather
+  // than trusting the annotation
+  const latitudeInput = ref<string>(modelValue.value.latitude?.toString() ?? '')
+  const longitudeInput = ref<string>(modelValue.value.longitude?.toString() ?? '')
+  const elevationInput = ref<string>(modelValue.value.elevation?.toString() ?? '')
+
+  // choosing a station writes all three straight into the model, so the boxes follow it -- or they
+  // show empty while the query carries a point the user cannot see. All three, not the elevation
+  // alone: with the coordinate boxes left stale, typing one of them made the watcher below read
+  // the other box, still empty, and wipe a coordinate nobody had touched
+  function follow(box: Ref<string>, value: number | undefined) {
+    const shown = value?.toString() ?? ''
+    // against the box as text: it may hold a number, and `'1000' !== 1000` would write on every
+    // change, each write firing the box's own watcher again
+    if (shown !== String(box.value))
+      box.value = shown
+  }
+  watch(() => modelValue.value.latitude, latitude => follow(latitudeInput, latitude))
+  watch(() => modelValue.value.longitude, longitude => follow(longitudeInput, longitude))
+  watch(() => modelValue.value.elevation, elevation => follow(elevationInput, elevation))
+
+  // the coordinates and the elevation are watched apart. These boxes hold only what was typed into
+  // them, which in station mode is nothing, so writing all three together let an elevation arriving
+  // from a station take that station's coordinates out with it
+  watch([latitudeInput, longitudeInput], ([latitude, longitude]) => {
+    modelValue.value = {
+      ...modelValue.value,
+      latitude: numberFromBox(latitude),
+      longitude: numberFromBox(longitude),
+    }
+  })
+
+  watch(elevationInput, (elevation) => {
+    // optional: left empty, the readings are interpolated as they come
+    const parsed = numberFromBox(elevation)
+    if (parsed !== modelValue.value.elevation)
+      modelValue.value = { ...modelValue.value, elevation: parsed }
+  })
+
+  /**
+   * What a station says about the point: its position, and its altitude where the provider
+   * reports one.
+   *
+   * Given apart from the writing so that a caller changing something else at the same time can
+   * put both into one assignment -- two writes in a tick have the second spreading a model the
+   * first has already replaced, and the first is lost.
+   */
+  function pointFromStation(station: Station | undefined): Partial<InterpolationSelection> {
+    return {
+      station,
+      latitude: station?.latitude,
+      longitude: station?.longitude,
+      elevation: station?.height ?? undefined,
+    }
+  }
+
+  /** Take the point from a station. */
+  function fromStation(station: Station | undefined) {
+    modelValue.value = { ...modelValue.value, ...pointFromStation(station) }
+  }
+
+  return { latitudeInput, longitudeInput, elevationInput, fromStation, pointFromStation }
+}

app/app/pages/explorer.vue

@@ -111,6 +111,12 @@ function toQuery(paramSel: ParameterSelectionState, stationSel: StationSelection
     else if (stationSel.interpolation.station) {
       q.interpolationStation = stationSel.interpolation.station.station_id
     }
+    // outside the branch: the box is shown for either source and sent for either, and a height
+    // the user typed over a station's is theirs rather than the station's. It survives the round
+    // trip only for a point given by coordinates: picking the station again names its own height,
+    // which is what choosing a station means
+    if (stationSel.interpolation.elevation !== undefined)
+      q.elevation = stationSel.interpolation.elevation.toString()
   }
   if (stationSel.dateRange.startDate)
     q.startDate = stationSel.dateRange.startDate
@@ -136,10 +142,27 @@ function dataSettingsToQuery(settings: DataSettings): Record<string, string> {
 
 const showAbout = ref(false)
 const parameterSelectionState = ref<ParameterSelectionState>(fromQuery(route.query))
+function numberFromQuery(value: unknown): number | undefined {
+  // a repeated key arrives as an array, and `1e400` parses to Infinity, which travels back into
+  // the URL and on to the API as a number no answer can be given for
+  const first = Array.isArray(value) ? value[0] : value
+  const parsed = Number.parseFloat(String(first ?? ''))
+  return Number.isFinite(parsed) ? parsed : undefined
+}
+
 const stationSelectionState = ref<StationSelectionState>({
   mode: modeFromQuery(route.query),
   selection: { stations: [] },
-  interpolation: { source: (route.query.interpolationSource as 'manual' | 'station') || 'manual' },
+  interpolation: {
+    source: (route.query.interpolationSource as 'manual' | 'station') || 'manual',
+    // read back what `toQuery` writes for a point given by coordinates, so a shared link
+    // reproduces the answer it was copied from. A point given by a station is written as an id
+    // and not restored -- the station itself has to be fetched before it can be selected, which
+    // `initialStationIds` does for station mode and nothing does for this one yet
+    latitude: numberFromQuery(route.query.lat),
+    longitude: numberFromQuery(route.query.lon),
+    elevation: numberFromQuery(route.query.elevation),
+  },
   dateRange: {
     startDate: route.query.startDate?.toString(),
     endDate: route.query.endDate?.toString(),
@@ -229,6 +252,7 @@ watch(
   [
     parameterSelectionState,
     () => stationSelectionState.value.selection.stations,
+    () => stationSelectionState.value.interpolation,
     () => dataSettings.value.humanize,
     () => dataSettings.value.convertUnits,
     () => dataSettings.value.shape,
@@ -369,6 +393,7 @@ const lastFetchedParams = ref<{
   stations: string
   interpolationLat?: number
   interpolationLon?: number
+  interpolationElevation?: number
   startDate?: string
   endDate?: string
   settings: string
@@ -402,6 +427,7 @@ const canFetch = computed(() => {
         : '',
       interpolationLat: ss.interpolation.latitude,
       interpolationLon: ss.interpolation.longitude,
+      interpolationElevation: ss.interpolation.elevation,
       startDate: ss.dateRange.startDate,
       endDate: ss.dateRange.endDate,
       settings: JSON.stringify(dataSettings.value),
@@ -417,6 +443,7 @@ const canFetch = computed(() => {
         && currentParams.stations === lastFetchedParams.value.stations
         && currentParams.interpolationLat === lastFetchedParams.value.interpolationLat
         && currentParams.interpolationLon === lastFetchedParams.value.interpolationLon
+        && currentParams.interpolationElevation === lastFetchedParams.value.interpolationElevation
         && currentParams.startDate === lastFetchedParams.value.startDate
         && currentParams.endDate === lastFetchedParams.value.endDate
         && currentParams.settings === lastFetchedParams.value.settings
@@ -449,6 +476,7 @@ function fetchData() {
       : '',
     interpolationLat: ss.interpolation.latitude,
     interpolationLon: ss.interpolation.longitude,
+    interpolationElevation: ss.interpolation.elevation,
     startDate: ss.dateRange.startDate,
     endDate: ss.dateRange.endDate,
     settings: JSON.stringify(dataSettings.value),

app/app/types/station-selection-state.type.ts

@@ -10,6 +10,11 @@ export interface InterpolationSelection {
   source: InterpolationSource
   latitude?: number
   longitude?: number
+  /**
+   * Metres above sea level. The backend brings each station's readings to this height before
+   * using them, for the quantities that fall with it -- air temperature, dew point.
+   */
+  elevation?: number
   station?: Station
 }
 

app/i18n/locales/cs.json

@@ -512,6 +512,8 @@
     "fromStation": "Ze stanice",
     "latitude": "Zeměpisná šířka",
     "longitude": "Zeměpisná délka",
+    "elevation": "Nadmořská výška",
+    "elevationHint": "volitelné, m n. m.",
     "selectStationForCoords": "Vyberte stanici pro souřadnice",
     "selectStation": "Vyberte stanici",
     "loadingStations": "Načítání stanic …",

app/i18n/locales/da.json

@@ -512,6 +512,8 @@
     "fromStation": "Fra en station",
     "latitude": "Breddegrad",
     "longitude": "Længdegrad",
+    "elevation": "Højde",
+    "elevationHint": "valgfri, m over havet",
     "selectStationForCoords": "Vælg en station til koordinater",
     "selectStation": "Vælg en station",
     "loadingStations": "Indlæser stationer …",

app/i18n/locales/de-hh.json

@@ -512,6 +512,8 @@
     "fromStation": "Von Station",
     "latitude": "Breitengrad",
     "longitude": "Längengrad",
+    "elevation": "Höhe",
+    "elevationHint": "optional, m över NN",
     "selectStationForCoords": "Station für Koordinaten auswählen",
     "selectStation": "Station auswählen",
     "loadingStations": "Stationen werden geladen …",

app/i18n/locales/de.json

@@ -512,6 +512,8 @@
     "fromStation": "Von Station",
     "latitude": "Breitengrad",
     "longitude": "Längengrad",
+    "elevation": "Höhe",
+    "elevationHint": "optional, m über NN",
     "selectStationForCoords": "Station für Koordinaten auswählen",
     "selectStation": "Station auswählen",
     "loadingStations": "Stationen werden geladen …",