@opencloning/ui 2.0.0 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @opencloning/ui
 
+## 2.1.1
+
+### Patch Changes
+
+- [#790](https://github.com/OpenCloning/OpenCloning_frontend/pull/790) [`0b2a21d`](https://github.com/OpenCloning/OpenCloning_frontend/commit/0b2a21dde79f5539579bee39f0de49b01cd6c10c) Thanks [@manulera](https://github.com/manulera)! - Support for fetchin sequences created by the OC mcp server
+
+- Updated dependencies [[`0b2a21d`](https://github.com/OpenCloning/OpenCloning_frontend/commit/0b2a21dde79f5539579bee39f0de49b01cd6c10c)]:
+  - @opencloning/utils@2.1.1
+  - @opencloning/store@2.1.1
+
+## 2.1.0
+
+### Minor Changes
+
+- [#786](https://github.com/OpenCloning/OpenCloning_frontend/pull/786) [`c8c46d4`](https://github.com/OpenCloning/OpenCloning_frontend/commit/c8c46d4dc36cb8741d1bd89816c7ca82b89996b3) Thanks [@manulera](https://github.com/manulera)! - Assembler: load plasmids from the database and upload the assemblies to it.
+
+  - `@opencloning/ui`:
+    - The Assembler's plasmid buttons are grouped into a "Load Plasmids" menu (from files, from the local server, from the database).
+    - When the database interface provides `GetSequencesInBulkComponent`, plasmids can be loaded by tag or picked, and are used as `DatabaseSource`s. In that case the default plasmids of a syntax are not loaded.
+    - When it provides `SubmitCloningStrategiesInBulkComponent`, a new "Upload to DB" button uploads the assemblies with their history, as in the bulk upload of sequences with history.
+    - Both are new optional entries of the database interface (see `DummyInterface`).
+  - `@opencloning/opencloningdb`:
+    - Implements `GetSequencesInBulkComponent` and `SubmitCloningStrategiesInBulkComponent`.
+    - Exports `TagMultiSelect` (with `allowCreate` and `onCreateError`), `BulkUploadModal`, `BulkUploadPreview` and `CommonTableRow`, moved from the `opencloningdb` app.
+  - `opencloningdb`:
+    - The "Upload sequences with history" button uses `SubmitCloningStrategiesInBulkComponent`. Its validation, submission and conflict messages are now shown in the dialog instead of as alerts.
+    - The tag selects no longer drop excluded tags from the shared tags cache.
+  - `syntax-builder`: the dev server runs on port 3000 and listens on `127.0.0.1`, like the other apps.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@2.1.0
+  - @opencloning/utils@2.1.0
+
 ## 2.0.0
 
 ### Major Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@opencloning/ui",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -40,8 +40,8 @@
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
     "@mui/x-data-grid": "^8.28.5",
-    "@opencloning/store": "2.0.0",
-    "@opencloning/utils": "2.0.0",
+    "@opencloning/store": "2.1.1",
+    "@opencloning/utils": "2.1.1",
     "@teselagen/bio-parsers": "^0.4.38",
     "@teselagen/ove": "^0.8.42",
     "@teselagen/range-utils": "^0.3.20",

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

@@ -1,6 +1,8 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
+import { DatabaseProvider } from '@opencloning/ui/providers/DatabaseContext';
+import store from '@opencloning/store';
 import { AssemblerComponent } from './Assembler';
 
 
@@ -362,3 +364,185 @@ describe('<AssemblerComponent />', () => {
   });
 });
 
+describe('<AssemblerComponent /> with plasmids from a database', () => {
+  const databasePlasmids = [
+    { id: 1, key: 'CCCT-AACG', database_id: 10 },
+    { id: 2, key: 'AACG-CCCT', database_id: 20 },
+  ].map(({ id, key, database_id }) => {
+    const [left_overhang, right_overhang] = key.split('-');
+    return {
+      id,
+      type: 'databaseSequence',
+      plasmid_name: `DB Plasmid ${database_id}`,
+      database_id,
+      left_overhang,
+      right_overhang,
+      key,
+      userUploaded: true,
+      textFileSequence: { ...dummyResponse.sequences[0], id: database_id, file_content: `${dummyResponse.sequences[0].file_content}\n${database_id}` },
+    };
+  });
+
+  it('uses the database sequences and creates DatabaseSources', () => {
+    cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', (req) => {
+      // Sequence content is the one from the database, no request is made to fetch them
+      expect(req.body.sequences.map((s) => s.file_content)).to.deep.equal(databasePlasmids.map((p) => p.textFileSequence.file_content));
+      req.reply({ statusCode: 200, body: dummyResponse2 });
+    }).as('assemblySuccess');
+
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <AssemblerComponent
+          plasmids={databasePlasmids}
+          categories={mockCategories}
+          assemblyEnzymes={['assembly_enzyme']}
+          addAlert={cy.stub().as('addAlert')}
+          appInfo={{}}
+        />
+      </ConfigProvider>,
+    );
+    cy.get('[data-testid="plasmid-select"]').first().within(() => {
+      cy.get('input').click();
+    });
+    // Plasmids from the database are not highlighted (only those uploaded from files)
+    cy.get('li').contains('DB Plasmid 10').should('not.have.css', 'background-color', 'rgb(220, 237, 200)');
+    cy.get('li').contains('DB Plasmid 10').click();
+    cy.get('[data-testid="plasmid-select"]').eq(1).within(() => {
+      cy.get('input').click();
+    });
+    cy.get('li').contains('DB Plasmid 20').click();
+
+    cy.get('[data-testid="assembler-submit-button"]').click();
+    cy.wait('@assemblySuccess');
+    cy.get('[data-testid="assembler-product-table"]').contains('DB Plasmid 10').should('exist');
+
+    cy.get('[data-testid="assembler-product-table-view-button"]').first().click();
+    cy.then(() => {
+      const { sources, sequences } = store.getState().cloning;
+      const databaseSources = sources.filter((s) => s.type === 'DatabaseSource');
+      expect(databaseSources.map((s) => s.database_id)).to.deep.equal([10, 20]);
+      databaseSources.forEach((source) => {
+        expect(source.input).to.deep.equal([]);
+        const sequence = sequences.find((seq) => seq.id === source.id);
+        expect(sequence.file_content).to.equal(databasePlasmids.find((p) => p.database_id === source.database_id).textFileSequence.file_content);
+      });
+    });
+    cy.get('@addAlert').should('have.not.been.called');
+  });
+
+  describe('Upload to DB', () => {
+    function mountAndAssemble(database) {
+      cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', { statusCode: 200, body: dummyResponse2 }).as('assemblySuccess');
+      const component = (
+        <ConfigProvider config={testConfig}>
+          <AssemblerComponent
+            plasmids={databasePlasmids}
+            categories={mockCategories}
+            assemblyEnzymes={['assembly_enzyme']}
+            addAlert={cy.stub().as('addAlert')}
+            appInfo={{ backendVersion: '1', schemaVersion: '2', frontendVersion: '3' }}
+          />
+        </ConfigProvider>
+      );
+      cy.mount(database ? <DatabaseProvider value={database}>{component}</DatabaseProvider> : component);
+      cy.get('[data-testid="plasmid-select"]').first().within(() => {
+        cy.get('input').click();
+      });
+      cy.get('li').contains('DB Plasmid 10').click();
+      cy.get('[data-testid="plasmid-select"]').eq(1).within(() => {
+        cy.get('input').click();
+      });
+      cy.get('li').contains('DB Plasmid 20').click();
+      cy.get('[data-testid="assembler-submit-button"]').click();
+      cy.wait('@assemblySuccess');
+      cy.get('[data-testid="assembler-download-assemblies-button"]').should('exist');
+    }
+
+    // Mock of the database dialog, stores the props it receives
+    // submittedCount: number of strategies the mock reports as submitted on success
+    function mockDatabase(submittedCount = 1) {
+      const receivedProps = [];
+      function SubmitCloningStrategiesInBulkComponent(props) {
+        receivedProps.push(props);
+        const syncResults = Array.from({ length: submittedCount }, (_, i) => ({ file_name: `${i}.json` }));
+        return (
+          <div data-testid="mock-submit-dialog">
+            <button type="button" onClick={() => { props.onSuccess([{ id: 100 }], syncResults); props.onClose(); }}>mock success</button>
+            <button type="button" onClick={props.onClose}>mock close</button>
+          </div>
+        );
+      }
+      return { database: { name: 'MockDB', SubmitCloningStrategiesInBulkComponent }, receivedProps };
+    }
+
+    it('is not shown without a database', () => {
+      mountAndAssemble(null);
+      cy.get('[data-testid="assembler-upload-to-db-button"]').should('not.exist');
+    });
+
+    it('is not shown if the database does not support bulk submission', () => {
+      mountAndAssemble({ name: 'MockDB' });
+      cy.get('[data-testid="assembler-upload-to-db-button"]').should('not.exist');
+    });
+
+    it('is disabled when an output name is empty', () => {
+      const { database } = mockDatabase();
+      mountAndAssemble(database);
+      cy.get('[data-testid="assembler-upload-to-db-button"]').should('not.be.disabled');
+      cy.get('[data-testid="assembler-product-table-edit-button"]').first().click();
+      cy.get('[role="dialog"]').find('input').clear();
+      cy.get('[role="dialog"]').contains('Save').click();
+      cy.get('[data-testid="assembler-upload-to-db-button"]').should('be.disabled');
+    });
+
+    it('passes the cloning strategies of the assemblies to the database dialog', () => {
+      const { database, receivedProps } = mockDatabase();
+      mountAndAssemble(database);
+      cy.get('[data-testid="assembler-product-table-edit-button"]').first().click();
+      cy.get('[role="dialog"]').find('input').clear();
+      cy.get('[role="dialog"]').find('input').type('my product');
+      cy.get('[role="dialog"]').contains('Save').click();
+
+      cy.get('[data-testid="mock-submit-dialog"]').should('not.exist');
+      cy.get('[data-testid="assembler-upload-to-db-button"]').click();
+      cy.get('[data-testid="mock-submit-dialog"]').should('exist');
+      cy.then(() => {
+        const { files } = receivedProps[receivedProps.length - 1];
+        expect(files).to.have.length(1);
+        expect(files[0]).to.be.instanceOf(File);
+        expect(files[0].name).to.equal('my_product.json');
+        return files[0].text();
+      }).then((content) => {
+        const cloningStrategy = JSON.parse(content);
+        expect(cloningStrategy.backend_version).to.equal('1');
+        const databaseSources = cloningStrategy.sources.filter((s) => s.type === 'DatabaseSource');
+        expect(databaseSources.map((s) => s.database_id)).to.deep.equal([10, 20]);
+        const finalSource = cloningStrategy.sources.find((s) => s.type === 'RestrictionAndLigationSource');
+        expect(finalSource.output_name).to.equal('my_product');
+        const finalSequence = cloningStrategy.sequences.find((s) => s.id === finalSource.id);
+        expect(finalSequence.file_content.split('\n')[0]).to.contain('my_product');
+      });
+
+      cy.contains('button', 'mock success').click();
+      cy.get('[data-testid="mock-submit-dialog"]').should('not.exist');
+      cy.get('@addAlert').should('have.been.calledOnceWith', { message: 'Uploaded 1 assembly to MockDB', severity: 'success' });
+    });
+
+    it('reports the number of submitted assemblies, not the number of files', () => {
+      const { database } = mockDatabase(2);
+      mountAndAssemble(database);
+      cy.get('[data-testid="assembler-upload-to-db-button"]').click();
+      cy.contains('button', 'mock success').click();
+      cy.get('@addAlert').should('have.been.calledOnceWith', { message: 'Uploaded 2 assemblies to MockDB', severity: 'success' });
+    });
+
+    it('closes the dialog without alerts', () => {
+      const { database } = mockDatabase();
+      mountAndAssemble(database);
+      cy.get('[data-testid="assembler-upload-to-db-button"]').click();
+      cy.contains('button', 'mock close').click();
+      cy.get('[data-testid="mock-submit-dialog"]').should('not.exist');
+      cy.get('@addAlert').should('not.have.been.called');
+    });
+  });
+});

