'width': '75%',
'float': 'left'
})
]),
html.Div(
className='four columns',
children=[
dcc.Tabs(
id='tabs',
children=[
dcc.Tab(label='Control Panel',
children=[
drc.NamedDropdown(
name='Layout',
id='dropdown-layout',
options=drc.DropdownOptionsList(
'random', 'grid', 'circle',
'concentric', 'breadthfirst', 'cose'),
value='cose',
clearable=False),
drc.NamedDropdown(
name='Node Shape',
id='dropdown-node-shape',
value='ellipse',
clearable=False,
options=drc.DropdownOptionsList(
'ellipse',
'triangle',
'rectangle',
'diamond',
'pentagon',
'hexagon',
def genMainNav(self):
dataDict = self.currentBlogInfo.copy()
dataDict['data-buttons'] = (0,0,0)
for k in ['data-updateIndex', 'data-updateTag', 'data-updateType', 'data-updateBlog', 'data-updateButtonIndex']:
dataDict[k] = 0
nav = html.Div([
html.Div(id='state_container',
style={'display': 'none'},
**dataDict,
),
html.Div([
drc.NamedDropdown(
name = 'Blog',
id = 'blog_selector',
options=[{'value' : n, 'label' : n} for n in self.names],
value=self['data-blogName'],
),
#drc.NamedDropdown(
# name = 'Tag Filter',
# id = 'tag_filter',
# options=self.genCurrentTagOptions(withNum = False),
# value='None',
# multi = True,
#),
drc.NamedDropdown(
name = 'Tags',
id = 'tags_selector',
options=self.genTypeTags(withNum = True),
value='None',
),
drc.NamedSlider(
name = 'Post',
id = 'post_selector',
min = 0,
max = self['data-maxIndex'],
step = 1,
value = 0,
marks = self.genPostSelectorMarks(),
updatemode = 'mouseup',
),
drc.NamedRadioItems(
name = 'Type',
id = 'type_selector',
options = self.genTypesDict(),
value = self['data-postType'],
),
html.Button(id='previous_button', n_clicks=0, children='Previous'),
html.Button(id='next_button', n_clicks=0, children='Next'),
drc.NamedDropdown(
name = 'Current Tags',
id = 'current_tags',
options=self.genCurrentTagOptions(withNum = False),
value=self['data-postTag'],
multi = True,
),
], className = 'sidenav'),
html.Div([
self.currentHTML(),
], id = 'tumblr_entry')
])
return nav
children=drc.NamedDropdown(
name='Select Dataset',
id='dropdown-dataset',
options=[
{
'label': 'Arctan Curve',
'value': 'tanh'
},
{
'label': 'Boston (LSTAT Attribute)',
'value': 'boston'
},
{
'label': 'Custom Data',
'value': 'custom'
},
{
'label': 'Exponential Curve',
'value': 'exp'
},
{
'label': 'Linear Curve',
'value': 'linear'
},
{
'label': 'Log Curve',
'value': 'log'
},
{
'label': 'Sine Curve',
'value': 'sin'
},
],
value='linear',
clearable=False,
searchable=False)),
]),
html.Div(
[
#Columns
html.Div([
drc.Card([
drc.NamedRadioItems(
name='Data Type',
id='data-type-radio',
options=localDB.dataTypeDict,
value=localDB.dataTypeDict[2]['value'],
),
drc.NamedDropdown(
name='Sources (max 5)',
id='dataset-dropdown',
options=localDB.buildingsDict,
clearable=False,
searchable=True,
multi=True,
),
drc.NamedRadioItems(
name='Interval',
id='data-interval-radio',
options=localDB.intervalOptions,
value=localDB.intervalOptions[2]['value'],
),
html.Button('Update', id='update-button'),
html.A('Download Data',
id='download-link',
href='',
style={'display': 'block'})
])
'float': 'left'
})
]),
html.Div(
className='four columns',
children=[
dcc.Tabs(
id='tabs',
children=[
dcc.Tab(label='Control Panel',
children=[
drc.NamedDropdown(
name='Layout',
id='dropdown-layout',
options=drc.DropdownOptionsList(
'random', 'grid', 'circle',
'concentric', 'breadthfirst', 'cose',
'cose-bilkent', 'dagre', 'cola',
'klay', 'spread', 'euler'),
value='grid',
clearable=False),
drc.NamedRadioItems(
name='Expand',
id='radio-expand',
options=drc.DropdownOptionsList(
'followers', 'following'),
value='followers')
]),
dcc.Tab(
label='JSON',
children=[
html.Div(style=styles['tab'],
children=drc.NamedDropdown(
name='Select Feature',
id='dropdown-feature',
options=[
{
'label': 'INDUS',
'value': 'INDUS'
},
{
'label': 'LSTAT',
'value': 'LSTAT'
},
{
'label': 'Custom Data',
'value': 'custom'
},
{
'label': 'NOX',
'value': 'NOX'
},
{
'label': 'RM',
'value': 'RM'
},
{
'label': 'AGE',
'value': 'AGE'
},
{
'label': 'TAX',
'value': 'TAX'
},
],
value='LSTAT',
clearable=False,
searchable=False,
)),
'height': '95vh',
'width': '100%'
})
]),
html.Div(
className='four columns',
children=[
dcc.Tabs(
id='tabs',
children=[
dcc.Tab(label='Control Panel',
children=[
drc.NamedDropdown(
name='Layout',
id='dropdown-layout',
options=drc.DropdownOptionsList(
'random', 'grid', 'circle',
'concentric', 'breadthfirst', 'cose'),
value='grid',
clearable=False),
drc.NamedRadioItems(
name='Expand',
id='radio-expand',
options=drc.DropdownOptionsList(
'followers', 'following'),
value='followers')
]),
dcc.Tab(label='JSON',
children=[
html.Div(
style=styles['tab'],
children=[
import dash_reusable_components as drc
from .constants import LABEL_ELEMENT_TYPES, LABEL_ELEMENT_TYPES_ALL, ELEMENTS
user_interface = html.Div(
style={
"height": "calc(100vh - 90px)",
"overflow-y": "auto",
"overflow-x": "hidden",
},
children=[
drc.SectionTitle(title="Elements", size=3, color="white"),
drc.Card([
drc.NamedDropdown(
name="Select an element list",
id="dropdown-select-element-list",
options=drc.DropdownOptionsList(*ELEMENTS.keys()),
value="Basic",
clearable=False,
)
]),
drc.SectionTitle(title="Layout", size=3, color="white"),
drc.NamedCard(
title="Layout",
size=4,
children=[
drc.NamedDropdown(
name="Layout",
id="dropdown-layout",
options=drc.DropdownOptionsList(
"null",
"random",
def get_tab_cytoscape_layout():
styles = {
'json-output': {
'overflow-y': 'scroll',
'height': 'calc(50% - 25px)',
'border': 'thin lightgrey solid'
},
'tab': {
'height': 'calc(98vh - 105px)'
}
}
component = dcc.Tab(
label='cytoscape',
children=[
html.Div([
html.Div(
className='four columns',
children=[
dcc.Tabs(
id='tabs',
children=[
dcc.Tab(
label='Control Panel',
children=[
drc.NamedDropdown(
name='Layout',
id='dropdown-layout',
options=drc.DropdownOptionsList(
'random', 'grid', 'circle',
'concentric', 'breadthfirst',
'cose'),
value='grid',
clearable=False),
drc.NamedDropdown(
name='Node Shape',
id='dropdown-node-shape',
value='ellipse',
clearable=False,
options=drc.DropdownOptionsList(
'ellipse',
'triangle',
'rectangle',
'diamond',
'pentagon',
'hexagon',
'heptagon',
'octagon',
'star',
'polygon',
)),
drc.NamedInput(
name='Followers Color',
id='input-follower-color',
type='text',
value='#0074D9',
),
drc.NamedInput(
name='Following Color',
id='input-following-color',
type='text',
value='#FF4136',
),
]),
dcc.Tab(
label='JSON',
children=[
html.Div(
style=styles['tab'],
children=[
html.P('Node Object JSON:'),
html.Pre(
id='tap-node-json-output',
style=styles['json-output']
),
html.P('Edge Object JSON:'),
html.Pre(
id='tap-edge-json-output',
style=styles['json-output']
)
])
])
]),
]),
html.Div(
className='eight columns',
children=[
cyto.Cytoscape(
id='cytoscape',
# elements=cy_edges + cy_nodes,
style={
'height': '95vh',
'width': '100%'
})
]),
])
])
return component
def serve_layout():
# Generates a session ID
session_id = str(uuid.uuid4())
# Post the image to the right key, inside the bucket named after the
# session ID
store_image_string(utils.IMAGE_STRING_PLACEHOLDER, session_id)
# App Layout
return html.Div(
id="root",
children=[
# Session ID
html.Div(session_id, id="session-id"),
html.Div(id="left",
children=[
drc.Card(id="first-card",
children=[
drc.NamedDropdown(
name="Select Custom Model",
id="dropdown-select-dataset",
options=[
{
"label": "Naive",
"value": "naive"
},
{
"label": "Covid-net",
"value": "covid",
},
{
"label": "U-net",
"value": "unet",
},
],
clearable=False,
searchable=False,
value="moons",
),
html.P(children="Pneumonia detection"),
dcc.RadioItems(
id="classification-task",
labelStyle={
"margin-right": "7px",
"display": "inline-block",
},
options=[
{
"label": "Enabled",
"value": "True",
},
{
"label": " Disabled",
"value": "False",
},
],
value="True",
),
])
]),
# Main body
html.Div(
id="app-container",
children=[
# Banner display
html.Div(
id="banner",
children=[
html.A(
"X-ray Chest Images for Covid-19 Detection",
href=
"https://gitlab.com/yotta-academy/cohort-2020/projects/dl-projects/ej-crowd-detection",
id="title",
style={
"text-decoration": "none",
},
),
],
),
html.Div(
id="image",
children=[
# The Interactive Image Div contains the dcc Graph
# showing the image, as well as the hidden div storing
# the true image
html.Div(
id="div-interactive-image",
children=[
utils.GRAPH_PLACEHOLDER,
html.Div(
id="div-storage",
children=utils.STORAGE_PLACEHOLDER,
),
],
)
],
),
],
),
# Sidebar
html.Div(
id="sidebar",
children=[
drc.Card([
dcc.Upload(
id="upload-image",
children=[
"Drag and Drop or ",
html.A(children="Select an Image"),
],
# No CSS alternative here
style={
"color": "darkgray",
"width": "100%",
"height": "50px",
"lineHeight": "50px",
"borderWidth": "1px",
"borderStyle": "dashed",
"borderRadius": "5px",
"borderColor": "darkgray",
"textAlign": "center",
"padding": "2rem 0",
"margin-bottom": "2rem",
},
accept="image/*",
),
drc.NamedInlineRadioItems(
name="Selection Mode",
short="selection-mode",
options=[
{
"label": " Rectangular",
"value": "select"
},
{
"label": " Lasso",
"value": "lasso"
},
],
val="select",
),
drc.NamedInlineRadioItems(
name="Image Display Format",
short="encoding-format",
options=[
{
"label": " JPEG",
"value": "jpeg"
},
{
"label": " PNG",
"value": "png"
},
],
val="jpeg",
),
]),
drc.Card([
drc.CustomDropdown(
id="dropdown-filters",
options=[
{
"label": "Blur",
"value": "blur"
},
{
"label": "Contour",
"value": "contour"
},
{
"label": "Detail",
"value": "detail"
},
{
"label": "Enhance Edge",
"value": "edge_enhance"
},
{
"label": "Enhance Edge (More)",
"value": "edge_enhance_more",
},
{
"label": "Emboss",
"value": "emboss"
},
{
"label": "Find Edges",
"value": "find_edges"
},
{
"label": "Sharpen",
"value": "sharpen"
},
{
"label": "Smooth",
"value": "smooth"
},
{
"label": "Smooth (More)",
"value": "smooth_more"
},
],
searchable=False,
placeholder="Basic Filter...",
),
drc.CustomDropdown(
id="dropdown-enhance",
options=[
{
"label": "Brightness",
"value": "brightness"
},
{
"label": "Color Balance",
"value": "color"
},
{
"label": "Contrast",
"value": "contrast"
},
{
"label": "Sharpness",
"value": "sharpness"
},
],
searchable=False,
placeholder="Enhance...",
),
html.Div(
id="div-enhancement-factor",
children=[
f"Enhancement Factor:",
html.Div(children=dcc.Slider(
id="slider-enhancement-factor",
min=0,
max=2,
step=0.1,
value=1,
updatemode="drag",
)),
],
),
html.Div(
id="button-group",
children=[
html.Button("Run Operation",
id="button-run-operation"),
html.Button("Undo", id="button-undo"),
],
),
]),
dcc.Graph(
id="graph-histogram-colors",
figure={
"layout": {
"paper_bgcolor": "#272a31",
"plot_bgcolor": "#272a31",
}
},
config={"displayModeBar": False},
),
],
),
],
)
drc.NamedDropdown(name='Select Dataset',
id='dropdown-dataset',
options=[
{
'label': 'Arctan Curve',
'value': 'tanh'
},
{
'label':
'Boston (LSTAT Attribute)',
'value': 'boston'
},
{
'label': 'Custom Data',
'value': 'custom'
},
{
'label':
'Exponential Curve',
'value': 'exp'
},
{
'label': 'Linear Curve',
'value': 'linear'
},
{
'label': 'Log Curve',
'value': 'log'
},
{
'label': 'Sine Curve',
'value': 'sin'
},
],
value='linear',
clearable=False,
searchable=False),
dataDict = Backend.currentBlogInfo.copy()
dataDict['data-buttons'] = (0, 0, 0)
dataDict['data-update'] = 0
app.layout = html.Div([
html.Div(
id='state_container',
style={'display': 'none'},
**dataDict,
),
html.Div([
drc.NamedDropdown(
name='Blog',
id='blog_selector',
options=[{
'value': n,
'label': n
} for n in Backend.names],
value=Backend['data-blogName'],
),
drc.NamedDropdown(
name='Tags',
id='tags_selector',
options=Backend.genCurrentTagOptions(withNum=True),
value='None',
),
drc.NamedSlider(
name='Post',
id='post_selector',
min=0,
max=Backend['data-maxIndex'],
def server_layout(mode=None):
#return the layout of the GUI
session_id = str(uuid.uuid4())
#variable, distribution selection panel
selection_panel = html.Div(id='selection-panel',children=[
html.Div(id='selected-column-panel',children=[
html.Div(id='selected-column-sec1-panel',children=[
drc.NamedDropdown(
name='Select series',
id='selected-series',
searchable=False,
clearable=False
),
dcc.Checklist(
id='apply-log-transform',
options=[{'label':' Apply log transform','value':'logtransform'}
]),
]),
drc.NamedTextarea(
id='series-characteristics',
name='Series characteristics',
cols='50',
rows='2',
readOnly='readOnly'
),
]),
html.Div(id='apply-panel',children=[
html.Div(id='apply-sec1-panel',children=[
drc.NamedDropdown(
id='fitted-distributions',
name='Fitted distribution',
options=[
{'label': ' '+ v[0], 'value': k}
for k,v in dist_par_template.items() if k != 'native' and v[2]
],
value='normal',
searchable=False,
clearable=False
),
]),
# html.Div(id='apply-sec1b-panel',children=[
# drc.NamedDropdown(
# id='plotting-distributions',
# name='Probability scale',
# options=[
# {'label': ' '+ v[0], 'value': k}
# for k,v in dist_par_template.items() if v[2]
# ],
# value='native',
# searchable=False,
# clearable=False
# ),
# ]),
html.Div(id='apply-sec2a-panel',children=[
html.Button('Fit',id='fit-button',n_clicks=0),
]),
#dcc.Checklist(
# id='show-y-log',
# options=[{'label':' Show y-axis in log scale','value':'true'}
#]),
]),
html.Label(id='graph-refresh'),
dcc.Store(
id='graph-refresh-hidden',
data=0
),
html.Div(id='message-panel',children=[""]),
])
#variable, distribution selection panel
par_panel = html.Div(id='fitted-panel',children=[
html.Div(id='fitted-sec1-panel',children=[
drc.NamedTextarea(
id='fitted-par',
name='Estimated distribution parameters',
readOnly='readOnly',
cols= 40,
rows= 3
),
drc.NamedTextarea(
id='estimated-quantiles',
name='Estimated quantiles',
readOnly='readOnly',
cols= 40,
rows= 3
),
])
])
upload_panel = html.Div(id='last-card',children=[
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or ',
html.A('Select File')
]),
style={
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
}
),
html.Label('''File upload limited to < %0.0f Kb, containing no more than %d rows and %d columns'''%(configs['max_file_size']/1024,configs['max_file_rows'],configs['max_file_cols'])),
html.Label('',id='data-filename'),
html.Label('',id='data-description'),
html.Div(id='table-panel',children=[
dash_table.DataTable(
id='attribute-table',
columns=[],
row_selectable='multi',
editable=False,
style_header={
'textAlign': 'center',
'fontWeight': 'bold',
'color': 'black',
},
style_cell={
'padding': '2px',
'--selected-background': 'grey',
'color': 'black',
},
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}
],
#locale_format= '0.3',
)
],style={'visibility':'none','display':'none'}),
])
chart_panel = html.Div(id='chart-panel',children=[
dcc.Loading(id = "loading-icon", children=[
dcc.Graph(
id='graph',
figure={
},
responsive=True,
config=graph_config,
style={'display':'none'}
)
]),
],
style={'visibility':'none'})
layout = html.Div(
id="body",
className="container scalable",
children=[
visdcc.Run_js(id = 'chart-updated-js'),
visdcc.Run_js(id = 'chart-unupdated-js'),
visdcc.Run_js(id = 'error-display-js'),
dcc.Store(id='error-display',data=''),
html.Title(title=configs['title']),
#hidden session id
#row 1 for title
html.Div(id='top-panel',children=[
html.H5(id='app-title',children=
'''Distribution Fitting and Analysis Tool.
This tool is only for demostration porpuses''',
style={"margin-bottom": "0px"},
),
],className="row flex-display"),
#second row layout
html.Div(id='main-panel',children=[
html.Div(id='left-panel',children=[
upload_panel
]),
html.Div(id='output-panel',children=[
selection_panel,
par_panel,
chart_panel
],style={'visibility':'none','display':'none'}),
]),
#row 4 is the footer
html.Div(id='footer-panel',children=[
'''
A web application built on top of Dash (v%s) (framework for Python) by
Exequiel Sepúlveda and Dmitri Kavetski.'''%(dash.__version__)
]),
],
)
return layout
