@opencloning/ui 1.0.0

package/src/components/navigation/SelectExampleDialog.jsx

@@ -0,0 +1,69 @@
+import { Dialog, DialogTitle, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import React from 'react';
+
+const examples = [
+  {
+    title: 'Arabidopsis CRISPR-HDR genome editing',
+    link: 'arabidopsis_CRISPR_HDR.zip',
+  },
+  {
+    title: 'Gibson assembly',
+    link: 'gibson_assembly.json',
+  },
+  {
+    title: 'Golden gate assembly',
+    link: 'golden_gate.json',
+  },
+  {
+    title: 'Integration of cassette by homologous recombination',
+    link: 'homologous_recombination.json',
+  },
+  {
+    title: 'Restriction + ligation assembly (v1)',
+    link: 'restriction_ligation_assembly.json',
+  },
+  {
+    title: 'Restriction + ligation assembly (v2)',
+    link: 'restriction_then_ligation.json',
+  },
+  {
+    title: 'Templateless PCR',
+    link: 'templateless_PCR.json',
+  },
+  {
+    title: 'CRISPR HDR',
+    link: 'crispr_hdr.json',
+  },
+  {
+    title: 'Gateway cloning',
+    link: 'gateway.json',
+  },
+  {
+    title: 'Annotate features with pLannotate',
+    link: 'plannotate.json',
+  },
+  {
+    title: 'Cre/Lox recombination',
+    link: 'cre_lox_recombination.json',
+  },
+].sort((a, b) => a.title.localeCompare(b.title));
+
+function SelectExampleDialog({ onClose, open }) {
+  return (
+    <Dialog open={open} onClose={() => onClose('')} className="load-example-dialog">
+      <DialogTitle>Load an example</DialogTitle>
+      <List>
+        {
+        examples.map((example) => (
+          <ListItem key={example.link} className="load-example-item">
+            <ListItemButton onClick={() => onClose(`${import.meta.env.BASE_URL}examples/${example.link}`)}><ListItemText>{example.title}</ListItemText></ListItemButton>
+          </ListItem>
+        ))
+        }
+      </List>
+
+    </Dialog>
+  );
+}
+
+export default SelectExampleDialog;

package/src/components/navigation/SelectTemplateDialog.jsx

@@ -0,0 +1,107 @@
+import { Accordion, AccordionDetails, AccordionSummary, Alert, Button, CircularProgress, Dialog, DialogContent, DialogTitle, IconButton, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+
+import React from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import useHttpClient from '../../hooks/useHttpClient';
+
+function SelectTemplateDialog({ onClose, open }) {
+  const [templates, setTemplates] = React.useState(null);
+  const [connectAttempt, setConnectAttemp] = React.useState(0);
+  const [error, setError] = React.useState(null);
+  const baseUrl = 'https://assets.opencloning.org/OpenCloning-submission';
+  const httpClient = useHttpClient();
+
+  // const baseUrl = '';
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const resp = await httpClient.get(`${baseUrl}/index.json`);
+        setTemplates(resp.data);
+        setError('');
+      } catch {
+        setTemplates(null);
+        setError('Failed to load templates from GitHub');
+      }
+    };
+    fetchData();
+  }, [connectAttempt]);
+  return (
+    <Dialog open={open} onClose={() => onClose('')} className="load-template-dialog">
+      <DialogTitle>Load a template</DialogTitle>
+      {!templates
+      && (
+      <DialogContent>
+        {error ? (
+          <Alert
+            severity="error"
+            action={(
+              <Button color="inherit" size="small" onClick={() => { setError(''); setConnectAttemp((p) => p + 1); }}>
+                Retry
+              </Button>
+          )}
+          >
+            {error}
+          </Alert>
+        ) : (
+          <>
+            Loading templates...
+            {' '}
+            <CircularProgress className="loading-progress" color="inherit" size="2em" />
+          </>
+        )}
+      </DialogContent>
+      )}
+      <List>
+        {
+        templates && Object.keys(templates).map((key) => {
+          const { kit, assemblies } = templates[key];
+          return (
+            <Accordion key={key} className="load-template-item">
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
+                aria-controls={`${key}-content`}
+                id={`${key}-header`}
+              >
+                <ListItemText sx={{ my: 0 }} primary={kit.title} secondary={kit.description} />
+              </AccordionSummary>
+              <AccordionDetails sx={{ py: 0 }}>
+                <List sx={{ py: 0, my: 0 }}>
+                  {
+                    assemblies.map((assembly) => (
+                      <ListItem sx={{ px: 0, pt: 0 }} key={assembly.template_file} className="load-template-item">
+                        <ListItemButton sx={{ py: 0 }} onClick={() => onClose(`${baseUrl}/processed/${key}/templates/${assembly.template_file}`, true)}>
+                          <ListItemText primary={assembly.title} secondary={assembly.description} />
+                        </ListItemButton>
+                      </ListItem>
+                    ))
+                  }
+                </List>
+              </AccordionDetails>
+            </Accordion>
+
+          );
+        })
+        }
+        <ListItem key="blah" className="load-template-item">
+
+          <ListItemText
+            primary="🔎 Can't find your favourite kit?"
+            secondary={(
+              <>
+                Create it from an Addgene kit.
+                <br />
+                It&apos;s very easy!
+              </>
+)}
+          />
+          <IconButton edge="end" aria-label="submit-button">
+            <Button className="button-hyperlink" variant="contained" color="success" href="https://github.com/OpenCloning/OpenCloning-submission/blob/master/docs/index.md" target="_blank" rel="noopener noreferrer">Create templates</Button>
+          </IconButton>
+
+        </ListItem>
+      </List>
+    </Dialog>
+  );
+}
+
+export default SelectTemplateDialog;

