Merge branch 'development' into app/digitaltwins-dev

DANS-KNAW · Nov 29, 2024 · e9babcc · e9babcc
2 parents aac7da0 + 91e7bda
commit e9babcc
Show file tree

Hide file tree

Showing 27 changed files with 257 additions and 88 deletions.
diff --git a/apps/digitaltwins/src/App.tsx b/apps/digitaltwins/src/App.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useState } from "react";
+import { Suspense /*useState*/ } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Skeleton from "@mui/material/Skeleton";
 import Box from "@mui/material/Box";
@@ -24,13 +24,13 @@ import languages from "./config/languages";
 import authProvider from "./config/auth";
 import form from "./config/form";
 import { FileMapper } from "@dans-framework/file-mapper";
-import type { FormConfig } from "@dans-framework/deposit";
+// import type { FormConfig } from "@dans-framework/deposit";
 
 const App = () => {
   const { i18n } = useTranslation();
   // Must keep a parent state for the form mapper component,
   // otherwise the app will not know of any API response from the FileMapper component
-  const [mappedForm, setMappedForm] = useState<FormConfig>();
+  // const [ mappedForm, setMappedForm ] = useState<FormConfig>();
 
   return (
     <AuthWrapper authProvider={authProvider}>
@@ -79,13 +79,17 @@ const App = () => {
                     element={
                       page.template === "deposit" ?
                         <AuthRoute>
-                          <Deposit config={mappedForm || form} page={page} />
+                          <Deposit
+                            config={/*mappedForm || */ form}
+                            page={page}
+                          />
                         </AuthRoute>
                       : page.template === "mapper" ?
                         <AuthRoute>
                           <FileMapper
-                            setMappedForm={setMappedForm}
+                            config={form}
                             page={page}
+                            depositPageSlug="/deposit"
                           />
                         </AuthRoute>
                       : <Generic {...page} />

diff --git a/apps/digitaltwins/src/config/formsections/coverage.ts b/apps/digitaltwins/src/config/formsections/coverage.ts
@@ -36,7 +36,7 @@ const section: InitialSectionType = {
     {
       type: "autocomplete",
       label: {
-        en: "Species",
+        en: "Species covered",
         nl: "Soorten",
       },
       name: "species",
@@ -46,7 +46,8 @@ const section: InitialSectionType = {
         en: "Something here",
         nl: "Iets hier",
       },
-      options: "biodiversity",
+      multiApiValue: "biodiversity_species_scientific",
+      options: [ "biodiversity_species_scientific", "biodiversity_species_vernacular" ],
     },
     {
       type: "group",

diff --git a/apps/digitaltwins/src/config/pages.ts b/apps/digitaltwins/src/config/pages.ts
@@ -18,15 +18,15 @@ const depositPage: Page = {
 const advisorPage: Page = {
   id: "mapper",
   name: {
-    en: "Map your data",
-    nl: "Map your data",
+    en: "Start mapping terms",
+    nl: "Start mapping terms",
   },
   slug: "map",
   template: "mapper",
   inMenu: true,
   menuTitle: {
-    en: "Map data",
-    nl: "Map data",
+    en: "Term mapping",
+    nl: "Term mapping",
   },
 };
 

diff --git a/packages/deposit/lib/index.tsx b/packages/deposit/lib/index.tsx
@@ -7,6 +7,7 @@ export type {
 } from "../src/types/MetadataFields";
 export type { AutocompleteAPIFieldProps } from "../src/types/MetadataProps";
 export type { QueryReturnType } from "../src/types/Api";
+export type { FileLocation } from "../src/types/Files";
 
 // export some api's for other redux stores
 export {
@@ -17,3 +18,9 @@ export {
   rorApi,
   useFetchRorByNameQuery,
 } from "../src/features/metadata/api/ror";
+// same for slices
+export { addFiles } from "../src/features/files/filesSlice";
+export { initForm } from "../src/features/metadata/metadataSlice";
+
+// expose the store
+export { store as depositStore } from "../src/redux/store";
diff --git a/packages/deposit/src/features/files/FilesTable.tsx b/packages/deposit/src/features/files/FilesTable.tsx
@@ -31,6 +31,7 @@ import LinearProgress from "@mui/material/LinearProgress";
 import CircularProgress from "@mui/material/CircularProgress";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
+import Chip from "@mui/material/Chip";
 import {
   getSingleFileSubmitStatus,
   setFilesSubmitStatus,
@@ -96,7 +97,7 @@ const FilesTable = () => {
           <TableBody>
             <AnimatePresence initial={false}>
               {selectedFiles.map((file) => (
-                <FileTableRow key={file.name} file={file} />
+                <FileTableRow key={file.id} file={file} />
               ))}
             </AnimatePresence>
           </TableBody>
@@ -312,6 +313,25 @@ const FileTableRow = ({ file }: FileItemProps) => {
               )}
               <motion.div layout key="name">
                 {file.name}
+                {file.mapping && (
+                  <Tooltip
+                    title={
+                      <Box>
+                        {Object.entries(file.mapping).map(([key, value], i) => (
+                          <Typography variant="body2" key={i}>
+                            {key}: {value.label}
+                          </Typography>
+                        ))}
+                      </Box>
+                    }
+                  >
+                    <Chip
+                      sx={{ ml: 1, fontSize: "80%" }}
+                      label={t("termsMapped")}
+                      size="small"
+                    />
+                  </Tooltip>
+                )}
               </motion.div>
             </AnimatePresence>
           </Box>
@@ -370,7 +390,7 @@ const FileTableRow = ({ file }: FileItemProps) => {
         exit={{ opacity: 0 }}
       >
         <AnimatePresence>
-          <UploadProgress file={file} key={`progress-${file.name}`} />
+          <UploadProgress file={file} key={`progress-${file.id}`} />
         </AnimatePresence>
       </MotionRow>
     </>

diff --git a/packages/deposit/src/features/files/filesSlice.ts b/packages/deposit/src/features/files/filesSlice.ts
@@ -10,6 +10,8 @@ export const filesSlice = createSlice({
   reducers: {
     // keep track of file selection
     addFiles: (state, action: PayloadAction<SelectedFile[]>) => {
+      console.log("adding");
+      console.log(action);
       state.push(...action.payload);
     },
     removeFile: (state, action: PayloadAction<SelectedFile>) => {

diff --git a/packages/deposit/src/features/metadata/MetadataFields.tsx b/packages/deposit/src/features/metadata/MetadataFields.tsx
@@ -160,9 +160,13 @@ const SingleField = memo(({ field, sectionIndex }: SingleFieldProps) => {
               return (
                 <DatastationsField field={field} sectionIndex={sectionIndex} />
               );
-            case "biodiversity":
+            case "biodiversity_species_vernacular":
               return (
-                <BiodiversityField field={field} sectionIndex={sectionIndex} />
+                <BiodiversityField field={field} sectionIndex={sectionIndex} variant="vernacular" />
+              );
+            case "biodiversity_species_scientific":
+              return (
+                <BiodiversityField field={field} sectionIndex={sectionIndex} variant="scientific" />
               );
             default:
               return (

diff --git a/packages/deposit/src/features/metadata/api/biodiversity.ts b/packages/deposit/src/features/metadata/api/biodiversity.ts
@@ -7,23 +7,25 @@ export const biodiversityApi = createApi({
   baseQuery: fetchBaseQuery({ baseUrl: "https://api.biodiversitydata.nl/v2" }),
   endpoints: (build) => ({
     fetchSpecies: build.query({
-      query: (keyword) => {
+      query: ({ value, variant }) => {
         // Format a query to search both for scientific as well as more common matches
         const formattedQuery = encodeURIComponent(
           JSON.stringify({
             conditions: [
               {
-                field: "acceptedName.fullScientificName",
+                field: variant === "scientific" ? "acceptedName.fullScientificName" : "vernacularNames.name",
                 operator: "CONTAINS",
-                value: keyword,
+                value: value,
               },
+              // For now, Dutch species registry only (NSR)
+              // Catalog of life is code COL
               {
-                field: "vernacularNames.name",
-                operator: "CONTAINS",
-                value: keyword,
-              },
+                field: "sourceSystem.code",
+                operator: "EQUALS",
+                value: "NSR",
+              }
             ],
-            logicalOperator: "OR",
+            logicalOperator: "AND",
             size: 1000,
           }),
         );
@@ -40,15 +42,15 @@ export const biodiversityApi = createApi({
         console.log(response);
         return response.resultSet?.length > 0 ?
             {
-              arg: arg,
+              arg: arg.value,
               response: response.resultSet.map((result) => ({
                 label: result.item.acceptedName.fullScientificName,
                 value: result.item.recordURI,
                 extraLabel: "vernacularName",
                 extraContent: result.item.vernacularNames
                   ?.filter(
                     (item) =>
-                      item.language === "English" || item.language === "Dutch",
+                      item.language === "English" || item.language === "Dutch"  || item.language === "Flemish",
                   )
                   .map((item) => item.name)
                   .join(", "),

diff --git a/packages/deposit/src/features/metadata/fields/AutocompleteAPIField.tsx b/packages/deposit/src/features/metadata/fields/AutocompleteAPIField.tsx
@@ -179,15 +179,18 @@ export const DatastationsField = ({
 export const BiodiversityField = ({
   field,
   sectionIndex,
+  variant
 }: AutocompleteFieldProps) => {
   const [inputValue, setInputValue] = useState<string>("");
   const debouncedInputValue = useDebounce(inputValue, 500)[0];
   // Fetch data on input change
   const { data, isFetching, isLoading } = useFetchSpeciesQuery<QueryReturnType>(
-    debouncedInputValue,
+    { value: debouncedInputValue, variant: variant }, 
     { skip: debouncedInputValue === "" },
   );
 
+  console.log(data)
+
   return (
     <AutocompleteAPIField
       field={field}
@@ -511,6 +514,12 @@ export const MultiApiField = ({
       {field.multiApiValue === "interest groups" && (
         <RdaInterestGroupsField field={field} sectionIndex={sectionIndex} />
       )}
+      {field.multiApiValue === "biodiversity_species_vernacular" && (
+        <BiodiversityField field={field} sectionIndex={sectionIndex} variant="vernacular" />
+      )}
+      {field.multiApiValue === "biodiversity_species_scientific" && (
+        <BiodiversityField field={field} sectionIndex={sectionIndex} variant="scientific" />
+      )}
     </Stack>
   );
 };

diff --git a/packages/deposit/src/features/metadata/fields/Map.tsx b/packages/deposit/src/features/metadata/fields/Map.tsx
@@ -114,7 +114,6 @@ const DrawMap = ({ field, sectionIndex }: DrawMapFieldProps) => {
   );
   const [getConvertedCoordinates] = useLazyTransformCoordinatesQuery();
   const [hiddenLayers, setHiddenLayers] = useState<string[]>([]);
-
   const mapRef = useRef<MapRef>(null);
   const [fetchWmsFeature] = useLazyFetchFeatureQuery();
 

diff --git a/packages/deposit/src/languages/locales/en/files.json b/packages/deposit/src/languages/locales/en/files.json
@@ -47,5 +47,6 @@
   "dateInvalid": "Invalid date",
   "fileTooLarge": "Files over {{ size }} GB cannot be processed by the target repository",
   "fileNoSize": "Cannot upload files of 0 bytes",
-  "fileForbiddenCharacters": "File name contains forbidden characters: /:*?\"<>|;#"
+  "fileForbiddenCharacters": "File name contains forbidden characters: /:*?\"<>|;#",
+  "termsMapped": "Terms mapped"
 }
diff --git a/packages/deposit/src/languages/locales/en/metadata.json b/packages/deposit/src/languages/locales/en/metadata.json
@@ -15,11 +15,15 @@
   "orcid": "ORCID",
   "multi-orcid": "Person",
   "ror": "RoR",
+  "biodiversity_species_scientific": "the Naturalis Dutch species registry (scientific names)",
+  "biodiversity_species_vernacular": "the Naturalis Dutch species registry (vernacular names)",
   "multi-ror": "Organisation",
   "multi-domains": "Domain",
   "multi-pathways": "Pathway",
   "multi-rdaworkinggroups": "Working Groups",
   "multi-interest groups": "Interest Groups",
+  "multi-biodiversity_species_scientific": "Scientific name",
+  "multi-biodiversity_species_vernacular": "Vernacular name",
   "getty": "Getty AAT",
   "geonames": "GeoNames",
   "elsst": "ELSST Thesaurus",

diff --git a/packages/deposit/src/languages/locales/nl/files.json b/packages/deposit/src/languages/locales/nl/files.json
@@ -47,5 +47,6 @@
   "dateInvalid": "Ongeldige datum",
   "fileTooLarge": "Bestanden groter dan {{ size }} GB kunnen niet worden verwerkt door het doelrepository",
   "fileNoSize": "Kan geen bestanden van 0 bytes uploaden",
-  "fileForbiddenCharacters": "Bestandsnaam bevat tekens die niet zijn toegestaan: /:*?\"<>|;#"
+  "fileForbiddenCharacters": "Bestandsnaam bevat tekens die niet zijn toegestaan: /:*?\"<>|;#",
+  "termsMapped": "Terms mapped"
 }
diff --git a/packages/deposit/src/types/Files.ts b/packages/deposit/src/types/Files.ts
@@ -42,6 +42,10 @@ export interface SelectedFile {
   submittedFile?: boolean;
   errors?: never;
   file?: never;
+  // for translating xls/csv file columns
+  mapping?: {
+    [key: string]: any;
+  };
 }
 
 interface FileError {

diff --git a/packages/deposit/src/types/MetadataFields.ts b/packages/deposit/src/types/MetadataFields.ts
@@ -224,7 +224,8 @@ export type TypeaheadAPI =
   | Datastations
   | "sshLicences"
   | "languageList"
-  | "biodiversity";
+  | "biodiversity_species_scientific"
+  | "biodiversity_species_vernacular";
 
 // Options that should be specified if Google Sheet API is used in Autocomplete
 interface SheetOptions {

diff --git a/packages/deposit/src/types/MetadataProps.ts b/packages/deposit/src/types/MetadataProps.ts
@@ -57,6 +57,7 @@ export interface AutocompleteFieldProps
   field: AutocompleteFieldType;
   onOpen?: () => void;
   isLoading?: boolean;
+  variant?: string;
 }
 
 export interface AutocompleteAPIFieldProps extends AutocompleteFieldProps {

diff --git a/packages/file-mapper/package.json b/packages/file-mapper/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "version": "1.0.0",
   "dependencies": {
+    "@dans-framework/deposit": "workspace:*",
     "@dans-framework/utils": "workspace:*",
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.16.7",
@@ -17,12 +18,14 @@
     "react-dropzone": "^14.2.3",
     "react-i18next": "^13.0.3",
     "react-redux": "^8.1.2",
+    "react-router-dom": "^6.14.2",
+    "uuid": "^9.0.0",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@dans-framework/deposit": "workspace:*",
     "@dans-framework/pages": "workspace:*",
     "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7"
+    "@types/react-dom": "^18.2.7",
+    "@types/uuid": "^9.0.2"
   }
 }