@opencloning/ui 1.4.5 → 1.4.6

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @opencloning/ui
 
+## 1.4.6
+
+### Patch Changes
+
+- [#629](https://github.com/manulera/OpenCloning_frontend/pull/629) [`8820965`](https://github.com/manulera/OpenCloning_frontend/commit/8820965e5a91ec29bb0c9788191123f996a8ecd8) Thanks [@manulera](https://github.com/manulera)! - \* improve category names + clear plasmids when loading new syntax
+  - improve handling of files uploaded by user or associated with kit
+  - Allow downloading the results from the Assembler.
+- Updated dependencies []:
+  - @opencloning/store@1.4.6
+  - @opencloning/utils@1.4.6
+
 ## 1.4.5
 
 ### Patch Changes

package/package.json

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

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
 import { AssemblerComponent } from './Assembler';
 
+
 // Test config
 const testConfig = {
   backendUrl: 'http://localhost:8000',
@@ -33,6 +34,25 @@ const dummyResponse = {
     }
   ]
 }
+const dummyResponse2 = {
+  sources: [{
+    ...dummyResponse.sources[0],
+    id: 2,
+    type: 'RestrictionAndLigationSource',
+    input: [
+      {
+        sequence: 1,
+      },
+      {
+        sequence: 2,
+      }],
+  }
+  ],
+  sequences: [{
+    ...dummyResponse.sequences[0],
+    id: 2,
+  }],
+}
 
 // Test data
 const mockPlasmids = [
@@ -91,12 +111,15 @@ describe('<AssemblerComponent />', () => {
       win.localStorage.clear();
     });
 
+    const addAlertStub = cy.stub().as('addAlert')
     cy.mount(
       <ConfigProvider config={testConfig}>
         <AssemblerComponent
           plasmids={mockPlasmids}
           categories={mockCategories}
           assemblyEnzyme="assembly_enzyme"
+          addAlert={addAlertStub}
+          appInfo={{}}
         />
       </ConfigProvider>,
     );
@@ -203,6 +226,7 @@ describe('<AssemblerComponent />', () => {
     // Error should be cleared
     cy.get('.MuiAlert-colorError').should('not.exist');
   });
+
   it('works in normal case', () => {
     // Mock successful source fetching
     cy.intercept('POST', 'http://localhost:8000/repository_id*', {
@@ -217,19 +241,57 @@ describe('<AssemblerComponent />', () => {
       expect(req.body.source.restriction_enzymes).to.include('assembly_enzyme');
       req.reply({
         statusCode: 200,
-        body: dummyResponse,
+        body: dummyResponse2,
       });
     }).as('assemblySuccess');
 
     // Click submit button
     cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
     cy.wait('@fetchSourceSuccess');
+    cy.wait('@assemblySuccess');
 
     // Check that the table displays the name
     cy.get('[data-testid="assembler-product-table"]').contains('Category 1').should('exist');
     cy.get('[data-testid="assembler-product-table"]').contains('Category 2').should('exist');
     cy.get('[data-testid="assembler-product-table"]').contains('Test Plasmid 1').should('exist');
     cy.get('[data-testid="assembler-product-table"]').contains('Test Plasmid 2').should('exist');
+
+    // Stub URL.createObjectURL before clicking (it's called with a Blob, not the filename)
+    cy.window().then((win) => {
+      cy.stub(win.URL, 'createObjectURL').callsFake((blob) => `blob:mock-${blob?.size ?? 0}`).as('createObjectURL');
+    });
+
+    // Click download assemblies button
+    cy.get('[data-testid="assembler-download-assemblies-button"]').click();
+
+    // Check that the download was triggered (createObjectURL receives the zip Blob)
+    
+    cy.get('@createObjectURL').should((stub) => {
+      expect(stub).to.have.been.calledOnce;
+      expect(stub.firstCall.args[0]).to.be.instanceOf(Blob);
+      expect(stub.firstCall.args[0].type).to.equal('application/zip');
+    });
+    
+    cy.get('@addAlert').should('have.not.been.called');
+
+  });
+  it('displays error message when downloading assemblies fails', () => {
+
+    cy.intercept('POST', 'http://localhost:8000/repository_id*', { statusCode: 200, body: dummyResponse }).as('fetchSourceSuccess');
+    cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', { statusCode: 200, body: dummyResponse }).as('assemblySuccess');
+
+    cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
+    cy.wait('@fetchSourceSuccess');
+    cy.wait('@assemblySuccess');
+
+
+    cy.get('[data-testid="assembler-download-assemblies-button"]').click();
+
+    cy.get('@addAlert').should('have.been.calledOnce');
+    cy.get('@addAlert').should((stub) => {
+      expect(stub.firstCall.args[0].message).to.include('Error downloading assemblies:');
+      expect(stub.firstCall.args[0].severity).to.equal('error');
+    });
   });
 });
 

package/src/components/assembler/Assembler.jsx

@@ -5,19 +5,20 @@ import {
 } from '@mui/material'
 import { Clear as ClearIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
 import { useAssembler } from './useAssembler';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { cloningActions } from '@opencloning/store/cloning';
 import AssemblerPart from './AssemblerPart';
 
 import useCombinatorialAssembly from './useCombinatorialAssembly';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 import error2String from '@opencloning/utils/error2String';
-import { categoryFilter } from './assembler_utils';
+import { categoryFilter, downloadAssemblerFilesAsZip, getFilesToExportFromAssembler } from './assembler_utils';
 import useBackendRoute from '../../hooks/useBackendRoute';
 import useHttpClient from '../../hooks/useHttpClient';
 import useAlerts from '../../hooks/useAlerts';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import { useConfig } from '../../providers';
+import { isEqual } from 'lodash-es';
 
 
 const { setState: setCloningState, setCurrentTab: setCurrentTabAction } = cloningActions;
@@ -108,7 +109,7 @@ function AssemblerBox({ item, index, setCategory, setId, categories, plasmids, a
                 const { key, ...restProps } = props
                 const plasmid = plasmids.find((d) => d.id === option)
                 return (
-                  <MenuItem key={key} {...restProps} sx={{ backgroundColor: plasmid.type === 'loadedFile' ? 'success.light' : undefined }}>
+                  <MenuItem key={key} {...restProps} sx={{ backgroundColor: plasmid.userUploaded === true ? '#dcedc8' : undefined }}>
                     {formatItemName(plasmid)}
                   </MenuItem>
                 )}}
@@ -123,7 +124,7 @@ function AssemblerBox({ item, index, setCategory, setId, categories, plasmids, a
   )
 }
 
-export function AssemblerComponent({ plasmids, categories, assemblyEnzyme }) {
+export function AssemblerComponent({ plasmids, categories, assemblyEnzyme, addAlert, appInfo }) {
 
   const [requestedAssemblies, setRequestedAssemblies] = React.useState([])
   const [errorMessage, setErrorMessage] = React.useState('')
@@ -137,7 +138,7 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzyme }) {
   const { assembly, setCategory, setId, expandedAssemblies, assemblyComplete, canBeSubmitted, currentCategories } = useCombinatorialAssembly({ onValueChange: clearAssemblySelection, categories, plasmids })
   const { requestSources, requestAssemblies } = useAssembler()
 
-  const onSubmitAssembly = async () => {
+  const onSubmitAssembly = React.useCallback(async () => {
     clearAssemblySelection()
     const selectedPlasmids = assembly.map(({ plasmidIds }) => plasmidIds.map((id) => (plasmids.find((item) => item.id === id))))
 
@@ -159,7 +160,20 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzyme }) {
     } finally {
       setLoadingMessage(false)
     }
-  }
+  }, [assemblyEnzyme, assembly, plasmids, requestSources, requestAssemblies, clearAssemblySelection])
+
+  const onDownloadAssemblies = React.useCallback(async () => {
+    try {
+      const files = getFilesToExportFromAssembler({requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo})
+      await downloadAssemblerFilesAsZip(files);
+    } catch (error) {
+      console.error('Error downloading assemblies:', error);
+      addAlert({
+        message: `Error downloading assemblies: ${error.message}`,
+        severity: 'error',
+      });
+    }
+  }, [requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo, addAlert])
 
   const options = React.useMemo(() => assemblyComplete ? assembly : [...assembly, { category: '', plasmidIds: [] }], [assembly, assemblyComplete])
 
@@ -171,17 +185,26 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzyme }) {
           <AssemblerBox key={index} {...{item, index, setCategory, setId, categories, plasmids, assembly}} />
         )}
       </Stack>
