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

Logviewer - how to unshift data to data header #29

Open
yangguansen opened this issue May 14, 2023 · 6 comments
Open

Logviewer - how to unshift data to data header #29

yangguansen opened this issue May 14, 2023 · 6 comments

Comments

@yangguansen
Copy link

Is this a new component or an extension of an existing one?
What is the existing component, if any?
Logviewer

Describe the feature
A clear and concise description of the new feature. What is the expected behavior?

  1. When user enter my app, it will load latest log data
  2. And user can scroll up to check previous log data
  3. When i request data from api, and unshift data to data header, the new requested data will display in page top, and squeeze the data down

Expect:
New requested data can stay original data position.

Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
Include screenshots or links to Marvel or other mockups.

Any other information?

@nicolethoen nicolethoen transferred this issue from patternfly/patternfly-react May 15, 2023
@DaoDaoNoCode
Copy link
Contributor

Hi @yangguansen, you could refer to the demo here https://www.patternfly.org/extensions/log-viewer/react-demos. Besides, could you provide more detail on this issue like how you use the log viewer or create a code sandbox for it to reproduce the issue? Thank!

@yangguansen
Copy link
Author

Hi @DaoDaoNoCode
Thanks for answer, my use case is :

  1. User open log viewer, it can latest 10 items log
  2. If user want to see older log, he will scroll up and api will request older log data,

I know i need unshift older data to log data array, but how to keep page natural scroll and not let user found loading progress, means after requested data, the page text should keep it position, not be effected by new data?

@DaoDaoNoCode
Copy link
Contributor

@yangguansen Hi, my suggestion here is to load as many logs as possible when the user opens the log viewer.
The log viewer uses virtualization (which means calculating the position of all the logs and dynamically rendering them when scrolling) and can handle very large logs. In other words, it's designed to show huge amounts of logs. As a trade-off of the performance, it could be tricky sometimes, like in the use case you mentioned above.
So my advice is to make an API call to get as many logs as possible and set them at one time. In this way, you can also reduce the network call times. Let me know if you have any questions!

@yangguansen
Copy link
Author

Hi @DaoDaoNoCode
Currently we first load will request 5000 items, it's pretty large size for browser, and 5000 is our most large count, so if we have 10000 items in database, we will split them, for example, user scroll up, we need request 100 items every time, this is common resolution, so we try to unshift data to log data array, but it cannot keep same page position after every request.

@DaoDaoNoCode
Copy link
Contributor

Hi @yangguansen
Could you try to set the scrollToRow props based on the amount of old logs you are requesting? For example, if the user scrolls up and requests 100 items, you could render the whole 5100 items together and set scrollToRow={101}, which will auto scroll to index 101 (which is the start of the original logs before the user requests more). I think in this way it could basically keep the current position, not 100% precise though.

@yangguansen
Copy link
Author

Thanks for this suggestion, i had tried with this, scrollToRow had a "page text jump", it's not perfect.
what i was trying is record page offsetTop and scroll to previous offsetTop

@dlabaj dlabaj added this to the Prioritized Backlog milestone Apr 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Backlog
Development

No branches or pull requests

3 participants