Git Product home page Git Product logo

dash-core-components's Introduction

Notice

As of Dash 2, the development of dash-core-components has been moved to the main Dash repo

This package exists for backward compatibility


Dash Core Components

This package provides the core React component suite for Dash.

CircleCI

Development

The dash package contains some tools to build components and drive the bundles build process. To avoid the circular dependency situation, we don't add dash as a required install in the dash-core-components setup. But, in order to do development locally, you need to install dash before everything.

  1. Install the dependencies with:
# it's recommended to install your python packages in a virtualenv
# python 2
$ pip install virtualenv --user && virtualenv venv && . venv/bin/activate
# python 3
$ python -m venv venv && . venv/bin/activate

# make sure dash is installed with dev and testing dependencies
$ pip install dash[dev,testing]  # in some shells you need \ to escape []

# run the build process
$ npm i --ignore-scripts && npm run build

# install dcc in editable mode
$ pip install -e .

Code quality and tests

To run integration tests (test_integration.py)

You can run the Selenium integration tests with the

npm test

Testing your components in Dash

  1. Run the build watcher by running $ npm run build:watch

  2. Run the dash layout you want to test

     # Import dash_core_components to your layout, then run it:
     $ python my_dash_layout.py
    

Uninstalling python package locally

$ npm run uninstall-local

Publishing

There's an npm script that will handle publish, provided you have the right credentials. You can run it by running

$ npm run publish-all

See the Publishing New Components/Features section of the Contributing guide for step-by-step instructions on publishing new components.

Dash Component Boilerplate

See the dash-component-boilerplate repo for more information.

Big Thanks

Cross-browser Testing Powered by image

dash-core-components's People

Contributors

akronix avatar alexcjohnson avatar alishobeiri avatar almarklein avatar ann-marie-ward avatar archmoj avatar bcliang avatar bpostlethwaite avatar byronz avatar chriddyp avatar cldougl avatar coopy avatar dependabot[bot] avatar divyachandran-ds avatar emilhe avatar hammadtheone avatar harryturr avatar inytar avatar jackluo avatar jbampton avatar marc-andre-rivet avatar mjclawar avatar mmartinsky avatar philip-peterson avatar rmarren1 avatar rpkyle avatar t4rk1n avatar tcbegley avatar valentijnnieman avatar wbrgss avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dash-core-components's Issues

An in-range update of react-dropzone is breaking the build 🚨

Version 4.2.1 of react-dropzone was just published.

Branch Build failing 🚨
Dependency react-dropzone
Current Version 4.2.0
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

react-dropzone is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • ci/circleci CircleCI is running your tests Details
  • percy/dash-core-components 2 visual diffs need review Details

Release Notes v4.2.1

4.2.1 (2017-10-19)

