marchaos / react-virtualized-sticky-tree Goto Github PK
View Code? Open in Web Editor NEWA React component for efficiently rendering tree like structures with support for position: sticky
License: MIT License
A React component for efficiently rendering tree like structures with support for position: sticky
License: MIT License
First of all, thanks for this library! It is exactly what I was looking for!
I'm currently trying to add some tree lines (with offsets), but it is currently rather difficult to do so.
What would make it easier is if we could provide a custom renderer for the parent-node and list-node divs. That way I could add some SVG lines or divs myself.
Is that something you are willing to add? I could also do a PR if needed.
In Safari Version 11.0 (12604.1.38.1.7), in macOS Sierra 10.12.6, the demo does not work; the whole table scrolls, and no rows are sticky. According to http://caniuse.com/#search=position%3Asticky Safari still requires the -webkit prefix for sticky.
Compared to react-virtualized, that has a feature to dynamically calculate each cell height when content might push on them.
https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer
Could I achieve the same with your lib?
Link to the Sample Youtube video
As you could see from the video, At the end of the scroll, the Entire assigned height is used, however during mid-scroll only half of the window size renders children DOMs.
I am providing a height of calc(100vh - 6.6em)
to StickTree
props
What could possibly be the reason?
Also, there is some noticable jitter during scroll, any particular way to avoid it?
Is there a technical limitation for why you can't transformY as it should be better in terms of performance... Would position sticky not work with transformY?
Hi,
I came across an issue from the last update. When I scroll quickly to the bottom of my tree it will show a blank list or a partial list. This is happening in the 'setScrollTopAndClosestNode' method where its checking if the scroll is at the bottom. This prevents an update from happening and the list is returning nodes that are a lot further up. If I remove this check then it renders as expected.
// If we are scrolled to the bottom, no need to do any more work.
if (this.elem.scrollTop >= this.elem.scrollHeight - this.elem.offsetHeight) {
return;
}
Anyway to make this work with flex-direction: column-reverse
?
@marchaos Appreciate your support. This is a well written library that allows consumers to bring their own data structure.
With a POC running, I would like more functionality in my app.
What is an efficient way to implement this? My default is state variables for selectedNode
and highlightedNode
and when rendering each row, check if the currently rendered id is the id of the selectedNode
or highlightedNode
and style accordingly. Another approach is to have a selected
and highlighted
boolean on each node. But the rules may change with a library like this that manages its own state and refresh.
I saw the generic property meta
in source code which does not cause a tree rebuild but re-rendering visible nodes. Would that be the right way to manage this piece state and refresh logic? If so, could you add to the examples folder? I see how to access meta
from rowRenderer
. But how to update specific node's meta
values?
For highlighting on down arrow, should getNextNodeId
be used? Or maybe use the node index
and code like setHighlightedNode(countries[highlightedNode.index+1])
. What is an efficient approach that avoids a full tree scan every time a user clicks the down arrow?
Would be more than glad to contribute.
Any chance for an update to peerDependencies to support React 16+?
Hey, seems code do noting with props.scrollTop
also
if onScroll event is not undefined (and i change state in this handle), its put in dom all elements above
https://gfycat.com/BrokenInsignificantChinchilla
upd
seems its UNSAFE_componentWillReceiveProps doing that
Reproduced on 2.1.24
If you hold keyboard down/up, page up/down, in the tree view, it eventually stops scrolling.
It's also an issue in the demo: https://marchaos.github.io/react-virtualized-sticky-tree/
trying to get the sample code to work but it doesn't seem to run.
First off it is missing the width and height variables. If you add those, then in the getChildren function throws a cannot map null of undefined. If I guard against that, it runs but doesn't seem to work...
https://codesandbox.io/s/reverent-taussig-r3e4i
is there something I am missing?
Please add polyfill for css rule position: sticky
https://github.com/wilddeer/stickyfill
Hey,
I have a sticky tree with a search/filter function at the top. When typing in the filter it will reduce the number of nodes that match the searched text. The list is displayed with an auto scroll as the number of nodes is a few thousand.
I get an error when I scroll to the bottom of the list and then type in my filter box at StickyTree.backwardSearch (StickyTree.js:1012).
In this method the search position comes in at the position the scroll was at before the list got filtered. However the node list in this function is the updated list with the amount of nodes that were filtered. The searchPosition is higher then the node list length and when it starts the loop, it will use an index that doesn't exist in the node array.
Ill try get a PR in today.
I'm Using WindowsScroller with Autosizer, i scroll through my list first then filter it, when it's filtered the list shows empty but the list is in the element just not visible, when i scroll then it shows the list, sometimes it just completely show no items, even on element nothing, unless i filter it again then the other issue occur.
Is the code for https://marchaos.github.io/react-virtualized-sticky-tree/ demo available ?
Would it be possible to commit the source of the demo into the repository or include a link to it from the readme?
Thanks!
Observed the issue where last node does not render in DOM.
Sandbox - https://codesandbox.io/s/beautiful-flower-2r9l4 fontsize=14&hidenavigation=1&theme=dark
Steps to reproduce
As per my observation in spacial cases like above, during forwardSearch this.currentPos stays at same value which then prevents call to this.storeRenderTree to trigger re-render.
Things which are causing render of last node -
Not sure of any better way to handle this so that it will work for all cases. Please add your thoughts as well. It might be related to the issue https://github.com/marchaos/react-virtualized-sticky-tree/issues/15
Is it possible to add forceUpdate method like in https://github.com/bvaughn/react-virtualized ?
I use code from example, and have problem. I don't know how resolve them.
Screen:
My code:
import React from "react"
import ReactDom from "react-dom"
import { StickyTree } from 'react-virtualized-sticky-tree';
import { Button } from '@material-ui/core';
const tree = {
root: { name: 'Root', children: ['child1', 'child2', 'child3'], depth: 0 },
child1: { name: 'Child 1', children: ['child4'], depth: 1 },
child2: { name: 'Child 2', depth: 2 },
child3: { name: 'Child 3', depth: 2 },
child4: { name: 'Child 4', depth: 3 },
};
const getChildren = (id) => {
if (tree[id].children) {
return tree[id].children.map(id => ({ id, height: 30, isSticky: true }));
}
};
const rowRenderer = ({ id, style }) => {
const node = tree[id];
return <div style={style}>{node.name}</div>
};
function App() {
return (<>
<Button color="primary">Hello World</Button>
<StickyTree
root={{ id: 'root', height: 30 }}
width={400}
height={30}
getChildren={getChildren}
rowRenderer={rowRenderer}
renderRoot={true}
overscanRowCount={20}
/>
</>)
}
ReactDom.render(<App />, document.getElementById('app'))
package.json:
{
"name": "mapa",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"start": "sh server.sh && webpack-dev-server --mode development --hot",
"service": "webpack-dev-server --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.2",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",
"css-loader": "^6.6.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.68.0",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@material-ui/core": "^4.12.3",
"@mui/material": "^5.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-virtualized-sticky-tree": "^3.0.0-beta13",
"webpack-dev-server": "^4.7.4"
}
}
Came across the weird case where calling scrollNodeIntoView after manual scrolling hides row randomly. The row gets rendered again when scroll.
Created a below reduce test case to showcase the issue -
Sandbox - reduce test case
This looks strange. One observation though, if you increase the overscanRowCount to say 20 (in above case) it stops. Could you please have a look here ?.
I will update if i see any unusual thing.
This looks like minor miss. Is that intended to call this.props.onScroll
always with SCROLL_REASON.OBSERVED (from onScroll handler) ?
this.props.onScroll({ scrollTop, scrollLeft, scrollReason: SCROLL_REASON.OBSERVED });
In my one of the use case, I wanted to track when user is actually scrolling. So this differentiation will be crucial for me
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.