An infinite canvas for code exploration | Hacker News Reader

An infinite canvas for code exploration

territory.dev

211 pointspst723107 comments

Hijacking the back button to lock me on the page is an unacceptable violation of my browser functionality. Don't do that. It's bad. When I click the back button, I want to go away from where I am, back to where I was before. I don't click the back button to remain in the same place.

I wanted to watch the demo video again; even if it's only on the initial signup page, the hijack is irritating. If it's intentional, that's offensive.

That sound like a bug, definitely not intentional. Will look into that.

While you're at it, could you re-add controls to the video? Yeah I know two minutes is short, but.. I just want to see some screenshots!

Looks interesting to me - I am using the mouse button on the left side of the mouse which is bound to back by default. That just flickers the login page. Actually clicking the back button on the browser UI works, though (Edge Win10/64).

Having worked as a frontend web developer, I can assure you that the back-button hijacking is sheer incompetence of the developers. They have to be mutating your browser history in a careless way to achieve this. That or they somehow picked a really bad client-side routing library. (Even just following a basic tutorial for react-router wont cause this behavior. It's almost always sloppy state management causing this)

Thanks, forwarded to my frontend dev/cofounder ;)

Sort of a jerky way to say that

Having worked as a frontend web developer, the history API is a minefield even to people who are proficient with it.

Chill.

Well in this case it's the frontpage. That makes little sense. If it's further inside the application, it can become very difficult, but this is just when you click start now and you are stuck. That makes no sense.

Video didn't play on Firefox. I had to hit the "pop-out" icon to show it separately, at which point it showed the regular video controls (which should have shown in the first place, right?). If I didn't read the comments here, I wouldn't have realized this was a video.

An audio track narrating what's happening would be nice, although it's pretty clear from the video what's happening, which is great!

One question: how do you display functions that are more than a dozen lines long? Do they get shown in a scrollable window, or does the window get auto-sized to show the entire function (which, IMHO, would be bad if the function was huge)?

They are scrollable. We try to be smart with how we capture scroll/touchpad interactions for zoom/scroll so that they feel natural. Thanks for the feedback!

+1, it's only thanks to parent comment that I realized the image is a video, and I need to right-click, select play to start playback.

On my device (Linux) no control is shown at all even in full screen.

I just thought this was a screenshot, and got disappointed that login is compulsory to try the tool, without showing anything about it beforehand.

The back button seems to work fine for me, at least in Chrome. Could you provide more specific repro steps? Are you sure it's not just the OAuth redirect dance?

it happens for me if i click start now and try to use mouse button back, but if i click the back button it works? (also latest chrome)

Back button works for me in Chrome but not Firefox (Windows, 125.0.3, 64-bit).

Broken for me on Firefox, android phone.

Great idea, and I was excited to try it (and even pay for it!) until the requirement to sign up and the hijacked back button. Also, in my Firefox, your white box as a background appears transparent and so your text is just on top of a _very_ noisy background.

On the missing Terms of Service, you have the Data Use notice, but it essentially describes how you're using our email, not any code that we would need to upload to you. In the day and age where we're having daily discussions on copyright violations and people hoovering up any data or analysis they can find, I definitely want a sturdy legal agreement in place before I ship IP off to someone's systems.

Seconding other comments about having it run as a local program in some way, I have a lot of different tools that I use in my IDE to explore codebases, utilize LSPs, etc. One of the big ones is how I utilize semantic color coding (https://medium.com/@evnbr/coding-in-color-3a6db2743a1e) to quickly parse function / variable names, and usually a standalone app gives me a lot more ability to control things like that. Having it local (and not communicating remotely) means that I _also_ don't have to worry about you hoovering up my codebase.

Otherwise, excited to see someone implement an idea like this! I can be very visual with certain kinds of diagrams and code bases and was unhappy with how few tools I felt visualized those organizations well.

At this point we only index open source code. Once we open up to customers with private repos, that will definitely be the first thing to add.

Make a plugin. I want this and I think the world needs this.

> I was excited to try it (and even pay for it!) until the requirement to sign up

How much would you be willing to pay? I feel like if you say that, and you like a product on HN, it's helpful to provide feedback (although it's not show hn, so idk if they'll see it). One time payment of $100? $5/month subscription? 10/month?

If social-sign-in is too much of a barrier (it was two clicks for me, and my email is pretty public, and I can switch to another account within the browser), then I'd be very surprised that you'd be willing to pull out your credit card and deal with the hassle of a purchase or subscription.

Also, saying that you'd be willing to pay for the product is meaningless if it's much less than the effort to often build and maintain for the business.

Maybe I am wrong, and you're willing to pay 1000s if only for those few small issues, but sometimes small hurdles like sign-ins are a good way to filter out customers that should be turned away because they're not as invested in the product. I would even argue that an app that requires no sign-in comes off as non-serious because any non-trivial app requires sign-in; the ones that don't are often very simple and the type of thing most people wouldn't pay for.

You raise some good points, and having built multiple tools and a business that failed, I'm well aware of the tradeoffs between the cost to build and maintain vs. potential revenue growth.

However, I'm confused by, "If social-sign-in is too much of a barrier..." Nowhere in my comment is that what I was bugged by. I've signed up for plenty of random services with disposable emails (or, sometimes, even less-disposable ones). As for the barrier to entry, I've worked with plenty of tools / libraries that took me hours to potentially get up and running, so again, not a barrier-to-entry problem.

I find your opinion on "not requiring sign-in" pointing to trivial apps baffling. A quick "dnf list installed | wc -l" shows that I have over 5000 installed packages. While many of those are libraries, I have everything from IDEs, Browsers, CAD applications, software ecosystems, tools (both visualization and otherwise), and more. Sign in simply tells me that when you shut down the service or change it in some way that breaks everything and makes it worse in a few years, that I have no real recourse.

As for a lot of "hosted" services, I'm personally weird because I have a homelab and like doing a lot of self-hosted stuff, both as a hobby and for my own privacy reasons. This means that a lot of the "We're hosting it _for_ you!" arguments don't hold water for me, and frequently don't feel like the right fit for the product, instead being driven by business. But I also get the need to _have_ a business at all - the competition is brutal. As an example, when MS is willing to devote an incredible amount of resources towards building an "open source" IDE and an incredible number of people are willing to build free (beer & speech) plugins on top of it, how do you even begin to compete? I've seen a lot less mention of Sublime text in the last few years and everyone and their mother seems to be using VSCode.

So, to go back to the pricing, right now I'm not sure. This feels like the ~$100 / year for a personal license project. If it was $10 / month, that's probably worth trying out for at least a single month and seeing if it does have the expected value. As others have alluded to, since this is a standalone tool, that means there is friction for using it alongside / outside of your IDE. Is it valuable enough to overcome that and remember to alt-tab over to it or keep it surfaced among a hundred other windows and tabs? Maybe!

We built an "infinite canvas" style app for exploring codebases. We cut your repo into atomic pieces - functions, data structures etc. and give you an interactively expandable graph of defintions.

Even with the best go-to-definition editor feature you need to keep a whole bunch of mental context when tracking down a deep control flow. The idea of Territory is to give you exactly the relevant cross-section through a large codebase. A code map that you build in this fashion can then provide explanatory value to others.

So far we indexed Linux, LLVM and Godot to prove we can handle repos of that scale and to provide value free of charge to free software contributors. We will be adding more repos and shipping self-service build setup later. Would love to hear your opinion. Are there any projects you think we should cover next? We are doing C/C++ first -- our initial parsing setup is build around libclang.

I would like editing code in this style. Focus on narrow area but can easily view as bird eye.

Nice work!

Thank you!

Editing is definitely on the roadmap. We would like to have an agent to sync edits with your local workspace at some point.

What about a VS Code extension? Would love to explore like this in my IDE over needing a separate tool / webapp

Something like: https://github.com/pixelkind/p5canvas

I got that request from a couple of people already. Definitely coming soon. For now, we tried to make it easy to hop around manually. Click the node header to copy path, ⌘P, paste. Pasting a path to our search bar also works.

Post to HN when that launches. I’ll take a look then.

Sure. You can follow as on X @territory_dev, I post updates there.

I can imagine a number of really cool ways to explore code with a tight integration to intellisense / LSP

in particular, show all callers and callees of a code snippet

Support Unreal Engine and you'd get a lot of interest from game devs!

Ideally this would be a standalone app (perhaps ported using electron) that I could run locally, and import codebases directly. Sourcegraph was on the right track, but eventually fizzled out unfortunately.

I would love to use a tool like this to navigate the unknown on rails!

That is definitely an option. However what you get from a hosted service is that we do the indexing for you. That can take a significant amount of time for a huge codebase.

Love the idea, but isn't the "indexing" part of many editors and language servers already? Ctags and stuff? Never got the impression that to be a huge problem on modern hardware.

I doubt, there will be much demand for throwing large non-public code bases into third party services... However, I can totally see how this would be a hit as a FOSS project.

I've built a code search engine in the past so I know how painful debugging long indexing jobs can be and I would certainly be reluctant to support private repos until I know I can index thousands if not tens of thousands of open source repos with no issues.

That's more or less the plan. We want to prove our concept with free software repos first.

Sourcegraph CEO here. We stopped making a standalone Electron app (which was an experiment) and instead remained focused on our web app and editor extensions. You can use Cody in your editor with no server needed. We didn’t fizzle out. :)

