@opencloning/ui 1.9.2 → 2.1.0

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
+import { DatabaseProvider } from '@opencloning/ui/providers/DatabaseContext';
 import { localFilesHttpClient } from '@opencloning/ui/hooks';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import mocloSyntax from '../../../../../cypress/test_files/syntax/moclo_syntax.json';
@@ -67,8 +68,10 @@ describe('<UploadPlasmidsButton />', () => {
       </ConfigProvider>,
     );
 
-    cy.get('button').contains('Load Plasmids from Local Server').should('not.exist');
-    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
+    cy.get('[data-testid="load-plasmids-button"]').click();
+    cy.get('[data-testid="load-plasmids-from-local-server"]').should('not.exist');
+    cy.get('body').type('{esc}');
+    cy.get('[data-testid="load-plasmids-file-input"]').selectFile([
       'cypress/test_files/syntax/pYTK002.gb',
       'cypress/test_files/syntax/moclo_ytk_multi_part.gb',
       'cypress/test_files/syntax/pYTK095.gb',
@@ -148,7 +151,7 @@ describe('<UploadPlasmidsButton />', () => {
         <UploadPlasmidsButton addPlasmids={() => {}} syntax={mocloSyntax} />
       </ConfigProvider>,
     );
-    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
+    cy.get('[data-testid="load-plasmids-file-input"]').selectFile([
       'cypress/test_files/sequencing/locus.gb'],
     { force: true });
 
@@ -170,7 +173,7 @@ describe('<UploadPlasmidsButton />', () => {
       </ConfigProvider>,
     );
     
-    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
+    cy.get('[data-testid="load-plasmids-file-input"]').selectFile([
       'cypress/test_files/syntax/pYTK002.gb',
       'cypress/test_files/syntax/moclo_ytk_multi_part.gb',
       'cypress/test_files/syntax/pYTK095.gb',
@@ -207,7 +210,8 @@ describe('<UploadPlasmidsButton />', () => {
         <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
       </ConfigProvider>,
     );
-    cy.get('button').contains('Load Plasmids from Local Server').click();
+    cy.get('[data-testid="load-plasmids-button"]').click();
+    cy.get('[data-testid="load-plasmids-from-local-server"]').click();
 
     cy.get('button').contains('Submit').should('be.disabled');
     cy.get('#option-select').click();
@@ -248,7 +252,8 @@ describe('<UploadPlasmidsButton />', () => {
         <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
       </ConfigProvider>,
     );
-    cy.get('button').contains('Load Plasmids from Local Server').click();
+    cy.get('[data-testid="load-plasmids-button"]').click();
+    cy.get('[data-testid="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();
@@ -267,4 +272,81 @@ describe('<UploadPlasmidsButton />', () => {
     cy.get('@addPlasmidsSpy').should('not.have.been.called');
   });
 
+  it('does not show the database button when there is no database or it does not support bulk loading', () => {
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <DatabaseProvider value={{ name: 'MockDB' }}>
+          <UploadPlasmidsButton addPlasmids={() => {}} syntax={mocloSyntax} />
+        </DatabaseProvider>
+      </ConfigProvider>,
+    );
+    cy.get('[data-testid="load-plasmids-button"]').click();
+    cy.get('[data-testid="load-plasmids-from-files"]').should('exist');
+    cy.get('[data-testid="load-plasmids-from-database"]').should('not.exist');
+  });
+
+  it('loads plasmids from the database as DatabaseSource plasmids', () => {
+    cy.readFile('cypress/test_files/syntax/pYTK002.gb').then((pYTK002) => {
+      cy.readFile('cypress/test_files/syntax/moclo_ytk_multi_part.gb').then((multiPart) => {
+        const entries = [
+          { databaseId: 10, name: 'pYTK002_db', textFileSequence: { id: 10, type: 'TextFileSequence', sequence_file_format: 'genbank', overhang_crick_3prime: 0, overhang_watson_3prime: 0, file_content: pYTK002 } },
+          { databaseId: 20, name: 'multi_part_db', textFileSequence: { id: 20, type: 'TextFileSequence', sequence_file_format: 'genbank', overhang_crick_3prime: 0, overhang_watson_3prime: 0, file_content: multiPart } },
+        ];
+        const mockDatabase = {
+          name: 'MockDB',
+          GetSequencesInBulkComponent: ({ onSequencesLoaded }) => <button type="button" onClick={() => onSequencesLoaded(entries)}>Mock load</button>,
+        };
+        const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
+        cy.mount(
+          <ConfigProvider config={testConfig}>
+            <DatabaseProvider value={mockDatabase}>
+              <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
+            </DatabaseProvider>
+          </ConfigProvider>,
+        );
+        cy.get('[data-testid="load-plasmids-button"]').click();
+        cy.get('[data-testid="load-plasmids-from-database"]').contains('From MockDB').click();
+        cy.contains('button', 'Mock load').click();
+        // The bulk dialog closes and the valid / invalid dialog is shown
+        cy.contains('button', 'Mock load').should('not.exist');
+        cy.get('[data-testid="invalid-plasmids-box"]').contains('multi_part_db');
+        cy.get('[data-testid="valid-plasmids-box"]').contains('pYTK002_db');
+
+        cy.contains('button', 'Import valid plasmids').click();
+        cy.get('@addPlasmidsSpy').should('have.been.calledOnce');
+        cy.get('@addPlasmidsSpy').then((spy) => {
+          const plasmids = spy.getCall(0).args[0];
+          expect(plasmids).to.have.length(1);
+          const [plasmid] = plasmids;
+          expect(plasmid.type).to.equal('databaseSequence');
+          expect(plasmid.database_id).to.equal(10);
+          expect(plasmid.plasmid_name).to.equal('pYTK002_db (ConS)');
+          expect(plasmid.key).to.equal('CCCT-AACG');
+          expect(plasmid.userUploaded).to.equal(true);
+          // The sequence is kept as returned by the database
+          expect(plasmid.textFileSequence).to.deep.equal(entries[0].textFileSequence);
+        });
+      });
+    });
+  });
+
+  it('shows an error if a database sequence cannot be parsed', () => {
+    const mockDatabase = {
+      name: 'MockDB',
+      GetSequencesInBulkComponent: ({ onSequencesLoaded }) => <button type="button" onClick={() => onSequencesLoaded([{ databaseId: 1, name: 'broken', textFileSequence: { file_content: 'wrong_format' } }])}>Mock load</button>,
+    };
+    const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <DatabaseProvider value={mockDatabase}>
+          <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
+        </DatabaseProvider>
+      </ConfigProvider>,
+    );
+    cy.get('[data-testid="load-plasmids-button"]').click();
+    cy.get('[data-testid="load-plasmids-from-database"]').contains('From MockDB').click();
+    cy.contains('button', 'Mock load').click();
+    cy.get('.MuiAlert-colorError').contains('Error loading plasmid broken from database').should('exist');
+    cy.get('@addPlasmidsSpy').should('not.have.been.called');
+  });
 });

package/src/components/assembler/UploadPlasmidsButton.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Button, Dialog, DialogTitle, DialogContent, DialogActions, Alert, Box, ButtonGroup } from '@mui/material';
+import { Button, Dialog, DialogTitle, DialogContent, DialogActions, Alert, Box, ListItemIcon, Menu, MenuItem } from '@mui/material';
+import { ArrowDropDown as ArrowDropDownIcon, Dns as DnsIcon, Storage as StorageIcon, UploadFile as UploadFileIcon } from '@mui/icons-material';
 import { useConfig } from '../../providers';
+import useDatabase from '../../hooks/useDatabase';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { usePlasmidsLogic } from './usePlasmidsLogic';
 import PlasmidSyntaxTable from './PlasmidSyntaxTable';
@@ -9,14 +11,28 @@ import { jsonToGenbank } from '@teselagen/bio-parsers';
 function formatPlasmid(sequenceData) {
 
   const { appData } = sequenceData;
-  const { fileName, correspondingParts, longestFeature } = appData;
+  const { fileName, correspondingParts, longestFeature, databaseId, textFileSequence } = appData;
   const [left_overhang, right_overhang] = correspondingParts[0].split('-');
-  
+
   let plasmidName = fileName;
   if (longestFeature[0]?.name) {
     plasmidName += ` (${longestFeature[0].name})`;
   }
-  
+
+  if (databaseId !== undefined) {
+    return {
+      type: 'databaseSequence',
+      plasmid_name: plasmidName,
+      database_id: databaseId,
+      left_overhang,
+      right_overhang,
+      key: `${left_overhang}-${right_overhang}`,
+      sequenceData,
+      textFileSequence,
+      userUploaded: true,
+    };
+  }
+
   return {
     type: 'loadedFile',
     plasmid_name: plasmidName,
@@ -28,95 +44,143 @@ function formatPlasmid(sequenceData) {
     genbankString: jsonToGenbank(sequenceData),
     userUploaded: true,
   };
-  
+
 }
 
-export function UploadPlasmidsFromLocalServerButton({ handleFileChange }) {
-  const [dialogOpen, setDialogOpen] = React.useState(false);
+/** Dialog wrapping a component that loads plasmids. children is a function that receives the onLoad callback. */
+function LoadPlasmidsDialog({ title, onLoad, onClose, children }) {
   const [error, setError] = React.useState(null);
-  const {staticContentPath} = useConfig();
-  
-  const onFileSelected = React.useCallback(async (files) => {
+
+  const handleLoad = React.useCallback(async (items) => {
     try {
-      await handleFileChange(files)
-      setDialogOpen(false)
+      await onLoad(items)
+      onClose()
     } catch (e) {
       setError(e.message)
     }
-  }, [handleFileChange, setError])
-  
-  if (!staticContentPath) {
-    return null;
+  }, [onLoad, onClose])
+
+  return <Dialog open onClose={onClose}>
+    <DialogTitle>{title}</DialogTitle>
+    <DialogContent sx={{ width: '500px' }}>
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+      {children(handleLoad)}
+    </DialogContent>
+  </Dialog>
+}
+
+/**
+ * "Load Plasmids" button with a dropdown. The "From files" option is always present (opens a file picker
+ * and calls onFilesSelected), extraOptions are appended: [{ id, label, Icon, onClick }]
+ */
+function LoadPlasmidsMenuButton({ onFilesSelected, extraOptions }) {
+  const [anchorEl, setAnchorEl] = React.useState(null)
+  const open = Boolean(anchorEl)
+  const fileInputRef = React.useRef(null)
+
+  const onFileInputChange = (event) => {
+    const files = Array.from(event.target.files)
+    event.target.value = ''
+    onFilesSelected(files)
   }
-  
+
   return <>
-    <Button color="primary" onClick={() => {setError(null); setDialogOpen(true)}}>
-          Load Plasmids from Local Server
+    <input multiple type="file" ref={fileInputRef} style={{ display: 'none' }} onChange={onFileInputChange} accept=".gbk,.gb,.fasta,.fa,.dna" data-testid="load-plasmids-file-input" />
+    <Button
+      color="primary"
+      onClick={(event) => setAnchorEl(event.currentTarget)}
+      endIcon={<ArrowDropDownIcon />}
+      aria-haspopup="true"
+      aria-expanded={open ? 'true' : undefined}
+      aria-controls={open ? 'load-plasmids-menu' : undefined}
+      data-testid="load-plasmids-button"
+    >
+      Load Plasmids
     </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>}
+    <Menu id="load-plasmids-menu" anchorEl={anchorEl} open={open} onClose={() => setAnchorEl(null)} onClick={() => setAnchorEl(null)}>
+      <MenuItem onClick={() => fileInputRef.current.click()} data-testid="load-plasmids-from-files">
+        <ListItemIcon><UploadFileIcon fontSize="small" /></ListItemIcon>
+        From files
+      </MenuItem>
+      {extraOptions.map(({ id, label, Icon, onClick }) => (
+        <MenuItem key={id} onClick={onClick} data-testid={`load-plasmids-from-${id}`}>
+          <ListItemIcon><Icon fontSize="small" /></ListItemIcon>
+          {label}
+        </MenuItem>
+      ))}
+    </Menu>
   </>
 }
-  
+
+function ImportPlasmidsDialog({ validPlasmids, invalidPlasmids, onImport, onCancel }) {
+  return <Dialog
+    maxWidth="lg"
+    fullWidth
+    open={invalidPlasmids.length > 0 || validPlasmids.length > 0}
+    onClose={onCancel}
+    PaperProps={{ style: { maxHeight: '80vh' } }}
+  >
+    <DialogActions sx={{ justifyContent: 'center', position: 'sticky', top: 0, zIndex: 99, background: '#fff', py: 2 }}>
+      <Button sx={{ p: 1.5, fontSize: '1rem' }} disabled={validPlasmids.length === 0} variant="contained" color="success" onClick={onImport}>Import valid plasmids</Button>
+      <Button sx={{ p: 1.5, fontSize: '1rem' }} variant="contained" color="error" onClick={onCancel}>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>
+}
+
 function UploadPlasmidsButton({ addPlasmids, syntax }) {
-  const { uploadPlasmids, linkedPlasmids, setLinkedPlasmids } = usePlasmidsLogic(syntax)
+  const { uploadPlasmids, loadPlasmidsFromDatabase, 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))
-  }
-  
+  // null | 'local-server' | 'database'
+  const [openDialog, setOpenDialog] = React.useState(null)
+  const closeDialog = React.useCallback(() => setOpenDialog(null), [])
+  const { staticContentPath } = useConfig();
+  const database = useDatabase();
+
   const handleImportValidPlasmids = React.useCallback(() => {
     addPlasmids(validPlasmids.map(formatPlasmid))
     setLinkedPlasmids([])
   }, [addPlasmids, validPlasmids, setLinkedPlasmids])
-  
+
+  const extraMenuOptions = [
+    staticContentPath && { id: 'local-server', label: 'From local server', Icon: DnsIcon, onClick: () => setOpenDialog('local-server') },
+    database?.GetSequencesInBulkComponent && { id: 'database', label: `From ${database.name}`, Icon: StorageIcon, onClick: () => setOpenDialog('database') },
+  ].filter(Boolean)
+
   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', py: 2 }}>
-        <Button sx={{ p: 1.5, fontSize: '1rem' }} disabled={validPlasmids.length === 0} variant="contained" color="success" onClick={handleImportValidPlasmids}>Import valid plasmids</Button>
-        <Button sx={{ p: 1.5, fontSize: '1rem' }} 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>
+    <LoadPlasmidsMenuButton onFilesSelected={uploadPlasmids} extraOptions={extraMenuOptions} />
+    {openDialog === 'local-server' && (
+      <LoadPlasmidsDialog title="Load Plasmids from Local Server" onLoad={uploadPlasmids} onClose={closeDialog}>
+        {(onLoad) => <ServerStaticFileSelect onFileSelected={onLoad} type="sequence" multiple />}
+      </LoadPlasmidsDialog>
+    )}
+    {openDialog === 'database' && (
+      <LoadPlasmidsDialog title={`Load Plasmids from ${database.name}`} onLoad={loadPlasmidsFromDatabase} onClose={closeDialog}>
+        {(onLoad) => <database.GetSequencesInBulkComponent onSequencesLoaded={onLoad} />}
+      </LoadPlasmidsDialog>
+    )}
+    <ImportPlasmidsDialog
+      validPlasmids={validPlasmids}
+      invalidPlasmids={invalidPlasmids}
+      onImport={handleImportValidPlasmids}
+      onCancel={() => setLinkedPlasmids([])}
+    />
   </>)
 }
 

package/src/components/assembler/assembler_utils.js

@@ -203,26 +203,39 @@ export function getFilesToExportFromAssembler({requestedAssemblies, expandedAsse
     });
   }
 
-  for (let i = 0; i < requestedAssemblies.length; i++) {
+  getCloningStrategyFilesFromAssembler({ requestedAssemblies, appInfo, outputNames }).forEach(({ name, content, finalSequence }) => {
+    files2Export.push({ name, content });
+    files2Export.push({
+      name: name.replace(/\.json$/, '.gbk'),
+      content: finalSequence.file_content,
+    });
+  });
+  return files2Export;
+}
+
+/**
+ * One cloning strategy JSON file per assembly, with the output name set on the final sequence.
+ * Returns [{ name: '<name>.json', content: '<json string>', finalSequence }]. The input is not modified.
+ */
+export function getCloningStrategyFilesFromAssembler({ requestedAssemblies, appInfo, outputNames }) {
+  if (outputNames.length !== requestedAssemblies.length) {
+    throw new Error('outputNames must be the same length as requestedAssemblies');
+  }
+  return requestedAssemblies.map((assembly, i) => {
     const name = sanitizeOutputName(outputNames[i]);
-    const requestedAssembly = JSON.parse(JSON.stringify(requestedAssemblies[i]));
-    const jsonContent = formatStateForJsonExport({...requestedAssembly, appInfo});
+    const requestedAssembly = JSON.parse(JSON.stringify(assembly));
     const finalSequenceId = getGraftSequenceId(requestedAssembly)
     const finalSequence = requestedAssembly.sequences.find(s => s.id === finalSequenceId)
     finalSequence.file_content = editGenbankSequenceNameFromTextContent(finalSequence.file_content, name);
     const finalSource = requestedAssembly.sources.find(s => s.id === finalSequenceId)
     finalSource.output_name = name;
-    files2Export.push({
+    const jsonContent = formatStateForJsonExport({...requestedAssembly, appInfo});
+    return {
       name: `${name}.json`,
       content: JSON.stringify(jsonContent, null, 2),
-    });
-
-    files2Export.push({
-      name: `${name}.gbk`,
-      content: finalSequence.file_content,
-    });
-  }
-  return files2Export;
+      finalSequence,
+    };
+  });
 }
 
 export async function downloadAssemblerFilesAsZip(files) {

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

@@ -1,6 +1,6 @@
 import { aliasedEnzymesByName, getDigestFragmentsForRestrictionEnzymes, getReverseComplementSequenceString, getComplementSequenceString, getReverseComplementSequenceAndAnnotations } from "@teselagen/sequence-utils";
 import fs from 'fs';
-import { assignSequenceToSyntaxPart, simplifyDigestFragment, reverseComplementSimplifiedDigestFragment, tripletsToTranslation, partDataToDisplayData, arrayCombinations, getFilesToExportFromAssembler, getDefaultAssemblyOutputName } from "./assembler_utils";
+import { assignSequenceToSyntaxPart, simplifyDigestFragment, reverseComplementSimplifiedDigestFragment, tripletsToTranslation, partDataToDisplayData, arrayCombinations, getFilesToExportFromAssembler, getCloningStrategyFilesFromAssembler, getDefaultAssemblyOutputName, sanitizeOutputName } from "./assembler_utils";
 import { partsToEdgesGraph } from "./graph_utils";
 
 
@@ -379,3 +379,42 @@ describe('getFilesToExportFromAssembler', () => {
     expect(files[5].name).toBe('my_assembly_2.gbk');
   });
 });
+
+describe('getCloningStrategyFilesFromAssembler', () => {
+  const appInfo = dummyData.appInfo;
+  it('returns one cloning strategy per assembly, with the output name set on the final sequence', () => {
+    const outputNames = ['my assembly/1', 'my_assembly_2'];
+    const files = getCloningStrategyFilesFromAssembler({ requestedAssemblies: dummyData.requestedAssemblies, appInfo, outputNames });
+    expect(files).toHaveLength(2);
+    const sanitizedNames = outputNames.map(sanitizeOutputName);
+    files.forEach((file, i) => {
+      expect(file.name).toBe(`${sanitizedNames[i]}.json`);
+      const cloningStrategy = JSON.parse(file.content);
+      const originalSequences = dummyData.requestedAssemblies[i].sequences;
+      expect(cloningStrategy.sequences).toHaveLength(originalSequences.length);
+      expect(cloningStrategy.primers).toEqual(dummyData.requestedAssemblies[i].primers);
+      const finalSource = cloningStrategy.sources[cloningStrategy.sources.length - 1];
+      expect(finalSource.output_name).toBe(sanitizedNames[i]);
+      const finalSequence = cloningStrategy.sequences.find((s) => s.id === finalSource.id);
+      expect(finalSequence.file_content.split('\n')[0]).toContain(sanitizedNames[i]);
+      expect(file.finalSequence).toEqual(finalSequence);
+    });
+  });
+
+  it('keeps the database ids of the sources and does not modify the input', () => {
+    const withDatabaseSource = JSON.parse(JSON.stringify(dummyData.requestedAssemblies[0]));
+    const firstSource = withDatabaseSource.sources[0];
+    withDatabaseSource.sources[0] = { id: firstSource.id, type: 'DatabaseSource', input: [], database_id: 10 };
+    const requestedAssemblies = [withDatabaseSource];
+    const inputCopy = JSON.parse(JSON.stringify(requestedAssemblies));
+
+    const [file] = getCloningStrategyFilesFromAssembler({ requestedAssemblies, appInfo, outputNames: ['product'] });
+    const cloningStrategy = JSON.parse(file.content);
+    expect(cloningStrategy.sources[0]).toEqual({ id: firstSource.id, type: 'DatabaseSource', input: [], database_id: 10 });
+    expect(requestedAssemblies).toEqual(inputCopy);
+  });
+
+  it('throws if the number of names does not match the number of assemblies', () => {
+    expect(() => getCloningStrategyFilesFromAssembler({ requestedAssemblies: dummyData.requestedAssemblies, appInfo, outputNames: ['a'] })).toThrow();
+  });
+});

package/src/components/assembler/useAssembler.js

@@ -1,7 +1,6 @@
 import { useCallback } from 'react'
 import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions'
-import useBackendRoute from '../../hooks/useBackendRoute'
-import useHttpClient from '../../hooks/useHttpClient'
+import useBackendHttpClient from '../../hooks/useBackendHttpClient'
 import { arrayCombinations } from './assembler_utils'
 
 
@@ -27,9 +26,24 @@ function formatLoadedFile(plasmid, id) {
   }
 }
 
