Visualizing a Replayed Code Execution

[cretz]

I work at https://temporal.io/ which does workflows as code, and as a side project I've been toying with how to visualize past runs. Temporal itself supports taking a replay and running against the previous code which is what I do at https://github.com/cretz/temporal-debug-go with a debugger to capture some tracing info.

I added a Code Hike based HTML exporter using a Scrollycoding MDX. It uses Go to generate a dynamic MDX that is rendered to a static site with a Next.js project (see Go code here that creates dynamic files underneath this dir).

See an example of the output here.

In this particular example, there is way less code than events, but other run visualizations have much more code and fewer events. But hopefully that example shows a neat use case for Code Hike. It unfortunately has some scrolling jank (I wish I could turn scrolling off, but this is still a better view than anything I could get with Spotlight).

I could see a more generic version of such a thing backed by a trace from https://github.com/rr-debugger/rr.

I eagerly look forward to #81 and/or any other visualization technique or improvements on the existing ones to show replayed code interspersed with contextual info (in my case, events from the server).

[pomber]

So cool you are experimenting with this. That's the idea of #81, but I'm waiting for a few use cases (like yours) so I can generalize the API and the output.

Do you mind sharing what do you think would be the ideal UI of the output?

[Aiyush-G]

I also noticed when on mobile, the design isn't responsive and unusable, it would be good if it a) became responsive or b) showed a stripped down version?

Following on from what @cretz has said, I think that it would be awesome if there was a web API in place that could be hosted locally that would take in the Markdown file and then spit out static HTML, there could be options for the styling etc... separate style sheets and custom behaviours. This would also make Code Hike more accessible in the whole developer ecosystem as an application that wasn't built with react could also make use of these static HTML files, refer to #90 . I'm not sure if this is doable, what do you think?

EDIT: Clarify API to web API

[pomber]

Maybe I'm not understanding your use case, but doesn't it make more sense to have something like this:

A separate view for the code and the output, and a slider or something to change the steps?

[cretz]

That would work quite well, yes! But I'm ok with only one code area too. Also, while the example I have doesn't show it, the code portion can span multiple files. I was also wanting to do hover-over or another approach to display the contents of local variables too, so I wonder if that "history.json" area there can serve as more of "contextual state area". Then though you are basically rewriting a debugger UI. One benefit of a ever-present left nav portion instead of a slider is the ability to see all the steps at once. I wonder if a vertical slider is a thing (not to be confused with the scrollbar; I personally don't like hijacking a user's scroll).

My limited UI skills often have me reaching for something that already exists, heh.

[nadilas]

I quite like the "ever-present" navigation sidebar at least for the use case of temporal that makes the context of the code clearer.
To me the slider (it being horizontal) is counterintuitive when thinking of flow of events or code, I'd much rather have a vertical slider in the middle as a sort of central function.

I was also wanting to do hover-over or another approach to display the contents of local variables too, so I wonder if that "history.json" area there can serve as more of "contextual state area".

Since I am quite used to values being inline with the option to expand, it'd be nice to consider if we could do: https://www.jetbrains.com/help/rider/Inspecting_Variables.html#inline-with-code

[pomber]

For the vertical navigation sidebar, I think CH.Spotlight should work better than CH.Scrollycoding. If you add some custom CSS it should look at least decent.

For the inline values and tooltips, it should be possible to add Annotations. See the label annotation and the tooltip custom annotation.

[pomber]

I created #93 for the animation jank for big files

[cretz]

I actually like that the full file is available for those wanting to scroll (well, actually not even the full file is available). My issue is that, for instance, it starts on the middle event when you get to the webpage, it moves when you scroll in potentially unexpected ways, etc. I suppose my use case is more fitting for a Spotlight (I don't care about scrolling). When I get back to the project, I'll try to enumerate my struggles with Spotlight.

[nadilas]

I just looked at cretz's example and found that on a much larger screen the scroll behavior selects the 8th nav item even though I'm at the top. Scroll down and scrolling back up, I can't get higher than the 9th nav item. Not by scrolling at least. Selecting the first item and scrolling down a little, jumps immediately to 10-13th.