Feature Request: Code Canvas

[eorroe]

Any chance for a view for viewing code similar to:

https://www.codecanvas.app

Codeflow supports so many more languages and is already doing a great job at mapping out and visualizing the code so I imagine it just a matter of adding another view that shows actual code as in https://www.codecanvas.app

[braedonsaunders]

A CodeCanvas-style view can fit. Not a second product, just another view on the map we already have: click a node, read the file next to the graph.

I will build that. Keep dumping ideas like this. If it makes Codeflow better and it still fits in the one file, I will do it.

[eorroe]

Yes that is what I am asking just another view on the map already have where the code of connected different files can be viewed connected at a glance and ideally as close to as codecanvas: where variables, function names, imports and exports can be identified in the single view across files.

Also where the variables, function blocks and imports are highlighted across files in view like in codecanvas.app.

Ideally filtering by files so not entire codebase which I believe is already implemented on the bottom left of dashboard where one selects folder and the view filters based of directory.

Also once cli as explained in #86 works the view can also show red and green diff changes when files are updated like in codecanvas.app.

Thanks for considering this excited to see it implemented!

PS

Not sure if should open another issue but notice none of the current views as one zooms out the titles do not get larger to still be able to read like in codecanvas.app I can open a separate issue for this but something to add to the code canvas view.

[braedonsaunders]

That is the shape. Same map, code beside the graph, symbols and highlights across the files in view. Folder filter stays as it already works.

CLI red/green diffs can land once #86 is real. Zoom labels that stay readable can ride in this view. No need for a second issue.

I will build it.

[braedonsaunders]

Built this as another view on the existing map, not a second app. Click a node, read the file next to the graph, see connected files, and highlight symbols across them. Folder filter is unchanged. Zoomed-out titles stay readable in this view. CLI red/green diffs can wait.

PR: #87

[braedonsaunders]

Built. New Code view on the same map: graph on the left, file on the right, symbols highlight across connected files. Zoom titles stay readable. Preview in #87.

[braedonsaunders]

This is on main now. Open https://codeflow.braedonsaunders.com (or index.html), analyze a repo, switch visualization to Code, click a node. Graph on the left, file source on the right, connected files as extra cards.

[braedonsaunders]

Live URL is https://codeflow-five.vercel.app/ (or open index.html locally).

[eorroe]

Hey @braedonsaunders thanks for the updates while it is a good start unfortunately it is not taking advantage of the infinite canvas UI and limited to being fixed to the right of the canvas.

The idea was to be more like codecanvas where the files are individual code-card file panes that can be viewed on the infinite canvas instead of fixed to the right limited to only 4 files that are forced into the space having to scroll through the files.

It's best where can view the files on the infinite canvas and connected with lines which you already do.

As similar as codecanvas.app

The use of the infinite canvas is the advantage of the view.

[braedonsaunders]

Fair. The split pane was a start. I will put the file cards on the canvas itself, connected with the lines we already have, not stuck to the right and not capped at four. Same one-file app.

[braedonsaunders]

This is in #88. Code cards sit on the canvas now, connected with the existing lines. No 4-file cap. Preview: https://codeflow-git-cursor-code-cards-5ab48c-braedonsaunders-projects.vercel.app