Webviz core components
webviz_core_components is a Dash component library for use in webviz. A storybook showing all available components is available at https://equinor.github.io/webviz-core-components/storybook-static.
You can quickly get started with:
- Run
pip install webviz-core-components - Run
python usage.py - Visit http://localhost:8050 in your web browser
How to contribute
Install dependencies
If you want to build and develop yourself, you should fork + clone the repository, and then:
- Install npm packages.
npm ci --ignore-scripts --prefix ./react - Install python packages required to build components.
pip install .[dependencies] pip install dash[dev] - Install the python packages for testing.
pip install .[tests]
Write component code in react/src/lib/components/<ComponentName>/<ComponentName>.tsx
-
Have a look at other components to see how the directory and file structure looks like.
-
The demo app is in
react/src/demoand is where you will import an example of your component. To start the existing demo app, runnpm start --prefix ./react. -
To test your code in a Python environment:
- Build your code
npm run build --prefix ./react - Install the Python pacakge in development mode (if not already done and
assuming you are using a virtual environment):
pip install -e . - Create a new example in
examples/which uses your new component.
- Build your code
-
Write tests for your component.
- Python
- Python tests exist in
tests/. Take a look at them to see how to write tests using the Dash test framework. - Run the tests with
pytest tests.
- Python tests exist in
- JavaScript
- JavaScript tests exist in
react/tests. Take a look at them to see how to write tests using the Jest test framework.
- JavaScript tests exist in
- Python
-
Add custom styles to your component by putting your custom CSS files into your distribution folder (
webviz_core_components).- Make sure that they are referenced in
MANIFEST.inso that they get properly included when you're ready to publish your component. - Make sure the stylesheets are added to the
_css_distdict inwebviz_core_components/__init__.pyso dash will serve them automatically when the component suite is requested. - You can also include stylesheets directly in your component by adding the stylesheet to your component's directory and importing it via
import "./<ComponentName>.css. Make sure that the class names in your stylesheet are starting with your component's name and two underscores:.MyComponent__MyClassName.
- Make sure that they are referenced in
1 maintainer
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file webviz_core_components-0.9.2.tar.gz.
File metadata
- Download URL: webviz_core_components-0.9.2.tar.gz
- Upload date:
- Size: 1.3 MB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via:
twine/6.1.0 CPython/3.8.18
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
71df03dffd3b87c97d41d8e0409ae27b682b24f869160093e8613927d4c9a63d
|
|
| MD5 |
9fb3e86b972b3051bee01d552ed7e454
|
|
| BLAKE2b-256 |
7ace8fd21f608bdf7b3c2eddaa4527d388206c99439c2a419e06db079c44c235
|
File details
Details for the file webviz_core_components-0.9.2-py3-none-any.whl.
File metadata
- Download URL: webviz_core_components-0.9.2-py3-none-any.whl
- Upload date:
- Size: 740.5 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via:
twine/6.1.0 CPython/3.8.18
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
2f8969d65e75c25ec332bddf50b815a215e9a4281286bc1c0a48479bdfc4a140
|
|
| MD5 |
91a2955c5a399bcb43113fe417309db7
|
|
| BLAKE2b-256 |
3a55cb5242a389f7ac1e584808f2f194693d48ac81cd1d94cf36212bf6668f8b
|
