Skip to content

Commit

Permalink
Feature bugs remain. Does not impact deployment. Deployment test.
Browse files Browse the repository at this point in the history
  • Loading branch information
@anastasiabernat
anastasiabernat committed Jan 10, 2025
1 parent 09d681b commit 6010675
Show file tree
Hide file tree
Showing 13 changed files with 274 additions and 216,718 deletions.
252 changes: 24 additions & 228 deletions dash_app/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
from src.reader import open_as_raster
from src.deckgl import plot_deckgl_globe, plot_deckgl_map
from layout import app, tech_pathways_df, src_meta, all_options
from layout import section_headers, title_text, description_text, overview_text, overview_text2, overview_text3, author_text, funding_text
from layout import intro_text, section_headers, title_text, description_text, funding_text, data_text

# -----------------------------------------------------------------------------
# Define dash app callbacks.
Expand Down Expand Up @@ -192,7 +192,6 @@ def map(year, ssp,
# to their filenames.
# -----------------------------------------------------------------------------


# print(" --------------------------------------------------------------- ")
year = str(year)
# print([ssp, year, tech, subtech, feature, is_ccs, coolingtype, capacity_factor])
Expand Down Expand Up @@ -227,9 +226,8 @@ def map(year, ssp,
if tab_id == "layers-tab":
is_compiled = False
selected_layers = basemap_layers + layer_catalogue
fpaths = layer_catalogue


print(selected_layers)
# DeckGL
ctx = callback_context # there are multiple callback contextes in this

Expand Down Expand Up @@ -272,81 +270,6 @@ def map(year, ssp,

return fig_div, last_pressed


# @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
# )

@app.callback(
Output('adjust-mode', 'color'),
# Output('output', 'children'),
Expand All @@ -360,7 +283,7 @@ def update_switch(value):

@app.callback(
Output('banner', 'style'),
Output('app-logo', 'style'),
# Output('app-logo', 'style'),
Output('page-body', 'style'),
Input('adjust-mode', 'value')
)
Expand All @@ -373,15 +296,18 @@ def update_mode(value):
"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"
}

# KEEP
# 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 header_banner, page_body

else: # When the switch is "False"
header_banner = {
Expand All @@ -392,21 +318,21 @@ def update_mode(value):
"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"
}
# KEEP
# 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
return header_banner, page_body


# Callback to update output based on selection
@app.callback(
[
# Output('output-container', 'children'),
Output('button1', 'className'),
Output('button2', 'className')
],
Expand All @@ -428,11 +354,6 @@ def update_output(n_clicks1, n_clicks2):
else:
return "button-selected", "button"

# Custom CSS for buttons
# app.css.append_css({
# 'external_url': 'https://codepen.io/anon/pen/yLyzPZ.css' # Use your own CSS file if needed
# })

@app.callback(
[Output(component_id="expandable-box", component_property="style"),
Output(component_id="expandable-box", component_property="children"),
Expand All @@ -453,11 +374,10 @@ def toggle_expand(expand_clicks, close_clicks):
html.P(description_text, id='description-text', className="page-text"),
html.P(section_headers[0], id='header0', className="header-text"),
html.Hr(className="hr"),
html.P(overview_text, id='overview-text', className="page-text"),
html.P(overview_text2, id='overview-text2', className="page-text"),
html.A(overview_text3, href="https://doi.org/10.57931/2281697", target="_blank", id='overview-text3', className="page-text"),
html.Br(),
html.Br(),
intro_text,
html.P(section_headers[1], id='header3', className="header-text"),
html.Hr(className="hr"),
data_text,
html.P(section_headers[2], id='header2', className="header-text"),
html.Hr(className="hr"),
html.P(funding_text, id='funding-text', className="page-text"),
Expand Down Expand Up @@ -496,141 +416,17 @@ def toggle_expand(expand_clicks, close_clicks):

return expanded_box_css, expanded_btn_css # Default state: expanded


# @app.callback(
# [Output(component_id="layer-container", component_property="style"),
# Output(component_id="layer-container", component_property="children"),
# ],
# [Input(component_id="layer-container", component_property="n_clicks"),
# Input(component_id="close-layer-button", component_property="n_clicks"),
# ]
# )

# def toggle_expand(expand_clicks, close_clicks):

# expanded_box_css = {"display": "block"}
# expanded_btn_css =[
# html.Button("X", id="close-layer-button", className="close-btn"),
# html.P("Layers", id='header0', className="header-text"),
# html.Hr(className="hr2"),
# html.Div(id="layer-funcs-container",
# children=[
# html.Div("Technology Layer", id="layer-concept", className="layer-concept"),
# html.Div(id="layer-funcs", className="layer-funcs",
# children=[
# # html.Button(
# # id="opacity-btn",
# # children=[
# # html.Img(id="opacity", src=app.get_asset_url("icons/map_icons/opacity.svg")),
# # ],
# # # className='button-selected', # Initially selected
# # n_clicks=1
# # ),
# html.Button(
# id="visibility-btn",
# children=[
# html.Img(id="visibility", src=app.get_asset_url("icons/map_icons/eye-open.svg")),
# ],
# # className='button-selected', # Initially selected
# n_clicks=0
# ),
# ])
# ]
# ),
# html.Div(id="layer-name-container",
# children=[
# html.Div(id="hex-box"),
# html.Div("FEASIBILITY", id="layer-name", className="layer-name"),
# ]
# ),
# html.Hr(className="hr3"),
# dcc.Checklist(
# id='layer-selector',
# options=[
# {'label': 'Basemap Ocean', 'value': 'base-map-ocean'}, # AB: need to predfine the database
# {'label': 'Basemap Land', 'value': 'base-map'},
# {'label': 'Feasibility Layer', 'value': 'feasibility-layer'},
# ],
# value=["base-map-ocean", "base-map", "feasibility-layer"], # Default selected layers
# inline=True,
# # style={'display': 'none'}
# ),
# ]
# closed_box_css = {
# "width": "40px",
# "height": "40px",
# "border-radius": "10px",
# "transition": "width 0.3s, height 0.3s",
# }
# # closed_btn_css ={"display": "none"}
# closed_btn_css = [
# html.Img(id="info-logo", className="svg",
# src=app.get_asset_url("icons/funcs_icons/layers-two-final.svg"),
# style={"width": "30px",
# "height": "30px",
# "margin-left": "-5px",
# "margin-top": "-5px"
# }
# ),
# html.Button(
# "X",
# id="close-layer-button",
# className="close-btn",
# style={"display": "none"})]

# if close_clicks:
# return closed_box_css, closed_btn_css

# if expand_clicks:
# return expanded_box_css, expanded_btn_css


# return expanded_box_css, expanded_btn_css # Default state: expanded





@app.callback(
Output("visibility", "src"),
Input("visibility-btn", "n_clicks"),
)
def toggle_eye_icon(n_clicks):

if n_clicks % 2 == 0:
# Even click count, show "eye-open"
if n_clicks % 2 == 0: # eye-open
return app.get_asset_url("icons/map_icons/eye-open.svg")
else:
# Odd click count, show "eye-closed"
else: # eye-closed
return app.get_asset_url("icons/map_icons/eye-slashed.svg")


# @app.callback(
# [Output("visibility", "src"), # Update the image source
# Output("visibility-click-store", "data")], # Update the click count in the store
# Input("visibility-btn", "n_clicks"), # Trigger on button click
# State("visibility-click-store", "data") # Get the current stored click count
# )
# def toggle_eye_icon(n_clicks, stored_clicks):

# print("click ", n_clicks, stored_clicks)

# if n_clicks is None:
# n_clicks = stored_clicks # If no clicks, retain the previous value

# # Increment the stored click count by 1
# # if n_clicks >= stored_clicks:
# # print("*****")

# stored_clicks += 1

# # Toggle the icon based on whether the click count is odd or even
# if stored_clicks % 2 == 0:
# return app.get_asset_url("icons/map_icons/eye-open.svg"), stored_clicks
# else:
# return app.get_asset_url("icons/map_icons/eye-slashed.svg"), stored_clicks


# -----------------------------------------------------------------------------
# App runs here. Define configurations, proxies, etc.
# -----------------------------------------------------------------------------
Expand Down
4 changes: 4 additions & 0 deletions dash_app/assets/icons/map_icons/black_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.
7 changes: 7 additions & 0 deletions dash_app/assets/icons/map_icons/fuchsia_square.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions dash_app/assets/icons/map_icons/white_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.
3 changes: 2 additions & 1 deletion dash_app/assets/layers.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@
}

#hex-box {
background-color: #FF00FF;
/* background-color: #FF00FF; */
background-color: black;
width: 15px;
height: 15px;
float: left;
Expand Down
Empty file removed dash_app/assets/test.css
View file
Empty file.
Loading

0 comments on commit 6010675

Please sign in to comment.