Followup on my

Colorful types

project. I’m trying to create a

map

for a codebase with different zoom levels. I have been thinking about having 3 zoom levels: • Level 1: Only colors for both types & functions • Level 2: Colors and names for types, functions and parameters • Level 3: Shows the entire source file (maybe with some extra color sugar on top?) Here are a couple of screenshots of level 1 & 2, and video of the WIP interface. PS. Anyone have good recommendations of typescript codebases with a couple dozen source code files which I can use for testing?

Does it have to be any particular language? https://git.sr.ht/~akkartik/template-live-editor might be a good candidate if you can handle Lua.

Good question. It will work in any static language (I’m using tree-sitter for parsing), but I’m currently focusing only in typescript for now. I updated the post to mention it

I find that there are usually way too many types to make the colors meaningful. Grouping the types (containers / records / unions..) doesn't really make that much sense. So you just end up using up all colors.. starving the UI of any usable colors. Maybe a better approach is being able to highlight a certain type, and that one is colored throughout the program.

Yeah, this feels like a really promising beginning of an exploration. If you keep pulling the thread, tuning the design, trying different approaches, I bet it'll lead somewhere compelling

@oPOKtdJ4UbTdPaZig6jg I agree that highlighting one type throughout the code base sounds useful for exploration. I’m still thinking of a good way to implement it. What do you mean by “starving the UI of any usable colors”?

You only have a limited number of distinguishable colors. If you use them all for types, you don't have any left for anything else. Such as: Error (red), Info (yellow?), Ok (green?), Link (blue?) etc. Maybe you even want to do some syntax highlight later on.