6 ms·

Show HN: Experimental Semantic Code Explorer

117 points by paulshen 6y ago

Ristovski 6y ago
Is only React supported? Or is the architecture generalized enough where support for other languages can be implemented further on?
- paulshen 6y ago
  It's generic enough for JavaScript/TypeScript codebases. Under the hood, it's using TypeScript's language server which conveniently runs in the browser. Other languages would require running the respective language service elsewhere or caching the results (ala LSIF https://lsif.dev/ https://lsif.dev/)
paulshen 6y ago
I've been thinking about how we can make devtools smarter and more fun to use. We write code with text but programs contain a lot of structure that we can take advantage of! If you're on mobile, you can find a video here https://twitter.com/_paulshen/status/1346583010691321856 https://twitter.com/_paulshen/status/1346583010691321856 This demo is an iteration of my code browser exploration where jump to definition always opens in a column to the right. I use TypeScript's language server to get the program's semantics which allows features such as showing only the item (eg function) that you're jumping to. Here is another iteration with a canvas where you can drag panes around. https://artifacts.bypaulshen.com/code-explorer/01/?snapshot=9feb3d1a-b41e-44e6-adff-9b522414dc0b https://artifacts.bypaulshen.com/code-explorer/01/?snapshot=... I have more ideas/iterations coming. My goal is to productionize this for real use :)
- n0w 6y ago
  This is pretty cool. One thing I noticed is that Cmd-Clicking a variable only shows where it was defined. I think it would be pretty useful if you could also see the places it was changed.
  - deleted 6y ago
    [deleted]
  - Garlef 6y ago
    Or: Don't change a variable once it was defined. This way there's only one relevant location in codebase. Makes things much easier. But agreed. Would be a nice feature for the cases where this can not be avoided.
- pugio 6y ago
  That spatial canvas organization is the closest thing I've ever seen to my dream coding space. The 1-dimensionality of a linear string of code always seemed like it ignored so much of the brain's processing abilities. I first noticed this when playing real time strategy games – I would always have a 2D mental model of where all my infrastructure was, my troops, various battles, etc. It was easy to keep track of, despite the complexity. I suspect many (most) programmers also have a rich mental model of their codebase, instantiated by reading and jumping around these mostly linear streams of text (our brains "fold" linear code like amino-acid sequences fold into 3d protein shapes). Mapping between mind-space and editor-space takes a lot of work, and is the source of many many bugs. Being able to map my higher dimensional space to a richer coding space – to group related functions and objects together, and maybe draw some boxes around them, or toggle various layers of meta-information (such as connections, code paths, etc.) would be amazing. Please keep doing this.
  - TeMPOraL 6y ago
    Strongly agreed. I wanted to have this ever since I saw the video of "Code Bubbles" some decade ago. The problem with how we currently develop is, IMO, low control over screen space. We have files, which are strongly linearized. We can open more than one file side by side. Most tools provide some way to jump across references. Some tools provide these as inline inserts ("popouts"), instead of opening more files. But still, for any given thing you're focused on, most of the file you have on your screen is likely unrelated. I'd love to see an experiment around such code bubbles, but taken to further extremes. Make it easier to pop up bubbles with a single function, that can optionally be expanded to cover more - and also, importantly, shrunk down to cover less. Let me see and retain the graph of connections on the screen. And edit code directly in these bubbles. All on a densely packed, 2D slate, scrollable in both dimensions and fully navigable with a keyboard.
    - Tcepsa 6y ago
      Such a thing might finally get me to switch away from Emacs for coding!
    - eitland 6y ago
- forgotmypw77 6y ago
  thank you for sharing your work. please consider accessibility to nojs users, perhaps by sharing plaintext website or screenshots. i am using device where enabling js is not an option, and feel left out by current presentation. good luck to you in your work, sounds very exciting! twitter recently changed their accessibility policy to not allow nojs clients at all, whereas before one only had to click through a dialog each tweet.
  - akalsz 6y ago
    Try nitter: https://nitter.snopyta.org/_paulshen/status/1346583010691321856 https://nitter.snopyta.org/_paulshen/status/1346583010691321... Or setting your user agent to Googlebot/2.1 for Twitter should work as well[1]. [1]: https://raw.githubusercontent.com/tats/w3m/master/doc/README.siteconf https://raw.githubusercontent.com/tats/w3m/master/doc/README...
- sethjgore 6y ago
  amazing work! the canvas iteration is way better! it has spatiality and that's always an added benefit
- antonzabirko 6y ago
  How are these different from multiplexed vim setups?
