diff --git a/__pycache__/callbacks.cpython-312.pyc b/__pycache__/callbacks.cpython-312.pyc index 0657bff..c09081d 100644 Binary files a/__pycache__/callbacks.cpython-312.pyc and b/__pycache__/callbacks.cpython-312.pyc differ diff --git a/assets/style.css b/assets/style.css index 5475b79..9fb4bba 100644 --- a/assets/style.css +++ b/assets/style.css @@ -78,6 +78,7 @@ body { flex: 1 1 30%; /* Allows flexibility for responsiveness */ padding: 10px; box-sizing: border-box; + height: 100vh; /* Full height */ } /* Right panel (Controls) */ @@ -85,6 +86,7 @@ body { flex: 1 1 65%; padding: 10px; box-sizing: border-box; + height: 100vh; /* Full height */ } /* Control elements in the right panel */ diff --git a/callbacks.py b/callbacks.py index da8a91e..6157366 100644 --- a/callbacks.py +++ b/callbacks.py @@ -330,11 +330,21 @@ def highlight_feature(n_clicks, point, polygon, aoi_type): # Update the map to highlight the selected point or polygon @app.callback( - [Output("points-layer", "children"), Output("highlighted-layer", "children")], - Input("highlight-data", "data") - ) - def update_map_highlight(data): - points_layer = create_points_layer() + [Output("points-layer", "children"), Output("highlighted-layer", "children")], + [Input("highlight-data", "data"), + Input("dataset-type", "value")] # Add dataset-type input +) + def update_map_highlight(data, dataset_type): + # Set point limit based on dataset_type + if dataset_type in ['olci', 'mur']: + point_limit = 32 + else: + point_limit = 13 + + # Create points layer with point limit + points_layer = create_points_layer(point_limit) + + # Initialize highlighted layer highlighted_layer = [] if data: @@ -359,4 +369,6 @@ def update_map_highlight(data): id="highlighted-polygon", options=dict(style=dict(color="red", weight=5, fillOpacity=0.1)) )) - return points_layer, highlighted_layer \ No newline at end of file + + # Return updated points and highlighted layers + return points_layer, highlighted_layer diff --git a/pages/__pycache__/data_viz.cpython-312.pyc b/pages/__pycache__/data_viz.cpython-312.pyc index 62fc506..529e59d 100644 Binary files a/pages/__pycache__/data_viz.cpython-312.pyc and b/pages/__pycache__/data_viz.cpython-312.pyc differ diff --git a/pages/__pycache__/home.cpython-312.pyc b/pages/__pycache__/home.cpython-312.pyc index a9dca5b..b052b5f 100644 Binary files a/pages/__pycache__/home.cpython-312.pyc and b/pages/__pycache__/home.cpython-312.pyc differ diff --git a/pages/data_viz.py b/pages/data_viz.py index 982e867..79adea6 100644 --- a/pages/data_viz.py +++ b/pages/data_viz.py @@ -30,19 +30,30 @@ print(f"Error reading {shapefile}: {e}") # Create point markers -def create_points_layer(selected_point=None): +def create_points_layer(point_limit, selected_point=None): points_layer = [] for idx, row in points_df.iterrows(): + if idx >= point_limit: + break # Stop when the point limit is reached color = "red" if selected_point and selected_point == idx + 1 else "blue" points_layer.append( dl.Marker( position=[row['latitude'], row['longitude']], - children=dl.Tooltip(f"Point: {row['Points']}, Location: {row['label']}")), + children=dl.Tooltip(f"Point: {row['Points']}, Location: {row['label']}"), + ), ) return points_layer # Create a generic layout function def create_layout(title, map_id, variable_options, dataset_type, geojson_data, point_range, dataset_info, wmts_layers, layer_name): + # set point limit: 32 for olci and ghrsst, 13 for others + if dataset_type in ['olci', 'mur']: + point_limit = 32 + else: + point_limit = 13 + + points_layer = dl.LayerGroup(create_points_layer(point_limit), id="points-layer") + return html.Div([ html.H2(f'{title} Data Visualization', className="heading"), html.Hr(), @@ -58,7 +69,7 @@ def create_layout(title, map_id, variable_options, dataset_type, geojson_data, p url="https://server.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}", id="ocean-basemap" ), - dl.LayerGroup(id="points-layer"), + # dl.LayerGroup(id="points-layer"), dl.ScaleControl(position="bottomleft"), dl.FullScreenControl(), @@ -75,7 +86,8 @@ def create_layout(title, map_id, variable_options, dataset_type, geojson_data, p url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" ), name="OpenStreetMap" ), - dl.Overlay(dl.LayerGroup(id="points-layer"), name="Points", checked=False), + dl.Overlay(points_layer, name="Points", checked=False), + # dl.Overlay(dl.LayerGroup(id="points-layer"), name="Points", checked=False), dl.Overlay( dl.LayerGroup( [dl.GeoJSON(data=geojson_data[name], id=f"geojson-{name}") for name in geojson_data] @@ -86,7 +98,7 @@ def create_layout(title, map_id, variable_options, dataset_type, geojson_data, p ], position="topright" ) ], - style={'width': '100%', 'height': '680px'}, + style={'width': '100%', 'height': '100%'}, center=[-32.1, 115.4], zoom=9, id=map_id ) ], className='left-panel'), # CSS class for map responsiveness @@ -128,7 +140,7 @@ def create_layout(title, map_id, variable_options, dataset_type, geojson_data, p html.Label("Select Point"), dcc.Dropdown( id="coordinate-input-point", - options=[{'label': f'Point {i}', 'value': str(i)} for i in range(1, point_range + 1)], + options=[{'label': f'Point {i}', 'value': str(i)} for i in range(1, point_range)], className="input-dropdown" ) ], id='point-selector', style={'display': 'none'}), @@ -149,6 +161,7 @@ def create_layout(title, map_id, variable_options, dataset_type, geojson_data, p html.Label("From"), dcc.DatePickerSingle( id="start-date-picker", + display_format="DD/MM/YYYY", placeholder="Start Date", className="DatePickerSingle" ) @@ -158,6 +171,7 @@ def create_layout(title, map_id, variable_options, dataset_type, geojson_data, p html.Label("To"), dcc.DatePickerSingle( id="end-date-picker", + display_format="DD/MM/YYYY", placeholder="End Date", className="DatePickerSingle" ) diff --git a/pages/home.py b/pages/home.py index 11abe63..588ffe9 100644 --- a/pages/home.py +++ b/pages/home.py @@ -114,7 +114,7 @@ def home_layout(): "margin": "0 auto" }) ]) - ], style={"background-color": "#a4c126", "border": "1px solid #dee2e6", "padding": "10px", "margin": "10px"}), width=4), + ], style={"background-color": "#a4c126", "border": "1px solid #dee2e6", "padding": "10px", "margin": "10px"}), width=12, md=4), dbc.Col(dbc.Card([ dbc.CardBody([ html.H4("Total Datasets", className="card-title", style={"text-align": "center", "font-weight": "bold"}), @@ -129,7 +129,7 @@ def home_layout(): "margin": "0 auto" }) ]) - ], style={"background-color": "#008bad", "border": "1px solid #dee2e6", "padding": "10px", "margin": "10px"}), width=4), + ], style={"background-color": "#008bad", "border": "1px solid #dee2e6", "padding": "10px", "margin": "10px"}), width=12, md=4), dbc.Col(dbc.Card([ dbc.CardBody([ html.H4("Variables", className="card-title", style={"text-align": "center", "font-weight": "bold"}), @@ -144,7 +144,7 @@ def home_layout(): "margin": "0 auto" }) ]) - ], style={"background-color": "#f3bc00", "border": "1px solid #dee2e6", "padding": "10px", "margin": "10px"}), width=4), + ], style={"background-color": "#f3bc00", "border": "1px solid #dee2e6", "padding": "10px", "margin": "10px"}), width=12, md=4), ], className="mb-4"), ]), @@ -172,10 +172,10 @@ def home_layout(): html.Li([html.Span("OSTIA: ", style={"font-weight": "bold"}), "Operational Sea Surface Temperature and Sea Ice Analysis"]), ], style={"margin-bottom": "20px"}) # Add space between lists ], style={"padding": "10px", "flex": "1"}) # Right column with the full forms - ], width=6), + ], width=12, md=6), dbc.Col([ dcc.Graph(figure=create_sunburst_chart()), # Left column with the figure - ], width=6) + ], width=12, md=6) ], style={"margin-bottom": "20px"}), ]),