Highlight execution path & dependencies


#1

Hello guys, first post here.

I’ve thought of a feature but I am not aware if it already exists (would be awesome if it did).

(assume Javascript as the programming language)

Simple version:
User selects a function or a variable, the editor highlights all other functions and variables that are related to it (either use it or are used by it). All unrelated functions/variables are dimmed in color, or hidden completely.

More advanced version:
If a function is selected, possible execution paths are shown with direction arrows.

Even more advanced version:
Imagine the above works for a whole project, spanning multiple files.

Purpose:
Would make code evaluation, refactoring and debugging a whole lot easier.
Flat code text is not the best way to edit stuff, because code executes differently than in the order it is put down into a file. The filtering and presentation methods described above, would allow to focus on specific functions and execution paths, disregarding what is not-used in any given context.

Thoughts?

Thanks


#2

Let’s start with the “simple version”. How far do you intend this feature to go? If I have a function:

function foo (a) {
  let b = 10 * a;

  return b;
}

and I highlighted foo, would you want a and b highlighted? Or would you want everything that is ever passed in as a highlighted too? If the latter, how would you visualize the following:

let bar = [1, 2, 3, 4, 5];

for (let i = 0; i < bar.length; i++) {
  foo(bar[i]);
}

Would you highlight bar? Because bar itself is never passed to foo, but every element of bar is. What if only some elements of bar are passed in? And how would you determine which elements of bar are passed in without actually executing the program?


#3

I guess you would want to highlight all the relevant code. The objective is to filter out anything unnecessary, and highlight anything that is relevant to the current code selection.

In your first example…
Selecting foo would highlight the whole function.
It would also highlight any other part of the code that calls foo().

Second example…
Yes, bar should be highlighted. Because it is relevant to the selected execution path. It doesn’t matter which elements of bar are passed in. It only matters that bar is relevant to the code path in our selection (and it is inside that for loop).