shamshirz/code_vis

Tools for visualizing elixir programs

code_vis's Issues

Improve UI

Problems

• Too much info at once
  • Like reading, we ned to take it all in to determine what's important
  • Maybe allow the idea of "bold" or "h1" to help draw attention to important things

Solutions

Filtering in the graph

• Pro: User control over what's shown, default can be less info
• Con: Do we need to build this? Will it help users learn something?

Orient In another way

• Pro: Might add clarity to ordering, currently the shape is fluid and that doesn't help readability idt
• Con: 🤷

Other Graph View options

• Discovery - How do other people handle this complexity? These aren't crazy complex graphs
• inspiration - word clouds, rap lyric relations, etc
• Draw attention to high activity or density areas

Resources

• https://visjs.github.io/vis-network/examples/
  • disassembler example!
  • https://visjs.github.io/vis-network/examples/network/exampleApplications/disassemblerExample.js

Process Sam & RJ Feedback

Interactive graph w/ more data

not knowing anything about the codebase, i found myself wanting to learn more about what these functions are trying to do - had the urge to mouse over a node and see if the docstring would pop up

• Instinct to hover for more info about each fxn
  • Meta data - doc string, spec, etc

Graph Orientation

you may consider a horizontal flow to the visualization - i'm finding myself wanting to look at the 1st generation children of the root node in order, to get an idea of the flow of logic

• Try some other display types, horizontal
• Research how other people display graphs

Grok-ability

Lots of information on the page

…very difficult to make sense of in graph form (although I would claim that they're likely at least as difficult to make sense of in source code form, probably more)

Provide a way to select what's important (filter by depth)

But I think what I'd want is basic filtering functionality E.g. to be able to specify the number of edge traversals from the originating function node visible at once on the graph

• Where 1, for example, would mean show me all of the functions called directly by this one
• 2—all functions called directly by this one and all functions called directly by those

Filter by branch

But yeah. I'd also like to be able to filter by just one "branch" of the original function

• Idea: would this be like folders in a graph? You can close it, and we may say how many outgoing edges exist, but don't display them

Insights

Can we provide "areas of interest" based on what a good graph pattern might be

I think it could be huge if you could come up with some heuristics like that. At that point you could do even better than say "look at this graph to see if you have lots of the same arrow pointing between the same two nodes," you could encode it!!

🎯 Goal: Data is Intuitive & Actionable

How?

Is the graph intuitive? - need user feedback
Once you understand the graph, what can you do with that knowledge? - user feedback

Remove `graphviz` binary dependency

This includes removing the original mix visualize mfa() task

🔬 Explore other Repos and gather data

Big elixir projects and small ones too!

https://www.notion.so/CodeVis-Research-80bf562a401f4a109ccfe279eff20e23

• https://github.com/ericmj/decimal
• Ecto
• ExDoc

🐛 Remove circular dep bug

Thought I fixed it, but I didn't - create test case

🎯 Goal: Get user feedback

Get this in the hands of users

Key Results

• Collect notes from users
  • They need to be interested in giving feedback
  • They need to be working on an Elixir project
• Increased use base by over 100%
• 50% of users can tell you what CodeVis does

Actions

• ✅ Easier to interact with than a mix CLI input
• ✅ More accessible than needing to know mfa() by heart

👨‍🔬 ngrok deployment for specific users of a project

• Choose a Project
• Make a branch with code-vis dep
• Run the code-vis server locally
  • Could do cloud deployment, but more work & security concerns
• use ngrok to expose the data

How long does it take to startup?

~1 min to compile CB, 1 sec to run ngrok, 10 sec to copy & paste url

Can it be put into a script?
Yeah, but I can also just leave it running and not worry about it lol

• Terminal1: mix code_vis.server
• Terminal2: ngrok http 1337
• Share the URL with testers

First pass: sam & rj

Related Product!

https://www.codesee.io/

Improve Testing

• Filtering out of non-user modules
• Intermediate (map) -> Graph (external lib)
• :ets -> Intermediate (map)
• Compilation tracer
  • This turned out to be really hard! How do we test a mix task that recompiles the project?
    • Boundary does it by generating a dynamic project within the test setup!!
    • Elixir xref has tests that may be easier to replicate