Skip to content

Commit 3585b19

Browse files
Rub21Rub21
committed
Update tab for sinple an pult points pormts
1 parent 6097165 commit 3585b19

File tree

4 files changed

+88
-77
lines changed

4 files changed

+88
-77
lines changed

‎src/components/Decode.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,9 @@ export const Decode = () => {
156156

157157
return (
158158
<>
159+
<DecodeAutomatic />
160+
159161
<DecodePointPromt />
160-
<DecodeAutomatic />
161162
</>
162163
);
163164
};

‎src/components/DecodeAutomatic.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const DecodeAutomatic = () => {
7171

7272
return (
7373
<div
74-
className={`p-2 m-1 rounded ${
74+
className={`p-1 m-0 rounded ${
7575
decoderType == "automatic" ? " bg-gray-300" : ""
7676
}`}
7777
>
@@ -82,7 +82,7 @@ export const DecodeAutomatic = () => {
8282
}`}
8383
onClick={() => requestAutomatic("automatic")}
8484
>
85-
{`Automatic`}
85+
{`Detect objects automatic`}
8686
</button>
8787
</div>
8888
</div>

‎src/components/DecodePointPromt.js‎

Lines changed: 83 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const DecodePointPromt = () => {
2929
dispatchDecoderType,
3030
} = useContext(MainContext);
3131

32-
const [displayPointPromtsMenu, setDisplayPointPromtsMenu] = useState(false);
32+
const [selectedTab, setSelectedTab] = useState("singlePolygon");
3333
const [isForegroundPromtPoint, setIsForegroundPromtPoint] = useState(true);
3434
const [points, setPoints] = useState([]);
3535

@@ -38,22 +38,22 @@ export const DecodePointPromt = () => {
3838
type: "SET_DECODER_TYPE",
3939
payload: decodeType,
4040
});
41-
setDisplayPointPromtsMenu(!displayPointPromtsMenu);
4241
};
4342

4443
// Add point to send request to SAM
4544
useEffect(() => {
46-
if (!map) return;
47-
if (decoderType !== "single_point") return;
48-
if (!activeEncodeImageItem) {
49-
NotificationManager.warning(
50-
`Select an AOI for making predictions within it.`,
51-
3000
52-
);
53-
return;
54-
}
45+
// // || decoderType !== "single_point"
46+
// if (!map || !activeEncodeImageItem) {
47+
// // if (!activeEncodeImageItem) {
48+
// // NotificationManager.warning(
49+
// // `Select an AOI for making predictions within it.`,
50+
// // 3000
51+
// // );
52+
// // }
53+
// return;
54+
// }
5555

56-
const clickHandler = function (e) {
56+
const clickHandler = (e) => {
5757
const coordinates = e.coordinate;
5858
const point = new Feature(new Point(coordinates));
5959

@@ -67,6 +67,7 @@ export const DecodePointPromt = () => {
6767
});
6868
setPoints((prevPoints) => [...prevPoints, point]);
6969
};
70+
7071
map.on("click", clickHandler);
7172
return () => map.un("click", clickHandler);
7273
}, [map, decoderType, activeEncodeImageItem, isForegroundPromtPoint]);
@@ -80,22 +81,14 @@ export const DecodePointPromt = () => {
8081
}, [points]);
8182

