Add filter panel and enhance institution filtering

Introduces a FilterPanel component to allow filtering institutions by type, region, department, commune, and name. Updates the App to use these filters for both markers and isochrones, and extends the Etablissement and Isochrone types to support richer filtering and linking. Also updates the README with project-specific information and improves ESLint config for type-aware linting.

Author: JPugetGil

README.md

@@ -1,50 +1,40 @@
-# 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/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+## Uni-Chrono
+
+Uni-Chrono is a web application for visualizing isochrones for higher-education institutions in France. It displays universities/schools on a map, and for each one a polygon representing the area reachable in X minutes for a given mode of transport.
+
+### What the application does
+
+- Fetches the list of higher-education institutions (France) from the MESR open data platform.
+- Displays each institution as a marker on a map (OpenStreetMap via Leaflet).
+- Computes and draws, for each institution, an isochrone (reachable area) based on:
+  - the selected time (in minutes),
+  - the mode of transport (walking, cycling, driving).
+- Updates the map live when you change the time or transport mode.
+- Shows a progress bar indicating how many isochrones have been computed out of the total.
+- Caches institutions and isochrones in local storage (localStorage) to speed up subsequent loads.
+- Provides a filter panel to search institutions by name, type, region, department, or commune.
+
+### Data and services used
+
+- Institutions data: dataset "fr-esr-principaux-etablissements-enseignement-superieur" (data.enseignementsup-recherche.gouv.fr), filtered to France.
+- Isochrone computation: Mapbox Isochrone API (supported profiles: walking, cycling, driving). A Mapbox token (VITE_MAPBOX_API_KEY) is required.
+- Basemap: OpenStreetMap tiles, rendered via React-Leaflet.
+
+## Start the project (How to run)
+
+Prerequisites:
+- Node.js LTS (18+ recommended)
+- A valid Mapbox token for the Isochrone API
+
+Environment setup:
+1. Create a `.env` file at the project root (or `.env.local`) and add your key: `VITE_MAPBOX_API_KEY=pk.XXXXXXXXXXXX`
+2. Check `vite.config.ts`: the field `base: '/Uni-Chrono/'` is suited for GitHub Pages deployment under the `Uni-Chrono` repo. Locally, it works as is.
+
+Install and run locally:
+1. Install dependencies: `npm install`
+2. Start the development server: `npm run dev`
+3. Open the URL printed by Vite (typically http://localhost:5173).
+
+Production build and preview:
+1. Build the project: `npm run build`
+2. Preview the build: `npm run preview`

eslint.config.js

@@ -12,6 +12,10 @@ export default tseslint.config(
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
     plugins: {
       'react-hooks': reactHooks,

index.html

@@ -4,7 +4,7 @@
     <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>Vite + React + TS</title>
+    <title>uni-labs-project</title>
   </head>
   <body>
     <div id="root"></div>

src/App.tsx

@@ -12,6 +12,7 @@ import { Isochrone } from './types/isochrone';
 import { Etablissement } from './types/etablissement';
 
 import LocalStorageCache from './LocalStorageCache';
+import FilterPanel, { Filters } from './components/FilterPanel';
 
 function App() {
   // TTL par défaut pour le cache: 24 heures
@@ -51,8 +52,10 @@ function App() {
     return cached || [];
   });
   const [controller, setController] = useState(new AbortController());
-  // Track which marker is hovered (by index)
-  const [hoveredMarkerIndex, setHoveredMarkerIndex] = useState<number | null>(null);
+  // Track which marker is hovered (by etablissementId)
+  const [hoveredEtabId, setHoveredEtabId] = useState<string | null>(null);
+  // Filters state
+  const [filters, setFilters] = useState<Filters>({});
 
   useEffect(() => {
     // Si déjà en cache, ne pas refetch
@@ -126,6 +129,7 @@ function App() {
           const isochrone: Isochrone = {
             coordinates,
             color: etablissement.color || '#000000',
+            etablissementId: etablissement.uai || `${etablissement.coordonnees.lat},${etablissement.coordonnees.lon}`,
           };
           setIsochrones((prevIsochrones) => {
             const updated = [...prevIsochrones, isochrone];
@@ -143,7 +147,17 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [etablissementsGeoJSON, timeInMinutes, transportMode]);
 
-  // Compute percentage of resolved isochrones
+  // Apply filters to etablissements
+  const filteredEtab = (etablissementsGeoJSON || []).filter(e => {
+    if (filters.type && !(e.type_d_etablissement || []).includes(filters.type)) return false;
+    if (filters.region && e.reg_nom !== filters.region) return false;
+    if (filters.departement && e.dep_nom !== filters.departement) return false;
+    if (filters.commune && e.com_nom !== filters.commune) return false;
+    if (filters.name && !e.uo_lib?.toLowerCase().includes(filters.name.toLowerCase())) return false;
+    return true;
+  });
+
+  // Compute percentage of resolved isochrones (based on all vs fetched count)
   const total = etablissementsGeoJSON?.length || 0;
   const resolved = isochrones?.length || 0;
   const percent = total > 0 ? Math.round((resolved / total) * 100) : 0;
@@ -170,9 +184,15 @@ function App() {
                   </span>
                 )}
               </div>
-              <div style={{ display: 'flex', flexDirection: 'row', gap: 4, alignItems: 'center' }}>
+              <div style={{ display: 'flex', flexDirection: 'row', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
                 <TimeSelector value={timeInMinutes} onChange={setTimeInMinutes} />
                 <TransportModeSelector value={transportMode} onChange={v => setTransportMode(v as typeof transportMode)} />
+                <FilterPanel
+                  etablissements={etablissementsGeoJSON}
+                  values={filters}
+                  onChange={setFilters}
+                  onReset={() => setFilters({})}
+                />
               </div>
             </div>
           </div>
@@ -184,31 +204,43 @@ function App() {
         style={{ flexGrow: 1 }}
       >
         {
-          etablissementsGeoJSON && etablissementsGeoJSON
-            .map((etablissement, index: number) =>
-              <Marker
-                key={index}
-                position={[etablissement.coordonnees.lat, etablissement.coordonnees.lon]}
-                title={etablissement.uo_lib}
-                alt={etablissement.uo_lib}
-                eventHandlers={{
-                  mouseover: () => setHoveredMarkerIndex(index),
-                  mouseout: () => setHoveredMarkerIndex(null),
-                }}
-              />
-            )
+          filteredEtab
+            .map((etablissement) => {
+              const etabId = etablissement.uai || `${etablissement.coordonnees.lat},${etablissement.coordonnees.lon}`;
+              return (
+                <Marker
+                  key={etabId}
+                  position={[etablissement.coordonnees.lat, etablissement.coordonnees.lon]}
+                  title={etablissement.uo_lib}
+                  alt={etablissement.uo_lib}
+                  eventHandlers={{
+                    mouseover: () => setHoveredEtabId(etabId),
+                    mouseout: () => setHoveredEtabId(null),
+                  }}
+                />
+              );
+            })
         }
         {
           isochrones && isochrones
-            .filter((_isochrone, index: number) => {
-              // If hovering, only show the linked isochrone
-              if (hoveredMarkerIndex !== null) {
-                return index === hoveredMarkerIndex;
-              }
+            .filter((iso) => {
+              // Lier aux filtres via l'identifiant d'établissement
+              const matchHover = hoveredEtabId ? iso.etablissementId === hoveredEtabId : true;
+              // Si un hover est actif, ne montrer que celui-ci
+              if (!matchHover) return false;
+              // Filtrer aussi sur les critères si possible
+              if (!etablissementsGeoJSON || !iso.etablissementId) return matchHover;
+              const e = etablissementsGeoJSON.find(x => (x.uai || `${x.coordonnees.lat},${x.coordonnees.lon}`) === iso.etablissementId);
+              if (!e) return false;
+              if (filters.type && !(e.type_d_etablissement || []).includes(filters.type)) return false;
+              if (filters.region && e.reg_nom !== filters.region) return false;
+              if (filters.departement && e.dep_nom !== filters.departement) return false;
+              if (filters.commune && e.com_nom !== filters.commune) return false;
+              if (filters.name && !e.uo_lib?.toLowerCase().includes(filters.name.toLowerCase())) return false;
               return true;
             })
             .map((isochrone: Isochrone, index: number) =>
-              <Polygon key={index} positions={isochrone.coordinates} color={isochrone.color} />
+              <Polygon key={`${isochrone.etablissementId || index}`} positions={isochrone.coordinates} color={isochrone.color} />
             )
         }
         <TileLayer

src/components/FilterPanel.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Field from '../design-system/Field';
+import Select from '../design-system/Select';
+import Button from '../design-system/Button';
+import { Etablissement } from '../types/etablissement';
+
+export type Filters = {
+  type?: string;
+  region?: string;
+  departement?: string;
+  commune?: string;
+  name?: string;
+};
+
+interface FilterPanelProps {
+  etablissements: Etablissement[] | undefined;
+  values: Filters;
+  onChange: (next: Filters) => void;
+  onReset?: () => void;
+}
+
+const uniqueSorted = (arr: (string | undefined)[]) =>
+  Array.from(new Set(arr.filter(Boolean) as string[])).sort((a, b) => a.localeCompare(b));
+
+const FilterPanel: React.FC<FilterPanelProps> = ({ etablissements, values, onChange, onReset }) => {
+  const types = uniqueSorted((etablissements || []).flatMap(e => e.type_d_etablissement || []));
+  const regions = uniqueSorted((etablissements || []).map(e => e.reg_nom));
+  const deps = uniqueSorted((etablissements || []).map(e => e.dep_nom));
+  const communes = uniqueSorted((etablissements || []).map(e => e.com_nom));
+
+  const set = (patch: Partial<Filters>) => onChange({ ...values, ...patch });
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'flex-end' }}>
+      <Select label="Type d’établissement" value={values.type || ''} onChange={(e) => set({ type: e.target.value || undefined })} style={{ minWidth: 220 }}>
+        <option value="">Tous</option>
+        {types.map(t => (
+          <option key={t} value={t}>{t}</option>
+        ))}
+      </Select>
+      <Select label="Région" value={values.region || ''} onChange={(e) => set({ region: e.target.value || undefined })} style={{ minWidth: 180 }}>
+        <option value="">Toutes</option>
+        {regions.map(r => (
+          <option key={r} value={r}>{r}</option>
+        ))}
+      </Select>
+      <Select label="Département" value={values.departement || ''} onChange={(e) => set({ departement: e.target.value || undefined })} style={{ minWidth: 180 }}>
+        <option value="">Tous</option>
+        {deps.map(d => (
+          <option key={d} value={d}>{d}</option>
+        ))}
+      </Select>
+      <Select label="Commune" value={values.commune || ''} onChange={(e) => set({ commune: e.target.value || undefined })} style={{ minWidth: 200 }}>
+        <option value="">Toutes</option>
+        {communes.map(c => (
+          <option key={c} value={c}>{c}</option>
+        ))}
+      </Select>
+      <Field label="Nom (contient)">
+        <input
+          type="text"
+          value={values.name || ''}
+          onChange={(e) => set({ name: e.target.value || undefined })}
+          placeholder="Ex: Sorbonne"
+          style={{ padding: 8, minWidth: 220 }}
+        />
+      </Field>
+      <Button variant="secondary" onClick={onReset} compact>Réinitialiser</Button>
+    </div>
+  );
+};
+
+export default FilterPanel;

src/dataGouvFetcher.tsx

@@ -4,7 +4,7 @@ const dataGouvBaseURL = "https://data.enseignementsup-recherche.gouv.fr"
 
 const etablissements = (offset: number) =>
     dataGouvBaseURL +
-    `/api/explore/v2.1/catalog/datasets/fr-esr-principaux-etablissements-enseignement-superieur/records?order_by=uai&select=coordonnees%2Ctype_d_etablissement%2Cuo_lib&limit=100&offset=${offset}&lang=fr&refine=pays_etranger_acheminement%3A%22France%22`
+    `/api/explore/v2.1/catalog/datasets/fr-esr-principaux-etablissements-enseignement-superieur/records?order_by=uai&select=coordonnees%2Ctype_d_etablissement%2Cuo_lib%2Cuai%2Creg_nom%2Cdep_nom%2Ccom_nom&limit=100&offset=${offset}&lang=fr&refine=pays_etranger_acheminement%3A%22France%22`
 
 const fetchEtablissementsData = async (offset: number): Promise<Etablissements> => {
     const response = await fetch(etablissements(offset))

src/types/etablissement.ts

@@ -10,5 +10,13 @@ export interface Etablissement {
     },
     "type_d_etablissement": string[],
     "uo_lib": string,
+    /** Identifiant UAI de l'établissement */
+    "uai"?: string,
+    /** Région (nom) */
+    "reg_nom"?: string,
+    /** Département (nom) */
+    "dep_nom"?: string,
+    /** Commune (nom) */
+    "com_nom"?: string,
     color?: string
 }

src/types/isochrone.ts

@@ -16,4 +16,9 @@ export interface Isochrone {
    * Color to display the isochrone on the map
    */
   color: string;
+
+  /**
+   * Identifiant pour relier l'isochrone à un établissement (UAI ou fallback)
+   */
+  etablissementId?: string;
 }