Is it possible override FileNavigatorTree in Explorer

[wss29]

Hi,
As we know, the explorer can display a directory tree, and the file is the latest level and can not be expanded.
I need to display the function node of a C++ file, so I developed an extension to display and create my custom CFileNode, as you can in follow picture on the right panel.

export function createCodeExplainContainer(parent: interfaces.Container): Container {
    const child = createFileTreeContainer(parent);

    child.unbind(FileTree);

    child.bind(CFileTree).toSelf();
    child.rebind(Tree).toService(CFileTree);

    child.unbind(FileTreeWidget);
    child.bind(CodeExplainWidget).toSelf();

    return child;
}

but I find it is too tedious to have two extensions that have the same tree. and if I can directly override FileNavigatorTree and use my custom CFileTree, the C++ file can expand child node in explorer, but I have not found the trick on how to do it.
is it possible override FileNavigatorTree in Explorer?

[msujew]

Hey @wss29,

you need to override the whole child container and rebind the binding to FileNavigatorWidget. See:

theia/packages/navigator/src/browser/navigator-container.ts

Lines 34 to 48 in f7e2ef9

	export function createFileNavigatorContainer(parent: interfaces.Container): Container {
	const child = createFileTreeContainer(parent, {
	tree: FileNavigatorTree,
	model: FileNavigatorModel,
	widget: FileNavigatorWidget,
	decoratorService: NavigatorDecoratorService,
	props: FILE_NAVIGATOR_PROPS,
	});
	return child;
	}
	export function createFileNavigatorWidget(parent: interfaces.Container): FileNavigatorWidget {
	return createFileNavigatorContainer(parent).get(FileNavigatorWidget);
	}

[wss29]

Hi @msujew
Thanks for you replay. it work now

export function createCFileNavigatorContainer(parent: interfaces.Container): Container {
    const child = createFileTreeContainer(parent, {
        tree: CFileTree,
        model: FileNavigatorModel,
        widget: CodeExplainWidget,
        decoratorService: NavigatorDecoratorService,
        props: FILE_NAVIGATOR_PROPS,
    });

    return child;
}

export function reCreateFileNavigatorWidget(parent: interfaces.Container): FileNavigatorWidget {
    const child = createCFileNavigatorContainer(parent);
    child.bind(FileNavigatorTree).toService(CFileTree);
    child.bind(FileNavigatorWidget).toService(CodeExplainWidget);
    return child.get(FileNavigatorWidget);
}

    rebind(FileNavigatorWidget).toDynamicValue(ctx => reCreateFileNavigatorWidget(ctx.container));