Skip to content

Commit ed90564

Browse files
sabmansabman
committed
feat: add collapsible attribution overlay to all task pages
1 parent 2b4ed1a commit ed90564

File tree

17 files changed

+109
-90
lines changed

17 files changed

+109
-90
lines changed

‎examples/live-examples-nextjs/src/app/tasks/building-detection/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
DetectionControls,
1010
BackgroundEffects,
1111
ExportButton,
12-
TaskDownloadProgress
12+
TaskDownloadProgress,
13+
CollapsibleAttribution
1314
} from "../../../components";
1415
import { MapUtils } from "../../../utils/mapUtils";
1516
import { createBaseMapStyle } from "../../../utils/mapStyleUtils";
@@ -294,11 +295,7 @@ export default function BuildingDetection() {
294295
<div className="absolute top-4 right-4 w-20 h-20 border-t-2 border-r-2 border-green-400/40 rounded-tr-lg"></div>
295296
<div className="absolute bottom-4 left-4 w-20 h-20 border-b-2 border-l-2 border-emerald-400/40 rounded-bl-lg"></div>
296297

297-
<div className="absolute bottom-6 left-6 z-40 text-xs text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1">
298-
<span>
299-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
300-
</span>
301-
</div>
298+
<CollapsibleAttribution position="bottom-left" />
302299
</div>
303300
</main>
304301
);

‎examples/live-examples-nextjs/src/app/tasks/building-footprint-segmentation/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
DetectionControls,
1010
BackgroundEffects,
1111
ExportButton,
12-
TaskDownloadProgress
12+
TaskDownloadProgress,
13+
CollapsibleAttribution
1314
} from "../../../components";
1415
import { MapUtils } from "../../../utils/mapUtils";
1516
import { createBaseMapStyle } from "../../../utils/mapStyleUtils";
@@ -297,11 +298,7 @@ export default function BuildingFootPrintSegmentation() {
297298
<div className="absolute top-4 right-4 w-20 h-20 border-t-2 border-r-2 border-green-400/40 rounded-tr-lg"></div>
298299
<div className="absolute bottom-4 left-4 w-20 h-20 border-b-2 border-l-2 border-emerald-400/40 rounded-bl-lg"></div>
299300

300-
<div className="absolute bottom-6 left-6 z-40 text-xs text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1">
301-
<span>
302-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
303-
</span>
304-
</div>
301+
<CollapsibleAttribution position="bottom-left" />
305302
</div>
306303
</main>
307304
);

‎examples/live-examples-nextjs/src/app/tasks/car-detection/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
DetectionControls,
99
BackgroundEffects,
1010
ExportButton,
11-
TaskDownloadProgress
11+
TaskDownloadProgress,
12+
CollapsibleAttribution
1213
} from "../../../components";
1314
import { MapUtils } from "../../../utils/mapUtils";
1415
import { createBaseMapStyle } from "../../../utils/mapStyleUtils";
@@ -301,11 +302,7 @@ export default function CarDetection() {
301302
<div className="absolute top-4 right-4 w-20 h-20 border-t-2 border-r-2 border-green-400/40 rounded-tr-lg"></div>
302303
<div className="absolute bottom-4 left-4 w-20 h-20 border-b-2 border-l-2 border-emerald-400/40 rounded-bl-lg"></div>
303304

304-
<div className="absolute bottom-6 left-6 z-40 text-xs text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1">
305-
<span>
306-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
307-
</span>
308-
</div>
305+
<CollapsibleAttribution position="bottom-left" />
309306
</div>
310307
</main>
311308
);

‎examples/live-examples-nextjs/src/app/tasks/embedding-similarity-search/page.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useGeoAIWorker } from "../../../hooks/useGeoAIWorker";
99
import { ESRI_CONFIG, GEOBASE_CONFIG, MAPBOX_CONFIG } from "../../../config";
1010
import { MapProvider } from "../../../types"
1111
import { createBaseMapStyle } from "../../../utils/mapStyleUtils";
12+
import { CollapsibleAttribution } from "../../../components";
1213

1314

