@opencloning/ui 1.9.1 → 2.0.0

package/src/components/sources/SourceHomologousRecombination.jsx

@@ -9,7 +9,7 @@ import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import SelectPrimerForm from '../primers/SelectPrimerForm';
 
 // A component representing the ligation of several fragments
-function SourceHomologousRecombination({ source, requestStatus, sendPostRequest }) {
+function SourceHomologousRecombination({ source, requestStatus, sendSourceRequest }) {
   const isCrispr = source.type === 'CRISPRSource';
   const { id: sourceId, input } = source;
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), isEqual);
@@ -33,9 +33,9 @@ function SourceHomologousRecombination({ source, requestStatus, sendPostRequest
     const config = { params: { minimal_homology: minimalHomologyRef.current.value } };
     if (isCrispr) {
       requestData.guides = selectedPrimers.map((primerId) => primers.find((p) => p.id === primerId));
-      sendPostRequest({ endpoint: 'crispr', requestData, config, source });
+      sendSourceRequest({ endpoint: 'crispr', requestData, config, source });
     } else {
-      sendPostRequest({ endpoint: 'homologous_recombination', requestData, config, source });
+      sendSourceRequest({ endpoint: 'homologous_recombination', requestData, config, source });
     }
   };
 

package/src/components/sources/SourceKnownGenomeRegion.jsx

@@ -4,7 +4,7 @@ import { geneSuggest } from '@opencloning/utils/ncbiRequests';
 import { formatBackendPayloadWithGene } from './SourceGenomeRegion';
 import { Box, CircularProgress } from '@mui/material';
 
-function SourceKnownGenomeRegion({ source, requestStatus, sendPostRequest }) {
+function SourceKnownGenomeRegion({ source, requestStatus, sendSourceRequest }) {
   // A source where we pass a complete GenomeCoordinatesSource, so we just have to make the request
   const [error, setError] = React.useState('');
   const [connectAttempt, setConnectAttempt] = React.useState(0);
@@ -25,14 +25,14 @@ function SourceKnownGenomeRegion({ source, requestStatus, sendPostRequest }) {
         }
         const requestData = formatBackendPayloadWithGene(source.assembly_accession, resp[0], source.padding, source.padding);
         requestData.id = source.id;
-        sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+        sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
       }
       else {
         const requestData = {
           ...source,
           type: 'GenomeCoordinatesSource',
         };
-        sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+        sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
       }
     }
   makeRequest();

package/src/components/sources/SourceManuallyTyped.jsx

@@ -4,7 +4,7 @@ import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import ValidatedTextField from '../form/ValidatedTextField';
 import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
 
-function SourceManuallyTyped({ source, requestStatus, sendPostRequest }) {
+function SourceManuallyTyped({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
 
   const [userInput, setUserInput] = React.useState('');
@@ -48,7 +48,7 @@ function SourceManuallyTyped({ source, requestStatus, sendPostRequest }) {
           overhang_watson_3prime: overhangWatson3prime,
         },
       };
-      sendPostRequest({ endpoint: 'manually_typed', requestData, source });
+      sendSourceRequest({ endpoint: 'manually_typed', requestData, source });
     }
   };
 

package/src/components/sources/SourcePCRorHybridization.jsx

@@ -10,7 +10,7 @@ import { cloningActions } from '@opencloning/store/cloning';
 import useStoreEditor from '../../hooks/useStoreEditor';
 import LabelWithTooltip from '../form/LabelWithTooltip';
 
-function SourcePCRorHybridization({ source, requestStatus, sendPostRequest }) {
+function SourcePCRorHybridization({ source, requestStatus, sendSourceRequest }) {
   // Represents a PCR if inputs != [], else is a oligo hybridization
 
   const dispatch = useDispatch();
@@ -58,14 +58,14 @@ function SourcePCRorHybridization({ source, requestStatus, sendPostRequest }) {
     if (!isPcr) {
       requestData.source.input = [forwardPrimerId, reversePrimerId].map((id) => ({ sequence: id }));
       const config = { params: { minimal_annealing: minimalAnnealingRef.current.value } };
-      sendPostRequest({ endpoint: 'oligonucleotide_hybridization', requestData, config, source });
+      sendSourceRequest({ endpoint: 'oligonucleotide_hybridization', requestData, config, source });
     } else {
       const config = { params: {
         minimal_annealing: minimalAnnealingRef.current.value,
         allowed_mismatches: allowedMismatchesRef.current.value,
       } };
       requestData.source.add_primer_features = addPrimerFeatures;
-      sendPostRequest({ endpoint: 'pcr', requestData, config, source });
+      sendSourceRequest({ endpoint: 'pcr', requestData, config, source });
     }
   };
 

package/src/components/sources/SourcePolymeraseExtension.jsx

@@ -4,7 +4,7 @@ import { Alert } from '@mui/material';
 import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 
-function SourcePolymeraseExtension({ source, requestStatus, sendPostRequest }) {
+function SourcePolymeraseExtension({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
   const { overhang_crick_3prime, overhang_watson_3prime } = inputSequences[0];
@@ -16,7 +16,7 @@ function SourcePolymeraseExtension({ source, requestStatus, sendPostRequest }) {
       sequences: inputSequences,
       source: { id: sourceId, input: inputSequences.map((e) => ({ sequence: e.id })) },
     };
-    sendPostRequest({ endpoint: 'polymerase_extension', requestData, source });
+    sendSourceRequest({ endpoint: 'polymerase_extension', requestData, source });
   };
   // No need for MultipleOutputsSelector, since there is only one output
   return (

package/src/components/sources/SourceRepositoryId.jsx

@@ -3,10 +3,10 @@ import { IconButton, InputAdornment, InputLabel, MenuItem, TextField, FormContro
 import { Clear as ClearIcon } from '@mui/icons-material';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
-import getHttpClient from '@opencloning/utils/getHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
 import repositoryMetadata from './repositoryMetadata';
 
-const httpClient = getHttpClient();
+const httpClient = getExternalHttpClient();
 
 function validateRepositoryId(repositoryId, repository) {
   switch (repository) {
@@ -243,7 +243,7 @@ function IndexJsonSelector({
 
 // A component providing an interface for the user to type a repository ID
 // and get a sequence
-function SourceRepositoryId({ source, requestStatus, sendPostRequest }) {
+function SourceRepositoryId({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [inputValue, setInputValue] = React.useState('');
   const [repositoryType, setRepositoryType] = React.useState(source.type || '');
@@ -290,7 +290,7 @@ function SourceRepositoryId({ source, requestStatus, sendPostRequest }) {
       extra.sequence_file_url = encodeURI(inputValue.url);
     }
     const requestData = { id: sourceId, ...extra, type: repositoryType };
-    sendPostRequest({ endpoint: `repository_id/${repositoryMeta.slug}`, requestData, source });
+    sendSourceRequest({ endpoint: `repository_id/${repositoryMeta.slug}`, requestData, source });
   };
   const helperText = error || (repositoryMeta?.example && `Example: ${repositoryMeta.example}`);
   return (

package/src/components/sources/SourceRestriction.jsx

@@ -7,7 +7,7 @@ import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 // A component providing an interface for the user to perform a restriction reaction
 // with one or more restriction enzymes, move between output fragments, and eventually
 // select one as an output.
-function SourceRestriction({ source, requestStatus, sendPostRequest }) {
+function SourceRestriction({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [enzymes, setEnzymes] = React.useState([]);
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
@@ -19,7 +19,7 @@ function SourceRestriction({ source, requestStatus, sendPostRequest }) {
       source: { id: sourceId, input: source.input },
       sequences: inputSequences,
     };
-    sendPostRequest({ endpoint: 'restriction', requestData, source, config: { params: { restriction_enzymes: enzymes } } });
+    sendSourceRequest({ endpoint: 'restriction', requestData, source, config: { params: { restriction_enzymes: enzymes } } });
   };
 
   return (

package/src/components/sources/SourceReverseComplement.jsx

@@ -3,7 +3,7 @@ import { shallowEqual, useSelector } from 'react-redux';
 import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 
-function SourceReverseComplement({ source, requestStatus, sendPostRequest }) {
+function SourceReverseComplement({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId, input } = source;
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
   const onSubmit = (event) => {
@@ -13,7 +13,7 @@ function SourceReverseComplement({ source, requestStatus, sendPostRequest }) {
       sequences: inputSequences,
       source: { id: sourceId, input },
     };
-    sendPostRequest({ endpoint: 'reverse_complement', requestData, source });
+    sendSourceRequest({ endpoint: 'reverse_complement', requestData, source });
   };
     // No need for MultipleOutputsSelector, since there is only one output
   return (

package/src/components/sources/SourceServerStaticFile.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { Alert, LinearProgress } from '@mui/material';
 
-function SourceServerStaticFile({ source, requestStatus, sendPostRequest }) {
+function SourceServerStaticFile({ source, requestStatus, sendSourceRequest }) {
   const onFileSelected = React.useCallback((file) => {
     const requestData = new FormData();
     requestData.append('file', file);
@@ -11,8 +11,8 @@ function SourceServerStaticFile({ source, requestStatus, sendPostRequest }) {
         'content-type': 'multipart/form-data',
       },
     };
-    sendPostRequest({ endpoint: 'read_from_file', requestData, config, source });
-  }, [sendPostRequest, source]);
+    sendSourceRequest({ endpoint: 'read_from_file', requestData, config, source });
+  }, [sendSourceRequest, source]);
 
   return (
     <>

package/src/components/verification/VerificationFileDialog.cy.jsx

@@ -4,6 +4,11 @@ import store from '@opencloning/store';
 import { cloningActions } from '@opencloning/store/cloning';
 import { loadDataAndMount } from '../../../../../cypress/e2e/common_funcions_store';
 import { getVerificationFileName } from '@opencloning/utils/readNwrite';
+import {
+  clearVerificationFileContents,
+  getVerificationFileContent,
+  setVerificationFileContent,
+} from '@opencloning/utils/verificationFileStore';
 import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
 import { Provider } from 'react-redux';
 
@@ -23,7 +28,7 @@ const base64str = 'aGVsbG8=';
 
 describe('<VerificationFileDialog />', () => {
   beforeEach(() => {
-    sessionStorage.clear();
+    clearVerificationFileContents();
   });
   it('renders and calls setDialogOpen with false when clicking close button', () => {
     // see: https://on.cypress.io/mounting-react
@@ -51,7 +56,7 @@ describe('<VerificationFileDialog />', () => {
   it('displays existing files and can download and delete them', () => {
     store.dispatch(setFiles(dummyFiles));
     dummyFiles.forEach((file) => {
-      sessionStorage.setItem(getVerificationFileName(file), base64str);
+      setVerificationFileContent(getVerificationFileName(file), base64str);
     });
     cy.mount(
       <Provider store={store}>
@@ -69,16 +74,11 @@ describe('<VerificationFileDialog />', () => {
 
     cy.get('[data-testid="DeleteIcon"]').first().click();
     cy.get('table').contains('file2.txt');
-    cy.get('table').contains('file1.txt').should('not.exist');
-
-    // Check that the file is not in sessionStorage
-    cy.window().its('sessionStorage')
-      .invoke('getItem', 'verification-1-file1.txt')
-      .should('be.null');
-
-    cy.window().its('sessionStorage')
-      .invoke('getItem', 'verification-1-file2.txt')
-      .should('not.be.null');
+    cy.get('table').contains('file1.txt').should('not.exist').then(() => {
+      // Check that the file is not in the verification file store
+      expect(getVerificationFileContent('verification-1-file1.txt')).to.be.null;
+      expect(getVerificationFileContent('verification-1-file2.txt')).to.not.be.null;
+    });
   });
 
   it('can submit files and aligns them', () => {
@@ -105,9 +105,8 @@ describe('<VerificationFileDialog />', () => {
       cy.expect(file.file_type).to.equal('Sequencing file');
       cy.expect(file.sequence_id).to.equal(2);
       cy.expect(file.alignment).to.have.length(2);
-      // The file content is stored in sessionStorage
-      cy.window().its('sessionStorage')
-        .invoke('getItem', getVerificationFileName(file))
+      // The file content is stored in the verification file store
+      cy.wrap(getVerificationFileContent(getVerificationFileName(file)))
         .should('not.be.null', { timeout: 10000 });
 
       cy.intercept('POST', 'http://127.0.0.1:8000/align_sanger*', {
@@ -133,9 +132,8 @@ describe('<VerificationFileDialog />', () => {
         cy.expect(file.file_type).to.equal('Sequencing file');
         cy.expect(file.sequence_id).to.equal(2);
         cy.expect(file.alignment).to.deep.equal(['A', 'C']);
-        // The file content is stored in sessionStorage
-        cy.window().its('sessionStorage')
-          .invoke('getItem', getVerificationFileName(file))
+        // The file content is stored in the verification file store
+        cy.wrap(getVerificationFileContent(getVerificationFileName(file)))
           .should('not.be.null', { timeout: 10000 });
       });
   });
@@ -187,9 +185,7 @@ describe('<VerificationFileDialog />', () => {
       cy.contains('Request failed');
       // It has not been added
       cy.get('table').contains('BZO902-13409020-13409020.ab1').should('not.exist');
-      cy.window().its('sessionStorage')
-        .invoke('getItem', 'verification-2-BZO902-13409020-13409020.ab1')
-        .should('be.null');
+      expect(getVerificationFileContent('verification-2-BZO902-13409020-13409020.ab1')).to.be.null;
 
       // Connection error
       cy.intercept('POST', 'http://127.0.0.1:8000/align_sanger*', {

package/src/components/verification/VerificationFileDialog.jsx

@@ -21,12 +21,15 @@ import { isEqual } from 'lodash-es';
 import { getTeselaJsonFromBase64, file2base64 } from '@opencloning/utils/readNwrite';
 import SequencingFileRow from './SequencingFileRow';
 import { cloningActions } from '@opencloning/store/cloning';
-import useBackendRoute from '../../hooks/useBackendRoute';
 import useStoreEditor from '../../hooks/useStoreEditor';
 import LoadFromDatabaseButton from './LoadFromDatabaseButton';
 import { sequencingFileExtensions } from '@opencloning/utils/sequencingFileExtensions';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 import { getVerificationFileName } from '@opencloning/utils/readNwrite';
+import {
+  getVerificationFileContent,
+  setVerificationFileContent,
+} from '@opencloning/utils/verificationFileStore';
 import ImportSequencingFilesInput from './ImportSequencingFilesInput';
 
 const { addFile, removeFile: removeFileAction, removeFilesAssociatedToSequence, setMainSequenceId, setCurrentTab } = cloningActions;
@@ -43,9 +46,8 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
   const dispatch = useDispatch();
   const fileInputRef = useRef(null);
   const { updateStoreEditor } = useStoreEditor();
-  const backendRoute = useBackendRoute();
   const store = useStore();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   const toggleMain = React.useCallback(() => {
     dispatch(setMainSequenceId(id));
@@ -78,7 +80,7 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
     const existingSequencingFilesInState = await Promise.all(store.getState().cloning.files
       .filter((f) => f.sequence_id === id && f.file_type === 'Sequencing file')
       .map(async (f) => {
-        const base64str = sessionStorage.getItem(getVerificationFileName(f));
+        const base64str = getVerificationFileContent(getVerificationFileName(f));
         const trace = (await getTeselaJsonFromBase64(base64str, f.file_name)).sequence;
         return { ...f, base64str, trace };
       }));
@@ -94,7 +96,7 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
     const allSequencingFiles = [...existingSequencingFilesInState, ...parsedSequencingFiles];
     const alignments = [];
     const traces = allSequencingFiles.map((f) => f.trace);
-    const resp = await httpClient.post(backendRoute('align_sanger'), { sequence, traces });
+    const resp = await httpClient.post('align_sanger', { sequence, traces });
 
     for (let i = 0; i < allSequencingFiles.length; i++) {
       alignments.push({ ...allSequencingFiles[i], alignment: [resp.data[0], resp.data[i + 1]] });
@@ -107,10 +109,10 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
         const { trace, base64str, ...rest } = alignment;
         dispatch(addFile(rest));
       });
-      alignments.forEach(({ base64str, file_name }) => { sessionStorage.setItem(`verification-${id}-${file_name}`, base64str); });
+      alignments.forEach(({ base64str, file_name }) => { setVerificationFileContent(`verification-${id}-${file_name}`, base64str); });
     });
     setLoadingMessage('');
-  }, [id, dispatch, httpClient, backendRoute, store, sequence]);
+  }, [id, dispatch, httpClient, store, sequence]);
 
   const onFileChange = useCallback(async (files) => {
     setLoadingMessage('Aligning...');
@@ -126,7 +128,6 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
 
   const removeFile = useCallback((fileName) => {
     dispatch(removeFileAction({ fileName, sequenceId: id }));
-    sessionStorage.removeItem(`verification-${id}-${fileName}`);
   }, [id, dispatch]);
 
   const handleClickUpload = useCallback(() => {
@@ -134,9 +135,9 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
   }, [fileInputRef]);
 
   const downloadFile = useCallback((fileName) => {
-    const base64Content = sessionStorage.getItem(`verification-${id}-${fileName}`);
+    const base64Content = getVerificationFileContent(`verification-${id}-${fileName}`);
     if (!base64Content) {
-      setError(`File ${fileName} not found in session storage`);
+      setError(`File ${fileName} not found in the verification file store`);
       return;
     }
     const binaryString = atob(base64Content);

package/src/hooks/index.js

@@ -1,2 +1,3 @@
 export { useConfig } from './useConfig.js';
 export { default as useServerStaticFiles, localFilesHttpClient } from './useServerStaticFiles.js';
+export { default as useBackendHttpClient } from './useBackendHttpClient.js';

package/src/hooks/useBackendHttpClient.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { getBackendHttpClient } from '@opencloning/utils/httpClients';
+import { useConfig } from './useConfig';
+
+/**
+ * Http client for the backend: urls are relative to config.backendUrl
+ * (e.g. httpClient.post('validate', body)), and requests can only reach the backend.
+ * For external urls use getExternalHttpClient() from @opencloning/utils/httpClients.
+ */
+export default function useBackendHttpClient() {
+  const { backendUrl, requiresBackendAuth = false } = useConfig();
+
+  return React.useMemo(
+    () => getBackendHttpClient(backendUrl, { authenticated: requiresBackendAuth }),
+    [backendUrl, requiresBackendAuth],
+  );
+}

package/src/hooks/useCloningHistoryLoader.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import { batch, useDispatch, useStore } from 'react-redux';
+import { cloningActions } from '@opencloning/store/cloning';
+import { getEmptyPlaceholderSource } from '@opencloning/store/cloning_utils';
+import { graftState, getGraftSequenceId, mergeStates } from '@opencloning/utils/network';
+import {
+  loadFilesToVerificationStore,
+  parseHistoryFile,
+  updateVerificationFileNames,
+} from '@opencloning/utils/readNwrite';
+import useCloningAlerts from './useCloningAlerts';
+import useBackendHttpClient from './useBackendHttpClient';
+import useValidateState from './useValidateState';
+
+const {
+  setState: setCloningState,
+  deleteSourceAndItsChildren,
+} = cloningActions;
+
+function makeAlertHandler(addAlert, onError, severity = 'error') {
+  return onError || ((message) => addAlert({ message, severity }));
+}
+
+function shouldDeleteSourceBeforeApply(mode, source) {
+  return source != null && mode === 'merge';
+}
+
+export default function useCloningHistoryLoader() {
+  const dispatch = useDispatch();
+  const store = useStore();
+  const validateState = useValidateState();
+  const { addAlert } = useCloningAlerts();
+  const httpClient = useBackendHttpClient();
+  const snapgeneUrl = 'read_snapgene_history';
+
+  const applyCloningStrategy = React.useCallback(async (cloningStrategy, options = {}) => {
+    const {
+      verificationFiles = [],
+      mode,
+      source = null,
+      onError,
+    } = options;
+
+    const reportError = makeAlertHandler(addAlert, onError);
+    const deleteSourceBeforeApply = shouldDeleteSourceBeforeApply(mode, source);
+    const sourceId = source?.id ?? null;
+
+    const prevState = store.getState().cloning;
+
+    try {
+      if (deleteSourceBeforeApply) {
+        dispatch(deleteSourceAndItsChildren(sourceId));
+      }
+
+      const cloningState = store.getState().cloning;
+      let newState;
+      let idShift = 0;
+
+      if (mode === 'replace') {
+        newState = cloningStrategy;
+      } else if (mode === 'merge') {
+        ({ mergedState: newState, idShift } = mergeStates(cloningStrategy, cloningState));
+      } else if (mode === 'graft') {
+        ({ mergedState: newState, idShift } = graftState(cloningStrategy, cloningState, sourceId));
+      } else {
+        throw new Error(`Unknown apply mode: ${mode}`);
+      }
+
+      batch(() => {
+        dispatch(setCloningState(newState));
+      });
+
+      await loadFilesToVerificationStore(verificationFiles, idShift);
+    } catch (e) {
+      console.error(e);
+      dispatch(setCloningState(prevState));
+      reportError(e.message);
+      throw e;
+    }
+  }, [addAlert, dispatch, store]);
+
+  const loadHistoryFromFile = React.useCallback(async (file, options = {}) => {
+    const { onError } = options;
+    const reportError = makeAlertHandler(addAlert, onError);
+
+    let cloningStrategy;
+    let verificationFiles;
+    try {
+      ({ cloningStrategy, verificationFiles } = await parseHistoryFile(file));
+    } catch (e) {
+      console.error(e);
+      reportError(e.message);
+      return null;
+    }
+
+    const validatedState = await validateState(cloningStrategy);
+    const updatedVerificationFiles = updateVerificationFileNames(
+      verificationFiles,
+      cloningStrategy.files,
+      validatedState.files,
+    );
+    const canGraft = getGraftSequenceId(validatedState) !== null;
+
+    const apply = (applyOptions) => applyCloningStrategy(validatedState, {
+      verificationFiles: updatedVerificationFiles,
+      validate: false,
+      ...applyOptions,
+    });
+
+    return {
+      cloningStrategy: validatedState,
+      verificationFiles: updatedVerificationFiles,
+      canGraft,
+      replace: (applyOptions = {}) => apply({ mode: 'replace', ...applyOptions }),
+      merge: (applyOptions = {}) => apply({ mode: 'merge', ...applyOptions }),
+      graft: (applyOptions = {}) => apply({ mode: 'graft', ...applyOptions }),
+    };
+  }, [addAlert, applyCloningStrategy, validateState]);
+
+  const loadSnapgeneHistory = React.useCallback(async (file, options = {}) => {
+    const { source = null, onError, onWarning } = options;
+    const reportWarning = makeAlertHandler(addAlert, onWarning, 'warning');
+
+    const cloningState = store.getState().cloning;
+    const formData = new FormData();
+    formData.append('file', file);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+
+    try {
+      const resp = await httpClient.post(snapgeneUrl, formData, config);
+      const { data: cloningStrategy } = resp;
+
+      const isEmptyState = getEmptyPlaceholderSource(cloningState.sources) !== null;
+      const mode = isEmptyState ? 'replace' : 'merge';
+
+      if (resp.headers['x-warning']) {
+        reportWarning(`Not all SnapGene history was parsed: ${resp.headers['x-warning']}`);
+      }
+
+      await applyCloningStrategy(cloningStrategy, {
+        mode,
+        source,
+        onError,
+      });
+      return true;
+    } catch {
+      reportWarning('Failed to parse the history from the SnapGene file, will only read the sequence.');
+      return false;
+    }
+  }, [addAlert, applyCloningStrategy, httpClient, snapgeneUrl, store]);
+
+  return {
+    applyCloningStrategy,
+    loadHistoryFromFile,
+    loadSnapgeneHistory,
+  };
+}

package/src/hooks/useGatewaySites.js

@@ -2,16 +2,14 @@ import React, { useCallback, useState } from 'react';
 import { useStore } from 'react-redux';
 import error2String from '@opencloning/utils/error2String';
 import { formatGatewaySites } from '@opencloning/store/cloning_utils';
-import useBackendRoute from './useBackendRoute';
-import useHttpClient from './useHttpClient';
+import useBackendHttpClient from './useBackendHttpClient';
 
 export default function useGatewaySites({ target, greedy }) {
   const store = useStore();
   const [requestStatus, setRequestStatus] = useState({ status: null, message: '' });
   const [connectAttempt, setConnectAttempt] = useState(0);
   const [sites, setSites] = useState([]);
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   const attemptAgain = useCallback(() => {
     setConnectAttempt((p) => p + 1);
@@ -20,7 +18,7 @@ export default function useGatewaySites({ target, greedy }) {
   React.useEffect(() => {
     async function getSitesInTarget() {
       setRequestStatus({ status: 'loading', message: 'loading' });
-      const url = backendRoute('annotation/get_gateway_sites');
+      const url = 'annotation/get_gateway_sites';
       const state = store.getState();
       const sequence = state.cloning.sequences.find((seq) => seq.id === target);
       try {

package/src/hooks/useInitializeApp.js

@@ -1,15 +1,14 @@
 import { useEffect } from 'react';
+import { clearVerificationFileContents } from '@opencloning/utils/verificationFileStore';
 
 /**
  * Hook to initialize application-level concerns
- * - Clears session storage
+ * - Clears the in-memory verification file store
  */
 export default function useInitializeApp() {
 
   useEffect(() => {
-    // Clear session storage
-    // eslint-disable-next-line no-undef
-    sessionStorage.clear();
+    clearVerificationFileContents();
   }, []);
 }