Skip to content

Commit

Permalink
Merge pull request #343 from jeafreezy/fix/no-predictions-at-zoom-level
Browse files Browse the repository at this point in the history 
Fix/no predictions at zoom level
  • Loading branch information
@kshitijrajsharma
kshitijrajsharma authored Feb 27, 2025
2 parents d281d10 + 2ed5ca9 commit 6c98bd3
Show file tree
Hide file tree
Showing 6 changed files with 466 additions and 73 deletions.
64 changes: 24 additions & 40 deletions frontend/src/app/routes/start-mapping.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
START_MAPPING_PAGE_CONTENT,
TOAST_NOTIFICATIONS,
} from "@/constants";
import { BASE_MODELS } from "@/enums";
import { FitToBounds, LayerControl, ZoomLevel } from "@/components/map";
import { Head } from "@/components/seo";
import { LngLatBoundsLike } from "maplibre-gl";
Expand All @@ -18,11 +17,10 @@ import { useModelDetails } from "@/features/models/hooks/use-models";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { UserProfile } from "@/components/layout";
import {
BBOX,
Feature,
TileJSON,
TModelPredictions,
TModelPredictionsConfig,
TTrainingDataset,
} from "@/types";
import {
BrandLogoWithDropDown,
Expand All @@ -38,7 +36,6 @@ import {
showSuccessToast,
} from "@/utils";
import {
PREDICTION_API_FILE_EXTENSIONS,
REJECTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
REJECTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
MIN_ZOOM_LEVEL_FOR_START_MAPPING_PREDICTION,
Expand Down Expand Up @@ -70,22 +67,24 @@ export const StartMappingPage = () => {
const { map, mapContainerRef, currentZoom } = useMapInstance();
const { isSmallViewport } = useScreenSize();
const navigate = useNavigate();
const bounds = map?.getBounds();

const [showModelDetailsPopup, setShowModelDetailsPopup] =
useState<boolean>(false);
const { dropdownIsOpened, onDropdownHide, onDropdownShow } =
useDropdownMenu();

const { isError, isPending, data, error } = useModelDetails(
modelId as string,
!!modelId,
);
const {
isError,
isPending,
data: modelInfo,
error,
} = useModelDetails(modelId as string, !!modelId);

const {
data: trainingDataset,
isPending: trainingDatasetIsPending,
isError: trainingDatasetIsError,
} = useGetTrainingDataset(data?.dataset as number, !isPending);
} = useGetTrainingDataset(modelInfo?.dataset as number, !isPending);

const tileJSONURL = extractTileJSONURL(trainingDataset?.source_imagery ?? "");

Expand Down Expand Up @@ -119,6 +118,7 @@ export const StartMappingPage = () => {
};
});

// Todo - move to local storage.
const [modelPredictions, setModelPredictions] = useState<TModelPredictions>({
all: [],
accepted: [],
Expand Down Expand Up @@ -149,25 +149,6 @@ export const StartMappingPage = () => {
[searchParams, setSearchParams],
);

const trainingConfig: TModelPredictionsConfig = {
tolerance: query[SEARCH_PARAMS.tolerance] as number,
area_threshold: query[SEARCH_PARAMS.area] as number,
use_josm_q: query[SEARCH_PARAMS.useJOSMQ] as boolean,
confidence: query[SEARCH_PARAMS.confidenceLevel] as number,
checkpoint: `/mnt/efsmount/data/trainings/dataset_${data?.dataset}/output/training_${data?.published_training}/checkpoint${PREDICTION_API_FILE_EXTENSIONS[data?.base_model as BASE_MODELS]}`,
max_angle_change: 15,
model_id: modelId as string,
skew_tolerance: 15,
source: trainingDataset?.source_imagery as string,
zoom_level: currentZoom,
bbox: [
bounds?.getWest(),
bounds?.getSouth(),
bounds?.getEast(),
bounds?.getNorth(),
] as BBOX,
};

const disablePrediction =
currentZoom < MIN_ZOOM_LEVEL_FOR_START_MAPPING_PREDICTION;

Expand Down Expand Up @@ -225,18 +206,18 @@ export const StartMappingPage = () => {
...modelPredictions.all,
],
},
`all_predictions_${data.dataset}`,
`all_predictions_${modelInfo.dataset}`,
);
showSuccessToast(TOAST_NOTIFICATIONS.startMapping.fileDownloadSuccess);
}, [modelPredictions]);
}, [modelPredictions, modelInfo]);