Oh hi there! Love what Sourcegraph is doing.

I confused Sourcetrail and SourceGraph, didn't mean to spread misinformation on your product!

By chance did you mean Sourcetrail [1] instead of Sourcegraph? Old demo video on YouTube: https://youtu.be/Cfu6f0uyzc8?si=oNS9KKlbgEk_Ct0p.

[1] https://github.com/CoatiSoftware/Sourcetrail

Yes you're right, my mistake!

I have some interesting ideas about this, as I've been thinking about it and have been prototyping ideas for ... a decade at this point?

Do you have a way to contact you?

Any reason you're not using treesitter with LSPs by the way? This would make it really easy to get this working with all major languages at once.

LSP and treesitter are cool and we might use them when adding more languages eventually. From my understanding though treesitter does parsing only and it would take a bunch of work to do the semantic analysis clang already does. Plus clang is an industry tried compiler that we know can handle a lot of the rough edge cases of C and C++. LSP is closer to our use case but I think still not close enough. It took a lot of work to get the right points to cut the code at and when talking to clang directly, at least we can inspect things at a decently low level.

Are you on X? You can DM me at @pst723 or @territory_dev.

Some first impression UI feedback:

Don't overlap existing boxes when exploring new definition. Instead find the lowest free space in the column (or insert it at appropriate level)

When adding a reference to rather than exploring definition, default to adding box to the opposite side (left)

Ah yes those are definitely on the TODO list.

While we are at it, it would probably also be nice to (optionally) color the background of the explored row(or token) and color the title bar of the result correspondingly (I am thinking similar to Godbolt color coding for matching C->ASM)

It'd be great if this UI could happen inside VS Code, for the current workspace and its dependencies

This might interest you - https://github.com/aappleby/wideboard

This tool seems very useful. Demo well done.

But I’m not going to give a website my email before learning the pricing strategy and ToS which (currently) aren’t available (on mobile at least). Would love to see these added.

Yeah. Pricing or get busted.

It's free for the open source repos we indexed. No pricing yet.

It would be nice if you put links to the tool for those open source repos in the landing page so we can try it out.

Same. The video looks interesting, but forcing a signup before disclosing any more caused me to click away. It's interesting, but not interesting enough to make me give them my details.

I'll wait and see if someone in my dev network recommends it now. Too bad, it did look interesting.

Besides my other comment ; I like this idea and I have been thinking a lot about code understanding and overviews. As I get older I notice my memory degrading and I read a lot of codebases for my work, hobbies etc; many are very over architected and pretty annoying to grok. How can you rapidly understand where a specific functionality is? Etc. Codebases that have been thought out, nicely organised etc are a joy, but many, especially, newer ones I see, take going across 10+ files (in 5 packages) (with a number of build steps) to add/change a simple thing. And IDE's are not helping with that at all.

