Feat: Graph modal upgrade - flex-config integration

[joshuaunity]

Description

This PR adapts the new SensorsToShowSchema, which introduced the concept of plots and aset flex-config references.

Look & Feel

Before

After

How to test

1. Visit any asset with sensors
2. Navigate to the graph page
3. Click on the "Edit Graphs" button
4. Observe the new changes and test them out
5. Make sure both new and old features work as expected

Further Improvements

Related Items

This PR Closes #1881

Sign-off

• I agree to contribute to the project under Apache 2 License.
• To the best of my knowledge, the proposed patch is not based on code under GPL or other license that is incompatible with FlexMeasures

[read-the-docs-community]

Documentation build overview

📚 flexmeasures | 🛠️ Build #31681461 | 📁 Comparing 69a1c9a against latest (07e42d3)

🔍 Preview build

Show files changed (27 files in total): 📝 24 modified | ➕ 2 added | ➖ 1 deleted

File	Status
changelog.html	📝 modified
genindex.html	📝 modified
py-modindex.html	📝 modified
_autodoc/COMMITMENTS.html	📝 modified
_autosummary/flexmeasures.api.common.schemas.html	📝 modified
_autosummary/flexmeasures.api.common.schemas.scheduling.html	➖ deleted
_autosummary/flexmeasures.api.v3_0.assets.html	📝 modified
_autosummary/flexmeasures.api.v3_0.html	📝 modified
_autosummary/flexmeasures.data.models.charts.belief_charts.html	📝 modified
_autosummary/flexmeasures.data.models.generic_assets.html	📝 modified
_autosummary/flexmeasures.data.models.planning.battery.html	➕ added
_autosummary/flexmeasures.data.models.planning.charging_station.html	➕ added
_autosummary/flexmeasures.data.models.planning.html	📝 modified
_autosummary/flexmeasures.data.schemas.generic_assets.html	📝 modified
_autosummary/flexmeasures.data.schemas.times.html	📝 modified
_autosummary/flexmeasures.utils.coding_utils.html	📝 modified
_autosummary/flexmeasures.utils.doc_utils.html	📝 modified
_autosummary/flexmeasures.utils.html	📝 modified
_autosummary/flexmeasures.utils.unit_utils.html	📝 modified
api/change_log.html	📝 modified
api/notation.html	📝 modified
api/v3_0.html	📝 modified
cli/change_log.html	📝 modified
concepts/data-model.html	📝 modified
features/scheduling.html	📝 modified
tut/toy-example-reporter.html	📝 modified
views/asset-data.html	📝 modified

[nhoening]

Good start!
I noticed these things when I tested:

Also, the "Asset Config" tab should be the first option: on the left, open per default. (I believe we want users to use those fields if possible, and use the sensor search if they need more than that). And I would call it "Flex Config".

When selecting an asset, I sometimes see "flex-model" twice under Config-Type.

When I select a different config-type, previously selected field & details should be emptied. Actually, it seems the list of available fields is not replaced, as well.

Some help texts.

• Next to "field" let's have an info icon, explaining that here, fields can be selected (Q: do you only show fields withUnder "Field Details", let's

I wanted to remove such a new field, but nothing happened, also no error.
Removing a traditional field got me "Uncaught ReferenceError: removeSensorFromGraph is not defined"

[nhoening]

Additions I'd like to see:

• Can we add the flex-config information to the plot legends? Now I see "sensor-name (asset-name)" in the legend. But if I selected a sensor for its function in the flex-model, we should make that information visible, as to make the UX clearer. So in the case I selected soc-min, I'd like to see "sensor-name (soc-min for asset-name)". I know this might be a bit tricky to accomplish. But it's important for users to see why a plot was added.
• On compontens.js, I asked for docstrings of the functions, but I believe you only added one.
• The form for flex config settings should have some info icons for help. E.g. which assets are shown in the dropdown? Will fields without value be hidden?

Some things that don't seem to work properly:

• I am actually confused which assets show up in the list - as I am testing it is a short list. I believe it is short because it is limited by pagination (&per_page=10). So that limitation is wrong. But also the set of assets being offered - the issue says: "assets are all assets in the same tree as the currently edited one". For this, the new root parameter of that asset endpoint can be used. On that issue, you discussed with us how to do this.
• Searching for sensors (old-fashioned) gives JS error: "Uncaught ReferenceError: filterSensors is not defined"
• Also, when I select a graph on the left, the button to add a sensor used to switch its text, but now it keeps saying "Add new Graph"

[joshuaunity]

Searching for sensors (old-fashioned) gives JS error: "Uncaught ReferenceError: filterSensors is not defined"

