Exemplo n.º 1
0
                 options=parse_options({
                     'Active Power': 'P',
                     'Reactive Power': 'Q',
                     'Apparent Power': 'S',
                     'Voltage': 'V',
                     'Current': 'I',
                     'THD': 'Hd',
                 }),
                 value='V')
],
                           className='inputGroup inline p-2')

anomal_plot = dbc.Card([
    dbc.CardHeader('3-Phase Unbalances Detection', className='card_header'),
    variable_picker,
    dcc.Loading(dcc.Graph(id='anomalies_plot', style=dict(height='300px')),
                type="default"),
],
                       color="dark",
                       outline=True)

##################
# voltage excursion
##################
vex_input = html.Div(children=[
    html.Div('MA Window (Days): ',
             className='inputGroup__label d-inline-block'),
    daq.NumericInput(id='vex_ma_range',
                     min=1,
                     value=10,
                     max=60,
                     className='inputGroup__input d-inline-block')
Exemplo n.º 2
0
            className="row app-row",
            children=[
                html.Div(
                    id="dropdown-container",
                    className="one-half column",
                    children=[
                        html.Label("Select a City",
                                   className="select-city-label"),
                        dcc.Dropdown(id='demo-dropdown', multi=True),
                    ],
                )
            ],
        ),
        dcc.Loading(id='loading',
                    children=[
                        html.Div(id='graph-container',
                                 className="u-max-full-width"),
                    ]),
        html.Div(id='ticker-text', className="row ticker-text"),
        dcc.Interval(id='interval',
                     interval=server.config["UPDATE_INTERVAL"],
                     n_intervals=0),
        dcc.Markdown(
            "Matthew Krump | [matthewkrump.com](https://matthewkrump.com/) | Rendered by [Dash](https://plotly.com/dash/)",
            id='footer',
            className="footer",
        )
    ],
)

Exemplo n.º 3
0
def charts_layout(df, settings, **inputs):
    """
    Builds main dash inputs with dropdown options populated with the columns of the dataframe associated with the
    page. Inputs included are: chart tabs, query, x, y, z, group, aggregation, rolling window/computation,
    chart per group toggle, bar sort, bar mode, y-axis range editors

    :param df: dataframe to drive the charts built on page
    :type df: :class:`pandas:pandas.DataFrame`
    :param settings: global settings associated with this dataframe (contains properties like "query")
    :type param: dict
    :return: dash markup
    """
    [chart_type, x, y, z, group, agg] = [inputs.get(p) for p in ['chart_type', 'x', 'y', 'z', 'group', 'agg']]
    y = y or []
    show_input = show_input_handler(chart_type)
    show_cpg = show_chart_per_group(**inputs)
    show_yaxis = show_yaxis_ranges(**inputs)
    bar_style = bar_input_style(**inputs)

    options = build_input_options(df, **inputs)
    x_options, y_multi_options, y_single_options, z_options, group_options, barsort_options, yaxis_options = options
    query_placeholder = (
        "Enter pandas query (ex: col1 == 1)"
    )
    query_label = html.Div([
        html.Span('Query'),
        html.A(html.I(className='fa fa-info-circle ml-4'),
               href='https://pandas.pydata.org/pandas-docs/stable/user_guide/indexing.html#indexing-query',
               target='_blank', style={'color': 'white'})
    ], className='input-group-addon', style={'min-width': '7em'})
    return html.Div([
        dcc.Store(id='query-data', data=inputs.get('query')),
        dcc.Store(id='input-data', data={k: v for k, v in inputs.items() if k not in ['cpg', 'barmode', 'barsort']}),
        dcc.Store(id='chart-input-data', data={k: v for k, v in inputs.items() if k in ['cpg', 'barmode', 'barsort']}),
        dcc.Store(id='range-data'),
        dcc.Store(id='yaxis-data', data=inputs.get('yaxis')),
        dcc.Store(id='last-chart-input-data', data=inputs),
        dcc.Input(id='chart-code', type='hidden'),
        html.Div(html.Div(dcc.Tabs(
            id='chart-tabs',
            value=chart_type or 'line',
            children=[build_tab(t.get('label', t['value'].capitalize()), t['value']) for t in CHARTS],
            style=dict(height='36px')
        ), className='col-md-12'), className='row pt-3 pb-3 charts-filters'),
        html.Div(html.Div([
            html.Div([
                query_label, dcc.Input(
                    id='query-input', type='text', placeholder=query_placeholder, className='form-control',
                    value=inputs.get('query') or settings.get('query'), style={'line-height': 'inherit'})
            ], className='input-group mr-3')],
            className='col'
        ), className='row pt-3 pb-3 charts-filters'),
        html.Div([
            build_input('X', dcc.Dropdown(
                id='x-dropdown',
                options=x_options,
                placeholder='Select a column',
                value=x,
                style=dict(width='inherit'),
            )),
            build_input('Y', dcc.Dropdown(
                id='y-multi-dropdown',
                options=y_multi_options,
                multi=True,
                placeholder='Select a column(s)',
                style=dict(width='inherit'),
                value=y if show_input('y', 'multi') else None
            ), className='col', id='y-multi-input', style={'display': 'block' if show_input('y', 'multi') else 'none'}),
            build_input('Y', dcc.Dropdown(
                id='y-single-dropdown',
                options=y_single_options,
                placeholder='Select a column',
                style=dict(width='inherit'),
                value=y[0] if show_input('y') and len(y) else None
            ), className='col', id='y-single-input', style={'display': 'block' if show_input('y') else 'none'}),
            build_input('Z', dcc.Dropdown(
                id='z-dropdown',
                options=z_options,
                placeholder='Select a column',
                style=dict(width='inherit'),
                value=z
            ), className='col', id='z-input', style={'display': 'block' if show_input('z') else 'none'}),
            build_input('Group', dcc.Dropdown(
                id='group-dropdown',
                options=group_options,
                multi=True,
                placeholder='Select a group(s)',
                value=group,
                style=dict(width='inherit'),
            ), className='col', id='group-input', style={'display': 'block' if show_input('group') else 'none'}),
        ], className='row pt-3 pb-3 charts-filters'),
        html.Div([
            build_input('Aggregation', dcc.Dropdown(
                id='agg-dropdown',
                options=[build_option(v, AGGS[v]) for v in ['count', 'nunique', 'sum', 'mean', 'rolling', 'corr',
                                                            'first', 'last', 'median', 'min', 'max', 'std', 'var',
                                                            'mad', 'prod']],
                placeholder='Select an aggregation',
                style=dict(width='inherit'),
                value=agg,
            )),
            html.Div([
                build_input('Window', dcc.Input(
                    id='window-input', type='number', placeholder='Enter days', className='form-control text-center',
                    style={'line-height': 'inherit'}, value=inputs.get('window')
                )),
                build_input('Computation', dcc.Dropdown(
                    id='rolling-comp-dropdown',
                    options=[
                        build_option('corr', 'Correlation'),
                        build_option('count', 'Count'),
                        build_option('cov', 'Covariance'),
                        build_option('kurt', 'Kurtosis'),
                        build_option('max', 'Maximum'),
                        build_option('mean', 'Mean'),
                        build_option('median', 'Median'),
                        build_option('min', 'Minimum'),
                        build_option('skew', 'Skew'),
                        build_option('std', 'Standard Deviation'),
                        build_option('sum', 'Sum'),
                        build_option('var', 'Variance'),
                    ],
                    placeholder='Select an computation',
                    style=dict(width='inherit'), value=inputs.get('rolling_comp')
                ))
            ], id='rolling-inputs', style=dict(display='block' if agg == 'rolling' else 'none'))
        ], className='row pt-3 pb-3 charts-filters'),
        html.Div(
            [
                build_input('Chart Per\nGroup',
                            html.Div(daq.BooleanSwitch(id='cpg-toggle', on=inputs.get('cpg') or False),
                                     className='toggle-wrapper'),
                            id='cpg-input', style={'display': 'block' if show_cpg else 'none'}, className='col-auto'),
                build_input('Barmode', dcc.Dropdown(
                    id='barmode-dropdown',
                    options=[
                        build_option('group', 'Group'),
                        build_option('stack', 'Stack'),
                        build_option('relative', 'Relative'),
                    ],
                    value=inputs.get('barmode') or 'group',
                    placeholder='Select a mode',
                ), className='col-auto addon-min-width', style=bar_style, id='barmode-input'),
                build_input('Barsort', dcc.Dropdown(
                    id='barsort-dropdown', options=barsort_options, value=inputs.get('barsort')
                ), className='col-auto addon-min-width', style=bar_style, id='barsort-input'),
                html.Div(
                    html.Div(
                        [
                            html.Span('Y-Axis', className='input-group-addon'),
                            dcc.Dropdown(id='yaxis-dropdown', options=yaxis_options),
                            html.Span('Min:', className='input-group-addon col-auto'),
                            dcc.Input(
                                id='yaxis-min-input', type='number', className='form-control col-auto',
                                style={'line-height': 'inherit'}
                            ),
                            html.Span('Max:', className='input-group-addon col-auto'),
                            dcc.Input(
                                id='yaxis-max-input', type='number', className='form-control col-auto',
                                style={'line-height': 'inherit'}
                            )
                        ],
                        className='input-group',
                    ),
                    className='col-auto addon-min-width', id='yaxis-input',
                    style=dict(display='block' if show_yaxis else 'none')
                ),
            ],
            className='row pt-3 pb-5 charts-filters'
        ),
        dcc.Loading(html.Div(id='chart-content', style={'height': '70vh'}), type='circle'),
        dcc.Textarea(id="copy-text", style=dict(position='absolute', left='-110%'))
    ], className='charts-body')
Exemplo n.º 4
0
 layout_header,
 html.H3('Inversión Internacional'),
 html.Div([
     html.P('Intervalo de fechas.'),
     dcc.DatePickerRange(
         id='daterange_internacional',
         first_day_of_week=1,
         min_date_allowed=datetime(2016, 1, 1),
         max_date_allowed=end_date,
         initial_visible_month=end_date,
         start_date=start_date,
         end_date=end_date,
         display_format='M-D-Y',
     ),
     dcc.Loading(id="loading-icon_fig-ex-fwd",
                 children=[dcc.Graph(id='fig_ex-fwd')],
                 type="circle"),
 ],
          className='pretty_container'),
 html.Div([
     dcc.Checklist(id='check_fig-ex',
                   options=[{
                       'label': ' Mostrar en porcentaje',
                       'value': 'True'
                   }],
                   className="dcc_control no-print"),
     dcc.Loading(id="loading-icon_fig-ex",
                 children=[dcc.Graph(id='fig_ex')],
                 type="circle"),
 ],
          className='pretty_container'),
Exemplo n.º 5
0
def create_app_ui():
    # Create the UI of the Webpage here
    main_layout = html.Div([
        html.H1('CDR Analysis with Insights',
                id='Main_title',
                style={
                    'backgroundColor': 'black',
                    "color": "white",
                    'align': 'center',
                    'textAlign': 'center'
                }),
        dcc.Tabs(id="Tabs",
                 value="tab-1",
                 children=[
                     dcc.Tab(label="Call Analytics tool",
                             id="Call Analytics tool",
                             value="tab-1",
                             children=[
                                 html.Br(),
                                 html.Br(),
                                 dcc.Dropdown(
                                     id='start-date-dropdown',
                                     options=start_date_list,
                                     placeholder="Select Starting Date here",
                                     value="2019-06-20"),
                                 dcc.Dropdown(
                                     id='end-date-dropdown',
                                     options=end_date_list,
                                     placeholder="Select Ending Date here",
                                     value="2019-06-25"),
                                 dcc.Dropdown(id='group-dropdown',
                                              placeholder="Select group here",
                                              multi=True),
                                 dcc.Dropdown(id='Report-type-dropdown',
                                              options=report_type_list,
                                              placeholder="Select Report Type",
                                              value="Hourly")
                             ]),
                     dcc.Tab(label="Device Analytics tool",
                             id="Device Analytics tool",
                             value="tab-2",
                             children=[
                                 html.Br(),
                                 dcc.Dropdown(id='device-date-dropdown',
                                              options=start_date_list,
                                              placeholder="Select Date here",
                                              multi=True),
                                 html.Br()
                             ]),
                     dcc.Tab(label="Service Analytics tool",
                             id="Service Analytics tool",
                             value="tab-3",
                             children=[
                                 html.Br(),
                                 dcc.Dropdown(id='service-date-dropdown',
                                              options=start_date_list,
                                              placeholder="Select Date here",
                                              multi=True),
                                 html.Br()
                             ])
                 ]),
        html.Br(),
        dcc.Loading(
            html.Div(id='visualization-object', children='Graph,Card, Table')),
    ])
    return main_layout
