facultyai/dash-bootstrap-components

Bootstrap components for Plotly Dash

dash-bootstrap-components's Issues

The documentation needs a favicon

At the moment, we just use the default Dash favicon. It would be a nice to have a custom one.

... this probably means having some kind of logo.

Updates for Dash v1

This issue is for tracking changes that either need to be made, or can't be made before the release of Dash v1. Most of the changes are the result of Dash v1 (or specifically dash-renderer) supporting React 16, while the current release of Dash does not.

• Upgrade to reactstrap 8. Currently blocked from doing so as the implementation of some of the components we rely on (notably Dropdown which we use in DropdownMenu) has switched to using createPortal which is React 16 only.
• Add modals (reactstrap uses createPortal for this). Resolved by #146
• Add spinners (new in reactstrap 7). Resolved by #161
• Add toggles (new in reactstrap 7). See #136. This probably means figuring out how to provide an interface to custom inputs more generally.
• Add toasts.
• Re-enable up direction in DropdownMenu. See #65
• Add right alignment option to DropdownMenu. Resolved by #143, thanks @jmsblah!

There are pre-releases out for the v1 series of Dash libraries, so we can already build much of this and test against those then release when they are released. I have a dash-v1 branch open, I propose any of the above changes are PR'd against and merged into that branch.

Transformation is not set correctly for dropdown menu when direction is `up`

When creating a dropdown menu with direction == 'up', items do not show correctly. In particular, the style bottom is not set to auto and the transformation that is supposed to push the items above the dropdown is wrong.

Images not rendered on PyPI landing page

Currently in setup.py the long_description is set by simply reading the README.md file. This however causes the embedded images to break on the PyPI landing page:

Remove events

Events are being removed from Dash.

We should remove them from the source and documentation.

Document Navbar component

Branch protection on master

When trying to release 0.2.6, I noticed that our release scripts were broken because the master branch was protected. At the moment, our release script:

• pushes a commit and a tag to master as part of invoke release 0.2.6
• pushes a commit as part of invoke postrelease 0.2.6.

I temporarily removed the restriction, pushed and re-enabled it afterwards.

I'm not sure who enabled the branch restriction. To fix this permanently, we can do one of:

• remove the branch restriction permanently. This may be OK in the short term, though not being able to push directly to master is probably a good long-term thing. The more contributors we have, the more likely this is to be true.
• fix the build script to push to branches that we merge manually.
• fix the build script to automatically disable the branch restriction on master and re-enable it afterwards. I'm not sure this is even possible, and if it is, it'll probably require GitHub tokens, which adds another layer of complexity to the build process.

Update components build tools.

Install dash>=0.31.1 then add this command to package.json:

"build:py": "dash-generate-components ./src/lib/components dash_bootstap_components"

Dash must be installed on the current environment when you run the command. Or you can make sure the environment is activated with this, assuming you have a venv directory in the project root:

(. venv/bin/activate || venv\\scripts\\activate && dash-generate-components ./src/lib/components dash_bootstap_components)

Then change dash_bootstrap_components/__init__.py to:

from __future__ import print_function as _

import os as _os
import sys as _sys
import json

import dash as _dash

# noinspection PyUnresolvedReferences
from ._imports_ import *
from ._imports_ import __all__

if not hasattr(_dash, 'development'):
    print('Dash was not successfully imported. '
          'Make sure you don\'t have a file '
          'named \n"dash.py" in your current directory.', file=_sys.stderr)
    _sys.exit(1)

_basepath = _os.path.dirname(__file__)
_filepath = _os.path.abspath(_os.path.join(_basepath, 'package.json'))
with open(_filepath) as f:
    package = json.load(f)

package_name = package['name'].replace(' ', '_').replace('-', '_')
__version__ = package['version']

_current_path = _os.path.dirname(_os.path.abspath(__file__))

_this_module = _sys.modules[__name__]


_js_dist = [
    {
        'relative_package_path': 'dash_bootstap_components.min.js',
        'dev_package_path': 'dash_bootstap_components.dev.js',
        'external_url': 'https://unpkg.com/{0}@{2}/{1}/{1}.min.js'.format(
            package_name, __name__, __version__),
        'namespace': package_name
    }
]

_css_dist = []


for _component in __all__:
    setattr(locals()[_component], '_js_dist', _js_dist)
    setattr(locals()[_component], '_css_dist', _css_dist)

Please commit all the files generated (metadata.json, _imports_.py, bundles).

Create a development bundle

Having a development bundle with source maps would make development easier. See issue #93 for an explanation.

Add license document

We should add the Apache 2 license.

How to make a progress bar pop up and disappear during indeterminate process after button click

