Skip to content

Large update to the visualizer UI#135

Open
kazuhidelee wants to merge 33 commits into
gittuf:mainfrom
kazuhidelee:tonylee/updating_frontend_ui
Open

Large update to the visualizer UI#135
kazuhidelee wants to merge 33 commits into
gittuf:mainfrom
kazuhidelee:tonylee/updating_frontend_ui

Conversation

@kazuhidelee

@kazuhidelee kazuhidelee commented Jun 9, 2026

Copy link
Copy Markdown

Description

Summary:
Updating the overall UI for the gittuf visualizer to reduce the vibe-code ness and make the UI/UX experience similar to microsoft Visio / lucid chart style interfaces.

Detailed changes:

  • updated the frontend Docker setup so local UI changes can reflect dynamically during development instead of requiring a full restart (updates to startup instruction on readme accordingly)
  • update the starting/welcome screen of the visualizer.
  • update the visualizer using a graph canvas style UI.
  • Make the graph interactive (can be removed, moved around)
  • Enable users to compare commit history and view the policy change over the commit
  • Enable user to compare versions of policy
  • Enable users to simulate/query the policy to inspect which user's approval is needed for a specific policy
Screenshot 2026-06-11 at 1 42 29 PM Screenshot 2026-06-11 at 1 42 46 PM

currently all the frontend is interacting with a mock data instead of the backend

AI Usage

  • I did not use generative AI at all in making the content of this pull
    request.
  • I did use generative AI in some form in making the content of this
    pull request. I have described my use of AI below.

I used AI to help with styling on frontend to resemble the figma prototype closely (mostly from figma dev mode but used AI to refine the graph components). Also used AI to refactor the code into reusable components and pages.

Contributor Checklist

  • I have manually reviewed all content submitted to gittuf in this pull
    request.
  • I fully understand the content I am submitting.
  • The changes introduced are documented and have tests included if
    applicable.
  • My changes do not infringe on copyright/trademarks/etc.
  • All commits in this pull request include a DCO
    Signoff
    .
  • By submitting this pull request, I agree to follow the gittuf Code of
    Conduct
    .

@kazuhidelee kazuhidelee changed the title Tonylee/updating frontend UI updating frontend UI for the simulator Jun 9, 2026
@kazuhidelee kazuhidelee changed the title updating frontend UI for the simulator Large update to the simulator UI Jun 9, 2026
@kazuhidelee kazuhidelee changed the title Large update to the simulator UI Large update to the visualizer UI Jun 9, 2026
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
…cording to figma

Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
…s version

Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
@kazuhidelee kazuhidelee force-pushed the tonylee/updating_frontend_ui branch 2 times, most recently from 3e5024d to 7eee98f Compare June 11, 2026 05:09
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
Comment thread frontend/screens/repository/repository-selector.tsx Fixed
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
@kazuhidelee kazuhidelee force-pushed the tonylee/updating_frontend_ui branch from d620c26 to f75a1ed Compare June 11, 2026 21:04
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Signed-off-by: Tony Lee <tonyklee@umich.edu>
@kazuhidelee kazuhidelee force-pushed the tonylee/updating_frontend_ui branch from f75a1ed to 457a210 Compare June 11, 2026 21:06
@kazuhidelee kazuhidelee marked this pull request as ready for review June 11, 2026 21:06
Signed-off-by: Tony Lee <tonyklee@umich.edu>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants