Skip to content

Commit 6c98bd3

Browse files
kshitijrajsharmakshitijrajsharma
authored
Merge pull request #343 from jeafreezy/fix/no-predictions-at-zoom-level
Fix/no predictions at zoom level
2 parents d281d10 + 2ed5ca9 commit 6c98bd3

File tree

6 files changed

+466
-73
lines changed

6 files changed

+466
-73
lines changed

‎frontend/src/app/routes/start-mapping.tsx

Lines changed: 24 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
START_MAPPING_PAGE_CONTENT,
55
TOAST_NOTIFICATIONS,
66
} from "@/constants";
7-
import { BASE_MODELS } from "@/enums";
87
import { FitToBounds, LayerControl, ZoomLevel } from "@/components/map";
98
import { Head } from "@/components/seo";
109
import { LngLatBoundsLike } from "maplibre-gl";
@@ -18,11 +17,10 @@ import { useModelDetails } from "@/features/models/hooks/use-models";
1817
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
1918
import { UserProfile } from "@/components/layout";
2019
import {
21-
BBOX,
2220
Feature,
2321
TileJSON,
2422
TModelPredictions,
25-
TModelPredictionsConfig,
23+
TTrainingDataset,
2624
} from "@/types";
2725
import {
2826
BrandLogoWithDropDown,
@@ -38,7 +36,6 @@ import {
3836
showSuccessToast,
3937
} from "@/utils";
4038
import {
41-
PREDICTION_API_FILE_EXTENSIONS,
4239
REJECTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
4340
REJECTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
4441
MIN_ZOOM_LEVEL_FOR_START_MAPPING_PREDICTION,
@@ -70,22 +67,24 @@ export const StartMappingPage = () => {
7067
const { map, mapContainerRef, currentZoom } = useMapInstance();
7168
const { isSmallViewport } = useScreenSize();
7269
const navigate = useNavigate();
73-
const bounds = map?.getBounds();
70+
7471
const [showModelDetailsPopup, setShowModelDetailsPopup] =
7572
useState<boolean>(false);
7673
const { dropdownIsOpened, onDropdownHide, onDropdownShow } =
7774
useDropdownMenu();
7875

79-
const { isError, isPending, data, error } = useModelDetails(
80-
modelId as string,
81-
!!modelId,
82-
);
76+
const {
77+
isError,
78+
isPending,
79+
data: modelInfo,
80+
error,
81+
} = useModelDetails(modelId as string, !!modelId);
8382

8483
const {
8584
data: trainingDataset,
8685
isPending: trainingDatasetIsPending,
8786
isError: trainingDatasetIsError,
88-
} = useGetTrainingDataset(data?.dataset as number, !isPending);
87+
} = useGetTrainingDataset(modelInfo?.dataset as number, !isPending);
8988

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

@@ -119,6 +118,7 @@ export const StartMappingPage = () => {
119118
};
120119
});
121120

121+
// Todo - move to local storage.
122122
const [modelPredictions, setModelPredictions] = useState<TModelPredictions>({
123123
all: [],
124124
accepted: [],
@@ -149,25 +149,6 @@ export const StartMappingPage = () => {
149149
[searchParams, setSearchParams],
150150
);
151151

152-
const trainingConfig: TModelPredictionsConfig = {
153-
tolerance: query[SEARCH_PARAMS.tolerance] as number,
154-
area_threshold: query[SEARCH_PARAMS.area] as number,
155-
use_josm_q: query[SEARCH_PARAMS.useJOSMQ] as boolean,
156-
confidence: query[SEARCH_PARAMS.confidenceLevel] as number,
157-
checkpoint: `/mnt/efsmount/data/trainings/dataset_${data?.dataset}/output/training_${data?.published_training}/checkpoint${PREDICTION_API_FILE_EXTENSIONS[data?.base_model as BASE_MODELS]}`,
158-
max_angle_change: 15,
159-
model_id: modelId as string,
160-
skew_tolerance: 15,
161-
source: trainingDataset?.source_imagery as string,
162-
zoom_level: currentZoom,
163-
bbox: [
164-
bounds?.getWest(),
165-
bounds?.getSouth(),
166-
bounds?.getEast(),
167-
bounds?.getNorth(),
168-
] as BBOX,
169-
};
170-
171152
const disablePrediction =
172153
currentZoom < MIN_ZOOM_LEVEL_FOR_START_MAPPING_PREDICTION;
173154

@@ -225,18 +206,18 @@ export const StartMappingPage = () => {
225206
...modelPredictions.all,
226207
],
227208
},
228-
`all_predictions_${data.dataset}`,
209+
`all_predictions_${modelInfo.dataset}`,
229210
);
230211
showSuccessToast(TOAST_NOTIFICATIONS.startMapping.fileDownloadSuccess);
231-
}, [modelPredictions]);
212+
}, [modelPredictions, modelInfo]);
232213

