search

FlowFuse / node-red-dashboard

https://dashboard.flowfuse.com
Apache License 2.0
182 stars 46 forks source link

Unable to position a subflow containing a ui-node on the dashboard #710

Open colinl opened 5 months ago

colinl commented 5 months ago

Current Behavior

I have a ui-text in a subflow with the Group configured via a subflow property. It functions correctly except that the position of the widget in the group does not work if the group has at least two other (non-subflow) widgets. It is possible to position it at the top or the bottom, though often node-red must be restarted for that work, but it seems not possible to position it between the other two nodes. I have tried restarting node-red, clearing the browser cache etc but the widget remains stubbornly stuck at the bottom or top. If there is a workaround I would grateful to know it as this is holding me up.

Expected Behavior

It should be possible to position it.

Steps To Reproduce

Import this example flow and attempt to position the subflow node between the other two.

[{"id":"2f0e52fdece0de69","type":"subflow","name":"D2 Subflow test","info":"","category":"","in":[{"x":50,"y":30,"wires":[{"id":"8fb70b21253672bc"}]}],"out":[],"env":[{"name":"Group","type":"ui-group","value":"","ui":{"type":"conf-types"}}],"meta":{},"color":"#DDAA99"},{"id":"8fb70b21253672bc","type":"ui-text","z":"2f0e52fdece0de69","group":"${Group}","order":0,"width":0,"height":0,"name":"Text node in subflow","label":"Text node in subflow","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":350,"y":180,"wires":[]},{"id":"682ba2185159afe5","type":"ui-text","z":"997da33a0beedade","group":"a97448ecc2eeef18","order":1,"width":0,"height":0,"name":"A text node","label":"A text node","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":850,"y":3040,"wires":[]},{"id":"cf1699214f3c72cb","type":"subflow:2f0e52fdece0de69","z":"997da33a0beedade","name":"Text node in subflow","env":[{"name":"Group","value":"a97448ecc2eeef18","type":""},{"key":"DB2_SF_ORDER","value":2,"type":"str"}],"x":880,"y":3140,"wires":[]},{"id":"6d8676e34f68a3c1","type":"ui-dropdown","z":"997da33a0beedade","group":"a97448ecc2eeef18","name":"A dropdown node","label":"Select Option:","tooltip":"","order":3,"width":0,"height":0,"passthru":false,"multiple":false,"options":[{"label":"","value":"A","type":"str"},{"label":"","value":"B","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":870,"y":3080,"wires":[[]]},{"id":"a97448ecc2eeef18","type":"ui-group","name":"subflow test group","page":"67c5a34c404dda86","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"67c5a34c404dda86","type":"ui-page","name":"subflow test page","ui":"ID-BASE-1","path":"/sub","icon":"home","layout":"grid","theme":"a965ccfef139317a","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#404040","primary":"#109fbc","bgPage":"#e8e8e8","groupBg":"#d6d6d6","groupOutline":"#6fbc10"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Environment

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

colinl commented 5 months ago

Part of the problem may be that when a subflow is edited it sometimes loses the DB2_SF_ORDER key which seems to cause it to appear at the top of the list in the dashboard, but the bottom in the UI. When it is then dragged and dropped back to where it should be it appears to get the correct DB2_SF_ORDER between the adjacent widgets, but it still remains at the bottom in the UI. I haven't yet investigated whether the same thing happens with other ui nodes in subflows.

colinl commented 5 months ago

Would it be possible to treat this as a fairly high priority please? At the moment subflows containing a widget are not really usable as the widget cannot be positioned in the group, so all the great work to allow widgets in subflows and sizing them there is not much use. Issue #722, to allow the subflow to be packaged in a node module, is the other thing stopping me doing what I want at the moment, which is to be able to release packaged ui-template nodes as installable modules.

Steve-Mcl commented 5 months ago

Colin, could you try adding DB2_SF_ORDER as an env var in the subflow template & see if it sticks around or gets lost?

I do have a thought around this but wanted to know if this temporarily contains the issue first.

colinl commented 5 months ago

Assuming you mean I should do this by adding a subflow property:

image

then, unfortunately, when I add that (but don't give it a value) and Deploy and attempt to open the D2 panel I see

Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at <anonymous>:909:84
    at Array.filter (<anonymous>)
    at <anonymous>:909:63
    at Object.eachNode (red.min.js?v=3ee9a1d92ab2:16:57365)
    at Object.eachNode (red.min.js?v=3ee9a1d92ab2:16:88026)
    at buildLayoutOrderEditor (<anonymous>:903:19)
    at <anonymous>:1195:25
    at Object.eachConfig (red.min.js?v=3ee9a1d92ab2:16:88173)
    at Object.onchange (<anonymous>:1155:27)
    at Object.onchange (red.min.js?v=3ee9a1d92ab2:18:325626)
    at _ (red.min.js?v=3ee9a1d92ab2:18:64237)
    at Object.onselect (red.min.js?v=3ee9a1d92ab2:18:69899)
    at f (red.min.js?v=3ee9a1d92ab2:18:48838)
    at HTMLAnchorElement.<anonymous> (red.min.js?v=3ee9a1d92ab2:18:47481)
    at HTMLAnchorElement.dispatch (vendor.js?v=3ee9a1d92ab2:2:43090)
    at v.handle (vendor.js?v=3ee9a1d92ab2:2:41074)

If I restart node-red while it is not on the dashboard panel, and refresh, I see

VM1277:909 
 Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at <anonymous>:909:84
    at Array.filter (<anonymous>)
    at <anonymous>:909:63
    at Object.eachNode (red.min.js?v=3ee9a1d92ab2:16:57365)
    at Object.eachNode (red.min.js?v=3ee9a1d92ab2:16:88026)
    at buildLayoutOrderEditor (<anonymous>:903:19)
    at refreshSidebarEditors (<anonymous>:1119:13)
    at later (<anonymous>:44:38)
colinl commented 5 months ago

I tried making it of type number and setting it to 0 but it didn't help

Steve-Mcl commented 5 months ago

Thanks anyhow Colin - plenty clues for when I get on to this issue.

colinl commented 4 months ago

Is there any progress on this? Not being able to use subflows containing a ui-template is holding me up rather.

arturv2000 commented 4 months ago

+1 The feature of having ui-template in subflows to be able to reuse templates more easily is very nice but is a bit useless if having more than one subflow in a single group since the order is not constant, sometimes it change just by editing the properties of the subflow.