From 71bd494da2abfb6110252dfbce14f242c9c09e83 Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Fri, 25 Jan 2019 16:00:09 -0500 Subject: [PATCH 01/13] Remove Unused Files and Scripts extract-meta.js is not useful anymore since it was moved to the dash component CLI. config.py, runtime.txt, Procfile are only needed for DDS, which is being moved to another repo. review_checklist.md is redundant since all the information is already contained in CONTRIBUTING.md. --- Procfile | 1 - config.py | 60 ----------------------------- extract-meta | 77 ------------------------------------- extract-meta.js | 93 --------------------------------------------- review_checklist.md | 47 ----------------------- runtime.txt | 1 - 6 files changed, 279 deletions(-) delete mode 100644 Procfile delete mode 100644 config.py delete mode 100644 extract-meta delete mode 100644 extract-meta.js delete mode 100644 review_checklist.md delete mode 100644 runtime.txt diff --git a/Procfile b/Procfile deleted file mode 100644 index 929c5a3a..00000000 --- a/Procfile +++ /dev/null @@ -1 +0,0 @@ -web: gunicorn usage-advanced:server \ No newline at end of file diff --git a/config.py b/config.py deleted file mode 100644 index 45efdfaf..00000000 --- a/config.py +++ /dev/null @@ -1,60 +0,0 @@ -import os - -# Replace with the name of your Dash app -# This will end up being part of the URL of your deployed app, -# so it can't contain any spaces, capitalizations, or special characters -# -# This name MUST match the name that you specified in the -# Dash App Manager -DASH_APP_NAME = 'dash-cytoscape' - -# Set to 'private' if you want to add a login screen to your app -# You can choose who can view the app in your list of files -# at /organize. -# Set to 'public' if you want your app to be accessible to -# anyone who has access to your Plotly server on your network without -# a login screen. -# Set to 'secret' if you want to add a login screen, but allow it -# to be bypassed by using a secret "share_key" parameter. -DASH_APP_PRIVACY = 'public' - -# Dash On-Premise is configured with either "Path based routing" -# or "Domain based routing" -# Ask your server administrator which version was set up. -# If a separate subdomain was created, -# then set this to `False`. If it was not, set this to 'True'. -# Path based routing is the default option and most On-Premise -# users use this option. -PATH_BASED_ROUTING = True - -# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # -# This section only needs to be filled out # -# if DASH_APP_PRIVACY is set to 'private' or 'secret' # -# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # - -# Fill in with your Plotly On-Premise username -os.environ['PLOTLY_USERNAME'] = 'plotly-username' - -# Fill in with your Plotly On-Premise API key -# See /settings/api to generate a key -# If you have already created a key and saved it on your own machine -# (from the Plotly-Python library instructions at https://plot.ly/python/getting-started) -# then you can view that key in your ~/.plotly/.config file -# or inside a Python session with these commands: -# import plotly -# print(plotly.tools.get_config_file()) -os.environ['PLOTLY_API_KEY'] = 'your-plotly-api-key' - -# Fill in with your Plotly On-Premise domain -os.environ['PLOTLY_DOMAIN'] = 'https://your-plotly-domain.com' -os.environ['PLOTLY_API_DOMAIN'] = os.environ['PLOTLY_DOMAIN'] - -# Fill in with the domain of your Dash subdomain. -# This matches the domain of the Dash App Manager -PLOTLY_DASH_DOMAIN='https://your-dash-manager-plotly-domain.com' - -# Keep as True if your SSL certificates are valid. -# If you are just trialing Plotly On-Premise with self signed certificates, -# then you can set this to False. Note that self-signed certificates are not -# safe for production. -os.environ['PLOTLY_SSL_VERIFICATION'] = 'True' \ No newline at end of file diff --git a/extract-meta b/extract-meta deleted file mode 100644 index 33e1152d..00000000 --- a/extract-meta +++ /dev/null @@ -1,77 +0,0 @@ -#!/usr/bin/env node - -const fs = require('fs'); -const path = require('path'); -const reactDocs = require('react-docgen'); - -const componentPaths = process.argv.slice(2); -if (!componentPaths.length) { - help(); - process.exit(1); -} - -const metadata = Object.create(null); -componentPaths.forEach(componentPath => - collectMetadataRecursively(componentPath) -); -writeOut(metadata); - -function help() { - console.error('usage: '); - console.error( - 'extract-meta path/to/component(s) ' + - ' [path/to/more/component(s), ...] > metadata.json' - ); -} - -function writeError(msg, filePath) { - if (filePath) { - process.stderr.write(`Error with path ${filePath}`); - } - - process.stderr.write(msg + '\n'); - if (msg instanceof Error) { - process.stderr.write(msg.stack + '\n'); - } -} - -function parseFile(filepath) { - const urlpath = filepath.split(path.sep).join('/'); - let src; - - if (!['.jsx', '.js'].includes(path.extname(filepath))) { - return; - } - - try { - src = fs.readFileSync(filepath); - metadata[urlpath] = reactDocs.parse(src); - } catch (error) { - writeError(error, filepath); - } -} - -function collectMetadataRecursively(componentPath) { - if (fs.lstatSync(componentPath).isDirectory()) { - let dirs; - try { - dirs = fs.readdirSync(componentPath); - } catch (error) { - writeError(error, componentPath); - } - dirs.forEach(filename => { - const filepath = path.join(componentPath, filename); - if (fs.lstatSync(filepath).isDirectory()) { - collectMetadataRecursively(filepath); - } else { - parseFile(filepath); - } - }); - } else { - parseFile(componentPath); - } -} - -function writeOut(result) { - console.log(JSON.stringify(result, '\t', 2)); -} diff --git a/extract-meta.js b/extract-meta.js deleted file mode 100644 index 8394bcfe..00000000 --- a/extract-meta.js +++ /dev/null @@ -1,93 +0,0 @@ -#!/usr/bin/env node - -const fs = require('fs'); -const path = require('path'); -const reactDocs = require('react-docgen'); - -const componentPaths = process.argv.slice(2); -if (!componentPaths.length) { - help(); - process.exit(1); -} - -const metadata = Object.create(null); -componentPaths.forEach(componentPath => - collectMetadataRecursively(componentPath) -); -writeOut(metadata); - -function help() { - console.error('usage: '); - console.error( - 'extract-meta path/to/component(s) ' + - ' [path/to/more/component(s), ...] > metadata.json' - ); -} - -function writeError(msg, filePath) { - if (filePath) { - process.stderr.write(`Error with path ${filePath}`); - } - - process.stderr.write(msg + '\n'); - if (msg instanceof Error) { - process.stderr.write(msg.stack + '\n'); - } -} - -function checkWarn(name, value) { - if (value.length < 1) { - process.stderr.write(`\nDescription for ${name} is missing!\n`) - } -} - -function docstringWarning(doc) { - checkWarn(doc.displayName, doc.description); - - Object.entries(doc.props).forEach( - ([name, p]) => checkWarn(`${doc.displayName}.${name}`, p.description) - ); -} - - -function parseFile(filepath) { - const urlpath = filepath.split(path.sep).join('/'); - let src; - - if (!['.jsx', '.js'].includes(path.extname(filepath))) { - return; - } - - try { - src = fs.readFileSync(filepath); - const doc = metadata[urlpath] = reactDocs.parse(src); - docstringWarning(doc); - } catch (error) { - writeError(error, filepath); - } -} - -function collectMetadataRecursively(componentPath) { - if (fs.lstatSync(componentPath).isDirectory()) { - let dirs; - try { - dirs = fs.readdirSync(componentPath); - } catch (error) { - writeError(error, componentPath); - } - dirs.forEach(filename => { - const filepath = path.join(componentPath, filename); - if (fs.lstatSync(filepath).isDirectory()) { - collectMetadataRecursively(filepath); - } else { - parseFile(filepath); - } - }); - } else { - parseFile(componentPath); - } -} - -function writeOut(result) { - console.log(JSON.stringify(result, '\t', 2)); -} diff --git a/review_checklist.md b/review_checklist.md deleted file mode 100644 index 14597d80..00000000 --- a/review_checklist.md +++ /dev/null @@ -1,47 +0,0 @@ -# Code Review Checklist - -## Code quality & design - -- Is your code clear? If you had to go back to it in a month, would you be happy to? If someone else had to contribute to it, would they be able to? - - A few suggestions: - - - Make your variable names descriptive and use the same naming conventions throughout the code. - - - For more complex pieces of logic, consider putting a comment, and maybe an example. - - - In the comments, focus on describing _why_ the code does what it does, rather than describing _what_ it does. The reader can most likely read the code, but not necessarily understand why it was necessary. - - - Don't overdo it in the comments. The code should be clear enough to speak for itself. Stale comments that no longer reflect the intent of the code can hurt code comprehension. - -* Don't repeat yourself. Any time you see that the same piece of logic can be applied in multiple places, factor it out into a function, or variable, and reuse that code. -* Scan your code for expensive operations (large computations, DOM queries, React re-renders). Have you done your possible to limit their impact? If not, it is going to slow your app down. -* Can you think of cases where your current code will break? How are you handling errors? Should the user see them as notifications? Should your app try to auto-correct them for them? - -## Component API - -- Have you tested your component on the Python side by creating an app in `usage.py` ? - - Do all of your component's props work when set from the back-end? - - Should all of them be settable from the back-end or are some only relevant to user interactions in the front-end? - -- Have you provided some basic documentation about your component? The Dash community uses [react docstrings](https://github.com/plotly/dash-docs/blob/master/tutorial/plugins.py#L45) to provide basic information about dash components. Take a look at this [Checklist component example](https://github.com/plotly/dash-core-components/blob/master/src/components/Checklist.react.js) and others from the dash-core-components repository. - - At a minimum, you should describe what your component does, and describe its props and the features they enable. - - Be careful to use the correct formatting for your docstrings for them to be properly recognized. - -## Tests - -- The Dash team uses integration tests extensively, and we highly encourage you to write tests for the main functionality of your component. In the `tests` folder of the boilerplate, you can see a sample integration test. By launching it, you will run a sample Dash app in a browser. You can run the test with: - ``` - python -m tests.test_render - ``` - [Browse the Dash component code on GitHub for more examples of testing.](https://github.com/plotly/dash-core-components) - -## Ready to publish? Final scan - -- Take a last look at the external resources that your component is using. Are all the external resources used [referenced in `MANIFEST.in`](https://github.com/plotly/dash-docs/blob/0b2fd8f892db720a7f3dc1c404b4cff464b5f8d4/tutorial/plugins.py#L55)? - -- [You're ready to publish!](https://github.com/plotly/dash-component-boilerplate/blob/master/%7B%7Bcookiecutter.project_shortname%7D%7D/README.md#create-a-production-build-and-publish) diff --git a/runtime.txt b/runtime.txt deleted file mode 100644 index 3530c033..00000000 --- a/runtime.txt +++ /dev/null @@ -1 +0,0 @@ -python-3.6.6 \ No newline at end of file From 3c4869e869dc3139b768f16b2ef34568975379d5 Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Fri, 25 Jan 2019 16:00:32 -0500 Subject: [PATCH 02/13] Update Readme and Contributing guidelines --- CONTRIBUTING.md | 10 +++++----- README.md | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 021ff9fb..c3c1ea7f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -39,27 +39,27 @@ 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-x.x.x.tar.gz ../temp cp usage.py ../temp cd ../temp source venv/bin/activate -pip install dash-cytoscape-0.0.1.tar.gz +pip install dash_cytoscape-x.x.x.tar.gz python usage.py ``` 7. If the examples work, then publish: ``` npm publish -twine upload dist/dash-cytoscape-0.0.1.tar.gz +twine upload dist/dash_cytoscape-x.x.x.tar.gz ``` 8. Tag your release with git: ``` -git tag -a 'v0.0.1' -m 'v0.0.1' +git tag -a 'vx.x.x' -m 'vx.x.x' git push origin master --follow-tags ``` 9. Verify that the publish worked by installing it: ``` cd ../temp -pip install dash-cytoscape==0.0.1 +pip install dash-cytoscape==x.x.x python usage.py ``` diff --git a/README.md b/README.md index 4bd41be8..56342222 100644 --- a/README.md +++ b/README.md @@ -3,10 +3,10 @@ A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around [Cytoscape.js](http://js.cytoscape.org/) Interacting with the stylesheet: -![usage-stylesheet-demo](demos/images/usage-stylesheet-demo.gif) +![usage-stylesheet-demo](https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/images/usage-stylesheet-demo.gif) Interacting with the elements: -![usage-elements-demo](demos/images/usage-elements-demo.gif) +![usage-elements-demo](https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/images/usage-elements-demo.gif) ## Getting Started From 6de396298fcb364fabe01c327bb51024f172f028 Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Fri, 25 Jan 2019 16:01:01 -0500 Subject: [PATCH 03/13] Fix callback conditionals in phylogeny demo --- demos/usage-phylogeny.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/demos/usage-phylogeny.py b/demos/usage-phylogeny.py index 8e07eb14..e57874cd 100644 --- a/demos/usage-phylogeny.py +++ b/demos/usage-phylogeny.py @@ -4,7 +4,6 @@ import dash from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc try: from Bio import Phylo @@ -183,7 +182,7 @@ def add_to_elements(clade, clade_id): @app.callback(Output('cytoscape', 'stylesheet'), [Input('cytoscape', 'mouseoverEdgeData')]) def color_children(edgeData): - if not edgeData: + if edgeData is None: return stylesheet if 's' in edgeData['source']: From 8ca2ff8e4f547b1a5c44a856d96f00e1480fea35 Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Fri, 25 Jan 2019 16:01:53 -0500 Subject: [PATCH 04/13] Add venv to npmignore This avoids venvs to be included in the npm distribution package, which makes us a large amount of space and many unecessary files being distributed. --- .npmignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.npmignore b/.npmignore index 69227a14..dce48325 100644 --- a/.npmignore +++ b/.npmignore @@ -20,6 +20,7 @@ public src scripts config +venv .travis.yml CHANGELOG.md README.md From ab56f29bf5e694027331c28271e5827d0382f952 Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Fri, 25 Jan 2019 17:00:09 -0500 Subject: [PATCH 05/13] Substantially Update the Contributing Guidelines --- CONTRIBUTING.md | 52 +++++++++++++++++++++++++++++++++++-------------- 1 file changed, 37 insertions(+), 15 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c3c1ea7f..536405e7 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,17 +8,31 @@ Refer to the [readme](README.md) for installation and development instructions. Please lint any additions to Python code with `pylint` and `flake8`. -## Pull Request Guidelines +## Code quality & design + +- Is your code clear? If you had to go back to it in a month, would you be happy to? If someone else had to contribute to it, would they be able to? + + A few suggestions: + + - Make your variable names descriptive and use the same naming conventions throughout the code. + + - For more complex pieces of logic, consider putting a comment, and maybe an example. + + - In the comments, focus on describing _why_ the code does what it does, rather than describing _what_ it does. The reader can most likely read the code, but not necessarily understand why it was necessary. + + - Don't overdo it in the comments. The code should be clear enough to speak for itself. Stale comments that no longer reflect the intent of the code can hurt code comprehension. + +* Don't repeat yourself. Any time you see that the same piece of logic can be applied in multiple places, factor it out into a function, or variable, and reuse that code. +* Scan your code for expensive operations (large computations, DOM queries, React re-renders). Have you done your possible to limit their impact? If not, it is going to slow your app down. +* Can you think of cases where your current code will break? How are you handling errors? Should the user see them as notifications? Should your app try to auto-correct them for them? -Use the [GitHub flow][] when proposing contributions to this repository (i.e. create a feature branch and submit a PR against the master branch). ## Running the Tests _To be added_ -## Making a contribution -_For larger features, your contribution will have a higher likelihood of getting merged if you create an issue to discuss the changes that you'd like to make before you create a pull request._ +## Publishing Create a pull request and tag the Plotly team (`@plotly/dash_bio`) and tag / request review from [@xhlulu](https://github.com/xhlulu). @@ -64,16 +78,24 @@ python usage.py ``` -Make a post in the [Dash Community Forum][] - * Title it `":mega: Announcement! New - Feedback Welcome"` - * In the description, link to the PR and any relevant issue(s) - * Pin the topic so that it appears at the top of the forum for two weeks +Make a post in the [Dash Community Forum](https://community.plot.ly/c/dash) +* Title it `":mega: Announcement! New - Feedback Welcome"` +* In the description, link to the PR and any relevant issue(s) +* Pin the topic so that it appears at the top of the forum for two weeks ## [Checklists](http://rs.io/unreasonable-effectiveness-of-checklists/) **Beginner tip:** _Copy and paste this section as a comment in your PR, then check off the boxes as you go!_ ### Pre-Merge checklist -- [ ] If changes are significant, a release candidate has been created and posted to Slack, the Plotly forums, and at the very top of the pull request. -- [ ] Two people have :dancer:'d the pull request. You can be one of these people if you are a Dash core contributor. +- [ ] The project was correctly built with `npm run build:all`. +- [ ] If there was any conflict, it was solved correctly +- [ ] All changes were documented in CHANGELOG.md. +- [ ] All tests on CircleCI have passed. +- [ ] All Percy visual changes have been approved. +- [ ] Two people have :dancer:'d the pull request. You can be one of these people if you are a Dash Cytoscape core contributor. + +### Merge step +1. Make sure to *Squash and Merge* your contribution if you have created multiple commits to change a specific feature. +2. Make sure to *Rebase and Merge* if you added many different features, and need to contribute multiple different commits. ### Post-Merge checklist - [ ] You have tagged the release using `git tag v` _(for the contributor merging the PR)_. @@ -81,24 +103,24 @@ Make a post in the [Dash Community Forum][] - [ ] You have deleted the branch. ### Pre-Release checklist -- [ ] Everything in the Pre-Merge checklist is completed. (Except the last two if this is a release candidate). +- [ ] Everything in the Pre-Merge checklist is completed. - [ ] `git remote show origin` shows you are in the correct repository. - [ ] `git branch` shows that you are on the expected branch. - [ ] `git status` shows that there are no unexpected changes. -- [ ] `dash/version.py` is at the correct version. +- [ ] Both `package.json` and `dash_cytoscape/package.json` versions have been correctly updated. ### Release Step -- `python setup.py sdist` to build. -- `twine upload dist/` to upload to PyPi. +Complete the "Publishing" section. ### Post-Release checklist +- [ ] Step 1 and 2 of Post-merge checklist are completed. - [ ] You have closed all issues that this pull request solves, and commented the new version number users should install. - [ ] If significant enough, you have created an issue about documenting the new feature or change and you have added it to the [Documentation] project. - [ ] You have created a pull request in [Dash Docs] with the new release of your feature by editing that project's [`requirements.txt` file](https://github.com/plotly/dash-docs/blob/master/requirements.txt) and you have assigned `@chriddyp` to review. ## Financial Contributions -Dash, and many of Plotly's open source products, have been funded through direct sponsorship by companies. [Get in touch] about funding feature additions, consulting, or custom app development. +Dash, and many of Plotly's open source products, have been funded through direct sponsorship by companies. [Get in touch](https://plot.ly/products/on-premise/) about funding feature additions, consulting, or custom app development. [Dash Core Components]: https://dash.plot.ly/dash-core-components [Dash HTML Components]: https://github.com/plotly/dash-html-components From 1ea1c58d05a494f43fabac07bf2b9e2f4c520a12 Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Fri, 25 Jan 2019 17:29:42 -0500 Subject: [PATCH 06/13] Add Issue and PR templates for Github --- .github/ISSUE_TEMPLATE.md | 73 ++++++++++++++++++++++++++++++++ .github/PULL_REQUEST_TEMPLATE.md | 45 ++++++++++++++++++++ README.md | 3 ++ 3 files changed, 121 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE.md create mode 100644 .github/PULL_REQUEST_TEMPLATE.md diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..8d6aae61 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,73 @@ + + +#### Description + +#### Steps/Code to Reproduce + + +#### Expected Results + + +#### Actual Results + + +#### Versions + + + + \ No newline at end of file diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 00000000..3f6446e5 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,45 @@ + + + +## About + + + +## Description of changes + + +## Pre-Merge checklist +- [ ] The project was correctly built with `npm run build:all`. +- [ ] If there was any conflict, it was solved correctly +- [ ] All changes were documented in CHANGELOG.md. +- [ ] All tests on CircleCI have passed. +- [ ] All Percy visual changes have been approved. +- [ ] Two people have :dancer:'d the pull request. You can be one of these people if you are a Dash Cytoscape core contributor. + + +## Reference Issues + + +Closes #[issue number] + + +## Other comments \ No newline at end of file diff --git a/README.md b/README.md index 56342222..31adfadd 100644 --- a/README.md +++ b/README.md @@ -115,3 +115,6 @@ See https://plot.ly/dash/support for ways to get in touch. ## Acknowledgments Huge thanks to the Cytoscape Consortium and the Cytoscape.js team for their contribution in making such a complete API for creating interactive networks. This library would not have been possible without their massive work! + +The Pull Request and Issue Templates were inspired from the +[]scikit-learn project](https://github.com/scikit-learn/scikit-learn). From 5a0fdd418ac24377d0bb8b06e25bac6695ef8b28 Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Sun, 27 Jan 2019 11:21:13 -0500 Subject: [PATCH 07/13] Update import statement `import dash_cytoscape` -> `import dash_cytscape as cyto` --- .github/ISSUE_TEMPLATE.md | 4 ++-- README.md | 4 ++-- demos/editor/layout.py | 4 ++-- demos/usage-animated-bfs.py | 4 ++-- demos/usage-breadthfirst-layout.py | 4 ++-- demos/usage-circle-layout.py | 4 ++-- demos/usage-compound-nodes.py | 4 ++-- demos/usage-concentric-layout.py | 4 ++-- demos/usage-cose-bilkent-layout.py | 4 ++-- demos/usage-cose-layout.py | 4 ++-- demos/usage-edge-types.py | 4 ++-- demos/usage-grid-layout.py | 4 ++-- demos/usage-initialisation.py | 4 ++-- demos/usage-labels.py | 4 ++-- demos/usage-linkout-example.py | 4 ++-- demos/usage-multiple-instances.py | 6 +++--- demos/usage-phylogeny.py | 4 ++-- demos/usage-pie-style.py | 4 ++-- demos/usage-visual-style.py | 4 ++-- usage-elements.py | 7 +++---- usage-events.py | 10 ++++------ usage-stylesheet.py | 10 ++++------ usage.py | 7 +++---- 23 files changed, 53 insertions(+), 59 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 8d6aae61..93147aca 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -22,7 +22,7 @@ it's usually helpful to mention the browser and version that you are using. Example: ```python import dash -import dash_cytoscape +import dash_cytoscape as cyto import dash_html_components as html app = dash.Dash(__name__) @@ -30,7 +30,7 @@ app.scripts.config.serve_locally = True app.css.config.serve_locally = True app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=[ {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 50, 'y': 50}}, diff --git a/README.md b/README.md index 31adfadd..314f79f0 100644 --- a/README.md +++ b/README.md @@ -35,12 +35,12 @@ Create the following example inside an `app.py` file: ```python import dash -import dash_cytoscape +import dash_cytoscape as cyto import dash_html_components as html app = dash.Dash(__name__) app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=[ {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 50, 'y': 50}}, diff --git a/demos/editor/layout.py b/demos/editor/layout.py index 85b7b3d3..e440bf8d 100644 --- a/demos/editor/layout.py +++ b/demos/editor/layout.py @@ -1,7 +1,7 @@ import dash_core_components as dcc import dash_html_components as html -import dash_cytoscape +import dash_cytoscape as cyto from demos import dash_reusable_components as drc from .constants import LABEL_ELEMENT_TYPES, \ LABEL_ELEMENT_TYPES_ALL, \ @@ -871,7 +871,7 @@ layout = html.Div([ html.Div(className='row', style={'overflow': 'visible'}, children=[ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', className='eight columns', layout={'name': 'preset'}, diff --git a/demos/usage-animated-bfs.py b/demos/usage-animated-bfs.py index 6d5c5200..a1046e19 100644 --- a/demos/usage-animated-bfs.py +++ b/demos/usage-animated-bfs.py @@ -4,7 +4,7 @@ Note: Animation Not Implemented yet, please refer to code. """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -34,7 +34,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, layout={ diff --git a/demos/usage-breadthfirst-layout.py b/demos/usage-breadthfirst-layout.py index 1cacaf25..373a63f8 100644 --- a/demos/usage-breadthfirst-layout.py +++ b/demos/usage-breadthfirst-layout.py @@ -5,7 +5,7 @@ Note: Click Animation is not implemented. """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -99,7 +99,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, stylesheet=stylesheet, diff --git a/demos/usage-circle-layout.py b/demos/usage-circle-layout.py index 9e162f47..419e47a1 100644 --- a/demos/usage-circle-layout.py +++ b/demos/usage-circle-layout.py @@ -2,7 +2,7 @@ Original Demo: http://js.cytoscape.org/demos/circle-layout/ Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/circle-layout """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -21,7 +21,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, layout={'name': 'circle'}, diff --git a/demos/usage-compound-nodes.py b/demos/usage-compound-nodes.py index bc9a682b..dcae4473 100644 --- a/demos/usage-compound-nodes.py +++ b/demos/usage-compound-nodes.py @@ -4,7 +4,7 @@ Note: The Dash version is also uncentered. Otherwise it works. """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -30,7 +30,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, boxSelectionEnabled=False, diff --git a/demos/usage-concentric-layout.py b/demos/usage-concentric-layout.py index 7cc9cc0f..80e777b0 100644 --- a/demos/usage-concentric-layout.py +++ b/demos/usage-concentric-layout.py @@ -16,7 +16,7 @@ ``` """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -35,7 +35,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, layout={ diff --git a/demos/usage-cose-bilkent-layout.py b/demos/usage-cose-bilkent-layout.py index 8a6375ca..966d3cd3 100644 --- a/demos/usage-cose-bilkent-layout.py +++ b/demos/usage-cose-bilkent-layout.py @@ -5,7 +5,7 @@ Note: This implementation DOES NOT work yet, since cose-bilkent hasn't been implemented yet """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -28,7 +28,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, layout={ diff --git a/demos/usage-cose-layout.py b/demos/usage-cose-layout.py index 0e192d29..72196c66 100644 --- a/demos/usage-cose-layout.py +++ b/demos/usage-cose-layout.py @@ -5,7 +5,7 @@ Note: This implementation looks different from the original implementation, although the input paramters are exactly the same. """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -27,7 +27,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, stylesheet=stylesheet, diff --git a/demos/usage-edge-types.py b/demos/usage-edge-types.py index f66306c6..65735d79 100644 --- a/demos/usage-edge-types.py +++ b/demos/usage-edge-types.py @@ -19,7 +19,7 @@ }, ``` """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -41,7 +41,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', boxSelectionEnabled=False, autounselectify=True, diff --git a/demos/usage-grid-layout.py b/demos/usage-grid-layout.py index b6dc8c30..74dc9e47 100644 --- a/demos/usage-grid-layout.py +++ b/demos/usage-grid-layout.py @@ -2,7 +2,7 @@ Original Demo: http://js.cytoscape.org/demos/grid-layout/ Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/grid-layout """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -21,7 +21,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, layout={'name': 'grid'}, diff --git a/demos/usage-initialisation.py b/demos/usage-initialisation.py index 38575984..967b6227 100644 --- a/demos/usage-initialisation.py +++ b/demos/usage-initialisation.py @@ -20,7 +20,7 @@ }); ``` """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -51,7 +51,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', boxSelectionEnabled=False, autounselectify=True, diff --git a/demos/usage-labels.py b/demos/usage-labels.py index 35259293..e1d2960d 100644 --- a/demos/usage-labels.py +++ b/demos/usage-labels.py @@ -19,7 +19,7 @@ }, ``` """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -60,7 +60,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', boxSelectionEnabled=False, autounselectify=True, diff --git a/demos/usage-linkout-example.py b/demos/usage-linkout-example.py index 66b4ddc9..763a6026 100644 --- a/demos/usage-linkout-example.py +++ b/demos/usage-linkout-example.py @@ -5,7 +5,7 @@ Note: Href Links do not work """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -28,7 +28,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, boxSelectionEnabled=False, diff --git a/demos/usage-multiple-instances.py b/demos/usage-multiple-instances.py index 791c3311..402fdcaf 100644 --- a/demos/usage-multiple-instances.py +++ b/demos/usage-multiple-instances.py @@ -2,7 +2,7 @@ Original Demo: http://js.cytoscape.org/demos/multiple-instances/ Original Code: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/multiple-instances """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -32,7 +32,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape-top', elements=elements, layout={ @@ -82,7 +82,7 @@ } ), - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape-bottom', elements=elements, layout={ diff --git a/demos/usage-phylogeny.py b/demos/usage-phylogeny.py index e57874cd..51df6c09 100644 --- a/demos/usage-phylogeny.py +++ b/demos/usage-phylogeny.py @@ -1,6 +1,6 @@ import math -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -166,7 +166,7 @@ def add_to_elements(clade, clade_id): app.css.config.serve_locally = True app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, stylesheet=stylesheet, diff --git a/demos/usage-pie-style.py b/demos/usage-pie-style.py index 60e6f02d..4c913615 100644 --- a/demos/usage-pie-style.py +++ b/demos/usage-pie-style.py @@ -2,7 +2,7 @@ Original Demo: http://js.cytoscape.org/demos/pie-style/ Original Code: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/pie-style """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -32,7 +32,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, layout={ diff --git a/demos/usage-visual-style.py b/demos/usage-visual-style.py index b31014b9..d55da170 100644 --- a/demos/usage-visual-style.py +++ b/demos/usage-visual-style.py @@ -2,7 +2,7 @@ Original Demo: http://js.cytoscape.org/demos/visual-style/ Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/visual-style """ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html @@ -50,7 +50,7 @@ # App app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=elements, layout={ diff --git a/usage-elements.py b/usage-elements.py index 4e2503ad..d8134c9e 100644 --- a/usage-elements.py +++ b/usage-elements.py @@ -5,13 +5,12 @@ import dash_html_components as html from dash.dependencies import Input, Output, State -import dash_cytoscape +import dash_cytoscape as cyto from demos import dash_reusable_components as drc app = dash.Dash(__name__) +server = app.server -app.scripts.config.serve_locally = True -app.css.config.serve_locally = True # ###################### DATA PREPROCESSING ###################### # Load data @@ -157,7 +156,7 @@ app.layout = html.Div([ html.Div(className='eight columns', children=[ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=default_elements, stylesheet=default_stylesheet, diff --git a/usage-events.py b/usage-events.py index 873f1a70..84605779 100644 --- a/usage-events.py +++ b/usage-events.py @@ -1,14 +1,12 @@ -import dash_cytoscape +import dash_cytoscape as cyto import dash from dash.dependencies import Input, Output import dash_html_components as html import dash_core_components as dcc import json -app = dash.Dash('') - -app.scripts.config.serve_locally = True -app.css.config.serve_locally = True +app = dash.Dash(__name__) +server = app.server # Dictionary declaration elements_dict = [ @@ -121,7 +119,7 @@ app.layout = html.Div([ html.Div(className='eight columns', children=[ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=basic_elements, layout={ diff --git a/usage-stylesheet.py b/usage-stylesheet.py index 71a23128..cd1152d0 100644 --- a/usage-stylesheet.py +++ b/usage-stylesheet.py @@ -5,13 +5,11 @@ import dash_html_components as html from dash.dependencies import Input, Output -import dash_cytoscape +import dash_cytoscape as cyto from demos import dash_reusable_components as drc -app = dash.Dash('') - -app.scripts.config.serve_locally = True -app.css.config.serve_locally = True +app = dash.Dash(__name__) +server = app.server # ###################### DATA PREPROCESSING ###################### # Load data @@ -71,7 +69,7 @@ app.layout = html.Div([ html.Div(className='eight columns', children=[ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=cy_edges + cy_nodes, style={ diff --git a/usage.py b/usage.py index d6c6d5cb..118e2ab2 100644 --- a/usage.py +++ b/usage.py @@ -1,13 +1,12 @@ -import dash_cytoscape +import dash_cytoscape as cyto import dash import dash_html_components as html app = dash.Dash(__name__) -app.scripts.config.serve_locally = True -app.css.config.serve_locally = True +server = app.server app.layout = html.Div([ - dash_cytoscape.Cytoscape( + cyto.Cytoscape( id='cytoscape', elements=[ {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 50, 'y': 50}}, From f88ce6a17aa39e0a7f3ceab2f89319750903286c Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Sun, 27 Jan 2019 11:27:37 -0500 Subject: [PATCH 08/13] Optimize Imports for demos --- demos/usage-animated-bfs.py | 6 ++---- demos/usage-breadthfirst-layout.py | 6 ++---- demos/usage-circle-layout.py | 8 ++++---- demos/usage-compound-nodes.py | 6 ++---- demos/usage-concentric-layout.py | 8 ++++---- demos/usage-cose-bilkent-layout.py | 8 ++++---- demos/usage-cose-layout.py | 8 ++++---- demos/usage-edge-types.py | 8 ++++---- demos/usage-grid-layout.py | 8 ++++---- demos/usage-initialisation.py | 6 ++---- demos/usage-labels.py | 8 ++++---- demos/usage-linkout-example.py | 6 ++---- demos/usage-multiple-instances.py | 6 ++---- demos/usage-phylogeny.py | 5 +++-- demos/usage-pie-style.py | 6 ++---- demos/usage-visual-style.py | 6 ++---- usage-advanced.py | 2 +- usage-events.py | 10 ++++++---- usage.py | 2 +- 19 files changed, 55 insertions(+), 68 deletions(-) diff --git a/demos/usage-animated-bfs.py b/demos/usage-animated-bfs.py index a1046e19..fda0c037 100644 --- a/demos/usage-animated-bfs.py +++ b/demos/usage-animated-bfs.py @@ -4,12 +4,10 @@ Note: Animation Not Implemented yet, please refer to code. """ -import dash_cytoscape as cyto import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-breadthfirst-layout.py b/demos/usage-breadthfirst-layout.py index 373a63f8..9c4cf4e3 100644 --- a/demos/usage-breadthfirst-layout.py +++ b/demos/usage-breadthfirst-layout.py @@ -5,12 +5,10 @@ Note: Click Animation is not implemented. """ -import dash_cytoscape as cyto import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-circle-layout.py b/demos/usage-circle-layout.py index 419e47a1..501f1523 100644 --- a/demos/usage-circle-layout.py +++ b/demos/usage-circle-layout.py @@ -2,12 +2,12 @@ Original Demo: http://js.cytoscape.org/demos/circle-layout/ Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/circle-layout """ -import dash_cytoscape as cyto +import json + import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-compound-nodes.py b/demos/usage-compound-nodes.py index dcae4473..87a8694a 100644 --- a/demos/usage-compound-nodes.py +++ b/demos/usage-compound-nodes.py @@ -4,12 +4,10 @@ Note: The Dash version is also uncentered. Otherwise it works. """ -import dash_cytoscape as cyto import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-concentric-layout.py b/demos/usage-concentric-layout.py index 80e777b0..82181a4d 100644 --- a/demos/usage-concentric-layout.py +++ b/demos/usage-concentric-layout.py @@ -16,12 +16,12 @@ ``` """ -import dash_cytoscape as cyto +import json + import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-cose-bilkent-layout.py b/demos/usage-cose-bilkent-layout.py index 966d3cd3..40934819 100644 --- a/demos/usage-cose-bilkent-layout.py +++ b/demos/usage-cose-bilkent-layout.py @@ -5,12 +5,12 @@ Note: This implementation DOES NOT work yet, since cose-bilkent hasn't been implemented yet """ -import dash_cytoscape as cyto +import json + import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-cose-layout.py b/demos/usage-cose-layout.py index 72196c66..175afa65 100644 --- a/demos/usage-cose-layout.py +++ b/demos/usage-cose-layout.py @@ -5,12 +5,12 @@ Note: This implementation looks different from the original implementation, although the input paramters are exactly the same. """ -import dash_cytoscape as cyto +import json + import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-edge-types.py b/demos/usage-edge-types.py index 65735d79..9737c781 100644 --- a/demos/usage-edge-types.py +++ b/demos/usage-edge-types.py @@ -19,12 +19,12 @@ }, ``` """ -import dash_cytoscape as cyto +import json + import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-grid-layout.py b/demos/usage-grid-layout.py index 74dc9e47..5e37bfcd 100644 --- a/demos/usage-grid-layout.py +++ b/demos/usage-grid-layout.py @@ -2,12 +2,12 @@ Original Demo: http://js.cytoscape.org/demos/grid-layout/ Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/grid-layout """ -import dash_cytoscape as cyto +import json + import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-initialisation.py b/demos/usage-initialisation.py index 967b6227..f3cec4ed 100644 --- a/demos/usage-initialisation.py +++ b/demos/usage-initialisation.py @@ -20,12 +20,10 @@ }); ``` """ -import dash_cytoscape as cyto import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-labels.py b/demos/usage-labels.py index e1d2960d..33d7014f 100644 --- a/demos/usage-labels.py +++ b/demos/usage-labels.py @@ -19,12 +19,12 @@ }, ``` """ -import dash_cytoscape as cyto +import json + import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-linkout-example.py b/demos/usage-linkout-example.py index 763a6026..1f2e0af8 100644 --- a/demos/usage-linkout-example.py +++ b/demos/usage-linkout-example.py @@ -5,12 +5,10 @@ Note: Href Links do not work """ -import dash_cytoscape as cyto import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-multiple-instances.py b/demos/usage-multiple-instances.py index 402fdcaf..7766fa5e 100644 --- a/demos/usage-multiple-instances.py +++ b/demos/usage-multiple-instances.py @@ -2,12 +2,10 @@ Original Demo: http://js.cytoscape.org/demos/multiple-instances/ Original Code: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/multiple-instances """ -import dash_cytoscape as cyto import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-phylogeny.py b/demos/usage-phylogeny.py index 51df6c09..997abe90 100644 --- a/demos/usage-phylogeny.py +++ b/demos/usage-phylogeny.py @@ -1,9 +1,10 @@ import math -import dash_cytoscape as cyto import dash -from dash.dependencies import Input, Output import dash_html_components as html +from dash.dependencies import Input, Output + +import dash_cytoscape as cyto try: from Bio import Phylo diff --git a/demos/usage-pie-style.py b/demos/usage-pie-style.py index 4c913615..4f1aa3f3 100644 --- a/demos/usage-pie-style.py +++ b/demos/usage-pie-style.py @@ -2,12 +2,10 @@ Original Demo: http://js.cytoscape.org/demos/pie-style/ Original Code: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/pie-style """ -import dash_cytoscape as cyto import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/demos/usage-visual-style.py b/demos/usage-visual-style.py index d55da170..389f82c4 100644 --- a/demos/usage-visual-style.py +++ b/demos/usage-visual-style.py @@ -2,12 +2,10 @@ Original Demo: http://js.cytoscape.org/demos/visual-style/ Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/visual-style """ -import dash_cytoscape as cyto import dash -from dash.dependencies import Input, Output import dash_html_components as html -import dash_core_components as dcc -import json + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/usage-advanced.py b/usage-advanced.py index 4d249b40..3d4c3fbb 100644 --- a/usage-advanced.py +++ b/usage-advanced.py @@ -1,7 +1,7 @@ import dash -from demos.editor.layout import layout as cytoscape_layout from demos.editor.callbacks import assign_callbacks +from demos.editor.layout import layout as cytoscape_layout app = dash.Dash(__name__) server = app.server diff --git a/usage-events.py b/usage-events.py index 84605779..0e0af921 100644 --- a/usage-events.py +++ b/usage-events.py @@ -1,9 +1,11 @@ -import dash_cytoscape as cyto +import json + import dash -from dash.dependencies import Input, Output -import dash_html_components as html import dash_core_components as dcc -import json +import dash_html_components as html +from dash.dependencies import Input, Output + +import dash_cytoscape as cyto app = dash.Dash(__name__) server = app.server diff --git a/usage.py b/usage.py index 118e2ab2..4bdd7acf 100644 --- a/usage.py +++ b/usage.py @@ -1,5 +1,5 @@ -import dash_cytoscape as cyto import dash +import dash_cytoscape as cyto import dash_html_components as html app = dash.Dash(__name__) From 969e302f496933eb54a3a2d22c8c61b79ea44d53 Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Sun, 27 Jan 2019 12:34:36 -0500 Subject: [PATCH 09/13] Remove Unused index.html file --- index.html | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 index.html diff --git a/index.html b/index.html deleted file mode 100644 index 38eac7f8..00000000 --- a/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - dash-cytoscape - - -
- - - From ad001246e80a8791eb994110a19c61906117f5da Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Fri, 1 Feb 2019 15:25:51 -0500 Subject: [PATCH 10/13] Add usage examples for colored social networks --- demos/usage-concentric-social-network.py | 73 +++++++++++++++++++++++ demos/usage-grid-social-network.py | 76 ++++++++++++++++++++++++ 2 files changed, 149 insertions(+) create mode 100644 demos/usage-concentric-social-network.py create mode 100644 demos/usage-grid-social-network.py diff --git a/demos/usage-concentric-social-network.py b/demos/usage-concentric-social-network.py new file mode 100644 index 00000000..7a335f7a --- /dev/null +++ b/demos/usage-concentric-social-network.py @@ -0,0 +1,73 @@ +import requests + +import dash +import dash_html_components as html +import dash_cytoscape as cyto + +app = dash.Dash(__name__) + +# Request the data from the sample network +url = 'https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/data/sample_network.txt' +data = requests.get(url).text.split('\n') + + +nodes = set() +cy_edges, cy_nodes = [], [] +edges = data[:8000] +colors = ['red', 'blue', 'green', 'yellow', 'pink'] + +for edge in edges: + source, target = edge.split(" ") + color = colors[len(cy_nodes) % 5] + + if source not in nodes: # Add the source node + nodes.add(source) + cy_nodes.append({"data": {"id": source}, "classes": color}) + + if target not in nodes: # Add the target node + nodes.add(target) + cy_nodes.append({"data": {"id": target}, "classes": color}) + + cy_edges.append({ # Add the Edge Node + 'data': {'source': source, 'target': target}, + 'classes': color + }) + + +default_stylesheet = [ + { + "selector": 'node', + 'style': { + "opacity": 0.9, + 'height': 15, + 'width': 15, + 'background-color': '#222222' + } + }, + { + "selector": 'edge', + 'style': { + "curve-style": "bezier", + "opacity": 0.2, + 'width': 1 + } + }, + *[{ + "selector": '.' + color, + 'style': {'line-color': color} + } for color in colors] +] + +app.layout = html.Div([ + cyto.Cytoscape( + id='cytoscape', + elements=cy_edges + cy_nodes, + stylesheet=default_stylesheet, + layout={'name': 'concentric'}, + style={'height': '95vh', 'width': '100%'} + ) +]) + + +if __name__ == '__main__': + app.run_server(debug=True) \ No newline at end of file diff --git a/demos/usage-grid-social-network.py b/demos/usage-grid-social-network.py new file mode 100644 index 00000000..4dc12de5 --- /dev/null +++ b/demos/usage-grid-social-network.py @@ -0,0 +1,76 @@ +import requests + +import dash +import dash_html_components as html +import dash_cytoscape as cyto + +app = dash.Dash(__name__) + +# Request the data from the sample network +url = 'https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/data/sample_network.txt' +data = requests.get(url).text.split('\n') + + +nodes = set() +cy_edges, cy_nodes = [], [] +edges = data[:500] +colors = ['red', 'blue', 'green', 'yellow', 'pink'] + +for edge in edges: + source, target = edge.split(" ") + color = colors[len(cy_nodes) % 5] + + if source not in nodes: # Add the source node + nodes.add(source) + cy_nodes.append({"data": {"id": source}, "classes": color}) + + if target not in nodes: # Add the target node + nodes.add(target) + cy_nodes.append({"data": {"id": target}, "classes": color}) + + cy_edges.append({ # Add the Edge Node + 'data': {'source': source, 'target': target}, + 'classes': color + }) + + +default_stylesheet = [ + { + "selector": 'node', + 'style': { + "opacity": 0.9, + 'height': 15, + 'width': 15, + 'background-color': '#222222' + } + }, + { + "selector": 'edge', + 'style': { + "curve-style": "bezier", + "opacity": 0.3, + 'width': 2 + } + }, + *[{ + "selector": '.' + color, + 'style': {'line-color': color} + } for color in colors] +] + +app.layout = html.Div([ + cyto.Cytoscape( + id='cytoscape', + elements=cy_edges + cy_nodes, + stylesheet=default_stylesheet, + layout={ + 'name': 'grid', + 'rows': 15 + }, + style={'height': '95vh', 'width': '100%'} + ) +]) + + +if __name__ == '__main__': + app.run_server(debug=True) \ No newline at end of file From 7f5eb984de10bd99c5f957058bc416591bcb58ad Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Fri, 1 Feb 2019 18:12:33 -0500 Subject: [PATCH 11/13] Updated Changelog --- CHANGELOG.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ec069e2..ad222b79 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## Added +* Two new demos: `usage-grid-social-network.py` and `usage-concentric-social-network.py` +* Add Issue and PR templates for Github (located in `.github`) + +## Changed +* `usage-*.py` - Modified all the import statements from `import dash_cytoscape` to `import dash_cytoscape as cyto`. Also optimized imports. +* `usage-phylogeny.py` - Clear callback conditional statement +* `CONTRIBUTING.md` - changed `dash-cytoscape-0.0.1` to `dash-cytoscape-x.x.x`. Added a **Code quality & design** section. Changed the **Making a contribution** section and updated title to **Publishing**. Updated **Pre-Release checklist**. +* `npmignore` - Added `venv` to avoid venvs to be included in the npm distribution package, which makes us a large amount of space and many unnecessary files being distributed. + +## Removed +* `extract-meta.js`, `extract-meta` - they were moved to the dash component CLI, thus are not needed anymore +* `config.py`, `runtime.txt`, `Procfile`, `index.html` - only needed for hosting `usage-*.py` on DDS, they are now moved to `plotly/dash-cytoscape-demos`. +* `review_checklist.md` - redundant since all the information is already contained in CONTRIBUTING.md + ## [0.0.4] - 2018-01-19 ### Added From d42b023041b8a3dbac8857f84daa6f20e72bc605 Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Fri, 1 Feb 2019 18:26:58 -0500 Subject: [PATCH 12/13] Add server variable to usage-phylogeny.py --- demos/usage-phylogeny.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/demos/usage-phylogeny.py b/demos/usage-phylogeny.py index 997abe90..813364f9 100644 --- a/demos/usage-phylogeny.py +++ b/demos/usage-phylogeny.py @@ -162,9 +162,8 @@ def add_to_elements(clade, clade_id): # Start the app app = dash.Dash(__name__) +server = app.server -app.scripts.config.serve_locally = True -app.css.config.serve_locally = True app.layout = html.Div([ cyto.Cytoscape( From 7c41360e3c7593a399b2749dd08add2508441f9a Mon Sep 17 00:00:00 2001 From: Xing Han Lu Date: Tue, 5 Feb 2019 16:15:12 -0500 Subject: [PATCH 13/13] Add badges and move documentation section up to readme --- README.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 314f79f0..c2c9110c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Dash Cytoscape +# Dash Cytoscape [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/plotly/dash-cytoscape/blob/master/LICENSE) [![PyPi Version](https://img.shields.io/pypi/v/dash-cytoscape.svg)](https://pypi.org/project/dash-cytoscape/) -A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around [Cytoscape.js](http://js.cytoscape.org/) +A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around [Cytoscape.js](http://js.cytoscape.org/). Interacting with the stylesheet: ![usage-stylesheet-demo](https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/images/usage-stylesheet-demo.gif) @@ -55,6 +55,15 @@ if __name__ == '__main__': app.run_server(debug=True) ``` + +## Documentation + +View the [Dash Cytoscape User Guide](https://dash.plot.ly/cytoscape/) to get started now. You can also use the [component reference](https://dash.plot.ly/cytoscape/reference/) to find how to use a certain feature. + +To learn more about the core Dash components and how to use callbacks, view the [Dash documentation](https://dash.plot.ly/). + +For supplementary information about the underlying Javascript API, view the [Cytoscape.js documentation](http://js.cytoscape.org/). + ## Development Please follow the following steps for local testing: @@ -90,13 +99,6 @@ $ python setup.py install ``` -## Documentation - -For using Dash and for a Python-specific overview of Dash Cytoscape, view the [Dash User Guide](https://dash.plot.ly/). It's chock-full of examples, pro tips, and guiding principles. - -For supplementary information about the underlying javascript API, view the [Cytoscape.js documentation](http://js.cytoscape.org/). - - ## Notes