@opencloning/ui 1.0.0

package/src/components/primers/primer_details/TableSection.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TableCell, TableRow } from '@mui/material';
+
+export default function TableSection({ title, values }) {
+  return (
+    <>
+      {title && <TableRow><TableCell sx={{ fontWeight: 'bold', textAlign: 'center', fontSize: '1.2rem' }} colSpan={3}>{title}</TableCell></TableRow>}
+      {values.map((value) => (
+        <TableRow key={value[0]}>
+          <TableCell width="50%" sx={{ fontWeight: 'bold', textAlign: 'right' }}>{value[0]}</TableCell>
+          <TableCell colSpan={value[2] ? 1 : 2} sx={{ width: '1px', whiteSpace: 'nowrap' }}>{value[1]}</TableCell>
+          {value[2] && <TableCell>{value[2]}</TableCell>}
+        </TableRow>
+      ))}
+    </>
+  );
+}

package/src/components/primers/primer_details/primerDetailsFormatting.js

@@ -0,0 +1,3 @@
+export const formatGcContent = (gcContent) => (gcContent !== undefined ? Number((gcContent * 100).toFixed(0)) : '');
+export const formatMeltingTemperature = (meltingTemperature) => (meltingTemperature !== undefined ? Number(meltingTemperature.toFixed(1)) : '');
+export const formatDeltaG = (deltaG) => (deltaG !== undefined ? Number(deltaG.toFixed(0)) : '');

package/src/components/primers/primer_details/useMultiplePrimerDetails.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { usePrimerDetailsEndpoints } from './usePrimerDetailsEndpoints';
+
+export default function useMultiplePrimerDetails(primers) {
+  const [primerDetails, setPrimerDetails] = React.useState([]);
+  const [connectionAttempt, setConnectionAttempt] = React.useState(0);
+  const [requestStatus, setRequestStatus] = React.useState({ status: 'loading' });
+
+  const retryGetPrimerDetails = () => setConnectionAttempt((prev) => prev + 1);
+
+  const { getPrimerDetails } = usePrimerDetailsEndpoints();
+  React.useEffect(() => {
+    const fetchPrimerDetails = async () => {
+      try {
+        setRequestStatus({ status: 'loading' });
+        const details1 = await Promise.all(primers.map((primer) => getPrimerDetails(primer.sequence)));
+        const details2 = details1.map((detail, index) => ({ ...detail, ...primers[index] }));
+        setPrimerDetails(details2);
+        setRequestStatus({ status: 'success' });
+      } catch (error) {
+        console.error(error);
+        setRequestStatus({ status: 'error', message: `Error fetching primer details: ${error.message}` });
+      }
+    };
+    fetchPrimerDetails();
+  }, [primers, connectionAttempt, getPrimerDetails]);
+
+  return { primerDetails, retryGetPrimerDetails, requestStatus };
+}