I am wondering how I could use the Progress component to implement an indeterminate progress bar that shows up when I click a button (which is meant to update a graph) and disappears when the graph is loaded.

The reason I ask this is because I have an application where a button-click is supposed to retrieve data from a database, which can take an unknown amount of time. During that waiting period I would like to see the progress bar.

I can kind of simulate an indeterminate progress bar by setting the value to 100 from the start and setting animated to True. But I am having difficulties making the progressbar appear right before the data retrieval and disappear right after.

Do you have any idea or suggestions how to tackle this problem?

PS: I discovered the Dash Bootstrap Components module last week and I've been absolutely loving it. It makes the job of developing a good modern looking dashboard so much easier, so thank you to its developers really!

How to change the width of the Popover body to more than 300px

When I set the width to over 275px,
like style={'width':'275px','height':'300px'}
popover body will exceed the border.

Strange behavior with new Navbar

Hello @tcbegley

This is the problem I was telling you in my repo.

With the new navBar component introduced in version 0.3.0 there is a strange behavior when parameter 'nav' is set to True. It adds a point and make the navbar bigger than expected

This is without nav=True:

This is with nav=True:

I would like to set nav=True so that the dropdown does not appear as a button. Something similar to the navbarSimple example in the doc.

And here a full example:

from dash import Dash
from dash_bootstrap_components.themes import BOOTSTRAP

import dash_bootstrap_components as dbc
import dash_html_components as html

app = Dash('expensor_personal', external_stylesheets=[BOOTSTRAP])

navbar = dbc.Navbar(
    [
        dbc.Row(
            [
                dbc.Col(dbc.NavbarBrand("Dash", className="ml-2")),
            ],
            align="center",
            no_gutters=True,
        ),
        dbc.Row(
            [
                dbc.DropdownMenu(
                    label="Pages",
                    children=[
                        dbc.DropdownMenuItem("Page 1", href="/"),
                        dbc.DropdownMenuItem("Page 2", href="/"),
                    ],
                    className="mr-1",
                    nav=True
                ),
                dbc.Button(
                    "Button1",
                    className="mr-1",
                ),
            ],
            no_gutters=True,
            className="ml-auto",
            align="center",
        )
    ],
)

app.layout = html.Div([navbar])

if __name__ == '__main__':
    app.run_server(debug=True)

Bootstrap styling for DatePicker components

DatePickerSingle and DatePickerRange work well inside FormGroup components, but the default styling makes them look a bit out of place when next to Bootstrap themed inputs. For example, they are taller than Bootstrap inputs and don't have rounded corners. It would be good to look into whether we can bundle some CSS that unifies everything.

Right-aligned menu

Is it possible to get right-aligned menu on the navbar?
Bootstrap | menu-alignment

Error loading dependencies

