@opencloning/ui 1.0.0

package/src/components/primers/PrimerList.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import Button from '@mui/material/Button';
+import PrimerForm from './PrimerForm';
+import PrimerTableRow from './PrimerTableRow';
+import './PrimerList.css';
+import { cloningActions } from '@opencloning/store/cloning';
+import ImportPrimersButton from './import_primers/ImportPrimersButton';
+import PrimerDatabaseImportForm from './import_primers/PrimerDatabaseImportForm';
+import { getUsedPrimerIds, isCompleteOligoHybridizationSource, isCompletePCRSource } from '@opencloning/store/cloning_utils';
+import useDatabase from '../../hooks/useDatabase';
+import DownloadPrimersButton from './DownloadPrimersButton';
+import useMultiplePrimerDetails from './primer_details/useMultiplePrimerDetails';
+import { usePCRDetails } from './primer_details/usePCRDetails';
+import RequestStatusWrapper from '../form/RequestStatusWrapper';
+
+function PrimerList() {
+  const primers = useSelector((state) => state.cloning.primers, shallowEqual);
+  const { deletePrimer: deleteAction, addPrimer: addAction, editPrimer: editAction } = cloningActions;
+  const database = useDatabase();
+  const dispatch = useDispatch();
+  const deletePrimer = (id) => dispatch(deleteAction(id));
+  const addPrimer = (newPrimer) => dispatch(addAction(newPrimer));
+  const editPrimer = (editedPrimer) => dispatch(editAction(editedPrimer));
+  const [addingPrimer, setAddingPrimer] = React.useState(false);
+  const [editingPrimerId, setEditingPrimerId] = React.useState(null);
+  const [importingPrimer, setImportingPrimer] = React.useState(false);
+  const onEditClick = (id) => {
+    setEditingPrimerId(id);
+    setAddingPrimer(false);
+  };
+  const editingPrimer = primers.find((p) => p.id === editingPrimerId);
+  const switchAddingPrimer = () => setAddingPrimer(!addingPrimer);
+  // We don't allow used primers to be deleted
+  const primerIdsInUse = useSelector(
+    (state) => getUsedPrimerIds(state.cloning.sources),
+    shallowEqual,
+  );
+  const pcrSourceIds = useSelector((state) => state.cloning.sources
+    .filter((source) => isCompletePCRSource(source) || isCompleteOligoHybridizationSource(source))
+    .map((source) => source.id));
+  const { primerDetails, retryGetPrimerDetails, requestStatus: primerDetailsRequestStatus } = useMultiplePrimerDetails(primers);
+  const { pcrDetails, retryGetPCRDetails, requestStatus: pcrDetailsRequestStatus } = usePCRDetails(pcrSourceIds);
+
+  const details = primerDetails.length > 0 ? primerDetails : primers.map((p) => ({ ...p, length: p.sequence.length }));
+  return (
+    <>
+      <div className="primer-table-container">
+        <RequestStatusWrapper requestStatus={primerDetailsRequestStatus} retry={() => { retryGetPrimerDetails(); retryGetPCRDetails(); }}>
+          <RequestStatusWrapper requestStatus={pcrDetailsRequestStatus} retry={retryGetPCRDetails} />
+        </RequestStatusWrapper>
+        <table>
+          <thead>
+            <tr style={{ whiteSpace: 'nowrap' }}>
+              <th> </th>
+              <th>Name</th>
+              <th>Length</th>
+              <th>Tm</th>
+              <th>GC%</th>
+              <th>Sequence</th>
+            </tr>
+          </thead>
+          <tbody>
+            {details.filter((primer) => primer.id !== editingPrimerId).map((primer) => (
+              <PrimerTableRow
+                key={primer.id}
+                primerDetails={primer}
+                pcrDetails={pcrDetails}
+                deletePrimer={deletePrimer}
+                canBeDeleted={!primerIdsInUse.includes(primer.id)}
+                onEditClick={onEditClick}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="primer-form-container">
+        {(editingPrimerId && (
+          <PrimerForm
+            key="primer-edit"
+            submitPrimer={editPrimer}
+            cancelForm={() => setEditingPrimerId(null)}
+            existingNames={primers.filter((p) => p.name !== editingPrimer.name).map((p) => p.name)}
+            disabledSequenceText={primerIdsInUse.includes(editingPrimerId) ? 'Cannot edit sequence in use' : ''}
+            primer={editingPrimer}
+          />
+        )) || (addingPrimer && (
+          <PrimerForm
+            key="primer-add"
+            submitPrimer={addPrimer}
+            cancelForm={switchAddingPrimer}
+            existingNames={primers.map((p) => p.name)}
+          />
+        )) || (importingPrimer && (
+          <PrimerDatabaseImportForm
+            submitPrimer={addPrimer}
+            cancelForm={() => setImportingPrimer(false)}
+            existingNames={primers.map((p) => p.name)}
+          />
+        )) || (
+            <div className="primer-add-container">
+              <Button
+                variant="contained"
+                onClick={switchAddingPrimer}
+              >
+                Add Primer
+              </Button>
+              <ImportPrimersButton addPrimer={addPrimer} />
+              <DownloadPrimersButton primers={primers} />
+              {database && (
+                <Button
+                  variant="contained"
+                  onClick={() => setImportingPrimer(true)}
+                >
+                  {`Import from ${database.name}`}
+                </Button>
+              )}
+            </div>
+          )}
+      </div>
+
+    </>
+  );
+}
+
+export default PrimerList;

package/src/components/primers/PrimerTableRow.cy.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PrimerTableRow from './PrimerTableRow';
+import { mockPrimerDetails, mockPCRDetails, mockPrimer } from '../../../../../tests/mockPrimerDetailsData';
+
+describe('<PrimerTableRow />', () => {
+  it('displays the right information with PCR details', () => {
+    cy.mount(
+      <PrimerTableRow
+        primerDetails={mockPrimerDetails}
+        pcrDetails={mockPCRDetails}
+      />,
+    );
+
+    cy.get('.name').should('contain', 'Test Primer');
+    cy.get('.melting-temperature').should('contain', '56.7 (60)');
+    cy.get('.gc-content').should('contain', '48 (50)');
+    cy.get('.length').should('contain', '21 (8)');
+    cy.get('.sequence').should('contain', 'ACGTACGT');
+  });
+  it('displays the right information without PCR details', () => {
+    cy.mount(
+      <PrimerTableRow
+        primerDetails={mockPrimerDetails}
+        pcrDetails={[]}
+      />,
+    );
+    cy.get('.melting-temperature').should('contain', '60');
+    cy.get('.gc-content').should('contain', '50');
+    cy.get('.length').should('contain', '8');
+  });
+  it('shows skeletons when info missing', () => {
+    cy.mount(
+      <PrimerTableRow
+        primerDetails={mockPrimer}
+        pcrDetails={[]}
+      />,
+    );
+    cy.get('.melting-temperature .MuiSkeleton-root').should('exist');
+    cy.get('.gc-content .MuiSkeleton-root').should('exist');
+  });
+  it('shows zero values', () => {
+    // There is a handful of places where we test that values are not undefined,
+    // but if we mistakenly test for bool and the value is 0, nothing will show.
+    // This test is to make sure that we are testing for undefined instead of bool.
+    cy.mount(
+      <PrimerTableRow
+        primerDetails={{ ...mockPrimerDetails, melting_temperature: 0, gc_content: 0, length: 0 }}
+        pcrDetails={[
+          { ...mockPCRDetails[0], fwdPrimer: { ...mockPCRDetails[0].fwdPrimer, melting_temperature: 0, gc_content: 0, length: 0 } },
+        ]}
+      />,
+    );
+    cy.get('.melting-temperature').should('contain', '0 (0)');
+    cy.get('.gc-content').should('contain', '0 (0)');
+    cy.get('.length').should('contain', '0 (0)');
+  });
+});

package/src/components/primers/PrimerTableRow.jsx

@@ -0,0 +1,84 @@
+import { IconButton, Tooltip } from '@mui/material';
+import React, { useState } from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
+import ClearIcon from '@mui/icons-material/Clear';
+import SubmitToDatabaseDialog from '../form/SubmitToDatabaseDialog';
+import useDatabase from '../../hooks/useDatabase';
+import PrimerDetailsTds from './primer_details/PrimerDetailsTds';
+import PrimerInfoIcon from './primer_details/PrimerInfoIcon';
+
+function PrimerTableRow({ primerDetails, deletePrimer, canBeDeleted, onEditClick, pcrDetails }) {
+  const [saveToDatabaseDialogOpen, setSaveToDatabaseDialogOpen] = useState(false);
+
+  const database = useDatabase();
+
+  React.useEffect(() => {
+    if (!primerDetails.database_id) {
+      setSaveToDatabaseDialogOpen(false);
+    }
+  }, [primerDetails.database_id]);
+
+  const isSavedToDatabase = database && Boolean(primerDetails.database_id);
+
+  let deleteMessage;
+  if (!canBeDeleted) {
+    deleteMessage = isSavedToDatabase ? 'Cannot remove primer in use from session' : 'Cannot delete primer in use';
+  } else {
+    deleteMessage = isSavedToDatabase ? 'Remove from session' : 'Delete';
+  }
+
+  return (
+    <tr>
+      <td className="icons">
+        <Tooltip arrow title={deleteMessage} placement="top">
+          <IconButton onClick={() => (canBeDeleted && deletePrimer(primerDetails.id))}>
+            {isSavedToDatabase ? <ClearIcon /> : <DeleteIcon />}
+          </IconButton>
+        </Tooltip>
+        <Tooltip arrow title={isSavedToDatabase ? `Stored in ${database.name}` : 'Edit'} placement="top">
+          {isSavedToDatabase ? (
+            <IconButton
+              onClick={() => window.open(database.getPrimerLink(primerDetails.database_id), '_blank')}
+              sx={{ cursor: 'pointer' }}
+            >
+              <database.DatabaseIcon color="success" />
+            </IconButton>
+          ) : (
+            <IconButton onClick={() => (onEditClick(primerDetails.id))}>
+              <EditIcon />
+            </IconButton>
+          )}
+        </Tooltip>
+        <PrimerInfoIcon primerDetails={primerDetails} pcrDetails={pcrDetails} />
+        {database && !primerDetails.database_id && (
+          <>
+            <Tooltip arrow title={`Save to ${database.name}`} placement="top">
+              <IconButton onClick={() => setSaveToDatabaseDialogOpen(true)}>
+                <database.SubmitIcon />
+              </IconButton>
+            </Tooltip>
+            {saveToDatabaseDialogOpen && (
+              <SubmitToDatabaseDialog
+                id={primerDetails.id}
+                dialogOpen={saveToDatabaseDialogOpen}
+                setDialogOpen={setSaveToDatabaseDialogOpen}
+                resourceType="primer"
+              />
+            )}
+          </>
+        )}
+      </td>
+      <td className="name">{primerDetails.name}</td>
+      <PrimerDetailsTds
+        primerId={primerDetails.id}
+        primerDetails={primerDetails}
+        pcrDetails={pcrDetails}
+      />
+      <td className="sequence">{primerDetails.sequence}</td>
+    </tr>
+  );
+}
+
+export default PrimerTableRow;

package/src/components/primers/SelectPrimerForm.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { FormControl, InputLabel, Select, MenuItem, Box, Chip } from '@mui/material';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+
+function chipRenderer(selected, primers) {
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+      {selected.map((id) => (
+        <Chip key={id} label={primers.find((p) => p.id === id).name} />
+      ))}
+    </Box>
+  );
+}
+
+function SelectPrimerForm({ primers, selected, onChange, goToPrimerTab, label, multiple = false }) {
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    // If the primer that was selected is deleted
+    const primerIds = primers.map(({ id }) => id);
+    if (!multiple) {
+      if (selected && !primerIds.includes(selected)) {
+        onChange(null);
+      }
+    } else {
+      onChange(selected.filter((id) => primerIds.includes(id)));
+    }
+  }, [primers]);
+
+  const onChangeHandleCreatePrimer = (value) => {
+    if (multiple) {
+      onChange(value.filter((id) => id !== ""));
+    } else {
+      onChange(value);
+    }
+  };
+
+  const handleCreatePrimerClick = () => {
+    setOpen(false);
+    goToPrimerTab();
+  };
+
+  return (
+    <FormControl fullWidth>
+      <InputLabel>{label}</InputLabel>
+      <Select
+        multiple={multiple}
+        value={selected}
+        onChange={(e) => onChangeHandleCreatePrimer(e.target.value)}
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        open={open}
+        label={label}
+        renderValue={multiple ? (s) => chipRenderer(s, primers) : undefined}
+      >
+        <MenuItem onClick={handleCreatePrimerClick} value="">
+          <AddCircleIcon color="success" />
+          <em style={{ marginLeft: 8 }}>Create primer</em>
+        </MenuItem>
+        {primers.map(({ name, id }) => (<MenuItem key={id} value={id}>{name}</MenuItem>))}
+      </Select>
+    </FormControl>
+  );
+}
+
+export default SelectPrimerForm;

