@opencloning/ui 1.9.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # @opencloning/ui
 
+## 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
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Only send the auth token to the backend, and rename the http client APIs.
+
+  - `@opencloning/utils`: `@opencloning/utils/httpClients` exports `getBackendHttpClient(backendUrl, { authenticated })`, a client that can only reach the backend (`allowAbsoluteUrls: false`) and is the only one carrying the auth token, and `getExternalHttpClient()` for whitelisted external urls. Replaces `@opencloning/utils/getHttpClient` (`getHttpClient`, `getAuthenticatedHttpClient`). `attachAuthInterceptors` refuses clients that could send the token elsewhere.
+  - `@opencloning/ui` (breaking): `useHttpClient` is renamed `useBackendHttpClient` and takes urls relative to `backendUrl`; `useBackendRoute` is removed; `useBackendAPI` is renamed `useSourceRequest` and `sendPostRequest` is renamed `sendSourceRequest`.
+  - `@opencloning/opencloningdb`, `@opencloning/opencloning-elabftw`: clients can no longer be pointed at other hosts.
+
+### Patch Changes
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Encode values interpolated into request URL paths to prevent client-side path traversal. A sample UID such as `../workspaces/1/users/5` could make a user's own request hit a different endpoint, e.g. "delete UID" removing a workspace member.
+
+  - `@opencloning/utils`: new `encodePathSegment` (`@opencloning/utils/urlUtils`), which applies `encodeURIComponent` and rejects `.` and `..`.
+  - `@opencloning/opencloningdb`: all path parameters in `endpoints.js` are encoded.
+  - `@opencloning/opencloning-elabftw`: eLabFTW item and upload paths are encoded.
+  - `@opencloning/ui`: the `example`, `key` and `template` URL parameters are encoded when loading examples and templates.
+
+- Updated dependencies [[`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394)]:
+  - @opencloning/utils@2.0.0
+  - @opencloning/store@2.0.0
+
+## 1.10.0
+
+### Minor Changes
+
+- [#773](https://github.com/OpenCloning/OpenCloning_frontend/pull/773) [`f7f376e`](https://github.com/OpenCloning/OpenCloning_frontend/commit/f7f376ee351d9b2da52413700836dc55ba54b5ea) Thanks [@manulera](https://github.com/manulera)! - Handle failed NCBI request to `dataset_report` in `SourceGenomeRegion`.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.10.0
+  - @opencloning/utils@1.10.0
+
+## 1.9.5
+
+### Patch Changes
+
+- Updated dependencies [[`73363e7`](https://github.com/OpenCloning/OpenCloning_frontend/commit/73363e7a7f7e494e20a54bd87e5dba97f8a9197e)]:
+  - @opencloning/utils@1.9.5
+  - @opencloning/store@1.9.5
+
+## 1.9.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.9.4
+  - @opencloning/utils@1.9.4
+
+## 1.9.3
+
+### Patch Changes
+
+- [#762](https://github.com/OpenCloning/OpenCloning_frontend/pull/762) [`df69a1b`](https://github.com/OpenCloning/OpenCloning_frontend/commit/df69a1bfb3b3128e93d89eef48a29f81a54ebb82) Thanks [@manulera](https://github.com/manulera)! - Fix QuotaExceededError when adding more than ~10 AB1/sequencing files (OpenCloning/OpenCloning#82). The raw contents of the verification files used to be persisted in Web Storage (localStorage, later sessionStorage), which has a quota of ~5 MB, so submitting around 10+ AB1 files failed with `QuotaExceededError` and the files/alignments disappeared. The contents are now kept in an in-memory store for the duration of the tab session, which has no quota.
+
+- Updated dependencies [[`df69a1b`](https://github.com/OpenCloning/OpenCloning_frontend/commit/df69a1bfb3b3128e93d89eef48a29f81a54ebb82)]:
+  - @opencloning/utils@1.9.3
+  - @opencloning/store@1.9.3
+
 ## 1.9.2
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@opencloning/ui",
-  "version": "1.9.2",
+  "version": "2.1.0",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -25,8 +25,7 @@
     "./hooks/useAlerts": "./src/hooks/useAlerts.js",
     "./hooks/useCloningAlerts": "./src/hooks/useCloningAlerts.js",
     "./hooks/useSequencingAlignment": "./src/hooks/useSequencingAlignment.js",
-    "./hooks/useBackendRoute": "./src/hooks/useBackendRoute.js",
-    "./hooks/useHttpClient": "./src/hooks/useHttpClient.js",
+    "./hooks/useBackendHttpClient": "./src/hooks/useBackendHttpClient.js",
     "./components/SequenceViewer": "./src/components/SequenceViewer.jsx",
     "./standalone": "./src/StandAloneOpenCloning.js"
   },
@@ -41,14 +40,14 @@
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
     "@mui/x-data-grid": "^8.28.5",
-    "@opencloning/store": "1.9.2",
-    "@opencloning/utils": "1.9.2",
+    "@opencloning/store": "2.1.0",
+    "@opencloning/utils": "2.1.0",
     "@teselagen/bio-parsers": "^0.4.38",
     "@teselagen/ove": "^0.8.42",
     "@teselagen/range-utils": "^0.3.20",
     "@teselagen/sequence-utils": "^0.3.42",
     "@zip.js/zip.js": "^2.8.26",
-    "axios": "^1.16.0",
+    "axios": "^1.20.0",
     "lodash-es": "^4.18.1",
     "react-draggable": "^4.5.0"
   },

package/src/components/CloningSpeedDial.jsx

@@ -7,8 +7,7 @@ import { getSequencesNotInDatabase } from '@opencloning/utils/network';
 import { cloningActions } from '@opencloning/store/cloning';
 import useCloningAlerts from '../hooks/useCloningAlerts';
 import { cloneDeep } from 'lodash-es';
-import useBackendRoute from '../hooks/useBackendRoute';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 
 const { setState: setCloningState } = cloningActions;
 
@@ -17,9 +16,8 @@ function useLocateSequencesInDatabaseAction() {
   const database = useDatabase();
   const store = useStore();
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
-  const url = backendRoute('normalize_cloning_strategy');
+  const httpClient = useBackendHttpClient();
+  const url = 'normalize_cloning_strategy';
 
   const { addAlert } = useCloningAlerts();
   const main = React.useCallback(async () => {

package/src/components/EditSequenceNameDialog.jsx

@@ -4,16 +4,14 @@ import { useDispatch, useSelector, useStore } from 'react-redux';
 import { isEqual } from 'lodash-es';
 import { cloningActions } from '@opencloning/store/cloning';
 import error2String from '@opencloning/utils/error2String';
-import useBackendRoute from '../hooks/useBackendRoute';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 
 function EditSequenceNameDialog({ id, dialogOpen, setDialogOpen }) {
   const [name, setName] = React.useState('');
   const [originalName, setOriginalName] = React.useState('');
   const [error, setError] = React.useState('');
   const store = useStore();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   const { updateSequenceAndItsSource } = cloningActions;
   const dispatch = useDispatch();
@@ -23,7 +21,7 @@ function EditSequenceNameDialog({ id, dialogOpen, setDialogOpen }) {
     const source = sources.find((s) => s.id === id);
     const sequence = sequences.find((s) => s.id === id);
     setError('');
-    const url = backendRoute('rename_sequence');
+    const url = 'rename_sequence';
     try {
       const { data: newSequence } = await httpClient.post(url, sequence, { params: { name } });
       const newSource = { ...source, output_name: newName };

package/src/components/ExternalServicesStatusCheck.jsx

@@ -1,8 +1,7 @@
 import { Alert, Button, CircularProgress } from '@mui/material';
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import useBackendRoute from '../hooks/useBackendRoute';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 import { cloningActions } from '@opencloning/store/cloning';
 import { version } from '../index';
 
@@ -14,8 +13,7 @@ function ExternalServicesStatusCheck() {
   const [loading, setLoading] = React.useState(false);
   const [successMessage, setSuccessMessage] = React.useState('');
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   React.useEffect(() => {
     dispatch(updateAppInfo({ frontendVersion: version }));
     setLoading(true);
@@ -23,7 +21,7 @@ function ExternalServicesStatusCheck() {
       const services = [
         {
           message: 'Backend server is down',
-          url: backendRoute('version'),
+          url: 'version',
           check: (resp) => {
             if (resp.status === 200) {
               const { backend_version: backendVersion, schema_version: schemaVersion } = resp.data;

package/src/components/LoadCloningHistoryWrapper.jsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import { batch, useDispatch, useStore } from 'react-redux';
 import useCloningAlerts from '../hooks/useCloningAlerts';
-import useBackendRoute from '../hooks/useBackendRoute';
 import useCloningHistoryLoader from '../hooks/useCloningHistoryLoader';
 import { getEmptyPlaceholderSource } from '@opencloning/store/cloning_utils';
 import { cloningActions } from '@opencloning/store/cloning';
 import HistoryLoadedDialog from './HistoryLoadedDialog';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 
 const { deleteSourceAndItsChildren, addSourceAndItsOutputSequence } = cloningActions;
 
-async function processSequenceFiles(files, backendRoute, httpClient) {
+async function processSequenceFiles(files, httpClient) {
   const allSources = [];
   const allSequences = [];
   const allWarnings = [];
@@ -27,7 +26,7 @@ async function processSequenceFiles(files, backendRoute, httpClient) {
         'content-type': 'multipart/form-data',
       },
     };
-    const url = backendRoute('read_from_file');
+    const url = 'read_from_file';
     try {
       const { data: { sources, sequences }, headers } = await httpClient.post(url, formData, config);
       // If there are warnings, add them to the list of warnings
@@ -57,9 +56,8 @@ async function processSequenceFiles(files, backendRoute, httpClient) {
 function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
   const { addAlert } = useCloningAlerts();
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
   const store = useStore();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const { loadHistoryFromFile, loadSnapgeneHistory } = useCloningHistoryLoader();
   const [fileLoaderFunctions, setFileLoaderFunctions] = React.useState(null);
 
@@ -117,7 +115,7 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
         }
       }
       try {
-        const { sources, sequences, warnings } = await processSequenceFiles(files, backendRoute, httpClient);
+        const { sources, sequences, warnings } = await processSequenceFiles(files, httpClient);
         batch(() => {
           // If there is only one source and it is empty, delete it
           const emptyPlaceholder = getEmptyPlaceholderSource(cloningState.sources);

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,10 +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 useBackendRoute from '../../hooks/useBackendRoute';
-import useHttpClient from '../../hooks/useHttpClient';
+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';
@@ -31,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}` : '-'
@@ -195,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>
                 )}}
