def MandatoryInputHelpList():
return html.Ul([
html.Li(
'Sequence file. This should be a FASTA file containing only one sequence, the one '
'corresponding with the structure of interest. If there are multiple sequences, ConPlot will '
'only consider the first sequence present in the file. Please note that unlike '
'other types of input, only one sequence can be uploaded in each session at '
'any given time. If you want to upload a new sequence, that means you will '
'need to delete the one you uploaded already first.',
style={
"font-size": "110%",
'text-align': "justify"
}),
html.Li([
'Contact information file. This file informs about which residue pairs are in close '
'contact in the three-dimensional structure of the protein of interest. There are three main '
'types that can be uploaded to ConPlot: ',
html.Ul([
html.Li([
'Residue Distance Prediction: these files contain information about real value distances '
'between residue pairs, and are rapidly replacing contact prediction maps in protein '
'structure prediction pipelines. ConPlot currently supports three formats: CASP RR MODE '
'2 format (read more ',
html.A(html.U('here'),
href=UrlIndex.CASP14_RRFORMAT.value),
'), MapPred output files (get them ',
html.A(html.U('here'), href=UrlIndex.MAPPRED_SERVER.value),
') and trRosetta npz files (get them ',
html.A(html.U('here'),
href=UrlIndex.TRROSETTA_SERVER.value), ').'
]),
html.Li([
'Contact Maps: There are many formats used for such files, but ConPlot is able to parse '
'the most common ones. If you wish to upload a contact map file in a format not '
'supported by ConPlot, we suggest you take a look at ',
html.A(html.U('ConKit'),
href=UrlIndex.CONKIT_READDOCS.value),
', a python library able to read and convert most contact formats. This tool will enable '
'you to convert the file of interest into a format ConPlot is able to read. ',
]),
html.
Li('Structural Information: PDB files can be uploaded to ConPlot, which will be parsed'
'in order to compute residue proximity information and generate a contact map derived '
'from the structure (only first model, first chain).')
])
])
],
style={
"font-size": "110%",
'text-align': "justify"
})
def ErrorAlert(is_open=False):
return dbc.Alert([
html.H4('ERROR', className="alert-heading"),
html.P([
"If you suspect a bug, please ",
html.A(html.U('get in touch'), href=UrlIndex.CONTACT.value),
" and report this to us, or create an issue on our ",
html.A(html.U("Github repository"),
href=UrlIndex.GITHUB.value,
className="alert-link")
]),
],
color='danger',
fade=True,
is_open=is_open,
id='error-alert')
def GdprPolicySectionSix():
return html.P([
'If you wish to know more about your rights under the General Data Protection Regulation '
'(GDPR), you can do this ',
html.A(html.U('here'), href=UrlIndex.GDPR_WEBSITE.value),
'. Here is a summary of what this includes:'
],
style={"text-align": "left"})
def analysis_out(selected_dropdown_value):
output = []
for term in selected_dropdown_value:
output.append(html.U(f"{term} Analysis: "))
output.append(analysis_dict[term])
output.append(html.Br())
output.append(html.Br())
return output
def GdprAgreementCheckbox():
return dbc.FormGroup(
[
dbc.Checkbox(id="gdpr-agreement-checkbox", className="form-check-input"),
dbc.Label([
"I read and agree to ConPlot ",
dbc.CardLink(html.U("Privacy Policy"), href=UrlIndex.PRIVACY_POLICY.value)
], html_for="standalone-checkbox", className="form-check-label", style={'margin-top': 2.5})
], check=True)
def InvalidLoginCollapse(id='invalid-login-collapse'):
return dbc.Collapse(dbc.Card(dbc.CardBody([
html.P("Invalid username or password, please try again."),
html.U(
dbc.NavLink('If you forgot your password, get in touch with us',
href=UrlIndex.CONTACT.value))
],
style={'text-align': "center"}),
color="danger",
outline=True),
id=id,
is_open=False)
def ContactBugAlert():
return dbc.Alert([
html.H4('Info', className="alert-heading"),
html.P([
"If you suspect a bug, you can also create an issue on the our ",
html.A(html.U("Github repository"),
href=UrlIndex.GITHUB.value,
className="alert-link")
]),
],
dismissable=False,
color='danger',
fade=True,
is_open=True,
id='bug-alert')
def overview_section():
"DB Component<Container>"
observation_string = f'{total_observations} observaciones de banquetas'
return dbc.Col([
dbc.Row(
dbc.Col(
dbc.Jumbotron([
html.H1("En SPGG"),
html.H5([
"De un total de ",
html.U(observation_string), ", se registran:"
]),
observation_types,
], ), )),
dbc.Row(dbc.Col([data_summary_component], id="count_report"))
], )
def Body():
return html.Div([
html.Br(),
html.Br(),
html.Br(),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
html.H3('Rigden Lab',
className="card-text",
style={'text-align': "center"}),
html.Br(),
html.P([
"""We are a structural bioinformatics group based at the """,
html.A(html.U('University of Liverpool'),
href=UrlIndex.UNIVERSITY_LIVERPOOL.value),
""". Our research focuses on the creation of new software tools aimed at the
applications of residue contact predictions in the fields of molecular replacement
and """,
html.I('ab initio'),
""" protein modelling. If you work in any of these fields and you enjoyed using
ConPlot, here are some of the tools we have developed that you may also find useful."""
],
style={
"font-size": "120%",
"text-align": "justify"
}),
html.Br(),
html.Br(),
AmpleJumbotron(),
ConkitJumbotron(),
SimbadJumbotron(),
SwampJumbotron(),
html.Br()
])
])
],
width=10),
],
justify='center',
align='center',
className='m-0')
])
def generate_thumbnail(news_title, description, news_url, news_image_url):
"""
Generate thumbnail for news article
:param news_title: title of the news
:param description: description of the news
:param news_url: url of the news (href)
:param news_image_url: url of image of news
:return: thumbnail for news article
"""
return html.Div([
html.Div([
html.Img(src=news_image_url,
style={"width": "25%", "vertical-align": "top"}),
html.Div([
html.P(html.U(html.B(news_title))),
html.Span(description+" ", style={"font-size": "13"}),
html.A("Read More", href=news_url, target='_blank'),
], style={"width": "70%", "display": "inline-block", "color": "white"})])
], className="newspaper_thumbnail")
def Body():
return html.Div([
GdprPolicyModal(),
html.Br(),
html.Br(),
html.Br(),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardHeader(GdprPolicyAlert()),
dbc.CardBody([
html.H2('Welcome to Conplot',
className="card-text",
style={'text-align': "center"}),
html.Br(),
html.Br(),
html.H4('About ConPlot',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P([
"""ConPlot is a web-based application for the visualisation of information derived from
residue contact and/or distance inter-residue predictions in combination with other
sources of information, such as secondary structure predictions, transmembrane helical
topology, sequence conservation. The plot allows the visual cross-referencing of
sequence-based prediction data from multiple sources. The exploitation of this novel
cross-referencing method can be useful to potentially expose structural features that
would otherwise go undetected. Developed by the """,
dbc.CardLink(html.U("Rigden Lab"),
href=UrlIndex.RIGDEN.value),
""" group at the """,
html.A(html.U("University of Liverpool"),
href=UrlIndex.UNIVERSITY_LIVERPOOL.value),
""" and hosted by """,
html.A(html.U("CCP4-Online"),
href=UrlIndex.CCP4_ONLINE.value),
""", this new tool provides an interactive interface for researchers in the field of
protein bioinformatics that are interested in analysing data on a given protein at a
glance."""
],
style={
"font-size": "120%",
"text-align": "justify"
}),
html.Br(),
html.Br(),
html.Br(),
html.H4('How does it work',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P([
"""A protein contact map is a two-dimensional representation of the (predicted)
contacting pairs of residues in the three-dimensional structure. Common depictions of
these maps tend to omit those contacts near the diagonal of the plot, as they
correspond to pairs of sequentially nearby residues and typically do not add any
valuable information to the plot. ConPlot takes advantage of this, and allows users
to use this space otherwise left empty to integrate different sources of information
into a contact map as coloured tracks in the diagonal. Additionally, ConPlot is
packed with features that allow the user to fully customise their plots:
"""
],
style={
"font-size": "120%",
"text-align": "justify"
}),
html.Ul([
html.
Li('Upload multiple contact maps to compare them, either by plotting each of them in '
'a half of the map or by superimposing one of top of the other.'
),
html.
Li('Upload predictions of inter-residue distances and visualise them as heatmaps in '
'combination with other predicted data in the diagonal.'
),
html.
Li('Full control over plot features such as contact marker size, track size or track '
'arrangement.'),
html.
Li('Multiple custom tracks can be added to the plot, enabling limitless '
'personalisation of the information displayed on the plot.'
),
html.
Li('User accounts are available in order to store sessions and re-visit them without '
'having to upload the data again. It is also possible to share these sessions with '
'other users.'),
],
style={
"font-size": "120%",
"text-align": "justify"
}),
html.P([
'Visit our ',
dbc.CardLink(html.U('help page'),
href=UrlIndex.HELP.value),
' to read about how to use ConPlot and take advantage of its full potential!'
],
style={
"font-size": "120%",
"text-align": "justify"
}),
html.Br(),
html.Br(),
html.H4('Cite us',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P(
'If you found ConPlot useful for your work and you would like to cite us '
'please use the following reference:',
style={
"font-size": "120%",
"text-align": "justify"
}),
html.I(
'Sánchez Rodríguez F. et al., ConPlot: Web-based application for the visualisation '
'of protein contact maps integrated with other data, Bioinformatics, 2021.',
style={
"font-size": "120%",
"text-align": "justify"
}),
html.Br(),
html.A(html.I(
html.U('DOI: 10.1093/bioinformatics/btab049')),
href=UrlIndex.CITATION.value)
]),
]),
],
width=10)
],
justify='center',
align='center',
className='m-0'),
])
])
app = dash.Dash()
app.title = 'supersavor'
server = app.server # the underlying Flask app
app.config['suppress_callback_exceptions']=True
app.layout = html.Div([
html.Div([
html.Span("super",style={'color':'#01b7c4'}),
html.Span(html.U("savor"),style={'color':'#f7a013'}),
], style={'font-size':'500%',
'font-family':'verdana',
'text-align':'center',
'padding':25
}
),
html.Div([html.I('Save time and money by finding recipes that optimizes online savings.')
], style={'font-size':'100%',
'font-family':'verdana',
'text-align':'center',
'padding':15,
'marginBottom':25
}
),
def Body(cache):
return html.Div([
html.Br(),
html.Br(),
html.Br(),
components.PaletteModal('density', 1),
components.PaletteModal('conservation', 2),
components.PaletteModal('custom', 3),
components.PaletteModal('disorder', 4),
components.PaletteModal('membranetopology', 5),
components.PaletteModal('msa', 6),
components.PaletteModal('secondarystructure', 7),
components.PaletteModal('hydrophobicity', 8),
components.PaletteModal('heatmap', 9),
components.GdprPolicyModal(),
components.TutorialOneModal(),
components.TutorialTwoModal(),
components.TutorialThreeModal(),
components.TutorialFourModal(),
# components.TutorialFiveModal(),
components.CustomFormatDescriptionModal(),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
html.H2('ConPlot help page',
className="card-text",
style={'text-align': "center"}),
html.Br(),
html.Br(),
html.P([
'Welcome to the ConPlot help page: here you can read how to use ConPlot and take '
'full advantage of all its features. This page is divided in a series of sections '
'that will guide you through the process of understanding what data files you need '
'to create a plot, how to adjust the layout of a plot and even store these plots '
'in your user storage area. If you came here looking for an example of the data '
'files used as an input, you can download them ',
html.A(html.U('here'),
href=UrlIndex.EXAMPLE_DATA.value), '.'
],
style={
"font-size": "110%",
"text-align": "justify"
}),
html.Br(),
html.H4('1. ConPlot layout',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P([
"To create a plot, you will need to understand first the layout of ConPlot's ",
html.I('Plot'),
' page. The layout of the application has been divided into four panels that will '
'allow you to interact with ConPlot:'
],
style={
"font-size": "110%",
'text-align': "justify"
}),
components.PanelLayoutHelpList(),
html.Br(),
html.Img(src=UrlIndex.HELP_FIG1.value,
height='700vh',
style={
'border': '5px solid',
'display': 'block',
'margin-left': 'auto',
'margin-right': 'auto'
}),
html.Br(),
html.Br(),
dbc.Alert([
'TIPS:',
html.Ul([
html.Br(),
html.Li([
"Note the difference between the ",
html.I('Generate Plot'), ' and the ',
html.I('Adjust Plot'),
" buttons. Use the former to create plots for the first time or after you "
"upload new data files into the current session, and the latter to adjust "
"the way the plot looks after tweaking the settings on the display "
"control panel."
]),
html.
Li("If you hover to the top right of the plot panel, the plot's mode bar will "
"appear. Use the buttons on this bar to control the behaviour of the "
"hovering tool, zoom in and out, change the scale of the plot or to "
"download the plot image as a png file.")
])
],
style={'text-align': "justify"},
color='info'),
dbc.Alert(
"WARNING: Do not click on the refresh button in your browser! Depending on your "
"browser, doing this may cause your session to expire and you will lose any "
"unsaved data and plots. Instead, use ConPlot's navigation bar on the top panel "
"to safely browse through the website.",
style={'text-align': "justify"},
color='danger'),
html.Br(),
html.H4('2. Required input',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.
P("ConPlot requires the following inputs to be able to create a plot.",
style={
"font-size": "110%",
'text-align': "justify"
}),
components.MandatoryInputHelpList(),
html.P([
'After you upload at least one file for each of these datasets you will be able to '
'generate a plain contact map plot by clicking on the ',
html.I('Generate Plot'),
' button. Note that it is possible to upload as many contact map files as you '
'wish, as it is possible to compare them or dynamically change which contact file '
'is loaded in the plot. More on how to do this will be explained later on.'
],
style={
"font-size": "110%",
'text-align': "justify"
}),
dbc.Alert([
'TIPS:',
html.Ul([
html.
Li('If you wish to remove a file that you have uploaded, simply close the '
'banner with its name and ConPlot will do the rest.'
),
html.Li([
'You can repeat the process of uploading a residue contact prediction '
'file using the ',
html.I('Upload Contact'),
' as many times as you wish in order to upload multiple contact maps.'
])
])
],
style={'text-align': "justify"},
color='info'),
dbc.Alert(
'WARNING: It is important that the numbering used in all the uploaded contact '
'map files matches the sequence of residues present in the '
'provided FASTA file. If this numbering does not match, this could result in '
'misrepresentations of data or even failure to create a plot.',
style={'text-align': "justify"},
color='danger'),
html.Br(),
html.H4('3. Additional tracks',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P(
"It is possible to add coloured tracks on the diagonal of the contact maps by "
"uploading a series of prediction files associated to the sequence of "
"interest. ConPlot is able to parse automatically the information contained in the "
"following formats:",
style={
"font-size": "110%",
"text-align": "justify"
}),
components.AdditionalFormatsHelpList(),
dbc.Alert([
'TIPS:',
html.Ul([
html.Br(),
html.
Li('You will not be able to upload a file until you first select its format '
'in the dropdown selection menu.'),
html.Li([
'You can only upload one file at a time when you use the ',
html.I('Add track'),
' button, but you can do this as many times as you wish in order to add '
'multiple tracks to the plot.'
]),
html.Li([
'If you would like to upload a sequence prediction that is not '
'included in the list of supported formats, you can always create a '
'custom file and add the information manually. If you think it would be '
'very useful to be able to read this format automatically with ConPlot, '
'you can try to ',
dbc.CardLink(html.U('get in touch'),
href=UrlIndex.CONTACT.value),
' and let us know.'
])
])
],
style={'text-align': "justify"},
color='info'),
html.P([
'There is no limit on the number of files you can upload, the only requirement is '
'that all the files correspond with the residue sequence that has been uploaded. '
'If these files do not match, this could result in data misrepresentation or '
'Conplot not being able to create a plot. Please note that if you upload multiple '
'files for a given format, the default behaviour of ConPlot is to include only the '
'first one to the plot. If you wish to visualise the other files, you will need to '
'select them in the track content selection menus as described in the next '
'section.'
],
style={
"font-size": "110%",
"text-align": "justify"
}),
html.Br(),
html.H4('4. Adjust the plot layout',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P([
'Once you have uploaded all the files of interest you can create your first plot '
'by clicking on ',
html.I('Generate Plot'),
'. Then, ConPlot will create a plot with the default layout settings. We tried to '
'make sure that by default ConPlot will generate plots where the provided data is '
'shown clearly, but this is a difficult task as it is something that is highly '
'dependent on your data. Thus, you are likely to need to adjust the settings on '
'the display control panel to get your data shown in the best possible way. To '
'help you do this, this panel has been divided into 4 sections:'
],
style={
"font-size": "110%",
"text-align": "justify"
}),
components.AdjustPlotHelpList(),
html.Br(),
dbc.Alert([
'TIPS: ',
html.Ul([
html.Br(),
html.Li([
'Remember that the ',
html.I('L/N'),
' selector will not affect any data being shown for PDB files. '
'Similarly, data will also not be affected if the ',
html.I('Create heatmap'),
' switch is turned on.'
]),
html.Li([
'If you have just created a plot with the ',
html.I('Generate Plot'),
' button and you can see individual squared tiles in the diagonal '
'tracks, try increasing the default value of the additional track '
'marker size.'
]),
html.Li([
'If you have just uploaded a file, it may be that this file is '
'not listed on the track selection layout. You may need to '
'click on the ',
html.I('Generate Plot'),
' button before being able to choose it in the dropdown menu.'
]),
html.Li([
'You may notice that when you zoom into a contact map, the contact '
'markers retain their size. There are two ways you can get around '
'this, we recommend using the ',
html.I('Create heatmap'),
' to create a heatmap where contact markers increase in size when '
'you zoom in. Alternatively, you can also change the contact '
'marker size with the ',
html.I("Size selector"), ' and click on ',
html.I("Adjust Plot"),
' and then zoom-in. This can be done repeatedly until the desired '
'size is chosen.'
]),
html.Li([
'Sometimes it is difficult to map a specific contact with its '
'annotations at the diagonal. Try turning on the ',
html.I('Verbose labels'), ' switch.'
]),
html.Li([
'If you have just created a plot with the ',
html.I('Generate Plot'),
' button and the diagonal tracks overlap with each other, try '
'increasing the default value of the additional track separation.'
])
])
],
style={'text-align': "justify"},
color='info'),
html.Br(),
html.H4('5. Colour Palettes',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.
P('Here is a list of the different palettes available for each dataset that you '
'can use in ConPlot'),
components.PaletteList(),
html.Br(),
html.Br(),
html.H4('6. User Accounts',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P([
'By creating a user account in ConPlot, you will be able to access a series of '
'additional features that will enable you to store sessions indefinitely and share '
'them with other users. You can access the user account menu with the ',
html.I('LOGIN'),
' dropdown menu on the top right of the navigation bar -panel 1 in Figure 1.'
],
style={
"font-size": "110%",
"text-align": "justify"
}),
components.UserAccountHelpList(),
html.Br(),
dbc.Alert(
'TIP: Interactive sessions expire after 60 minutes of inactivity. If you '
'wish to permanently save the data and plots, create a user account and store '
'the session before it expires.',
style={'text-align': "justify"},
color='info'),
html.Br(),
html.H4('7. Tutorials',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P([
"Here is a list of tutorials that will help you understand better how to use "
"ConPlot. We strongly encourage you to complete them before using ConPlot for the "
"first time, as they will guide you through the basic ConPlot features. We also "
"recommend completion of these tutorials in the specified order as each of them "
"will require you to understand concepts learned in the preceding one. To follow "
"them, you will need to download the example data ",
html.A(html.U('here'),
href=UrlIndex.EXAMPLE_DATA.value)
],
style={
"font-size": "110%",
"text-align": "justify"
}),
html.Br(),
components.TutorialList(),
html.Br(),
html.Br(),
html.H4('8. Using ConPlot locally',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P([
'ConPlot is a web-based application, and as such we recommend you make use of it '
'through this website. However, it is also possible to use ConPlot locally on your '
'personal machine using the localhost. There are two possible ways to achieve '
'this.',
html.Br(),
html.Br(),
html.H5('8.1 Using Docker image at DockerHub'),
"ConPlot is distributed as a docker image on the project's ",
html.A(html.U('Docker hub repository'),
href=UrlIndex.DOCKER_HUB.value),
'. To use it, you will need to link it with a Redis container:'
]),
dbc.Col([
html.Plaintext(
'$ docker pull filosanrod/conplot:latest\n$ docker run --name '
'redis_db -d redis:latest \n$ docker run --name conplot_app \ \n '
'-d filosanrod/conplot:latest gunicorn app:server -p 80:80 -b :80 \ '
'\n -e KEYDB_TIMEOUT=3600 -e KEYDB_URL="redis://redis_db:6379" \ \n'
' --link redis_db:redis --preload --workers=6 --timeout 120 \ \n'
' --graceful-timeout 120 --max-requests 5 --log-level=info'
)
],
style={'background-color': '#EAEAEA'},
align='center'),
html.P([
'After you set up running the docker container, you will be able to access the '
'app on http://0.0.0.0:80/home.',
html.Br(),
html.Br(),
html.H5(
'8.2 Locally using Flask development server'),
'It is also possible to use Flask development server to run ConPlot on your '
'localhost. To do this you will first need to install redis, which is the cache '
'memory server used by ConPlot.'
]),
dbc.Col([
html.Plaintext(
'$ sudo apt update\n$ sudo apt install redis-server\n$ sudo '
'service redis start')
],
style={'background-color': '#EAEAEA'},
align='center'),
html.
P('Once you have installed `redis`, you will need to start the service by running:'
),
dbc.Col(
[html.Plaintext('$ sudo service redis start')],
style={'background-color': '#EAEAEA'},
align='center'),
html.
P('Now you will need to clone the repository, install the requirements and '
'setup environment variables. Please note that ConPlot requires at least '
'python 3.6.'),
dbc.Col([
html.Plaintext(
'$ git clone https://github.com/rigdenlab/conplot\n'
'$ cd conplot\n$ python3.6 -m pip install -r requirements\n$ '
'echo "KEYDB_URL=0://localhost:6379" > .env\n$ echo "KEYDB_TIME'
'OUT=3600" >> .env')
],
style={'background-color': '#EAEAEA'},
align='center'),
html.
P('With the last two commands you will also have created an .env file with a '
'variable named KEYDB_URL pointing to the redis server and a KEYDB_TIMEOUT '
'variable with the session timeout value. This is the time at which a session '
'expires after inactivity. By default in www.conplot.org this has a value of 3600 '
'minutes, but if running locally you can set this time to any other value. '
'The only thing left to do is to start the Flask development server on your '
'machine:'),
dbc.Col([html.Plaintext('$ python3.6 app.py')],
style={'background-color': '#EAEAEA'},
align='center'),
html.P([
'Now you will be able to access the app on ',
html.A(html.U('http://127.0.0.1:8050/home'),
href='http://127.0.0.1:8050/home'),
'. Please note that when running locally, ConPlot will not be able to establish a '
'connection with our database, so all the user account related features will be '
'disabled. Similarly, you will not be able to get in touch with us using the '
'"Get in touch" tab.'
]),
html.Br(),
html.H4('9. Server status',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
components.ServerStatusList(cache),
html.Br(),
html.Br(),
html.H4('10. Privacy Policy',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
components.GdprPolicyAlert(False)
])
])
],
width=10),
],
align='center',
justify='center',
className='m-0')
])
),
style = {'height':'50vh'}
)
####### Footer #######
footer = dbc.Row(
[
dbc.Col(
[
html.P(
[
"""
This application uses open-source work from
""",
html.A(
html.U("Hugging Face"),
href = "https://huggingface.co/",
target = "_blank",
style = {"color":"white"}),
"""
.
"""
],
style = {"color":"white"}
)
],
className="footer-disclaimer-content ",
width=8,
),
dbc.Col(
[
import callbacks
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.title = 'Sticker Creator'
server = app.server
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
# represents the URL bar, doesn't render anything
dcc.Location(id='url', refresh=False),
# Heading
html.H1("Sticker Creator", id="heading"),
# Text box
dcc.Input(id="meme-text", type="text", placeholder="Enter meme text"),
# File Upload
dcc.Upload(
id='upload-image',
children=html.Div(['Drag and Drop or ',
html.U('Click Here')]),
# Allow multiple files to be uploaded
multiple=False),
html.Div(id="filename"),
html.Button(id='submit-button', n_clicks=0, children='Stickerify'),
html.Div(id='output-image-upload'),
])
html.H1('一级标题', id='demo1'),
html.H2('二级标题'),
html.H3('三级标题'),
html.H4('四级标题'),
html.H5('五级标题'),
html.H6('六级标题'),
html.Br(), # 换行
html.Hr(), # 水平分割线
html.P('这是一段文字。' * 20),
html.P('这是另一段带有首行缩进的文字。' * 10, style={'text-indent': '3rem'}),
html.A('跳转到费弗里的Github仓库',
target='_blank',
href='https://github.com/CNFeffery/DataScienceStudyNotes'
), # 跳转到外部链接
html.Br(),
html.A('跳转到六级标题', href='#demo2'),
html.P([
'一段文字中出现了',
html.I('斜体'), '，以及代码片段',
html.Code('import dash'), '，还有一段',
html.U('带下划线的文字'), '，一段',
html.Mark('高亮标注文字'), '，以及另一段',
html.Mark('不同颜色的高亮标注文字。',
style={'background-color': 'lightblue'})
])
] + [html.Br()] * 50 +
[html.A('回到顶端一级标题', href='#demo1'),
html.H1('页内元素跳转示例标题', id='demo2')]))
if __name__ == '__main__':
app.run_server(debug=True)
'usd_goal_real': ['size', 'std', 'min', 'mean', 'max', 'sum'],
'funding_percentage': ['size', 'std', 'min', 'mean', 'max', 'sum'],
'avrg_per_bckers': ['size', 'std', 'min', 'mean', 'max', 'sum']
})
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div([
html.H1('Projet Python: Kickstarter Data Analysis',
style={
'font-family': 'Helvetica',
"margin-top": "25",
"margin-bottom": "0"
})
]),
html.U(html.H2('Général')),
html.Div([
html.Div([
html.H3('Nombre de projets par année'),
dcc.Graph(id='g1',
figure={
'data': [
go.Scatter(y=df.groupby('year').size().tolist(),
x=sorted(df.year.unique()))
]
})
],
className="six columns"),
html.Div([
html.H3('Nombre de projets par année et par états de projet'),
dcc.Graph(
]),
]),
]),
]),
html.Div(style = {"font-size":"15px", "width":"100%"},className="row pt-5", children=[
html.B(className="col-1", children="Select Date"),
dcc.Slider(
id="day-slider",
min=min(df.index),
max=len(df.Datetime),
value=2,
className="col-6"),
html.U(id="html-date", className="col-2"),
html.B( className="col-3")
]),
html.H4(id="description",style = {"font-size":"15px"}, className="col-9 text-center float-left pt-3", children=[
"""This Mock-up is designed to communicate the performance/loss breakdown of an RO membrane. By clicking on the
the three panels at the top (Permeate Flow, Salt Passage, and Pressure Drop) you can toggle the graph to display
the history of that metric. Along the bottom of the page you can select a date and slide through the graph to
get more information about any give time. The stats on the right are those at the slider value (I could have changed the titles
but it was a lot of work for just a mockup)."""
]),
])
]),
app = Dash(__name__, server=server, url_base_pathname='/dash/')
# This is the array set up for the drop down year
#year_options = [i for i in range(1992, 2020)]
year_options = [2015]
# Create the layout
app.layout =html.Div(className='dash-bootstrap',\
children=[html.Link(id='dark_theme',\
rel='stylesheet',\
href='/static/dark-dash.css',\
title='Darkly'),\
html.H1('FRC Data Analytics', style = {'textAlign': 'center'}),\
html.H2(html.U('Options'), style = {'textAlign': 'left'}),\
# First drop-down for year
html.Div(id='year-div',\
style={'padding-bottom':'10px',\
'padding-top':'10px',\
'padding-left': '0px',\
'text-align':'left',\
'width':'600px'},\
children=[html.Div(id='year-label',\
children=[html.B(children='Year:',\
style={'font-size':'20px'})],\
style={'display':'inline-block',\
'width':'100px',\
'vertical-align':'top'}),\
html.Div(id='year-dropdown-div',\
def view_page_content():
left_sidebar = dbc.Col(
id='view-page-sidebar',
children=[
html.P('Human ID:'),
dbc.Spinner(
dcc.Input(
id='view-human-id',
value=0,
type="number",
min=0,
step=1,
max=9999,
)),
html.Br(),
dbc.Button(children='Refresh',
id='view-btn-refresh',
color='primary',
block=True,
size="lg"),
html.Hr(),
dbc.Button(
children='Clear Selection',
id='btn-clear-selection',
color='secondary',
block=True,
size="lg",
),
],
width='auto',
style=LEFT_SIDEBAR_STYLE,
)
center_content = dbc.Col(
id='display-col',
children=[
dbc.Spinner(
dbc.Row(
id='view-images-row',
form=True,
style={
'display': 'flex',
'flex-wrap': 'wrap',
'overflow': 'auto'
},
no_gutters=True,
#fluid=True,
)),
],
width=True,
align='stretch')
global df_correctlabel, df_correctlabel_orig
df_difference = pd.concat([df_correctlabel_orig, df_correctlabel],
ignore_index=True).drop_duplicates(
keep=False).drop_duplicates('img_id',
keep='last')
table = dbc.Row(id='table-correctlabel',
children=dbc.Table.from_dataframe(
df_difference[['img_id', 'is_correct']].astype(str),
striped=True,
bordered=True,
hover=True),
form=True,
no_gutters=True,
justify='stretch')
save_row = dbc.Row(children=[
dbc.Col(html.H6(html.U('Changes'))),
dbc.Button(children='Save',
id='btn-save',
disabled=True,
color='primary',
size="lg")
],
no_gutters=True,
justify='end')
reset_row = dbc.Row(children=dbc.Button(
children='Reset Database',
id='btn-reset-db',
disabled=df_correctlabel_orig.empty,
color='secondary',
size="lg"),
no_gutters=True,
justify='end')
right_sidebar = dbc.Col(
id='right-sidebar',
children=[save_row, table, reset_row],
width=3,
style=RIGHT_SIDEBAR_STYLE,
)
return dbc.Row(children=[left_sidebar, center_content, right_sidebar])
def AdditionalFormatsHelpList():
return html.Ul([
html.Li([
'TOPCONS file. TOPCONS is a web based application aimed at the prediction of '
'the membrane topology of a given protein sequence. ConPlot parses files '
'produced by this server and extracts the information about the topology of '
'the protein, indicating the membrane spanning regions and their relative '
'orientation. TOPCONS is available ',
html.A(html.U('here'), href=UrlIndex.TOPCONS_WEB.value),
', and you may read more about it in the original paper published by its '
'authors ',
html.A(html.U('here'), href=UrlIndex.TOPCONS_CITATION.value), '.'
],
style={
"font-size": "110%",
'text-align': "justify"
}),
html.Li([
'PSIPRED file. PSIPRED is a program for prediction of protein secondary structure. '
'Once uploaded to ConPlot, output files obtained with this service are processed '
'to extract the predicted presence of secondary structure elements along the protein '
'sequence. It is possible to use PSIPRED in order to obtain such predictions ',
html.A(html.U('here'), href=UrlIndex.PSIPRED_WEB.value),
', and you can read more about this tool as it is described by its authors on '
'the original paper ',
html.A(html.U('here'), href=UrlIndex.PSIPRED_CITATION.value), '.'
],
style={
"font-size": "110%",
'text-align': "justify"
}),
html.Li([
'IUPRED file. IUPred2A is a web server that allows users to generate energy '
'estimation based predictions for ordered and disordered residues in a '
'sequence. ConPlot parses these output files and extracts the estimate of the '
'order / disorder of the residues in the protein of interest. IUPred2A is '
'available ',
html.A(html.U('here'), href=UrlIndex.IUPRED_WEB.value),
'. If you wish to know more about this tool, you may want to read the '
'original paper published by its authors ',
html.A(html.U('here'), href=UrlIndex.IUPRED_CITATION.value), '.'
],
style={
"font-size": "110%",
'text-align': "justify"
}),
html.Li([
'CONSURF file. Based on the phylogenetic relations between homologous '
'sequences, the Consurf server estimates the evolutionary conservation of '
'amino acid positions in a protein sequence. ConPlot will parse the output '
'files produced by this server and allow users to add a track indicating the '
'level of conservation of each residue in the sequence. The Consurf server is '
'available ',
html.A(html.U('here'), href=UrlIndex.CONSURF_WEB.value),
', and you can read more about it in the original publication ',
html.A(html.U('here'), href=UrlIndex.CONSURF_CITATION.value), '.'
],
style={
"font-size": "110%",
'text-align': "justify"
}),
html.Li([
'A3M file. This is a multiple sequence alignment file that should have been obtained using the '
'sequence of interest as a query. ConPlot will parse the file and calculate the MSA coverage along '
'the query sequence, normalise these values (1-10) and create a track where each residue '
'is coloured according to the number of sequences aligned in that particular position These '
'files are used in most contact prediction pipelines, and visualising the MSA coverage can help you '
'understand the quality of the information used to obtain your predictions. Several alignment tools '
'will create MSA files in this format, like for example HHBLITS, which you can use '
'online ',
html.A(html.U('here'), href=UrlIndex.HHBLITS_URL.value), '.'
],
style={
"font-size": "110%",
'text-align': "justify"
}),
html.Li([
'CUSTOM file. These files are plain text files that can be created manually '
'by users to include additional tracks of information to the plot. These '
'files enable limitless personalisation of the contact map plot, as it '
'becomes possible to add as much information as desired. If you wish to read '
'about the format specifications click ',
dbc.Button('here',
color='link',
size='sm',
id='custom-format-specs-button',
className='ml-0'),
],
style={
"font-size": "110%",
'text-align': "justify"
})
])
def getComponent(app):
SIDEBAR_STYLE = {
# 'position': 'fixed',
'top': 0,
'left': 0,
'bottom': 0,
# 'width': '20%',
'padding': '20px 10px',
'background-color': '#f8f9fa'
}
card = dbc.Card(
[
dbc.CardHeader(
[
html.H4('Search parameter and Profile description', style={
'textAlign': 'center',
'color': '#007bff'})
]
),
dbc.CardBody(
[
cb_headeroption,
html.Hr(),
############## next row config info #################
cb_chosenconfig,
#html.Hr(),
############### next row type of search ###########
cb_typeofsearch,
#html.Hr(),
################# next row reference group ###########
cb_referencegroup,
#html.Hr(),
################# next row year #####################
cb_year,
html.Br(),
################# chosen profile ###########
html.P('Profile description',
style={
'width':'100%',
'font-weight':'bold',
'textAlign':'left',
'border-bottom':'1px solid gray'
}
),
########################################################
dbc.Row
(
[
dbc.Col
(
[
html.Div(
[
html.Img(src=app.get_asset_url('multy-user.png'),style={'width': '50px', 'textAlign': 'center'})
],
style={'textAlign': 'center'}
)
],
md=3
),
dbc.Col
(
[
html.P('The level of cognitive and conceptual demand demonstrated in each particular' + \
' competence is categorized in an ascending range of 1 of 4',
style={'text-align': 'justify', 'padding-left': '10px', 'padding-right': '10px',
'font-style': 'italic'}
)
],
md=6
),
dbc.Col
(
[
html.Div(
[
dbc.Button(" 1 ",
color="primary",
# className='btn btn-primary',
style={'border-radius': '25px',
'font-weight': 'bold',
'padding': '2px 10px 2px 10px',
'margin': '0px 5px 0px 5px',
'background-color': '#FF2212'
}
),
dbc.Button(" 2 ",
color="primary",
# className='btn btn-primary',
style={'border-radius': '25px',
'font-weight': 'bold',
'padding': '2px 10px 2px 10px',
'margin': '0px 5px 0px 5px',
'background-color': '#FFBC82'
}
),
dbc.Button(" 3 ",
color="primary",
# className='btn btn-primary',
style={'border-radius': '25px',
'font-weight': 'bold',
'padding': '2px 10px 2px 10px',
'margin': '0px 5px 0px 5px',
'background-color': '#DC31FF'
}
),
dbc.Button(" 4 ",
color="primary",
# className='btn btn-primary',
style={'border-radius': '25px',
'font-weight': 'bold',
'padding': '2px 10px 2px 10px',
'margin': '0px 5px 0px 5px',
'background-color': '#25BC66'
}
)
],
style={'textAlign': 'center'}
)# end of div
],
md=3
) # end of col
],
style={}
), # end of row
profile_description,
html.Br(),
################ next row community skills #############
dbc.Row(
[
dbc.Col
(
[
html.H5('Community skills',
id='h5_com',
style=
{
'textAlign': 'left',
'boder': '1px solid black',
'width':'100%',
'padding':'5px',
'color':'white'
}
)
],
md=3
),
dbc.Col
(
[
html.U("Refer to the knowledge and skills for understanding the exercise of citizenship:",
style={'text-align':'justify'}
),
html.Br(),
html.Div(id='div_comunitaria', className='card-text',style={'textAlign':'justify'})
],
md=9
) # end of col
]
),
html.Br(),
################next row critical reading #####################
dbc.Row(
[
dbc.Col
(
[
html.H5('Critical reading skills',
id='h5_readcritical',
style=
{
'textAlign': 'center',
'boder': '1px solid black',
'width':'100%',
'padding':'5px',
'color':'white'
}
)
],
md=3
), # end of col
dbc.Col
(
[
html.U("Refer to the abilities to understand, interpret and evaluate texts in everyday life and in non-specialized academic fields:",
style={'text-align':'justify'}
),
html.Br(),
html.Div(id='div_readcritical', className='card-text',style={'textAlign':'justify'})
],
md=9
) # end of col
]
), # end of row
html.Br(),
################# next row ####################################
dbc.Row(
[
dbc.Col
(
[
html.H5('Communicative skills',
id='h5_comm',
style=
{
'textAlign': 'left',
'boder': '1px solid black',
'width':'100%',
'padding':'5px',
'color':'white'
}
)
],
md=3
),
dbc.Col
(
[
html.U("Refer to the abilities to understand, interpret and evaluate texts in everyday life and in non-specialized academic fields:",
style={'text-align':'justify'}
),
html.Br(),
html.Div(id='div_comescrita',className='card-text',style={'textAlign':'justify'})
],
md=9
) # end of col
]
),
html.Br(),
##################### next row ###############################
dbc.Row(
[
dbc.Col
(
[
html.H5('Quantitative Thinking skills',
id='h5_qthinking',
style=
{
'textAlign': 'center',
'boder': '1px solid black',
'width':'100%',
'padding':'5px',
'color':'white'
}
)
],
md=3
), ## end of col
dbc.Col
(
[
html.U("Refer to the application of basic mathematics skills to the analysis and interpretation of real-world quantitative problems:",
style={'text-align':'justify'}
),
html.Br(),
html.Div(id='div_qthinking', className='card-text',style={'textAlign':'justify'}),
],
md=9
) # end of col
]
), # end of row
html.Br(),
##################### next row ################################
dbc.Row(
[
dbc.Col(
[
html.H5('English language Skills',
id='h5_ingles',
style=
{
'textAlign': 'left',
'width':'100%',
'padding':'5px',
'border-radius':'25px',
'border':'1px solid black'
}
)
],
md=3
), ## end of col
dbc.Col(
[
html.U("Here are options going from -A1 (no English) to B2 (highest level):",
style={'text-align':'justify'}
),
html.Div(id='div_ingles', className='card-text',style={'textAlign':'justify'})
],
md=9
) ## end of col
]
)
###############################################################
],
style={"width": "100%", 'border-radius': '25px'}
),
],
style={'padding':'20px',
'border':'1px solid black'
}
)
return dbc.Modal([
dbc.ModalBody(card),
dbc.ModalFooter(
dbc.Button("Close", id="close-centered", className="ml-auto")),
],
id="modal-centered",
size='xl',
style={'box-shadow': '0 0 0 0.1em #007bff'})
def start_jeopardy(n_clicks):
""" Returns a dash bootstrap component table which will be the game board for the Jeopardy simulation. Also returns
the list of answers (in Dash, information is passed between callbacks via hidden divs). Also returns a
button/badge to keep track of the score
Parameters:
n_clicks (int): Number of times play-button was clicked
Returns:
dbc.Table: table that will represent the game board
list: list of answers to questions
html.Div: div that contains a button and badge to represent the player's score
"""
if n_clicks is None:
raise PreventUpdate
else:
# create an instance of the JeopardyGame object and use it to generate categories, clues, and answers
game = JeopardyGame()
questions = game.get_questions()
answers = game.get_answers()
categories = game.get_categories()
# generate table headers (the categories)
headers = []
for category in categories:
headers.append(html.Td(category, style={
'width': '20px',
'height': '100px',
'vertical-align': 'middle'
}))
table_header = [
html.Thead(html.Tr(headers), style={
'color': '#FFCC00',
'font-weight': 'bold',
'font-size': '30px',
'text-align': 'center',
})
]
row_list = []
clue_value = 0
# generate buttons which will cause a modal with a clue to popup when clicked
for i in range(0, 25):
if i % 5 == 0:
clue_value += 200
row_list.append(
html.Td(children=[html.Div([
html.A([
dbc.Button(html.U('$' + str(clue_value), style={
'color': '#FFCC00',
'font-weight': 'bold',
'font-size': '20px'
}), color="link", id="modal-button" + str(i))
]),
dbc.Modal(
[
dbc.ModalHeader(questions[i]),
dbc.ModalBody("What is/are ...."),
dbc.ModalFooter([
dbc.Input(id='answer' + str(i)),
dbc.Button("Submit", id="check-question-button" + str(i),
className="ml-auto" + str(i), color='primary'),
]
),
],
id="modal" + str(i), backdrop=True),
])], style={
'width': '20%',
'height': '80px',
'text-align': 'center',
'vertical-align': 'middle'
}))
row1 = html.Tr(row_list[0:5], style={
'text-align': 'center',
'vertical-align': 'center'
})
row2 = html.Tr(row_list[5:10], style={
'text-align': 'center'
})
row3 = html.Tr(row_list[10:15], style={
'text-align': 'center'
})
row4 = html.Tr(row_list[15:20], style={
'text-align': 'center'
})
row5 = html.Tr(row_list[20:25], style={
'text-align': 'center'
})
table_body = [html.Tbody([row1, row2, row3, row4, row5])]
table = dbc.Table(table_header + table_body, bordered=True, style={
'background-color': '#060CE9',
'width': '97.5%',
'margin-left': 'auto',
'margin-right': 'auto',
'padding-top': '15px',
'bordered': True,
})
return table, answers, html.Div(
children=[dbc.Button(["Score ", dbc.Badge(id="score-button", color="light", children=0)], color="primary")],
style={
'display': 'flex',
'justify-content': 'center'
}), {'display': 'flex',
'justify-content': 'center',
'align-items': 'center',
'padding-top': '15px'}
})
],
className="four columns")
],
className="row"),
# ---- Header Ends here ---- #
html.Br(),
html.Hr(),
# ---- Visualizing Policy Starts ---- #
html.Div(
[
# Title
html.Div([
html.H2(html.U("Visualizing Trained Policy"),
style={
'fontFamily': 'HelveticaNeue',
'text-align': 'center'
})
]),
html.Br(),
html.Div(
[
dcc.Dropdown(
id="vtp-case-dropdown",
options=[
{
'label':
"Only Local View (10 metres)",
'value': 'local10m'
},
loading_state={
'is_loading': True,
'component_name': 'spinner'
})
####### Footer #######
footer = dbc.Row([
dbc.Col(
[
html.P([
"""
This application uses open-source work from
""",
html.
A(html.U("Pandas Profiling"),
href="https://github.com/pandas-profiling/pandas-profiling",
target="_blank",
style={"color": "white"}), """
, a project to generate reports from Pandas dataframes.
"""
],
style={
"color": "white",
"font-size": "120%"
})
],
className="footer-disclaimer-content ",
width=8,
),
dbc.Col([
import pandas as pd
import numpy as np
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from app import app
txt_notice=[
html.H5("1. Random text"),
html.P([
"Blank template",
html.Br(),
html.U("Owner:")," You",
]),
]
def create_layout(app):
body = dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
html.H2("H2 title"),
html.Div(txt_notice),
],
style={"text-align":"justify"},
xl=12,
'x':0.5,
'y':0.1,
'xanchor':'center',
'yanchor':'bottom',
'font':dict(size=17,
color='brown')})
# ## Creating the App Layout
# In[49]:
app = dash.Dash(__name__)
app.layout= html.Div(children=[html.Div(children=[
html.H1(children=html.U('Twitter Sentiment Analysis of Corona Virus Pandemic'),
style={'color':'#0099aa','background-color':'#ffffff',
'text-align':'center', 'position':'relative',
'margin-top':'0'}),
html.Div(style={'height':'15px'}),
#px.pie(
html.Div(children=[html.Div(html.H2(html.U('Tweets Analysis of People Reacting to Corona Virus Worldwide')),
style={'background-color':'#ffffff','display':'block','text-align':'center'}),
html.Div(children=[
dcc.Graph(figure=fig.update_traces(hoverinfo='skip',hovertemplate=['Very Positive Tweets','Positive Tweets',
'Neutral Tweets','Negative Tweets','Very Negative Tweets']),
style={'text-align':'center'})],
style={'display':'inline-block','width':'49.5%'}
),
html.Div(style={'width':'1%','display':'inline-block'}),
html.Div(children=[
