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
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 dcc.Button
attributes n_clicks
and n_clicks_timestamp
have been
added to ButtonLink. These attributes can be used for notification that the ButtonLink
has
been clicked. ButtonLink
can be enabled/disabled allowing conditional control of the link via a Dash callback
Form The 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 form_data
attribute.
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
Location
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.
Usage Demo
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
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
Testing
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:
pytest
Publish
See Create a production build and publish
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.
usage.py
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.