Luckily I usually find the patterns used and know the tools and libraries used, but indeed some things make me sigh deeply as I know i'm in for a dig in a pit of the damned when having to diagnose + fix something.

Some prior art from Brown university, code bubbles:

https://cs.brown.edu/people/spr/codebubbles/

They have teamed up with Microsoft to develop a visual studio ultimate extension:

https://marketplace.visualstudio.com/items?itemName=Debugger...

Aha, so that's what happened to Code Bubbles. I saw this video about the project years ago, and always wondered. https://youtube.com/watch?v=PsPX0nElJ0k

interesting to see the VSU 2010 reference, that was when all the great software architecture features released with Visual Studio, very powerful stuff.

> Works with Visual Studio 2010

There's this: https://github.com/StevenReiss/bubbles

I think Andrew Bragdon moved on from it and Steven Reiss (one of his coadvisors when Andrew initially created it) has appropriated it to some extent. Seems mostly dead though.

I was just about to post the same information. Sad to see the concept never caught on. I really liked using Debugger Canvas on VS2010 even if it was somewhat buggy.

IMO better representations for code is one of the big things we need to build more complex software.

Unfortunately as the demo shows, a tree-map is hard because the code is just too big. Like, you can only see one or two full snippets in the window at once, the others are mostly off-screen. I think this is one area that would genuinely benefit from virtual reality, due to the massive "screen space" and ability to map code directly to physical locations (which is a known technique for memorization and allows for even more space).

As a matter of fact I already have a demo working in the Vision Pro sim ;)

As seen here: https://x.com/pst723/status/1745105464113676478

In my opinion this has to be local and/or open source to get serious uptake. I really find it hard to trust slurping my codebases through some 3rd party site. Unless it's something well known and huge (aka can be sued when abuse comes out), I cannot see me using it on anything except open source projects.

> I really find it hard to trust slurping my codebases through some 3rd party site.

Everybody seems fine with doing just that on github.

> Everybody

I don't know who everybody is. Not me, not our company, not anyone I know. Who is everybody? Any stats?

People use Copilot but I already included that:

> Unless it's something well known and huge (aka can be sued when abuse comes out),

Edit: maybe you meant github itself? That's the same exemption as copilot.

Well, github wasn't always huge either.

It's unclear what the superpowers would be? Video doesn't show anything I can't do with an IDE or decent code editor, and there I also have refactoring tools, metadata like indicators for usages that can be used for navigating and so on.

Reminds me of UML-like diagrams over relational databases, except that it's generated one piece at a time. In practice I generate diagrams showing cyclomatic complexity much more often, and for code exploration outside the IDE I'd use ast-grep.

https://ast-grep.github.io/

I wanted to try it, but I was scared away by the idea that I was creating a new seeming-infinitely-persistent asset I didn't want. Could you put up an actual demo where I can just see an existing graph?

There are keyboard shortcuts for navigating up and down the goto definition navigation stack that are absolutely indispensable for this reason (in JetBrains IDEs at least, though I’m sure in other IDE/editors too). Their demo gif is exactly how I would visualize my thought process using this navigation, which is pretty neat! It’s so painful watching people global-search by function name to navigate back to where they just were once you lock this functionality in to your workflow (aaaa you can get there instantly and exactly!)

I definitely would not be able to live without my C-o's and gd's. Making the research process persistent is the next step forward IMO. We want the machine to extend your mental context.

If you're looking for something like this for data / SQL, we (https://www.definite.app/) have it:

https://www.youtube.com/watch?v=kvMw-JSeGK8

* click on a table to get a preview

* write SQL or create analysis with pivot-table-like UI

* add visualizations to canvas

* publish as a dashboard

Funny coincidence – saw this very similar, perhaps more polished variant of the idea trending on twitter today: https://twitter.com/fronseneca/status/1752125155667824764?s=...

