Skip to content
This repository has been archived by the owner on Jul 19, 2023. It is now read-only.

Fix app selector scrolling #858

Merged
merged 4 commits into from
Jul 14, 2023
Merged

Fix app selector scrolling #858

merged 4 commits into from
Jul 14, 2023

Conversation

Rperry2174
Copy link
Contributor

@Rperry2174 Rperry2174 commented Jul 13, 2023

This takes the:

And then I asked for some help from chatgpt to bring some functionality from the pyroscope version into the phlare version.

Had to make some tweaks after, but now it looks better. Would like to merge this and get it into the next weekly release for phlare so we can then add it to the Grafana cloud profiles app plugin which imports the ui from phlare.

Fixes app selector scrolling

Screen.Recording.2023-07-13.at.3.12.56.PM.mov

@@ -134,6 +147,54 @@ export const SelectorModalWithToggler = ({
return selectedApp?.__profile_type__ === a.__profile_type__;
};

const groups = useMemo(() => {
const allGroups = leftSideApps.map((app) => app.name.split('-')[0]);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess here we should maybe use service_name and simply calculate the height of the dropdown based off the number of service_name.

If I'm understanding correctly the idea here is to:

  1. Calculate the necessary height of the modal based off the number of "groups" that will exist
  2. If the modal is bigger than the screen then set the modal to slightly bigger height than the screen... if the modal is smaller than the screen then just adapt to the size of the modal

right now the logic is assuming that the "groups" are differentiated by the text before the first - but thats not true. I guess they are now based off of the service_name?

cc @korniltsev @cyriltovena @petethepig

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

this isn't super helpful because I just cheated so I could make the dropdown very high by adding random numbers to each name, but for production data, for example, will the height of the modal will be determined by the unique number of service_names

Copy link
Member

@petethepig petethepig left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, max-height would be a slightly cleaner solution but this will work too.

@Rperry2174 Rperry2174 merged commit 806280d into main Jul 14, 2023
17 checks passed
@Rperry2174 Rperry2174 deleted the fix-app-selector-scrolling branch July 14, 2023 15:11
simonswine pushed a commit to simonswine/pyroscope that referenced this pull request Jul 18, 2023
* Fix app selector scrolling

* comment out stuff

* Remove comments

* Remove item duplicator
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants