@opencloning/ui 1.3.3 → 1.4.1

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

@@ -0,0 +1,239 @@
+import React from 'react';
+import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
+import { localFilesHttpClient } from '@opencloning/ui/hooks/useServerStaticFiles';
+import UploadPlasmidsButton from './UploadPlasmidsButton';
+import mocloSyntax from '../../../../../cypress/test_files/syntax/moclo_syntax.json';
+import { dummyIndex } from '../form/ServerStaticFileSelect.cy.jsx';
+
+mocloSyntax.overhangNames = {
+  ...mocloSyntax.overhangNames,
+  CCCT: 'CCCT_overhang',
+  AACG: 'AACG_overhang',
+};
+
+// Test config
+const testConfig = {
+  backendUrl: 'http://localhost:8000',
+  showAppBar: false,
+  noExternalRequests: false,
+  enableAssembler: true,
+  enablePlannotate: false,
+};
+
+describe('<UploadPlasmidsButton />', () => {
+  beforeEach(() => {
+    cy.window().then((win) => {
+      win.localStorage.clear();
+    });
+  });
+
+  it('calls addPlasmids with correctly formatted valid plasmid', () => {
+    const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
+
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
+      </ConfigProvider>,
+    );
+
+    cy.get('button').contains('Load Plasmids from Local Server').should('not.exist');
+    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
+      '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',
+      // 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)
+    cy.get('.MuiDialog-root', { timeout: 10000 }).should('be.visible');
+
+    cy.get('@addPlasmidsSpy').should('not.have.been.called');
+
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('Invalid Plasmids').should('exist');
+    cy.get('[data-testid="valid-plasmids-box"]').contains('Valid Plasmids').should('exist');
+
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('pYTK057')
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('moclo_ytk_multi_part.gb')
+    cy.get('[data-testid="invalid-plasmids-box"] .MuiChip-label').contains('ATCC-TGGC')
+    cy.get('[data-testid="invalid-plasmids-box"] .MuiChip-label').contains('CCCT-AACG (CCCT_overhang-AACG_overhang)')
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('Contains multiple parts')
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('locus.gb')
+
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(0).should('contain', 'pYTK002')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(1).should('contain', 'pYTK002.gb')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(2).should('contain', 'CCCT-AACG (CCCT_overhang-AACG_overhang)')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(3).should('contain', '1')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(4).should('contain', 'ConS')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).then(($el) => {
+      const bgColor = window.getComputedStyle($el[0]).backgroundColor;
+      cy.wrap(bgColor).should('equal', 'rgb(132, 197, 222)');
+    });
+
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(0).should('contain', 'pYTK095')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(1).should('contain', 'pYTK095.gb')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(2).should('contain', 'TACA-CCCT (TACA-CCCT_overhang)')
+    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();
+
+    // Verify addPlasmids was called
+    cy.get('@addPlasmidsSpy').should('have.been.called');
+
+    // Verify it was called with an array and check structure
+    cy.get('@addPlasmidsSpy').then((spy) => {
+      const firstCall = spy.getCall(0);
+      cy.wrap(firstCall.args[0]).should('be.an', 'array');
+      cy.wrap(firstCall.args[0]).should('have.length', 3);
+
+      const firstPlasmid = firstCall.args[0][0];
+
+      cy.wrap(firstPlasmid.file_name).should('equal', 'pYTK002.gb');
+      cy.wrap(firstPlasmid.plasmid_name).should('equal', 'pYTK002.gb (ConS)');
+      cy.wrap(firstPlasmid.left_overhang).should('equal', 'CCCT');
+      cy.wrap(firstPlasmid.right_overhang).should('equal', 'AACG');
+      cy.wrap(firstPlasmid.key).should('equal', 'CCCT-AACG');
+
+      const {appData} = firstPlasmid.sequenceData;
+
+      cy.wrap(appData.fileName).should('equal', 'pYTK002.gb');
+      cy.wrap(appData.correspondingParts).should('deep.equal', ['CCCT-AACG']);
+      cy.wrap(appData.correspondingPartsNames).should('deep.equal', ["CCCT_overhang-AACG_overhang"]);
+
+    });
+  });
+
+
+  it('does not allow to submit when all plasmids are invalid', () => {
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <UploadPlasmidsButton addPlasmids={() => {}} syntax={mocloSyntax} />
+      </ConfigProvider>,
+    );
+    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
+      'cypress/test_files/sequencing/locus.gb'],
+    { force: true });
+
+    // Wait for the dialog to appear (indicating plasmids were processed)
+    cy.get('.MuiDialog-root', { timeout: 10000 }).should('be.visible');
+
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('Invalid Plasmids').should('exist');
+    cy.get('[data-testid="valid-plasmids-box"]').should('not.exist');
+
+    cy.get('button').contains('Import valid plasmids').should('be.disabled');
+
+  });
+
+  it('cancelling does not call addPlasmids', () => {
+    const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
+      </ConfigProvider>,
+    );
+    
+    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
+      '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'],
+    { force: true });
+    
+    cy.get('.MuiDialog-root', { timeout: 10000 }).should('be.visible');
+
+    cy.get('button').contains('Cancel').click();
+
+    cy.get('@addPlasmidsSpy').should('not.have.been.called');
+
+  });
+
+  it('loads plasmids from local server', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+      if (url.endsWith('/example.fa')) {
+        return Promise.resolve({ data: '>example\nATGC' });
+      }
+      if (url.endsWith('/example2.gb')) {
+        return cy.readFile('cypress/test_files/syntax/pYTK002.gb').then((fileContent) => ({ data: fileContent }));
+      }
+      throw new Error(`Unexpected URL: ${url}`);
+    });
+    cy.wrap(httpGet).as('httpGet');
+    const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
+    cy.mount(
+      <ConfigProvider config={{...testConfig, staticContentPath: 'collection'}}>
+        <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
+      </ConfigProvider>,
+    );
+    cy.get('button').contains('Load Plasmids from Local Server').click();
+
+    cy.get('button').contains('Submit').should('be.disabled');
+    cy.get('#option-select').click();
+    cy.contains('Example sequence 1').click();
+    cy.contains('Example sequence 2').click();
+    // Click outside to close select element
+    cy.get('.MuiDialog-container h2').click({force: true});
+    cy.contains('button', 'Submit').click();
+
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('Invalid Plasmids').should('exist');
+    cy.get('[data-testid="valid-plasmids-box"]').contains('Valid Plasmids').should('exist');
+    cy.get('[data-testid="valid-plasmids-box"]').should('contain', 'pYTK002');
+    cy.get('[data-testid="invalid-plasmids-box"]').should('contain', 'example.fa');
+    cy.get('button').contains('Import valid plasmids').click();
+    cy.get('@addPlasmidsSpy').should('have.been.called');
+    cy.get('@addPlasmidsSpy').then((spy) => {
+      const firstCall = spy.getCall(0);
+      cy.wrap(firstCall.args[0]).should('be.an', 'array');
+      cy.wrap(firstCall.args[0]).should('have.length', 1);
+      cy.wrap(firstCall.args[0][0].file_name).should('equal', 'example2.gb');
+    });
+  });
+  it('handles error loading plasmids from local server', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      } 
+      if (url.endsWith('/example2.gb')) {
+        return Promise.resolve({ data: 'wrong_format' });
+      }
+    });
+    cy.wrap(httpGet).as('httpGet');
+    const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
+    cy.mount(
+      <ConfigProvider config={{...testConfig, staticContentPath: 'collection'}}>
+        <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
+      </ConfigProvider>,
+    );
+    cy.get('button').contains('Load Plasmids from Local Server').click();
+    cy.get('button').contains('Submit').should('be.disabled');
+    cy.get('#option-select').click();
+    cy.contains('Example sequence 1').click();
+    cy.get('.MuiDialog-container h2').click({force: true});
+    cy.contains('button', 'Submit').click();
+    cy.get('.MuiAlert-colorError').contains('Error requesting file').should('exist');
+
+    cy.get('#option-select').click();
+    cy.get('ul').contains('Example sequence 1').click();
+    cy.contains('Example sequence 2').click();
+    cy.get('.MuiDialog-container h2').click({force: true});
+    cy.contains('button', 'Submit').click();
+    cy.get('.MuiAlert-colorError').contains('Error uploading plasmid from file example2.gb').should('exist');
+    cy.get('.MuiAlert-colorError').contains('Error requesting file').should('not.exist');
+
+    cy.get('@addPlasmidsSpy').should('not.have.been.called');
+  });
+
+});

package/src/components/assembler/UploadPlasmidsButton.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Button, Dialog, DialogTitle, DialogContent, DialogActions, Alert, Box } from '@mui/material';
+import { useConfig } from '../../providers';
+import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
+import { usePlasmidsLogic } from './usePlasmidsLogic';
+import PlasmidSyntaxTable from './PlasmidSyntaxTable';
+import { jsonToGenbank } from '@teselagen/bio-parsers';
+
+function formatPlasmid(sequenceData) {
+
+  const { appData } = sequenceData;
+  const { fileName, correspondingParts, longestFeature } = appData;
+  const [left_overhang, right_overhang] = correspondingParts[0].split('-');
+  
+  let plasmidName = fileName;
+  if (longestFeature[0]?.name) {
+    plasmidName += ` (${longestFeature[0].name})`;
+  }
+  
+  return {
+    type: 'loadedFile',
+    plasmid_name: plasmidName,
+    file_name: fileName,
+    left_overhang,
+    right_overhang,
+    key: `${left_overhang}-${right_overhang}`,
+    sequenceData,
+    genbankString: jsonToGenbank(sequenceData),
+  };
+  
+}
+
+export function UploadPlasmidsFromLocalServerButton({ handleFileChange }) {
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const {staticContentPath} = useConfig();
+  
+  const onFileSelected = React.useCallback(async (files) => {
+    try {
+      await handleFileChange(files)
+    } catch (e) {
+      setError(e.message)
+    }
+  }, [handleFileChange, setError])
+  
+  if (!staticContentPath) {
+    return null;
+  }
+  
+  return <>
+    <Button color="primary" onClick={() => {setError(null); setDialogOpen(true)}}>
+          Load Plasmids from Local Server
+    </Button>
+    {dialogOpen && <Dialog open onClose={() => {setError(null); setDialogOpen(false)}}>
+      <DialogTitle>Load Plasmids from Local Server</DialogTitle>
+      <DialogContent sx={{ width: '500px' }}>
+        {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+        <ServerStaticFileSelect onFileSelected={onFileSelected} type="sequence" multiple />
+      </DialogContent>
+    </Dialog>}
+  </>
+}
+  
+function UploadPlasmidsButton({ addPlasmids, syntax }) {
+  const { uploadPlasmids, linkedPlasmids, setLinkedPlasmids } = usePlasmidsLogic(syntax)
+  const validPlasmids = React.useMemo(() => linkedPlasmids.filter((plasmid) => plasmid.appData.correspondingParts.length === 1), [linkedPlasmids])
+  const invalidPlasmids = React.useMemo(() => linkedPlasmids.filter((plasmid) => plasmid.appData.correspondingParts.length !== 1), [linkedPlasmids])
+  const fileInputRef = React.useRef(null)
+  
+  const handleFileChange = async (files) => {
+    fileInputRef.current.value = ''
+    await uploadPlasmids(Array.from(files))
+  }
+  
+  const handleImportValidPlasmids = React.useCallback(() => {
+    addPlasmids(validPlasmids.map(formatPlasmid))
+    setLinkedPlasmids([])
+  }, [addPlasmids, validPlasmids, setLinkedPlasmids])
+  
+  return (<>
+    <Button color="primary" onClick={() => fileInputRef.current.click()}>
+          Add Plasmids
+    </Button>
+    <input multiple type="file" ref={fileInputRef} style={{ display: 'none' }} onChange={(event) => handleFileChange(Array.from(event.target.files))} accept=".gbk,.gb,.fasta,.fa,.dna" />
+    <UploadPlasmidsFromLocalServerButton handleFileChange={handleFileChange} />
+    <Dialog
+      maxWidth="lg"
+      fullWidth
+      open={invalidPlasmids.length > 0 || validPlasmids.length > 0}
+      onClose={() => setLinkedPlasmids([])}
+      PaperProps={{
+        style: {
+          maxHeight: '80vh',
+        },
+      }}
+    >
+      <DialogActions sx={{ justifyContent: 'center', position: 'sticky', top: 0, zIndex: 99, background: '#fff' }}>
+        <Button disabled={validPlasmids.length === 0} variant="contained" color="success" onClick={handleImportValidPlasmids}>Import valid plasmids</Button>
+        <Button variant="contained" color="error" onClick={() => setLinkedPlasmids([])}>Cancel</Button>
+      </DialogActions>
+      {invalidPlasmids.length > 0 && (
+        <Box data-testid="invalid-plasmids-box">
+          <DialogTitle>Invalid Plasmids</DialogTitle>
+          <DialogContent>
+            <PlasmidSyntaxTable plasmids={invalidPlasmids} />
+          </DialogContent>
+        </Box>
+      )}
+      {validPlasmids.length > 0 && (
+        <Box data-testid="valid-plasmids-box">
+          <DialogTitle>Valid Plasmids</DialogTitle>
+          <DialogContent>
+            <PlasmidSyntaxTable plasmids={validPlasmids} />
+          </DialogContent>
+        </Box>
+      )}
+    </Dialog>
+  </>)
+}
+
+export default UploadPlasmidsButton

package/src/components/assembler/usePlasmidsLogic.js

@@ -69,11 +69,15 @@ export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
 
   const uploadPlasmids = React.useCallback(async (files) => {
     const plasmids = await Promise.all(files.map(async (file) => {
-      const data = await anyToJson(file);
-      const sequenceData = data[0].parsedSequence;
-      // Force circular
-      sequenceData.circular = true;
-      return {...sequenceData, appData: { fileName: file.name, correspondingParts: [], partInfo: [], correspondingPartsNames: [] } };
+      try {
+        const data = await anyToJson(file);
+        const sequenceData = data[0].parsedSequence;
+        // Force circular
+        sequenceData.circular = true;
+        return {...sequenceData, appData: { fileName: file.name, correspondingParts: [], partInfo: [], correspondingPartsNames: [] } };
+      } catch (e) {
+        throw new Error(`Error uploading plasmid from file ${file.name}: ${e.message}`);
+      }
     }));
     setLinkedPlasmids(plasmids);
   }, [setLinkedPlasmids]);