package/src/components/primers/primer_details/usePCRDetails.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { isEqual } from 'lodash-es';
+import { useSelector } from 'react-redux';
+import { getPrimerBindingInfoFromSource } from '@opencloning/store/cloning_utils';
+import { usePrimerDetailsEndpoints } from './usePrimerDetailsEndpoints';
+
+export function usePCRDetails(sourceIds) {
+  const [pcrDetails, setPcrDetails] = React.useState([]);
+  const [requestStatus, setRequestStatus] = React.useState({ status: 'loading', message: '' });
+  const [connectionAttempt, setConnectionAttempt] = React.useState(0);
+  const retryGetPCRDetails = () => setConnectionAttempt((prev) => prev + 1);
+
+  const { getPrimerDetails, getHeterodimerDetails } = usePrimerDetailsEndpoints();
+  const bindingInfos = useSelector((state) => {
+    const { primers, sources, teselaJsonCache } = state.cloning;
+
+    return sourceIds.map((sourceId) => {
+      const source = sources.find((s) => s.id === sourceId);
+      const sequenceLength = source.type === 'PCRSource' && teselaJsonCache[source.input[1].sequence].size;
+      return getPrimerBindingInfoFromSource(primers, source, sequenceLength);
+    });
+  }, isEqual);
+
+  React.useEffect(() => {
+    const fetchPrimerDetails = async (bindingInfo) => {
+      let fwdPrimer = await getPrimerDetails(bindingInfo.fwdPrimer.sequence.slice(-bindingInfo.fwdLength));
+      fwdPrimer = { ...fwdPrimer, ...bindingInfo.fwdPrimer };
+      let rvsPrimer = await getPrimerDetails(bindingInfo.rvsPrimer.sequence.slice(-bindingInfo.rvsLength));
+      rvsPrimer = { ...rvsPrimer, ...bindingInfo.rvsPrimer };
+      const heterodimer = await getHeterodimerDetails(bindingInfo.fwdPrimer.sequence, bindingInfo.rvsPrimer.sequence);
+      return { sourceId: bindingInfo.sourceId, sourceType: bindingInfo.sourceType, fwdPrimer, rvsPrimer, heterodimer };
+    };
+    const getAllDetails = async () => {
+      setRequestStatus({ status: 'loading', message: 'loading' });
+      try {
+        const details = await Promise.all(bindingInfos.map(fetchPrimerDetails));
+        setPcrDetails(details);
+        setRequestStatus({ status: 'success', message: '' });
+      } catch (error) {
+        setRequestStatus({ status: 'error', message: `Error fetching PCR details: ${error.message}` });
+      }
+    };
+    getAllDetails();
+  }, [bindingInfos, connectionAttempt, getPrimerDetails, getHeterodimerDetails]);
+
+  return { pcrDetails, retryGetPCRDetails, requestStatus };
+}

package/src/components/primers/primer_details/usePrimerDetailsEndpoints.js

@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react';
+import useBackendRoute from '../../../hooks/useBackendRoute';
+import useHttpClient from '../../../hooks/useHttpClient';
+import { isEqual } from 'lodash-es';
+import { useSelector } from 'react-redux';
+
+const primerDetailsCache = new Map();
+const heterodimerDetailsCache = new Map();
+export function makePrimerDetailsCacheKey(sequence, globalPrimerSettings) {
+  const settingsKey = JSON.stringify(globalPrimerSettings);
+  return `${String(sequence)}::${settingsKey}`;
+}
+export function makeHeterodimerCacheKey(sequence1, sequence2, globalPrimerSettings) {
+  const pairKey = [sequence1, sequence2].map(String).sort().join(',');
+  const settingsKey = JSON.stringify(globalPrimerSettings);
+  return `${pairKey}::${settingsKey}`;
+}
+export function usePrimerDetailsEndpoints() {
+  const backendRoute = useBackendRoute();
+  const httpClient = useHttpClient();
+  const globalPrimerSettings = useSelector((state) => state.cloning.globalPrimerSettings, isEqual);
+
+  // Caches are keyed by both the input sequence(s) and the current globalPrimerSettings,
+  // so we don't need to clear them on settings change.
+
+  const url = backendRoute('primer_details');
+  const heterodimerUrl = backendRoute('primer_heterodimer');
+
+  const getPrimerDetails = useCallback(async (sequence) => {
+    const cacheKey = makePrimerDetailsCacheKey(sequence, globalPrimerSettings);
+    if (!primerDetailsCache.has(cacheKey)) {
+      const { data } = await httpClient.post(url, { sequence, settings: globalPrimerSettings });
+      data.length = sequence.length;
+      primerDetailsCache.set(cacheKey, data);
+    }
+    return primerDetailsCache.get(cacheKey);
+  }, [url, httpClient, globalPrimerSettings]);
+
+  const getHeterodimerDetails = useCallback(async (sequence1, sequence2) => {
+    const cacheKey = makeHeterodimerCacheKey(sequence1, sequence2, globalPrimerSettings);
+    if (!heterodimerDetailsCache.has(cacheKey)) {
+      const { data } = await httpClient.post(heterodimerUrl, { sequence1, sequence2, settings: globalPrimerSettings });
+      heterodimerDetailsCache.set(cacheKey, data);
+    }
+    return heterodimerDetailsCache.get(cacheKey);
+  }, [heterodimerUrl, httpClient, globalPrimerSettings]);
+
+  return { getPrimerDetails, getHeterodimerDetails };
+}

