app.py

import folium
import streamlit as st
import pandas as pd#, geopandas as gpd
import base64
from streamlit_folium import st_folium
from folium.plugins import Draw
from st_aggrid import AgGrid, ColumnsAutoSizeMode, GridUpdateMode, JsCode
from st_aggrid.grid_options_builder import GridOptionsBuilder
# from shapely.geometry import Polygon
from shapely.wkt import loads as wkt_loads


# display PDF
PDF_HTML_iframe_template = (
    """<iframe src="{pdf_url}" width="100%" height="800"></iframe>"""
)

def display_PDF(st, pdf_url='proforma-example.pdf'):
    # /Users/junxiong/Documents/aire/acToolV2/due-diligence-check-example.pdf
    pdf_file = open(pdf_url, 'rb')
    base64_pdf = base64.b64encode(pdf_file.read()).decode('utf-8')
    pdf_display = f'<embed src="data:application/pdf;base64,{base64_pdf}" width="700" height="1000" type="application/pdf">' 
    st.markdown(pdf_display, unsafe_allow_html=True)
    # pdf_content = PDF_HTML_iframe_template.format(
    #     pdf_url=pdf_url
    # )
    # st.markdown(pdf_content, unsafe_allow_html=True)


# import matplotlib.pyplot as plt
# import docx

# ------ Main UI ------
st.set_page_config(page_title="AcTool V2 live-mockup", layout="wide")
# Hide Streamlit deploy menu
st.markdown(
    """
    <style>
        .reportview-container {
            margin-top: -2em;
        }
        #MainMenu {visibility: hidden;}
        .stDeployButton {display:none;}
        footer {visibility: hidden;}
        #stDecoration {display:none;}
    </style>
""",
    unsafe_allow_html=True,
)

st.markdown("""This is the live-mockup of AcTool V2. Please use [Roadmap link](https://aireflags.larksuite.com/docx/XNHgdD8S4o7C28xjt7uuiNGSsGh) to add any new requested features.
- [x] Every panel can be expand/hide to focus on interested block.""")


left, right = st.columns((1, 1))

cols = ['WKT','County','Post_Code','FullMailin']
df = pd.read_csv('sample.csv')[cols]
df['rank'] = 0
geoms = df['WKT'].apply(wkt_loads)
df = df.drop(columns=['WKT'])
# print(type(geoms))
# print(geoms.iloc[0])

# geoms = (gpd.GeoSeries(geoms))
# print(dir(geoms))
# print(geoms.to_json())
# pause

js_handle_value_change_event = JsCode("""
function(e) {
    let api = e.api;
    let rowIndex = e.rowIndex;
    let col = e.column.colId;

    let rowNode = api.getDisplayedRowAtIndex(rowIndex);
    api.flashCells({
        rowNodes: [rowNode],
        columns: [col],
        flashDelay: 10000000000
    });

};
""")

pinned_col_cellsytle_jscode = JsCode("""
function(params) {
    return {
        'backgroundColor': 'lightgrey'
    }
};
""")

with left:
    roi_section = st.expander("Interested Collection", expanded=True)
    with roi_section:
        gd = GridOptionsBuilder.from_dataframe(df)

        gd.configure_pagination(
            enabled=True,
            paginationAutoPageSize=False,
            paginationPageSize=10
        )
        gd.configure_default_column(
            editable=True,
            groupable=True,
            resizable=True,
        )
        gd.configure_selection(
            selection_mode="single",
            pre_selected_rows=[0]  # 默认选择第一行
        )
        gd.configure_grid_options(
            onCellValueChanged=js_handle_value_change_event
        )

        gd.configure_auto_height(autoHeight=False)
        gd.configure_column("view", pinned="right")
        gd.configure_column("note", pinned="right", minWidth=200)
        gd.configure_columns(["view", "note"], cellStyle=pinned_col_cellsytle_jscode)
        gridOptions = gd.build()

        grid_table = AgGrid(
            df,
            gridOptions=gridOptions,
            update_mode=GridUpdateMode.SELECTION_CHANGED | GridUpdateMode.VALUE_CHANGED,
            columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
            allow_unsafe_jscode=True,
            theme="streamlit",
        )
    note_section = st.expander("Photoes & Notes history​", expanded=True)
    with note_section:
        # st.write("Photoes & Notes history/n")
        st.image("photo.jpg", caption="Photo 1")
    ddcheck_section = st.expander("due diligence check​", expanded=True)
    with ddcheck_section:
        st.image("dd-check.jpg")
        # pdf_container = st.container()
        # with pdf_container:
        #     display_PDF(st)
    sb9_section = st.expander("SB9/ADU potentials​", expanded=True)
    with sb9_section:
        st.write("SB9 ADU potentials​(TBD)")
    proforma_section = st.expander("proforma​", expanded=True)
    with proforma_section:
        st.image("proforma.jpg")
        # pdf_container = st.container()
        # with pdf_container:
        #     display_PDF(st, pdf_url='proforma-example.pdf')


with right:
    lat, lon = 37.302606062505,-122.029462962451
    m = folium.Map(
        location=[lat, lon],
        tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        attr='(C) World Imagery contributors',
        name='Esri Satellite',
        max_zoom=21,
        zoom_start=19
    )

    Draw().add_to(m)
    # folium.GeoJson(data=geoms.to_json()).add_to(m)
    # st.header("Street Map Views")
    st.markdown("""Map: show the parcels of selected properties on the Street View.""")
    st_folium(m, width=900, height=1000, returned_objects=[])