1415
GEOBASE_CONFIG.cogImagery = "https://huggingface.co/datasets/geobase/geoai-cogs/resolve/main/mask-generation.tif"
@@ -1909,11 +1910,7 @@ export default function EmbeddingSimilaritySearch() {
19091910
<div className="flex-1 relative">
19101911
<div ref={mapContainer} className="w-full h-full" />
19111912

1912-
<div className="absolute bottom-6 left-6 z-40 text-xs text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1">
1913-
<span>
1914-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
1915-
</span>
1916-
</div>
1913+
<CollapsibleAttribution position="bottom-left" />
19171914
</div>
19181915
</div>
19191916
);

‎examples/live-examples-nextjs/src/app/tasks/image-feature-extraction/page.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import {
1919
LoadingMessage,
2020
CornerDecorations,
2121
MapProviderSelectorWrapper,
22-
InitialButtons
22+
InitialButtons,
23+
CollapsibleAttribution
2324
} from "../../../components";
2425
import { MapUtils } from "../../../utils/mapUtils";
2526
import { createImageFeatureExtractionMapStyle } from "../../../utils/mapStyleUtils";
@@ -721,12 +722,8 @@ export default function ImageFeatureExtraction() {
721722
</div>
722723
)}
723724

724-
{/* Imagery attribution (general) */}
725-
<div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 z-40 text-[12px] text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1 max-w-2xl text-center whitespace-normal">
726-
<span>
727-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
728-
</span>
729-
</div>
725+
{/* Collapsible Imagery attribution */}
726+
<CollapsibleAttribution position="bottom-center" />
730727

731728
{/* Corner decorations */}
732729
<CornerDecorations />

‎examples/live-examples-nextjs/src/app/tasks/land-cover-classification/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
DetectionControls,
1010
BackgroundEffects,
1111
ExportButton,
12-
TaskDownloadProgress
12+
TaskDownloadProgress,
13+
CollapsibleAttribution
1314
} from "../../../components";
1415
import { MapUtils } from "../../../utils/mapUtils";
1516
import { createBaseMapStyle } from "../../../utils/mapStyleUtils";
@@ -485,11 +486,7 @@ export default function LandCoverClassification() {
485486
<div className="absolute top-4 right-4 w-20 h-20 border-t-2 border-r-2 border-green-400/40 rounded-tr-lg"></div>
486487
<div className="absolute bottom-4 left-4 w-20 h-20 border-b-2 border-l-2 border-emerald-400/40 rounded-bl-lg"></div>
487488

488-
<div className="absolute bottom-6 left-6 z-40 text-xs text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1">
489-
<span>
490-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
491-
</span>
492-
</div>
489+
<CollapsibleAttribution position="bottom-left" />
493490
</div>
494491
</main>
495492
);

‎examples/live-examples-nextjs/src/app/tasks/mask-generation/page.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type { StyleSpecification } from "maplibre-gl";
77
import { useGeoAIWorker } from "../../../hooks/useGeoAIWorker";
88
import { ESRI_CONFIG, GEOBASE_CONFIG, MAPBOX_CONFIG } from "../../../config";
99
import { MapProvider } from "../../../types"
10-
import { BackgroundEffects, ExportButton, GlassmorphismCard, GradientButton, MapProviderSelector, StatusMessage, ZoomSlider, TaskDownloadProgress } from "@/components";
10+
import { BackgroundEffects, ExportButton, GlassmorphismCard, GradientButton, MapProviderSelector, StatusMessage, ZoomSlider, TaskDownloadProgress, CollapsibleAttribution } from "@/components";
1111
import { ClearPoint, PlayIcon, PlusIcon, ResetIcon } from "@/components/DetectionControls";
1212
import { MapUtils } from "../../../utils/mapUtils";
1313
import { createBaseMapStyle } from "../../../utils/mapStyleUtils";
@@ -575,11 +575,7 @@ export default function MaskGeneration() {
575575
{/* Corner decorations */}
576576
<div className="absolute top-4 right-4 w-20 h-20 border-t-2 border-r-2 border-green-400/40 rounded-tr-lg"></div>
577577
<div className="absolute bottom-4 left-4 w-20 h-20 border-b-2 border-l-2 border-emerald-400/40 rounded-bl-lg"></div>
578-
<div className="absolute bottom-6 left-6 z-40 text-xs text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1">
579-
<span>
580-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
581-
</span>
582-
</div>
578+
<CollapsibleAttribution position="bottom-left" />
583579
</div>
584580
</main>
585581
);

