diff --git a/dash_app/app.py b/dash_app/app.py
index eb020b9..141823e 100644
--- a/dash_app/app.py
+++ b/dash_app/app.py
@@ -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.
@@ -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])
@@ -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
@@ -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'),
@@ -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')
)
@@ -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 = {
@@ -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')
],
@@ -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"),
@@ -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"),
@@ -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.
# -----------------------------------------------------------------------------
diff --git a/dash_app/assets/icons/map_icons/black_square.svg b/dash_app/assets/icons/map_icons/black_square.svg
new file mode 100644
index 0000000..b47bcb0
--- /dev/null
+++ b/dash_app/assets/icons/map_icons/black_square.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/dash_app/assets/icons/map_icons/fuchsia_square.png b/dash_app/assets/icons/map_icons/fuchsia_square.png
new file mode 100644
index 0000000..5463c84
--- /dev/null
+++ b/dash_app/assets/icons/map_icons/fuchsia_square.png
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/dash_app/assets/icons/map_icons/white_square.svg b/dash_app/assets/icons/map_icons/white_square.svg
new file mode 100644
index 0000000..a6072ed
--- /dev/null
+++ b/dash_app/assets/icons/map_icons/white_square.svg
@@ -0,0 +1,7 @@
+
+
+