Comments (29)
Hi @echarles, perhaps we should wait a little longer until the issue in (#94) is resolved. That way, I can test the widgets issue when there are changes in the path. Thank you in advance!
from jupyter-ui.
Error: Requirejs is needed, please ensure it is loaded on the page.
You probably miss the require.js
script in you html page.
But even with that, on my env, I hit TypeError: Cannot read properties of undefined (reading 'MPLCanvasModel')
which is somehow related to matplotlib/ipympl#460 (see also VS Code being impacted on microsoft/vscode-jupyter#13150).
I am working on the ipywidgets stuff and hopefully will come soon with a fix for this and someting more robust in general for ipwidgets.
from jupyter-ui.
Yes, in fact, I am trying now with require.js loaded and getting the same error you mentioned. The links you provided mostly address resolving the issue within the Jupyter server UI. Curiously, when I run a notebook from the server UI, I am able to use %matplotlib widget without any problems. However, when integrating it with my Next.js application, it doesn't seem to work. Is there a solution or workaround available to resolve this issue?
from jupyter-ui.
Curiously, when I run a notebook from the server UI, I am able to use %matplotlib widget without any problems
Are you saying you can use %matplotlib widget
from the React.js components? Or is it from the vanilla JupyerLab and failing with React.js (including Next.js)?
from jupyter-ui.
Yes, exactly, it works with the predefined UI that comes with JupyterLab but not working with my next.js app using jupyter-ui.
from jupyter-ui.
I have just pushed work around ipywidget with support for jupyter-matplotlib. I will now make it configurable so anyone can define the widgets he wants, but in the meantime, jupyter-matplotlib is supported out-of-the box in main branch. If it does not show up at the first time, hit run again, looking forward your feedbacks on how it work on your env.
from jupyter-ui.
The latest push introduces a externalIPyWidgets
(name can be better) where you can give an array of ipywidgets to load, eg.(see the example in the main tree)
externalIPyWidgets={["jupyter-matplotlib:0.11.3"]}
externalIPyWidgets={["bqplot:0.5.42"]}
externalIPyWidgets={["@widgetti/jupyter-react:0.3.0"]}
cdn.jsdelivr.net may be slow to load the first time, so if it fails at first load, reload your browser and it should work fine.
from jupyter-ui.
Now you have in latest main externalIPyWidgets
. and bundledIPyWidgets
props with more typed object to pass. External will load from CDN, you have to ship in your package.json what you list in the bundled prop.
from jupyter-ui.
Closing this as resolved, please open separated issue for any specific question.
from jupyter-ui.
Thank you for your response, @echarles. I have a quick question: Will this update be included in the next release to npm? I'm currently using the npm version, not a local one. Thank you in advance!
from jupyter-ui.
@BrandonEscamilla just published @datalayer/jupyter-react 0.6.2.
this morning I have pushed a feature to ensure that the JupyterLab CSS were not loaded when the components are used in JupyterLab it self 👍
This has driven a small regression for the ipympl widget which was showing correctly before, but now show with the toolbar being move to the bottom. The other ipywidgets (bqplot...) does seem to be impacted.
Also I notice regularly that the widget is not lodaded when you use it quickly after the first time - Maybe time is needed to load the remote javascript, still need to makes sens of what is going on, your feedbacks would be useful there.
from jupyter-ui.
Hi @echarles, I just tried the new version and it seems it's not working on my project, I already tried including externalIPyWidgets={["jupyter-matplotlib:0.11.3"]} in the Notebook component, and reloading the browser, but not working, is there anything I am probably missing? Thanks!
from jupyter-ui.
@BrandonEscamilla Sorry, forgot to mention that I changed to more typed props (separate the name and version as name: "jupyter-matplotlib", version: "0.11.3" }
For externals
jupyter-ui/packages/react/src/examples/Bqplot.tsx
Lines 14 to 16 in 527a49c
for bundled
jupyter-ui/packages/react/src/examples/Matplotlib.tsx
Lines 17 to 19 in 527a49c
from jupyter-ui.
Hey @echarles, I'm currently testing this and unfortunately, I haven't been able to make it work. I'm still encountering the same error. Do you have any suggestions? Here's how I included the widget:
This is the error:
Apart from this, I am wondering what's the difference between externalIPyWidget and Bundled? Thanks in advance!
from jupyter-ui.
Rested on my env and it works for me. Now trying to create a codesandbox, but a bit slow atm. Can you double check the version of jupyter-react you use?
Apart from this, I am wondering what's the difference between externalIPyWidget and Bundled? Thanks in advance!
If you add jupyter-matplotlib
as a dependency to your project, better to use bundledIPyWidgets
, otherwise, you can add any other widgets that is not declared in your package.json, jupyter-react will download it from a CDN (hence the need to declare a externalIPyWidgets
. prop).
from jupyter-ui.
Ok, it seems is working with the bundle. I did npm i jupyter-matplotlib
and included the widget through the bundle and it's working. However, as mentioned earlier, the only remaining issue is the toolbar being moved to the bottom. Are there any solutions available to resolve this matter?
from jupyter-ui.
Well, it seems there is an issue, if you try to change the notebook path while using bundledIPyWidgets, the notebook gets broken. The following error renders:
Oops, something went wrong.
Cannot read properties of undefined (reading 'register')
In the console the following errors appears:
from jupyter-ui.
A few issues here:
- I have created a codesandbox and indeed I can reproduce the broken ipywidget with externalIPyWidget prop https://codesandbox.io/p/sandbox/jupyter-react-cra-notebook-66r25c-66r25c?file=/src/index.tsx:1,1
- The toolbar is a bit tricky, very specific to matplotlib ipywidget. I think I bring a specific hack for that, as the other ipywidgets do not suffer from CSS (this issue has been introduced while ensuring the react components can also be shown in a JupyterLab extension, see https://twitter.com/DatalayerIO/status/1693953861248065889
- The registration of the ipywidgets need to take into account the change of path, and also change on kernels...
from jupyter-ui.
Reopening and will work on that soon.
from jupyter-ui.
@BrandonEscamilla I have release 0.6.3 which brings a more rock-solid ipywidgets support (It now runs fine from the first start). I still have to fix the specific toolbar issue for ipympl but otherwirse, the other widgets I have tests (bqplot, ipyreact, plotly, bokeh) work great.
If you have cycles to look at the toolbar which I think could be a CSS to inject, that would be great. Otherwse, tell me.
from jupyter-ui.
I have released 0.6.3
Sorry, was meaning 0.6.4
from jupyter-ui.
Just released 0.6.5
I have updated the Matplotlib example to load the css from directly and disable the loading by the jupyter content. This fixes the CSS issue. For the path change, with the last release, the component does not throw an error, but after the change, the ipywidgets are not working anymore. I will wait a bit more on @BrandonEscamilla feedback before tackling that remaining issue.
jupyter-ui/packages/react/src/examples/Matplotlib.tsx
Lines 10 to 49 in ebaaa7b
from jupyter-ui.
Hey @echarles, I've been experimenting with version 0.6.4 of the library. It appears that loading the CSS and using disableCssLoading={true}
option works as intended. Also, as you mentioned, when I modify the file path, the widget stops functioning. So, to address the CSS issue, do I still need to manually load the CSS file, or will the library handle it internally? Thanks in advance!
from jupyter-ui.
to address the CSS issue, do I still need to manually load the CSS file, or will the library handle it internally?
JupyterLab is notably poor with it CSS management (no css-in-js, no css modules, just plain good-old css). I opened PR to fix some of the glitches which got merged, but still experience side effect mainly depending on the order of loading. So for now, the core jupyter-react library does its best to load as it should, but if we want the components to be usable in jupyerlab with non-double css loading, the developer would need to do something like in the Matplotlib example in some case. Is that a stopper for you? I can think a bit more based on your inputs.
when I modify the file path, the widget stops functioning
Yeah, I can fix that next week.
from jupyter-ui.
Hey @echarles, got it, I think in my case is not a problem to include css in the component directly. I would probably import it through globals.css or something like this, just to avoid having all of the imports there. But I think going into that direction is not a big problem. By the way, now that we are talking about css, are there plans to support dark mode? Or if I wanted to modify the css to support it, where should I look? Thanks in advance!
from jupyter-ui.
I would probably import it through globals.css
You may have the toolbar issue if you load all the css files from an external globals.css file, to be tested on your env.
But I think going into that direction is not a big problem.
Sounds good.
By the way, now that we are talking about css, are there plans to support dark mode?
With #67 I am preparing a more flexiable way to create the notebook with any jupyterlab extension support, including any themes, so dark theme also. We plan also to wrap something for the theme in that folder https://github.com/datalayer/jupyter-ui/tree/933d7acf57fb125a154cbb1be69bdce00cecdec9/packages/theme but it will be for after.
Or if I wanted to modify the css to support it, where should I look? Thanks in advance!
For now, as you will load the css your self, you can try change theme-light-extension
with theme-dark-extension
in those lines, but not sure of the visual result.
jupyter-ui/packages/react/src/examples/Matplotlib.tsx
Lines 26 to 27 in 933d7ac
from jupyter-ui.
You may have the toolbar issue if you load all the css files from an external globals.css file, to be tested on your env.
I will try this, let you know what happens.
For now, as you will load the css your self, you can try change theme-light-extension with theme-dark-extension in those lines, but not sure of the visual result.
Yeah, I tried already and I think it's not working still showing the light version, I will check if I can do a workaround.
Thanks!
from jupyter-ui.
Should we close this? If there are any other issue like theming... please open new dedicated issues. Thx!
from jupyter-ui.
@BrandonEscamilla In the meantime #94 is resolved. Could we close this?
from jupyter-ui.
Related Issues (20)
- Issue with Vite Example HOT 6
- Markdown collapsing instead of rendering. HOT 1
- Cell height is off by as much as 30+x HOT 3
- Typescript Version Issue HOT 1
- Issue with nextjsExample HOT 1
- Create the Jupyter session or server on-demand HOT 2
- Save from notebookActions is not working anymore HOT 3
- Global CSS cannot be imported from within node_modules. HOT 2
- Error: widget model not found HOT 1
- How to configure adding Teradata AI Unlimited custom renderer and sqlhighlighter HOT 7
- Autocomplete does not work in notebook in examples HOT 3
- Use `oss.datalayer.run/api/jupyter-server` (instead of `oss.datalayer.tech/api/jupyter`) for free cloud kernels
- Tab key does not invoke autocomplete on a new cell until the new cell is re-selected HOT 1
- Changing notebook path loads new file but shift-enter doesn't work HOT 2
- Cannot install Docusuarus Plugin HOT 2
- Being redirected using docusaurus plugin HOT 1
- Server URL issue with the new URLs HOT 2
- Unable to connect with local jupyter Hub with react application HOT 2
- Make JupyterContext optional HOT 1
- JupyterLabApp disabledPlugins has no effect
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jupyter-ui.