Spaces:
Sleeping
Sleeping
File size: 4,662 Bytes
d033501 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
"""Functions for the sidebar of the Streamlit app."""
import base64
from datetime import date
import streamlit as st
from src.config_parameters import config
sidebar_title = "Flood Mapping Tool"
@st.cache(allow_output_mutation=True)
def get_base64_of_bin_file(png_file):
"""
Get base64 from image file.
Inputs:
png_file (str): image filename
Returns:
str: encoded ASCII file
"""
with open(png_file, "rb") as f:
data = f.read()
return base64.b64encode(data).decode()
def build_markup_for_logo(
png_file,
background_position=f"{config['MA_logo_background_position']}",
image_width=f"{config['MA_logo_width']}",
image_height="",
sidebar_header_fontsize=config["sidebar_header_fontsize"],
sidebar_header_fontweight=config["sidebar_header_fontweight"],
):
"""
Create full string for navigation bar, including logo and title.
Inputs:
png_file (str): image filename
background_position (str): position logo
image_width (str): width logo
image_height (str): height logo
Returns
str: full string with logo and title for sidebar
"""
binary_string = get_base64_of_bin_file(png_file)
return """
<style>
[data-testid="stSidebarNav"] {
background-image: url("data:image/png;base64,%s");
background-repeat: no-repeat;
padding-top: 50px;
padding-bottom: 10px;
background-position: %s;
background-size: %s %s;
}
[data-testid="stSidebarNav"]::before {
content: %s;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
padding-bottom: 50px;
font-size: %s;
font-weight: %s;
position: relative;
top: 85px;
}
</style>
""" % (
binary_string,
background_position,
image_width,
image_height,
sidebar_title,
sidebar_header_fontsize,
sidebar_header_fontweight,
)
def add_logo(png_file):
"""
Add logo to sidebar.
Inputs:
png_file (str): image filename
Returns:
None
"""
logo_markup = build_markup_for_logo(png_file)
st.markdown(
logo_markup,
unsafe_allow_html=True,
)
def add_about():
"""
Add about and contacts to sidebar.
Inputs:
None
Returns:
None
"""
today = date.today().strftime("%B %d, %Y")
# About textbox
st.sidebar.markdown("## About")
st.sidebar.markdown(
"""
<div class='warning' style='
background-color: %s;
margin: 0px;
padding: 1em;'
'>
<p style='
margin-left:1em;
margin: 0px;
font-size: 1rem;
margin-bottom: 1em;
'>
Last update: %s
</p>
<p style='
margin-left:1em;
font-size: 1rem;
margin: 0px
'>
<a href='%s'>
Wiki reference page</a><br>
<a href='%s'>
GitHub repository</a><br>
<a href='%s'>
Data Science Lab</a>
</p>
</div>
"""
% (
config["about_box_background_color"],
today,
config["url_project_wiki"],
config["url_github_repo"],
config["url_data_science_wiki"],
),
unsafe_allow_html=True,
)
# Contacts textbox
st.sidebar.markdown(" ")
st.sidebar.markdown("## Contacts")
# Add data scientists and emails
contacts_text = ""
for ds, email in config["data_scientists"].items():
contacts_text += ds + (
"<span style='float:right; margin-right: 3px;'>"
"<a href='mailto:%s'>%s</a></span><br>" % (email, email)
)
# Add text box
st.sidebar.markdown(
"""
<div class='warning' style='
background-color: %s;
margin: 0px;
padding: 1em;'
'>
<p style='
margin-left:1em;
font-size: 1rem;
margin: 0px
'>
%s
</p>
</div>
"""
% (config["about_box_background_color"], contacts_text),
unsafe_allow_html=True,
)
|