feat: suppression of empty timeseries displays by AntonPetry-Hydrotec · Pull Request #1945 · Deltares/fews-web-oc

AntonPetry-Hydrotec · 2026-04-15T08:20:25Z

Copilot

Pull request overview

Implements configurable suppression of time series chart/table panels for locations that should not show time series content (e.g., “external gauges”), addressing issue #1765 in the spatial/topology time series display flow.

Changes:

Extends chart/component settings typings to support a per-location enable/disable attribute for the time series chart and table.
Passes the selected Location object down into the time series window so it can evaluate location attributes.
Requests location attributes from the locations service when the new settings are configured, enabling attribute-driven UI suppression.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/lib/topology/componentSettings/settings.ts	Adjusts `ComponentSettings` typing to use the locally-extended `ChartsSettings`.
src/lib/topology/componentSettings/chartSettings.ts	Extends `ChartsSettings` so `timeSeriesChart`/`timeSeriesTable` can include `locationEnabledAttribute`.
src/components/timeseries/TimeSeriesWindowComponent.vue	Adds attribute-based logic to hide chart/table display types based on the selected location’s attributes.
src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue	Forwards `location` to the time series window component.
src/components/spatialdisplay/SpatialDisplay.vue	Fetches requested location attributes and derives a `selectedLocation` to drive attribute-based suppression.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-17T13:22:35Z

