@opencloning/ui 1.0.0

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

@@ -0,0 +1,216 @@
+import React from 'react';
+import { Alert, Box, FormControl, FormLabel, InputAdornment, TextField } from '@mui/material';
+import TabPanel from '../../../navigation/TabPanel';
+import { usePrimerDesign } from './PrimerDesignContext';
+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,
+  };
+
+}
+
+function TabPanelEBICSettings() {
+  const { error, selectedTab, sequenceIds, primers, submissionPreventedMessage, designPrimers, primerDesignSettings, rois } = usePrimerDesign();
+  const { max_inside, max_outside, target_tm, target_tm_tolerance, updateSettings, restrictionSitesToAvoid, padding_left, padding_right } = primerDesignSettings;
+  const [cutsitesInMarginsError, setCutsitesInMarginsError] = React.useState(false);
+
+  const templateSequence = useSelector((state) => state.cloning.teselaJsonCache[sequenceIds[0]], isEqual);
+
+  React.useEffect(() => {
+    if (rois.length > 0 && rois[0] !== null) {
+      const { padding_left: newPaddingLeft, padding_right: newPaddingRight, cutsitesInMargins } = trimPadding({
+        templateSequence,
+        padding_left,
+        padding_right,
+        restrictionSitesToAvoid,
+        roi: rois[0],
+        max_inside,
+        max_outside,
+      });
+      updateSettings({ padding_left: newPaddingLeft, padding_right: newPaddingRight });
+      setCutsitesInMarginsError(cutsitesInMargins);
+    }
+  }, [templateSequence, restrictionSitesToAvoid, rois, max_inside, max_outside, padding_left, padding_right]);
+
+  return (
+    <TabPanel value={selectedTab} index={sequenceIds.length}>
+      <Box sx={{ width: '80%', margin: 'auto' }}>
+        <Box sx={{ pt: 1 }}>
+          <FormLabel>Primer settings</FormLabel>
+          <Box sx={{ pt: 1.5 }}>
+
+            <Box>
+              <FormControl sx={{ mr: 2 }}>
+                <TextField
+                  label="Max inside"
+                  value={max_inside}
+                  onChange={(e) => { updateSettings({ max_inside: Number(e.target.value) }); }}
+                  type="number"
+                  InputProps={{
+                    endAdornment: <InputAdornment position="end">bp</InputAdornment>,
+                    sx: { width: '10em' },
+                  }}
+                  error={max_inside < 0}
+                  helperText={max_inside < 0 ? 'Max inside must be greater than 0' : ''}
+                />
+              </FormControl>
+
+              <FormControl sx={{ mr: 2 }}>
+                <TextField
+                  label="Max outside"
+                  value={max_outside}
+                  onChange={(e) => { updateSettings({ max_outside: Number(e.target.value) }); }}
+                  type="number"
+                  InputProps={{
+                    endAdornment: <InputAdornment position="end">bp</InputAdornment>,
+                    sx: { width: '10em' },
+                  }}
+                  error={max_outside < 0}
+                  helperText={max_outside < 0 ? 'Max outside must be greater than 0' : ''}
+                />
+              </FormControl>
+            </Box>
+
+            <Box sx={{ mt: 2 }}>
+              <FormControl sx={{ mr: 2 }}>
+                <TextField
+                  label="Target Tm"
+                  value={target_tm}
+                  onChange={(e) => { updateSettings({ target_tm: Number(e.target.value) }); }}
+                  type="number"
+                  InputProps={{
+                    endAdornment: <InputAdornment position="end">°C</InputAdornment>,
+                    sx: { width: '10em' },
+                  }}
+                />
+              </FormControl>
+
+              <FormControl sx={{ mr: 2 }}>
+                <TextField
+                  label="Tm tolerance"
+                  value={target_tm_tolerance}
+                  onChange={(e) => { updateSettings({ target_tm_tolerance: Number(e.target.value) }); }}
+                  type="number"
+                  InputProps={{
+                    endAdornment: <InputAdornment position="end">°C</InputAdornment>,
+                    sx: { width: '10em' },
+                  }}
+                />
+              </FormControl>
+
+            </Box>
+            <Box sx={{ mt: 2 }}>
+              <FormControl sx={{ mr: 2 }}>
+                <TextField
+                  label="Padding left"
+                  value={padding_left}
+                  onChange={(e) => { updateSettings({ padding_left: Number(e.target.value) }); }}
+                  type="number"
+                  InputProps={{
+                    endAdornment: <InputAdornment position="end">bp</InputAdornment>,
+                    sx: { width: '10em' },
+                  }}
+                />
+              </FormControl>
+              <FormControl sx={{ mr: 2 }}>
+                <TextField
+                  label="Padding right"
+                  value={padding_right}
+                  onChange={(e) => { updateSettings({ padding_right: Number(e.target.value) }); }}
+                  type="number"
+                  InputProps={{
+                    endAdornment: <InputAdornment position="end">bp</InputAdornment>,
+                    sx: { width: '10em' },
+                  }}
+                />
+              </FormControl>
+            </Box>
+            <Box sx={{ mt: 2 }}>
+              <FormControl sx={{ mr: 2, width: '15em' }}>
+                <EnzymeMultiSelect
+                  value={restrictionSitesToAvoid}
+                  setEnzymes={(v) => updateSettings({ restrictionSitesToAvoid: v })}
+                  label="Sites to avoid"
+                  multiple={true}
+                />
+              </FormControl>
+
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+      {error && <Alert severity="error" sx={{ width: 'fit-content', margin: 'auto', mt: 2 }}>{error}</Alert>}
+      {cutsitesInMarginsError && (
+        <Alert severity="error" sx={{ width: 'fit-content', margin: 'auto', mt: 2 }}>
+          Restriction enzyme cut sites were detected in the margin regions. Please adjust the margin size or select different restriction sites to avoid this issue.
+        </Alert>
+      )}
+      <StepNavigation
+        onStepCompletion={designPrimers}
+        stepCompletionText="Design primers"
+        nextDisabled={primers.length === 0}
+        stepCompletionToolTip={submissionPreventedMessage}
+        allowStepCompletion={submissionPreventedMessage === ''}
+      />
+    </TabPanel>
+  );
+}
+
+export default TabPanelEBICSettings;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import { Box } from '@mui/material';
+import TabPanel from '../../../navigation/TabPanel';
+import { usePrimerDesign } from './PrimerDesignContext';
+import StepNavigation from './StepNavigation';
+import PrimerResultForm from './PrimerResultForm';
+
+function TabPanelResults() {
+  const { selectedTab, primers, addPrimers, setPrimers, handleBack, sequenceIds } = usePrimerDesign();
+  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 (
+    <TabPanel value={selectedTab} index={sequenceIds.length + 1}>
+      <Box sx={{ marginTop: 3 }}>
+        {primers.map((primer, index) => (
+          <PrimerResultForm
+            key={index}
+            updatePrimerName={(newName) => {
+              const updatedPrimers = [...primers];
+              updatedPrimers[index] = { ...primer, name: newName };
+              setPrimers(updatedPrimers);
+            }}
+            primer={primer}
+            existingPrimerNames={existingPrimerNames}
+          />
+        ))}
+        <StepNavigation
+          handleBack={handleBack}
+          handleNext={null}
+          onStepCompletion={addPrimers}
+          stepCompletionText="Save primers"
+          nextDisabled
+          stepCompletionToolTip="Primers are not valid"
+          allowStepCompletion={primersAreValid}
+        />
+      </Box>
+    </TabPanel>
+  );
+}
+
+export default TabPanelResults;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Alert, FormControl, TextField } from '@mui/material';
+import { useSelector, useStore } from 'react-redux';
+
+import StepNavigation from './StepNavigation';
+import { selectedRegion2String } from '@opencloning/utils/selectedRegionUtils';
+import GatewayRoiSelect from './GatewayRoiSelect';
+import TabPanel from '../../../navigation/TabPanel';
+import { usePrimerDesign } from './PrimerDesignContext';
+
+function TabPanelSelectRoi({ step, index }) {
+  const { selectedTab, rois, handleSelectRegion, sequenceIds, primerDesignSettings, designType } = usePrimerDesign();
+  const [error, setError] = React.useState('');
+  const editorHasSelection = useSelector((state) => state.cloning.mainSequenceSelection.caretPosition !== undefined);
+  const store = useStore();
+  const id = sequenceIds[index];
+  const {
+    description = `Select the fragment of sequence ${id} to be amplified in the editor and click "Choose region"`,
+    inputLabel = `Amplified region (sequence ${id})`,
+    allowSinglePosition = false,
+    stepCompletionToolTip = 'Select a region in the editor',
+  } = step;
+
+  const mode = designType === 'gateway_bp' && index === 1 ? 'gateway_bp' : 'editor';
+  const allowStepCompletion = (mode === 'editor' && editorHasSelection) || (mode === 'gateway_bp' && primerDesignSettings.knownCombination);
+  const onStepCompletion = () => {
+    const selectedRegion = store.getState().cloning.mainSequenceSelection;
+    setError(handleSelectRegion(index, selectedRegion, allowSinglePosition));
+  };
+
+  return (
+    <TabPanel value={selectedTab} index={index} className={`select-roi-tab-${index}`}>
+      <Alert severity="info">{description}</Alert>
+      {error && (<Alert severity="error">{error}</Alert>)}
+      {mode === 'editor' && (
+      <FormControl sx={{ py: 2 }}>
+        <TextField
+          label={inputLabel}
+          value={selectedRegion2String(rois[index])}
+          disabled
+        />
+      </FormControl>
+      )}
+      {mode === 'gateway_bp' && (
+        <GatewayRoiSelect id={id} />
+      )}
+      <StepNavigation
+        isFirstStep={index === 0}
+        nextDisabled={(index === sequenceIds.length - 1) && rois.some((region) => region === null)}
+        nextToolTip="You must select all regions before proceeding"
+        allowStepCompletion={allowStepCompletion}
+        stepCompletionText="Choose region"
+        stepCompletionToolTip={stepCompletionToolTip}
+        onStepCompletion={onStepCompletion}
+      />
+
+    </TabPanel>
+  );
+}
+
+export default TabPanelSelectRoi;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Alert, Box, Checkbox, FormControl, FormControlLabel, FormLabel } from '@mui/material';
+import StepNavigation from './StepNavigation';
+import TabPanel from '../../../navigation/TabPanel';
+import PrimerSettingsForm from './PrimerSettingsForm';
+import PrimerSpacerForm from './PrimerSpacerForm';
+import OrientationPicker from './OrientationPicker';
+import { usePrimerDesign } from './PrimerDesignContext';
+import RestrictionSpacerForm from './RestrictionSpacerForm';
+
+function TabPannelSettings() {
+  const { error, templateSequenceIds, designType, selectedTab, sequenceIds, circularAssembly, onCircularAssemblyChange, designPrimers, primers, primerDesignSettings, submissionPreventedMessage } = usePrimerDesign();
+  return (
+    <TabPanel value={selectedTab} index={sequenceIds.length}>
+      <Box sx={{ width: '80%', margin: 'auto' }}>
+        <PrimerSettingsForm {...primerDesignSettings} />
+        <Box sx={{ mt: 2 }}>
+          {designType === 'gibson_assembly' && <FormLabel>Fragment orientation</FormLabel>}
+          {templateSequenceIds.map((id, index) => (
+            <OrientationPicker
+              key={id}
+              id={id}
+              index={index}
+            />
+          ))}
+        </Box>
+        {designType === 'restriction_ligation' && <RestrictionSpacerForm />}
+        <PrimerSpacerForm />
+        {designType === 'gibson_assembly' && (
+          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+            <FormControl>
+              <FormControlLabel
+                control={(
+                  <Checkbox
+                    checked={circularAssembly}
+                    onChange={onCircularAssemblyChange}
+                    name="circular-assembly"
+                  />
+                    )}
+                label="Circular assembly"
+              />
+            </FormControl>
+          </Box>
+        )}
+
+      </Box>
+      {error && (<Alert severity="error" sx={{ width: 'fit-content', margin: 'auto', mb: 2 }}>{error}</Alert>)}
+      <StepNavigation
+        onStepCompletion={designPrimers}
+        stepCompletionText="Design primers"
+        nextDisabled={primers.length === 0}
+        stepCompletionToolTip={submissionPreventedMessage}
+        allowStepCompletion={submissionPreventedMessage === ''}
+      />
+    </TabPanel>
+  );
+}
+
+export default TabPannelSettings;

