search

FlowFuse / node-red-dashboard

https://dashboard.flowfuse.com
Apache License 2.0
206 stars 49 forks source link

Grid mode layout is not responsive #767

Closed thebaldgeek closed 6 months ago

thebaldgeek commented 7 months ago

Current Behavior

Place two groups, each 6 wide (50% screen width). With or without data on them, or with a simple text node on each, when viewed on a laptop/PC the layout looks fine.

image

But when viewed on Android or iPhone, the grid does not resize or move in a useful way: image

Expected Behavior

I expected one of the groups to slide above or below the other group and thus resize in a useful way. It would also be useful if a horizontal sider was placed under each group so that the user had some chance to view the data that is off screen

Steps To Reproduce

Place two groups with a grid of 6 (50% screen width) on a page.

Environment

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

mossytrees commented 7 months ago

I'll add that at an in-between width, the two groups end up being unevenly sized, and some elements end up getting hidden instead of scaled and/or wrapped.

![Uploading CleanShot 2024-04-15 at 17.12.00.gif…]()

joepavitt commented 7 months ago

Thanks for raising this @thebaldgeek - very odd as I know I'd explicitly defined the behaviour to be as you've expected it to be, I even have it documents as such. Will investigate as to what's going on there.

thebaldgeek commented 7 months ago

Perhaps related or not, I'm not sure, but I have found that changing the theme sizing does nothing.

image

These values do not make any visual difference at all.

joepavitt commented 7 months ago

These values do not make any visual difference at all.

They're working for me locally and in the production environments I have that I test in. I have seen this as an issue when deploying "Modified Nodes/Flows" only, rather than a Full Deploy - reported here

thebaldgeek commented 7 months ago

Gotcha. Yes, I normally use modified nodes to save resetting counters etc in the flow.

