refactor: import meta information modal

package.json

@@ -106,7 +106,7 @@
     "react-ocl-nmr": "^3.0.1",
     "react-plot": "^1.4.2",
     "react-rnd": "^10.4.1",
-    "react-science": "^0.36.0",
+    "react-science": "^0.37.0",
     "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",

src/component/hooks/useDialogToggle.ts

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+export function useDialogToggle<T = Record<string, boolean>>(initState: T) {
+  const [dialog, setDialogState] = useState<T>(initState);
+
+  function openDialog(id: keyof T) {
+    const newState = { ...dialog, [id]: true };
+    setDialogState(newState);
+  }
+
+  function closeDialog() {
+    const newState = {} as T;
+    for (const id in dialog) {
+      newState[id as string] = false;
+    }
+    setDialogState(newState);
+  }
+
+  return { dialog, closeDialog, openDialog };
+}

src/component/loader/DropZone.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import { fileCollectionFromFileList } from 'filelist-utils';
 import { read as readDropFiles } from 'nmr-load-save';
 import { ParseResult } from 'papaparse';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { FaUpload } from 'react-icons/fa';
 
@@ -16,7 +16,7 @@ import { usePreferences } from '../context/PreferencesContext';
 import { useAlert } from '../elements/popup/Alert';
 import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature';
 import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility';
-import { useMetaInformationImportationModal } from '../modal/metaImportation/index';
+import { MetaImportationModal } from '../modal/metaImportation/MetaImportationModal';
 
 const style = css`
   height: 100%;
@@ -26,7 +26,7 @@ const style = css`
   justify-content: center;
   align-items: center;
   flex-flow: column;
