Issue 435 display sensor charts on asset page

[Flix6x]

This PR puts sensor data to the forefront of the asset page. The form for editing the asset (which used to be front and center) has been moved to a new sidepanel.

Right now, 2 sensors are shown by default (as seen above), but it is possible to customize which sensors are shown by defining a generic asset attribute (which isn't supported yet by API or UI at this point):

{
    "sensors_to_show": [3, 11, 4, 5]
}

In this example, sensors 3, 11, 4 and 5 would be shown from top to bottom, in the given order.

[nhoening]

Makes a very clean and visually stable impression now!

One small problem: On the asset page, when viewing a plot with partial data, if I move the cursor into non-data territory, the last data tooltip shown will keep being visible. The sensor page does not seem to have this.

I recall it was possible in other projects we did to zoom in by selecting a range directly on the Altair plots. Is the plan that we'll get that possibility here, as well?

[Flix6x]

One small problem: On the asset page, when viewing a plot with partial data, if I move the cursor into non-data territory, the last data tooltip shown will keep being visible. The sensor page does not seem to have this.

Can you elaborate on the problem? Do you think that the last data tooltip should not be visible in that case, or rather that the sensor page should get the same tooltip behaviour? FYI, underlying the datapoint selection for the tooltip is a hidden voronoi that extends to the sides of the chart area.

[nhoening]

If I'm not hovering over data, I should not see a data tooltip anymore. So I feel the sensor page has it correct.

[Flix6x]

I recall it was possible in other projects we did to zoom in by selecting a range directly on the Altair plots. Is the plan that we'll get that possibility here, as well?

I haven't planned it as a FlexMeasures feature right now.

[Flix6x]

If I'm not hovering over data, I should not see a data tooltip anymore. So I feel the sensor page has it correct.

I disagree. The ability to select the nearest data point this way was advised to me by a UX designer. I agreed with that advice, because it can be quite cumbersome to select individual data points. The sensor page currently shows bar graphs, which makes that easier, except for bars showing values near zero.

A weaker version of your statement I would consider, though: "If I'm not hovering over a period with data, I should not see a data tooltip anymore."

The ability to limit the voronoi to something other than the edges of the chart does not exist right now, however. I think it would require a front-end developer to make that work.

[nhoening]

I can't manage to record my screen properly right now, but I believe we might actually already agree.

In my example, I select a month (I wasn't sure which days actually had data), and so my result has only a few days with data, the rest of the days are blank. If my pointer moves sideways from days with data to days without data, the tooltip stays. Even if I'm two weeks earlier in the blank zone, even if I then leave the plot to the top and come back.

A weaker version of your statement I would consider, though: "If I'm not hovering over a period with data, I should not see a data tooltip anymore."

I think this matches my grief.

[Flix6x]

Alright, then I understand the grief now. Personally I like the current behaviour, so I can quickly get to see from when the last data point was. But in any case, I can't change it.

Another issue I encountered is that the date selection resets to the most recent available data when you load an asset or sensor page. I was thinking of adding the date selection to the session, so that the same period will load when a user switches to a different page. Would that be better than the current behaviour?

Anything else for this PR?

[nhoening]

I understand you get some value out of this UX as a power user, but first-time users will be quite confused, I feel.

I can't change it.

I thought the weaker version of my statement is in the realms of possible fixable?

As for the date range selection in the session, I like a selected range to persist across these data plot pages. We have start_time and end_time in the session variables (see ui/utils/view_utils.py::render_flexmeasures_template and set_time_range_for_session) - maybe that is where this should be going?
If that is a lot of work, we can also make a new issue for that.

[Flix6x]

I thought the weaker version of my statement is in the realms of possible fixable?

I managed to create another invisible layer myself, as I imagined it might be possible to create data-encoded bars that extend from bottom to top, and assign the tooltip to that.

As for the date range selection in the session, I like a selected range to persist across these data plot pages. We have start_time and end_time in the session variables (see ui/utils/view_utils.py::render_flexmeasures_template and set_time_range_for_session) - maybe that is where this should be going? If that is a lot of work, we can also make a new issue for that.

I looked into it, and it seems like work for a separate PR. We don't want it to be necessary to reload the page in order to set a session variable, so I was thinking we could have relevant API endpoints (like /chart or /chart_data), or a new dedicated API endpoint (called when selecting a calendar period), to set the session variable, instead of doing that when the server is called to load the page.

[nhoening]

I think you are right about the session date range deserving its own PR (make a new issue for now?).

I believe the /chart_data endpoint is a good place.

[nhoening]

Thanks for the effort with the tooltip!