package/src/components/primers/primer_details/useSinglePrimerSequenceDetails.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { usePrimerDetailsEndpoints } from './usePrimerDetailsEndpoints';
+
+export function useSinglePrimerSequenceDetails(sequence) {
+  const [primerDetails, setPrimerDetails] = React.useState({ status: 'loading' });
+  const { getPrimerDetails } = usePrimerDetailsEndpoints();
+  const [connectionAttempt, setConnectionAttempt] = React.useState(0);
+
+  const retryGetPrimerDetails = () => setConnectionAttempt((prev) => prev + 1);
+
+  React.useEffect(() => {
+    const fetchPrimerDetails = async () => {
+      try {
+        const details = await getPrimerDetails(sequence);
+        setPrimerDetails({ status: 'success', ...details });
+      } catch (error) {
+        console.error(error);
+        setPrimerDetails({ status: 'error', error });
+      }
+    };
+    fetchPrimerDetails();
+  }, [sequence, connectionAttempt]);
+
+  return { primerDetails, retryGetPrimerDetails };
+}

package/src/components/primers/primersToTabularFile.js

@@ -0,0 +1,49 @@
+import { formatDeltaG, formatGcContent, formatMeltingTemperature } from './primer_details/primerDetailsFormatting';
+
+export default function primersToTabularFile(primerDetails, pcrDetails, separator) {
+  if (primerDetails.length === 0) {
+    return '';
+  }
+  const rowsAsObjects = primerDetails.map((primer) => {
+    const pcrDetail = pcrDetails.find(({ fwdPrimer, rvsPrimer }) => fwdPrimer.id === primer.id || rvsPrimer.id === primer.id);
+    const pcrPart = {
+      pcr_source_id: '',
+      binding_length: '',
+      binding_melting_temperature: '',
+      binding_gc_content: '',
+      heterodimer_melting_temperature: '',
+      heterodimer_deltaG: '',
+    };
+    if (pcrDetail) {
+      const pcrPrimer = primer.id === pcrDetail.fwdPrimer.id ? pcrDetail.fwdPrimer : pcrDetail.rvsPrimer;
+      pcrPart.pcr_source_id = pcrDetail.sourceId;
+      pcrPart.binding_length = pcrPrimer.length;
+      pcrPart.binding_melting_temperature = formatMeltingTemperature(pcrPrimer.melting_temperature);
+      pcrPart.binding_gc_content = formatGcContent(pcrPrimer.gc_content);
+      if (pcrDetail.heterodimer) {
+        pcrPart.heterodimer_melting_temperature = formatMeltingTemperature(pcrDetail.heterodimer.melting_temperature);
+        pcrPart.heterodimer_deltaG = formatDeltaG(pcrDetail.heterodimer.deltaG);
+      }
+    }
+    return {
+      id: primer.id,
+      name: primer.name,
+      sequence: primer.sequence,
+      length: primer.length,
+      melting_temperature: formatMeltingTemperature(primer.melting_temperature),
+      gc_content: formatGcContent(primer.gc_content),
+      homodimer_melting_temperature: formatMeltingTemperature(primer.homodimer?.melting_temperature),
+      homodimer_deltaG: formatDeltaG(primer.homodimer?.deltaG),
+      hairpin_melting_temperature: formatMeltingTemperature(primer.hairpin?.melting_temperature),
+      hairpin_deltaG: formatDeltaG(primer.hairpin?.deltaG),
+      ...pcrPart,
+    };
+  });
+
+  const headers = Object.keys(rowsAsObjects[0]);
+  // We don't use Object.values(row) because otherwise undefined values are not included
+  const rows = rowsAsObjects.map((row) => Object.keys(row).map((key) => row[key]).join(separator));
+  const out = [headers.join(separator), ...rows].join('\n');
+
+  return out;
+}

package/src/components/primers/primersToTabularFile.test.js