‎examples/live-examples-nextjs/src/app/tasks/object-detection/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
DetectionControls,
1010
BackgroundEffects,
1111
ExportButton,
12-
TaskDownloadProgress
12+
TaskDownloadProgress,
13+
CollapsibleAttribution
1314
} from "../../../components";
1415
import { MapUtils } from "../../../utils/mapUtils";
1516
import { createBaseMapStyle } from "../../../utils/mapStyleUtils";
@@ -306,11 +307,7 @@ export default function ObjectDetection() {
306307
{/* Corner decorations */}
307308
<div className="absolute top-4 right-4 w-20 h-20 border-t-2 border-r-2 border-green-400/40 rounded-tr-lg"></div>
308309
<div className="absolute bottom-4 left-4 w-20 h-20 border-b-2 border-l-2 border-emerald-400/40 rounded-bl-lg"></div>
309-
<div className="absolute bottom-6 left-6 z-40 text-xs text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1">
310-
<span>
311-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
312-
</span>
313-
</div>
310+
<CollapsibleAttribution position="bottom-left" />
314311
</div>
315312
</main>
316313
);

‎examples/live-examples-nextjs/src/app/tasks/oil-storage-tank-detection/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
DetectionControls,
1010
BackgroundEffects,
1111
ExportButton,
12-
TaskDownloadProgress
12+
TaskDownloadProgress,
13+
CollapsibleAttribution
1314
} from "../../../components";
1415
import { MapUtils } from "../../../utils/mapUtils";
1516
import { createBaseMapStyle } from "../../../utils/mapStyleUtils";
@@ -305,11 +306,7 @@ export default function OilStorageTankDetection() {
305306
<div className="absolute top-4 right-4 w-20 h-20 border-t-2 border-r-2 border-green-400/40 rounded-tr-lg"></div>
306307
<div className="absolute bottom-4 left-4 w-20 h-20 border-b-2 border-l-2 border-emerald-400/40 rounded-bl-lg"></div>
307308

308-
<div className="absolute bottom-6 left-6 z-40 text-xs text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1">
309-
<span>
310-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
311-
</span>
312-
</div>
309+
<CollapsibleAttribution position="bottom-left" />
313310
</div>
314311
</main>
315312
);

‎examples/live-examples-nextjs/src/app/tasks/oriented-object-detection/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
DetectionControls,
1010
BackgroundEffects,
1111
ExportButton,
12-
TaskDownloadProgress
12+
TaskDownloadProgress,
13+
CollapsibleAttribution
1314
} from "../../../components";
1415
import { MapUtils } from "../../../utils/mapUtils";
1516
import { createBaseMapStyle } from "../../../utils/mapStyleUtils";
@@ -297,11 +298,7 @@ export default function OrientedObjectDetection() {
297298
<div className="absolute top-4 right-4 w-20 h-20 border-t-2 border-r-2 border-green-400/40 rounded-tr-lg"></div>
298299
<div className="absolute bottom-4 left-4 w-20 h-20 border-b-2 border-l-2 border-emerald-400/40 rounded-bl-lg"></div>
299300

300-
<div className="absolute bottom-6 left-6 z-40 text-xs text-white bg-black/60 backdrop-blur-sm rounded px-3 py-1">
301-
<span>
302-
Imagery: <a href="https://geobase.app/" target="_blank" rel="noreferrer" className="underline">Geobase</a>, <a href="https://opengeoai.org/" target="_blank" rel="noreferrer" className="underline">geoai</a>, <a href="https://www.mapbox.com/" target="_blank" rel="noreferrer" className="underline">Mapbox</a>, <a href="https://www.esri.com/" target="_blank" rel="noreferrer" className="underline">ESRI</a>, <a href="https://openaerialmap.org" target="_blank" rel="noreferrer" className="underline">OpenAerialMap</a> and <a href="https://www.openstreetmap.org" target="_blank" rel="noreferrer" className="underline">OpenStreetMap</a>
303-
</span>
304-
</div>
301+
<CollapsibleAttribution position="bottom-left" />
305302
</div>
306303
</main>
307304
);

0 commit comments

Comments
 (0)