search

NeXTs / Clusterize.js

Tiny vanilla JS plugin to display large data sets easily
https://clusterize.js.org
MIT License
7.22k stars 414 forks source link

Only able to see first cluster (Node.js) #167

Closed axioncloud closed 5 years ago

axioncloud commented 5 years ago

Hi,

I hope someone will be able to shed some light upon my issue. I've seen countless times the other closed issues of Clusterize.js where people have had the same problem. I've cross-referenced my application and haven't had any success in finding out where my issue lies.

Here's the issue I'm having error

As you can see, I'm having issues with the rest of the list being blank, even though there is data left.

I've checked my styles, they're loading correctly. image

I included a screenshot of what the data being passed consists of, and I also tried showing the source with styles correctly loading.

I'm using Node.js v8.10.0, Electron (for UI), and Clusterize.js v0.18.1 from npm.

NeXTs commented 5 years ago

Hello Could you provide demo on codepen?

axioncloud commented 5 years ago

I can try to mock something up. I'll also post a link to the repo I have it in

MarkWissler commented 5 years ago

Hi all. I'm having the same issue. I made a codepen here: https://codepen.io/markwissler/pen/byLXeY

I may be missing something, but my general html structure is reflected here. Thanks in advance.

axioncloud commented 5 years ago

Thanks for your codepen. I've been a little busy with other work to come up with something similar, but I see that yours has the same issue going on.

axioncloud commented 5 years ago

Here's my specific case of the HTML that's causing me issues. https://github.com/ioncloud64/freemegb/blob/master/main.html

MarkWissler commented 5 years ago

@ioncloud64 my instance was fixed by checking out the .scrollTop of the element I was scrolling. In my codepen, if you just set the CSS class selector from contentArea to scrollArea (such that clusterize is reading the scrolling properly: from scrollArea, not contentArea) then it works. That may or may not be the same issue you're seeing, but it's worth a shot. To debug that this was the cause, I put in a setTimeout(function () { console.log(clusterize.getScrollProgress()); }, 3000) and scrolled as far down as I could, and still saw 0 as the scroll progress.

axioncloud commented 5 years ago

@MarkWissler interesting. I forked your codepen and made the changes you suggested. It worked. So then, I changed both of the scrollId and contentId to contentArea and that worked. So what I'm thinking is, scrollId/contentId have to be the same in order for it to work. I'll test performance out in a few minutes.

MarkWissler commented 5 years ago

I did the same thing in my real application, which seemed to work. I started to run into stuttering, which I'm unsure how to resolve since in my case, the div I need to scroll is nested inside another scrollable div, so scrapping the effort for now.

axioncloud commented 5 years ago

I tried to apply the fix in my Node.js application and it did not work. It appears that when setting scrollArea to both, it breaks the code. When applying contentArea, it only loads one full cluster. With my data, I have probably 30 clusters that need to be shown.

MarkWissler commented 5 years ago

Same for mine. I have ~12 clusters of 30-1100 items each. What happened when you set the content area and scroll area to be the same?

axioncloud commented 5 years ago

It only loaded 1 cluster. It turned blank way earlier than the previous version. I highly doubt it's an issue with memory. I'm running it on 32GB of RAM. If you want I can post a file with the table in question

axioncloud commented 5 years ago

I believe I may have found an issue with my application. I believe it's because of the event listener I'm using. I'll try to make Clusterize local to the page, then add it via event listener.

axioncloud commented 5 years ago

Tried to make it page-local, same results still.

axioncloud commented 5 years ago

Any update @NeXTs ? @MarkWissler

MarkWissler commented 5 years ago

None from me, I gave up on it. The jittery scrolling was too much.

axioncloud commented 5 years ago

@MarkWissler got an alternative? I have so much data I can't possible load it all natively w/ HTML.

axioncloud commented 5 years ago

@MarkWissler I found an alternative. It's called slickgrid. You can install it via npm but you'll need to link to the javascript and jquery libraries individually. I'll post a link with my updated source code and comments of changes.

https://www.npmjs.com/package/slickgrid

https://github.com/ioncloud64/freemegb/commit/66e47a15e08831a1839eb100d3dedc9063cb1551 For guidance as to how I set it up for node.js