bvaughn/react-virtualized

Unofficial chat; official Slack chat @ http://slack.reactvirtualized.com

John Mitchell

@jlmitch5

I'm looking at react-virtualized's InfiniteLoader and have a few questions to see if it might be a good fit for a pane that displays standard out (both cached and streaming in over websockets). A single job's standard out can be tons of GBs.

Would it be possible to pause loading of new entries in the virtualized component until the user stops scrolling in the pane? In the example on the gh pages site, all entries are loaded from the point at which scrolling starts.
The example shows a flush data cache button. Would it be possible to instead keep some sort of arbitrary window-size of cache (i.e. "3x the size of the virtualized pane" or something)?
Would it be possible to use some sort of anchor scroll tool to manipulate scroll behavior inside the virtualized pane or would that wreak havoc? I'm thinking for things like "follow new lines of standard out as they stream in over the socket", "keep the pane from jumping around when the user filters the view". Also if anyone has any recommendations for a good tool that does this, I'd be interested in checking it out! Current iteration of this is an angular 1.x app and uses angular's $anchorScroll service

Thanks!

Jordan

@jpollard-cs

@jlmitch5 for #3 I believe there's a way to scroll to index in List/Grid so you could simply scroll to the last index each time a new row loads

Not sure about #1 or #2.. I think I might recall something about being able to override the cache and roll your own implementation but not 100% sure on that

Actually re #1 there may be a way to tell when you're scrolling and use that to decide to load more rows or not (you'll want to probably have a renderer for rows that haven't loaded in this case or your scrollbar will be disproportionate to the size of the data) but would be helpful if we knew what you were using with infinite scroller

Or infinite loader or whatever

Jordan

@jpollard-cs

List? Table? Grid? Etc..

John Mitchell

@jlmitch5

Thanks for the response Jordan!

I was initially thinking about it as a list of standard out lines...I guess it could also be a grid with three columns (line number, actual text and ocasionally start time)

John Mitchell

@jlmitch5

and that's a good point on the unloaded row rendering. Was planning on doing that as I will know the number of lines at any point in time. Won't be perfect as some lines could be super long (and thus would wrap in the pane causing the hight for that "row" to be larger), but I don't think it'd be a huge deal

John Mitchell

@jlmitch5

Also, just to clarify I haven't actually written any code yet, just looked at the examples and documentation and had some further questions in regards to if the lib fits the usecase.

Brian Vaughn

@bvaughn

Also, hover state seems to be gone when scrolling.

That's because we disable pointer-events when scrolling for perf. Every major windowing lib for the web does the same.

Jared Gholston

@jarbot

Hello all. I'm hoping for some help with InifiniteLoader and nested List. When my collection of List items changes say 100 results to 1 (because of a search filter) the 1 result displays the old data from the original list of 100. I've tried using this https://github.com/bvaughn/react-virtualized/#pure-components and forceUpdateGrid on the list. But the data remains stale. Any thoughts on what I'm doing wrong here?

Jordan

@jpollard-cs

hey Jared that should work AFAIK - could you please provide a code sample

Jordan

@jpollard-cs

hard to tell what the issue is without looking at the code

Jared Gholston

@jarbot

@jpollard-cs here is the class in question https://gist.github.com/jarbot/f2cff2e952444db6bdde30f78e6b1222 the use case is when the user searches and the collection updates

Jordan

@jpollard-cs

@jarbot I usually use methods to set my refs... just double checking because I'm not sure - are you sure this.list is set when you call this.list.forceUpdateGrid?

Jared Gholston

@jarbot

good question i will check. thanks for looking :)

Jordan

@jpollard-cs

yeah also note from the React docs "Although string refs are not deprecated, they are considered legacy, and will likely be deprecated at some point in the future. Callback refs are preferred."

but it does indeed look like your ref is going to be accessible via this.List and not this.list with your current setup

Jared Gholston

@jarbot

@jpollard-cs sorry i've removed ref="List" and this.list is valid

Jordan

@jpollard-cs

but would think you would see an error in the console ;)

