Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: workflow builder #7608

Draft
wants to merge 58 commits into
base: main
Choose a base branch
from
Draft

feat: workflow builder #7608

wants to merge 58 commits into from
+5,059 −2,525

Conversation

psychedelicious
Copy link
Collaborator

@psychedelicious psychedelicious commented Jan 31, 2025 •
edited
Loading

Summary

  • Add drag-and-drop workflow builder UI, replacing the simple list of linear view fields.
  • Refactor of a crapload of workflows components.
  • Fix issues with auto-node selection when creating edges.
  • Improved performance across workflow editor.
  • Upgrade reactflow to latest. I was already fixing/changing a ton of stuff so it was a good time to lump this in.
  • Update @invoke-ai/ui-library to latest. Needed for some of the UI stuff in workflow builder.

Related Issues / Discussions

TBD

QA Instructions

TBD

Merge Plan

TBD

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

@psychedelicious
feat(ui): add notes state to fields
92d25d3
@psychedelicious
feat(ui): add notes popover to field title bar
b034791
@psychedelicious
feat(ui): show notes icon on editor linear view
a842698
@psychedelicious
feat(ui): show notes icon on user-linear view, replacing info icon
d969958
@psychedelicious
feat(ui): clean up user-linear view styling
9ffa1b8
@psychedelicious
feat(ui): add ViewContext so components can know where they are being…
f1de722 
… rendered (user-linear view, editor-linear view, or editor-nodes view)
@psychedelicious
perf(ui): use data attribute for input field wrapper styles
861a237
@psychedelicious
refactor(ui): workflows component structure (WIP)
5ec173b 
- Simplify and de-insane-ify component structure, hooks, selectors, etc.
- Some perf improvements by using data attributes for styling instead of dynamic CSS-in-JS.
- Add field notes and start of linear view config, got blocked when I ran into deeper layout issues that made it very difficult to handle field configs. So those are WIP in this commit.
@psychedelicious
refactor(ui): workflows left panel internal components structure
a8b0c1c
@psychedelicious
fix(ui): remove accidental change to zFieldInput schema
50461b1
@psychedelicious
refactor(ui): continued reorg of components & hooks
1ba9b54
@psychedelicious
refactor(ui): continued reorg of components & hooks
e967794
@psychedelicious
fix(ui): color field component layout
2957021
@psychedelicious
feat(ui): get configurable notes display working
b61e07c
@psychedelicious
feat(ui): use workflows view context
254d9b5
@psychedelicious
fix(ui): dynamic prompts infinite recursion (wip)
914ef1f
@psychedelicious
feat(ui): rough out workflow builder data structure & dummy data
79af1e1
@psychedelicious
refactor(ui): split up float and integer field renderers
e9cb3f6
@psychedelicious
revert(ui): rip out linear view config stuff
0dddf4f
@psychedelicious
refactor(ui): split integer, float and string field components in pre…
1665f13 
…p for builder
@psychedelicious
feat(ui): rough out workflow builder data structure
1a7e134
@psychedelicious
chore(ui): lint
53fb250
@psychedelicious
feat(ui): iterate on builder (WIP)
f051b0b
@psychedelicious
feat(ui): iterate on builder (WIP)
dfc1d67
@psychedelicious
feat(ui): iterate on builder (WIP)
a366a32
@psychedelicious
feat(ui): iterate on builder (WIP)
1428189
@psychedelicious
feat(ui): getPrefixedId supports custom separator
4485450
@psychedelicious
feat(ui): iterate on builder (WIP)
9cabb88
@psychedelicious
feat(ui): iterate on builder (WIP)
819346b
@psychedelicious
feat(ui): iterate on builder (WIP)
578d1bb
@psychedelicious
feat(ui): dim form element while dragging
5b6c035
@psychedelicious
feat(ui): dnd mostly working (WIP)
71407cf
@psychedelicious
feat(ui): dnd almost fully working (WIP)
e966bf9
@psychedelicious
feat(ui): improved dnd hitbox for edges when center drop is allowed
db0eeaf
@psychedelicious
feat(ui): dnd drop target styling
c957916
@psychedelicious
fix(ui): do not allow reparenting to self
0e66e53
@psychedelicious
feat(ui): improved drop target styling
82a6fcb
@psychedelicious
feat(ui): support adding form elements and node fields with dnd
265cf8c
@psychedelicious
fix(ui): allow root element to be drop target
d58ed05
@psychedelicious
fix(ui): start workflow w/ single column as root
d3b4294
@psychedelicious
fix(ui): use redux store for form
7c7d892
@psychedelicious
tidy(ui): remove unused mock form builder data
99b57ac
@psychedelicious
fix(ui): hide nonfunctional delete button on root form element
98cdbed
@psychedelicious
chore(ui): upgrade reactflow to v12
d51529b
@psychedelicious
refactor(ui): edge rendering
4ef198f 
- Fix issues with positioning of labels
- Optimize styling to be less reliant on JS
@psychedelicious
tweak(ui): node selection colors
33bde00
@psychedelicious
fix(ui): do not render dashed edges unless animation is enabled
ac83141
@psychedelicious
fix(ui): node-autoconnect showing invalid connection options
9586b44
@psychedelicious
chore(ui): lint
9edd189
@psychedelicious
chore(ui): lint
0205440
@psychedelicious
perf(ui): faster InputFieldRenderer
4ecf8be 
Use non-zod type guards for input field types and fail early when possible
@psychedelicious
fix(ui): circular dep
d49ad17
@psychedelicious
tidy(ui): import reactflow css in main theme provider
6413753
@psychedelicious
feat(ui): plumbing for editable form elements
468f1bf
@psychedelicious
chore(ui): bump @invoke-ai/ui-library
32327be
@psychedelicious
feat(ui): editable heading and text elements
3e0a569
@github-actions github-actions bot added frontend-deps PRs that change frontend dependencies frontend PRs that change frontend files labels Jan 31, 2025
@psychedelicious psychedelicious mentioned this pull request Jan 31, 2025
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@blessedcoolant blessedcoolant Awaiting requested review from blessedcoolant blessedcoolant will be requested when the pull request is marked ready for review blessedcoolant is a code owner

@maryhipp maryhipp Awaiting requested review from maryhipp maryhipp will be requested when the pull request is marked ready for review maryhipp is a code owner

@hipsterusername hipsterusername Awaiting requested review from hipsterusername hipsterusername will be requested when the pull request is marked ready for review hipsterusername is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
DO NOT MERGE frontend PRs that change frontend files frontend-deps PRs that change frontend dependencies
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@psychedelicious