@@ -0,0 +1,108 @@
+import primersToTabularFile from './primersToTabularFile';
+import { mockPCRDetails } from '../../../../../tests/mockPrimerDetailsData';
+
+const headers = [
+  'id',
+  'name',
+  'sequence',
+  'length',
+  'melting_temperature',
+  'gc_content',
+  'homodimer_melting_temperature',
+  'homodimer_deltaG',
+  'hairpin_melting_temperature',
+  'hairpin_deltaG',
+  'pcr_source_id',
+  'binding_length',
+  'binding_melting_temperature',
+  'binding_gc_content',
+  'heterodimer_melting_temperature',
+  'heterodimer_deltaG',
+];
+
+const DATABASE_ID = 7;
+const HOMODIMER_MELTING_TEMPERATURE = 51.58;
+const HOMODIMER_DELTA_G = -100.01;
+const HAIRPIN_MELTING_TEMPERATURE = 52.01;
+const HAIRPIN_DELTA_G = -101.02;
+const MELTING_TEMPERATURE = 50.02;
+const GC_CONTENT = 0.438;
+
+describe('primersToTabularFile', () => {
+  it('converts primers to a tabular file format', () => {
+    const primers = [
+      { id: 1,
+        name: 'Primer1',
+        sequence: 'ATCG',
+        length: 4,
+        database_id: DATABASE_ID,
+        melting_temperature: MELTING_TEMPERATURE,
+        gc_content: GC_CONTENT,
+        homodimer: {
+          melting_temperature: HOMODIMER_MELTING_TEMPERATURE,
+          deltaG: HOMODIMER_DELTA_G,
+        },
+        hairpin: {
+          melting_temperature: HAIRPIN_MELTING_TEMPERATURE,
+          deltaG: HAIRPIN_DELTA_G,
+        },
+      },
+      { id: 6, name: 'Primer2', sequence: 'GCTA', database_id: null },
+    ];
+
+    [',', '\t'].forEach((separator) => {
+      const result = primersToTabularFile(primers, mockPCRDetails, separator);
+
+      const expectedOutput = `${headers.join(separator)}\n${
+        '1,Primer1,ATCG,4,50,44,51.6,-100,52,-101,3,21,56.7,48,20.5,-5276\n'.replaceAll(',', separator)
+      }${`6,Primer2,GCTA${separator.repeat(headers.length - 3)}`.replaceAll(',', separator)}`;
+
+      expect(result).toBe(expectedOutput);
+    });
+  });
+
+  it('correctly handles zero values', () => {
+    const primers = [
+      { id: 1,
+        name: 'Primer1',
+        sequence: 'ATCG',
+        length: 0,
+        database_id: 0,
+        melting_temperature: 0,
+        gc_content: 0,
+        homodimer: {
+          melting_temperature: 0,
+          deltaG: 0,
+        },
+        hairpin: {
+          melting_temperature: 0,
+          deltaG: 0,
+        },
+      },
+    ];
+    const mockPCRDetailsZero = [{
+      ...mockPCRDetails[0],
+      heterodimer: {
+        melting_temperature: 0,
+        deltaG: 0,
+      },
+      fwdPrimer: {
+        ...mockPCRDetails[0].fwdPrimer,
+        melting_temperature: 0,
+        gc_content: 0,
+        length: 0,
+      },
+    }];
+
+    const result = primersToTabularFile(primers, mockPCRDetailsZero, ',');
+
+    const expectedOutput = `${headers.join(',')}\n`
+      + '1,Primer1,ATCG,0,0,0,0,0,0,0,3,0,0,0,0,0';
+
+    expect(result).toBe(expectedOutput);
+  });
+  it('returns empty string if no primers', () => {
+    const result = primersToTabularFile([], mockPCRDetails, ',');
+    expect(result).toBe('');
+  });
+});

package/src/components/settings/SettingsTab.cy.jsx

