Comments (9)
Will allocate some time this week to put some breakpoints and see what's going on.
from aspen.
Apologies for the late response, been caught with a whole bunch of stuff.
It seems that the error consistently happens with key 13. Before I investigate if there's anything wrong with the harness, are you experiencing any error like this in your production/real app too?
Btw I'm curious to know what are you using react-aspen
for? I'd love to feature it on the readme.
from aspen.
No problem!
It seems to depend on the height of AspenFileTree
, e.g. with 700 in the example above it errors at key 24.
And it does happen in my app consistently too (given the same data and height). However, it's not always "just below the visible part", check this: https://codesandbox.io/s/inspiring-payne-giqwu?file=/src/App.js - depending on eachLength
(how many files are in each directory), you'll get the error at different places (smaller = sooner, larger = might not get it at all).
And another strange case (see https://codesandbox.io/s/thirsty-dust-qq0xd?file=/src/App.js):
- there is a folder with 10 files
- followed by a folder with 1 file
- followed by many other entries
The error will happen when you reach the folder with 1 file, as the next entries' keys will mix up. Note: It will not happen if the whole tree is expanded beforehand (so perhaps ensureVisible will only do the scrolling). It will also not happen if after the 1-file folder there are less than 4 entries (perhaps this is connected with how many entries are pre-rendered?).
As for the use case, I have a flat list of paths (similar to the examples) out of which I build an fp-ts/Tree and then I use react-aspen
to visualize it.
The Tree allows me to count how many files each directory has (up to the root, which will show the count of all files), and also track other metadata for the directory (which depends on its files' content). I also use it in createHost
as a kind of a file system (given the tree and the path, I "cd" into it and return the contents).
In each renderRow
, if it's a file I get the object behind the path, and I put some information below the file name (like a preview). For directories I show how many files are inside.
So this family of libraries (aspen) is fantastic - not only is if fast (2000+ entries are not a problem - scrolling, expanding/collapsing), but it also gives enough flexibility.
from aspen.
We also ran into a similar issue when trying to 'expand all' directories on initial load. Sometimes we get overlapping keys. I think this might be a timing issue somewhere? It seems like the same row is rendered once collapsed and once expanded.
from aspen.
After some experiments I have pinpointed it to FileTree.tsx - getItemAtIndex.
If I bypass the idxTorendererPropsCache
map, I see that at some point different items are returned for the same index (I've used my first example). Therefore when root.getFileEntryAtIndex(index)
is always called, the problem with the same key disappears.
Turning the cache back on, when I add this.idxTorendererPropsCache.clear()
before this line https://github.com/NeekSandhu/react-aspen/blob/630f7c0f0ae3923c27c0af02f589a841678e5c00/src/components/FileTree.tsx#L236 the issue disappears as well. It could be better to put it before if (this.scrollIntoView(fileEntry, align))
, but I don't fully understand the semantics. :)
from aspen.
Am I understanding correctly that if caching mechanism is active, then different indexes can sometimes return same prop data?
from aspen.
I think so. My interpretation is that when a directory is unfolded (due to ensureVisible), the elements in the list change their index.
from aspen.
Hi @zikaari,
We are also facing the same issue of overlapping keys while loading larger data. Is there any way we can disable the cache?
(If I follow the fix provided by @fintara issue is getting resolved. )
from aspen.
@nikhil-mohite can you please create a very minimal codesandbox, just bare enough to reproduce your specific same key issue? This is to ensure we have knowledge of all the ways this issue can be triggered.
Also, note that there will be no further development towards the current version of Aspen, all the resources are now dedicated towards Aspen 2. You can follow the progress here. Click Subscribe
to be notified of the beta and final release. I'm asking for repro codesandbox just so I can make sure this issue does not also show up in Aspen 2.
from aspen.
Related Issues (16)
- Covert this repo to a monorepo HOT 4
- Expand all initially? HOT 4
- Large data hangs the page and it crashes HOT 3
- is alive? HOT 2
- Question - load tree HOT 3
- Supporting windowing back to server-side HOT 3
- Improve NPM searchability HOT 2
- Getting a FileEntry by path HOT 7
- Find another filesystem watcher to recommend
- Uncaught Error: orphaned/detached FileEntries don't have path (except Root) HOT 6
- Allow getting current scroll HOT 8
- Ability to set scroll offset without using the DOM directly
- PromptHandle.ProxiedInput only supports className, style, and id props HOT 2
- Aspen 2 release discussion HOT 14
- Looking for project maintainers/contributors HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aspen.