Minimap Necro

[esimkowitz]

Hi all, I'm necroing #23957 as I am beginning work to add a minimap to the editor, following the suggestions of @SomeoneToIgnore.

I've got a draft PR that I'm working on #26893. Right now, I've got a basic minimap displaying. It's not super performant yet, I need to optimize the initialization of the minimap element. I'll be doing most of my development updates in the draft PR, but if anyone has any feedback/suggestions around usability and features, please provide it here.

[0x2CA]

Well done, but for the mini-map, I only care about the colors and shapes.

Character shrink rendering is useless except for being messy.

[esimkowitz]

Actually that would be a lot harder to do, since right now I'm just making it another editor instance with a much smaller font. That said, if you make the font small enough and the weight large enough it all merges well enough. Actually if you look at the VSCode one, while they used to do just colors and shapes, they ended up switching it so now it's just the full text with a small font. I'm planning on making this all configurable and I'll tweak the parameters for a good default.

[mikayla-maki]

Why did VSCode do that? 🤨

[esimkowitz]

If I had to guess, it was just easier to keep one set of text rendering logic than two.

[rubjo]

Thanks for looking into this feature. Are you sure VS Code uses text here? If it if, maybe it's just a special "blocky" font.

vs.code.insiders.mov

Edit: just read your comment below 🙂

[0x2CA]

can try replacing the text rendered as █

I think this should be a better experiment

Unicode Character “█” (U+2588)

[jakcharvat]

Hey, looks really nice. Just wanted to pull out my comment from the PR into a discussion here...

If so, let's concentrate on that and the rest "functional" items first, so we can polish the design a bit later, using the help of the designers?

Speaking of designers, I'm a huge fan of the Xcode minimap, which has very simplified rendering, but really nice interactions highlighting various objects (functions, variable declarations...) on hover. I also really love how it takes //MARK: comments and actually renders them as larger headings in the minimap, with optional separators (//MARK: -). Would that be something worth investigating for zed too?

Thinking about this a bit more, it would require a lot more work than the current approach of using the editor and rerendering it with a smaller font. I'm not even sure if it would make sense to repurpose the current editor for a minimap like this, or whether it would be better to just somehow query the layout from the primary editor and render a minimap as a new thing. What I'm most interested in is whether that would even be a direction worth investigating.

[esimkowitz]

I think if we have a font that is just a full-width block for every character, we could do something similar to what you're describing without redoing the whole editor logic, which is fairly complex. The bracketed highlights are also an interesting idea, I can certainly look into this

[Angelk90]

Will the following features also be implemented?

Vscode:

When you close a piece of code in the editor, you can also see it in the minimap.

Registrazione.schermo.2025-03-19.alle.16.43.20.mov

Some map options, visible on vscode.

Registrazione.schermo.2025-03-19.alle.16.48.53.mov

Xcode:

As @jakcharvat said, some interactions found on xcode that show variable and code block names.

Registrazione.schermo.2025-03-19.alle.16.54.43.mov

[esimkowitz]

I think the first one should already work, though I haven't verified if the scroll_top updates correctly when you collapse code blocks.

We discussed rendering characters vs generic lines here, I think it's doable but as @SomeoneToIgnore said, we're focusing first on base functionality and that seems like something the designers will want input on. Same goes for more prominent highlighting, that'll probably be a follow up feature. Same for more customizations to the view. I think for now I'm just going to make these settings, since I'm not sure it's that critical to have quick access to change these for a first pass.

I'm planning on having map width, font size, and visibility for the first pass of settings. Visibility will match what's available for the scrollbar and the logic for auto will be the same. If minimap is set to always and the scrollbar is set to auto, I am planning to have minimap's visibility override the scrollbar visibility so the minimap doesn't jump when the user moves their cursor to the edge of the editor.

As for showing the variable/block name on hover, I like that idea, though it's not straightforward since right now I'm not hooking up any mouse listeners to the actual minimap editor instance. Again this is probably a follow up feature.

[Angelk90]

Great, you could also add this when editing a piece of code, currently it seems to only show when a line is deleted, but it doesn't show very well compared to vscode.

vscode:

Registrazione.schermo.2025-03-24.alle.18.59.20.mov

zed:

Registrazione.schermo.2025-03-24.alle.19.00.33.mov

[esimkowitz]

@SomeoneToIgnore @0x2CA I started looking into rendering blocks instead of characters, I think this is actually pretty straightforward. We can swap out the chunks for simple quads that match the width of the chunk. For hovering over it, we could render the full chunk as a one-off element in a tooltip-like component. I need to dig into this a bit more, but swapping out the ChunkRenderer or adding something to the render context to indicate that it should render as a block could work...

[0x2CA]

Directly replacing characters with █ should be an attempt

Unicode Character “█” (U+2588)

As far as I know, VSCode allows using images to replace text rendering.

editor.experimentalWhitespaceRendering: svg/font/off

If this function is implemented, it will solve the problem of whitespace being displayed too small and also enable richer minimap displays (capsule-shaped?).

[wzxu]

Just chiming in to say that I'd love the option to render color block instead of actual characters.
Previously I had a comment here also with some upvotes, so I think people do want it.

FWIW, I seem to recall there's a font that's simply all mono blocks so that's another way to do it (I also think some minimap was done this way but I couldn't remember where). Not sure if better than replacing the characters with blocks in code though. Or maybe just draw color blocks in code rather than relying on text? That's what VS Code seems to be doing.

[luiscobot]

Thank you, Evan, for your work on the minimap.
I would like to request an option for a minimal render design with rectangles instead of characters, similar to what Atom offered in its time.