Skip to content

Latest commit

 

History

History
232 lines (203 loc) · 11.4 KB

DEVELOPMENT.md

File metadata and controls

232 lines (203 loc) · 11.4 KB
Raw

Notes

TODO:

  • Add a button on the main page that brings up a wx file dialog
  • Generate xref_graph.dot file locally
  • Link the profiling to the main depviz js
    • Maybe via phoenix channels push
    • Maybe a new page that takes the local file path as a param?
    • Maybe launch wx from the main page?
  • Create a xref_graph.dot via erlexec
  • Disable profiling support in production

Should I create a 2-d graph of compilation time, vs frequency of recompilation? This will show an "impact" score, an amalgamation of how long you have been waiting for a specific

Other interesting links:

Main things to remember:

  • The arrow head size is proportional to the stroke width
  • The arrow head is drawn with a svg marker element

Top annoyances with current implementation:

  • Hard to find the specific files that the currently highlighted node depends on
  • Hard to tell how many files are "behind" each compilation dependency
    • i.e. if a file has 3 compilation dependencies it's hard to see how many files each of those dependencies is contributing
    • Or hard to tell which files are behind the compilation dependency

Architecture

When running in my production setup (https://depviz.jasonaxelson.com), only allow analyzing pre-generated files (either .dot or a built json file). In development/when running locally LiveView is used to facilitate analyzing another project directly.

Meta

Core: Elixir Developers don't want to have to wait for files to be recompiled while developing

Therefore, Elixir Developers want to minimize compile dependencies (especially of files that are slow to recompile)

Helps you answer questions about the Elixir code base:

  • Why when I change file A does it cause 100 files to recompile?

    • Investigate: What files will cause this file to recompile?
    • Investigate: What files does this file cause to recompile?

  • What compile dependencies do I have that I don't need (or aren't worth it)?

  • Top question: What recompilation dependencies does the code base have

  • And maybe:

    • What files trigger the most other files to recompile? (can mostly see this visually)
    • What files are most often triggered

  • If we were tracking compiles of the project (store in a GenServer or file), then show which files are occupying the most time spent compiling

Questions:

  • How do you switch between the file list and the top stats?
  • Should an elixir project have any files that recompiled very often? Seems to usually be something you don't want (although of course there are some times that it is needed)

TODO:

  • Implement new initial screen
  • Add new logo
  • Link from logo back to initial screen
  • When choosing a sample file, change the url
  • Handle bad dot files
  • Selected node + hover: Show the compile path
    • Should this depend on the view mode?
  • Selected node + hover: show the files in the path in the infobox
  • Click on file in top stats to keep it highlighted
  • Hover over file in ancestors info box to see the path from that file to the selected file
  • Try to implement pan and zoom
  • Auto-size the main svg
  • Allow clicking on files in the "All Files" list to select them
  • Don't show completely disconnected files (but still count them in the total file count)
  • Re-size the main svg when window size changes
  • Selected file mode should switch when view mode is toggled
  • Bug: a label gets rendered over the current node (interfering with rendering and mouse focus)
  • Highlight two-way dependencies somehow
  • Parse mix compile --profile time

