@opencloning/ui 1.3.1 → 1.3.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @opencloning/ui
 
+## 1.3.3
+
+### Patch Changes
+
+- [#607](https://github.com/manulera/OpenCloning_frontend/pull/607) [`1e4bfbf`](https://github.com/manulera/OpenCloning_frontend/commit/1e4bfbfb805e841d9a91cf650ebf632ac62b1248) Thanks [@manulera](https://github.com/manulera)! - Syntax validation and fix longestFeature when it's empty
+
+- Updated dependencies []:
+  - @opencloning/store@1.3.3
+  - @opencloning/utils@1.3.3
+
+## 1.3.2
+
+### Patch Changes
+
+- [#605](https://github.com/manulera/OpenCloning_frontend/pull/605) [`ff60c18`](https://github.com/manulera/OpenCloning_frontend/commit/ff60c18c1500e8b9046f0810cbd69fe1a65c550c) Thanks [@manulera](https://github.com/manulera)! - Fix how syntaxes are imported to adapt to syntaxes repository change
+
+- Updated dependencies []:
+  - @opencloning/store@1.3.2
+  - @opencloning/utils@1.3.2
+
 ## 1.3.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "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.3.1",
-    "@opencloning/utils": "1.3.1",
+    "@opencloning/store": "1.3.3",
+    "@opencloning/utils": "1.3.3",
     "@teselagen/bio-parsers": "^0.4.32",
     "@teselagen/ove": "^0.8.30",
     "@teselagen/range-utils": "^0.3.13",

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

@@ -253,7 +253,10 @@ describe('<UploadPlasmidsButton />', () => {
       'cypress/test_files/syntax/pYTK002.gb',
       'cypress/test_files/syntax/moclo_ytk_multi_part.gb',
       'cypress/test_files/syntax/pYTK095.gb',
-      'cypress/test_files/sequencing/locus.gb'],
+      'cypress/test_files/sequencing/locus.gb',
+      // This one just to verify that it works with no features
+      'cypress/test_files/syntax/pYTK002_no_features.gb'
+    ],
     { force: true });
 
     // Wait for the dialog to appear (indicating plasmids were processed)
@@ -287,6 +290,9 @@ describe('<UploadPlasmidsButton />', () => {
     cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(3).should('contain', 'Spans multiple parts')
     cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(4).should('contain', 'AmpR')
 
+    // No features
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(3).find('td').eq(4).should('contain', '-');
+
     // Click the import button
     cy.contains('button', 'Import valid plasmids').click();
 
@@ -298,7 +304,7 @@ describe('<UploadPlasmidsButton />', () => {
       const firstCall = spy.getCall(0);
       console.log('firstCall', firstCall.args);
       cy.wrap(firstCall.args[0]).should('be.an', 'array');
-      cy.wrap(firstCall.args[0]).should('have.length', 2);
+      cy.wrap(firstCall.args[0]).should('have.length', 3);
 
       const firstPlasmid = firstCall.args[0][0];
       

package/src/components/assembler/Assembler.jsx

@@ -16,6 +16,9 @@ import PlasmidSyntaxTable from './PlasmidSyntaxTable';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 import error2String from '@opencloning/utils/error2String';
 import { categoryFilter } from './assembler_utils';
+import useBackendRoute from '../../hooks/useBackendRoute';
+import useHttpClient from '../../hooks/useHttpClient';
+import useAlerts from '../../hooks/useAlerts';
 
 const { setState: setCloningState, setCurrentTab: setCurrentTabAction } = cloningActions;
 
@@ -261,10 +264,22 @@ function categoriesFromSyntaxAndPlasmids(syntax, plasmids) {
 
 function LoadSyntaxButton({ setSyntax, addPlasmids }) {
   const [existingSyntaxDialogOpen, setExistingSyntaxDialogOpen] = React.useState(false)
-  const onSyntaxSelect = React.useCallback((syntax, plasmids) => {
-    setSyntax(syntax)
-    addPlasmids(plasmids.filter((plasmid) => plasmid.appData.correspondingParts.length === 1).map(formatPlasmid))
-  }, [setSyntax, addPlasmids])
+  const httpClient = useHttpClient();
+  const backendRoute = useBackendRoute();
+  const { addAlert } = useAlerts();
+  const onSyntaxSelect = React.useCallback(async (syntax, plasmids) => {
+    const url = backendRoute('validate_syntax');
+    try {
+      await httpClient.post(url, syntax);
+      setSyntax(syntax)
+      addPlasmids(plasmids)
+    } catch (error) {
+      addAlert({
+        message: error2String(error),
+        severity: 'error',
+      });
+    }
+  }, [setSyntax, addPlasmids, httpClient, backendRoute, addAlert])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>
     {existingSyntaxDialogOpen && <ExistingSyntaxDialog onClose={() => setExistingSyntaxDialogOpen(false)} onSyntaxSelect={onSyntaxSelect}/>}

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

@@ -204,8 +204,12 @@ describe('<ExistingSyntaxDialog />', () => {
       ],
     };
 
-    // Create a temporary JSON file
-    cy.writeFile('cypress/temp/syntax.json', uploadedSyntaxData);
+    const tempFile = {
+      contents: Cypress.Buffer.from(JSON.stringify(uploadedSyntaxData)),
+      fileName: 'syntax.json',
+      mimeType: 'text/plain',
+      lastModified: Date.now(),
+    }
 
     cy.mount(
       <ExistingSyntaxDialog
@@ -218,7 +222,7 @@ describe('<ExistingSyntaxDialog />', () => {
     cy.contains('Upload syntax from JSON file').should('exist');
 
     // Upload the JSON file
-    cy.get('input[type="file"]').selectFile('cypress/temp/syntax.json', { force: true });
+    cy.get('input[type="file"]').selectFile(tempFile, { force: true });
 
     cy.get('@onSyntaxSelectSpy').should('have.been.calledWith', uploadedSyntaxData, []);
     cy.get('@onCloseSpy').should('have.been.called');
@@ -228,8 +232,12 @@ describe('<ExistingSyntaxDialog />', () => {
     const onCloseSpy = cy.spy().as('onCloseSpy');
     const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
 
-    // Create a file with invalid JSON
-    cy.writeFile('cypress/temp/invalid.json', '{ invalid json }', { encoding: 'utf8' });
+    const invalidFile = {
+      contents: Cypress.Buffer.from('{ invalid json }'),
+      fileName: 'invalid.json',
+      mimeType: 'text/plain',
+      lastModified: Date.now(),
+    }
 
     cy.mount(
       <ExistingSyntaxDialog
@@ -242,7 +250,7 @@ describe('<ExistingSyntaxDialog />', () => {
     cy.contains('Upload syntax from JSON file').should('exist');
 
     // Upload invalid JSON
-    cy.get('input[type="file"]').selectFile('cypress/temp/invalid.json', { force: true });
+    cy.get('input[type="file"]').selectFile(invalidFile, { force: true });
 
     cy.contains(/Failed to parse JSON file/).should('exist');
     cy.get('@onSyntaxSelectSpy').should('not.have.been.called');

package/src/components/assembler/PlasmidSyntaxTable.jsx

@@ -22,7 +22,7 @@ function PlasmidRow({ plasmid }) {
       backgroundColor: partInfo[0]?.color,
     }
     infoStr = partInfo[0] ? partInfo[0].name : 'Spans multiple parts';
-    longestFeatureStr = longestFeature ? longestFeature[0].name : '-';
+    longestFeatureStr = longestFeature[0] ? longestFeature[0].name : '-';
   }
   const multipleParts = partInfo.length > 1;
   if (multipleParts) {

package/src/components/assembler/assembler_utils.js

@@ -101,6 +101,11 @@ export function getSimplifiedDigestFragments(sequenceData, enzymes) {
 }
 
 export function assignSequenceToSyntaxPart(sequenceData, enzymes, graph) {
+  // Something that is important to understand here is the meaning of forward and reverse.
+  // It does not mean whether the overhang is 5' or 3', the value on the top strand is always
+  // 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

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

@@ -28,6 +28,46 @@ describe('reverseComplementSimplifiedDigestFragment', () => {
   });
 });
 
+it('shows the meaning of forward and reverse', () => {
+  const sequence = 'aaGGTCTCaTACTaaa'
+  const digestFragments = getDigestFragmentsForRestrictionEnzymes(
+    sequence,
+    false,
+    aliasedEnzymesByName["bsai"],
+  );
+
+  // This does not denote whether the overhang is 5' or 3',
+  // but the orientation of the recognition site.
+  expect(digestFragments[0].cut2.overhangBps).toBe('TACT');
+  expect(digestFragments[0].cut2.forward).toBe(true);
+  expect(digestFragments[1].cut1.overhangBps).toBe('TACT');
+  expect(digestFragments[1].cut1.forward).toBe(true);
+
+  // See how for a fragment with the same overhangs, the forward
+  // value is different
+  const sequence2 = 'aTACTcGAGACCaaa'
+  const digestFragments2 = getDigestFragmentsForRestrictionEnzymes(
+    sequence2,
+    false,
+    aliasedEnzymesByName["bsai"],
+  );
+  expect(digestFragments2[0].cut2.overhangBps).toBe('TACT');
+  expect(digestFragments2[0].cut2.forward).toBe(false);
+  expect(digestFragments2[1].cut1.overhangBps).toBe('TACT');
+  expect(digestFragments2[1].cut1.forward).toBe(false);
+
+  // For EcoRI, it's always forward
+  const sequenceEcoRI = 'aaaGAATTCaaaGAATTCaaaa'
+  const digestFragmentsEcoRI = getDigestFragmentsForRestrictionEnzymes(
+    sequenceEcoRI,
+    true,
+    aliasedEnzymesByName["ecori"],
+  );
+  expect(digestFragmentsEcoRI[0].cut2.overhangBps).toBe('AATT');
+  expect(digestFragmentsEcoRI[0].cut2.forward).toBe(true);
+  expect(digestFragmentsEcoRI[0].cut1.overhangBps).toBe('AATT');
+  expect(digestFragmentsEcoRI[0].cut1.forward).toBe(true);
+});
 
 describe('assignSequenceToSyntaxPart', () => {
   it('works', () => {

package/src/version.js

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