def test_upca001_upload_children_gallery(dash_dcc): app = Dash(__name__) app.layout = html.Div([ html.Div(id="waitfor"), html.Label("Empty"), dcc.Upload(), html.Label("Button"), dcc.Upload(html.Button("Upload File")), html.Label("Text"), dcc.Upload("Upload File"), html.Label("Link"), dcc.Upload(html.A("Upload File")), html.Label("Style"), dcc.Upload( ["Drag and Drop or ", html.A("Select a File")], style={ "width": "100%", "height": "60px", "lineHeight": "60px", "borderWidth": "1px", "borderStyle": "dashed", "borderRadius": "5px", "textAlign": "center", }, ), ]) dash_dcc.start_server(app) time.sleep(0.5) dash_dcc.percy_snapshot("upca001 children gallery") assert dash_dcc.get_logs() == []
def test_upft001_test_upload_with_different_file_types(filetype, dash_dcc): filepath = os.path.join( os.path.dirname(__file__), "upload-assets", f"upft001.{filetype}", ) app = Dash(__name__) app.layout = html.Div( [ html.Div(filepath, id="waitfor"), html.Div( id="upload-div", children=dcc.Upload( id="upload", children=html.Div(["Drag and Drop or ", html.A("Select a File")]), style={ "width": "100%", "height": "60px", "lineHeight": "60px", "borderWidth": "1px", "borderStyle": "dashed", "borderRadius": "5px", "textAlign": "center", }, ), ), html.Div(id="output"), html.Div(DataTable(data=[{}]), style={"display": "none"}), ] ) @app.callback(Output("output", "children"), [Input("upload", "contents")]) def update_output(contents): if contents is not None: return load_data_by_type(filetype, contents) dash_dcc.start_server(app) upload_div = dash_dcc.wait_for_element("#upload-div input[type=file]") upload_div.send_keys(filepath) dash_dcc.wait_for_text_to_equal("#raw-title", "Raw Content") dash_dcc.percy_snapshot("Core" + filepath) assert dash_dcc.get_logs() == []
def get_dummy_elements(): # type: () -> List ''' Returns a list of all elements with callbacks so that the client will not throw errors in each tab. Returns: list: List of html elements. ''' return [ dcc.Input(className='dummy', id='config-query', value=None), html.Div(className='dummy', children=[dash_table.DataTable(id='config-table')]), dcc.Input(className='dummy', id='query', value=None), html.Div(className='dummy', id='config-search-button', n_clicks=None), html.Div(className='dummy', id='search-button', n_clicks=None), html.Div(className='dummy', id='init-button', n_clicks=None), html.Div(className='dummy', id='update-button', n_clicks=None), dcc.Upload(className='dummy', id='upload', contents=None), html.Div(className='dummy', id='save-button', n_clicks=None), ]
def get_configbar(config, query='select * from config'): # type: (Dict, Optional[str]) -> html.Div ''' Get a row of elements used for configuring Shekels. Args: config (dict): Configuration to be displayed. query (str, optional): Query string. Default: None. Returns: Div: Div with buttons and JSON editor. ''' spacer = html.Div(className='col spacer') query = dcc.Input( id='config-query', className='col query', value=query, placeholder='SQL query that uses "FROM config"', type='text', autoFocus=True, debounce=True ) search = get_button('search') search.id = 'config-search-button' init = get_button('init') upload = dcc.Upload( id='upload', children=[get_button('upload')] ) save = get_button('save') row = html.Div( className='row', children=[ query, spacer, search, spacer, init, spacer, upload, spacer, save ], ) configbar = html.Div(id='configbar', className='menubar', children=[row]) return configbar
def _sub_layouts(self): # this is a very custom component based on Bulma css stlyes upload_layout = html.Div( html.Label( [ html.Span( [ Icon(kind="upload"), html.Span( "Choose a file to upload or drag and drop", className="file-label", ), ], className="file-cta", ), # TODO: CSS fix style and un-hide file name html.Span( id=self.id("upload_label"), className="file-name", style={"display": "none"}, ), ], className="file-label", ), className="file is-boxed", # TODO: CSS set sensible max-width, don't hard-code style={"max-width": "312px"}, ) upload = html.Div([ html.Label("Load from your computer: ", className="mpc-label"), dcc.Upload(upload_layout, id=self.id("upload_data"), multiple=False), html.Div(id=self.id("error_message_container")), ]) return {"upload": upload}
def platter_app(): app = Dash(__name__) app.layout = html.Div([ html.Div(id="waitfor"), html.Label("Upload"), dcc.Upload(), html.Label("Horizontal Tabs"), dcc.Tabs( id="tabs", children=[ dcc.Tab( label="Tab one", className="test", style={"border": "1px solid magenta"}, children=[html.Div(["Test"])], ), dcc.Tab( label="Tab two", children=[ html.Div([ html.H1("This is the content in tab 2"), html.P("A graph here would be nice!"), ]) ], id="tab-one", ), dcc.Tab( label="Tab three", children=[ html.Div([html.H1("This is the content in tab 3")]) ], ), ], style={"fontFamily": "system-ui"}, content_style={ "border": "1px solid #d6d6d6", "padding": "44px" }, parent_style={ "maxWidth": "1000px", "margin": "0 auto" }, ), html.Label("Vertical Tabs"), dcc.Tabs( id="tabs1", vertical=True, children=[ dcc.Tab(label="Tab one", children=[html.Div(["Test"])]), dcc.Tab( label="Tab two", children=[ html.Div([ html.H1("This is the content in tab 2"), html.P("A graph here would be nice!"), ]) ], ), dcc.Tab( label="Tab three", children=[ html.Div([html.H1("This is the content in tab 3")]) ], ), ], ), html.Label("Dropdown"), dcc.Dropdown(options=OPTIONS, value="MTL", id="dropdown"), html.Label("Multi-Select Dropdown"), dcc.Dropdown(options=OPTIONS, value=["MTL", "SF"], multi=True), html.Label("Radio Items"), dcc.RadioItems(options=OPTIONS, value="MTL"), html.Label("Checkboxes"), dcc.Checklist(options=OPTIONS, value=["MTL", "SF"]), html.Label("Text Input"), dcc.Input(value="", placeholder="type here", id="textinput"), html.Label("Disabled Text Input"), dcc.Input( value="disabled", type="text", id="disabled-textinput", disabled=True, ), html.Label("Slider"), dcc.Slider( min=0, max=9, marks={i: f"Label {i}" if i == 1 else str(i) for i in range(1, 6)}, value=5, ), html.Label("Graph"), dcc.Graph( id="graph", figure={ "data": [{ "x": [1, 2, 3], "y": [4, 1, 4] }], "layout": { "title": "北京" }, }, ), html.Div([ html.Label("DatePickerSingle"), dcc.DatePickerSingle(id="date-picker-single", date=datetime(1997, 5, 10)), html.Div( [ html.Label("DatePickerSingle - empty input"), dcc.DatePickerSingle(), ], id="dt-single-no-date-value", ), html.Div( [ html.Label( "DatePickerSingle - initial visible month (May 97)"), dcc.DatePickerSingle( initial_visible_month=datetime(1997, 5, 10)), ], id="dt-single-no-date-value-init-month", ), ]), html.Div([ html.Label("DatePickerRange"), dcc.DatePickerRange( id="date-picker-range", start_date_id="startDate", end_date_id="endDate", start_date=datetime(1997, 5, 3), end_date_placeholder_text="Select a date!", ), html.Div( [ html.Label("DatePickerRange - empty input"), dcc.DatePickerRange( start_date_id="startDate", end_date_id="endDate", start_date_placeholder_text="Start date", end_date_placeholder_text="End date", ), ], id="dt-range-no-date-values", ), html.Div( [ html.Label( "DatePickerRange - initial visible month (May 97)"), dcc.DatePickerRange( start_date_id="startDate", end_date_id="endDate", start_date_placeholder_text="Start date", end_date_placeholder_text="End date", initial_visible_month=datetime(1997, 5, 10), ), ], id="dt-range-no-date-values-init-month", ), ]), html.Label("TextArea"), dcc.Textarea(placeholder="Enter a value... 北京", style={"width": "100%"}), html.Label("Markdown"), dcc.Markdown(""" #### Dash and Markdown Dash supports [Markdown](https://rexxars.github.io/react-markdown/). Markdown is a simple way to write and format text. It includes a syntax for things like **bold text** and *italics*, [links](https://rexxars.github.io/react-markdown/), inline `code` snippets, lists, quotes, and more. 1. Links are auto-rendered: https://dash.plotly.com. 2. This uses ~commonmark~ GitHub flavored markdown. Tables are also supported: | First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | 北京 """.replace(" ", "")), dcc.Markdown(["# Line one", "## Line two"]), dcc.Markdown(), dcc.Markdown(""" ```py import python print(3) ```"""), dcc.Markdown(["```py", "import python", "print(3)", "```"]), dcc.Markdown(), ]) yield app
] _label = 'Metadata' _layout = html.Div([ html.H3('Metadata'), dcc.Upload( id='meta-upload', children=html.Div([ 'Drag and Drop or ', html.A('Select Files') ]), style={ 'width': '100%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center', 'margin': '10px' }, # Allow multiple files to be uploaded multiple=True, ), dcc.Markdown('---'), dcc.Markdown('##### Actions'), dbc.Row([ dcc.Dropdown( id='meta-action', options=[ {'label': 'Set', 'value': 'Set'},
def layout(): return html.Div( id='variantmap-body', className='app-body', children=[ html.Div( id='variantmap-control-tabs', className='control-tabs', children=[ dcc.Tabs( id='variantmap-tabs', value='what-is', children=[ # "What is" tab dcc.Tab( label='About', value='what-is', children=html.Div( className='control-tab', children=[ html.H4( className='what-is', children='What is VariantMap?'), html. P('VariantMap is a genomic structural variant (SV) visualization ' 'technique that displays variants across multiple samples in a ' 'single heatmap. Each row represents a sample and each column ' 'represents an SV breakend in the sample cohort. The colors ' 'indicate the class of an SV present in a sample. The ' 'heatmap can be customized interactively to suit your analysis ' 'by changing various components in the "Customize" tab.' ), html. P('VariantMap requires a dataframe object that is generated by ' 'VariantBreak. Do note that only NanoVar VCF ' 'files are currently compatible to work with VariantBreak in creating the ' 'dataframe.') ])), # Data tab dcc.Tab( label='Data', value='data', children=html.Div( className='control-tab', children=[ # Dataset upload html.Div( 'Upload dataset:', title= 'Upload your own dataset below.', className='app-controls-name'), html.Div( id='variantmap-file-upload', title= 'Upload your own VariantBreak generated HDF5 dataset here.', children=[ dcc.Upload( id='upload-data', className='control-upload', children=html.Div([ "Drag and drop your .h5 file or ", html.A("select file.") ]), accept='.hdf5,.h5', multiple=False) ]), html.Br(), # Label file upload html.Div( 'Upload label file:', title= 'This file is used to rename and sort samples.\nExample:\n#Default ' 'name<tab>Label\nS1<tab>SampleA\nS3<tab>SampleC\nS2<tab>SampleB', className='app-controls-name'), html.Div( id='variantmap-tsv-upload', title= 'Upload a .tsv file to rename and sort samples.\nExample:\n#Default ' 'name<tab>Label\nS1<tab>SampleA\nS3<tab>SampleC\nS2<tab>SampleB', children=[ dcc.Upload( id='upload-tsv', className='control-upload', children=html.Div([ "Drag and drop your .tsv file or ", html.A("select file.") ]), accept='.txt,.tsv,.csv', multiple=False) ]), html.Br(), # Sample selection check boxes html.Div( id='output-data-info', className= 'fullwidth-app-controls-name', children=[ dcc.Checklist( id="select-samples", style={'display': 'none'}), html.Br(), html.Button( id='submit-button-samples', style={'display': 'none'}) ]) ])), # Customize tab dcc.Tab( label='Customize', value='customize', children=html.Div( className='control-tab', children=[ html.Div( id='customize-tab', className= 'fullwidth-app-controls-name', children=[ dcc.Dropdown( id='sample_filt', style={'display': 'none'}), dcc.Dropdown( id='file_filt', style={'display': 'none'}), dcc.Dropdown( id='gene_names', style={'display': 'none'}), dcc.Input( id='input_index', style={'display': 'none'}), dcc.Checklist( id="select-genetype", style={'display': 'none'}), dcc.Checklist( id="select-feature", style={'display': 'none'}), dcc.Checklist( id="select-annotation", style={'display': 'none'}), dcc.Input( id='entries_size', style={'display': 'none'}), html.Button( id='submit-button', style={'display': 'none'}) ]) ])), # Variant info tab dcc.Tab( label='Variant info', value='info', children=html.Div( className='control-tab', children=[ html.Div( id='info-tab', className= 'fullwidth-app-controls-name', children=[ html.Div( 'Click on variant to display its information' ) ]) ])) ]) ]), dcc.Loading( className='dashbio-loading', children=html.Div( id='variantmap-wrapper', children=[ # Error message box html.Div(id='error-msg', style={ 'color': 'crimson', 'text-align': 'center', 'font-size': '18px' }), # Plot VariantMap figure html.Div(id='variantmap-fig', children=[ html.Div(dcc.Graph(id='variantmap'), style={'display': 'none'}) ]), # Plot Slider html.Div(id='batch-slider', children=[ html.Div('', style={ 'textAlign': 'center', }), html.Div(dcc.Slider(id='slider', ), style={'display': 'none'}) ]) ])), # Create Store component to store JSON of dataframe and metadata dcc.Store(id='memory'), # To store variant counts dcc.Store(id='count-store'), # To store custom settings dcc.Store(id='custom-store'), # To store name dictionary dcc.Store(id='name_dict'), # To store sample labels dcc.Store(id='sample_labels'), # To store sample order dcc.Store(id='sample_order') ])
dbc.Label("所属", className="mr-2"), dcc.Input(id='department', type='text', value=' '), ], className="mr-3", ) upload_pdf_form = dbc.FormGroup( [ html.P('ストレングスファインダーのHPからダウンロードしたPDFをアップロードしてください'), dcc.Upload(id='upload-pdf', children=html.Div( ['Drag and Drop or ', html.A('Select Files')]), style={ 'width': '50%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center' }, multiple=False), ], className="mr-3", ) check_button = dbc.Button("確認へ", id='check-button', color="primary", n_clicks=0)
"border-left:": "solid", } # the styles for the main content position it to the right of the sidebar and # add some padding. CONTENT_STYLE = { "margin-left": "18rem", "margin-right": "2rem", "padding": "2rem 1rem", } cmp_upload = dbc.Alert( dbc.Table( html.Tr( [ html.Td(dcc.Upload("Drag and Drop or ")), html.Td( html.Div( dbc.Button(dcc.Upload(html.A("Upload File")), color="primary") ), ), ] ), borderless=False, # color="dark", ), color="dark", ) sidebar = html.Div( [
def uploadButton(cls): upload_component = dcc.Upload( id=cls.upload_excel, children=html.Div("Upload my Excel"), multiple=False, ) upload_div = html.Button(upload_component, n_clicks=0) return upload_div
)], type='circle', color='#064779')], style=div_style, id='schedule_' + day_abbrv + '_div', ) # Create app layout app.layout = html.Div([ html.Div([ html.Img(id='msudenver-logo', src=app.get_asset_url('msudenver-logo.png')), html.H3('Scheduling'), dcc.Upload(id='upload-data', children=html.Button(['Upload file'], id='upload-data-button', n_clicks=0, style={'height': '38px'}, className='button'), multiple=False, accept='.txt, .csv, .xlsx'), ], id='header', style={'display': 'flex', 'justifyContent': 'space-between', 'alignItems': 'center'}, ), html.Div([ html.Div([ html.Div([ dcc.Tabs([generate_weekday_tab(day) for day in days ], id='weekdays-tabs', value='tab-mon')
className="row background", # style={"padding": "10px"}, children=[ html.Div( style={'fontSize': 18}, children=[ html.P('Select model path'), dcc.Input( id='model_path-input', style={ "display": "inline-block", "margin-left": "7px", 'width': '500px' }, ), dcc.Upload(id='model-upload', children=[html.Button('Upload File')]), ], ), html.Div( style={'fontSize': 18}, children=[ html.P('Select data path'), dcc.Input( id='database_path-input', style={ "display": "inline-block", "margin-left": "7px", 'width': '500px' }, ), dcc.Upload(id='database-upload',
def serve_layout(): layout = html.Div([ html.Div([ html.Div([ html.Div([ dcc.Upload([ 'Drag and Drop or ', html.A('Select a File', id="select-link") ], id="upload") ], id="upload-container", className="grid-row"), html.Div([ html.Img(src="assets/hexagons-white.png", id="tiles-label"), html.Div([ dcc.Slider(id="input-tiles", min=100, max=800, step=100, value=400, tooltip={"placement": "bottom", "always_visible": True}), ], id="tiles-container"), html.Img(src="assets/hexagons-white-many.png", id="tiles-label-many"), ], id="grid-container-r1", className="grid-row"), html.Div([ html.Img(src="assets/3d-cube-white.png", id="radios-label"), dcc.RadioItems( options=[ {'label': 'X', 'value': 'x'}, {'label': 'Y', 'value': 'y'}, {'label': 'Z', 'value': 'z'} ], value='z', id="radio-items"), ], id="grid-container-r2", className="grid-row"), html.Div([ html.Div([ html.Label("Min", htmlFor="min-input", id="min-label"), dcc.Input(type="number", value=0, id="min-input") ], id="min-container"), html.Div([ html.Label("Max", htmlFor="max-input", id="max-label"), dcc.Input(type="number", value=20, id="max-input") ], id="max-container"), ], id="grid-min-max", className="grid-row"), html.Div([ html.Div([ html.Img(src="assets/icon-lw.png", id="lw-label"), daq.BooleanSwitch(id='checklist', on=True), ], id='line-width-container'), dcc.Dropdown( id='colormap-dropdown', options=[ {'label': 'Blues', 'value': 'Blues'}, {'label': 'Grays', 'value': 'gray'}, {'label': 'Viridis', 'value': 'viridis'}, {'label': 'Inferno', 'value': 'inferno'}, ], value='Blues', ), ], id="grid-colormap", className="grid-row"), ], id="pannel"), html.Div([ dcc.Loading(id="loading", type="default", children=html.Img(src="assets/default_img.png", id="plt-figure")) ], id="canvas") ], id="content-container"), html.Div([ html.A("About", id="about", n_clicks=0), html.A("View code", id="code", href="https://github.com/MalloryWittwer/voronoi_IPF", target="_blank"), dbc.Modal([ dbc.ModalBody("In a face-centered cubic material, the orientation distribution of misorientation of a large number of crystallites is displayed. The value is averaged in discrete cells that represent equal partitions of the orientation space. The data was gathered in 2021 by Mallory Wittwer in Prof. Matteo Seita\'s group at NTU.", id="modal-body"), html.Img(src="assets/figure-about.png", id="modal-image"), dbc.ModalFooter( dbc.Button("Close", id="close", className="mr-auto", n_clicks=0), id="modal-footer"), ], id="modal", is_open=False, backdrop=True, centered=True, fade=True), ], id="footer-container"), ], id="content-wrapper") return layout
from dash.dependencies import Input, Output from ts_app.dash_app import app from ts_app.file_upload import process_upload input_layout = html.Div( [ dcc.Upload( id="file-upload", accept=".csv,.xls,.xlsx", className="file-upload", children=[ "Click or Drag and Drop", html.P("Expected file properties:"), html.Ul( children=[ html.Li("At most 7MiB"), html.Li("Dates in first column"), html.Li("Numeric data in right-most column"), html.Li("At least 32 rows"), ] ), ], min_size=32, max_size=1024**2 * 7, # 7MiB ), html.P(id="file-info"), ] ) @app.callback(
html.P("It does not check the following aspects:"), html.Ul([ html.Li("validity of the binaries"), html.Li("validity of the sources"), html.Li("any non-standard files inside the FMU"), ]) ], id="what-is-validated-paragraph"), dbc.InputGroup([ dbc.Input(id='fmu-input', placeholder="Select an FMU", disabled=True), dcc.Upload(dbc.Button("Select", color='primary', style={ 'border-top-left-radius': 0, 'border-bottom-left-radius': 0 }), id='fmu-upload', accept='.fmu'), ]), ]), dbc.Container([ dbc.Alert([ html.I(className="fas fa-thumbs-up me-3"), "By uploading a file you agree that it is stored and processed on our server.", ], id='disclaimer', color='info', className='mt-3', dismissable=True) ],