-  z-index: 99999;
+  z-index: 8;
 
   p {
     color: white;
@@ -58,15 +58,16 @@ function DropZone(props) {
     usePreferences();
   const preferences = usePreferences();
   const isToolEnabled = useCheckToolsVisibility();
-  const openImportMetaInformationModal = useMetaInformationImportationModal();
   const alert = useAlert();
   const { logger } = useLogger();
   const experimentalFeatures = useCheckExperimentalFeature();
+  const [metaInformationFile, openMetaInformationDialog] =
+    useState<File | null>();
 
   async function loadFilesHandler(files) {
     try {
       if (files.length === 1 && isMetaFile(files[0])) {
-        openImportMetaInformationModal(files[0]);
+        openMetaInformationDialog(files[0]);
       } else {
         const fileCollection = await fileCollectionFromFileList(files);
         const metaFile = Object.values(fileCollection.files).find((file) =>
@@ -142,6 +143,13 @@ function DropZone(props) {
 
   return (
     <LoaderProvider value={open}>
+      {metaInformationFile && (
+        <MetaImportationModal
+          isOpen
+          file={metaInformationFile}
+          onCloseDialog={() => openMetaInformationDialog(null)}
+        />
+      )}
       <div {...getRootProps()} role="none" css={containerStyle}>
         <input {...getInputProps()} />
         {isDragActive && (

src/component/modal/metaImportation/MetaImportationModal.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource @emotion/react */
+import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { Formik, FormikProps } from 'formik';
 import { ParseResult } from 'papaparse';
 import { CSSProperties, useState, useMemo, useRef, useEffect } from 'react';
@@ -17,15 +18,13 @@ import {
 import { useChartData } from '../../context/ChartContext';
 import { useDispatch } from '../../context/DispatchContext';
 import Button from '../../elements/Button';
-import { CloseButton } from '../../elements/CloseButton';
 import Label from '../../elements/Label';
 import ReactTable, { Column } from '../../elements/ReactTable/ReactTable';
 import FormikInput from '../../elements/formik/FormikInput';
 import FormikSelect from '../../elements/formik/FormikSelect';
 import { useAlert } from '../../elements/popup/Alert/Context';
 import { convertPathArrayToString } from '../../utility/convertPathArrayToString';
 import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths';
-import { ModalStyles } from '../ModalStyle';
 
 import { mapColumnToSelectItems } from './utils/mapColumnToSelectItems';
 
@@ -79,17 +78,41 @@ interface CompareResultItem {
 }
 type CompareResult = Record<number, CompareResultItem>;
 
-interface MetaImportationModalProps {
-  onClose?: () => void;
-  file?: File;
-}
-
 const validationSchema = Yup.object({
   source: Yup.string().required(),
   target: Yup.array(Yup.string()).min(1).required(),
 });
 
-function MetaImportationModal({ onClose, file }: MetaImportationModalProps) {
+interface InnerMetaImportationModalPropsProps {
+  file?: File;
+  onCloseDialog: () => void;
+}
+interface MetaImportationModalPropsProps
+  extends InnerMetaImportationModalPropsProps {
+  isOpen: boolean;
+}
+
+export function MetaImportationModal(props: MetaImportationModalPropsProps) {
+  const { isOpen, onCloseDialog, file } = props;
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title="Import Meta Information"
+      style={{ width: 900, height: 600 }}
+      onClose={onCloseDialog}
+    >
+      <InnerMetaImportationModal {...{ onCloseDialog, file }} />
+    </Dialog>
+  );
+}
+
+function InnerMetaImportationModal({
+  file,
+  onCloseDialog,
+}: InnerMetaImportationModalPropsProps) {
   const alert = useAlert();
   const dispatch = useDispatch();
 
@@ -209,23 +232,22 @@ function MetaImportationModal({ onClose, file }: MetaImportationModalProps) {
       type: 'IMPORT_SPECTRA_META_INFO',
       payload: { spectraMeta: matches },
     });
-    onClose?.();
+    onCloseDialog?.();
   }
 
   return (
-    <div css={ModalStyles} style={{ overflow: 'hidden' }}>
-      <div className="header handle">
-        <span>Import Meta Information</span>
-        <CloseButton title="Close" onClick={onClose} className="close-bt" />
-      </div>
-
-      <div style={styles.container}>
-        <div style={{ flex: 1, width: '100%' }}>
+    <>
+      <DialogBody>
+        <div
+          style={{ width: '100%', height: '100%' }}
+          onDrop={(e: React.DragEvent<HTMLDivElement>) => e.preventDefault()}
+        >
           {!parseResult ? (
             <DropZone
-              fileValidator={fileValidator}
+              validator={fileValidator}
               emptyDescription="Drag and Drop CSV or tab-delimited file (.csv, .txt or .tsv)"
               onDrop={handleDrop}
+              noDragEventsBubbling
             />
           ) : (
             <>
@@ -234,7 +256,7 @@ function MetaImportationModal({ onClose, file }: MetaImportationModalProps) {
                   innerRef={formRef}
                   initialValues={{
                     source: null,
-                    target: '',
+                    target: [],
                   }}
                   onSubmit={handleLinkSpectra}
                   validationSchema={validationSchema}
@@ -274,7 +296,7 @@ function MetaImportationModal({ onClose, file }: MetaImportationModalProps) {
                         }}
                         placeholder="Example: info.plus"
                         datalist={datalist}
-                        mapOnChangeValue={(key) => paths?.[key] || null}
+                        mapOnChangeValue={(key) => paths?.[key] || key}
                         mapValue={(paths) => convertPathArrayToString(paths)}
                       />
                     </Label>
@@ -299,16 +321,16 @@ function MetaImportationModal({ onClose, file }: MetaImportationModalProps) {
             </>
           )}
         </div>
-      </div>
-      <div className="footer-container">
+      </DialogBody>
+      <DialogFooter>
         <Button.Done
           onClick={handleImport}
           disabled={Object.keys(matches).length === 0}
         >
           Import
         </Button.Done>
-      </div>
-    </div>
+      </DialogFooter>
+    </>
   );
 }
 
@@ -321,5 +343,3 @@ function fileValidator(file: File): FileError | null {
   }
   return null;
 }
-
-export default MetaImportationModal;

src/component/modal/metaImportation/utils/mapColumnToSelectItems.ts

@@ -1,5 +1,5 @@
 export function mapColumnToSelectItems(fields: string[]) {
-  const items: any[] = [{ value: null, label: 'Select source field' }];
+  const items: any[] = [{ value: '', label: 'Select source field' }];
 
   for (const fieldName of fields) {
     if (fieldName) {

src/component/toolbar/ToolBar.tsx

@@ -24,7 +24,7 @@ import {
   FaFileExport,
 } from 'react-icons/fa';
 import { PiKnifeBold } from 'react-icons/pi';
-import { Toolbar, ToolbarItemProps, useOnOff } from 'react-science/ui';
+import { Toolbar, ToolbarItemProps } from 'react-science/ui';
 
 import { useChartData } from '../context/ChartContext';
 import { useDispatch } from '../context/DispatchContext';
@@ -39,12 +39,13 @@ import {
   useCheckToolsVisibility,
 } from '../hooks/useCheckToolsVisibility';
 import useDatumWithSpectraStatistics from '../hooks/useDatumWithSpectraStatistics';
+import { useDialogToggle } from '../hooks/useDialogToggle';
 import useExport from '../hooks/useExport';
 import useToolsFunctions from '../hooks/useToolsFunctions';
 import { useVerticalAlign } from '../hooks/useVerticalAlign';
 import ImportPublicationStringModal from '../modal/ImportPublicationStringModal';
 import { LoadJCAMPModal } from '../modal/LoadJCAMPModal';
-import { useMetaInformationImportationModal } from '../modal/metaImportation';
+import { MetaImportationModal } from '../modal/metaImportation/MetaImportationModal';
 
 import { options } from './ToolTypes';
 import { EXPORT_MENU, IMPORT_MENU } from './toolbarMenu';
@@ -94,16 +95,14 @@ export default function ToolBar() {
   );
 
   const openLoader = useLoader();
-  const openMetaInformationModal = useMetaInformationImportationModal();
-
   const isExperimentalFeature = useCheckExperimentalFeature();
-  const [isLoadJCAMPModalOpened, openLoadJCAMPModal, closeLoadJCAMPModal] =
-    useOnOff(false);
-  const [
-    isPublicationStringModalOpened,
-    openPublicationStringModal,
-    closePublicationStringModal,
-  ] = useOnOff(false);
+
+  const { dialog, closeDialog, openDialog } = useDialogToggle({
+    loadJCAMP: false,
+    importPublicationString: false,
+    metaImportation: false,
+  });
+
   const verticalAlign = useVerticalAlign();
 
   const { fidCounter, ftCounter } = useDatumWithSpectraStatistics();
@@ -148,13 +147,13 @@ export default function ToolBar() {
         openLoader();
         break;
       case 'importJDX':
-        openLoadJCAMPModal();
+        openDialog('loadJCAMP');
         break;
       case 'importPublicationString':
-        openPublicationStringModal();
+        openDialog('importPublicationString');
         break;
       case 'importMetaInformation':
-        openMetaInformationModal();
+        openDialog('metaImportation');
         break;
       default:
     }
@@ -326,13 +325,14 @@ export default function ToolBar() {
 
   return (
     <>
-      <LoadJCAMPModal
-        isOpen={isLoadJCAMPModalOpened}
-        onCloseDialog={closeLoadJCAMPModal}
-      />
+      <LoadJCAMPModal isOpen={dialog.loadJCAMP} onCloseDialog={closeDialog} />
       <ImportPublicationStringModal
-        isOpen={isPublicationStringModalOpened}
-        onClose={closePublicationStringModal}
+        isOpen={dialog.importPublicationString}
+        onClose={closeDialog}
+      />
+      <MetaImportationModal
+        isOpen={dialog.metaImportation}
+        onCloseDialog={closeDialog}
       />
       <Toolbar vertical>
         {toolItems.map((item) => {