package/src/components/primers/import_primers/ImportPrimersButton.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import Modal from '@mui/material/Modal';
+import Box from '@mui/material/Box';
+import useAlerts from '../../../hooks/useAlerts';
+import './styles.css';
+
+import { primersFromTextFile } from '@opencloning/utils/fileParsers';
+import PrimersImportTable from './ImportPrimersTable';
+
+function ImportPrimersButton({ addPrimer }) {
+  const { addAlert } = useAlerts();
+  const existingNames = useSelector((state) => state.cloning.primers.map((p) => p.name), shallowEqual);
+
+  // Ref to the hidden file input element
+  const hiddenFileInput = React.useRef(null);
+  const [openModal, setOpenModal] = useState(false);
+  const [importedPrimers, setImportedPrimers] = useState([]);
+  const importButtonDisabled = importedPrimers.every((primer) => primer.error !== '');
+
+  // Function to simulate click on hidden file input
+  const handleUploadClick = () => {
+    hiddenFileInput.current.click();
+  };
+
+  // Function to handle file selection
+  const handleFileUpload = async (event) => {
+    const fileUploaded = event.target.files[0];
+    try {
+      const uploadedPrimers = await primersFromTextFile(fileUploaded, existingNames);
+      setImportedPrimers(uploadedPrimers);
+      setOpenModal(true);
+    } catch (error) {
+      addAlert({
+        message: error.message,
+        severity: 'error',
+      });
+    }
+    event.target.value = null;
+  };
+
+  const handleImportClick = () => {
+    importedPrimers.forEach((primer) => {
+      if (primer.error === '') {
+        addPrimer({ name: primer.name, sequence: primer.sequence });
+      }
+    });
+    setOpenModal(false);
+  };
+
+  return (
+    <>
+      <Tooltip arrow title={<span style={{ fontSize: '1.4em' }}>Upload a .csv or .tsv file with headers &apos;name&apos; and &apos;sequence&apos;</span>}>
+        <Button
+          onClick={handleUploadClick}
+          variant="contained"
+        >
+          Import from file
+        </Button>
+      </Tooltip>
+
+      <input
+        style={{ display: 'none' }}
+        type="file"
+        accept=".csv,.tsv"
+        ref={hiddenFileInput}
+        onChange={handleFileUpload}
+      />
+
+      <Modal open={openModal} onClose={() => setOpenModal(false)}>
+        <Box className="import-primers-modal-content">
+          <h2 style={{ textAlign: 'center' }}>Import Primers Preview</h2>
+
+          <PrimersImportTable importedPrimers={importedPrimers} />
+
+          <Box className="import-primers-modal-buttons">
+            <Button
+              variant="outlined"
+              color="error"
+              onClick={() => setOpenModal(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="contained"
+              color="primary"
+              disabled={importButtonDisabled}
+              onClick={handleImportClick}
+            >
+              Import Valid Primers
+            </Button>
+          </Box>
+        </Box>
+      </Modal>
+    </>
+  );
+}
+
+export default ImportPrimersButton;

package/src/components/primers/import_primers/ImportPrimersTable.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Table, TableCell, TableRow, TableHead, TableBody } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
+import CancelIcon from '@mui/icons-material/Cancel';
+import WarningIcon from '@mui/icons-material/Warning';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+
+function CustomTableRow({ primer }) {
+  const { name, sequence, error } = primer;
+
+  let msg = 'Valid primer';
+  let icon = <CheckCircleIcon color="success" />;
+  if (error === 'invalid') {
+    msg = 'Invalid DNA sequence';
+    icon = <CancelIcon color="error" />;
+  } else if (error === 'existing') {
+    msg = 'Primer already exists';
+    icon = <WarningIcon color="warning" />;
+  }
+
+  return (
+    <TableRow>
+      <TableCell align="center">
+        <Tooltip title={msg} placement="top">{icon}</Tooltip>
+      </TableCell>
+      <TableCell>{name}</TableCell>
+      <TableCell className="sequence-cell">{sequence}</TableCell>
+    </TableRow>
+  );
+}
+
+function PrimersImportTable({ importedPrimers }) {
+  return (
+    <Table className="primers-table">
+      <TableHead>
+        <TableRow>
+          <TableCell align="center">Status</TableCell>
+          <TableCell>Name</TableCell>
+          <TableCell>Sequence</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {importedPrimers.map((primer, index) => (
+          <CustomTableRow key={index} primer={primer} />
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default PrimersImportTable;

package/src/components/primers/import_primers/PrimerDatabaseImportForm.jsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import Alert from '@mui/material/Alert';
+import { Button, TextField } from '@mui/material';
+
+import useDatabase from '../../../hooks/useDatabase';
+import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
+
+function PrimerDatabaseImportForm({ submitPrimer, cancelForm }) {
+  const existingNames = useSelector((state) => state.cloning.primers.map((p) => p.name), shallowEqual);
+  const [primer, setPrimer] = useState(null);
+  const [error, setError] = useState('');
+  const database = useDatabase();
+
+  React.useEffect(() => {
+    if (!primer) {
+      return;
+    }
+    if (!primer.name) {
+      setError('Primer does not have a name');
+    } else if (!primer.sequence) {
+      setError('Primer does not have a sequence');
+    } else if (stringIsNotDNA(primer.sequence)) {
+      setError('Sequence contains invalid characters');
+    } else if (existingNames.includes(primer.name)) {
+      setError(`A primer with name "${primer.name}" already exists`);
+    } else {
+      setError('');
+    }
+  }, [primer]);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    if (primer) {
+      submitPrimer(primer);
+      setPrimer(null);
+    }
+  };
+
+  return (
+    <form className="primer-row" onSubmit={onSubmit}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1em', width: '80%', margin: 'auto' }}>
+        <div style={{ display: 'flex', gap: '2em', alignItems: 'center', justifyContent: 'center' }}>
+          <database.GetPrimerComponent
+            primer={primer}
+            setPrimer={setPrimer}
+            setError={setError}
+          />
+        </div>
+        {primer && (
+          <div style={{ display: 'flex', gap: '1em', alignItems: 'center' }}>
+            <TextField
+              label="Name"
+              value={primer.name}
+              className="name"
+              disabled
+              sx={{ width: '30%' }}
+            />
+            <TextField
+              label="Sequence"
+              value={primer.sequence}
+              className="sequence"
+              disabled
+              fullWidth
+              InputProps={{
+                sx: {
+                  fontFamily: 'monospace',
+                },
+              }}
+            />
+          </div>
+        )}
+        {error && (
+        <Alert severity="error" sx={{ mt: 1 }}>
+          {error}
+        </Alert>
+        )}
+
+        <div style={{ display: 'flex', gap: '1em', justifyContent: 'center' }}>
+          <Button
+            variant="outlined"
+            color="error"
+            onClick={cancelForm}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            type="submit"
+            disabled={!primer || error}
+          >
+            Import Primer
+          </Button>
+        </div>
+
+      </div>
+
+      {primer && (
+        <div style={{ display: 'flex', alignItems: 'center', marginTop: '1em' }} />
+      )}
+
+    </form>
+  );
+}
+
+export default PrimerDatabaseImportForm;

package/src/components/primers/import_primers/styles.css

@@ -0,0 +1,60 @@
+.import-primers-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.import-primers-modal-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  max-width: 800px;
+  background-color: #fff;
+  box-shadow: 24;
+  padding: 32px;
+  border-radius: 16px;
+  max-height: 80vh;
+  overflow: auto;
+}
+
+.import-primers-modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+}
+
+.primers-table {
+  width: 100%;
+  margin-bottom: 24px;
+}
+
+.primers-table th {
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+/* This makes the two first columns narrow and the sequence column wider */
+.primers-table td:first-child {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.primers-table td:nth-child(2) {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.sequence-cell {
+  font-family: monospace;
+}
+
+.primer-add-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2em;
+}
+

package/src/components/primers/primer_design/SequenceTabComponents/CollapsableLabel.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, FormLabel, IconButton, Collapse } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+function CollapsableLabel({ label, className, children, open = false }) {
+  const [show, setShow] = React.useState(open);
+
+  React.useEffect(() => {
+    setShow(open);
+  }, [open]);
+
+  return (
+    <Box className={className}>
+      <Box sx={{ mt: 1 }}>
+        <FormLabel>{label}</FormLabel>
+        <IconButton
+          onClick={() => setShow(!show)}
+          aria-expanded={show}
+          aria-label="show more"
+        >
+          <ExpandMoreIcon />
+        </IconButton>
+      </Box>
+      <Collapse in={show}>
+        {children}
+      </Collapse>
+    </Box>
+  );
+}
+
+export default CollapsableLabel;