Update app.py

app.py

@@ -1,9 +1,9 @@
 
-from branca.element import Template, MacroElement
+
+import plotly.graph_objects as go
 from folium.raster_layers import ImageOverlay
 import re
 import glob
-import altair as alt
 import pickle
 import h5py
 import rasterio
@@ -15,7 +15,7 @@ import numpy as np
 import pandas as pd
 from geopy.extra.rate_limiter import RateLimiter
 from geopy.geocoders import Nominatim
-
+from streamlit_plotly_events import plotly_events
 import warnings
 warnings.filterwarnings("ignore")
 
@@ -47,11 +47,13 @@ def get_data(row, col, radius=8):
         "data/2021_hail.h5",
         "data/2020_hail.h5"
     ]
+
     all_data = []
     all_dates = []
     for i in files:
         with h5py.File(i, 'r') as f:
-            data = f['hail'][:, row - radius: row + radius+ 1,   col-radius: col+radius+1]
+            data = f['hail'][:, row-radius:row +
+                             radius+1, col-radius:col+radius+1]
             dates = f['dates'][:]
             all_data.append(data)
             all_dates.append(dates)
@@ -69,101 +71,28 @@ def get_data(row, col, radius=8):
                       'Max': data_max})
 
     df['Date'] = pd.to_datetime(df['Date'], format='%Y%m%d')
-    df['Date']=df['Date']+pd.Timedelta(days=1)
+    # df['Date']=df['Date']+pd.Timedelta(days=1)
 
     return df, data_max_2
 
 
-def map_folium(lat, lon,files_dates_selected, within_days ):
-    
+def map_folium(lat, lon, files_dates_selected):
+
     # Create a base map
-    m = folium.Map(location=[lat, lon], zoom_start=5)
+    m = folium.Map(location=[lat, lon], zoom_start=6)
     folium.Marker(location=[lat, lon], popup=address).add_to(m)
-    
+
     # Define the image bounds (SW and NE corners)
-    image_bounds  = [[20.0000010001429, -129.99999999985712], [54.9999999998571, -60.00000200014287]]
-    
+    image_bounds = [[20.0000010001429, -129.99999999985712],
+                    [54.9999999998571, -60.00000200014287]]
+
     # Add ImageOverlays for each image
-    dates = []
-    for f in files_dates_selected:
-        overlay = ImageOverlay(image=f, bounds=image_bounds,
-                               opacity=.75,
-                               mercator_project=False)
-        filename = os.path.basename(f)
-        date_str = re.search(r'(\d{8})', filename).group()
-        formatted_date = f"{date_str[:4]}-{date_str[4:6]}-{date_str[6:8]}"
-        dates.append(formatted_date)
-        overlay.add_to(m)
-    
-
-    # HTML template for the slider control with dates
-    template_1 = '{% macro html(this, kwargs) %}' + f"""
-    
-
-    
-    <div id="slider-control" style="position: fixed; top: 50px; left: 50px; z-index: 9999; background-color: white; padding: 10px; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);">
-        <label for="image-slider">Select Date:</label>
-        <input type="range" min="0" max="{len(dates)-1}" value="{within_days}" class="slider" id="image-slider" style="width: 150px;" oninput="updateFromSlider(this.value)">
-        <input type="text" id="date-input" placeholder="YYYY-MM-DD" oninput="updateFromInput(this.value)">
-        <span id="slider-value">{dates[within_days]}</span>
-    </div>
-    <script>"""
-    
-    template_2 = f"""
-    var dates = {dates};"""
-    
-    template_3 = """
-    var currentIndex = 0;
-    
-    function updateImage(index) {
-        index = Math.round(index);  // Ensure the index is an integer
-        // Update the displayed date
-        document.getElementById('slider-value').innerHTML = dates[index];
-        document.getElementById('date-input').value = dates[index];
-        
-        // Hide all images
-        document.querySelectorAll('.leaflet-image-layer').forEach(function(layer) {
-            layer.style.display = 'none';
-        });
-        
-        // Show the current image
-        document.querySelectorAll('.leaflet-image-layer')[index].style.display = 'block';
-        
-        currentIndex = index;
-    }
-    
-    function updateFromSlider(value) {
-        updateImage(parseFloat(value));
-    }
-    
-    function updateFromInput(inputDate) {
-        var index = dates.indexOf(inputDate);
-        if (index !== -1) {
-            document.getElementById('image-slider').value = index;
-            updateImage(index);
-        } else {
-            alert('Invalid date. Please enter a date in the format YYYY-MM-DD that exists in the dataset.');
-        }
-    }
-    
-    // Initially show only the first image
-    document.addEventListener('DOMContentLoaded', function() {
-        document.querySelectorAll('.leaflet-image-layer').forEach(function(layer, index) {
-            layer.style.display = index === 0 ? 'block' : 'none';
-        });
-    });
-    </script>
-    {% endmacro %}
-    """
-    template = template_1+template_2+template_3
-    
-    
-    # Add the custom control to the map
-    macro = MacroElement()
-    macro._template = Template(template)
-    m.get_root().add_child(macro)
-    
-    
+
+    overlay = ImageOverlay(image=files_dates_selected, bounds=image_bounds,
+                           opacity=.75,
+                           mercator_project=False)
+
+    overlay.add_to(m)
     colormap_hail = cm.LinearColormap(
         colors=['blue', 'lightblue', 'pink', 'red'], vmin=0.01, vmax=2)
     # Add the color legend to the map
