Observing child nodes changes in a tree data structure

[mlejva]

Hey! I've spent the last day on this bug. I'm not sure if I'm using MobX in an unintended way or missing some core concept.

I have a tree data structure that represents a UI layout in my app. The layout is similar to the editor layout in Visual Studio Code, for example. There are panels that can be split and resized either vertically or horizontally.

This concept is represented by two types of nodes in the tree - TileNode and SplitNode. Here's a drawing of the tree to easier understand the concept. The circled "T" marks the Tile that will be split.

Here's the code for both the SplitNode and TileNode. They are both observable and basically represent domain objects as described in MobX documentation:

type LayoutNode = SplitNode | TileNode;

export class SplitNode {
  readonly key = 'split_' + getID();
  _parentKey: string = '';
  children: LayoutNode[] = [];

  constructor(readonly direction: SplitDirection, left: LayoutNode, right: LayoutNode) {
    makeAutoObservable(this);
    this.addChild(left);
    this.addChild(right);
  }

  set parentKey(key: string) {
    this._parentKey = key;
  }

  get parentKey() {
     return this._parentKey;
  }

  getChildren() {
    return this.children;
  }

  addChild(node: LayoutNode) {
    // Tree balancing:
    // If the new child node is also SplitNode and with the same direction
    // as this split node, then add its children directly to this node and
    // get rid of the new child node.
    //
    //    SplitNode (Horizontal)                                SplitNode (Horizontal)
    //      /                \                                 /       |        |     \
    // TileNode         SplitNode (Horizontal)      --->  TileNode TileNode TileNode SplitNode
    //                    /       |        \                                          /    \
    //               TileNode  TileNode  SplitNode
    //                                     /    \

    if (node instanceof SplitNode && node.direction === this.direction) {
      // This node children: [child_A1, child_A2, ..., child_AN].
      // Node to add children: [child_B1, child_B2, ...., child_BM].
      // This node new children: [child_A1, child_A2, ..., child_AN, child_B1, child_B2, ..., child_BM].
      this.children = this.children.concat(node.children);
      node.dispose();
    } else {
      node.parentKey = this.key;
      this.children[this.children.length] = node;
    }
  }

  swap(toSwap: LayoutNode, newNode: LayoutNode) {
    const swapIdx = this.children.findIndex(c => c.key === toSwap.key);
    if (swapIdx === -1) throw new Error(`Cannot swap, node '${toSwap.key}' wasn't found in children.`);

    // Check if we have to balance the tree (see addChild method). 
    if (newNode instanceof SplitNode && newNode.direction === this.direction) {
      // This children: [c_1, c_2, ..., c_swapIdx-1, c_swapIdx, c_swapIdx+1, ...., c_n].
      // New node children: [d_1, ..., d_m].
      // This children after balance: [c_1, ..., c_swapIdx-1, d_1, ..., d_m,  c_swapIdx+1, ..., c_n].

      newNode.children.forEach(c => c.parentKey = this.key);
      this.children = this.children.slice(0, swapIdx).concat(newNode.children).concat(
         swapIdx < this.children.length - 1 ? this.children.slice(swapIdx+1) : []
      );
      newNode.dispose();
    } else {
      newNode.parentKey = this.key;
      this.children[swapIdx] = newNode;
    }
  }

  dispose() {
    this.children = [];
  }
}

export class TileNode {
  readonly key = 'tile_' + getID();
  _parentKey  = '';

  constructor() {
    makeAutoObservable(this);
  }

  set parentKey(key: string) {
    this._parentKey = key;
  }

  get parentKey() {
     return this._parentKey;
  }
}

Then I have the BoardStore class which contains the tree:

export default class BoardStore {
  layoutRoot: LayoutNode;

  constructor(readonly rootStore: RootStore) {
    makeAutoObservable(this, {
      rootStore: false,
    });

    // Initial UI setup.
    this.layoutRoot = new SplitNode(SplitDirection.Horizontal, new TileNode(), new TileNode());
  }

  splitTile(dir: SplitDirection, tileNode: TileNode) {
    // If the tile node is the root node it doesn't have a parent so just set the new split as the new root.
    if (!tileNode.parentKey) {
      const split = new SplitNode(dir, tileNode, new TileNode());
      this.layoutRoot = split;
    } else {
      // If 'tileNode' isn't the root, replace it in the tree with a new split node.
      const parent = this.getNode(tileNode.parentKey) as SplitNode;
      const split = new SplitNode(dir, tileNode, new TileNode());
      parent.swap(tileNode, split);
    }
  }

  getNode(nodeKey: string) {
    const queue = [this.layoutRoot];
    while (queue.length > 0) {
      const node = queue.shift();
      if (!node) return;

      if (node.key === nodeKey) return node;

      if (node instanceof SplitNode) {
        node.children.forEach(c => queue.push(c));
      }
    }
  }
}

The problem is that my React component doesn't re-render when the children array of some SplitNode changes.
I'm rendering the tree recursively.

First, there's a root Board component that represents "editor" that contains these splits and tiles:

import React from 'react';
import { observer } from 'mobx-react-lite';

import { SplitNode, useBoardStore } from './board.store';
import Split from './Split';
import Tile from './Tile';

function Board() {
  const boardStore = useBoardStore();

  return (
    <Container>
      {/* The layout tree root node can be just a single Tile */}
      {boardStore.layoutRoot instanceof SplitNode
        ? <Split splitNode={boardStore.layoutRoot} />
        : <Tile tileNode={boardStore.layoutRoot}/>
      }
    </Container>
  );
}

export default observer(Board);

The two rendered components, Tile and Split are here:

The Tile component contains two buttons that call the splitTile method in BoardStore. Pressing either of those will cause the layout tree to update because a new SplitNode with two children TileNodes is added (actually it swaps the TileNode with the new SplitNode).

import React from 'react';
import { observer } from 'mobx-react-lite';

import { useBoardStore } from 'newsrc/Board/board.store';
import {SplitDirection, TileNode} from 'newsrc/Board/board.store';

interface TileProps {
  className?: string;
  isFocused?: boolean;
  tileNode: TileNode;
}

function Tile({
  tileNode,
  className,
  isFocused,
}: TileProps) {
  const boardStore = useBoardStore();

  function splitHorizontally() {
    boardStore.splitTile(SplitDirection.Horizontal, tileNode);
  }

  function splitVertically() {
    boardStore.splitTile(SplitDirection.Vertical, tileNode);
  }

  return (
    <Container
      className={className}
      isFocused={isFocused}
    >
      <TileHeader>
            <button onClick={splitHorizontally}>
              Split H
            </button>
            <button onClick={splitVertically}>
              Split V
            </button>
      </TileHeader>
      <TileBody>
      </TileBody>
    </Container>
  );
}

export default observer(Tile);

Now there's the Split component that actually recursively renders the SplitNode's children:

import React  from 'react';
import { observer } from 'mobx-react-lite';

import ReactSplit, { SplitDirection as ReactSplitDirection } from '@devbookhq/react-split';

import Tile from './Tile';

import {
  TileNode,
  SplitNode,
  SplitDirection,
  LayoutNode
} from 'newsrc/Board/board.store';

interface SplitProps {
  splitNode: SplitNode;
}

function Split({ splitNode }: SplitProps) {
  const direction = splitNode.direction === SplitDirection.Horizontal
    ? ReactSplitDirection.Horizontal
    : ReactSplitDirection.Vertical;

  return (
    <ReactSplit direction={direction}>
      {splitNode.children.map(c => (
        <React.Fragment key={c.key}>
          {(c instanceof TileNode)
            ? <Tile key={c.key} tileNode={c}/>
            : <Split key={c.key} splitNode={c}/>
          }
        </React.Fragment>
      ))}
    </ReactSplit>
  );
}

export default observer(Split);

Here comes the problem.

The Split component receives an observable SplitNode instance as a prop. It iterates over all splitNode's children nodes and based on their type it renders either the Tile or the Split component again.

However, the Split component gets re-rendered only if its splitNode prop is the root node in the tree. If the passed splitNode prop is any lower in the tree, the Split component doesn't re-render even though splitNode's children changed (because of splitting).

I'm not sure what causes the problem since I thought that calling splitNode.children.map(...) in the render method means that MobX knows that it should observe the children array on splitNode.

How can I make the Split component reactive to changes in the SplitNode children array?

Thank you!

[danielkcz]

It would be much more helpful if you can turn that code into a runnable example (eg. with CodeSandbox) for hands-on investigation.

[mlejva]

Here's the link to CodeSandbox.

It renders two horizontally split tiles. Try clicking on "Split V". This works fine. Then try to split the just split tiles. The tree actually changes but it won't get rendered.

The tree is printed in the console before and after each split.

[mlejva]

@FredyC I just wanted to ask if there's anything I could provide to make it easier to debug the problem?

I understand that there are many other issues people are posting but just pointing me in the correct direction would help me a lot. We're using MobX in Devbook and this issue is blocking our release.

[danielkcz]

Honestly, I had no time to look into it. It's too complex. Maybe if you could pinpoint the specific problem in a minimalistic approach, it could expedite a solution.

[mlejva]

Basically, what I think is the problem:

I have a tree where nodes have a children array. The nodes are observed objects through makeAutoObservable(this).

Then there's a component that is wrapped in the observer function. This component gets passed a node as a prop and renders its children using:

{node.children.map(c => ...)}

Now, the problem is that if I change the children array for a node that is deep in the tree (anything deeper than root), the component doesn't re-render. But it seems that MobX successfully observes the change in the array.

[urugator]

It's because you are recursing to Split which is not observer ... only the exported Split is observer

[mlejva]

Oh my god, of course! Yes. You're right. I didn't realize that Split in the current scope isn't the exported one which is wrapped in observer.
Thank you! Sorry for such a complex issue.

Going to test it now and will close this if everything is ok.