@opencloning/ui 1.4.11 → 1.5.1

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>

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();