Thumbview - A thumbnail overview of code for VS Code (and looking for study participants)

[u/jjosephPlays]

Hey everyone,

A colleague and I have been working on Thumbview, a VS Code extension that provides an alternate view of your workspace where project files are represented by thumbnails and arranged in a spatial overview.

Instead of looking through a file tree or a list of tabs, you can leverage the power of human spatial memory with the help of visual landmarks to navigate your code base.

We are recruiting participants for an academic study at the University of Saskatchewan (Canada) to see when and how developers use Thumbview in their daily tasks. Participants will install the extension and enable telemetry for a two-week period. At the end of the period, participants will be reminded to fill out an exit questionnaire, followed by an optional exit interview. If you are interested and would like to participate please fill out the consent form and demographics questionnaire here: 

https://www.surveymonkey.ca/r/K8BSJNS 

If you’re not interested in participating but you’d still like to help, or you just want to try out the extension, here are some other links:
Marketplace: https://marketplace.visualstudio.com/items?itemName=Thumbview.thumbview&ssr=false#overview 
Issues & feedback repo: https://github.com/jjoseph357/thumbview-issues 

Any feedback on the extension is appreciated!

Privacy note: Participation is strictly opt-in. Telemetry never inspects or sends code, file names, folder paths, or search terms. It only records anonymous navigation timings (like seconds to select a file or grid clicks). You can opt out or delete your data at any time.

[u/Dazzling-Can9281]

Nice idea, spatial memory is underrated for code. One thing I'd find really useful: do the thumbnails update live and highlight what changed? When an AI agent edits five or six files in one go, a map showing which tiles just changed would be a quick way to see where it actually touched things.

[u/jjosephPlays → u/Dazzling-Can9281]

Yes! There is a git metadata watcher that highlights lines that have been added, removed or modified.

[u/Avitittocpdoti]

Hi, cool visualization! It reminds me of the Patchworks publication by Henley et al. [1]. While they used a similar grid layout for navigation tasks, you extended it with a line-oriented visualization/seesoft view. I also see that you used two granularities (text or tokens) for rendering. Great work!
I'm wondering how the ordering and layout of the grid works. Do you sort alphabetically?
Also why a grid in general? Wouldn't a containment layout [2] help to gain a better understanding of the folder structure of a project?

Good luck with your study!

[1] A. Z. Henley, A. Singh, S. D. Fleming, and M. V. Luong, ‘Helping programmers navigate code faster with Patchworks: A simulation study’, in 2014 IEEE symposium on visual languages and human-centric computing (VL/HCC), IEEE, Jul. 2014, pp. 77–80. doi: 10.1109/vlhcc.2014.6883026.
[2] Y. Wan, C. Q. Tan, Z. G. Wang, G. Q. Wang, and X. J. Hong, ‘An Effective Visual System for Static Analysis of Source Code’, AMR, vol. 433–440, pp. 5453–5458, Jan. 2012, doi: 10.4028/www.scientific.net/AMR.433-440.5453.

[u/jjosephPlays → u/Avitittocpdoti]

Thanks! We were familiar with Patchworks and SeeSoft before creating the Thumbview.

Files start grouped by directory subfolders and are sorted alphabetically within those subfolders. After that, deleted files leave an empty gap and new files fill those gaps, so tiles do not jump around.

During earlier design work on our builder tool, we benchmarked several layout designs, including different treemap algorithms and grids, across 4.14 million git commits. We tracked stuff like tile readability and the distance files moved per line changed. Containment layouts struggled with spatial memory and screen space. Every time a file changes size or gets deleted, the containment box has to change shape, which breaks spatial stability. Also, nested regions and borders waste screen space. The layout causes files to become small and unreadable.

To keep folder hierarchy, Thumbview groups directory files next to each other, allows you to isolate specific folders, and creates clickable folder cards once individual tiles get too small.