Multiple Components inside one module

[digitaltopo]

How would you add multiple distinct react components packaged into one python module?

Would you just use multiple JupyterReact.init for different components in index.js:

function load_ipython_extension() {
  requirejs(["base/js/namespace", "base/js/events"], function(Jupyter, events) {
    JupyterReact.init
    ...

and then import multiple python modules (like thing.py in the example)?

The end goal would be something like:

from example import Thing1
from example import Thing2

Thanks for your work on this project @chelm!

[chelm]

Yeah you got it. On the JS side you'd create a couple components that get imported via the components/index.js - those components are basically a full on react sort of app and get rendered when a matching component on the python side is displayed inside a notebook cell. Also specific JS components can bind to dispatched events coming from python with "module" names being the thing you can key off to know if any particular react component should update itself.

As I say those things I realized its a bit complicated to set up at first but really works well. All JS components receive every message from python but can selectively choose which messages might apply to themselves.

Maybe I'll try to flesh it for in more detailed example with 2 components.

[chelm]

Hey @digitaltopo I misread your question.

You only need one call to JupyterReact.init like so...

JupyterReact.init( Jupyter, events, 'some.comm.name', { components } );

and components is an index of any components you want (ie import components from './components';)

[chelm]

Sorry for the late reply, for some reason this comment came via email and isnt included in the comments of the issue you created. Would be nice to track this there. But yes each component would share a comm. This follows the pattern of ipywidgets (sharing comms) and each message over the comm contains the module name that message came from. This way each JS component on the front end can selectively decide to respond to events and/or ignore events it doesnt care about. You could update the state of one component based on data from another. However you're example.py and example2.py are a bit off. The `target_name` should be exactly the same as the name you set when calling Jupyter.init in JS. So: ``` index.js: function load_ipython_extension() { requirejs(["base/js/namespace", "base/js/events"], function(Jupyter, events) { JupyterReact.init(Jupyter, events, "react.components", { Components, save: false }); }); } example.py: from __future__ import print_function from jupyter_react import Component class Example(Component): module = 'Example' def __init__(self, **kwargs): super(Example, self).__init__(target_name='react.components', **kwargs) self.on_msg(self._handle_msg) def _handle_msg(self, msg): print(msg) example2.py: from __future__ import print_function from jupyter_react import Component class Example2(Component): module = 'Example2' def __init__(self, **kwargs): super(Example, self).__init__(target_name='react.components', **kwargs) self.on_msg(self._handle_msg) def _handle_msg(self, msg): print(msg) ``` Then in you're JS components you receive messages with msg.content.module: 'Example' and 'Example2'

…

On Thu, Jun 8, 2017 at 2:57 PM, Orestis Herodotou ***@***.***> wrote: So all the components have the same comms then? (some.comm.name in the example you gave:) JupyterReact.init( Jupyter, events, 'some.comm.name', { components } ); For a full example: index.js: function load_ipython_extension() { requirejs(["base/js/namespace", "base/js/events"], function(Jupyter, events) { JupyterReact.init(Jupyter, events, "react.components", { Components, save: false }); }); } example.py: from __future__ import print_function from jupyter_react import Component class Example(Component): module = 'Example' def __init__(self, **kwargs): super(Example, self).__init__(target_name='react.components.example', **kwargs) self.on_msg(self._handle_msg) def _handle_msg(self, msg): print(msg) example2.py: from __future__ import print_function from jupyter_react import Component class Example2(Component): module = 'Example2' def __init__(self, **kwargs): super(Example, self).__init__(target_name='react.components.example2', **kwargs) self.on_msg(self._handle_msg) def _handle_msg(self, msg): print(msg) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAVbvKAgbLl3JyGo8UzgU1k-zBukBiYQks5sCGBBgaJpZM4NurpH> .

-- CH

[LockwoodChris]

Hey, First I'd like to say that this is a really cool extension you've made for jupyter, it took quite a long time to set up and understand but it's quite powerful.

At the moment I'm trying to move from displaying only 1 of my react components to being able to select a few different ones and I was wondering if you knew if there was a better way to extend to multiple components.

Lets say my ./components looks like this:

import Component1 from './comp1.js';
import Component2 from './comp2.js';

export default {
  Component1,
  Component2
}

I create two different Component1.py and Component2.py classes using the same the same target for comms with separate JS module names, but this starts to become unfeasible if I want to add many different components, as I must create a new class for each with almost identical code. Is there anyway to easily extend this or am I missing something obvious?