@@ -174,7 +103,6 @@ def map_folium(lat, lon,files_dates_selected, within_days ):
 
 
 
-
 #Set up 2 Columns
 st.set_page_config(layout="wide")
 col1, col2 = st.columns((2))
@@ -183,7 +111,7 @@ col1, col2 = st.columns((2))
 #Input Values
 address = st.sidebar.text_input("Address", "123 Main Street, Dallas, TX 75126")
 date_focus = st.sidebar.date_input("Date",  pd.Timestamp(2023, 7, 1))
-within_days = st.sidebar.selectbox('Days Within', (30, 90))
+within_days = st.sidebar.selectbox('Days Within', (90, 180, 365))
 # start_date = st.sidebar.date_input("Start Date",  pd.Timestamp(2023, 1, 1))
 # end_date = st.sidebar.date_input("End Date",  pd.Timestamp(2023, 12, 31))
 
@@ -194,48 +122,19 @@ date_range = pd.date_range(start=start_date, end=end_date).strftime('%Y%m%d')
 
 circle_radius = st.sidebar.selectbox('Box Radius (Miles)', (5, 10, 25))
 
-zoom_dic = {5: 12, 10: 11, 25: 10}
-zoom = zoom_dic[circle_radius]
 
 #Geocode and get Data
 result = geocode(address)
 lat, lon = result.values[0]
 
 
-crs_dic = pickle.load(open('data/mrms_hail_crs.pkl', 'rb'))
+crs_dic = pickle.load(open('mrms_hail_crs.pkl', 'rb'))
 transform = crs_dic['affine']
 
 row, col = rasterio.transform.rowcol(transform, lon, lat)
-row, col =int(row), int(col)
-st.write(row,col)
+row, col = int(row), int(col)
 
-# center=row,col
 radius = int(np.ceil(circle_radius*1.6))
-# crop_coords = col-radius, row-radius, col+radius+1, row+radius+1
-
-files = [
-    "data/2023_hail.h5",
-    "data/2022_hail.h5",
-    "data/2021_hail.h5",
-    "data/2020_hail.h5"
-]
-all_data = []
-all_dates = []
-for i in files:
-    with h5py.File(i, 'r') as f:
-            data = f['hail'][:, row - radius: row + radius+ 1,   col-radius: col+radius+1]
-            dates = f['dates'][:]
-            all_data.append(data)
-            all_dates.append(dates)
-
-
-
-files = glob.glob(r'webp/**/*.webp', recursive=True)
-files_dates_selected = [i for i in files if any(
-    i for j in date_range if str(j) in re.search(r'(\d{8})', i).group())]
-
-
-
 
 # Get Data
 df_data, max_values = get_data(row, col, radius)
