finally got it working with below
const extension: JupyterFrontEndPlugin<void> = {
id: 'example-ext',
autoStart: true,
activate: async (
app: JupyterFrontEnd
) => {
addSideBar(app);
}};
export default extension;
function addSideBar(app: any) {
const panel = new Panel();
panel.id = 'Example-tab';
panel.title.icon = tabIcon; // svg import
panel.addWidget(new ExampleWidget());
app.shell.add(panel, 'left', { rank: 1 })
}
export class ExampleWidget extends ReactWidget {
render(): JSX.Element {
return (
<ExampleComponent />
);
}
}
function ExampleComponent() {
return (
<body id="main">
<div className="jp-Examplewidget"><h2>Hello World!</h2></div>
</body>
);
}
Hope above code will be helpful for someone else.
Thank you so much for your support! Now I have a starting ground.
Btw, after googling around,
I started noticing that there is not much documentation around @lumino and their applications.
Regular developers want to work on something that is widely used,
to make sure they can leverage the full community support.
May I ask for your thoughts about that?