@opencloning/ui 1.0.0

package/src/components/eLabFTW/PrimersNotInDatabaseComponent.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Alert } from '@mui/material';
+import { getSubState } from '@opencloning/utils/network';
+import ELabFTWCategorySelect from './ELabFTWCategorySelect';
+
+function PrimersNotInDatabaseComponent({ id, submissionData, setSubmissionData }) {
+  const primerCategoryId = submissionData?.primerCategoryId;
+  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={primerCategoryId ? 'success' : 'info'}
+      sx={{
+        marginTop: 2,
+        paddingY: 1,
+        width: '100%',
+        '& .MuiAlert-message': {
+          width: '100%',
+        },
+      }}
+      icon={false}
+    >
+      {!primerCategoryId && (
+        <>
+          <div>Do you want used primers to be saved to the database?</div>
+          <ul>
+            {primers.map((primer) => (
+              <li key={primer.id}>
+                {primer.name}
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+
+      <ELabFTWCategorySelect
+        setCategory={(c) => {
+          setSubmissionData((prev) => ({ ...prev, primerCategoryId: c ? c.id : null }));
+        }}
+        label="Save primers as"
+        fullWidth
+      />
+
+    </Alert>
+  );
+}
+
+export default PrimersNotInDatabaseComponent;

package/src/components/eLabFTW/SubmitToDatabaseComponent.cy.jsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import SubmitToDatabaseComponent from './SubmitToDatabaseComponent';
+import { eLabFTWHttpClient } from './common';
+import { mockSequences, mockPrimers, mockSources, mockTeselaJsonCache } from '../../../../../tests/mockNetworkData';
+import { clearAutocompleteValue } from '../../../../../cypress/e2e/common_functions';
+
+const PRIMER_CATEGORY_ID = 3;
+
+// Mock initial state with both primers and sequences
+const defaultState = {
+  sequences: mockSequences,
+  sources: mockSources,
+  primers: mockPrimers,
+  teselaJsonCache: mockTeselaJsonCache,
+};
+
+const createTestStore = (cloningState) => configureStore({
+  reducer: {
+    cloning: (state = cloningState) => state,
+  },
+  preloadedState: { cloning: cloningState },
+});
+
+describe('<SubmitToDatabaseComponent />', () => {
+  it('Primers: initializes with primer name and handles updates', () => {
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .resolves({
+        data: [
+          { id: PRIMER_CATEGORY_ID, title: 'Primers' },
+          { id: 2, title: 'Sequences' },
+        ],
+      }).withArgs('/api/v2/info').resolves({
+        data: {
+          elabftw_version_int: 50200,
+        },
+      });
+    const store = createTestStore(defaultState);
+    const setSubmissionDataSpy = cy.spy().as('setSubmissionDataSpy');
+
+    cy.mount(
+      <Provider store={store}>
+        <SubmitToDatabaseComponent
+          id={mockPrimers[0].id}
+          resourceType="primer"
+          setSubmissionData={setSubmissionDataSpy}
+        />
+      </Provider>,
+    );
+
+    // Should initialize with primer name
+    cy.get('input#resource_title').should('have.value', 'Primer1');
+
+    // Change title
+    cy.get('input#resource_title').clear();
+    cy.get('input#resource_title').type('Modified Primer');
+
+    // Select category
+    cy.get('input').last().click();
+    cy.get('li').contains('Primers').click();
+
+    // Should update submission data with both title and category
+    cy.get('@setSubmissionDataSpy').should((spy) => {
+      const updateFn = spy.lastCall.args[0];
+      const result = updateFn({ existingKey: 'value' });
+      expect(result).to.deep.equal({
+        existingKey: 'value',
+        categoryId: PRIMER_CATEGORY_ID,
+        title: 'Modified Primer',
+      });
+    });
+    // Clearing the field should set submission data to null
+    clearAutocompleteValue('Save primer as', 'div');
+    cy.get('@setSubmissionDataSpy').should((spy) => {
+      const result = spy.lastCall.args[0];
+      expect(result).equal(null);
+    });
+  });
+
+  it('Sequences: initializes with sequence name and handles updates', () => {
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .resolves({
+        data: [
+          { id: PRIMER_CATEGORY_ID, title: 'Primers' },
+          { id: 2, title: 'Sequences' },
+        ],
+      }).withArgs('/api/v2/info').resolves({
+        data: {
+          elabftw_version_int: 50200,
+        },
+      });
+    const store = createTestStore(defaultState);
+    const setSubmissionDataSpy = cy.spy().as('setSubmissionDataSpy');
+
+    cy.mount(
+      <Provider store={store}>
+        <SubmitToDatabaseComponent
+          id={mockSequences[0].id}
+          resourceType="sequence"
+          setSubmissionData={setSubmissionDataSpy}
+        />
+      </Provider>,
+    );
+
+    // Should initialize with primer name
+    cy.get('input#resource_title').should('have.value', 'Seq1');
+
+    // Change title
+    cy.get('input#resource_title').clear();
+    cy.get('input#resource_title').type('Modified Sequence');
+
+    // Select category
+    cy.get('input').last().click();
+    cy.get('li').contains('Sequences').click();
+
+    // Should update submission data with both title and category
+    cy.get('@setSubmissionDataSpy').should((spy) => {
+      const updateFn = spy.lastCall.args[0];
+      const result = updateFn({ existingKey: 'value' });
+      expect(result).to.deep.equal({
+        existingKey: 'value',
+        categoryId: 2,
+        title: 'Modified Sequence',
+      });
+    });
+    // Clearing the field should set submission data to null
+    clearAutocompleteValue('Save sequence as', 'div');
+    cy.get('@setSubmissionDataSpy').should((spy) => {
+      const result = spy.lastCall.args[0];
+      expect(result).equal(null);
+    });
+  });
+
+  it('handles API errors in category loading', () => {
+    const store = createTestStore(defaultState);
+    let firstCall = true;
+
+    // Stub API to fail first time
+    cy.stub(eLabFTWHttpClient, 'get')
+      .withArgs('/api/v2/items_types', { headers: { Authorization: 'test-read-key' }, params: { limit: 9999 } })
+      .callsFake(() => {
+        if (firstCall) {
+          firstCall = false;
+          const error = new Error('Failed to fetch');
+          error.response = { status: 500 };
+          return Promise.reject(error);
+        }
+        return Promise.resolve({
+          data: [
+            { id: PRIMER_CATEGORY_ID, title: 'Primers' },
+            { id: 2, title: 'Sequences' },
+          ],
+        })
+      }).withArgs('/api/v2/info', { headers: { Authorization: 'test-read-key' }}).resolves({
+        data: {
+          elabftw_version_int: 50200,
+        },
+      });
+
+    cy.mount(
+      <Provider store={store}>
+        <SubmitToDatabaseComponent
+          id={mockPrimers[0].id}
+          resourceType="primer"
+          setSubmissionData={cy.spy()}
+        />
+      </Provider>,
+    );
+
+    // Should show error state
+    cy.get('.MuiAlert-colorError').should('exist');
+    cy.contains('Could not retrieve categories').should('exist');
+
+    // Click retry
+    cy.contains('Retry').click();
+
+    // Should show categories after retry
+    cy.get('input').last().click();
+    cy.get('li').contains('Primers').should('exist');
+    cy.get('li').contains('Sequences').should('exist');
+  });
+});

package/src/components/eLabFTW/SubmitToDatabaseComponent.jsx

@@ -0,0 +1,51 @@
+import { FormControl, TextField } from '@mui/material';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import ELabFTWCategorySelect from './ELabFTWCategorySelect';
+
+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;
+  });
+  const [title, setTitle] = React.useState(name);
+  const [category, setCategory] = React.useState(null);
+
+  React.useEffect(() => {
+    setTitle(name);
+  }, [name]);
+
+  React.useEffect(() => {
+    if (category && title) {
+      // We do this not overwrite primerCategoryId, set from a different component
+      setSubmissionData((prev) => ({ ...prev, categoryId: category.id, title }));
+    } else {
+      setSubmissionData(null);
+    }
+  }, [category, title]);
+
+  return (
+    <>
+      <FormControl fullWidth sx={{ mb: 2 }}>
+        <TextField
+          autoFocus
+          required
+          id="resource_title"
+          label="Resource title"
+          variant="standard"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+      </FormControl>
+      <ELabFTWCategorySelect
+        fullWidth
+        label={`Save ${resourceType} as`}
+        setCategory={setCategory}
+      />
+    </>
+  );
+}
+
+export default SubmitToDatabaseComponent;

package/src/components/eLabFTW/common.js

@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { readApiKey, writeApiKey, baseUrl as envBaseUrl } from './envValues';
+
+export const baseUrl = envBaseUrl;
+export const readHeaders = readApiKey ? { Authorization: readApiKey } : {};
+export const writeHeaders = writeApiKey ? { Authorization: writeApiKey } : {};
+
+export const eLabFTWHttpClient = axios.create({
+  baseURL: baseUrl,
+});
+
+export const makeSequenceMetadata = (sequence) => JSON.stringify({
+  extra_fields: {
+    sequence: {
+      type: 'text',
+      value: sequence,
+      group_id: null,
+    },
+  },
+});
+
+export const getELabFTWVersion = async () => {
+  const url = `/api/v2/info`;
+  const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders });
+  return resp.data.elabftw_version_int;
+};

package/src/components/eLabFTW/eLabFTWInterface.js

@@ -0,0 +1,294 @@
+import SaveIcon from '@mui/icons-material/Save';
+import LinkIcon from '@mui/icons-material/Link';
+import GetSequenceFileAndDatabaseIdComponent from './GetSequenceFileAndDatabaseIdComponent';
+import SubmitToDatabaseComponent from './SubmitToDatabaseComponent';
+import PrimersNotInDatabaseComponent from './PrimersNotInDatabaseComponent';
+import GetPrimerComponent from './GetPrimerComponent';
+import { eLabFTWHttpClient, writeHeaders, readHeaders, baseUrl, getELabFTWVersion } from './common';
+import { getFileFromELabFTW, error2String } from './utils';
+import LoadHistoryComponent from './LoadHistoryComponent';
+
+async function deleteResource(resourceId) {
+  const url = `/api/v2/items/${resourceId}`;
+  // eLabFTW requires application/json for delete requests, axios seems to require a data field for it to work
+  const resp = await eLabFTWHttpClient.delete(url, { data: {}, headers: { ...writeHeaders, 'Content-Type': 'application/json' } });
+  return resp.data;
+}
+
+const linkToParent = async (childId, parentId) => {
+  await eLabFTWHttpClient.post(
+    `/api/v2/items/${childId}/items_links/${parentId}`,
+    {},
+    { headers: writeHeaders },
+  );
+};
+
+const createResource = async (categoryId) => {
+  const eLabFTWVersion = await getELabFTWVersion();
+  const categoryKey = eLabFTWVersion && eLabFTWVersion >= 50300 ? 'category' : 'category_id';
+  const createdItemResponse = await eLabFTWHttpClient.post(
+    '/api/v2/items',
+    {
+      [categoryKey]: categoryId,
+    },
+    { headers: writeHeaders },
+  );
+  return Number(createdItemResponse.headers.location.split('/').pop());
+};
+
+const patchResource = async (resourceId, title, metadata = undefined) => eLabFTWHttpClient.patch(
+  `/api/v2/items/${resourceId}`,
+  { title, ...(metadata !== undefined && { metadata }) },
+  { headers: writeHeaders },
+);
+
+async function submitPrimerToDatabase({ submissionData: { title, categoryId }, primer, linkedSequenceId = null }) {
+  let resourceId;
+  try {
+    resourceId = await createResource(categoryId);
+  } catch (e) {
+    console.error(e);
+    throw new Error(`Error creating primer: ${error2String(e)}`);
+  }
+  const metadata = JSON.stringify({ extra_fields: { sequence: { type: 'text', value: primer.sequence, group_id: null } } });
+  let stage;
+  try {
+    stage = 'naming primer';
+    await patchResource(resourceId, title, metadata);
+    if (linkedSequenceId) {
+      stage = 'linking to sequence';
+      await linkToParent(linkedSequenceId, resourceId);
+    }
+  } catch (e) {
+    console.error(e);
+    try {
+      await deleteResource(resourceId);
+    } catch (e2) {
+      console.error(e2);
+      throw new Error(`There was an error (${error2String(e2)}) while trying to delete primer with id ${resourceId} after an error ${stage}.`);
+    }
+    throw new Error(`Error ${stage}: ${error2String(e)}`);
+  }
+  return resourceId;
+}
+
+async function uploadTextFileToResource(resourceId, fileName, textContent, comment) {
+  const blob = new Blob([textContent], { type: 'text/plain' });
+  const formData = new FormData();
+  formData.append('file', blob, fileName);
+  formData.append('comment', comment);
+  const response = await eLabFTWHttpClient.post(`/api/v2/items/${resourceId}/uploads`, formData, { headers: writeHeaders });
+  return Number(response.headers.location.split('/').pop());
+}
+
+async function submitSequenceToDatabase({ submissionData: { title, categoryId, primerCategoryId }, substate, id }) {
+  /**
+   * Submit a sequence to eLabFTW database
+   * @param {Object} params - The parameters object
+   * @param {Object} params.submissionData - Data needed for submission
+   * @param {string} params.submissionData.title - Title of the sequence
+   * @param {number} params.submissionData.categoryId - Category ID in eLabFTW
+   * @param {Object} params.substate - The substate containing sequence data
+   * @param {Array} params.substate.sources - Array of source objects
+   * @param {Array} params.substate.primers - Array of primer objects
+   * @param {Array} params.substate.sequences - Array of sequence objects
+   * @param {string} params.id - ID of the sequence to submit
+   * @returns {Promise<Object>}
+   */
+
+  const { sources, primers, sequences, appInfo } = substate;
+  const { backendVersion, schemaVersion, frontendVersion } = appInfo;
+
+  const sequence2export = sequences.find((e) => e.id === id);
+  const parentSource = sources.find((s) => s.id === id);
+  if (parentSource.database_id) {
+    throw new Error('Sequence already has a database_id');
+  }
+  // Get ancestor sources that are database sources to link to the sequence
+  const parentDatabaseSources = sources.filter((source) => source.database_id);
+  const parentResourceIds = parentDatabaseSources.map((source) => source.database_id);
+  const primerIds = primers.map((p) => p.id);
+
+  // Link and/or add used primers
+  const newPrimersToSave = [];
+  const existingPrimersToLink = primers.filter((p) => primerIds.includes(p.id) && p.database_id).map((p) => p.database_id);
+  if (primerCategoryId) {
+    newPrimersToSave.push(...primers.filter((p) => primerIds.includes(p.id) && !p.database_id));
+  }
+
+  // Create and name the resource
+  let resourceId;
+  try {
+    resourceId = await createResource(categoryId);
+  } catch (e) {
+    console.error(e);
+    throw new Error(`Error creating resource: ${error2String(e)}`);
+  }
+  let stage;
+  let newPrimerDatabaseIds = [];
+  try {
+    // Patch the resource with the title
+    stage = 'setting resource title';
+    await patchResource(resourceId, title);
+
+    // Add the links to parent Resources
+    stage = 'linking to parent resources';
+    await Promise.all(parentResourceIds.map((parentId) => linkToParent(resourceId, parentId)));
+
+    // Add the links to the existing primers
+    stage = 'linking to existing primers';
+    await Promise.all(existingPrimersToLink.map((primerId) => linkToParent(resourceId, primerId)));
+
+    // Add the new primers to the database and link them to the resource
+    stage = 'submitting new primers';
+    newPrimerDatabaseIds = await Promise.all(newPrimersToSave.map((primer) => submitPrimerToDatabase({ submissionData: { title: primer.name, categoryId: primerCategoryId }, primer, linkedSequenceId: resourceId })));
+    const primerMappings = newPrimerDatabaseIds.map((databaseId, index) => ({ databaseId, localId: newPrimersToSave[index].id }));
+
+    // Deep-copy primers and update the primers with the database IDs before storing the history
+    const primersCopy = primers.map((p) => ({ ...p }));
+    primerMappings.forEach(({ databaseId: dbId, localId }) => {
+      primersCopy.find((p) => p.id === localId).database_id = dbId;
+    });
+
+    const cloningStrategy = {
+      sources,
+      primers: primersCopy,
+      sequences,
+      backend_version: backendVersion,
+      schema_version: schemaVersion,
+      frontend_version: frontendVersion,
+    };
+
+    // Add the sequence and history files to the resource
+    stage = 'uploading sequence file';
+    await uploadTextFileToResource(resourceId, `${title}.gb`, sequence2export.file_content, 'resource sequence - generated by OpenCloning');
+    stage = 'uploading history file';
+    await uploadTextFileToResource(resourceId, `${title}_history.json`, JSON.stringify(cloningStrategy), 'history file - generated by OpenCloning');
+    // Format output values
+    return { primerMappings, databaseId: resourceId };
+  } catch (e) {
+    console.error(e);
+    let primersDeleted = false;
+    try {
+      await Promise.all(newPrimerDatabaseIds.map(deleteResource));
+      primersDeleted = true;
+      await deleteResource(resourceId);
+    } catch (e2) {
+      console.error(e2);
+      if (primersDeleted) {
+        throw new Error(`There was an error (${error2String(e2)}) while trying to delete the sequence with id ${resourceId} after an error ${stage}.`);
+      }
+      throw new Error(`There was an error (${error2String(e2)}) while trying to delete newly created primers linked to sequence with id ${resourceId} after an error ${stage}.`);
+    }
+    throw new Error(`Error ${stage}: ${error2String(e)}`);
+  }
+}
+
+function isSubmissionDataValid(submissionData) {
+  // This function is necessary because you might be setting submissionData from multiple components
+  return Boolean(submissionData.title && submissionData.categoryId);
+}
+
+async function loadSequenceFromUrlParams(urlParams) {
+  const { item_id: itemId, file_id: fileId } = urlParams;
+
+  if (itemId && fileId) {
+    const url = `/api/v2/items/${itemId}/uploads/${fileId}`;
+    let fileInfo;
+    try {
+      const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders });
+      fileInfo = resp.data;
+    } catch (e) {
+      throw new Error(`${error2String(e)}`);
+    }
+
+    // getFileFromELabFTW already handles errors
+    const file = await getFileFromELabFTW(itemId, fileInfo);
+    return { file, databaseId: itemId };
+  }
+  return null;
+}
+
+async function getPrimer(databaseId) {
+  const url = `/api/v2/items/${databaseId}`;
+  try {
+    const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders });
+    resp.data.metadata = JSON.parse(resp.data.metadata);
+    return { name: resp.data.title, database_id: databaseId, sequence: resp.data.metadata.extra_fields.sequence?.value };
+  } catch (e) {
+    console.error(e);
+    if (e.code === 'ERR_NETWORK') {
+      throw new Error(`Error getting primer: ${error2String(e)}`);
+    }
+    throw new Error(`Error getting primer with id ${databaseId}, it might have been deleted or you can no longer access it`);
+  }
+}
+
+async function getSequenceName(databaseId) {
+  const url = `/api/v2/items/${databaseId}`;
+  try {
+    const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders });
+    return resp.data.title;
+  } catch (e) {
+    console.error(e);
+    if (e.code === 'ERR_NETWORK') {
+      throw new Error(`Error getting sequence name: ${error2String(e)}`);
+    }
+    throw new Error(`Error getting name of sequence with id ${databaseId}, it might have been deleted or you can no longer access it`);
+  }
+}
+
+async function getSequencingFiles(databaseId) {
+  // This function should return an array of objects:
+  // name: the name of the file
+  // getFile: an async function that returns the file content
+  const url = `/api/v2/items/${databaseId}/uploads`;
+  try {
+    const resp = await eLabFTWHttpClient.get(url, { headers: readHeaders });
+    return resp.data.map((fileInfo) => ({
+      name: fileInfo.real_name,
+      getFile: async () => getFileFromELabFTW(databaseId, fileInfo),
+    }));
+  } catch (e) {
+    console.error(e);
+    throw new Error(`${error2String(e)}`);
+  }
+}
+
+export default {
+  // Name of the database interface
+  name: 'eLabFTW',
+  // Returns a link to the sequence in the database
+  getSequenceLink: (databaseId) => `${baseUrl}/database.php?mode=view&id=${databaseId}`,
+  // Returns a link to the primer in the database
+  getPrimerLink: (databaseId) => `${baseUrl}/database.php?mode=view&id=${databaseId}`,
+  // Component for selecting and loading sequence files from the database
+  GetSequenceFileAndDatabaseIdComponent,
+  // Component for selecting and loading primers from the database
+  GetPrimerComponent,
+  // Component for submitting resources to the database
+  SubmitToDatabaseComponent,
+  // Component for handling primers not yet in database
+  PrimersNotInDatabaseComponent,
+  // Function to submit a primer to the database
+  submitPrimerToDatabase,
+  // Function to submit a sequence and its history to the database
+  submitSequenceToDatabase,
+  // Function to validate submission data
+  isSubmissionDataValid,
+  // Icon displayed on the node corner to submit
+  SubmitIcon: SaveIcon,
+  // Icon displayed on the node corner for sequences in the database
+  DatabaseIcon: LinkIcon,
+  // OPTIONAL =======================================================================
+  // Component for loading history from the database (can be hook-like does not have to render anything)
+  LoadHistoryComponent,
+  // Function to load sequences from url parameters
+  loadSequenceFromUrlParams,
+  // Function to get the primer ({name, database_id, sequence}) from the database
+  getPrimer,
+  // Function to get the name of a sequence from the database
+  getSequenceName,
+  // Function to get the sequencing files from the database, see docs for what the return value should be
+  getSequencingFiles,
+};