@opencloning/ui 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @opencloning/ui
 
+## 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
+
+- [#602](https://github.com/manulera/OpenCloning_frontend/pull/602) [`b9b821d`](https://github.com/manulera/OpenCloning_frontend/commit/b9b821d562417b85b69dbf53ddaac324474d4e6b) Thanks [@manulera](https://github.com/manulera)! - Allow users to submit their own syntax from JSON file. Not validated yet so wrong syntaxes will trigger an error.
+
+- Updated dependencies []:
+  - @opencloning/store@1.3.1
+  - @opencloning/utils@1.3.1
+
 ## 1.3.0
 
 ### Minor Changes

package/package.json

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

package/src/components/assembler/Assembler.jsx

@@ -263,7 +263,7 @@ 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))
+    addPlasmids(plasmids)
   }, [setSyntax, addPlasmids])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>

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

@@ -191,4 +191,61 @@ describe('<ExistingSyntaxDialog />', () => {
     cy.get('@onSyntaxSelectSpy').should('have.been.calledWith', mockSyntaxData, mockPlasmidsData);
     cy.get('@onCloseSpy').should('have.been.called');
   });
+
+  it('successfully uploads syntax from JSON file', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    const uploadedSyntaxData = {
+      name: 'Uploaded Syntax',
+      parts: [
+        { id: 1, name: 'Part 1' },
+        { id: 2, name: 'Part 2' },
+      ],
+    };
+
+    // Create a temporary JSON file
+    cy.writeFile('cypress/temp/syntax.json', uploadedSyntaxData);
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    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('@onSyntaxSelectSpy').should('have.been.calledWith', uploadedSyntaxData, []);
+    cy.get('@onCloseSpy').should('have.been.called');
+  });
+
+  it('displays error message when uploaded JSON file is invalid', () => {
+    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' });
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    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.contains(/Failed to parse JSON file/).should('exist');
+    cy.get('@onSyntaxSelectSpy').should('not.have.been.called');
+    cy.get('@onCloseSpy').should('not.have.been.called');
+  });
 });

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert } from '@mui/material'
+import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box } from '@mui/material'
 import getHttpClient from '@opencloning/utils/getHttpClient';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
 
@@ -12,6 +12,7 @@ function ExistingSyntaxDialog({ onClose, onSyntaxSelect }) {
   const [connectAttempt, setConnectAttempt] = React.useState(0);
   const [requestStatus, setRequestStatus] = React.useState({ status: 'loading' });
   const [loadError, setLoadError] = React.useState(null);
+  const fileInputRef = React.useRef(null);
 
   React.useEffect(() => {
     setRequestStatus({ status: 'loading' });
@@ -41,12 +42,34 @@ function ExistingSyntaxDialog({ onClose, onSyntaxSelect }) {
     }
   }, [onSyntaxSelect, onClose]);
 
+  const handleFileUpload = React.useCallback(async (event) => {
+    setLoadError(null);
+    const file = event.target.files[0];
+    if (!file) return;
+
+    try {
+      const text = await file.text();
+      const syntaxData = JSON.parse(text);
+
+      // Uploaded JSON files contain only syntax data, no plasmids
+      onSyntaxSelect(syntaxData, []);
+      onClose();
+    } catch (error) {
+      setLoadError(`Failed to parse JSON file: ${error.message}`);
+    } finally {
+      // Reset file input so the same file can be selected again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  }, [onSyntaxSelect, onClose]);
+
   return (
     <Dialog open onClose={onClose}>
       <DialogTitle>Load an existing syntax</DialogTitle>
       <DialogContent>
+        {loadError && <Alert severity="error" sx={{ mb: 2 }}>{loadError}</Alert>}
         <RequestStatusWrapper requestStatus={requestStatus} retry={() => setConnectAttempt((prev) => prev + 1)}>
-          {loadError && <Alert severity="error" sx={{ mb: 2 }}>{loadError}</Alert>}
           <List>
             {syntaxes.map((syntax) => (
               <ListItem key={syntax.path}>
@@ -57,6 +80,22 @@ function ExistingSyntaxDialog({ onClose, onSyntaxSelect }) {
             ))}
           </List>
         </RequestStatusWrapper>
+        <Box sx={{ mb: 2 }}>
+          <input
+            type="file"
+            ref={fileInputRef}
+            accept=".json"
+            onChange={handleFileUpload}
+            style={{ display: 'none' }}
+          />
+          <Button
+            variant="outlined"
+            sx={{ display: 'block', mx: 'auto' }}
+            onClick={() => fileInputRef.current?.click()}
+          >
+              Upload syntax from JSON file
+          </Button>
+        </Box>
       </DialogContent>
     </Dialog>
   )

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.0";
+export const version = "1.3.2";