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:
pip install webviz-core-components
python usage.py
If you want to build and develop yourself, you should fork + clone the repository, and then:
npm ci --ignore-scripts --prefix ./react
pip install .[dependencies]
pip install dash[dev]
pip install .[tests]
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/demo
and is where you will import an example of your
component. To start the existing demo app, run npm start --prefix ./react
.
To test your code in a Python environment:
npm run build --prefix ./react
pip install -e .
examples/
which uses your new component.Write tests for your component.
tests/
. Take a look at them to see how to write tests using
the Dash test framework.pytest tests
.react/tests
. Take a look at them to see how to write tests using
the Jest test framework.Add custom styles to your component by putting your custom CSS files into
your distribution folder (webviz_core_components
).
MANIFEST.in
so that they get
properly included when you're ready to publish your component._css_dist
dict in
webviz_core_components/__init__.py
so dash will serve them
automatically when the component suite is requested.import "./<ComponentName>.css
. Make sure that the class names in your stylesheet
are starting with your component's name and two underscores: .MyComponent__MyClassName
.