@opencloning/ui 1.0.0

package/src/components/sources/SourceManuallyTyped.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { Checkbox, FormControl, FormControlLabel, TextField } from '@mui/material';
+import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
+import ValidatedTextField from '../form/ValidatedTextField';
+import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
+
+function SourceManuallyTyped({ source, requestStatus, sendPostRequest }) {
+  const { id: sourceId } = source;
+
+  const [userInput, setUserInput] = React.useState('');
+  const [isCircular, setIsCircular] = React.useState(false);
+  const [overhangCrick3prime, setOverhangCrick3prime] = React.useState(0);
+  const [overhangWatson3prime, setOverhangWatson3prime] = React.useState(0);
+  const [errorStatus, setErrorStatus] = React.useState({ sequence: true });
+  const [touched, setTouched] = React.useState(false);
+  const [submissionAttempted, setSubmissionAttempted] = React.useState(false);
+
+  const submissionAllowed = touched && Object.values(errorStatus).every((error) => !error);
+  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 onInputChange = (event) => {
+    // Remove all non-letter characters on paste
+    if (event.nativeEvent.inputType === 'insertFromPaste') {
+      setUserInput(event.target.value.replace(/[^a-zA-Z]/g, ''));
+    } else {
+      setUserInput(event.target.value);
+    }
+  };
+
+  const onSubmit = (event) => {
+    event.preventDefault();
+    setSubmissionAttempted(true);
+    if (submissionAllowed) {
+      const requestData = {
+        source: { id: sourceId },
+        sequence: {
+          id: sourceId,
+          sequence: userInput,
+          circular: isCircular,
+          overhang_crick_3prime: overhangCrick3prime,
+          overhang_watson_3prime: overhangWatson3prime,
+        },
+      };
+      sendPostRequest({ endpoint: 'manually_typed', requestData, source });
+    }
+  };
+
+  const onCircularChange = () => {
+    // See constrains of ManuallyTyped in the backend
+    const newIsCircular = !isCircular;
+    setIsCircular(newIsCircular);
+    if (newIsCircular) {
+      setOverhangCrick3prime(0);
+      setOverhangWatson3prime(0);
+    }
+  };
+
+  const sequenceErrorChecker = (s) => (stringIsNotDNA(s) ? { error: true, helperText: 'invalid DNA sequence' } : { error: false, helperText: '' });
+
+  return (
+    <form onSubmit={onSubmit}>
+      <ValidatedTextField
+        fullWidth
+        id="sequence"
+        label="Sequence"
+        variant="outlined"
+        value={userInput}
+        onInputChange={onInputChange}
+        className="sequence"
+        submissionAttempted={submissionAttempted}
+        required
+        errorChecker={sequenceErrorChecker}
+        updateValidationStatus={updateValidationStatus}
+      />
+      {
+        !isCircular && (
+          <>
+            <FormControl fullWidth>
+              <TextField
+                label="Overhang crick 3'"
+                value={overhangCrick3prime}
+                type="number"
+                onChange={(event) => setOverhangCrick3prime(event.target.value)}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <TextField
+                label="Overhang watson 3'"
+                value={overhangWatson3prime}
+                type="number"
+                onChange={(event) => setOverhangWatson3prime(event.target.value)}
+              />
+            </FormControl>
+          </>
+        )
+      }
+
+      <FormControl fullWidth style={{ textAlign: 'left' }}>
+        <FormControlLabel control={<Checkbox value={isCircular} onChange={onCircularChange} />} label="Circular DNA" />
+      </FormControl>
+      <SubmitButtonBackendAPI
+        requestStatus={requestStatus}
+        {...(import.meta.env.VITE_UMAMI_WEBSITE_ID && { "data-umami-event": "submit-manually-typed" })}
+      >Submit</SubmitButtonBackendAPI>
+    </form>
+  );
+}
+
+export default SourceManuallyTyped;

