@opencloning/ui 1.5.0 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @opencloning/ui
 
+## 1.5.2
+
+### Patch Changes
+
+- [#653](https://github.com/manulera/OpenCloning_frontend/pull/653) [`e529568`](https://github.com/manulera/OpenCloning_frontend/commit/e5295684d62b25954e6095fc63fa7c9e65551fb6) Thanks [@manulera](https://github.com/manulera)! - Assembler - pass sort_by_recognition_sites=true to restriction & ligation endpoint
+
+- Updated dependencies []:
+  - @opencloning/store@1.5.2
+  - @opencloning/utils@1.5.2
+
+## 1.5.1
+
+### Patch Changes
+
+- [#651](https://github.com/manulera/OpenCloning_frontend/pull/651) [`b5c89e2`](https://github.com/manulera/OpenCloning_frontend/commit/b5c89e23aa1065319cb07a9ac48a26693dd0a21a) Thanks [@manulera](https://github.com/manulera)! - Big refactor of Primer designer for better maintainability
+
+- [#651](https://github.com/manulera/OpenCloning_frontend/pull/651) [`b5c89e2`](https://github.com/manulera/OpenCloning_frontend/commit/b5c89e23aa1065319cb07a9ac48a26693dd0a21a) Thanks [@manulera](https://github.com/manulera)! - Allow primer design of Gibson and similar assembly methods to include fragments that are not amplified. Similar to what the NEBuilder planner does, where not all products are amplified. Perhaps in the future it would be useful to also allow the option to restore the restriction sites on the edge.
+
+- Updated dependencies [[`b5c89e2`](https://github.com/manulera/OpenCloning_frontend/commit/b5c89e23aa1065319cb07a9ac48a26693dd0a21a)]:
+  - @opencloning/store@1.5.1
+  - @opencloning/utils@1.5.1
+
 ## 1.5.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -25,8 +25,8 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@opencloning/store": "1.5.0",
-    "@opencloning/utils": "1.5.0",
+    "@opencloning/store": "1.5.2",
+    "@opencloning/utils": "1.5.2",
     "@teselagen/bio-parsers": "^0.4.34",
     "@teselagen/ove": "^0.8.34",
     "@teselagen/range-utils": "^0.3.20",

package/src/components/assembler/Assembler.cy.jsx

@@ -239,6 +239,9 @@ describe('<AssemblerComponent />', () => {
       expect(req.body).to.have.property('source');
       expect(req.body.source).to.have.property('restriction_enzymes');
       expect(req.body.source.restriction_enzymes).to.include('assembly_enzyme');
+      // Check that the value of the sort_by_recognition_sites was set in the request query
+      expect(req.query).to.have.property('sort_by_recognition_sites');
+      expect(req.query.sort_by_recognition_sites).to.equal('true');
       req.reply({
         statusCode: 200,
         body: dummyResponse2,

package/src/components/assembler/useAssembler.js

@@ -71,6 +71,7 @@ export const useAssembler = () => {
       const config = {
         params: {
           circular_only: true,
+          sort_by_recognition_sites: true,
         }
       }
       const requestData = {

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

@@ -1,6 +1,5 @@
 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';
@@ -9,30 +8,9 @@ import useStoreEditor from '../../../../hooks/useStoreEditor';
 import { cloningActions } from '@opencloning/store/cloning';
 import { usePrimerDesign } from './PrimerDesignContext';
 import RequestStatusWrapper from '../../../form/RequestStatusWrapper';
+import knownGatewayCombinations from './utils/knownGatewayCombinations';
 
-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],
-  },
-];
+const { setMainSequenceSelection } = cloningActions;
 
 function SiteSelect({ donorSites, site, setSite, label }) {
   return (
@@ -57,8 +35,6 @@ function SiteSelect({ donorSites, site, setSite, label }) {
   );
 }
 
-const { setMainSequenceSelection } = cloningActions;
-
 function GatewayRoiSelect({ id, greedy = false }) {
   const [leftSite, setLeftSite] = React.useState(null);
   const [rightSite, setRightSite] = React.useState(null);
@@ -104,14 +80,14 @@ function GatewayRoiSelect({ id, greedy = false }) {
       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));
+      const knownCombinationForward = knownGatewayCombinations.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));
+      const knownCombinationReverse = knownGatewayCombinations.find(({ siteNames: knownSites, orientation: knownOrientation }) => isEqual(knownSites, siteNamesReverse) && isEqual(knownOrientation, orientationReverse));
       if (knownCombinationReverse) {
         handleKnownCombinationChange(knownCombinationReverse, selection);
         return;
@@ -123,7 +99,6 @@ function GatewayRoiSelect({ id, greedy = false }) {
   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);
@@ -135,7 +110,6 @@ function GatewayRoiSelect({ id, greedy = false }) {
   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);

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

@@ -1,11 +1,12 @@
 import { FormControlLabel, FormLabel, Radio, RadioGroup } from '@mui/material';
 import React from 'react';
 import { usePrimerDesign } from './PrimerDesignContext';
+import { getSequenceLabel } from './utils/getSequenceLabel';
 
 function OrientationPicker({ id, index }) {
   const { designType, fragmentOrientations, handleFragmentOrientationChange, templateSequenceNames } = usePrimerDesign();
   const sequenceName = templateSequenceNames[index];
-  let label = sequenceName && sequenceName !== 'name' ? `Seq. ${id} (${sequenceName})` : `Seq. ${id}`;
+  let label = getSequenceLabel(id, sequenceName);
   if (designType === 'homologous_recombination') {
     label = 'Orientation of insert';
   }

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

@@ -1,328 +1,89 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { batch, useDispatch, useSelector, useStore } from 'react-redux';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { 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]));
-}
+import useSpacers from './hooks/useSpacers';
+import useTabNavigation from './hooks/useTabNavigation';
+import useRegionSelection from './hooks/useRegionSelection';
+import useSequenceProduct from './hooks/useSequenceProduct';
+import useDesignPrimers from './hooks/useDesignPrimers';
 
 const PrimerDesignContext = React.createContext();
 
-export function PrimerDesignProvider({ children, designType, sequenceIds, primerDesignSettings, steps }) {
+export function PrimerDesignProvider({ children, designType, sequenceIds, primerDesignSettings, steps, isAmplified: isAmplifiedProp, circularAssembly = false }) {
+  const isAmplified = useMemo(
+    () => isAmplifiedProp || sequenceIds.map(() => true),
+    [isAmplifiedProp, sequenceIds],
+  );
 
-  const templateSequenceIds = React.useMemo(() => {
+  const templateSequenceIds = useMemo(() => {
     if (designType === 'homologous_recombination' || designType === 'gateway_bp') {
       return sequenceIds.slice(0, 1);
     }
     return sequenceIds;
   }, [sequenceIds, designType]);
 
-  // Compute initial values based on design type (props don't change, so compute once)
   const initialFragmentOrientationsLength = templateSequenceIds.length;
-  const initialCircularAssembly = designType === 'gibson_assembly';
-  const initialSpacersLength = initialCircularAssembly ? initialFragmentOrientationsLength : initialFragmentOrientationsLength + 1;
+  const initialSpacersLength = circularAssembly ? initialFragmentOrientationsLength : initialFragmentOrientationsLength + 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(initialFragmentOrientationsLength).fill('forward'));
-  const [circularAssembly, setCircularAssembly] = useState(initialCircularAssembly);
-  const [spacers, setSpacers] = useState(Array(initialSpacersLength).fill(''));
-  const sequenceProductTimeoutRef = React.useRef();
 
-  const spacersAreValid = React.useMemo(() => spacers.every((spacer) => !stringIsNotDNA(spacer)), [spacers]);
+  const store = useStore();
   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 { spacers, setSpacers, spacersAreValid } = useSpacers({
+    initialLength: initialSpacersLength,
+  });
 
-  const submissionPreventedMessage = React.useMemo(() => {
-    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 '';
-  }, [rois, primerDesignSettings.error, spacers]);
-
-  React.useEffect(() => {
-    // Clear any existing timeout
-    clearTimeout(sequenceProductTimeoutRef.current);
-
-    // Debounce the heavy calculation
-    sequenceProductTimeoutRef.current = setTimeout(() => {
-      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);
-        } else if (designType === 'ebic') {
-          newSequenceProduct = ebicTemplateAnnotation(sequences[0], rois[0].selectionLayer, primerDesignSettings);
-        }
-      }
-      setSequenceProduct({...newSequenceProduct, id: 'opencloning_primer_design_product'});
-    }, 300);
-
-    // Cleanup timeout on unmount or when dependencies change
-    return () => {
-      clearTimeout(sequenceProductTimeoutRef.current);
-    };
-  }, [rois, spacersAreValid, fragmentOrientations, circularAssembly, designType, spacers, primerDesignSettings, sequenceIds, templateSequenceIds, store, submissionPreventedMessage]);
+  const { selectedTab, onTabChange, handleNext, handleBack } = useTabNavigation({ sequenceIds });
 
+  const { rois, handleSelectRegion } = useRegionSelection({
+    sequenceCount: sequenceIds.length,
+    handleNext,
+  });
 
-  React.useEffect(() => {
-    if (circularAssembly && spacers.length !== templateSequenceIds.length) {
-      setSpacers((current) => current.slice(1));
-    }
-    if (!circularAssembly && spacers.length !== templateSequenceIds.length + 1) {
-      setSpacers((current) => ['', ...current]);
-    }
-  }, [circularAssembly, spacers, templateSequenceIds.length]);
-
+  const handleFragmentOrientationChange = useCallback((index, orientation) => {
+    setFragmentOrientations((current) => current.map((v, i) => (i === index ? orientation : v)));
+  }, []);
 
-  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 '';
+  const submissionPreventedMessage = useMemo(() => {
+    if (rois.some((region, i) => region === null && isAmplified[i])) {
+      return 'Not all regions have been selected';
     }
-    setRois((c) => changeValueAtIndex(c, index, null));
-    return 'Select a region (not a single position) to amplify';
-  }, [setRois]);
-
-  const onTabChange = useCallback((event, newValue) => {
-    setSelectedTab(newValue);
-    if (newValue < sequenceIds.length) {
-      updateStoreEditor('mainEditor', sequenceIds[newValue]);
-      dispatch(setMainSequenceId(sequenceIds[newValue]));
-    } else if (newValue === sequenceIds.length) {
-      // Don't update editor here - let the useEffect handle it when sequenceProduct is ready
-      // This avoids using stale data since sequenceProduct is debounced
-    } else {
-      updateStoreEditor('mainEditor', null);
+    if (primerDesignSettings.error) {
+      return primerDesignSettings.error;
     }
-  }, [sequenceIds, updateStoreEditor, dispatch, setMainSequenceId, setSelectedTab]);
-
-  const handleNext = useCallback(() => {
-    onTabChange(null, selectedTab + 1);
-  }, [onTabChange, selectedTab]);
-
-  const handleBack = useCallback(() => {
-    onTabChange(null, selectedTab - 1);
-  }, [onTabChange, selectedTab]);
-
-  const handleSelectRegion = useCallback((index, selectedRegion, allowSinglePosition = false) => {
-    const regionError = onSelectRegion(index, selectedRegion, allowSinglePosition);
-    if (!regionError) {
-      handleNext();
+    if (spacers.some((spacer) => stringIsNotDNA(spacer))) {
+      return 'Spacer sequences not valid';
     }
-    return regionError;
-  }, [onSelectRegion, handleNext]);
-
-  const handleFragmentOrientationChange = useCallback((index, orientation) => {
-    setFragmentOrientations((current) => changeValueAtIndex(current, index, orientation));
-  }, [setFragmentOrientations]);
+    return '';
+  }, [rois, isAmplified, primerDesignSettings.error, spacers]);
 
-  // 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]);
+  const sequenceProduct = useSequenceProduct({
+    rois, spacers, spacersAreValid, fragmentOrientations, circularAssembly,
+    designType, primerDesignSettings, sequenceIds, submissionPreventedMessage,
+  });
 
-  // Update the sequence product in the editor if in the last tab
+  // Sync the editor with the sequence product when on the settings tab
   useEffect(() => {
     if (selectedTab === sequenceIds.length) {
       const timeoutId = setTimeout(() => {
         updateEditor(store, 'mainEditor', { sequenceData: sequenceProduct || {}, selectionLayer: {} });
       }, 100);
-
       return () => clearTimeout(timeoutId);
     }
+    return undefined;
   }, [sequenceProduct, selectedTab, sequenceIds.length, store]);
 
-  const designPrimers = useCallback(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,
-      };
+  const { primers, setPrimers, error, designPrimers, addPrimers } = useDesignPrimers({
+    designType, sequenceIds, templateSequenceIds, isAmplified,
+    rois, fragmentOrientations, spacers, circularAssembly, primerDesignSettings,
+    handleNext, onTabChange,
+  });
 
-      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;
-    }
-  }, [fragmentOrientations, rois, sequenceIds, templateSequenceIds, designType, circularAssembly, primerDesignSettings, spacers, store, httpClient, backendRoute, handleNext]);
-
-  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 {
-      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);
-  }, [primers, dispatch, setMainSequenceId, setCurrentTab, onTabChange, updateStoreEditor, designType, templateSequenceIds, addPrimersToPCRSource, store]);
-
-  const value = React.useMemo(() => ({
+  const value = useMemo(() => ({
     primers,
     error,
     rois,
@@ -344,38 +105,19 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
     submissionPreventedMessage,
     addPrimers,
     circularAssembly,
-    setCircularAssembly,
     templateSequenceIds,
     templateSequenceNames,
     designType,
     steps,
+    isAmplified,
   }), [
-    primers,
-    error,
-    rois,
-    designPrimers,
-    setPrimers,
-    selectedTab,
-    onTabChange,
-    handleNext,
-    handleBack,
-    handleSelectRegion,
-    sequenceIds,
-    fragmentOrientations,
-    circularAssembly,
-    spacers,
-    setFragmentOrientations,
-    setSpacers,
-    handleFragmentOrientationChange,
-    sequenceNames,
-    primerDesignSettings,
-    submissionPreventedMessage,
-    addPrimers,
-    setCircularAssembly,
-    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, templateSequenceNames,
+    designType, steps, isAmplified,
   ]);
 
   return (

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Box } from '@mui/material';
 import PrimerDesignStepper from './PrimerDesignStepper';
 import TabPanelSelectRoi from './TabPanelSelectRoi';
-import TabPannelSettings from './TabPannelSettings';
+import TabPanelSettings from './TabPanelSettings';
 import TabPanelResults from './TabPanelResults';
 import { usePrimerDesign } from './PrimerDesignContext';
 import TabPanelEBICSettings from './TabPanelEBICSettings';
@@ -19,7 +19,7 @@ function PrimerDesignForm() {
           index={index}
         />
       ))}
-      {designType !== 'ebic' && <TabPannelSettings />}
+      {designType !== 'ebic' && <TabPanelSettings />}
       {designType === 'ebic' && <TabPanelEBICSettings />}
       <TabPanelResults />
     </Box>

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

@@ -2,15 +2,22 @@ import React from 'react';
 import { PrimerDesignProvider } from './PrimerDesignContext';
 import PrimerDesignForm from './PrimerDesignForm';
 import usePrimerDesignSettings from './usePrimerDesignSettings';
-import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
 
-export default function PrimerDesignGibsonAssembly({ pcrSources }) {
-  const templateSequencesIds = React.useMemo(() => pcrSources.map(getPcrTemplateSequenceId), [pcrSources]);
+export default function PrimerDesignGibsonAssembly({ assemblyInputsInOrder, circularAssembly }) {
+  const templateSequencesIds = React.useMemo(
+    () => assemblyInputsInOrder.map((x) => x.templateSequenceId),
+    [assemblyInputsInOrder],
+  );
+  const isAmplified = React.useMemo(
+    () => assemblyInputsInOrder.map((x) => x.isAmplified),
+    [assemblyInputsInOrder],
+  );
+
   const steps = React.useMemo(() => [
-    ...templateSequencesIds.map((id, index) => (
+    ...templateSequencesIds.map((id) => (
       { label: `Seq ${id}`, selectOrientation: true }
     )),
-  ], [pcrSources, templateSequencesIds]);
+  ], [templateSequencesIds]);
 
   const primerDesignSettings = usePrimerDesignSettings({ homology_length: 35, minimal_hybridization_length: 14, target_tm: 55 });
   return (
@@ -19,6 +26,8 @@ export default function PrimerDesignGibsonAssembly({ pcrSources }) {
       sequenceIds={templateSequencesIds}
       primerDesignSettings={primerDesignSettings}
       steps={steps}
+      isAmplified={isAmplified}
+      circularAssembly={circularAssembly}
     >
       <PrimerDesignForm />
     </PrimerDesignProvider>