@opencloning/ui 1.9.2 → 2.0.0

package/src/components/sources/SourceAnnotation.jsx

@@ -5,7 +5,7 @@ import { isEqual } from 'lodash-es';
 import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 
-function SourceAnnotation({ source, requestStatus, sendPostRequest }) {
+function SourceAnnotation({ source, requestStatus, sendSourceRequest }) {
   const [annotationTool, setAnnotationTool] = React.useState('plannotate');
 
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, source.id), isEqual);
@@ -16,7 +16,7 @@ function SourceAnnotation({ source, requestStatus, sendPostRequest }) {
       sequence: inputSequences[0],
       source: { id: source.id, input: inputSequences.map((e) => ({ sequence: e.id })), annotation_tool: annotationTool },
     };
-    sendPostRequest({ endpoint: 'annotate/plannotate', requestData, source });
+    sendSourceRequest({ endpoint: 'annotate/plannotate', requestData, source });
   };
 
   return (

package/src/components/sources/SourceAssembly.jsx

@@ -15,7 +15,7 @@ const helpSingleSite = 'Even if input sequences contain multiple att sites '
   + 'Select this option to get those products.';
 
 // A component representing the ligation or gibson assembly of several fragments
-function SourceAssembly({ source, requestStatus, sendPostRequest }) {
+function SourceAssembly({ source, requestStatus, sendSourceRequest }) {
   const assemblyType = source.type;
   const { id: sourceId, input: sourceInput } = source;
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
@@ -91,21 +91,21 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
       } };
       // To instantiate the correct class on the backend
       requestData.source.type = assemblyType;
-      sendPostRequest({ endpoint: 'gibson_assembly', requestData, config, source });
+      sendSourceRequest({ endpoint: 'gibson_assembly', requestData, config, source });
     } else if (assemblyType === 'RestrictionAndLigationSource') {
       if (enzymes.length === 0) { return; }
       requestData.source.restriction_enzymes = enzymes;
       const config = { params: {
         circular_only: circularOnly,
       } };
-      sendPostRequest({ endpoint: 'restriction_and_ligation', requestData, config, source });
+      sendSourceRequest({ endpoint: 'restriction_and_ligation', requestData, config, source });
     } else if (assemblyType === 'GatewaySource') {
       requestData.source.greedy = gatewaySettings.greedy;
       requestData.source.reaction_type = gatewaySettings.reactionType;
       const config = { params: { circular_only: circularOnly, only_multi_site: gatewaySettings.onlyMultiSite } };
-      sendPostRequest({ endpoint: 'gateway', requestData, config, source });
+      sendSourceRequest({ endpoint: 'gateway', requestData, config, source });
     } else if (assemblyType === 'CreLoxRecombinationSource') {
-      sendPostRequest({ endpoint: 'cre_lox_recombination', requestData, source });
+      sendSourceRequest({ endpoint: 'cre_lox_recombination', requestData, source });
     } else if (assemblyType === 'RecombinaseSource') {
       if (recombinases.length === 0) { return; }
       requestData.source.recombinases = recombinases;
@@ -113,14 +113,14 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
         reverse_recombinase: reverseRecombinase,
         input_contains_genome: inputContainsGenome,
       } };
-      sendPostRequest({ endpoint: 'recombinase', requestData, config, source });
+      sendSourceRequest({ endpoint: 'recombinase', requestData, config, source });
     } else {
       const config = { params: {
         allow_partial_overlap: allowPartialOverlap,
         circular_only: circularOnly,
         blunt: bluntLigation,
       } };
-      sendPostRequest({ endpoint: classNameToEndPointMap[assemblyType], requestData, config, source });
+      sendSourceRequest({ endpoint: classNameToEndPointMap[assemblyType], requestData, config, source });
     }
   };
 

package/src/components/sources/SourceDatabase.jsx

