Merge pull request #193 from DANS-KNAW/demo

Demo

apps/digitaltwins/src/config/theme.ts

@@ -8,16 +8,16 @@ import grey from "@mui/material/colors/grey";
 const customTheme = createTheme({
   palette: {
     primary: {
-      light: "#E4F9FF",
-      main: "#38a7d4",
-      dark: "#1f97c8",
+      light: "#27a56a",
+      main: "#007663",
+      dark: "#036354",
       contrastText: "#fff",
     },
     secondary: {
-      light: "#ff7961",
-      main: "#f44336",
-      dark: "#ba000d",
-      contrastText: "#000",
+      light: "#00add9",
+      main: "#004b85",
+      dark: "#00365f",
+      contrastText: "#fff",
     },
   },
   typography: {

apps/ohsmart/src/config/form.ts

@@ -49,7 +49,7 @@ const form: FormConfig = {
     embargoDateMin: 2, // days in the future
     embargoDateMax: 18250,
     displayProcesses: false,
-    maxSize: 9985798963, // max file size that can be uploaded in bytes
+    maxSize: 10000000000, // max file size that can be uploaded in bytes
   },
 };
 

packages/deposit/src/deposit/Deposit.tsx

@@ -46,7 +46,7 @@ import {
 } from "@dans-framework/utils";
 import type { Page } from "@dans-framework/pages";
 import { useAuth } from "react-oidc-context";
-import { useFetchSavedMetadataQuery } from "./depositApi";
+import { useFetchSavedMetadataQuery } from "../features/submit/submitApi";
 import {
   useValidateAllKeysQuery,
   getFormActions,

packages/deposit/src/features/submit/submitApi.ts

@@ -8,12 +8,14 @@ import moment from "moment";
 import { enqueueSnackbar } from "notistack";
 import i18n from "../../languages/i18n";
 import { formatFormData } from "./submitHelpers";
+import type { SavedFormResponse } from "../../types/Metadata";
 
 export const submitApi = createApi({
   reducerPath: "submitApi",
   baseQuery: fetchBaseQuery({
-    baseUrl: `${import.meta.env.VITE_PACKAGING_TARGET}/inbox/`,
+    baseUrl: `${import.meta.env.VITE_PACKAGING_TARGET}`,
   }),
+  tagTypes: ["Forms"],
   endpoints: (build) => ({
     submitData: build.mutation({
       query: ({ user, actionType, id, metadata, config, files }) => {
@@ -55,12 +57,13 @@ export const submitApi = createApi({
           : `dataset/${actionType === "save" ? "DRAFT" : "PUBLISH"}`;
 
         return ({
-          url: submitUrl,
+          url: `inbox/${submitUrl}`,
           method: "POST",
           headers: headers,
           body: data,
         })
       },
+      invalidatesTags: (_res, _err, arg ) => [{ type: "Forms", id: arg.id }],
       transformResponse: (response, _meta, arg) => {
         store.dispatch(setMetadataSubmitStatus(
           arg.actionType === "save" ? "saved" : "submitted",
@@ -89,7 +92,34 @@ export const submitApi = createApi({
         });
       },
     }),
+    fetchSavedMetadata: build.query({
+      query: (id) => ({
+        url: `dataset/${id}`,
+        headers: { Accept: "application/json" },
+      }),
+      providesTags: (_res, _err, id) => [{ type: "Forms", id }],
+      transformResponse: (response: SavedFormResponse) => {
+        // mark previously submitted files
+        const modifiedResponse = {
+          ...response,
+          md: {
+            ...response.md,
+            "file-metadata":
+              response.md["file-metadata"] ?
+                response.md["file-metadata"].map((f) => ({
+                  ...f,
+                  submittedFile: true,
+                }))
+              : [],
+          },
+        };
+        return modifiedResponse;
+      },
+    }),
   }),
 });
 
-export const { useSubmitDataMutation } = submitApi;
+export const { 
+  useSubmitDataMutation,
+  useFetchSavedMetadataQuery
+} = submitApi;

packages/deposit/src/redux/store.ts

@@ -3,7 +3,6 @@ import metadataReducer from "../features/metadata/metadataSlice";
 import filesReducer from "../features/files/filesSlice";
 import submitReducer from "../features/submit/submitSlice";
 import depositReducer from "../deposit/depositSlice";
-import { depositApi } from "../deposit/depositApi";
 import { orcidApi } from "../features/metadata/api/orcid";
 import { rorApi } from "../features/metadata/api/ror";
 import { gettyApi } from "../features/metadata/api/getty";
@@ -37,7 +36,6 @@ export const store = configureStore({
     [dansUtilityApi.reducerPath]: dansUtilityApi.reducer,
     [rdaApi.reducerPath]: rdaApi.reducer,
     [languagesApi.reducerPath]: languagesApi.reducer,
-    [depositApi.reducerPath]: depositApi.reducer,
     [validateKeyApi.reducerPath]: validateKeyApi.reducer,
     submit: submitReducer,
     deposit: depositReducer,
@@ -57,7 +55,6 @@ export const store = configureStore({
       .concat(dansUtilityApi.middleware)
       .concat(rdaApi.middleware)
       .concat(languagesApi.middleware)
-      .concat(depositApi.middleware)
       .concat(validateKeyApi.middleware)
       .concat(errorLogger),
 });

packages/file-mapper/src/features/FileMapper.tsx

@@ -10,7 +10,7 @@ import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import { useTranslation } from "react-i18next";
 import { Step1, Step2, Step3 } from './Steps';
-import { getActiveStep, setActiveStep, getFile, getSavedMap, getMapping } from './fileMapperSlice';
+import { getActiveStep, setActiveStep, getFile, getSavedMap, getMapping, getFileError } from './fileMapperSlice';
 import { useSubmitMapMutation } from './fileMapperApi';
 import { useAppSelector, useAppDispatch } from "../redux/hooks";
 import CircularProgress from '@mui/material/CircularProgress';
@@ -32,6 +32,7 @@ const FileMapper = ({setMappedForm, page}: {
   const file = useAppSelector(getFile);
   const savedMap = useAppSelector(getSavedMap);
   const mapping = useAppSelector(getMapping);
+  const fileError = useAppSelector(getFileError);
   const [ submitMap, { isLoading, data } ] = useSubmitMapMutation();
 
   // set page title
@@ -99,15 +100,15 @@ const FileMapper = ({setMappedForm, page}: {
                 disabled={activeStep === 0}
                 onClick={handleBack}
                 sx={{ mr: 1 }}
-                variant="outlined"
+                variant="contained"
               >
                 {t("buttonBack")}
               </Button>
               <Box sx={{ flex: '1 1 auto' }} />
               <Button 
                 onClick={handleNext} 
-                disabled={!file || isLoading}
-                variant="outlined"   
+                disabled={!file || isLoading || fileError !== undefined }
+                variant="contained"   
               >
                 {
                   activeStep === steps.length - 1 || (file && savedMap)

packages/file-mapper/src/features/Steps.tsx

@@ -15,6 +15,7 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
+import CircularProgress from '@mui/material/CircularProgress';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
@@ -24,14 +25,21 @@ import Checkbox from '@mui/material/Checkbox';
 import Divider from '@mui/material/Divider';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
-import type { DarwinOptions, Saves, SerializedFile } from "../types";
+import type { DarwinOptions, Saves, SerializedFile, FileError } from "../types";
 import { 
   getFile, 
   setFile, 
   getMapping, 
   setMapping, 
   getSavedMap,
   setSavedMap,
+  resetMapping,
+  setFileCols,
+  getFileCols,
+  resetFileCols,
+  getFileError,
+  setFileError,
+  resetFileError,
 } from './fileMapperSlice';
 import { useFetchDarwinTermsQuery } from "./fileMapperApi";
 import { useAppSelector, useAppDispatch } from "../redux/hooks";
@@ -49,6 +57,9 @@ const saves = [
   },
 ];
 
+// define max number of rows a file selected for processing can contain
+const maxRows = 10;
+
 const StepWrap = ({ title, children }: { title: string; children: ReactNode }) => 
   <Box sx={{pt: 2, pb: 1}}>
     <Typography variant="h2">{title}</Typography>
@@ -62,6 +73,7 @@ export const Step1 = () => {
   const dispatch = useAppDispatch();
   const file = useAppSelector(getFile);
   const savedMap = useAppSelector(getSavedMap);
+  const fileError = useAppSelector(getFileError);
 
   const onDrop = async (files: File[]) => {
     // serialize files to store in redux
@@ -72,6 +84,11 @@ export const Step1 = () => {
     };
 
     dispatch(setFile(serializedFile));
+
+    // reset saved mapping and column values after selecting a different file
+    dispatch(resetMapping());
+    dispatch(resetFileCols());
+    dispatch(resetFileError());
   }
 
   const {  
@@ -119,6 +136,11 @@ export const Step1 = () => {
               <Alert severity="success">
                 {t("selectedFile", { name: file.name, size: (file.size / 1024).toFixed(0) })}
               </Alert>
+              {fileError && 
+                <Alert severity="error">
+                  {t(fileError, {max: maxRows})}
+                </Alert>
+              }
             </Box> 
           }
         </Box>
@@ -151,24 +173,37 @@ export const Step1 = () => {
 }
 
 export const Step2 = () => {
-  const [ fileCols, setFileCols ] = useState<string[]>([]);
   const { t } = useTranslation("steps");
+  const dispatch = useAppDispatch();
   const file = useAppSelector(getFile);
+  const fileCols = useAppSelector(getFileCols);
+  const fileError = useAppSelector(getFileError);
+  // loading indicator only if new file needs to be read
+  const [ loading, setLoading ] = useState<boolean>( !Array.isArray(fileCols) && !fileError );
 
   useEffect(() => {
     const reader = new FileReader();
 
     reader.onload = (event) => {
+      // parse the xlsx/csv file
       const workbook = XLSX.read(event.target?.result, { type: 'binary' });
       const sheetName = workbook.SheetNames[0];
       const sheet = workbook.Sheets[sheetName];
       const sheetData = XLSX.utils.sheet_to_json(sheet, { header: 1 })[0];
-
-      Array.isArray(sheetData) && setFileCols(sheetData);
+      // check to see if sheet doesn't have too many rows
+      const rowCount = XLSX.utils.sheet_to_json(sheet).length;
+      if (rowCount > maxRows) {
+        dispatch(setFileError("tooManyRows"));
+      } else {
+        // save column data to store so we only have to load and parse once
+        Array.isArray(sheetData) && dispatch(setFileCols(sheetData));
+      }
+      setLoading(false);
     };
 
-    if (file) {
-      // convert file url back to blob
+    if (file && !fileCols && !fileError) {
+      dispatch(setFileError(undefined));
+      // if no file loaded yet, convert file url back to blob
       (async () => {
         const fetchedFile = await fetch(file.url);
         const blob = await fetchedFile.blob();
@@ -177,7 +212,7 @@ export const Step2 = () => {
         }
       })();
     }
-  }, [file]);
+  }, [file, fileCols, fileError]);
 
   return (
     <StepWrap title={t("createMapping")}>
@@ -190,7 +225,20 @@ export const Step2 = () => {
             </TableRow>
           </TableHead>
           <TableBody>
-            {fileCols.length > 0 && fileCols.map((row) => (
+            { ( loading || fileError ) && 
+              <TableRow>
+                <TableCell align="center" colSpan={2}>
+                  {
+                    loading ? 
+                    <CircularProgress /> : 
+                    <Alert severity="error">
+                      {t(fileError as FileError, {max: maxRows})}
+                    </Alert>
+                  }
+                </TableCell>
+              </TableRow>
+            }
+            {fileCols && fileCols.map((row) => (
               <Row key={row} row={row} />
             ))}
           </TableBody>