+
= Number(map?.getMaxZoom())}
icon="+"
+ rounded={rounded}
/>
@@ -52,6 +65,7 @@ export const ZoomControls = ({ map }: { map: Map | null }) => {
onClick={handleZoomOut}
disabled={currentZoom <= Number(map?.getMinZoom())}
icon="-"
+ rounded={rounded}
/>
diff --git a/frontend/src/components/map/layers/tile-boundaries.tsx b/frontend/src/components/map/layers/tile-boundaries.tsx
index bed68facf..4f5ddbe92 100644
--- a/frontend/src/components/map/layers/tile-boundaries.tsx
+++ b/frontend/src/components/map/layers/tile-boundaries.tsx
@@ -5,8 +5,9 @@ import { TILE_BOUNDARY_LAYER_ID, TILE_BOUNDARY_SOURCE_ID } from "@/config";
import { useCallback, useEffect } from "react";
export const TileBoundaries = ({ map }: { map: Map | null }) => {
- useEffect(() => {
+ const ensureTileBoundaryLayer = useCallback(() => {
if (!map || !map.getStyle()) return;
+
if (!map.getSource(TILE_BOUNDARY_SOURCE_ID)) {
map.addSource(TILE_BOUNDARY_SOURCE_ID, {
type: "geojson",
@@ -21,39 +22,58 @@ export const TileBoundaries = ({ map }: { map: Map | null }) => {
source: TILE_BOUNDARY_SOURCE_ID,
paint: {
"line-color": "#FFF",
- "line-width": 0.5,
+ "line-opacity": 0.3,
+ "line-width": [
+ "interpolate",
+ ["linear"],
+ ["zoom"],
+ 16,
+ 0.8,
+ 20,
+ 1.2,
+ 22,
+ 1.5,
+ ],
},
layout: { visibility: "visible" },
});
- // It should be moved to the top of the layer stack.
- map.moveLayer(TILE_BOUNDARY_LAYER_ID);
}
+
+ // Keep tile boundaries above newly added layers.
+ map.moveLayer(TILE_BOUNDARY_LAYER_ID);
}, [map]);
+ useEffect(() => {
+ ensureTileBoundaryLayer();
+ }, [ensureTileBoundaryLayer]);
+
const updateTileBoundary = useCallback(() => {
- if (map && map.getStyle()) {
- if (map.getSource(TILE_BOUNDARY_SOURCE_ID)) {
- const tileBoundaries = getTileBoundariesGeoJSON(
- map,
- // There is a mismatch of 1 in the mag.getZoom() results and the actual zoom level of the map.
- // Adding 1 to the result resolves it.
- Math.round(map.getZoom() + 1),
- );
- const source = map.getSource(TILE_BOUNDARY_SOURCE_ID) as GeoJSONSource;
- source.setData(tileBoundaries as GeoJSONType);
- }
+ if (!map || !map.getStyle()) return;
+
+ ensureTileBoundaryLayer();
+
+ if (map.getSource(TILE_BOUNDARY_SOURCE_ID)) {
+ const tileBoundaries = getTileBoundariesGeoJSON(
+ map,
+ Math.max(0, Math.floor(map.getZoom())),
+ );
+ const source = map.getSource(TILE_BOUNDARY_SOURCE_ID) as GeoJSONSource;
+ source.setData(tileBoundaries as GeoJSONType);
}
- }, [map]);
+ }, [map, ensureTileBoundaryLayer]);
useEffect(() => {
- if (map && map.getStyle()) {
- map.on("moveend", updateTileBoundary);
- }
+ if (!map) return;
+
+ updateTileBoundary();
+ map.on("move", updateTileBoundary);
+ map.on("zoom", updateTileBoundary);
+ map.on("styledata", updateTileBoundary);
return () => {
- if (map && map.getStyle()) {
- map.off("moveend", updateTileBoundary);
- }
+ map.off("move", updateTileBoundary);
+ map.off("zoom", updateTileBoundary);
+ map.off("styledata", updateTileBoundary);
};
}, [map, updateTileBoundary]);
diff --git a/frontend/src/components/map/map.tsx b/frontend/src/components/map/map.tsx
index 8bcc6106b..664f3a9b5 100644
--- a/frontend/src/components/map/map.tsx
+++ b/frontend/src/components/map/map.tsx
@@ -39,6 +39,8 @@ type MapComponentProps = {
zoomControls?: boolean;
tileServiceURL?: string;
hasTileServiceLayer?: boolean;
+ /** Override the default fitBounds-to-imagery behavior when tileJSON loads. */
+ onTileServiceFitToBounds?: () => void;
};
export const MapComponent: React.FC
= ({
@@ -57,6 +59,7 @@ export const MapComponent: React.FC = ({
zoomControls = true,
tileServiceURL,
hasTileServiceLayer = false,
+ onTileServiceFitToBounds,
}) => {
return (
@@ -95,7 +98,11 @@ export const MapComponent: React.FC
= ({
{/* Order according to how they'll be rendered */}
{basemaps && }
{tileServiceURL && (
-
+
)}
{children}
{showTileBoundaries && }
diff --git a/frontend/src/components/shared/markdown-render.tsx b/frontend/src/components/shared/markdown-render.tsx
new file mode 100644
index 000000000..4525ad63c
--- /dev/null
+++ b/frontend/src/components/shared/markdown-render.tsx
@@ -0,0 +1,20 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+type MarkdownViewerProps = {
+ content: string;
+ className?: string;
+};
+
+const MarkdownViewer: React.FC = ({
+ content,
+ className = "",
+}) => {
+ return (
+
+ {content}
+
+ );
+};
+
+export default MarkdownViewer;
diff --git a/frontend/src/components/ui/button/button.css b/frontend/src/components/ui/button/button.css
index b3a44c966..693711b47 100644
--- a/frontend/src/components/ui/button/button.css
+++ b/frontend/src/components/ui/button/button.css
@@ -55,3 +55,7 @@ sl-button.primary::part(base):hover {
font-size: var(--hot-fair-font-size-body-text-2base);
}
}
+
+sl-button.rounded::part(base) {
+ border-radius: 8px;
+}
diff --git a/frontend/src/components/ui/button/button.tsx b/frontend/src/components/ui/button/button.tsx
index e3ec17801..1f8b96250 100644
--- a/frontend/src/components/ui/button/button.tsx
+++ b/frontend/src/components/ui/button/button.tsx
@@ -15,9 +15,11 @@ type ButtonProps = {
size?: ButtonSize;
disabled?: boolean;
slot?: string;
- uppercase?: boolean;
+ rounded?: boolean;
type?: "button" | "submit";
contentClassName?: string;
+ fontSize?: React.CSSProperties["fontSize"];
+ capitalize?: boolean;
};
const Button: React.FC = ({
children,
@@ -26,11 +28,13 @@ const Button: React.FC = ({
onClick,
spinner = false,
disabled = false,
- uppercase = true,
size,
slot,
+ rounded = false,
type = "button",
contentClassName,
+ capitalize = true,
+ fontSize,
}) => {
const spinnerColor = variant === "primary" ? "white" : "red";
const trackColor = variant === "primary" ? "red" : "white";
@@ -40,7 +44,9 @@ const Button: React.FC = ({
//@ts-expect-error bad type definition
variant={variant}
size={size ? size : isMobile ? "medium" : "large"}
- className={cn(`button ${variant} ${className} `)}
+ className={cn(
+ `button ${variant} ${rounded ? "rounded" : ""} ${className} `,
+ )}
style={{ width: "100%" }}
//@ts-expect-error bad type definition
onClick={onClick}
@@ -50,8 +56,9 @@ const Button: React.FC = ({
>
{children}
{spinner && (
diff --git a/frontend/src/components/ui/button/icon-button.tsx b/frontend/src/components/ui/button/icon-button.tsx
index f7e873465..cdeb8e464 100644
--- a/frontend/src/components/ui/button/icon-button.tsx
+++ b/frontend/src/components/ui/button/icon-button.tsx
@@ -14,7 +14,7 @@ type ButtonWithIconProps = {
iconClassName?: string;
disabled?: boolean;
size?: ButtonSize;
- uppercase?: boolean;
+
contentClassName?: string;
};
const ButtonWithIcon: React.FC
= ({
@@ -27,7 +27,6 @@ const ButtonWithIcon: React.FC = ({
iconClassName,
disabled,
size,
- uppercase,
textClassName,
contentClassName,
}) => {
@@ -39,7 +38,6 @@ const ButtonWithIcon: React.FC = ({
className={className}
disabled={disabled}
size={size}
- uppercase={uppercase}
contentClassName={contentClassName}
>
{PrefixIcon && }
diff --git a/frontend/src/components/ui/drawer/mobile-drawer.tsx b/frontend/src/components/ui/drawer/mobile-drawer.tsx
index 62cfe1891..7f53b4a4e 100644
--- a/frontend/src/components/ui/drawer/mobile-drawer.tsx
+++ b/frontend/src/components/ui/drawer/mobile-drawer.tsx
@@ -9,6 +9,9 @@ export const MobileDrawer = ({
canClose = false,
closeDrawer,
snapPoints = [0.2, 0.5, 0.8],
+ modal = true,
+ showOverlay = true,
+ handleOnly = false,
}: {
open: boolean;
children: React.ReactNode;
@@ -16,7 +19,10 @@ export const MobileDrawer = ({
closeDrawer?: () => void;
canClose?: boolean;
startingSnapPoint?: number | string;
- snapPoints?: number[];
+ snapPoints?: (number | string)[];
+ modal?: boolean;
+ showOverlay?: boolean;
+ handleOnly?: boolean;
}) => {
const [snap, setSnap] = useState(snapPoints[0]);
const lastSnapPoint = snapPoints[snapPoints.length - 1];
@@ -29,8 +35,12 @@ export const MobileDrawer = ({
open={open}
onClose={closeDrawer}
repositionInputs={false}
+ modal={modal}
+ handleOnly={handleOnly}
>
-
+ {showOverlay ? (
+
+ ) : null}
{dialogTitle}
{dialogTitle}
-
+
{children}
+ {/* Card header */}
+
+
+
+ {title}
+
+ e.stopPropagation()}
+ className="rounded-lg px-2 items-center flex shrink-0"
+ >
+
+
+ }
+ className="text-left"
+ distance={10}
+ placement={DropdownPlacement.BOTTOM_END}
+ menuItems={[
+ {
+ name: "Download Results",
+ value: "Download Results",
+ subMenuItems: [
+ {
+ name: "As Points",
+ value: "As Points",
+ onClick: () => {
+ const downloadUrl =
+ BASE_API_URL +
+ API_ENDPOINTS.DOWNLOAD_PREDICTION_RESULTS_POINTS_LABELS_FILE_(
+ prediction.id,
+ prediction.config.folder,
+ );
+ window.open(downloadUrl, "_blank");
+ },
+ },
+ {
+ name: "As Polygons",
+ value: "As Polygons",
+ onClick: () => {
+ const downloadUrl =
+ BASE_API_URL +
+ API_ENDPOINTS.DOWNLOAD_PREDICTION_LABELS_FILE(
+ prediction.id,
+ prediction.config.folder,
+ );
+ window.open(downloadUrl, "_blank");
+ },
+ },
+ ],
+ },
+ {
+ name: "View Results",
+ value: "View Results",
+ onClick: () => onViewResults(prediction),
+ },
+ {
+ name: "Copy Result Link",
+ value: "Copy Result Link",
+ onClick: async () => {
+ await copyToClipboard(
+ BASE_API_URL +
+ API_ENDPOINTS.DOWNLOAD_PREDICTION_LABELS_FILE(
+ prediction.id,
+ prediction.config.folder,
+ ),
+ );
+ showSuccessToast("Copied results link to clipboard!");
+ },
+ },
+ ...(prediction.mapswipe_id
+ ? [
+ {
+ name: "View MapSwipe Project",
+ value: "View MapSwipe Project",
+ onClick: () => onViewDetails(prediction),
+ },
+ ]
+ : []),
+ {
+ name: "Copy Imagery Link",
+ value: "Copy Imagery Link",
+ onClick: async () => {
+ await copyToClipboard(prediction.config.source);
+ showSuccessToast("Copied imagery link to clipboard!");
+ },
+ },
+ {
+ name: "Details",
+ value: "Details",
+ onClick: (e) => {
+ e.stopPropagation();
+ handleDetailsInfo();
+ },
+ },
+ ]}
+ />
+
+
+
+ ID: {prediction.id}
+
+
+ onViewDetails(prediction)}
+ />
+
+
+
+ {/* Card body */}
+
+
+
+
Model Used:
+
+ {prediction.model_name ?? prediction.config.model_name}
+
+
+
+
+ Date Published:{" "}
+
+ {prediction.published_at
+ ? formatDate(
+ extractDatePart(prediction.published_at as string),
+ )
+ : "-"}
+
+
+
+
+
+
+
+
+
+ Date Published: {publishedDate}
+
+
+ Created by: {createdBy}
+
+
+ Prediction Count:{" "}
+ {formatNumber(featureCount)}
+
+
+ Model Used: {modelUsed}
+
+
+
+ );
+};
diff --git a/frontend/src/features/ai-predictions/components/ai-predictions-filters.tsx b/frontend/src/features/ai-predictions/components/ai-predictions-filters.tsx
new file mode 100644
index 000000000..e6e21e3c3
--- /dev/null
+++ b/frontend/src/features/ai-predictions/components/ai-predictions-filters.tsx
@@ -0,0 +1,177 @@
+import { Input } from "@/components/ui/form";
+import { CategoryIcon, ListIcon, SearchIcon } from "@/components/ui/icons";
+import { DropDown } from "@/components/ui/dropdown";
+import { ChevronDownIcon } from "@/components/ui/icons";
+import { LayoutView, SHOELACE_SIZES } from "@/enums";
+import { ClearFilters, PAGE_LIMIT } from "@/components/shared";
+import { ORDERING_OPTIONS } from "@/features/ai-predictions/hooks/use-ai-predictions";
+import { ToolTip } from "@/components/ui/tooltip";
+import ShowMapToggle from "@/components/shared/show-map-toggle";
+import { SEARCH_PARAMS } from "@/utils/search-params";
+import { TQueryParams } from "@/types";
+
+type AIPredictionsFiltersProps = {
+ search: string;
+ onSearchChange: (value: string) => void;
+ ordering: string;
+ onOrderingChange: (value: string) => void;
+ layout?: string;
+ onLayoutChange: (value: string) => void;
+ totalCount: number;
+ offset: number;
+ query: TQueryParams;
+ hasNextPage: boolean;
+ clearAllFilters: () => void;
+ hasPrevPage: boolean;
+ onMapViewChange: (value: boolean) => void;
+ onNextPage: () => void;
+ onPrevPage: () => void;
+ mapViewIsActive: boolean;
+ isPlaceholderData: boolean;
+};
+
+export const AIPredictionsFilters = ({
+ search,
+ onSearchChange,
+ ordering,
+ onOrderingChange,
+ totalCount,
+ offset,
+ hasNextPage,
+ hasPrevPage,
+ clearAllFilters,
+ onNextPage,
+ layout,
+ onLayoutChange,
+ onPrevPage,
+ isPlaceholderData,
+ onMapViewChange,
+ mapViewIsActive,
+ query,
+}: AIPredictionsFiltersProps) => {
+ const orderingMenuItems = ORDERING_OPTIONS.map((opt) => ({
+ value: opt.label,
+ apiValue: opt.value,
+ }));
+ const isGridView = layout === LayoutView.GRID;
+
+ const selectedOrderingLabel =
+ ORDERING_OPTIONS.find((o) => o.value === ordering)?.label ?? "Sort by";
+ const mapToggleQuery: TQueryParams = {
+ [SEARCH_PARAMS.layout]: layout,
+ [SEARCH_PARAMS.mapIsActive]: mapViewIsActive,
+ };
+ const endIndex =
+ offset + PAGE_LIMIT < totalCount ? offset + PAGE_LIMIT : totalCount;
+
+ return (
+
+ {/* Search bar row */}
+
+
+
+ ) =>
+ onSearchChange(e.target.value)
+ }
+ value={search}
+ placeholder="Search"
+ className="w-full outline-none border-none focus:outline-none focus:ring-0"
+ size={SHOELACE_SIZES.MEDIUM}
+ disableOutline
+ />
+
+
+
+
+ {/* Count, sort, pagination, layout row */}
+
+
+ {totalCount} Prediction{totalCount !== 1 ? "s" : ""}
+
+
+
+
+ {/* Sort */}
+
{
+ const opt = ORDERING_OPTIONS.find(
+ (o) => o.label === selectedLabel,
+ );
+ if (opt) onOrderingChange(opt.value);
+ }}
+ withCheckbox
+ defaultSelectedItem={selectedOrderingLabel}
+ triggerComponent={
+
+ Sort by
+
+ }
+ />
+
+
+ {
+ onMapViewChange(Boolean(params[SEARCH_PARAMS.mapIsActive]));
+ }}
+ />
+
+ {/* Layout toggle */}
+
+
+
+
+
+
+ {/* Pagination */}
+
+
+
+ {totalCount > 0 ? offset + 1 : 0}-{endIndex}
+ {" "}
+ of {totalCount}
+
+
+
+
+
+
+
+ {Array.from({ length: 12 }).map((_, index) => (
+
+ ))}
+
+
+ Error loading AI predictions.
+
+
+
+
+
No AI predictions found.
+
+ {data.map((prediction) => (
+
+ ))}
+
+ {Array.from({ length: 8 }).map((_, index) => (
+
+ ))}
+
+
+ Error loading AI predictions.
+
+
+
+
+
No AI predictions found.
+
+
+
+
+ | Name |
+ ID |
+ Features |
+ Model |
+ Published |
+ Actions |
+
+
+
+ {data.map((prediction) => {
+ const title =
+ prediction.description || `Prediction ${prediction.id}`;
+ return (
+ onViewDetails(prediction)}
+ data-testid={`published-prediction-row-${prediction.id}`}
+ >
+ |
+ {title}
+ |
+
+
+ {prediction.id}
+
+ |
+
+
+
+ {formatNumber(prediction.result?.count ?? 0)}
+
+ |
+
+ {prediction.config.model_id || "-"}
+ |
+
+ {prediction.published_at
+ ? formatDate(prediction.published_at, true)
+ : "-"}
+ |
+
+
+ |
+
+ );
+ })}
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/features/ai-predictions/components/ai-predictions-table.tsx b/frontend/src/features/ai-predictions/components/ai-predictions-table.tsx
new file mode 100644
index 000000000..ef8518dfa
--- /dev/null
+++ b/frontend/src/features/ai-predictions/components/ai-predictions-table.tsx
@@ -0,0 +1,173 @@
+import { Button } from "@/components/ui/button";
+import { DataTable } from "@/components/ui/data-table";
+import { ToolTip } from "@/components/ui/tooltip";
+import { NoTrainingAreaIcon, InfoIcon } from "@/components/ui/icons";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import { SortableHeader } from "@/features/models/components/table-header";
+import { TableSkeleton } from "@/features/models/components/skeletons";
+import { TOfflinePrediction } from "@/types";
+import {
+ extractDatePart,
+ formatDate,
+ formatNumber,
+ truncateString,
+} from "@/utils";
+import { MapSwipeProjectIsActive } from "@/features/user-profile/components/offline-predictions/mapswipe-project-active";
+import { AIPredictionDetailsInfo } from "./ai-prediction-details-info";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { DropdownPlacement } from "@/enums";
+
+type AIPredictionsListProps = {
+ data: TOfflinePrediction[];
+ isPending: boolean;
+ isError: boolean;
+ refetch: () => void;
+ onViewDetails: (prediction: TOfflinePrediction) => void;
+ onViewResults: (prediction: TOfflinePrediction) => void;
+};
+
+const getPredictionTitle = (prediction: TOfflinePrediction) =>
+ prediction.description;
+
+const getModelUsed = (prediction: TOfflinePrediction) => prediction.model_name;
+
+const columnDefinitions = (
+ onViewMapswipe: (prediction: TOfflinePrediction) => void,
+): ColumnDef[] => [
+ {
+ accessorKey: "id",
+ header: ({ column }) => ,
+ cell: ({ row }) => (
+
+ {row.original.id}
+
+ ),
+ },
+ {
+ header: "Prediction Name",
+ accessorFn: (row) => getPredictionTitle(row),
+ cell: ({ row }) => {
+ const title = getPredictionTitle(row.original);
+
+ return (
+
+
+ {truncateString(title ?? "", 50)}
+
+
+ );
+ },
+ },
+ {
+ header: "Features",
+ accessorFn: (row) => row.result?.count ?? 0,
+ cell: ({ row }) => (
+
+ {formatNumber(row.original.result?.count ?? 0)}
+
+ ),
+ },
+ {
+ header: "Model",
+ accessorFn: (row) => getModelUsed(row),
+ cell: ({ row }) => {
+ const modelUsed = getModelUsed(row.original);
+
+ return (
+
+ {truncateString(modelUsed, 40)}
+
+ );
+ },
+ },
+ {
+ header: "MapSwipe",
+ accessorKey: "mapswipe_id",
+ cell: ({ row }) => (
+ onViewMapswipe(row.original)}
+ />
+ ),
+ },
+ {
+ accessorKey: "published_at",
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) =>
+ row.original.published_at
+ ? formatDate(extractDatePart(row.original.published_at))
+ : "-",
+ },
+ {
+ header: "Info",
+ cell: ({ row }) => (
+ {
+ e.stopPropagation();
+ }}
+ className="rounded-lg px-2 items-center flex"
+ >
+
+
+ }
+ modelUsed={getModelUsed(row.original)}
+ createdBy={row.original.user?.username}
+ />
+ ),
+ },
+];
+
+export const AIPredictionsListLayout = ({
+ data,
+ isPending,
+ isError,
+ refetch,
+ onViewDetails,
+}: AIPredictionsListProps) => {
+ const [sorting, setSorting] = useState([]);
+
+ if (isPending) {
+ return ;
+ }
+
+ if (isError) {
+ return (
+
+
+ Error loading AI predictions.
+
+
+
+
+
No AI predictions found.
+
+
+
+ );
+};
diff --git a/frontend/src/features/ai-predictions/hooks/use-ai-predictions.tsx b/frontend/src/features/ai-predictions/hooks/use-ai-predictions.tsx
new file mode 100644
index 000000000..a996fc625
--- /dev/null
+++ b/frontend/src/features/ai-predictions/hooks/use-ai-predictions.tsx
@@ -0,0 +1,161 @@
+import useDebounce from "@/hooks/use-debounce";
+import { useCallback, useEffect } from "react";
+import {
+ parseAsBoolean,
+ parseAsInteger,
+ parseAsString,
+ useQueryStates,
+} from "nuqs";
+import { useQuery } from "@tanstack/react-query";
+import {
+ getAIPredictionsMapDataQueryOptions,
+ getAIPredictionsQueryOptions,
+} from "@/features/ai-predictions/api/factory";
+import { PAGE_LIMIT } from "@/components/shared";
+import { LayoutView } from "@/enums";
+import { SEARCH_PARAMS } from "@/utils/search-params";
+import { TQueryParams } from "@/types";
+
+const ORDERING_OPTIONS = [
+ { label: "Newest Published", value: "-published_at" },
+ { label: "Oldest Published", value: "published_at" },
+] as const;
+
+const useAIPredictionsSearchParams = () => {
+ return useQueryStates({
+ [SEARCH_PARAMS.searchQuery]: parseAsString.withDefault(""),
+ [SEARCH_PARAMS.ordering]: parseAsString.withDefault("-id"),
+ [SEARCH_PARAMS.offset]: parseAsInteger.withDefault(0),
+ [SEARCH_PARAMS.layout]: parseAsString.withDefault(LayoutView.GRID),
+ [SEARCH_PARAMS.mapIsActive]: parseAsBoolean.withDefault(false),
+ [SEARCH_PARAMS.id]: parseAsString.withDefault(""),
+ });
+};
+
+export const useAIPredictions = () => {
+ const [params, setParams] = useAIPredictionsSearchParams();
+ const search = params[SEARCH_PARAMS.searchQuery] as string;
+ const orderingParam = params[SEARCH_PARAMS.ordering] as string;
+ const offset = params[SEARCH_PARAMS.offset] as number;
+ const layout = params[SEARCH_PARAMS.layout] as string;
+ const mapIsActive = params[SEARCH_PARAMS.mapIsActive] as boolean;
+ const predictionIdParam = params[SEARCH_PARAMS.id] as string;
+
+ const debouncedSearch = useDebounce(search, 300);
+ const clearAllFilters = useCallback(() => {
+ void setParams({
+ [SEARCH_PARAMS.searchQuery]: null,
+ [SEARCH_PARAMS.id]: null,
+ [SEARCH_PARAMS.offset]: 0,
+ });
+ }, [setParams]);
+ const { isPending, isError, data, refetch, isPlaceholderData } = useQuery({
+ ...getAIPredictionsQueryOptions(
+ debouncedSearch.length > 0 ? debouncedSearch : undefined,
+ orderingParam,
+ offset > 0 ? offset : undefined,
+ predictionIdParam.length > 0 ? parseInt(predictionIdParam) : undefined,
+ ),
+ });
+
+ const setPredictionId = useCallback(
+ (value: string | number | null) => {
+ void setParams({
+ [SEARCH_PARAMS.id]: value ? String(value) : null,
+ [SEARCH_PARAMS.offset]: 0,
+ });
+ },
+ [setParams],
+ );
+ useEffect(() => {
+ if ((search !== "" || predictionIdParam !== "") && offset > 0) {
+ void setParams({ [SEARCH_PARAMS.offset]: 0 });
+ }
+ }, [offset, predictionIdParam, search, setParams]);
+ const setSearch = useCallback(
+ (value: string) => {
+ void setParams({ q: value, offset: 0 });
+ },
+ [setParams],
+ );
+
+ const setOrdering = useCallback(
+ (value: string) => {
+ void setParams({ orderBy: value, offset: 0 });
+ },
+ [setParams],
+ );
+
+ const setLayout = useCallback(
+ (value: string) => {
+ void setParams({ layout: value });
+ },
+ [setParams],
+ );
+ const setMapView = useCallback(
+ (value: boolean) => {
+ void setParams({ map: value });
+ },
+ [setParams],
+ );
+ const goToNextPage = useCallback(() => {
+ if (data?.hasNext) {
+ void setParams({ offset: offset + PAGE_LIMIT });
+ }
+ }, [data?.hasNext, offset, setParams]);
+
+ const goToPrevPage = useCallback(() => {
+ if (data?.hasPrev) {
+ void setParams({ offset: Math.max(offset - PAGE_LIMIT, 0) });
+ }
+ }, [data?.hasPrev, offset, setParams]);
+
+ const {
+ data: mapData,
+ isPending: isMapDataPending,
+ isError: isMapDataError,
+ } = useQuery({
+ ...getAIPredictionsMapDataQueryOptions(),
+ enabled: mapIsActive && params.layout !== LayoutView.LIST,
+ });
+ useEffect(() => {
+ if (params.layout === LayoutView.LIST && params.map) {
+ void setParams({ map: false });
+ }
+ }, [params.layout, params.map, setParams]);
+
+ const query: TQueryParams = {
+ [SEARCH_PARAMS.searchQuery]: search,
+ [SEARCH_PARAMS.id]: predictionIdParam,
+ [SEARCH_PARAMS.offset]: offset,
+ [SEARCH_PARAMS.ordering]: orderingParam,
+ [SEARCH_PARAMS.layout]: layout,
+ [SEARCH_PARAMS.mapIsActive]: mapIsActive,
+ };
+ return {
+ data,
+ query,
+ mapData,
+ isMapDataPending,
+ isMapDataError,
+ isPending,
+ isError,
+ isPlaceholderData,
+ refetch,
+ search,
+ ordering: orderingParam,
+ layout,
+ offset,
+ clearAllFilters,
+ mapViewIsActive: mapIsActive && params.layout !== LayoutView.LIST,
+ setMapView,
+ setSearch,
+ setOrdering,
+ setPredictionId,
+ setLayout,
+ goToNextPage,
+ goToPrevPage,
+ };
+};
+
+export { ORDERING_OPTIONS };
diff --git a/frontend/src/features/base-models/api/get-base-models.ts b/frontend/src/features/base-models/api/get-base-models.ts
new file mode 100644
index 000000000..137569602
--- /dev/null
+++ b/frontend/src/features/base-models/api/get-base-models.ts
@@ -0,0 +1,22 @@
+import { API_ENDPOINTS, stacClient } from "@/services";
+
+export type TGetBaseModelsParams = {
+ limit?: number;
+ page?: number;
+};
+
+export const getBaseModels = async ({
+ limit = 20,
+}: TGetBaseModelsParams = {}) => {
+ const res = await stacClient.get(API_ENDPOINTS.GET_BASE_MODELS(limit));
+ return {
+ ...res.data,
+ hasNext: res.data.next,
+ hasPrev: res.data.previous,
+ };
+};
+
+export const getBaseModelById = async (id: string) => {
+ const res = await stacClient.get(API_ENDPOINTS.GET_BASE_MODEL_BY_ID(id));
+ return res.data;
+};
diff --git a/frontend/src/features/base-models/components/base-model-card.tsx b/frontend/src/features/base-models/components/base-model-card.tsx
new file mode 100644
index 000000000..00c5cb823
--- /dev/null
+++ b/frontend/src/features/base-models/components/base-model-card.tsx
@@ -0,0 +1,48 @@
+import { Link } from "@/components/ui/link";
+import { APPLICATION_ROUTES } from "@/constants";
+import { TBaseModel } from "@/types";
+import { roundNumber } from "@/utils/number-utils";
+
+type BaseModelCardProps = {
+ model: TBaseModel;
+};
+
+const BaseModelCard: React.FC = ({ model }) => {
+ return (
+
+ {/* Model Name */}
+ {model.name}
+
+ {/* Description */}
+
+ {model.description}
+
+
+ {/* Accuracy */}
+
+
Accuracy:
+
+ {roundNumber(model.accuracy)}
+
+
+
+ {model.author}
+
+
+ Last Modified: {model.lastModified}
+
+
+
+
+
+ {/* Search */}
+
+
+ setSearch(e.target.value || null)}
+ placeholder="Search"
+ className="w-full p-2 outline-none border-none text-body-2base"
+ />
+
+
+ {/* Category Filter — Desktop */}
+
+
{
+ const selected = categoryMenuItems.find(
+ (c) => c.value === value,
+ );
+
+ if (!selected) return;
+
+ setCategory(
+ selected.apiValue === "all" ? null : selected.apiValue,
+ );
+ }}
+ defaultSelectedItem={selectedCategoryLabel}
+ triggerComponent={
+
+ {selectedCategoryLabel}
+
+ }
+ />
+
+
+ {/* Date Filter — Desktop */}
+
+
{
+ const selected = dateMenuItems.find((d) => d.value === value);
+
+ if (!selected) return;
+
+ setDateSort(
+ selected.apiValue === "newest" ? null : selected.apiValue,
+ );
+ }}
+ defaultSelectedItem={selectedDateLabel}
+ triggerComponent={
+
+ {selectedDateLabel}
+
+ }
+ />
+
+
+
+ {/* Right side controls */}
+
+ {/* Mobile filter button */}
+
+
+
+
+ {/* Desktop layout toggle */}
+
+
+
+
+
+
+
+
+
+ {/* Model count + mobile controls */}
+
+
+ {filteredModelsCount} Models
+
+
+
+
+
+
+
+
+ {isExpanded &&
{children}
}
+
+ {models.map((model) => (
+
+ ))}
+
+ );
+};
+
+export default BaseModelGridLayout;
diff --git a/frontend/src/features/base-models/layouts/index.ts b/frontend/src/features/base-models/layouts/index.ts
new file mode 100644
index 000000000..058382dde
--- /dev/null
+++ b/frontend/src/features/base-models/layouts/index.ts
@@ -0,0 +1,2 @@
+export { default as BaseModelGridLayout } from "./grid";
+export { default as BaseModelTableLayout } from "./table";
diff --git a/frontend/src/features/base-models/layouts/table.tsx b/frontend/src/features/base-models/layouts/table.tsx
new file mode 100644
index 000000000..d24248490
--- /dev/null
+++ b/frontend/src/features/base-models/layouts/table.tsx
@@ -0,0 +1,78 @@
+import { APPLICATION_ROUTES } from "@/constants";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import DataTable from "@/components/ui/data-table/data-table";
+import { SortableHeader } from "@/features/models/components/table-header";
+import { roundNumber, truncateString } from "@/utils";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { TBaseModel } from "@/types";
+
+const columnDefinitions: ColumnDef[] = [
+ {
+ accessorKey: "id",
+ header: ({ column }) => ,
+ },
+ {
+ accessorKey: "name",
+ header: "Model Name",
+ cell: ({ row }) => (
+
+ {truncateString(row.getValue("name"), 50)}
+
+ ),
+ },
+ {
+ accessorKey: "task",
+ header: "Task",
+ },
+ {
+ accessorKey: "author",
+ header: "Created by",
+ },
+ {
+ accessorKey: "version",
+ header: "Version",
+ },
+ {
+ accessorKey: "accuracy",
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => {
+ return {roundNumber(row.getValue("accuracy") ?? 0)};
+ },
+ },
+ {
+ accessorKey: "lastModified",
+ header: ({ column }) => (
+
+ ),
+ },
+];
+
+type BaseModelTableLayoutProps = {
+ models: TBaseModel[];
+};
+
+const BaseModelTableLayout: React.FC = ({
+ models,
+}) => {
+ const [sorting, setSorting] = useState([]);
+ const navigate = useNavigate();
+
+ const handleClick = (rowData: TBaseModel) => {
+ navigate(`${APPLICATION_ROUTES.BASE_MODELS_HOME}/${rowData.id}`);
+ };
+
+ return (
+
+ );
+};
+
+export default BaseModelTableLayout;
diff --git a/frontend/src/features/base-models/utils/common.ts b/frontend/src/features/base-models/utils/common.ts
new file mode 100644
index 000000000..7d301355f
--- /dev/null
+++ b/frontend/src/features/base-models/utils/common.ts
@@ -0,0 +1,4 @@
+export const DATE_SORT_OPTIONS = [
+ { label: "Newest", value: "newest" },
+ { label: "Oldest", value: "oldest" },
+];
diff --git a/frontend/src/features/base-models/utils/stac.ts b/frontend/src/features/base-models/utils/stac.ts
new file mode 100644
index 000000000..47f9c72fa
--- /dev/null
+++ b/frontend/src/features/base-models/utils/stac.ts
@@ -0,0 +1,108 @@
+import { TBaseModel } from "@/types";
+
+export const mapStacItemToBaseModel = (feature: any): TBaseModel => {
+ const props = feature.properties;
+
+ const provider =
+ props.providers?.find((p: any) => p.roles?.includes("producer")) ||
+ props.providers?.[0];
+
+ return {
+ id: feature.id,
+
+ name: props.title || props["mlm:name"],
+
+ description: props.description || "",
+
+ author: provider?.name || "Unknown",
+
+ task: props["mlm:tasks"]?.[0] || "unknown",
+
+ version: props.version || "1",
+
+ lastModified: new Date(props.updated).toLocaleDateString(),
+
+ accuracy: extractAccuracy(props),
+ };
+};
+
+export const mapStacItemToBaseModelDetail = (item: any) => {
+ const p = item.properties ?? {};
+
+ const assets = item.assets ?? {};
+
+ const getAsset = (key: string) => assets[key];
+
+ return {
+ id: item.id,
+
+ // header
+ fullTitle: p.title,
+
+ dataId: item.id,
+
+ // metadata
+ createdBy:
+ p.providers?.find((p: any) => p.roles?.includes("producer"))?.name ??
+ "Unknown",
+
+ generatedOn: p.created,
+ lastModified: p.updated,
+ version: p.version,
+
+ modelWeightsLicense: p.license,
+ datasetLicense: p.license,
+
+ task: (p.mlm?.tasks ?? [])[0] ?? "unknown",
+ accuracy: p["fair:metrics_spec"] ?? null,
+
+ markdownContent: getAsset("readme")?.href,
+
+ dataInfo: {
+ sensor: p.mlm?.input?.[0]?.name ?? "Unknown",
+ crs: "EPSG:4326",
+ spatialExtent: "Global",
+ temporalExtent: `${p.created} → ${p.updated}`,
+ },
+
+ architecture: {
+ baseModel: p.mlm?.name,
+ head: p.mlm?.architecture,
+ input: JSON.stringify(p.mlm?.input ?? {}),
+ tileSizePx: "640",
+ processing: "preprocess pipeline",
+ resize: "640x640",
+ scaling: "0–1 normalization",
+ output: JSON.stringify(p.mlm?.output ?? {}),
+ outputDescription: p.description,
+
+ variants: [],
+ },
+
+ assets: Object.entries(assets).map(([key, value]: any) => ({
+ key,
+ href: value.href,
+ type: value.type,
+ title: value.title,
+ roles: value.roles,
+ })),
+ };
+};
+
+const extractAccuracy = (properties: any): number => {
+ const metrics = properties["fair:metrics_spec"];
+
+ if (!metrics?.length) {
+ return 0;
+ }
+
+ const accuracyMetric = metrics.find(
+ (metric: any) => metric.key === "fair:accuracy",
+ );
+
+ if (!accuracyMetric) {
+ return 0;
+ }
+
+ return 0;
+};
diff --git a/frontend/src/features/datasets/components/dataset-card.tsx b/frontend/src/features/datasets/components/dataset-card.tsx
index f1fa846a7..c0f626b98 100644
--- a/frontend/src/features/datasets/components/dataset-card.tsx
+++ b/frontend/src/features/datasets/components/dataset-card.tsx
@@ -69,17 +69,15 @@ export const DatasetCard = ({
-
Used by:
-
+
Used by:
+
{dataset.models_count} Model{dataset.models_count ? "s" : ""}
{showUsername && (
-
- Created by:
-
-
+
Created by:
+
{dataset.user.username}
diff --git a/frontend/src/features/mapswipe/components/project-status-dialog.tsx b/frontend/src/features/mapswipe/components/project-status-dialog.tsx
index 8e3288434..6c233d5c6 100644
--- a/frontend/src/features/mapswipe/components/project-status-dialog.tsx
+++ b/frontend/src/features/mapswipe/components/project-status-dialog.tsx
@@ -308,7 +308,6 @@ export const MapswipeProjectStatusDialog = ({
suffixIcon={DownloadIcon}
contentClassName="text-body-4 md:text-body-3"
label="Download Result"
- uppercase={false}
disabled={!data?.results?.mapswipe?.exportResults}
/>
}
diff --git a/frontend/src/features/start-mapping/components/dialogs/offline-prediction-request-dialog.tsx b/frontend/src/features/start-mapping/components/dialogs/offline-prediction-request-dialog.tsx
index 59ad8262d..d9c5ddae4 100644
--- a/frontend/src/features/start-mapping/components/dialogs/offline-prediction-request-dialog.tsx
+++ b/frontend/src/features/start-mapping/components/dialogs/offline-prediction-request-dialog.tsx
@@ -69,6 +69,14 @@ export const OfflinePredictionRequestDialog = ({
},
});
+ const getModelName = () => {
+ let selectedModel = query[SEARCH_PARAMS.model];
+ if (selectedModel && selectedModel !== "Default") {
+ return selectedModel;
+ }
+ return modelInfo?.name;
+ };
+
return (
<>
void;
+ customPredictionModelCheckpointPath?: string;
}) => {
const { modelId } = useParams();
const [predictionZoomLevel, setPredictionZoomLevel] = useState(
@@ -105,8 +107,10 @@ const ModelAction = ({
modelPredictionMutation.isPending ||
tileServerURL?.length === 0 ||
predictionModelCheckpoint?.length === 0 ||
- isOfflineMode) &&
+ isOfflineMode ||
+ customPredictionModelCheckpointPath?.length === 0) &&
!hasDrawnAOI;
+
return (
(
{
const { isSmallViewport } = useScreenSize();
const [expandLegend, setExpandLegend] = useState(true);
@@ -84,7 +91,9 @@ export const Legend = ({
className={`flex z-10 items-center gap-x-4 bg-white p-2.5 rounded-xl ${
isSmallViewport
? "border border-gray-border"
- : "absolute flex-col gap-y-4 left-3 bottom-3 rounded-[4px] border border-gray-border"
+ : position === "bottom-right"
+ ? "absolute flex-col gap-y-4 right-3 bottom-16 rounded-[4px] border border-gray-border"
+ : "absolute flex-col gap-y-4 left-3 bottom-3 rounded-[4px] border border-gray-border"
}`}
onClick={handleToggleExpand}
>
@@ -99,8 +108,15 @@ export const Legend = ({
)}
{!isSmallViewport && (
-
- {title}
+
+
+
+ {title}
+
+ {subtitle && expandLegend && (
+
{subtitle}
+ )}
+
-
+
- {legendItems.map(({ label, fillColor, fillOpacity }, id) => (
+ {legendItems.map(({ label, fillColor, fillOpacity, shape }, id) => (
{label}
diff --git a/frontend/src/features/start-mapping/components/replicable-models/imagery-source-selector.tsx b/frontend/src/features/start-mapping/components/replicable-models/imagery-source-selector.tsx
index c3af04bd7..c1022243e 100644
--- a/frontend/src/features/start-mapping/components/replicable-models/imagery-source-selector.tsx
+++ b/frontend/src/features/start-mapping/components/replicable-models/imagery-source-selector.tsx
@@ -163,7 +163,6 @@ export const ImagerySourceSelector = ({
+ }
+ >
+
+
+
+ {hasActivePrediction ? (
+
+ setSectionsOpen((prev) => ({
+ ...prev,
+ predictions: !prev.predictions,
+ }))
+ }
+ >
+
+
+
+ {predictionLabel}
+
+
+
+ ) : null}
+
+ {hasTileServiceLayer ? (
+
+ setSectionsOpen((prev) => ({
+ ...prev,
+ imagery: !prev.imagery,
+ }))
+ }
+ >
+ }
+ onClick={toggleImagery}
+ />
+
+ ) : null}
+
+
+ setSectionsOpen((prev) => ({ ...prev, basemap: !prev.basemap }))
+ }
+ >
+ }
+ onClick={() => toggleBasemap("osm")}
+ />
+ }
+ onClick={() => toggleBasemap("googleSatellite")}
+ />
+
+
+
+
+ );
+};
diff --git a/frontend/src/features/try-fair/components/map/try-fair-map.tsx b/frontend/src/features/try-fair/components/map/try-fair-map.tsx
new file mode 100644
index 000000000..8881d3dba
--- /dev/null
+++ b/frontend/src/features/try-fair/components/map/try-fair-map.tsx
@@ -0,0 +1,168 @@
+import { MapComponent } from "@/components/map";
+import { Map } from "maplibre-gl";
+import { RefObject, useCallback, useEffect, useRef, useState } from "react";
+import { TryFairMapOutputType, TryFairResolution } from "@/enums/try-fair";
+import { BBOX } from "@/types";
+import { TryFairDraggableGrid } from "@/features/try-fair/components/map/draggable-grid";
+import { TryFairPredictionsLayer } from "@/features/try-fair/components/map/try-fair-prediction-results";
+import { ChoroplethBucket } from "@/features/try-fair/utils/helpers";
+import { TryFairChoroplethLegend } from "@/features/try-fair/components/map/chloropleth-legend";
+import { TryFairPointsLegend } from "@/features/try-fair/components/map/points-legend";
+import { FitToBounds, ZoomControls } from "@/components/map/controls";
+import { PREDICTION_LAYER_IDS } from "@/features/try-fair/utils/common";
+import { TryFairLayerControl } from "@/features/try-fair/components/map/try-fair-layer-control";
+import useScreenSize from "@/hooks/use-screen-size";
+
+type TryFairMapProps = {
+ map: Map | null;
+ mapContainerRef: RefObject
;
+ outputType: TryFairMapOutputType;
+ tileServerURL: string;
+ tileLoading: boolean;
+ tileServiceValid: boolean;
+ onBBoxChange: (bbox: BBOX, tileZoom: number) => void;
+ predictions: GeoJSON.FeatureCollection | null;
+ predictionBBox: BBOX | null;
+ predictionGridZoom?: number | null;
+ imageryCenter?: [number, number];
+ resolution?: TryFairResolution;
+ modelId?: string | null;
+ isPredicting?: boolean;
+ onGridZoom?: () => void;
+};
+
+export const TryFairMap = ({
+ map,
+ mapContainerRef,
+ outputType,
+ tileServerURL,
+ tileServiceValid,
+ onBBoxChange,
+ predictions,
+ predictionBBox,
+ predictionGridZoom,
+ imageryCenter,
+ resolution,
+ modelId,
+ isPredicting = false,
+ onGridZoom,
+}: TryFairMapProps) => {
+ const { isSmallViewport } = useScreenSize();
+ const [choroplethBuckets, setChoroplethBuckets] = useState<
+ ChoroplethBucket[] | null
+ >(null);
+ // Track the grid bbox locally so fit-to-grid always has the latest value
+ const gridBBoxRef = useRef(null);
+
+ // Intercept bbox changes so gridBBoxRef always has the latest value
+ const handleBBoxChange = useCallback(
+ (bbox: BBOX, tileZoom: number) => {
+ gridBBoxRef.current = bbox;
+ onBBoxChange(bbox, tileZoom);
+ },
+ [onBBoxChange],
+ );
+
+ const handleFitToGrid = useCallback(() => {
+ const bbox = gridBBoxRef.current;
+ if (!map || !bbox) return;
+ map.fitBounds([bbox[0], bbox[1], bbox[2], bbox[3]], {
+ padding: 40,
+ essential: true,
+ });
+ onGridZoom?.();
+ }, [map, onGridZoom]);
+
+ // While predicting, disable only map dragging/panning.
+ // Keep zoom interactions enabled.
+ useEffect(() => {
+ if (!map) return;
+ const handlers = [map.dragRotate, map.dragPan, map.touchPitch];
+ if (isPredicting) {
+ handlers.forEach((handler) => handler?.disable());
+ } else {
+ handlers.forEach((handler) => handler?.enable());
+ }
+ return () => {
+ // Always re-enable on unmount/cleanup to avoid getting stuck
+ handlers.forEach((handler) => handler?.enable());
+ };
+ }, [map, isPredicting]);
+
+ const legend =
+ outputType === TryFairMapOutputType.CLUSTER ? (
+
+ ) : outputType === TryFairMapOutputType.POINTS ? (
+
+ ) : null;
+
+ return (
+
+
+
+
+
+ {map && (
+
+ )}
+
+ {/* ── Right-side */}
+ {map && (
+
+ {/* Zoom in / out */}
+
+ {/* Zoom to grid */}
+
+
+ {/* Layers panel */}
+
+
+ )}
+
+ {legend &&
+ (isSmallViewport ? (
+
{legend}
+ ) : (
+ legend
+ ))}
+