@@ -4,12 +4,12 @@ import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import useDatabase from '../../hooks/useDatabase';
 import useLoadDatabaseFile from '../../hooks/useLoadDatabaseFile';
 
-function SourceDatabase({ source, requestStatus, sendPostRequest }) {
+function SourceDatabase({ source, requestStatus, sendSourceRequest }) {
   const [file, setFile] = React.useState(null);
   const [databaseId, setDatabaseId] = React.useState(null);
   const database = useDatabase();
   const [historyFileError, setHistoryFileError] = React.useState(null);
-  const { loadDatabaseFile } = useLoadDatabaseFile({ source, sendPostRequest, setHistoryFileError });
+  const { loadDatabaseFile } = useLoadDatabaseFile({ source, sendSourceRequest, setHistoryFileError });
 
   const onSubmit = async (e) => {
     e.preventDefault();

package/src/components/sources/SourceFile.jsx

@@ -14,7 +14,7 @@ const fileFormatToExtension = {
 };
 
 // A component providing an interface to import a file
-function SourceFile({ source, requestStatus, sendPostRequest }) {
+function SourceFile({ source, requestStatus, sendSourceRequest }) {
   const [circularize, setCircularize] = React.useState(false);
   const [showCoordinates, setShowCoordinates] = React.useState(false);
   const [coordinates, setCoordinates] = React.useState({ start: null, end: null });
@@ -80,7 +80,7 @@ function SourceFile({ source, requestStatus, sendPostRequest }) {
       },
       params: { circularize, sequence_file_format: fileFormat || null, ...coordinates },
     };
-    sendPostRequest({ endpoint: 'read_from_file', requestData, config, source });
+    sendSourceRequest({ endpoint: 'read_from_file', requestData, config, source });
   };
 
   const updateCoordinates = (value, isStart) => {

package/src/components/sources/SourceGenomeRegion.cy.jsx

@@ -62,6 +62,52 @@ describe('<AssemblyIdSelector />', () => {
     cy.wait('@getPairedAssemblyInfo');
     cy.contains('Equivalent assembly GCF_000002945.3 has annotation').should('exist');
   });
+  it('shows a warning when the paired accession lookup fails', () => {
+    const setAssemblyId = cy.spy().as('setAssemblyId');
+    const setHasAnnotation = cy.spy().as('setHasAnnotation');
+    const onAssemblyIdChange = cy.spy().as('onAssemblyIdChange');
+
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCA_000002945.3/dataset_report*', {
+      statusCode: 200,
+      body: {
+        reports: [{
+          accession: 'GCA_000002945.3',
+          organism: {
+            tax_id: 559292,
+            organism_name: 'Saccharomyces cerevisiae'
+          },
+          annotation_info: undefined,
+          paired_accession: 'GCF_000002945.3',
+          assembly_info: {
+            assembly_status: 'current'
+          }
+        }]
+      }
+    }).as('getAssemblyInfo');
+
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCF_000002945.3/dataset_report*', {
+      statusCode: 500,
+      body: {}
+    }).as('getPairedAssemblyInfo');
+
+    cy.mount(
+      <ConfigProvider config={config}>
+        <AssemblyIdSelector
+          setAssemblyId={setAssemblyId}
+          setHasAnnotation={setHasAnnotation}
+          onAssemblyIdChange={onAssemblyIdChange}
+        />
+      </ConfigProvider>
+    );
+    cy.get('input').type('GCA_000002945.3');
+    cy.wait('@getAssemblyInfo');
+    cy.wait('@getPairedAssemblyInfo');
+
+    cy.contains('Could not check whether an equivalent assembly has annotation:').should('exist');
+    cy.contains('Equivalent assembly GCF_000002945.3 has annotation').should('not.exist');
+    cy.get('label').contains('Species').siblings('div').children('input')
+      .should('have.value', 'Saccharomyces cerevisiae - 559292');
+  });
   it('handles NCBI being down displaying the right error', () => {
     cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCA_000002945.3/dataset_report*', {
       statusCode: 500,

package/src/components/sources/SourceGenomeRegion.jsx

@@ -5,8 +5,11 @@ import { getReferenceAssemblyId, taxonSuggest, geneSuggest, getInfoFromAssemblyI
 import TextFieldValidate from '../form/TextFieldValidate';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import GetRequestMultiSelect from '../form/GetRequestMultiSelect';
-import useHttpClient from '../../hooks/useHttpClient';
 import { formatSequenceLocationString } from '@opencloning/utils/other';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
+
+// External urls (not the backend): no auth token, only whitelisted urls
+const httpClient = getExternalHttpClient();
 
 function getGeneCoordsInfo(gene) {
   const { range: geneRange, accession_version: accessionVersion } = gene.annotation.genomic_regions[0].gene_range;
@@ -59,7 +62,6 @@ function SpeciesPicker({ setSpecies, setAssemblyId }) {
 }
 
 function SequenceAccessionPicker({ assemblyAccession, setSequenceAccession }) {
-  const httpClient = useHttpClient();
 
   const url = `https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/${assemblyAccession}/sequence_reports`
   return (
@@ -80,7 +82,7 @@ function SequenceAccessionPicker({ assemblyAccession, setSequenceAccession }) {
 }
 
 // Extra component to be used in SourceGenomeRegion
-function SourceGenomeRegionLocusOnReference({ source, requestStatus, sendPostRequest }) {
+function SourceGenomeRegionLocusOnReference({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [gene, setGene] = React.useState(null);
   const [species, setSpecies] = React.useState(null);
@@ -92,7 +94,7 @@ function SourceGenomeRegionLocusOnReference({ source, requestStatus, sendPostReq
     event.preventDefault();
     const requestData = formatBackendPayloadWithGene(assemblyId, gene, Number(upstreamBasesRef.current.value), Number(downstreamBasesRef.current.value));
     requestData.id = sourceId;
-    sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+    sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
   };
 
   // Reset gene when species changes
@@ -153,9 +155,11 @@ function AssemblyIdSelector({ setAssemblyId, setHasAnnotation = () => {}, onAsse
   const [newerAssembly, setNewerAssembly] = React.useState(false);
   const [species, setSpecies] = React.useState(null);
   const [pairedAccessionWithAnnotation, setPairedAccessionWithAnnotation] = React.useState('');
+  const [pairedAccessionLookupFailed, setPairedAccessionLookupFailed] = React.useState(false);
 
   const onChange = async (userInput, resp) => {
     setPairedAccessionWithAnnotation('');
+    setPairedAccessionLookupFailed(false);
     setSpecies(resp === null ? null : resp.species);
     if (resp === null) {
       setAssemblyId('');
@@ -172,9 +176,14 @@ function AssemblyIdSelector({ setAssemblyId, setHasAnnotation = () => {}, onAsse
     setNewerAssembly(resp !== null && resp.newerAssembly);
     onAssemblyIdChange();
     if (resp !== null && !resp.hasAnnotation && resp.pairedAccession) {
-      const pairedAccessionInfo = await getInfoFromAssemblyId(resp.pairedAccession);
-      if (pairedAccessionInfo !== null && pairedAccessionInfo.hasAnnotation) {
-        setPairedAccessionWithAnnotation(resp.pairedAccession);
+      try {
+        const pairedAccessionInfo = await getInfoFromAssemblyId(resp.pairedAccession);
+        if (pairedAccessionInfo !== null && pairedAccessionInfo.hasAnnotation) {
+          setPairedAccessionWithAnnotation(resp.pairedAccession);
+        }
+      } catch (e) {
+        console.error(e);
+        setPairedAccessionLookupFailed(true);
       }
     }
   };
@@ -194,13 +203,18 @@ function AssemblyIdSelector({ setAssemblyId, setHasAnnotation = () => {}, onAsse
           Equivalent assembly <a href={`https://www.ncbi.nlm.nih.gov/datasets/genome/${pairedAccessionWithAnnotation}`} target="_blank" rel="noopener noreferrer">{pairedAccessionWithAnnotation}</a> has annotation.
         </Alert>
       )}
+      {pairedAccessionLookupFailed && (
+        <Alert severity="warning">
+          Could not check whether an equivalent assembly has annotation: Try deleting and retyping the assembly ID.
+        </Alert>
+      )}
       {species && <KnownSpeciesField species={species} />}
     </>
   );
 }
 
 // Extra component to be used in SourceGenomeRegion
-function SourceGenomeRegionLocusOnOther({ source, requestStatus, sendPostRequest }) {
+function SourceGenomeRegionLocusOnOther({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [gene, setGene] = React.useState(null);
   const [assemblyId, setAssemblyId] = React.useState('');
@@ -212,7 +226,7 @@ function SourceGenomeRegionLocusOnOther({ source, requestStatus, sendPostRequest
     event.preventDefault();
     const requestData = formatBackendPayloadWithGene(assemblyId, gene, Number(upstreamBasesRef.current.value), Number(downstreamBasesRef.current.value));
     requestData.id = sourceId;
-    sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+    sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
   };
 
   return (
@@ -235,7 +249,7 @@ function SourceGenomeRegionLocusOnOther({ source, requestStatus, sendPostRequest
 }
 
 // Extra component to be used in SourceGenomeRegion
-function SourceGenomeRegionCustomCoordinates({ source, requestStatus, sendPostRequest, selectionMode }) {
+function SourceGenomeRegionCustomCoordinates({ source, requestStatus, sendSourceRequest, selectionMode }) {
   // https://eutils.ncbi.nlm.nih.gov/entrez/eutils/elink.fcgi?dbfrom=nuccore&db=assembly&id=CM041205.1&idtype=acc
   const { id: sourceId } = source;
   const [species, setSpecies] = React.useState(null);
@@ -285,7 +299,7 @@ function SourceGenomeRegionCustomCoordinates({ source, requestStatus, sendPostRe
       assembly_accession: assemblyId || null,
       coordinates: formatSequenceLocationString(coords.start, coords.end, coords.strand === 'plus' ? 1 : -1),
     };
-    sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+    sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
   };
 
   const onSequenceAccessionChange = async (userInput, resp) => {
@@ -446,7 +460,7 @@ function SourceGenomeRegionSelectGene({ gene, upstreamBasesRef, downstreamBasesR
   );
 }
 
-function SourceGenomeRegion({ source, requestStatus, sendPostRequest }) {
+function SourceGenomeRegion({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [selectionMode, setSelectionMode] = React.useState('');
   const changeSelectionMode = (event) => { setSelectionMode(event.target.value); };
@@ -470,9 +484,9 @@ function SourceGenomeRegion({ source, requestStatus, sendPostRequest }) {
           </Select>
         </FormControl>
       </form>
-      {selectionMode === 'reference_genome' && (<SourceGenomeRegionLocusOnReference {...{ source, requestStatus, sendPostRequest }} />)}
-      {selectionMode === 'other_assembly' && (<SourceGenomeRegionLocusOnOther {...{ source, requestStatus, sendPostRequest }} />)}
-      {selectionMode.startsWith('custom') && (<SourceGenomeRegionCustomCoordinates {...{ source, requestStatus, sendPostRequest, selectionMode }} />)}
+      {selectionMode === 'reference_genome' && (<SourceGenomeRegionLocusOnReference {...{ source, requestStatus, sendSourceRequest }} />)}
+      {selectionMode === 'other_assembly' && (<SourceGenomeRegionLocusOnOther {...{ source, requestStatus, sendSourceRequest }} />)}
+      {selectionMode.startsWith('custom') && (<SourceGenomeRegionCustomCoordinates {...{ source, requestStatus, sendSourceRequest, selectionMode }} />)}
 
     </>
   );

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*', {