marchaos / react-virtualized-sticky-tree Goto Github PK

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?

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

• Steps to reproduce

1. Click on button "jump to child 10" >Auto scroll should move you at bottom > Everything works fine.
2. Scroll back top and then scroll down till end manually
3. Now, click on "jump to child 10" > See Row "Child 8" gets disappeared

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.

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

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.

@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.

• Row Selection - selecting happens when a user clicks a row it changes style to show it is selected. One row at a time can be selected.
• Row Highlighting - a highlighted row has a border around it. When a user presses up or down arrows, the highlight moves up or down a row. One row at a time can be highlighted. Pressing Enter selects the highlighted row.

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?

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;
                }

Is it possible to add forceUpdate method like in https://github.com/bvaughn/react-virtualized ?

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?

Any chance for an update to peerDependencies to support React 16+?

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/

Would it be possible to commit the source of the demo into the repository or include a link to it from the readme?

Thanks!

This library uses lifecycle methods such as componentWillMount which are no longer recommended to use. This generates warnings for users such as below:

Would it be possible to update the lifecycle methods as recommended?

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

Please add polyfill for css rule position: sticky
https://github.com/wilddeer/stickyfill

Is the code for https://marchaos.github.io/react-virtualized-sticky-tree/ demo available ?

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?

Anyway to make this work with flex-direction: column-reverse?

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?

Would be more than glad to contribute.

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.

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

  • Scroll down to bottom
  • Confirm that node10 (child of node 3) is not rendered

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 -

• Increase in overscanRowCount from 1 to 2 (Cant use in my case as that will be costly to me)
• Change height of leaf nodes from last couple of rows (tried with 430 than 130 and it worked)
• Once you scroll to the last > scroll back up > This renders the last node. (This is not a fix)

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

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"
  }
}

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.