i caught this yesterday as well, i havent pushed my updates yet

Also, when I select a graph on the left, the button to add a sensor used to switch its text, but now it keeps saying "Add new Graph"

This is in progress

I am actually confused which assets show up in the list - as I am testing it is a short list. I belie...

Yes, you are correct, to speed up development on the initial phase, i just fetched the sensors. I will implement this feature now as i did forget

On compontens.js, I asked for docstrings of the functions, but I believe you only added one.

I thought you were referring to only the util function, i can add for the rest too.

[nhoening]

@joshuaunity let me know when this is ready for review

[joshuaunity]

@joshuaunity let me know when this is ready for review

You can go ahead and review, as I'm currently working on the fixed value graphs

[nhoening]

Actually, at least half of my previous review has not been addressed. So then you should not tell me it's okay to review.

Please address these open items from the last review:

• Can we add the flex-config information to the plot legends? Now I see "sensor-name (asset-name)" in the legend. But if I selected a sensor for its function in the flex-model, we should make that information visible, as to make the UX clearer. So in the case I selected soc-min, I'd like to see "sensor-name (soc-min for asset-name)". I know this might be a bit tricky to accomplish. But it's important for users to see why a plot was added.
• The form for flex config settings should have some info icons for help. E.g. which assets are shown in the dropdown? Will fields without value be hidden?
• Searching for sensors (old-fashioned) gives JS error: "Uncaught ReferenceError: filterSensors is not defined"

Also, I found some other things which should be improved:

