Skip to content

Commit

Permalink
UI update to add light vs. dark mode, add guidance text, and begin ch…
Browse files Browse the repository at this point in the history 
…ecklist layers.
  • Loading branch information
@anastasiabernat
anastasiabernat committed Oct 10, 2024
1 parent 77e46de commit e2ab9bd
Show file tree
Hide file tree
Showing 16 changed files with 615 additions and 420 deletions.
163 changes: 129 additions & 34 deletions dash_app/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,13 +162,14 @@ def show_hide_element(feature, is_ccs, cooling, capacity_factor):
Input(component_id="carbon-capture-select", component_property="value"),
Input(component_id="cooling-type-select", component_property="value"),
Input(component_id="capacity-factor-select", component_property="value"),
Input(component_id="layer-selector", component_property="value")
Input(component_id="layer-selector", component_property="value"),
Input('adjust-mode', 'value')
],
)

def map(year, ssp,
tech, subtech, feature,
is_ccs, coolingtype, capacity_factor, selected_layers):
is_ccs, coolingtype, capacity_factor, selected_layers, adjust_mode):

# -----------------------------------------------------------------------------
# Creates and displays map by querying a "database" table of all pathways
Expand Down Expand Up @@ -196,45 +197,139 @@ def map(year, ssp,
# i += 1

# DeckGL
fig_div = plot_deckgl_map(COMPILED_DIR=COMPILED_DIR, fpaths=fpaths, selected_layers=selected_layers)
fig_div = plot_deckgl_map(COMPILED_DIR=COMPILED_DIR, fpaths=fpaths, selected_layers=selected_layers, adjust_mode=adjust_mode)

return fig_div


@app.callback(
[
Output(component_id='data_title', component_property='children'),
Output(component_id='tag_id', component_property='children'),
Output(component_id='source_type', component_property='children'),
Output(component_id='description', component_property='children'),
Output(component_id='date_updated', component_property='children'),
Output(component_id='date_accessed', component_property='children'),
Output(component_id='methodlogy', component_property='children'),
Output(component_id='citation', component_property='children'),
Output(component_id='data_link', component_property='children')
],
[Input(component_id='table', component_property='active_cell')]
)

def output_string(active_cell):
# @app.callback(
# [
# Output(component_id='data_title', component_property='children'),
# Output(component_id='tag_id', component_property='children'),
# Output(component_id='source_type', component_property='children'),
# Output(component_id='description', component_property='children'),
# Output(component_id='date_updated', component_property='children'),
# Output(component_id='date_accessed', component_property='children'),
# Output(component_id='methodlogy', component_property='children'),
# Output(component_id='citation', component_property='children'),
# Output(component_id='data_link', component_property='children')
# ],
# [Input(component_id='table', component_property='active_cell')]
# )

# def output_string(active_cell):

# if active_cell is None:
# return "", "", "", "", "", "", "", "", ""

# data_row = active_cell['row']
# data_col_id = active_cell['column_id']

# title = src_meta.loc[data_row, "plain_language_layer_name"]
# tag_id = src_meta.loc[data_row, "source_tag_id"]
# src_type = src_meta.loc[data_row, "source_type"]
# desc = src_meta.loc[data_row, "source_data_description"]
# date_updated = src_meta.loc[data_row, "source_data_updated"]
# data_accessed = src_meta.loc[data_row, "source_data_accessed"]
# layer_methodology = src_meta.loc[data_row, "layer_methodology"]
# citation = src_meta.loc[data_row, "source_data_citation"]
# data_link = src_meta.loc[data_row, "source_data_link"]

# return str(title), str(tag_id), str(src_type), str(desc), str(date_updated), str(data_accessed), str(layer_methodology), str(citation), str(data_link)

# @app.callback(
# Output('adjust-mode', 'style'),
# Input('adjust-mode', 'value')
# )
# def update_toggle_style(value):
# if value: # When the switch is "true"
# return {
# 'backgroundColor': '#ffdd57', # Sunny color
# 'border': '1px solid #f39c12', # Optional border color
# }
# else: # When the switch is "false"
# return {
# 'backgroundColor': 'transparent', # Keep transparent
# 'border': '1px solid #ccc', # Optional border color
# }

# @app.callback(
# Output('adjust-mode', 'style'),
# Output('toggle-icon', 'style'),
# Output('moon-icon', 'style'),
# Output('sun-icon', 'style'),
# Input('adjust-mode', 'n_clicks'),
# )
# def update_switch(n_clicks):
# if n_clicks % 2 == 1: # Odd clicks mean switch is "on"
# return (
# {'backgroundColor': '#ffdd57'}, # Sunny color when "on"
# {'transform': 'translateX(30px)'}, # Move the icon to the right
# {'display': 'none'}, # Hide moon icon
# {'display': 'block'} # Show sun icon
# )
# else: # Even clicks mean switch is "off"
# return (
# {'backgroundColor': '#ccc'}, # Default color when "off"
# {'transform': 'translateX(0)'}, # Move the icon to the left
# {'display': 'block'}, # Show moon icon
# {'display': 'none'} # Hide sun icon
# )

if active_cell is None:
return "", "", "", "", "", "", "", "", ""
@app.callback(
Output('adjust-mode', 'color'),
# Output('output', 'children'),
Input('adjust-mode', 'value')
)
def update_switch(value):
if value: # When the switch is "True"
return "#fce17c"
else: # When the switch is "False"
return 'blue'

data_row = active_cell['row']
data_col_id = active_cell['column_id']

title = src_meta.loc[data_row, "plain_language_layer_name"]
tag_id = src_meta.loc[data_row, "source_tag_id"]
src_type = src_meta.loc[data_row, "source_type"]
desc = src_meta.loc[data_row, "source_data_description"]
date_updated = src_meta.loc[data_row, "source_data_updated"]
data_accessed = src_meta.loc[data_row, "source_data_accessed"]
layer_methodology = src_meta.loc[data_row, "layer_methodology"]
citation = src_meta.loc[data_row, "source_data_citation"]
data_link = src_meta.loc[data_row, "source_data_link"]
@app.callback(
Output('banner', 'style'),
Output('app-logo', 'style'),
Output('page-body', 'style'),
Input('adjust-mode', 'value')
)
def update_mode(value):
if value: # When the switch is "True"
header_banner = {
"width": "100%",
"background-color": "#2C7E9E",
"display": "inline-block",
"grid-area": "header",
"transition": "background-color 0.3s"
}
app_logo = {
"filter": "invert(108%) sepia(0%) saturate(3207%) hue-rotate(0deg) brightness(100%) contrast(100%)",
"transition": "filter 0.3s"
}
page_body = {
"background-color": "white",
# "background-color": "rgba(255, 255, 255, 0.1)"
}
return header_banner, app_logo, page_body

return str(title), str(tag_id), str(src_type), str(desc), str(date_updated), str(data_accessed), str(layer_methodology), str(citation), str(data_link)
else: # When the switch is "False"
header_banner = {
"width": "100%",
"background-color": "#1F244D",
"display": "inline-block",
"grid-area": "header",
"transition": "background-color 0.3s"
}

app_logo = {
"filter": "invert(38%) sepia(13%) saturate(3207%) hue-rotate(0deg) brightness(100%) contrast(80%)",
"transition": "filter 0.3s"
}
page_body = {
"background-color": "black",
# "background-color": "rgba(0, 0, 0, 0.1)" # rgba(0, 0, 0, 0.5)
}
return header_banner, app_logo, page_body

# -----------------------------------------------------------------------------
# App runs here. Define configurations, proxies, etc.
Expand Down
29 changes: 2 additions & 27 deletions dash_app/assets/banner.css
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,3 @@
/*CSS Across the App*/

:root {
/* Color styles */
--space--blue: #1F244D;
--electric--blue: #0A8AD2;
--soft--grey: #F9F9F9;
--black: #000000;
--pnnl--orange: #F09326;
--pnnl--orange-img: invert(58%) sepia(13%) saturate(3207%) hue-rotate(0deg) brightness(100%) contrast(80%);
--pnnl--orange-img2: invert(38%) sepia(13%) saturate(3207%) hue-rotate(0deg) brightness(100%) contrast(80%);
--grey: #D9D9D9;
--white: #FFFFFF;
--hard--grey: #545454;

/* Text-size styles */
--font--footer: 16px;
--font--tag: 13px;
--font--name: 16px;
--font--title: 16px;
--font--namespace: 48px;
--font--number: 13px;

}


/* DISPLAY: FLEX put elements in a horizontal line */
/* FLOAT: LEFT OR RIGHT where elements go in div */

Expand All @@ -34,7 +8,8 @@
.bannerbar {
/* height: 50px;*/
width: 100%;
background-color: var(--space--blue);
/* background-color: var(--space--blue); */
background-color: #2C7E9E;
color: var(--soft--grey);
display: inline-block;
grid-area: header;
Expand Down
36 changes: 0 additions & 36 deletions dash_app/assets/footer.css
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,11 @@
/*CSS Across the App*/

:root {
/* Color styles */
--space--blue: #1F244D;
--electric--blue: #0A8AD2;
--soft--grey: #F9F9F9;
--black: #000000;
--pnnl--orange: #F09326;
--pnnl--orange-img: invert(58%) sepia(13%) saturate(3207%) hue-rotate(0deg) brightness(100%) contrast(80%);
--pnnl--orange-img2: invert(38%) sepia(13%) saturate(3207%) hue-rotate(0deg) brightness(100%) contrast(80%);
--white-img: invert(108%) sepia(0%) saturate(3207%) hue-rotate(0deg) brightness(100%) contrast(100%);
--grey: #D9D9D9;
--white: #FFFFFF;
--hard--grey: #545454;

/* Text-size styles */
--font--footer: 16px;
--font--tag: 13px;
--font--name: 16px;
--font--title: 16px;
--font--namespace: 48px;
--font--number: 13px;

--font--weight--footer: 5;

}


#footer {
/* maybe absolute is breaking it?*/
/* position: absolute;*/
bottom: 0;
width: 100%;
height: 35px;
grid-area: footer;

/* 2.5rem*/
/* 50px*/
}


.footerbar {
/* height: 50px;*/
width: 100%;
background-color: var(--space--blue);
color: var(--soft--grey);
Expand Down
12 changes: 12 additions & 0 deletions dash_app/assets/icons/map_icons/fuchsia_square.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions dash_app/assets/icons/map_icons/im3_blue_square.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions dash_app/assets/layers.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
#layer-selector {
z-index: 2;
overflow-y: scroll;
background-color: var(--soft--grey);
position: absolute; /* Positioning it relative to the parent */
bottom: 0;
right: 0;
width: 190px; /* Set the desired width */
margin-bottom: 10px;
margin-right: 270px;
flex-direction: column;
border-radius: 15px;
padding: 10px;
}
59 changes: 14 additions & 45 deletions dash_app/assets/map.css
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,24 @@
#deck-gl {
/* height: 50% !important; */
/* width: 50% !important; */
left: auto !important;
top: auto !important;
/* left: auto !important; */
/* top: auto !important; */
}

