Merge pull request #263 from natrimmer/223-only-accepted-features-dow…

…nload Closes #223 [Only accepted features should be included in the downloa…
hotosm · Sep 3, 2024 · e26018a · e26018a
2 parents 1aa818c + de5ebef
commit e26018a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/frontend/src/components/Layout/Start/Prediction/EditableGeoJSON.js b/frontend/src/components/Layout/Start/Prediction/EditableGeoJSON.js
@@ -96,6 +96,7 @@ const EditableGeoJSON = ({
   trainingId,
   sourceImagery,
   refestchFeeedback,
+  onAcceptFeature,
 }) => {
   const onPMCreate = (event) => {
     console.log("Created");
@@ -258,6 +259,7 @@ const EditableGeoJSON = ({
           .querySelector("#rightButton")
           .addEventListener("click", () => {
             feature.properties.action = "ACCEPT";
+            onAcceptFeature(feature);
             console.log("popup layer ", layer);
             // handle submitting feedback
             mutateSubmitFeedback(layer);

diff --git a/frontend/src/components/Layout/Start/Prediction/Prediction.js b/frontend/src/components/Layout/Start/Prediction/Prediction.js
@@ -85,6 +85,7 @@ const Prediction = () => {
   const [skewTolerance, setSkewTolerance] = useState(15);
   const [tolerance, setTolerance] = useState(0.3);
   const [areaThreshold, setAreaThreshold] = useState(4);
+  const [acceptedFeatures, setAcceptedFeatures] = useState([]);
   const fetchData = async () => {
     setLoading(true);
     try {
@@ -235,6 +236,23 @@ const Prediction = () => {
     URL.revokeObjectURL(url);
   };
 
+  const downloadAcceptedFeatures = () => {
+    if (acceptedFeatures.length === 0) {
+      return;
+    }
+
+    const content = JSON.stringify(acceptedFeatures);
+    const blob = new Blob([content], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "accepted_predictions.geojson";
+    link.click();
+
+    URL.revokeObjectURL(url);
+  };
+
   const {
     mutate: callPredict,
     data: returnedpredictions,
@@ -297,6 +315,10 @@ const Prediction = () => {
     return updatedPredictions;
   });
 
+  const handleAcceptFeature = (feature) => {
+    setAcceptedFeatures((prev) => [...prev, feature]);
+  };
+
   const handleSubmitFeedback = async () => {
     setFeedbackLoading(true);
     console.log(predictions.features.length);
@@ -565,6 +587,7 @@ const Prediction = () => {
                   refestchFeeedback={() => {
                     refetchFeedback();
                   }}
+                  onAcceptFeature={handleAcceptFeature}
                 />
               )}
             </FeatureGroup>
@@ -813,8 +836,20 @@ const Prediction = () => {
                 size="small"
                 sx={{ mt: 1 }}
               >
-                Download as Geojson
+                Download All Features as Geojson
               </LoadingButton>
+
+              {acceptedFeatures.length > 0 && (
+                <LoadingButton
+                  variant="contained"
+                  onClick={downloadAcceptedFeatures}
+                  color="secondary"
+                  size="small"
+                  sx={{ mt: 1 }}
+                >
+                  Download Accepted Features as Geojson
+                </LoadingButton>
+              )}
             </Paper>
           )}
         </Grid>