Create reaction from the scratch/import from the file (#227)

* Implement upload and empty reaction creation

* Rename scss file

* Renamed file, updated dataset file limit

* Add redirect after successful reaction import

---------

Co-authored-by: Daniil Sloboda <[email protected]>

ui/src/pages/ContributePage/DatasetTopActions/CreateDatasetLayout/CreateDatasetLayout.tsx → ui/src/common/components/FormModal/FormModal.tsx

@@ -16,14 +16,15 @@
 import type { ReactNode } from 'react';
 import { Button, Flex, Modal } from '@mantine/core';
 
-interface CreateDatasetLayoutProps {
+interface FormModalProps {
   onClose: () => void;
   onSubmit: () => void;
   title: string;
   children: ReactNode;
+  submitTitle?: string;
 }
 
-export function CreateDatasetLayout({ onClose, onSubmit, title, children }: Readonly<CreateDatasetLayoutProps>) {
+export function FormModal({ onClose, onSubmit, title, children, submitTitle }: Readonly<FormModalProps>) {
   return (
     <Modal
       opened
@@ -48,7 +49,7 @@ export function CreateDatasetLayout({ onClose, onSubmit, title, children }: Read
             >
               Cancel
             </Button>
-            <Button type="submit">Create Dataset</Button>
+            <Button type="submit">{submitTitle ?? 'Create'}</Button>
           </Flex>
         </Flex>
       </form>

ui/src/pages/ContributePage/DatasetTopActions/CreateDatasetFromFile/CreateDatasetFromFile.tsx

@@ -18,7 +18,7 @@ import { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { selectOrderedGroupsList } from 'store/groups/groups.selectors';
 import { useForm, yupResolver } from '@mantine/form';
-import { CreateDatasetLayout } from '../CreateDatasetLayout/CreateDatasetLayout';
+import { FormModal } from 'common/components/FormModal/FormModal';
 import { type CreateDatasetFromFileFormValues, createDatasetFromFileSchema } from './createDatasetFromFile.schema';
 import type { CreateDatasetFromFilePayload } from 'store/datasets/datasets.types';
 import { createDatasetFromFile } from 'store/datasets/datasets.thunks';
@@ -59,10 +59,11 @@ export function CreateDatasetFromFile({ onClose }: Readonly<CreateDatasetFromFil
   );
 
   return (
-    <CreateDatasetLayout
+    <FormModal
       onClose={onClose}
       onSubmit={form.onSubmit(onSubmit)}
       title="Create Dataset from File"
+      submitTitle="Create Dataset"
     >
       <Select
         data={data}
@@ -76,6 +77,6 @@ export function CreateDatasetFromFile({ onClose }: Readonly<CreateDatasetFromFil
         description=".binpb, .txtpb, or .json"
         {...form.getInputProps('file')}
       />
-    </CreateDatasetLayout>
+    </FormModal>
   );
 }

ui/src/pages/ContributePage/DatasetTopActions/CreateDatasetFromFile/createDatasetFromFile.schema.ts

@@ -15,7 +15,7 @@
  */
 import * as yup from 'yup';
 
-const MAX_FILE_SIZE = 1024 * 1024 * 10;
+const MAX_FILE_SIZE = 1024 * 1024 * 100;
 
 const MAX_FILE_SIZE_MB = (MAX_FILE_SIZE / 1024 / 1024).toFixed(2);
 

ui/src/pages/ContributePage/DatasetTopActions/CreateNewDataset/CreateNewDataset.tsx

@@ -23,7 +23,7 @@ import type { CreateNewDatasetPayload } from 'store/datasets/datasets.types';
 import { createEmptyDataset } from 'store/datasets/datasets.thunks';
 import { useAppDispatch } from 'store/useAppDispatch';
 import { selectIsDatasetCreating } from 'store/datasets/datasets.selectors';
-import { CreateDatasetLayout } from '../CreateDatasetLayout/CreateDatasetLayout';
+import { FormModal } from 'common/components/FormModal/FormModal';
 
 interface CreateNewDatasetProps {
   onClose: () => void;
@@ -63,10 +63,11 @@ export function CreateNewDataset({ onClose }: Readonly<CreateNewDatasetProps>) {
   );
 
   return (
-    <CreateDatasetLayout
+    <FormModal
       onClose={onClose}
       onSubmit={form.onSubmit(onSubmit)}
       title="Create Dataset from Scratch"
+      submitTitle="Create Dataset"
     >
       <Select
         data={data}
@@ -86,6 +87,6 @@ export function CreateNewDataset({ onClose }: Readonly<CreateNewDatasetProps>) {
         disabled={isLoading}
         {...form.getInputProps('description')}
       />
-    </CreateDatasetLayout>
+    </FormModal>
   );
 }

ui/src/pages/DatasetPage/ReactionList/CreateReactionMenu/CreateReactionFromFile/CreateReactionFromFile.module.scss

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.fileInput {
+  margin: 30px 0 40px;
+}

ui/src/pages/DatasetPage/ReactionList/CreateReactionMenu/CreateReactionFromFile/CreateReactionFromFile.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useCallback } from 'react';
+import { FileInput } from '@mantine/core';
+import { useForm, yupResolver } from '@mantine/form';
+import { FormModal } from 'common/components/FormModal/FormModal';
+import { importReactionFromFile } from 'store/reactions/reactions.thunks';
+import { useAppDispatch } from 'store/useAppDispatch';
+import { type CreateReactionFromFileFormValues, createReactionFromFileSchema } from './createReactionFromFile.schema';
+import { type ImportReactionFromFilePayload } from 'store/reactions/reactions.types';
+import classes from './CreateReactionFromFile.module.scss';
+
+interface CreateReactionFromFileProps {
+  onClose: () => void;
+}
+
+export function CreateReactionFromFile({ onClose }: Readonly<CreateReactionFromFileProps>) {
+  const dispatch = useAppDispatch();
+
+  const form = useForm<
+    CreateReactionFromFileFormValues,
+    (values: CreateReactionFromFileFormValues) => ImportReactionFromFilePayload
+  >({
+    mode: 'controlled',
+    transformValues: values => ({
+      file: values.file as File,
+    }),
+    validate: yupResolver(createReactionFromFileSchema),
+  });
+
+  const onSubmit = useCallback(
+    (values: ImportReactionFromFilePayload) => {
+      dispatch(importReactionFromFile(values));
+    },
+    [dispatch],
+  );
+
+  return (
+    <FormModal
+      onClose={onClose}
+      onSubmit={form.onSubmit(onSubmit)}
+      title="Import Reaction from File"
+      submitTitle="Save"
+    >
+      <FileInput
+        className={classes.fileInput}
+        withAsterisk
+        label="Reaction file"
+        accept=".pb,.binpb,.txtpb,.pbtxt,application/json"
+        description=".pb, .binpb, .txtpb, .pbtxt or .json"
+        placeholder="Attach file"
+        {...form.getInputProps('file')}
+      />
+    </FormModal>
+  );
+}

ui/src/pages/DatasetPage/ReactionList/CreateReactionMenu/CreateReactionFromFile/createReactionFromFile.schema.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as yup from 'yup';
+
+const MAX_FILE_SIZE = 1024 * 1024 * 15;
+
+const MAX_FILE_SIZE_MB = (MAX_FILE_SIZE / 1024 / 1024).toFixed(2);
+
+export const createReactionFromFileSchema = yup.object({
+  file: yup
+    .mixed()
+    .required('Reaction file is required')
+    .label('File')
+    .test({
+      message: `Filesize cannot exceed ${MAX_FILE_SIZE_MB} MB`,
+      test: value => {
+        const file = value as File;
+        return file?.size < MAX_FILE_SIZE;
+      },
+    }),
+});
+
+export type CreateReactionFromFileFormValues = yup.InferType<typeof createReactionFromFileSchema>;

ui/src/pages/DatasetPage/ReactionList/CreateReactionMenu/CreateReactionMenu.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useCallback } from 'react';
+import { Button, Menu } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { createEmptyReaction } from 'store/reactions/reactions.thunks';
+import { useAppDispatch } from 'store/useAppDispatch';
+import { AddCircleIcon, ChevronDownIcon } from 'common/icons';
+import { CreateReactionFromFile } from './CreateReactionFromFile/CreateReactionFromFile';
+import classes from './createReactionMenu.module.scss';
+
+export function CreateReactionMenu() {
+  const dispatch = useAppDispatch();
+  const [importFromFileOpened, { open: openImportFromFile, close: closeImportFromFile }] = useDisclosure(false);
+
+  const handleReactionCreate = useCallback(() => dispatch(createEmptyReaction()), [dispatch]);
+
+  return (
+    <>
+      <Menu
+        classNames={{
+          dropdown: classes.dropdown,
+          item: classes.menuItem,
+          itemSection: classes.menuItemSection,
+        }}
+      >
+        <Menu.Target>
+          <Button
+            classNames={{ root: classes.buttonRoot, inner: classes.buttonInner }}
+            leftSection={<AddCircleIcon />}
+            rightSection={<ChevronDownIcon />}
+          >
+            Reaction
+          </Button>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item onClick={handleReactionCreate}>From Scratch</Menu.Item>
+          <Menu.Item onClick={openImportFromFile}>Import from File</Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+
+      {importFromFileOpened && <CreateReactionFromFile onClose={closeImportFromFile} />}
+    </>
+  );
+}

ui/src/pages/DatasetPage/ReactionList/CreateReactionMenu/createReactionMenu.module.scss

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.dropdown {
+  width: 135px;
+  border: none;
+  box-shadow: 0 4px 24px 0 #00000014;
+}
+
+.menuItem {
+  padding: 10px 12px;
+  border-radius: 8px;
+}
+
+.buttonRoot {
+  border-radius: 8px;
+
+  &:active {
+    transform: none;
+  }
+
+  &[data-expanded='true'] {
+    outline: 3px solid #3c78d899;
+  }
+}
+
+.buttonInner {
+  gap: 6px;
+  font-weight: 400;
+}

ui/src/pages/DatasetPage/ReactionList/ReactionList.tsx

@@ -16,13 +16,14 @@
 import { useCallback } from 'react';
 import { Pagination } from 'common/components/Pagination/Pagination';
 import { ReactionCard } from './ReactionCard/ReactionCard';
-import { Button, Flex, Paper, Title } from '@mantine/core';
-import classes from './reactionsList.module.scss';
-import { AddCircleIcon, EmptyIcon } from 'common/icons';
+import { Flex, Paper, Title } from '@mantine/core';
+import { EmptyIcon } from 'common/icons';
 import { useSelector } from 'react-redux';
 import { selectReactionsOrder, selectReactionsPagination } from 'store/reactions/reactions.selectors';
 import { getReactionsPage } from 'store/reactions/reactions.thunks';
 import { useAppDispatch } from 'store/useAppDispatch';
+import { CreateReactionMenu } from './CreateReactionMenu/CreateReactionMenu';
+import classes from './reactionsList.module.scss';
 
 export function ReactionList() {
   const dispatch = useAppDispatch();
@@ -60,12 +61,7 @@ export function ReactionList() {
             <span className={classes.counter}>{pagination.total}</span>
           </Flex>
 
-          <Button
-            classNames={{ root: classes.button, section: classes.buttonSection }}
-            leftSection={<AddCircleIcon />}
-          >
-            Reaction
-          </Button>
+          <CreateReactionMenu />
         </Flex>
 
         {!hasReactions && (

ui/src/pages/DatasetPage/ReactionList/reactionsList.module.scss

@@ -25,10 +25,6 @@
   font-weight: 400;
 }
 
-.buttonSection {
-  margin-right: 10px;
-}
-
 .emptyText {
   color: var(--color-text-secondary-1);
 }

ui/src/store/reactions/reactions.actions.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { createActionFactory } from '../../common/store';
-import type { ReactionWrapper } from './reactions.types';
+import type { ImportReactionFromFilePayload, ReactionWrapper } from './reactions.types';
 import type { CurrentPage, Pages } from '../../common/types';
 
 const { createAsyncAction } = createActionFactory('reactions');
@@ -26,3 +26,9 @@ export const getReactionPageActions = createAsyncAction<Partial<CurrentPage>, Pa
 export const getReactionActions = createAsyncAction<{ datasetId: number; reactionId: number }, ReactionWrapper>('get');
 
 export const renameReactionActions = createAsyncAction<{ reactionId: number; name: string }, ReactionWrapper>('rename');
+
+export const createEmptyReactionActions = createAsyncAction<void, ReactionWrapper>('create_empty');
+
+export const importReactionFromFileActions = createAsyncAction<ImportReactionFromFilePayload, ReactionWrapper>(
+  'import_from_file',
+);