Merge pull request hotosm#122 from hotosm/UI/Enhancements

UI/enhancements
jeafreezy · Jun 30, 2023 · c4c4713 · c4c4713
2 parents af65d66 + ed69352
commit c4c4713
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 50 deletions.
diff --git 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/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
@@ -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
@@ -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

diff --git 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;
diff --git 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);

diff --git 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";
@@ -160,14 +161,42 @@ 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 && (
           <Grid item xs={12}>
             <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/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

diff --git 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",
@@ -174,14 +175,44 @@ 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 && (
           <Grid item xs={12}>
             <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 && (