@opencloning/ui 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @opencloning/ui
 
+## 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.1",
   "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.1",
+    "@opencloning/utils": "1.3.1",
     "@teselagen/bio-parsers": "^0.4.32",
     "@teselagen/ove": "^0.8.30",
     "@teselagen/range-utils": "^0.3.13",

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/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.1";