+const selectedLocation = computed<Location | undefined>(() => {
+  if (!props.locationIds) return undefined
+  const firstId = props.locationIds.split(',')[0]
+  return locations.value?.find((l) => l.locationId === firstId)


selectedLocation is derived from locationIds.split(',')[0], but locationIds can represent multiple selected locations (they’re joined with , when opening the display). Using only the first ID can hide/show chart/table based on the wrong location attributes when multiple locations are selected. Consider basing the enable/disable decision on all selected locations (e.g., any enabled) or tracking the actively clicked location separately.

Suggested change

const selectedLocation = computed<Location | undefined>(() => {

if (!props.locationIds) return undefined

const firstId = props.locationIds.split(',')[0]

return locations.value?.find((l) => l.locationId === firstId)

const selectedLocationIds = computed(() => {

if (!props.locationIds) return []

return props.locationIds

.split(',')

.map((locationId) => locationId.trim())

.filter((locationId) => locationId.length > 0)

})

const selectedLocation = computed<Location | undefined>(() => {

if (selectedLocationIds.value.length !== 1) return undefined

const [selectedLocationId] = selectedLocationIds.value

return locations.value?.find((l) => l.locationId === selectedLocationId)

Copilot · 2026-04-17T13:22:36Z

  const elevationChartEnabled =
-    props.settings.verticalProfileChart.enabled && elevationChartsDefined
-  const tableEnabled = props.settings.timeSeriesTable.enabled
+    props.settings.verticalProfileChart.enabled && elevationChartsDefined  


There appears to be trailing whitespace at the end of the elevationChartEnabled line, which will cause prettier --check to fail. Please remove the extra spaces (or run the formatter) so CI formatting checks pass.

Suggested change

props.settings.verticalProfileChart.enabled && elevationChartsDefined

props.settings.verticalProfileChart.enabled && elevationChartsDefined

Copilot · 2026-04-17T13:22:36Z

+  if (!attributeId) return settingsEnabled
+  const attr = props.location?.attributes?.find((a) => a.id === attributeId)
+  if (attr === undefined) return settingsEnabled


getDisplayEnabled ignores settingsEnabled when an attributeId is configured and the attribute exists. If timeSeriesChart.enabled (or table) is false in settings but the attribute value is anything other than the string 'false', this function returns true and re-enables the display. Consider always honoring settingsEnabled (e.g., short-circuit to false when it’s disabled, or combine the checks with settingsEnabled && ...).

Suggested change

if (!attributeId) return settingsEnabled

const attr = props.location?.attributes?.find((a) => a.id === attributeId)

if (attr === undefined) return settingsEnabled

if (!settingsEnabled) return false

if (!attributeId) return true

const attr = props.location?.attributes?.find((a) => a.id === attributeId)

if (attr === undefined) return true

I will check with @bogaardt what is the desired behavior. I think the current implementation is what we discussed.

I didn't know it was possible to select multiple locations. Do you want to discuss or will you come back to us when you decided about the desired behavior for multiple selected locations? Anton and I discussed it today but haven't managed to find a good solution yet.

You can CTRL click locations to select multiple.
FEWS can also have parent/child locations. Clicking a parent will select all child locations.
In the Web OC the url/route will have comma separated list of locationIds.

wkramer · 2026-04-15T11:20:58Z

+type PiChart = NonNullable<PiChartsSettings['timeSeriesChart']>
+type PiTimeSeriesTable = NonNullable<PiChartsSettings['timeSeriesTable']>
+
+export type ChartsSettings = Omit<


Can you update to "@deltares/fews-pi-requests": "^2.0.1" in the package.json. That should include these type definitions.

Updating leads to several problems in various files.
The usage of updated ChartsSettings asks for changes in a couple of files and ComponentSettings in even more files because of changed attribute types.
I checked the main and you're still using the old version there aswell if I'm correct.
We're not sure if you're going to update yourself or you want us to do it.

I will fix this. I had a check an the nicest solution is to fix the issue in OpenAPI specification and regenerate the types in fews-pi-requests library. I will do this early next week.

wkramer · 2026-04-17T13:29:25Z

  informationContent?: string | null
  filter?: filterActionsFilter | timeSeriesGridActionsFilter
  settings: ChartsSettings
+  location?: Location


We should consider what is the correct behavior when multiple locations are selected. Currently only the attributes of the first selected location are applied.

wkramer · 2026-04-17T13:36:04Z

+  if (!attributeId) return settingsEnabled
+  const attr = props.location?.attributes?.find((a) => a.id === attributeId)
+  if (attr === undefined) return settingsEnabled


I will check with @bogaardt what is the desired behavior. I think the current implementation is what we discussed.

…ttier

wkramer · 2026-04-30T12:06:38Z

We need another approach due to the multiple locations issue:

Move the `getDisplayEnabled` function

Move

function getDisplayEnabled(
  settingsEnabled: boolean,
  attributeId: string | undefined,
)

out of the TimeSeriesComponent.vue to SpatialDisplay.vue.

Restore `TimeSeriesComponent`

We will keep current version (i.e main branch version) of TimeSeriesComponent.vue. This already checks
settings.timeSeriesChart.enabled, settings.verticalProfileChart.enabled, etc.

Use current `settings` prop

In SpatialDisplay.vue we pass the settings object to SpatialTimeSeriesDisplay -> TimeSeriesComponentWindow -> TimeSeriesComponent.

Update `settings.timeSeriesChart.enabled` based on selected locations

In SpatialDisplay.vue if settings.timeSeriesChart.locationEnabledAttribute is set, determine for provided locationIds

Update to the getDisplayEnabled function to loop over the locations.

function getDisplayEnabledFromLocationAttributes(
  locations: Location[],
  attributeId: string | undefined,
  default: boolean,
)

If default = false and any location has an attribute

{ attributeId: true }

return true

If default = true and any location has an attribute

{ attributeId: false }

return false.

…ty timeseries displays

TGehrmannHydrotec · 2026-05-06T09:35:58Z

I implemented the requested changes, they were pushed.

feat: suppression of empty time series displays

a936503

AntonPetry-Hydrotec force-pushed the 1765-hydrotec-suppression-of-empty-timeseries-displays branch from c07b316 to a936503 Compare April 15, 2026 08:59

AntonPetry-Hydrotec changed the title ~~1765 hydrotec suppression of empty timeseries displays~~ feat: suppression of empty timeseries displays Apr 15, 2026

Fix for Deltares#1765 Suppression of empty time series displays

204ed83

wkramer requested review from Copilot and wkramer April 17, 2026 13:16

Copilot started reviewing on behalf of wkramer April 17, 2026 13:17 View session

Copilot AI reviewed Apr 17, 2026

View reviewed changes

wkramer requested changes Apr 17, 2026

View reviewed changes

Fix for Deltares#1765 Suppression of empty time series displays - pre…

7d9d87c

…ttier

Implemented change request for feat: Deltares#1945 suppression of emp…

94d12ef

…ty timeseries displays

-const selectedLocation = computed<Location | undefined>(() => {
-  if (!props.locationIds) return undefined
-  const firstId = props.locationIds.split(',')[0]
-  return locations.value?.find((l) => l.locationId === firstId)
+const selectedLocationIds = computed(() => {
+  if (!props.locationIds) return []
+  return props.locationIds
+    .split(',')
+    .map((locationId) => locationId.trim())
+    .filter((locationId) => locationId.length > 0)
+})
+const selectedLocation = computed<Location | undefined>(() => {
+  if (selectedLocationIds.value.length !== 1) return undefined
+  const [selectedLocationId] = selectedLocationIds.value
+  return locations.value?.find((l) => l.locationId === selectedLocationId)

	props.settings.verticalProfileChart.enabled && elevationChartsDefined
	props.settings.verticalProfileChart.enabled && elevationChartsDefined

Conversation

AntonPetry-Hydrotec commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

wkramer Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

TGehrmannHydrotec Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wkramer Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

wkramer Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

TGehrmannHydrotec Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

wkramer Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

wkramer Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

wkramer Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

wkramer commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Move the getDisplayEnabled function

Restore TimeSeriesComponent

Use current settings prop

Update settings.timeSeriesChart.enabled based on selected locations

Uh oh!

TGehrmannHydrotec commented May 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

AntonPetry-Hydrotec commented Apr 15, 2026 •

edited

Loading

TGehrmannHydrotec Apr 24, 2026 •

edited

Loading

wkramer commented Apr 30, 2026 •

edited

Loading

Move the `getDisplayEnabled` function

Restore `TimeSeriesComponent`

Use current `settings` prop

Update `settings.timeSeriesChart.enabled` based on selected locations