package/src/components/sources/SourcePCRorHybridization.jsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { Button, Checkbox, FormControl, FormControlLabel, InputAdornment, TextField } from '@mui/material';
+
+import { doesSourceHaveOutput, getInputSequencesFromSourceId, getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
+import PCRUnitForm from './PCRUnitForm';
+import PrimerDesignSourceForm from '../primers/primer_design/SourceComponents/PrimerDesignSourceForm';
+import { cloningActions } from '@opencloning/store/cloning';
+import useStoreEditor from '../../hooks/useStoreEditor';
+import LabelWithTooltip from '../form/LabelWithTooltip';
+
+function SourcePCRorHybridization({ source, requestStatus, sendPostRequest }) {
+  // Represents a PCR if inputs != [], else is a oligo hybridization
+
+  const dispatch = useDispatch();
+  const { updateStoreEditor } = useStoreEditor();
+  const { setCurrentTab, setMainSequenceId } = cloningActions;
+  const { id: sourceId } = source;
+
+  const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
+  const primers = useSelector((state) => state.cloning.primers);
+  const isPcr = inputSequences.length !== 0;
+  const hasOutput = useSelector((state) => doesSourceHaveOutput(state.cloning, sourceId));
+  const outputIsPrimerDesign = useSelector((state) => isPcr && hasOutput && state.cloning.sequences.find((e) => e.id === source.id).primer_design !== undefined);
+
+  const [forwardPrimerId, setForwardPrimerId] = React.useState('');
+  const [reversePrimerId, setReversePrimerId] = React.useState('');
+  const [designingPrimers, setDesigningPrimers] = React.useState(false);
+  const [addPrimerFeatures, setAddPrimerFeatures] = React.useState(false);
+
+  const minimalAnnealingRef = React.useRef(null);
+  const allowedMismatchesRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (isPcr && source.input.length === 3) {
+      setForwardPrimerId(source.input[0].sequence);
+      setReversePrimerId(source.input[2].sequence);
+    } else if (!isPcr && source.input.length === 2) {
+      setForwardPrimerId(source.input[0].sequence);
+      setReversePrimerId(source.input[1].sequence);
+    }
+  }, [source.input]);
+
+  React.useEffect(() => {
+    if (source.add_primer_annotations) { setAddPrimerFeatures(source.add_primer_annotations); }
+  }, [source.add_primer_annotations]);
+
+  const onSubmit = (event) => {
+    event.preventDefault();
+
+    const requestData = {
+      sequences: inputSequences,
+      primers: [forwardPrimerId, reversePrimerId].map((id) => primers.find((p) => p.id === id)),
+      source: { id: sourceId, input: inputSequences.map((e) => ({ sequence: e.id })), output_name: source.output_name },
+    };
+
+    if (!isPcr) {
+      requestData.source.input = [forwardPrimerId, reversePrimerId].map((id) => ({ sequence: id }));
+      const config = { params: { minimal_annealing: minimalAnnealingRef.current.value } };
+      sendPostRequest({ endpoint: 'oligonucleotide_hybridization', requestData, config, source });
+    } else {
+      const config = { params: {
+        minimal_annealing: minimalAnnealingRef.current.value,
+        allowed_mismatches: allowedMismatchesRef.current.value,
+      } };
+      requestData.source.add_primer_features = addPrimerFeatures;
+      sendPostRequest({ endpoint: 'pcr', requestData, config, source });
+    }
+  };
+
+  const onPrimerDesign = () => {
+    setDesigningPrimers(true);
+  };
+
+  if (outputIsPrimerDesign && !forwardPrimerId && !reversePrimerId) {
+    const goToPrimerDesign = () => {
+      dispatch(setCurrentTab(3));
+      const templateSequenceId = getPcrTemplateSequenceId(source);
+      dispatch(setMainSequenceId(templateSequenceId));
+      updateStoreEditor('mainEditor', templateSequenceId);
+      // Scroll to the top of the tab panels container
+      document.querySelector('.tab-panels-container')?.scrollTo({
+        top: 0,
+        behavior: 'instant',
+      });
+    };
+    return (
+      <Button variant="contained" color="success" sx={{ mt: 1 }} onClick={goToPrimerDesign}>
+        <span style={{ fontSize: '1.2em', marginRight: 12 }}>✨</span>
+        {' '}
+        Design primers
+        {' '}
+        <span style={{ fontSize: '1.2em', marginLeft: 12 }}>✨</span>
+      </Button>
+    );
+  }
+
+  if (designingPrimers && !hasOutput) {
+    return <PrimerDesignSourceForm source={source} />;
+  }
+
+  return (
+    <div className="pcr_or_hybridization">
+      <form onSubmit={onSubmit}>
+        {isPcr && !hasOutput && !forwardPrimerId && !reversePrimerId && (
+          <Button variant="contained" color="success" sx={{ my: 2 }} onClick={onPrimerDesign}>Design primers</Button>
+        )}
+        <PCRUnitForm
+          sourceId={sourceId}
+          primers={primers}
+          forwardPrimerId={forwardPrimerId}
+          reversePrimerId={reversePrimerId}
+          onChangeForward={setForwardPrimerId}
+          onChangeReverse={setReversePrimerId}
+        />
+        <FormControl fullWidth>
+          <TextField
+            label="Minimal annealing length"
+            inputRef={minimalAnnealingRef}
+            type="number"
+            defaultValue={12}
+            InputProps={{
+              endAdornment: <InputAdornment position="end">bp</InputAdornment>,
+              sx: { '& input': { textAlign: 'center' } },
+            }}
+          />
+        </FormControl>
+        {isPcr && (
+          <>
+            <FormControl fullWidth>
+              <TextField
+                label="Mismatches allowed"
+                inputRef={allowedMismatchesRef}
+                type="number"
+                defaultValue={0}
+                InputProps={{
+                  sx: { '& input': { textAlign: 'center' } },
+                }}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <FormControlLabel
+                control={<Checkbox checked={addPrimerFeatures} onChange={() => setAddPrimerFeatures(!addPrimerFeatures)} />}
+                label={(
+                  <LabelWithTooltip label="Add primer features" tooltip="Add features representing the primers to the PCR product" />
+            )}
+              />
+            </FormControl>
+          </>
+        )}
+        {forwardPrimerId && reversePrimerId && (
+          <SubmitButtonBackendAPI
+            requestStatus={requestStatus}
+            {...(import.meta.env.VITE_UMAMI_WEBSITE_ID && { "data-umami-event": !isPcr ? "submit-hybridization" : "submit-pcr" })}
+          >
+            {!isPcr ? 'Perform hybridization' : 'Perform PCR'}
+          </SubmitButtonBackendAPI>
+        )}
+      </form>
+    </div>
+  );
+}
+
+export default SourcePCRorHybridization;

