plotly / dash-core-components Goto Github PK

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

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.

There is a small typo in the url of the project website.

It currently is: https://plot.y/dash/dash-core-components
Is should be: https://plot.ly/dash/dash-core-components

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.

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'.

hello:
I have checked out all the dash components but can't find calendar picker, anyone who can help me to figure out this component?

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

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.

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.

As reported in https://community.plot.ly/t/solved-datepicker-in-dash/4816/9?u=chriddyp:

max_date_allowed is min excluded date in reality.
Date provided to that argument is not selectable. Is that intended behavior or simple off-by-one error?

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

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 :

I apologize for sending wrong issue.

Version 2.5.1 of react-markdown was just published.

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.

Your Greenkeeper Bot 🌴

One of recent updates gave all components style and className properties to make styling easier. Two components added for date picking are missing them.

That can be useful when one wants to disable border on them to make them blend in better, or just change cursor to pointer when hovering.

Would it be feasible to have two different Inputs from a slider:
'drag-value' and a 'mouseup-value'

This would then allow the user to, for example, update a label that reflects the value of the slider with a drag and then update a longer callback on mouseup.

Version 2.19.2 of moment was just published.

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.

Your Greenkeeper Bot 🌴

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

It looks like the dropdown search for non-ascii characters is not works after the version 0.13.0 of dash-core-components

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.

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

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 💪

Your Greenkeeper Bot 🌴

Version 1.0.0 of react-select was just published.

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.

Your Greenkeeper Bot 🌴

we're only sending the window.location.pathname (https://github.com/plotly/dash-core-components/blob/master/src/components/Location.react.js#L36) but we could send an object of window.location.search (https://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript)

as reported in https://community.plot.ly/t/get-url-with-get-parameters/5878/1

It should start on the end-date default. Very annoying for users if the two days are far apart (years)

As reported in https://community.plot.ly/t/solved-datepicker-in-dash/4816/9?u=chriddyp:

Also, with clearable=False backspace can still clear date, but on action it will pop back in. I think that date field should be editable only from calendar view with clearable=False, or add something like editable? (when with_portal=True it is not reproducible as backspace does not fall ‘behind’ portal)

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)

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

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!

as reported https://community.plot.ly/t/dropdown-not-searching-values-when-typing/5323/3

As the title suggests, it would be really nice to add the attribute disabled for input. Maybe also to other components (button etc)

Is there an easy way to do this?
I want a slider but also some precision.

originally reported in https://community.plot.ly/t/multi-page-dash-app-internet-explorer-issue/6206/3

If it isn't too much trouble, it'd be much easier for me to parse the defaultValues fields if we made two changes:

1. Single-quote rather than double-quote JSON values (e.g., "{}" -> '{}', "[]" -> '[]', "''" -> '""')
2. Quote JSON object keys (e.g., "{data: [], layout: {}}" -> '{"data": [], "layout": {}}')

Related to jeroen/jsonlite#197

Version 4.2.1 of react-dropzone was just published.

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.

Your Greenkeeper Bot 🌴

Version 8.3.2 of rc-slider was just published.

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.

Your Greenkeeper Bot 🌴

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

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.

see remix-run/react-router#2019 for reference

right now we just keep the current position on the page rather than scrolling to the very top of the page

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

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.

Your Greenkeeper Bot 🌴

• See implementation in messin: https://github.com/chriddyp/messin/blob/master/src/js/components/Controls.react.js#L245
• Load plotly.js from CDN: https://cdn.plot.ly/plotly-latest.min.js

It takes forever if a user need to move 10 years, especially since the popup calendar does not allow moving by years (only months)