@opencloning/opencloningdb 1.9.1 → 2.2.0

package/package.json

@@ -1,23 +1,24 @@
 {
   "license": "MIT",
   "name": "@opencloning/opencloningdb",
-  "version": "1.9.1",
+  "version": "2.2.0",
   "type": "module",
   "main": "./src/index.js",
   "exports": {
-    ".": "./src/index.js"
+    ".": "./src/index.js",
+    "./sequenceTypes": "./src/sequenceTypes.js"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/OpenCloning/OpenCloning_frontend.git",
-    "directory": "packages/opencloningdb"
+    "url": "https://github.com/OpenCloning/OpenCloning.git",
+    "directory": "js/packages/opencloningdb"
   },
   "dependencies": {
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
-    "@opencloning/ui": "2.1.1",
-    "@opencloning/utils": "2.1.1",
-    "axios": "^1.20.0"
+    "@opencloning/ui": "2.2.0",
+    "@opencloning/utils": "2.2.0",
+    "axios": "^1.21.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/GetSequenceFileAndDatabaseIdComponent.cy.jsx

@@ -101,4 +101,3 @@ describe('<GetSequenceFileAndDatabaseIdComponent />', () => {
 
   });
 });
-

package/src/GetSequencesInBulkComponent.cy.jsx

@@ -13,6 +13,7 @@ function expectLoadedSequences(spy, stubBody) {
   expect(sequences).to.deep.equal(stubBody.map(({ sequence_ref, sequence }) => ({
     databaseId: sequence_ref.id,
     name: formatSequenceName(sequence_ref),
+    seguid: sequence_ref.seguid,
     textFileSequence: sequence,
   })));
 }