I have installed dash-bootstrap-components via Pip, and included the Bootstrap 4 CSS in my project manually (since I don't want to use CDN). When adding a dbc.Button() to a layout, I get the following error in the browser:

Error loading dependencies

The browser console says:

Error: "dash_bootstrap_components was not found."

Add strings for URLs to CDN distributing bootstrap themes

It'd be great to be able to write:

external_stylesheets=[dbc.themes.DARKLY]

Reduce the bundle size

The generated bundle is fairly big. I think this is because we include parts of modules that we don't need.

I don't think this is urgent at all, but if we can, it might be worth spending some time understanding how to reduce the bundle size.

Consistent linting and reformatting rules

I believe we have both been using black for formatting Python source code, and mostly sticking to pep 8. For now, the JS source code is mostly fairly self-consistent.

Would it make sense to adopt a consistent code style through reformatters and CI tests? It'd help outside contributors make pull requests that are visually similar to the current codebase. I suggest:

• prettier for the JS, following dash-core-components. See this PR.
• black and flake8 for the Python side and the docs, since they're (becoming) the de-facto standard.
• enforcing consistency as part of the CI pipeline.

The timing around this needs to be somewhat well thought through to avoid merge conflicts with existing PRs.

Any thoughts?

Style is not set on the Tab component

The style property that can be set on the Tab item is not used at all.

Should there be a `dbs.Textarea` component?

I tried to use a dbc.Input with type="textarea" but found that this didn't seem to apply any attributes/styles to make it emulate the behaviour of an actual textarea element. So I fell back to using a dcc.Textarea component with Bootstrap form-control classes. I'm wondering if there should just be a dbs.Textarea component or alternatively, making type="textarea" emulate a textarea element, if that can be done.

How to Structure a Multi-Page App

Hi,

Really awesome and helpful project!

I'm just a little confused at designing a multi-page app using your NavBar bootstrap component. I'm using Dash's structure currently to do so; specifically, the app1-app2 example toward the bottom of the page.

My question is this: If I want the same NavBar component on every page, do I need to copy/paste the NavBar component with a slightly different class name (NavBar app1, NavBar app2, etc) and then define a callback on each page? Or do you guys offer a way around that?

Add function for Table from pandas dataframe

It would be good to add a function to the python module that creates a Table component from a pandas Dataframe.

Kill DatePickerSingle, DatePickerRange.

These two components make our bundle a lot larger through the react-dates dependency, but ultimately just replicate functionality present in dash-core-components. I think we should kill them and instead encourage use of the dash-core-components version, in conjunction with the CSS being added in #147.

Neither component is explicitly documented (though DatePickerSingle does appear in the inline form example on the forms page of the docs.). Nevertheless, it would be good to decide on the best way to deprecate these.

Create handler to extract columnProps correctly

Currently the pipeline for generating docstrings for each of the components (which is also visible as part of the auto-generated api documentation in the docs app) fails on custom prop-types such as columnProps as used by Col. This would be most robustly resolved by adding a handler to the pipeline that can correctly extract and parse the prop type.

'Random name' button in documentation not working

In the button section of the input group docs, the random name button isn't working.

Happy to look into this in the coming days.

Example on docs homepage uses undocumented CSS classes

The example app on the docs homepage uses docs-content CSS class to add margins, which is not documented and part of the documentation app's internal stylesheet. It should be changed to use Bootstrap classes.

This was spotted by ndbcorp on the Plotly forums

Inline Form with dcc.Dropdown squashes the dropdown

Using dash-bootstrap-component 0.3.5

Create toggle switch

Hi,

Is there plan to add something like this?
twbs/bootstrap#15783

Add long_description and clean pypi landing page

The pypi landing page doesn't look great at the moment. Adding a long_description would go a long way towards solving this.

Should we show the examples?

Web app examples are particularly effective at demonstrating what a library can do, and how to do it. Since we have some great examples, it would be beneficial to host them somewhere.

We don't really want to host one different app for each example, though. One idea might be to use different base paths for different apps? E.g.

server = Flask(__name__)

app_iris = Dash(__name__, server, routes_pathname="/iris/" # etc.)
app_faithful = Dash(__name__, server, routes_path_name="/faithful/", # etc.)

I'm not sure whether we can get the above to work.

An alternative would be to have each app running on a different port with either a single webserver in front that loads apps in iframes or a load balancer that proxies to a different upstream depending on the path. I don't know how easy either of these alternatives would be to deploy.

Improve docstrings

The current state of the docstrings could be improved. A few props on some components have no documentation, and many have fairly uninformative sentence fragment descriptions. We should do a pass of all the components to clarify and unify the documentation.

Add font awesome icon

Hi,

Is it possible to add icon support in next release? Similar to what shiny button supports.

Document ListGroup component

Document Input components

Re-enable direction=up on dropdowns

In issue #62 and PR #64 , we decided to disable opening dropdowns with direction="up" until Dash renderer supports React 16.

Components mostly missing `key` prop

Many of the components don't expose key to the Python interface. This can be useful for, among other things, forcing components to re-render when working with multi-page Dash apps that have multiple pages with similar structures.

DatePicker components with Bootstrap styling

Add DatePicker components that style themselves with relevant bootstrap classes (such as form-control) rather than having the styles hard coded. This will better support use with Bootswatch and other non-default Bootstrap stylesheets.

See also #122

NavLink would not trigger Input('url', 'pathname')

Hello,

Refer to dash exmaple, click dcc.Link would trigger Input('url', 'pathname') callback .

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    dcc.Link('head', href='/'),
    html.Br(),
    dcc.Link('order_source', href='/order_source'),
    html.Div(id='page-content')
])


@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    print('Enter : %s' % pathname)
    if pathname == '/order_source':
         return order_source_statistics.layout
    elif pathname == '/apps/app2':
         return app2.layout
    else:
        return 'something'

But this doesn't work in dbc.NavLink('order_source', href='/order_source') .

external_stylesheets = [dbc.themes.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("aaaa", href="/")),
        dbc.NavItem(dbc.NavLink("order_source", href="/order_source")),
    ],
    brand="Demo",
    brand_href="#",
    sticky="top",
)

....

app.layout = html.Div([
    navbar,
    body
])

Adding a dropdown component that is similar to dcc.Dropdown

Dash's dcc.Dropdown doesn't style easily, at least from my experience.
Is there a way to add a dbc dropdown component that can change the size and appearance in the same way that input does for dcc.Input?