#deckgl-wrapper {
height: 50% !important;
width: 50% !important;
/* height: 50% !important; */
/* width: 50% !important; */
left: auto !important;
top: auto !important;
position: relative !important;
/* position: relative !important; */
z-index: 1 !important;
height: calc(100vh - 85px) !important;
width: calc(150vh - 5px) !important;
margin-left: -100px !important;
/* width: 1300px;
/* background-color: white !important; */
}

#energy-map {
margin-top: -5px;
height: calc(100vh - 80px);
/* margin-left:; */
/* margin-bottom: -5px !important;*/
/* height: 700px; */
/* 800*/
width: 1300px;
}

#energy-map2 {
margin-top: -5px;
/* height: 700px; */
/* 800*/
width: 1300px;
}

#energy-map3 {
margin-top: -50px;
height: 1000px !important;
margin-right: -50px;
margin-left: -50px;
/* height: calc(100vh - 80px); */
/* margin-left:; */
/* margin-bottom: -5px !important;*/
/* height: 700px; */
/* 800*/
/* width: 1300px; */
height: var(--body--height) !important; /* Adjust width based on viewport height */
width: calc(100vw - 0px) !important; /* Adjust width based on viewport width */
/* width: 100% !important; */
/* margin-left: -100px !important; */
/* border: 1px solid red; */
/* Can change "space" color: */
/* background-color: black !important; */
}

/* .loader-wrapper > div {
visibility: visible !important;
} */
.dash-loading .dash-loading-content {
background-color: transparent; /* Make loading content background transparent */
}
Loading

0 comments on commit e2ab9bd

Please sign in to comment.