From 3e82a3b9ff99c6c485116b2e251cf0be43f134d9 Mon Sep 17 00:00:00 2001 From: ronygolderku Date: Sat, 5 Oct 2024 00:30:14 +0800 Subject: [PATCH] date and point update --- __pycache__/callbacks.cpython-312.pyc | Bin 16054 -> 16180 bytes assets/style.css | 2 ++ callbacks.py | 24 ++++++++++++++----- pages/__pycache__/data_viz.cpython-312.pyc | Bin 25925 -> 26258 bytes pages/__pycache__/home.cpython-312.pyc | Bin 9872 -> 9918 bytes pages/data_viz.py | 26 ++++++++++++++++----- pages/home.py | 10 ++++---- 7 files changed, 45 insertions(+), 17 deletions(-) diff --git a/__pycache__/callbacks.cpython-312.pyc b/__pycache__/callbacks.cpython-312.pyc index 0657bff9923c22196cee6f0553f7817f69cc939b..c09081d4d67504ceefe0bec4e18bc60860c66b36 100644 GIT binary patch delta 640 zcmdm1yQPlrG%qg~0}!keXGouCw~=oXH{*`Y2f4f1CpQRjPqr51VPx9uBb+E3%LGyd z1-w977>GZ&FfuSqXQ*LJVJu@PVoqVIWy)hpVXkE=0g6LF4by5UyOuefp_ZkFp=fCh zLkf!|P&$P*TZ4h2D71!U@&-fs$)bj0!fYUMpgcQ>PG?HtC}EvEK~E+ug%f5>3Renu z3J*|<7fkY{@B`TbDS|*!Xb$Td;nge+8ETkoSkjn+LB>L?6#-l80Jhe&UKH#U zu@aD{zyQHY5l@jwkz6CSni(RqMjB@78X1@vOax(%rmUYP(=C?#oaD?~%(-Ed~LZ3$l6_`1LMu=zS2Lyw${!k#F*MlPZ=MK$9kCYD-U^U@F4(8pyE* z;^NZH>r72poLIR#{APGvW>sG!cEP~;K-6W;fD0^vcUZYDa7)h!yUeNrWOmriFu%;I z{DGN~RrNC~3mel%E>%|j&)g8!WKpX=#)p%aSgm1vJvq=?j`8>A0&9I{#_Gun?8E>X C)R-;+ delta 512 zcmdl|x2=}%G%qg~0}!m{_?5U_E%6c+_E)6cMRnxI~s}!GK0i{@+=@a zohgNNa)zONDBEhNX({X}94VYYaV{{)ox%fT^QQ0tN&Y#kYXnxaKrDl)XJn{htYJ!H z3I>@8u~QIirvund(-0xBJA_L>t_K4ID@7zlG(~KU_-bZ|%o+)pscR%*VlWYeJ(^N} zn`?|T85yrmUS@31#$2=ysC)8XV*&#cUBY#%wK pSoJ@1LRgb0TlF#CovdWNhVj|t^VV{V-!{Lq)@NqSpDbrD1^_Oca^U~~ 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 62fc506de7f5d83d695654b79b702c5bcb21ded0..529e59d0215ad38d8f3025a2c1c092f3a96b7dc2 100644 GIT binary patch delta 6541 zcmbVQ3sjreegEz!eG+;Ck^l)1;$@J)V4mh>umPDzKn5d&ZDAYBx&n)UL_W!}L&R{J z>;zJ`vAJuLG;!mmO=s6+^G3TSJzbV;X>yh>tEs)3YB`D9lRdiioT)Zx;^u7G|9(Ob z+i=JxTfgsq_x|ty{_g*EulUKkXyHAi{;5hOXW&z+W5yo%@;S90ojF(Bo1?}IW+##z zDex3cFq6oECRqoI7iO#KM9HnkK89nW=Y{z;)D>eY`#+iT}I18{7X9IR&BVhL< zYynfr_|ZwQ@<9f*GQg|%l;|LH5*0A+szQd>JF3BgHCXDlJkQ`HclGnkd2!TAbP{GA z)x*_i{yy?tva)roX>F6jR#ku^_})$eS3SdwF*7XrhS<_{oM8@u+>B^O925na2M;j} zFG5U^wKGA)%Y!H=!e|;MK4^v!Fr61+(F_-4$2sCOY6;?UWMV8ffJ9JC%$!9f#!~u5 zX+qBtu9zDagFf;U_qwZC=0tP$6@~h2>CY9$6=iBTg;DCSiZgzf%w(F$2a>^L zkxKosh?B{~GLR4JNV_youZBo}hM{|T81{$R8JU-beaOg7sVR?x^@LAQ7BwjrFLKc! znUODWISZVEG;!MWAl;bcJd34^Nl}4-lzdZ`jV_Zr;w>Ob!b$~sC`n77D1|0SvJA@? z6)|x{ew>u8#>z!ibh!W`N?A5pkrt`38dhFQC+I#cGm_7xa#AhV(PuZ0Z{^(}m0Mu}XQ5s@@#6C`zuX$c%o$&IOUoQ^Z@nte*14ZL$^gJLW5w8F)XF)sG7 z2?9hBSR=(S>kx^K%1efBi&{uX@M3;%HD&I&| z^)_6AD{&QY&cxO932Lb7n$1)v5Ut%v`|S2WX_Pvy3&vs-oTOZHk`|n##PvZXHGiNi zDjiftby7~?j5NU+N?f$q5RDpO+K8L*4q)0G?F&ew8pe|thN!uexDi^SD(|)D?9N1* zcvsY;_t9+qf6{Ebm*#rDiW^kX9%oAaJ=tim;@!9dcP@4%`Z^j+u?;G^@0w<++l_nH zn-mL|-h^Th53vdwVp%r4Cn#F%TgR?dbUd{m@5KX)_SkqanM=v3z=O~g%?BwSiZ3vR z;^bm3+D=s&_Qy-d7`u2NrjjOyQFIVH7C6(a1oCGX9|B(=jxB)V!eG!NxB!nV9*vm@ zVQ0efEIyX-Cc>`xn;p^|38{WE+EOOAEO?K_!tyep&C{#LZ*nQnqiI?xoD2T43Fjkj z-hx7`2a`urFOhmpIcg$fnsL-Zey(XC8toZmB`<2TB#khQ?<8+%v!l&lYv(0Bw6~Ew zq$@$4~NJV-Xw2!23Ysls;RD-;i z?xB@xxcq5tWN~!xl$iE4~u}{*R%r z0=|9?EODB-Db=2xU6vNDr0eGuH`DcVijTBu&orNFzMfZeW%ycN>l@zd+QHMkA1RWb zuAi@eKS}wtbY6P4mYDRr#d5}wMFRShii48GQ%19Y3bn(#B3?OGP<1Eypo-Fq4wF9E9lDTY7Z(()r3Xnbal8NF_}fH zdy!dHygEeA8U9Ckn_(tUEBkwfX=o#tGP6+|c{}sn+?_ouJGxdHdsk&#S$UXCsw#m? z!1i{unwn&>qE#JvB`dd*3UzEK6wc6<7Xia6khkcz>_)5QEe+SR8^bPk0Oe<{N{3Kd`l^>qW!KI= z#5z%?Cfp`sGK?29uI}hvZ5KIF>K;(!La@;e5tCWG+6gZzb9fl-Wi{&XF)>_UR$bz~ ztjrQt>}S)|VJ~!*top?JS!HRM+0SyNcW!kd#xjHM+`rT1rYiz(G)xe0sK&XFV zOTXbI7~#J|;oATfQHaBCuiwqTyyV%Ek5cF8$UKFo0Dv!fp{T1&ASVrprae;|+lwaU zB{A45wOD7S7WUI3K(ll$I|IDa>z|5Jd<6zoXvtRGz)GHkHs8N=#?p<@ljL7Y@>2P~ zqFq0v@G8Lc4@vUiAu?T4N1iX8TZd)M)~)Cwac)gJc&{Pvb*lo@T@vv#RP|*F0#$mK zj4@4y`saNR%2AZ-k6^TX>1SJavf$q2ZLeqkm`?m_3a?Z68wzg#O#djxbGl-F9iF<% zD$hkKs2OmNPPknGr`P4q6)K{i-;BDFF7q0I|1P>3KCUXt_)U-+TKeHvrK;|C_J7ov-2y#T-&DZk^54Zw%3q?hXu)4MVbpZsdjR)3-Y4jaQhOUD zrk76Eu0TXC_1EPhMFJ1~aIEAE6p^7MZ{yc@vcvEqj&+rH-1TEB1Zr%??H@*R7Y=oX{{|Lgb z5&Mo)vD))}@?3L;gwmhxB9HB=AfGo^HxhW=$Nvc+|1}Ci-Q9 z8rfQ)|_}`%HWf#nihfI)y4J7&wt)q?=N_4&tAZms_8RQT#sn zq^&B^x+Cq?Ux06S+`67M>ymfc&71Po+{M?kzDXn9l*OkfBjKU`tZmxk1v|w?}J#=(#=jC ztvw%ipD6!;&ijzUO$xsPu!utvxM~LAf=Me=9M+hY^q4lPQ6oL2Q0l+jlQkgl-K;95 zQT6LoC4sf~1pHkla$Ece?J^@!k*Q$nU6Cli+2H_{>0NmFqX?#6*bm>!PpDr>-IMQih6_eAbGM@+&6=-zWXYh7ZgH1_U3Uv7ioYvgA`z-_7G$QDF=2MWMI zW|g&ApsSwXE-DzjGo=hJinSeN29EIAY0mC@Lf{(xedb;1kd={XM8EE@C{|wNb7< zdbAQ4y>c|O;S1#|{c9S32O!}FvEbBm91zhGqw}9-@4%o1?Xf&S(6L>`55ZeVHs8CGTX+);!GFeoihSrY zASL;|%RVbXm8ZMIEXP%@s50gTpLWbUo|Row<%bzowg+8st!UD2X!4ge`8PBb%bJQS z+H0EHx%QR%rW^IP<$Bv(@3Wd0GoH)1VX!P4EEg@;3^mKj+D|w-`O`25+HY%=NPjEm zD2qyOb#ZA(a;qW-pbZH~Ud9JfKJjNz`N)!=g(U>J&9#-l^vwp1wTS&&MXT7F$^Bh& f61=>X$yp0zZ<(aDUBvAcac`BXtu5SJEwuf=@&rQp delta 6058 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 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"}), ]),