package/src/components/navigation/TabPanel.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const TabPanel = React.forwardRef(({ children, value, index, ...other }, ref) => {
+  const style = value === index ? {
+    visibility: 'visible',
+
+  } : {
+    visibility: 'hidden',
+    position: 'absolute',
+    width: '1px',
+    height: '0px',
+    overflow: 'hidden',
+  };
+
+  return (
+    <div
+      role="tabpanel"
+      style={style}
+      id={`tab-panel-${index}`}
+      aria-labelledby={`tab-${index}`}
+      {...other}
+    >
+      {children}
+    </div>
+  );
+});
+
+export default TabPanel;

package/src/components/navigation/VersionDialog.jsx

@@ -0,0 +1,33 @@
+import { Dialog, DialogContent, DialogTitle, List, ListItem, ListItemText } from '@mui/material';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { isEqual } from 'lodash-es';
+
+function VersionDialog({ open, setOpen }) {
+  const { backendVersion, schemaVersion, frontendVersion } = useSelector(({ cloning }) => cloning.appInfo, isEqual);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => setOpen(false)}
+      className="version-dialog"
+    >
+      <DialogTitle sx={{ textAlign: 'center' }}> App version </DialogTitle>
+      <DialogContent>
+        <List>
+          <ListItem fullWidth>
+            <ListItemText primary="Frontend" secondary={frontendVersion || 'N.A.'} />
+          </ListItem>
+          <ListItem fullWidth>
+            <ListItemText primary="Backend" secondary={backendVersion || 'N.A.'} />
+          </ListItem>
+          <ListItem fullWidth>
+            <ListItemText primary="Schema" secondary={schemaVersion || 'N.A.'} />
+          </ListItem>
+        </List>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default VersionDialog;

package/src/components/primers/CreatePrimerFromSequenceForm.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FormControl, TextField } from '@mui/material';
+import './PrimerForm.css';
+import './PrimerList.css';
+import CustomFormHelperText from '../form/CustomFormHelperText';
+
+function CreatePrimerFromSequenceForm({
+  primer: { name, sequence }, setName, setSequence, existingPrimerNames,
+}) {
+  let nameError = '';
+  if (existingPrimerNames.includes(name)) {
+    nameError = 'Name exists';
+  }
+  if (name === '') {
+    nameError = 'Name is required';
+  }
+  return (
+    <div className="primer-result-form">
+      <FormControl sx={{ m: 1, pb: 2, display: { width: '30%' } }}>
+        <TextField
+          label="Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          error={nameError !== ''}
+          FormHelperTextProps={{ component: 'div' }}
+          helperText={<CustomFormHelperText>{nameError}</CustomFormHelperText>}
+        />
+      </FormControl>
+      <FormControl sx={{ m: 1, pb: 2, display: { width: '60%' } }}>
+        <TextField
+          label="Sequence"
+          value={sequence}
+          onChange={(e) => setSequence(e.target.value)}
+          inputProps={{ id: 'sequence' }}
+          FormHelperTextProps={{ component: 'div' }}
+        />
+      </FormControl>
+    </div>
+  );
+}
+
+export default CreatePrimerFromSequenceForm;

package/src/components/primers/DownloadPrimersButton.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, TextField } from '@mui/material';
+import { useSelector } from 'react-redux';
+import primersToTabularFile from './primersToTabularFile';
+
+import { downloadTextFile } from '@opencloning/utils/readNwrite';
+import { usePCRDetails } from './primer_details/usePCRDetails';
+import RequestStatusWrapper from '../form/RequestStatusWrapper';
+import useMultiplePrimerDetails from './primer_details/useMultiplePrimerDetails';
+import { isCompleteOligoHybridizationSource, isCompletePCRSource } from '@opencloning/store/cloning_utils';
+
+function DownloadPrimersDialog({ primers, open, onClose }) {
+  const pcrSourceIds = useSelector((state) => state.cloning.sources
+    .filter((source) => isCompletePCRSource(source) || isCompleteOligoHybridizationSource(source))
+    .map((source) => source.id));
+  const [fileName, setFileName] = React.useState('primers');
+  const [extension, setExtension] = React.useState('.csv');
+
+  const { pcrDetails, retryGetPCRDetails, requestStatus: pcrDetailsRequestStatus } = usePCRDetails(pcrSourceIds);
+  const { primerDetails, retryGetPrimerDetails, requestStatus: primerDetailsRequestStatus } = useMultiplePrimerDetails(primers);
+
+  const handleDownload = () => {
+    const fullFileName = fileName + extension;
+    const separator = extension === '.csv' ? ',' : '\t';
+    const fileContent = primersToTabularFile(primerDetails, pcrDetails, separator);
+
+    downloadTextFile(fileContent, fullFileName);
+    onClose();
+  };
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      PaperProps={{
+        component: 'form',
+        onSubmit: (event) => {
+          event.preventDefault();
+          handleDownload();
+        },
+      }}
+    >
+      <DialogTitle>Save Primers to File</DialogTitle>
+      <DialogContent>
+        <FormControl fullWidth>
+          <TextField
+            autoFocus
+            required
+            id="file_name"
+            label="File name"
+            variant="standard"
+            value={fileName}
+            onChange={(e) => setFileName(e.target.value)}
+            sx={{ mb: 2 }}
+          />
+          <FormLabel id="save-primers-radio-group-label">File format</FormLabel>
+          <RadioGroup
+            aria-labelledby="save-primers-radio-group-label"
+            value={extension}
+            variant="standard"
+            onChange={(e) => setExtension(e.target.value)}
+          >
+            <FormControlLabel value=".csv" control={<Radio />} label="csv" />
+            <FormControlLabel value=".tsv" control={<Radio />} label="tsv" />
+          </RadioGroup>
+        </FormControl>
+      </DialogContent>
+      <DialogActions>
+        <RequestStatusWrapper requestStatus={primerDetailsRequestStatus} retry={() => { retryGetPrimerDetails(); retryGetPCRDetails(); }}>
+          <RequestStatusWrapper requestStatus={pcrDetailsRequestStatus} retry={retryGetPCRDetails}>
+            <Button onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit">Save file</Button>
+          </RequestStatusWrapper>
+        </RequestStatusWrapper>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function DownloadPrimersButton({ primers }) {
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button
+        variant="contained"
+        onClick={() => setDialogOpen(true)}
+      >
+        Download Primers
+      </Button>
+      {dialogOpen && (
+        <DownloadPrimersDialog
+          primers={primers}
+          open={dialogOpen}
+          onClose={() => setDialogOpen(false)}
+        />
+      )}
+    </>
+  );
+}
+
+export default DownloadPrimersButton;

