@opencloning/ui 1.0.0

package/src/components/primers/primer_design/SourceComponents/PrimerDesignGibsonAssembly.jsx

@@ -0,0 +1,65 @@
+import { Button, FormControl } from '@mui/material';
+import React from 'react';
+import { batch, useDispatch } from 'react-redux';
+import MultipleInputsSelector from '../../../sources/MultipleInputsSelector';
+import { cloningActions } from '@opencloning/store/cloning';
+import useStoreEditor from '../../../../hooks/useStoreEditor';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+function PrimerDesignGibsonAssembly({ source, assemblyType }) {
+  const [targets, setTargets] = React.useState(source.input.map(({ sequence }) => sequence));
+  const inputSequenceId = getPcrTemplateSequenceId(source);
+
+  const onInputChange = (newInputSequenceIds) => {
+    // Prevent unsetting the input of the source
+    if (!newInputSequenceIds.includes(inputSequenceId)) {
+      setTargets( (prev) => [...prev, ...newInputSequenceIds]);
+    } else {
+      setTargets(newInputSequenceIds);
+    }
+  };
+
+  const { updateStoreEditor } = useStoreEditor();
+  const { addPCRsAndSubsequentSourcesForAssembly, setCurrentTab, setMainSequenceId } = cloningActions;
+  const dispatch = useDispatch();
+  const onSubmit = (event) => {
+    event.preventDefault();
+    const newSequence = {
+      type: 'TemplateSequence',
+      primer_design: 'gibson_assembly',
+      circular: false,
+    };
+
+    batch(() => {
+    // Slice from the second on
+      const newPCRTemplates = targets.slice(1);
+      dispatch(addPCRsAndSubsequentSourcesForAssembly({ sourceId: source.id, newSequence, templateIds: newPCRTemplates, sourceType: assemblyType }));
+      dispatch(setMainSequenceId(inputSequenceId));
+      updateStoreEditor('mainEditor', inputSequenceId);
+      dispatch(setCurrentTab(3));
+      // Scroll to the top of the page after 300ms
+      setTimeout(() => {
+        document.querySelector('.tab-panels-container')?.scrollTo({ top: 0, behavior: 'instant' });
+      }, 300);
+    });
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <FormControl fullWidth>
+        <MultipleInputsSelector
+          inputSequenceIds={targets}
+          label="Input sequences (in order)"
+          onChange={onInputChange}
+        />
+      </FormControl>
+
+      <Button type="submit" variant="contained" color="success">
+        Design primers
+      </Button>
+
+    </form>
+  );
+}
+
+export default PrimerDesignGibsonAssembly;

package/src/components/primers/primer_design/SourceComponents/PrimerDesignHomologousRecombination.jsx

@@ -0,0 +1,84 @@
+import { Alert, Button, FormControl } from '@mui/material';
+import React from 'react';
+import { batch, useDispatch } from 'react-redux';
+import SingleInputSelector from '../../../sources/SingleInputSelector';
+import { cloningActions } from '@opencloning/store/cloning';
+import useStoreEditor from '../../../../hooks/useStoreEditor';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+function PrimerDesignHomologousRecombination({ source, primerDesignType }) {
+  const [target, setTarget] = React.useState('');
+
+  const { updateStoreEditor } = useStoreEditor();
+  const { addTemplateChildAndSubsequentSource, setCurrentTab, setMainSequenceId } = cloningActions;
+  const dispatch = useDispatch();
+  const inputSequenceId = getPcrTemplateSequenceId(source);
+  const onSubmit = (event) => {
+    event.preventDefault();
+    const newSource = {
+      input: [{ sequence: Number(target) }],
+      type: primerDesignType === 'homologous_recombination' ? 'HomologousRecombinationSource' : 'CRISPRSource',
+    };
+    const newSequence = {
+      type: 'TemplateSequence',
+      primer_design: 'homologous_recombination',
+      circular: false,
+    };
+
+    batch(() => {
+      dispatch(addTemplateChildAndSubsequentSource({ newSource, newSequence, sourceId: source.id }));
+      dispatch(setMainSequenceId(inputSequenceId));
+      updateStoreEditor('mainEditor', inputSequenceId);
+      dispatch(setCurrentTab(3));
+      // Scroll to the top of the page after 300ms
+      setTimeout(() => {
+        document.querySelector('.tab-panels-container')?.scrollTo({ top: 0, behavior: 'instant' });
+      }, 300);
+    });
+  };
+  return (
+    <form onSubmit={onSubmit}>
+      <Alert severity="info" icon={false} sx={{ textAlign: 'left' }}>
+        <p style={{ marginBottom: 4 }}>
+          Use this to design
+          {' '}
+          <strong>primers with homology arms</strong>
+          {' '}
+          to amplify a fragment of sequence
+          {' '}
+          {inputSequenceId}
+          {' '}
+          and insert it into a
+          {' '}
+          <strong>target sequence</strong>
+          {' '}
+          via
+          {' '}
+          {primerDesignType === 'homologous_recombination' ? 'homologous recombination' : 'CRISPR cut + homologous repair'}
+          .
+        </p>
+        <p>
+          If you haven&apos;t, import a
+          {' '}
+          <strong>target sequence</strong>
+          , then select it below.
+        </p>
+      </Alert>
+      <FormControl fullWidth>
+        <SingleInputSelector
+          label="Target sequence"
+          selectedId={target}
+          onChange={(e) => setTarget(e.target.value)}
+          inputSequenceIds={[]}
+        />
+      </FormControl>
+      {target && (
+      <Button type="submit" variant="contained" color="success">
+        Design primers
+      </Button>
+      )}
+    </form>
+  );
+}
+
+export default PrimerDesignHomologousRecombination;

package/src/components/primers/primer_design/SourceComponents/PrimerDesignSourceForm.jsx

@@ -0,0 +1,74 @@
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import React from 'react';
+
+import { batch, useDispatch } from 'react-redux';
+import PrimerDesignHomologousRecombination from './PrimerDesignHomologousRecombination';
+import PrimerDesignGibsonAssembly from './PrimerDesignGibsonAssembly';
+import { cloningActions } from '@opencloning/store/cloning';
+import useStoreEditor from '../../../../hooks/useStoreEditor';
+import PrimerDesignGatewayBP from './PrimerDesignGatewayBP';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+function PrimerDesignSourceForm({ source }) {
+  const [primerDesignType, setPrimerDesignType] = React.useState('');
+  const { updateStoreEditor } = useStoreEditor();
+  const { addPCRsAndSubsequentSourcesForAssembly, setMainSequenceId, setCurrentTab } = cloningActions;
+  const dispatch = useDispatch();
+  const inputSequenceId = getPcrTemplateSequenceId(source);
+  React.useEffect(() => {
+    // Here the user does not have to select anything else
+    if (primerDesignType === 'restriction_ligation' || primerDesignType === 'simple_pair') {
+      const newSequence = {
+        type: 'TemplateSequence',
+        primer_design: primerDesignType,
+        circular: false,
+      };
+
+      batch(() => {
+        dispatch(addPCRsAndSubsequentSourcesForAssembly({ sourceId: source.id, newSequence, templateIds: [], sourceType: null }));
+        dispatch(setMainSequenceId(inputSequenceId));
+        updateStoreEditor('mainEditor', inputSequenceId);
+        dispatch(setCurrentTab(3));
+        // Scroll to the top of the page after 300ms
+        setTimeout(() => {
+          document.querySelector('.tab-panels-container')?.scrollTo({ top: 0, behavior: 'instant' });
+        }, 300);
+      });
+    }
+  }, [primerDesignType]);
+
+  return (
+    <>
+      <FormControl fullWidth>
+        <InputLabel id="select-primer-design-type-label">Purpose of primers</InputLabel>
+        <Select
+          id="select-primer-design-type"
+          value={primerDesignType}
+          onChange={(event) => setPrimerDesignType(event.target.value)}
+          label="Purpose of primers"
+        >
+          <MenuItem value="simple_pair">Normal PCR</MenuItem>
+          <MenuItem value="homologous_recombination">Homologous Recombination</MenuItem>
+          <MenuItem value="crispr">CRISPR</MenuItem>
+          <MenuItem value="GibsonAssemblySource">Gibson Assembly</MenuItem>
+          <MenuItem value="InFusionSource">In-Fusion</MenuItem>
+          <MenuItem value="InVivoAssemblySource">In vivo Assembly</MenuItem>
+          <MenuItem value="restriction_ligation">Restriction and Ligation</MenuItem>
+          <MenuItem value="gateway_bp">Gateway BP reaction</MenuItem>
+        </Select>
+      </FormControl>
+      {['homologous_recombination', 'crispr'].includes(primerDesignType)
+      && (
+        <PrimerDesignHomologousRecombination source={source} primerDesignType={primerDesignType} />
+      )}
+      {['GibsonAssemblySource', 'InFusionSource', 'InVivoAssemblySource'].includes(primerDesignType) && (
+        <PrimerDesignGibsonAssembly source={source} assemblyType={primerDesignType} />
+      )}
+      {primerDesignType === 'gateway_bp' && (
+        <PrimerDesignGatewayBP source={source} />
+      )}
+    </>
+  );
+}
+
+export default PrimerDesignSourceForm;

package/src/components/primers/primer_design/common/NoAttPSitesError.jsx

@@ -0,0 +1,31 @@
+import { Alert } from '@mui/material';
+import React from 'react';
+
+function NoAttPSitesError({ sites }) {
+  return (
+    <Alert severity="error" icon={false}>
+      <p>
+        At least two attP sites are required.
+      </p>
+      {sites.length === 0 && <p>No att sites of any type were found.</p>}
+      {sites.length > 0 && (
+      <>
+        <p style={{ marginBottom: '10px' }}>
+          We found the following sites:
+        </p>
+
+        {sites.map((site) => (
+          <div key={site.siteName}>
+            {site.siteName}
+            {' '}
+            {site.location}
+          </div>
+        ))}
+
+      </>
+      )}
+    </Alert>
+  );
+}
+
+export default NoAttPSitesError;

package/src/components/primers/primer_details/PCRTable.cy.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { mount } from '@cypress/react';
+import PCRTable from './PCRTable';
+import { mockPCRDetails } from '../../../../../../tests/mockPrimerDetailsData';
+
+describe('PCRTable', () => {
+  it('renders PCR details correctly', () => {
+    mount(<PCRTable pcrDetail={mockPCRDetails[0]} />);
+    // PCR 3 Section Header
+    cy.get('.pcr-table tr').eq(0).should('contain', 'PCR 3');
+
+    // Primer Names Row
+    cy.contains('.pcr-table tr', 'Primer names').within(() => {
+      cy.get('td').eq(1).should('contain', 'fwd');
+      cy.get('td').eq(2).should('contain', 'rvs');
+    });
+
+    // Binding Information
+    cy.contains('.pcr-table tr', 'Binding length').within(() => {
+      cy.get('td').eq(1).should('contain', '21');
+      cy.get('td').eq(2).should('contain', '20');
+    });
+
+    cy.contains('.pcr-table tr', 'Tm (binding)').within(() => {
+      cy.get('td').eq(1).should('contain', '56.7 °C');
+      cy.get('td').eq(2).should('contain', '50.9 °C');
+    });
+
+    cy.contains('.pcr-table tr', 'GC% (binding)').within(() => {
+      cy.get('td').eq(1).should('contain', '48%');
+      cy.get('td').eq(2).should('contain', '40%');
+    });
+
+    // Temperature Difference
+    cy.contains('.pcr-table tr', 'Tm difference').within(() => {
+      cy.get('td').should('contain', '5.8 °C');
+    });
+
+    // Heterodimer Information
+    cy.contains('.pcr-table tr', 'Tm (heterodimer)').within(() => {
+      cy.get('td').should('contain', '20.5 °C');
+    });
+
+    cy.contains('.pcr-table tr', 'ΔG (heterodimer)').within(() => {
+      cy.get('td').should('contain', '-5276 kcal/mol');
+    });
+
+    // Verify heterodimer figure exists
+    cy.contains('SEQ').should('exist');
+  });
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Table, TableBody } from '@mui/material';
+import { formatGcContent, formatMeltingTemperature, formatDeltaG } from './primerDetailsFormatting';
+import Primer3Figure from './Primer3Figure';
+import TableSection from './TableSection';
+
+export default function PCRTable({ pcrDetail }) {
+  const { sourceId, sourceType, fwdPrimer, rvsPrimer, heterodimer } = pcrDetail;
+  const name = (sourceType === 'PCRSource') ? 'PCR' : 'Oligonucleotide hybridization';
+
+  return (
+    <Table size="small" className="pcr-table">
+      <TableBody />
+
+      <TableSection
+        title={`${name} ${sourceId}`}
+        values={[
+          ['Primer names', fwdPrimer.name, rvsPrimer.name],
+          ['Binding length', fwdPrimer.length, rvsPrimer.length],
+          ['Tm (binding)', `${formatMeltingTemperature(fwdPrimer.melting_temperature)} °C`, `${formatMeltingTemperature(rvsPrimer.melting_temperature)} °C`],
+          ['GC% (binding)', `${formatGcContent(fwdPrimer.gc_content)}%`, `${formatGcContent(rvsPrimer.gc_content)}%`],
+          ['Tm difference', `${formatMeltingTemperature(fwdPrimer.melting_temperature - rvsPrimer.melting_temperature)} °C`],
+        ]}
+      />
+      {heterodimer && (
+      <>
+        <TableSection
+          values={[['Tm (heterodimer)', `${formatMeltingTemperature(heterodimer.melting_temperature)} °C`], ['ΔG (heterodimer)', `${formatDeltaG(heterodimer.deltaG)} kcal/mol`]]}
+        />
+        <Primer3Figure figure={heterodimer.figure} />
+      </>
+      )}
+    </Table>
+  );
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TableCell, TableRow } from '@mui/material';
+
+export default function Primer3Figure({ figure }) {
+  // Remove all trailing spaces
+  const trimmedRows = figure.split('\n').map((row) => row.trim());
+  const longestRow = Math.max(...trimmedRows.map((row) => row.length));
+  return (
+    <TableRow>
+      <TableCell colSpan={3} sx={{ padding: 0, margin: 0 }}>
+        <code style={{ width: '100%',
+          whiteSpace: 'pre',
+          fontFamily: 'monospace',
+          display: 'block',
+          maxWidth: '100%',
+          overflow: 'auto',
+          margin: 0,
+          fontSize: `min(calc(100% * 80 / ${longestRow}), 1rem)` }}
+        >
+          {trimmedRows.join('\n')}
+        </code>
+      </TableCell>
+    </TableRow>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { Skeleton } from '@mui/material';
+import React from 'react';
+import { formatGcContent, formatMeltingTemperature } from './primerDetailsFormatting';
+
+function PrimerDetailsTds({ primerDetails, pcrDetails }) {
+  // A primer could be involved in multiple PCR reactions, so we pick the one in which it has the longest
+  // annealing length for display in the table.
+  const pcrDetail = pcrDetails.find(({ fwdPrimer, rvsPrimer }) => fwdPrimer.id === primerDetails.id || rvsPrimer.id === primerDetails.id);
+
+  const loadingOrErrorComponent = <Skeleton variant="text" height={20} />;
+  let meltingTemperature = formatMeltingTemperature(primerDetails.melting_temperature);
+  let gcContent = formatGcContent(primerDetails.gc_content);
+  let { length } = primerDetails;
+  if (pcrDetail) {
+    const pcrPrimerDetail = primerDetails.id === pcrDetail.fwdPrimer.id ? pcrDetail.fwdPrimer : pcrDetail.rvsPrimer;
+    // We pick the pair with the highest binding length for display here
+    meltingTemperature = `${formatMeltingTemperature(pcrPrimerDetail.melting_temperature)} (${meltingTemperature})`;
+    gcContent = `${formatGcContent(pcrPrimerDetail.gc_content)} (${gcContent})`;
+    length = `${pcrPrimerDetail.length} (${length})`;
+  }
+  return (
+    <>
+      <td style={{ whiteSpace: 'nowrap' }} className="length">{length}</td>
+      {primerDetails.gc_content !== undefined ? (
+        <>
+          <td style={{ whiteSpace: 'nowrap' }} className="melting-temperature">{meltingTemperature}</td>
+          <td style={{ whiteSpace: 'nowrap' }} className="gc-content">{gcContent}</td>
+        </>
+      ) : (
+        <>
+          <td style={{ whiteSpace: 'nowrap' }} className="melting-temperature">{loadingOrErrorComponent}</td>
+          <td style={{ whiteSpace: 'nowrap' }} className="gc-content">{loadingOrErrorComponent}</td>
+        </>
+      )}
+    </>
+  );
+}
+
+export default PrimerDetailsTds;

package/src/components/primers/primer_details/PrimerInfoIcon.cy.jsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { mount } from '@cypress/react';
+import PrimerInfoIcon, { PrimerInfoDialog } from './PrimerInfoIcon';
+import { mockPCRDetails, mockPrimerDetails, mockPrimer } from '../../../../../../tests/mockPrimerDetailsData';
+
+const emptyPCRDetails = [];
+
+describe('PrimerInfoIcon Component', () => {
+  it('renders the info icon when no warnings', () => {
+    mount(
+      <PrimerInfoIcon
+        primerDetails={mockPrimerDetails}
+        pcrDetails={emptyPCRDetails}
+      />,
+    );
+
+    cy.get('svg[data-testid="InfoIcon"]').should('exist');
+    // Mouseover shows tooltip
+    cy.get('svg[data-testid="InfoIcon"]').trigger('mouseover');
+    cy.get('div[role="tooltip"]').should('exist');
+    cy.get('div[role="tooltip"]').should('contain', 'Primer details');
+    cy.get('svg[data-testid="InfoIcon"]').click();
+    cy.get('div[role="dialog"]').should('exist');
+  });
+  it('renders the warning icon when warnings', () => {
+    mount(
+      <PrimerInfoIcon
+        primerDetails={{ ...mockPrimerDetails, gc_content: 0.0 }}
+        pcrDetails={emptyPCRDetails}
+      />,
+    );
+
+    cy.get('svg[data-testid="WarningIcon"]').should('exist');
+    // Mouseover shows tooltip
+    cy.get('svg[data-testid="WarningIcon"]').trigger('mouseover');
+    cy.get('div[role="tooltip"]').should('exist');
+    cy.get('div[role="tooltip"]').should('contain', 'GC content');
+    cy.get('svg[data-testid="WarningIcon"]').click();
+    cy.get('div[role="dialog"]').should('exist');
+  });
+  it('handles connection errors', () => {
+    mount(
+      <PrimerInfoIcon
+        primerDetails={{ ...mockPrimer }}
+        pcrDetails={emptyPCRDetails}
+      />,
+    );
+    cy.get('span').trigger('mouseover');
+    cy.get('div[role="tooltip"]').should('exist');
+    cy.get('div[role="tooltip"]').should('contain', 'Primer details not available');
+  });
+});
+
+describe('PrimerInfoDialog Component', () => {
+  it('Without PCR details', () => {
+    mount(
+      <PrimerInfoDialog
+        primerDetails={mockPrimerDetails}
+        pcrDetails={emptyPCRDetails}
+        open
+        onClose={() => {}}
+      />,
+    );
+    cy.get('div[role="dialog"]').should('exist');
+    cy.get('tr').eq(0).should('contain', 'Full sequence');
+    cy.get('tr').eq(1).find('td').eq(0)
+      .should('contain', 'Name');
+    cy.get('tr').eq(1).find('td').eq(1)
+      .should('contain', 'Test Primer');
+
+    // Full sequence section
+    cy.get('tr').eq(2).find('td').eq(0)
+      .should('contain', 'Length');
+    cy.get('tr').eq(2).find('td').eq(1)
+      .should('contain', '8');
+    cy.get('tr').eq(3).find('td').eq(0)
+      .should('contain', 'Tm (full sequence)');
+    cy.get('tr').eq(3).find('td').eq(1)
+      .should('contain', '60 °C');
+    cy.get('tr').eq(4).find('td').eq(0)
+      .should('contain', 'GC% (full sequence)');
+    cy.get('tr').eq(4).find('td').eq(1)
+      .should('contain', '50%');
+
+    // Homodimer section
+    cy.get('tr').eq(5).should('contain', 'Homodimer');
+    cy.get('tr').eq(6).find('td').eq(0)
+      .should('contain', 'Tm (homodimer)');
+    cy.get('tr').eq(6).find('td').eq(1)
+      .should('contain', '60 °C');
+    cy.get('tr').eq(7).find('td').eq(0)
+      .should('contain', 'ΔG (homodimer)');
+    cy.get('tr').eq(7).find('td').eq(1)
+      .should('contain', '-100 kcal/mol');
+
+    // Hairpin section
+    cy.get('tr').eq(9).should('contain', 'Hairpin');
+    cy.get('tr').eq(10).find('td').eq(0)
+      .should('contain', 'Tm (hairpin)');
+    cy.get('tr').eq(10).find('td').eq(1)
+      .should('contain', '60 °C');
+    cy.get('tr').eq(11).find('td').eq(0)
+      .should('contain', 'ΔG (hairpin)');
+    cy.get('tr').eq(11).find('td').eq(1)
+      .should('contain', '-100 kcal/mol');
+    cy.get('.pcr-table').should('not.exist');
+  });
+
+  it('with PCR details', () => {
+    mount(
+      <PrimerInfoDialog
+        primerDetails={mockPrimerDetails}
+        pcrDetails={mockPCRDetails}
+        open
+        onClose={() => {}}
+      />,
+    );
+    cy.get('.pcr-table').should('exist');
+  });
+  it('with multiple PCR details', () => {
+    const mockPCRDetailsWithMultipleSources = [
+      { ...mockPCRDetails[0], sourceId: 1 },
+      { ...mockPCRDetails[0], sourceId: 2 },
+    ];
+    mount(
+      <PrimerInfoDialog
+        primerDetails={mockPrimerDetails}
+        pcrDetails={mockPCRDetailsWithMultipleSources}
+        open
+        onClose={() => {}}
+      />,
+    );
+    cy.get('.pcr-table').should('have.length', 2);
+    cy.get('.pcr-table').eq(0).should('contain', 'PCR 1');
+    cy.get('.pcr-table').eq(1).should('contain', 'PCR 2');
+  });
+});

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

@@ -0,0 +1,132 @@
+import { Dialog, DialogContent, IconButton, Tooltip, Table, TableBody } from '@mui/material';
+import React from 'react';
+import InfoIcon from '@mui/icons-material/Info';
+import WarningIcon from '@mui/icons-material/Warning';
+import { formatGcContent, formatMeltingTemperature, formatDeltaG } from './primerDetailsFormatting';
+import Primer3Figure from './Primer3Figure';
+import TableSection from './TableSection';
+import PCRTable from './PCRTable';
+
+export function PrimerInfoDialog({ primerDetails, open, onClose, pcrDetails }) {
+  const relatedPcrDetails = pcrDetails.filter(({ fwdPrimer, rvsPrimer }) => fwdPrimer.id === primerDetails.id || rvsPrimer.id === primerDetails.id);
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogContent>
+
+        <Table size="small">
+          <TableBody>
+            <TableSection
+              title="Full sequence"
+              values={[
+                ['Name', primerDetails.name],
+                ['Length', primerDetails.length],
+                ['Tm (full sequence)', `${formatMeltingTemperature(primerDetails.melting_temperature)} °C`],
+                ['GC% (full sequence)', `${formatGcContent(primerDetails.gc_content)}%`],
+              ]}
+            />
+            {/* TODO: Warning if length > 60 */}
+            {primerDetails.homodimer && (
+            <>
+              <TableSection
+                title="Homodimer"
+                values={[
+                  ['Tm (homodimer)', `${formatMeltingTemperature(primerDetails.homodimer.melting_temperature)} °C`],
+                  ['ΔG (homodimer)', `${formatDeltaG(primerDetails.homodimer.deltaG)} kcal/mol`],
+                ]}
+              />
+              <Primer3Figure figure={primerDetails.homodimer.figure} />
+            </>
+            )}
+            {primerDetails.hairpin && (
+            <>
+              <TableSection
+                title="Hairpin"
+                values={[
+                  ['Tm (hairpin)', `${formatMeltingTemperature(primerDetails.hairpin.melting_temperature)} °C`],
+                  ['ΔG (hairpin)', `${formatDeltaG(primerDetails.hairpin.deltaG)} kcal/mol`],
+                ]}
+              />
+              <Primer3Figure figure={primerDetails.hairpin.figure} />
+            </>
+            )}
+          </TableBody>
+        </Table>
+        {relatedPcrDetails.map((pcrDetail) => (
+          <PCRTable
+            key={pcrDetail.sourceId}
+            pcrDetail={pcrDetail}
+          />
+        ))}
+
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const primerProblematicValues = (primerDetails, pcrDetails) => {
+  const pcrDetail = pcrDetails.find(({ fwdPrimer, rvsPrimer }) => fwdPrimer.id === primerDetails.id || rvsPrimer.id === primerDetails.id);
+  const problematicValues = {
+    homodimer: '',
+    hairpin: '',
+    gcContent: '',
+    meltingTemperature: '',
+  };
+  let gcContent = primerDetails.gc_content;
+  let meltingTemperature = primerDetails.melting_temperature;
+  if (pcrDetail) {
+    const pcrPrimer = primerDetails.id === pcrDetail.fwdPrimer.id ? pcrDetail.fwdPrimer : pcrDetail.rvsPrimer;
+    meltingTemperature = pcrPrimer.melting_temperature;
+    gcContent = pcrPrimer.gc_content;
+  }
+
+  if (gcContent < 0.30 || gcContent > 0.70) {
+    problematicValues.gcContent = 'GC content is outside the optimal range';
+  }
+  if (meltingTemperature < 50 || meltingTemperature > 70) {
+    problematicValues.meltingTemperature = 'Melting temperature is outside the optimal range';
+  }
+
+  return problematicValues;
+  if (primerDetails.homodimer && primerDetails.homodimer.deltaG < -8000) {
+    problematicValues.homodimer = 'May form homodimers';
+  }
+  if (primerDetails.hairpin && primerDetails.hairpin.deltaG < -8000) {
+    problematicValues.hairpin = 'May form hairpins';
+  }
+
+  return problematicValues;
+};
+
+const primerWarning = (problematicValues) => {
+  const field = Object.keys(problematicValues).find((key) => problematicValues[key] !== '');
+  return field ? problematicValues[field] : '';
+};
+
+function PrimerInfoIcon({ primerDetails, pcrDetails }) {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  const warning = primerWarning(primerProblematicValues(primerDetails, pcrDetails));
+  let tooltipTitle = 'Primer details';
+  const disabled = primerDetails.melting_temperature === undefined;
+  if (disabled) {
+    tooltipTitle = 'Primer details not available';
+  } else if (warning !== '') {
+    tooltipTitle = warning;
+  }
+  return (
+    <>
+      <Tooltip title={tooltipTitle} placement="top" arrow>
+        {/* This span is necessary to work when the button is disabled */}
+        <span>
+          <IconButton disabled={disabled} onClick={handleOpen}>
+            {warning === '' ? <InfoIcon /> : <WarningIcon color="warning" />}
+          </IconButton>
+        </span>
+      </Tooltip>
+      {open && <PrimerInfoDialog primerDetails={primerDetails} open={open} onClose={handleClose} pcrDetails={pcrDetails} />}
+    </>
+  );
+}
+
+export default PrimerInfoIcon;