From a640f5cd9525c488727ef2ab88ddd6eea6820566 Mon Sep 17 00:00:00 2001
From: Omran NAJJAR <omran.najjar@gmail.com>
Date: Mon, 19 Jun 2023 13:12:30 +0200
Subject: [PATCH 1/6] On pulish click, refresh the model details to show the
 new published training

---
 .../AIModels/AIModelEditor/AIModelEditor.js   | 71 ++++++++++---------
 .../AIModels/AIModelEditor/Trainings.js       |  5 +-
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/Layout/AIModels/AIModelEditor/AIModelEditor.js b/frontend/src/components/Layout/AIModels/AIModelEditor/AIModelEditor.js
index 294a7723..ed4b03e9 100644
--- a/frontend/src/components/Layout/AIModels/AIModelEditor/AIModelEditor.js
+++ b/frontend/src/components/Layout/AIModels/AIModelEditor/AIModelEditor.js
@@ -142,6 +142,9 @@ const AIModelEditor = (props) => {
     } finally {
     }
   };
+  const refetshModelDetails = () => {
+    refetch();
+  };
   const { mutate, isLoading: isLoadingSaveTraining } =
     useMutation(saveTraining);
   const navigate = useNavigate();
@@ -266,7 +269,7 @@ const AIModelEditor = (props) => {
               error={batchSize === null || batchSize <= 0}
             />
           </Grid>
-          <Grid item xs={12} md={6} container>
+          <Grid item xs={12} md={6}>
             <FormControl component="fieldset">
               <FormLabel component="legend">Zoom Levels</FormLabel>
               <FormGroup row>
@@ -313,7 +316,7 @@ const AIModelEditor = (props) => {
               }}
             />
           </Grid>
-          <Grid item xs={12} md={6} container>
+          <Grid item xs={12} md={6}>
             <FormControl component="fieldset">
               <FormLabel component="legend">Freeze Layers</FormLabel>
               <FormGroup row>