@@ -20,11 +21,12 @@ function expectLoadedSequences(spy, stubBody) {
 describe('<GetSequencesInBulkComponent />', () => {
   beforeEach(() => {
     cy.setupOpenCloningDBTestAuth();
+    // TagMultiSelect fetches the tags on mount, in every test
+    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
   });
 
   it('loads all sequences with a tag', () => {
     const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
-    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
     cy.interceptOpenCloningDBStub('get_text_file_sequences_by_tag', { alias: 'getSequences' });
 
     cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={onSequencesLoadedSpy} />);
@@ -41,6 +43,56 @@ describe('<GetSequencesInBulkComponent />', () => {
     });
   });
 
+  it('loads only the sequences of the selected types', () => {
+    const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
+    cy.interceptOpenCloningDBStub('get_text_file_sequences_by_tag_plasmids', { alias: 'getSequences' });
+
+    cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={onSequencesLoadedSpy} />);
+
+    cy.wait('@getTags');
+    clickMultiSelectOption('Tags', TAG_NAME, 'div');
+    cy.get('input[placeholder="All types"]').should('exist');
+    clickMultiSelectOption('Sequence types', 'Plasmid', 'div');
+    cy.contains('.MuiChip-root', 'Plasmid').should('exist');
+    cy.contains('button', 'Load sequences').click();
+    cy.wait('@getSequences');
+
+    cy.getStub('get_text_file_sequences_by_tag_plasmids').then((stub) => {
+      expect(stub.response.body).to.have.length.greaterThan(0);
+      stub.response.body.forEach(({ sequence_ref }) => expect(sequence_ref.sequence_type).to.equal('plasmid'));
+      cy.get('@onSequencesLoadedSpy').should((spy) => expectLoadedSequences(spy, stub.response.body));
+    });
+  });
+
+  it('uses defaultSequenceTypes as the initial type filter, which can be cleared', () => {
+    const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
+    cy.interceptOpenCloningDBStub('get_text_file_sequences_by_tag_plasmids', { alias: 'getPlasmids' });
+
+    cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={onSequencesLoadedSpy} defaultSequenceTypes={['plasmid']} />);
+
+    cy.wait('@getTags');
+    clickMultiSelectOption('Tags', TAG_NAME, 'div');
+    cy.contains('button', 'Load sequences').click();
+    cy.wait('@getPlasmids');
+    cy.getStub('get_text_file_sequences_by_tag_plasmids').then((stub) => {
+      cy.get('@onSequencesLoadedSpy').should((spy) => expectLoadedSequences(spy, stub.response.body));
+    });
+
+    // Unselecting the default type loads sequences of all types
+    cy.interceptOpenCloningDBStub('get_text_file_sequences_by_tag', { alias: 'getAll' });
+    cy.contains('.MuiChip-root', 'Plasmid').find('.MuiChip-deleteIcon').click();
+    cy.get('input[placeholder="All types"]').should('exist');
+    cy.contains('button', 'Load sequences').click();
+    cy.wait('@getAll');
+  });
+
+  it('does not show the type filter when picking sequences', () => {
+    cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={cy.spy()} defaultSequenceTypes={['plasmid']} />);
+    cy.contains('label', 'Sequence types').should('exist');
+    cy.contains('button', 'Pick sequences').click();
+    cy.contains('label', 'Sequence types').should('not.exist');
+  });
+
   it('loads the picked sequences', () => {
     const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
     cy.interceptOpenCloningDBStub('get_sequences_search_by_name', { alias: 'searchByName' });
@@ -64,7 +116,6 @@ describe('<GetSequencesInBulkComponent />', () => {
 
   it('shows the error returned by the server', () => {
     const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
-    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
     cy.intercept('GET', `**${endpoints.sequenceTextFiles}*`, {
       statusCode: 400,
       body: { detail: 'Too many sequences (300), the maximum is 200.' },
@@ -82,7 +133,6 @@ describe('<GetSequencesInBulkComponent />', () => {
 
   it('shows a message when no sequences have the tag', () => {
     const onSequencesLoadedSpy = cy.spy().as('onSequencesLoadedSpy');
-    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
     cy.intercept('GET', `**${endpoints.sequenceTextFiles}*`, { statusCode: 200, body: [] }).as('getSequences');
 
     cy.mount(<GetSequencesInBulkComponent onSequencesLoaded={onSequencesLoadedSpy} />);
@@ -91,7 +141,7 @@ describe('<GetSequencesInBulkComponent />', () => {
     clickMultiSelectOption('Tags', TAG_NAME, 'div');
     cy.contains('button', 'Load sequences').click();
     cy.wait('@getSequences');
-    cy.contains('No sequences found with the selected tags.').should('exist');
+    cy.contains('No sequences found with the selected tags and types.').should('exist');
     cy.get('@onSequencesLoadedSpy').should('not.have.been.called');
   });
 
@@ -110,7 +160,7 @@ describe('<GetSequencesInBulkComponent />', () => {
     cy.contains('button', 'Load sequences').click();
     cy.wait('@getSequences');
     cy.contains('The selected sequences have no content (template sequences cannot be loaded).').should('exist');
-    cy.contains('No sequences found with the selected tags.').should('not.exist');
+    cy.contains('No sequences found with the selected tags and types.').should('not.exist');
     cy.get('@onSequencesLoadedSpy').should('not.have.been.called');
   });
 });

package/src/GetSequencesInBulkComponent.jsx

@@ -4,17 +4,21 @@ import { Alert, Button, CircularProgress, FormControl, Stack, ToggleButton, Togg
 import SequenceSelect from './SequenceSelect';
 import TagMultiSelect from './TagMultiSelect';
 import { formatSequenceName, openCloningDBHttpClient } from './common';
+import SequenceTypeSelect from './SequenceTypeSelect';
 import endpoints from './endpoints';
 
 /**
  * Load several sequences from OpenCloningDB, either all the sequences with any of the selected tags,
  * or the sequences picked by the user. Template sequences are not included (they have no content).
+ * When loading by tag, the sequences can be restricted to some sequence types (none selected means all types),
+ * defaultSequenceTypes sets the initial selection (e.g. ['plasmid']).
  *
- * onSequencesLoaded receives an array of { databaseId, name, textFileSequence }.
+ * onSequencesLoaded receives an array of { databaseId, name, seguid, textFileSequence }.
  */
-function GetSequencesInBulkComponent({ onSequencesLoaded }) {
+function GetSequencesInBulkComponent({ onSequencesLoaded, defaultSequenceTypes = [] }) {
   const [mode, setMode] = React.useState('tags');
   const [selectedTags, setSelectedTags] = React.useState([]);
+  const [selectedSequenceTypes, setSelectedSequenceTypes] = React.useState(defaultSequenceTypes);
   const [selectedSequences, setSelectedSequences] = React.useState([]);
   const [emptyResult, setEmptyResult] = React.useState(false);
 
@@ -24,6 +28,7 @@ function GetSequencesInBulkComponent({ onSequencesLoaded }) {
       return data.map(({ sequence_ref, sequence }) => ({
         databaseId: sequence_ref.id,
         name: formatSequenceName(sequence_ref),
+        seguid: sequence_ref.seguid,
         textFileSequence: sequence,
       }));
     },
@@ -48,7 +53,9 @@ function GetSequencesInBulkComponent({ onSequencesLoaded }) {
   const onLoad = () => {
     setEmptyResult(false);
     // selectedTags are ids, selectedSequences are sequence objects
-    mutate(mode === 'tags' ? { tags: selectedTags } : { ids: selectedSequences.map((item) => item.id) });
+    mutate(mode === 'tags'
+      ? { tags: selectedTags, sequence_types: selectedSequenceTypes }
+      : { ids: selectedSequences.map((item) => item.id) });
   };
 
   return (
@@ -62,8 +69,18 @@ function GetSequencesInBulkComponent({ onSequencesLoaded }) {
           ? <TagMultiSelect label="Tags" value={selectedTags} onChange={setSelectedTags} allowCreate={false} />
           : <SequenceSelect label="Sequences" value={selectedSequences} onChange={setSelectedSequences} />}
       </FormControl>
+      {mode === 'tags' && (
+        <SequenceTypeSelect
+          multiple
+          label="Sequence types"
+          placeholder="All types"
+          size="medium"
+          value={selectedSequenceTypes}
+          onChange={setSelectedSequenceTypes}
+        />
+      )}
       {error && <Alert severity="error">{error.response?.data?.detail || error.message || 'Could not load sequences from OpenCloningDB'}</Alert>}
-      {emptyResult && <Alert severity="info">{mode === 'tags' ? 'No sequences found with the selected tags.' : 'The selected sequences have no content (template sequences cannot be loaded).'}</Alert>}
+      {emptyResult && <Alert severity="info">{mode === 'tags' ? 'No sequences found with the selected tags and types.' : 'The selected sequences have no content (template sequences cannot be loaded).'}</Alert>}
       {isPending
         ? <CircularProgress sx={{ alignSelf: 'center' }} />
         : <Button variant="contained" disabled={selection.length === 0} onClick={onLoad}>Load sequences</Button>}

package/src/LoadHistoryComponent.cy.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import LoadHistoryComponent from './LoadHistoryComponent';
 
-const DATABASE_ID = 10;
+// The sequence id comes from the stub (/db/sequences/<id>/cloning_strategy), so it follows the seed data
+const databaseIdFromStub = (stub) => Number(stub.endpoint.match(/\/db\/sequences\/(\d+)\//)[1]);
 
 describe('<LoadHistoryComponent />', () => {
   it('calls loadDatabaseFile with the file returned by the API', () => {
@@ -10,22 +11,23 @@ describe('<LoadHistoryComponent />', () => {
 
     cy.interceptOpenCloningDBStub('get_cloning_strategy', { alias: 'getCloningStrategy' });
 
-    cy.mount(
-      <LoadHistoryComponent
-        databaseId={DATABASE_ID}
-        loadDatabaseFile={loadDatabaseFileSpy}
-      />,
-    );
-
     cy.getStub('get_cloning_strategy').then((cloningStrategyStub) => {
+      const databaseId = databaseIdFromStub(cloningStrategyStub);
       const expectedContent = JSON.stringify(cloningStrategyStub.response.body);
 
+      cy.mount(
+        <LoadHistoryComponent
+          databaseId={databaseId}
+          loadDatabaseFile={loadDatabaseFileSpy}
+        />,
+      );
+
       cy.wait('@getCloningStrategy').its('request.url').should('include', cloningStrategyStub.endpoint);
       cy.get('@loadDatabaseFileSpy').should('have.been.calledOnce');
 
       cy.get('@loadDatabaseFileSpy').then((spy) => {
         const [file, id, flag] = spy.lastCall.args;
-        expect(id).to.equal(DATABASE_ID);
+        expect(id).to.equal(databaseId);
         expect(flag).to.equal(true);
 
         return cy.readFileAsText(file).then((content) => {
@@ -47,14 +49,14 @@ describe('<LoadHistoryComponent />', () => {
           headers: cloningStrategyStub.response.headers,
         });
       }).as('getCloningStrategy');
-    });
 
-    cy.mount(
-      <LoadHistoryComponent
-        databaseId={DATABASE_ID}
-        loadDatabaseFile={cy.stub()}
-      />,
-    );
+      cy.mount(
+        <LoadHistoryComponent
+          databaseId={databaseIdFromStub(cloningStrategyStub)}
+          loadDatabaseFile={cy.stub()}
+        />,
+      );
+    });
 
     cy.get('.MuiCircularProgress-svg', { timeout: 500 }).should('exist');
     cy.wait('@getCloningStrategy');
@@ -77,14 +79,14 @@ describe('<LoadHistoryComponent />', () => {
           });
         }
       }).as('getCloningStrategy');
-    });
 
-    cy.mount(
-      <LoadHistoryComponent
-        databaseId={DATABASE_ID}
-        loadDatabaseFile={cy.stub()}
-      />,
-    );
+      cy.mount(
+        <LoadHistoryComponent
+          databaseId={databaseIdFromStub(cloningStrategyStub)}
+          loadDatabaseFile={cy.stub()}
+        />,
+      );
+    });
 
     cy.wait('@getCloningStrategy');
     cy.contains('Failed to load history file.').should('exist');

package/src/OpenCloningDBInterface.test.js

@@ -108,7 +108,9 @@ describe('getSequencingFiles', () => {
     addStubToServer(server, listStub);
     addStubToServer(server, downloadStub);
 
-    const files = await OpenCloningDBInterface.getSequencingFiles(10);
+    // The sequence id comes from the stub (/db/sequences/<id>/sequencing_files), so it follows the seed data
+    const sequenceId = Number(listStub.endpoint.match(/\/db\/sequences\/(\d+)\//)[1]);
+    const files = await OpenCloningDBInterface.getSequencingFiles(sequenceId);
 
     expect(files).toHaveLength(1);
     expect(files[0].id).toBe(listStub.response.body[0].id);

package/src/SequenceTypeSelect.cy.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import SequenceTypeSelect from './SequenceTypeSelect';
+import { SEQUENCE_TYPE_LABELS } from './sequenceTypes';
+import { clickMultiSelectOption } from '../../../cypress/e2e/common_functions';
+
+describe('<SequenceTypeSelect />', () => {
+  it('single: shows all the types and calls onChange with the selected type', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    cy.mount(<SequenceTypeSelect value="locus" onChange={onChangeSpy} labelId="my-type-label" />);
+
+    cy.contains('label', 'Type').should('have.attr', 'id', 'my-type-label');
+    cy.contains('Locus').click();
+    cy.get('ul[aria-labelledby="my-type-label"] li').should('have.length', Object.keys(SEQUENCE_TYPE_LABELS).length);
+    cy.get('ul[aria-labelledby="my-type-label"] li').contains('PCR product').click();
+    cy.get('@onChangeSpy').should('have.been.calledOnceWith', 'pcr_product');
+  });
+
+  it('single: types restricts the options', () => {
+    cy.mount(<SequenceTypeSelect value="locus" onChange={cy.spy()} labelId="my-type-label" types={['locus', 'allele']} />);
+    cy.contains('Locus').click();
+    cy.get('ul[aria-labelledby="my-type-label"] li').should('have.length', 2);
+    cy.get('ul[aria-labelledby="my-type-label"] li').contains('Allele').should('exist');
+  });
+
+  it('multiple: adds and removes types, and shows the placeholder when empty', () => {
+    function Wrapper({ onChange }) {
+      const [value, setValue] = React.useState(['plasmid']);
+      return (
+        <SequenceTypeSelect
+          multiple
+          label="Sequence types"
+          placeholder="All types"
+          value={value}
+          onChange={(v) => { setValue(v); onChange(v); }}
+        />
+      );
+    }
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    cy.mount(<Wrapper onChange={onChangeSpy} />);
+
+    cy.contains('.MuiChip-root', 'Plasmid').should('exist');
+    cy.get('input[placeholder="All types"]').should('not.exist');
+
+    clickMultiSelectOption('Sequence types', 'Allele', 'div');
+    cy.get('@onChangeSpy').should('have.been.calledWith', ['plasmid', 'allele']);
+
+    cy.contains('.MuiChip-root', 'Plasmid').find('.MuiChip-deleteIcon').click();
+    cy.contains('.MuiChip-root', 'Allele').find('.MuiChip-deleteIcon').click();
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('input[placeholder="All types"]').should('exist');
+  });
+});

package/src/SequenceTypeSelect.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { ChipMultiSelect } from '@opencloning/ui';
+import { SEQUENCE_TYPE_LABELS } from './sequenceTypes';
+
+const ALL_SEQUENCE_TYPES = Object.keys(SEQUENCE_TYPE_LABELS);
+
+/**
+ * Select of sequence types (e.g. 'plasmid'), shown with their labels.
+ *
+ * - multiple=false: value is a type and onChange receives a type.
+ * - multiple=true: value is an array of types and onChange receives an array of types.
+ *   placeholder is shown when nothing is selected (e.g. 'All types' when used as a filter).
+ *
+ * types restricts the options (all types by default). labelId sets the id of the label,
+ * which the options list references with aria-labelledby (single select only).
+ */
+function SequenceTypeSelect({
+  value, onChange, multiple = false, types = ALL_SEQUENCE_TYPES, label = 'Type', labelId, placeholder,
+  disabled, size = 'small', sx,
+}) {
+  const generatedId = React.useId();
+  const id = labelId ?? `sequence-type-select-${generatedId}`;
+  const options = React.useMemo(
+    () => types.map((type) => ({ id: type, label: SEQUENCE_TYPE_LABELS[type] ?? type })),
+    [types],
+  );
+
+  if (multiple) {
+    return (
+      <ChipMultiSelect
+        label={label}
+        options={options}
+        value={value ?? []}
+        onChange={onChange}
+        placeholder={placeholder}
+        disabled={disabled}
+        size={size}
+        sx={sx}
+      />
+    );
+  }
+
+  return (
+    <FormControl size={size} sx={sx} disabled={disabled}>
+      <InputLabel id={id}>{label}</InputLabel>
+      <Select labelId={id} label={label} value={value ?? ''} onChange={(e) => onChange(e.target.value)}>
+        {options.map((option) => (
+          <MenuItem key={option.id} value={option.id}>{option.label}</MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+export default SequenceTypeSelect;

package/src/SubmitCloningStrategiesInBulkComponent.cy.jsx

@@ -34,6 +34,8 @@ function mountComponent() {
 describe('<SubmitCloningStrategiesInBulkComponent />', () => {
   beforeEach(() => {
     cy.setupOpenCloningDBTestAuth();
+    // TagMultiSelect fetches the tags on mount, in every test
+    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
   });
 
   it('validates the files as multipart and shows the status of each one', () => {
@@ -62,7 +64,6 @@ describe('<SubmitCloningStrategiesInBulkComponent />', () => {
 
   it('submits the importable rows with the selected tags', () => {
     cy.intercept(validateUrl, { statusCode: 200, body: validationRows }).as('validate');
-    cy.interceptOpenCloningDBStub('get_tags', { alias: 'getTags' });
     cy.intercept(submitUrl, (req) => {
       req.reply({ statusCode: 200, body: createdSequences });
     }).as('submit');

package/src/bulk_upload/BulkUploadPreview.jsx

@@ -38,4 +38,4 @@ export default function BulkUploadPreview({
       {renderTable(rowsInfo.orderedRows)}
     </BulkUploadPreviewTableWrapper>
   );
-}
+}

package/src/bulk_upload/common.jsx

@@ -4,6 +4,19 @@ import TagMultiSelect from '../TagMultiSelect';
 import { Cancel as CancelIcon, CheckCircle as CheckCircleIcon, Info as InfoIcon, Warning as WarningIcon } from '@mui/icons-material';
 
 
+/** Scrollable container for the bulk tables, so that they fit in a BulkUploadModal. */
+export function BulkTableContainer({ children }) {
+  return (
+    <TableContainer
+      component={Paper}
+      variant="outlined"
+      sx={{ mb: 2, maxHeight: '55vh', overflowY: 'auto', flex: 1, minHeight: 0 }}
+    >
+      {children}
+    </TableContainer>
+  );
+}
+
 /**
  * Wraps a bulk upload preview table with the summary and the import / cancel buttons.
  * The tag field is shown if onBulkTagsChange is passed, onTagCreateError receives the error if creating a tag fails.
@@ -49,13 +62,9 @@ export function BulkUploadPreviewTableWrapper({
         {orderingText}
       </Typography>
 
-      <TableContainer
-        component={Paper}
-        variant="outlined"
-        sx={{ mb: 2, maxHeight: '55vh', overflowY: 'auto', flex: 1, minHeight: 0 }}
-      >
+      <BulkTableContainer>
         {children}
-      </TableContainer>
+      </BulkTableContainer>
 
       <Typography variant="body2" sx={{ mb: 2 }}>
         {summaryText}
@@ -104,13 +113,19 @@ export function BulkUploadPreviewTableWrapper({
     </>
   );
 }
-  
+
 export function StatusIcon({ status }) {
+  if (!status) {
+    return null;
+  }
   const isClear = status === 'clear';
   const isError = status === 'error';
   const isInfo = status === 'info';
+  const isPending = status === 'pending';
 
-  return isClear ? (
+  return isPending ? (
+    <CircularProgress size={20} data-testid="status-icon-pending" />
+  ) : isClear ? (
     <CheckCircleIcon color="success" />
   ) : isError ? (
     <CancelIcon color="error" />
@@ -122,10 +137,11 @@ export function StatusIcon({ status }) {
 }
 
 
-export function CommonTableRow({ status, issues, children }) {
+/** Table row with a status icon cell, the children cells and an issues cell. Other props are passed to the TableRow. */
+export function CommonTableRow({ status, issues = [], children, ...rowProps }) {
 
   return (
-    <TableRow>
+    <TableRow {...rowProps}>
       <TableCell align="center" padding="checkbox">
         <StatusIcon status={status} />
       </TableCell>

package/src/endpoints.js

@@ -14,7 +14,9 @@ const endpoints = {
   sequenceChangeCircularity: (id) => `/sequences/${e(id)}/change_circularity`,
   sequencePrimers: (id) => `/sequences/${e(id)}/primers`,
   sequenceSequencingFiles: (id) => `/sequences/${e(id)}/sequencing_files`,
+  sequencingFilesBulk: '/sequences/sequencing_files/bulk',
   sequenceSearch: '/sequences/search',
+  sequencesBySeguid: (seguid) => `/sequences/by-seguid/${e(seguid)}`,
   sequencesValidateUpload: '/sequences/validate-upload',
   sequencesBulk: '/sequences/bulk',
   sequencesCloningStrategyBulkValidate: '/sequences/cloning_strategy/bulk/validate',

package/src/index.js

@@ -1,9 +1,13 @@
 export { default as OpenCloningDBInterface } from './OpenCloningDBInterface.js';
 export { openCloningDBHttpClient, setUnauthorizedHandler, setHttpClientTokenGetter, setWorkspaceHeader, clearWorkspaceHeader, baseUrl, formatSequenceName } from './common.js';
+export { SEQUENCE_TYPE_LABELS } from './sequenceTypes.js';
 export { default as endpoints } from './endpoints.js';
 export { default as SequenceSelect } from './SequenceSelect.jsx';
 export { default as TagMultiSelect } from './TagMultiSelect.jsx';
+export { default as SequenceTypeSelect } from './SequenceTypeSelect.jsx';
 export { default as SubmitCloningStrategiesInBulkComponent } from './SubmitCloningStrategiesInBulkComponent.jsx';
 export { default as BulkUploadPreview } from './bulk_upload/BulkUploadPreview.jsx';
 export { default as BulkUploadModal } from './bulk_upload/BulkUploadModal.jsx';
 export { CommonTableRow } from './bulk_upload/common.jsx';
+export { default as SequencingCheckModal } from './sequencing_check/SequencingCheckModal.jsx';
+export { MAX_CONCURRENT_CHECKS, runWithConcurrency } from './sequencing_check/sequencingCheckUtils.js';

package/src/sequenceTypes.js

@@ -0,0 +1,10 @@
+// Display labels of the sequence types (SequenceType enum in the backend).
+// Kept free of imports, so that it can be imported without loading the rest of the package.
+export const SEQUENCE_TYPE_LABELS = {
+  locus: 'Locus',
+  allele: 'Allele',
+  plasmid: 'Plasmid',
+  pcr_product: 'PCR product',
+  restriction_fragment: 'Restriction fragment',
+  linear_dna: 'Linear DNA',
+};

package/src/sequencing_check/SequencingAlignmentViewer.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Alert, Box, CircularProgress, IconButton, Tooltip, Typography } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
+import SequenceViewer from '@opencloning/ui/components/SequenceViewer';
+import { buildSequencingAlignmentConfig } from '@opencloning/utils/alignmentUtils';
+import { convertToTeselaJson } from '@opencloning/utils/readNwrite';
+import error2String from '@opencloning/utils/error2String';
+import useSequencingQueries from './useSequencingQueries';
+
+/**
+ * Alignment of one sequencing file to its sequence, shown in the SequenceViewer with the alignment tab selected.
+ * sequence is an item of the output of GetSequencesInBulkComponent, file a sequencing file of that sequence.
+ */
+export default function SequencingAlignmentViewer({ sequence, file, onClose }) {
+  const sequenceData = React.useMemo(() => convertToTeselaJson(sequence.textFileSequence), [sequence]);
+
+  // Shared with the sequencing check, so files that were already aligned are not aligned again
+  const { alignmentQuery } = useSequencingQueries();
+  const { data, isPending, error } = useQuery(alignmentQuery(sequence, file));
+  const alignmentData = React.useMemo(() => data && buildSequencingAlignmentConfig(
+    sequence.textFileSequence,
+    sequenceData,
+    [{ fileName: file.name, fileContent: data.fileContent }],
+    data.alignedSequences,
+  ), [data, sequence, sequenceData, file.name]);
+
+  return (
+    <Box sx={{ mb: 2 }} data-testid="sequencing-alignment-viewer">
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+        <Typography variant="subtitle1" sx={{ flex: 1, overflowWrap: 'anywhere' }}>
+          Alignment of <Box component="span" sx={{ fontFamily: 'monospace' }}>{file.name}</Box> to {sequence.name}
+        </Typography>
+        <Tooltip title="Close alignment">
+          <IconButton size="small" onClick={onClose} aria-label="Close alignment">
+            <CloseIcon />
+          </IconButton>
+        </Tooltip>
+      </Box>
+      {isPending && (
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+          <CircularProgress />
+        </Box>
+      )}
+      {error && <Alert severity="error">Could not align the sequencing file: {error2String(error)}</Alert>}
+      {alignmentData && <SequenceViewer sequenceData={sequenceData} alignmentData={alignmentData} readOnly />}
+    </Box>
+  );
+}