The Wayback Machine - https://web.archive.org/web/20200908061921/https://github.com/algorithm-visualizer/algorithm-visualizer/issues/272/
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify and reduce the complexity of visualization creation #272

Open
peterschussheim opened this issue Oct 10, 2019 · 1 comment
Open

Simplify and reduce the complexity of visualization creation #272

peterschussheim opened this issue Oct 10, 2019 · 1 comment

Comments

@peterschussheim
Copy link

@peterschussheim peterschussheim commented Oct 10, 2019

Thanks to @parkjs814 and all other contributors to this project; it is an amazing resource for learners.

Overview

This issue is intended to continue a conversation from #228 on the problem of the complex API, which @nem035 has explained clearly in his comment:

The noisiness of tracers becomes an issue when you wanna keep track of 3,4 variables or more.

just keeping track of all the variables that are changing and logging the changes (it's very hard to see where the actual algorithm logic is)

I've run into this 'noisiness' problem too and want to open a discussion so that we can:

  • better understand the original inspiration and design decisions for the tracing API
  • figure out how we can improve the API to make it more user-friendly.

Ideas

@nem035 suggested something similar to variable watch in Chrome Dev Tools:

We could attach the statements that change the data to renderers (i.e. mark them as "watched") , as opposed to adding the tracer statements directly which are much noisier. ("watching" would still leverage tracers behind the scenes)

Another idea he suggested is to create a Babel plugin or macro that hides the tracer code (in the individual algorithm scratchpads). This sounds promising along with the idea of using some special comment syntax which Babel could operate on.

One additional (yet 'rough') idea could be to utilize the Chrome DevTools Protocol in a similar way as it is used in the 'Sources' tab of the debugger. I'm thinking something similar to the way that the editor when stepping through code, you can 'inspect' program variables via hovering or displayed to the right of the line. One obvious downside of using CDP in this way would be potential browser compatibility issues.

What are some techniques used in other tracing libraries that we could take inspiration from and apply to this project? Are there common patterns we can utilize?

@64json
Copy link
Member

@64json 64json commented Oct 13, 2019

Hi @peterschussheim, thank you for your interest in our project and the suggestions you made. I agree that the current design of Tracer APIs is not the most user-friendly. However, there are some issues to be resolved before implementing your suggested solutions. (In addition, now that we support C++, Java, and Python (soon), some solutions would only be applicable for JavaScript.)

  • Implementing something similar to variable watch in Chrome Dev Tools.
    The best possible implementation I could come up with so far is stated in my comment in #228, but I might take more time to test it on various algorithms. Feel free to let me know if you have any other ideas of implementation!

  • Creating a Babel plugin to hide the tracer code.
    I think it can confuse/bother users to have two different code editors—one with tracer code and one without. How do you think of still using the comment syntax but also having a toggle button to fold/unfold all the tracer code easily?

  • Utilizing the Chrome DevTools Protocol.
    It might be the easiest way to keep track of variables. However, in addition to the browser compatibility issue, another critical issue is that you should start your host Chrome instance with the remote-debugging-port command line switch as stated in the documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.