8283
const requestPointPromt = async (actionType) => {
83-
if (!map) return;
84-
if (decoderType !== "single_point" && decoderType !== "multi_point") return;
85-
if (!activeEncodeImageItem) {
84+
if (!map || !activeEncodeImageItem || points.length < 1) {
8685
NotificationManager.warning(
87-
`Select an AOI for making predictions within it.`,
88-
3000
89-
);
90-
return;
91-
}
92-
if (points.length < 1) {
93-
NotificationManager.warning(
94-
`Set at least one point to make predictions.`,
86+
`Ensure an AOI and at least one point are selected for predictions.`,
9587
3000
9688
);
9789
return;
9890
}
91+
9992
setSpinnerLoading(true);
10093
const featuresPoints = olFeatures2Features(points);
10194
const coordinatesArray = featuresPoints.map(
@@ -126,14 +119,12 @@ export const DecodePointPromt = () => {
126119
activeEncodeImageItem.id
127120
);
128121
const olFeatures = features2olFeatures(features);
129-
// Add items
130122
dispatchSetItems({
131123
type: "SET_ITEMS",
132124
payload: [...items, ...olFeatures],
133125
});
134126

135127
setPoints([]);
136-
// save in iddexedDB
137128
const items_id = guid();
138129
features.forEach((feature, index) => {
139130
feature.id = `${items_id}_${index}`;
@@ -144,59 +135,78 @@ export const DecodePointPromt = () => {
144135
};
145136

146137
return (
147-
<div
148-
className={`p-2 m-1 rounded ${
149-
decoderType == "single_point" ? " bg-gray-200" : ""
138+
<div className="p-1 m-1 rounded bg-gray-100">
139+
{/* Tab Navigation */}
140+
<div className="flex border-b border-gray-300 mb-4">
141+
<button
142+
className={`flex-1 text-sm focus:outline-none transition-all duration-300 ${
143+
selectedTab === "singlePolygon"
144+
? "border-b-2font-semibold text-orange-ds "
145+
: "text-gray-600 "
150146
}`}
147+
onClick={() => {
148+
setSelectedTab("singlePolygon");
149+
setDecodeType("single_point");
150+
}}
151151
>
152-
<div className="flex flex-row">
153-
<button
154-
className={`custom_button w-full ${
155-
decoderType == "single_point" ? " bg-orange-ds text-white" : ""
156-
}`}
157-
onClick={() => setDecodeType("single_point")}
158-
>
159-
{`Point Input prompts`}
160-
</button>
161-
</div>
162-
{decoderType == "single_point" && (
163-
<>
164-
<div className="flex space-x-2 mt-2">
165-
<button
166-
className={`custom_button w-40 px-2 py-1 ${
167-
isForegroundPromtPoint ? " bg-orange-ds text-white" : ""
168-
}`}
169-
onClick={() => setIsForegroundPromtPoint(true)}
170-
>
171-
Foreground
172-
</button>
173-
<button
174-
className={`custom_button w-40 px-2 py-1 ${
175-
!isForegroundPromtPoint ? " bg-orange-ds text-white" : ""
176-
}`}
177-
onClick={() => setIsForegroundPromtPoint(false)}
178-
>
179-
Background
180-
</button>
181-
</div>
182-
<div className="flex flex-row mt-3">
152+
Single
153+
</button>
154+
<button
155+
className={`flex-1 text-sm focus:outline-none transition-all duration-300 ${
156+
selectedTab === "multiPolygon"
157+
? "border-b-2font-semibold text-orange-ds "
158+
: "text-gray-600 "
159+
}`}
160+
onClick={() => {
161+
setSelectedTab("multiPolygon");
162+
setDecodeType("multi_point");
163+
}}
164+
>
165+
Multi
166+
</button>
167+
</div>
168+
169+
170+
{/* Tab Content based on Selected Tab */}
171+
<div className="mt-4">
172+
{selectedTab === "singlePolygon" && (
173+
<>
174+
175+
{/* Foreground and Background Buttons */}
176+
<div className="flex space-x-2 mt-2">
177+
<button
178+
className={`custom_button w-40 px-2 py-1 ${isForegroundPromtPoint ? "bg-orange-ds text-white" : ""
179+
}`}
180+
onClick={() => setIsForegroundPromtPoint(true)}
181+
>
182+
Foreground
183+
</button>
184+
<button
185+
className={`custom_button w-40 px-2 py-1 ${!isForegroundPromtPoint ? "bg-orange-ds text-white" : ""
186+
}`}
187+
onClick={() => setIsForegroundPromtPoint(false)}
188+
>
189+
Background
190+
</button>
191+
</div>
183192
<button
184-
className={`custom_button w-full`}
193+
className="custom_button w-full text-white mt-3 bg-orange-ds"
185194
onClick={() => requestPointPromt("single_point")}
186195
>
187-
{"Detect single polygon"}
196+
Detect Single Polygon
188197
</button>
189-
</div>
190-
<div className="flex flex-row mt-3">
191-
<button
192-
className={`custom_button w-full`}
193-
onClick={() => requestPointPromt("multi_point")}
194-
>
195-
{"Detect multi polygon"}
196-
</button>
197-
</div>
198-
</>
199-
)}
198+
</>
199+
200+
)}
201+
{selectedTab === "multiPolygon" && (
202+
<button
203+
className="custom_button w-full text-white bg-orange-ds"
204+
onClick={() => requestPointPromt("multi_point")}
205+
>
206+
Detect Multi Polygon
207+
</button>
208+
)}
209+
</div>
200210
</div>
201211
);
202-
};
212+
};

‎src/components/Modal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export const Modal = () => {
102102
<p className="my-4 text-md">
103103
<a
104104
className="text-orange-ds"
105-
href="https://github.com/developmentseed/ds-annotate/issues"
105+
href="https://github.com/openhistoricalmap/ds-annotate/issues"
106106
target="_blank"
107107
rel="noreferrer"
108108
>

0 commit comments

Comments
 (0)