• There are fields which are booleans (e.g. ' prefer-charging-sooner). Let's not offer those.
• I wanted to remove a field from a graph (clicking "x"), but that did not work. No error in the console.
• There is logs in the console which should go away:
  • "Rendering graph cards..."
  • "Rendering API sensors..."

[joshuaunity]

The following are left

The form for flex config settings should have some info icons for help. E.g. which assets are shown in the dropdown? Will fields without value be hidden?

#1926 (comment)

[nhoening]

The following are left

The form for flex config settings should have some info icons for help. E.g. which assets are shown in the dropdown? Will fields without value be hidden?

#1926 (comment)

Okay, if you get them done by tomorrow I can probably still review.

And you said fixed values (e.g. "30 kW") are already worked on in this PR?

[joshuaunity]

I'm not experiencing this

Maybe it's possible to replicate with:

[{"title": "No Title 1", "plots": [{"asset": 108, "flex-model": "soc-max"}, {"asset": 108, "flex-model": "soc-min"}, {"sensors": [346]}]}]

I see the issue now, you are using an outdated structure. Below is an image of the new change to the format/structure

This new format was adopted to reduce the number of calls to the backend by setting the needed value right in the JSON so the UI can use that, instead of making another call, as well as JSON processing to find the value it needs

This is what the graph looks like after refactoring to render subcharts again

[Flix6x]

I see the issue now, you are using an outdated structure. Below is an image of the new change to the format/structure

This new format was adopted to reduce the number of calls to the backend by setting the needed value right in the JSON so the UI can use that, instead of making another call, as well as JSON processing to find the value it needs

That seems to be storing the same information in two places, making me think of problems keeping the information in sync. For instance, when the user makes a change to either one of those fields in the flex-context/flex-model, would they need to actively update their sensors_to_show, too, for the change to be picked up in the chart?

[joshuaunity]

That seems to be storing the same information in two places, making me think of problems keeping the information in sync. For instance, when the user make a change to either one of those fields in the flex-context/flex-model, would they need to actively update their sensors_to_show, too, for the change to be picked up in the chart?

Hmm, they would. I'll have to write UI logic to keep the data fresh on reload. But since I want fewer calls, I can add a button to the top right, where users can click to update underlying data.

[Flix6x]

Not the direction I would take. I would keep only the reference and not the values in sensors_to_show, and look up the values only when loading chart data, as part of the existing endpoint. No new calls.

[joshuaunity]

Not the direction I would take. I would keep only the reference and not the values in sensors_to_show, and look up the values only when loading chart data, as part of the existing endpoint. No new calls.

Caching Strategy for Asset Plot Cards

The Problem
Initially, I disabled caching (useCache = false) in the renderAssetPlotCard component to ensure fresh data was always displayed. However, this approach caused significant UX issues:

1. API calls on every interaction: Each click triggered a new API request
2. Visible flickering: The async nature of API calls caused re-renders even when data hadn't changed, resulting in a jarring user experience

The Solution
To maintain data freshness without compromising UX, I implemented a "cache invalidation on modal open" strategy:

1. Read from cache during interactions: The component reads asset data from the cache, ensuring fast renders with no flickering
2. Invalidate cache when modal opens: When the modal is opened, we clear the cache for all assets used in plots, then immediately fetch fresh data

Why This Is Acceptable

• Modal sessions are short-lived: Users typically open the modal, make edits, and save. The likelihood of underlying data changing during this brief window is minimal.
• Data is refreshed when it matters most: Cache invalidation on modal open ensures users always start with the latest data.
• Consistent with existing patterns: This approach mirrors how we handle flex-context editing in asset_context.html.

Feel free to test this on your end to experience the improved UX.

[nhoening]

I tried loading a flex-model field and two things did not work for me:

• The soc-max field was shown, but I also added a soc-min field to the asset which was not in the dropdown, also after reloading the page
• The value of the field did not show up under "Field Details"

Also. removing a plot from a graph gave this error:

Cannot read properties of undefined (reading 'splice')
    at removeAssetPlotFromGraph (graphs?start_time=2024-04-09T00:00:00+02:00&end_time=2024-04-13T00:00:00+02:00:1781:76)
    at HTMLElement.<anonymous> (components.js?v=0.31.0.dev93:195:7)

And one more thing: When I remove a graph I had selected, the buttons in the sensor search part of the modal still say "Add to X graph" (should go back to saying "Add to new graph")

[joshuaunity]

The soc-max field was shown, but I also added a soc-min field to the asset which was not in the dropdown, also after reloading the page

I tried this, but didnt experience the same thing. See the video below if that replicates your situation

Uploading Screencast from 2026-03-03 22-26-17.mp4…

[nhoening]

UX:

• My asset's flex-model field (soc-max) is now shown, also with its value, but I can't always add it to a graph. The button says "Add plot". When I select a graph, that does not change (should it? like in the sensor part of the modal?). In my example, I had no graphs yet. I created one, but was not able to add the plot to it (Uncaught (in promise) TypeError: Cannot read properties of null (reading 'id') at addPlotBtn.onclick (graphs:1400:43). Reloading the dialogue might help, but it should work even if I am ceating new graphs.
• When I close the dialogue, and re-open it, the asset is unselected, but the other fields still show the previous values. Maybe all fields should keep their previous values?
• When I add a simple soc-min field, the legend says "Temporary Sensor (soc-min for (my-asset))". It should just say "soc-min for my-asset"
• The legend title is "sensor.description". It used to be "Sensor". We should simply say "Legend", not that it can be sensors or fixed values.
• I am having trouble using the sensor search to find a sensor that is defined on the very asset I am editing the graphs for. Can you check if that works for you? Strange.
• Actually, the sensor search in that part of the dialogue can also look at the whole site, like the flex-config search (using the root).

A few smaller things:

• please update the "After" screenshot in the PR description, it is now not showing the new part of the dialogue
• I want us to test the new features in the tutorial, see 2 inline comments here which I made in the schema PR. I realise the update should be done here, as only this PR has the actual graph capabilities.

[joshuaunity]

The legend title is "sensor.description". It used to be "Sensor". We should simply say "Legend", not that it can be sensors or fixed values.

i dont under stand what you mean here. Can you share a screenshot?

[nhoening]

The legend title is "sensor.description". It used to be "Sensor". We should simply say "Legend", not that it can be sensors or fixed values.

i dont under stand what you mean here. Can you share a screenshot?

No, I am traveling now.

But do you know what I mean with the legend title?

[joshuaunity]

But do you know what I mean with the legend title?

No, I dont think I know, that's what's confusing me.

This is what I believe a legend is, this is what it looks like on this PR

This is what it looks like on main

[joshuaunity]

I am having trouble using the sensor search to find a sensor that is defined on the very asset I am editing the graphs for. Can you check if that works for you? Strange.

This works fine for me, the below is me searching for "TempSensor_A1"

[joshuaunity]

My asset's flex-model field (soc-max) is now shown, also with its value, but I can't always add it to a graph. The button says "Add plot". When I select a graph, that does not change (should it? like in the sensor part of the modal?). In my example, I had no graphs yet. I created one, but was not able to add the plot to it (Uncaught (in promise) TypeError: Cannot read properties of null (reading 'id') at addPlotBtn.onclick (graphs:1400:43). Reloading the dialogue might help, but it should work even if I am ceating new graphs.

Was this what you tried? I tried to replicate what you said here. (The video controls may block my gesture at the bottom right of the screen, I suggest watching in full screen)

Screencast.from.2026-03-05.18-50-10.mp4

[nhoening]

I will have to try again tomorrow, did some tests now but it's getting late.

It might have to do with me testing with soc-usage and as that is an array it's not behaving well. Maybe you can test that locally on your end.