mime-renderer example ?

[oscar6echo]

It would be good to have a mimerender extension example too.

I tried to use the mimerender-cookiecutter-ts, but it breaks right at the initial pip install -e.
Cf. issue mimerender-cookiecutter-ts/issues/30

I tried the hello-world from this repo and it works fine.
But I could not patch the mimerender-cookiecutter-ts to make it work using the hello-world example...

[welcome[bot]]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively. You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada:

[timkpaine]

@oscar6echo here is a non-ts mime render extension for csv, json, and adding a new .arrow type. It is relatively minimal if you ignore the perspective-specific stuff https://github.com/finos/perspective/blob/master/packages/perspective-jupyterlab/src/js/renderer.js

[oscar6echo]

@timkpaine thx for the answer.

After some experiments, I made one, which I share for reference. https://github.com/oscar6echo/jupyterlab-graphviz (not published yet on PyPi)

I'll take advantage of this issue to ask some questions so that I can fine tune the implementation:

• In its current form the extension has some config variables (hover activation and colors): How could I make them available to user config ?
• This extension uses a .wasm file which I add with package.json/scripts/cpwasm: Is there a more industrial way to add files in the labextension not managed by webpack ?
• I show 3 buttons: Is there jupyterlab CSS that I can/should reuse ?
• Generally did I break any convention or make obvious mistakes: Please let me know !

I would be grateful for any feedback/hints/pointers.

[fcollonval]

Thanks for sharing @oscar6echo

I'll take advantage of this issue to ask some questions so that I can fine tune the implementation:

* In its current form the extension has some config variables (hover activation and colors): How could I make them available to user config ?

That one is gonna be more tricky. You will need to define user settings see that example. Then you will need to set those settings to all newly created widget and existing one (if the settings changes). To do that, the easiest will be to track all generated widgets currently in the app and the creation of new widgets.

This will require a standard plugin in addition to the mimeextension. And its activate function will need the tokens IDocRegistry and ISettingsRegistry.

Roughly it will look like

activate(app, docregistry, settingsregistry): {
   // Create a tracker
   const tracker = new WidgetTracker<GraphvizWidget>({ namespace: /* unique id */ })

   // get your factory
   factory = docregsitry.getWidgetFactory('graphviz-dot viewer');

  settingsregistry.load(/* your plugin settings */).then(settings => {
   const onSettingsChanged = () => {
     // Update the settings on each widget
     tracker.forEach(widget => {
      widget.setConfig(settings.composite);
    });
   }
   settings.changed.connect(onSettingsChanged);
   // get your factory
   factory = docregsitry.getWidgetFactory('graphviz-dot viewer');
   factory.widgetCreated.connect((sender, widget) => {
          // Set the config on the widget
          widget.setConfig(settings.composite);

          void tracker.add(widget);
        });
  });

}

* This extension uses a `.wasm` file which I add with `package.json/scripts/cpwasm`: Is there a more industrial way to add files in the labextension not managed by webpack ?

After some googling, it seems you could use of the copy webpack plugin. See the JupyterLab documentation to customize the webpack configuration.

* I show 3 buttons: Is there jupyterlab CSS that I can/should reuse ?

We are working on https://github.com/jupyterlab-contrib/jupyter-ui-toolkit. It is stable enough for use but not yet enough for migrating JupyterLab core.

* Generally did I break any convention or make obvious mistakes: Please let me know !

Nothing obvious from my quick look

[oscar6echo]

@fcollonval thx again for this wealth of info !

[oscar6echo]

I made another one to display a .csv file as an aggrid, with default reasonable options.
https://github.com/oscar6echo/jupyterlab-aggrid

(Because the typescript is highly configurable, it is meant to be adjusted for custom jupyterlite deployments, really)

So another quick question:

• I hard coded the theme to dark (here and there). Instead can I import the relevant CSS and set the relevant class based on the current jupyterlab theme ? Is so, how to access it in index.ts ?

[fcollonval]

I made another one to display a .csv file as an aggrid, with default reasonable options. https://github.com/oscar6echo/jupyterlab-aggrid

thanks for sharing :100:

can I import the relevant CSS and set the relevant class based on the current jupyterlab theme ? Is so, how to access it in index.ts ?

The question was raised earlier in an issue; there the recommended way using MutationObserver is described.

[oscar6echo]

@fcollonval thx again :+1:
I slightly adjusted the jupyterlab-aggrid mime-renderer accordingly.

[fcollonval]

Closing as we have integrated https://github.com/jupyterlab/jupyterlab-mp4 as part of JupyterLab 4 upgrade