Title: Trouble Implementing Basic Tree Layout

[riteshakya037]

Hello Theia community,

I'm encountering difficulties implementing a basic tree layout in my project. Basically I'm trying to implement a simple tree structure that has a couple of nested children, but it's failing to display its tree UI.

import { CompositeTreeNode, ContextMenuRenderer, createTreeContainer, defaultTreeProps, TreeModel, TreeModelImpl, TreeProps, TreeWidget } from "@theia/core/lib/browser";
import { Container, inject, injectable, interfaces } from "@theia/core/shared/inversify";

@injectable()
export class WiresNavigatorWidget extends TreeWidget {

    static ID = 'nube-views--widget';
    static LABEL = 'Views';

    static createContainer(parent: interfaces.Container): Container {
        const child = createTreeContainer(parent);

        child.rebind(TreeModel).toService(TreeModelImpl); // Default implementation

        child.rebind(TreeProps).toConstantValue(defaultTreeProps); // Default implementation

        child.bind(WiresNavigatorWidget).toSelf();

        return child;
    }

    static createWidget(parent: interfaces.Container): WiresNavigatorWidget {
        return WiresNavigatorWidget.createContainer(parent).get(WiresNavigatorWidget);
    }

    constructor(
        @inject(TreeProps) readonly props: TreeProps,
        @inject(TreeModel) readonly model: TreeModel,
        @inject(ContextMenuRenderer) readonly contextMenuRenderer: ContextMenuRenderer,
    ) {
        super(
            props,
            model, 
            contextMenuRenderer
        );

        this.id = WiresNavigatorWidget.ID;
        this.title.label = "Views 1";
        this.title.caption = "Views";

        const root: CompositeTreeNode = {
            id: WiresNavigatorWidget.ID,
            name: "View",
            parent: undefined,
            visible: true,
            children: [],
        };

        CompositeTreeNode.addChild(root, {
            id: "1",
            name: "View 1",
            parent: root,
        });

        this.model.root = root;
    }
}

Screenshot

Any insights, suggestions, or pointing in the right direction is greatly appreciated. Thank you for your time and assistance!

Warm regards,