@opencloning/ui 1.4.11 → 1.5.1

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

@@ -1,27 +1,27 @@
 import { Button, Checkbox, FormControl, FormControlLabel } from '@mui/material';
 import React from 'react';
-import { batch, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import SingleInputSelector from '../../../sources/SingleInputSelector';
 import { cloningActions } from '@opencloning/store/cloning';
-import useStoreEditor from '../../../../hooks/useStoreEditor';
 import LabelWithTooltip from '../../../form/LabelWithTooltip';
 import useGatewaySites from '../../../../hooks/useGatewaySites';
 import NoAttPSitesError from '../common/NoAttPSitesError';
 import RetryAlert from '../../../form/RetryAlert';
 import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+import useNavigateAfterPrimerDesign from './useNavigateAfterPrimerDesign';
 
-const { addTemplateChildAndSubsequentSource, setCurrentTab, setMainSequenceId } = cloningActions;
+const { addTemplateChildAndSubsequentSource } = cloningActions;
 
 function PrimerDesignGatewayBP({ source }) {
   const [target, setTarget] = React.useState('');
   const [greedy, setGreedy] = React.useState(false);
+  const dispatch = useDispatch();
+  const inputSequenceId = getPcrTemplateSequenceId(source);
+  const navigateAfterDesign = useNavigateAfterPrimerDesign();
 
-  const { updateStoreEditor } = useStoreEditor();
   const { requestStatus, sites: sitesInTarget, attemptAgain } = useGatewaySites({ target, greedy });
   const nbOfAttPSites = sitesInTarget.filter((site) => site.siteName.startsWith('attP')).length;
-  const inputSequenceId = getPcrTemplateSequenceId(source);
 
-  const dispatch = useDispatch();
   const onSubmit = (event) => {
     event.preventDefault();
     const newSource = {
@@ -36,20 +36,14 @@ function PrimerDesignGatewayBP({ source }) {
       circular: false,
     };
 
-    batch(() => {
-      dispatch(addTemplateChildAndSubsequentSource({ newSource, newSequence, sourceId: source.id }));
-      dispatch(setMainSequenceId(inputSequenceId));
-      updateStoreEditor('mainEditor', inputSequenceId);
-      dispatch(setCurrentTab(3));
-      // Scroll to the top of the page after 300ms
-      setTimeout(() => {
-        document.querySelector('.tab-panels-container')?.scrollTo({ top: 0, behavior: 'instant' });
-      }, 300);
-    });
+    navigateAfterDesign(
+      () => dispatch(addTemplateChildAndSubsequentSource({ newSource, newSequence, sourceId: source.id })),
+      inputSequenceId,
+    );
   };
+
   return (
     <form onSubmit={onSubmit}>
-
       <FormControl fullWidth>
         <SingleInputSelector
           label="Donor vector"

package/src/components/primers/primer_design/SourceComponents/PrimerDesignGibsonAssembly.cy.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { GibsonAmplifyAndCircularControls } from './PrimerDesignGibsonAssembly';
+
+const baseTargets = [1, 2, 3];
+const baseSequenceNames = [
+  { id: 1, name: 'seq1' },
+  { id: 2, name: 'seq2' },
+  { id: 3, name: 'seq3' },
+];
+
+function TestComponent() {
+  const [circularAssembly, setCircularAssembly] = React.useState(false);
+  const [amplified, setAmplified] = React.useState([false, true, false]);
+  return <GibsonAmplifyAndCircularControls
+    targets={baseTargets}
+    sequenceNames={baseSequenceNames}
+    amplified={amplified}
+    setAmplified={setAmplified}
+    circularAssembly={circularAssembly}
+    setCircularAssembly={setCircularAssembly}
+  />;
+}
+
+describe('<GibsonAmplifyAndCircularControls />', () => {
+
+  it('disables turning off a fragment when it would create two adjacent unamplified fragments in linear assemblies', () => {
+    cy.mount(
+      <GibsonAmplifyAndCircularControls
+        targets={baseTargets}
+        sequenceNames={baseSequenceNames}
+        amplified={[true, false, false]}
+        setAmplified={() => {}}
+        circularAssembly={false}
+        setCircularAssembly={() => {}}
+      />,
+    );
+
+
+    // First checkbox corresponds to Seq. 1
+    cy.get('input[type="checkbox"]').eq(0).should('be.disabled');
+  });
+
+  it('enforces circular adjacency rule when circularAssembly is true', () => {
+    // Configuration where turning off the last fragment is allowed
+    cy.mount(
+      <GibsonAmplifyAndCircularControls
+        targets={baseTargets}
+        sequenceNames={baseSequenceNames}
+        amplified={[false, true, true]}
+        setAmplified={() => {}}
+        circularAssembly
+        setCircularAssembly={() => {}}
+      />,
+    );
+
+    // Third checkbox corresponds to Seq. 3
+    cy.get('input[type="checkbox"]').eq(1).should('be.disabled');
+    cy.get('input[type="checkbox"]').eq(2).should('be.disabled');
+
+    // Configuration where turning off the last fragment would leave both ends unamplified
+    cy.mount(
+      <GibsonAmplifyAndCircularControls
+        targets={baseTargets}
+        sequenceNames={baseSequenceNames}
+        amplified={[false, true, false]}
+        setAmplified={() => {}}
+        circularAssembly
+        setCircularAssembly={() => {}}
+      />,
+    );
+
+    cy.get('input[type="checkbox"]').eq(1).should('be.disabled');
+
+  });
+
+  it('enforces linear rules when circularAssembly is false', () => {
+    cy.mount(
+      <GibsonAmplifyAndCircularControls
+        targets={baseTargets}
+        sequenceNames={baseSequenceNames}
+        amplified={[false, true, true]}
+        setAmplified={() => {}}
+        circularAssembly={false}
+        setCircularAssembly={() => {}}
+      />,
+    );
+    cy.get('input[type="checkbox"]').eq(1).should('be.disabled');
+    cy.get('input[type="checkbox"]').eq(2).should('not.be.disabled');
+
+    cy.mount(
+      <GibsonAmplifyAndCircularControls
+        targets={baseTargets}
+        sequenceNames={baseSequenceNames}
+        amplified={[true, true, false]}
+        setAmplified={() => {}}
+        circularAssembly={false}
+        setCircularAssembly={() => {}}
+      />,
+    );
+    cy.get('input[type="checkbox"]').eq(0).should('not.be.disabled');
+    cy.get('input[type="checkbox"]').eq(1).should('be.disabled');
+  });
+
+  it('disables circular assembly checkbox when there is only one target', () => {
+    cy.mount(
+      <GibsonAmplifyAndCircularControls
+        targets={[1]}
+        sequenceNames={[{ id: 1, name: 'single' }]}
+        amplified={[true]}
+        setAmplified={() => {}}
+        circularAssembly
+        setCircularAssembly={() => {}}
+      />,
+    );
+
+    cy.get('input[type="checkbox"]').eq(1).should('not.exist');
+    cy.get('input[name="circular-assembly"]').should('be.disabled').and('be.checked');
+  });
+
+  it('calls setAmplified with all true values when targets changeor circularAssembly changes', () => {
+    cy.mount(<TestComponent />);
+
+    cy.get('input[type="checkbox"]').eq(0).should('not.be.checked');
+    cy.get('input[type="checkbox"]').eq(2).should('not.be.checked');
+    cy.get('input[type="checkbox"]').last().click();
+    cy.get('input[type="checkbox"]').eq(0).should('be.checked');
+    cy.get('input[type="checkbox"]').eq(1).should('be.checked');
+    cy.get('input[type="checkbox"]').eq(2).should('be.checked');
+
+  })
+});

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

@@ -1,27 +1,137 @@
-import { Button, FormControl } from '@mui/material';
+import { Box, Button, Checkbox, FormControl, FormControlLabel, Tooltip, Typography } from '@mui/material';
+import { Info as InfoIcon } from '@mui/icons-material';
 import React from 'react';
-import { batch, useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { isEqual } from 'lodash-es';
 import MultipleInputsSelector from '../../../sources/MultipleInputsSelector';
 import { cloningActions } from '@opencloning/store/cloning';
-import useStoreEditor from '../../../../hooks/useStoreEditor';
 import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+import useNavigateAfterPrimerDesign from './useNavigateAfterPrimerDesign';
+import { getSequenceLabel } from '../SequenceTabComponents/utils/getSequenceLabel';
+
+const { addPCRsAndSubsequentSourcesForAssembly } = cloningActions;
+
+function AmplifySectionTitle() {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5, mb: 0.5, alignSelf: 'stretch' }}>
+      <Typography variant="caption" sx={{ fontSize: '1rem', color: 'text.secondary' }}>
+        Amplify
+      </Typography>
+      <Tooltip
+        arrow
+        placement="top"
+        title="Checked sequences will be amplified by PCR with designed primers. Unchecked sequences are used directly in the assembly without amplification."
+      >
+        <InfoIcon sx={{ fontSize: '1rem', color: 'text.secondary' }} />
+      </Tooltip>
+    </Box>
+  );
+}
+
+export function GibsonAmplifyAndCircularControls({
+  targets,
+  sequenceNames,
+  amplified,
+  setAmplified,
+  circularAssembly,
+  setCircularAssembly,
+}) {
+  const isValidAmplifiedConfig = (config) => {
+    for (let i = 0; i < config.length - 1; i += 1) {
+      if (!config[i] && !config[i + 1]) return false;
+    }
+    if (circularAssembly && config.length > 1 && !config[0] && !config[config.length - 1]) return false;
+    return true;
+  };
+
+  const canToggleOff = (index) => {
+    if (!amplified[index]) return true;
+    const next = [...amplified];
+    next[index] = false;
+    return isValidAmplifiedConfig(next);
+  };
+
+  const handleAmplifiedToggle = (index) => {
+    setAmplified((prev) => {
+      const next = [...prev];
+      next[index] = !next[index];
+      return next;
+    });
+  };
+
+  React.useEffect(() => {
+    setAmplified(Array(targets.length).fill(true));
+  }, [targets, circularAssembly]);
+
+  return (
+    <>
+      {targets.length > 1 && (
+        <Box data-testid="amplify-section" sx={{ mt: 1, display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+          <AmplifySectionTitle />
+          {targets.map((id, index) => {
+            const name = sequenceNames.find((s) => s.id === id)?.name || 'template';
+            const label = getSequenceLabel(id, name);
+            return (
+              <FormControl data-testid={`amplify-section-${index}`} key={id} sx={{ alignItems: 'flex-start', mb: 0.5 }}>
+                <FormControlLabel
+                  control={(
+                    <Checkbox
+                      checked={amplified[index]}
+                      onChange={() => handleAmplifiedToggle(index)}
+                      disabled={amplified[index] && !canToggleOff(index)}
+                      size="small"
+                    />
+                  )}
+                  label={(
+                    <Typography variant="body2" noWrap sx={{ minWidth: 0 }}>
+                      {label}
+                    </Typography>
+                  )}
+                  sx={{ mr: 0 }}
+                />
+              </FormControl>
+            );
+          })}
+        </Box>
+      )}
+
+      <FormControl>
+        <FormControlLabel
+          control={(
+            <Checkbox
+              data-test="circular-assembly-checkbox"
+              disabled={targets.length === 1}
+              checked={circularAssembly}
+              onChange={(e) => setCircularAssembly(e.target.checked)}
+              name="circular-assembly"
+            />
+          )}
+          label={targets.length === 1 ? 'Circular assembly (only one sequence input)' : 'Circular assembly'}
+        />
+      </FormControl>
+    </>
+  );
+}
 
 function PrimerDesignGibsonAssembly({ source, assemblyType }) {
   const [targets, setTargets] = React.useState(source.input.map(({ sequence }) => sequence));
+  const [amplified, setAmplified] = React.useState(() => source.input.map(() => true));
+  const [circularAssembly, setCircularAssembly] = React.useState(true);
   const inputSequenceId = getPcrTemplateSequenceId(source);
+  const dispatch = useDispatch();
+  const navigateAfterDesign = useNavigateAfterPrimerDesign();
+
+  const sequenceNames = useSelector(
+    ({ cloning }) => targets.map((id) => ({ id, name: cloning.teselaJsonCache[id]?.name || 'template' })),
+    isEqual,
+  );
 
   const onInputChange = (newInputSequenceIds) => {
-    // Prevent unsetting the input of the source
-    if (!newInputSequenceIds.includes(inputSequenceId)) {
-      setTargets( (prev) => [...prev, ...newInputSequenceIds]);
-    } else {
-      setTargets(newInputSequenceIds);
-    }
+    const newValue = newInputSequenceIds.includes(inputSequenceId) ? newInputSequenceIds : [...newInputSequenceIds, inputSequenceId];
+    setTargets(newValue);
+    setAmplified(Array(newValue.length).fill(true));
   };
 
-  const { updateStoreEditor } = useStoreEditor();
-  const { addPCRsAndSubsequentSourcesForAssembly, setCurrentTab, setMainSequenceId } = cloningActions;
-  const dispatch = useDispatch();
   const onSubmit = (event) => {
     event.preventDefault();
     const newSequence = {
@@ -30,18 +140,18 @@ function PrimerDesignGibsonAssembly({ source, assemblyType }) {
       circular: false,
     };
 
-    batch(() => {
-    // Slice from the second on
-      const newPCRTemplates = targets.slice(1);
-      dispatch(addPCRsAndSubsequentSourcesForAssembly({ sourceId: source.id, newSequence, templateIds: newPCRTemplates, sourceType: assemblyType }));
-      dispatch(setMainSequenceId(inputSequenceId));
-      updateStoreEditor('mainEditor', inputSequenceId);
-      dispatch(setCurrentTab(3));
-      // Scroll to the top of the page after 300ms
-      setTimeout(() => {
-        document.querySelector('.tab-panels-container')?.scrollTo({ top: 0, behavior: 'instant' });
-      }, 300);
-    });
+    const firstAmplifiedId = targets.find((_, i) => amplified[i]) ?? inputSequenceId;
+    navigateAfterDesign(
+      () => dispatch(addPCRsAndSubsequentSourcesForAssembly({
+        sourceId: source.id,
+        newSequence,
+        templateIds: targets,
+        sourceType: assemblyType,
+        amplified,
+        circularAssembly,
+      })),
+      firstAmplifiedId,
+    );
   };
 
   return (
@@ -54,6 +164,15 @@ function PrimerDesignGibsonAssembly({ source, assemblyType }) {
         />
       </FormControl>
 
+      <GibsonAmplifyAndCircularControls
+        targets={targets}
+        sequenceNames={sequenceNames}
+        amplified={amplified}
+        setAmplified={setAmplified}
+        circularAssembly={circularAssembly}
+        setCircularAssembly={setCircularAssembly}
+      />
+
       <Button type="submit" variant="contained" color="success">
         Design primers
       </Button>

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

@@ -1,18 +1,19 @@
 import { Alert, Button, FormControl } from '@mui/material';
 import React from 'react';
-import { batch, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import SingleInputSelector from '../../../sources/SingleInputSelector';
 import { cloningActions } from '@opencloning/store/cloning';
-import useStoreEditor from '../../../../hooks/useStoreEditor';
 import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+import useNavigateAfterPrimerDesign from './useNavigateAfterPrimerDesign';
+
+const { addTemplateChildAndSubsequentSource } = cloningActions;
 
 function PrimerDesignHomologousRecombination({ source, primerDesignType }) {
   const [target, setTarget] = React.useState('');
-
-  const { updateStoreEditor } = useStoreEditor();
-  const { addTemplateChildAndSubsequentSource, setCurrentTab, setMainSequenceId } = cloningActions;
   const dispatch = useDispatch();
   const inputSequenceId = getPcrTemplateSequenceId(source);
+  const navigateAfterDesign = useNavigateAfterPrimerDesign();
+
   const onSubmit = (event) => {
     event.preventDefault();
     const newSource = {
@@ -25,17 +26,12 @@ function PrimerDesignHomologousRecombination({ source, primerDesignType }) {
       circular: false,
     };
 
-    batch(() => {
-      dispatch(addTemplateChildAndSubsequentSource({ newSource, newSequence, sourceId: source.id }));
-      dispatch(setMainSequenceId(inputSequenceId));
-      updateStoreEditor('mainEditor', inputSequenceId);
-      dispatch(setCurrentTab(3));
-      // Scroll to the top of the page after 300ms
-      setTimeout(() => {
-        document.querySelector('.tab-panels-container')?.scrollTo({ top: 0, behavior: 'instant' });
-      }, 300);
-    });
+    navigateAfterDesign(
+      () => dispatch(addTemplateChildAndSubsequentSource({ newSource, newSequence, sourceId: source.id })),
+      inputSequenceId,
+    );
   };
+
   return (
     <form onSubmit={onSubmit}>
       <Alert severity="info" icon={false} sx={{ textAlign: 'left' }}>

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

@@ -1,22 +1,22 @@
 import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
 import React from 'react';
-
-import { batch, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import PrimerDesignHomologousRecombination from './PrimerDesignHomologousRecombination';
 import PrimerDesignGibsonAssembly from './PrimerDesignGibsonAssembly';
 import { cloningActions } from '@opencloning/store/cloning';
-import useStoreEditor from '../../../../hooks/useStoreEditor';
 import PrimerDesignGatewayBP from './PrimerDesignGatewayBP';
 import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+import useNavigateAfterPrimerDesign from './useNavigateAfterPrimerDesign';
+
+const { addPCRsAndSubsequentSourcesForAssembly } = cloningActions;
 
 function PrimerDesignSourceForm({ source }) {
   const [primerDesignType, setPrimerDesignType] = React.useState('');
-  const { updateStoreEditor } = useStoreEditor();
-  const { addPCRsAndSubsequentSourcesForAssembly, setMainSequenceId, setCurrentTab } = cloningActions;
   const dispatch = useDispatch();
   const inputSequenceId = getPcrTemplateSequenceId(source);
+  const navigateAfterDesign = useNavigateAfterPrimerDesign();
+
   React.useEffect(() => {
-    // Here the user does not have to select anything else
     if (primerDesignType === 'restriction_ligation' || primerDesignType === 'simple_pair') {
       const newSequence = {
         type: 'TemplateSequence',
@@ -24,16 +24,10 @@ function PrimerDesignSourceForm({ source }) {
         circular: false,
       };
 
-      batch(() => {
-        dispatch(addPCRsAndSubsequentSourcesForAssembly({ sourceId: source.id, newSequence, templateIds: [], sourceType: null }));
-        dispatch(setMainSequenceId(inputSequenceId));
-        updateStoreEditor('mainEditor', inputSequenceId);
-        dispatch(setCurrentTab(3));
-        // Scroll to the top of the page after 300ms
-        setTimeout(() => {
-          document.querySelector('.tab-panels-container')?.scrollTo({ top: 0, behavior: 'instant' });
-        }, 300);
-      });
+      navigateAfterDesign(
+        () => dispatch(addPCRsAndSubsequentSourcesForAssembly({ sourceId: source.id, newSequence, templateIds: [inputSequenceId], sourceType: null })),
+        inputSequenceId,
+      );
     }
   }, [primerDesignType]);
 

package/src/components/primers/primer_design/SourceComponents/useNavigateAfterPrimerDesign.js

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { batch, useDispatch } from 'react-redux';
+import { cloningActions } from '@opencloning/store/cloning';
+import useStoreEditor from '../../../../hooks/useStoreEditor';
+
+const { setMainSequenceId, setCurrentTab } = cloningActions;
+
+export default function useNavigateAfterPrimerDesign() {
+  const dispatch = useDispatch();
+  const { updateStoreEditor } = useStoreEditor();
+
+  return useCallback((primaryAction, inputSequenceId) => {
+    batch(() => {
+      primaryAction();
+      dispatch(setMainSequenceId(inputSequenceId));
+      updateStoreEditor('mainEditor', inputSequenceId);
+      dispatch(setCurrentTab(3));
+      setTimeout(() => {
+        document.querySelector('.tab-panels-container')?.scrollTo({ top: 0, behavior: 'instant' });
+      }, 300);
+    });
+  }, [dispatch, updateStoreEditor]);
+}

package/src/version.js

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