@opencloning/ui 1.5.5 → 1.6.0

package/src/components/eLabFTW/PrimersNotInDatabaseComponent.jsx

@@ -1,54 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,293 +0,0 @@
-import { Save as SaveIcon, Link as LinkIcon } from '@mui/icons-material';
-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,
-};