@opencloning/ui 1.0.0

package/src/components/settings/SettingsTab.jsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Button, Card, CardContent, CardHeader, Stack, TextField, InputAdornment, Typography, IconButton, Box } from '@mui/material';
+import { cloningActions } from '@opencloning/store/cloning';
+import Tooltip from '@mui/material/Tooltip';
+import InfoIcon from '@mui/icons-material/Info';
+
+const { setGlobalPrimerSettings } = cloningActions;
+
+function HeaderWithTooltip() {
+    const tooltipMessage = (
+        <Box>
+            These settings affect thermodynamic calculations for:
+            <ul>
+                <li>Primer design</li>
+                <li>Values displayed in the primer table</li>
+                <li>Values displayed in the PCR details</li>
+            </ul>
+        </Box>
+    )
+    const title = (
+        <Box>
+            Global Primer Settings
+            <Tooltip title={tooltipMessage} arrow placement="right">
+                <IconButton size="small">
+                    <InfoIcon />
+                </IconButton>
+            </Tooltip>
+        </Box>
+    )
+    return (
+        <CardHeader
+            title={title}
+        />
+    )
+}
+
+
+
+
+
+function GlobalPrimerSettingsSection() {
+    const dispatch = useDispatch();
+    const current = useSelector((state) => state.cloning.globalPrimerSettings);
+    const [editing, setEditing] = React.useState(false);
+    const [form, setForm] = React.useState({
+        primer_dna_conc: current.primer_dna_conc,
+        primer_salt_monovalent: current.primer_salt_monovalent,
+        primer_salt_divalent: current.primer_salt_divalent,
+    });
+
+    const fieldsValid = {
+        primer_dna_conc: form.primer_dna_conc > 0,
+        primer_salt_monovalent: form.primer_salt_monovalent > 0,
+        primer_salt_divalent: form.primer_salt_divalent > 0,
+    }
+    const allFieldsValid = Object.values(fieldsValid).every((valid) => valid);
+
+    React.useEffect(() => {
+        if (!editing) {
+            setForm({
+                primer_dna_conc: current.primer_dna_conc,
+                primer_salt_monovalent: current.primer_salt_monovalent,
+                primer_salt_divalent: current.primer_salt_divalent,
+            });
+        }
+    }, [current, editing]);
+
+    const onChange = (key) => (e) => {
+        setForm((prev) => ({ ...prev, [key]: e.target.value }));
+    };
+
+    const onCancel = () => {
+        setEditing(false);
+        setForm({
+            primer_dna_conc: current.primer_dna_conc,
+            primer_salt_monovalent: current.primer_salt_monovalent,
+            primer_salt_divalent: current.primer_salt_divalent,
+        });
+    };
+
+    const onSave = () => {
+        dispatch(setGlobalPrimerSettings({
+            primer_dna_conc: Number(form.primer_dna_conc),
+            primer_salt_monovalent: Number(form.primer_salt_monovalent),
+            primer_salt_divalent: Number(form.primer_salt_divalent),
+        }));
+        setEditing(false);
+    };
+
+    return (
+        <Card className="settings-tab">
+            <HeaderWithTooltip />
+            <CardContent sx={{ margin: 'auto' }}>
+
+                <Stack spacing={2} sx={{ maxWidth: 300, margin: 'auto' }}>
+                    <TextField
+                        label="Primer DNA concentration"
+                        type="number"
+                        value={form.primer_dna_conc}
+                        onChange={onChange('primer_dna_conc')}
+                        inputProps={{ min: 0, step: '1' }}
+                        variant="standard"
+                        required
+                        disabled={!editing}
+                        InputProps={{
+                            endAdornment: <InputAdornment position="end">nM</InputAdornment>,
+                        }}
+                        error={!fieldsValid.primer_dna_conc}
+                        helperText={!fieldsValid.primer_dna_conc ? 'Must be greater than 0' : ''}
+                    />
+                    <TextField
+                        label="Monovalent ions"
+                        type="number"
+                        value={form.primer_salt_monovalent}
+                        onChange={onChange('primer_salt_monovalent')}
+                        inputProps={{ min: 0, step: '0.1' }}
+                        variant="standard"
+                        required
+                        disabled={!editing}
+                        InputProps={{
+                            endAdornment: <InputAdornment position="end">mM</InputAdornment>,
+                        }}
+                        error={!fieldsValid.primer_salt_monovalent}
+                        helperText={!fieldsValid.primer_salt_monovalent ? 'Must be greater than 0' : ''}
+                    />
+                    <TextField
+                        label="Divalent ions"
+                        type="number"
+                        value={form.primer_salt_divalent}
+                        onChange={onChange('primer_salt_divalent')}
+                        inputProps={{ min: 0, step: '0.1' }}
+                        variant="standard"
+                        required
+                        disabled={!editing}
+                        InputProps={{
+                            endAdornment: <InputAdornment position="end">mM</InputAdornment>,
+                        }}
+                        error={!fieldsValid.primer_salt_divalent}
+                        helperText={!fieldsValid.primer_salt_divalent ? 'Must be greater than 0' : ''}
+                    />
+                    {!editing ? (
+                        <Stack direction="row" justifyContent="center">
+                            <Button variant="contained" onClick={() => setEditing(true)}>Edit</Button>
+                        </Stack>
+                    ) : (
+                        <Stack direction="row" spacing={1} justifyContent="center">
+                            <Button onClick={onCancel}>Cancel</Button>
+                            <Button variant="contained" onClick={onSave} disabled={!allFieldsValid}>Save</Button>
+                        </Stack>
+                    )}
+                </Stack>
+            </CardContent>
+        </Card>
+    );
+}
+
+function SettingsTab() {
+    return (
+        <div style={{ padding: 16, display: 'flex', justifyContent: 'center' }}>
+            <div style={{ maxWidth: 600, width: '100%' }}>
+                <GlobalPrimerSettingsSection />
+            </div>
+        </div>
+    );
+}
+
+export default SettingsTab;
+
+

package/src/components/sources/AssemblyPlanDisplayer.cy.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import AssemblyPlanDisplayer from './AssemblyPlanDisplayer';
+
+describe('<AssemblyPlanDisplayer />', () => {
+  it('Represents the assembly plan', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<AssemblyPlanDisplayer source={{ input: [
+      { type: 'AssemblyFragment', sequence: 1, left_location: 'aa', right_location: 'bb', reverse_complemented: false },
+      { type: 'AssemblyFragment', sequence: 2, left_location: 'cc', right_location: 'dd', reverse_complemented: true },
+    ] }}
+    />);
+    cy.get('.assembly-plan-displayer').contains('1[aa,bb] - 2_rc[cc,dd]');
+  });
+  it('Represents the assembly plan with null coordinates', () => {
+    cy.mount(<AssemblyPlanDisplayer source={{ input: [
+      { type: 'AssemblyFragment', sequence: 1, left_location: null, right_location: 'aa', reverse_complemented: false },
+      { type: 'AssemblyFragment', sequence: 2, left_location: 'bb', right_location: null, reverse_complemented: true },
+    ] }}
+    />);
+    cy.get('.assembly-plan-displayer').contains('1[,aa] - 2_rc[bb,]');
+  });
+});

package/src/components/sources/AssemblyPlanDisplayer.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+function AssemblyPlanDisplayer({
+  source,
+}) {
+  const assemblyFragments = source.input.filter(i => i.type === 'AssemblyFragment');
+  if (!assemblyFragments.length) {
+    return null;
+  }
+
+  const fragments = assemblyFragments.map((fragment) => {
+    const { sequence, left_location, right_location, reverse_complemented } = fragment;
+    const leftPart = left_location || '';
+    const rightPart = right_location || '';
+    return `${sequence}${reverse_complemented ? '_rc' : ''}[${leftPart},${rightPart}]`;
+  });
+
+  // Join left-right pairs with
+
+  return (
+    <div className="assembly-plan-displayer">
+      {fragments.join(' - ')}
+    </div>
+  );
+}
+
+export default React.memo(AssemblyPlanDisplayer);

