feat([2fd88f42]): initial setup of heatmap tool

heatmap-tool/README.md

@@ -0,0 +1,16 @@
+# Heatmap Tool
+
+This directory contains a standalone web application for visualizing data from XLSX files as a heatmap on a map of Germany.
+
+## Description
+
+The application allows users to upload an XLSX file containing German postal codes (PLZ). It then aggregates the data by postal code and displays it as a heatmap, where the color and size of the markers represent the density of records. The tool automatically detects other columns in the file and creates dynamic filters, allowing users to slice the data and visualize different segments.
+
+## Getting Started
+
+To run the application, navigate to the `heatmap-tool` directory and follow the instructions in its `README.md` file.
+
+```bash
+cd heatmap-tool
+```
+Then follow the instructions in `heatmap-tool/README.md`.

heatmap-tool/backend/Dockerfile

@@ -0,0 +1,20 @@
+# Use an official Python runtime as a parent image
+FROM python:3.9-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the requirements file into the container at /app
+COPY requirements.txt .
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application's code from the host to the container at /app
+COPY . .
+
+# Expose port 8000 to the outside world
+EXPOSE 8000
+
+# Command to run the application
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

heatmap-tool/backend/main.py

@@ -0,0 +1,123 @@
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+import pandas as pd
+import io
+from pydantic import BaseModel
+from typing import Dict, List
+
+app = FastAPI()
+
+# Configure CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allows all origins
+    allow_credentials=True,
+    allow_methods=["*"],  # Allows all methods
+    allow_headers=["*"],  # Allows all headers
+)
+
+# --- In-memory Storage ---
+df_storage = None
+plz_column_name = None
+
+# --- Dummy Geocoding Data (IMPORTANT: TO BE REPLACED) ---
+# This is a tiny subset of German postal codes for demonstration purposes only.
+# A real implementation MUST load a comprehensive PLZ dataset from a file 
+# (e.g., a CSV or GeoJSON file) for the application to be useful.
+PLZ_COORDINATES = {
+    "10115": {"lat": 52.53, "lon": 13.38}, # Berlin
+    "20095": {"lat": 53.55, "lon": 9.99},  # Hamburg
+    "80331": {"lat": 48.13, "lon": 11.57}, # Munich
+    "50667": {"lat": 50.93, "lon": 6.95},  # Cologne
+    "60311": {"lat": 50.11, "lon": 8.68},  # Frankfurt
+}
+
+# --- Pydantic Models ---
+class FilterRequest(BaseModel):
+    filters: Dict[str, List[str]]
+
+# --- API Endpoints ---
+@app.get("/")
+def read_root():
+    return {"message": "Heatmap Tool Backend"}
+
+@app.post("/api/upload")
+async def upload_file(file: UploadFile = File(...)):
+    global df_storage, plz_column_name
+    if not file.filename.endswith('.xlsx'):
+        raise HTTPException(status_code=400, detail="Invalid file format. Please upload an .xlsx file.")
+
+    try:
+        contents = await file.read()
+        df = pd.read_excel(io.BytesIO(contents), dtype=str) # Read all as string to be safe
+        df.fillna('N/A', inplace=True)
+
+
+        # --- PLZ Column Detection ---
+        temp_plz_col = None
+        for col in df.columns:
+            if 'plz' in col.lower():
+                temp_plz_col = col
+                break
+        
+        if not temp_plz_col:
+            raise HTTPException(status_code=400, detail="No column with 'PLZ' found in the file.")
+
+        plz_column_name = temp_plz_col
+        # Normalize PLZ data
+        df[plz_column_name] = df[plz_column_name].str.strip().str.zfill(5)
+
+
+        # --- Dynamic Filter Detection ---
+        filters = {}
+        for col in df.columns:
+            if col != plz_column_name:
+                unique_values = df[col].unique().tolist()
+                filters[col] = sorted(unique_values)
+
+        df_storage = df
+        
+        return {"filename": file.filename, "filters": filters, "plz_column": plz_column_name}
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"An error occurred while processing the file: {e}")
+
+
+@app.post("/api/heatmap")
+async def get_heatmap_data(request: FilterRequest):
+    global df_storage, plz_column_name
+    if df_storage is None:
+        raise HTTPException(status_code=404, detail="No data available. Please upload a file first.")
+
+    try:
+        filtered_df = df_storage.copy()
+
+        # Apply filters from the request
+        for column, values in request.filters.items():
+            if values: # Only filter if there are values selected
+                filtered_df = filtered_df[filtered_df[column].isin(values)]
+
+        if filtered_df.empty:
+            return []
+
+        # Aggregate data by PLZ
+        plz_counts = filtered_df.groupby(plz_column_name).size().reset_index(name='count')
+
+        # --- Geocoding Step ---
+        # In a real app, this would be a merge/join with a proper geo dataset
+        heatmap_data = []
+        for _, row in plz_counts.iterrows():
+            plz = row[plz_column_name]
+            coords = PLZ_COORDINATES.get(plz)
+            if coords:
+                heatmap_data.append({
+                    "plz": plz,
+                    "lat": coords["lat"],
+                    "lon": coords["lon"],
+                    "count": row["count"]
+                })
+        
+        return heatmap_data
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"An error occurred while generating heatmap data: {e}")