+function formatDatabaseSequence(plasmid, id) {
+  return {
+    source: {
+      id,
+      type: 'DatabaseSource',
+      input: [],
+      database_id: plasmid.database_id,
+    },
+    sequence: {
+      ...plasmid.textFileSequence,
+      id,
+    },
+    plasmid: plasmid,
+  }
+}
+
 export const useAssembler = () => {
-  const httpClient = useHttpClient();
-  const backendRoute = useBackendRoute();
+  const httpClient = useBackendHttpClient();
 
   const requestSources = useCallback(async (assemblerOutput) => {
     const processedOutput = []
@@ -39,9 +53,11 @@ export const useAssembler = () => {
         try {
           if (plasmid.type === 'loadedFile') {
             processedOutput[pos].push(formatLoadedFile(plasmid, pos + 1))
+          } else if (plasmid.type === 'databaseSequence') {
+            processedOutput[pos].push(formatDatabaseSequence(plasmid, pos + 1))
           } else {
             const { source } = plasmid;
-            const url = backendRoute(classNameToEndPointMap[source.type])
+            const url = classNameToEndPointMap[source.type]
             const {data} = await httpClient.post(url, source)
             if (data.sources.length !== 1) {
               console.error('Expected 1 source, got ' + data.sources.length)
@@ -59,7 +75,7 @@ export const useAssembler = () => {
       }
     }
     return processedOutput
-  }, [ httpClient, backendRoute ])
+  }, [ httpClient ])
 
 
   const requestAssemblies = useCallback(async (requestedSources, enzymes=['BsaI']) => {
@@ -67,7 +83,7 @@ export const useAssembler = () => {
     const assemblies = arrayCombinations(requestedSources);
     const output = []
     for (let assembly of assemblies) {
-      const url = backendRoute('restriction_and_ligation')
+      const url = 'restriction_and_ligation'
       const config = {
         params: {
           circular_only: true,
@@ -102,7 +118,7 @@ export const useAssembler = () => {
       }
     }
     return output;
-  }, [ httpClient, backendRoute ])
+  }, [ httpClient ])
 
   return { requestSources, requestAssemblies }
 }

package/src/components/assembler/usePlasmidsLogic.js

@@ -10,7 +10,7 @@ import { aliasedEnzymesByName } from '@teselagen/sequence-utils';
  * @param {Array} params.parts - Array of parts
  * @param {string[]} params.assemblyEnzymes - Assembly enzyme names
  * @param {Object} params.overhangNames - Mapping of overhangs to names
- * @returns {Object} - { linkedPlasmids, setLinkedPlasmids, uploadPlasmids }
+ * @returns {Object} - { linkedPlasmids, setLinkedPlasmids, uploadPlasmids, loadPlasmidsFromDatabase }
  */
 export function usePlasmidsLogic({ parts, assemblyEnzymes, overhangNames }) {
   const [linkedPlasmids, setLinkedPlasmidsState] = React.useState([]);
@@ -82,5 +82,23 @@ export function usePlasmidsLogic({ parts, assemblyEnzymes, overhangNames }) {
     setLinkedPlasmids(plasmids);
   }, [setLinkedPlasmids]);
 
-  return { linkedPlasmids, setLinkedPlasmids, uploadPlasmids };
+  // entries: [{ databaseId, name, textFileSequence }], as returned by database.GetSequencesInBulkComponent
+  // Topology is not forced to circular, since the sequence is used as stored in the database.
+  const loadPlasmidsFromDatabase = React.useCallback(async (entries) => {
+    const plasmids = await Promise.all(entries.map(async ({ databaseId, name, textFileSequence }) => {
+      try {
+        const data = await anyToJson(textFileSequence.file_content, { fileName: 'sequence.gb' });
+        if (!data[0]?.success || !data[0].parsedSequence) {
+          throw new Error(data[0]?.messages?.join(', ') || 'could not parse sequence');
+        }
+        const sequenceData = data[0].parsedSequence;
+        return { ...sequenceData, appData: { fileName: name, databaseId, textFileSequence, correspondingParts: [], partInfo: [], correspondingPartsNames: [] } };
+      } catch (e) {
+        throw new Error(`Error loading plasmid ${name} from database: ${e.message}`);
+      }
+    }));
+    setLinkedPlasmids(plasmids);
+  }, [setLinkedPlasmids]);
+
+  return { linkedPlasmids, setLinkedPlasmids, uploadPlasmids, loadPlasmidsFromDatabase };
 }

package/src/components/domesticate/DomesticateDialog.jsx

@@ -1,3 +1,4 @@
+/* istanbul ignore file -- depends on an external service (GoldenBraid) that is currently down */
 /* eslint-disable camelcase -- request/response fields match OpenAPI (snake_case) */
 import React from 'react';
 import {
@@ -19,8 +20,7 @@ import {
   TextField,
 } from '@mui/material';
 import error2String from '@opencloning/utils/error2String';
-import useBackendRoute from '../../hooks/useBackendRoute';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 import { featureToGenbankLocationString, mergeStates } from '@opencloning/utils';
 import { useDispatch, useStore } from 'react-redux';
 import { cloningActions } from '@opencloning/store/cloning';
@@ -77,8 +77,7 @@ function categoryPrefixSuffixValid(category, prefix, suffix) {
 }
 
 export default function DomesticateDialog({ open, onClose, initialContext, mainSequenceId }) {
-  const httpClient = useHttpClient();
-  const backendRoute = useBackendRoute();
+  const httpClient = useBackendHttpClient();
   const store = useStore();
 
   const location = React.useMemo(() => featureToGenbankLocationString(initialContext.annotation), [initialContext]);
@@ -131,7 +130,7 @@ export default function DomesticateDialog({ open, onClose, initialContext, mainS
       enzymes,
     };
     try {
-      const url = backendRoute('batch_cloning/domesticate');
+      const url = 'batch_cloning/domesticate';
       const { data } = await httpClient.post(url, body);
 
       const { mergedState, idShift } = mergeStates(data, store.getState().cloning);

package/src/components/dummy/DummyInterface.js

@@ -37,4 +37,10 @@ export default {
   getSequenceName: null,
   // Function to get the sequencing files from the database, see docs for what the return value should be
   getSequencingFiles: null,
+  // Component for loading several sequences at once (e.g. in the assembler), calls
+  // onSequencesLoaded with an array of { databaseId, name, textFileSequence }
+  GetSequencesInBulkComponent: null,
+  // Dialog for submitting several cloning strategies at once (e.g. the assembler products), receives
+  // { files, onClose, onSuccess }, where files is an array of File (cloning strategy JSON)
+  SubmitCloningStrategiesInBulkComponent: null,
 };