search

patternfly / react-log-viewer

MIT License
17 stars 14 forks source link

Logviewer - how to unshift data to data header #29

Open yangguansen opened 1 year ago

yangguansen commented 1 year ago

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?

DaoDaoNoCode commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

@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 commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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