I saw this work a while ago, they posted some early demos roughly when we were first opening up with our Linux index. While the interface is indeed similar, I'd say as things stand now we are different in a couple of dimensions.

First, we pre-build a codebase-wide index for large repos that's readily available vs some kind of local VSCode plugin.

Secondly, we cover different languages. We started with deep support for C/C++ based on clang while they seem to be focused on TypeScript.

I'm curious why you'd say that theirs is more polished?

could be the animations, hard to tell if its live or prerecorded with jank removed but the visual they post is very fluid and responsive. If that's the life performance that app is pretty fast.

Interesting they just posted an update to X this morning https://twitter.com/fronseneca/status/1787559698826244188

Sometimes it takes great amount of time to understand a specific flow in any given software that's abstract enough. This is a great concept. I'm ready to pay for it.

curating those accurate mental models of the system and its architecture are valuable things, even more so if it can be expressed in a snapshot graph like this tool can render.

Best in class experience for navigating code graphs started in Visual Studio Ultimate circa 2010. The nav experience for dgml was super smooth and I've never experienced another graph tool as powerful as that. Looks like some of that lives on till this day https://learn.microsoft.com/en-us/visualstudio/modeling/map-....

Thank you, glad to hear that!

We're actually building something similar at getSpectral.io . Ours focuses on Javascript/Typescript, and is a VSCode plugin so you can use it on any repository!

This seems great, I would use something like this day to day if it were a vscode plugin. Often times two side by side panes are not enough to get the intertwined context of a large program that spans both code / subprocess / api boundaries. Currently, I solve this problem by keeping a set of tab groups for different "workflows" that I need to edit frequently

Is this only for C or does it support other languages? It might be helpful if you site contains some more details about things like this?

This is right up my alley. Shame I'll never get to try it after experiencing the back button hijacking. Fail.

I cannot even see the thing because of error - Cannot load page. Too many redirects (more than 20). What’s up?

Cloudflare configuration fucked me up. We should be back up.

I want to use this for private codebases. Seems like something that should have existed already, great idea!

Thank you, glad to hear that!

not able to sign in with github:

Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared. Some specific scenarios are - 1) Using IDP-Initiated SAML SSO. 2) Using signInWithRedirect in a storage-partitioned browser environment.

Same for me (on Firefox)

I got this same error (in Chrome).

This is fine and all but it only shows half of the information, namely the flow of the code. When it models the flow of data then it will become as powerful as the Unreal Engine Blueprints which to me is the pinnacle of visual coding.

Great to see this, I'm working on something similar but local and LSP-powered.

fixed now

Love this app, this is something I've had rolling around in my head for a while and I think it can massively improve developer productivity. Excited to try it when I can use my own code!

Thank you!!

This seems cool and I'm always open to new ways of working, but I am hesitant to trust a third party with my code, especially in this AI gold rush we're living in.

Pretty much seems like what reverse engineering tools have been doing for ever. Always wondered why that way of navigating code never seemed to catch on outside this domain.

I've been waiting for something like this!! I don't know why this doesn't exist already!

It would be helpful if you added more to the homepage.

What languages does it support?

Very nice start, I've been dreaming about this for a while as an intellij/vscode plugin, will be great to see if anyone can pull it off

Hell yeah, this is really cool.

Haven't used it, but one thought that came to mind, would be to allow binding key presses to specific cards.

e.g. Hold my mouse button on a card, hit the "k" key, and now "k" will returned to that bookmarked card.

Demo solves the representation of a call tree in a really useful manner, the other thing to solve is the quick navigation within the call tree when reasoning about behavior. Would love to be able to simply bind bookmarks, and quickly flip back and forth between them. Perhaps holding Shift-k in the above context would temporarily "float" that bookmarked card next to my current card, so I can kind of temp pull in that context.

Keyboard navigation is definitely something I want to improve. I think we can get far with a good search bar implementation.

Premature Abstraction Undoer Machine™

Love it! Definitely inspired by the time spent digging through layers of half-assed abstractions!

This needs to be a part of VSCode

I have actually been using exactly this approach to investigating bugs for some time now. I started with ctrl+alt+clicking in vscode to open 10's of tabs, then taking a screenshot and drawing lines, but the large amount of tabs caused chaos, and then I suddenly noticed I need another tab and i would have to somehow merge the 2 images. To fix this, I added a digital whiteboard to my workflow, and this is phenomenal. You can use any digital whiteboard, such as https://www.figma.com/figjam/, https://excalidraw.com/, https://miro.com/, or https://obsidian.md/canvas. My workflow generally goes like: 1. Copy screenshot of code in vscode 2. Paste into digital whiteboard 3. Go back to vscode and ctrl+click on symbol to see references, and then find the one i need. 4. Copy/paste that code into the digital whiteboard. 5. Add arrows to symbol in the code to connect 2 separate definitions/references/usages.

Having a tool such as territory.dev to replace the digital whiteboard would be really nice, as the copy/pasting and manual linking using arrows in the images is pretty time consuming, and the text in territory.dev is still copyable and searchable. In a canvas, i would have to use snipping tool on windows to extract specific text from the images again.

However, there are a lot of features I am missing from a tool like territory.dev, which makes the whiteboard superior:

* The most important feature that i would need for using a code exploration whiteboard, is that it works with the ui from a different application. I frequently add screenshots from the most diverse of places to the canvas, and link it to specific methods in my code, such as: * Message or specific parts of the UI of the application i am working on * Private messegas with other people * Github issues/comments in our task management system * Chrome console logs * Chrome network requests * Terminal output * Database viewer output or sql queries * Error messages/stack traces * JSON data returned from requests * CSV data returned from requests

This works well with a generic digital whiteboard, as i can just screenshot the other UI and then annotate it with a pencil, and then draw lines to what i'm working on.

* The canvas workflow works with all programming languages that my IDE supports. This means that for all programming languages, i get: * Correct syntax highlight * Correct goto definitions (by just using vscode, and then moving it to the canvas) * Familiar theme * Additional Inline actions and info provided by other extensions (count of references, inline errors, parameter hints, showing of translation string, etc)

You could make this work in a general way by instead of integrating with each language, you integrate with the LSP protocol, and then you can just plug in every LSP implementations for each programming language. In theory that would give you goto definitions for all languages.

* I often see myself "skipping" a definition if i am intimately familiar with the code i'm working with. If i know that an implementation on a high level runs a method to mutate an object, then the other method might be 10 hops away, but all of the methods in-between may not be relevant for the current bug i am investigating. * In the same vein as above, I might sometimes follow a value through multiple functions, and in that case i would like to connect a mutation which is applied to my value directly to the usage of the value, even if it might not reference the same symbol.

* Sometimes i want to connect 2 things which don't have a symbolic reference between them, such as a magic string which is used multiple places, and afaik that isn't possible in your

* You can trace a "path" a variable takes through your system by connecting function calls to parameters, and then to usages of parameters or when they are passed into the next method. This makes trailing your steps when you lose your train of thought a lot easier.

* You have the usual features of digital whiteboards, such as adding comments, stickies, highlighting and other things.

I am really enthusiastic about this kind of working, and it really helps when you are 15+ layers deep into a problem (which happens relatively often) and you lose your train of thought. I could walk someoene else who knows the code through one of my canvases, but I wouldn't share these whiteboards with a teammate though, as they are quite chaotic and are directly linked with the way i'm thinking.

We will be adding free notes soon. Arbitrary links and function calls is something I've been thinking about. We might do it if we find a good way. Yes, a completely free drawing board would be the extreme edge of the spectrum.

I did an experiment with exporting to Obsidian's interchange format: https://twitter.com/pst723/status/1767381329086145002/photo/.... Perhaps that is something you'd find helpful for your use case?

I just see an image and a huge button, that brings me to the sign up page with disabled navigation to get back. No text, no description, no video. Nothing. Brave on iOS.

Really the worst experience I’ve ever had with a landing page. Whatever this is …

Did anyone figure out how to use this with another repo?

Now combine this with Jupyter notebooks and we are good to go. I'd pay for that.

Reply on news.ycombinator.com