package/src/components/primers/primer_design/SequenceTabComponents/primerDesignMinimalValues.json

@@ -0,0 +1,5 @@
+{
+    "homology_length": 5,
+    "hybridization_length": 5,
+    "target_tm": 30
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const getError = (s) => {
+  if (s.max_inside < 0) {
+    return 'Max inside must be greater than 0';
+  }
+  if (s.max_outside < 0) {
+    return 'Max outside must be greater than 0';
+  }
+  return '';
+};
+
+export default function useEBICPrimerDesignSettings() {
+  const [settings, setSettings] = React.useState({
+    max_inside: 50,
+    max_outside: 20,
+    target_tm: 61,
+    target_tm_tolerance: 3,
+    restrictionSitesToAvoid: [],
+    padding_left: 1000,
+    padding_right: 1000,
+  });
+  const [error, setError] = React.useState(getError(settings));
+  const updateSettings = (newSettings) => {
+    setSettings((prev) => ({ ...prev, ...newSettings }));
+  };
+  React.useEffect(() => {
+    setError(getError(settings));
+  }, [settings]);
+  return { ...settings, error, updateSettings };
+}

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

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { getReverseComplementSequenceString as reverseComplement } from '@teselagen/sequence-utils';
+import { getEnzymeRecognitionSequence } from '@opencloning/utils/enzyme_utils';
+import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
+import usePrimerDesignSettings from './usePrimerDesignSettings';
+
+function getError(enzymePrimerDesignSettings) {
+  const { left_enzyme: leftEnzyme, right_enzyme: rightEnzyme, filler_bases: fillerBases } = enzymePrimerDesignSettings;
+  if (!leftEnzyme && !rightEnzyme) {
+    return 'You must select and enzyme';
+  }
+  if (stringIsNotDNA(fillerBases)) {
+    return 'Filler bases not valid';
+  }
+  return '';
+}
+
+export default function useEnzymePrimerDesignSettings(defaultSettings) {
+  const primerDesignSettings = usePrimerDesignSettings(defaultSettings);
+  const [enzymePrimerDesignSettings, setEnzymePrimerDesignSettings] = useState({
+    left_enzyme: null,
+    right_enzyme: null,
+    left_enzyme_inverted: false,
+    right_enzyme_inverted: false,
+    filler_bases: 'TTT',
+    enzymeSpacers: ['', ''],
+  });
+  const [enzymeError, setEnzymeError] = useState(getError(enzymePrimerDesignSettings));
+
+  const updateEnzymeSettings = (newSettings) => {
+    setEnzymePrimerDesignSettings((prev) => ({ ...prev, ...newSettings }));
+  };
+
+  useEffect(() => {
+    const { left_enzyme: leftEnzyme, right_enzyme: rightEnzyme, filler_bases: fillerBases, left_enzyme_inverted: leftEnzymeInverted, right_enzyme_inverted: rightEnzymeInverted } = enzymePrimerDesignSettings;
+    if ((leftEnzyme || rightEnzyme) && !stringIsNotDNA(fillerBases)) {
+      const leftEnzymeSeq = leftEnzymeInverted ? reverseComplement(getEnzymeRecognitionSequence(leftEnzyme)) : getEnzymeRecognitionSequence(leftEnzyme);
+      const rightEnzymeSeq = rightEnzymeInverted ? getEnzymeRecognitionSequence(rightEnzyme) : reverseComplement(getEnzymeRecognitionSequence(rightEnzyme));
+      const leftSpacerStartingSeq = (leftEnzyme ? fillerBases : '') + leftEnzymeSeq;
+      const rightSpacerEndingSeq = rightEnzymeSeq + reverseComplement((rightEnzyme ? fillerBases : ''));
+      setEnzymePrimerDesignSettings((prev) => ({ ...prev, enzymeSpacers: [leftSpacerStartingSeq, rightSpacerEndingSeq] }));
+    } else {
+      setEnzymePrimerDesignSettings((prev) => ({ ...prev, enzymeSpacers: ['', ''] }));
+    }
+    setEnzymeError(getError(enzymePrimerDesignSettings));
+  }, [
+    enzymePrimerDesignSettings.left_enzyme,
+    enzymePrimerDesignSettings.right_enzyme,
+    enzymePrimerDesignSettings.filler_bases,
+    enzymePrimerDesignSettings.left_enzyme_inverted,
+    enzymePrimerDesignSettings.right_enzyme_inverted,
+  ]);
+
+  const error = primerDesignSettings.error || enzymeError;
+
+  return { ...primerDesignSettings, ...enzymePrimerDesignSettings, updateEnzymeSettings, error };
+}

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

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import usePrimerDesignSettings from './usePrimerDesignSettings';
+
+export default function useGatewayPrimerDesignSettings(initialSettings) {
+  const primerDesignSettings = usePrimerDesignSettings(initialSettings);
+
+  // Gateway BP
+  const [knownCombination, setKnownCombination] = useState(null);
+
+  const error = primerDesignSettings.error || (!knownCombination && 'No valid combination of attP sites selected');
+
+  return {
+    ...primerDesignSettings,
+    knownCombination,
+    setKnownCombination,
+    error,
+  };
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import primerDesignMinimalValues from './primerDesignMinimalValues.json';
+
+const getError = (s) => {
+  const valid = (s.homology_length === null || s.homology_length >= primerDesignMinimalValues.homology_length)
+  && s.minimal_hybridization_length >= primerDesignMinimalValues.hybridization_length
+  && s.target_tm >= primerDesignMinimalValues.target_tm;
+  if (!valid) {
+    return 'Invalid settings';
+  }
+  return null;
+};
+
+export default function usePrimerDesignSettings(defaultSettings) {
+  const [settings, setSettings] = React.useState(defaultSettings);
+  const [error, setError] = React.useState(getError(defaultSettings));
+
+  const updateSettings = (newSettings) => {
+    setSettings((prev) => ({ ...prev, ...newSettings }));
+  };
+
+  React.useEffect(() => {
+    setError(getError(settings));
+  }, [settings]);
+
+  return {
+    ...settings,
+    error,
+    updateSettings,
+  };
+}

package/src/components/primers/primer_design/SourceComponents/PrimerDesignGatewayBP.jsx

@@ -0,0 +1,88 @@
+import { Button, Checkbox, FormControl, FormControlLabel } from '@mui/material';
+import React from 'react';
+import { batch, useDispatch } from 'react-redux';
+import SingleInputSelector from '../../../sources/SingleInputSelector';
+import { cloningActions } from '@opencloning/store/cloning';
+import useStoreEditor from '../../../../hooks/useStoreEditor';
+import LabelWithTooltip from '../../../form/LabelWithTooltip';
+import useGatewaySites from '../../../../hooks/useGatewaySites';
+import NoAttPSitesError from '../common/NoAttPSitesError';
+import RetryAlert from '../../../form/RetryAlert';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+const { addTemplateChildAndSubsequentSource, setCurrentTab, setMainSequenceId } = cloningActions;
+
+function PrimerDesignGatewayBP({ source }) {
+  const [target, setTarget] = React.useState('');
+  const [greedy, setGreedy] = React.useState(false);
+
+  const { updateStoreEditor } = useStoreEditor();
+  const { requestStatus, sites: sitesInTarget, attemptAgain } = useGatewaySites({ target, greedy });
+  const nbOfAttPSites = sitesInTarget.filter((site) => site.siteName.startsWith('attP')).length;
+  const inputSequenceId = getPcrTemplateSequenceId(source);
+
+  const dispatch = useDispatch();
+  const onSubmit = (event) => {
+    event.preventDefault();
+    const newSource = {
+      input: [{ sequence: Number(target) }],
+      type: 'GatewaySource',
+      reaction_type: 'BP',
+      greedy,
+    };
+    const newSequence = {
+      type: 'TemplateSequence',
+      primer_design: 'gateway_bp',
+      circular: false,
+    };
+
+    batch(() => {
+      dispatch(addTemplateChildAndSubsequentSource({ newSource, newSequence, sourceId: source.id }));
+      dispatch(setMainSequenceId(inputSequenceId));
+      updateStoreEditor('mainEditor', inputSequenceId);
+      dispatch(setCurrentTab(3));
+      // Scroll to the top of the page after 300ms
+      setTimeout(() => {
+        document.querySelector('.tab-panels-container')?.scrollTo({ top: 0, behavior: 'instant' });
+      }, 300);
+    });
+  };
+  return (
+    <form onSubmit={onSubmit}>
+
+      <FormControl fullWidth>
+        <SingleInputSelector
+          label="Donor vector"
+          selectedId={target}
+          onChange={(e) => setTarget(e.target.value)}
+          inputSequenceIds={[]}
+          helperText={requestStatus.status === 'loading' ? 'Validating...' : ''}
+        />
+      </FormControl>
+      <FormControl fullWidth>
+        <FormControlLabel
+          control={<Checkbox checked={greedy} onChange={() => setGreedy(!greedy)} />}
+          label={(
+            <LabelWithTooltip label="Greedy attP finder" tooltip="Use a more greedy consensus site to find attP sites (might give false positives)" />
+                )}
+        />
+      </FormControl>
+
+      {requestStatus.status === 'success' && target && nbOfAttPSites < 2 && (
+        <NoAttPSitesError sites={sitesInTarget} />
+      )}
+      {requestStatus.status === 'error' && (
+        <RetryAlert onRetry={attemptAgain}>
+          {requestStatus.message}
+        </RetryAlert>
+      )}
+      {target && requestStatus.status === 'success' && nbOfAttPSites > 1 && (
+        <Button type="submit" variant="contained" color="success">
+          Design primers
+        </Button>
+      )}
+    </form>
+  );
+}
+
+export default React.memo(PrimerDesignGatewayBP);