@opencloning/ui 1.4.4 → 1.4.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @opencloning/ui
 
+## 1.4.5
+
+### Patch Changes
+
+- [#627](https://github.com/manulera/OpenCloning_frontend/pull/627) [`74e5365`](https://github.com/manulera/OpenCloning_frontend/commit/74e53653a27c2dc64f19afd984981c0fb70fc747) Thanks [@manulera](https://github.com/manulera)! - Allow selecting sub-assemblies from a kit
+
+- Updated dependencies []:
+  - @opencloning/store@1.4.5
+  - @opencloning/utils@1.4.5
+
 ## 1.4.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "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.4",
-    "@opencloning/utils": "1.4.4",
+    "@opencloning/store": "1.4.5",
+    "@opencloning/utils": "1.4.5",
     "@teselagen/bio-parsers": "^0.4.34",
     "@teselagen/ove": "^0.8.34",
     "@teselagen/range-utils": "^0.3.20",

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

@@ -21,6 +21,23 @@ const mockSyntaxes = [
     name: 'Test Syntax 2',
     description: 'Second test syntax',
   },
+  {
+    path: 'test-syntax-3',
+    name: 'Test Syntax 3',
+    description: 'Third test syntax',
+    syntaxes: [
+      {
+        path: 'test-syntax-3-1.json',
+        name: 'Test Syntax 3-1',
+        description: 'Third test syntax 1',
+      },
+      {
+        path: 'test-syntax-3-2.json',
+        name: 'Test Syntax 3-2',
+        description: 'Third test syntax 2',
+      },
+    ],
+  },
 ];
 
 const mockSyntaxData = {
@@ -265,4 +282,38 @@ describe('<ExistingSyntaxDialog />', () => {
     cy.get('@onSyntaxSelectSpy').should('not.have.been.called');
     cy.get('@onCloseSpy').should('not.have.been.called');
   });
+
+  it('works with multiple syntaxes', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-3/test-syntax-3-2.json', {
+      statusCode: 200,
+      body: mockSyntaxData,
+    }).as('getSyntaxData');
+
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-3/plasmids_test-syntax-3-2.json', {
+      statusCode: 200,
+      body: mockPlasmidsData,
+    }).as('getPlasmidsData');
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    cy.contains('Test Syntax 3').click();
+    cy.contains('Test Syntax 3-1').should('exist');
+    cy.contains('Test Syntax 3-2').should('exist');
+    cy.contains('Third test syntax 1').should('exist');
+    cy.contains('Third test syntax 2').should('exist');
+    cy.contains('Test Syntax 3-2').click();
+    cy.wait('@getSyntaxData');
+    cy.wait('@getPlasmidsData');
+    cy.get('@onSyntaxSelectSpy').should('have.been.calledWith', mockSyntaxData, mockPlasmidsData);
+    cy.get('@onCloseSpy').should('have.been.called');
+  });
 });

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box, ButtonGroup } from '@mui/material'
+import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box, ButtonGroup, Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
 import getHttpClient from '@opencloning/utils/getHttpClient';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
 import { useConfig } from '../../providers';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { readSubmittedTextFile } from '@opencloning/utils/readNwrite';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 
 const httpClient = getHttpClient();
 const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
@@ -28,6 +29,48 @@ function LocalSyntaxDialog({ onClose, onSyntaxSelect }) {
   )
 }
 
+function SyntaxListItem({ syntax, onSyntaxClick }) {
+  if (syntax.syntaxes === undefined) {
+    const syntaxPath = syntax.path + '/syntax.json';
+    const plasmidsPath = syntax.path + '/plasmids.json';
+    return (
+      <ListItem>
+        <ListItemButton onClick={() => {onSyntaxClick(syntaxPath, plasmidsPath)}}>
+          <ListItemText primary={syntax.name} secondary={syntax.description} />
+        </ListItemButton>
+      </ListItem>
+    )
+  }
+
+  const onOptionClick = (index) => {
+    const syntaxPath = `${syntax.path}/${syntax.syntaxes[index].path}`;
+    const plasmidsPath = `${syntax.path}/plasmids_${syntax.syntaxes[index].path}`;
+    onSyntaxClick(syntaxPath, plasmidsPath);
+  }
+
+  return (
+    <ListItem>
+      <Accordion>
+        <AccordionSummary sx={{ my: 0, py: 0 }} expandIcon={<ExpandMoreIcon />}>
+          <ListItemText sx={{ my: 0, py: 0 }} primary={syntax.name} secondary={syntax.description} />
+        </AccordionSummary>
+        <AccordionDetails>
+          <List sx={{ py: 0, my: 0 }}>
+            {syntax.syntaxes.map((syntax, index) => (
+              <ListItem key={syntax.path} sx={{ my: 0, py: 0 }}>
+                <ListItemButton sx={{ py: 0 }} onClick={() => onOptionClick(index)}>
+                  <ListItemText primary={syntax.name} secondary={syntax.description} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </AccordionDetails>
+      </Accordion>
+    </ListItem>
+    
+  )
+}
+
 function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
   const [syntaxes, setSyntaxes] = React.useState([]);
   const [connectAttempt, setConnectAttempt] = React.useState(0);
@@ -42,7 +85,7 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
       try {
         const { data } = await httpClient.get('index.json');
         setRequestStatus({ status: 'success' });
-        setSyntaxes(data);
+        setSyntaxes(data.sort((a, b) => a.name.localeCompare(b.name)));
       } catch {
         setRequestStatus({ status: 'error', message: 'Could not load syntaxes' });
       }
@@ -50,13 +93,13 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
     fetchData();
   }, [connectAttempt]);
 
-  const onSyntaxClick = React.useCallback(async (syntax) => {
+  const onSyntaxClick = React.useCallback(async (syntaxPath, plasmidsPath) => {
     setLoadError(null);
     let loadingErrorPart = 'syntax'
     try {
-      const { data: syntaxData } = await httpClient.get(`${syntax.path}/syntax.json`);
+      const { data: syntaxData } = await httpClient.get(syntaxPath);
       loadingErrorPart = 'plasmids'
-      const { data: plasmidsData } = await httpClient.get(`${syntax.path}/plasmids.json`);
+      const { data: plasmidsData } = await httpClient.get(plasmidsPath);
       onSyntaxSelect(syntaxData, plasmidsData);
       onClose();
     } catch {
@@ -94,11 +137,7 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
         <RequestStatusWrapper requestStatus={requestStatus} retry={() => setConnectAttempt((prev) => prev + 1)}>
           <List>
             {syntaxes.map((syntax) => (
-              <ListItem key={syntax.path}>
-                <ListItemButton onClick={() => {onSyntaxClick(syntax)}}>
-                  <ListItemText primary={syntax.name} secondary={syntax.description} />
-                </ListItemButton>
-              </ListItem>
+              <SyntaxListItem key={syntax.path} syntax={syntax} onSyntaxClick={onSyntaxClick} />
             ))}
           </List>
         </RequestStatusWrapper>

package/src/version.js

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