-      {canBeSubmitted && <>
-        <Button
-          sx={{ p: 2, px: 4, my: 2, fontSize: '1.2rem' }}
+      <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, my: 2 }}>
+        {canBeSubmitted && <>
+          <Button
+            sx={{ p: 2, fontSize: '1.2rem' }}
+            variant="contained"
+            color="primary"
+            data-testid="assembler-submit-button"
+            onClick={onSubmitAssembly}
+            disabled={Boolean(loadingMessage)}>
+            {loadingMessage ? <><CircularProgress /> {loadingMessage}</> : 'Submit'}
+          </Button>
+        </>}
+        {requestedAssemblies.length > 0 && <Button
+          color="success"
           variant="contained"
-          color="primary"
-          data-testid="assembler-submit-button"
-          onClick={onSubmitAssembly}
-          disabled={Boolean(loadingMessage)}>
-          {loadingMessage ? <><CircularProgress /> {loadingMessage}</> : 'Submit'}
-        </Button>
-      </>}
+          data-testid="assembler-download-assemblies-button"
+          sx={{ p: 2, fontSize: '1.2rem' }}
+          onClick={onDownloadAssemblies}>Download Assemblies
+        </Button>}
+      </Box>
       {errorMessage && <Alert severity="error" sx={{ my: 2, maxWidth: 300, margin: 'auto', fontSize: '1.2rem' }}>{errorMessage}</Alert>}
       {requestedAssemblies.length > 0 &&
         <AssemblerProductTable {...{requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories}} />
@@ -196,10 +219,10 @@ function displayNameFromCategory(category) {
   if (category.name) {
     name = category.name
     if (category.info)
-      name += ` (${category.info}) `
+      name += ` (${category.info})`
   }
   if (category.left_name && category.right_name) {
-    name += `${category.left_name}_${category.right_name}`
+    name += ` (${category.left_name}_${category.right_name})`
   }
   if (name === '') {
     name = category.key
@@ -238,7 +261,7 @@ function categoriesFromSyntaxAndPlasmids(syntax, plasmids) {
   return newCategories
 }
 
-function LoadSyntaxButton({ setSyntax, addPlasmids }) {
+function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
   const [existingSyntaxDialogOpen, setExistingSyntaxDialogOpen] = React.useState(false)
   const httpClient = useHttpClient();
   const { staticContentPath } = useConfig();
@@ -249,6 +272,7 @@ function LoadSyntaxButton({ setSyntax, addPlasmids }) {
     try {
       await httpClient.post(url, syntax);
       setSyntax(syntax)
+      clearPlasmids()
       addPlasmids(plasmids)
     } catch (error) {
       addAlert({
@@ -256,7 +280,7 @@ function LoadSyntaxButton({ setSyntax, addPlasmids }) {
         severity: 'error',
       });
     }
-  }, [setSyntax, addPlasmids, httpClient, backendRoute, addAlert])
+  }, [setSyntax, addPlasmids, clearPlasmids, httpClient, backendRoute, addAlert])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>
     {existingSyntaxDialogOpen && <ExistingSyntaxDialog staticContentPath={staticContentPath} onClose={() => setExistingSyntaxDialogOpen(false)} onSyntaxSelect={onSyntaxSelect}/>}
@@ -268,6 +292,8 @@ function LoadSyntaxButton({ setSyntax, addPlasmids }) {
 function Assembler() {
   const [syntax, setSyntax] = React.useState(null);
   const [plasmids, setPlasmids] = React.useState([])
+  const { addAlert } = useAlerts();
+  const appInfo = useSelector(({ cloning }) => cloning.appInfo, isEqual);
 
   const categories = React.useMemo(() => {
     return categoriesFromSyntaxAndPlasmids(syntax, plasmids)
@@ -280,8 +306,12 @@ function Assembler() {
     })
   }, [])
 
+  const clearLoadedPlasmids = React.useCallback(() => {
+    setPlasmids(prev => prev.filter((plasmid) => plasmid.userUploaded !== true))
+  }, [])
+
   const clearPlasmids = React.useCallback(() => {
-    setPlasmids(prev => prev.filter((plasmid) => plasmid.type !== 'loadedFile'))
+    setPlasmids([])
   }, [])
 
   return (
@@ -290,11 +320,11 @@ function Assembler() {
         The Assembler is experimental. Use with caution.
       </Alert>
       <ButtonGroup>
-        <LoadSyntaxButton setSyntax={setSyntax} addPlasmids={addPlasmids} />
+        <LoadSyntaxButton setSyntax={setSyntax} addPlasmids={addPlasmids} clearPlasmids={clearPlasmids} />
         {syntax && <UploadPlasmidsButton addPlasmids={addPlasmids} syntax={syntax} />}
-        {syntax && <Button color="error" onClick={clearPlasmids}>Remove uploaded plasmids</Button>}
+        {syntax && <Button color="error" onClick={clearLoadedPlasmids}>Remove uploaded plasmids</Button>}
       </ButtonGroup>
-      {syntax && <AssemblerComponent plasmids={plasmids} syntax={syntax} categories={categories} assemblyEnzyme={syntax.assemblyEnzyme} />}
+      {syntax && <AssemblerComponent plasmids={plasmids} syntax={syntax} categories={categories} assemblyEnzyme={syntax.assemblyEnzyme} addAlert={addAlert} appInfo={appInfo} />}
     </>
   )
 }

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 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';

package/src/components/assembler/UploadPlasmidsButton.jsx

@@ -26,6 +26,7 @@ function formatPlasmid(sequenceData) {
     key: `${left_overhang}-${right_overhang}`,
     sequenceData,
     genbankString: jsonToGenbank(sequenceData),
+    userUploaded: true,
   };
   
 }

package/src/components/assembler/assembler_utils.js

@@ -2,6 +2,9 @@ import { isRangeWithinRange } from '@teselagen/range-utils';
 import { getComplementSequenceString, getAminoAcidFromSequenceTriplet, getDigestFragmentsForRestrictionEnzymes, getReverseComplementSequenceString } from '@teselagen/sequence-utils';
 import { allSimplePaths } from 'graphology-simple-path';
 import { openCycleAtNode } from './graph_utils';
+import { downloadBlob, formatStateForJsonExport, getZipFileBlob } from '@opencloning/utils/readNwrite';
+import { getGraftSequenceId } from '@opencloning/utils/network';
+import { TextReader} from '@zip.js/zip.js';
 
 export function tripletsToTranslation(triplets) {
   if (!triplets) return ''
@@ -146,3 +149,45 @@ export function categoryFilter(category, categories, previousCategoryId) {
   const previousCategory = categories.find((category) => category.id === previousCategoryId)
   return previousCategory?.right_overhang === category.left_overhang
 }
+
+export function getFilesToExportFromAssembler({requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo}) {
+  const files2Export = [];
+  const categoryNames = ['Assembly', ...currentCategories.map(categoryId => categories.find(c => c.id === categoryId).displayName)];
+  const assemblyNames = expandedAssemblies.map((assembly, index) => {
+    return [index + 1, ...assembly.map(part => plasmids.find(p => p.id === part).plasmid_name)];
+  });
+  for (const delimiter of ['\t', ',']) {
+    const tableHeader = categoryNames.join(delimiter);
+    const tableRows = assemblyNames.map(assemblyName => assemblyName.join(delimiter));
+    const table = [tableHeader, ...tableRows].join('\n');
+    const extension = delimiter === '\t' ? 'tsv' : 'csv';
+    files2Export.push({
+      name: `assemblies.${extension}`,
+      content: table,
+    });
+  }
+
+  for (let i = 0; i < requestedAssemblies.length; i++) {
+    const name = `${String(i + 1).padStart(3, '0')}_${assemblyNames[i].slice(1).join('+')}`;
+    const requestedAssembly = requestedAssemblies[i];
+    const jsonContent = formatStateForJsonExport({...requestedAssembly, appInfo});
+    files2Export.push({
+      name: `${name}.json`,
+      content: JSON.stringify(jsonContent, null, 2),
+    });
+    const finalSequenceId = getGraftSequenceId(requestedAssembly)
+    const finalSequence = requestedAssembly.sequences.find(s => s.id === finalSequenceId)
+    files2Export.push({
+      name: `${name}.gbk`,
+      content: finalSequence.file_content,
+    });
+  }
+  return files2Export;
+}
+
+export async function downloadAssemblerFilesAsZip(files) {
+  const files2write = files.map(({name, content}) => ({name, reader: new TextReader(content)}));
+
+  const blob = await getZipFileBlob(files2write);
+  downloadBlob(blob, 'assemblies.zip');
+}

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

@@ -1,8 +1,8 @@
 import { aliasedEnzymesByName, getDigestFragmentsForRestrictionEnzymes, getReverseComplementSequenceString, getComplementSequenceString, getReverseComplementSequenceAndAnnotations } from "@teselagen/sequence-utils";
 import fs from 'fs';
-import { assignSequenceToSyntaxPart, simplifyDigestFragment, reverseComplementSimplifiedDigestFragment, tripletsToTranslation, partDataToDisplayData, arrayCombinations, getSimplifiedDigestFragments } from "./assembler_utils";
+import { assignSequenceToSyntaxPart, simplifyDigestFragment, reverseComplementSimplifiedDigestFragment, tripletsToTranslation, partDataToDisplayData, arrayCombinations, getFilesToExportFromAssembler } from "./assembler_utils";
 import { partsToEdgesGraph } from "./graph_utils";
-import { genbankToJson } from '@teselagen/bio-parsers';
+
 
 const sequenceBsaI  = 'tgggtctcaTACTagagtcacacaggactactaAATGagagacctac';
 const sequenceBsaI2 = 'tgggtctcaAATGagagtcacacaggactactaAGGTagagacctac'
@@ -257,3 +257,57 @@ describe('arrayCombinations', () => {
     expect(arrayCombinations([[1, 2], [3, 4], [5, 6]])).toEqual([[1, 3, 5], [1, 3, 6], [1, 4, 5], [1, 4, 6], [2, 3, 5], [2, 3, 6], [2, 4, 5], [2, 4, 6]]);
   });
 });
+
+
+const goldenGateCloningStrategy = JSON.parse(fs.readFileSync('apps/opencloning/public/examples/golden_gate.json', 'utf8'));
+const gatewayCloningStrategy = JSON.parse(fs.readFileSync('apps/opencloning/public/examples/gateway.json', 'utf8'));
+
+const dummyData = {
+  requestedAssemblies: [ goldenGateCloningStrategy, gatewayCloningStrategy],
+  expandedAssemblies: [[1, 5, 7], [1, 2, 3]],
+  plasmids: [
+    {id: 1, plasmid_name: 'p1'},
+    {id: 2, plasmid_name: 'p2'},
+    {id: 3, plasmid_name: 'p3'},
+    {id: 4, plasmid_name: 'p4'},
+    {id: 5, plasmid_name: 'p5'},
+    {id: 6, plasmid_name: 'p6'},
+    {id: 7, plasmid_name: 'p7'},
+  ],
+  currentCategories: [1, 2, 3],
+  categories: [
+    {id: 1, displayName: 'Category 1'},
+    {id: 2, displayName: 'Category 2'},
+    {id: 3, displayName: 'Category 3'},
+  ],
+  appInfo: {backendVersion: '0.5.1', schemaVersion: '0.4.9', frontendVersion: '__VERSION__'},
+};
+
+
+
+describe('getZipFileFromAssemblies', () => {
+  it('returns a zip file', () => {
+    const files = getFilesToExportFromAssembler(dummyData);
+    expect(files[0].name).toBe('assemblies.tsv');
+    expect(files[0].content).toBe('Assembly\tCategory 1\tCategory 2\tCategory 3\n1\tp1\tp5\tp7\n2\tp1\tp2\tp3');
+    expect(files[1].name).toBe('assemblies.csv');
+    expect(files[1].content).toBe('Assembly,Category 1,Category 2,Category 3\n1,p1,p5,p7\n2,p1,p2,p3');
+
+    const fileNames = ['001_p1+p5+p7', '002_p1+p2+p3'];
+    for (let i = 0; i < 2; i++) {
+      const fileIndex1 = i * 2 + 2;
+      const fileIndex2 = fileIndex1 + 1;
+      expect(files[fileIndex1].name).toBe(`${fileNames[i]}.json`);
+      const cloningStrategy = JSON.parse(files[fileIndex1].content);
+      expect(cloningStrategy.sequences).toEqual(dummyData.requestedAssemblies[i].sequences);
+      expect(cloningStrategy.sources).toEqual(dummyData.requestedAssemblies[i].sources);
+      expect(cloningStrategy.primers).toEqual(dummyData.requestedAssemblies[i].primers);
+
+      expect(files[fileIndex2].name).toBe(`${fileNames[i]}.gbk`);
+      const genbankContent = files[fileIndex2].content;
+      expect(genbankContent).toBe(dummyData.requestedAssemblies[i].sequences[dummyData.requestedAssemblies[i].sequences.length - 1].file_content);
+    }
+
+
+  })
+})

package/src/version.js

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