Allow dropdowns in input groups

Reactstrap supports dropdowns in input groups (see docs, for instance) via the InputGroupButtonDropdown component.

This just passes an addonType prop to a Dropdown component. See:

• the InputGroupButtonDropdown source
• how the underlying Dropdown component handles the addonType prop.

I think the easiest would be to add an addonType prop to Dropdown. I don't think we need to replicate InputGroupButtonDropdown, since it just wraps Dropdown and we would need to copy all the prop types.

Happy to implement this if we think it's the right thing to do. If we do this, we should amend the documentation on input groups (PR #51 ) to document dropdowns.

Allow radio and checkbox inputs?

At the moment, only the following input types are allowed:

• text
• textarea
• number
• password
• email
• range
• search
• tel
• url
• hidden

Reactstrap explicitly supports checkbox and radio inputs as well. Is there a reason those weren't included? There's a comment to the effect that we only want to support types with wide browser support, but checkbox and radio inputs are very widely supported.

Happy to add those in if we think it's useful. If we do this, we should amend the documentation on input groups (PR #51 ) to document dropdowns.

Add isort to the CI pipeline?

PR #44 adds isort configuration. I don't have any strong preferences, but if we think imports should be sorted, should we add isort checks to the CI pipeline?

If some developers use isort and not others, it will lead to confusing diffs.

Examples on Callbacks using DBC Dropdown

I like the style of the DBC Dropdowns compared to the DCC ones. However, the DCC dropdowns display the dropdown item I selected. Was wondering if this feature could be styled into the Bootstrap dropdowns?

Also, it's a little difficult to understand (from the Bootstrap documentation) how a dropdown menu selection can be used to filter graphical information. Would I need to design callbacks on multiple input dropdown menu components using their id property? If you could provide an example on filtering data using callbacks with dropdowns, that would be great!

Otherwise, I really love this project and the work you guys are doing. You're really making designing data dashboards a lot easier for beginners like me!

Documentation does not build on latest dash

Traceback (most recent call last):
File "run.py", line 3, in
from app import App
File "/project/nadine/dash-bootstrap-components/docs/app.py", line 7, in
from components_page import ComponentsPage
File "/project/nadine/dash-bootstrap-components/docs/components_page/init.py", line 1, in
from .page import ComponentsPage # noqa: F401
File "/project/nadine/dash-bootstrap-components/docs/components_page/page.py", line 5, in
from .alerts_content import content as alerts_content
File "/project/nadine/dash-bootstrap-components/docs/components_page/alerts_content.py", line 3, in
from .api_doc import ApiDoc
File "/project/nadine/dash-bootstrap-components/docs/components_page/api_doc.py", line 4, in
from dash.development.base_component import (
ImportError: cannot import name 'filter_props'

Document usage of custom CSS.

We should document how to use the custom CSS added by #147

Support custom NavbarBrand instead of just a string?

Hi, I'm not sure if I'm missing an obvious solution to this, but it seems like as currently written the Navbar brand has to be a string, even though the NavbarBrand component itself could in principle contain other items as children (eg an Html.Img)?

I'm looking for an easy way to add a left-aligned logo to a Navbar instead of only brand text.

Many thanks for releasing this component suite, it looks very useful.

Support dashR

An R interface for Dash is in development, it would be cool if we supported this. A cursory look at the dash-core-components repo suggest it may not be too much extra work?? Perhaps those will be famous last words.

Error log in documentation for progress bar component

The progress bar component occasionally triggers an error -- I think when it's first loaded. This is the stack trace.

Traceback (most recent call last):
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 2309, in __call__
return self.wsgi_app(environ, start_response)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 2295, in wsgi_app
response = self.handle_exception(e)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1741, in handle_exception
reraise(exc_type, exc_value, tb)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/_compat.py", line 35, in reraise
raise value
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 2292, in wsgi_app
response = self.full_dispatch_request()
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1815, in full_dispatch_request
rv = self.handle_user_exception(e)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1718, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/_compat.py", line 35, in reraise
raise value
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1813, in full_dispatch_request
rv = self.dispatch_request()
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1799, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/dash/dash.py", line 962, in dispatch
return self.callback_map[target_id]['callback'](*args)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/dash/dash.py", line 902, in add_context
output_value = func(*args, **kwargs)
File "<string>", line 17, in advance_progress

TypeError: unsupported operand type(s) for %: 'NoneType' and 'int'

I haven't had time to investigate, but I suspect we don't catch the initial None in the callback.

Document tab_style and label_style of Tab

#152 added tab_style and label_style props to Tab. We should add an example demonstrating their use to the docs.