dash-callback-chain

dash-callback-chain

Dash component to visualize callback chains

Dash

Go to this link to learn about Dash.

Getting started

# Install dependencies
$ npm install

# Watch source for changes and build to `lib/`
$ npm start

Development

Demo server

You can start up a demo development server to see a demo of the rendered components:

$ builder run demo
$ open http://localhost:9000

You have to maintain the list of components in demo/Demo.react.js.

Code quality and tests

To run lint and unit tests:

$ npm test

To run unit tests and watch for changes:

$ npm run test-watch

To debug unit tests in a browser (Chrome):

$ npm run test-debug

• Wait until Chrome launches.
• Click the "DEBUG" button in the top right corner.
• Open up Chrome Devtools (Cmd+opt+i).
• Click the "Sources" tab.
• Find source files

• Navigate to webpack:// -> . -> spec/components to find your test source files.
• Navigate to webpack:// -> [your/repo/path]] -> dash-callback-chain -> src to find your component source files.

• Now you can set breakpoints and reload the page to hit them.
• The test output is available in the "Console" tab, or in any tab by pressing "Esc".

To run a specific test

In your test, append .only to a describe or it statement:

describe.only('Foo component', () => {
    // ...
})l

Testing your components in Dash

• Build development bundle to lib/ and watch for changes

   # Once this is started, you can just leave it running.
   $ npm start
  

• Install module locally (after every change)

   # Generate metadata, and build the JavaScript bundle
   $ npm run install-local
  
   # Now you're done. For subsequent changes, if you've got `npm start`
   # running in a separate process, it's enough to just do:
   $ python setup.py install
  

• Run the dash layout you want to test

   # Import dash-callback-chain to your layout, then run it:
   $ python my_dash_layout.py
  

TODO: There is a workflow that links your module into site-packages which would make it unnecessary to re-run 2. on every change: python setup.py develop. Unfortunately, this doesn't seem to work with resources defined in package_data.

See https://github.com/plotly/dash-components-archetype/issues/20

Installing python package locally

Before publishing to PyPi, you can test installing the module locally:

# Install in `site-packages` on your machine
$ npm run install-local

Uninstalling python package locally

$ npm run uninstall-local

Publishing

For now, multiple steps are necessary for publishing to NPM and PyPi, respectively. TODO: #5 will roll up publishing steps into one workflow.

Ask @chriddyp to get NPM / PyPi package publishing accesss.

• Preparing to publish to NPM

   # Bump the package version
   $ npm version major|minor|patch
  
   # Push branch and tags to repo
   $ git push --follow-tags
  

• Preparing to publish to PyPi

   # Bump the PyPi package to the same version
   $ vi setup.py
  
   # Commit to github
   $ git add setup.py
   $ git commit -m "Bump pypi package version to vx.x.x"
  

• Publish to npm and PyPi

   $ npm run publish-all
  

Builder / Archetype

We use Builder to centrally manage build configuration, dependencies, and scripts.

To see all builder scripts available:

$ builder help

See the dash-components-archetype repo for more information.