Show information about killed by and covered by tests

[nicojs]

I'm experimenting with ways to display the new test coverage and killed by information we've added in the schema with #805.

As you can see, this is not easy 😢

Our popover is simply not suited for this information. Of course our modal would be big enough, but I think this is horrendous for the user experience. There is a lot of value in information that is easy and natural to access.

So we need a more out-of-the box approach. I was thinking of a "push drawer without overlay". Example: https://mdbootstrap.github.io/bootstrap-material-design/docs/4.0/material-design/drawers/#push

The ideau would be that the drawer would 'push in' from the right whenever you click a mutant. We could maybe replace both the popover as the modal dialog with this new feature.

@hugo-vrijswijk @richardwerkman @Mobrockers @simondel and others, thoughts?

[rouke-broersma]

I think we should take inspiration from other products that do similar things (display information about source code on top of the source code) such as sonarqube.

They use a pop-under instead of a popover which may or may not be suitable for us. But their 'more info' could perhaps be useful:

The bottom modal pops up from the bottom of the page with extra info. It also scrolls in place if there's more info than can fit the modal. Of course this means there can only be one 'more info' box at a time which I think is perfectly fine when you increase focus on a specific mutant.

Beside that I think there should also be a separate page where you can see all the unit tests and the amount of mutants they cover/kill/not-kill. Clicking this unit test could open a new modal/page with the names of the mutants. From there you should be able to click through to the mutant in the file. In the same way you should be able to click through from the mutant more info modal to the unit test.

[nicojs]

Hmm, I like the idea of a horizontal drawer. It has a lot of benefits since code is often pretty .... horizontal in nature. It's also very simple: fixed positioning at the bottom.

About the wide popover: it looks pretty neat. Does the popover of sonar qube also take up height? Or is it an overlay?

I'll do some prototyping and show the result here.

[rouke-broersma]

Hmm, I like the idea of a horizontal drawer. It has a lot of benefits since code is often pretty .... horizontal in nature. It's also

About the wide popover: it looks pretty neat. Does the popover of sonar qube also take up height? Or is it an overlay?

If you look on the left you can see that it shifted the lines down for the space it needed. When you close the popup the code shifts back to a normal view. Does that answer your question?

Examples:

Closed:

Opened:

Show more:

[rouke-broersma]

Example with multiple issues (mutants) on the same LOC:

Opening multiple 'show more' hides the previous ones as tabs btw:

[nicojs]

Thanks! Enough stuff for me to prototype with.

Beside that I think there should also be a separate page where you can see all the unit tests and the amount of mutants they cover/kill/not-kill. Clicking this unit test could open a new modal/page with the names of the mutants. From there you should be able to click through to the mutant in the file. In the same way, you should be able to click through from the mutant more info modal to the unit test.

I want to pick that up separately. First, get this in, this will already add a lot of value IMO

[nicojs]

I've tried something (sorry for light mode, was the fastest 🔥):

A couple of points:

1. The drawer opens below. It has a fixed height, so we are limited in the info we can show there. It has an animation 😍
2. I'm hoping the popover can be removed since the details are shown below.
3. We should still implement the "diff popunder" just below a selected mutant instead of showing the change inside a blue badge.
4. The "📖 More info" in the drawer would open the modal with all info, including all tests covered and all tests killed, as well as the description.
5. Clicking a test name would open the file view of that test.

Please let me know what you guys think.

[rouke-broersma]

All sounds pretty good!

1. Fixed height sounds reasonable. If neccesary I think it would be okay to have more info 'under the fold' at some point.
2. Agree
3. I think that would improve readability a lot
4. With modal you mean the bottom anchored full width modal right?
5. Yep

I am wondering if three separate 'modals' is perhaps too much. We would have 1 for the diff, 1 for the mutant info and 1 for the more info. I think we it would be good to find a way to combine the diff and mutant info as one modal so you don't have to focus on three (four including the source code) different representations of a mutant. Though that could be tricky design wise.

[nicojs]

Thanks for the feedback!

Not sure what you mean with 3 'modals', we currently have one and that would remain one. It opens when you click "More info"

I think you used the term loosely here, for anything that pops up/out/over.

Just to be clear, I'm proposing to replace the current popup/popover with the new drawer. This would be replaced:

I'm actually contemplating to not implement 3. (the new diff view) in this PR, since that is a pretty big change and I don't want to lose focus. Let's implement all this in 3 or more PR's. First replace the popover with the drawer.

[rouke-broersma]

Good idea.

[hugo-vrijswijk]

Wouldn't it make sense to remove the modal and just expand the popover to whatever height is needed with the description?

[rouke-broersma]

Wouldn't it make sense to remove the modal and just expand the popover to whatever height is needed with the description?

I think that is the plan?

But I am getting confused by all the slightly samey terms we're using for stuff we currently have and stuff we're planning to build 😅

Perhaps we should make a legenda so we are all sure what exactly we're talking about.

[nicojs]

@hugo-vrijswijk do you like the current popover more than the proposed drawer?

[nicojs]

Legend:

Popover	Modal	Drawer (proposal)

My proposal is to replace the popover with the drawer.

[nicojs]

I've had a better idea. @Mobrockers @hugo-vrijswijk what do you think??

As you can see, the drawer replaces both the popover AND the modal. I love this, cleans up the code nicely as well 😍

[rouke-broersma]

Looks good 👍