Im finding that working with dash2.0 requires many more pm2 restart node-red than I am used to. I will look into the 'persist' nodes to try and make that restart less painful (many sqlite db's in memory (for speed), the largest takes 48 hours to fully populate, so need to figure out how to save it between starts so I can build the dash pages with real data).

joepavitt commented 7 months ago

It shouldn't be requiring any 😬

thebaldgeek commented 7 months ago

Another responsive issue I am fighting with a lot.

image

I cant make the two groups 'slide' or be placed next to each other when they have tables in them. Both groups are set to 6 x 1. The tables are set to 'auto'. (But it does not matter if you set the size). The ever growing dead space on the laptop/PC page is really frustrating and results in a lot of scrolling up and down.

thebaldgeek commented 6 months ago

A responsive issue update that does not really provide any hard data (sorry). But after spending north of 10 hours fighting with the layout of gadgets on dash 2.0, I feel its worth a mention....

Lay out 5 groups, each 3 x 1 in size. On a laptop or larger screen they look as expected.

image

When on a mobile screen, they look and respond to screen size changes as expected.

image

Adding a text gadget also works as expected. The text gracefully resizes to fit the screen. So far so good...

image

But as soon as you add msg.payload data.... The responsiveness breaks. The issue of a corner locked in place and opening up dead space returns. The timestamp value is cut off rather than wrapped.

image

This breakage gets much much worse when a ui_table, template or tabulator node is added.

image

Im guessing, but it seems that the groups are not 'reporting' back to the UI elements placed in them their size. Any msg.payload data is simply fixed in place / length and will not budge.

Here is my very simple example of how adding a timestamp to a text gadget breaks the responsiveness breaks. [ { "id": "f5f4165d9d8b42dc", "type": "ui-text", "z": "dc7b8977e9ee8f3c", "group": "fd115d40b993923d", "order": 0, "width": 0, "height": 0, "name": "test text", "label": "some text text", "format": "{{msg.payload}}", "layout": "row-spread", "style": false, "font": "", "fontSize": 16, "color": "#717171", "className": "", "x": 1300, "y": 900, "wires": [] }, { "id": "d86d466e0f580d0f", "type": "ui-text", "z": "dc7b8977e9ee8f3c", "group": "2bc43f249cbb7c9f", "order": 0, "width": 0, "height": 0, "name": "test text", "label": "timestamp: ", "format": "{{msg.payload}}", "layout": "row-left", "style": false, "font": "", "fontSize": 16, "color": "#717171", "className": "", "x": 1300, "y": 960, "wires": [] }, { "id": "cc00ce2433342156", "type": "ui-text", "z": "dc7b8977e9ee8f3c", "group": "5bdc3d4f03c1cfcc", "order": 0, "width": 0, "height": 0, "name": "test text", "label": "the quick brown fox jumped over the lazy dog", "format": "{{msg.payload}}", "layout": "row-spread", "style": false, "font": "", "fontSize": 16, "color": "#717171", "className": "", "x": 1300, "y": 1020, "wires": [] }, { "id": "2ad65fa13ec62795", "type": "inject", "z": "dc7b8977e9ee8f3c", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "1", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "", "payloadType": "date", "x": 1110, "y": 960, "wires": [ [ "d86d466e0f580d0f" ] ] }, { "id": "627e67fbae844f8b", "type": "ui-text", "z": "dc7b8977e9ee8f3c", "group": "d73cbddcc7c86bdb", "order": 0, "width": 0, "height": 0, "name": "test text", "label": "group 5 test text", "format": "{{msg.payload}}", "layout": "row-spread", "style": false, "font": "", "fontSize": 16, "color": "#717171", "className": "", "x": 1300, "y": 1080, "wires": [] }, { "id": "fd115d40b993923d", "type": "ui-group", "name": "test group 1", "page": "0e440842ebb5e483", "width": "3", "height": "1", "order": -1, "showTitle": true, "className": "", "visible": "true", "disabled": "false" }, { "id": "2bc43f249cbb7c9f", "type": "ui-group", "name": "test group 3", "page": "0e440842ebb5e483", "width": "3", "height": "1", "order": -1, "showTitle": true, "className": "", "visible": "true", "disabled": "false" }, { "id": "5bdc3d4f03c1cfcc", "type": "ui-group", "name": "test group 4", "page": "0e440842ebb5e483", "width": "3", "height": "1", "order": -1, "showTitle": true, "className": "", "visible": "true", "disabled": "false" }, { "id": "d73cbddcc7c86bdb", "type": "ui-group", "name": "test group 5", "page": "0e440842ebb5e483", "width": "3", "height": "1", "order": -1, "showTitle": true, "className": "", "visible": "true", "disabled": "false" }, { "id": "0e440842ebb5e483", "type": "ui-page", "name": "test", "ui": "5863c9e6fbc90679", "path": "/test", "icon": "ab-testing", "layout": "grid", "theme": "263ddbacb04aa20c", "order": -1, "className": "", "visible": "true", "disabled": "false" }, { "id": "5863c9e6fbc90679", "type": "ui-base", "name": "tbgHome", "path": "/dashboard", "showPathInSidebar": false, "navigationStyle": "icon" }, { "id": "263ddbacb04aa20c", "type": "ui-theme", "name": "home", "colors": { "surface": "#520000", "primary": "#0094ce", "bgPage": "#454545", "groupBg": "#003200", "groupOutline": "#520000" }, "sizes": { "pagePadding": "12px", "groupGap": "12px", "groupBorderRadius": "4px", "widgetGap": "12px" } } ]

joepavitt commented 6 months ago

Sorry to hear how long you're working on this, does seem constrained to the ui-template node as a sizing issue?

For the dead space, that is currently expected. We are relying entirely on CSS for our layouts, rather than any smart JS for a Masonry layout as was the case with Dashboard 1.0.

The consequence of the CSS layout is that it forms "rows" where any groups inside will share the same vertical space.

thebaldgeek commented 6 months ago

Every node that has a msg.payload (dynamic) aspect to it has a sizing issue it seems. Note this issue here: https://github.com/FlowFuse/node-red-dashboard/issues/769

Thanks for the tip about the CSS, I was not aware of that. I need, in light of this, to see about trying to force all my tables and data fields to be constrained to a given set size for all the website pages to bring some order and yet give some responsiveness.

joepavitt commented 6 months ago

I need, in light of this, to see about trying to force all my tables and data fields to be constrained to a given set size for all the website pages to bring some order and yet give some responsiveness

You may be interested to read about the difficulty we have on this here: https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/5?u=joepavitt

It's definitely something we want to improve, but the balance of making it responsiveness and predictable is very hard, especially with the tables, markdown, etc. Which generally users will want to have grow with their content.

One idea I've got is the sizing widget we have allows for auto in a single direction, so, something auto x 4 would auto fill horizontal space but constrain vertically to 4 rows.

Something 4 x auto would be 4 columns wide, but vertically fit to its content, no matter what.

Currently, auto is only possible to set in both dimensions at the same time - as was the case with Dashboard 1.0

thebaldgeek commented 6 months ago

Is it possible to just get the group to report its size to the object on the group? (Just this fix alone might improve a lot of other issues?) Tabulator has the responsive card view I badly need, but it never gets invoked because dash2.0 does not tell it that its right hand columns have been hidden from view. https://tabulator.info/docs/6.2/layout#responsive-collapse

joepavitt commented 6 months ago

The idea of "reporting" doesn't exist within Dashboard 2.0 currently - layout is entirely driven by CSS, no JavaScript involved at all.

The action here is to fix the CSS for the contents of the grid on a more generalised behaviour, ensuring responsiveness for wider content. It is a priority, but I'm also working on a lot of other pieces, not just constrained to Dashboard 2.0 at the moment.

joepavitt commented 6 months ago

Have opened https://github.com/FlowFuse/node-red-dashboard/issues/827 to specifically track the ui-text overlap/sizing issues

joepavitt commented 6 months ago

https://github.com/FlowFuse/node-red-dashboard/pull/829 also covers improvements in a ui-tableresponsiveness. This issue claims issues with the grid layout, but actually it's more appropriate to flag concern with the underlying widgets.

Going to close this out with the fixes in for table and text, if there are particular widgets that don't render properly, please do raise them separately and link. back to here.