package/src/components/sources/CollectionSource.jsx

@@ -0,0 +1,97 @@
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import React from 'react';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { useDispatch, useStore } from 'react-redux';
+import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
+import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions';
+import ObjectTable from '../ObjectTable';
+import { cloningActions } from '@opencloning/store/cloning';
+
+function CollectionSource({ source, requestStatus, sendPostRequest }) {
+  const { id: sourceId, options, image: imageInfo, title, description } = source;
+  const [image, imageWidth] = imageInfo || [null, null];
+  const [selectedOption, setSelectedOption] = React.useState(null);
+  const dispatch = useDispatch();
+  const store = useStore();
+  const { replaceSource } = cloningActions;
+
+  const onSubmit = (event) => {
+    event.preventDefault();
+    const { source: selectedSource } = options.find((option) => option.name === selectedOption);
+    // Delete options field
+    const modifySource = (s) => {
+      const sourceOut = { ...s };
+      delete sourceOut.options;
+      return sourceOut;
+    };
+    const endpoint = classNameToEndPointMap[selectedSource.type];
+    let requestData;
+    if (selectedSource.type === 'AddgeneIdSource') {
+      requestData = { id: sourceId, ...selectedSource };
+    } else if (selectedSource.type === 'OligoHybridizationSource') {
+      const { primers } = store.getState().cloning;
+      const forwardOligo = primers.find((primer) => primer.id === selectedSource.input[0].sequence);
+      const reverseOligo = primers.find((primer) => primer.id === selectedSource.input[1].sequence);
+      requestData = { source: { id: sourceId, ...selectedSource }, primers: [forwardOligo, reverseOligo] };
+    }
+    sendPostRequest({ endpoint, requestData, source, modifySource });
+  };
+
+  const onChange = (event) => {
+    setSelectedOption(event.target.value);
+  };
+
+  const turnIntoBlankSource = () => {
+    setSelectedOption(null);
+    dispatch(replaceSource({
+      id: sourceId,
+      input: [],
+      type: null,
+    }));
+  };
+
+  const selectedOptionObject = options.find((option) => option.name === selectedOption);
+  return (
+    <div className="collection-source">
+      {title && <h2>{title}</h2>}
+      {description && <p>{description}</p>}
+      {image && <img src={image} width={imageWidth} alt="Collection source icon" />}
+      <form onSubmit={onSubmit}>
+        <FormControl fullWidth>
+          <InputLabel id="select-collection-source">Select a sequence</InputLabel>
+          <Select
+            value={selectedOption !== null ? selectedOption : ''}
+            onChange={onChange}
+            labelId="select-collection-source"
+            label="Select a sequence"
+            // Limits the height of the dropdown (adds scroll)
+            MenuProps={{ PaperProps: { style: { maxHeight: 250 } } }}
+          >
+            <MenuItem onClick={turnIntoBlankSource} value="">
+              <AddCircleIcon color="success" />
+              <em style={{ marginLeft: 8 }}>Add your own</em>
+            </MenuItem>
+            {options.map((option) => (
+              <MenuItem key={option.name} value={option.name}>
+                {option.name}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        {selectedOption !== null && (
+          <>
+            {selectedOptionObject.info && <ObjectTable object={selectedOptionObject.info} />}
+            <SubmitButtonBackendAPI
+              requestStatus={requestStatus}
+              {...(import.meta.env.VITE_UMAMI_WEBSITE_ID && { "data-umami-event": "submit-collection-source" })}
+            >Submit</SubmitButtonBackendAPI>
+          </>
+        )}
+      </form>
+    </div>
+
+  );
+}
+
+export default CollectionSource;