How should FlexDash support data drill-down?

[tve]

In general, dashboards aren't all that well suited to data drill down, but I keep wanting to support some drill-down... What I mean by that is that the dashboard displays some data and I'd like to be able to click on it and get a page with more data. And ideally keep going...

To make it a bit more concrete, here is an example I just implemented. This is a site that manages a growing list of Raspberry Pis that are deployed out in the field (collecting radio pulses to track bird migrations):

I have a project drop-down that populates the table with systems. I can click on a row in the table and get teleported to the second "station" tab, which then displays more info:

So far so good, it actually works! Thanks to the new session management and msg._fd_socket only my browser tab displays the data for the system I clicked on.

An alternative implementation would have been to pop-up a full-page grid with the information. That works too.

What's not so cool is that the URL shows nothing useful. I can't bookmark that page or email someone a link so they can go straight to the data for that specific system.

So the way it currently works is that:

• FlexDash assigns me some session ID (#1234) and sets msg._fd_socket="#1234"
• when I click on the table in the first screen shot the command to move me to the second tab is only sent to my browser thanks to _fd_socket and the data to populate the charts is also only sent to my browser.

To make it work using the address bar like conventional sites work it would have to be done differently. The best I can come with right now is:

• Instead of open tab 'station' I would want to send FD a command like open /tab/station/station_id/D011RPI31F2B
• FlexDash would then put that into the address bar and send a request back of the form "send me the data for /tab/station/station_id/D011RPI31F2B"
• my flow would then get that message and send the same data as now and the charts would populate

So the difference is that instead of always just pushing the data this involves the browser and lets the browser (really just FlexDash) request the data. If done correctly, someone pasting the URL into the browser would immediately see the right page with the right data, which is not currently possible.

Something else this could enable is having multiple layouts per page. Right now I have to use two tabs for one task. The first tab has the selector, the second the details, and when the user clicks on the selector the browser is switched to the second tab when really what's expected is just for the page content to change. Hmmm, I could perhaps use grids for that content switching... The tab could be configured to show grid 1 for /tab/station and grid 2 for /tab/station/station_id/*...

Does this sound interesting? Am I just way off the deep end?

[BartButenaers]

@tve

Something else this could enable

Hey @tve,
I am not a web developer, so perhaps this is not entirely related or my use case can be implemented another way...

At the time being I had developed the node-red-contrib-ui-web-push node. It allows you to push a notification to your Android phone. When you click on the notification in your phone, the old dashboard web app opens in a browser. That works. But there was one thing I wanted to implement, but never did do to a lack of free time: that your Node-RED flow can include an url into the push message that is different based on what happened. Now I always push an url to the main dashboard page (i.e. https.../ui).

For example: suppose my system detects motion on my camera at the backdoor. It would be nice if there was an url available that immediately shows me that camera. So when I click on my phone's notification, that my dashboard immediately opens at the correct location. Without the need to start searching manually...

So not sure if that is a decent use case for this discussion...

[tve]

@BartButenaers

So not sure if that is a decent use case for this discussion...

It totally is! I believe it's exactly the same use-case as I described. Suppose you have a 'camera events' tab to show recent motion events and when you click on an event it shows that event full-size in a pop-up. What you'd want is the tab to have a URL like /tabs/camera_events and then when the pop-up is shown something like /tabs/camera_events/event/2022-12-21T18:05:34. And you want to send your phone a message with that URL so if you click on it the dashboard opens right there with the pop-up showing the event.

Note: I'm using a Rails-like URL structure of /tabs/<tab_id>/event/<event_id> but it could also be done slightly differently.

Maybe I should have titled the thread "What interesting stuff could FlexDash do with its URL?"

[BartButenaers]

@tve

What you'd want is the tab to have a URL like /tabs/camera_events and then when the pop-up is shown something like /tabs/camera_events/event/2022-12-21T18:05:34.

That would be wonderful. This is something that has been discussed quite a lot in the past, but was pain in the ... to implement.

@tve

Maybe I should have titled the thread "What interesting stuff could FlexDash do with its URL?"

LOL...
I could mention here some video surveillance lovers from out community, but they would drive you nuts Once we ever would have a widget to show video footage of camera's (e.g. m3u8 streams) in Flexdash, you will get their attention very quickly. Step by step... At least with your mechanism things like that could become more easily to implement in the future.

You surprise me almost every morning with wonderful stuff. Nice way to start my day

[tve]

So a good question is where the URL should be interpreted...
Let's continue the example of /tabs/camera_events/event/2022-12-21T18:05:34:

• So one option would be to have FlexDash look at the URL and switch to the camera_events tab and then show the event pop-up. That would cause FD ctrl to emit a "open tab=camera_events and a "open grid=event" message. If the 2022-12-21T18:05:34 ID were piggybacked on there then the flow could send the right data to show the event.
• Another option would be to do nothing in FlexDash. Instead FD could just send the URL to Node-RED, FD Ctrl emits that into the flow, then the flow tells FD what to do: "open tab camera_events", "open pop-up grid event", "here's the data for the widgets in that pop-up".

Hmmmm.... So in one model FD understands the URL structure, does some navigation (switching tabs and showing/hiding grids) and then the flow reacts to what's shown to fill it with data.
In the other model FD doesn't understand squat, it just sends the URL to the flow basically asking "what do I need to do to get there?"

I don't think there's a difference in terms of the number of network round-trips 'til the user sees the data. (If it's per-user data. If it's global data that is already pre-loaded then if FD does the navigation it's immediate.)