lrossi 6y ago
I think maybe Facebook should stop asking for complicated algorithms questions in their interviews, and instead ask to debug code like this with 7 indentation levels per function and behavior affected by a dozen flags. The tool is nice, but it would have been better if the code was more readable in the first place, such that any editor would have sufficed. To be fair, I have seen much worse. At least there’s plenty of comments, and the naming is ok.
Kiro 6y ago
Awesome! This should be made into a VSC extension.
phailhaus 6y ago
Miller columns! I have fallen in love with this UI paradigm after using them for graph-based tools. Some thoughts: 1. Once you open multiple panes from the same column, and go out to 2+ levels deep, it quickly becomes unclear which panes followed from which. There is an underlying tree structure that you are hiding from the user. Explicitly surfacing this tree somehow could greatly increase the usability of the tool. At the moment, opening two reference panes from the same parent column immediately becomes difficult to manage. Some ideas: clicking on a reference pane should highlight the code pane that it is associated with, something similar for code panes might also be appropriate. Highlighting up- and down-stream dependencies would make it much clearer what panes I'm about to delete by deleting a given pane (the user can drag a pane to a different column in order to "disconnect" it and keep it around). 2. If I delete a pane from a column, its descendants stay open, making it even more confusing why I had them open in the first place. 3. The header breadcrumbs are brilliant. 4. You have two types of panes: reference panes and code panes. I'm not sure that's a good idea, since a reference pane is tightly tied to the code pane it came from. It may make more sense to show references in code pane itself, and then let me follow references from there into the next column. 5. I'm on a Mac with a trackpad, which makes horizontal scrolling very very easy. This is not true for all your users. It might make sense to add thin left/right buttons so that I can quickly move a column at a time. At the very least: if I open a new column, the window should scroll to make it visible if it is about to be cut off. Since users screens will most likely be able to handle at least two columns, this shouldn't be too jarring (as long as you use a smooth scroll! quick but clear, 100-200ms)
- TeMPOraL 6y ago
  > There is an underlying tree structure that you are hiding from the user. There shouldn't be, though. You're following a graph structure of cross-references, in both directions (though it's less obvious here how to open panes for back references). It's not a tree. > If I delete a pane from a column, its descendants stay open, making it even more confusing why I had them open in the first place. Again, not a tree. Deleting panes opened from the pane you're deleting would be a bad thing, because some panes may be just intermediaries you used to find the semantic units you were interested in. The GUI here is similar to Miller columns, but it's not actually Miller columns - it doesn't represent a tree.
nicoty 6y ago
There's a text editor being developed that edits code based on nodes of its AST representation - https://github.com/kneasle/sapling https://github.com/kneasle/sapling

117 points by paulshen 6y ago

Is only React supported? Or is the architecture generalized enough where support for other languages can be implemented further on?

paulshen 6y ago
It's generic enough for JavaScript/TypeScript codebases. Under the hood, it's using TypeScript's language server which conveniently runs in the browser. Other languages would require running the respective language service elsewhere or caching the results (ala LSIF https://lsif.dev/ https://lsif.dev/)

paulshen 6y ago

I've been thinking about how we can make devtools smarter and more fun to use. We write code with text but programs contain a lot of structure that we can take advantage of! If you're on mobile, you can find a video here https://twitter.com/_paulshen/status/1346583010691321856 https://twitter.com/_paulshen/status/1346583010691321856 This demo is an iteration of my code browser exploration where jump to definition always opens in a column to the right. I use TypeScript's language server to get the program's semantics which allows features such as showing only the item (eg function) that you're jumping to. Here is another iteration with a canvas where you can drag panes around. https://artifacts.bypaulshen.com/code-explorer/01/?snapshot=9feb3d1a-b41e-44e6-adff-9b522414dc0b https://artifacts.bypaulshen.com/code-explorer/01/?snapshot=... I have more ideas/iterations coming. My goal is to productionize this for real use :)

n0w 6y ago
This is pretty cool. One thing I noticed is that Cmd-Clicking a variable only shows where it was defined. I think it would be pretty useful if you could also see the places it was changed.
- deleted 6y ago
  [deleted]
- Garlef 6y ago
  Or: Don't change a variable once it was defined. This way there's only one relevant location in codebase. Makes things much easier. But agreed. Would be a nice feature for the cases where this can not be avoided.
pugio 6y ago
That spatial canvas organization is the closest thing I've ever seen to my dream coding space. The 1-dimensionality of a linear string of code always seemed like it ignored so much of the brain's processing abilities. I first noticed this when playing real time strategy games – I would always have a 2D mental model of where all my infrastructure was, my troops, various battles, etc. It was easy to keep track of, despite the complexity. I suspect many (most) programmers also have a rich mental model of their codebase, instantiated by reading and jumping around these mostly linear streams of text (our brains "fold" linear code like amino-acid sequences fold into 3d protein shapes). Mapping between mind-space and editor-space takes a lot of work, and is the source of many many bugs. Being able to map my higher dimensional space to a richer coding space – to group related functions and objects together, and maybe draw some boxes around them, or toggle various layers of meta-information (such as connections, code paths, etc.) would be amazing. Please keep doing this.
- TeMPOraL 6y ago
  Strongly agreed. I wanted to have this ever since I saw the video of "Code Bubbles" some decade ago. The problem with how we currently develop is, IMO, low control over screen space. We have files, which are strongly linearized. We can open more than one file side by side. Most tools provide some way to jump across references. Some tools provide these as inline inserts ("popouts"), instead of opening more files. But still, for any given thing you're focused on, most of the file you have on your screen is likely unrelated. I'd love to see an experiment around such code bubbles, but taken to further extremes. Make it easier to pop up bubbles with a single function, that can optionally be expanded to cover more - and also, importantly, shrunk down to cover less. Let me see and retain the graph of connections on the screen. And edit code directly in these bubbles. All on a densely packed, 2D slate, scrollable in both dimensions and fully navigable with a keyboard.
  - Tcepsa 6y ago
    Such a thing might finally get me to switch away from Emacs for coding!
  - eitland 6y ago
forgotmypw77 6y ago
thank you for sharing your work. please consider accessibility to nojs users, perhaps by sharing plaintext website or screenshots. i am using device where enabling js is not an option, and feel left out by current presentation. good luck to you in your work, sounds very exciting! twitter recently changed their accessibility policy to not allow nojs clients at all, whereas before one only had to click through a dialog each tweet.
- akalsz 6y ago
  Try nitter: https://nitter.snopyta.org/_paulshen/status/1346583010691321856 https://nitter.snopyta.org/_paulshen/status/1346583010691321... Or setting your user agent to Googlebot/2.1 for Twitter should work as well[1]. [1]: https://raw.githubusercontent.com/tats/w3m/master/doc/README.siteconf https://raw.githubusercontent.com/tats/w3m/master/doc/README...
sethjgore 6y ago
amazing work! the canvas iteration is way better! it has spatiality and that's always an added benefit
antonzabirko 6y ago
How are these different from multiplexed vim setups?

lrossi 6y ago

I think maybe Facebook should stop asking for complicated algorithms questions in their interviews, and instead ask to debug code like this with 7 indentation levels per function and behavior affected by a dozen flags. The tool is nice, but it would have been better if the code was more readable in the first place, such that any editor would have sufficed. To be fair, I have seen much worse. At least there’s plenty of comments, and the naming is ok.

Kiro 6y ago

Awesome! This should be made into a VSC extension.

phailhaus 6y ago

Miller columns! I have fallen in love with this UI paradigm after using them for graph-based tools. Some thoughts: 1. Once you open multiple panes from the same column, and go out to 2+ levels deep, it quickly becomes unclear which panes followed from which. There is an underlying tree structure that you are hiding from the user. Explicitly surfacing this tree somehow could greatly increase the usability of the tool. At the moment, opening two reference panes from the same parent column immediately becomes difficult to manage. Some ideas: clicking on a reference pane should highlight the code pane that it is associated with, something similar for code panes might also be appropriate. Highlighting up- and down-stream dependencies would make it much clearer what panes I'm about to delete by deleting a given pane (the user can drag a pane to a different column in order to "disconnect" it and keep it around). 2. If I delete a pane from a column, its descendants stay open, making it even more confusing why I had them open in the first place. 3. The header breadcrumbs are brilliant. 4. You have two types of panes: reference panes and code panes. I'm not sure that's a good idea, since a reference pane is tightly tied to the code pane it came from. It may make more sense to show references in code pane itself, and then let me follow references from there into the next column. 5. I'm on a Mac with a trackpad, which makes horizontal scrolling very very easy. This is not true for all your users. It might make sense to add thin left/right buttons so that I can quickly move a column at a time. At the very least: if I open a new column, the window should scroll to make it visible if it is about to be cut off. Since users screens will most likely be able to handle at least two columns, this shouldn't be too jarring (as long as you use a smooth scroll! quick but clear, 100-200ms)

TeMPOraL 6y ago
> There is an underlying tree structure that you are hiding from the user. There shouldn't be, though. You're following a graph structure of cross-references, in both directions (though it's less obvious here how to open panes for back references). It's not a tree. > If I delete a pane from a column, its descendants stay open, making it even more confusing why I had them open in the first place. Again, not a tree. Deleting panes opened from the pane you're deleting would be a bad thing, because some panes may be just intermediaries you used to find the semantic units you were interested in. The GUI here is similar to Miller columns, but it's not actually Miller columns - it doesn't represent a tree.

nicoty 6y ago

There's a text editor being developed that edits code based on nodes of its AST representation - https://github.com/kneasle/sapling https://github.com/kneasle/sapling