package/src/components/assembler/Assembler.jsx

@@ -18,9 +18,10 @@ import EditTextDialog from '../form/EditTextDialog';
 import useCombinatorialAssembly from './useCombinatorialAssembly';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 import error2String from '@opencloning/utils/error2String';
-import { categoryFilter, downloadAssemblerFilesAsZip, getFilesToExportFromAssembler, getDefaultAssemblyOutputName, MAX_OUTPUT_NAME_LENGTH, sanitizeOutputName } from './assembler_utils';
+import { categoryFilter, downloadAssemblerFilesAsZip, getFilesToExportFromAssembler, getCloningStrategyFilesFromAssembler, getDefaultAssemblyOutputName, MAX_OUTPUT_NAME_LENGTH, sanitizeOutputName } from './assembler_utils';
 import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 import useCloningAlerts from '../../hooks/useCloningAlerts';
+import useDatabase from '../../hooks/useDatabase';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import { useConfig } from '../../providers';
 import { isEqual } from 'lodash-es';
@@ -30,6 +31,9 @@ import { graphToMSA, partsToGraph } from './graph_utils';
 
 const { setState: setCloningState, setCurrentTab: setCurrentTabAction } = cloningActions;
 
+// Shown on the download and upload buttons when they are disabled because of the output names
+const INVALID_OUTPUT_NAMES_MESSAGE = `Output names must be unique, non-empty, and at most ${MAX_OUTPUT_NAME_LENGTH} characters`;
+
 function formatItemName(item) {
   // Fallback in case the item is not found (while updating list)
   return item ? `${item.plasmid_name}` : '-'
@@ -194,7 +198,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.userUploaded === true ? '#dcedc8' : undefined }}>
+                  <MenuItem key={key} {...restProps} sx={{ backgroundColor: plasmid.type === 'loadedFile' ? '#dcedc8' : undefined }}>
                     {formatItemName(plasmid)}
                   </MenuItem>
                 )}}
@@ -215,11 +219,16 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addA
   const [assemblyOutputNames, setAssemblyOutputNames] = React.useState([])
   const [errorMessage, setErrorMessage] = React.useState('')
   const [loadingMessage, setLoadingMessage] = React.useState('')
+  // Cloning strategy files being uploaded to the database (null if the dialog is closed)
+  const [filesToUpload, setFilesToUpload] = React.useState(null)
+  const database = useDatabase()
+  const SubmitCloningStrategiesInBulkComponent = database?.SubmitCloningStrategiesInBulkComponent
 
   const clearAssemblySelection = React.useCallback(() => {
     setRequestedAssemblies([])
     setAssemblyOutputNames([])
     setErrorMessage('')
+    setFilesToUpload(null)
   }, [])
 
   const { assembly, setCategory, setId, expandedAssemblies, assemblyComplete, canBeSubmitted, currentCategories } = useCombinatorialAssembly({ onValueChange: clearAssemblySelection, categories, plasmids })
@@ -282,6 +291,21 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addA
     }
   }, [requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo, addAlert, assemblyOutputNames])
 
+  const onUploadToDatabase = React.useCallback(() => {
+    try {
+      setFilesToUpload(getCloningStrategyFilesFromAssembler({ requestedAssemblies, appInfo, outputNames: assemblyOutputNames })
+        .map(({ name, content }) => new File([content], name, { type: 'application/json' })))
+    } catch (error) {
+      addAlert({ message: `Error preparing assemblies for upload: ${error.message}`, severity: 'error' })
+    }
+  }, [requestedAssemblies, appInfo, assemblyOutputNames, addAlert])
+
+  // syncResults are the submitted strategies (some may be skipped, e.g. already in the database)
+  const onUploadSuccess = React.useCallback((_sequenceRefs, syncResults) => {
+    const count = syncResults.length
+    addAlert({ message: `Uploaded ${count} assembl${count === 1 ? 'y' : 'ies'} to ${database.name}`, severity: 'success' })
+  }, [addAlert, database])
+
   const options = React.useMemo(() => assemblyComplete ? assembly : [...assembly, { category: '', plasmidIds: [] }], [assembly, assemblyComplete])
 
   return (
@@ -311,7 +335,16 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addA
           sx={{ p: 2, fontSize: '1.2rem' }}
           onClick={onDownloadAssemblies}
           disabled={!canDownload}
-          title={!canDownload ? 'Output names must be unique, non-empty, and at most 255 characters' : ''}>Download Assemblies
+          title={!canDownload ? INVALID_OUTPUT_NAMES_MESSAGE : ''}>Download Assemblies
+        </Button>}
+        {requestedAssemblies.length > 0 && SubmitCloningStrategiesInBulkComponent && <Button
+          color="primary"
+          variant="contained"
+          data-testid="assembler-upload-to-db-button"
+          sx={{ p: 2, fontSize: '1.2rem' }}
+          onClick={onUploadToDatabase}
+          disabled={!canDownload}
+          title={!canDownload ? INVALID_OUTPUT_NAMES_MESSAGE : `Upload the assemblies and their history to ${database.name}`}>Upload to DB
         </Button>}
       </Box>
       {errorMessage && <Alert severity="error" sx={{ my: 2, maxWidth: 300, margin: 'auto', fontSize: '1.2rem' }}>{errorMessage}</Alert>}