Bug Fixes

  • Fix bug in IE11 when this.node could be null when calling onDocumentDrop (#517) (24c6ce5), closes #492
Commits

The new version differs by 1 commits.

  • 24c6ce5 fix: Fix bug in IE11 when this.node could be null when calling onDocumentDrop (#517)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of react-select is breaking the build 🚨

Version 1.0.0 of react-select was just published.

Branch Build failing 🚨
Dependency react-select
Current Version 1.0.0-rc.10
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

react-select is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • ci/circleci CircleCI is running your tests Details
  • percy/dash-core-components 2 visual diffs need review Details

Commits

The new version differs by 188 commits.

  • e71dc9f v1.0.0 🎉
  • e2b3ac8 Updating react-input-autosize and rebuiding examples
  • 1e150a9 Adding gh-pages for example deployment
  • feb3651 Updating build
  • 3d79e33 Updating documentation for 1.0
  • 73847b1 Merge branch 'master' of https://github.com/JedWatson/react-select
  • f273e16 Cleaning up props documentation
  • fedfc3b Merge pull request #2163 from JedWatson/fix/#2156
  • 63d2e18 removed test made obsolete by changes
  • 79eefba removed the functionality for searchable select, added tests
  • 1f1aa6a Making deprecation warning clearer
  • e7a77da Fix docs for openOnFocus, closes #2160
  • 924bcf0 Merge pull request #2154 from Deiru2k/master
  • 82c651d Export default util functions
  • 8e69bc3 Merge pull request #2140 from karaggeorge/prompt-text-creator-label-bug

There are 188 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Interval component not updating 'n_intervals' value automatically (0.15.0)

The new n_intervals feature introduced in 0.15.0 to eventually remove 'Events' is not behaving as expected.
The user has to update the values by creating another callback that subscribes to the Event:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Input, Output, Event, State
import numpy as np
app = dash.Dash()


def make_plot(value):
    x = np.random.randn(value)
    y = np.random.randn(value)
    trace = go.Scatter(x=x, y=y)
    return {'data': [trace]}


app.layout = html.Div([

    html.Div([dcc.Graph(id='Graph-1')],
             style={'display': 'block'}, id='Div-Graph-1'),
    dcc.Interval(id='interval-component', interval=1000)
])


@app.callback(
    Output('Graph-1', 'figure'),
    [Input('interval-component', 'n_intervals')])
def test(n_intervals):
    if n_intervals is None:
        n_intervals = 1
    return make_plot(n_intervals)


# Uncomment the following to make the event trigger

# @app.callback(Output('interval-component', 'n_intervals'),
#               events=[Event('interval-component', 'interval')],
#               state=[State('interval-component', 'n_intervals')])
# def update_n_intervals(n_intervals):
#     if n_intervals is None:
#         n_intervals = 1
#     n_intervals += 1
#     return n_intervals


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

The n_intervals counter also starts as None. It would be more convenient if this started at 0 or if it could be supplied as a kwarg to the Interval component.

0.13.0 breaks dcc.DatePickerRange

Wanted to use the latest for tabs. But DatePickerRange's screen-reader only text is visible and displayed in large letters: "Press the down arrow key to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates." Also, a giant SVG arrow is generated between the date boxes that covers the full page

Can't use box/lasso selection as of dash-core-components 0.13.0

I decided to update to the latest version of Dash and all related components, and I lost the ability to drag/lasso select. After rolling back each component one by one, I confirmed that updating dash-core-components from 0.12.7 to 0.13.0 (issue still exists in 0.14.0) caused the issue.

When I drag a rectangle, I see the rectangle appear but no points are greyed out outside the rectangle and no callbacks are called.

Unfortunately can't share any code/plots from this application, but if it turns out the functionality should be working for me I'll try and create a reproducible example.

Clean up `site-packages/lib` pypi installation artifact

We use MANIFEST.in to enumerate extra files to include in the source distribution.

Today, this results in an extraneous lib/ directory being installed in the site-packages/ root, next to dash_core_components:

  • site-packages/lib/metadata.json

This is not the case for dash_html_components.

This behavior is potentially bad, as it would overwrite any existing installed package named 'lib'.

An in-range update of moment is breaking the build 🚨

Version 2.19.2 of moment was just published.

Branch Build failing 🚨
Dependency moment
Current Version 2.19.1
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

moment is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • ci/circleci A command timed out during your tests Details

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

control key support and semantic links for `dcc.Link`

dcc.Link is the Dash single-page-app link component. There are still a few behaviours that make these links feel less like native links:

  1. Can't right-click on them
  2. Can't cntl-click to open new pages with them
  3. Visiting a new page keeps the scroll location at the bottom of the page, rather than bringing the user back to the top

For 3, we may need to solve this in the dash-renderer library, but I'm not sure.

It looks like we could use the logic in https://github.com/ReactTraining/react-router/blob/d6ac814e273b2f3aad24b7630a6f1df3f19c1475/packages/react-router-dom/modules/Link.js#L41-L62

Resolve dependencies on the component level

I see a couple issues with the dependency management strategy in this repo (I guess this kind of applies to dash-html-components, but there are currently no direct dependencies there):

(1) All (core component) dependencies are included regardless of which core component(s) are actually needed.

(2) External URLs are tracked independently of package.json and metadata.json, which makes it hard for me to keep in sync with the python package.

If we could somehow attach dependency information at the component level in metadata.json (e.g., name, version, relative/external path to file), that should provide us a way to avoid both issues in any dash interface.

Feature request: Add a button component

Hi,

Could you please add a regular GUI button component to dash-core-components?

Is there any workaround that is available for the meanwhile?

Thanks for the great work in this project.

datepicker doesn't open if date values are `None`

Originally reported in https://community.plot.ly/t/datepickerrange-clearable-in-tabs-not-working-as-expected/6850/4

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
from datetime import datetime as dtime

app = dash.Dash()


app.config['suppress_callback_exceptions'] = True
app.layout = html.Div([
    dcc.DatePickerRange(
        id='Dr1',
        clearable=True,
        reopen_calendar_on_clear=True,
        start_date_placeholder_text='Select a date',
        end_date=dtime.today().strftime("%Y-%m-%d")
    ),
    html.Div(id='output')
])


@app.callback(
    Output('output', 'children'),
    [Input('Dr1', 'start_date'),
     Input('Dr1', 'end_date')])
def dates_selected(start_date, end_date):
    value = "From- %s  To-   %s" % (start_date, end_date)
    return value


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

Quite a few error messages in the console
image

Updating dcc.Location pathname

I've followed the updated urls example at https://plot.ly/dash/urls and have found it very helpful in setting up some rudimentary routing. I'd like to take it a bit further and allow changes made within a page to update the pathname.

From the example:

@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    return html.Div([
        html.H3('You are on page {}'.format(pathname))
    ])

where the page-content is changed when the url pathname is updated. This works well, allowing me to set default UI states based on the pathname.

What I'd like to do is reverse the situation -- UI changes update the pathname -- on input from one of several internal divs, update the url pathname to reflect the current settings being used. The Link component updates the pathname, but only on click. I'd like the update to be based on graph update callbacks.

For instance (some made up pathname):

@app.callback(
    Output('url', 'pathname'),
    [Input('display-charts-rooms', 'children'),
    Input('display-charts-room', 'children'),])
def update_pathname(graphs1,graphs2):
    # outputString=get_current_settings_madeUpFunction(graphs1,graphs2)
    return '/changesMade/settings=ThisAndThat'

This doesn't seem to work however. I don't get any errors or exceptions; but nothing happens.

With this, someone could update the the UI widgets, adjust the output graphs, all the changes could reflect in the current path name like:
http://plot_server:8050/plot/dataset=1/startDate=2017-06-07/endDate=2017-06-09/

Passing this off to another user (email) would mean quick sharing of the same graph setup parameters, without having to go through tedious setup procedures (click this, wait for component to update, click next component, select multiple items from dropdown box, adjust date range 1, adjust date range 2). This seems to be inline with making dash apps more stateful, except in this case, for the user. To quote from @chriddyp on an unrelated issue:

I think that in most cases, the Dash app developer shouldn't need to know the order of events. If they do, it usually means that the component needs to be patched in a way to make it more stateful or the UI needs to be redesigned. I'll leave this issue open to invite examples of good UIs that are impossible to create without supporting "order-of-events".

A downside would be the need to prevent some feedback loop: user inputs a pathname, callback takes pathname and updates page content, page content update triggers pathname change, and so on.

Other than that, I'm not knowledgeable enough with the underlying react js components to try changing them. The dcc.Location component appears simpler than other components that have update methods, but maybe I'm looking in the wrong spot:

componentWillReceiveProps(nextProps) {
        this.updateLocation(nextProps);
    }

    render() {
        return null;

As of right now, the only option I can see for easy setup/testing urls is to generate a text string as described, but output it to some P tag on screen so that a user can copy it and paste it.

Any ideas, or am I thinking about this all wrong? Thanks for any help and for the great package.

Dropdown component not working

With following code:

import dash
import dash_core_components as dcc
import dash_html_components as html
import logging

app = dash.Dash()
app.layout = html.Div([
    dcc.Dropdown(options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ], value="MTL", id='section2-dropdown-1'),

])


app.css.append_css(
    {"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})


if __name__ == '__main__':
    logging.basicConfig(
        format='%(asctime)s [%(levelname)s]: %(message)s', level=logging.DEBUG)
    app.run_server(debug=True, host="0.0.0.0")

I get the dropdown rendered, but I cannot select any item on it. It's always Montreal selected (the default). If I choose multi and don't give default value, I cannot add any item to the selection list.

Relevant pip freeze items:

dash==0.17.7
dash-core-components==0.5.3
dash-html-components==0.6.2
dash-renderer==0.7.3
plotly==2.0.12

Can't serve components locally when installing from git

pip install git+https://github.com/plotly/dash-core-components.git
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(csrf_protect = False)

app.scripts.config.serve_locally = True

app.layout = html.Div([
    dcc.Input(id='inputID', value='initial value', type="text"),
    html.Div(id='outputID')
])

@app.callback(
    Output(component_id='outputID', component_property='children'),
    [Input(component_id='inputID', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)

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

An in-range update of react-markdown is breaking the build 🚨

Version 2.5.1 of react-markdown was just published.

Branch Build failing 🚨
Dependency react-markdown
Current Version 2.5.0
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

react-markdown is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • ci/circleci CircleCI is running your tests Details
  • percy/dash-core-components 2 visual diffs need review Details

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Feature request: pass className to RadioItems

I've got a couple RadioItems controls for a plot, arranged like so:

screen shot 2017-08-12 at 11 52 17 am

I originally tried to just pass className="six columns" to the RadioItems component but that's not an accepted keyword (for some reason—I thought it would be inherited). So as a workaround I wrapped them in extra divs with the six columns class. Given that a RadioItems component renders as a div anyway, it would be a wee bit cleaner to be able to pass the class in directly to that div and save a layer of layout boilerplate.

I don't know if the same issue applies to any other components. It seems to work in some cases (e.g. Dropdown takes className as a keyword) but in general any component that ends up wrapped in its own div could benefit from this.

Thanks again for all your hard work on this package!

metadata.json

MANIFEST.in shows the following

include dash_core_components/metadata.json

https://github.com/plotly/dash-core-components/tree/master/dash_core_components
does not include metadata.json

As a result, I see the following upon trying to run dash-stock-tickers-demo-app

Traceback (most recent call last):
  File "app.py", line 2, in <module>
    import dash_core_components as dcc
  File "c:\users\kqureshi\downloads\dash-core-components\
init__.py", line 10, in <module>
    'dash_core_components'
  File "C:\Python27\lib\site-packages\dash\development\co
e 22, in load_components
    with open(metadata_path) as data_file:
IOError: [Errno 2] No such file or directory: 'c:\\users\
ash-core-components\\dash_core_components\\metadata.json'

Thanks in advance. Hope I'm not missing something here

An in-range update of react-syntax-highlighter is breaking the build 🚨

Version 5.8.0 of react-syntax-highlighter was just published.

Branch Build failing 🚨
Dependency react-syntax-highlighter
Current Version 5.7.1
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

react-syntax-highlighter is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • ci/circleci CircleCI is running your tests Details
  • percy/dash-core-components 2 visual diffs need review Details

Commits

The new version differs by 2 commits.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Unable to switch Tabs

Hi

I have been trying to create a multi-tab dashboard using plotly.
But, I am facing issues while trying to switch from one tab to another
See the screenshot below :

image

An in-range update of rc-slider is breaking the build 🚨

Version 8.3.2 of rc-slider was just published.

Branch Build failing 🚨
Dependency rc-slider
Current Version 8.3.1
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

rc-slider is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • ci/circleci CircleCI is running your tests Details
  • percy/dash-core-components 2 visual diffs need review Details

Commits

The new version differs by 7 commits.

  • 534890a bump 8.3.2
  • aae0498 fix: change event binding to slider ownerDocument (#326)
  • b321edd deps: upgrade to react@16
  • e783b62 Merge pull request #331 from Graham42/master
  • dfa5a73 Add keywords to improve searchability
  • 0a07ada fix($range): Fix issue with overlapping points (#320)
  • 722ddd2 docs: fix homepage link

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of react-select is breaking the build 🚨

Version 1.0.0-rc.6 of react-select just got published.

Branch Build failing 🚨
Dependency react-select
Current Version 1.0.0-rc.5
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

react-select is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details
  • ci/circleci CircleCI is running your tests Details
  • percy/dash-core-components Visual review requested but no snapshots were uploaded! Details

Commits

The new version differs by 66 commits.

There are 66 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Changing value of "visible" attribute from "visible" to "hidden" sometimes has no effect

I'm trying to implement the following behavior: Display a dropdown list of jobs. If a job is selected, display 3 tabs: "Tests", "Documents" and "Misc" each of which contains information in their "children" attributes, so for example "Tests" displays a table of test results. (I tried uploading screenshots, but got the "Something went really wrong, and we can't process that file" error.)

"Tests" and "Documents" also include "New Test" and "New Docset" buttons, respectively. When a user clicks on "New Test" I would like to hide the test results and display the form for new test data. I implemented this with a callback that changes the Style attribute for the Div that includes the test results:

# On "New Test" set style for test info panel to hidden
@app.callback(
    Output("test_info", "style"),
    [
        Input("new_test", "n_clicks")
    ],
    [
        State("jobs", "value")
    ]
)
def on_new_test03(n_clicks, job_name):
    if n_clicks != None and job_name != None:
        return html_get.get_test_info_style("hidden")

I verified that the callback is in fact being called, but the contents are not un-displayed. Instead, the new-test input form is displayed below the test results. (See second screenshot)

selectedData callback not firing with parcoords plot

I saw in the Dash documentation a suggestion to use parallel coordinates plots here, which looks like a great way to filter data. However when selecting data on this plot the selectedData callback never fires so I can't link it to other plots.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.