Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI/enhancements #122

Merged
merged 6 commits into from
Jun 30, 2023
Merged

UI/enhancements #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dd6ea29
On pulish click, refresh the model details to show the new published …
omranlm Jun 19, 2023
50a3712
Messages added
omranlm Jun 27, 2023
0863ad9
sorted list of datasets with recent on the top
omranlm Jun 27, 2023
d9b8e37
Datasets and Models lists description
omranlm Jun 27, 2023
cc8c810
AOI count and title tooltips
omranlm Jun 27, 2023
1bb5231
If a filter exists, show an info message with option to remove filter
omranlm Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 36 additions & 35 deletions frontend/src/components/Layout/AIModels/AIModelEditor/AIModelEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,9 @@ const AIModelEditor = (props) => {
} finally {
}
};
const refetshModelDetails = () => {
refetch();
};
const { mutate, isLoading: isLoadingSaveTraining } =
useMutation(saveTraining);
const navigate = useNavigate();
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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 && (
Expand All @@ -377,6 +377,7 @@ const AIModelEditor = (props) => {
modelId={id}
datasetId={data.dataset}
random={random}
refetshModelDetails={refetshModelDetails}
></Trainings>
</Grid>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Layout/AIModels/AIModelEditor/DatasetCurrent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
</>
);
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const FeedbackMap = ({ feedbackData, sourceImagery }) => {
setMapData(feedbackData);
}
}, [feedbackData]);
const [geoJSONLayer, setGeoJSONLayer] = useState(null);

useEffect(() => {
if (mapData?.features?.length > 0) {
Expand Down Expand Up @@ -97,7 +98,6 @@ const FeedbackMap = ({ feedbackData, sourceImagery }) => {
}
}, [mapData]);

const [geoJSONLayer, setGeoJSONLayer] = useState(null);
const ChangeMapView = ({ geoJSONLayer }) => {
const map = useMap();
useEffect(() => {
Expand Down
10 changes: 7 additions & 3 deletions frontend/src/components/Layout/AIModels/AIModelEditor/FeedbackPopup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -247,7 +251,7 @@ const FeedbackPopup = ({
disabled={
feedbackData.features.filter(
(feature) => feature.properties.validated
).length < 5
).length < 1
}
>
Apply Validated Feedback to Model
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/Layout/AIModels/AIModelEditor/Trainings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -228,6 +228,7 @@ const AIModelsList = (props) => {
return;
}
console.log("Model published", res.data);
props.refetshModelDetails();
return res.data;
} catch (e) {
console.log("isError");
Expand Down Expand Up @@ -306,4 +307,4 @@ const AIModelsList = (props) => {
);
};

export default AIModelsList;
export default TrainingsList;
2 changes: 1 addition & 1 deletion frontend/src/components/Layout/AIModels/AIModelNew/DatasetSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
31 changes: 30 additions & 1 deletion frontend/src/components/Layout/AIModels/AIModelsList/AIModelsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Container,
Grid,
IconButton,
Link,
Tooltip,
Typography,
} from "@mui/material";
Expand Down Expand Up @@ -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 && (
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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
Expand Down
35 changes: 33 additions & 2 deletions frontend/src/components/Layout/TrainingDS/DatasetList/DatasetList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Container,
Grid,
IconButton,
Link,
Tooltip,
Typography,
} from "@mui/material";
Expand All @@ -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",
Expand Down Expand Up @@ -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 && (
Expand Down