],
data=[[
Weekend, Hour_of_Day, Side, Street_Kind, Crossing,
Stop, Traffic_Signal, Sunrise_Sunset, Distance_Feet,
Description_Length
]])
y_pred = pipeline.predict(df)[0]
return f'Prediction ---> {", ".join(y_pred)} on traffic'
# 2 column layout. 1st column width = 4/12
# https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout
column1 = dbc.Col(
[
html.Img(src='assets/car crash.jpg', className='img-fluid'),
dcc.Markdown("""
## **Make Predictions**
Tune the variables on the right and find out if the given features result in a significant impact or least impactful to the traffic.
If you get 'Least Impact', that's pretty lucky. Send me an email if you do.
"""),
dcc.Markdown("""
Below is the prediction:
"""),
# html.H2('Predicted Car Accident Traffic Impact', className='mb-5'),
def update_image_src(n):
try:
encoded_image = base64.b64encode(open("/ramdisk/image.png", 'rb').read())
except OSError:
return "No camera image to display."
return html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()))
'size': 25,
'family': 'Arial',
}
}
)
app.layout = html.Div([
html.Div([
html.Div([
html.H1(f'{yt_channel} channel dashboard', className='header_title',),
html.P('Updated 27/2/21', className='header_sub'),
html.Img(
src=app.get_asset_url('avatar.jpg'),
alt='Youtuber Avatar',
className='avatar',
style={
'display': 'flex', 'vertical-align': 'middle'}
),
], className='header'),
]),
html.Div([
html.Div([
html.P('Total videos puplished', className='P2'),
html.P(df.Title.count(), className='P1')
], className='card', style={'display':'inline-block', 'width':'20%'}),
html.Div([
html.P('Total views', className='P2'),
html.P(f'{df.View.sum():,}', className='P1')
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
from application import dash_app, app
import charge
import route
import other
navbar = dbc.Navbar([
html.Img(src=dash_app.get_asset_url('logo.png'), className='index-logo')
], color='white', className='index-navbar')
tabs = dcc.Tabs(
id='index-tabs',
mobile_breakpoint=2000,
vertical=True,
value='index-tab-charge',
children=[
dcc.Tab(
label='Current State of Charge', value='index-tab-charge',
className='index-tab',
selected_className='index-tab--selected'
),
dcc.Tab(
label='Route Map', value='index-tab-route',
def _display_page(pathname): # pylint: disable=too-many-return-statements
if pathname is None:
return html.Div([])
elif pathname == '/':
files = glob.glob(os.path.join(ARGS.janggu_results, 'models', '*.png'))
if not files:
return html.Div([
html.P('The directory "{}" appears to be empty.'.format(
ARGS.janggu_results))
])
encoding = {
os.path.basename(os.path.splitext(name)[0]):
base64.b64encode(open(name, 'rb').read())
for name in files
}
return html.Div([
html.Table(
[html.Tr([html.Th('Model name'),
html.Th('Architecture')])] +
[
html.Tr([
dcc.Link(html.Td(name), href='/{}'.format(name)),
html.Td(
html.Img(id=name,
width='50%',
src='data:image/png;base64,{}'.format(
encoding[name].decode())))
]) for name in encoding
],
className='table table-bordered')
])
elif pathname == '/logs':
return html.Div(
html.Pre(
open(os.path.join(ARGS.janggu_results, 'logs',
'janggu.log')).read()))
elif pathname == '/model_comparison':
return _model_comparison_page()
files = []
root = os.path.join(ARGS.janggu_results, 'evaluation', pathname[1:])
pathlen = len(root) + 1
for root, dirnames, filenames in os.walk(root):
for filename in filenames:
if filename.endswith('.png') or \
filename.endswith('.tsv') or filename.endswith('.ply'):
path = tuple(dirnames) + (filename, )
files += [os.path.join(root, *path)]
if not files:
return html.Div(
[html.H3('No figures available for {}'.format(pathname[1:]))])
image = os.path.join(ARGS.janggu_results, 'models', pathname[1:] + '.png')
encoding = base64.b64encode(open(image, 'rb').read())
return html.Div([
html.H3('Model: {}'.format(pathname[1:])),
html.Div([
html.Div([
dcc.Dropdown(id='tag-selection',
options=[{
'label': f[pathlen:],
'value': f
} for f in files],
value=files[0]),
html.Img(width='100%',
src='data:image/png;base64,{}'.format(
encoding.decode()))
],
className="three columns"),
html.Div([html.Div(id='output-plot')], className="nine columns")
],
className='row')
])
# ),
#]
PAGE_SIZE = 5
app.layout = html.Div(
html.Div([
dbc.Container(
html.Div([
html.Img(
src=
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSriyJq1c35TlZ9DIJQrV4ELxG914tFyXLVKQ&usqp=CAU",
className='three columns',
style={
'height': '15%',
'width': '26%',
'float': 'center',
'position': 'relative',
'padding-top': 0,
'margin-left': 360,
'textAlign': 'center'
},
),
],
className="row"), ),
html.Div(children=[
html.H1(children='Forsk Coding School',
style={
'textAlign': 'center',
'color': colors['color1'],
'backgroundColor': colors['color2'],
'borderRadius': '5px',
def serve_layout():
session_id = str(uuid.uuid4())
print(session_id)
### We are counting the amount of visitors of the webpage by counting the amount of session IDs
### created per day without tracking any information
visitor = open(str(UPLOAD_DIRECTORY) + "/" + str(session_id) + ".txt", "wb")
# the style arguments for the sidebar.
SIDEBAR_STYLE = {
'position': 'fixed',
'top': 0,
'left': 0,
'bottom': 0,
'width': '20%',
'padding': '20px 10px',
'background-color': '#f8f9fa'
}
# the style arguments for the main content page.
CONTENT_STYLE = {
'margin-left': '25%',
'margin-right': '5%',
'top': 0,
'padding': '20px 10px'
}
TEXT_STYLE = {
'textAlign': 'center',
'color': '#191970'
}
CARD_TEXT_STYLE = {
'textAlign': 'center',
'color': '#0074D9'
}
content_fourth_row = dbc.Row(
[
dbc.Col(
html.Div(
id='final-results'
), md=12,
)
]
)
content_third_row = dbc.Row(
[
dbc.Col(
dcc.Graph(id='theq-chart'), md=12,
)
]
)
content_second_row = dbc.Row(
[
dbc.Col(
dcc.Graph(id='refl-chart'), md=6
),
dbc.Col(
dcc.Graph(id='S21-chart'), md=6
),
]
)
content_first_row = dbc.Row([
dbc.Col(
dbc.Card(
[
dbc.CardBody(
[
html.P(id='card_text_1', children=[
'Abstract—We describe an algorithm capable of extracting the unloaded quality factor '
'and the resonant frequency of microwave resonators from vector S-parameters. Both '
'symmetrical (Lorentzian) and asymmetrical (Fano) transmission responses are supported. '
'The algorithm performs an adaptive outlier removal to discard measurement points '
'affected by noise or distortion. It removes the effects caused by imperfections in '
'he device (such as modes with close resonance frequencies or stray coupling between '
'the resonator ports) or the experimental setup (such as lack of isolation or '
'dispersion in the test-set and cables). We present an extensive assessment of the '
'algorithm performance based on a numerical perturbation analysis and on the evaluation '
'of S-parameter fitting results obtained from network analyzer measurements and '
'resonator equivalent circuits. Our results suggest that uncertainty is mainly caused '
'by factors that distort the frequency dependence of the S-parameters, such as cabling '
'and coupling networks and is highly dependent on the device measured. Our perturbation '
'analysis shows improved results with respect to those of previous publications. Our '
'source code is written in Python using open source packages and is publicly available '
'under a freeware license.'
], ),
]
)
]
),
md=12
),
])
content = html.Div(
[
html.H1(
'Algorithm for Resonator Parameter Extraction from Symmetrical and Asymmetrical Transmission Responses',
style=TEXT_STYLE),
html.H4("by Patrick Krkotic, Queralt Gallardo, Nikki Tagdulang, Montse Pont and Joan M. O'Callaghan"),
html.H5("Publication accepted in IEEE Transactions on Microwave Theory and Techniques, to be published soon"),
html.Div(session_id, id='session-id', style={'display': 'none'}),
html.Hr(),
content_first_row,
content_second_row,
content_third_row,
content_fourth_row,
dcc.ConfirmDialog(
id='confirm',
message='The webpage is still being under development.', )
],
style=CONTENT_STYLE
)
controls = dbc.FormGroup(
[
html.Br(),
html.H3("Upload", style={'textAlign': 'center'}),
# html.Div('Upload your data in .s2p Touchstone format.'),
dcc.Upload(
id="upload-data",
children=html.Div(
["Drag and drop or click to upload .s2p files."]
),
style={
"width": "98%",
"height": "60px",
"lineHeight": "60px",
"borderWidth": "1px",
"borderStyle": "dashed",
"borderRadius": "5px",
"textAlign": "center",
},
multiple=True,
),
html.Div(id="numberoffiles"),
html.Ul(id="Dictionary"),
html.Div(id="code-finished"),
html.Div(
[
dbc.Button(
id='button-calculate',
n_clicks=0,
children='Calculate',
color='primary',
block=True
),
dbc.Spinner(html.Div(id='loading'), color='primary'),
]),
html.Br(),
html.H3('List of Files', style={
'textAlign': 'center'
}),
dcc.Dropdown(
id='name-dropdown',
options=[
],
),
html.Br(),
html.H3('Source Code', style={
'textAlign': 'center'
}),
html.Label(['The source code is available in the Git repository ', html.A('ARPE-edu', href='https://github.com/ARPE-edu/arpe')]),
html.Br(),
html.Img(
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Logo_UPC.svg/110px-Logo_UPC.svg.png",
style={
'height': '25%',
'width': '25%',
'float': 'center',
'position': 'relative'
},
),
html.Img(
src="https://www.cells.es/logo.png",
style={
'height': '50%',
'width': '50%',
'float': 'center',
'position': 'relative'
},
),
]
)
sidebar = html.Div(
[
html.H1('ARPE', style=TEXT_STYLE),
html.Hr(),
controls
],
style=SIDEBAR_STYLE,
)
stores = html.Div([
dcc.Store(id='tdict', storage_type='session'),
])
layout = html.Div([sidebar, content, stores])
return layout
import json
import scvi
import scanpy as sc
import time
sc.set_figure_params(figsize=(4, 4))
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
du.configure_upload(app, r"./data")
sidebar = html.Div(
[
html.Img(src="https://docs.scvi-tools.org/en/stable/_static/logo.png",
style=LOGO_STYLE),
html.Hr(),
html.P("A gui for scvi.", className="lead"),
dbc.Nav(
[
dbc.NavLink("Upload Data", href="/", active="exact"),
dbc.NavLink("Preprocess", href="/preprocess", active="exact"),
dbc.NavLink(
"Setup anndata", href="/setup-anndata", active="exact"),
dbc.NavLink("Train model", href="/train-model",
active="exact"),
dbc.NavLink("cellxgene visualization",
href="/visualize",
active="exact"),
],
vertical=True,
[dcc.Location(id="url")] + [
dcc.Store(id="aggregate_data"),
html.Div(id='call-back-1-store', style={'display': 'none'}),
html.Div(id='call-back-2-store', style={'display': 'none'}),
html.Div(id='call-back-3-store', style={'display': 'none'}),
# empty Div to trigger javascript file for graph resizing
html.Div(id="output-clientside"),
html.Div(
[
html.Div(
[
html.Img(
src=app.get_asset_url("NS_Logo.png"),
id="plotly-image",
style={
"height": "60px",
"width": "auto",
"margin-bottom": "25px",
},
)
],
className="one-third column",
),
html.Div(
[
html.Div([
html.H3(
"Norfolk Southern Bridge Monitor",
style={"margin-bottom": "0px"},
),
html.H5("Status Overview",
logger.info(f'ENV: {env_name}')
logger.info(f'Logger config: {logger_config_file}')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
application = app.server
badge_link = "https://codebuild.us-east-2.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiWmZFUU9ZS1NtM1JIdVFYOG0yejBucmFxR2JOYVN0YVZUcTBzSW9ZWjI1K2VCUk1mbXNWQ2NBdUZZWjBLclAxOGxnRnZBRUc4U1c4d0lJdkVreC83MXU0PSIsIml2UGFyYW1ldGVyU3BlYyI6ImR2endXajBObVptcWl3c28iLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=master"
app.title = 'Boneless Media Inc.'
app.layout = html.Div(children=[
dcc.Markdown('# Absolute Units'),
dcc.Markdown('## "eDiT tHe AbsOluTe UniTs oR sOmeThIng"'),
dcc.Markdown('## "hAteD iT"'),
html.Img(src=badge_link, className='single_img'),
dcc.Markdown('#### Which is the best Unit:'),
get_unit_0(),
get_unit_1(),
get_unit_2()
],
className='layout_div')
make_unit_0_callback(app)
make_unit_1_callback(app)
make_unit_2_callback(app)
if __name__ == '__main__':
application.run()
bs_size="lg",
right=True,
label = "Explore",
)
#Create navigation bar
navbar = dbc.Navbar(
dbc.Container(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src="/assets/ds4A-logo.png", height="25px")),
dbc.Col(dbc.NavbarBrand("", className="ml-2")),
],
align="center",
no_gutters=True,
),
href="/home",
),
dbc.NavbarToggler(id="navbar-toggler2"),
dbc.Collapse(
dbc.Nav(
# right align dropdown menu with ml-auto className
[dropdown], className="ml-auto", navbar=True
),
id="navbar-collapse2",
navbar=True,
html.H3('Interactive Tables'),
dcc.Markdown('''
The `dash_html_components` library exposes all of the HTML tags.
This includes the `Table`, `Tr`, and `Tbody` tags that can be used
to create an HTML table. See
[Create Your First Dash App, Part 1](/getting-started-part-1)
for an example.
Dash provides an interactive `DataTable` as part of the `data-table`
project. This table includes built-in filtering, row-selection,
editing, and sorting.
'''.replace(' ', '')),
html.A(className="image-link",
href="https://github.com/plotly/dash-table-experiments",
children=html.Img(src="assets/images/gallery/DataTable.gif",
alt="Example of a Dash Interactive Table")),
dcc.Markdown('''
[View the docs](/datatable) or [View the source](https://github.com/plotly/dash-table)
***
'''.replace(' ', '')),
html.H3(
dcc.Link('Upload Component', href='/dash-core-components/upload')),
dcc.Markdown('''
The `dcc.Upload` component allows users to upload files into your app
through drag-and-drop or the system's native file explorer.
'''.replace(' ', '')),
html.
A(className="image-link",
href="https://github.com/plotly/dash-core-components/pull/73",
def get_body():
jumbotron = html.Div(
[
dbc.Collapse(
id="collapse1",
is_open=False,
),
html.Div(html.Img(src=app.get_asset_url(config.image),
style={
'width': '320px',
'align': 'right',
}),
className='display-3'),
html.P(
"Applicatie voor het onderhouden van de projectstructuur",
style={
'color': site_colors['indigo'],
},
className="lead",
),
html.Hr(className="my-2"),
dbc.Row([
dbc.Col([
html.P(""),
html.P(""),
html.P(""),
html.H5("Werkwijze"),
html.P(""),
html.P(""),
html.P(""),
html.P("Onder het tabblad 'Projectstructuur - problemen' \
kan worden gefilterd op problemen in de projectstructuur.",
className="lead"),
html.
P("""Na de selectie van een probleem komen orders, bouwplannumers en/of projecten naar voren die \
vervolgens opgezocht kunnen worden
onder het tabblad 'Projectstructuur op project'.""",
className="lead"),
html.
P("Op deze pagina staat de uitleg van het probleem en de actie die ondernomen moet worden.",
className='lead'),
html.
P("Omvat de actie een aanpassing van het bouwplannummer in Connect, "
+
"dan kan dit worden aangepast op het tabblad 'Connect - Objectniveau'.",
className="lead"),
html.A(button(
"Klik hier om te beginnen",
backgroundcolor=site_colors['indigo'],
),
href='/apps/datamanagement_problems/'),
html.P(""),
html.A(button(
"Download uitgebreide uitleg",
backgroundcolor=site_colors['indigo'],
),
href='/download?type=pdf&value=explain'),
html.P(""),
html.A(
button(
"Reload data dashboard",
_id='reload_button',
backgroundcolor=site_colors['indigo'],
))
]),
dbc.Col([html.Div(update_cleanheid_tabel())]),
]),
],
style={
'margin-left': '5%',
'margin-right': '5%',
'margin-top': '2%',
'margin-bottom': '2%',
'backgroundColor': site_colors['grey20'],
'border-style': 'solid solid solid solid',
'border-color': '#BEBEBE',
'border-width': '1px',
'padding': '20px',
},
)
return jumbotron
def patient_item(app, name, dob, age, gender, current_assessment,
assessments_2breviewed, review_duedate, icon, pid):
return html.Div([
dbc.Button(html.Div([
html.Div(html.Img(
src=app.get_asset_url("profile_default" + str(icon) + ".png"),
style={
"height": "2.5rem",
"padding-top": "0px"
}),
style={"width": "4rem"}),
dbc.Row([
dbc.Col(html.Div(html.H1(name, style={"font-size": "1rem"}),
style={
"text-align": "start",
"padding-left": "0.5rem"
}),
width=2),
dbc.Col(html.Div(html.H6(dob, style={"font-size": "1rem"})),
width=2),
dbc.Col(html.Div(html.H6(str(age), style={"font-size": "1rem"
})),
width=1),
dbc.Col(html.Div(html.H6(gender, style={"font-size": "1rem"})),
width=1),
dbc.Col(html.Div(
html.H6(str(current_assessment),
style={"font-size": "1rem"})),
width=2),
dbc.Col(html.Div([
html.H1(str(assessments_2breviewed),
style={
"font-size": "1rem",
"color": "#fff",
"background-color": "#dc3545",
"border-radius": "10rem",
"width": "1.6rem",
"padding": "0.2rem",
"margin-left": "3rem",
"margin-top": "-0.2rem"
},
id={
"type":
"physician-patient-assessments_2breviewed",
'index': pid
}) if assessments_2breviewed > 0 else html.
H1("--",
style={
"font-size": "1rem",
"color": "#000",
"background-color": "#fff",
"border-radius": "10rem",
"width": "1.6rem",
"padding": "0.2rem",
"margin-left": "3rem",
"margin-top": "-0.2rem"
},
id={
"type": "physician-patient-assessments_2breviewed",
'index': pid
}),
],
style={"text-align": "center"}),
width=2),
dbc.Col(html.Div(
html.H6(review_duedate, style={"font-size": "1rem"})),
width=2),
],
style={
"width": "80rem",
"margin-top": "0.5rem"
})
],
style={"display": "flex"}),
color="light",
outline=True,
id={
"type": "physician-open-patient",
'index': pid
},
style={
"box-shadow":
"0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)",
"padding-left": "1rem",
"padding-right": "2rem",
"border-radius": "10rem",
"text-align": "center",
"padding-top": "1rem",
"padding-bottom": "1rem",
"width": "100%"
}),
dbc.Modal(
[
dbc.ModalBody(
html.Div([
html.Div(
[
html.Div([
html.Img(src=app.get_asset_url(
"profile_default" + str(icon) +
".png"),
style={
"height": "80px",
"padding": "10px",
"margin-top": "30px"
}),
html.Div([
html.H2(name,
style={
"font-size": "1.6rem",
"color": "#000",
"padding-bottom": "32px",
"padding-top": "16px"
}),
html.H6("DATE OF BIRTH",
style={"font-size": "0.6rem"}),
html.Div(dbc.Badge(
str(dob),
pill=True,
style={"background": "#857698"}),
style={
"margin-top": "-10px",
"padding-bottom": "16px"
}),
html.H6("AGE",
style={"font-size": "0.6rem"}),
html.Div(dbc.Badge(
str(age),
pill=True,
style={"background": "#857698"}),
style={
"margin-top": "-10px",
"padding-bottom": "16px"
}),
html.H6("GENDER",
style={"font-size": "0.6rem"}),
html.Div(dbc.Badge(
str(gender),
pill=True,
style={"background": "#857698"}),
style={
"margin-top": "-10px",
"padding-bottom": "16px"
}),
])
],
style={
"padding": "20px",
"text-align": "center"
}),
],
style={
"width": "260px",
"border-radius": "1rem",
"background": "#f5f5f5",
"margin-top": "60px",
"margin-left": "20px"
}),
html.Div([
html.Div([
html.H6("Sort By"),
dbc.Select(
id={
'type':
'physician-modal-select-sorting',
'index': pid
},
options=[
{
"label": "Category",
"value": 0
},
{
"label": "Patient Completion Date",
"value": 3
},
],
value=0,
bs_size='sm',
)
]),
html.Div(
[],
id={
'type':
'physician-modal-patient-modalbody',
'index': pid
}),
],
style={
"padding-left": "20px",
"margin-top": "60px"
}),
],
style={
"display": "flex",
"padding-bottom": "60px"
})),
dbc.ModalFooter(
dbc.Button("CLOSE",
id={
"type": "physician-close-patient",
'index': pid
},
className="ml-auto",
style={
"margin-right": "20px",
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Black",
"font-size": "1rem"
})),
],
id={
"type": "physician-modal-patient",
'index': pid
},
size='xl',
scrollable=False,
backdrop='static',
),
],
style={
"padding-left": "5rem",
"padding-right": "7rem",
"padding-top": "0.5rem"
})
###### Set up variables
list_of_choices=['kind word', 'helpful tip', 'piece of advice']
githublink = 'https://github.com/aidanjdm/chuck_norris_execution'
image1='Chuck_Norris_May_2015.jpg'
heading1='Chuck Norris help method'
########### Initiate the app
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.title='Chuck'
####### Layout of the app ########
app.layout = html.Div([
html.H2(heading1),
html.Img(src=app.get_asset_url(image1), style={'width': 'auto', 'height': '10%'}),
dcc.Dropdown(id='your-input-here',
options=[{'label': i, 'value': i} for i in list_of_choices],
value='kind word',
style={'width': '500px'}),
html.Br(),
html.Div(id='your-output-here', children=''),
html.Br(),
html.A('Code on Github', href=githublink),
])
######### Interactive callbacks go here #########
@app.callback(dash.dependencies.Output('your-output-here', 'children'),
[dash.dependencies.Input('your-input-here', 'value')])
import numpy as np
import pandas as pd
from dash.dependencies import State, Input, Output
#from dash.exceptions import PreventUpdate
import datetime
from datetime import datetime as dt
from datetime import date as dtoday
import os
import time
from app import app
layout = [
html.Div(
html.Div(children=[
html.Div(html.H1("Underconstruction"),
style={
"color": "white",
'margin': 'auto'
}),
html.Div(html.Img(src=app.get_asset_url("building.png")),
style={'margin': "auto"}),
], ),
style={
'margin': "auto",
'width': "500px"
},
),
]
def create_tabs_layout(simu_desc_file):
# return dbc.Container(id='app-control-tabs', className='control-tabs', children=[
return dbc.Tabs(id='app-tabs', children=[
dbc.Tab(
label=_('About'),
tab_id='what-is',
children=dbc.Col(className='control-tab', children=[
html.H4(className='what-is', children=_('App presentation')),
html.P(
_('This website simulates drones sent with Automatic External '
'Defibrillators '
'to Out-of-Hospital Cardiac Arrest incidents. '
"Simulation is based on real life data, gathered in 2017 by Paris' "
'Firefighters, who intervened on more than 3000 OHCA in Paris and '
'Paris suburbs.')
),
html.P(
_('The aim is to compare the hypothetical time to arrival of drones to'
' the actual time to arrival of BLS teams, and to estimate to what '
'extent drones could improve the chain of survival.')
),
html.P([
_('This app allows the user to compute their own simulation, '
'by changing '
'both dispatch center and drone flight parameters. '
'The source code is '
'available on '),
dbc.CardLink('Github',
href='https://github.com/AlbaneMiron/drone-simulation'),
_(' to allow for expertise and replication.'),
]),
html.P(
_('Default parameters correspond to what is assumed to be the '
'most likely set of drone characteristics and to the actual '
'operational'
"performance of Paris'firefighters medical dispatch center.")
),
html.Div([
html.Img(
src='https://maps.googleapis.com/maps/api/staticmap?center=Paris,+France&zoom=11&scale=false&size=600x300&maptype=roadmap&key=AIzaSyAMs0JsrC88jq_yxCxfFqZ8dIBt0wEl3CY&format=png&visual_refresh=true',
),
], style={'textAlign': 'center'}),
# dbc.Card(
# dbc.Button(" GitHub",
# id='submit-button', className='fa fa-github',
# size='lg',
# href="https://github.com/AlbaneMiron/drone-simulation"),
# style={"width": "12rem",
# "marginLeft": "auto",
# "marginRight": "auto"
# }),
], style={'marginTop': '10px',
'paddingRight': '0', 'paddingLeft': '0'})
),
dbc.Tab(
label=_('Simulation description'),
tab_id='datasets',
children=dbc.Col(className='control-tab', children=[
html.H4(className='datasets',
children=_('Rescue chain: BLS teams vs drones')),
html.Img(src=simu_desc_file,
style={'maxWidth': '100%', 'maxHeight': '100%'}),
], style={'marginTop': '10px',
'paddingRight': '0', 'paddingLeft': '0'}),
),
dbc.Tab(
label=_('Parameters simulation A'),
tab_id='simA',
children=dbc.Col(
create_parameters_layout('A')),
),
dbc.Tab(
label=_('Parameters simulation B'),
tab_id='simB',
children=dbc.Col(
create_parameters_layout(
'B', suffix='_b',
input_drone='Centres de secours',
)),
),
dbc.Tab(
label=_('Comparison of both simulations'),
tab_id='sims',
children=dbc.Col(
[
create_both_graphs('A', style={
'borderRight': 'solid 1px #ddd',
'marginRight': '15px',
'paddingRight': '15px',
}),
create_both_graphs('B', suffix='_b'),
],
style={'display': 'flex', 'marginTop': '10px',
'paddingRight': '0', 'paddingLeft': '0'}),
),
dbc.Tab(
label=_('Custom Datasets'),
tab_id='data',
children=dbc.Col([
html.H3(children=_('Custom Datasets')),
html.Div(_('Launch a simulation on your own data:')),
html.H4(children=_('Starting Points'), style={'marginTop': 30}),
html.Div([_(
'Upload a CSV file containing a list of starting points for drones. '
'Each row represents one starting point and should contain an index '
'followed by the latitude and longitude of the point. Example:'
)]),
html.Textarea(
children=textwrap.dedent('''\
COBI,48.8511191742212,2.33150232324835
MALA,48.8615396838525,2.3057037964225398
CHPY,48.8079548017692,2.53121646098508'''),
disabled=True, style={'height': 80, 'width': 400}),
dcc.Upload(
id='upload-starting-points',
children=html.Div([
_('Drag and Drop or '),
html.A(html.Button(_('Select a File'))),
]),
),
html.Div(id='output-starting-points-upload'),
html.H4(children=_('Incidents'), style={'marginTop': 30}),
html.Div([_(
'Upload a CSV file containing a list of incidents. Each row (except the first '
'one used for fields headers) represents one incident and should contain the '
'following fields:'
)]),
html.Ul([
html.Li(_('time_call: the date and time of the emergency call')),
html.Li(_('latitude: the latitude of the incident, as a float')),
html.Li(_('longitude: the longitude of the incident as a float')),
html.Li(_(
'BLS_time: the time taken by the BLS team to reach the incident, '
'in seconds',
)),
html.Li(_(
'home: a flag indicating whether the incident happened at home (1) '
'or in a street or public place (0)',
)),
html.Li(_(
'day: a flag indicating whether the incident happened during the '
'aeronautical day (1) or night (0)',
)),
html.Li(_(
'low_wind: a flag indicating whether the wind during incident was low '
'enough to fly (1) or faster than 50 km/h (0)',
)),
html.Li(_(
'clear_sight: a flag indicating whether the sight during incident was '
'clear enough to fly (1) or below 200m (0)',
)),
]),
html.Textarea(
children=textwrap.dedent('''\
,time_call,BLS_time,day,low_wind,clear_sight,home,latitude,longitude
0,01/01/17 00:13,214.0,0,1,1,1,48.8240664,2.3680644
1,01/01/17 03:49,1062.0,0,1,1,1,48.785867700000004,2.4296106
2,01/01/17 06:03,442.0,0,1,1,1,48.8405163,2.2878906000000003
3,01/01/17 06:15,486.0,0,1,1,1,48.8759425,2.1920694
4,01/01/17 08:56,366.0,1,1,1,1,48.7890453,2.4475238999999998
5,01/01/17 12:14,630.0,1,1,1,1,48.873926899999994,2.1894501'''),
disabled=True, style={'height': 150, 'width': '100%'}),
dcc.Upload(
id='upload-incidents',
children=html.Div([
_('Drag and Drop or '),
html.A(html.Button(_('Select a File'))),
]),
),
html.Div(id='output-incidents-upload'),
], style={'marginTop': '10px',
'paddingRight': '0', 'paddingLeft': '0'}),
),
], style={'marginTop': '10px',
'paddingRight': '0', 'paddingLeft': '0'})
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
from app import app, server
from tabs import intro, predictCSS
style = {
'maxWidth': '900px',
'margin': 'auto'}
app.title = 'Colorectal cancer survival prediction with interpretable AI'
app.layout = html.Div([
html.A([html.Img(src='https://github.com/jebibault/ProstateCancerSurvival/blob/master/figures/logo.png?raw=true', style={'width' : '100%', 'margin-bottom': '15px', 'margin-top': '25px'})], href='http://med.stanford.edu/xinglab.html', target='_blank'),
dcc.Markdown("## Predict colorectal cancer survival with interpretable AI"),
html.P([
'This model allows you to predict the risk to die from colorectal cancer 10 year after diagnosis',
html.Br(),
html.Br(),
html.Br()]),
dcc.Tabs(id='tabs', value='tab-intro', parent_className='custom-tabs', className='custom-tabs-container', children=[
dcc.Tab(label='About', value='tab-intro', className='custom-tab', selected_className='custom-tab--selected'),
dcc.Tab(label='Predict cancer-specific survival', value='tab-predictCSS', className='custom-tab', selected_className='custom-tab--selected')
]),
html.Div(id='tabs-content-classes'),
], style=style)
@app.callback(Output('tabs-content-classes', 'children'),
[Input('tabs', 'value')])
def render_content(tab):
#header
html.Div([
html.H1("ELISAQuant:", className = 'header-item'),
html.H4("An app to easily and reproducibly quantify analyte concentration", className = 'header-item')
], id = 'header'),
#body
html.Div([
html.Div([
dbc.Card([
dbc.CardHeader("Upload Data"),
dbc.CardBody([
html.Br(),
#data needed to process the data
html.Div([
dbc.Label("Choose Template", size = 'lg', style = {'width':'50%'}),
dbc.Button(html.Span([html.Img(src=app.get_asset_url('info.png'), style={'height':'100%', 'width':'100%'})]), color = 'link', id = 'temp-info-button', className = 'info-button'),
dbc.Modal([
dbc.ModalBody([
html.P("Please use one of the following two templates for your plate:"),
html.P("Option 1:"),
html.Img(src = app.get_asset_url('option_1.png'), style = {'width': '100%', 'height': '100%'}),
html.Br(),
html.Br(),
html.P("Option 2:"),
html.Img(src = app.get_asset_url('option_2.png'), style = {'width': '100%', 'height': '100%'})
])
], id = 'template-info')
], className = 'whole-column'),
dbc.RadioItems(
options=[
{"label": "Option 1", "value": 1},
met_list = list(met_comparison)
met_list = ','.join("'{0}'".format(comparison) for comparison in met_list)
drop_dict['value'] = met_list
dropdown_list.append(drop_dict)
#[{'label': 'OLFR2 vs. GPI1', 'value': ['OLFR2', 'GPI1']}, {'label': 'GPI1 vs. OLFR2', 'value': ['GPI1', 'OLFR2']}]
#print("mydropdown",dropdown_list)
# App layout
app.layout = html.Div([
# html.Div(
# html.Img(src='/assets/nyulogo.png'),
# ),
html.H1('Metabolyze Web App Test', style={'textAlign': 'center'}),
html.Img(src='/assets/nyulogo.png'),
dcc.Dropdown(
id='my-dropdown',
#options=[{'label':'OLFR2 vs. GPI1', 'value': "'OLFR2','GPI1'"}, {'label': 'GPI1 vs. OLFR2', 'value': "'GPI1','OLFR2'"}],
options=dropdown_list
#value=["test"]
),
html.Div(id='output-container'),
html.Button('Submit', id='button'),
html.Div(id='graph', className="row"),
html.Div(id='output-data-upload'),
])
#print([{'label':'OLFR2 vs. GPI1', 'value': "'OLFR2','GPI1'"}, {'label': 'GPI1 vs. OLFR2', 'value': "'GPI1','OLFR2'"}])
# App callback, input as dropdown list button click, output to datatable & graph
html.H2("Menu", className="display-4"),
html.Hr(),
dbc.Nav(
[
dbc.NavLink(
"Face Verification", href="/face-verification", active="exact")
],
vertical=True,
pills=False,
),
],
style=SIDEBAR_STYLE,
className="simplesidebar")
images_component = dbc.Row([
dbc.Col(html.Div(html.Img(
src='data:image/png;base64,{}'.format(encoded_image), className="img"),
id="output-data-upload",
className="img-div"),
width=5),
dbc.Col(html.Div(html.Img(
src='data:image/png;base64,{}'.format(encoded_image), className="img"),
id="output-data-upload-2",
className="img-div"),
width=5),
],
justify="center",
className="images-component")
images_component_cell = dbc.Row([
dbc.Col(
html.Div([
import plotly.express as px
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
df = pd.read_csv('client-location-data.csv')
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div(children=[
html.Div([
html.A(html.Img(
src=
"https://alariss.com/wp-content/uploads/2019/07/[email protected]",
style={
'float': 'left',
'height': '65px',
'paddingLeft': '20px'
}),
href="https://alariss.com"),
html.H1(children=["Alariss Client Map"],
style={
'paddingLeft': '37%',
'color': 'navy',
'fontFamily': 'Arial',
'fontSize': 42,
'paddingTop': '5px',
'paddingBottom': '5px'
})
],
style={
def _update_output(value):
if value.endswith('png'):
# display the png images directly
img = base64.b64encode(open(value, 'rb').read())
return html.Img(width='100%',
src='data:image/png;base64,{}'.format(img.decode()))
elif value.endswith('tsv'):
max_rows = 20
df_ = pd.read_csv(value, sep='\t', header=[0])
if df_.shape[0] == 1:
df_ = df_.transpose()
df_.columns = ['score']
return html.Table(
# Header
[html.Tr([html.Th(col) for col in df_.columns])] +
# Body
[
html.Tr([html.Td(df_.iloc[i][col]) for col in df_.columns])
for i in range(min(len(df_), max_rows))
])
elif value.endswith('ply'):
dfheader = pd.read_csv(value, sep='\t', header=[0], nrows=0)
# read the annotation for the dropdown
annot = []
for col in dfheader.columns:
if col[:len('annot.')] == 'annot.':
annot.append(col[len('annot.'):])
return html.Div([
html.Div([
dcc.Dropdown(
id='xaxis',
options=[{
'label': x,
'value': x
} for x in ['Component {}'.format(i) for i in [1, 2, 3]]],
value='Component 1'),
dcc.Dropdown(
id='yaxis',
options=[{
'label': x,
'value': x
} for x in ['Component {}'.format(i) for i in [1, 2, 3]]],
value='Component 2'),
dcc.Graph(id='scatter')
],
style={
'width': '100%',
'display': 'inline-block',
'padding': '0 20'
}),
html.Div([
dcc.Dropdown(id='operation',
options=[{
'label': x,
'value': x
} for x in ['pca', 'tsne']],
value='pca'),
dcc.Dropdown(id='annotation',
options=[{
'label': x,
'value': x
} for x in ['None'] + annot],
value='None'),
dcc.Graph(id='features')
],
style={
'width': '100%',
'display': 'inline-block',
'padding': '0 20'
}),
],
style={'columnCount': 2})
# else the value is not known
return html.P('Cannot find action for {}'.format(value))
dcc.Interval(
id='interval-component',
interval=1*1000, # in milliseconds
n_intervals=0
),
# TOP ROW
html.Div(
[
html.Div(
className="one-third column",
children = [
html.Img(
src=app.get_asset_url("logo.png"),
id="plotly-image",
style={
"height": "80px",
"width": "auto",
"margin-bottom": "25px",
},
)
],
),
html.Div(
className="one-half column",
id="title",
children = [
html.Div(
[
html.H3(
"Smart Waste Management",
width=canvas_width,
height=canvas_height,
hide_buttons=[
"zoom", "pan", "line", "pencil", "rectangle", "undo",
"select"
])
],
style={"width": "100%"}),
DataTable(id='annot-canvas-table',
style_cell={'textAlign': 'left'},
columns=[{
"name": i,
"id": i
} for i in columns]),
html.Div([
html.Img(id='my-image', width=canvas_width, height=canvas_height),
]),
# html.P()
])
@app.callback(Output('annot-canvas-table', 'data'),
[Input('annot-canvas', 'json_data')])
def update_data(string):
if string:
data = json.loads(string)
else:
raise PreventUpdate
return data['objects'][1:]
placeholder = 'Select time to check',
style = {
'width': 500,
'display': 'inline-block',
'verticalAlign': 'middle'
}
),
html.Br(),
html.Div(
[
html.Div(style = {'width': '30%', 'display': 'inline-block'}),
html.Div(
[
html.H3(children = 'Webcam'),
html.Img(id = 'tpm_webcam', style = {'height': '90%', 'width': '90%', 'border': '2px black solid'})
],
style = {'width': '20%', 'display': 'inline-block'}
),
html.Div(
[
html.H3(children = 'Screen'),
html.Img(id = 'tpm_screen', style = {'height': '90%', 'width': '90%', 'border': '2px black solid'})
],
style = {'width': '20%', 'display': 'inline-block'}
),
html.Div(style = {'width': '30%', 'display': 'inline-block'}),
]
),
html.Br(),
html.Button('Run Check', id = 'tpm_button_run', style = {'display': 'inline-block'}),
def genResult(src, user, iframe, **kwargs):
tabs = html.Div([
html.Div('', className='tile is-3'),
html.Div([
html.Div([
html.Ul([
html.Li(
[
html.A('视频词云'),
],
className='is-active',
id='tabsCloud',
),
html.Li([
html.A('短文本主题建模'),
], id='tabsLDA'),
html.Li([
html.A('文章统计', ),
], id='tabsOther'),
])
],
className='tabs is-centered is-medium',
style={'width': '100%'}),
],
className='tile is-6')
],
className='tile is-ancestor',
style={'marginBottom': '1rem'})
# tabs = html.Div([
# html.Ul([
# html.Li([
# html.A('视频词云'),
# ], className='is-active', id='tabsCloud', ),
# html.Li([
# html.A('LDA主题分析'),
# ], id='tabsLDA'),
# html.Li([
# html.A('文章统计', ),
# ],id='tabsOther'),
# ])
# ], className='tabs is-centered is-medium', style={'margin': '0 25% 2rem 25%'}),
tabsColud = html.Div([
html.Img(src=src,
className='',
style={
'max-width': '600px',
'min-width': '300px'
}),
],
className='wcImg',
id='userWC'),
tabsLDA = html.Div([
html.Iframe(src=iframe,
style={
'height': '130vh',
'width': '100%',
'overflow': 'hidden'
}),
],
className='wcImg',
id='userLDA',
style={'display': 'none'}),
tabsOther = html.Div([
html.Div(genTongji(**kwargs), style={'width': '100%'}),
],
className='',
id='userOther',
style={
'display': 'none',
'width': '100%'
}),
userInfo = html.Div([
html.Div('', className='tile is-3'),
html.Div([
html.Div([
html.Article([
html.Figure([
html.P([html.Img(src=user.avatar)],
className='image is-64x64')
],
className='media-left'),
html.Div([
html.Div([
html.P([
html.Strong(user.nickname,
id='recordNickName'),
html.Small(' | ' + user.user_id,
style={'whiteSpace': 'pre'}),
html.P(user.user_id,
style={'display': 'none'},
id='recordUserId'),
html.Br(),
html.Div(user.signature)
])
],
className='content'),
html.Div([
html.Div([
html.Div([
html.Span('作品: ',
style={'whiteSpace': 'pre'}),
html.Span(
format(user.aweme_count, ',') if user.
aweme_count else '未知'),
],
className='level-item'),
html.Div([
html.Span('获赞: ',
style={'whiteSpace': 'pre'}),
html.Span(
format(user.total_favorited, ',')
if user.total_favorited else '未知'),
],
className='level-item'),
html.Div([
html.Span('粉丝: ',
style={'whiteSpace': 'pre'}),
html.Span(
format(user.aweme_fans, ',') if user.
aweme_fans else '未知'),
],
className='level-item'),
],
className='level-left')
],
className='level is-mobile')
],
className='media-content'),
html.Div([
html.Button(
'相似用户',
className='button is-primary is-outlined is-small',
id='searchSimalar')
],
className='media-right')
],
className='media'),
],
className='box',
style={'width': '100%'}),
],
className='tile is-6 search_input')
],
className='tile is-ancestor',
style={'marginBottom': '1rem'}),
fig = [userInfo, tabs, tabsColud, tabsLDA, tabsOther]
return fig
def helpPage():
final_list = []
final_list.append(
html.Div([
html.H3('About'),
html.P([
'CRISPRme is available as an online web app at ',
html.A('http://crisprme.di.univr.it',
href='http://crisprme.di.univr.it',
target='_blank'),
' a standalone command line package. The required inputs to perform an online search are: gRNA spacer(s), Cas protein, PAM sequence, genome build with or without the inclusion of genetic variants (1000G, HGDP and/or personal variants), and thresholds of mismatches and RNA/DNA bulges.'
])
]))
final_list.append(html.H3('Main Page'))
final_list.append(
html.Div([
html.P([
'A search on CRISPRme can be performed in three simple steps thanks to the user-friendly user interface. Several options are available to personalize a search.',
html.Img(src='data:image/png;base64,{}'.format(
base64.b64encode(
open(app_main_directory + '/assets/main_page.png',
'rb').read()).decode()),
width="100%",
height="auto")
]),
html.Ul(
[
html.Li([
'STEP 1: Spacer, Cas Protein and PAM selection',
html.Ul(
[
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/guides.png', 'rb').read()).decode()), width='30%'),
html.
Li('Spacer(s): The guide RNA (gRNA) spacer sequence matches the genomic target protospacer sequence (typically 20 nucleotides) and directs Cas protein binding to the protospacer in the presence of a protospacer adjacent motif (PAM). The spacer sequence is represented as DNA (rather than RNA) in CRISPRme to allow easy comparison to the aligned protospacer sequence. CRISPRme accepts a set of gRNA spacer(s), one per line, each with the same length (max 100 sequences). The input spacer sequence should not include PAM.'
),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/sequence.png', 'rb').read()).decode()), width='40%'),
html.
Li('Genomic sequence(s): CRISPRme can alternatively take as input a set of genomic coordinates in BED format (chromosome# start end) or DNA sequences in FASTA format (max 1000 characters). The BED file coordinates will be treated as 0-based and CRISPRme (online version) will extract the first 100 possible spacer sequences within these coordinates starting with the positive strand. To use this type of input, the user must delimit each entry with a >header.'
),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/nuclease.png', 'rb').read()).decode()), width='30%'),
html.
Li('PAM sequence: The PAM is a short (∼2-6 nucleotide) DNA sequence adjacent to the protospacer necessary for the Cas protein to bind to a specific DNA target. CRISPRme supports a set of PAMs and users must select one of them in order to perform the search. The software supports both 3’ (e.g. SpCas9) and 5’ (e.g. Cas12a) PAM sequences.'
),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/pam.png', 'rb').read()).decode()), width='30%'),
# html.Li(
# 'PAM: here you can select a Protospacer Adjacent Motif for the specified Cas protein.'),
],
style={'padding': '15px'})
]),
# html.Li(
# [
# 'STEP 1: Genome and PAM selection',
# html.Ul(
# [
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/genome.png', 'rb').read()).decode()), width='30%'),
# html.Li(
# 'Genome: here you can select a genome from the ones present, some genomes have also the variant version enriched (indicated with a \'+\' symbol) with genetic variant from the 1000genome project'),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/pam.png', 'rb').read()).decode()), width='30%'),
# html.Li(
# 'PAM: here you can select a Protospacer Adjacent Motif for a specific Cas protein.'),
# ], style={'padding': '15px'}
# )
# ]
# ),
html.Li([
'STEP 2: Genome selection and threshold configuration',
html.Ul(
[
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/genome.png', 'rb').read()).decode()), width='40%'),
html.
Li('Genome builds: The genome builds are based on FASTA files from UCSC. The hg38 and hg19 genomic builds are available with the option to incorporate variants from 1000G, HGDP, and/or personal variants in the search. The option to add personal variants is enabled only for the local offline and command line versions.'
),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/thresholds.png', 'rb').read()).decode()), width='20%'),
html.
Li('Search thresholds: CRISPRme allows users to specify the number of mismatches, DNA and RNA bulges tolerated in enumerating potential off-targets. The web-tool allows up to 6 mismatches and up to 2 RNA/DNA bulges (which can be consecutive (NN--NN) or interleaved (NN-N-NN)). However, for the command line version, these thresholds can be set freely and depend only on the available computational resources.'
),
# html.Li(
# 'Bulge DNA size: size of bubbles tolerated on the DNA sequence (can be consecutive(AA--AA) or interleaved(AA-A-AA)).'),
# html.Li(
# 'Bulge RNA size: size of bubbles tolerated on the RNA sequence (can be consecutive(AA--AA) or interleaved(AA-A-AA))'),
],
style={'padding': '15px'})
]),
# html.Li(
# [
# 'STEP 2: Guide insertion and threshold configuration',
# html.Ul(
# [
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/guides.png', 'rb').read()).decode()), width='40%'),
# html.Li(
# 'Guides: a list of crRNAs sequences, consisting in 1 or more sequences (max 1000 sequences) to search on the genome'),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/sequence.png', 'rb').read()).decode()), width='40%'),
# html.Li('Sequence: one or more genetic sequences (max 1000 characters), each sequence MUST BE separated with the header \'>name\'. The sequence can be also submitted with a ' +
# 'chromosome range, also provided with an header. The region will be extracted from the Genome selected in STEP 1'),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/crRNA.png', 'rb').read()).decode()), width='20%'),
# html.Li(
# 'Allowed mismatches: number of tolerated mismatches in a target'),
# html.Li(
# 'Bulge DNA size: size of bubbles tolerated on the DNA sequence (can be consecutive(AA--AA) or interleaved(AA-A-AA)).'),
# html.Li(
# 'Bulge RNA size: size of bubbles tolerated on the RNA sequence (can be consecutive(AA--AA) or interleaved(AA-A-AA))'),
# # html.Img(src = 'data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory+'/assets/helpPage/crRNA.png', 'rb').read()).decode()), width='20%' ),
# html.Li(
# 'crRNA length: available only when a genetic sequence is given as input, represents the length of the guides (without PAM) that you want to extract from the sequence.')
# ], style={'padding': '15px'}
# )
# ]
# ),
html.Li([
'STEP 3 Annotation(s), email notification, and job name',
html.Ul(
[
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/advOpt.png', 'rb').read()).decode()), width='40%'),
html.
Li('Functional annotations: To assess the potential impact of off-target activity, CRISPRme provides a set of functional annotations for coding and non-coding regions. The annotations are based on files obtained from the Encyclopedia of DNA Elements (ENCODE) containing candidate cis regulatory elements21 and from GENCODE25 containing annotations for protein coding genes, transcribed but untranslated regions, and introns. In the offline versions of CRISPRme, users can add custom genome annotations, such as cell-type specific chromatin marks or off-target sites nominated by in vitro and/or cellular assays as simple BED files.'
),
html.
Li('Email notification: If an email address is provided, the user will receive a notification upon the job completion.'
),
html.
Li('Job name: If a string is provided, a prefix will be added to the unique job id to facilitate the identification of a particular search e.g. my_job_G05B8KHU0H.'
),
],
style={'padding': '15px'})
])
# html.Li(
# [
# 'STEP 3 (Advanced options): Select various comparisons',
# html.Ul(
# [
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/helpPage/advOpt.png', 'rb').read()).decode()), width='40%'),
# html.Li(
# 'Compare your results with the GeCKO v2 library: selected by default, compares the results of your guides with the results obtained in a previous search with guides from the well-known GeCKO library.'),
# html.Li('Compare your results with the corresponding reference genome: selected by default when an enriched genome is chosen, compares the results with the respective reference genome to evaluate differences when variant are added.'),
# html.Li(
# 'Notify me by email: if selected, let you insert an email to receive a notification when your job is terminated.'),
# ], style={'padding': '15px'}
# )
# ]
# )
],
style={'padding': '15px'})
]))
final_list.append(
html.P([
'After selecting the desired inputs, clicking the Submit button starts the search . After the submission, a new page will show the status and progress.'
]))
final_list.append(
html.Div([
html.Img(src='data:image/png;base64,{}'.format(
base64.b64encode(
open(app_main_directory + '/assets/helpPage/load_page.png',
'rb').read()).decode()),
width='100%')
]))
final_list.append(
html.P([
# 'After the submission, the status of the search will be displayed in a new page',
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(
# open(app_main_directory+'/assets/waitPage/loadPage.png', 'rb').read()).decode()), width='100%'),
'Upon completion of the job, a link “View Results” will appear to view the results at the bottom of the status report page.',
html.P(
html.Img(src='data:image/png;base64,{}'.format(
base64.b64encode(
open(
app_main_directory +
'/assets/helpPage/jobDone.png',
'rb').read()).decode()),
width='100%'))
]))
final_list.append(html.H3('Result Page'))
final_list.append(
html.P(
[
'CRISPRme summarizes the results in a table highlighting for each gRNA its CFD specificity score and the count of on-targets and off-targets found in the reference and variant genomes grouped by number of mismatches and bulges. Of note, the CFD specificity score was initially proposed for searches of up to 3 or 4 mismatches; as the number of mismatches increase, the score decreases non-linearly. Importantly, these scores should be compared with caution between searches with different numbers of mismatches/bulges and/or different genetic variant datasets,\n \
At the top of the page, the user can find a summary table reporting the nuclease, the CFD specificity score and the number of targets in each category of mismatches and bulges. In the top left corner there is a “Download General Table”’ button allowing the download of the table as a text file.' ,
html.P(html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
'/assets/resultPage/resultsSummary.png', 'rb').read()).decode()), width='100%')),
html.Ul(
[
html.Li('CFD: Off-Target Cutting Frequency Determination Score, calculates how much is the affinity of the guides with the off-targets, basically tells you the likelihood of the guide to perform cut in off-target regions.'),
# html.Li('Doench 2016: On-Target Efficacy Scoring (Azimuth 2.0), it’s a trained machine learning model that gives you the likelihood of on-target activity for the selected guide.'),
# html.Li(
# 'On-Targets Reference: shows how many possible On-Targets the guide can have in the Reference Genome.'),
# html.Li(['Samples in Class 0 - 0+ - 1 - 1+: shows the number of samples grouped by Sample Class:',
# html.Ul([
# html.Li(
# 'Class 0: Samples that does not have any On-Targets'),
# html.Li(
# 'Class 0+: Samples that have a subset of the Reference Genome On-Targets'),
# html.Li(
# 'Class 1: Samples that have the same On-Targets as the Reference Genome'),
# html.Li(
# 'Class 1+: Samples that creates at least a new On-Target, that is not present in the Reference Genome')
# ])
# ]),
html.Li('Off-Targets Reference (0 - n Mismatches + Bulges): shows how many possible Off-Targets the guide can have in the Reference Genome. Targets are also grouped by Mismatch + Bulge value.'),
html.Li('Off-Targets Variant (0 - n Mismatches + Bulges): shows how many possible Off-Targets the guide can have in the Variant Genome. Targets are also grouped by Mismatch + Bulge value.')
], style={'padding': '15px'}
),
# html.P(html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory+
# '/assets/resultPage/populationDistribution.png', 'rb').read()).decode()), width='100%')),
# 'The Show Target Distribution in Populations button opens a section where informations about the number of targets found in each Superpopulation (EAS, EUR, AFR, AMR, SAS) are provided by means of a barplot for each Mismatch + Bulge value. ',
html.P('In addition, for each guide, six different interactive reports are generated and are available to be downloaded: Custom Ranking, Summary by Mismatches/Bulges, Summary by Sample, Query Genomic Region, Graphical Reports and Personal Risk Cards:'),
html.Ul(
[
html.Li([html.Span('Custom ranking: ', style={
'color': 'red'}), 'In this report, users can filter and rank potential off-targets based on number of mismatches and/or bulges, CFD score, Risk Score (increase in CFD score due to genetic variants), or a combination of them.']),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
'/assets/resultPage/customRanking.png', 'rb').read()).decode()), width='100%'),
html.Li([html.Span('Summary by Mismatches/Bulges: ', style={
'color': 'red'}), 'This report shows a matrix separating targets into subgroups based on the type of target, mismatch count and bulge size. “X” targets contain only mismatches, “DNA” targets contain DNA bulges (and may contain mismatches), and “RNA” targets contain RNA bulges (and may contain mismatches)']),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
'/assets/resultPage/summaryByGuide.png', 'rb').read()).decode()), width='100%'),
html.Ul(
[
html.Li(
'Bulge Type: type of bulge of the targets, can be X (no bulge), DNA or RNA.'),
html.Li(
'Bulge Size: size of the bulge present in the targets.'),
html.Li(
'Mismatches: number of mismatches present in the targets.'),
html.Li(
'Targets in Reference: number of targets found in the Reference Genome for that combination of mismatch/bulge.'),
html.Li(
'Targets in Variant: number of targets found in the Variant Genome for that combination of mismatch/bulge. Each of these targets is associated with at least one sample.'),
html.Li(
'PAM Creation: number of possible created PAMs due to variants addition.'),
html.Li(
'Show Targets: open a new page to display all the targets of the row of interest as in the following image:'),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
'/assets/resultPage/summaryByGuide_show_targets.png', 'rb').read()).decode()), width='100%'),
]
),
html.Li([html.Span('Summary by Sample: ', style={
'color': 'red'}), 'This page shows all the samples present in the VCFs and allows users to extract and visualize targets related to each sample.']),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
'/assets/resultPage/summaryBySamples.png', 'rb').read()).decode()), width='100%'),
html.Ul(
[
html.Li(
'Gender: the sample gender'),
html.Li(
'Population: population which the sample belong to'),
html.Li(
'Super Population: continent which the sample belong to'),
html.Li(
'Targets in Variant: number of targets found in the Variant Genome that are generated by that sample'),
html.Li(
'Targets in Population: number of targets found in the Variant Genome that are generated by all the sample of the population'),
html.Li(
'Targets in Super Population: number of targets found in the Variant Genome that are generated by all the populations'),
html.Li(
'PAM Creation: number of possible created PAMs due to variants addition'),
# html.Li(
# 'Class: Sample Class (0 - 0+ - 1 - 1+) associated with the sample'),
html.Li(
'Show Targets: open a new page to display all the targets of the row of interest as in the following image:'),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
'/assets/resultPage/summaryBySamples_show_targets.png', 'rb').read()).decode()), width='100%'),
]
),
html.Li([html.Span('Query Genomic Region: ', style={
'color': 'red'}), 'This page allows the user to retrieve targets overlapping a specific genomic region, for example to quickly assess potential off-targets in a given regulatory element or coding region.']),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
'/assets/resultPage/summaryByPosition.png', 'rb').read()).decode()), width='100%'),
# html.Ul(
# [
# html.Li(
# 'Position: chromosome relative position of the first letter of the guide'),
# html.Li(
# 'Best Target: best target found in that position'),
# html.Li(
# 'Min Mismatch: minimum number of mismatches present in the targets in that position'),
# html.Li(
# 'Min Bulge: minimum number of bulges present in the targets in that position'),
# html.Li(
# 'Bulge: number of bulges present in the targets in that position'),
# html.Li(
# 'Targets in Cluster by Mismatch Value: Matrix showing the distribution of the targets grouped by mismatch/bulge count'),
# ]
# ),
# html.Li([html.Span('Graphical Reports: ', style={
# 'color': 'red'}), 'This page shows graphics about a specific guide, including genomic annotation and motif logos. The main feature introduced is the possibility to visualize graphical reports at individual level.']),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
# '/assets/resultPage/summaryByGraphic_population.png', 'rb').read()).decode()), width='100%'),
# html.Li(
# 'Select a Mismatch and Bulge Value: generate graphics with the specified mismatch+bulge value'),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
# '/assets/resultPage/summaryByGraphic_sample.png', 'rb').read()).decode()), width='100%'),
# html.Li(
# 'Select Individual Data: generate individual data, by selecting Super Population, Population and Sample'),
# html.Li([html.Span('Personal Risk Cards: ', style={
# 'color': 'red'}), 'This page shows at individual level the most important data for a given sample.']),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
# '/assets/resultPage/personalCard.png', 'rb').read()).decode()), width='100%'),
# html.Ul(
# [
# html.Li(
# 'Plot showing the difference in terms of CFD score in a specific genetic region, when accounting for variants in targets in which the selected sample appear.'),
# html.Li(
# 'Plot showing the difference in terms of CFD score in a specific genetic region, when accounting for variants in targets unique to the selected sample.'),
# html.Li(
# 'Set of tables reporting the personal information for the selected sample. \n \
# The first table reports personal targets, PAM creation target and private targets. \n \
# The second table lists for each target the crRNA and DNA sequences, the position and cluster position, \
# the chromosome, direction, mismatches, bulge size and total. It also reports the CFD score for the reference and variant target, \
# the annotation and eventually the new PAM generation due to substitution or insertion/deletion (not showed in the figure).')
# ]
# )
html.Li([html.Span('Graphical Reports: ', style={
'color': 'red'}), 'This page creates several graphical reports for each selected sgRNA.']),
# html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
# '/assets/resultPage/summaryByGraphic_population.png', 'rb').read()).decode()), width='100%'),
html.Li(
'A stem plot shows how genetic variants affect predicted off-target potential. The arrow connecting the red (reference allele off-target) and blue (alternative allele off-target) dots shows the increase in predicted cleavage potential due to the variant.'),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
'/assets/resultPage/lolli_plot.png', 'rb').read()).decode()), width='100%'),
html.Li(
'Bar plots depict how candidate off-targets are distributed across super-populations based on the number of mismatches and bulges '),
html.Li(
'A radar chart with the relative specificity of the analyzed guide for each functional region based on annotations from GENCODE and ENCODE. A larger area in the chart represents a gRNA with more potential off-targets falling in annotated regions, possibly representing an undesirable outcome. A summary table provides the count and percentage of off-targets with a given annotation.'),
html.Li(
'A motif logo summarizing the frequency of mismatches and bulges (b) for each base of the protospacer + PAM.'),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory +
'/assets/resultPage/barplot_radar_motif.png', 'rb').read()).decode()), width='100%'),
html.Li([html.Span('Personal Risk Cards: ', style={
'color': 'red'}), 'CRISPRme provides a dedicated page to generate reports called Personal Risk Cards that summarize potential off-target editing by a particular gRNA in a given individual due to genetic variants. This feature is particularly useful for retrieving and investigating private off-targets. \
The report contains two dynamically generated plots depicting all the candidate variant off-targets for the sample including those non-unique to the individual and those that are unique to the individual. These plots highlight how the introduction of genetic variants can change the predicted off-target cleavage potential, \
thereby demonstrating the importance of variant-aware off-target assessment as in CRISPRme. The report also contains two tables, consisting of a summary (Table 1, top) and information on each extracted candidate off-target (Table 2, bottom) with the following columns:' ]),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory + \
'/assets/resultPage/personalCard_top.png', 'rb').read()).decode()), width='100%'),
html.Img(src='data:image/png;base64,{}'.format(base64.b64encode(open(app_main_directory + \
'/assets/resultPage/personalCard_bottom.png', 'rb').read()).decode()), width='100%'),
# html.Ul(
# [
# html.Li(
# 'Plot showing the difference in terms of CFD score in a specific genetic region, when accounting for variants in targets in which the selected sample appear.'),
# html.Li(
# 'Plot showing the difference in terms of CFD score in a specific genetic region, when accounting for variants in targets unique to the selected sample.'),
# html.Li(
# 'Set of tables reporting the personal information for the selected sample. \n \
# The first table reports personal targets, PAM creation target and private targets. \n \
# The second table lists for each target the crRNA and DNA sequences, the position and cluster position, \
# the chromosome, direction, mismatches, bulge size and total. It also reports the CFD score for the reference and variant target, \
# the annotation and eventually the new PAM generation due to substitution or insertion/deletion (not showed in the figure).')
# ]
# )
html.Ul(
[
html.P(
'Table 1:'),
html.Li(
'Personal, count of all the candidate variant off-targets for the selected sample (including variants unique and non-unique to the individual)'),
html.Li(
'PAM creation, count of all the instances where a genetic variant in the sample introduces a new PAM.'),
html.Li(
'Private, count of all the candidate variant off-targets uniquely found in the selected sample.'),
]
)
], style={'padding': '15px'}
)
]
)
)
# final_list.append(
# html.Div(
# [
# html.H3('Browser Compatibility'),
# html.Div([
# dash_table.DataTable(
# data=[{'OS': 'Linux', 'V': 'Ubuntu 18.04.2 LTS', 'Ch': '79.0', 'S': 'n/a', 'ME': 'n/a', 'F': '71.0'},
# {'OS': 'MacOS', 'V': 'Mojave', 'Ch': ' 79.0',
# 'S': '13.0.4', 'ME': 'n/a', 'F': '71.0'},
# {'OS': 'Windows', 'V': '10', 'Ch': '79.0', 'S': 'n/a', 'ME': '44.18362.449.0', 'F': '71.0'}],
# columns=[{'id': 'OS', 'name': 'Operative System'}, {'id': 'V', 'name': 'Version'}, {'id': 'Ch', 'name': 'Chrome'},
# {'id': 'S', 'name': 'Safari'}, {'id': 'ME', 'name': 'Microsoft Edge'}, {
# 'id': 'F', 'name': 'Firefox'}
# ],
# style_cell={
# 'textAlign': 'center',
# 'width': '20'
# },
# style_data_conditional=[
# {
# 'if': {'row_index': 'odd'},
# 'backgroundColor': 'rgb(248, 248, 248)'
# }
# ],
# style_header={
# 'backgroundColor': 'rgb(230, 230, 230)',
# 'fontWeight': 'bold'
# }
# )
# ], style={'display': 'inline-block', 'width': '48%'})
# ]
# )
# )
page = html.Div(final_list, style={'margin': '1%'})
return page
return [{'label': area, 'value': area} for area in optionsAreas]
app.layout = html.Div(
[
# Hidden div inside the app that stores the intermediate value
html.Div(id='intermediate-value-pgc', style={
'display': 'none'
}), # pgc stands for primary graph color
html.Div(id='intermediate-value-sgc',
style={'display': 'none'}), # sgc is secondary graph color
##################### tabs ####################
html.Div(
[
html.Img(src='data:image/png;base64,{}'.format(
encoded_image.decode()),
style={'width': '10vw'}),
# importing Insight logo
# Declaring Tabs below
dcc.Tabs(
tabs=[
{
'label': 'Visualize Data',
'value': 1
}, # tab1
{
'label': 'Predictive Model',
'value': 2
}, # tab2
{
'label': 'Settings',
],
style={
'width': '45%',
'display': 'inline-block',
'padding': '0px 5px 5px 10px'
}),
# wordclouds
html.Div([
dcc.Dropdown(id='image-dropdown',
options=[{
'label': i,
'value': i
} for i in list_of_images],
value=list_of_images[0]),
html.Img(id='image')
],
style={
'float': 'right',
'width': '45%',
'padding': '0px 15px 5px 0px'
})
])
# pie chart
@app.callback(dash.dependencies.Output('pie-graph', 'figure'),
[dash.dependencies.Input('MyModel', 'value')])
def update_graph(MyModel):
if MyModel == "All Models":
values = [.2, .3, .5]