@@ -321,6 +354,13 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addA
           assemblyOutputNames, onOutputNameChange,
         }} />
       }
+      {filesToUpload && SubmitCloningStrategiesInBulkComponent && (
+        <SubmitCloningStrategiesInBulkComponent
+          files={filesToUpload}
+          onClose={() => setFilesToUpload(null)}
+          onSuccess={onUploadSuccess}
+        />
+      )}
 
     </Box >
   )
@@ -378,20 +418,25 @@ function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
   const httpClient = useBackendHttpClient();
   const { staticContentPath } = useConfig();
   const { addAlert } = useCloningAlerts();
+  const database = useDatabase();
+  // If plasmids can be loaded from the database, the default plasmids of the syntax are not loaded
+  const loadDefaultPlasmids = !database?.GetSequencesInBulkComponent;
   const onSyntaxSelect = React.useCallback(async (syntax, plasmids) => {
     const url = 'validate_syntax';
     try {
       await httpClient.post(url, syntax);
       setSyntax(syntax)
       clearPlasmids()
-      addPlasmids(plasmids)
+      if (loadDefaultPlasmids) {
+        addPlasmids(plasmids)
+      }
     } catch (error) {
       addAlert({
         message: error2String(error),
         severity: 'error',
       });
     }
-  }, [setSyntax, addPlasmids, clearPlasmids, httpClient, addAlert])
+  }, [setSyntax, addPlasmids, clearPlasmids, httpClient, addAlert, loadDefaultPlasmids])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>
     {existingSyntaxDialogOpen && <ExistingSyntaxDialog
@@ -448,7 +493,10 @@ function Assembler() {
   const addPlasmids = React.useCallback((newPlasmids) => {
     setPlasmids((prevPlasmids) => {
       const maxId = Math.max(...prevPlasmids.map((plasmid) => plasmid.id), 0)
-      return [...prevPlasmids, ...newPlasmids.map((plasmid, index) => ({ ...plasmid, id: maxId + index + 1 }))]
+      // Plasmids from the database that are already loaded are skipped
+      const loadedDatabaseIds = new Set(prevPlasmids.map((plasmid) => plasmid.database_id).filter((id) => id !== undefined))
+      const plasmidsToAdd = newPlasmids.filter((plasmid) => plasmid.database_id === undefined || !loadedDatabaseIds.has(plasmid.database_id))
+      return [...prevPlasmids, ...plasmidsToAdd.map((plasmid, index) => ({ ...plasmid, id: maxId + index + 1 }))]
     })
   }, [])
 

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

@@ -26,6 +26,22 @@ 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 = useBackendHttpClient();
 
@@ -37,6 +53,8 @@ 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 = classNameToEndPointMap[source.type]

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 {

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,
 };

package/src/hooks/useUrlParamsLoader.js

@@ -16,6 +16,9 @@ const httpClient = getExternalHttpClient();
 
 const { updateSource } = cloningActions;
 
+// OpenCloning MCP server, set at build time
+const mcpUrl = import.meta.env.VITE_MCP_SERVER_URL;
+
 /**
  * Hook to load sequences from URL parameters
  * Handles various source types: database, example, template, genome_coordinates, locus_tag
@@ -75,6 +78,27 @@ export default function useUrlParamsLoader() {
           });
           console.error(error);
         }
+      } else if (urlParams.source === 'mcp' && urlParams.strategy) {
+        // Only the MCP server set at build time (VITE_MCP_SERVER_URL) is fetched from, never a url from the query
+        try {
+          if (!mcpUrl) {
+            throw new Error('No MCP server configured');
+          }
+          if (!/^[A-Za-z0-9_-]+$/.test(urlParams.strategy)) {
+            throw new Error('Invalid strategy id');
+          }
+          const url = `${mcpUrl.replace(/\/$/, '')}/strategies/${encodePathSegment(urlParams.strategy)}.json`;
+          const resp = await httpClient.get(url);
+          const file = new File([JSON.stringify(resp.data)], 'mcp_strategy.json');
+          const prepared = await loadHistoryFromFile(file, { onError: setHistoryFileError });
+          await prepared?.replace();
+        } catch (error) {
+          addAlert({
+            message: 'Error loading strategy from the MCP server (it may have expired or not exist)',
+            severity: 'error',
+          });
+          console.error(error);
+        }
       } else if (urlParams.source === 'template' && urlParams.template && urlParams.key) {
         try {
           const baseUrl = 'https://assets.opencloning.org/OpenCloning-submission';

package/src/version.js

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