Where can I find documentation on how to use JSX / @nteract/data-explorer with nteract?

[prothSFDC]

Is your feature request related to a problem? Please describe.

I'm having difficulty determining which project the problem is under, but any help is appreciated

TLDR - I cant use most of the components defined within nteract components within the nodejs runtime or the data explorer

I'm not sure how to use hydrogen / jsx within the nteract app.

and the documentation doesn't give much direction, such as links to the iJavascript library,

Trying to use JSX or the DataExplorer, etc - all fail and have an unexpected '<' character error.

I feel i'm doing something wrong, but I'm not sure if its expectations or understanding.

using the nodejs runtime out of the gate after just installing nteract,
I was hoping to leverage some kind of Data Explorer or some way to view the data.

Most of the documentation I find for nteract deals with python
but the relationship between Hydrogen / NTeract app / etc is throwing me off a bit

Describe the solution you'd like

install the nteract app
save a project somewhere
add in the necessary libraries (it seems like @nteract/data-explorer requires styled-components)
and have some way to use the data explorer

(either directly without es6 / imports and then returning the jsx
and the cell would render out the html)

Describe alternatives you've considered

Reviewed the documentation for iJavaScript, Data Explorer, Components, Nteract docs and the single sample project.

I can get by with python and matplotlib, but I was hoping for something local where I can use my modules I frequently use.

I created a new app, and ran yarn add styled-components @nteract/data-explorer
added in jsx or just wrote my own,
and I keep getting the error.

I tried rendering the react directly, short of using $$.html(reactServer.renderString(...))
but more work would need to be done there for that to work.

Additional context
Add any other context or screenshots about the feature request here.

Again, I really appreciate the effort you all are doing here.
Thanks for any help

[captainsafia]

Hmmmm. Can you clarify if you are (a) trying to use the nteract desktop app to write/run a notebook or (b) using nteract's JavaScript libraries to build your own notebook UI?

It's a little unclear from the question but knowing this will help me figure out what guidance to give.

[prothSFDC]

Hi Safia and thanks for the help. I'm just using the nteract desktop app - as vanilla as it can get.

…

On Fri, Jun 4, 2021 at 1:27 PM Safia Abdalla ***@***.***> wrote: Hmmmm. Can you clarify if you are (a) trying to use the nteract desktop app to write/run a notebook or (b) using nteract's JavaScript libraries to build your own notebook UI? It's a little unclear from the question but knowing this will help me figure out what guidance to give. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#5560 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD4ZFTIP7U5QYX77RDGXM33TRELINANCNFSM46DJGT5Q> .

-- *Paul Roth* SalesForce.com Phone: 708.317.8093 Cloud Computing Services For Your Enterprise Salesforce CRM & Force.com | Amazon Web Services | Google | Adobe | Cloud Architecture & Development | Mobile Cloud <https://smart.salesforce.com/sig/proth//us_mb/default/link.html>

[captainsafia]

In that case, the data explorer is designed to only work with code that produces a particular output type, typically designated with a application/vnd.dataresource+json media type. This is currently supported with pandas if you configure the following when importing the library:

import pandas as pd
pd.options.display.html.table_schema = True

[prothSFDC]

Thanks Safia And perhaps I’m misunderstanding Is that for the npm version in JavaScript that uses pandas? ***@***.***/data-explorer I thought that uses different libraries? (Such as react and styled-components) Isn’t the import only supported in python?

On Mon, Jun 7, 2021 at 9:15 PM Safia Abdalla ***@***.***> wrote: In that case, the data explorer is designed to only work with code that produces a particular output type, typically designated with a application/vnd.dataresource+json media type. This is currently supported with pandas if you configure the following when importing the library: import pandas as pd pd.options.display.html.table_schema = True — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#5560 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD4ZFTPI6YU4V6IRXAXCPDDTRV4L3ANCNFSM46DJGT5Q> .

-- *Paul Roth* SalesForce.com Phone: 708.317.8093 Cloud Computing Services For Your Enterprise Salesforce CRM & Force.com | Amazon Web Services | Google | Adobe | Cloud Architecture & Development | Mobile Cloud <https://smart.salesforce.com/sig/proth//us_mb/default/link.html>

[captainsafia]

Yep, that's the distinction I was trying to identify with my question above.

The @nteract/data-explorer package is a React component that knows how to render the data explorer UI given input data that follows the data resource schema. This package can be used independently in any React-based application and its also used in the nteract desktop app to render the data explorer for supported output types.

In one scenario, you're a developer trying to get the data explorer to show in a custom UI you are building (so you consume write JavaScript to display it).

In the other scenario, you're an analyst using the data explorer already configured in the nteract desktop app to explore data (that you interact with via Python).

Let me know if that clarifies things a bit more.