233214
const handleAcceptedFeaturesDownload = useCallback(async () => {
234215
geoJSONDowloader(
235216
{ type: "FeatureCollection", features: modelPredictions.accepted },
236-
`accepted_predictions_${data.dataset}`,
217+
`accepted_predictions_${modelInfo.dataset}`,
237218
);
238219
showSuccessToast(TOAST_NOTIFICATIONS.startMapping.fileDownloadSuccess);
239-
}, [modelPredictions]);
220+
}, [modelPredictions, modelInfo]);
240221

241222
const handleFeaturesDownloadToJOSM = useCallback(
242223
(features: Feature[]) => {
@@ -316,13 +297,12 @@ export const StartMappingPage = () => {
316297

317298
return (
318299
<>
319-
<Head title={START_MAPPING_PAGE_CONTENT.pageTitle(data?.name)} />
300+
<Head title={START_MAPPING_PAGE_CONTENT.pageTitle(modelInfo?.name)} />
320301
{/* Mobile dialog */}
321302
<div className="h-screen flex flex-col fullscreen">
322303
<StartMappingMobileDrawer
323304
isOpen={isSmallViewport}
324305
disablePrediction={disablePrediction}
325-
trainingConfig={trainingConfig}
326306
setModelPredictions={setModelPredictions}
327307
modelPredictions={modelPredictions}
328308
map={map}
@@ -332,31 +312,33 @@ export const StartMappingPage = () => {
332312
updateQuery={updateQuery}
333313
modelDetailsPopupIsActive={showModelDetailsPopup}
334314
clearPredictions={clearPredictions}
315+
trainingDataset={trainingDataset as TTrainingDataset}
316+
currentZoom={currentZoom}
317+
modelInfo={modelInfo}
335318
/>
336319
<div className="sticky top-0 bg-white z-10 px-4 xl:px-large py-1 hidden md:block">
337320
{/* Model Details Popup */}
338-
{data && (
321+
{modelInfo && (
339322
<ModelDetailsPopUp
340323
showPopup={showModelDetailsPopup}
341324
handlePopup={handleModelDetailsPopup}
342325
closeMobileDrawer={() => setShowModelDetailsPopup(false)}
343326
anchor={popupAnchorId}
344-
model={data}
327+
model={modelInfo}
345328
trainingDataset={trainingDataset}
346329
trainingDatasetIsPending={trainingDatasetIsPending}
347330
trainingDatasetIsError={trainingDatasetIsError}
348331
/>
349332
)}
350333
{/* Web Header */}
351334
<StartMappingHeader
352-
data={data}
335+
modelInfo={modelInfo}
353336
trainingDatasetIsPending={trainingDatasetIsPending}
354337
modelPredictionsExist={modelPredictionsExist}
355338
trainingDatasetIsError={trainingDatasetIsError}
356339
modelPredictions={modelPredictions}
357340
query={query}
358341
updateQuery={updateQuery}
359-
trainingConfig={trainingConfig}
360342
setModelPredictions={setModelPredictions}
361343
map={map}
362344
disablePrediction={disablePrediction}
@@ -365,6 +347,8 @@ export const StartMappingPage = () => {
365347
handleModelDetailsPopup={handleModelDetailsPopup}
366348
downloadOptions={downloadOptions}
367349
clearPredictions={clearPredictions}
350+
trainingDataset={trainingDataset as TTrainingDataset}
351+
currentZoom={currentZoom}
368352
/>
369353
</div>
370354
<div className="col-span-12 h-[70vh] md:h-full md:border-8 md:border-off-white flex-grow relative map-elements-z-index">
@@ -408,7 +392,7 @@ export const StartMappingPage = () => {
408392
currentZoom={currentZoom}
409393
layers={mapLayers}
410394
tmsBounds={oamTileJSON?.bounds as LngLatBoundsLike}
411-
trainingId={data?.published_training}
395+
trainingId={modelInfo?.published_training}
412396
/>
413397
</div>
414398
</div>

‎frontend/src/features/start-mapping/components/header.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,20 @@ import { ModelPredictionsTracker } from "@/features/start-mapping/components/mod
1111
import { ModelSettings } from "@/features/start-mapping/components/model-settings";
1212
import { SkeletonWrapper } from "@/components/ui/skeleton";
1313
import { TDownloadOptions, TQueryParams } from "@/app/routes/start-mapping";
14-
import { TModel, TModelPredictions, TModelPredictionsConfig } from "@/types";
14+
import { TModel, TModelPredictions, TTrainingDataset } from "@/types";
1515
import { ToolTip } from "@/components/ui/tooltip";
1616
import { useDropdownMenu } from "@/hooks/use-dropdown-menu";
1717
import { UserProfile } from "@/components/layout";
1818
import { START_MAPPING_PAGE_CONTENT } from "@/constants";
1919

2020
const StartMappingHeader = ({
21-
data,
21+
modelInfo,
2222
modelPredictions,
2323
modelPredictionsExist,
2424
trainingDatasetIsPending,
2525
trainingDatasetIsError,
2626
query,
2727
updateQuery,
28-
trainingConfig,
2928
setModelPredictions,
3029
disablePrediction,
3130
map,
@@ -34,15 +33,16 @@ const StartMappingHeader = ({
3433
modelDetailsPopupIsActive,
3534
downloadOptions,
3635
clearPredictions,
36+
trainingDataset,
37+
currentZoom,
3738
}: {
3839
modelPredictionsExist: boolean;
3940
trainingDatasetIsPending: boolean;
4041
trainingDatasetIsError: boolean;
41-
data: TModel;
42+
modelInfo: TModel;
4243
modelPredictions: TModelPredictions;
4344
query: TQueryParams;
4445
updateQuery: (newParams: TQueryParams) => void;
45-
trainingConfig: TModelPredictionsConfig;
4646
setModelPredictions: React.Dispatch<React.SetStateAction<TModelPredictions>>;
4747
map: Map | null;
4848
disablePrediction: boolean;
@@ -51,6 +51,8 @@ const StartMappingHeader = ({
5151
modelDetailsPopupIsActive: boolean;
5252
downloadOptions: TDownloadOptions;
5353
clearPredictions: () => void;
54+
trainingDataset: TTrainingDataset;
55+
currentZoom: number;
5456
}) => {
5557
const { onDropdownHide, onDropdownShow, dropdownIsOpened } =
5658
useDropdownMenu();
@@ -75,10 +77,10 @@ const StartMappingHeader = ({
7577
/>
7678
<div className="flex flex-col md:flex-row md:items-center gap-x-4 z-10">
7779
<p
78-
title={data?.name}
80+
title={modelInfo?.name}
7981
className="text-dark text-body-2base text-nowrap truncate md:max-w-[20px] lg:max-w-[300px] xl:max-w-[400px]"
8082
>
81-
{data?.name ?? "N/A"}
83+
{modelInfo?.name ?? "N/A"}
8284
</p>
8385
<ModelDetailsButton
8486
onClick={handleModelDetailsPopup}
@@ -132,9 +134,12 @@ const StartMappingHeader = ({
132134
<ModelAction
133135
modelPredictions={modelPredictions}
134136
setModelPredictions={setModelPredictions}
135-
trainingConfig={trainingConfig}
136137
map={map}
137138
disablePrediction={disablePrediction}
139+
query={query}
140+
trainingDataset={trainingDataset}
141+
currentZoom={currentZoom}
142+
modelInfo={modelInfo}
138143
/>
139144
<UserProfile hideFullName smallerSize />
140145
</div>

‎frontend/src/features/start-mapping/components/mobile-drawer.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@ import { ModelDetailsButton } from "@/features/start-mapping/components/model-de
77
import { ModelPredictionsTracker } from "@/features/start-mapping/components/model-predictions-tracker";
88
import { ModelSettings } from "@/features/start-mapping/components/model-settings";
99
import { TDownloadOptions, TQueryParams } from "@/app/routes/start-mapping";
10-
import { TModelPredictions, TModelPredictionsConfig } from "@/types";
10+
import { TModel, TModelPredictions, TTrainingDataset } from "@/types";
1111
import { ToolTip } from "@/components/ui/tooltip";
1212
import { useState } from "react";
1313
import { START_MAPPING_PAGE_CONTENT } from "@/constants";
1414

1515
export const StartMappingMobileDrawer = ({
1616
isOpen,
1717
disablePrediction,
18-
trainingConfig,
1918
setModelPredictions,
2019
map,
2120
modelPredictions,
@@ -25,10 +24,12 @@ export const StartMappingMobileDrawer = ({
2524
updateQuery,
2625
modelDetailsPopupIsActive,
2726
clearPredictions,
27+
trainingDataset,
28+
currentZoom,
29+
modelInfo,
2830
}: {
2931
isOpen: boolean;
3032
disablePrediction: boolean;
31-
trainingConfig: TModelPredictionsConfig;
3233
modelPredictions: TModelPredictions;
3334
setModelPredictions: React.Dispatch<React.SetStateAction<TModelPredictions>>;
3435
map: Map | null;
@@ -38,6 +39,9 @@ export const StartMappingMobileDrawer = ({
3839
query: TQueryParams;
3940
updateQuery: (newParams: TQueryParams) => void;
4041
clearPredictions: () => void;
42+
trainingDataset: TTrainingDataset;
43+
currentZoom: number;
44+
modelInfo: TModel;
4145
}) => {
4246
const [showDownloadOptions, setShowDownloadOptions] =
4347
useState<boolean>(false);
@@ -53,11 +57,14 @@ export const StartMappingMobileDrawer = ({
5357
<div className="flex items-center justify-between my-4 gap-x-2">
5458
<div className="w-full basis-5/6">
5559
<ModelAction
56-
trainingConfig={trainingConfig}
60+
query={query}
5761
setModelPredictions={setModelPredictions}
5862
map={map}
5963
disablePrediction={disablePrediction}
6064
modelPredictions={modelPredictions}
65+
trainingDataset={trainingDataset}
66+
currentZoom={currentZoom}
67+
modelInfo={modelInfo}
6168
/>
6269
</div>
6370
<div className="p-2 icon-interaction" id="anchor1">

0 commit comments

Comments
 (0)