grasia-dash-components v0.3.5
grasia-dash-components
Dash UI component suite for GRASIA projects.
Use it
If you just want to use any of the components offered by this suite, add it to your system with pip install grasia-dash-components
and import it with import grasia_dash_components
.
You can see a very basic example of its usage in usage.py
or in https://github.com/Akronix/test_grasia_dash_components.
Hack it
If you want to hack with the code, keep reading.
# Install dependencies
$ npm install
# Watch source for changes and build to `lib/`
$ npm start
Go to this link to learn more about Dash plugins.
Play with the components
If you just want to play around with the available components that grasia-dash-components offers you, just follow the instructions below:
# clone git repo and enter there
$ git clone https://github.com/Grasia/grasia-dash-components && cd grasia-dash-components
# create a Python3 new virtual environment
$ virtualenv -p python3 venv/
# activate it
$ source venv/bin/activate
# and install dependencies
$ pip install -r requirements.txt
# generate metadata.json of the Components
$ npm run prepublish
# launch the playground
$ python usage.py
Feel free to modify usage.py source file and play with the different options of the components.
React demo server
For easy developing and testing of the react components, you can start up a demo development server:
$ npm 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]] -> grasia-dash-components -> 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 grasia-dash-components to your layout, then run it: $ python my_dash_layout.py
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