Exemplo n.º 6
0
                    'lineHeight': '60px',
                    'borderWidth': '1px',
                    'borderStyle': 'dashed',
                    'borderRadius': '25px',
                    'textAlign': 'center',
                    'marginBottom': '10px',
                    'marginLeft': '50px',
                    #'margin' : 'auto',
                },
                # Allow multiple files to be uploaded
                multiple=True,
                accept='image/*'),
            dcc.Loading(id="loading-1",
                        children=[
                            html.Div(id='output_mrkdwn',
                                     children=dcc.Markdown(INITIAL_MESSAGE)),
                            html.Div(id='output-image-upload'),
                            html.Div(id='tabs-content',
                                     style={'margin': 'auto'})
                        ]),
        ],
        style={  #'float':'right',
            'float': 'middle',
            'width': '70%',
        },
    ),
])
# _________________________End of Layout__________________________________
# ________________________________________________________________________
'''_________________________Image layout___________________________________'''

Exemplo n.º 7
0
def layout():
    """Dynamically serve a layout based on updated DB values (for dropdown menu)"""
    # Needs db connection! (Set up tunnel if testing app locally)
    _ids = get_doc_ids_from_db()
    dropdown_dates = {num2str_month(_id): _id for _id in _ids}

    children_list = [
        html.Div([
            html.H2('Topic modelling'),
            dcc.Markdown('''
                Our goal in this section is to analyze whether female
                and male sources are more likely to be associated with specific topics in 
                the news. We utilize data scraped from seven Canadian news
                organizations' websites, following which we identify the gender of those quoted
                (*sources*). We then perform large-scale topic discovery on each month's data 
                using Latent Dirichlet Allocation (LDA), as shown below.
            ''')
        ], ),
        html.Div(
            html.Img(src="/static/topic-pipeline-flowchart-1.png",
                     style={'width': '100%'})),
        html.Br(),
        html.
        P('From the dropdown menu below, select a recent month to view its results.'
          ),
        dcc.Dropdown(id='date-dropdown',
                     options=[{
                         'label': date_str,
                         'value': date_num
                     } for date_str, date_num in dropdown_dates.items()],
                     value=_ids[-1],
                     className='dropdown'),
        html.Br(),
        html.H4('Top keywords for each topic discovered'),
        html.Div(
            DataTable(
                id='topic-table',
                columns=[
                    {
                        'name': 'Topic labels',
                        'id': 'topic_names'
                    },
                    {
                        'name': 'Keywords',
                        'id': 'topic_words'
                    },
                ],
                style_table={'overflowX': 'auto'},
                style_cell={
                    'backgroundColor': 'rgba(102, 204, 204, 0.05)',
                    'textAlign': 'left',
                    'font_family': 'Arial',
                    'padding': '0px 10px',
                },
                style_data={
                    'height': 'auto',
                    'lineHeight': '30px'
                },
                style_header={
                    'backgroundColor': 'rgb(255, 255, 255)',
                    'text-align': 'left',
                },
                style_as_list_view=True,
            )),
        html.Br(),
        html.Div(
            dcc.Loading(id='topic-load-progress',
                        children=[dcc.Store(id='topic-data')])),
        # html.H4('Topics per outlet'),
        html.H5('''
            Which topics were covered more extensively by each outlet?
        '''),
        html.Div([dcc.Graph(id='outlet-heatmap')]),
        html.Div(
            html.Img(src="/static/topic-pipeline-flowchart-2.png",
                     style={'width': '100%'})),
        dcc.Markdown('''
            Once we identify topics, we calculate an aggregated quantity that we call *gender prominence*,
            which is a measure that characterizes whether a given topic (on average) featured more
            prominently in articles that quote one gender more frequently than they do the other.
            
            To do this, we separate our news corpus for the given month into two smaller corpora - one 
            with articles that contain majority-female sources (at least one more female source than male),
            and the other with articles that contain majority-male sources. These corpora are termed the
            "female corpus" and "male corpus" respectively.
        '''),
        html.Br(),
        # html.H4('Topics and gender representation among sources'),
        html.H5('''
            Which topics showed the largest difference in gender representation?
        '''),
        html.Div(id='female-male-corpus-stats'),
        html.Div([
            dcc.Graph(id='outlet-gender-heatmap'),
            dcc.Markdown('''
                Topics that are red exhibit 'female prominence', i.e., they are topics
                for which the mean topic intensity is much greater in the female corpus than
                it is in the male corpus. The opposite is true for topics that exhibit 'male prominence'
                (shown in blue).
            '''),
            html.Br(),
            html.H5('''
                Which topics were covered more extensively in the female corpus?
            '''),
            html.Div(id='female-corpus-stats'),
            dcc.Graph(id='female-topic-bars'),
            html.Br(),
            html.H5('''
                Which topics were covered more extensively in the male corpus?
            '''),
            html.Div(id='male-corpus-stats'),
            dcc.Graph(id='male-topic-bars'),
            html.Br(),
        ]),
        html.Br(),
        dcc.Markdown('''
            [Click here](/static/GGT_topic_model_technical_report.pdf) to learn more about
            the Gender Gap Tracker's topic modelling methodology.
        '''),
    ]
    return children_list
