@opencloning/ui 1.0.0

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

@@ -0,0 +1,164 @@
+import { Alert, Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import React from 'react';
+import { getReverseComplementSequenceString as reverseComplement } from '@teselagen/sequence-utils';
+import { isEqual } from 'lodash-es';
+import { parseFeatureLocation } from '@teselagen/bio-parsers';
+import { useDispatch, useSelector } from 'react-redux';
+import useGatewaySites from '../../../../hooks/useGatewaySites';
+import useStoreEditor from '../../../../hooks/useStoreEditor';
+import { cloningActions } from '@opencloning/store/cloning';
+import { usePrimerDesign } from './PrimerDesignContext';
+import RequestStatusWrapper from '../../../form/RequestStatusWrapper';
+
+const knownCombinations = [
+  {
+    siteNames: ['attP4', 'attP1'],
+    spacers: ['GGGGACAACTTTGTATAGAAAAGTTGNN', reverseComplement('GGGGACTGCTTTTTTGTACAAACTTGN')],
+    orientation: [true, true],
+    message: 'Primers tails designed based on pDONR™ P4-P1R',
+    translationFrame: [4, 6],
+  },
+  {
+    siteNames: ['attP1', 'attP2'],
+    spacers: ['GGGGACAAGTTTGTACAAAAAAGCAGGCTNN', reverseComplement('GGGGACCACTTTGTACAAGAAAGCTGGGTN')],
+    orientation: [true, false],
+    message: 'Primers tails designed based on pDONR™ 221',
+    translationFrame: [4, 6],
+  },
+  {
+    siteNames: ['attP2', 'attP3'],
+    spacers: ['GGGGACAGCTTTCTTGTACAAAGTGGNN', reverseComplement('GGGGACAACTTTGTATAATAAAGTTGN')],
+    orientation: [false, false],
+    message: 'Primers tails designed based on pDONR™ P2R-P3',
+    translationFrame: [4, 6],
+  },
+];
+
+function SiteSelect({ donorSites, site, setSite, label }) {
+  return (
+    <FormControl sx={{ minWidth: '10em' }}>
+      <InputLabel>{label}</InputLabel>
+      <Select
+        value={site ? `${site.siteName}-${site.location}` : ''}
+        onChange={(e) => setSite(
+          donorSites.find(({ siteName, location }) => `${siteName}-${location}` === e.target.value),
+        )}
+        label={label}
+      >
+        {donorSites.map(({ siteName, location }) => (
+          <MenuItem key={`${siteName}-${location}`} value={`${siteName}-${location}`}>
+            {siteName}
+            {' '}
+            {location}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+const { setMainSequenceSelection } = cloningActions;
+
+function GatewayRoiSelect({ id, greedy = false }) {
+  const [leftSite, setLeftSite] = React.useState(null);
+  const [rightSite, setRightSite] = React.useState(null);
+  const [donorSites, setDonorSites] = React.useState([]);
+  const { requestStatus, attemptAgain, sites } = useGatewaySites({ target: id, greedy });
+  const { updateStoreEditor } = useStoreEditor();
+  const donorVectorSequenceLength = useSelector((state) => state.cloning.teselaJsonCache[id].sequence.length);
+  const dispatch = useDispatch();
+  const { primerDesignSettings, setSpacers } = usePrimerDesign();
+  const [gatewaySelection, setGatewaySelection] = React.useState(null);
+  const editorSelection = useSelector((state) => state.cloning.mainSequenceSelection, isEqual);
+
+  const { knownCombination, setKnownCombination } = primerDesignSettings;
+
+  const handleKnownCombinationChange = (newKnownCombination, selection) => {
+    setGatewaySelection(selection);
+    if (newKnownCombination) {
+      setKnownCombination(newKnownCombination);
+      setSpacers(newKnownCombination.spacers);
+    } else {
+      setKnownCombination(null);
+      setSpacers(['', '']);
+    }
+  };
+  React.useEffect(() => {
+    if (requestStatus.status === 'success') {
+      setDonorSites(sites.filter(({ siteName }) => siteName.startsWith('attP')));
+    }
+  }, [sites]);
+
+  React.useEffect(() => {
+    if (gatewaySelection && !isEqual(editorSelection, gatewaySelection)) {
+      updateStoreEditor('mainEditor', null, gatewaySelection.selectionLayer);
+      dispatch(setMainSequenceSelection(gatewaySelection));
+    }
+  }, [editorSelection, gatewaySelection]);
+
+  const checkKnownCombination = React.useCallback((newLeftSite, newRightSite) => {
+    if (newLeftSite && newRightSite) {
+      const leftSiteLocation = parseFeatureLocation(newLeftSite.location, 0, 0, 0, 1, donorVectorSequenceLength)[0];
+      const rightSiteLocation = parseFeatureLocation(newRightSite.location, 0, 0, 0, 1, donorVectorSequenceLength)[0];
+      const selectionLayer = { start: leftSiteLocation.start, end: rightSiteLocation.end };
+      const selection = { selectionLayer, caretPosition: -1 };
+      const siteNames = [newLeftSite.siteName, newRightSite.siteName];
+      const orientation = [newLeftSite.location.includes('(+)'), newRightSite.location.includes('(+)')];
+      const knownCombinationForward = knownCombinations.find(({ siteNames: knownSites, orientation: knownOrientation }) => isEqual(knownSites, siteNames) && isEqual(knownOrientation, orientation));
+      if (knownCombinationForward) {
+        handleKnownCombinationChange(knownCombinationForward, selection);
+        return;
+      }
+      const siteNamesReverse = [newRightSite.siteName, newLeftSite.siteName];
+      const orientationReverse = [!newRightSite.location.includes('(+)'), !newLeftSite.location.includes('(+)')];
+      const knownCombinationReverse = knownCombinations.find(({ siteNames: knownSites, orientation: knownOrientation }) => isEqual(knownSites, siteNamesReverse) && isEqual(knownOrientation, orientationReverse));
+      if (knownCombinationReverse) {
+        handleKnownCombinationChange(knownCombinationReverse, selection);
+        return;
+      }
+      handleKnownCombinationChange(null, selection);
+    }
+  }, []);
+
+  const onSiteSelectLeft = React.useCallback((site) => {
+    setLeftSite(site);
+    if (rightSite === null || isEqual(rightSite, site)) {
+      // Find the first different one
+      const differentSite = donorSites.find(({ location }) => location !== site.location);
+      setRightSite(differentSite);
+      checkKnownCombination(site, differentSite);
+      return;
+    }
+    checkKnownCombination(site, rightSite);
+  }, [rightSite, donorSites]);
+
+  const onSiteSelectRight = React.useCallback((site) => {
+    setRightSite(site);
+    if (leftSite === null || isEqual(leftSite, site)) {
+      // Find the first different one
+      const differentSite = donorSites.find(({ location }) => location !== site.location);
+      setLeftSite(differentSite);
+      checkKnownCombination(differentSite, site);
+      return;
+    }
+
+    checkKnownCombination(leftSite, site);
+  }, [leftSite, donorSites]);
+  return (
+    <RequestStatusWrapper requestStatus={requestStatus} retry={attemptAgain}>
+      {donorSites.length < 2 && (<Alert severity="error">The sequence must have at least two AttP sites</Alert>)}
+      {donorSites.length >= 2 && (
+        <>
+          <Box sx={{ my: 2, '& > div': { mx: 1 } }}>
+            <SiteSelect donorSites={donorSites} site={leftSite} setSite={onSiteSelectLeft} label="Left attP site" />
+            <SiteSelect donorSites={donorSites} site={rightSite} setSite={onSiteSelectRight} label="Right attP site" />
+          </Box>
+          {knownCombination && (<Alert sx={{ width: '80%', margin: 'auto', mb: 2 }} severity="info">{knownCombination.message}</Alert>)}
+          {knownCombination === null && (leftSite && rightSite) && (<Alert sx={{ width: '80%', margin: 'auto', mb: 2 }} severity="error">No recommended primer tails found</Alert>)}
+        </>
+      )}
+    </RequestStatusWrapper>
+  );
+}
+
+export default GatewayRoiSelect;

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

@@ -0,0 +1,37 @@
+import { FormControlLabel, FormLabel, Radio, RadioGroup } from '@mui/material';
+import React from 'react';
+import { usePrimerDesign } from './PrimerDesignContext';
+
+function OrientationPicker({ id, index }) {
+  const { designType, fragmentOrientations, handleFragmentOrientationChange, templateSequenceNames } = usePrimerDesign();
+  const sequenceName = templateSequenceNames[index];
+  let label = sequenceName && sequenceName !== 'name' ? `Seq. ${id} (${sequenceName})` : `Seq. ${id}`;
+  if (designType === 'homologous_recombination') {
+    label = 'Orientation of insert';
+  }
+  return (
+    <table style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', margin: '0', padding: '0' }}>
+      <tbody>
+        <tr style={{ border: 'none' }}>
+          <td style={{ width: '40%', verticalAlign: 'middle', textAlign: 'right', paddingRight: '8px', border: 'none', padding: '2px 8px 2px 0' }}>
+            <FormLabel id={`fragment-orientation-label-${index}`}>{label}</FormLabel>
+          </td>
+          <td style={{ width: '60%', verticalAlign: 'middle', textAlign: 'left', border: 'none', padding: '2px 0' }}>
+            <RadioGroup
+              row
+              aria-labelledby={`fragment-orientation-label-${index}`}
+              name={`fragment-orientation-${index}`}
+              value={fragmentOrientations[index]}
+              onChange={(e) => handleFragmentOrientationChange(index, e.target.value)}
+            >
+              <FormControlLabel value="forward" control={<Radio />} label="Forward" />
+              <FormControlLabel value="reverse" control={<Radio />} label="Reverse" />
+            </RadioGroup>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}
+
+export default OrientationPicker;

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

@@ -0,0 +1,369 @@
+import React, { useState, useEffect } from 'react';
+import { batch, useDispatch, useSelector, useStore } from 'react-redux';
+import { updateEditor } from '@teselagen/ove';
+import { isEqual } from 'lodash-es';
+import useBackendRoute from '../../../../hooks/useBackendRoute';
+import { selectedRegion2SequenceLocation } from '@opencloning/utils/selectedRegionUtils';
+import error2String from '@opencloning/utils/error2String';
+import useStoreEditor from '../../../../hooks/useStoreEditor';
+import { cloningActions } from '@opencloning/store/cloning';
+import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
+import { ebicTemplateAnnotation, joinSequencesIntoSingleSequence, simulateHomologousRecombination } from '@opencloning/utils/sequenceManipulation';
+import useHttpClient from '../../../../hooks/useHttpClient';
+
+function changeValueAtIndex(current, index, newValue) {
+  return current.map((_, i) => (i === index ? newValue : current[i]));
+}
+
+const PrimerDesignContext = React.createContext();
+
+export function PrimerDesignProvider({ children, designType, sequenceIds, primerDesignSettings, steps }) {
+  let templateSequenceIds = sequenceIds;
+  if (designType === 'homologous_recombination' || designType === 'gateway_bp') {
+    templateSequenceIds = sequenceIds.slice(0, 1);
+  }
+
+  const [primers, setPrimers] = useState([]);
+  const [rois, setRois] = useState(Array(sequenceIds.length).fill(null));
+  const [error, setError] = useState('');
+  const [selectedTab, setSelectedTab] = useState(0);
+  const [sequenceProduct, setSequenceProduct] = useState(null);
+  const [fragmentOrientations, setFragmentOrientations] = useState(Array(templateSequenceIds.length).fill('forward'));
+  const [circularAssembly, setCircularAssembly] = useState(false);
+  const [spacers, setSpacers] = useState(Array(templateSequenceIds.length + 1).fill(''));
+
+  const spacersAreValid = React.useMemo(() => spacers.every((spacer) => !stringIsNotDNA(spacer)), [spacers]);
+  const sequenceNames = useSelector((state) => sequenceIds.map((id) => state.cloning.teselaJsonCache[id].name), isEqual);
+  const templateSequenceNames = useSelector((state) => templateSequenceIds.map((id) => state.cloning.teselaJsonCache[id].name), isEqual);
+  const mainSequenceId = useSelector((state) => state.cloning.mainSequenceId);
+
+  const store = useStore();
+  const backendRoute = useBackendRoute();
+  const dispatch = useDispatch();
+  const { updateStoreEditor } = useStoreEditor();
+  const { setMainSequenceId, addPrimersToPCRSource, setCurrentTab } = cloningActions;
+  const httpClient = useHttpClient();
+
+  const getSubmissionPreventedMessage = () => {
+    if (rois.some((region) => region === null)) {
+      return 'Not all regions have been selected';
+    } if (primerDesignSettings.error) {
+      return primerDesignSettings.error;
+    } if (spacers.some((spacer) => stringIsNotDNA(spacer))) {
+      return 'Spacer sequences not valid';
+    }
+    return '';
+  };
+
+  const submissionPreventedMessage = getSubmissionPreventedMessage();
+
+  React.useEffect(() => {
+    let newSequenceProduct = null;
+    if (submissionPreventedMessage === '') {
+      const { teselaJsonCache } = store.getState().cloning;
+      const sequences = sequenceIds.map((id) => teselaJsonCache[id]);
+      if (designType === 'simple_pair' || designType === 'restriction_ligation') {
+        const enzymeSpacers = designType === 'restriction_ligation' ? primerDesignSettings.enzymeSpacers : ['', ''];
+        const extendedSpacers = [enzymeSpacers[0] + spacers[0], spacers[1] + enzymeSpacers[1]];
+        newSequenceProduct = joinSequencesIntoSingleSequence(sequences, rois.map((s) => s.selectionLayer), fragmentOrientations, extendedSpacers, circularAssembly, 'primer tail');
+        newSequenceProduct.name = 'PCR product';
+      } else if (designType === 'gibson_assembly') {
+        newSequenceProduct = joinSequencesIntoSingleSequence(sequences, rois.map((s) => s.selectionLayer), fragmentOrientations, spacers, circularAssembly);
+        newSequenceProduct.name = 'Gibson Assembly product';
+      } else if (designType === 'homologous_recombination') {
+        newSequenceProduct = simulateHomologousRecombination(sequences[0], sequences[1], rois, fragmentOrientations[0] === 'reverse', spacers);
+        newSequenceProduct.name = 'Homologous recombination product';
+      } else if (designType === 'gateway_bp') {
+        newSequenceProduct = joinSequencesIntoSingleSequence([sequences[0]], [rois[0].selectionLayer], fragmentOrientations, spacers, false, 'primer tail');
+        newSequenceProduct.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 = newSequenceProduct.sequence.length - knownCombination.translationFrame[1] - nbAas * 3;
+        const rightFeature = {
+          start: rightStart,
+          end: newSequenceProduct.sequence.length - knownCombination.translationFrame[1] - 1,
+          type: 'CDS',
+          name: 'translation frame',
+          strand: 1,
+          forward: true,
+        };
+        newSequenceProduct.features.push(leftFeature);
+        newSequenceProduct.features.push(rightFeature);
+        setSequenceProduct(newSequenceProduct);
+      } else if (designType === 'ebic') {
+        newSequenceProduct = ebicTemplateAnnotation(sequences[0], rois[0].selectionLayer, primerDesignSettings);
+        setSequenceProduct(newSequenceProduct);
+      }
+    }
+    setSequenceProduct(newSequenceProduct);
+  }, [rois, spacersAreValid, fragmentOrientations, circularAssembly, designType, spacers, primerDesignSettings]);
+
+  const onCircularAssemblyChange = (event) => {
+    setCircularAssembly(event.target.checked);
+    if (event.target.checked) {
+      // Remove the first spacer
+      setSpacers((current) => current.slice(1));
+    } else {
+      // Add it again
+      setSpacers((current) => ['', ...current]);
+    }
+  };
+
+  const onSelectRegion = (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 onTabChange = (event, newValue) => {
+    setSelectedTab(newValue);
+    if (newValue < sequenceIds.length) {
+      updateStoreEditor('mainEditor', sequenceIds[newValue]);
+      dispatch(setMainSequenceId(sequenceIds[newValue]));
+    } else if (newValue === sequenceIds.length) {
+      updateEditor(store, 'mainEditor', { sequenceData: sequenceProduct || '', selectionLayer: {} });
+    } else {
+      updateStoreEditor('mainEditor', null);
+    }
+  };
+
+  const handleNext = () => {
+    onTabChange(null, selectedTab + 1);
+  };
+
+  const handleBack = () => {
+    onTabChange(null, selectedTab - 1);
+  };
+
+  const handleSelectRegion = (index, selectedRegion, allowSinglePosition = false) => {
+    const regionError = onSelectRegion(index, selectedRegion, allowSinglePosition);
+    if (!regionError) {
+      handleNext();
+    }
+    return regionError;
+  };
+
+  const handleFragmentOrientationChange = (index, orientation) => {
+    setFragmentOrientations((current) => changeValueAtIndex(current, index, orientation));
+  };
+
+  // Focus on the right sequence when changing tabs
+  useEffect(() => {
+    // Focus on the correct sequence
+    const mainSequenceIndex = sequenceIds.indexOf(mainSequenceId);
+    if (mainSequenceIndex !== -1) {
+      setSelectedTab(mainSequenceIndex);
+    }
+  }, [sequenceIds, mainSequenceId]);
+
+  // Update the sequence product in the editor if in the last tab
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (selectedTab === sequenceIds.length) {
+        updateEditor(store, 'mainEditor', { sequenceData: sequenceProduct || {} });
+      }
+    }, 500);
+
+    return () => clearTimeout(timeoutId);
+  }, [sequenceProduct, store]);
+
+  const designPrimers = async () => {
+    // Validate fragmentOrientations
+    fragmentOrientations.forEach((orientation) => {
+      if (orientation !== 'forward' && orientation !== 'reverse') {
+        throw new Error('Invalid fragment orientation');
+      }
+    });
+    const { cloning: { sequences, teselaJsonCache, globalPrimerSettings } } = store.getState();
+    let requestData;
+    let params;
+    let endpoint;
+    const paramsForRequest = Object.fromEntries(
+      Object.entries(primerDesignSettings)
+        .filter(([_, value]) => typeof value !== 'function'),
+    );
+    if (designType === 'gibson_assembly') {
+      params = {
+        ...paramsForRequest,
+        circular: circularAssembly,
+      };
+      requestData = {
+        pcr_templates: sequenceIds.map((id, index) => ({
+          sequence: sequences.find((e) => e.id === id),
+          location: selectedRegion2SequenceLocation(rois[index], teselaJsonCache[id].size),
+          forward_orientation: fragmentOrientations[index] === 'forward',
+        })),
+        spacers,
+      };
+      endpoint = 'gibson_assembly';
+    } else if (designType === 'homologous_recombination') {
+      const [pcrTemplateId, homologousRecombinationTargetId] = sequenceIds;
+      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,
+      };
+      endpoint = 'homologous_recombination';
+    } else if (designType === 'simple_pair' || designType === 'gateway_bp' || designType === 'restriction_ligation') {
+      const pcrTemplateId = sequenceIds[0];
+      params = {
+        ...paramsForRequest,
+      };
+
+      requestData = {
+        pcr_template: {
+          sequence: sequences.find((e) => e.id === pcrTemplateId),
+          location: selectedRegion2SequenceLocation(rois[0], teselaJsonCache[pcrTemplateId].size),
+          forward_orientation: fragmentOrientations[0] === 'forward',
+        },
+        spacers,
+      };
+      endpoint = 'simple_pair';
+    } else if (designType === 'ebic') {
+      endpoint = 'ebic';
+      requestData = {
+        template: {
+          sequence: sequences.find((e) => e.id === templateSequenceIds[0]),
+          location: selectedRegion2SequenceLocation(rois[0], teselaJsonCache[templateSequenceIds[0]].size),
+          // forward_orientation: fragmentOrientations[0] === 'forward',
+        },
+      };
+      params = {
+        ...paramsForRequest,
+      };
+    }
+    requestData.settings = globalPrimerSettings;
+    const url = backendRoute(`primer_design/${endpoint}`);
+
+    try {
+      const resp = await httpClient.post(url, requestData, { params });
+      setError('');
+      const newPrimers = resp.data.primers;
+      setPrimers(newPrimers);
+      handleNext();
+      return false;
+    } catch (thrownError) {
+      const errorMessage = error2String(thrownError);
+      setError(errorMessage);
+      return true;
+    }
+  };
+
+  const addPrimers = () => {
+    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 {
+      usedPCRSources = templateSequenceIds.map((id) => pcrSources.find((source) => source.input.some((i) => i.sequence === id)));
+    }
+
+    batch(() => {
+      usedPCRSources.forEach((pcrSource, index) => {
+        dispatch(addPrimersToPCRSource({
+          fwdPrimer: primers[index * 2],
+          revPrimer: primers[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);
+  };
+
+  const value = React.useMemo(() => ({
+    primers,
+    error,
+    rois,
+    designPrimers,
+    setPrimers,
+    selectedTab,
+    onTabChange,
+    handleNext,
+    handleBack,
+    handleSelectRegion,
+    sequenceIds,
+    fragmentOrientations,
+    circularAssembly,
+    spacers,
+    setFragmentOrientations,
+    setSpacers,
+    handleFragmentOrientationChange,
+    sequenceNames,
+    primerDesignSettings,
+    submissionPreventedMessage,
+    addPrimers,
+    onCircularAssemblyChange,
+    templateSequenceIds,
+    templateSequenceNames,
+    designType,
+    steps,
+  }), [
+    primers,
+    error,
+    rois,
+    designPrimers,
+    setPrimers,
+    selectedTab,
+    onTabChange,
+    handleNext,
+    handleBack,
+    handleSelectRegion,
+    sequenceIds,
+    fragmentOrientations,
+    circularAssembly,
+    spacers,
+    setFragmentOrientations,
+    setSpacers,
+    handleFragmentOrientationChange,
+    sequenceNames,
+    primerDesignSettings,
+    submissionPreventedMessage,
+    addPrimers,
+    templateSequenceIds,
+    designType,
+    steps,
+  ]);
+
+  return (
+    <PrimerDesignContext.Provider value={value}>
+      {children}
+    </PrimerDesignContext.Provider>
+  );
+}
+
+export const usePrimerDesign = () => React.useContext(PrimerDesignContext);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PrimerDesignProvider } from './PrimerDesignContext';
+import PrimerDesignForm from './PrimerDesignForm';
+import useEBICPrimerDesignSettings from './useEBICPrimerDesignSettings';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+function PrimerDesignEBIC({ pcrSources }) {
+  const templateSequenceId = getPcrTemplateSequenceId(pcrSources[0]);
+  const sequenceIds = React.useMemo(() => [templateSequenceId], [templateSequenceId]);
+  const primerDesignSettings = useEBICPrimerDesignSettings();
+
+  const steps = React.useMemo(() => [
+    { label: 'Region of interest', description: 'Select in the editor the region to be replaced' },
+  ], []);
+
+  return (
+    <PrimerDesignProvider designType="ebic" sequenceIds={sequenceIds} primerDesignSettings={primerDesignSettings} steps={steps}>
+      <PrimerDesignForm />
+    </PrimerDesignProvider>
+
+  );
+}
+
+export default PrimerDesignEBIC;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import PrimerDesignStepper from './PrimerDesignStepper';
+import TabPanelSelectRoi from './TabPanelSelectRoi';
+import TabPannelSettings from './TabPannelSettings';
+import TabPanelResults from './TabPanelResults';
+import { usePrimerDesign } from './PrimerDesignContext';
+import TabPanelEBICSettings from './TabPanelEBICSettings';
+
+function PrimerDesignForm() {
+  const { steps, sequenceIds, designType } = usePrimerDesign();
+  return (
+    <Box>
+      <PrimerDesignStepper />
+      {steps.slice(0, sequenceIds.length).map((step, index) => (
+        <TabPanelSelectRoi
+          key={step.label}
+          step={step}
+          index={index}
+        />
+      ))}
+      {designType !== 'ebic' && <TabPannelSettings />}
+      {designType === 'ebic' && <TabPanelEBICSettings />}
+      <TabPanelResults />
+    </Box>
+  );
+}
+
+export default PrimerDesignForm;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { PrimerDesignProvider } from './PrimerDesignContext';
+import PrimerDesignForm from './PrimerDesignForm';
+
+import useGatewayPrimerDesignSettings from './useGatewayPrimerDesignSettings';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+function PrimerDesignGatewayBP({ donorVectorId, pcrSource }) {
+  const templateSequenceId = getPcrTemplateSequenceId(pcrSource);
+  const sequenceIds = React.useMemo(() => [templateSequenceId, donorVectorId], [templateSequenceId, donorVectorId]);
+  const steps = React.useMemo(() => [
+    { label: 'Amplified region',
+      description: `Select the fragment of sequence ${templateSequenceId} to be amplified in the editor and click "Choose region"`,
+      inputLabel: `Amplified region (sequence ${templateSequenceId})` },
+    { label: 'Replaced region',
+      description: 'Select attP sites between which the PCR product will be inserted',
+      inputLabel: `Replaced region (sequence ${donorVectorId})`,
+      stepCompletionToolTip: 'Select a valid combination of attP sites',
+    },
+  ], [templateSequenceId, donorVectorId]);
+
+  const primerDesignSettings = useGatewayPrimerDesignSettings({ homology_length: null, minimal_hybridization_length: 20, target_tm: 55 });
+
+  return (
+    <PrimerDesignProvider
+      designType="gateway_bp"
+      sequenceIds={sequenceIds}
+      primerDesignSettings={primerDesignSettings}
+      steps={steps}
+    >
+      <PrimerDesignForm />
+    </PrimerDesignProvider>
+  );
+}
+
+export default PrimerDesignGatewayBP;