app.py

from branca.element import Template, MacroElement
from folium.raster_layers import ImageOverlay
import re
import glob
import altair as alt
import pickle
import h5py
import rasterio
import streamlit as st
import os
import branca.colormap as cm
import folium
import numpy as np
import pandas as pd
from geopy.extra.rate_limiter import RateLimiter
from geopy.geocoders import Nominatim

import warnings
warnings.filterwarnings("ignore")


@st.cache_data
def convert_df(df):
    return df.to_csv(index=0).encode('utf-8')


def geocode(address):
    try:
        address2 = address.replace(' ', '+').replace(',', '%2C')
        df = pd.read_json(
            f'https://geocoding.geo.census.gov/geocoder/locations/onelineaddress?address={address2}&benchmark=2020&format=json')
        results = df.iloc[:1, 0][0][0]['coordinates']
        lat, lon = results['y'], results['x']
    except:
        geolocator = Nominatim(user_agent="GTA Lookup")
        geocode = RateLimiter(geolocator.geocode, min_delay_seconds=1)
        location = geolocator.geocode(address)
        lat, lon = location.latitude, location.longitude
    return pd.DataFrame({'Lat': lat, 'Lon': lon}, index=[0])


def get_data(row, col, radius=8):
    files = [
        "data/2023_hail.h5",
        "data/2022_hail.h5",
        "data/2021_hail.h5",
        "data/2020_hail.h5"
    ]
    all_data = []
    all_dates = []
    for f in files:
        with h5py.File(f, '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)

    data_mat = np.concatenate(all_data)
    data_mat = np.where(data_mat < 0, 0, data_mat)*0.0393701
    dates_mat = np.concatenate(all_dates)

    data_actual = [i[radius, radius] for i in data_mat]
    data_max = np.max(data_mat, axis=(1, 2))
    data_max_2 = np.max(data_mat, axis=0)

    df = pd.DataFrame({'Date': dates_mat,
                       'Actual': data_actual,
                      'Max': data_max})

    df['Date'] = pd.to_datetime(df['Date'], format='%Y%m%d')
    df['Date']=df['Date']+pd.Timedelta(days=1)

    return df, data_max_2


def map_folium(lat, lon,files_dates_selected, within_days ):
    
    # Create a base map
    m = folium.Map(location=[lat, lon], zoom_start=5)
    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]]
    
    # 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)
    
    
    colormap_hail = cm.LinearColormap(
        colors=['blue', 'lightblue', 'pink', 'red'], vmin=0.01, vmax=2)
    # Add the color legend to the map
    colormap_hail.caption = 'Legend: Hail (Inches)'
    colormap_hail.add_to(m)
    return m



files = [
        "data/2023_hail.h5",
        "data/2022_hail.h5",
        "data/2021_hail.h5",
        "data/2020_hail.h5"
]

all_dates = []
for f in files:
    with h5py.File(f, 'r') as f:
  
        dates = f['dates'][:]
        print(dates)

        all_dates.append(dates)

#Set up 2 Columns
st.set_page_config(layout="wide")
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))
# 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))

start_date = date_focus+pd.Timedelta(days=-within_days)
end_date = date_focus+pd.Timedelta(days=within_days)

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'))
transform = crs_dic['affine']

row, col = rasterio.transform.rowcol(transform, lon, lat)

# center=row,col
radius = int(np.ceil(circle_radius*1.6))
crop_coords = col-radius, row-radius, col+radius+1, row+radius+1

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())]
print(files_dates_selected)


# # Get Data
# df_data, max_values = get_data(row, col, radius)

# df_data = df_data.query(f"'{start_date}'<=Date<='{end_date}'")
# 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'
# )




with col1:
    st.title(f'Hail')
    # try:
    #     st.altair_chart(fig, use_container_width=True)
    #     csv = convert_df(df_data)
    #     st.download_button(
    #         label="Download data as CSV",
    #         data=csv,
    #         file_name='data.csv',
    #         mime='text/csv')
    # except:
    #     pass


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)
    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)


st.markdown(""" <style>
#MainMenu {visibility: hidden;}
footer {visibility: hidden;}
</style> """, unsafe_allow_html=True)