@opencloning/ui 1.5.5 → 1.5.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @opencloning/ui
 
+## 1.5.6
+
+### Patch Changes
+
+- [#665](https://github.com/manulera/OpenCloning_frontend/pull/665) [`d3477f1`](https://github.com/manulera/OpenCloning_frontend/commit/d3477f1354b92b61cb8f4299b4a9648b67f26ab0) Thanks [@manulera](https://github.com/manulera)! - Add support for user-defined recombinases
+
+- Updated dependencies [[`d3477f1`](https://github.com/manulera/OpenCloning_frontend/commit/d3477f1354b92b61cb8f4299b4a9648b67f26ab0)]:
+  - @opencloning/utils@1.5.6
+  - @opencloning/store@1.5.6
+
 ## 1.5.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -26,8 +26,8 @@
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
     "@mui/x-data-grid": "^8.25.0",
-    "@opencloning/store": "1.5.5",
-    "@opencloning/utils": "1.5.5",
+    "@opencloning/store": "1.5.6",
+    "@opencloning/utils": "1.5.6",
     "@teselagen/bio-parsers": "^0.4.34",
     "@teselagen/ove": "^0.8.34",
     "@teselagen/range-utils": "^0.3.20",

package/src/components/assembler/Assembler.jsx

@@ -416,6 +416,7 @@ function SyntaxOverviewButton({ syntax }) {
       open={open}
       onClose={() => setOpen(false)}
       fullWidth
+      fullScreen
       maxWidth="xl"
       PaperProps={{ sx: { height: '90vh' } }}
     >

package/src/components/sources/FinishedSource.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Alert, Button, Dialog, DialogContent } from '@mui/material';
+import { Alert, Box, Button, Dialog, DialogContent, DialogTitle, Divider, Typography } from '@mui/material';
 import { isEqual } from 'lodash-es';
 import { enzymesInRestrictionEnzymeDigestionSource } from '@opencloning/utils/sourceFunctions';
 import PlannotateAnnotationReport from '../annotation/PlannotateAnnotationReport';
@@ -163,6 +163,50 @@ function GatewayMessage({ source }) {
   return `Gateway ${source.reaction_type} reaction`;
 }
 
+function RecombinaseMessage({ source }) {
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const recombinases = source.recombinases || [];
+  return (
+    <>
+      <Box>
+        Recombinase reaction
+      </Box>
+      <Button onClick={() => setDialogOpen(true)}>
+        See info
+      </Button>
+      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
+        <DialogTitle>Recombinase details</DialogTitle>
+        <DialogContent dividers>
+          {recombinases.map((r, i) => (
+            <Box key={`${r.site1}-${r.site2}-${i}`}>
+              {i > 0 && <Divider sx={{ my: 2 }} />}
+              <Box sx={{ py: 1 }}>
+                {r.name && (
+                  <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
+                    {r.name}
+                  </Typography>
+                )}
+                <Typography variant="body2" component="div" sx={{ fontFamily: 'monospace', fontSize: '0.9em' }}>
+                  <Box component="span" sx={{ color: 'text.secondary', fontFamily: 'inherit', fontWeight: 500 }}>
+                    {r.site1_name || 'site1'}:
+                  </Box>
+                  {' '}{r.site1}
+                </Typography>
+                <Typography variant="body2" component="div" sx={{ fontFamily: 'monospace', fontSize: '0.9em', mt: 0.5 }}>
+                  <Box component="span" sx={{ color: 'text.secondary', fontFamily: 'inherit', fontWeight: 500 }}>
+                    {r.site2_name || 'site2'}:
+                  </Box>
+                  {' '}{r.site2}
+                </Typography>
+              </Box>
+            </Box>
+          ))}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
 function PlannotateAnnotationMessage({ source }) {
   const [dialogOpen, setDialogOpen] = React.useState(false);
   return (
@@ -338,6 +382,7 @@ function FinishedSource({ sourceId }) {
     case 'OverlapExtensionPCRLigationSource': message = 'Overlap extension PCR ligation'; break;
     case 'InFusionSource': message = 'In-Fusion assembly of fragments'; break;
     case 'CreLoxRecombinationSource': message = 'Cre/Lox recombination'; break;
+    case 'RecombinaseSource': message = <RecombinaseMessage source={source} />; break;
     case 'InVivoAssemblySource': message = 'In vivo assembly of fragments'; break;
     case 'RestrictionEnzymeDigestionSource': {
       const uniqueEnzymes = enzymesInRestrictionEnzymeDigestionSource(source);

package/src/components/sources/RecombinaseList.cy.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import RecombinaseList from './RecombinaseList';
+import { clearInputValue, setInputValue } from '../../../../../cypress/e2e/common_functions';
+
+const initialRecombinases = [
+  { site1: 'AAaaTTC', site2: 'CCaaGC', site1_name: 'attB', site2_name: 'attP' },
+];
+
+const twoRecombinases = [
+  ...initialRecombinases,
+  { site1: 'ATGCCCTAAaaCT', site2: 'CAaaTTTTTTTCCCT', site1_name: 'attB', site2_name: 'attP' },
+];
+
+describe('<RecombinaseList />', () => {
+  it('enforces site pattern constraints and does not add invalid sites', () => {
+    const setRecombinasesSpy = cy.spy().as('setRecombinasesSpy');
+    cy.mount(<RecombinaseList recombinases={[]} setRecombinases={setRecombinasesSpy} />);
+
+    // Invalid: all uppercase (no lowercase region)
+    setInputValue('Site 1', 'AAAA', 'body');
+    setInputValue('Site 2', 'CCaaGC', 'body');
+    cy.get('button').contains('Add recombinase').click();
+    cy.get('@setRecombinasesSpy').should('not.have.been.called');
+    cy.contains('Sites must match').should('exist');
+
+    // Invalid: all lowercase
+    setInputValue('Site 1', 'aaaa', 'body');
+    setInputValue('Site 2', 'CCaaGC', 'body');
+    cy.get('button').contains('Add recombinase').click();
+    cy.get('@setRecombinasesSpy').should('not.have.been.called');
+
+    // Invalid: empty site
+    clearInputValue('Site 1', 'body');
+    setInputValue('Site 2', 'CCaaGC', 'body');
+    cy.get('button').contains('Add recombinase').click();
+    cy.get('@setRecombinasesSpy').should('not.have.been.called');
+    cy.contains('Required').should('exist');
+
+    // Valid: add with correct pattern
+    setInputValue('Site 1', 'AAaaTTC', 'body');
+    setInputValue('Site 2', 'CCaaGC', 'body');
+    cy.get('button').contains('Add recombinase').click();
+    cy.get('@setRecombinasesSpy').should('have.been.calledOnce');
+    cy.get('@setRecombinasesSpy').should('have.been.calledWith', [{
+      site1: 'AAaaTTC',
+      site2: 'CCaaGC',
+      site1_name: 'attB',
+      site2_name: 'attP',
+    }]);
+  });
+
+  it('displays initial recombinases and appends when adding (does not overwrite)', () => {
+    const setRecombinasesSpy = cy.spy().as('setRecombinasesSpy');
+    cy.mount(
+      <RecombinaseList recombinases={initialRecombinases} setRecombinases={setRecombinasesSpy} />
+    );
+
+    cy.get('.MuiChip-root').should('have.length', 1);
+    cy.get('.MuiChip-root').contains('AAaaTTC');
+
+    setInputValue('Site 1', 'ATGCCCTAAaaCT', 'body');
+    setInputValue('Site 2', 'CAaaTTTTTTTCCCT', 'body');
+    cy.get('button').contains('Add recombinase').click();
+
+    cy.get('@setRecombinasesSpy').should('have.been.calledWith', [
+      { site1: 'AAaaTTC', site2: 'CCaaGC', site1_name: 'attB', site2_name: 'attP' },
+      { site1: 'ATGCCCTAAaaCT', site2: 'CAaaTTTTTTTCCCT', site1_name: 'attB', site2_name: 'attP' },
+    ]);
+  });
+
+  it('calls setRecombinases with filtered array when deleting a chip', () => {
+    const setRecombinasesSpy = cy.spy().as('setRecombinasesSpy');
+    cy.mount(
+      <RecombinaseList recombinases={twoRecombinases} setRecombinases={setRecombinasesSpy} />
+    );
+
+    cy.get('.MuiChip-root').should('have.length', 2);
+    cy.get('.MuiChip-root').first().find('.MuiChip-deleteIcon').click();
+    cy.get('@setRecombinasesSpy').should('have.been.calledWith', [
+      { site1: 'ATGCCCTAAaaCT', site2: 'CAaaTTTTTTTCCCT', site1_name: 'attB', site2_name: 'attP' },
+    ]);
+  });
+
+  it('includes optional name and custom site names when provided', () => {
+    const setRecombinasesSpy = cy.spy().as('setRecombinasesSpy');
+    cy.mount(<RecombinaseList recombinases={[]} setRecombinases={setRecombinasesSpy} />);
+
+    setInputValue('Name (optional)', 'MyRecombinase', 'body');
+    setInputValue('Site 1', 'AAaaTTC', 'body');
+    setInputValue('Site 1 name', 'loxP', 'body');
+    setInputValue('Site 2', 'CCaaGC', 'body');
+    setInputValue('Site 2 name', 'loxR', 'body');
+    cy.get('button').contains('Add recombinase').click();
+
+    cy.get('@setRecombinasesSpy').should('have.been.calledWith', [{
+      name: 'MyRecombinase',
+      site1: 'AAaaTTC',
+      site2: 'CCaaGC',
+      site1_name: 'loxP',
+      site2_name: 'loxR',
+    }]);
+  });
+});

package/src/components/sources/RecombinaseList.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Box, Button, Chip, FormControl, TextField } from '@mui/material';
+import LabelWithTooltip from '../form/LabelWithTooltip';
+
+const SITE_PATTERN = /^[A-Z]+[a-z]+[A-Z]+$/;
+const DEFAULT_SITE1_NAME = 'attB';
+const DEFAULT_SITE2_NAME = 'attP';
+const SITE_PATTERN_HELP = `
+Sites must match: uppercase-lowercase-uppercase (e.g. AAaaTTC, ATGCCCTAAaaCT).
+Lowercase letters represent the homology region where sequences will be joined,
+so the lowercase parts must match in both sites.
+`;
+
+function RecombinaseList({ recombinases, setRecombinases }) {
+  const [name, setName] = React.useState('');
+  const [site1, setSite1] = React.useState('');
+  const [site2, setSite2] = React.useState('');
+  const [site1Name, setSite1Name] = React.useState(DEFAULT_SITE1_NAME);
+  const [site2Name, setSite2Name] = React.useState(DEFAULT_SITE2_NAME);
+  const [site1Error, setSite1Error] = React.useState('');
+  const [site2Error, setSite2Error] = React.useState('');
+
+  const validateSite = (value) => {
+    if (!value.trim()) return 'Required';
+    if (!SITE_PATTERN.test(value)) return SITE_PATTERN_HELP;
+    return '';
+  };
+
+  const onAdd = () => {
+    const err1 = validateSite(site1);
+    const err2 = validateSite(site2);
+    setSite1Error(err1);
+    setSite2Error(err2);
+    if (err1 || err2) return;
+
+    const rec = {
+      site1: site1.trim(),
+      site2: site2.trim(),
+      site1_name: site1Name.trim() || DEFAULT_SITE1_NAME,
+      site2_name: site2Name.trim() || DEFAULT_SITE2_NAME,
+      ...(name.trim() && { name: name.trim() }),
+    };
+    setRecombinases([...recombinases, rec]);
+    setName('');
+    setSite1('');
+    setSite2('');
+    setSite1Name(DEFAULT_SITE1_NAME);
+    setSite2Name(DEFAULT_SITE2_NAME);
+    setSite1Error('');
+    setSite2Error('');
+  };
+
+  const onRemove = (index) => {
+    setRecombinases(recombinases.filter((_, i) => i !== index));
+  };
+
+  return (
+    <>
+      <FormControl fullWidth sx={{ mt: 1 }}>
+        <LabelWithTooltip
+          label="Recombinase recognition sites"
+          tooltip={SITE_PATTERN_HELP}
+        />
+      </FormControl>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 1 }}>
+        <TextField
+          fullWidth
+          label="Name (optional)"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          size="small"
+        />
+        <TextField
+          label="Site 1"
+          fullWidth
+          value={site1}
+          onChange={(e) => { setSite1(e.target.value); setSite1Error(''); }}
+          error={Boolean(site1Error)}
+          helperText={site1Error}
+          size="small"
+          placeholder="e.g. AAaaTTC"
+          sx={{ '& input': { fontFamily: 'monospace' } }}
+        />
+        <TextField
+          label="Site 1 name"
+          fullWidth
+          value={site1Name}
+          onChange={(e) => setSite1Name(e.target.value)}
+          size="small"
+          placeholder={DEFAULT_SITE1_NAME}
+        />
+        <TextField
+          label="Site 2"
+          fullWidth
+          value={site2}
+          onChange={(e) => { setSite2(e.target.value); setSite2Error(''); }}
+          error={Boolean(site2Error)}
+          helperText={site2Error}
+          size="small"
+          placeholder="e.g. CCaaGC"
+          sx={{ '& input': { fontFamily: 'monospace' } }}
+        />
+        <TextField
+          label="Site 2 name"
+          fullWidth
+          value={site2Name}
+          onChange={(e) => setSite2Name(e.target.value)}
+          size="small"
+          placeholder={DEFAULT_SITE2_NAME}
+        />
+        <Button variant="outlined" onClick={onAdd} size="small" sx={{ alignSelf: 'flex-start' }}>
+            Add recombinase
+        </Button>
+      </Box>
+      {recombinases.length > 0 && (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 1 }}>
+          {recombinases.map((rec, i) => (
+            <Chip
+              key={`${rec.site1}-${rec.site2}-${i}`}
+              label={rec.name || `${rec.site1} / ${rec.site2}`}
+              onDelete={() => onRemove(i)}
+              size="small"
+            />
+          ))}
+        </Box>
+      )}
+    </>
+  );
+}
+
+export default React.memo(RecombinaseList);

package/src/components/sources/Source.jsx

@@ -80,6 +80,8 @@ function Source({ sourceId }) {
       specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
     case 'CreLoxRecombinationSource':
       specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'RecombinaseSource':
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
     case 'HomologousRecombinationSource':
       specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendPostRequest }} />; break;
     case 'PCRSource':

package/src/components/sources/SourceAssembly.jsx

@@ -8,6 +8,7 @@ import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions';
 import { cloningActions } from '@opencloning/store/cloning';
 import LabelWithTooltip from '../form/LabelWithTooltip';
+import RecombinaseList from './RecombinaseList';
 
 const helpSingleSite = 'Even if input sequences contain multiple att sites '
   + '(typically 2), a product could be generated where only one site recombines. '
@@ -25,6 +26,8 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
   const [bluntLigation, setBluntLigation] = React.useState(false);
   const [gatewaySettings, setGatewaySettings] = React.useState({ greedy: false, reactionType: null, onlyMultiSite: true });
   const [enzymes, setEnzymes] = React.useState([]);
+  const [recombinases, setRecombinases] = React.useState([]);
+  const [reverseRecombinase, setReverseRecombinase] = React.useState(false);
 
   const dispatch = useDispatch();
 
@@ -45,6 +48,7 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
   const preventSubmit = (
     (assemblyType === 'RestrictionAndLigationSource' && enzymes.length === 0)
     || (assemblyType === 'GatewaySource' && gatewaySettings.reactionType === null)
+    || (assemblyType === 'RecombinaseSource' && recombinases.length === 0)
     || inputContainsTemplates
   );
 
@@ -90,6 +94,11 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
       sendPostRequest({ endpoint: 'gateway', requestData, config, source });
     } else if (assemblyType === 'CreLoxRecombinationSource') {
       sendPostRequest({ endpoint: 'cre_lox_recombination', requestData, source });
+    } else if (assemblyType === 'RecombinaseSource') {
+      if (recombinases.length === 0) { return; }
+      requestData.source.recombinases = recombinases;
+      const config = { params: { reverse_recombinase: reverseRecombinase } };
+      sendPostRequest({ endpoint: 'recombinase', requestData, config, source });
     } else {
       const config = { params: {
         allow_partial_overlap: allowPartialOverlap,
@@ -120,22 +129,38 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
         </FormControl>
         { ['GibsonAssemblySource', 'OverlapExtensionPCRLigationSource', 'InFusionSource', 'InVivoAssemblySource'].includes(assemblyType) && (
         // I don't really understand why fullWidth is required here
-        <FormControl fullWidth>
-          <TextField
-            label="Minimal homology length"
-            value={minimalHomology}
-            onChange={(e) => { setMinimalHomology(e.target.value); }}
-            type="number"
-            defaultValue={20}
-            InputProps={{
-              endAdornment: <InputAdornment position="end">bp</InputAdornment>,
-              sx: { '& input': { textAlign: 'center' } },
-            }}
-          />
-        </FormControl>
+          <FormControl fullWidth>
+            <TextField
+              label="Minimal homology length"
+              value={minimalHomology}
+              onChange={(e) => { setMinimalHomology(e.target.value); }}
+              type="number"
+              defaultValue={20}
+              InputProps={{
+                endAdornment: <InputAdornment position="end">bp</InputAdornment>,
+                sx: { '& input': { textAlign: 'center' } },
+              }}
+            />
+          </FormControl>
         )}
         { (assemblyType === 'RestrictionAndLigationSource') && (
-        <EnzymeMultiSelect setEnzymes={setEnzymes} />
+          <EnzymeMultiSelect setEnzymes={setEnzymes} />
+        )}
+        { (assemblyType === 'RecombinaseSource') && (
+          <>
+            <RecombinaseList recombinases={recombinases} setRecombinases={setRecombinases} />
+            <FormControl fullWidth style={{ textAlign: 'left' }}>
+              <FormControlLabel
+                control={<Checkbox checked={reverseRecombinase} onChange={() => setReverseRecombinase(!reverseRecombinase)} />}
+                label={(
+                  <LabelWithTooltip
+                    label="Reverse reaction"
+                    tooltip="Include the reverse reaction of each recombinase (e.g. excision in addition to integration)"
+                  />
+                )}
+              />
+            </FormControl>
+          </>
         )}
         { (assemblyType === 'GatewaySource') && (
           <>
@@ -181,9 +206,9 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
           </FormControl>
         )}
         { (assemblyType === 'LigationSource') && (
-        <FormControl fullWidth style={{ textAlign: 'left' }}>
-          <FormControlLabel control={<Checkbox checked={bluntLigation} onChange={flipBluntLigation} />} label="Blunt ligation" />
-        </FormControl>
+          <FormControl fullWidth style={{ textAlign: 'left' }}>
+            <FormControlLabel control={<Checkbox checked={bluntLigation} onChange={flipBluntLigation} />} label="Blunt ligation" />
+          </FormControl>
         )}
 
         {!preventSubmit && (

package/src/components/sources/SourceTypeSelector.jsx

@@ -64,6 +64,7 @@ function SourceTypeSelector({ source }) {
     options.push(<MenuItem key="InVivoAssemblySource" value="InVivoAssemblySource">In vivo assembly</MenuItem>);
     options.push(<MenuItem key="GatewaySource" value="GatewaySource">Gateway</MenuItem>);
     options.push(<MenuItem key="CreLoxRecombinationSource" value="CreLoxRecombinationSource">Cre/Lox recombination</MenuItem>);
+    options.push(<MenuItem key="RecombinaseSource" value="RecombinaseSource">Recombinase</MenuItem>);
   }
 
   // Sort options by text content

package/src/version.js

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