@@ -332,39 +335,36 @@ const AIModelEditor = (props) => {
             </FormControl>
           </Grid>
 
-          <Grid item xs={12} md={6}></Grid>
-          <Grid item xs={12} md={6}></Grid>
-          <Grid container spacing={2}>
-            <Grid item xs={12} md={6}>
-              <Button
-                variant="contained"
-                color="primary"
-                size="small"
-                startIcon={<SaveIcon />}
-                onClick={() => {
-                  console.log("save");
-                  mutate();
-                }}
-                disabled={epochs <= 0 || batchSize <= 0}
-                sx={{ pl: 2 }}
-              >
-                Submit a training request
-              </Button>
-            </Grid>
-            <Grid item xs={12} md={6} textAlign="right">
-              <Button
-                variant="contained"
-                color="primary"
-                size="small"
-                onClick={() => {
-                  handleFeedbackClick(data.published_training);
-                  // add logic to view feedbacks here
-                }}
-                disabled={feedbackCount < 0}
-              >
-                View Feedbacks
-              </Button>
-            </Grid>
+          <Grid item xs={12} md={12}></Grid>
+          <Grid item xs={6} md={6}>
+            <Button
+              variant="contained"
+              color="primary"
+              size="small"
+              startIcon={<SaveIcon />}
+              onClick={() => {
+                console.log("save");
+                mutate();
+              }}
+              disabled={epochs <= 0 || batchSize <= 0}
+              sx={{ pl: 2 }}
+            >
+              Submit a training request
+            </Button>
+          </Grid>
+          <Grid item xs={6} md={6} textAlign="right">
+            <Button
+              variant="contained"
+              color="primary"
+              size="small"
+              onClick={() => {
+                handleFeedbackClick(data.published_training);
+                // add logic to view feedbacks here
+              }}
+              disabled={feedbackCount <= 0}
+            >
+              View Feedbacks
+            </Button>
           </Grid>
 
           {error && (
@@ -377,6 +377,7 @@ const AIModelEditor = (props) => {
               modelId={id}
               datasetId={data.dataset}
               random={random}
+              refetshModelDetails={refetshModelDetails}
             ></Trainings>
           </Grid>
         </Grid>
diff --git a/frontend/src/components/Layout/AIModels/AIModelEditor/Trainings.js b/frontend/src/components/Layout/AIModels/AIModelEditor/Trainings.js
index ab4ab86a..f6526afb 100644
--- a/frontend/src/components/Layout/AIModels/AIModelEditor/Trainings.js
+++ b/frontend/src/components/Layout/AIModels/AIModelEditor/Trainings.js
@@ -27,7 +27,7 @@ const DEFAULT_FILTER = {
   quickFilterValues: [],
   quickFilterLogicOperator: "and",
 };
-const AIModelsList = (props) => {
+const TrainingsList = (props) => {
   const [error, setError] = useState(null);
   const [popupOpen, setPopupOpen] = useState(false);
   const [publishing, setPublishing] = useState(false);
@@ -228,6 +228,7 @@ const AIModelsList = (props) => {
         return;
       }
       console.log("Model published", res.data);
+      props.refetshModelDetails();
       return res.data;
     } catch (e) {
       console.log("isError");
@@ -306,4 +307,4 @@ const AIModelsList = (props) => {
   );
 };
 
-export default AIModelsList;
+export default TrainingsList;

From 33c2c823979401013db5642e1f2a920e72b59530 Mon Sep 17 00:00:00 2001
From: Omran NAJJAR <omran.najjar@gmail.com>
Date: Tue, 27 Jun 2023 12:58:27 +0200
Subject: [PATCH 2/6] Messages added

---
 .../Layout/AIModels/AIModelEditor/DatasetCurrent.js    |  2 +-
 .../Layout/AIModels/AIModelEditor/FeedbackMap.js       |  2 +-
 .../Layout/AIModels/AIModelEditor/FeedbackPopup.js     | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Layout/AIModels/AIModelEditor/DatasetCurrent.js b/frontend/src/components/Layout/AIModels/AIModelEditor/DatasetCurrent.js
index 8242c89c..30819c30 100644
--- a/frontend/src/components/Layout/AIModels/AIModelEditor/DatasetCurrent.js
+++ b/frontend/src/components/Layout/AIModels/AIModelEditor/DatasetCurrent.js
@@ -37,7 +37,7 @@ const DatasetCurrent = (props) => {
       {data && data.dir && data.dir.input && (
         <span>{data.dir.input.len - 1} images</span>
       )}
-      {data === undefined && <span>Not downloaded yet</span>}
+      {data === undefined && !isLoading && <span>Not downloaded yet</span>}
     </>
   );
 };
diff --git a/frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackMap.js b/frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackMap.js
index 050489bb..6d97fa2f 100644
--- a/frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackMap.js
+++ b/frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackMap.js
@@ -14,6 +14,7 @@ const FeedbackMap = ({ feedbackData, sourceImagery }) => {
       setMapData(feedbackData);
     }
   }, [feedbackData]);
+  const [geoJSONLayer, setGeoJSONLayer] = useState(null);
 
   useEffect(() => {
     if (mapData?.features?.length > 0) {
@@ -97,7 +98,6 @@ const FeedbackMap = ({ feedbackData, sourceImagery }) => {
     }
   }, [mapData]);
 
-  const [geoJSONLayer, setGeoJSONLayer] = useState(null);
   const ChangeMapView = ({ geoJSONLayer }) => {
     const map = useMap();
     useEffect(() => {
diff --git a/frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackPopup.js b/frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackPopup.js
index 89fb4e15..07a26a58 100644
--- a/frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackPopup.js
+++ b/frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackPopup.js
@@ -14,7 +14,6 @@ import { FormControl, FormLabel } from "@material-ui/core";
 import FormGroup from "@mui/material/FormGroup";
 import { Checkbox, FormControlLabel } from "@mui/material";
 
-
 const useStyles = makeStyles((theme) => ({
   content: {
     padding: theme.spacing(2),
@@ -66,7 +65,12 @@ const FeedbackPopup = ({
     axios
       .post(
         "/apply/feedback/",
-        { training_id: trainingId, epochs: epochs, batch_size: batchSize, freeze_layers: freezeLayers },
+        {
+          training_id: trainingId,
+          epochs: epochs,
+          batch_size: batchSize,
+          freeze_layers: freezeLayers,
+        },
         { headers: { "access-token": accessToken } }
       )
       .then((response) => {
@@ -247,7 +251,7 @@ const FeedbackPopup = ({
           disabled={
             feedbackData.features.filter(
               (feature) => feature.properties.validated
-            ).length < 5
+            ).length < 1
           }
         >
           Apply Validated Feedback to Model

From 4c509caa6d60d0b4da4a6ea05a5fe0138752cc2b Mon Sep 17 00:00:00 2001
From: Omran NAJJAR <omran.najjar@gmail.com>
Date: Tue, 27 Jun 2023 13:24:18 +0200
Subject: [PATCH 3/6] sorted list of datasets with recent on the top

---
 .../src/components/Layout/AIModels/AIModelNew/DatasetSelect.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Layout/AIModels/AIModelNew/DatasetSelect.js b/frontend/src/components/Layout/AIModels/AIModelNew/DatasetSelect.js
index 495da0a8..934800f0 100644
--- a/frontend/src/components/Layout/AIModels/AIModelNew/DatasetSelect.js
+++ b/frontend/src/components/Layout/AIModels/AIModelNew/DatasetSelect.js
@@ -10,7 +10,7 @@ function DatasetSelect(props) {
     axios
       .get("/dataset/")
       .then((response) => {
-        setDatasets(response.data);
+        setDatasets(response.data.sort((a, b) => (a.id > b.id ? -1 : 1)));
       })
       .catch((error) => {
         console.error(error);

From 287f7aa192525eb25bdb742491c797e7b3c4032c Mon Sep 17 00:00:00 2001
From: Omran NAJJAR <omran.najjar@gmail.com>
Date: Tue, 27 Jun 2023 15:13:00 +0200
Subject: [PATCH 4/6] Datasets and Models lists description

---
 .../components/Layout/AIModels/AIModelsList/AIModelsList.js | 4 +++-
 .../components/Layout/TrainingDS/DatasetList/DatasetList.js | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Layout/AIModels/AIModelsList/AIModelsList.js b/frontend/src/components/Layout/AIModels/AIModelsList/AIModelsList.js
index 7e2d7d3a..89c3edf6 100644
--- a/frontend/src/components/Layout/AIModels/AIModelsList/AIModelsList.js
+++ b/frontend/src/components/Layout/AIModels/AIModelsList/AIModelsList.js
@@ -160,7 +160,9 @@ const AIModelsList = (props) => {
         </Grid>
         <Grid item xs={12}>
           <Typography variant="body1" component="div">
-            Description about the list of models
+            Each model is trained using a specific training data and has a
+            status. Published Models can be used to predect features on the same
+            imagery used in the training dataset.
           </Typography>
         </Grid>
         {error && (
diff --git a/frontend/src/components/Layout/TrainingDS/DatasetList/DatasetList.js b/frontend/src/components/Layout/TrainingDS/DatasetList/DatasetList.js
index 0ea4e679..e5c8bbdb 100644
--- a/frontend/src/components/Layout/TrainingDS/DatasetList/DatasetList.js
+++ b/frontend/src/components/Layout/TrainingDS/DatasetList/DatasetList.js
@@ -174,7 +174,11 @@ const DatasetList = (props) => {
         </Grid>
         <Grid item xs={12}>
           <Typography variant="body1" component="div">
-            Description long
+            A dataset would be a list of area of interests (AIOs) and its
+            labels. OpenStreetMap data can be downlaoded automatically and used
+            as initial labels. It is our responsibility as model creators to
+            make sure labels align with the feature before proceeding to
+            training phase.
           </Typography>
         </Grid>
         {error && (

From e621f0a735d48b94cd8e6e266d07ff9a5be04f83 Mon Sep 17 00:00:00 2001
From: Omran NAJJAR <omran.najjar@gmail.com>
Date: Tue, 27 Jun 2023 15:13:22 +0200
Subject: [PATCH 5/6] AOI count and title tooltips

---
 .../components/Layout/TrainingDS/DatasetEditor/AOI.js    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js b/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
index f89d8966..7ca4bc55 100644
--- a/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
+++ b/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
@@ -13,7 +13,6 @@ import {
   Typography,
 } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
-
 import { styled } from "@mui/material/styles";
 import DeleteIcon from "@mui/icons-material/Delete";
 import MapIcon from "@mui/icons-material/Map";
@@ -86,9 +85,11 @@ const AOI = (props) => {
   return (
     <>
       <Grid item md={12} className="card">
-        <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
-          List of Area of Interests
-        </Typography>
+        <Tooltip title="For each AOI, we need to make sure labels inside it are alighed and complete to acheive best model accuracy">
+          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
+            List of Area of Interests{` (${props.mapLayers.length})`}
+          </Typography>
+        </Tooltip>
         <Demo>
           {props.mapLayers && props.mapLayers.length > PER_PAGE && (
             <Pagination

From ed69352dc872d2ee95cf0b11d862a3e7a29b910f Mon Sep 17 00:00:00 2001
From: Omran NAJJAR <omran.najjar@gmail.com>
Date: Thu, 29 Jun 2023 12:04:51 +0200
Subject: [PATCH 6/6] If a filter exists, show an info message with option to
 remove filter

---
 .../AIModels/AIModelsList/AIModelsList.js     | 27 +++++++++++++++++
 .../TrainingDS/DatasetList/DatasetList.js     | 29 ++++++++++++++++++-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Layout/AIModels/AIModelsList/AIModelsList.js b/frontend/src/components/Layout/AIModels/AIModelsList/AIModelsList.js
index 89c3edf6..c1fb802b 100644
--- a/frontend/src/components/Layout/AIModels/AIModelsList/AIModelsList.js
+++ b/frontend/src/components/Layout/AIModels/AIModelsList/AIModelsList.js
@@ -5,6 +5,7 @@ import {
   Container,
   Grid,
   IconButton,
+  Link,
   Tooltip,
   Typography,
 } from "@mui/material";
@@ -170,6 +171,32 @@ const AIModelsList = (props) => {
             <Alert severity="error">{error}</Alert>
           </Grid>
         )}
+        {localStorage.getItem("modelFilter") !== null &&
+          JSON.parse(localStorage.getItem("modelFilter")).items.length > 0 &&
+          JSON.parse(localStorage.getItem("modelFilter")).items[0].value && (
+            <Grid item xs={12}>
+              <Grid container justifyContent="flex-end">
+                <Alert severity="info">
+                  Below list is filtered, click{" "}
+                  <Link
+                    href="#"
+                    color="inherit"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      localStorage.setItem(
+                        "modelFilter",
+                        JSON.stringify(DEFAULT_FILTER)
+                      );
+                      refetch();
+                    }}
+                  >
+                    here
+                  </Link>{" "}
+                  to show all models
+                </Alert>
+              </Grid>
+            </Grid>
+          )}
         <Grid item xs={12}>
           {isLoading && <p>Loading ... </p>}
           {!isLoading && (
diff --git a/frontend/src/components/Layout/TrainingDS/DatasetList/DatasetList.js b/frontend/src/components/Layout/TrainingDS/DatasetList/DatasetList.js
index e5c8bbdb..641cfff7 100644
--- a/frontend/src/components/Layout/TrainingDS/DatasetList/DatasetList.js
+++ b/frontend/src/components/Layout/TrainingDS/DatasetList/DatasetList.js
@@ -5,6 +5,7 @@ import {
   Container,
   Grid,
   IconButton,
+  Link,
   Tooltip,
   Typography,
 } from "@mui/material";
@@ -19,7 +20,7 @@ import { trainingDSStatus } from "../../../../utils";
 import OSMUser from "../../../Shared/OSMUser";
 
 const DEFAULT_FILTER = {
-  items: [{ columnField: "created_date", id: 8537, operatorValue: "contains" }],
+  items: [],
   linkOperator: "and",
   quickFilterValues: [],
   quickFilterLogicOperator: "and",
@@ -186,6 +187,32 @@ const DatasetList = (props) => {
             <Alert severity="error">{error}</Alert>
           </Grid>
         )}
+        {localStorage.getItem("dsFilter") !== null &&
+          JSON.parse(localStorage.getItem("dsFilter")).items.length > 0 &&
+          JSON.parse(localStorage.getItem("dsFilter")).items[0].value && (
+            <Grid item xs={12}>
+              <Grid container justifyContent="flex-end">
+                <Alert severity="info">
+                  Below list is filtered, click{" "}
+                  <Link
+                    href="#"
+                    color="inherit"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      localStorage.setItem(
+                        "dsFilter",
+                        JSON.stringify(DEFAULT_FILTER)
+                      );
+                      refetch();
+                    }}
+                  >
+                    here
+                  </Link>{" "}
+                  to show all training dataset
+                </Alert>
+              </Grid>
+            </Grid>
+          )}
         <Grid item xs={12}>
           {isLoading && <p>Loading ... </p>}
           {!isLoading && (