-
-
Notifications
You must be signed in to change notification settings - Fork 44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to listen to fileBrowser events such as onOpen etc in Nextjs project? #76
Comments
@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? |
@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
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 |
bump. |
Hey @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. |
@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? |
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. |
I am following as well since I am interested in the feature as well! |
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. |
Adding a requirement here to support file download from the FileBrowser component as mentioned on #88 (comment) by @BrandonEscamilla BTW I think the current |
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 (#91) |
@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. |
Thanks for the appreciation @echarles . React dnd seems like a good option however I did not implement dnd functionality but surely will try . |
Appreciate it, @vipulsharma144. I'm looking forward to seeing your implementation. 😄 |
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 NOTE: path refers to the path relative to TLJH user home dir.
Hope this helps. Happy to answer any queries 😊 . |
Thank you @vipulsharma144, I was also wondering about the redux implementation, for example, at what point you included the injectableStore? Thank you in advance! |
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! |
@BrandonEscamilla I used the inbuilt Notebook component and passed in the path of ipynb file selected in filebrowser . |
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! |
@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. |
Hey @echarles , I just tried it and it's working great! Thank you for the quick response! |
@echarles Thanks for the fix, it works. I was remounting the Notebook Component to make this work earlier. Thanks a lot. 😄 |
@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
It is best that you open a separated issue to track this feature, and also happy to review any PR :) |
@echarles Makes sense 👍🏻 . Thanks for pointing it out. I will look into it. |
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! |
Problem
So following the nextJS tutorial link , I am able to render and run the notebook. I can also render the
FileBrowser
andFileBrowserLab
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
orFileBrowser
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
The text was updated successfully, but these errors were encountered: