Dash Holoniq Components
A set of house-keeping components for Dash that make the implementation of forms and larger, multi-page applications a little easier.
pip install dash-holoniq-components
The following components are available:
Alert The Alert component is hidden if it has no children. When children are injected the Alert component sets its style to become visible
ButtonLink Allows you to create a clickable link within a multi-page app in
the same way as
dcc.Link. The standard
n_clicks_timestamp have been
added to ButtonLink. These attributes can be used for notification that the
ButtonLink can be enabled/disabled allowing conditional control of the link via a Dash callback
Form components normal submit action can be inhibited. The form data, as it would be
reported by the a submit action, is available in a Dash callback via the components
app.layout = dhc.Form(formFields(), id="form", preventDefault=True), @app.callback([...], [Input("form", "form_data")]) def _callback(form_data): pass
InputWithIcon Adds a font awesome glyph and tooltip to the end of a standard input box
import dash_holoniq_components as dhc app.layout = html.Div dhc.InputWithIcon(...) ])
LayoutRouter The children of
LayoutRouter are each wrapped in a Div that is
is hidden/shown based on the current value of the LayoutRouter 'switch' attribute.
The advantage of
LayoutRouter over the standard dynamic content is that ALL the applications
layout is present in the DOM, but hidden, when the Dash application is first loaded. This means
that Dash callbacks can reference component ids without reference errors being reported.
Switching between pages using
LayoutRouter needs minimal server communication resulting in
the fastest possible page updates.
import dash_holoniq_components as dhc app.layout = html.Div([ dhc.Location(id='loc'), dhc.LayoutRouter(children, routes=routes, id='router') ] @app.callback([Output('router', 'switch')], [Input('loc', 'pathname')]) def _router_callback(pathname): route = 'default' if pathname: pathname = pathname[1:] if pathname in page_layouts: route = pathname return route
PageTitle Sets the page title:
from dash import html import dash_holoniq_components as dhc app.layout = html.Div([ dhc.PageTitle(title='My Site', id='title') ])
PasswordWithShow Password input with a show/hide icon that can be clicked to reveal the password
A modified version of dash-core-components Location component. Allows multiple instances to co-exist. In the dash-core-components version the last instance is the only one to get history event notifications.
The demo is a simple sign-in form and user profile that makes use of all the components.
To sign in enter a name and password. The password will be checked to see if it's at least eight characters. If it is the user is redirected to the profile page.
To run the Python demo
python usage.py python usage.py --port 8060
Then open http://localhost:8050
examples/multi_page This is a clone of the Structuring a Multi-Page App with some added functionality.
python -m examples.multi_page.index
examples/form A minimal SPA application with home page, login form and profile page. Demonstrates the use of the following dash-holoniq-components: PageTitle, Location, LayoutRouter, Alert, InputWithIcon, PasswordWithShow, Form
python -m examples.form.index
examples/checkbox_form A form containing various checkbox examples.
python -m examples.form.checkbox_form
Building Component Library
For VSCODE developers a development container definition is available in .devcontainer.
Install tools manually
These steps are only needed if you intend to build the project directly on your computer. To build the project you must have python and node installed on your computer. Then:
Create a virtual environment
python3 -m venv .venv source .venv/bin/activate python -m pip install --upgrade pip pip install -r requirements.txt
Build the project
Build the project:
npm run build
Create tarball, first change the release version in package.json, then:
python setup.py sdist bdist_wheel
The tarball is in dist/dash_holoniq_components-.tar.gz
To install the tarball in a dash project:
pip install dash_holoniq_components-<version>.tar.gz
Pytest and Dash Duo are used for testing. To run these tests both the Chrome browser and Chrome driver must be installed. These are allready installed in the VSCode Docker container. If you are note using remote containers you must be install them first.
To run the tests:
twine upload dist/*
Debugging the dash component JS source
To debug/single-step the JS component code in conjunction with a dash application:
In a terminal window start the dash application:
python -m examples.form.index
Select debugger launch 1: JS Browser and press F5. The chrome browser will open and display your application. Enter breakpoints in your source code eg ./src/lib/components/Location.react.js as required.
Debugging the python demo
In VSCODE select
2. Debug usage.py from the launch options and press
F5 to launch the
Flask/Dash development server.
Set breakpoints as required.