SolidJS•17mo ago

How do I create a tree view with minimum updates on updating a child node.

I wrote one but when I add one node or delete a node, it updates the whole tree from scratch.

5 Replies

Unknown User•17mo ago

Message Not Public

REEEEE•17mo ago

Ideally, you don't have one root node that handles the whole tree. This won't be the best

tree: {
children: [{tree: {}}]
}

tree: {
children: [{tree: {}}]
}

You should try to do something like this instead

"rootId": {
children: ["nodeId1", "nodeId2"]
}

"nodeId1":{
children: ["nodeId4", "nodeId3"]
}

"nodeId2":{
children: ["nodeId7", "nodeId8"]
}

"rootId": {
children: ["nodeId1", "nodeId2"]
}

"nodeId1":{
children: ["nodeId4", "nodeId3"]
}

"nodeId2":{
children: ["nodeId7", "nodeId8"]
}

gsoutz•17mo ago

I have this structure passed as props:

  let moves = [
  'd4 d4',
    'd4d5 d5',
    'd4d5f4 Bf4',
    'd4d5f4c5 c5',
    'd4d5f4c5e3 e3',
    'd4d5f4c5e3d4 cxd4',
    'd4d5f4c5e3d4d4 exd4',
    'd4d5f4c5e3b6 Qb6',
    'd4d5f4c5e3b6c3 Nc3',
    'd4d5f4c5e3b6c3e6 e6',
    'd4d5f4c5e3b6c3e6f3 Nf3',
    'd4d5f4c5e3b6c3e6f3e7 Be7 { Hello world }',
    'd4d5f4c5e3b6c3e6f3c4 c4',
    'd4d5f4c5e3b6c3e6f3e7a5 a5 { What s up ok ok ok ook }',
    'd4d5f4c5e3b6c3e6f3e7a5d8 Qd8',
    'd4d5f4c5e3b6c3e6f3c4b3 b3',
    'd4d5f4c5e3b6c3e6f3c4b3b5 b5 {__red__ redyes}',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1 Rb1',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5 Qa5',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5b7 Rxb7',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5b7c3 Qxc3',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5c4 Bxc4',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5c4c7 Qxc7',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1d7 Qd7',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1d7e5 Ne5',
    ]

  let moves = [
  'd4 d4',
    'd4d5 d5',
    'd4d5f4 Bf4',
    'd4d5f4c5 c5',
    'd4d5f4c5e3 e3',
    'd4d5f4c5e3d4 cxd4',
    'd4d5f4c5e3d4d4 exd4',
    'd4d5f4c5e3b6 Qb6',
    'd4d5f4c5e3b6c3 Nc3',
    'd4d5f4c5e3b6c3e6 e6',
    'd4d5f4c5e3b6c3e6f3 Nf3',
    'd4d5f4c5e3b6c3e6f3e7 Be7 { Hello world }',
    'd4d5f4c5e3b6c3e6f3c4 c4',
    'd4d5f4c5e3b6c3e6f3e7a5 a5 { What s up ok ok ok ook }',
    'd4d5f4c5e3b6c3e6f3e7a5d8 Qd8',
    'd4d5f4c5e3b6c3e6f3c4b3 b3',
    'd4d5f4c5e3b6c3e6f3c4b3b5 b5 {__red__ redyes}',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1 Rb1',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5 Qa5',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5b7 Rxb7',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5b7c3 Qxc3',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5c4 Bxc4',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1a5c4c7 Qxc7',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1d7 Qd7',
    'd4d5f4c5e3b6c3e6f3c4b3b5b1d7e5 Ne5',
    ]

So an array of paths into the tree and data separated by space. Please turn this into a renderable tree view. I have no idea how to do this.

gsoutz•17mo ago

I've solved this problem, no thanks to any of this community. For anyone interested see this repo https://github.com/eguneys/chessreplay23

GitHub

GitHub - eguneys/chessreplay23

Contribute to eguneys/chessreplay23 development by creating an account on GitHub.

Unknown User•17mo ago

Message Not Public

Gaming

Programming

How do I create a tree view with minimum updates on updating a child node.