From 93138732be2bc3291b234f5a1a5873b852f601c6 Mon Sep 17 00:00:00 2001 From: Alexander Sun Date: Mon, 28 Jun 2021 15:28:31 -0400 Subject: [PATCH 1/5] added autocomplete --- packages/client/package.json | 3 ++ .../CreateDatasetDialogButton.tsx | 37 +++++++++++++++---- .../server/src/datasources/dataset-service.ts | 5 +++ packages/server/src/resolvers/Query.ts | 3 ++ packages/server/src/schema/schema.graphql | 1 + packages/server/src/store/index.ts | 23 ++++++++++++ 6 files changed, 64 insertions(+), 8 deletions(-) diff --git a/packages/client/package.json b/packages/client/package.json index 477d96e4..81175f5b 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -2,6 +2,9 @@ "name": "client", "version": "0.0.1", "private": true, + "files": [ + "*/src/assets" + ], "dependencies": { "@apollo/client": "^3.0.2", "@material-ui/core": "^4.11.0", diff --git a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx index 91d16c81..6d8a1a55 100644 --- a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx +++ b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx @@ -14,10 +14,11 @@ import { Typography } from "@material-ui/core"; import gql from "graphql-tag"; -import { useApolloClient, useMutation } from "@apollo/client"; -import { TreeItem } from "@material-ui/lab"; +import { useApolloClient, useMutation, useQuery } from "@apollo/client"; +import { Autocomplete, TreeItem } from "@material-ui/lab"; import { makeStyles } from "@material-ui/core/styles"; import { CloudDownload, ControlPoint, Create, RemoveCircleOutline } from "@material-ui/icons"; +import { GetValidLabels } from "./__generated__/GetValidLabels"; const useStyles = makeStyles((theme) => ({ link: { @@ -62,6 +63,12 @@ enum CreateState { Done } +const GET_VALID_LABELS = gql` + query GetValidLabels { + validLabels + } +`; + const CREATE_DATASET_MUTATION = gql` mutation CreateDataset($classes: [String!]!, $maxImages: Int!) { createDataset(classes: $classes, maxImages: $maxImages) { @@ -84,6 +91,13 @@ export default function CreateDatasetDialogButton(): ReactElement { const [createState, setCreateState] = React.useState(CreateState.Entering); const apolloClient = useApolloClient(); + const { data, loading } = useQuery(GET_VALID_LABELS); + const labelOptions = data + ? data.validLabels + : loading + ? ["Loading Class Suggestions"] + : ["Error w/ Class Suggestions"]; + const [createDataset] = useMutation(CREATE_DATASET_MUTATION, { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -212,12 +226,19 @@ export default function CreateDatasetDialogButton(): ReactElement { )} - update(index, event.target.value)} - className={classes.textfield} + ( + update(index, event.target.value)} + className={classes.textfield} + /> + )} /> diff --git a/packages/server/src/datasources/dataset-service.ts b/packages/server/src/datasources/dataset-service.ts index 7a655aaf..0bc48c43 100644 --- a/packages/server/src/datasources/dataset-service.ts +++ b/packages/server/src/datasources/dataset-service.ts @@ -203,4 +203,9 @@ export class DatasetService extends DataSource { if (name.slice(name.length - 4) === ".zip") fs.createReadStream(savePath).pipe(unzipper.Extract({ path: savePath.replace(".zip", "") })); } + + async getValidLabels(): Promise { + const buffer = await fs.promises.readFile("src/assets/valid_labels.json"); + return JSON.parse(buffer.toString()); + } } diff --git a/packages/server/src/resolvers/Query.ts b/packages/server/src/resolvers/Query.ts index 85ab6a4c..09ec3e4f 100644 --- a/packages/server/src/resolvers/Query.ts +++ b/packages/server/src/resolvers/Query.ts @@ -36,5 +36,8 @@ export const Query: QueryResolvers = { }, testjobs: (_, args, { dataSources }) => { return dataSources.projectService.getTestjobs(); + }, + validLabels: (_, args, { dataSources }) => { + return dataSources.datasetService.getValidLabels(); } }; diff --git a/packages/server/src/schema/schema.graphql b/packages/server/src/schema/schema.graphql index 7cc95d32..ebc928ca 100644 --- a/packages/server/src/schema/schema.graphql +++ b/packages/server/src/schema/schema.graphql @@ -15,6 +15,7 @@ type Query { testjobs: [Testjob!]! projects: [Project!]! dockerState: DockerState! + validLabels: [String!]! } type Mutation { diff --git a/packages/server/src/store/index.ts b/packages/server/src/store/index.ts index ba040897..d0b3db45 100644 --- a/packages/server/src/store/index.ts +++ b/packages/server/src/store/index.ts @@ -194,6 +194,29 @@ export class Project extends Model }; } +interface DatasetCreatorAttributes { + name: string; +} + +type DatasetCreatorCreationAttributes = Optional; + +export class DatasetCreator extends Model + implements DatasetCreatorAttributes { + name: string; +} + +DatasetCreator.init( + { + name: { + type: new DataTypes.STRING(), + allowNull: false + } + }, + { + sequelize + } +); + Dataset.init( { id: { From 7a89efea20f67668f3d7bd3ae0f43b4579439b44 Mon Sep 17 00:00:00 2001 From: Alexander Sun Date: Mon, 28 Jun 2021 16:21:47 -0400 Subject: [PATCH 2/5] missing complete functionality --- .../components/navigationDrawer/CreateDatasetDialogButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx index 6d8a1a55..efa17b46 100644 --- a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx +++ b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx @@ -229,6 +229,7 @@ export default function CreateDatasetDialogButton(): ReactElement { console.log(value)} renderInput={(params) => ( Date: Tue, 29 Jun 2021 15:45:54 -0400 Subject: [PATCH 3/5] Autocomplete works when clicked --- .gitignore | 1 + packages/client/package.json | 3 --- .../CreateDatasetDialogButton.tsx | 22 ++++++++++++++++--- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 7293f902..a4e2ee06 100644 --- a/.gitignore +++ b/.gitignore @@ -183,3 +183,4 @@ build/ dist/ log.txt +*.pyc diff --git a/packages/client/package.json b/packages/client/package.json index 81175f5b..477d96e4 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -2,9 +2,6 @@ "name": "client", "version": "0.0.1", "private": true, - "files": [ - "*/src/assets" - ], "dependencies": { "@apollo/client": "^3.0.2", "@material-ui/core": "^4.11.0", diff --git a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx index efa17b46..66ea2e78 100644 --- a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx +++ b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx @@ -83,6 +83,7 @@ export default function CreateDatasetDialogButton(): ReactElement { const classes = useStyles(); const [open, setOpen] = React.useState(false); const [keys, setKeys] = React.useState([""]); + const [inputs, setInputs] = React.useState([""]); const [errors, setErrors] = React.useState([false]); const [maxNumber, setMaxNumber] = React.useState(0); const [numberError, setNumberError] = React.useState(false); @@ -116,6 +117,7 @@ export default function CreateDatasetDialogButton(): ReactElement { const handleClose = () => { setKeys([""]); + setInputs([""]); setErrors([false]); setCreateID(""); setMaxNumber(0); @@ -125,6 +127,7 @@ export default function CreateDatasetDialogButton(): ReactElement { }; const handleFailed = () => { setKeys([""]); + setInputs([""]); setErrors([false]); setCreateID(""); setMaxNumber(0); @@ -134,6 +137,8 @@ export default function CreateDatasetDialogButton(): ReactElement { const append = () => { const test: string[] = [...keys]; setKeys(test.concat([""])); + const testInputs: string[] = [...inputs]; + setInputs(testInputs.concat([""])); const testErrors: boolean[] = [...errors]; setErrors(testErrors.concat([false])); }; @@ -142,10 +147,18 @@ export default function CreateDatasetDialogButton(): ReactElement { test[index] = element; setKeys(test); }; + const updateInputs = (index: number, element: string) => { + const test: string[] = [...inputs]; + test[index] = element; + setInputs(test); + }; const remove = (index: number) => { const test: string[] = [...keys]; test.splice(index, 1); setKeys(test); + const testInputs: string[] = [...inputs]; + testInputs.splice(index, 1); + setInputs(testInputs); const testErrors: boolean[] = [...errors]; testErrors.splice(index, 1); setErrors(testErrors); @@ -228,15 +241,18 @@ export default function CreateDatasetDialogButton(): ReactElement { console.log(value)} + value={keys[index]} + inputValue={inputs[index]} + onInputChange={(event, newInputValue) => { + updateInputs(index, newInputValue); + }} + onChange={(event, newValue) => update(index, newValue as string)} renderInput={(params) => ( update(index, event.target.value)} className={classes.textfield} /> )} From 3934ac72d4c8f10f63169902ed27a4f33c40ec8d Mon Sep 17 00:00:00 2001 From: Alexander Sun Date: Tue, 6 Jul 2021 15:26:51 -0400 Subject: [PATCH 4/5] debug --- .../navigationDrawer/CreateDatasetDialogButton.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx index 66ea2e78..573589d3 100644 --- a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx +++ b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx @@ -93,6 +93,7 @@ export default function CreateDatasetDialogButton(): ReactElement { const apolloClient = useApolloClient(); const { data, loading } = useQuery(GET_VALID_LABELS); + console.log(data); const labelOptions = data ? data.validLabels : loading @@ -144,11 +145,13 @@ export default function CreateDatasetDialogButton(): ReactElement { }; const update = (index: number, element: string) => { const test: string[] = [...keys]; + console.log(element); test[index] = element; setKeys(test); }; const updateInputs = (index: number, element: string) => { const test: string[] = [...inputs]; + console.log(element); test[index] = element; setInputs(test); }; @@ -168,7 +171,8 @@ export default function CreateDatasetDialogButton(): ReactElement { let error = false; const testErrors: boolean[] = [...errors]; for (let i = 0; i < keys.length; i++) { - testErrors[i] = keys[i].length === 0; + testErrors[i] = keys[i].length === 0 && inputs[i].length === 0; + console.log(keys[i] + " " + inputs[i]); error = error || testErrors[i]; } setErrors(testErrors); @@ -245,8 +249,13 @@ export default function CreateDatasetDialogButton(): ReactElement { inputValue={inputs[index]} onInputChange={(event, newInputValue) => { updateInputs(index, newInputValue); + console.log(newInputValue); }} - onChange={(event, newValue) => update(index, newValue as string)} + onChange={(event, newValue) => { + update(index, newValue as string); + console.log(newValue as string); + }} + renderInput={(params) => ( Date: Wed, 7 Jul 2021 11:50:16 -0400 Subject: [PATCH 5/5] format --- .../components/navigationDrawer/CreateDatasetDialogButton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx index 573589d3..2d31d784 100644 --- a/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx +++ b/packages/client/src/components/navigationDrawer/CreateDatasetDialogButton.tsx @@ -255,7 +255,6 @@ export default function CreateDatasetDialogButton(): ReactElement { update(index, newValue as string); console.log(newValue as string); }} - renderInput={(params) => (