If FD knows what to do then that's less to construct in the flow.

For nav where the data needs to be sent there may be a difference in terms of "flicker": if FD switches tabs & grids the user may see old data until the flow reacts and sends fresh data.

Intriguing that 90%+ of the machinery to do either is already there...

[tve]

So... ... FlexDash does have to understand the URLs 'cause back button...

In order for the back button to work, FlexDash has to push a fresh URL onto the history when the user navigates from one tab to the next, etc. It can only do this if it understands the URL structure. It really needs to have the forward and reverse mapping built-in (or programmable):

• URL -> what to show
• navigation -> URL

Sometimes I just have to start implementing for all the pieces to surface...

I think I'm gonna try the following URL structure:

• /<tab_id>: show the tab
• /<tab_id>/<grid_id>: show the tab and ensure the grid with id1 is open
• /<tab_id>/<grid_id1>,-<grid_id2>,...: open grid with id1 and close grid with id2

Supported forms of IDs (matched in this order):

1. Node-RED node IDs
2. Sequential number (1-based)
3. Title
4. Icon name (excl. mdi- prefix)

Let's see how this goes...

Update: IT WORKS!!!

[tve]

I think I'm getting a bit stuck.. too many options...

I'm implementing the navigation via URLs for tabs and grids. I think I can make that more or less work. But I'd really like to get object IDs in there too so a URL like /stations/detections/134 can work, where stations is the tab, detections is the (pop-up)grid, and 134 is the object ID. (Hmm, except that here I'd like to have it be /stations/134/detections...)

But there can be multiple grids on a page... I don't want to always encode the state of which grids are shown in the URL, or maybe I should

I'm wondering whether to constrain the URL navigation to one of two modes:

• encode only which pop-up grid is shown, this way one can have a general page with arbitrary grids and then have "show detail" type of pop-ups and the URL can navigate straight to one of those
• have a tab-level setting such that the tab only shows a single grid at a time (basically a way to flip between content pages), that's basically equivalent to the pop-up except that it looks different

There is another set of issues: flicker. It doesn't look great if FlexDash flips to a different tab/grid and shows old data 'til the flow reacts and updates the data. I believe the solution is a spinner: FD should show a spinner, the flow updates the data and then removes the spinner. Not quite sure how to organize this so flows don't get crazy complicated...

Everything here will need some good tutorials showing best practices...