Add C Source Line View

[jordalgo]

Some notable things to call out:

• I removed the line numbers column for the instruction/main view because after we removed the source lines they seemed a bit useless and took up valuable horizontal space. Additionally, I removed the "go to line" input box.
• The C source view and the instruction view are now completely in sync. If you click on a line in one, it will highlight the associated line or lines in the other.
• The keyboard up/down/page-up/page-down navigation uses the last line clicked to determine which view to navigate
• The c source view is collapsable (like the state panel)
• The c source view is stacked by file name

[theihor]

This is great! The instruction block highlighting is cool. Thank you for picking up this work, @jordalgo

I removed the line numbers column for the instruction/main view because after we removed the source lines they seemed a bit useless and took up valuable horizontal space. Additionally, I removed the "go to line" input box.

And "go to line" is likely useless, and start/end buttons probably too. I added those in the beginning because I needed some navigation.

As for line numbers column, I am not sure. It does indeed take space.
But I do wonder if there might still be value in allowing users to have it, maybe with a toggle?

For example, if you look at a trace of a loop, the instructions and PC repeat themselves, and it may be hard to disambiguate "where" are you in the log without the line numbers.
And in the state panel, log line number uniquely identifies a program state, while C source line number is associated with many states, and some states don't actually have a source line number (e.g. ; @ pyperf.h:0)
Also, PC is important, but if we leave it and remove line numbers, it becomes more confusing (what is this number exactly?).

I think the best way to resolve these problems is to give users control: allow them to hide things, resize and move around. But having a gazillion settings is also not great... unless we cache them in browser local storage?.. Just thinking out loud here.

The C source view and the instruction view are now completely in sync. If you click on a line in one, it will highlight the associated line or lines in the other.

One thing we certainly want to add. When showing dependencies, we highlight upstream instructions with grey background (dependency-line css class). We should apply the same style to corresponding C lines, but don't bother with arrows: it makes less sense there.

Also we need to figure out what to do with unknown source lines... Maybe foo.c:0 should just be ignored and instructions should associate with the previous (or next) line?

Last but not least: we should allow users to switch back to inline view too.

[jordalgo]

And "go to line" is likely useless, and start/end buttons probably too

We can get rid of start and end though I can see where they might have some utility. I don't feel strongly.

For example, if you look at a trace of a loop, the instructions and PC repeat themselves, and it may be hard to disambiguate "where" are you in the log without the line numbers.

Hmm, it's a good point. I'm still not sure if the line numbers really help though after all we don't collapse repeated instructions - they're all still there in order in the log. The log line numbers don't really mean anything outside of the log anyway as they don't translate to actual source code line numbers. And because we don't have headers (yet) for the line numbers column and the PC numbers column, having them next to each other is confusing (as we've experienced personally). Maybe it's enough to just keep the actual line number in the state panel and next to it have the C Source Line, the PC, and the Frame. We can also just remove it and see if our handful of users complain 😄

But having a gazillion settings is also not great

Exactly, I think we need to work on the common/intuitive case first and then start adding ways to customize as we go.

One thing we certainly want to add. When showing dependencies, we highlight upstream instructions with grey background (dependency-line css class). We should apply the same style to corresponding C lines, but don't bother with arrows: it makes less sense there.

Ack. Will take a look at doing that.

Also we need to figure out what to do with unknown source lines... Maybe foo.c:0 should just be ignored and instructions should associate with the previous (or next) line?

Yeah I went back and forth on this as well. My first instinct was to just remove them but I didn't want to remove the ending error message from the verifier which I think is important (but maybe we can just tag that to keep it)

Last but not least: we should allow users to switch back to inline view too.

Ugh, I was afraid you'd say that lol. But ok, I don't disagree. Let me tinker.

[jordalgo]

@theihor I still need to update the tests but I updated some of the behavior:

• added dependency line highlighting to the c source line view
• add a checkbox toggle to show the entire log
• don't filter out ignorable lines from the main view

[jordalgo]

@theihor Added some examples of snapshot testing. I think it's just a good smoke test but we shouldn't rely on it solely and still do manual DOM verification where it makes sense.

[theihor]

@jordalgo I played with this, looks good overall.

I'll send a small follow up PR to not include C lines without content into the CSourceMap, otherwise we may get a C view that is too empty in some cases.

In terms of UI, I think this is a great starting point. Merging now.

[jordalgo]

@theihor Woot! Thanks for the review.