@@ -216,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 })
@@ -283,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 (
@@ -312,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>}
@@ -322,6 +354,13 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addA
           assemblyOutputNames, onOutputNameChange,
         }} />
       }
+      {filesToUpload && SubmitCloningStrategiesInBulkComponent && (
+        <SubmitCloningStrategiesInBulkComponent
+          files={filesToUpload}
+          onClose={() => setFilesToUpload(null)}
+          onSuccess={onUploadSuccess}
+        />
+      )}
 
     </Box >
   )
@@ -376,24 +415,28 @@ function categoriesFromSyntaxAndPlasmids(syntax, plasmids) {
 
 function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
   const [existingSyntaxDialogOpen, setExistingSyntaxDialogOpen] = React.useState(false)
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const { staticContentPath } = useConfig();
-  const backendRoute = useBackendRoute();
   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 = backendRoute('validate_syntax');
+    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, backendRoute, addAlert])
+  }, [setSyntax, addPlasmids, clearPlasmids, httpClient, addAlert, loadDefaultPlasmids])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>
     {existingSyntaxDialogOpen && <ExistingSyntaxDialog
@@ -450,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/ExistingSyntaxDialog.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box, ButtonGroup, Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
-import getHttpClient from '@opencloning/utils/getHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { readSubmittedTextFile } from '@opencloning/utils/readNwrite';
 import { normalizeSyntaxEnzymes } from '@opencloning/utils/normalizeSyntax';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 
-const httpClient = getHttpClient();
+const httpClient = getExternalHttpClient();
 const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
 httpClient.defaults.baseURL = baseURL;