Merge pull request #12 from plotly/dev

[v0.0.2] Update docs, fix imports, fix unpkg links, move data files

CHANGELOG.md

@@ -1,2 +1,11 @@
-# 0.0.1 - 2018-11-03
-First pre-release version of dash-cytoscape. Still WIP, so prepare to see it break 🔧
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.0.1] - 2018-11-03
+### Added
+- First pre-release version of dash-cytoscape. Still WIP, so prepare to see it break 🔧

CONTRIBUTING.md

@@ -30,27 +30,35 @@ To publish or create a prerelease:
 2. Bump version numbers in `package.json`, update the `CHANGELOG.md`, and make a pull request
 3. Once the pull request is merged into master:
 4. Build
-```npm run build:all```
+```
+npm run build:all
+```
 5. Create distribution tarball
-```python setup.py sdist```
+```
+python setup.py sdist
+```
 6. Copy the tarball into a separate folder and try to install it and run the examples:
-```cp dist/dash-cytoscape-0.0.1.tar.gz ../temp
+```
+cp dist/dash-cytoscape-0.0.1.tar.gz ../temp
 cp usage.py ../temp
 cd ../temp
 source venv/bin/activate
 pip install dash-cytoscape-0.0.1.tar.gz
 python usage.py
 ```
 7. If the examples work, then publish:
-```npm publish
+```
+npm publish
 twine upload dist/dash-cytoscape-0.0.1.tar.gz
 ```
 8. Tag your release with git:
-```git tag -a 'v0.0.1' -m 'v0.0.1'
+```
+git tag -a 'v0.0.1' -m 'v0.0.1'
 git push origin master --follow-tags
 ```
 9. Verify that the publish worked by installing it:
-```cd ../temp
+```
+cd ../temp
 pip install dash-cytoscape==0.0.1
 python usage.py
 ```

README.md

@@ -65,8 +65,8 @@ $ git clone https://github.com/plotly/dash-cytoscape.git
 ```
 2. Install the dependencies and build the code:
 ```commandline
-$ npm i
-$ npm run build:all
+$ yarn
+$ yarn run build:all
 ```
 
 3. Install the library

dash_cytoscape/__init__.py

@@ -33,7 +33,7 @@
     {
         'relative_package_path': 'bundle.js',
         'external_url': (
-            'https://unpkg.com/dash_cytoscape'
+            'https://unpkg.com/dash-cytoscape@{}'
             '/' + package_name + '/bundle.js'
         ).format(__version__),
         'namespace': package_name

dash_cytoscape/package.json

@@ -17,7 +17,7 @@
     "lodash": "^4.17.11",
     "ramda": "^0.25.0",
     "react": "15.4.2",
-    "react-cytoscapejs": "1.0.0",
+    "react-cytoscapejs": "1.0.1",
     "react-dom": "15.4.2"
   },
   "devDependencies": {

demos/README.md

@@ -5,13 +5,21 @@ The following demos were created in addition to the existing usage files:
 
 ## Requirements
 
-The examples here use the official dash-cytoscape distribution rather than the repository version. If you wish to use the local version, please move the demo into the parent folder, and run from there.
+The examples here use the PyPi release of dash-cytoscape currently installed, rather than the latest development version. If you wish to use the latter, please move your demo (and its associated data files) into the parent folder, and run from there.
 
 To run `usage-phylogeny.py`, you need to install biopython:
 ```commandline
 $ pip install biopython 
 ```
 
+## Data
+
+The phylogeny data was taken from the [Biopython Github Repo](https://github.com/biopython/biopython/blob/master/Tests/PhyloXML/apaf.xml). 
+
+The sample network for social science was taken from the [Google Plus Ego dataset](http://snap.stanford.edu/data/) collected by the SNAP Group at Stanford.
+
+All the other datasets were taken from the [Cytoscape.js Official Documentation Demos](https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos).
+
 ## Demos reproduced from Cytoscape.js
 
 The demos in this folder were all originally written in JavaScript, using the Cytoscape.js library. They were rewritten in Python as extensive example of the Dash Cytoscape API.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dash-cytoscape",
   "version": "0.0.1",
-  "description": "dash-cytoscape",
+  "description": "A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around Cytoscape.js",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack-serve ./webpack.serve.config.js --open",
@@ -12,12 +12,13 @@
     "build:all-dev": "npm run build:js-dev & npm run build:py"
   },
   "author": "The Plotly Team",
+  "author-email": "[email protected]",
   "license": "MIT",
   "dependencies": {
     "lodash": "^4.17.11",
     "ramda": "^0.25.0",
     "react": "15.4.2",
-    "react-cytoscapejs": "1.0.0",
+    "react-cytoscapejs": "1.0.1",
     "react-dom": "15.4.2"
   },
   "devDependencies": {

setup.py

@@ -12,11 +12,14 @@
     name=package_name,
     version=package["version"],
     author=package['author'],
+    author_email=package['author-email'],
     packages=[package_name],
     include_package_data=True,
     license=package['license'],
     description=package['description'] if 'description' in package else package_name,
     install_requires=[
-        'colour==0.1.5'
+        'dash',
+        'dash-html-components',
+        'dash_renderer',
     ]
 )

src/demo/App.js

@@ -1,8 +1,75 @@
 /* eslint no-magic-numbers: 0 */
 import React from 'react';
 import Cytoscape from '../lib/components/Cytoscape.react.js';
-// Data from this example: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/tokyo-railways/tokyo-railways.js
-import data from './data.json'
+
+
+const elements = [
+    {
+        data: {id: 'one', label: 'Node 1'},
+        position: {x: 50, y: 50}
+    },
+    {
+        data: {id: 'two', label: 'Node 2'},
+        position: {x: 200, y: 200}
+    },
+    {
+        data: {id: 'three', label: 'Node 3'},
+        position: {x: 100, y: 150}
+    },
+    {
+        data: {id: 'four', label: 'Node 4'},
+        position: {x: 400, y: 50}
+    },
+    {
+        data: {id: 'five', label: 'Node 5'},
+        position: {x: 250, y: 100}
+    },
+    {
+        data: {id: 'six', label: 'Node 6', parent: 'three'},
+        position: {x: 150, y: 150}
+    },
+
+    {data: {
+        source: 'one',
+        target: 'two',
+        label: 'Edge from Node1 to Node2'
+    }},
+    {data: {
+        source: 'one',
+        target: 'five',
+        label: 'Edge from Node 1 to Node 5'
+    }},
+    {data: {
+        source: 'two',
+        target: 'four',
+        label: 'Edge from Node 2 to Node 4'
+    }},
+    {data: {
+        source: 'three',
+        target: 'five',
+        label: 'Edge from Node 3 to Node 5'
+    }},
+    {data: {
+        source: 'three',
+        target: 'two',
+        label: 'Edge from Node 3 to Node 2'
+    }},
+    {data: {
+        source: 'four',
+        target: 'four',
+        label: 'Edge from Node 4 to Node 4'
+    }},
+    {data: {
+        source: 'four',
+        target: 'six',
+        label: 'Edge from Node 4 to Node 6'
+    }},
+    {data: {
+        source: 'five',
+        target: 'one',
+        label: 'Edge from Node 5 to Node 1'
+    }},
+];
 
 class App extends React.Component {
     constructor(props) {
@@ -11,7 +78,7 @@ class App extends React.Component {
 
     render() {
         return <Cytoscape
-            elements={data.elements}
+            elements={elements}
         />
     }
 }