Exemplo n.º 8
0
                                html.Div(
                                    className="banner",
                                    style={
                                        "marginBottom": "1.5em"
                                    },
                                    children=[
                                        html.H6("Performance vs Benchmark")
                                    ],
                                ),
                                dcc.Loading(
                                    id="benchmark_overlay_graph_loading",
                                    type="default",
                                    children=[
                                        dcc.Graph(
                                            id="benchmark_overlay_graph",
                                            figure={
                                                "layout": default_layout
                                            },
                                            config={'displayModeBar': False, 'showTips': False}
                                        ),
                                    ],
                                ),
                            ],
                        ),
                    ],
                ),
            ],
        ),
    ],
)
Exemplo n.º 9
0
                     "label": "Alumni",
                     "value": "Alumni"
                 },
             ],
             value=["Actives", "Inactives"],
             multi=True,
         ),
     ],
     style=style["big_graph"],
 ),
 html.Div(
     children=[
         dcc.Loading(
             type="default",
             children=[
                 # Graph 1: Chapter size over time
                 dcc.Graph(id="composition-graph"),
             ],
         )
     ],
     style=style["big_graph"],
 ),
 html.Div(
     children=[
         html.Div(
             children=[
                 html.Div(id="actives-num"),
                 html.H6(
                     "Actives",
                     style=dict(color=COLORS["Actives"],
                                textAlign="center"),
Exemplo n.º 10
0
def get_str_dtype(df, col):
    """Return dtype of col in df"""
    dtypes = ['datetime', 'bool', 'int', 'float', 'object', 'category']
    for d in dtypes:
        if d in str(df.dtypes.loc[col]).lower():
            return d


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

server = app.server

app.layout = html.Div(
    [
        dcc.Loading(dcc.Store(id='twitter_df', storage_type='memory')),
        html.Br(),
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.A(
                            [
                                html.Img(
                                    src='data:image/png;base64,' + img_base64,
                                    width=200,
                                    style={'display': 'inline-block'}),
                            ],
                            href='https://github.com/eliasdabbas/advertools'),
                        html.Br(),
                        # html.A(children=['online marketing', html.Br(),
Exemplo n.º 11
0
    #     multi=True,

    #     placeholder="You can select multiple companies",
    # ),
        
        # For productive deployment use the following options:
        options=format_for_dashdropdown(get_companies_from_sec()),
        multi=True, 
        placeholder="You can select multiple companies"
    ),
    html.Br(),
    # html.Hr(),
    
    dcc.Loading(
        id='loading-1', type='default',
        children = dcc.Graph(id='my-graph', figure={})
        # fullscreen=True
    ),
    
    html.Div([
        html.H3('[X-Axis] Graph time horizon:', 
        style={'width': '49%', 'display': 'inline-block'}),
        html.H3('[Y-Axis] Graph mode:',
        style={'width': '49%', 'display': 'inline-block'})
    ]),
    
    html.Div([
        dcc.RadioItems(
            id='view-periode',
            options=[
                {'label': '1M', 'value': '30D'},
Exemplo n.º 12
0
                                        'value': 2
                                    }],
                                    value=1)
                 ]),

        # column 4
        html.Div(
            id='input-column-4',
            className='three columns',
            children=[
                html.Button('Run', id='start-heuristic', n_clicks=0),
                # dcc.Div(id='progress-value',),
                # html.Br(),
                dcc.Loading(
                    id="loading",
                    children=[html.Div(id="loading-output-2")],
                    type="default",
                ),
                html.Div(id='click_status', children=[]),
            ]),

        # right column
        # html.Div(
        #     id='heuristic-right-column',
        #     className='seven columns',
        #     children=[
        #         html.Div(id='heuristic-output', children='Click the Run button'),
        #         dash_table.DataTable(id='heuristic-output-table',
        #                              columns=[{'name': i, 'id': i} for i in ['staging', 'sender', 'receiver', 'staging1', 'vehicleType', 'patientType', 'scenario', 'value']],  # receiver / name
        #                              page_current=0,
        #                              page_size=10,
 children=[
     html.P(
         id="map-title",
         children=
         "CONFIRMED CASES AND DEATHS BY COUNTRY UPDATED EVERY 10 SECONDS",
     ),
     html.Div(
         id="loading-outer-frame",
         children=[
             dcc.Loading(
                 id="loading",
                 children=dcc.Graph(id='graph1',
                                    figure={
                                        "data": [],
                                        "layout": []
                                    },
                                    style={
                                        'width': '100%',
                                        'hight': '100%',
                                        'margin': '0%'
                                    }),
             )
         ],
     ),
 ],
 style={
     'width': '46%',
     'hight': '120%',
     'margin': '0%',
     'display': 'inline-block',
     'animation-name': 'example',
Exemplo n.º 14
0
### SIDEBAR ###
side_bar = html.Div([
    account_dropdown, currency_dropdown, country_code_dropdown, label_dropdown,
    date_range, filter_button, clear_filter_button
],
                    style={'height': '100vh'})

### GRAPH ###
graph_type_selection = dbc.ButtonGroup([
    dbc.Button("Plot", id='plot-graph-button', color='info'),
    dbc.Button("Tree", id='tree-graph-button', color='info'),
    dbc.Button("Map", id='map-graph-button', color='info')
])

graph = dbc.Card(dcc.Loading(dcc.Graph(id='graph')))

### BODY ###
body = html.Div(
    dbc.Row([
        dbc.Col(side_bar, className='m-2', width=3),
        dbc.Col([
            dbc.Row(graph_type_selection, justify='end', className='mt-2'),
            dbc.Row(dbc.Col(graph), className='mt-2')
        ],
                className='mr-4')
    ]))

### LAYOUT ###
layout = html.Div([body, data_store])
Exemplo n.º 15
0
                     style={
                         'font-weight': 'bold',
                         'text-align': 'center',
                         'font-size': 25,
                         'color': 'black',
                         'text-align': 'center'
                     })
        ],
                         style={'background-color': '#fadcf4'}),
                md=2)
    ]),

    ##### dropdowns

    ### Stacked Bar Chart
    dcc.Loading(id="loading1", children=[html.Div(dcc.Graph(id="barchart1"))]),
    ### Pie Chart
    dbc.Row([
        dbc.Col(html.Div([dcc.Graph(id="barchart2")]), md=4),
        dbc.Col(html.Div([dcc.Graph(id="piechart")]), md=4),
        dbc.Col(html.Div([dcc.Graph(id="boxplot")]), md=4),
    ])
])

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


@app.callback(dash.dependencies.Output('WHO_dropdown', 'value'),
              [dash.dependencies.Input('clear-button', 'n_clicks')])
def clearWho(clicks):
    if clicks == 0:
