[Question]: Send data back to notebook cell

[anant-k-singh]

I have created a custom package under nteract/packages/my-custom-package and I am able to render a React component from this custom package via a python function in nteract notebook

Requirement:

1. I want to call a python function from a notebook cell
2. This python function would create a request for nteract/jupyter-extension and that request gets mapped to my custom package, which is a React component
3. This React component (my-custom-package) would render some HTML in notebook cell's output
4. This React component would also return data (.csv file) to the notebook cell, or to the notebook in general

Questions:

1. Is this requirement feasible with nteract?
2. Is my understanding of flow correct?
3. If yes, how can I implement it as I did not find any thing related to returning data from React package to notebook cell in the nteract docs
4. If the flow is incorrect, please guide me in the correct direction and provide relevant docs, if available

[captainsafia]

Hi @anant-k-singh! Note: I've moved your issue to a discussion.

It looks like you're trying to build a custom transform for a Jupyter display type. You can find docs on how to do this in the nteract/outputs repo at https://github.com/nteract/outputs/tree/master/docs.

This python function would create a request for nteract/jupyter-extension and that request gets mapped to my custom package, which is a React component

The Python function should return a display_data object with a unique media type that can be mapped to a React component on the client. The documentation linked above has more info on this.

This React component would also return data (.csv file) to the notebook cell, or to the notebook in general

Can you clarify what you mean here. I can interpret your question in one of two ways:

• You want your React component to send data back to the kernel
• You want the component to embed some data into the serialized notebook file

Both are feasible but I can provide guidance depending on what you mean.

To get started, I'd recommend reading the docs mentioned above. If you have any follow-up questions, please post them here and I'll address.

[anant-k-singh]

Thanks @captainsafia ! Now I have better understanding of transforms
I should be better able to explain the doubt/question.

I want to embed a visual/graph in notebook's output cell using a custom transform (i.e. React component)
In next cell, I want to call an API to extract data (as string) from that prev visual and assign it to a python variable
For this to happen, I would have to refer the instance of React component which rendered the visual in prev cell, so that I can call extract data API on that embedded visual.

Hypothetical usage would look something like this:

In [1]: EmbedVisual(...someParams)
Out [1]: (Visual is embedded with custom transform's output)

In [2]: csvData = ExtractData(...sameParams) # Calls extract data API on the same embedded visual and returns the data as plain string

In [3]: csvData
Out [3]: 'Visual's csv data as plain string'

Note: Here EmbedVisual and ExtractData are python functions which basically request for lets say media types application/my-visual and application/my-data-format respectively

To make this work, I can of course embed the visual again in ExtractData but instead of returning the embedded visual, I can call the API on visual and return the required data.
It would be great to avoid embedding the whole visual again and again everytime I want to access it's APIs

My questions are:

1. Is it possible to access a React component's instance later from some other notebook cell? Refer sample usage above.
2. How can the custom transform/React component return a plain string and not an HTML element?

[captainsafia]

Is it possible to access a React component's instance later from some other notebook cell? Refer sample usage above.

You could do this on the client pretty easily. However, based on the code that you showed above the ExtractData method is running in a Python kernel and not on the client.

Based on your example, it seems like the best approach would be to have your EmbedVisual and ExtractData methods reference the same internal objects on the Python side. So, when a user calls EmbedVisual, we take data_X and return a serialized visual representation. Then the user calls ExtractData(data_X) and the kernel returns the data associated with the data_X reference.

If you wanted all this to happen entirely in the client, you could achieve it with two transforms. An EmbedVisual transform that renders the visual and an ExtractData transform that calls a static method to get the data from an EmbedVisual component.

How can the custom transform/React component return a plain string and not an HTML element?

Yes, a transform can render whatever you want it to on the page. Of course, it would have to be an HTML element since it is rendered on the page.

Perhaps you're referring to the fact that all transforms are associated with display_data objects that have a serialized JSON string representation that is stored in the notebook?

[anant-k-singh]

Regarding the second question:

How can the custom transform/React component return a plain string and not an HTML element?

As you can see in the In [2] of sample usage above, ExtractData() function does not render anything, instead it returns string value.

When ExtractData() function is called, I want to:

1. Import some js libraries
2. Include run some js logic (Find the visual rendered by EmbedVisual() and extract data from it using imported libs)
3. Return the extracted data as string and not as HTML element

Is custom transform fit for this or do you have other recommendation?

[captainsafia]

Is custom transform fit for this or do you have other recommendation?

Ah, I see! Yeah, what you're describing is a plain-text display object. You can achieve this by having your ExtractData method return a text display object (ref).

[anant-k-singh]

I'm sorry, this has become a long thread

Please correct me if I am wrong, the display object is used to render HTML (JSX element) in the output cell

In my scenario:

1. I do not want to render anything in the output cell (Check usage of ExtractData() function)
2. I want to execute some JS logic in ExtractData() function, which would return a string (We do NOT want to render this string, instead store it in a python variable in the notebook)

My understanding is, that JSX element returned by custom transform's react component would be rendered in the output cell even if it is just a string.

How do I return a string after executing some JS logic without rendering it in output cell?

[captainsafia]

How do I return a string after executing some JS logic without rendering it in output cell?

In that case, you could render nothing (aka return null from the render method) from the React component.

I want to execute some JS logic in ExtractData() function, which would return a string (We do NOT want to render this string, instead store it in a python variable in the notebook)

This is a particular challenging part of the design because two runtimes have to communicate the state of a variable to each other, the JavaScript runtime running in the user's browser and the Python kernel running on the users computer (or perhaps in the cloud somewhere). If possible, I'd recommend investigating if there is some way to get around having to execute the JS logic to extract the variable on the client. It'll make the implementation a lot cleaner and more portable across different Jupyter front-ends.

[anant-k-singh]

I went through some of the nteract docs:
https://docs.nteract.io/
https://components.nteract.io/
https://github.com/nteract/docs
https://github.com/nteract/outputs/tree/master/docs
https://github.com/nteract/vdom/tree/master/docs

Please correct me if I am wrong with my understandings:

1. Custom transform can only use React components which by nature can only return JSX element
2. Custom transforms are one way communication, i.e. they take data + media type in python kernel and render the output in client's browser, i.e. Python kernel -> React component
3. Custom transforms cannot return data back to python kernel
4. nteract, by design, does not allow data to be transferred from client's browser to python kernel running the nteract notebook e.g. via JSON or something else
   In the sense that we can have data transfer from python kernel to client's browser (custom transforms) but not the other way round

[captainsafia]

In the sense that we can have data transfer from python kernel to client's browser (custom transforms) but not the other way round

Generally, true. The notable exception is ipywidgets which does allow syncing data from a client to a kernel, but that's sort of its own thing.

The other points are correct.

[anant-k-singh]

I am not able to render ipywidgets in my nteract notebook (though there are no errors)
Does nteract support ipywidgets?
Details: #5348

[captainsafia]

It does! I posted a comment on the regression that is causing this.