@opencloning/ui 1.5.0 → 1.5.1

package/src/components/primers/primer_design/SequenceTabComponents/PrimerDesigner.jsx

@@ -12,12 +12,13 @@ import PrimerDesignGatewayBP from './PrimerDesignGatewayBP';
 import PrimerDesignEBIC from './PrimerDesignEBIC';
 import PrimerDesignRestriction from './PrimerDesignRestriction';
 
+const { setMainSequenceId } = cloningActions;
+
 function PrimerDesigner() {
   const { updateStoreEditor } = useStoreEditor();
   const dispatch = useDispatch();
-  const { setMainSequenceId } = cloningActions;
 
-  const { finalSource, otherInputIds, pcrSources, outputSequences } = useSelector((state) => getPrimerDesignObject(state.cloning), isEqual);
+  const { finalSource, otherInputIds, pcrSources, outputSequences, assemblyInputsInOrder } = useSelector((state) => getPrimerDesignObject(state.cloning), isEqual);
 
   const mainSequenceId = useSelector((state) => state.cloning.mainSequenceId);
 
@@ -36,36 +37,30 @@ function PrimerDesigner() {
   const showPrimerDesigner = [...templateSequencesIds, ...otherInputIds].includes(mainSequenceId);
 
   let component = null;
-  // Check conditions for different types of primer design
   if (finalSource === null && pcrSources.length === 1 && outputSequences[0].primer_design === 'restriction_ligation') {
     component = <PrimerDesignRestriction pcrSource={pcrSources[0]} />;
-  }
-  if (finalSource === null && pcrSources.length === 1 && outputSequences[0].primer_design === 'simple_pair') {
+  } else if (finalSource === null && pcrSources.length === 1 && outputSequences[0].primer_design === 'simple_pair') {
     component = <PrimerDesignSimplePair pcrSource={pcrSources[0]} />;
-  }
-  if (finalSource?.type === 'GibsonAssemblySource' || finalSource?.type === 'InFusionSource' || finalSource?.type === 'InVivoAssemblySource' || finalSource?.type === 'CreLoxRecombinationSource') {
-    component = <PrimerDesignGibsonAssembly pcrSources={pcrSources} />;
-  }
-  if (finalSource?.type === 'HomologousRecombinationSource' && otherInputIds.length === 1 && pcrSources.length === 1) {
+  } else if (finalSource?.type === 'GibsonAssemblySource' || finalSource?.type === 'InFusionSource' || finalSource?.type === 'InVivoAssemblySource') {
+    component = <PrimerDesignGibsonAssembly assemblyInputsInOrder={assemblyInputsInOrder} circularAssembly={finalSource.circular_assembly} />;
+  } else if (finalSource?.type === 'HomologousRecombinationSource' && otherInputIds.length === 1 && pcrSources.length === 1) {
     component = (
       <PrimerDesignHomologousRecombination
         homologousRecombinationTargetId={otherInputIds[0]}
         pcrSource={pcrSources[0]}
       />
     );
-  }
-  if (finalSource?.type === 'GatewaySource' && otherInputIds.length === 1 && pcrSources.length === 1 && outputSequences[0].primer_design === 'gateway_bp') {
+  } else if (finalSource?.type === 'GatewaySource' && otherInputIds.length === 1 && pcrSources.length === 1 && outputSequences[0].primer_design === 'gateway_bp') {
     component = <PrimerDesignGatewayBP donorVectorId={otherInputIds[0]} pcrSource={pcrSources[0]} />;
-  }
-  if (finalSource?.type === 'RestrictionAndLigationSource' && outputSequences.every((outputSequence) => outputSequence.primer_design === 'ebic')) {
+  } else if (finalSource?.type === 'RestrictionAndLigationSource' && outputSequences.every((outputSequence) => outputSequence.primer_design === 'ebic')) {
     component = <PrimerDesignEBIC pcrSources={pcrSources} />;
   }
   return (
     <>
       {!showPrimerDesigner && (
-      <div>
-        <Button sx={{ mb: 4 }} variant="contained" color="success" onClick={openPrimerDesigner}>Open primer designer</Button>
-      </div>
+        <div>
+          <Button sx={{ mb: 4 }} variant="contained" color="success" onClick={openPrimerDesigner}>Open primer designer</Button>
+        </div>
       )}
       <Box className="primer-design" sx={{ display: showPrimerDesigner ? 'auto' : 'none', width: '60%', minWidth: '600px', margin: 'auto', border: 1, borderRadius: 2, overflow: 'hidden', borderColor: 'primary.main', marginBottom: 5 }}>
         <Box sx={{ margin: 'auto', display: 'flex', height: 'auto', borderBottom: 2, borderColor: 'primary.main', backgroundColor: 'primary.main' }}>

package/src/components/primers/primer_design/SequenceTabComponents/PrimerSpacerForm.jsx

@@ -3,9 +3,10 @@ import { FormControl, TextField, Box } from '@mui/material';
 import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
 import CollapsableLabel from './CollapsableLabel';
 import { usePrimerDesign } from './PrimerDesignContext';
+import { getSequenceLabel } from './utils/getSequenceLabel';
 
 function PrimerSpacerForm({ open = true }) {
-  const { spacers, setSpacers, circularAssembly, templateSequenceNames, templateSequenceIds } = usePrimerDesign();
+  const { spacers, setSpacers, circularAssembly, templateSequenceNames, templateSequenceIds, isAmplified } = usePrimerDesign();
 
   const fragmentCount = templateSequenceIds.length;
 
@@ -19,7 +20,7 @@ function PrimerSpacerForm({ open = true }) {
   const getSequenceName = (seqIndex) => {
     const name = sequenceNamesWrapped[seqIndex];
     const id = templateSequenceIdsWrapped[seqIndex];
-    return name && name !== 'name' ? `Seq. ${id} (${name})` : `Seq. ${id}`;
+    return getSequenceLabel(id, name);
   };
 
   const getSpacerLabel = (index) => {
@@ -40,6 +41,9 @@ function PrimerSpacerForm({ open = true }) {
         <Box>
           {spacers.map((spacer, index) => {
             const error = stringIsNotDNA(spacer) ? 'Invalid DNA sequence' : '';
+            const isFirstSpacerDisabled = !circularAssembly && index === 0 && !isAmplified[0];
+            const isLastSpacerDisabled = !circularAssembly && index === fragmentCount && !isAmplified[fragmentCount - 1];
+            const disabled = isFirstSpacerDisabled || isLastSpacerDisabled;
             return (
               <FormControl key={index} fullWidth sx={{ mb: 2 }}>
                 <TextField
@@ -48,12 +52,12 @@ function PrimerSpacerForm({ open = true }) {
                   onChange={(e) => handleSpacerChange(index, e.target.value)}
                   variant="outlined"
                   size="small"
+                  disabled={disabled}
                   inputProps={{
                     id: 'sequence',
                   }}
-                    // Error if not DNA
                   error={error !== ''}
-                  helperText={error}
+                  helperText={disabled ? 'Not editable (adjacent fragment is not amplified)' : error}
                 />
               </FormControl>
             );

package/src/components/primers/primer_design/SequenceTabComponents/TabPanelEBICSettings.jsx

@@ -6,65 +6,7 @@ import StepNavigation from './StepNavigation';
 import { useSelector } from 'react-redux';
 import EnzymeMultiSelect from '../../../form/EnzymeMultiSelect';
 import { isEqual } from 'lodash-es';
-import { getSequenceWithinRange } from '@teselagen/range-utils';
-import { aliasedEnzymesByName, cutSequenceByRestrictionEnzyme } from '@teselagen/sequence-utils';
-
-function trimPadding({ templateSequence, padding_left, padding_right, restrictionSitesToAvoid, roi, max_inside, max_outside }) {
-  const { start, end } = roi.selectionLayer;
-  const leftAnnotationRange = { start: start - padding_left, end: start - 1 };
-  const leftArm = getSequenceWithinRange(leftAnnotationRange, templateSequence.sequence);
-  const rightAnnotationRange = { start: end + 1, end: end + padding_right };
-  const rightArm = getSequenceWithinRange(rightAnnotationRange, templateSequence.sequence);
-
-  const leftMargin = { start: start - max_outside, end: start + max_inside - 1 };
-  const rightMargin = { start: end - max_inside, end: end + max_outside - 1 };
-  const leftMarginArm = getSequenceWithinRange(leftMargin, templateSequence.sequence);
-  const rightMarginArm = getSequenceWithinRange(rightMargin, templateSequence.sequence);
-
-  const enzymes = restrictionSitesToAvoid.map((enzyme) => aliasedEnzymesByName[enzyme.toLowerCase()]);
-  if (enzymes.length === 0) {
-    return { padding_left, padding_right, cutsitesInMargins: false };
-  }
-
-  const cutsInLeftMargin = enzymes.flatMap((enzyme) => cutSequenceByRestrictionEnzyme(
-    leftMarginArm,
-    true,
-    enzyme
-  ));
-  const cutsInRightMargin = enzymes.flatMap((enzyme) => cutSequenceByRestrictionEnzyme(
-    rightMarginArm,
-    false,
-    enzyme
-  ));
-
-  const cutsitesInMargins = cutsInLeftMargin.length > 0 || cutsInRightMargin.length > 0;
-
-  const leftCutsites = enzymes.flatMap((enzyme) => cutSequenceByRestrictionEnzyme(
-    leftArm,
-    true,
-    enzyme
-  ));
-  const rightCutsites = enzymes.flatMap((enzyme) => cutSequenceByRestrictionEnzyme(
-    rightArm,
-    false,
-    enzyme
-  ));
-
-  let paddingLeft = padding_left;
-  let paddingRight = padding_right;
-  if (leftCutsites.length > 0) {
-    paddingLeft = leftArm.length - 1 - Math.max(...leftCutsites.map((cutsite) => cutsite.recognitionSiteRange.end));
-  }
-  if (rightCutsites.length > 0) {
-    paddingRight = Math.min(...rightCutsites.map((cutsite) => cutsite.recognitionSiteRange.start));
-  }
-  return {
-    padding_left: paddingLeft,
-    padding_right: paddingRight,
-    cutsitesInMargins,
-  };
-
-}
+import trimPadding from './utils/trimPadding';
 
 function TabPanelEBICSettings() {
   const { error, selectedTab, sequenceIds, primers, submissionPreventedMessage, designPrimers, primerDesignSettings, rois } = usePrimerDesign();

package/src/components/primers/primer_design/SequenceTabComponents/TabPanelResults.jsx

@@ -7,7 +7,8 @@ import StepNavigation from './StepNavigation';
 import PrimerResultForm from './PrimerResultForm';
 
 function TabPanelResults() {
-  const { selectedTab, primers, addPrimers, setPrimers, handleBack, sequenceIds } = usePrimerDesign();
+  const { selectedTab, primers: allPrimers, addPrimers, setPrimers, sequenceIds } = usePrimerDesign();
+  const primers = React.useMemo(() => allPrimers.filter((primer) => primer !== null), [allPrimers]);
   const existingPrimerNames = useSelector((state) => state.cloning.primers.map((p) => p.name), shallowEqual);
   const primersAreValid = primers.length && primers.every((primer) => primer.name && !existingPrimerNames.includes(primer.name));
   return (
@@ -26,8 +27,6 @@ function TabPanelResults() {
           />
         ))}
         <StepNavigation
-          handleBack={handleBack}
-          handleNext={null}
           onStepCompletion={addPrimers}
           stepCompletionText="Save primers"
           nextDisabled

package/src/components/primers/primer_design/SequenceTabComponents/TabPanelSelectRoi.jsx

@@ -9,7 +9,7 @@ import TabPanel from '../../../navigation/TabPanel';
 import { usePrimerDesign } from './PrimerDesignContext';
 
 function TabPanelSelectRoi({ step, index }) {
-  const { selectedTab, rois, handleSelectRegion, sequenceIds, primerDesignSettings, designType } = usePrimerDesign();
+  const { selectedTab, rois, handleSelectRegion, handleNext, sequenceIds, primerDesignSettings, designType, isAmplified } = usePrimerDesign();
   const [error, setError] = React.useState('');
   const editorHasSelection = useSelector((state) => state.cloning.mainSequenceSelection.caretPosition !== undefined);
   const store = useStore();
@@ -21,18 +21,28 @@ function TabPanelSelectRoi({ step, index }) {
     stepCompletionToolTip = 'Select a region in the editor',
   } = step;
 
+  const notAmplified = !isAmplified[index];
+
   const mode = designType === 'gateway_bp' && index === 1 ? 'gateway_bp' : 'editor';
-  const allowStepCompletion = (mode === 'editor' && editorHasSelection) || (mode === 'gateway_bp' && primerDesignSettings.knownCombination);
+  const allowStepCompletion = notAmplified || (mode === 'editor' && editorHasSelection) || (mode === 'gateway_bp' && primerDesignSettings.knownCombination);
   const onStepCompletion = () => {
+    if (notAmplified) {
+      handleNext();
+      return;
+    }
     const selectedRegion = store.getState().cloning.mainSequenceSelection;
     setError(handleSelectRegion(index, selectedRegion, allowSinglePosition));
   };
 
+  const allRequiredRoisSelected = rois.every((region, i) => region !== null || !isAmplified[i]);
+
   return (
     <TabPanel value={selectedTab} index={index} className={`select-roi-tab-${index}`}>
-      <Alert severity="info">{description}</Alert>
+      {notAmplified
+        ? <Alert severity="info">The whole sequence will be used (not amplified by PCR). You can set orientation in the settings step.</Alert>
+        : <Alert severity="info">{description}</Alert>}
       {error && (<Alert severity="error">{error}</Alert>)}
-      {mode === 'editor' && (
+      {!notAmplified && mode === 'editor' && (
       <FormControl sx={{ py: 2 }}>
         <TextField
           label={inputLabel}
@@ -41,16 +51,16 @@ function TabPanelSelectRoi({ step, index }) {
         />
       </FormControl>
       )}
-      {mode === 'gateway_bp' && (
+      {!notAmplified && mode === 'gateway_bp' && (
         <GatewayRoiSelect id={id} />
       )}
       <StepNavigation
         isFirstStep={index === 0}
-        nextDisabled={(index === sequenceIds.length - 1) && rois.some((region) => region === null)}
+        nextDisabled={(index === sequenceIds.length - 1) && !allRequiredRoisSelected}
         nextToolTip="You must select all regions before proceeding"
         allowStepCompletion={allowStepCompletion}
-        stepCompletionText="Choose region"
-        stepCompletionToolTip={stepCompletionToolTip}
+        stepCompletionText={notAmplified ? 'Next' : 'Choose region'}
+        stepCompletionToolTip={notAmplified ? '' : stepCompletionToolTip}
         onStepCompletion={onStepCompletion}
       />
 

package/src/components/primers/primer_design/SequenceTabComponents/{TabPannelSettings.jsx → TabPanelSettings.jsx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Box, Checkbox, FormControl, FormControlLabel, FormLabel } from '@mui/material';
+import { Alert, Box, FormLabel } from '@mui/material';
 import StepNavigation from './StepNavigation';
 import TabPanel from '../../../navigation/TabPanel';
 import PrimerSettingsForm from './PrimerSettingsForm';
@@ -8,8 +8,8 @@ import OrientationPicker from './OrientationPicker';
 import { usePrimerDesign } from './PrimerDesignContext';
 import RestrictionSpacerForm from './RestrictionSpacerForm';
 
-function TabPannelSettings() {
-  const { error, templateSequenceIds, designType, selectedTab, sequenceIds, circularAssembly, setCircularAssembly, designPrimers, primers, primerDesignSettings, submissionPreventedMessage } = usePrimerDesign();
+function TabPanelSettings() {
+  const { error, templateSequenceIds, designType, selectedTab, sequenceIds, designPrimers, primers, primerDesignSettings, submissionPreventedMessage } = usePrimerDesign();
   return (
     <TabPanel value={selectedTab} index={sequenceIds.length}>
       <Box sx={{ width: '80%', margin: 'auto' }}>
@@ -26,24 +26,6 @@ function TabPannelSettings() {
         </Box>
         {designType === 'restriction_ligation' && <RestrictionSpacerForm />}
         <PrimerSpacerForm />
-        {designType === 'gibson_assembly' && (
-          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-            <FormControl>
-              <FormControlLabel
-                control={(
-                  <Checkbox
-                    data-test="circular-assembly-checkbox"
-                    disabled={templateSequenceIds.length === 1}
-                    checked={circularAssembly}
-                    onChange={(e) => setCircularAssembly(e.target.checked)}
-                    name="circular-assembly"
-                  />
-                )}
-                label={templateSequenceIds.length === 1 ? 'Circular assembly (only one sequence input)' : 'Circular assembly'}
-              />
-            </FormControl>
-          </Box>
-        )}
 
       </Box>
       {error && (<Alert severity="error" sx={{ width: 'fit-content', margin: 'auto', mb: 2 }}>{error}</Alert>)}
@@ -58,4 +40,4 @@ function TabPannelSettings() {
   );
 }
 
-export default TabPannelSettings;
+export default TabPanelSettings;

package/src/components/primers/primer_design/SequenceTabComponents/designTypeStrategies.js

@@ -0,0 +1,178 @@
+import { selectedRegion2SequenceLocation } from '@opencloning/utils/selectedRegionUtils';
+import { ebicTemplateAnnotation, joinSequencesIntoSingleSequence, simulateHomologousRecombination } from '@opencloning/utils/sequenceManipulation';
+
+const designTypeStrategies = {
+  simple_pair: {
+    computeProduct({ sequences, rois, fragmentOrientations, spacers, circularAssembly }) {
+      const product = joinSequencesIntoSingleSequence(
+        sequences, rois.map((s) => s.selectionLayer), fragmentOrientations,
+        spacers, circularAssembly, 'primer tail',
+      );
+      product.name = 'PCR product';
+      return product;
+    },
+    buildRequest({ sequences, sequenceIds, rois, fragmentOrientations, spacers, teselaJsonCache, paramsForRequest }) {
+      return {
+        endpoint: 'simple_pair',
+        params: { ...paramsForRequest },
+        requestData: {
+          pcr_template: {
+            sequence: sequences.find((e) => e.id === sequenceIds[0]),
+            location: selectedRegion2SequenceLocation(rois[0], teselaJsonCache[sequenceIds[0]].size),
+            forward_orientation: fragmentOrientations[0] === 'forward',
+          },
+          spacers,
+        },
+      };
+    },
+  },
+
+  restriction_ligation: {
+    computeProduct({ sequences, rois, fragmentOrientations, spacers, circularAssembly, primerDesignSettings }) {
+      const { enzymeSpacers } = primerDesignSettings;
+      const extendedSpacers = [enzymeSpacers[0] + spacers[0], spacers[1] + enzymeSpacers[1]];
+      const product = joinSequencesIntoSingleSequence(
+        sequences, rois.map((s) => s.selectionLayer), fragmentOrientations,
+        extendedSpacers, circularAssembly, 'primer tail',
+      );
+      product.name = 'PCR product';
+      return product;
+    },
+    buildRequest({ sequences, sequenceIds, rois, fragmentOrientations, spacers, teselaJsonCache, paramsForRequest }) {
+      return {
+        endpoint: 'simple_pair',
+        params: { ...paramsForRequest },
+        requestData: {
+          pcr_template: {
+            sequence: sequences.find((e) => e.id === sequenceIds[0]),
+            location: selectedRegion2SequenceLocation(rois[0], teselaJsonCache[sequenceIds[0]].size),
+            forward_orientation: fragmentOrientations[0] === 'forward',
+          },
+          spacers,
+        },
+      };
+    },
+  },
+
+  gibson_assembly: {
+    computeProduct({ sequences, rois, fragmentOrientations, spacers, circularAssembly }) {
+      const locations = rois.map((roi, i) => {
+        if (roi) return roi.selectionLayer;
+        return { start: 0, end: sequences[i].size - 1 };
+      });
+      const product = joinSequencesIntoSingleSequence(sequences, locations, fragmentOrientations, spacers, circularAssembly);
+      product.name = 'Gibson Assembly product';
+      return product;
+    },
+    buildRequest({ sequences, sequenceIds, rois, fragmentOrientations, spacers, isAmplified, teselaJsonCache, paramsForRequest, circularAssembly }) {
+      return {
+        endpoint: 'gibson_assembly',
+        params: { ...paramsForRequest, circular: circularAssembly },
+        requestData: {
+          pcr_templates: sequenceIds.map((id, index) => ({
+            sequence: sequences.find((e) => e.id === id),
+            location: isAmplified[index]
+              ? selectedRegion2SequenceLocation(rois[index], teselaJsonCache[id].size)
+              : null,
+            forward_orientation: fragmentOrientations[index] === 'forward',
+          })),
+          spacers,
+        },
+      };
+    },
+  },
+
+  homologous_recombination: {
+    computeProduct({ sequences, rois, fragmentOrientations, spacers }) {
+      const product = simulateHomologousRecombination(
+        sequences[0], sequences[1], rois, fragmentOrientations[0] === 'reverse', spacers,
+      );
+      product.name = 'Homologous recombination product';
+      return product;
+    },
+    buildRequest({ sequences, sequenceIds, rois, fragmentOrientations, spacers, teselaJsonCache, paramsForRequest }) {
+      const [pcrTemplateId, homologousRecombinationTargetId] = sequenceIds;
+      return {
+        endpoint: 'homologous_recombination',
+        params: { ...paramsForRequest },
+        requestData: {
+          pcr_template: {
+            sequence: sequences.find((e) => e.id === pcrTemplateId),
+            location: selectedRegion2SequenceLocation(rois[0], teselaJsonCache[pcrTemplateId].size),
+            forward_orientation: fragmentOrientations[0] === 'forward',
+          },
+          homologous_recombination_target: {
+            sequence: sequences.find((e) => e.id === homologousRecombinationTargetId),
+            location: selectedRegion2SequenceLocation(rois[1], teselaJsonCache[homologousRecombinationTargetId].size),
+          },
+          spacers,
+        },
+      };
+    },
+  },
+
+  gateway_bp: {
+    computeProduct({ sequences, rois, fragmentOrientations, spacers, primerDesignSettings }) {
+      const product = joinSequencesIntoSingleSequence(
+        [sequences[0]], [rois[0].selectionLayer], fragmentOrientations, spacers, false, 'primer tail',
+      );
+      product.name = 'PCR product';
+      const { knownCombination } = primerDesignSettings;
+      const leftFeature = {
+        start: knownCombination.translationFrame[0],
+        end: spacers[0].length - 1,
+        type: 'CDS',
+        name: 'translation frame',
+        strand: 1,
+        forward: true,
+      };
+      const nbAas = Math.floor((spacers[1].length - knownCombination.translationFrame[1]) / 3);
+      const rightStart = product.sequence.length - knownCombination.translationFrame[1] - nbAas * 3;
+      const rightFeature = {
+        start: rightStart,
+        end: product.sequence.length - knownCombination.translationFrame[1] - 1,
+        type: 'CDS',
+        name: 'translation frame',
+        strand: 1,
+        forward: true,
+      };
+      product.features.push(leftFeature);
+      product.features.push(rightFeature);
+      return product;
+    },
+    buildRequest({ sequences, sequenceIds, rois, fragmentOrientations, spacers, teselaJsonCache, paramsForRequest }) {
+      return {
+        endpoint: 'simple_pair',
+        params: { ...paramsForRequest },
+        requestData: {
+          pcr_template: {
+            sequence: sequences.find((e) => e.id === sequenceIds[0]),
+            location: selectedRegion2SequenceLocation(rois[0], teselaJsonCache[sequenceIds[0]].size),
+            forward_orientation: fragmentOrientations[0] === 'forward',
+          },
+          spacers,
+        },
+      };
+    },
+  },
+
+  ebic: {
+    computeProduct({ sequences, rois, primerDesignSettings }) {
+      return ebicTemplateAnnotation(sequences[0], rois[0].selectionLayer, primerDesignSettings);
+    },
+    buildRequest({ sequences, rois, templateSequenceIds, teselaJsonCache, paramsForRequest }) {
+      return {
+        endpoint: 'ebic',
+        params: { ...paramsForRequest },
+        requestData: {
+          template: {
+            sequence: sequences.find((e) => e.id === templateSequenceIds[0]),
+            location: selectedRegion2SequenceLocation(rois[0], teselaJsonCache[templateSequenceIds[0]].size),
+          },
+        },
+      };
+    },
+  },
+};
+
+export default designTypeStrategies;

package/src/components/primers/primer_design/SequenceTabComponents/hooks/useDesignPrimers.js

@@ -0,0 +1,89 @@
+import { useState, useCallback } from 'react';
+import { batch, useDispatch, useStore } from 'react-redux';
+import useBackendRoute from '../../../../../hooks/useBackendRoute';
+import useHttpClient from '../../../../../hooks/useHttpClient';
+import useStoreEditor from '../../../../../hooks/useStoreEditor';
+import error2String from '@opencloning/utils/error2String';
+import { cloningActions } from '@opencloning/store/cloning';
+import designTypeStrategies from '../designTypeStrategies';
+
+const { addPrimersToPCRSource, setMainSequenceId, setCurrentTab } = cloningActions;
+
+export default function useDesignPrimers({
+  designType, sequenceIds, templateSequenceIds, isAmplified,
+  rois, fragmentOrientations, spacers, circularAssembly, primerDesignSettings,
+  handleNext, onTabChange,
+}) {
+  const [primers, setPrimers] = useState([]);
+  const [error, setError] = useState('');
+
+  const store = useStore();
+  const dispatch = useDispatch();
+  const backendRoute = useBackendRoute();
+  const httpClient = useHttpClient();
+  const { updateStoreEditor } = useStoreEditor();
+
+  const designPrimers = useCallback(async () => {
+    fragmentOrientations.forEach((orientation) => {
+      if (orientation !== 'forward' && orientation !== 'reverse') {
+        throw new Error('Invalid fragment orientation');
+      }
+    });
+
+    const { cloning: { sequences, teselaJsonCache, globalPrimerSettings } } = store.getState();
+    const paramsForRequest = Object.fromEntries(
+      Object.entries(primerDesignSettings)
+        .filter(([_, value]) => typeof value !== 'function'),
+    );
+
+    const strategy = designTypeStrategies[designType];
+    const { endpoint, params, requestData } = strategy.buildRequest({
+      sequences, sequenceIds, templateSequenceIds, rois, fragmentOrientations,
+      spacers, circularAssembly, isAmplified, teselaJsonCache, paramsForRequest,
+    });
+
+    requestData.settings = globalPrimerSettings;
+    const url = backendRoute(`primer_design/${endpoint}`);
+
+    try {
+      const resp = await httpClient.post(url, requestData, { params });
+      setError('');
+      setPrimers(resp.data.primers);
+      handleNext();
+      return false;
+    } catch (thrownError) {
+      setError(error2String(thrownError));
+      return true;
+    }
+  }, [fragmentOrientations, rois, sequenceIds, templateSequenceIds, designType, circularAssembly, primerDesignSettings, spacers, store, httpClient, backendRoute, handleNext, isAmplified]);
+
+  const addPrimers = useCallback(() => {
+    const pcrSources = store.getState().cloning.sources.filter((source) => source.type === 'PCRSource');
+    let usedPCRSources;
+    if (designType === 'ebic') {
+      usedPCRSources = pcrSources.filter((source) => source.input.some((i) => i.sequence === templateSequenceIds[0]));
+    } else {
+      const amplifiedTemplateIds = templateSequenceIds.filter((_, i) => isAmplified[i]);
+      usedPCRSources = amplifiedTemplateIds.map((id) => pcrSources.find((source) => source.input.some((i) => i.sequence === id)));
+    }
+
+    const validPrimers = primers.filter((p) => p !== null);
+    batch(() => {
+      usedPCRSources.forEach((pcrSource, index) => {
+        dispatch(addPrimersToPCRSource({
+          fwdPrimer: validPrimers[index * 2],
+          revPrimer: validPrimers[index * 2 + 1],
+          sourceId: pcrSource.id,
+        }));
+      });
+      dispatch(setMainSequenceId(null));
+      dispatch(setCurrentTab(0));
+    });
+    setPrimers([]);
+    onTabChange(null, 0);
+    document.getElementById(`source-${usedPCRSources[0].id}`)?.scrollIntoView();
+    updateStoreEditor('mainEditor', null);
+  }, [primers, dispatch, onTabChange, updateStoreEditor, designType, templateSequenceIds, isAmplified, store]);
+
+  return { primers, setPrimers, error, designPrimers, addPrimers };
+}

package/src/components/primers/primer_design/SequenceTabComponents/hooks/useRegionSelection.js

@@ -0,0 +1,37 @@
+import { useCallback, useState } from 'react';
+
+function changeValueAtIndex(current, index, newValue) {
+  return current.map((_, i) => (i === index ? newValue : current[i]));
+}
+
+export default function useRegionSelection({ sequenceCount, handleNext }) {
+  const [rois, setRois] = useState(Array(sequenceCount).fill(null));
+
+  const onSelectRegion = useCallback((index, selectedRegion, allowSinglePosition = false) => {
+    const { caretPosition } = selectedRegion;
+    if (caretPosition === undefined) {
+      setRois((c) => changeValueAtIndex(c, index, null));
+      return 'You have to select a region in the sequence editor!';
+    }
+    if (caretPosition === -1) {
+      setRois((c) => changeValueAtIndex(c, index, selectedRegion));
+      return '';
+    }
+    if (allowSinglePosition) {
+      setRois((c) => changeValueAtIndex(c, index, selectedRegion));
+      return '';
+    }
+    setRois((c) => changeValueAtIndex(c, index, null));
+    return 'Select a region (not a single position) to amplify';
+  }, []);
+
+  const handleSelectRegion = useCallback((index, selectedRegion, allowSinglePosition = false) => {
+    const regionError = onSelectRegion(index, selectedRegion, allowSinglePosition);
+    if (!regionError) {
+      handleNext();
+    }
+    return regionError;
+  }, [onSelectRegion, handleNext]);
+
+  return { rois, handleSelectRegion };
+}

package/src/components/primers/primer_design/SequenceTabComponents/hooks/useSequenceProduct.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useStore } from 'react-redux';
+import designTypeStrategies from '../designTypeStrategies';
+
+export default function useSequenceProduct({
+  rois, spacers, spacersAreValid, fragmentOrientations, circularAssembly,
+  designType, primerDesignSettings, sequenceIds, submissionPreventedMessage,
+}) {
+  const [sequenceProduct, setSequenceProduct] = React.useState(null);
+  const timeoutRef = React.useRef();
+  const store = useStore();
+
+  React.useEffect(() => {
+    clearTimeout(timeoutRef.current);
+
+    timeoutRef.current = setTimeout(() => {
+      let newSequenceProduct = null;
+      if (submissionPreventedMessage === '') {
+        const { teselaJsonCache } = store.getState().cloning;
+        const sequences = sequenceIds.map((id) => teselaJsonCache[id]);
+        const strategy = designTypeStrategies[designType];
+        if (strategy) {
+          newSequenceProduct = strategy.computeProduct({
+            sequences, rois, fragmentOrientations, spacers, circularAssembly, primerDesignSettings,
+          });
+        }
+      }
+      setSequenceProduct({ ...newSequenceProduct, id: 'opencloning_primer_design_product' });
+    }, 300);
+
+    return () => clearTimeout(timeoutRef.current);
+  }, [rois, spacersAreValid, fragmentOrientations, circularAssembly, designType, spacers, primerDesignSettings, sequenceIds, store, submissionPreventedMessage]);
+
+  return sequenceProduct;
+}

package/src/components/primers/primer_design/SequenceTabComponents/hooks/useSpacers.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
+
+export default function useSpacers({ initialLength }) {
+  const [spacers, setSpacers] = React.useState(Array(initialLength).fill(''));
+
+  const spacersAreValid = React.useMemo(
+    () => spacers.every((spacer) => !stringIsNotDNA(spacer)),
+    [spacers],
+  );
+
+  return { spacers, setSpacers, spacersAreValid };
+}