fix: jpath

use an array of Keys instead of using a string with '.' separator close #2080
cheminfo · Jan 24, 2023 · 91d9f7f · 91d9f7f
1 parent 618d439
commit 91d9f7f
Show file tree

Hide file tree

Showing 16 changed files with 115 additions and 48 deletions.
diff --git a/src/component/1d-2d/components/SpectrumInfoBlock.tsx b/src/component/1d-2d/components/SpectrumInfoBlock.tsx
@@ -5,7 +5,6 @@ import { useChartData } from '../../context/ChartContext';
 import { usePreferences } from '../../context/PreferencesContext';
 import { SVGGroup } from '../../elements/SVGGroup';
 import useSpectrum from '../../hooks/useSpectrum';
-import { jpathToArray } from '../../utility/jpathToArray';
 
 const styles: Record<'value' | 'label' | 'colorIndicator', CSSProperties> = {
   label: {
@@ -42,7 +41,7 @@ function SpectrumInfoBlock() {
       {fields
         .filter((field) => field.visible)
         .map((field, index) => {
-          const value = lodashGet(spectrum, jpathToArray(field.jpath), '');
+          const value = lodashGet(spectrum, field.jpath, '');
           return (
             <SVGGroup
               transform={`translate(0,${20 * (index + 1)})`}

diff --git a/src/component/1d/SpectraLegends.tsx b/src/component/1d/SpectraLegends.tsx
@@ -10,7 +10,7 @@ import { useChartData } from '../context/ChartContext';
 import { useScale } from '../context/ScaleContext';
 import { SVGGroup } from '../elements/SVGGroup';
 import { usePanelPreferences } from '../hooks/usePanelPreferences';
-import { jpathToArray } from '../utility/jpathToArray';
+import { convertPathArrayToString } from '../utility/convertPathArrayToString';
 import {
   JpathLegendField,
   legendField,
@@ -95,12 +95,12 @@ function InnerSpectraLegends({
                   );
                 default: {
                   const jpath = (field as JpathLegendField).jpath;
-                  const value = lodashGet(spectrum, jpathToArray(jpath), '');
+                  const value = lodashGet(spectrum, jpath, '');
                   return (
                     <text
                       alignmentBaseline="middle"
                       style={styles.text}
-                      key={jpath}
+                      key={convertPathArrayToString(jpath)}
                     >
                       {value}
                     </text>

diff --git a/src/component/elements/formik/FormikInput.tsx b/src/component/elements/formik/FormikInput.tsx
@@ -3,7 +3,11 @@ import lodashGet from 'lodash/get';
 
 import Input, { InputProps } from '../Input';
 
-interface FormikInputProps extends InputProps {
+export interface InputMapValueFunctions {
+  mapOnChangeValue?: (value: string | number) => any;
+  mapValue?: (value: any) => string | number;
+}
+interface FormikInputProps extends InputProps, InputMapValueFunctions {
   name: string;
   checkErrorAfterInputTouched?: boolean;
 }
@@ -23,14 +27,21 @@ function FormikInput(props: FormikInputProps) {
     value = null,
     format = () => identity,
     checkErrorAfterInputTouched = true,
+    mapOnChangeValue,
+    mapValue,
     ...resProps
   } = props;
 
-  const { values, handleChange, errors, touched } = useFormikContext();
+  const { values, handleChange, errors, touched, setFieldValue } =
+    useFormikContext();
 
   function changeHandler(e) {
     onChange(e);
-    handleChange(e);
+    if (mapOnChangeValue) {
+      setFieldValue(name, mapOnChangeValue(e.target.value));
+    } else {
+      handleChange(e);
+    }
   }
 
   let isInvalid = lodashGet(errors, name);
@@ -39,19 +50,20 @@ function FormikInput(props: FormikInputProps) {
     isInvalid = lodashGet(errors, name) && lodashGet(touched, name);
   }
 
+  let val = value || lodashGet(values, name);
+  val = mapValue ? mapValue(val) : val;
   return (
     <Input
       name={name}
-      value={value || lodashGet(values, name)}
+      value={val}
       onChange={changeHandler}
       type={type}
       style={{
         ...style,
         inputWrapper: {
           ...style.input,
           ...(isInvalid && {
-            borderWidth: '1px',
-            borderColor: 'red',
+            border: '1px solid red',
             outline: 'none',
           }),
         },

diff --git a/src/component/modal/metaImportation/MetaImportationModal.tsx b/src/component/modal/metaImportation/MetaImportationModal.tsx
@@ -19,9 +19,9 @@ import FormikInput from '../../elements/formik/FormikInput';
 import FormikSelect from '../../elements/formik/FormikSelect';
 import { useAlert } from '../../elements/popup/Alert/Context';
 import { IMPORT_SPECTRA_META_INFO } from '../../reducer/types/Types';
+import { convertPathArrayToString } from '../../utility/convertPathArrayToString';
 import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
 import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths';
-import { jpathToArray } from '../../utility/jpathToArray';
 import { ModalStyles } from '../ModalStyle';
 
 import { isMetaInformationFile } from './utils/isMetaInformationFile';
@@ -86,7 +86,7 @@ interface MetaImportationModalProps {
 
 const validationSchema = Yup.object({
   source: Yup.string().required(),
-  target: Yup.string().required(),
+  target: Yup.array(Yup.string()).min(1),
 });
 
 function MetaImportationModal({ onClose, file }: MetaImportationModalProps) {
@@ -104,7 +104,7 @@ function MetaImportationModal({ onClose, file }: MetaImportationModalProps) {
       spectra: { activeTab },
     },
   } = useChartData();
-  const datalist = getSpectraObjectPaths(data);
+  const { datalist, paths } = getSpectraObjectPaths(data);
 
   function handleParseFile(file: FileWithPath | File) {
     parse(file, {
@@ -163,7 +163,7 @@ function MetaImportationModal({ onClose, file }: MetaImportationModalProps) {
     let isTargetPathExists = true;
 
     for (const spectrum of getSpectraByNucleus(activeTab, data)) {
-      const value = lodashGet(spectrum, jpathToArray(target), null);
+      const value = lodashGet(spectrum, target, null);
       if (value === null) {
         isTargetPathExists = false;
         break;
@@ -317,6 +317,8 @@ function MetaImportationModal({ onClose, file }: MetaImportationModalProps) {
                         style={{ input: { width: '300px', textAlign: 'left' } }}
                         placeholder="Example: info.plus"
                         datalist={datalist}
+                        mapOnChangeValue={(key) => paths?.[key] || null}
+                        mapValue={(paths) => convertPathArrayToString(paths)}
                       />
                     </Label>
                   </>

diff --git a/src/component/modal/setting/settings-tabs/InfoBlockTabContent.tsx b/src/component/modal/setting/settings-tabs/InfoBlockTabContent.tsx
@@ -10,6 +10,7 @@ import Label from '../../../elements/Label';
 import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
 import FormikCheckBox from '../../../elements/formik/FormikCheckBox';
 import FormikInput from '../../../elements/formik/FormikInput';
+import { convertPathArrayToString } from '../../../utility/convertPathArrayToString';
 import { getSpectraObjectPaths } from '../../../utility/getSpectraObjectPaths';
 
 const styles: Record<'input' | 'column', CSSProperties> = {
@@ -24,7 +25,10 @@ const styles: Record<'input' | 'column', CSSProperties> = {
 function InfoBlockTabContent() {
   const { values, setFieldValue } = useFormikContext();
   const { data } = useChartData();
-  const datalist = useMemo(() => getSpectraObjectPaths(data), [data]);
+  const { datalist, paths } = useMemo(
+    () => getSpectraObjectPaths(data),
+    [data],
+  );
 
   const fields = (values as any)?.infoBlock.fields;
 
@@ -33,7 +37,7 @@ function InfoBlockTabContent() {
       let columns: any[] = [];
       const emptyField = {
         label: '',
-        jpath: '',
+        jpath: null,
         visible: true,
       };
       if (data && Array.isArray(data)) {
@@ -81,6 +85,8 @@ function InfoBlockTabContent() {
             <FormikInput
               name={`infoBlock.fields.${row.index}.jpath`}
               style={{ input: styles.input }}
+              mapOnChangeValue={(key) => paths?.[key] || null}
+              mapValue={(paths) => convertPathArrayToString(paths)}
               datalist={datalist}
             />
           );
@@ -123,7 +129,7 @@ function InfoBlockTabContent() {
         },
       },
     ],
-    [addHandler, datalist, deleteHandler],
+    [addHandler, datalist, deleteHandler, paths],
   );
 
   return (

diff --git a/src/component/modal/setting/settingsValidation.ts b/src/component/modal/setting/settingsValidation.ts
@@ -74,7 +74,7 @@ const infoBlockValidation = Yup.object({
   fields: Yup.array().of(
     Yup.object({
       label: Yup.string().required(),
-      jpath: Yup.string().required(),
+      jpath: Yup.array().of(Yup.string()).min(1),
     }),
   ),
 });

diff --git a/src/component/panels/MultipleSpectraAnalysisPanel/preferences/LegendsPreferences.tsx b/src/component/panels/MultipleSpectraAnalysisPanel/preferences/LegendsPreferences.tsx
@@ -7,9 +7,9 @@ import Button from '../../../elements/Button';
 import { CheckBoxCell } from '../../../elements/CheckBoxCell';
 import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
 import FormikInput from '../../../elements/formik/FormikInput';
+import { convertPathArrayToString } from '../../../utility/convertPathArrayToString';
 import { getSpectraObjectPaths } from '../../../utility/getSpectraObjectPaths';
 import {
-  JpathLegendField,
   legendField,
   PredefinedLegendField,
 } from '../../../workspaces/Workspace';
@@ -31,15 +31,18 @@ const styles: Record<'input' | 'column', CSSProperties> = {
 function LegendsPreferences() {
   const { values, setFieldValue } = useFormikContext();
   const { data } = useChartData();
-  const datalist = useMemo(() => getSpectraObjectPaths(data), [data]);
+  const { datalist, paths } = useMemo(
+    () => getSpectraObjectPaths(data),
+    [data],
+  );
 
   const fields = (values as any)?.legendsFields;
 
   const addHandler = useCallback(
     (data: readonly any[], index: number) => {
       let columns: any[] = [];
-      const emptyField: JpathLegendField = {
-        jpath: '',
+      const emptyField = {
+        jpath: null,
         visible: true,
       };
       if (data && Array.isArray(data)) {
@@ -69,7 +72,6 @@ function LegendsPreferences() {
       },
       {
         Header: 'Field',
-        style: styles.column,
         Cell: ({ row }) => {
           const predefinedColumn = row.original as PredefinedLegendField;
           if (predefinedColumn?.name) {
@@ -80,6 +82,8 @@ function LegendsPreferences() {
             <FormikInput
               name={`legendsFields.${row.index}.jpath`}
               style={{ input: styles.input }}
+              mapOnChangeValue={(key) => paths?.[key] || null}
+              mapValue={(paths) => convertPathArrayToString(paths)}
               datalist={datalist}
             />
           );
@@ -122,10 +126,16 @@ function LegendsPreferences() {
         },
       },
     ],
-    [addHandler, datalist, deleteHandler],
+    [addHandler, datalist, deleteHandler, paths],
   );
 
-  return <ReactTable data={fields} columns={COLUMNS} />;
+  return (
+    <ReactTable
+      data={fields}
+      columns={COLUMNS}
+      style={{ table: { height: '100%' } }}
+    />
+  );
 }
 
 export default LegendsPreferences;
diff --git a/src/component/panels/MultipleSpectraAnalysisPanel/preferences/index.tsx b/src/component/panels/MultipleSpectraAnalysisPanel/preferences/index.tsx
@@ -33,6 +33,11 @@ const preferencesSchema = Yup.object({
       return Yup.array().of(columnSchema(data));
     }),
   }),
+  legendsFields: Yup.array().of(
+    Yup.object({
+      jpath: Yup.array().of(Yup.string()).min(1),
+    }),
+  ),
 });
 
 interface MultipleSpectraAnalysisPreferencesProps {

diff --git a/src/component/panels/SpectrumsPanel/SpectraPreferences.tsx b/src/component/panels/SpectrumsPanel/SpectraPreferences.tsx
@@ -12,6 +12,7 @@ import { useChartData } from '../../context/ChartContext';
 import { usePreferences } from '../../context/PreferencesContext';
 import useNucleus from '../../hooks/useNucleus';
 import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences';
+import { convertPathArrayToString } from '../../utility/convertPathArrayToString';
 import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths';
 import { PanelsPreferences } from '../../workspaces/Workspace';
 import { NucleusGroup } from '../extra/preferences/NucleusGroup';
@@ -27,7 +28,10 @@ function SpectraPreferences(props, ref: any) {
 
   const preferencesByNuclei = usePanelPreferencesByNuclei('spectra', nuclei);
 
-  const datalist = useMemo(() => getSpectraObjectPaths(data), [data]);
+  const { datalist, paths } = useMemo(
+    () => getSpectraObjectPaths(data),
+    [data],
+  );
 
   function saveHandler(values) {
     preferences.dispatch({
@@ -53,7 +57,7 @@ function SpectraPreferences(props, ref: any) {
     columns = [
       ...columns.slice(0, index),
       {
-        jpath: '',
+        jpath: [],
         label: '',
         visible: true,
       },
@@ -88,6 +92,8 @@ function SpectraPreferences(props, ref: any) {
       },
     });
   }, []);
+  const mapOnChangeValueHandler = useCallback((key) => paths[key], [paths]);
+  const mapValue = useCallback((value) => convertPathArrayToString(value), []);
 
   return (
     <PreferencesContainer>
@@ -103,6 +109,8 @@ function SpectraPreferences(props, ref: any) {
                 nucleus={n}
                 onAdd={handleAdd}
                 onDelete={handleDelete}
+                mapOnChangeValue={mapOnChangeValueHandler}
+                mapValue={mapValue}
                 datalist={datalist}
               />
             </NucleusGroup>

diff --git a/src/component/panels/SpectrumsPanel/SpectraTable.tsx b/src/component/panels/SpectrumsPanel/SpectraTable.tsx
@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import { useMemo, CSSProperties } from 'react';
 import { IoColorPaletteOutline } from 'react-icons/io5';
 import { DropdownMenu, DropdownMenuProps } from 'react-science/ui';
@@ -210,8 +211,8 @@ export function SpectraTable(props: SpectraTableProps) {
           const path = (col as JpathTableColumn)?.jpath;
           columns.push({
             Header: () => <ColumnHeader label={col.label} col={col} />,
-            accessor: path as any,
-            id: `${index}${path}`,
+            accessor: (row) => lodashGet(row, path, ''),
+            id: `${index}`,
             style: jPathColumnStyle,
           });
         }