Suggestion for displaying many results due to loop

[JDrechsler]

Issue description or question

It would be nice to have a slider below loops that you can use to iterate through the loop. This allows you to concentrate on the current iteration you're interested in. Take this sample code for example:

Sample code

function reverseInteger(num: number) {
  let result = 0; //?
  let remaining = num; //?

  while (remaining !== 0) {
    result; //?
    remaining; //?

    result = result * 10; //?
    result = result + (remaining % 10); //?

    remaining = Math.trunc(remaining / 10); //?
  } // trunc is used since there is no integer type for JS / TS

  return result; //?
}

for (let index = 0; index < 100; index++) {
  index //?
}

//Test Cases
reverseInteger(987654321) === 123456789; //?

This is how QuokkaJS is doing it right now:

It is kind of hard to look at the 6th iteration or focus on any iteration for example because you see the results for all the iterations. My example is a very basic example but this feature becomes more useful in more complex loops.

It would be amazing if you could consider adding such a feature. Maybe as an option so it does not override the current behavior that everybody is used to.

Code editor version

Visual Studio Code v1.40.2

OS name and version

Windows 10 Version 1809

This extension provides a huge productivity boost and this feature would make it even better in my opinion :)

[JDrechsler]

I finally found the name of the extension I was using many years ago in Visual Studio. It was called Alive and offered similar functionality as QuokkaJS for C#

I really liked the slider that would show up when you were using a loop. Here is an example:

https://www.youtube.com/watch?v=PZni_54s0o4

[rdhar]

@JDrechsler That's wild, I've never seen such a concise loop step-through feature before! Attached a screenshot from the video for ease of viewing.

That'd be super-impressive to have that level of control with QuokkaJS, but I assume there're restrictions in VS Code?

[smcenlly]

I assume there're restrictions in VS Code

Yes - unfortunately at this point in time this is not possible in VS Code.

[JDrechsler]

@smcenlly Good evening, Is this still not possible as of 2022? I would still love to see a slider to go through a loop instead of displaying the results next to each other.

[smcenlly]

@JDrechsler - VS Code still doesn't provide the ability to add some kind of slider control as you suggest. Having said that, I believe that if you use the Time Machine feature in VS Code, you should get the experience that you're looking for as you step through your execution steps. Please see our docs for more information. In particular, please read the section Inspecting Runtime Values.

[JDrechsler]

Thank you @smcenlly for your fast response. You are right, it is very similar. However, the time machine mode and code story as well both ignore my comments (//?). I have to click every variable that I want to see. Is there a setting that allows me to step through the code and see every variable output without having to click / hover them ? Then I would have the scenario where I can step through the code, see the current iteration's variables with output. It would just be a faster workflow.

[ArtemGovorov]

However, the time machine mode and code story as well both ignore my comments (//?).

The time machine and code story shouldn't ignore your comments, however the the values will only be displayed when the currently executed line (marked yellow in time machine) is the line with the comment. Here's how it's supposed to work:

[JDrechsler]

Thank you so much for the detailed gif. I recorded one as well to show you what I see. The code story on the right side does not show any values after my comments. The time machine on the left side does it except for one occasion for some reason.

Is there a way to also see the values for the code story on the right side?

[ArtemGovorov]

@JDrechsler Thanks for recoding and sharing the code story behaviour. We have added the feature of showing the current line output to it and released in the latest extension v1.0.462.

[JDrechsler]

Oh wow! Thank you so much for that quick update. I tested the new version and it is displaying the results after my comments in the code story panel now. Thank you very much for that quick update!

I recorded one more gif to show the one scenario (arr2) where it ignores my comment but not sure if this should go in its own issue. (This is just a random example of an algorithm. I know it is not the most performant. I was trying out certain visualization features for time complexity so it did not matter.)

Thank you again and keep up the great work. I love that extension. Being able to see your state during code execution + time travel is huge.

[rdhar]

As a bystander of this thread:

• What're you folks using for these neat li'l screen-recordings?
• Is there a changelog for Quokka.js where we can keep up-to-date with incremental updates such as this?
• Can I request a recording of this new feature implementation in action? Keen to see how it compare with Visual Studio's Alive plug-in.

[JDrechsler]

@rdhar I just googled gif recorder and found ScreenToGif which is free. I used that twice now and it worked very well, also for removing unwanted frames afterwards. I guess as in comparison to Alive, the code story feature lists every single step taken for the execution instead of having to remember what iteration you are on. This is very neat. The slider for the loops is still not possible due to vs code limitations.

Which is why I also keep the issue open since that was the main request for this extension. However, the code story feature is extremely helpful and provides basically the same result being able to focus on one iteration while seeing all the values that are used for that iteration.

[smcenlly]

I recorded one more gif to show the one scenario (arr2) where it ignores my comment but not sure if this should go in its own issue.

This should go in a new issue. Can you please create one and also provide your code snippet and your Quokka console log? We're especially keen to understand whether you are using Babel or TypeScript; there are some issues with certain transpilers that do not produce the correct source maps for Quokka to associate the comment with your code. You may find that adding a semi-colon after each statement helps fix your problem but regardless, we would like to investigate and try and fix for you.

[JDrechsler]

I created a new issue https://github.com/wallabyjs/quokka/issues/776 for this.