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

Reorganize components on diff page #323

Closed
Rperry2174 opened this issue Aug 6, 2021 · 0 comments
Closed

Reorganize components on diff page #323

Rperry2174 opened this issue Aug 6, 2021 · 0 comments
Labels
frontend Mostly JS code

Comments

@Rperry2174
Copy link
Contributor

Rperry2174 commented Aug 6, 2021

In #289 we added a V1 of diff rendering. The functionality was very complicated so we focused this first version on just getting something usable. However, for those not familiar with flamegraphs I don't think this view is very "intuitive".

This issue has a couple of suggestions that might help with this, along with a few styling tweaks/cleanup.
In the comparison view page, we add each element to a panel so that it stands out from the background. The flamegraphs also fall neatly beneath the timeline components See panels highlighted in green:
image
For the diff view page we don't have these panels -- see red:
image

There are a couple of issues here:
Because there are two timeline components (left and right) and two components correspondingly beneath them (table and flamegraph, respectively) it becomes confusing.

On the comparison view (picture with two green squares), left timeline corresponds to left flamegraph beneath it and right timeline corresponds to right flamegraph beneath it.

On the diff view (picture with red square), the left timeline actually corresponds to the base flamegraph and the right timeline corresponds to the comparison flamegraph that you are using for the diff. Both the table and the flamegraph component below are a combination (or diff depending on how you look at it) between the flamegraph that results from the left timeline and the flamegraph that results for the right timeline.

As it stands currently it looks as though the left table corresponds with the left timeline and the right flamegraph corresponds with the right timeline.

In order to fix this, what we should do is make both the flamegraph and the table take up 100% of the width to convey that they they are related to both timelines as opposed to the timeline on either specific side. Doing this, the flamegraph should be on top and the table should be beneath it like this:

image

We should also consider going a step further and explicitly dividing / labeling the important components on the page. something like this (note I didn't include legend in this image because its just a mock but legend should remain):
image

Sidenote: Changed color of bars in table to be grey instead of Orange.
image

@Rperry2174 Rperry2174 added the frontend Mostly JS code label Aug 6, 2021
korniltsev pushed a commit that referenced this issue Jul 18, 2023
* Remove `-help-all` as this is not a thing in Phlare (yet)

* Adding goreleaser to create artifacts

* Fixes the docker build CI

* Fixes the docker build CI

* Fixes the docker build CI

* Fixes the docker build CI

* Add the current go version for the CI

* Adds some documentation about the release

* Integrates review feedback

Co-authored-by: Christian Simon <simon@swine.de>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend Mostly JS code
Projects
None yet
Development

No branches or pull requests

1 participant