How to listen to fileBrowser events such as onOpen etc in Nextjs project?

[vipulsharma144]

Problem

So following the nextJS tutorial link , I am able to render and run the notebook. I can also render the FileBrowser and FileBrowserLab components . However, there is no way I could communicate with these components and Notebook (example Run all cell ).

To Explain further, How can we use the FileBrowserLab or FileBrowser component and change notebook on selection ?

Looks Like this is under construction page link.

Suggested Improvement

Create a demo on how to listen to these events or pass a handler

[echarles]

@vipulsharma144 To interact with the Notebook, Cell components, we have the redux action/store.

For Notebook, you can pass a property (https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/Notebook.tsx#L23), but it is also ok to create you own external toolbar with eg. https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/toolbars/NotebookToolbar.tsx

The FileBrowser(Lab) have not yet been equipped with such feature, but that is possible./

I am happy to create such an example for Next.js. Could you summarize what you would like? Is it needed to do it in a Next.js app or a standalone example is ok?

[vipulsharma144]

@echarles Thank you for graciously offering to invest your time and skills in the example. A standalone nextJS app would be more than helpful for me.

To explain, the task which I want to achieve is fairly simple to imagine. I want to have a functional notebook with the following features

• File Browser(Open,rename ,move,copy Files)
• Notebook: Add Cell, Delete Cell, Run Cell / Run All Cells
• Save Notebook

This is where I am right now, Need to get the redux actions to work. So On Click on the left change the notebook path.

In summary, to have a functional notebook editor.

Thanks

[vipulsharma144]

bump.

[vipulsharma144]

Hey @echarles , A demo project can be a hefty task . If you can provide some snippets of just one action that would be helpfull too.

[echarles]

@vipulsharma144 Sorry for the latency. The FileBrowser comonent needs to be upgraded with props and redux. My coming days planning is really full., I am doing my best to free time for this.

[vipulsharma144]

@echarles No problem at all! I understand that you've been busy and your schedule is packed. However, it would be of great help if you can answer the following

Does the FileBrowser currently possess Redux actions for opening, editing, renaming, move files?

[echarles]

Does the FileBrowser currently possess Redux actions for opening, editing, renaming, move files?

No for now, and that is the whole point of the work which needs to be done. It is not super difficult, but the actions/reducers still need to be created, similarly to the Notebook, Cell... ones.

[kennyster92]

I am following as well since I am interested in the feature as well!

[echarles]

I have started to POC this feature and it starting to look good and should land soon. Just a bit overloaded at this moment to give enough attention. Thank for your patience.

[echarles]

Adding a requirement here to support file download from the FileBrowser component as mentioned on https://github.com/datalayer/jupyter-ui/issues/88#issuecomment-1677284115 by @BrandonEscamilla

BTW I think the current FileBrowser can stay as it is, and a new component FileManager can be added aside supporting custom handlers, drag-and-drop and file download.

[vipulsharma144]

Update, I was able to create my custom file browser. and it works decent enough. However, there are some glitches to it (eg loading state). here are 2 screen grab.

[BrandonEscamilla]

Hi @vipulsharma144, would you mind to share how you implemented the injectableStore, I am stuck there, it would be very helpful. Thank you in advance!

For reference check (https://github.com/datalayer/jupyter-ui/issues/91)

[echarles]

@vipulsharma144 This looks gorgeous. If you share details on issue regarding the loading state, I may help. BTW the experiments I am doing for the FileManager component rely on https://github.com/minop1205/react-dnd-treeview which provides very good primitive for visual tree manipulation.

[vipulsharma144]

Thanks for the appreciation @echarles . React dnd seems like a good option however I did not implement dnd functionality but surely will try . I am creating a draft on how I implemented it and will share here soon . @BrandonEscamilla

[BrandonEscamilla]

Appreciate it, @vipulsharma144. I'm looking forward to seeing your implementation. 😄

[vipulsharma144]

Well , I stripped the whole code to the lines I believe will be most helpful. I used the rendertree function of the already provided Filebrowser component to render the file tree and then on useractions invoked the below-provided actions(starts with serviceG , at the last of the code below ).

NOTE: path refers to the path relative to TLJH user home dir.

import { Services, useJupyter } from '@datalayer/jupyter-react';
import { useRef, useState } from 'react';
const serviceG = useRef<Services>();


export const FileBrowserCustom = () => {
     interface RenderTree {
        id: string;
        name: string;
        path: string;
        children?: readonly RenderTree[];
      }

    const initialTree: RenderTree = {
        id: 'root',
        name: '/',
        path: '/',
      };

    const [tree, setTree] = useState(initialTree);
    // create new notebook
    serviceG.current?.contents().newUntitled({ path: location, type: 'notebook' });
    //new notebook
    serviceG.current?.contents().newUntitled({ path: location, type: 'file' });
    //new dir
    serviceG.current?.contents().newUntitled({ path: location, type: 'directory' });
    //delete
    serviceG.current?.contents().delete(path);
    //download 
    serviceG.current.contents().getDownloadUrl(path);
   //save
    serviceG.current.contents().save(path, { type: 'file', content, format: 'text' });
}

Hope this helps. Happy to answer any queries 😊 .

[BrandonEscamilla]

Thank you @vipulsharma144, I was also wondering about the redux implementation, for example, at what point you included the injectableStore? Thank you in advance!

[BrandonEscamilla]

Hey @vipulsharma144, I'm currently implementing this and it seems to be working. I have a question: How were you able to open a notebook? Thank you in advance!

[vipulsharma144]

@BrandonEscamilla I used the inbuilt Notebook component and passed in the path of ipynb file selected in filebrowser .

[BrandonEscamilla]

Thanks for the info, @vipulsharma144. It's actually what I am doing, but it's not working, it doesn't update the selected notebook. Any ideas or tip on how to force the update? Thanks in advance!

[echarles]

It's actually what I am doing, but it's not working, it doesn't update the selected notebook. Any ideas or tip on how to force the update? Thanks in advance!

@BrandonEscamilla I have added an example for the path change https://github.com/datalayer/jupyter-ui/blob/857c9508c538dd750f42c0cb383f26aa5b4a044b/packages/react/src/examples/NotebookPathChange.tsx and released @datalayer/jupyter-react (0.6.3) with a fix for that. Please upgrade, as indeed, it was not working (the notebook was not updated on path change). With 0.6.3, it should be fixed.

[BrandonEscamilla]

Hey @echarles , I just tried it and it's working great! Thank you for the quick response!

[vipulsharma144]

@echarles Thanks for the fix, it works. I was remounting the Notebook Component to make this work earlier. Thanks a lot. 😄 One more similar issue, just putting it out there. So if you want to change the TLJH user altogether(by giving new http and ws url) in <Jupyter> component the serviceManger retains the connection to old server when we use the useJupyter Hook. can you help in this? any reference or code I can look into?

[echarles]

@vipulsharma144 current code assume the jupyter context is created once and remains as is with the given server url. It should be possible to change that, adding more deps here I guess https://github.com/datalayer/jupyter-ui/blob/6e40841a3d7c86181ddd15961ef429de3cc752a7/packages/react/src/jupyter/JupyterContext.tsx#L202.

It is best that you open a separated issue to track this feature, and also happy to review any PR :)

[vipulsharma144]

@echarles Makes sense 👍🏻 . Thanks for pointing it out. I will look into it.

[BrandonEscamilla]

Hey @vipulsharma144, I'm curious to learn more about your setup. Currently, I'm using JupyterLab, but I'm considering transitioning to TLJH. Initially, I thought TLJH might not be possible out-of-the-box, so I'd like to understand the pros and cons of using TLJH compared to JupyterLab alone. Additionally, I'm interested to know if TLJH supports integration with external user authentication. Specifically, I'd like users to log in to the TLJH app and use their existing credentials to connect to JupyterHub. Could you provide insights on these aspects? Thank you in advance!