Exemplo n.º 16
0
         #dbc.Button("Загрузить данные", id='submit-button', color="secondary"),
         html.Div(
             dbc.Button(id='download-link',
                        children='Сохранить отчет за месяц')
         )
     ],
     md=4,
 ),
 dbc.Col([
     #html.H4("График за месяц"),
     html.Div([
         dcc.Loading(id='loading-1',
                     children=[
                         html.Div(
                             dcc.Graph(
                                 id='month-graph',
                                 style={'height': '400px'}))
                     ],
                     type='circle',
                     fullscreen=True)
     ]),
     html.Div([
         dcc.Loading(id='loading-2',
                     children=[
                         html.Div(id='json-month-data',
                                  style={'display': 'none'})
                     ],
                     type='circle',
                     fullscreen=True)
     ]),
     #html.Div(id='json-month-data', style={'display': 'none'}),
Exemplo n.º 17
0
                    labelStyle={'display': 'inline-block'}),
     dcc.Textarea(
         id='translation-input',
         style={
             'width': '100%',
             'height': 200
         },
     ),
     html.Button(children=strings.TRANSLATE_BTN_LABEL,
                 id='translate-btn',
                 n_clicks=0,
                 className="input-btn"),
     dcc.Loading(id='translate-loader',
                 type='circle',
                 children=[
                     html.Div(id='translate-output-container',
                              children="",
                              className="output-container")
                 ],
                 parent_className='loader')
 ],
          className="input-div"),
 html.Div(children=[
     html.P(strings.DETECT_DESCRIPTION),
     dcc.RadioItems(id='algorithm-chooser',
                    options=[
                        {
                            'label': 'Red Neuronal',
                            'value': 'nn'
                        },
                        {
                            'label': 'SVM',
Exemplo n.º 18
0
                 id='submit-val-redirect',
                 className="btn waves-effect waves-light"),
                      id='url-link',
                      href='https://vk.com/search',
                      target="_blank"),
         ],
                  className='input-field col s4 push-s2')
     ],
              className='row',
              style=style_block)
 ] + [
     html.Div([
         dcc.Loading(
             id="loading-2",
             children=[
                 html.H5([html.H5(id="loading-output-2")])
             ],
             type="circle",
         )
     ],
              className='row')
 ] + [
     html.Div([
         html.H5('ID пользователя в ВК: ',
                 className='col s3'),
         html.H5(id='user_id',
                 style={
                     'color': 'green',
                 },
                 className='col s3')
     ],
Exemplo n.º 19
0
    def setup_default_graph(self):
        """General graph with all the nodes available."""
        # Set layout
        layout = html.Div([
            html.Div(className='eight columns', children=[
                dcc.Loading(
                    id='loading-1',
                    type='default',
                    children=cyto.Cytoscape(
                        id='cytoscape' + self.name,
                        elements=self.data,
                        stylesheet=DEFAULT_STYLESHEET,
                        style={
                            'height': '100vh',
                            'width': '100%'
                        })
                )
            ]),
            html.Div(style=STYLES['tab'], className='four columns', children=[
                dcc.Tabs(id='tabs' + self.name, children=[
                    dcc.Tab(label='Control Panel', children=[
                        html.Div(
                            id='rules-box' + self.name,
                            children=[
                                drc.NamedDropdown(
                                    name='Filters',
                                    id='dropdown-rules' + self.name,
                                    options=drc.DropdownOptionsList(
                                        *RULES
                                    ),
                                    value=RULE,
                                    clearable=False
                                )],
                            style=STYLES['search'],
                            ) if self.rules_enable else '',
                        drc.NamedDropdown(
                            name='Layout',
                            id='dropdown-layout' + self.name,
                            options=drc.DropdownOptionsList(
                                'random',
                                'grid',
                                'circle',
                                'concentric',
                                'breadthfirst',
                                'cose'
                            ),
                            value='grid',
                            clearable=False
                        ),
                        drc.NamedDropdown(
                            name='Expand by',
                            id='dropdown-expand' + self.name,
                            options=drc.DropdownOptionsList(
                                *self.element_types
                            ),
                            value=self.element_types[0],
                            clearable=False
                        ) if self.expand_enable else '',
                        html.Div(
                            id='custom' + self.name,
                            style=STYLES['inputs'], children=[
                                drc.NamedInput(
                                    style=STYLES['text-inputs'],
                                    name='Custom Query',
                                    id='custom-query' + self.name,
                                    value='',
                                    placeholder=(
                                        'MATCH (n)-[r]-(m) WHERE ID(n) = {id} '
                                        'RETURN n, r, m')),
                                drc.NamedInput(
                                    style=STYLES['text-inputs'],
                                    name='Custom Query Variables',
                                    id='custom-query-variables' + self.name,
                                    value='',
                                    placeholder='n, r, m')]
                            ) if self.expand_enable else '',
                        drc.NamedRadioItems(
                            name='Selection options',
                            id='selection-options' + self.name,
                            options=[
                                {'label': 'Only keep selection',
                                 'value': 'focus'},
                                {'label': 'Keep all the nodes',
                                 'value': 'no_focus'}
                                ],
                            value='focus'
                            ),
                        html.Div(
                            id='actions-box' + self.name,
                            children=[
                                html.Button(
                                    children='Reset',
                                    id='reset-submit' + self.name,
                                    type='submit',
                                    className='button',
                                    n_clicks=0),
                                html.A(
                                    children='Export data',
                                    id='export-submit' + self.name,
                                    className='button',
                                    href='/download/' + self.name),
                                html.Button(
                                    children='Custom search',
                                    id='custom-search' + self.name,
                                    type='button',
                                    className='button',
                                    n_clicks=0)
                                ],
                            style=STYLES['actions'],
                            ),
                        html.Div(
                            id='search-box' + self.name,
                            children=[
                                dcc.Input(
                                    style=STYLES['text-inputs'],
                                    id='search' + self.name,
                                    type='text', value='',
                                    placeholder='MATCH (n)-[r]-(n2:Property) RETURN n,r'),
                                html.Button(
                                    children='Search',
                                    id='search-submit' + self.name,
                                    type='submit',
                                    className='button',
                                    n_clicks=0),
                                ],
                            style=STYLES['search'],
                            ),
                        html.Div(
                            id='node-number' + self.name
                            )
                    ]),
                    dcc.Tab(label='Elements Properties', children=[
                        html.Div(
                            children=[
                                html.P('Element Object JSON:'),
                                dash_treeview_antd.TreeView(
                                    id='hover-element-json-output' + self.name,
                                    multiple=False,
                                    checkable=False,
                                    selected=[],
                                    expanded=['root'],
                                    data={})
                                ],
                            style=STYLES['json-output'])
                        ]),
                    dcc.Tab(label='Graph Conventions', children=[
                        html.Div(children=[
                            html.Br(),
                            html.Div(
                                className='center',
                                children=[
                                    html.Img(
                                        className='responsive',
                                        src='../assets/images/convention.svg'
                                        )])
                             ])
                        ])
                ]),
            ])
        ])

        return layout
Exemplo n.º 20
0
                        ),
                        className="canvas-outer",
                        style={"margin-top": "1em"},
                    ),
                ],
                className="v-card-content",
            ),
            html.Div(
                html.Button(id="clear", children="clear"),
                className="v-card-content-markdown-outer",
            ),
            html.Div(
                [
                    html.B("Text Recognition Output",
                           className="section_title"),
                    dcc.Loading(dcc.Markdown(id="text-output", children="")),
                ],
                className="v-card-content",
                style={"margin-top": "1em"},
            ),
        ],
        className="app__content",
    ),
])


@app.callback(Output("canvas", "json_objects"), [Input("clear", "n_clicks")])
def clear_canvas(n):
    if n is None:
        return dash.no_update
    strings = ['{"objects":[ ]}', '{"objects":[]}']
Exemplo n.º 21
0
def set_layout(app):
    header = [getHeader(app)]
    body = [
        html.Div(className='col col-12 my-3',
                 children=[
                     html.Div(children=[
                         dcc.Loading(color=BRAND, children=[
                                     dcc.Graph(
                                         id='cve_suppressions_most_frequent',
                                         figure=cve_suppressions_most_frequent.get_fig()
                                     )
                                     ])
                     ]),
                 ]),
        html.Div(className='col col-12 col-xl-6 my-3',
                 children=[
                     html.Div(children=[
                         dcc.Loading(color=BRAND, children=[
                                     dcc.Graph(
                                         id='cve_suppressions_per_team',
                                         figure=cve_suppressions_per_team.get_fig()
                                     )
                                     ])
                     ]),
                 ]),
        html.Div(className='col col-12 col-xl-6 my-3',
                 children=[
                     html.Div(children=[
                         dcc.Loading(color=BRAND, children=[
                                     dcc.Graph(
                                         id='js_apps_checks',
                                         figure=js_apps_checks.get_fig()
                                     )
                                     ])
                     ]),
                 ]),

        html.Div(className='col col-12 col-xl-6 my-3',
                 children=[
                     html.Div(children=[
                         dcc.Loading(color=BRAND, children=[
                              dcc.Graph(
                                  id='node_versions',
                                  figure=node_versions.get_fig()
                              )
                              ])
                     ]),
                 ]),
        html.Div(className='col col-12 col-xl-6 my-3',
                 children=[
                     html.Div(children=[
                         dcc.Loading(color=BRAND, children=[
                              dcc.Graph(
                                  id='java_versions',
                                  figure=java_versions.get_fig()
                              )
                              ])
                     ]),
                 ]),
    ]

    app.layout = layout(header, body)
Exemplo n.º 22
0
                           'value': 'True'
                       },
                       {
                           'label': 'No',
                           'value': 'False'
                       },
                   ],
                   value='True',
                   labelStyle={
                       'display': 'inline-block',
                       'margin': '5px'
                   }),
    html.Button('Submit', id='button'),
    dcc.Loading(children=[
        html.Div(id='compute-details'),
        html.Div(id='plot-download'),
        html.Div(id='plot-qiime2'),
        html.Div(id='plot-output')
    ])
]

BODY = dbc.Container(
    [
        dbc.Row([
            dbc.Col(dbc.Card(DASHBOARD)),
        ], style={"marginTop": 30}),
    ],
    className="mt-12",
)

app.layout = html.Div(children=[NAVBAR, BODY])
Exemplo n.º 23
0
             value='State'),
         dcc.RadioItems(id='crossfilter-xaxis-time',
                        options=[{
                            'label': i,
                            'value': i
                        } for i in ['Minute', '10-Minute', 'Hours']],
                        value='Minute',
                        labelStyle={'display': 'inline-block'})
     ],
     style={
         'width': '49%',
         'display': 'inline-block'
     }),
 dcc.Input(id="input-1", value='Input triggers local spinner'),
 dcc.Loading(id="loading-1",
             children=[html.Div(id="loading-output-1")],
             type="default"),
 html.Div([
     dcc.Input(id="input-2", value='Input triggers nested spinner'),
     dcc.Loading(
         id="loading-2",
         children=[html.Div([html.Div(id="loading-output-2")])],
         type="circle",
     )
 ]),
 html.Div(
     id="kpi_1_container",
     className="chart_div pretty_container",
     children=[
         html.P("KPI 1"),
         dcc.Graph(id="kpi_1", config=dict(displayModeBar=False)),
Exemplo n.º 24
0
                     } for i in list(df.columns.values)],
                     placeholder=
                     'Pick an economic indicator...',
                 )
             ],
             className="app__dropdown",
         ),
         html.Br(),
         html.Span(
             "Tip: Drag to zoom, double click to reset."),
         dcc.Loading(
             id="loading-icon-ta",
             children=[
                 html.Div(
                     dcc.Graph(id="economics_graph",
                               figure=fig,
                               config={
                                   'displayModeBar': False,
                                   'scrollZoom': False
                               }))
             ],
             type="default"),
         html.Br(),
         html.Br(),
         html.Span("March release for "),
         html.Span(id='metric_name',
                   children='N/A - pick a metric above.'),
         html.Span(id='metric_value', children=''),
         html.Br(),
     ],
     className="two-thirds column",
 ),
Exemplo n.º 25
0
    ],
    color='dark',
    dark=True,
    sticky='top',
)


MOL_LOADING= html.Div(id='speck-body',
                      className='app-body',
                      children=[
                          dcc.Loading(className='dashbio-loading',
                                      children=html.Div(
                                          id='speck-container',
                                          children=[
                                              dash_bio.Speck(
                                                  id='speck',
                                                  view={'resolution':600, 'zoom':0.1},
                                                  scrollZoom=True
                                              )
                                          ]),
                                      )
                      ]
)

