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)
],