package/src/components/sources/SourcePolymeraseExtension.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import { Alert } from '@mui/material';
+import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
+import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
+
+function SourcePolymeraseExtension({ source, requestStatus, sendPostRequest }) {
+  const { id: sourceId } = source;
+  const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
+  const { overhang_crick_3prime, overhang_watson_3prime } = inputSequences[0];
+  const invalidInput = (overhang_crick_3prime >= 0) && (overhang_watson_3prime >= 0);
+  const onSubmit = (event) => {
+    event.preventDefault();
+
+    const requestData = {
+      sequences: inputSequences,
+      source: { id: sourceId, input: inputSequences.map((e) => ({ sequence: e.id })) },
+    };
+    sendPostRequest({ endpoint: 'polymerase_extension', requestData, source });
+  };
+  // No need for MultipleOutputsSelector, since there is only one output
+  return (
+    <div className="PolymeraseExtensionSource">
+      <form onSubmit={onSubmit}>
+        {invalidInput ? (
+          <Alert severity="error">
+            <strong>Invalid input:</strong>
+            {' '}
+            no 5&apos; overhangs.
+          </Alert>
+        ) : (
+          <SubmitButtonBackendAPI
+            requestStatus={requestStatus}
+            {...(import.meta.env.VITE_UMAMI_WEBSITE_ID && { "data-umami-event": "submit-polymerase-extension" })}
+          >
+            Extend with polymerase
+          </SubmitButtonBackendAPI>
+        )}
+      </form>
+    </div>
+  );
+}
+
+export default SourcePolymeraseExtension;