LEFT_COLUMN =dbc.Jumbotron(
    [
        html.Div(id='speck-control-tabs',
                 className='control-tabs',
                 children=[
                     dcc.Tabs(id='speck-tabs',
                              value='what-is',
Exemplo n.º 26
0
def layout_graphs():
    return [
        dcc.Input(value='', type='hidden', id='load_info'),
        dcc.Input(value='', type='hidden', id='start_info'),
        dcc.Tabs(
            id="tabs",
            value='tab-preview',
            children=[
                dcc.Tab(disabled=True),
                dcc.Tab(
                    label='Preview',
                    value='tab-preview',
                    children=[dcc.Loading(dcc.Graph(id='graph_preview', ))],
                    id='preview_head'),
                dcc.Tab(label='Signal scale',
                        value='tab-raw',
                        children=[dcc.Loading(dcc.Graph(id='graph_raw', ))],
                        id='raw_head'),
                dcc.Tab(label='Base scale',
                        value='tab-base',
                        children=[dcc.Loading(dcc.Graph(id='graph_base', ))],
                        id='base_head'),
                dcc.Tab(
                    label='Base probability',
                    value='tab-prob',
                    children=[
                        html.
                        P('A logo with more then 200 Bases is unreadeable. '
                          'Use the slider or search to determine the shown range.'
                          ),
                        dcc.RangeSlider(min=0,
                                        max=200,
                                        value=[0],
                                        updatemode='drag',
                                        id='logo_range'),
                        dcc.Input(id='range_from', value='0', disabled=True),
                        ' to ',
                        dcc.Input(id='range_to', value='200', disabled=True),
                        dcc.Input(value='[0,200]',
                                  type='hidden',
                                  id='hidden_range'),
                        dcc.Loading([
                            dcc.Graph(id='graph_prob', ),
                        ]),
                        html.H2('Logo Options'),
                        dcc.RadioItems(
                            options=[
                                {
                                    'label': 'Up next',
                                    'value': 'up'
                                },
                                {
                                    'label': 'At call',
                                    'value': 'at'
                                },
                                # {'label': 'Around', 'value': 'ar'},
                            ],
                            value='up',
                            id="logo_options",
                            labelStyle={
                                'display': 'inline-block',
                                'padding': 10
                            })
                    ],
                    id='prob_head'),
            ]),
        html.Div([
            html.H2('Graph Options'),
            dcc.Checklist(options=[
                {
                    'label': 'Stack Traces',
                    'value': 'trace_stack'
                },
                {
                    'label': 'Normalize to 1',
                    'value': 'normalize'
                },
            ],
                          value=[],
                          id="graph_options",
                          labelStyle={
                              'display': 'inline-block',
                              'padding': 10
                          })
        ],
                 id='hide_options'),
        html.Embed(src='/logo.svg',
                   style={
                       'maxWidth': '20%',
                       'maxHeight': '60px',
                       'position': 'absolute',
                       'left': 0,
                       'top': 0
                   },
                   type='image/svg+xml'),
    ]
Exemplo n.º 27
0
                  ],
                  'layout': {
                      'title': 'Dash Data Visualization'
                  }
              }),
    html.H5("Dash Cnavas testing"),
    # dc.DashCanvas(id='canvas-1')
    # html.Canvas(id="html-canvas"),
    # Testing different src for iframe - local html file
    html.Iframe(
        src=
        "https://kitware.github.io/vtk-js/examples/GeometryViewer/GeometryViewer.html",
        # src="assets/geom_view.html",
        height=300,
        width=600),
    dcc.Loading(html.Button(id="test-button"))
])


@app.callback(Output('test-button', 'children'),
              [Input('test-button', 'n_clicks')])
def testing_button(clicks):
    print("number of clicks {}".format(clicks))
    print()
    output = "Start"
    if clicks is None:
        output = "Button"
    else:
        output = "Button {}".format(clicks)
        vps.main()
Exemplo n.º 28
0
             'margin': '10px'
         }),
     html.Div(
         [html.Button(id='submit-button', n_clicks=0, children='Submit')],
         style={
             'width': '20%',
             'display': 'inline-block',
             'vertical-align': 'top',
             'margin': '10px',
             'color': colors['text']
         })
 ]),
 html.Div([
     html.Div(dcc.Loading(html.Div(id='output-image-upload-raw'),
                          style={
                              'position': 'fixed',
                              'top': '50%'
                          }),
              style={
                  'width': '50%',
                  'display': 'inline-block',
                  'height': '100%',
                  'vertical-align': 'middle'
              }),
     html.Div(dcc.Loading(html.Div(id='output-image-upload-kmeans'),
                          style={
                              'position': 'fixed',
                              'top': '50%'
                          }),
              style={
                  'width': '50%',
                              html.P('Please select your favorite genre:'),
                              html.Div(
                                  className='div-for-dropdown',
                                  children=[
                                      dcc.Dropdown(
                                          id='favorite_genre',
                                          options=genres_dic,
                                          style={'backgroundColor': '#1E1E1E'},
                                      ),
                                  ],
                                  style={'color': '#1E1E1E'})
                          ]),
                 html.Div(className='eight columns div-for-charts bg-grey',
                          children=[
                              dcc.Loading(id="loading-1",
                                          type="default",
                                          children=html.Div(
                                              id="movie_recommandation1"))
                          ])
             ])
])