Done:

  • Show a list of files on the left
  • Allow filtering in the list of files
  • Allow dragging
  • Only render the labels when hovering
  • When hovering, remove tooltip
    • Replace with making the node label always show, and be larger for the current node
  • adding the labels appears to have negatively impacted performance
  • Click on a node to keep it selected
    • Didn't implement this in the way I was originally envisioning
  • Use info box to show files that will be recompiled most often
    • Calculate this not on the main thread
    • Cache this calculation to be re-used when hovering
  • When hover, in the info box show the outgoing dependencies
  • Have a mode to show what files this file will trigger to compile
    • Show the mode selector in the upper right
  • When hovering a node, show compilation dependencies in info box
  • Use different colors
    • Selected node shouldn't be same color as compile-time dependencies
    • Files that will case this file to recompile, and files this causes to recompile should be two separate colors
  • Hide node-centric force layout for now
  • Create a glossary
  • Force layout charge should be set based on the number of nodes
  • Use a tab layout to switch between "All files" and "Top stats"
  • Change the stroke width when hovering
  • Add mode selector
  • Implement hover mode to see which files depend on the current file
  • when in hover mode ancestors render the compile line that causes the highlighted file to compile
  • Top stats: bold the current stat
  • Add "dependers" and "dependees" to the view mode switcher
  • Add updated info box hover mode for dependees view
  • Show the info box under the top stats list
  • "Has a dependency on these files" should show the total count (compile time)
  • Click the selected node to keep it selected, and then be able to toggle the view mode
    • Also be able to see the route, or all routes between the selected file and the hovered file
      • Shortest route only?
      • Shortest route bold, others less bold, elide parts that are not part
    • The label for the selected node should go away (instead just rely on the info box)
  • The selected node label is dissapearing on hover
  • Selected node + hover: Reset the colors on mouseout
  • Selected node + hover: Show the labels for every highlighted node
  • Selected node + hover: Show the labels only for the shortest path (i.e. don't show the backwards path)
  • Selected node + hover: Handle view mode toggled
  • Selected node + hover is not restoring stroke colors
  • Make the all files view the default
  • When hovering over top stats, ensure that the view mode switches appropriately
  • New controller action that simply serves a .dot file
  • Parse the .dot file in js
  • Allow using a user-provided .dot file
  • Allow choosing a preset xref_graph.dot to be shown via dropdown
  • Change the selected node to the new style
  • When in highlight individual file mode from roll over, use selected file style but in the color of the node
  • Selected file when switching away should reset the node force layout
  • All files view default fix
    • Selected file view should replace all files view
  • In sample, f.ex should depend on c_export.ex, yet it isn't highlighted in ancestors view
  • Searching should filter the top stats also
    • And maybe show the search text as well
  • When searching and then hovering a node, need to restore the searched nodes
  • When clearing a search need to restore the correct node colors
  • Clean up bugs in search
  • Top Stats: don't show files that don't cause recompiles
  • Top Stats: don't show files that don't get recompiled
  • Top Stats: when no files match top stats search, show an empty message
  • File search: when no files match top stats search, show an empty message
  • Render graph at root
  • Add updated info box hover mode for dependers view
  • Fix top stats hovering and node force diagram interaction
    • Change the top stats to use the same highlight style as the all files filter
    • This will make it easy/understandable to switch between them
    • After that keeping the top stats list filtered by the file search should feel pretty intuitive
  • Selected node + hover over file tree: highlight the node hovered
  • Update info box for ancestors mode
  • Add the updated key
  • Add "Selected File" tab when in selected file mode
  • When in "Top Stats" mode: make all the top stats files highlighted
  • Parse .dot file in js without sending to server
  • Deploy to a server

Maybe:

Future:

  • Configurable node coloring based on filename prefix
  • "Live" view of a project selected interactively
    • Maybe even launch the project via bakeware?
  • node centric force layout polish
    • transition to the layout sometimes keeps the discarded nodes for too long
    • Maybe need to add special handling for unShowNodeCompileDeps when transitioning to node-centric force layout
    • tooltip doesn't match node labels (labels are incorrect)
    • Allow dragging
    • Node centric force layout always highlight the selected node
    • Node centric force layout have way to go back to normal layout
    • Node centric force layout is not well centered
      • Can we apply a higher degree of force to keep it more spread out and higher up?
  • Show which compile-links cause the most files to be recompiled
    • How difficult is this to calculate? Hard, or rather expensive because this needs to be checked for ALL links, and for each link need to recalculate the stats for ALL nodes. Because we cannot just check the compile dependencies, need to check export and runtime deps as well (because a compile dep causes transitive dependencies with runtime deps)
  • Integrate mix compile --profile=time output
  • Add possibility for grouping or coloring based on boundary boundaries

Ideas:

  • can you click on a node and give it gravity put the selected node at the top and then the rest will hang down based on how many jumps they are away
  • Hook this up to show which files are being recompiled live, flash them as red and then slowly fade back to black
    • This might require hooking up to ElixirLS or another build tool (like exsync), although alternatively you might be able to add a custom compiler to your project, although that's more invasive than what I was originally envisioning. But maybe my stand-alone application can spin up a new beam instance that will control it's own compilation (have it's own build path) and avoid conflicts that way.

Glossary

Compile dependency - The current file depends on this file at compile-time

Other Notes

https://github.com/dagrejs/graphlib-dot/wiki#api

Drawing directional arrows

Used a combination of:

FAQ

  • Is this usable with other graphs?
    • A: Not really, for example the graph algorithms needs to revisit the starting node if the starting node is itself part of a transitive compile time dependency chain