feat: update styles and ui

.streamlit/config.toml

@@ -1,2 +1,4 @@
 [ui]
-hideTopBar = true
+hideTopBar = true
+[theme]
+base="light"

instageo/apps/app.py

@@ -27,12 +27,14 @@
 import json
 import os
 from pathlib import Path
+from datetime import date
 
 import streamlit as st
 
 from instageo import INSTAGEO_APPS_PATH
-from instageo.apps.viz import create_map_with_geotiff_tiles
+from instageo.apps.viz import create_map_with_geotiff_url,create_map_with_geotiff_tiles
 from instageo.apps.utils.styles import general_styles
+from instageo.apps.utils.consts import MODELS_LIST,PREDICTIONS
 
 
 def generate_map(
@@ -75,30 +77,36 @@ def main() -> None:
     """Instageo Serve Main Entry Point."""
     st.set_page_config(layout="wide")
     general_styles()
-    with open(
-        INSTAGEO_APPS_PATH / "utils/country_code_to_mgrs_tiles.json"
-    ) as json_file:
-        countries_to_tiles_map = json.load(json_file)
+    st.logo("instageo/apps/assets/logo.svg")
+
+
+    with st.sidebar.container():
 
+        model = st.sidebar.selectbox( 
+            "Select Model",
+            options=MODELS_LIST,
+            )
+        cols = st.sidebar.columns(2)    
+        current_date = date.today()
+        current_year = current_date.year
+        year =  cols[0].selectbox('Year', range(current_year, 1989,-1))
+        month = cols[1].selectbox('Month', range(12, 0, -1))
+
+    predictionPath = None
     with st.sidebar.container():
-        directory = st.sidebar.text_input(
-            "GeoTiff Directory:",
-            help="Write the path to the directory containing your GeoTIFF files",
-        )
-        country_code = st.sidebar.selectbox(
-            "ISO 3166-1 Alpha-2 Country Code:",
-            options=list(countries_to_tiles_map.keys()),
-        )
-        year = st.sidebar.number_input("Select Year", 2023, 2024)
-        month = st.sidebar.number_input("Select Month", 1, 12)
-
-    if st.sidebar.button("Generate Map"):
-        country_tiles = countries_to_tiles_map[country_code]
-        generate_map(directory, year, month, country_tiles)
-    else:
-        st.plotly_chart(
-            create_map_with_geotiff_tiles(tiles_to_overlay=[]), use_container_width=True
-        )
+        st.sidebar.markdown("### Predictions History")
+        for prediction in PREDICTIONS:
+            if st.sidebar.button(prediction["name"], prediction["path"], type="tertiary"):
+                predictionPath = prediction["path"]
+
+
+    with st.sidebar.container():
+        if st.sidebar.button("Submit job",use_container_width=True):
+            pass
+
+    st.plotly_chart(
+            create_map_with_geotiff_url(url=predictionPath), use_container_width=True,config={"scrollZoom": True}
+    )
 
 
 if __name__ == "__main__":

instageo/apps/requirements.txt

@@ -5,4 +5,4 @@ xarray
 datashader==0.16.2
 dask==2024.12.1
 matplotlib
-streamlit==1.31.1
+streamlit==1.42.0

instageo/apps/utils/consts.py

@@ -1,2 +1,22 @@
 
-MAP_STYLE="https://tiles.stadiamaps.com/styles/alidade_smooth.json"
+MAP_STYLE="https://tiles.stadiamaps.com/styles/alidade_smooth.json"
+
+MODELS_LIST=[
+    "Locust Breeding Ground",
+    "Biomass Estimation",
+    "Aerosol Optical Depth Estimation"
+]
+
+
+PREDICTIONS=[
+    {"name": "Prediction 1", "path": "output_rgba3_opt.tif"},
+    {"name": "Prediction 2", "path": "prediction_2.json"},
+]
+
+TILE_SERVER_URL="http://localhost:8000/cog/tiles/WebMercatorQuad/{z}/{x}/{y}?url=/data/"
+
+
+
+
+
+

instageo/apps/utils/styles.py

@@ -6,16 +6,31 @@ def general_styles() -> None:
     st.markdown(
         """
     <style>
+        body {
+            background-color: white !important;
+        }
+        body * {
+            color: #404F65 !important;
+        }
         .main {
             overflow: hidden;
         }
-        div[data-testid="stAppViewBlockContainer"]  {
+        div[data-testid="stMainBlockContainer"]  {
             padding: 0px !important;
+            background-color: white !important;
+
+        }
+        div[data-testid="stMain"]  {
+            background-color: white !important;
         }
-        div[data-testid="stAppViewBlockContainer"] .stPlotlyChart {
+        div[data-testid="stMainBlockContainer"] .stPlotlyChart {
             height: 100vh;
         }
-         div[data-testid="stAppViewBlockContainer"] .stPlotlyChart .plot-container {
+        .js-plotly-plot {
+            height:100%;
+            z-index: 99;
+        }
+         div[data-testid="stMainBlockContainer"] .stPlotlyChart .plot-container {
             height: 100%;
         }
         div[data-testid="stVerticalBlock"] {
@@ -35,6 +50,67 @@ def general_styles() -> None:
         header {
             display: none !important;
         }
+        section[data-testid="stSidebar"] {
+            background-color: white !important;
+           border-right: 1px solid #E2E8F0 !important;
+        }
+        div[data-testid="stHorizontalBlock"] {
+            margin-bottom: 200px !important;
+            flex-grow: 0;
+
+        }
+        div[data-testid="stSidebarContent"] {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+
+        }
+        div[data-testid="stSidebarUserContent"] {
+            flex-grow: 1;
+            padding-bottom: 40px !important;
+
+        }
+        div[data-testid="stSidebarUserContent"]>div {
+            height: 100%;
+
+        }
+        div[data-testid="stSidebarUserContent"]>div>div {
+            height: 100%;
+
+        }
+        div[data-testid="stSidebarUserContent"]>div>div>div {
+            height: 100%;
+
+        }
+        div[data-testid="stSidebarUserContent"]>div>div>div>div {
+            height: 100%;
+
+        }
+        div[data-testid="stVerticalBlock"]> div[data-testid="stElementContainer"]:last-of-type {
+            margin-top: auto !important;
+
+        }
+        section[data-testid="stSidebar"] div[data-testid="stElementContainer"]:last-of-type button{
+            background: #3892FF !important;
+            border-radius: 8px !important;
+            border: none !important;
+            & p {
+                color: white !important;
+                font-size: 14px !important;
+            }
+
+        }
+         
+        div[data-baseweb="select"] {
+            border: 1px solid #eeeeee !important;
+            border-radius: 6px; !important
+        }
+        div[data-baseweb="select"]:focus-visible * {
+            border-color: #265BF2 !important;
+        }
+         label *{
+            color: #8694A9 !important;
+        }
     </style>
     """,
         unsafe_allow_html=True,

instageo/apps/viz.py

@@ -26,7 +26,7 @@
 import rasterio
 import xarray as xr
 from pyproj import CRS, Transformer
-from instageo.apps.utils.consts import MAP_STYLE
+from instageo.apps.utils.consts import MAP_STYLE,TILE_SERVER_URL
 
 epsg3857_to_epsg4326 = Transformer.from_crs(3857, 4326, always_xy=True)
 
@@ -162,3 +162,38 @@ def create_map_with_geotiff_tiles(tiles_to_overlay: list[str]) -> go.Figure:
     # Overlay the resulting image
     fig.update_layout(mapbox_layers=mapbox_layers)
     return fig
+
+
+def create_map_with_geotiff_url(url: str) -> go.Figure:
+    """Create a map with multiple GeoTIFF tiles overlaid.
+
+    This function reads GeoTIFF files from a specified directory and overlays them on a
+    Plotly map.
+
+    Args:
+        tiles_to_overlay (list[str]): Path to tiles to overlay on map.
+
+    Returns:
+        Figure: A Plotly figure with overlaid GeoTIFF tiles.
+    """
+    fig = go.Figure(go.Scattermapbox())
+    fig.update_layout(
+        mapbox_style=(MAP_STYLE if MAP_STYLE else "open-street-map"),
+        mapbox=dict(center=go.layout.mapbox.Center(lat=0, lon=20), zoom=2.0),
+
+        autosize=True
+    )
+    if url:
+        fig.update_layout(mapbox_layers=[
+            {
+                "below": 'map',
+                "sourcetype": "raster",
+                "sourceattribution": "United States Geological Survey",
+                "source": [
+                    TILE_SERVER_URL+url
+                ],
+                "opacity":0.3
+            }
+        ],)
+
+    return fig

requirements.txt

@@ -18,7 +18,7 @@ numpy
 pre-commit
 pytest
 setuptools
-streamlit
+streamlit==1.42.0
 tqdm
 pytest-cov
 rioxarray