address #376, #373, #372, #371, #366. undo changes made for #364 beca…

…use making ph_id read only makes it impossible to overwrite if pasting a larger table
pepkit · Aug 28, 2024 · e3967d6 · e3967d6
1 parent 4a40bee
commit e3967d6
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 24 deletions.
diff --git a/web/src/components/project/project-interface.tsx b/web/src/components/project/project-interface.tsx
@@ -108,8 +108,20 @@ export const ProjectInterface = (props: Props) => {
         subsamples: subsamplesParsed,
       });
     } catch (e) {
-      toast.error('The project could not be saved. ' + e, {
-        duration: 5000,
+      // toast.error('The project could not be saved. ' + e, {
+      //   duration: 10000,
+      //   position: 'top-center',
+      // });
+      toast((t) => (
+        <div className='my-1'>
+          <p><strong>{'The project could not be saved.'}</strong></p>
+          <p>{e + ''}</p>
+          <button className='btn btn-sm btn-danger float-end mt-3' onClick={() => toast.dismiss(t.id)}>
+            Dismiss
+          </button>
+        </div>
+      ), {
+        duration: 16000,
         position: 'top-center',
       });
     }

diff --git a/web/src/components/tables/sample-table.tsx b/web/src/components/tables/sample-table.tsx
@@ -54,10 +54,10 @@ export const SampleTable = (props: Props) => {
     });
   }
 
-  const columns = data[0].map((header, index) => ({
-    data: index,
-    readOnly: header === 'ph_id' || readOnly
-  }));
+  // const columns = data[0].map((header, index) => ({
+  //   data: index,
+  //   readOnly: header === 'ph_id' || readOnly
+  // }));
 
   const numColumns = data.length > 0 ? data[0].length : 0;
 
@@ -98,9 +98,24 @@ export const SampleTable = (props: Props) => {
       height={height || tableHeight}
       readOnly={readOnly}
       colHeaders={true}
-      columns={columns}
+      // columns={columns}
+      cells={(row, col, prop) => {
+        const cellProperties = {};
+        if (row === 0) {
+          cellProperties.isHeader = true;
+        }
+        // if (col === ph_id_col) {
+        //   cellProperties.readOnly = true;
+        // }
+        return cellProperties;
+      }}
       renderer={(instance, td, row, col, prop, value, cellProperties) => {
         Handsontable.renderers.TextRenderer.apply(this, [instance, td, row, col, prop, value, cellProperties]);
+        if (cellProperties.isHeader) {
+          td.style.fontWeight = 'bold';
+        } else {
+          td.style.fontWeight = 'normal';
+        }
         td.innerHTML = `<div class="truncated">${value || ''}</div>`;
         td.addEventListener('click', function (event) {
           const innerDiv = td.querySelector('.truncated');
@@ -109,10 +124,10 @@ export const SampleTable = (props: Props) => {
           }
         });
       }}
-      // hiddenColumns={{
-      //   indicators: true,
-      //   columns: ph_id_col === -1 ? [] : [numColumns - 1],
-      // }}
+      hiddenColumns={{
+        indicators: true,
+        columns: ph_id_col === -1 ? [] : [numColumns - 1],
+      }}
       dropdownMenu={true}
       minCols={2}
       minRows={minRows || 50}

diff --git a/web/src/utils/sample-table.ts b/web/src/utils/sample-table.ts
@@ -70,29 +70,80 @@ export const arraysToSampleList = (arraysList: any[][]) => {
   //   { col1: 's2_col1', col2: 's2_col2', col3: 's2_col3' },
   // ]
 
+  // console.log(arraysList)
+
   const uniquePhIds = new Set();
 
   // first row is the header row
   let headerRow = arraysList[0];
 
-  // look for null values, warn user that this
-  // may cause issues
-  headerRow = headerRow.map((cell, index) => {
-    if (!cell) {
-      throw new Error(`Empty column header detected at index ${index}.`);
-    }
-    return cell;
-  });
+  console.log(headerRow)
 
   // look for duplicate values in the header row
-  const seen: any = {};
-  headerRow.forEach((cell) => {
-    if (seen[cell]) {
-      throw new Error(`Duplicate column header detected: ${cell}`);
+  const duplicateHeaders = {};
+  headerRow.forEach((header, index) => {
+    if (header && (header in duplicateHeaders)) {
+      duplicateHeaders[header].push(index);
+    } else {
+      duplicateHeaders[header] = [index];
     }
-    seen[cell] = true;
   });
 
+  // Filter out non-duplicates and prepare error message
+  const realDuplicates = Object.entries(duplicateHeaders)
+    .filter(([_, indices]) => indices.length > 1);
+
+  // If there are duplicate headers, throw an error
+  if (realDuplicates.length > 0) {
+    const errorMessage = realDuplicates
+      .map(([header, indices]) => `"${header}" at columns ${indices.map(i => i + 1).join(', ')}`)
+      .join('; ');
+    throw new Error(`PEPs cannot have duplicate column headers. Rename duplicate column headers. \n\n Duplicate headers found: ${errorMessage}`);
+  }
+
+  // find ph_id index
+  let phIdIndex = headerRow.findIndex(header => header === 'ph_id');
+  if (phIdIndex === -1) {
+    phIdIndex = headerRow.length; // Use the last column index if 'ph_id' is not found
+  }
+
+  console.log(phIdIndex)
+
+  // find index of last non-null column header before phIdIndex
+  let lastNonNullIndex = phIdIndex;
+  while (lastNonNullIndex >= 0 && headerRow[lastNonNullIndex - 1] === null) {
+    lastNonNullIndex--;
+  }
+
+  // Check columns from lastNonNullIndex + 1 to phIdIndex - 1
+  const columnsToRemove = [];
+  for (let colIndex = lastNonNullIndex; colIndex < phIdIndex; colIndex++) {
+    // Check if all values in this column are null
+    const allNull = arraysList.slice(1).every(row => row[colIndex] === null);
+
+    if (allNull) {
+      columnsToRemove.push(colIndex);
+    }
+  }
+
+  // remove entirely null columns
+  if (columnsToRemove.length > 0) {
+    for (let i = 0; i < arraysList.length; i++) {
+      arraysList[i] = arraysList[i].filter((_, index) => !columnsToRemove.includes(index));
+    }
+    headerRow = arraysList[0];
+  }
+
+  // Check for null column headers
+  const nullHeaderIndices = arraysList[0]
+    .map((header, index) => (header === null || header === '') ? index : -1)
+    .filter(index => index !== -1);
+
+  if (nullHeaderIndices.length > 0) {
+    const errorMessage = `PEPs cannot have empty column headers. Either add column headers or remove the columns. \n\n Empty headers found at columns: ${nullHeaderIndices.map(i => i + 1).join(', ')}`;
+    throw new Error(errorMessage);
+  }
+
   // get the rest of the rows
   const theRest = arraysList.slice(1);
 
@@ -143,6 +194,8 @@ export const arraysToSampleList = (arraysList: any[][]) => {
     }
   });
 
+  console.log(sampleList)
+
   return sampleList;
 };