Feature - Add MiniMap to chaiNNer #2596
Conversation
This adds a minimap to the chaiNNer schematic
This tweaks the default miniMap BG Color to fit in with the default chaiNNer color scheme
lint fixes
more linting, now auto fixed
And now with even more linting! When will it ever stop?
There was a problem hiding this comment.
Nice work!
It works generally well, but I found 3 things I think we should improve:
- The background is a bit too translucent IMO. The mini map isn't very high-contrast, so having nodes be quite visible through the background makes the mini map hard to read.
- The zoom change when using the scroll wheel on the mini map is server times larger than in the editor (the node canvas). This is surprising and inconsistent. I think we should make using the scroll wheel in the mini map and in the editor behave the same in terms of zoom change.
- Light mode isn't supported. It's usable, but it doesn't fit.
|
Here are the latest versions with more low-contrast theming for both the "light" and "dark" theme options in chaiNNer. Light: Dark: |
Tweak and move MiniMap background colors to the respective themes
Reduce zoomScroll strength inside of the MiniMap
Fix typo!
Sorry, you misunderstood. I meant to say that the original theming was too low-contrast and hard to read. Now it's even less readable. I basically meant to say that I want the background color of the mini map to more opaque. Nodes shining through the background make the mini map hard to read, so 80% opacity (or higher) instead of 66% should make things better. |
|
Also, can the minimap on light mode be a lighter color than the nodes? |
Move the basic MiniMap theming out of the ReactFlow setup and into the global.scss where we can define it for each application "Theme".
Update the MiniMap Theming and define them for each Application Theme.
|
New updates, push comments speak for themselves. New Images below: Light: Dark: |
The minimap feature enables the user to quickly navigate around a large chaiNNer schematic and also allows for zooming/panning directly within the minimap to help ease schematic navigation.
It shows the entirety of the chaiNNer schematic with all of the nodes and also a highlighted "active window" area within the minimap to show the currently visible focus area.
The minimap is semi transparent to not obscure any of the content behind it.