Skip to content

minimap #4520

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.

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

Merged
merged 12 commits into from
Jul 27, 2025
Merged

minimap #4520

merged 12 commits into from
Jul 27, 2025

Conversation

jtydhr88
Copy link
Collaborator

@jtydhr88 jtydhr88 commented Jul 24, 2025

(replacement for #4475 as there are too many conflicts hard to fix in previous one)
As part of New Gen, this PR implements a minimap, making it convenient for users to preview the entire workflow from a global perspective.

Minimap Feature Summary
This PR introduces a minimap component that provides users with a bird's-eye view of their entire workflow. Here are the key features for review:

Core Functionality

Global Overview: Displays a scaled-down representation of the entire workflow graph, allowing users to see the big picture at a glance
Interactive Navigation: Users can click and drag within the minimap to quickly pan to different areas of the main canvas
Viewport Indicator: Shows a highlighted rectangle representing the currently visible area of the main canvas

User Controls

Toggle Visibility: Can be shown/hidden via a dedicated button in the canvas menu or keyboard shortcut (Alt+M)
Zoom Support: Mouse wheel interactions allow zooming in/out directly from the minimap
Persistent Settings: Remembers the user's visibility preference across sessions

Integration

Real-time Updates: Automatically reflects changes when nodes are added, removed, or connections are modified
Responsive Design: Adapts to different canvas sizes and maintains proper scaling
Non-intrusive Positioning: Fixed in the bottom-right corner with appropriate z-indexing

Demo video

2025-07-22.21-58-53.mp4

┆Issue is synchronized with this Notion page by Unito

@jtydhr88 jtydhr88 requested review from Yorha4D, KarryCharon, shinshin86 and a team as code owners July 24, 2025 11:53
@jtydhr88 jtydhr88 added the New Browser Test Expectations New browser test screenshot should be set by github action label Jul 24, 2025
@jtydhr88 jtydhr88 mentioned this pull request Jul 24, 2025
@jtydhr88 jtydhr88 added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Jul 24, 2025
@christian-byrne
Copy link
Contributor

Changes:

  • Added type for callbacks object
  • Removed global state singleton pattern and convert to stateful composable
  • Don't render component if minimap not initialized
  • Add documentation for the 0.9 magic number
  • Visual design to match Figma design: Blue nodes (#0B8CE999), orange connections/slots (#F99614), charcoal background (#15161C), 8px border radius
  • Create minimum viewport dimensions to prevent small number of nodes being zoomed too much
  • Performance: Fast path rendering for 0 nodes case
  • Merged with main to resolved conflict in apiSchema

@christian-byrne
Copy link
Contributor

Updated unit tests to mock arc and fill and expect new colors.

@christian-byrne
Copy link
Contributor

Changed toggle logic.

Copy link
Contributor

@christian-byrne christian-byrne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@christian-byrne christian-byrne merged commit 344afa2 into main Jul 27, 2025
12 checks passed
@christian-byrne christian-byrne deleted the minimap3 branch July 27, 2025 01:16
@christian-byrne christian-byrne mentioned this pull request Jul 27, 2025
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
New Browser Test Expectations New browser test screenshot should be set by github action
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants