@opencloning/opencloningdb 1.7.1

package/src/OpenCloningDBInterface.test.js

@@ -0,0 +1,156 @@
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { setupServer } from 'msw/node';
+
+import { addStubToServer, getStub, setupToken, clearToken } from './testUtils.test';
+import { setWorkspaceHeader } from './common';
+import { file2base64 } from '@opencloning/utils/readNwrite';
+
+vi.mock('./GetPrimerComponent', () => ({ default: () => null }));
+vi.mock('./GetSequenceFileAndDatabaseIdComponent', () => ({ default: () => null }));
+vi.mock('./LoadHistoryComponent', () => ({ default: () => null }));
+vi.mock('./SubmitToDatabaseComponent', () => ({ default: () => null }));
+vi.mock('./PrimersNotInDatabaseComponent', () => ({ default: () => null }));
+
+import OpenCloningDBInterface from './OpenCloningDBInterface';
+
+const server = setupServer();
+
+beforeAll(() => {
+  setupToken();
+  setWorkspaceHeader(1);
+  server.listen({ onUnhandledRequest: 'error' });
+});
+afterEach(() => server.resetHandlers());
+afterAll(() => {
+  clearToken();
+  server.close();
+});
+
+describe('submitPrimerToDatabase', () => {
+  it('posts the primer and returns the new id', async () => {
+    const stub = getStub('post_primer');
+    addStubToServer(server, stub);
+
+    const id = await OpenCloningDBInterface.submitPrimerToDatabase({
+      submissionData: { title: stub.body.name },
+      primer: { sequence: stub.body.sequence },
+    });
+
+    expect(id).toBe(stub.response.body.id);
+  });
+});
+
+describe('getPrimer', () => {
+  it('returns primer in interface format', async () => {
+    const stub = getStub('get_primer');
+    addStubToServer(server, stub);
+
+    const primer = await OpenCloningDBInterface.getPrimer(stub.response.body.id);
+
+    expect(primer).toEqual({
+      name: stub.response.body.name,
+      'database_id': stub.response.body.id,
+      sequence: stub.response.body.sequence,
+    });
+  });
+});
+
+describe('submitSequenceToDatabase', () => {
+  it('submits /sequence payload and returns databaseId + filtered mappings', async () => {
+    const stub = getStub('post_sequence');
+    addStubToServer(server, {
+      ...stub,
+      body: {
+        sources: stub.body.sources,
+        primers: stub.body.primers,
+        sequences: stub.body.sequences,
+      },
+    });
+
+    const primerIds = new Set(stub.body.primers.map((primer) => primer.id));
+    const sequenceIds = new Set(stub.body.sequences.map((sequence) => sequence.id));
+    const expectedPrimerMappings = stub.response.body.mappings.filter(({ localId }) => primerIds.has(localId));
+    const expectedSequenceMappings = stub.response.body.mappings.filter(({ localId }) =>
+      sequenceIds.has(localId),
+    );
+
+    const result = await OpenCloningDBInterface.submitSequenceToDatabase({
+      submissionData: { title: 'name' },
+      substate: stub.body,
+      id: stub.body.sequences[0].id,
+    });
+
+    expect(result).toEqual({
+      databaseId: stub.response.body.id,
+      primerMappings: expectedPrimerMappings,
+      sequenceMappings: expectedSequenceMappings,
+    });
+  });
+});
+
+describe('locateSequenceInDatabase', () => {
+  it('posts to /sequence/search and returns response data', async () => {
+    const stub = getStub('post_sequence_search');
+    addStubToServer(server, stub);
+
+    const result = await OpenCloningDBInterface.locateSequenceInDatabase(stub.body);
+
+    expect(result).toEqual(stub.response.body);
+  });
+});
+
+describe('getSequencingFiles', () => {
+  it('gets sequencing files list and supports getFile download', async () => {
+    const listStub = getStub('get_sequence_sequencing_files');
+    const downloadStub = getStub('download_sequencing_file');
+    addStubToServer(server, listStub);
+    addStubToServer(server, downloadStub);
+
+    const files = await OpenCloningDBInterface.getSequencingFiles(10);
+
+    expect(files).toHaveLength(1);
+    expect(files[0].id).toBe(listStub.response.body[0].id);
+    expect(files[0].name).toBe(listStub.response.body[0].original_name);
+
+    const downloadedFile = await files[0].getFile();
+    expect(downloadedFile).toBeInstanceOf(File);
+    expect(downloadedFile.name).toBe(listStub.response.body[0].original_name);
+    const downloadedText = await file2base64(downloadedFile);
+    expect(downloadedText).toBe(downloadStub.response.body);
+  });
+});
+
+describe('isSubmissionDataValid', () => {
+  it('returns true when title is provided', () => {
+    expect(OpenCloningDBInterface.isSubmissionDataValid({ title: 'name' })).toBe(true);
+  });
+
+  it('returns false when title is missing or empty', () => {
+    expect(OpenCloningDBInterface.isSubmissionDataValid({})).toBe(false);
+    expect(OpenCloningDBInterface.isSubmissionDataValid({ title: '' })).toBe(false);
+  });
+});
+
+describe('getSequenceLink', () => {
+  it('returns sequence link path', () => {
+    expect(OpenCloningDBInterface.getSequenceLink(42)).toBe('sequences/42');
+  });
+});
+
+describe('getPrimerLink', () => {
+  it('returns primer link path', () => {
+    expect(OpenCloningDBInterface.getPrimerLink(7)).toBe('primers/7');
+  });
+});
+
+describe('loadSequenceFromUrlParams', () => {
+  it('is currently a no-op', () => {
+    expect(OpenCloningDBInterface.loadSequenceFromUrlParams()).toBeUndefined();
+  });
+});
+
+describe('getSequenceName', () => {
+  it('is currently a no-op', () => {
+    expect(OpenCloningDBInterface.getSequenceName()).toBeUndefined();
+  });
+});

package/src/PrimerSelect.cy.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import PrimerSelect from './PrimerSelect';
+import { DatabaseProvider } from '@opencloning/ui/providers/DatabaseContext';
+import OpenCloningDBInterface from './OpenCloningDBInterface';
+import { clickMultiSelectOption } from '../../../cypress/e2e/common_functions';
+import endpoints from './endpoints';
+
+const PRIMER_NAME = 'lacZ_attB1_fwd';
+
+describe('<PrimerSelect />', () => {
+  it('searches for a primer and shows results', () => {
+    cy.setupOpenCloningDBTestAuth();
+    const primerSpy = cy.spy().as('primerSpy');
+
+    cy.interceptOpenCloningDBStub('get_primers_search_by_name', {
+      alias: 'getPrimers',
+    })
+
+    cy.mount(
+      <DatabaseProvider value={OpenCloningDBInterface}>
+        <PrimerSelect setPrimer={primerSpy} />
+      </DatabaseProvider>
+    );
+    // Clicking on the input
+    cy.get('input').click();
+    cy.contains('Type at least').should('exist');
+    cy.get('input').type(PRIMER_NAME);
+    cy.get('.MuiAutocomplete-listbox li', { timeout: 10000 }).should('have.length.greaterThan', 0);
+
+    clickMultiSelectOption('Primer', PRIMER_NAME, 'div');
+
+    cy.getStub('get_primers_search_by_name').then((stub) => {
+      const stubPrimer = stub.response.body.items.find((primer) => primer.name === PRIMER_NAME);
+      cy.get('input').should('have.value', PRIMER_NAME);
+      cy.get('@primerSpy').should('have.been.calledWith', stubPrimer);
+    });
+  });
+
+  it('shows an error message when the request fails', () => {
+    cy.intercept('GET', Cypress.getDbURL(endpoints.primers, '*'), { statusCode: 500 }).as('getPrimers');
+    cy.mount(
+      <DatabaseProvider value={OpenCloningDBInterface}>
+        <PrimerSelect setPrimer={cy.stub()} />
+      </DatabaseProvider>
+    );
+    cy.get('input').type('ase1');
+    cy.wait('@getPrimers');
+    cy.contains('Could not retrieve primers from OpenCloningDB').should('exist');
+    cy.contains('button', 'Retry').should('exist');
+  });
+});

package/src/PrimerSelect.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { QuerySelect, useDebouncedSearchQuery } from '@opencloning/ui';
+import { openCloningDBHttpClient } from './common';
+import endpoints from './endpoints';
+
+const messages = { loadingMessage: 'retrieving primers', errorMessage: 'Could not retrieve primers from OpenCloningDB' };
+
+const getGetQuery = (filterDatabaseIds) => {
+  return (name) => ({
+    queryKey: ['primers-search', name],
+    queryFn: async () => {
+      const { data } = await openCloningDBHttpClient.get(endpoints.primers, {
+        params: { name },
+      });
+      return data.items.filter((primer) => !filterDatabaseIds.includes(primer.id));
+    },
+  });
+};
+
+function PrimerSelect({ setPrimer, filterDatabaseIds = [], ...rest }) {
+  const { query, autocompleteProps, clearInput } = useDebouncedSearchQuery(getGetQuery(filterDatabaseIds));
+
+  return (
+    <QuerySelect
+      query={query}
+      label="Primer"
+      loadingMessage={messages.loadingMessage}
+      errorMessage={messages.errorMessage}
+      onChange={setPrimer}
+      getOptionLabel={(option) => (option === '' ? '' : option.name)}
+      getOptionKey={(option) => option.id}
+      multiple={false}
+      autocompleteProps={autocompleteProps}
+      onClear={clearInput}
+      {...rest}
+    />
+  );
+}
+
+export default PrimerSelect;

package/src/PrimersNotInDatabaseComponent.cy.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import PrimersNotInDatabaseComponent from './PrimersNotInDatabaseComponent';
+import { mockSequences, mockSources, mockPrimers } from '../../../tests/mockNetworkData';
+
+const defaultState = {
+  sequences: mockSequences,
+  sources: mockSources,
+  primers: mockPrimers,
+};
+
+const createTestStore = (cloningState) => configureStore({
+  reducer: {
+    cloning: (state = cloningState) => state,
+  },
+  preloadedState: { cloning: cloningState },
+});
+
+describe('<PrimersNotInDatabaseComponent />', () => {
+  it('renders nothing when no primers are involved', () => {
+    // id=4: source 4 has no inputs, so no primers in substate
+    const store = createTestStore(defaultState);
+    cy.mount(
+      <Provider store={store}>
+        <PrimersNotInDatabaseComponent
+          id={4}
+          submissionData={{}}
+          setSubmissionData={cy.spy().as('setSubmissionDataSpy')}
+        />
+      </Provider>,
+    );
+
+    cy.get('.MuiAlert-root').should('not.exist');
+  });
+
+  it('shows primers that will be saved to the database', () => {
+    // id=1: substate includes source 2 (OligoHybridization with primers 7 and 8).
+    // Primer 7 (Primer1) has no database_id → shown.
+    // Primer 8 (Primer2) already has database_id → hidden.
+    // Source 3 has database_id so getSubState stops there (stopAtDatabaseId=true).
+    const store = createTestStore(defaultState);
+    cy.mount(
+      <Provider store={store}>
+        <PrimersNotInDatabaseComponent
+          id={1}
+          submissionData={{}}
+          setSubmissionData={cy.spy().as('setSubmissionDataSpy')}
+        />
+      </Provider>,
+    );
+
+    cy.get('.MuiAlert-root').contains('The below primers will be saved to the database').should('exist');
+    cy.get('.MuiAlert-root li').should('have.length', 1);
+    cy.get('.MuiAlert-root li').contains('Primer1').should('exist');
+  });
+});

package/src/PrimersNotInDatabaseComponent.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Alert, Box, Typography } from '@mui/material';
+import { getSubState } from '@opencloning/utils/network';
+
+function PrimersNotInDatabaseComponent({ id, submissionData, setSubmissionData }) {
+  const primers = useSelector((state) => {
+    const subState = getSubState(state, id, true);
+    return subState.primers.filter((p) => !p.database_id);
+  });
+
+  if (primers.length === 0) return null;
+
+  return (
+    <Alert
+      severity="info"
+      sx={{
+        marginTop: 2,
+        paddingY: 1,
+        width: '100%',
+        '& .MuiAlert-message': {
+          width: '100%',
+        },
+      }}
+      icon={false}
+    >
+      <Box>
+        <Typography>The below primers will be saved to the database, consider changing their name in the primer tab</Typography>
+        <ul>
+          {primers.map((primer) => (
+            <li key={primer.id}>{primer.name}</li>
+          ))}
+        </ul>
+      </Box>
+
+    </Alert>
+  );
+}
+
+export default PrimersNotInDatabaseComponent;

package/src/SequenceSelect.cy.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import SequenceSelect from './SequenceSelect';
+import { clickMultiSelectOption } from '../../../cypress/e2e/common_functions';
+
+const SEQUENCE_NAME = 'ase1_CDS_PCR';
+
+describe('<SequenceSelect />', () => {
+  it('searches for a sequence and shows results', () => {
+    cy.setupOpenCloningDBTestAuth();
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.interceptOpenCloningDBStub('get_sequences_search_by_name', { alias: 'getSequences' });
+
+    cy.mount(
+      <SequenceSelect label="Sequence" onChange={onChangeSpy} multiple={false} />
+    );
+
+    cy.get('input').click();
+    cy.contains('Type at least').should('exist');
+    cy.get('input').type(SEQUENCE_NAME);
+    cy.get('.MuiAutocomplete-listbox li', { timeout: 10000 }).should('have.length.greaterThan', 0);
+
+    clickMultiSelectOption('Sequence', RegExp(`^${SEQUENCE_NAME}$`), 'div');
+
+    cy.getStub('get_sequences_search_by_name').then((stub) => {
+      const stubSequence = stub.response.body.items.find((sequence) => sequence.name === SEQUENCE_NAME);
+      cy.get('@onChangeSpy').should('have.been.calledWith', stubSequence);
+    });
+
+    cy.get('input').should('have.value', SEQUENCE_NAME);
+  });
+});

package/src/SequenceSelect.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { QuerySelect, useDebouncedSearchQuery } from '@opencloning/ui';
+import { openCloningDBHttpClient } from './common';
+import endpoints from './endpoints';
+
+const messages = {
+  loadingMessage: 'retrieving sequences',
+  errorMessage: 'Could not retrieve sequences from OpenCloningDB',
+};
+
+const getGetQuery = (sequenceTypes) => {
+  return (name) => ({
+    queryKey: ['sequences', { sequence_types: sequenceTypes, name }],
+    queryFn: async () => {
+      const { data } = await openCloningDBHttpClient.get(endpoints.sequences, {
+        params: { sequence_types: sequenceTypes, name },
+      });
+      return data.items;
+    },
+  })};
+
+function SequenceSelect({ value, onChange, label, multiple = true, sequenceTypes = undefined, ...rest }) {
+  const { query, autocompleteProps, clearInput } = useDebouncedSearchQuery(getGetQuery(sequenceTypes));
+
+  return (
+    <QuerySelect
+      query={query}
+      label={label}
+      loadingMessage={messages.loadingMessage}
+      errorMessage={messages.errorMessage}
+      multiple={multiple}
+      getOptionLabel={(seq) => seq.name ?? `Sequence ${seq.id}`}
+      getOptionKey={(seq) => seq.id}
+      value={value}
+      onChange={onChange}
+      autoComplete={true}
+      autocompleteProps={autocompleteProps}
+      onClear={clearInput}
+      {...rest}
+    />
+  );
+}
+
+export default SequenceSelect;

package/src/SubmitToDatabaseComponent.cy.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import SubmitToDatabaseComponent from './SubmitToDatabaseComponent';
+import { mockPrimers, mockTeselaJsonCache } from '../../../tests/mockNetworkData';
+
+const createTestStore = (cloningState) =>
+  configureStore({
+    reducer: {
+      cloning: (state = cloningState) => state,
+    },
+    preloadedState: { cloning: cloningState },
+  });
+
+const defaultState = {
+  primers: mockPrimers,
+  teselaJsonCache: mockTeselaJsonCache,
+};
+
+describe('<SubmitToDatabaseComponent />', () => {
+  it('displays the primer name in a disabled input and shows the alert', () => {
+    // Primer id=7, name='Primer1'
+    const store = createTestStore(defaultState);
+    cy.mount(
+      <Provider store={store}>
+        <SubmitToDatabaseComponent
+          id={7}
+          setSubmissionData={cy.spy().as('setSubmissionDataSpy')}
+          resourceType="primer"
+        />
+      </Provider>,
+    );
+
+    cy.get('input#resource_title').should('have.value', 'Primer1').and('be.disabled');
+    cy.get('.MuiAlert-root').contains('To change the primer name').should('exist');
+  });
+
+  it('displays the sequence name in a disabled input and shows the alert', () => {
+    // Sequence id=1, name='Seq1'
+    const store = createTestStore(defaultState);
+    cy.mount(
+      <Provider store={store}>
+        <SubmitToDatabaseComponent
+          id={1}
+          setSubmissionData={cy.spy().as('setSubmissionDataSpy')}
+          resourceType="sequence"
+        />
+      </Provider>,
+    );
+
+    cy.get('input#resource_title').should('have.value', 'Seq1').and('be.disabled');
+    cy.get('.MuiAlert-root').contains('To change the sequence name').should('exist');
+  });
+  it('sets the submission data to null when the name is missing (unlikely to happen in reality)', () => {
+    const submissionDataNoName = structuredClone(defaultState);
+    Object.values(submissionDataNoName.teselaJsonCache).forEach((value) => {
+      value.name = '';
+    });
+    const store = createTestStore(submissionDataNoName);
+    cy.mount(
+      <Provider store={store}>
+        <SubmitToDatabaseComponent
+          id={1}
+          setSubmissionData={cy.spy().as('setSubmissionDataSpy')}
+          resourceType="sequence"
+        />
+      </Provider>,
+    );
+    cy.get('@setSubmissionDataSpy').should((spy) => {
+      const result = spy.lastCall.args[0];
+      expect(result).equal(null);
+    });
+  });
+});

package/src/SubmitToDatabaseComponent.jsx

@@ -0,0 +1,44 @@
+import { Alert, FormControl, TextField } from '@mui/material';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Edit as EditIcon } from '@mui/icons-material';
+
+function SubmitToDatabaseComponent({ id, setSubmissionData, resourceType }) {
+  const name = useSelector((state) => {
+    if (resourceType === 'primer') {
+      return state.cloning.primers.find((p) => p.id === id).name;
+    }
+    return state.cloning.teselaJsonCache[id].name;
+  });
+
+  React.useEffect(() => {
+    if (name) {
+      setSubmissionData((prev) => ({ ...prev, title: name }));
+    } else {
+      setSubmissionData(null);
+    }
+  }, [name, setSubmissionData]);
+
+  return (
+    <>
+      <Alert severity="info" sx={{ mb: 2 }}>
+        <span style={{ display: 'flex', alignItems: 'center' }}>
+          {`To change the ${resourceType} name, go back and click on the icon`}
+          <EditIcon sx={{ verticalAlign: 'middle', ml: 0.5, fontSize: '1.5rem' }} />
+        </span>
+
+      </Alert>
+      <FormControl fullWidth sx={{ mb: 2 }}>
+        <TextField
+          id="resource_title"
+          label="Name"
+          variant="standard"
+          value={name}
+          disabled
+        />
+      </FormControl>
+    </>
+  );
+}
+
+export default SubmitToDatabaseComponent;

package/src/common.js

@@ -0,0 +1,60 @@
+import axios from 'axios';
+
+export const baseUrl = 'http://localhost:8001';
+
+let unauthorizedHandler = null;
+
+export function setUnauthorizedHandler(fn) {
+  unauthorizedHandler = fn;
+}
+
+export function setWorkspaceHeader(id) {
+  openCloningDBHttpClient.defaults.headers.common['X-Workspace-Id'] = id;
+}
+
+export function clearWorkspaceHeader() {
+  delete openCloningDBHttpClient.defaults.headers.common['X-Workspace-Id'];
+}
+
+export const openCloningDBHttpClient = axios.create({
+  baseURL: baseUrl,
+  paramsSerializer: (params) => {
+    const searchParams = new URLSearchParams();
+
+    Object.entries(params || {}).forEach(([key, value]) => {
+      if (value === undefined || value === null) {
+        return;
+      }
+
+      if (Array.isArray(value)) {
+        value.forEach((v) => {
+          if (v !== undefined && v !== null) {
+            searchParams.append(key, String(v));
+          }
+        });
+      } else {
+        searchParams.append(key, String(value));
+      }
+    });
+
+    return searchParams.toString();
+  },
+});
+
+openCloningDBHttpClient.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+openCloningDBHttpClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401 && unauthorizedHandler) {
+      unauthorizedHandler();
+    }
+    return Promise.reject(error);
+  },
+);