@opencloning/ui 1.4.11 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @opencloning/ui
 
+## 1.5.0
+
+### Minor Changes
+
+- [#648](https://github.com/manulera/OpenCloning_frontend/pull/648) [`800ebcd`](https://github.com/manulera/OpenCloning_frontend/commit/800ebcd4ed610ad89d538e1d59314977aae40583) Thanks [@manulera](https://github.com/manulera)! - Multiple enzymes can be used in the Assembler
+
+### Patch Changes
+
+- Updated dependencies [[`800ebcd`](https://github.com/manulera/OpenCloning_frontend/commit/800ebcd4ed610ad89d538e1d59314977aae40583)]:
+  - @opencloning/utils@1.5.0
+  - @opencloning/store@1.5.0
+
 ## 1.4.11
 
 ### Patch Changes

package/package.json

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

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

@@ -117,7 +117,7 @@ describe('<AssemblerComponent />', () => {
         <AssemblerComponent
           plasmids={mockPlasmids}
           categories={mockCategories}
-          assemblyEnzyme="assembly_enzyme"
+          assemblyEnzymes={['assembly_enzyme']}
           addAlert={addAlertStub}
           appInfo={{}}
         />

package/src/components/assembler/Assembler.jsx

@@ -129,7 +129,7 @@ function AssemblerBox({ item, index, setCategory, setId, categories, plasmids, a
   )
 }
 
-export function AssemblerComponent({ plasmids, categories, assemblyEnzyme, addAlert, appInfo }) {
+export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addAlert, appInfo }) {
 
   const [requestedAssemblies, setRequestedAssemblies] = React.useState([])
   const [errorMessage, setErrorMessage] = React.useState('')
@@ -153,7 +153,7 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzyme, addAl
       const resp = await requestSources(selectedPlasmids)
       errorMessage = 'Error assembling sequences'
       setLoadingMessage('Assembling...')
-      const assemblies = await requestAssemblies(resp, assemblyEnzyme)
+      const assemblies = await requestAssemblies(resp, assemblyEnzymes)
       setRequestedAssemblies(assemblies)
     } catch (e) {
       if (e.assembly) {
@@ -165,7 +165,7 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzyme, addAl
     } finally {
       setLoadingMessage(false)
     }
-  }, [assemblyEnzyme, assembly, plasmids, requestSources, requestAssemblies, clearAssemblySelection])
+  }, [assemblyEnzymes, assembly, plasmids, requestSources, requestAssemblies, clearAssemblySelection])
 
   const onDownloadAssemblies = React.useCallback(async () => {
     try {
@@ -334,7 +334,7 @@ function Assembler() {
         {syntax && <UploadPlasmidsButton addPlasmids={addPlasmids} syntax={syntax} />}
         {syntax && <Button color="error" onClick={clearLoadedPlasmids}>Remove uploaded plasmids</Button>}
       </ButtonGroup>
-      {syntax && <AssemblerComponent plasmids={plasmids} syntax={syntax} categories={categories} assemblyEnzyme={syntax.assemblyEnzyme} addAlert={addAlert} appInfo={appInfo} />}
+      {syntax && <AssemblerComponent plasmids={plasmids} syntax={syntax} categories={categories} assemblyEnzymes={syntax.assemblyEnzymes} addAlert={addAlert} appInfo={appInfo} />}
     </>
   )
 }

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

@@ -1,15 +1,6 @@
 import React from 'react';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 
-// Test config
-const testConfig = {
-  backendUrl: 'http://localhost:8000',
-  showAppBar: false,
-  noExternalRequests: false,
-  enableAssembler: true,
-  enablePlannotate: false,
-};
-
 const mockSyntaxes = [
   {
     path: 'test-syntax-1',
@@ -43,6 +34,7 @@ const mockSyntaxes = [
 const mockSyntaxData = {
   name: 'Test Syntax',
   parts: [],
+  assemblyEnzymes: ['BsmBI'],
 };
 
 const mockPlasmidsData = [
@@ -228,6 +220,7 @@ describe('<ExistingSyntaxDialog />', () => {
         { id: 1, name: 'Part 1' },
         { id: 2, name: 'Part 2' },
       ],
+      assemblyEnzymes: ['BsmBI'],
     };
 
     const tempFile = {

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -4,8 +4,8 @@ import getHttpClient from '@opencloning/utils/getHttpClient';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { readSubmittedTextFile } from '@opencloning/utils/readNwrite';
+import { normalizeSyntaxEnzymes } from '@opencloning/utils/normalizeSyntax';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import { IconButton } from '@mui/material';
 
 const httpClient = getHttpClient();
 const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
@@ -15,7 +15,7 @@ function LocalSyntaxDialog({ onClose, onSyntaxSelect }) {
 
   const onFileSelected = React.useCallback(async (file) => {
     const text = await readSubmittedTextFile(file);
-    const syntaxData = JSON.parse(text);
+    const syntaxData = normalizeSyntaxEnzymes(JSON.parse(text));
     onSyntaxSelect(syntaxData, []);
     onClose();
   }, [onSyntaxSelect, onClose]);
@@ -100,7 +100,7 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect, disp
       const { data: syntaxData } = await httpClient.get(syntaxPath);
       loadingErrorPart = 'plasmids'
       const { data: plasmidsData } = await httpClient.get(plasmidsPath);
-      onSyntaxSelect(syntaxData, plasmidsData);
+      onSyntaxSelect(normalizeSyntaxEnzymes(syntaxData), plasmidsData);
       onClose();
     } catch {
       setLoadError(`Failed to load ${loadingErrorPart} data. Please try again.`);
@@ -114,9 +114,8 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect, disp
 
     try {
       const text = await file.text();
-      const syntaxData = JSON.parse(text);
+      const syntaxData = normalizeSyntaxEnzymes(JSON.parse(text));
 
-      // Uploaded JSON files contain only syntax data, no plasmids
       onSyntaxSelect(syntaxData, []);
       onClose();
     } catch (error) {

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

@@ -3,13 +3,43 @@ import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
 import { localFilesHttpClient } from '@opencloning/ui/hooks/useServerStaticFiles';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import mocloSyntax from '../../../../../cypress/test_files/syntax/moclo_syntax.json';
-import { dummyIndex } from '../form/ServerStaticFileSelect.cy.jsx';
 
 mocloSyntax.overhangNames = {
   ...mocloSyntax.overhangNames,
   CCCT: 'CCCT_overhang',
   AACG: 'AACG_overhang',
 };
+mocloSyntax.assemblyEnzymes = ['BsaI'];
+
+export const dummyIndex = {
+  sequences: [
+    {
+      name: 'Example sequence 1',
+      path: 'example.fa',
+      categories: ['Test category'],
+    },
+    {
+      name: 'Example sequence 2',
+      path: 'example2.gb',
+      categories: ['Test category2'],
+    },
+    {
+      name: 'Example sequence 3',
+      path: 'example3.fa',
+      categories: ['Test category'],
+    },
+  ],
+  syntaxes: [
+    {
+      name: 'Example syntax 1',
+      path: 'example.json',
+    },
+    {
+      name: 'Example syntax 2',
+      path: 'example2.json',
+    },
+  ],
+};
 
 // Test config
 const testConfig = {
@@ -20,7 +50,7 @@ const testConfig = {
   enablePlannotate: false,
 };
 
-describe('<UploadPlasmidsButton />', () => {
+describe.only('<UploadPlasmidsButton />', () => {
   beforeEach(() => {
     cy.window().then((win) => {
       win.localStorage.clear();

package/src/components/assembler/assembler_utils.js

@@ -117,17 +117,28 @@ export function assignSequenceToSyntaxPart(sequenceData, enzymes, graph) {
   // used, which is convenient for classification within the syntax.
   // Instead, forward means whether the recognition site was forward or reverse when producing that cut.
   // see the test called "shows the meaning of forward and reverse" for more details.
-  const simplifiedDigestFragments = getSimplifiedDigestFragments(sequenceData, enzymes);
   const foundParts = [];
-  simplifiedDigestFragments
-    .filter(f => f.left.forward && !f.right.forward && graph.hasNode(f.left.ovhg) && graph.hasNode(f.right.ovhg))
-    .forEach(fragment => {
-      const graphForPaths = isFragmentPalindromic(fragment) ? openCycleAtNode(graph, graph.nodes()[0]) : graph;
-      const paths = allSimplePaths(graphForPaths, fragment.left.ovhg, fragment.right.ovhg);
-      if (paths.length > 0) {
-        foundParts.push({left_overhang: fragment.left.ovhg, right_overhang: fragment.right.ovhg, longestFeature: fragment.longestFeature});
-      }
-    });
+
+  // Enzymes are processed in order, so the first enzyme that finds a part is used.
+  // This is for syntaxes like GoldenBraid, that in the omega 1 assembly uses BsmBI
+  // for the backbone, and BtgZI for the parts.
+  // The order of the enzymes therefore matters, and in that case we put BsmBI first,
+  // because in principle domesticated parts should not have BsmBI recognition sites.
+  for (const enzyme of enzymes) {
+    const simplifiedDigestFragments = getSimplifiedDigestFragments(sequenceData, [enzyme]);
+    simplifiedDigestFragments
+      .filter(f => f.left.forward && !f.right.forward && graph.hasNode(f.left.ovhg) && graph.hasNode(f.right.ovhg))
+      .forEach(fragment => {
+        const graphForPaths = isFragmentPalindromic(fragment) ? openCycleAtNode(graph, graph.nodes()[0]) : graph;
+        const paths = allSimplePaths(graphForPaths, fragment.left.ovhg, fragment.right.ovhg);
+        if (paths.length > 0) {
+          foundParts.push({left_overhang: fragment.left.ovhg, right_overhang: fragment.right.ovhg, longestFeature: fragment.longestFeature});
+        }
+      });
+    if (foundParts.length > 0) {
+      break;
+    }
+  }
   return foundParts;
 }
 

package/src/components/assembler/assembler_utils.test.js

@@ -150,6 +150,35 @@ describe('assignSequenceToSyntaxPart', () => {
     expect(type).toBe('misc_feature');
     expect(name).toBe('feature1');
   });
+
+  it('works with multiple enzymes', () => {
+    const enzymes = [aliasedEnzymesByName["bsmbi"], aliasedEnzymesByName["bsai"]];
+    const parts = [{left_overhang: 'TACT', right_overhang: 'AATG'}, {left_overhang: 'AATG', right_overhang: 'AGGT'}];
+    const graph = partsToEdgesGraph(parts);
+    // Works when both sites are of the same enzyme
+    const sequences = [
+      { sequence: 'AAggtctcaTACTagagtcacacaggactactaAATGagagaccAA', circular: true },
+      { sequence: 'AAcgtctcaTACTagagtcacacaggactactaAATGagagacgAA', circular: true },
+    ];
+    for (const sequenceData of sequences) {
+      const result = assignSequenceToSyntaxPart(sequenceData, enzymes, graph);
+      expect(result).toEqual([{left_overhang: 'TACT', right_overhang: 'AATG', longestFeature: null}]);
+    }
+
+    // Does not work when the sites are of different enzymes
+    const sequenceData2 = { sequence: 'AAcgtctcaTACTagagtcacacaggactactaAATGagagaccAA', circular: true };
+    const result2 = assignSequenceToSyntaxPart(sequenceData2, enzymes, graph);
+    expect(result2).toEqual([]);
+  });
+
+  it('Does not assign a plasmid with a single cut', () => {
+    const parts = [{left_overhang: 'TACT', right_overhang: 'AATG'}, {left_overhang: 'AATG', right_overhang: 'AGGT'}];
+    const graph = partsToEdgesGraph(parts);
+    const enzymes = [aliasedEnzymesByName["bsai"]];
+    const sequenceData = { sequence: 'tgggtctcaTACTagagtc', circular: true };
+    const result = assignSequenceToSyntaxPart(sequenceData, enzymes, graph);
+    expect(result).toEqual([]);
+  })
 });
 
 describe('tripletsToTranslation', () => {

package/src/components/assembler/useAssembler.js

@@ -62,7 +62,7 @@ export const useAssembler = () => {
   }, [ httpClient, backendRoute ])
 
 
-  const requestAssemblies = useCallback(async (requestedSources, enzyme='BsaI') => {
+  const requestAssemblies = useCallback(async (requestedSources, enzymes=['BsaI']) => {
 
     const assemblies = arrayCombinations(requestedSources);
     const output = []
@@ -76,7 +76,7 @@ export const useAssembler = () => {
       const requestData = {
         source: {
           type: 'RestrictionAndLigationSource',
-          restriction_enzymes: [enzyme],
+          restriction_enzymes: enzymes,
           id: assembly.length + 1,
         },
         sequences: assembly.map((p) => p.sequence),

package/src/components/assembler/usePlasmidsLogic.js

@@ -8,11 +8,11 @@ import { aliasedEnzymesByName } from '@teselagen/sequence-utils';
  * Custom hook that manages plasmids state and logic
  * @param {Object} params - Dependencies from FormDataContext
  * @param {Array} params.parts - Array of parts
- * @param {string} params.assemblyEnzyme - Assembly enzyme name
+ * @param {string[]} params.assemblyEnzymes - Assembly enzyme names
  * @param {Object} params.overhangNames - Mapping of overhangs to names
  * @returns {Object} - { linkedPlasmids, setLinkedPlasmids, uploadPlasmids }
  */
-export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
+export function usePlasmidsLogic({ parts, assemblyEnzymes, overhangNames }) {
   const [linkedPlasmids, setLinkedPlasmidsState] = React.useState([]);
 
   const graphForPlasmids = React.useMemo(() => partsToEdgesGraph(parts), [parts]);
@@ -22,7 +22,7 @@ export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
   }, {}), [parts]);
 
   const assignPlasmids = React.useCallback((plasmids) => plasmids.map(plasmid => {
-    const enzymes = [aliasedEnzymesByName[assemblyEnzyme.toLowerCase()]];
+    const enzymes = assemblyEnzymes.map(name => aliasedEnzymesByName[name.toLowerCase()]);
     const correspondingParts = assignSequenceToSyntaxPart(plasmid, enzymes, graphForPlasmids);
     const correspondingPartsStr = correspondingParts.map(part => `${part.left_overhang}-${part.right_overhang}`);
     const correspondingPartsNames = correspondingParts.map(part => {
@@ -44,20 +44,20 @@ export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
         longestFeature: correspondingParts.map(part => part.longestFeature)
       }
     };
-  }), [graphForPlasmids, partDictionary, assemblyEnzyme, overhangNames]);
+  }), [graphForPlasmids, partDictionary, assemblyEnzymes, overhangNames]);
 
   // Wrapper for setLinkedPlasmids that automatically assigns plasmids if enzyme is available
   const setLinkedPlasmids = React.useCallback((plasmids) => {
-    if (assemblyEnzyme && Array.isArray(plasmids) && plasmids.length > 0) {
+    if (assemblyEnzymes.length > 0 && Array.isArray(plasmids) && plasmids.length > 0) {
       setLinkedPlasmidsState(assignPlasmids(plasmids));
     } else {
       setLinkedPlasmidsState(plasmids);
     }
-  }, [assemblyEnzyme, assignPlasmids]);
+  }, [assemblyEnzymes, assignPlasmids]);
 
   // Update existing plasmids when enzyme or assignment logic changes
   React.useEffect(() => {
-    if (assemblyEnzyme) {
+    if (assemblyEnzymes.length > 0) {
       setLinkedPlasmidsState((prevLinkedPlasmids) => {
         if (prevLinkedPlasmids.length > 0) {
           return assignPlasmids(prevLinkedPlasmids);
@@ -65,7 +65,7 @@ export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
         return prevLinkedPlasmids;
       });
     }
-  }, [assignPlasmids, assemblyEnzyme]); // Note: intentionally not including linkedPlasmids to avoid infinite loop
+  }, [assignPlasmids, assemblyEnzymes]); // Note: intentionally not including linkedPlasmids to avoid infinite loop
 
   const uploadPlasmids = React.useCallback(async (files) => {
     const plasmids = await Promise.all(files.map(async (file) => {

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.0";