const handleAcceptedFeaturesDownload = useCallback(async () => {
geoJSONDowloader(
{ type: "FeatureCollection", features: modelPredictions.accepted },
`accepted_predictions_${data.dataset}`,
`accepted_predictions_${modelInfo.dataset}`,
);
showSuccessToast(TOAST_NOTIFICATIONS.startMapping.fileDownloadSuccess);
}, [modelPredictions]);
}, [modelPredictions, modelInfo]);

const handleFeaturesDownloadToJOSM = useCallback(
(features: Feature[]) => {
Expand Down Expand Up @@ -316,13 +297,12 @@ export const StartMappingPage = () => {

return (
<>
<Head title={START_MAPPING_PAGE_CONTENT.pageTitle(data?.name)} />
<Head title={START_MAPPING_PAGE_CONTENT.pageTitle(modelInfo?.name)} />
{/* Mobile dialog */}
<div className="h-screen flex flex-col fullscreen">
<StartMappingMobileDrawer
isOpen={isSmallViewport}
disablePrediction={disablePrediction}
trainingConfig={trainingConfig}
setModelPredictions={setModelPredictions}
modelPredictions={modelPredictions}
map={map}
Expand All @@ -332,31 +312,33 @@ export const StartMappingPage = () => {
updateQuery={updateQuery}
modelDetailsPopupIsActive={showModelDetailsPopup}
clearPredictions={clearPredictions}
trainingDataset={trainingDataset as TTrainingDataset}
currentZoom={currentZoom}
modelInfo={modelInfo}
/>
<div className="sticky top-0 bg-white z-10 px-4 xl:px-large py-1 hidden md:block">
{/* Model Details Popup */}
{data && (
{modelInfo && (
<ModelDetailsPopUp
showPopup={showModelDetailsPopup}
handlePopup={handleModelDetailsPopup}
closeMobileDrawer={() => setShowModelDetailsPopup(false)}
anchor={popupAnchorId}
model={data}
model={modelInfo}
trainingDataset={trainingDataset}
trainingDatasetIsPending={trainingDatasetIsPending}
trainingDatasetIsError={trainingDatasetIsError}
/>
)}
{/* Web Header */}
<StartMappingHeader
data={data}
modelInfo={modelInfo}
trainingDatasetIsPending={trainingDatasetIsPending}
modelPredictionsExist={modelPredictionsExist}
trainingDatasetIsError={trainingDatasetIsError}
modelPredictions={modelPredictions}
query={query}
updateQuery={updateQuery}
trainingConfig={trainingConfig}
setModelPredictions={setModelPredictions}
map={map}
disablePrediction={disablePrediction}
Expand All @@ -365,6 +347,8 @@ export const StartMappingPage = () => {
handleModelDetailsPopup={handleModelDetailsPopup}
downloadOptions={downloadOptions}
clearPredictions={clearPredictions}
trainingDataset={trainingDataset as TTrainingDataset}
currentZoom={currentZoom}
/>
</div>
<div className="col-span-12 h-[70vh] md:h-full md:border-8 md:border-off-white flex-grow relative map-elements-z-index">
Expand Down Expand Up @@ -408,7 +392,7 @@ export const StartMappingPage = () => {
currentZoom={currentZoom}
layers={mapLayers}
tmsBounds={oamTileJSON?.bounds as LngLatBoundsLike}
trainingId={data?.published_training}
trainingId={modelInfo?.published_training}
/>
</div>
</div>
Expand Down
21 changes: 13 additions & 8 deletions frontend/src/features/start-mapping/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,20 @@ import { ModelPredictionsTracker } from "@/features/start-mapping/components/mod
import { ModelSettings } from "@/features/start-mapping/components/model-settings";
import { SkeletonWrapper } from "@/components/ui/skeleton";
import { TDownloadOptions, TQueryParams } from "@/app/routes/start-mapping";
import { TModel, TModelPredictions, TModelPredictionsConfig } from "@/types";
import { TModel, TModelPredictions, TTrainingDataset } from "@/types";
import { ToolTip } from "@/components/ui/tooltip";
import { useDropdownMenu } from "@/hooks/use-dropdown-menu";
import { UserProfile } from "@/components/layout";
import { START_MAPPING_PAGE_CONTENT } from "@/constants";

const StartMappingHeader = ({
data,
modelInfo,
modelPredictions,
modelPredictionsExist,
trainingDatasetIsPending,
trainingDatasetIsError,
query,
updateQuery,
trainingConfig,
setModelPredictions,
disablePrediction,
map,
Expand All @@ -34,15 +33,16 @@ const StartMappingHeader = ({
modelDetailsPopupIsActive,
downloadOptions,
clearPredictions,
trainingDataset,
currentZoom,
}: {
modelPredictionsExist: boolean;
trainingDatasetIsPending: boolean;
trainingDatasetIsError: boolean;
data: TModel;
modelInfo: TModel;
modelPredictions: TModelPredictions;
query: TQueryParams;
updateQuery: (newParams: TQueryParams) => void;
trainingConfig: TModelPredictionsConfig;
setModelPredictions: React.Dispatch<React.SetStateAction<TModelPredictions>>;
map: Map | null;
disablePrediction: boolean;
Expand All @@ -51,6 +51,8 @@ const StartMappingHeader = ({
modelDetailsPopupIsActive: boolean;
downloadOptions: TDownloadOptions;
clearPredictions: () => void;
trainingDataset: TTrainingDataset;
currentZoom: number;
}) => {
const { onDropdownHide, onDropdownShow, dropdownIsOpened } =
useDropdownMenu();
Expand All @@ -75,10 +77,10 @@ const StartMappingHeader = ({
/>
<div className="flex flex-col md:flex-row md:items-center gap-x-4 z-10">
<p
title={data?.name}
title={modelInfo?.name}
className="text-dark text-body-2base text-nowrap truncate md:max-w-[20px] lg:max-w-[300px] xl:max-w-[400px]"
>
{data?.name ?? "N/A"}
{modelInfo?.name ?? "N/A"}
</p>
<ModelDetailsButton
onClick={handleModelDetailsPopup}
Expand Down Expand Up @@ -132,9 +134,12 @@ const StartMappingHeader = ({
<ModelAction
modelPredictions={modelPredictions}
setModelPredictions={setModelPredictions}
trainingConfig={trainingConfig}
map={map}
disablePrediction={disablePrediction}
query={query}
trainingDataset={trainingDataset}
currentZoom={currentZoom}
modelInfo={modelInfo}
/>
<UserProfile hideFullName smallerSize />
</div>
Expand Down
15 changes: 11 additions & 4 deletions frontend/src/features/start-mapping/components/mobile-drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,14 @@ import { ModelDetailsButton } from "@/features/start-mapping/components/model-de
import { ModelPredictionsTracker } from "@/features/start-mapping/components/model-predictions-tracker";
import { ModelSettings } from "@/features/start-mapping/components/model-settings";
import { TDownloadOptions, TQueryParams } from "@/app/routes/start-mapping";
import { TModelPredictions, TModelPredictionsConfig } from "@/types";
import { TModel, TModelPredictions, TTrainingDataset } from "@/types";
import { ToolTip } from "@/components/ui/tooltip";
import { useState } from "react";
import { START_MAPPING_PAGE_CONTENT } from "@/constants";

export const StartMappingMobileDrawer = ({
isOpen,
disablePrediction,
trainingConfig,
setModelPredictions,
map,
modelPredictions,
Expand All @@ -25,10 +24,12 @@ export const StartMappingMobileDrawer = ({
updateQuery,
modelDetailsPopupIsActive,
clearPredictions,
trainingDataset,
currentZoom,
modelInfo,
}: {
isOpen: boolean;
disablePrediction: boolean;
trainingConfig: TModelPredictionsConfig;
modelPredictions: TModelPredictions;
setModelPredictions: React.Dispatch<React.SetStateAction<TModelPredictions>>;
map: Map | null;
Expand All @@ -38,6 +39,9 @@ export const StartMappingMobileDrawer = ({
query: TQueryParams;
updateQuery: (newParams: TQueryParams) => void;
clearPredictions: () => void;
trainingDataset: TTrainingDataset;
currentZoom: number;
modelInfo: TModel;
}) => {
const [showDownloadOptions, setShowDownloadOptions] =
useState<boolean>(false);
Expand All @@ -53,11 +57,14 @@ export const StartMappingMobileDrawer = ({
<div className="flex items-center justify-between my-4 gap-x-2">
<div className="w-full basis-5/6">
<ModelAction
trainingConfig={trainingConfig}
query={query}
setModelPredictions={setModelPredictions}
map={map}
disablePrediction={disablePrediction}
modelPredictions={modelPredictions}
trainingDataset={trainingDataset}
currentZoom={currentZoom}
modelInfo={modelInfo}
/>
</div>
<div className="p-2 icon-interaction" id="anchor1">
Expand Down
Loading

0 comments on commit 6c98bd3

Please sign in to comment.