Show original DS AOIs & sucess message

hotosm · Aug 15, 2023 · 93e4728 · 93e4728
1 parent f83ffed
commit 93e4728
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 7 deletions.
diff --git a/frontend/src/components/Layout/AIModels/AIModelEditor/AIModelEditor.js b/frontend/src/components/Layout/AIModels/AIModelEditor/AIModelEditor.js
@@ -80,12 +80,15 @@ const AIModelEditor = (props) => {
       refetchInterval: 60000,
     }
   );
+  const [isLoadingFeedbackCount, setIsLoadingFeedbackCount] = useState(true);
   const getFeedbackCount = async (trainingId) => {
     try {
+      setFeedbackCount(0);
       const response = await axios.get(`/feedback/?training=${trainingId}`);
       setFeedbackData(response.data);
       console.log(`/feedback/?training=${trainingId}`, response.data);
       setFeedbackCount(response.data.features.length);
+      setIsLoadingFeedbackCount(false);
     } catch (error) {
       console.error("Error fetching feedback information:", error);
     }
@@ -366,8 +369,11 @@ const AIModelEditor = (props) => {
                 );
               }}
               disabled={feedbackCount <= 0}
+              loading={isLoadingFeedbackCount}
             >
-              View Feedbacks
+              {feedbackCount > 0
+                ? "View Feedbacks"
+                : "No feedback for published training"}
             </LoadingButton>
           </Grid>
 

diff --git a/frontend/src/components/Layout/Feedback/Feedback.js b/frontend/src/components/Layout/Feedback/Feedback.js
@@ -76,6 +76,31 @@ const Feedback = (props) => {
     } finally {
     }
   };
+  const [originalAOIs, setOriginalAOIs] = useState(null);
+  const [datasetId, setDatasetId] = useState(null);
+  const getOriginalAOIs = async () => {
+    try {
+      const headers = {
+        "access-token": accessToken,
+      };
+      const res = await axios.get(`/model/${id}`, null, {
+        headers,
+      });
+
+      if (res.error) {
+      } else {
+        const datasetId = res.data.dataset;
+        setDatasetId(datasetId);
+        const resAOIs = await axios.get(`/aoi/?dataset=${datasetId}`, null, {
+          headers,
+        });
+        setOriginalAOIs(resAOIs.data);
+      }
+    } catch (e) {
+      console.log("isError", e);
+    } finally {
+    }
+  };
   //   const { data: feedbackData, isLoading } = useQuery(
   //     "getFeedback" + trainingId,
   //     getFeedback,
@@ -85,7 +110,7 @@ const Feedback = (props) => {
   //   );
   useEffect(() => {
     getFeedback();
-
+    getOriginalAOIs();
     return () => {};
   }, []);
 
@@ -249,6 +274,9 @@ const Feedback = (props) => {
     return null;
   }
   const navigate = useNavigate();
+  const onEachFeatureOriginalAOIs = (feature, layer) => {
+    layer.bindPopup("Original dataset AOI");
+  };
   return (
     <>
       {!feedbackData && (
@@ -337,6 +365,16 @@ const Feedback = (props) => {
                       weight: 4,
                     }}
                   />
+                  <GeoJSON
+                    key={Math.random()}
+                    data={originalAOIs}
+                    pmIgnore={false}
+                    style={{
+                      color: "rgb(51, 136, 255)",
+                      weight: 4,
+                    }}
+                    onEachFeature={onEachFeatureOriginalAOIs}
+                  />
                   {zoom >= 19 && (
                     <GeoJSON
                       key={JSON.stringify(labelsData)}
@@ -397,8 +435,19 @@ const Feedback = (props) => {
                 , Training id: {trainingId}
               </Typography>
               <Typography variant="body1" component="h2">
-                Total feedbacks: {feedbackData && feedbackData.features.length}
+                <Link
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    navigate("/training-datasets/" + datasetId);
+                  }}
+                >
+                  Original dataset id: {datasetId}
+                </Link>
               </Typography>
+              <Typography variant="body1" component="h2">
+                Total feedbacks: {feedbackData && feedbackData.features.length}
+              </Typography>{" "}
               <Typography variant="body1" component="h2">
                 Zoom: {zoom.toFixed(1)}
               </Typography>
@@ -421,7 +470,10 @@ const Feedback = (props) => {
                 ></FeedbackAOI>
               )}
             </Grid>
-            <FeedackTraining trainingId={trainingId}></FeedackTraining>
+            <FeedackTraining
+              trainingId={trainingId}
+              modelId={id}
+            ></FeedackTraining>
           </Grid>
         </Grid>
       )}

diff --git a/frontend/src/components/Layout/Feedback/FeedbackTraining.js b/frontend/src/components/Layout/Feedback/FeedbackTraining.js
@@ -1,24 +1,29 @@
 import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
 import {
+  Alert,
+  AlertTitle,
   Checkbox,
   FormControl,
   FormControlLabel,
   FormGroup,
   FormLabel,
   Grid,
+  Link,
   TextField,
 } from "@mui/material";
 import React, { useContext, useState } from "react";
 import AuthContext from "../../../Context/AuthContext";
 import axios from "../../../axios";
 import { useMutation } from "react-query";
+import { useNavigate } from "react-router-dom";
 
 const FeedackTraining = (props) => {
   const [epochs, setEpochs] = useState(20);
   const [batchSize, setBatchSize] = useState(8);
   const [error, setError] = useState(null);
   const { accessToken } = useContext(AuthContext);
-  const publishModel = async () => {
+  const navigate = useNavigate();
+  const submitFeedbackTraining = async () => {
     try {
       const headers = {
         "access-token": accessToken,
@@ -51,7 +56,12 @@ const FeedackTraining = (props) => {
     }
   };
 
-  const { mutate, isLoading } = useMutation(publishModel);
+  const {
+    mutate,
+    isLoading,
+    status,
+    error: apiError,
+  } = useMutation(submitFeedbackTraining);
   return (
     <Grid item xs={12} className="card">
       <TextField
@@ -72,7 +82,7 @@ const FeedackTraining = (props) => {
         fullWidth
         margin="normal"
       />
-      <FormControl margin="5,5">
+      <FormControl margin="normal">
         <FormLabel component="legend">Freeze Layers</FormLabel>
         <FormGroup row>
           <FormControlLabel
@@ -101,6 +111,29 @@ const FeedackTraining = (props) => {
       >
         Apply Feedback training to Model
       </LoadingButton>
+
+      {status === "success" && (
+        <Alert severity="success">
+          <AlertTitle>
+            Training is submitted successfully, go to{" "}
+            <Link
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                navigate("/ai-models/" + props.modelId);
+              }}
+            >
+              Model id: {props.modelId}
+            </Link>{" "}
+            for more details
+          </AlertTitle>
+        </Alert>
+      )}
+      {apiError && (
+        <Alert severity="error">
+          <AlertTitle>{apiError}</AlertTitle>
+        </Alert>
+      )}
     </Grid>
   );
 };