enhancement/uploader-edit-config (#250)

USACE · Dec 10, 2024 · 58e9c9c · 58e9c9c
1 parent e59c590
commit 58e9c9c
Show file tree

Hide file tree

Showing 6 changed files with 462 additions and 210 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hhd-ui",
-  "version": "0.18.5",
+  "version": "0.18.6",
   "private": true,
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "^30.0.3",

diff --git a/src/app-pages/project/uploader/modals/_configurationOption.jsx b/src/app-pages/project/uploader/modals/_configurationOption.jsx
@@ -10,6 +10,7 @@ const ConfigurationOption = connect(
     instrumentTimeseriesItems: instrumentTimeseries,
     fieldName, 
     onChange,
+    value,
   }) => {
     const timeseries = useMemo(() => formatTimeseriesOptions(instrumentTimeseries), [instrumentTimeseries]);
 
@@ -26,13 +27,17 @@ const ConfigurationOption = connect(
             sx={{ marginTop: 2 }}
             groupBy={opt => opt.instrumentName}
             getOptionLabel={option => option?.label}
+            isOptionEqualToValue={(opt, val) => opt?.value === val?.value}
             options={timeseries.filter(e => e.type === 'standard').sort((a, b) => -b.label.localeCompare(a.label))}
-            onChange={(_e, val) => onChange(val)}
-            renderInput={(params) => (
+            onChange={(_e, val) => {
+              onChange(val);
+            }}
+            value={value}
+            renderInput={params => (
               <TextField
                 {...params}
-                variant='outlined'
                 label='Timeseries'
+                variant='outlined'
               />
             )}
           />

diff --git a/src/app-pages/project/uploader/modals/_formGen.jsx b/src/app-pages/project/uploader/modals/_formGen.jsx
@@ -3,7 +3,9 @@ import { useDeepCompareEffect } from 'react-use';
 import { Box } from '@mui/material';
 
 import ConfigurationOption from './_configurationOption';
+import { formatTimeseriesId } from '../../batch-plotting/helper';
 import { extractInstrumentNames } from '../helper';
+import { connect } from 'redux-bundler-react';
 
 const removeMappedColumns = (columnConfig, fields) => {
   const {
@@ -18,92 +20,126 @@ const removeMappedColumns = (columnConfig, fields) => {
   let final = [...fields];
 
   if (time_field) {
-    final = final.filter(el => el.fieldName !== time_field?.value)
+    final = final.filter(el => ![time_field?.value, time_field].includes(el.fieldName))
   }
   if (instrument_field_enabled) {
-    final = final.filter(el => el.fieldName !== instrument_field?.value);
+    final = final.filter(el => ![instrument_field?.value, instrument_field].includes(el.fieldName));
   }
   if (masked_field_enabled) {
-    final = final.filter(el => el.fieldName !== masked_field?.value);
+    final = final.filter(el => ![masked_field?.value, masked_field].includes(el.fieldName));
   }
   if (validated_field_enabled) {
-    final = final.filter(el => el.fieldName !== validated_field?.value);
+    final = final.filter(el => ![validated_field?.value, validated_field].includes(el.fieldName));
   }
   if (comment_field_enabled) {
-    final = final.filter(el => el.fieldName !== comment_field?.value);
+    final = final.filter(el => ![comment_field?.value, comment_field].includes(el.fieldName));
   }
   if (depth_based_instrument_id) {
-    final = final.filter(el => el.fieldName === depth_based_instrument_id?.value);
+    final = final.filter(el => ![depth_based_instrument_id?.value, depth_based_instrument_id].includes(el.fieldName));
   }
 
   return final;
 };
 
-const FormGen = ({
-  fields = [],
-  parsedData,
-  fileType,
-  columnConfig = {},
-  onChange,
-}) => {
-  const { instrument_field_enabled, instrument_field } = columnConfig || {};
+const generateDefaultResult = (currentMappings = [], timeseries = []) => {
+  const defaultResult = currentMappings.reduce((accum, curr) => {
+    const { field_name, instrument_field_name, timeseries_id } = curr;
+    const data = {};
 
-  const [result, setResult] = useState({});
-  const cleanedFields = removeMappedColumns(columnConfig, fields);
-  const instrumentEnabled = ['csv', 'xlsx'].includes(fileType) && instrument_field_enabled;
-  const instrumentNames = instrumentEnabled ? extractInstrumentNames(parsedData, fileType, instrument_field?.value) : [];
+    if (instrument_field_name) {
+      data[instrument_field_name] = {
+        fields: {
+          ...(accum[instrument_field_name]?.fields),
+          [field_name]: formatTimeseriesId(timeseries_id, timeseries),
+        },
+        isInstrument: true,
+      };
+    } else {
+      data[field_name] = formatTimeseriesId(timeseries_id, timeseries);
+    }
 
-  useDeepCompareEffect(() => {
-    onChange(result);
-  }, [result]);
+    return {
+      ...accum,
+      ...data,
+    };
+  }, {});
 
-  return (
-    <>
-      {instrumentEnabled ? (
-        <>
-          {instrumentNames?.map(name => (
-            <Box
-              key={name}
-              sx={{
-                border: '1px solid lightgray',
-                borderRadius: '3px',
-                margin: '6px 0',
-                padding: '7px'
-              }}>
-              <i>{name}</i>
-              {cleanedFields?.map(field => (
-                <ConfigurationOption
-                  key={`${name}-${field.fieldName}`}
-                  fieldName={field.fieldName}
-                  onChange={(val => setResult(prev => ({
-                    ...prev,
-                    [name]: {
-                      ...(prev[name] || {}),
-                      fields: {
-                        ...(prev[name]?.fields || {}),
-                        [field.fieldName]: val,
-                      },
-                      isInstrument: true,
-                    }
-                  })))}
-                />
-              ))}
-            </Box>
-          ))}
-        </>
-      ) : (
-        <>
-          {cleanedFields?.map(field => (
-            <ConfigurationOption
-              key={field.fieldName}
-              fieldName={field.fieldName}
-              onChange={(val => setResult(prev => ({ ...prev, [field.fieldName]: val })))}
-            />
-          ))}
-        </>
-      )}
-    </>
-  );
+  return defaultResult;
 };
 
+const FormGen = connect(
+  'selectInstrumentTimeseriesItems',
+  ({
+    instrumentTimeseriesItems: instrumentTimeseries,
+    fields = [],
+    parsedData,
+    fileType,
+    columnConfig = {},
+    currentMappings = [],
+    onChange,
+  }) => {
+    const { instrument_field_enabled, instrument_field } = columnConfig || {};
+
+    const cleanedFields = removeMappedColumns(columnConfig, fields);
+    const instrumentEnabled = ['csv', 'xlsx'].includes(fileType) && instrument_field_enabled;
+    const instrumentNames = instrumentEnabled ? extractInstrumentNames(parsedData, fileType, typeof instrument_field === 'string' ? instrument_field : instrument_field?.value) : [];
+
+    const [result, setResult] = useState(generateDefaultResult(currentMappings, instrumentTimeseries));
+
+    useDeepCompareEffect(() => {
+      onChange(result);
+    }, [result]);
+
+    return (
+      <>
+        {instrumentEnabled ? (
+          <>
+            {instrumentNames?.map(name => (
+              <Box
+                key={name}
+                sx={{
+                  border: '1px solid lightgray',
+                  borderRadius: '3px',
+                  margin: '6px 0',
+                  padding: '7px'
+                }}>
+                <i>{name}</i>
+                {cleanedFields?.map(field => (
+                  <ConfigurationOption
+                    key={`${name}-${field.fieldName}`}
+                    fieldName={field.fieldName}
+                    value={result[name]?.fields[field?.fieldName] || undefined}
+                    onChange={(val => setResult(prev => ({
+                      ...prev,
+                      [name]: {
+                        ...(prev[name] || {}),
+                        fields: {
+                          ...(prev[name]?.fields || {}),
+                          [field.fieldName]: val,
+                        },
+                        isInstrument: true,
+                      }
+                    })))}
+                  />
+                ))}
+              </Box>
+            ))}
+          </>
+        ) : (
+          <>
+            {cleanedFields?.map(field => (
+              <ConfigurationOption
+                key={field.fieldName}
+                fieldName={field.fieldName}
+                value={result[field.fieldName] || undefined}
+                onChange={(val => setResult(prev => ({ ...prev, [field.fieldName]: val })))}
+              />
+            ))}
+          </>
+        )}
+      </>
+    );
+  },
+);
+
 export default FormGen;