Including File Browser Experience in Jupyter-UI

[ImperatorRaj]

I want to include the file browser experience in the Jupyter UI of my Create React App , Kindly let me know the Components that need to be included to get the File browser on top of the Notebook, as shown below. cc @echarles

[echarles]

Hi @ImperatorRaj you can can compose the webapp adding the FileManager (pure react or lumino variant) https://jupyter-ui-storybook.datalayer.tech/?path=/docs/components-filemanager--docs to the notebook

Another would be to just create a JupyterLabApp with a limited set of jupyterlab plugins (see the example https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/JupyterLabHeadlessApp.tsx)

[echarles]

or if you want something really like jupyterlab, see this example https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/JupyterLabApp.tsx

[ImperatorRaj]

Is there a component that helps load the File browser alone (same as the existing JupyterLab) ? Since I want to get only the file browser, but the example has lot many components that have to be included as part of it. cc @echarles

Here's my existing code rendering the Jupyter Component and Notebook: (in my App.tsx file)

const App = () => {
  const [tab, setTab] = useState(0);
  return (
    <>
      <Box>
        <Jupyter startDefaultKernel={true}>
          { tab === 0 &&
            <>
              <hr/>
              <JupyterLabApp/>
              <Notebook
                path="/ping.ipynb"
                CellSidebar={CellSidebarRun}
          />
            </>
          }
         </Jupyter>
      </Box>
    </>
  );
}

[echarles]

can be used eg https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/FileBrowser.tsx

But you will have to manage your self the events, we have a TODO btw on that datalayer/jupyter-ui#76