datalayer / jupyter-ui

⚛️ React.js components 💯% compatible with 🪐 Jupyter https://jupyter-ui-storybook.datalayer.tech
https://jupyter-ui.datalayer.tech
Other
344 stars 47 forks source link

Support for opening different file formats #106

Open BrandonEscamilla opened 1 year ago

BrandonEscamilla commented 1 year ago

Problem

Currently, in version 0.7.6, it is not possible to open files with formats other than ".ipynb" in the application. It would be beneficial to support various file formats for easier debugging, such as ".txt" or ".json," among others.

Proposed Solution

Implement a feature that allows users to open and visualize files with formats like ".txt" or ".json" in the current notebook editor. When clicking on a file in one of these supported formats, it should be displayed and editable within the application.

Additional Context

Here are screenshots illustrating the current limitation: CleanShot 2023-09-27 at 09 56 06

echarles commented 1 year ago

@BrandonEscamilla The road to support this feature is being worked on and is related to https://github.com/datalayer/jupyter-ui/issues/67

This represents a big step to be able to reuse any component that the jupyterlab core and 3rd party extensions are providing. If you look at the following picture, you will see the cell-toolbar is being shown.

The current implementation is generic, you just have to give a list of jupyterlab extension as props in the JupyterLabApp component https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/components/app/JupyterLabApp.tsx

We can very easily extend that generic App component to ship the text and json editor you are looking for. Maybe you could open separated issue per component with a bit more details if possible (the props, behaviour...) and I will be happy to implement them. BTW the existing Notebook component would move also as an extending that JupyterLabApp, maybe being name NotebookApp (the App suffix means is it more than a notebook, as being extended by any JupyterLab extensions)

Screenshot 2023-09-27 at 10 18 57
echarles commented 1 year ago

The above image is the result of the JupyterLabHeadlessAppexample.

https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/JupyterLabHeadlessApp.tsx