New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
nteract as a web app #1346
Comments
After the provider refactor, I think we should spend some time making our components more composable. Right now, we make a lot of assumptions about what a notebook should and should not have. For example, we embed the StatusBar into the Notebook but what if the end user wants to embed their own status bar? What if the user wants to display different buttons in the Cell Creator menu? Today, we don't support either of those use cases. I really like Victory as an example of a completely composable library - it makes no assumptions on what is included in a chart and leaves the decision completely up to the user. We should also think about integrating our CSS into JS to allow users to pass in custom styles through a style prop that will override our defaults. I'm most familiar with Aphrodite because it's really similar to React Native StyleSheet, but I'm open to any other libraries here. Here's an example of what it would look like:
|
Totally agree.
Yeah I think the status bar will probably be way different for a web app. I'm guessing the
The pinned cell(s) could be outside of |
I'll have to spend some time learning about how we'll package / use CSS in that way. I've been really happy with our theming stylesheets and have lately wondered how we're going to expose the current styles in a good way. |
@rgbkrk just catching up on this issue and trying to get some bearings. I'm mostly just trying to learn more about how the repo is organized and such. Some responses
If I'm understanding this right, you're looking to pass down
I wonder if in-lining styles will couple React code a little too tightly with the style? I'm not sure how you're planning on doing the overriding of things, but a well-organized set of scss files (using the 7-1 pattern https://sass-guidelin.es/) can be pretty clean! That said, I've never actually tried doing css --> js and have blindly followed articles like this. ExtrasAlso, you'd mentioned something about creating menu mocks / components. Is the intention to create this from scratch (at some level), or just rely on some 3rd party menu? |
Yep, that's what folks are currently tackling as PRs for #1288.
I'm a little afraid of this too, though I think it's not a decision that will paralyze us. We can always change it again later as many of these function more like a library than a site we run. The pressures will likely come from us using nteract components in different fashions.
If the 3rd party menu works, I'd much prefer to rely on something well supported by others. 👍 As long as we can style it similarly to the rest of our theme(s), branding, and experience I'm certainly game. |
Quick mock for nteract: I'll post a Sketch file from that to https://github.com/nteract/mocks as well as one for the dashboard view. |
As promised: nteract/design#14 |
Re: top-nav or side nav, I definitely think top-nav is the way to go. I feel like horizontal space is always at a premium when I'm in a notebook. |
👍 👍 I think requirement here should be reasonably simple, I'd be surprised if an acceptable solution doesn't exist. |
Just an update -- there is now a web version of nteract that runs on top of the jupyter server. You can try it out on binder! The jupyter extension is called |
This is a bit of a high level overview of what we need to make nteract available as a web application in addition to components and modules for people to build their own (see #301) or for using our transforms in a standard way in JupyterLab (as @gnestor has done by grabbing the code and maintaining separately).
We ended up bringing in
react-jupyter-display-area
as well asreact-transformime
into this repository which helped us iterate faster and create a tighter build. We swore that we would export these again as part of a monorepo and that time is certainly upon us.Here's how I imagine this repository will become laid out, as a top level:
My assumption is that the web app will build upon the jupyter notebook server. I'm (personally) not trying to support a standalone single user server for nteract, the primary reason I think I have to build a standalone frontend is to make sure that the exported components are useful while working on a multi user server.
Precursors
In order to ease maintenance burden of these modules, we've been decoupling components and reducers while also stabilizing our base. In progress issues:
const Rx = require('rxjs/Rx')
Web app necessities
Monorepo
This may need to be done in stages to minimize pain. Suggested pathway:
I'll continue to update the above with an outline as we push towards this. What else is a necessity here?
The text was updated successfully, but these errors were encountered: