nteract / play

The code base for the nteract Play app

nteract Play

Play with nteract. No installation needed.

We developed nteract play to provide an interactive playground for users to run code samples against a Binder instance.

nteract is an open-source organization committed to creating fantastic interactive computing experiences that allow people to collaborate with ease.

Index

• Development
  • Pre-Requisites
  • Developmen Environment
• Community
  • Contribution
• License

Development

If you want to contribute to this project, read the information given below.

Pre-Requisites

You should be familiar with following to get started.

• HTML/SCSS
• React, Redux, and RxJS
• Familiarity with CLI

pre-requisites the system needs to develop this project.

• NPM or Yarn
• Node

Development Environment

Here are the steps given below to step up the development environment:

1. Fork this repo.
2. Clone the fork to your system. git clone https://github.com/YOUR-USERNAME/play.
3. You can use either yarn install or npm install.
4. To start the dev server npm run dev or yarn dev.
5. To build the application npm run build or yarn build.

Community

Contribution

Your contributions are always welcome and appreciated. Following are the things you can do to contribute to this project.

1. Report a bug
   If you think you have encountered a bug, and I should know about it, feel free to report it here and I will take care of it.

2. Request a feature
   You can also request for a feature here, and if it will viable, it will be picked for development.

3. Create a pull request
   It can't get better then this, your pull request will be appreciated by the community. You can get started by picking up any open issues from here and make a pull request.

If you are new to open-source, make sure to check read more about it here and learn more about creating a pull request here.

License

BSD-3-Clause

play's Issues

Allow running play as a serverextension

I want to run play as a serverextension, so I can provide it to users as an application in JupyterHub.

Add ability to open specific files to play

Related to #6. Would love to have ability to specify which file to open, perhaps as a URL parameter too. This lets us put users into any particular file we want with just a link they can click.

[play] Show an animation while server, kernel starting

To keep eager eyes waiting patiently.

[play] Allow configuring which binderhub play.nteract.io connects to

Right now it is hardcoded to mybinder.org. It would be great if we could configure this somehow. I'd like playground.staging.mybinder.org to point to staging.mybinder.org, for example!

Play code clean-up for Typescript

With #20 merged, we are now back to a good working state for Play using JavaScript.

Next big step: refactor Play to use the TypeScript components.

[play] query parameters and code persistence

As an initial first pass, and supported by the work in #2141, we should figure out what our URL structure should be. Here's a first pass for just repo, ref, and kernel:

https://play.nteract.io/?repo=nteract/vdom&ref=master&kernel=python

Those seem totally fine. Now onto the code layer...

Persistence layer

One way to do these fiddles is to put all the code in the URL itself, URI encoded:

https://play.nteract.io/?code=import%20this

Another way would be to back these with gists (suggested by @yuvipanda, @betatim):

https://play.nteract.io/?gistID=5c73e81ee857686168c3abec49225482

Or we could rely directly on firebase (suggested by @captainsafia) and track our own storage:

https://play.nteract.io/?id=agQr23nuI

One consideration that I'd like to take into account is if/how we'd support forking from one of these. I'd like to make it immediate. As you change a previously "published" fiddle, you're running on a (virtual) fork of the original. As soon as you share/save, you've effectively committed a new version. I guess this means we have to take into consideration what a document lifecycle is with these.

Prior art (in the JS space):

• http://jsbin.com/
• https://codepen.io/pen/
• http://requirebin.com/
• https://jsfiddle.net/

/cc @yuvipanda, @mpacer, @captainsafia, @betatim

[play] create test suites for play components

ref: #2236

/cc @mpacer @theengineear

kill server epic doesn't exist yet to handle this.

play/app-redux/epics.ts

Lines 47 to 52 in 9a46bf6

	// TODO: kill server epic doesn't exist yet to handle this.
	// TODO: the server will be culled once we do a jupyter shutdown call
	actionsArray.push(actions.killServer({ serverId: oldServerId }));
	}
	}
	// $FlowFixMe

---

This issue was generated by todo based on a TODO comment in 9a46bf6. It's been assigned to @captainsafia because they committed the code.

kernelStatus should be allowed to be null or undefined,

play/components/Main.tsx

Lines 312 to 317 in 9a46bf6

	// TODO: kernelStatus should be allowed to be null or undefined,
	// resulting in thought of as either idle or not connected by
	// default. This is primarily used for determining if code
	// completion should be enabled
	kernelStatus={
	currentKernel ? currentKernel.status : "not connected"

---

This issue was generated by todo based on a TODO comment in 9a46bf6. It's been assigned to @captainsafia because they committed the code.

[play] ability to interrupt and kill kernels

Since play is fairly barebones (and wow do I love simple UIs), we'll probably want to design a simple way to handle this for play. Beyond the design though, the epics / logic behind these can be done independent of the UI itself.

---

ref: #2236

Maintainers: feel free to edit/update the description here.

/cc @mpacer @theengineear

[play] Set up automated builds for the play package

Ideally, it would make a new container image tagged with the git hash for every commit. This is currently not possible on Dockerhub (which only gives you a 'latest' tag).

Our options are:

1. Used tagged builds in DockerHub. This would make a new build of play every time there's a tag made like 'play-*'. This won't give us an image per commit though, and would require a new tag to be made every time we want to deploy. This seems like too much coupling...
2. Use travis-ci on this repo to build and push a docker image. This requires setting sudo: true in travis.yml, which is going to slow down your tests (there's no way to do that only for post-merge builds I can tell). Not sure if you want this
3. ???

Allow pluggable editor surfaces for play

I'd love to be able to configure using Monaco or even just a TextArea for use as input with Play. This is important for accessibility reasons - Monaco is far more accessible than CodeMirror, and even Textarea is sometimes desirable.

@rgbkrk showed me how to do this, and it doesn't look too difficult.

the server will be culled once we do a jupyter shutdown call

play/app-redux/epics.ts

Lines 48 to 53 in 9a46bf6

	// TODO: the server will be culled once we do a jupyter shutdown call
	actionsArray.push(actions.killServer({ serverId: oldServerId }));
	}
	}
	// $FlowFixMe
	return of(...actionsArray);

---

This issue was generated by todo based on a TODO comment in 9a46bf6. It's been assigned to @captainsafia because they committed the code.

[play] Kill old server after changing servers

ref: #2236

Maintainers: feel free to edit/update the description here.

/cc @mpacer @theengineear

Add a README

Add basic README and project info.

[play] README

Play needs a readme. At the very least it should outline how we ship it. A roadmap would be nice too.

Allow pluggable editor surfaces for play

I'd love to be able to configure using Monaco or even just a TextArea for use as input with Play. This is important for accessibility reasons - Monaco is far more accessible than CodeMirror, and even Textarea is sometimes desirable.

@rgbkrk showed me how to do this, and it doesn't look too difficult.

for notebook leakage

play/components/Main.tsx

Lines 311 to 316 in 9a46bf6

	// END TODO for notebook leakage
	// TODO: kernelStatus should be allowed to be null or undefined,
	// resulting in thought of as either idle or not connected by
	// default. This is primarily used for determining if code
	// completion should be enabled
	kernelStatus={

---

This issue was generated by todo based on a TODO comment in 9a46bf6. It's been assigned to @captainsafia because they committed the code.

Context-sensitive welcome message for https://play.nteract.io/ ?

At the moment it seems https://play.nteract.io/ is mirrored to https://playground.mybinder.org/ (both links via @betatim). However, the latter also displays:

h1('Welcome to play.nteract.io'),

Is it possible to make these welcome messages context sensitive, so that they display the correct URL depending on where this web-based nteract tool is deployed for testing?

Not critical, obviously, but would be nice to have. :)

Review typescript config and dev instructions

Looks like we ejected from the monorepo and need to update the tsconfig. The build script seems to work just fine, so maybe just need to figure out a good setup for tooling.

[play] Buffer for line numbering on editor on load.

When initially server rendered, play has a little bit of a flicker while codemirror is loading up. We should make the initial display have a buffer for the line numbers (when the option is set).