@opencloning/ui 1.7.1 → 1.7.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @opencloning/ui
 
+## 1.7.3
+
+### Patch Changes
+
+- [#677](https://github.com/manulera/OpenCloning_frontend/pull/677) [`04827d6`](https://github.com/manulera/OpenCloning_frontend/commit/04827d6184c5a1276814f60ef3c3fee2c832a6fd) Thanks [@manulera](https://github.com/manulera)! - Now loads history from Snapgene files
+
+- Updated dependencies []:
+  - @opencloning/store@1.7.3
+  - @opencloning/utils@1.7.3
+
+## 1.7.2
+
+### Patch Changes
+
+- [#675](https://github.com/manulera/OpenCloning_frontend/pull/675) [`1f08cca`](https://github.com/manulera/OpenCloning_frontend/commit/1f08ccab8422d9cf9a9355d2770fa8997e53c96b) Thanks [@manulera](https://github.com/manulera)! - Improve loading files from server in Assembler
+
+- Updated dependencies []:
+  - @opencloning/store@1.7.2
+  - @opencloning/utils@1.7.2
+
 ## 1.7.1
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@opencloning/ui",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -33,8 +33,8 @@
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
     "@mui/x-data-grid": "^8.25.0",
-    "@opencloning/store": "1.7.1",
-    "@opencloning/utils": "1.7.1",
+    "@opencloning/store": "1.7.3",
+    "@opencloning/utils": "1.7.3",
     "@teselagen/bio-parsers": "^0.4.34",
     "@teselagen/ove": "^0.8.34",
     "@teselagen/range-utils": "^0.3.20",

package/src/components/LoadCloningHistoryWrapper.jsx

@@ -10,6 +10,7 @@ import HistoryLoadedDialog from './HistoryLoadedDialog';
 import useHttpClient from '../hooks/useHttpClient';
 import { getVerificationFileName } from '@opencloning/utils/readNwrite';
 import { isEqual } from 'lodash-es';
+import useSnapgeneHistoryEndpoint from '../hooks/useSnapgeneHistoryEndpoint';
 
 const { setState: setCloningState, deleteSourceAndItsChildren, addSourceAndItsOutputSequence } = cloningActions;
 
@@ -64,7 +65,7 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
   const store = useStore();
   const validateState = useValidateState();
   const httpClient = useHttpClient();
-
+  const { loadSnapgeneHistory } = useSnapgeneHistoryEndpoint();
   const [fileLoaderFunctions, setFileLoaderFunctions] = React.useState(null);
 
   React.useEffect(() => {
@@ -124,34 +125,40 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
         }
         // If there are sequences in the cloning state, give the option to merge or replace
 
+        return;
         // You cannot drop a zip or json file and a sequence file at the same time
       } else if (files.some((file) => file.name.endsWith('.json') || file.name.endsWith('.zip'))) {
         addAlert({
           message: 'Drop either a single JSON/zip file or multiple sequence files. Not both.',
           severity: 'error',
         });
+        return;
         // Process a bunch of sequence files
-      } else {
-        try {
-          const { sources, sequences, warnings } = await processSequenceFiles(files, backendRoute, httpClient);
-          batch(() => {
-            // If there is only one source and it is empty, delete it
-            if (cloningState.sources.length === 1 && cloningState.sources[0].type === null) {
-              dispatch(deleteSourceAndItsChildren(cloningState.sources[0].id));
-            }
-            for (let i = 0; i < sources.length; i += 1) {
-              dispatch(addSourceAndItsOutputSequence({ source: sources[i], sequence: sequences[i] }));
-            }
-            warnings.forEach((warning) => addAlert({ message: warning, severity: 'warning' }));
-          });
-        } catch (e) {
-          console.error(e);
-          addAlert({
-            message: e.message,
-            severity: 'error',
-          });
+      } else if (files.length === 1 && files[0].name.endsWith('.dna')) {
+        const success = await loadSnapgeneHistory(files[0]);
+        if (success) {
+          return;
         }
       }
+      try {
+        const { sources, sequences, warnings } = await processSequenceFiles(files, backendRoute, httpClient);
+        batch(() => {
+          // If there is only one source and it is empty, delete it
+          if (cloningState.sources.length === 1 && cloningState.sources[0].type === null) {
+            dispatch(deleteSourceAndItsChildren(cloningState.sources[0].id));
+          }
+          for (let i = 0; i < sources.length; i += 1) {
+            dispatch(addSourceAndItsOutputSequence({ source: sources[i], sequence: sequences[i] }));
+          }
+          warnings.forEach((warning) => addAlert({ message: warning, severity: 'warning' }));
+        });
+      } catch (e) {
+        console.error(e);
+        addAlert({
+          message: e.message,
+          severity: 'error',
+        });
+      }
     };
     processFileSubmission();
   }, [fileList]);

package/src/components/assembler/UploadPlasmidsButton.jsx

