refactor: frontend

refactor: frontend

Author: FBruzzesi

src/moin_moin/backend/_db.py

@@ -1,5 +1,8 @@
 from __future__ import annotations
 
+from datetime import UTC
+from datetime import datetime
+
 from sqlmodel import Field
 from sqlmodel import SQLModel
 
@@ -10,7 +13,7 @@ class UserUploadData(SQLModel, table=True):
     latitude: float
     longitude: float
     notes: str
-    tags: str
+    timestamp: datetime = Field(default=datetime.now(tz=UTC))
 
 
 class Prediction(SQLModel, table=True):
@@ -23,5 +26,5 @@ class PublicRecord(SQLModel):
     latitude: float
     longitude: float
     notes: str
-    tags: str
     prediction: str
+    timestamp: datetime

src/moin_moin/backend/api.py

@@ -75,12 +75,11 @@ def root() -> dict[str, str]:
 
 
 @app.post("/save")
-async def save(  # noqa: PLR0913
+async def save(
     session: SessionDep,
     latitude: Annotated[float, Form()],
     longitude: Annotated[float, Form()],
     notes: Annotated[str, Form()],
-    tags: Annotated[str, Form()],
     image_bytes: Annotated[UploadFile, File()],
 ) -> dict[str, int | None]:
     """Save the input data into database records into user upload data table."""
@@ -90,7 +89,6 @@ async def save(  # noqa: PLR0913
         latitude=latitude,
         longitude=longitude,
         notes=notes,
-        tags=tags,
     )
 
     session.add(record)
@@ -128,7 +126,7 @@ async def load_records(session: SessionDep) -> list[PublicRecord]:
         UserUploadData.latitude,
         UserUploadData.longitude,
         UserUploadData.notes,
-        UserUploadData.tags,
+        UserUploadData.timestamp,
         Prediction.prediction,
     ).join(Prediction)
     records = session.exec(statement).all()

src/moin_moin/frontend/_conf.py

@@ -7,7 +7,7 @@
 HOST = "localhost" if ENV in ("local", "dev") else "backend"
 BACKEND_URL: Final[str] = f"http://{HOST}:8081"
 
-INSTITUTION_MAPPING: Final[dict[str, str]] = {
+INSTITUTION_COLOR_MAPPING: Final[dict[str, str]] = {
     "Police Department": "#48b5a5",
     "Fire Department": "#7b64ab",
     "Hospital": "#20be64",

src/moin_moin/frontend/_issue_tracker_page.py

@@ -0,0 +1,37 @@
+from __future__ import annotations
+
+import httpx
+import pandas as pd
+import streamlit as st
+
+from moin_moin.frontend._conf import BACKEND_URL
+from moin_moin.frontend._conf import INSTITUTION_COLOR_MAPPING
+
+
+def issue_tracker_page() -> None:
+    """Create the issue tracker page."""
+    st.sidebar.title("Issue tracker")
+    st.sidebar.markdown("This page displays all the issues in the database in a map and on a table")
+
+    result = (
+        pd.DataFrame(httpx.get(f"{BACKEND_URL}/load-records").json())
+        .drop_duplicates()
+        .assign(_color=lambda t: t["prediction"].map(INSTITUTION_COLOR_MAPPING))
+    )
+
+    st.header(f"Found {result.shape[0]} issues")
+
+    left_column, right_column = st.columns(2)
+
+    left_column.map(data=result, latitude="latitude", longitude="longitude", color="_color", size=10)
+    right_column.dataframe(
+        data=(
+            result[["prediction", "notes", "timestamp"]].rename(
+                columns={"prediction": "Assigned to", "notes": "Notes", "timestamp": "Report created"}
+            )
+        ),
+        hide_index=True,
+    )
+
+
+issue_tracker_page()

src/moin_moin/frontend/_overview.py

@@ -31,18 +31,19 @@ def parse_location(raw_loc: str) -> None | Any:  # noqa: ANN401
     return GEOLOCATOR.geocode(raw_loc)
 
 
-def main() -> None:
+def user_input_page() -> None:
     """Render user input page."""
-    st.sidebar.title("Tell us about the issue...")
+    st.sidebar.title("Tell us about your issue!")
+    st.sidebar.markdown(
+        "This page allows a citizen to report issues found around a city by just uploading an image and location."
+    )
 
     raw_image = st.sidebar.file_uploader(
         label="Upload an image",
         type=["png", "jpg"],
     )
 
-    raw_loc = st.sidebar.text_input("Enter your location (e.g., city name, street, number):")
-
-    tags = st.sidebar.multiselect("Select tags for the image:", TAGS)
+    raw_loc = st.sidebar.text_input("Enter your location:", placeholder="Street, number, city name")
 
     notes = st.sidebar.text_area(
         label="Additional information",
@@ -68,7 +69,6 @@ def main() -> None:
                     "latitude": getattr(loc, "latitude", None),
                     "longitude": getattr(loc, "longitude", None),
                     "notes": notes,
-                    "tags": ",".join(tags) if tags else "",
                 },
                 files={"image_bytes": ("image.jpg", buffer, "image/jpeg")},
                 timeout=10,
@@ -83,9 +83,7 @@ def main() -> None:
 
         st.header(f"Assigned Institution: {result}")
         st.write("---")
-        left_column, right_column = st.columns(
-            2,
-        )
+        left_column, right_column = st.columns(2)
         if loc:
             right_column.map(data=pd.DataFrame({"lat": [loc.latitude], "lon": [loc.longitude]}))
             right_column.write(loc)
@@ -95,4 +93,4 @@ def main() -> None:
         left_column.image(image)
 
 
-main()
+user_input_page()

src/moin_moin/frontend/_user_input.py renamed to src/moin_moin/frontend/_report_an_issue_page.py

@@ -5,8 +5,9 @@
 import streamlit as st
 
 st.set_page_config(page_title="Smart cities", layout="wide", page_icon="🏙️")
-create_page = st.Page("_user_input.py", title="Upload Issues", icon="🔧")
-overview = st.Page("_overview.py", title="Issue Tracker", icon="🗺️")
+st.title("🏡 Moin Moin")
+report_an_issue_page = st.Page("_report_an_issue_page.py", title="Report an issue", icon="🔧")
+issue_tracker_page = st.Page("_issue_tracker_page.py", title="Issue tracker", icon="🗺️")
 
-pg = st.navigation([create_page, overview])
+pg = st.navigation([report_an_issue_page, issue_tracker_page])
 pg.run()