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

[colinl]

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

• Dashboard version: 1.5.1
• Node-RED version: 4.0.0 Beta 1
• Node.js version: 20.5.1
• npm version:
• Platform/OS: Ubuntu on laptop
• Browser: Edge

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[colinl]

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]

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]

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]

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

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]

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

[Steve-Mcl]

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

[colinl]

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

[arturv2000]

+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.