image type filter bar

docker-compose.yml

@@ -9,7 +9,7 @@ services:
       POSTGRES_PASSWORD: promptaid
       POSTGRES_DB: promptaid
     ports:
-      - "5434:5432"  # Changed from 5433 to avoid conflict
+      - "5434:5432" 
     volumes:
       - pgdata:/var/lib/postgresql/data
 
@@ -39,11 +39,7 @@ services:
       - minio_data:/data
     depends_on:
       - postgres
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
-      interval: 30s
-      timeout: 20s
-      retries: 3
+
 
   app:
     build: .
@@ -55,10 +51,8 @@ services:
       - DATABASE_URL=postgresql://promptaid:promptaid@postgres:5432/promptaid
       - S3_ENDPOINT=http://minio:9000  # Override for container networking
     depends_on:
-      postgres:
-        condition: service_healthy
-      minio:
-        condition: service_healthy
+      - postgres
+      - minio
     volumes:
       - ./py_backend:/app
       - /app/__pycache__

frontend/src/pages/ExplorePage/ExplorePage.tsx

@@ -1,4 +1,4 @@
-import { PageContainer, TextInput, SelectInput, MultiSelectInput, Container, SegmentInput, Spinner } from '@ifrc-go/ui';
+import { PageContainer, TextInput, SelectInput, MultiSelectInput, Container, SegmentInput, Spinner, Button } from '@ifrc-go/ui';
 import { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styles from './ExplorePage.module.css';
@@ -36,6 +36,7 @@ export default function ExplorePage() {
   const [catFilter, setCatFilter] = useState('');
   const [regionFilter, setRegionFilter] = useState('');
   const [countryFilter, setCountryFilter] = useState('');
+  const [imageTypeFilter, setImageTypeFilter] = useState('');
   const [sources, setSources] = useState<{s_code: string, label: string}[]>([]);
   const [types, setTypes] = useState<{t_code: string, label: string}[]>([]);
   const [regions, setRegions] = useState<{r_code: string, label: string}[]>([]);
@@ -145,10 +146,11 @@ export default function ExplorePage() {
         c.countries.some(country => country.r_code === regionFilter);
       const matchesCountry = !countryFilter || 
         c.countries.some(country => country.c_code === countryFilter);
+      const matchesImageType = !imageTypeFilter || c.image_type === imageTypeFilter;
       
-      return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry;
+      return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType;
     });
-  }, [captions, search, srcFilter, catFilter, regionFilter, countryFilter]);
+  }, [captions, search, srcFilter, catFilter, regionFilter, countryFilter, imageTypeFilter]);
 
 
   return (
@@ -246,6 +248,20 @@ export default function ExplorePage() {
                     disabled={isLoadingFilters}
                   />
                 </Container>
+
+                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+                  <SelectInput
+                    name="imageType"
+                    placeholder={isLoadingFilters ? "Loading..." : "All Image Types"}
+                    options={imageTypes}
+                    value={imageTypeFilter || null}
+                    onChange={(v) => setImageTypeFilter(v as string || '')}
+                    keySelector={(o) => o.image_type}
+                    labelSelector={(o) => o.label}
+                    required={false}
+                    disabled={isLoadingFilters}
+                  />
+                </Container>
               </div>
             </div>
 
@@ -255,6 +271,20 @@ export default function ExplorePage() {
                 <p className="text-sm text-gray-600">
                   {filtered.length} of {captions.length} examples
                 </p>
+                <Button
+                  name="clear-filters"
+                  variant="secondary"
+                  onClick={() => {
+                    setSearch('');
+                    setSrcFilter('');
+                    setCatFilter('');
+                    setRegionFilter('');
+                    setCountryFilter('');
+                    setImageTypeFilter('');
+                  }}
+                >
+                  Clear Filters
+                </Button>
               </div>
 
               {/* Loading State */}

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -55,6 +55,7 @@ export default function MapDetailPage() {
   const [catFilter, setCatFilter] = useState('');
   const [regionFilter, setRegionFilter] = useState('');
   const [countryFilter, setCountryFilter] = useState('');
+  const [imageTypeFilter, setImageTypeFilter] = useState('');
 
   const viewOptions = [
     { key: 'explore' as const, label: 'Explore' },
@@ -164,9 +165,10 @@ export default function MapDetailPage() {
       map.countries.some(country => country.r_code === regionFilter);
     const matchesCountry = !countryFilter || 
       map.countries.some(country => country.c_code === countryFilter);
+    const matchesImageType = !imageTypeFilter || map.image_type === imageTypeFilter;
     
-    return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry ? map : null;
-  }, [map, search, srcFilter, catFilter, regionFilter, countryFilter]);
+    return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry && matchesImageType ? map : null;
+  }, [map, search, srcFilter, catFilter, regionFilter, countryFilter, imageTypeFilter]);
 
   const handleContribute = async () => {
     if (!map) return;
@@ -346,6 +348,19 @@ export default function MapDetailPage() {
                 labelSelector={(o) => o.label}
               />
             </Container>
+
+            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+              <SelectInput
+                name="imageType"
+                placeholder="All Image Types"
+                options={imageTypes}
+                value={imageTypeFilter || null}
+                onChange={(v) => setImageTypeFilter(v as string || '')}
+                keySelector={(o) => o.image_type}
+                labelSelector={(o) => o.label}
+                required={false}
+              />
+            </Container>
           </div>
         </div>
 
@@ -461,7 +476,14 @@ export default function MapDetailPage() {
                           onClick={handleContribute}
                           disabled={isGenerating}
                         >
-                          {isGenerating ? 'Generating...' : 'Contribute'}
+                          {isGenerating ? (
+                            <div className="flex items-center gap-2">
+                              <Spinner className="text-white" />
+                              <span>Generating...</span>
+                            </div>
+                          ) : (
+                            'Contribute'
+                          )}
                         </Button>
                       </Container>
                       
@@ -506,6 +528,7 @@ export default function MapDetailPage() {
                       setCatFilter('');
                       setRegionFilter('');
                       setCountryFilter('');
+                      setImageTypeFilter('');
                     }}
                   >
                     Clear Filters