Is there a way to hide a rootNode in the tree?

[shrirambalaji]

Hey 👋

I've been using a VariableSizedTree, and I'm trying to height the rootNode whereas all the childrenNode should be visible. Is there a way to do that?

My treeWalker is similar to the one mentioned in the examples.

I've tried using CSS to hide the rootNode, but it does take up the defaultHeight. Using resize(0, true) and setting the height to 0 for the rootNode also didn't seem to work as intended for me.

[Lodin]

Hi @Shriram-Balaji. That's pretty possible with resize(0, true), you just need to add overflow: hidden to your Node host element and call resize on each height change (because toggle resets the height; btw, that looks like a bug).

Here you can see the example. I basically changed the Node component.

Changed Node component code

const Node: FC<VariableSizeNodeComponentProps<ExtendedData>> = ({
  height,
  data: {id, isLeaf, name, nestingLevel},
  isOpen,
  resize,
  style,
  toggle,
  treeData: itemSize,
}) => {
  const canOpen = height <= itemSize;
  const halfSize = itemSize / 2;

  const toggleNodeSize = useCallback(
    () => resize(canOpen ? height + halfSize : height - halfSize, true),
    [height, resize],
  );

  useEffect(() => {
    // Applying resize to root node if it's height is not zero
    if (id === '0' && height !== 0) {
      resize(0, true);
    }
  }, [height]);

  return (
    <div
      style={{
        ...style,
        alignItems: 'center',
        background: canOpen ? undefined : '#ddd',
        display: 'flex',
        marginLeft: nestingLevel * 30 + (isLeaf ? 48 : 0),
        // Added overflowing to avoid collapsed root node to be visible
        overflow: 'hidden',
      }}
    >
      {!isLeaf && (
        <div>
          <button type="button" onClick={toggle} style={defaultButtonStyle}>
            {isOpen ? '-' : '+'}
          </button>
        </div>
      )}
      <div style={defaultGapStyle}>{name}</div>
      <div>
        <button type="button" onClick={toggleNodeSize} style={defaultGapStyle}>
          {canOpen ? 'Open' : 'Close'}
        </button>
      </div>
    </div>
  );
};

By the way, could you tell me why you want to hide the root node? Probably, you just want to have a multiple nodes at the root? You can easily achieve it by changing the treeWalker algorithm. See the example here.

Changed treeWalker code

function* treeWalker(
  refresh: boolean,
): Generator<ExtendedData | string | symbol, void, boolean> {
  // Just fill the stack with any elements you want to be at the root
  const stack: StackElement[] = rootNode.children
    .map((node) => ({
      nestingLevel: 0,
      node,
    }))
    // reverse should be done because we use i-- in the for loop below
    .reverse();

  while (stack.length !== 0) {
    const {node, nestingLevel} = stack.pop()!;
    const id = node.id.toString();

    const isOpened = yield refresh
      ? {
          defaultHeight: itemSize,
          id,
          isLeaf: node.children.length === 0,
          isOpenByDefault: true,
          name: node.name,
          nestingLevel,
        }
      : id;

    if (node.children.length !== 0 && isOpened) {
      for (let i = node.children.length - 1; i >= 0; i--) {
        stack.push({
          nestingLevel: nestingLevel + 1,
          node: node.children[i],
        });
      }
    }
  }
}

[PoojaMgr]

Hi @Lodin,
Root node would hide from your suggestion when isOpenByDefault: true, but what if I wanted isOpenByDefault as false? Can you please suggest?

As given in the below snapshot.