@opencloning/ui 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @opencloning/ui
 
+## 1.2.0
+
+### Minor Changes
+
+- [#595](https://github.com/manulera/OpenCloning_frontend/pull/595) [`1b28cc5`](https://github.com/manulera/OpenCloning_frontend/commit/1b28cc5852460a072982dc529b58fc9607fae21f) Thanks [@manulera](https://github.com/manulera)! - Minor improvements and bug fixes:
+
+  - include name of tracks in alignment + update ove to display correct Track Properties table
+  - fix display main sequence when alignments are present
+  - change default minimum hib length to 14 for primer design
+  - Gibson primer design: default to circular assembly, force circular for single input assemblies
+  - Gibson primer design: make product sequence preview circular when assembly is circular
+  - Primer design: in circular assemblies of one fragment only, display the spacer before the fragment in the preview.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.2.0
+  - @opencloning/utils@1.2.0
+
 ## 1.1.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -24,10 +24,10 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@opencloning/store": "1.1.2",
-    "@opencloning/utils": "1.1.2",
+    "@opencloning/store": "1.2.0",
+    "@opencloning/utils": "1.2.0",
     "@teselagen/bio-parsers": "^0.4.32",
-    "@teselagen/ove": "^0.8.18",
+    "@teselagen/ove": "^0.8.30",
     "@teselagen/range-utils": "^0.3.13",
     "@teselagen/sequence-utils": "^0.3.35",
     "@zip.js/zip.js": "^2.7.62",

package/src/components/MainSequenceEditor.jsx

@@ -65,6 +65,8 @@ function MainSequenceEditor() {
     (state) => {
       const history = state.VectorEditor.mainEditor?.sequenceDataHistory;
       if (!history) return false;
+      const sequenceId = state.VectorEditor.mainEditor?.sequenceData?.id;
+      if (sequenceId === 'opencloning_primer_design_product') return false;
       return state.cloning.mainSequenceId && Object.keys(history).length > 0 && history.future.length === 0;
     }
   );

package/src/components/assembler/Assembler.jsx

@@ -138,7 +138,6 @@ function AssemblerComponent({ data, categories }) {
               {index === 0 && item.category !== '' && (
                 <AssemblerLink overhang={leftOverhang} />
               )}
-              <AssemblerPart />
               <Box sx={{ width: '250px', border: 3, borderColor, borderRadius: 4, p: 2 }}>
                 <FormControl fullWidth sx={{ mb: 2 }}>
                   <InputLabel>Category</InputLabel>

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 import { updateEditor } from '@teselagen/ove';
 import { isEqual } from 'lodash-es';
@@ -18,19 +18,28 @@ function changeValueAtIndex(current, index, newValue) {
 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 templateSequenceIds = React.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 [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 [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 sequenceNames = useSelector((state) => sequenceIds.map((id) => state.cloning.teselaJsonCache[id].name), isEqual);
@@ -44,7 +53,7 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
   const { setMainSequenceId, addPrimersToPCRSource, setCurrentTab } = cloningActions;
   const httpClient = useHttpClient();
 
-  const getSubmissionPreventedMessage = () => {
+  const submissionPreventedMessage = React.useMemo(() => {
     if (rois.some((region) => region === null)) {
       return 'Not all regions have been selected';
     } if (primerDesignSettings.error) {
@@ -53,71 +62,78 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
       return 'Spacer sequences not valid';
     }
     return '';
-  };
-
-  const submissionPreventedMessage = getSubmissionPreventedMessage();
+  }, [rois, primerDesignSettings.error, spacers]);
 
   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);
+    // 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);
-  }, [rois, spacersAreValid, fragmentOrientations, circularAssembly, designType, spacers, 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 onCircularAssemblyChange = (event) => {
-    setCircularAssembly(event.target.checked);
-    if (event.target.checked) {
-      // Remove the first spacer
+
+  React.useEffect(() => {
+    if (circularAssembly && spacers.length !== templateSequenceIds.length) {
       setSpacers((current) => current.slice(1));
-    } else {
-      // Add it again
+    }
+    if (!circularAssembly && spacers.length !== templateSequenceIds.length + 1) {
       setSpacers((current) => ['', ...current]);
     }
-  };
+  }, [circularAssembly, spacers, templateSequenceIds.length]);
 
-  const onSelectRegion = (index, selectedRegion, allowSinglePosition = false) => {
+
+  const onSelectRegion = useCallback((index, selectedRegion, allowSinglePosition = false) => {
     const { caretPosition } = selectedRegion;
     if (caretPosition === undefined) {
       setRois((c) => changeValueAtIndex(c, index, null));
@@ -133,39 +149,40 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
     }
     setRois((c) => changeValueAtIndex(c, index, null));
     return 'Select a region (not a single position) to amplify';
-  };
+  }, [setRois]);
 
-  const onTabChange = (event, newValue) => {
+  const onTabChange = useCallback((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: {} });
+      // 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);
     }
-  };
+  }, [sequenceIds, updateStoreEditor, dispatch, setMainSequenceId, setSelectedTab]);
 
-  const handleNext = () => {
+  const handleNext = useCallback(() => {
     onTabChange(null, selectedTab + 1);
-  };
+  }, [onTabChange, selectedTab]);
 
-  const handleBack = () => {
+  const handleBack = useCallback(() => {
     onTabChange(null, selectedTab - 1);
-  };
+  }, [onTabChange, selectedTab]);
 
-  const handleSelectRegion = (index, selectedRegion, allowSinglePosition = false) => {
+  const handleSelectRegion = useCallback((index, selectedRegion, allowSinglePosition = false) => {
     const regionError = onSelectRegion(index, selectedRegion, allowSinglePosition);
     if (!regionError) {
       handleNext();
     }
     return regionError;
-  };
+  }, [onSelectRegion, handleNext]);
 
-  const handleFragmentOrientationChange = (index, orientation) => {
+  const handleFragmentOrientationChange = useCallback((index, orientation) => {
     setFragmentOrientations((current) => changeValueAtIndex(current, index, orientation));
-  };
+  }, [setFragmentOrientations]);
 
   // Focus on the right sequence when changing tabs
   useEffect(() => {
@@ -178,16 +195,16 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
 
   // 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);
+    if (selectedTab === sequenceIds.length) {
+      const timeoutId = setTimeout(() => {
+        updateEditor(store, 'mainEditor', { sequenceData: sequenceProduct || {}, selectionLayer: {} });
+      }, 100);
 
-    return () => clearTimeout(timeoutId);
-  }, [sequenceProduct, store]);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [sequenceProduct, selectedTab, sequenceIds.length, store]);
 
-  const designPrimers = async () => {
+  const designPrimers = useCallback(async () => {
     // Validate fragmentOrientations
     fragmentOrientations.forEach((orientation) => {
       if (orientation !== 'forward' && orientation !== 'reverse') {
@@ -277,9 +294,9 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
       setError(errorMessage);
       return true;
     }
-  };
+  }, [fragmentOrientations, rois, sequenceIds, templateSequenceIds, designType, circularAssembly, primerDesignSettings, spacers, store, httpClient, backendRoute, handleNext]);
 
-  const addPrimers = () => {
+  const addPrimers = useCallback(() => {
     const pcrSources = store.getState().cloning.sources.filter((source) => source.type === 'PCRSource');
     let usedPCRSources;
     if (designType === 'ebic') {
@@ -303,7 +320,7 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
     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(() => ({
     primers,
@@ -318,7 +335,6 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
     handleSelectRegion,
     sequenceIds,
     fragmentOrientations,
-    circularAssembly,
     spacers,
     setFragmentOrientations,
     setSpacers,
@@ -327,7 +343,8 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
     primerDesignSettings,
     submissionPreventedMessage,
     addPrimers,
-    onCircularAssemblyChange,
+    circularAssembly,
+    setCircularAssembly,
     templateSequenceIds,
     templateSequenceNames,
     designType,
@@ -354,7 +371,9 @@ export function PrimerDesignProvider({ children, designType, sequenceIds, primer
     primerDesignSettings,
     submissionPreventedMessage,
     addPrimers,
+    setCircularAssembly,
     templateSequenceIds,
+    templateSequenceNames,
     designType,
     steps,
   ]);

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

@@ -19,7 +19,7 @@ function PrimerDesignGatewayBP({ donorVectorId, pcrSource }) {
     },
   ], [templateSequenceId, donorVectorId]);
 
-  const primerDesignSettings = useGatewayPrimerDesignSettings({ homology_length: null, minimal_hybridization_length: 20, target_tm: 55 });
+  const primerDesignSettings = useGatewayPrimerDesignSettings({ homology_length: null, minimal_hybridization_length: 14, target_tm: 55 });
 
   return (
     <PrimerDesignProvider

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

@@ -10,9 +10,9 @@ export default function PrimerDesignGibsonAssembly({ pcrSources }) {
     ...templateSequencesIds.map((id, index) => (
       { label: `Seq ${id}`, selectOrientation: true }
     )),
-  ], [pcrSources]);
+  ], [pcrSources, templateSequencesIds]);
 
-  const primerDesignSettings = usePrimerDesignSettings({ homology_length: 35, minimal_hybridization_length: 20, target_tm: 55 });
+  const primerDesignSettings = usePrimerDesignSettings({ homology_length: 35, minimal_hybridization_length: 14, target_tm: 55 });
   return (
     <PrimerDesignProvider
       designType="gibson_assembly"

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

@@ -18,7 +18,7 @@ export default function PrimerDesignHomologousRecombination({ homologousRecombin
     },
   ], [templateSequenceId, homologousRecombinationTargetId]);
 
-  const primerDesignSettings = usePrimerDesignSettings({ homology_length: 80, minimal_hybridization_length: 20, target_tm: 55 });
+  const primerDesignSettings = usePrimerDesignSettings({ homology_length: 80, minimal_hybridization_length: 14, target_tm: 55 });
   return (
     <PrimerDesignProvider
       designType="homologous_recombination"

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

@@ -12,7 +12,7 @@ function PrimerDesignRestriction({ pcrSource }) {
     { label: 'Amplified region' },
   ], []);
 
-  const primerDesignSettings = useEnzymePrimerDesignSettings({ homology_length: null, minimal_hybridization_length: 20, target_tm: 55 });
+  const primerDesignSettings = useEnzymePrimerDesignSettings({ homology_length: null, minimal_hybridization_length: 14, target_tm: 55 });
 
   return (
     <PrimerDesignProvider designType="restriction_ligation" sequenceIds={sequenceIds} primerDesignSettings={primerDesignSettings} steps={steps}>

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

@@ -12,7 +12,7 @@ function PrimerDesignSimplePair({ pcrSource }) {
     { label: 'Amplified region' },
   ], []);
 
-  const primerDesignSettings = usePrimerDesignSettings({ homology_length: null, minimal_hybridization_length: 20, target_tm: 55 });
+  const primerDesignSettings = usePrimerDesignSettings({ homology_length: null, minimal_hybridization_length: 14, target_tm: 55 });
 
   return (
     <PrimerDesignProvider designType="simple_pair" sequenceIds={sequenceIds} primerDesignSettings={primerDesignSettings} steps={steps}>

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

@@ -6,33 +6,16 @@ import { usePrimerDesign } from './PrimerDesignContext';
 
 function PrimerSpacerForm({ open = true }) {
   const { spacers, setSpacers, circularAssembly, templateSequenceNames, templateSequenceIds } = usePrimerDesign();
-  const [localSpacers, setLocalSpacers] = React.useState(spacers);
-  const timeoutRef = React.useRef();
-
-  // Debounced upstream updates to avoid heavy re-rendering
-  const handleSpacerChange = (index, value) => {
-    setLocalSpacers((current) => current.map((spacer, i) => (i === index ? value : spacer)));
-
-    // Clear any existing timeout
-    clearTimeout(timeoutRef.current);
-
-    // Set new timeout and store its ID in the ref
-    timeoutRef.current = setTimeout(() => {
-      setSpacers((current) => current.map((spacer, i) => (i === index ? value : spacer)));
-    }, 500);
-  };
-
-  React.useEffect(() => {
-    if (!localSpacers.every((spacer, index) => spacer === spacers[index])) {
-      setLocalSpacers(spacers);
-    }
-  }, [spacers]);
 
   const fragmentCount = templateSequenceIds.length;
 
   const sequenceNamesWrapped = [...templateSequenceNames, templateSequenceNames[0]];
   const templateSequenceIdsWrapped = [...templateSequenceIds, templateSequenceIds[0]];
 
+  const handleSpacerChange = (index, value) => {
+    setSpacers((current) => current.map((spacer, i) => (i === index ? value : spacer)));
+  };
+
   const getSequenceName = (seqIndex) => {
     const name = sequenceNamesWrapped[seqIndex];
     const id = templateSequenceIdsWrapped[seqIndex];
@@ -55,7 +38,7 @@ function PrimerSpacerForm({ open = true }) {
     <CollapsableLabel label="Spacer sequences" className="primer-spacer-form" open={open}>
       <Box sx={{ pt: 1, width: '80%', margin: 'auto' }}>
         <Box>
-          {localSpacers.map((spacer, index) => {
+          {spacers.map((spacer, index) => {
             const error = stringIsNotDNA(spacer) ? 'Invalid DNA sequence' : '';
             return (
               <FormControl key={index} fullWidth sx={{ mb: 2 }}>

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

@@ -9,7 +9,7 @@ import { usePrimerDesign } from './PrimerDesignContext';
 import RestrictionSpacerForm from './RestrictionSpacerForm';
 
 function TabPannelSettings() {
-  const { error, templateSequenceIds, designType, selectedTab, sequenceIds, circularAssembly, onCircularAssemblyChange, designPrimers, primers, primerDesignSettings, submissionPreventedMessage } = usePrimerDesign();
+  const { error, templateSequenceIds, designType, selectedTab, sequenceIds, circularAssembly, setCircularAssembly, designPrimers, primers, primerDesignSettings, submissionPreventedMessage } = usePrimerDesign();
   return (
     <TabPanel value={selectedTab} index={sequenceIds.length}>
       <Box sx={{ width: '80%', margin: 'auto' }}>
@@ -32,12 +32,14 @@ function TabPannelSettings() {
               <FormControlLabel
                 control={(
                   <Checkbox
+                    data-test="circular-assembly-checkbox"
+                    disabled={templateSequenceIds.length === 1}
                     checked={circularAssembly}
-                    onChange={onCircularAssemblyChange}
+                    onChange={(e) => setCircularAssembly(e.target.checked)}
                     name="circular-assembly"
                   />
-                    )}
-                label="Circular assembly"
+                )}
+                label={templateSequenceIds.length === 1 ? 'Circular assembly (only one sequence input)' : 'Circular assembly'}
               />
             </FormControl>
           </Box>

package/src/hooks/useStoreEditor.js

@@ -27,6 +27,8 @@ export default function useStoreEditor() {
       const pcrPrimers = getPCRPrimers(cloning, id);
       const alignmentFiles = cloning.files.filter((e) => e.sequence_id === id && e.file_type === 'Sequencing file');
       let { panelsShown } = store.getState().VectorEditor.mainEditor;
+      panelsShown = [[...panelsShown[0].filter((p) => p.id !== 'simpleAlignment')]]
+
       if (alignmentFiles.length > 0) {
         addAlignment(store, {
           id: 'simpleAlignment',
@@ -44,6 +46,7 @@ export default function useStoreEditor() {
               alignmentData: {
                 // the alignmentData just needs the sequence < TODO this has to be changed to be the largest ---
                 sequence: alignmentFiles[0].alignment[0],
+                name: sequenceData.name
               },
             },
             ...await Promise.all(alignmentFiles.map(async (aln) => {
@@ -75,6 +78,7 @@ export default function useStoreEditor() {
                 sequenceData: {...alignmentSequenceData, name: aln.file_name},
                 alignmentData: {
                   sequence: aln.alignment[1],
+                  name: aln.file_name
                 },
                 chromatogramData,
               };

package/src/version.js

@@ -1,2 +1,2 @@
 // Version placeholder - replaced at publish time via prepack script
-export const version = "1.1.2";
+export const version = "1.2.0";