heatmap-tool/backend/requirements.txt

@@ -0,0 +1,5 @@
+fastapi
+uvicorn[standard]
+pandas
+openpyxl
+python-multipart

heatmap-tool/docker-compose.yml

@@ -0,0 +1,17 @@
+version: '3.8'
+
+services:
+  backend:
+    build: ./backend
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./backend:/app
+
+  frontend:
+    build: ./frontend
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./frontend:/app
+      - /app/frontend/node_modules # prevent host node_modules from overwriting container

heatmap-tool/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

heatmap-tool/frontend/Dockerfile

@@ -0,0 +1,20 @@
+# Use an official Node.js runtime as a parent image
+FROM node:18-alpine
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the container
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application's code
+COPY . .
+
+# Expose the port the app runs on
+EXPOSE 5173
+
+# Command to run the development server
+CMD ["npm", "run", "dev"]

heatmap-tool/frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

heatmap-tool/frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

heatmap-tool/frontend/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Heatmap Tool</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+     crossorigin=""/>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

heatmap-tool/frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.4",
+    "leaflet": "^1.9.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-leaflet": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/leaflet": "^1.9.21",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

heatmap-tool/frontend/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

heatmap-tool/frontend/src/App.css

@@ -0,0 +1,86 @@
+/* General App Styling */
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+
+/* Layout Styling */
+.App {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  text-align: left;
+}
+
+.App-header {
+  background-color: #282c34;
+  padding: 10px 20px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.App-header h1 {
+  font-size: 1.5em;
+  margin: 0;
+}
+
+.App-main {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden; /* Prevent scrolling at the main level */
+}
+
+.control-panel {
+  width: 350px;
+  padding: 20px;
+  background-color: #333;
+  overflow-y: auto; /* Allow scrolling if filters are many */
+  flex-shrink: 0;
+  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+  z-index: 10;
+}
+
+.map-container {
+  flex-grow: 1;
+  background-color: #1e1e1e;
+  position: relative; /* Needed for loading/error overlays */
+}
+
+.map-container .error {
+  color: #ff6b6b;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.map-container p {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

heatmap-tool/frontend/src/App.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import axios from 'axios';
+import './App.css';
+import FileUpload from './components/FileUpload';
+import FilterPanel from './components/FilterPanel';
+import MapDisplay from './components/MapDisplay';
+
+// Define types for our state
+export interface FilterOptions {
+  [key: string]: string[];
+}
+
+export interface HeatmapPoint {
+  plz: string;
+  lat: number;
+  lon: number;
+  count: number;
+}
+
+function App() {
+  const [filters, setFilters] = useState<FilterOptions>({});
+  const [heatmapData, setHeatmapData] = useState<HeatmapPoint[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleUploadSuccess = (newFilters: FilterOptions) => {
+    setFilters(newFilters);
+    setHeatmapData([]); // Clear previous heatmap data
+    setError(null);
+    // Automatically fetch data with no filters on successful upload
+    handleFilterChange({});
+  };
+
+  const handleFilterChange = async (selectedFilters: FilterOptions) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await axios.post('http://localhost:8000/api/heatmap', {
+        filters: selectedFilters,
+      });
+      setHeatmapData(response.data);
+    } catch (error: any) {
+      if (axios.isAxiosError(error) && error.response) {
+        setError(`Failed to fetch heatmap data: ${error.response.data.detail || error.message}`);
+      } else {
+        setError(`Failed to fetch heatmap data: ${error.message}`);
+      }
+      setHeatmapData([]); // Clear data on error
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>German PLZ Heatmap Tool</h1>
+      </header>
+      <main className="App-main">
+        <div className="control-panel">
+          <FileUpload
+            onUploadSuccess={handleUploadSuccess}
+            setIsLoading={setIsLoading}
+            setError={setError}
+          />
+          <FilterPanel
+            filters={filters}
+            onFilterChange={handleFilterChange}
+            isLoading={isLoading}
+          />
+        </div>
+        <div className="map-container">
+          {isLoading && <p>Loading map data...</p>}
+          {error && <p className="error">{error}</p>}
+          <MapDisplay heatmapData={heatmapData} />
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default App;

heatmap-tool/frontend/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

heatmap-tool/frontend/src/components/FileUpload.tsx

@@ -0,0 +1,70 @@
+// src/components/FileUpload.tsx
+import React, { useState } from 'react';
+import axios from 'axios';
+
+interface FilterOptions {
+  [key: string]: string[];
+}
+
+interface FileUploadProps {
+  onUploadSuccess: (filters: FilterOptions) => void;
+  setIsLoading: (isLoading: boolean) => void;
+  setError: (error: string | null) => void;
+}
+
+const FileUpload: React.FC<FileUploadProps> = ({ onUploadSuccess, setIsLoading, setError }) => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      setSelectedFile(event.target.files[0]);
+    }
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!selectedFile) {
+      setError("Please select a file first.");
+      return;
+    }
+    if (!selectedFile.name.endsWith('.xlsx')) {
+        setError("Invalid file type. Please upload an .xlsx file.");
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append('file', selectedFile);
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await axios.post('http://localhost:8000/api/upload', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      onUploadSuccess(response.data.filters);
+    } catch (error: any) {
+        if (axios.isAxiosError(error) && error.response) {
+            setError(`Upload failed: ${error.response.data.detail || error.message}`);
+        } else {
+            setError(`Upload failed: ${error.message}`);
+        }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="file-upload">
+      <h3>Upload XLSX File</h3>
+      <form onSubmit={handleSubmit}>
+        <input type="file" accept=".xlsx" onChange={handleFileChange} />
+        <button type="submit" disabled={!selectedFile}>Upload</button>
+      </form>
+    </div>
+  );
+};
+
+export default FileUpload;

heatmap-tool/frontend/src/components/FilterPanel.tsx

@@ -0,0 +1,75 @@
+// src/components/FilterPanel.tsx
+import React, { useState, useEffect } from 'react';
+
+interface FilterOptions {
+  [key: string]: string[];
+}
+
+interface FilterPanelProps {
+  filters: FilterOptions;
+  onFilterChange: (selectedFilters: FilterOptions) => void;
+  isLoading: boolean;
+}
+
+const FilterPanel: React.FC<FilterPanelProps> = ({ filters, onFilterChange, isLoading }) => {
+  const [selectedFilters, setSelectedFilters] = useState<FilterOptions>({});
+
+  // Reset selected filters when a new file is uploaded (filters prop changes)
+  useEffect(() => {
+    setSelectedFilters({});
+  }, [filters]);
+
+  const handleSelectionChange = (category: string, values: string[]) => {
+    setSelectedFilters(prev => ({
+      ...prev,
+      [category]: values,
+    }));
+  };
+  
+  const handleApplyClick = () => {
+      onFilterChange(selectedFilters);
+  }
+
+  const handleResetClick = () => {
+    setSelectedFilters({});
+    onFilterChange({});
+  }
+
+  if (Object.keys(filters).length === 0) {
+    return <div>Upload a file to see filter options.</div>;
+  }
+
+  return (
+    <div className="filter-panel">
+      <h3>Filters</h3>
+      {Object.entries(filters).map(([category, options]) => (
+        <div key={category} className="filter-group">
+          <label>{category}</label>
+          <select
+            multiple
+            value={selectedFilters[category] || []}
+            onChange={(e) =>
+              handleSelectionChange(category, Array.from(e.target.selectedOptions, option => option.value))
+            }
+          >
+            {options.map(option => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+        </div>
+      ))}
+      <div className="filter-buttons">
+        <button onClick={handleApplyClick} disabled={isLoading}>
+          {isLoading ? 'Loading...' : 'Apply Filters'}
+        </button>
+        <button onClick={handleResetClick} disabled={isLoading}>
+            Reset Filters
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FilterPanel;

heatmap-tool/frontend/src/components/MapDisplay.tsx

@@ -0,0 +1,67 @@
+// src/components/MapDisplay.tsx
+import React from 'react';
+import { MapContainer, TileLayer, CircleMarker, Tooltip } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import { HeatmapPoint } from '../App'; // Assuming type is exported from App.tsx
+
+interface MapDisplayProps {
+  heatmapData: HeatmapPoint[];
+}
+
+const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData }) => {
+  const germanyCenter: [number, number] = [51.1657, 10.4515];
+
+  // Simple scaling function for marker radius
+  const calculateRadius = (count: number) => {
+    return 5 + Math.log(count + 1) * 5;
+  };
+  
+  // Simple color scaling function
+  const getColor = (count: number, maxCount: number) => {
+    const ratio = count / maxCount;
+    if (ratio > 0.8) return 'red';
+    if (ratio > 0.5) return 'orange';
+    if (ratio > 0.2) return 'yellow';
+    return 'green';
+  }
+
+  const maxCount = Math.max(...heatmapData.map(p => p.count), 1);
+
+
+  if (heatmapData.length === 0) {
+      return (
+          <div style={{ textAlign: 'center', paddingTop: '50px' }}>
+              <p>No data to display on the map.</p>
+              <p>Upload a file and apply filters to see the heatmap.</p>
+          </div>
+      );
+  }
+
+  return (
+    <MapContainer center={germanyCenter} zoom={6} style={{ height: '100%', width: '100%' }}>
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      />
+      {heatmapData.map((point, idx) => (
+        <CircleMarker
+          key={idx}
+          center={[point.lat, point.lon]}
+          radius={calculateRadius(point.count)}
+          pathOptions={{ 
+              color: getColor(point.count, maxCount),
+              fillColor: getColor(point.count, maxCount),
+              fillOpacity: 0.7
+          }}
+        >
+          <Tooltip>
+            PLZ: {point.plz} <br />
+            Count: {point.count}
+          </Tooltip>
+        </CircleMarker>
+      ))}
+    </MapContainer>
+  );
+};
+
+export default MapDisplay;

heatmap-tool/frontend/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

heatmap-tool/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

heatmap-tool/frontend/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})