@@ -0,0 +1,267 @@
+import React from 'react';
+import SettingsTab from './SettingsTab';
+import store from '@opencloning/store';
+import { cloningActions } from '@opencloning/store/cloning';
+import { Provider } from 'react-redux';
+import { setInputValue, checkInputValue } from '../../../../../cypress/e2e/common_functions';
+
+const { setGlobalPrimerSettings } = cloningActions;
+
+// Field labels for maintainable selectors
+const FIELD_LABELS = {
+    PRIMER_DNA_CONC: 'Primer DNA concentration',
+    MONOVALENT_IONS: 'Monovalent ions',
+    DIVALENT_IONS: 'Divalent ions',
+};
+
+describe('SettingsTab', () => {
+    beforeEach(() => {
+        // Reset store to initial state before each test
+        store.dispatch(setGlobalPrimerSettings({
+            primer_dna_conc: 50,
+            primer_salt_monovalent: 50,
+            primer_salt_divalent: 1.5,
+        }));
+    });
+
+    it('displays current global primer settings', () => {
+        cy.mount(
+            <Provider store={store}>
+                <SettingsTab />
+            </Provider>
+        );
+
+        // Check that the current values are displayed using helper functions
+        checkInputValue(FIELD_LABELS.PRIMER_DNA_CONC, '50');
+        checkInputValue(FIELD_LABELS.MONOVALENT_IONS, '50');
+        checkInputValue(FIELD_LABELS.DIVALENT_IONS, '1.5');
+    });
+
+    it('allows editing when Edit button is clicked', () => {
+        cy.mount(
+            <Provider store={store}>
+                <SettingsTab />
+            </Provider>
+        );
+
+        // Initially, fields should be disabled
+        cy.contains('label', FIELD_LABELS.PRIMER_DNA_CONC)
+            .parent()
+            .find('input')
+            .should('be.disabled');
+
+        cy.contains('label', FIELD_LABELS.MONOVALENT_IONS)
+            .parent()
+            .find('input')
+            .should('be.disabled');
+
+        cy.contains('label', FIELD_LABELS.DIVALENT_IONS)
+            .parent()
+            .find('input')
+            .should('be.disabled');
+
+        // Click Edit button
+        cy.contains('Edit').click();
+
+        // Fields should now be enabled
+        cy.contains('label', FIELD_LABELS.PRIMER_DNA_CONC)
+            .parent()
+            .find('input')
+            .should('not.be.disabled');
+
+        cy.contains('label', FIELD_LABELS.MONOVALENT_IONS)
+            .parent()
+            .find('input')
+            .should('not.be.disabled');
+
+        cy.contains('label', FIELD_LABELS.DIVALENT_IONS)
+            .parent()
+            .find('input')
+            .should('not.be.disabled');
+
+        // Save and Cancel buttons should be visible
+        cy.contains('Save').should('be.visible');
+        cy.contains('Cancel').should('be.visible');
+    });
+
+    it('validates input values and shows error messages for invalid values', () => {
+        cy.mount(
+            <Provider store={store}>
+                <SettingsTab />
+            </Provider>
+        );
+
+        // Enter edit mode
+        cy.contains('Edit').click();
+
+        // Test invalid values (0 or negative) using helper functions
+        setInputValue(FIELD_LABELS.PRIMER_DNA_CONC, '0');
+        setInputValue(FIELD_LABELS.MONOVALENT_IONS, '-5');
+        setInputValue(FIELD_LABELS.DIVALENT_IONS, '0');
+
+        // Check error messages
+        cy.get('p').filter(':contains("Must be greater than 0")').should('have.length', 3);
+
+        // Save button should be disabled
+        cy.contains('Save').should('be.disabled');
+
+        // Check that fields show error state
+        cy.contains('label', FIELD_LABELS.PRIMER_DNA_CONC)
+            .parent()
+            .find('input')
+            .should('have.attr', 'aria-invalid', 'true');
+    });
+
+    it('accepts sensible values and enables save button', () => {
+        cy.mount(
+            <Provider store={store}>
+                <SettingsTab />
+            </Provider>
+        );
+
+        // Enter edit mode
+        cy.contains('Edit').click();
+
+        // Enter valid values using helper functions
+        setInputValue(FIELD_LABELS.PRIMER_DNA_CONC, '100');
+        setInputValue(FIELD_LABELS.MONOVALENT_IONS, '75');
+        setInputValue(FIELD_LABELS.DIVALENT_IONS, '2.5');
+
+        // No error messages should be visible
+        cy.contains('Must be greater than 0').should('not.exist');
+
+        // Save button should be enabled
+        cy.contains('Save').should('not.be.disabled');
+    });
+
+    it('updates store state when valid values are saved', () => {
+        cy.mount(
+            <Provider store={store}>
+                <SettingsTab />
+            </Provider>
+        );
+
+        // Enter edit mode
+        cy.contains('Edit').click();
+
+        // Enter new values using helper functions
+        setInputValue(FIELD_LABELS.PRIMER_DNA_CONC, '100');
+        setInputValue(FIELD_LABELS.MONOVALENT_IONS, '75');
+        setInputValue(FIELD_LABELS.DIVALENT_IONS, '2.5');
+
+        // Save the changes
+        cy.contains('Save').click();
+
+        // Verify the store state was updated
+        cy.then(() => {
+            const state = store.getState();
+            expect(state.cloning.globalPrimerSettings).to.deep.equal({
+                primer_dna_conc: 100,
+                primer_salt_monovalent: 75,
+                primer_salt_divalent: 2.5,
+            });
+        });
+
+        // Verify the UI shows the updated values using helper functions
+        checkInputValue(FIELD_LABELS.PRIMER_DNA_CONC, '100');
+        checkInputValue(FIELD_LABELS.MONOVALENT_IONS, '75');
+        checkInputValue(FIELD_LABELS.DIVALENT_IONS, '2.5');
+    });
+
+    it('cancels changes and reverts to original values', () => {
+        cy.mount(
+            <Provider store={store}>
+                <SettingsTab />
+            </Provider>
+        );
+
+        // Enter edit mode
+        cy.contains('Edit').click();
+
+        // Enter new values using helper functions
+        setInputValue(FIELD_LABELS.PRIMER_DNA_CONC, '999');
+        setInputValue(FIELD_LABELS.MONOVALENT_IONS, '888');
+        setInputValue(FIELD_LABELS.DIVALENT_IONS, '777');
+
+        // Cancel the changes
+        cy.contains('Cancel').click();
+
+        // Verify the values reverted to original using helper functions
+        checkInputValue(FIELD_LABELS.PRIMER_DNA_CONC, '50');
+        checkInputValue(FIELD_LABELS.MONOVALENT_IONS, '50');
+        checkInputValue(FIELD_LABELS.DIVALENT_IONS, '1.5');
+
+        // Verify the store state was not changed
+        cy.then(() => {
+            const state = store.getState();
+            expect(state.cloning.globalPrimerSettings).to.deep.equal({
+                primer_dna_conc: 50,
+                primer_salt_monovalent: 50,
+                primer_salt_divalent: 1.5,
+            });
+        });
+    });
+
+    it('handles decimal values correctly', () => {
+        cy.mount(
+            <Provider store={store}>
+                <SettingsTab />
+            </Provider>
+        );
+
+        // Enter edit mode
+        cy.contains('Edit').click();
+
+        // Enter decimal values using helper functions
+        setInputValue(FIELD_LABELS.PRIMER_DNA_CONC, '25.5');
+        setInputValue(FIELD_LABELS.MONOVALENT_IONS, '37.2');
+        setInputValue(FIELD_LABELS.DIVALENT_IONS, '0.8');
+
+        // Save the changes
+        cy.contains('Save').click();
+
+        // Verify the store state was updated with decimal values
+        cy.then(() => {
+            const state = store.getState();
+            expect(state.cloning.globalPrimerSettings).to.deep.equal({
+                primer_dna_conc: 25.5,
+                primer_salt_monovalent: 37.2,
+                primer_salt_divalent: 0.8,
+            });
+        });
+    });
+
+    it('validates edge case values', () => {
+        cy.mount(
+            <Provider store={store}>
+                <SettingsTab />
+            </Provider>
+        );
+
+        // Enter edit mode
+        cy.contains('Edit').click();
+
+        // Test very small positive values (should be valid) using helper functions
+        setInputValue(FIELD_LABELS.PRIMER_DNA_CONC, '0.1');
+        setInputValue(FIELD_LABELS.MONOVALENT_IONS, '0.01');
+        setInputValue(FIELD_LABELS.DIVALENT_IONS, '0.001');
+
+        // No error messages should be visible
+        cy.contains('Must be greater than 0').should('not.exist');
+
+        // Save button should be enabled
+        cy.contains('Save').should('not.be.disabled');
+
+        // Save and verify
+        cy.contains('Save').click();
+
+        cy.then(() => {
+            const state = store.getState();
+            expect(state.cloning.globalPrimerSettings).to.deep.equal({
+                primer_dna_conc: 0.1,
+                primer_salt_monovalent: 0.01,
+                primer_salt_divalent: 0.001,
+            });
+        });
+    });
+});