# System2 layout
tab2_content = html.Div(children=[
    html.Div(className='div-user-controls',
             children=[
                 html.H2('Movie Recommandation'),
                 html.P('Please rate these movies as many as possible:'),
                 display_movies_to_rate(movieID_toRate_list),
                 dbc.Button(
                     "Click Here to get your recommendations",
                     id="recommend_button",
Exemplo n.º 30
0
def build_layout():
    layout = dcc.Tab(
        label='Dimension Reduction',
        children=[
            dbc.Row(html.Hr(), style={'height': '3%'}),
            html.Div([
                'Compare tumors and subpopulations via dimension reduction scatterplots. For each plot, select a tumor as well as an attribute used to color each tumor.'
            ]),
            dbc.Container(
                fluid=True,
                children=[
                    dbc.Row(html.Hr(), style={'height': '1%'}),
                    dbc.Row(children=[
                        #dbc.Col(width=100, style={'width': '1%'}),
                        dbc.Row(
                            [
                                dbc.Card(children=[
                                    dbc.CardHeader("Plot 1",
                                                   style={
                                                       "background-color":
                                                       "#e3e3e3",
                                                       "font-weight": "bold",
                                                       "font-size": "Large",
                                                       "text-align": "center"
                                                   }),
                                    dbc.CardBody(
                                        _build_control_panel(1) + [
                                            dbc.Row(html.Hr(),
                                                    style={'height': '3%'}),
                                            html.Div(["Tumor Information:"]),
                                            html.Div(
                                                [
                                                    html.Iframe(
                                                        srcDoc="",
                                                        id='msg-box-1',
                                                        style={
                                                            "width": "100%",
                                                            "border": "0",
                                                            "height": "80px"
                                                        })
                                                ],
                                                style={
                                                    "margin": "3px",
                                                    'border-style': 'dotted',
                                                    'border-width': 'thin'
                                                }),
                                            dbc.Row(html.Hr(),
                                                    style={'height': '3%'}),
                                            dcc.Loading(
                                                id="loading-1",
                                                type="default",
                                                color='black',
                                                children=html.Div([
                                                    html.Div(
                                                        id=
                                                        'dim-reduc-scatter-1',
                                                        children=[
                                                            dcc.Graph(
                                                                figure=
                                                                _build_dim_reduc(
                                                                    DEFAULT_TUMOR_1,
                                                                    2,
                                                                    DEFAULT_ALGO,
                                                                    DEFAULT_NUM_DIM,
                                                                    DEFAULT_GENE,
                                                                    'gene', 2,
                                                                    1.0),
                                                                config=
                                                                _build_plot_config(
                                                                    'svg'),
                                                            )
                                                        ])
                                                ],
                                                                  id=
                                                                  'louad-out-1'
                                                                  )),
                                            dbc.Row([
                                                dbc.Col(
                                                    [],
                                                    width=100,
                                                    style={"width": "15px"}),
                                                dbc.Col(
                                                    [html.H6("Dot size: ")],
                                                    width=100,
                                                    style={"width": "40%"}),
                                                dbc.Col([
                                                    dcc.Slider(
                                                        min=1,
                                                        max=6,
                                                        #step=None,
                                                        value=2,
                                                        id='dot-size-1')
                                                ])
                                            ]),
                                            dbc.Row([
                                                dbc.Col(
                                                    [],
                                                    width=100,
                                                    style={"width": "15px"}),
                                                dbc.Col([html.H6("Opacity: ")],
                                                        width=100,
                                                        style={"width": "40%"
                                                               }),
                                                dbc.Col([
                                                    dcc.Slider(min=0.2,
                                                               max=1,
                                                               step=0.1,
                                                               value=1.0,
                                                               id='alpha-1')
                                                ])
                                            ]),
                                            dbc.Row([
                                                dbc.Col(
                                                    [],
                                                    width=100,
                                                    style={"width": "15px"}),
                                                dbc.Col([
                                                    html.H6(
                                                        "Download format: ")
                                                ],
                                                        width=100,
                                                        style={"width": "40%"
                                                               }),
                                                dbc.Col([
                                                    dcc.Dropdown(
                                                        options=[{
                                                            'label': 'SVG',
                                                            'value': 'svg'
                                                        }, {
                                                            'label': 'PNG',
                                                            'value': 'png'
                                                        }],
                                                        value='svg',
                                                        id='img-format-1')
                                                ])
                                            ])
                                        ])
                                ]
                                         #width={"size": "auto", "order": 1}
                                         ),
                                dbc.Col([], width=100, style={"width": "15px"
                                                              }),
                                dbc.Card(children=[
                                    dbc.CardHeader("Plot 2",
                                                   style={
                                                       "background-color":
                                                       "#e3e3e3",
                                                       "font-weight": "bold",
                                                       "font-size": "Large",
                                                       "text-align": "center"
                                                   }),
                                    dbc.CardBody(
                                        _build_control_panel(2) + [
                                            dbc.Row(html.Hr(),
                                                    style={'height': '3%'}),
                                            html.Div(["Tumor Information:"]),
                                            html.Div(
                                                [
                                                    html.Iframe(
                                                        srcDoc="",
                                                        id='msg-box-2',
                                                        style={
                                                            "width": "100%",
                                                            "border": "0",
                                                            "height": "80px"
                                                        })
                                                ],
                                                style={
                                                    "margin": "3px",
                                                    'border-style': 'dotted',
                                                    'border-width': 'thin'
                                                }),
                                            dbc.Row(html.Hr(),
                                                    style={'height': '3%'}),
                                            dcc.Loading(
                                                id="loading-2",
                                                type="default",
                                                color='black',
                                                children=html.Div([
                                                    html.Div(
                                                        id=
                                                        'dim-reduc-scatter-2',
                                                        children=[
                                                            dcc.Graph(
                                                                figure=
                                                                _build_dim_reduc(
                                                                    DEFAULT_TUMOR_2,
                                                                    2,
                                                                    DEFAULT_ALGO,
                                                                    DEFAULT_NUM_DIM,
                                                                    DEFAULT_GENE,
                                                                    'gene', 2,
                                                                    1.0),
                                                                config=
                                                                _build_plot_config(
                                                                    'svg'),
                                                            )
                                                        ])
                                                ],
                                                                  id=
                                                                  'louad-out-2'
                                                                  )),
                                            dbc.Row([
                                                dbc.Col(
                                                    [],
                                                    width=100,
                                                    style={"width": "15px"}),
                                                dbc.Col(
                                                    [html.H6("Dot size: ")],
                                                    width=100,
                                                    style={"width": "40%"}),
                                                dbc.Col([
                                                    dcc.Slider(
                                                        min=1,
                                                        max=6,
                                                        #step=None,
                                                        value=2,
                                                        id='dot-size-2')
                                                ])
                                            ]),
                                            dbc.Row([
                                                dbc.Col(
                                                    [],
                                                    width=100,
                                                    style={"width": "15px"}),
                                                dbc.Col([html.H6("Opacity: ")],
                                                        width=100,
                                                        style={"width": "40%"
                                                               }),
                                                dbc.Col([
                                                    dcc.Slider(min=0.2,
                                                               max=1,
                                                               step=0.1,
                                                               value=1.0,
                                                               id='alpha-2')
                                                ])
                                            ]),
                                            dbc.Row([
                                                dbc.Col(
                                                    [],
                                                    width=100,
                                                    style={"width": "15px"}),
                                                dbc.Col([
                                                    html.H6(
                                                        "Download format: ")
                                                ],
                                                        width=100,
                                                        style={"width": "40%"
                                                               }),
                                                dbc.Col([
                                                    dcc.Dropdown(
                                                        options=[{
                                                            'label': 'SVG',
                                                            'value': 'svg'
                                                        }, {
                                                            'label': 'PNG',
                                                            'value': 'png'
                                                        }],
                                                        value='svg',
                                                        id='img-format-2')
                                                ])
                                            ])
                                        ])
                                ]
                                         #width={"size": "auto", "order": 1}
                                         )
                            ],
                            #style={"width": "80%"}
                        )
                    ])
                ])
        ])
    return layout