@@ -39,6 +39,7 @@ export function UploadPlasmidsFromLocalServerButton({ handleFileChange }) {
   const onFileSelected = React.useCallback(async (files) => {
     try {
       await handleFileChange(files)
+      setDialogOpen(false)
     } catch (e) {
       setError(e.message)
     }

package/src/components/form/ServerStaticFileSelect.jsx

@@ -16,11 +16,13 @@ function ServerStaticFileSelect({ onFileSelected, multiple = false, type = 'sequ
     if (type !== 'sequence') {
       return index.syntaxes;
     }
+    const sequencesIdAdded = index.sequences.map((sequence, index) => ({...sequence, id: index}));
     const prePendArray = multiple ? ['__all__'] : [];
     if (selectedCategory === '') {
-      return [...prePendArray, ...index.sequences];
+      return [...prePendArray, ...sequencesIdAdded];
     }
-    return [...prePendArray, ...index.sequences.filter((sequence) => sequence.categories?.includes(selectedCategory))];
+
+    return [...prePendArray, ...sequencesIdAdded.filter((sequence) => sequence.categories?.includes(selectedCategory))];
   }, [type, index, selectedCategory, multiple]);
 
   const categoryOptions = React.useMemo(() => {
@@ -112,6 +114,7 @@ function ServerStaticFileSelect({ onFileSelected, multiple = false, type = 'sequ
             options={options}
             value={selectedOptions}
             onChange={onOptionsChange}
+            getOptionKey={(option) => option.id || option}
             getOptionLabel={(option) => (option === '__all__' ? 'Select all' : option?.name || option?.path || '')}
             disableCloseOnSelect={multiple}
             renderInput={(params) => (

package/src/components/sources/SourceFile.jsx

@@ -7,6 +7,7 @@ import { cloningActions } from '@opencloning/store/cloning';
 import { loadFilesToSessionStorage, loadHistoryFile, updateVerificationFileNames } from '@opencloning/utils/readNwrite';
 import useValidateState from '../../hooks/useValidateState';
 import { mergeStates, getGraftSequenceId, graftState } from '@opencloning/utils/network';
+import useSnapgeneHistoryEndpoint from '../../hooks/useSnapgeneHistoryEndpoint';
 
 const { deleteSourceAndItsChildren, restoreSource, setState: setCloningState } = cloningActions;
 
@@ -30,7 +31,7 @@ function SourceFile({ source, requestStatus, sendPostRequest }) {
   const dispatch = useDispatch();
   const validateState = useValidateState();
   const store = useStore();
-
+  const { loadSnapgeneHistory } = useSnapgeneHistoryEndpoint();
   const onChange = async (event) => {
     setAlert(null);
     const files = Array.from(event.target.files);
@@ -94,6 +95,13 @@ function SourceFile({ source, requestStatus, sendPostRequest }) {
       });
       return;
     }
+    if (fileFormat === 'snapgene' || (fileFormat === '' && files[0].name.endsWith('.dna'))) {
+      console.log('loading snapgene history');
+      const success = await loadSnapgeneHistory(files[0], source.id);
+      if (success) {
+        return;
+      }
+    }
     const requestData = new FormData();
     requestData.append('file', files[0]);
     const config = {

package/src/hooks/useSnapgeneHistoryEndpoint.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import useBackendRoute from './useBackendRoute';
+import useHttpClient from './useHttpClient';
+import useAlerts from './useAlerts';
+import { batch, useDispatch, useStore } from 'react-redux';
+import { mergeStates } from '@opencloning/utils/network';
+import { cloningActions } from '@opencloning/store/cloning';
+
+const { setState: setCloningState, deleteSourceAndItsChildren } = cloningActions;
+
+
+/**
+ * Custom React hook that provides a function to load and process a SnapGene .dna file's cloning history
+ * via the backend endpoint. If successful, updates the Redux cloning state (merging or replacing as appropriate)
+ * and handles warnings. On failure, triggers a user alert.
+ *
+ * @returns {Object} An object with a single method `loadSnapgeneHistory(file)`:
+ *   - {Promise<boolean>} loadSnapgeneHistory(file): Attempt to load and merge/replace SnapGene history.
+ *     Returns true on successfully parsing the SnapGene file, otherwise returns false and triggers a warning alert.
+ */
+export default function useSnapgeneHistoryEndpoint() {
+  const backendRoute = useBackendRoute();
+  const httpClient = useHttpClient();
+  const { addAlert } = useAlerts();
+  const dispatch = useDispatch();
+  const store = useStore();
+  const url = backendRoute('read_snapgene_history');
+
+  const loadSnapgeneHistory = React.useCallback(async (file, sourceIdToDelete = null) => {
+    const cloningState = store.getState().cloning;
+    const formData = new FormData();
+    formData.append('file', file);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+    // If it fails to parse the history return false, true otherwise
+    try {
+      const resp = await httpClient.post(url, formData, config);
+      const { data: cloningStrategy } = resp;
+      let mergedState;
+      if (!(cloningState.sources.length === 1 && cloningState.sources[0].type === null)) {
+        ({ mergedState } = mergeStates(cloningStrategy, cloningState));
+      } else {
+        // If there is only one source and it is empty, replace the whole state
+        mergedState = cloningStrategy;
+      }
+      if (resp.headers['x-warning']) {
+        addAlert({
+          message: `SnapGene parsing warning: ${resp.headers['x-warning']}`,
+          severity: 'warning',
+        });
+      }
+      batch(() => {
+        dispatch(setCloningState(mergedState));
+        if (sourceIdToDelete !== null) {
+          console.log('deleting source', sourceIdToDelete);
+          dispatch(deleteSourceAndItsChildren(sourceIdToDelete));
+        }
+      });
+      return true;
+    } catch {
+      addAlert({
+        message: 'Failed to parse the history from the SnapGene file, will only read the sequence.',
+        severity: 'warning',
+      });
+      return false;
+    }
+  }, [httpClient, addAlert, dispatch, store, url]);
+  return { loadSnapgeneHistory };
+}

package/src/version.js

@@ -1,2 +1,2 @@
 // Version placeholder - replaced at publish time via prepack script
-export const version = "1.7.1";
+export const version = "1.7.3";