package/src/components/primers/PrimerForm.css

@@ -0,0 +1,14 @@
+.primer-row {
+    display: flex;
+    align-items: center;
+}
+
+.primer-result-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.primer-row svg[data-testid] {
+    font-size: 1.2em;
+}

package/src/components/primers/PrimerForm.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
+import Tooltip from '@mui/material/Tooltip';
+import { IconButton } from '@mui/material';
+import ValidatedTextField from '../form/ValidatedTextField';
+
+import './PrimerForm.css';
+import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
+
+function PrimerForm({
+  primer = { name: '', sequence: '', id: null }, submitPrimer, cancelForm, existingNames, disabledSequenceText = '',
+}) {
+  const [errorStatus, setErrorStatus] = React.useState(primer.id ? { name: false, sequence: false } : { name: true, sequence: true });
+  const [touched, setTouched] = React.useState(false);
+  const [submissionAttempted, setSubmissionAttempted] = React.useState(false);
+  const [name, setName] = React.useState(primer.name);
+  const [sequence, setSequence] = React.useState(primer.sequence);
+
+  React.useEffect(() => {
+    setName(primer.name);
+    setSequence(primer.sequence);
+  }, [primer.name, primer.sequence]);
+
+  const updateValidationStatus = (fieldName, valid) => {
+    setTouched(true);
+    // Update the validation status for the given field (taken from the ref.id)
+    setErrorStatus((prevErrorStatus) => ({
+      ...prevErrorStatus,
+      [fieldName]: valid,
+    }));
+  };
+  const submissionAllowed = Object.values(errorStatus).every((error) => !error);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setSubmissionAttempted(true);
+    if (submissionAllowed) {
+      // Id is null in the case of adding new primer
+      const { id } = primer;
+      submitPrimer({ id, name, sequence });
+      cancelForm();
+    }
+  };
+
+  const onSequenceChange = (event) => {
+    // Remove all non-letter characters on paste
+    if (event.nativeEvent.inputType === 'insertFromPaste') {
+      setSequence(event.target.value.replace(/[^a-zA-Z]/g, ''));
+    } else {
+      setSequence(event.target.value);
+    }
+  };
+
+  const sequenceErrorChecker = (s) => (stringIsNotDNA(s) ? { error: true, helperText: 'Invalid DNA sequence' } : { error: false, helperText: '' });
+  const nameErrorChecker = (s) => (existingNames.includes(s) ? { error: true, helperText: 'Name exists' } : { error: false, helperText: '' });
+
+  return (
+    <form className="primer-row" onSubmit={onSubmit} style={{ margin: 'auto' }}>
+      <ValidatedTextField
+        id="name"
+        label="Name"
+        value={name}
+        onInputChange={(e) => setName(e.target.value)}
+        sx={{ m: 1, display: { width: '20%' } }}
+        submissionAttempted={submissionAttempted}
+        required
+        errorChecker={nameErrorChecker}
+        updateValidationStatus={updateValidationStatus}
+        floatingHelperText
+      />
+      <ValidatedTextField
+        id="sequence"
+        label="Sequence"
+        value={sequence}
+        onInputChange={onSequenceChange}
+        sx={{ m: 1, display: { width: '60%' } }}
+        className="sequence"
+        submissionAttempted={submissionAttempted}
+        required
+        errorChecker={sequenceErrorChecker}
+        updateValidationStatus={updateValidationStatus}
+        floatingHelperText
+        disabled={disabledSequenceText !== ''}
+        initialHelperText={disabledSequenceText}
+      />
+      {touched
+      && (
+      <IconButton type="submit" sx={{ height: 'fit-content' }}>
+        <Tooltip title={submissionAllowed ? 'Save changes' : 'Incorrect values'} arrow placement="top">
+          <CheckCircleIcon size={25} className={submissionAllowed ? '' : 'form-invalid'} color={submissionAllowed ? 'success' : 'grey'} />
+        </Tooltip>
+      </IconButton>
+      )}
+      {cancelForm !== null && (
+      <IconButton onClick={cancelForm} type="button" sx={{ height: 'fit-content' }}>
+        <Tooltip title="Discard changes" arrow placement="top">
+          <CancelIcon color="error" />
+        </Tooltip>
+      </IconButton>
+      )}
+
+    </form>
+  );
+}
+
+export default PrimerForm;

package/src/components/primers/PrimerList.css

@@ -0,0 +1,46 @@
+table {
+    width: auto;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.primer-table-container {
+    width: 60%;
+    margin: auto;
+    margin-bottom: 10px;
+}
+
+.primer-form-container {
+    width: 60%;
+    margin: auto;
+    margin-bottom: 10px;
+}
+
+table th:first-child, td.icons {
+    width: 15%;
+    /* Prevent icons from appear as column is sequence is very long */
+    white-space: nowrap;
+}
+
+th, td {
+    border-bottom: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+
+th {
+    background-color: #f0f0f0;
+}
+
+
+tr:hover {
+    background-color: #f0f0f0;
+}
+
+div.primer-table-container {
+    overflow-x: scroll;
+}
+
+.sequence, #sequence {
+    font-family: monospace;
+}

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import PrimerList from './PrimerList';
+import store from '@opencloning/store';
+import { cloningActions } from '@opencloning/store/cloning';
+import { Provider } from 'react-redux';
+
+const { setConfig, setPrimers, setGlobalPrimerSettings } = cloningActions;
+
+const mockReply = {
+    statusCode: 200, body: {
+        melting_temperature: 60, gc_content: .5, homodimer: {
+            melting_temperature: 0,
+            deltaG: 0,
+            figure: "dummy_figure"
+        },
+        hairpin: {
+            melting_temperature: 0,
+            deltaG: 0,
+            figure: "dummy_figure"
+        },
+    }
+}
+
+describe('PrimerList', () => {
+    beforeEach(() => {
+        store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
+    });
+    it('displays the right information', () => {
+        store.dispatch(setPrimers([
+            { id: 1, name: 'P1', sequence: 'TCATTAAAGTTAACG' },
+        ]));
+
+        cy.mount(
+            <Provider store={store}>
+                <PrimerList />
+            </Provider>
+        );
+        cy.get('td.name').contains('P1');
+        cy.get('td.length').contains('15');
+        cy.get('td.gc-content').contains('27');
+        cy.get('td.melting-temperature').contains('37.5');
+        cy.get('td.sequence').contains('TCATTAAAGTTAACG');
+    });
+
+    it('caches primer details across re-renders and re-renders on global settings change', () => {
+        let calls = 0;
+        store.dispatch(setPrimers([
+            { id: 1, name: 'P1', sequence: 'AAA' },
+        ]));
+        cy.intercept('POST', 'http://127.0.0.1:8000/primer_details*', (req) => {
+            calls += 1;
+            const respReply = calls === 1 ? mockReply : {
+                statusCode: 200, body: {
+                    ...mockReply.body,
+                    melting_temperature: calls === 1 ? 60 : 70,
+                }
+            }
+            expect(req.body).to.deep.equal({
+                sequence: 'AAA',
+                settings: {
+                    primer_dna_conc: calls === 1 ? 50 : 100,
+                    primer_salt_monovalent: 50,
+                    primer_salt_divalent: 1.5,
+                },
+            });
+            req.reply(respReply);
+        }).as('primerDetails');
+
+        // First mount triggers two network calls (one per unique primer sequence)
+        cy.mount(
+            <Provider store={store}>
+                <PrimerList />
+            </Provider>)
+        cy.contains('Loading...').should('not.exist');
+        cy.wait('@primerDetails');
+        cy.then(() => {
+            expect(calls).to.equal(1);
+            cy.mount(
+                <Provider store={store}>
+                    <PrimerList />
+                </Provider>)
+            cy.then(() => {
+                expect(calls).to.equal(1);
+            });
+            store.dispatch(setGlobalPrimerSettings({ primer_dna_conc: 100 }))
+            cy.wait('@primerDetails');
+            cy.then(() => {
+                expect(calls).to.equal(2);
+                cy.get('td.melting-temperature').contains('70');
+            });
+
+        });
+
+    });
+});