@@ -245,34 +144,37 @@ df_data['Max'] = df_data['Max'].round(3)
 df_data['Actual'] = df_data['Actual'].round(3)
 
 
-# Create the bar chart
-fig = alt.Chart(df_data).mark_bar(size=3, color='red').encode(
-    x='Date:T',  # Temporal data type
-    y='Actual:Q',  # Quantitative data type
-    color='Actual:Q',  # Color based on Actual values
-    tooltip=[  # Adding tooltips
-        alt.Tooltip('Date:T', title='Date'),
-        alt.Tooltip('Actual:Q', title='Actual Value'),
-        alt.Tooltip('Max:Q', title=f'Max Value with {circle_radius} Miles')
-    ]
-).configure(
-    view=alt.ViewConfig(
-        strokeOpacity=0  # No border around the chart
-    )
-).configure_axis(
-    grid=False  # Disable grid lines
-).configure_legend(
-    fillColor='transparent',  # Ensure no legend is shown
-    strokeColor='transparent'
-)
+fig = go.Figure()
+
+# Add bars for actual values
+fig.add_trace(go.Bar(
+    x=df_data['Date'],
+    y=df_data['Actual'],
+    name='Actual Value',
+    marker_color='#2D5986',
+    hoverinfo='text',  # Show text information only
+    text=df_data.apply(
+        lambda row: f'Date: {row["Date"].date()}<br>Hail: {row["Actual"]}<br>Max: {row["Max"]}', axis=1)
+
+))
+
 
+# Update layout
+fig.update_layout(
+    title='',
+    xaxis_title='Date',
+    yaxis_title='Hail (Inches)',
+    barmode='group'
+)
 
 
+files = glob.glob(r'webp/**/*.webp', recursive=True)
 
 with col1:
-    st.title(f'Hail')
+    st.title('Hail')
     try:
-        st.altair_chart(fig, use_container_width=True)
+
+        selected_points = plotly_events(fig)
         csv = convert_df(df_data)
         st.download_button(
             label="Download data as CSV",
@@ -285,19 +187,33 @@ with col1:
 
 with col2:
     st.title('Hail Mesh')
-    if 'is_first_run' not in st.session_state:
-         # First run
-         st.session_state.is_first_run = True
-         st.components.v1.html(open("data/map.html", 'r').read(), height=500, width=500)
+
+    if selected_points:
+        # Extract the details of the first selected point
+        selected_index = selected_points[0]['pointIndex']
+        selected_data = df_data.iloc[selected_index]
+
+        # # Display the selected point details
+        # st.write("You selected the following point:")
+        # st.write(selected_data)
+
+        files_dates_selected = [i for i in files if selected_data['Date'].strftime(
+            '%Y%m%d') in re.search(r'(\d{8})', i).group()][0]
+        m = map_folium(lat, lon, files_dates_selected)
+        m.save("map_new.html")
+
+        st.write('Date: ' + selected_data['Date'].strftime('%m-%d-%Y'))
+        st.components.v1.html(
+            open("map_new.html", 'r').read(), height=500, width=500)
+
     else:
-         with st.spinner("Loading... Please wait, it's gonna be great..."):
-             # st_folium(m, height=500)
-             # Not the first run; create a new map
-             m=map_folium(lat, lon,files_dates_selected, within_days )
-             m.save("map_new.html")
-             st.components.v1.html(open("map_new.html", 'r').read(), height=500, width=500)
-
-# st.bokeh_chart(hv.render(nice_plot*points_lat_lon, backend='bokeh'),use_container_width=True)
+        files_dates_selected = [i for i in files if date_focus.strftime(
+            '%Y%m%d') in re.search(r'(\d{8})', i).group()][0]
+        st.write('Date: ' + date_focus.strftime('%m-%d-%Y'))
+        m = map_folium(lat, lon, files_dates_selected)
+        m.save("map_new.html")
+        st.components.v1.html(
+            open("map_new.html", 'r').read(), height=500, width=500)
 
 
 st.markdown(""" <style>