oh so the reference was good? or it is now?

Jared Gholston

@jarbot

yeah. sorry caught that as I was posting the sample. the ref is good, but results are the same. it doesn't seem to re-render the rows

it trims the list of rows from 112 down to whatever the search results are... so it renders the correct number of rows, but the row data is wrong

i've validated that the collection is correct at time of render

Jordan

@jpollard-cs

ok let me take a look at the rest

Jared Gholston

@jarbot

weird. _rowRenderer gets called with the correct data. but visually does not update

Jared Gholston

@jarbot

@jpollard-cs I think i figured it out

I had to use my own unique key in the row renderer

the key returned from List is in the format 1-0 and that doesn't change when the list size reduces to say 1 item. the key remains 1-0

so something is keeping it from rendering

Jordan

@jpollard-cs

Did providing a unique key fix the issue?

Jared Gholston

@jarbot

thanks for your help :)

yes!

Jordan

@jpollard-cs

The second value will always be 0 because List is built on Grid

So 0 is the column index I believe

I didn't do much but you're welcome :D

Timothy J Laurent

@timothyjlaurent

Anyone know if there is a good way to get any debug information from plunkr ? I tried porting in my table I reported here some weeks ago and could figure out why it wasn't working. Maybe I should just use create-react-app ??

must be a babel issue but couldn't find any debug errors

Jordan

@jpollard-cs

Someone posted a jsbin a few weeks ago: http://jsbin.com/hukofudule/1/edit?html,js,output

Maybe try plugging your code into that?

Timothy J Laurent

@timothyjlaurent

Thanks for the idea @jpollard-cs -- It looks like the console output for JSbin raises the errors better. I'll give that a shot.

Jordan

@jpollard-cs

:+1:

Brian Vaughn

@bvaughn

@/all It's been about 2 months since email notifications stopped working for Gitter. I've tried reaching out to them on Twitter with no success. There's an open Github issue as well but it isn't being updated. This makes it too difficult for me to keep up with questions since I don't hang out in the chat room all day. @jpollard-cs has picked up a lot of the slack- (which is fantastic!)- but it isn't sustainable to require someone to always be in the channel in order to get notifications- so we are moving to Slack.

I'll leave the Gitter channel around for whoever likes it but the official channel (the one I'll be monitoring) will be at Slack: https://slackin-ucxxtydvmw.now.sh/

Hope to see some of you there. :)

Vasiliy Yorkin

@vyorkin

hey guys!
I’ve built a custom multigrid for the current project I’m working on
but I’m experiencing some lags with ScrollSync component

https://i.gyazo.com/14d124bd3992edaa94c5552b61f71809.gif
I mean there is a noticable time lag between scrolling events

is there any way to make this sticky column on the left respond to onScroll event faster?

Jordan

@jpollard-cs

@vyorkin please post in the slack channel

Alessandro Cataldi

@alexandro81

Hi everybody, I'm trying to use the collection element to mimic the following behavior:
http://ggordan.com/post/react-infinite-grid.html
It's basically a grid that, when resized, recomputes its number of columns as the width of the element / the width of the single item.
Horizontal scrollbars should never appear, since the number of columns is computed to fit the appropriate number of items.
Any directions on how I can achieve that? Thx!

Shan

@shan-du

Hi guys, so I just forked react-virtualized repo, and npm install was throwing this error, any ideas why?
node: v6.9.4
npm: v3.10.10

resolve failed:  { Error: Cannot find module 'q-io'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.requireRelative.resolve (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/lib/serialize.js:25:26)
    at findAndRemove (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/lib/serialize.js:67:11)
    at /Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/lib/serialize.js:111:13
    at Array.map (native)
    at loadPreset (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/lib/serialize.js:103:29)
    at module.exports (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/index.js:97:19)
    at Object.<anonymous> (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/babel-preset-es2015-rollup/index.js:3:18)
    at Module._compile (module.js:570:32) code: 'MODULE_NOT_FOUND' } q-io

Where communities thrive

People

Repo info

Activity