Fix #710: UI ordering of subflow elements

[waldbaer]

Fixes #710

Description

Related Issue(s)

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label

[waldbaer]

Fully AI generated fix (Claude Opus 4.8) but manually reviewed and tested. Also added automated tests covering the widget sorting issue addressed with this fix.

Detailed AI analysis of the issue:

Analysis & Fix for issue #710

The mechanism (already in place)

Positioning of subflow widgets is partly implemented:

The editor's layout manager (nodes/config/ui_base.html:593-644) assigns each item in a group a sequential order (i + 1). For a subflow instance it writes this into a DB2_SF_ORDER env var; for a regular widget it writes node.order. Both share one ordinal space.
The backend (nodes/config/ui_base.js:973-985) reads DB2_SF_ORDER and attaches it as widget.props.subflow.order.

The root cause

The bug was entirely in the frontend sort getter widgetsByGroup. It grouped every non-subflow widget into a single bucket ('_'), then sorted the buckets by the order of each bucket's
first element:

const subflowId = curr.props?.subflow?.id || '_' // all regular widgets → one bucket ... const o1 = a[1][0]?.props?.subflow?.order || a[1][0]?.layout?.order // sort by first item only

So the whole block of regular widgets moved as one unit. A subflow widget could only land
before or after that entire block — never between two regular widgets. That exactly matches the reported symptom ("can move it to top or bottom, but not between other widgets").

The Fix

I rewrote the getter to build a list of sortable units that share one ordering space:

each regular widget is its own unit, ordered by its layout.order;
all widgets from the same subflow instance collapse into a single unit (kept contiguous, internally sorted by layout.order), ordered by subflow.order.

All units are then sorted together and flattened. Since the editor already assigns regular widgets and subflow instances sequential orders in the same space, a subflow can now be freely interleaved between regular widgets. Regular-only groups behave identically
to before (no regression).

The change is in ui/src/store/ui.mjs:103-155. Lint and npm run build both pass.

Verifying it live

There are no unit tests for the store getters (test/ only covers nodes). To confirm end-to-end, the surest check is loading your example flow, dragging the subflow between two regular widgets in the Dashboard layout sidebar, and confirming the
rendered order.

[colinl]

At first testing this does appear to have fixed #710. I will do some more testing.

[colinl]

I have done some more testing, with multiple widgets in the subflow and multiple instances of the subflow in the group and all seems well.
Also checked that ordering widgets within the group (using the widget Order field) still works correctly.

This needs one of the core devs to review it.

[waldbaer]

Thanks for testing @colinl!

Unfortunately I did not find any hints in the contribution guidelines how I can request a review from a core developer. Or do you know a concrete user whom I could assign the review?

[colinl]

Unfortunately there doesn't seem to be much manpower available at the moment dedicated to the dashboard. There are a number of PR's awaiting review. Perhaps @Steve-Mcl can comment on the current situation.