@opencloning/ui 1.0.0

package/src/components/sources/PCRUnitForm.jsx

@@ -0,0 +1,102 @@
+import { Accordion, AccordionDetails, AccordionSummary, FormControl, InputLabel, ListItemText, MenuItem, Select, Tooltip } from '@mui/material';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { cloningActions } from '@opencloning/store/cloning';
+import SingleInputSelector from './SingleInputSelector';
+import SelectPrimerForm from '../primers/SelectPrimerForm';
+
+function PCRUnitWrapper({ index, children, onDelete }) {
+  if (index === null) {
+    return (
+      <div className="pcr-unit">
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <Accordion className="pcr-unit" defaultExpanded>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls={`${index}-content`}
+        id={`${index}-header`}
+        sx={{ backgroundColor: 'lightgray' }}
+      >
+        {(index !== 0) && (
+        <Tooltip onClick={onDelete} title="Delete primer pair" arrow placement="left">
+          <CancelIcon color="gray" />
+        </Tooltip>
+        )}
+        <ListItemText sx={{ my: 0 }}>
+          Primer pair
+          {' '}
+          {index + 1}
+        </ListItemText>
+      </AccordionSummary>
+      <AccordionDetails sx={{ py: 0, my: 1 }}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+function PCRUnitForm({ primers, forwardPrimerId, reversePrimerId, onChangeForward, onChangeReverse, sourceId, sourceInput = [], index = null, deletePrimerPair = null }) {
+  const { setCurrentTab, updateSource } = cloningActions;
+  const dispatch = useDispatch();
+  const goToPrimerTab = () => {
+    dispatch(setCurrentTab(1));
+  };
+
+  const updateInput = (value) => {
+    if (index !== null) {
+      const newInput = [...sourceInput];
+      newInput[index] = value;
+      dispatch(updateSource({ id: sourceId, input: newInput }));
+    }
+  };
+
+  const onDelete = () => {
+    if (index !== null) {
+      const newInput = [...sourceInput];
+      newInput.splice(index, 1);
+      deletePrimerPair();
+      dispatch(updateSource({ id: sourceId, input: newInput }));
+    }
+  };
+
+  return (
+    <PCRUnitWrapper index={index} key={index && `pcr-unit-${index}`} onDelete={onDelete}>
+      {(index !== null) ? (
+        <FormControl fullWidth>
+          <SingleInputSelector
+            label="Target sequence"
+            selectedId={sourceInput[index]?.sequence || ''}
+            onChange={(e) => updateInput({ sequence: e.target.value })}
+            inputSequenceIds={sourceInput.map(({sequence}) => sequence)}
+            disabled={index === 0}
+          />
+        </FormControl>
+      ) : null}
+
+      <SelectPrimerForm
+        primers={primers}
+        selected={forwardPrimerId}
+        onChange={onChangeForward}
+        goToPrimerTab={goToPrimerTab}
+        label="Forward primer"
+      />
+      <SelectPrimerForm
+        primers={primers}
+        selected={reversePrimerId}
+        onChange={onChangeReverse}
+        goToPrimerTab={goToPrimerTab}
+        label="Reverse primer"
+      />
+    </PCRUnitWrapper>
+  );
+}
+
+export default PCRUnitForm;

package/src/components/sources/SingleInputSelector.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import { FormHelperText, InputLabel, MenuItem, Select } from '@mui/material';
+import { isEqual } from 'lodash-es';
+import { getIdsOfSequencesWithoutChildSource } from '@opencloning/store/cloning_utils';
+
+function SingleInputSelector({ selectedId, onChange, label, inputSequenceIds, allowUnset = false, helperText = '', disabled = false }) {
+  const idsWithoutChild = useSelector(({ cloning }) => getIdsOfSequencesWithoutChildSource(cloning.sources, cloning.sequences), shallowEqual);
+  const options = [...new Set([...idsWithoutChild, ...inputSequenceIds])];
+  const sequenceNames = useSelector(({ cloning }) => options.map((id) => ({ id, name: cloning.teselaJsonCache[id]?.name || 'template' })), isEqual);
+  const renderedOptions = options.sort((a, b) => (a - b)).map((id) => (
+    <MenuItem key={id} value={id}>
+      {`${id} - ${sequenceNames.find(({ id: id2 }) => id2 === id).name}`}
+    </MenuItem>
+  ));
+  if (allowUnset) {
+    renderedOptions.unshift(<MenuItem key="unset" value=""><em>None</em></MenuItem>);
+  }
+  return (
+    <>
+      <InputLabel id="select-single-inputs">{label}</InputLabel>
+      <Select
+        value={selectedId !== null ? selectedId : ''}
+        onChange={onChange}
+        labelId="select-single-inputs"
+        label={label}
+        disabled={disabled}
+      >
+        {renderedOptions}
+      </Select>
+      <FormHelperText>{helperText}</FormHelperText>
+    </>
+  );
+}
+
+export default SingleInputSelector;

package/src/components/sources/Source.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { isEqual } from 'lodash-es';
+import SourceFile from './SourceFile';
+import SourceRepositoryId from './SourceRepositoryId';
+import SourceRestriction from './SourceRestriction';
+import SourceAssembly from './SourceAssembly';
+import SourceTypeSelector from './SourceTypeSelector';
+import SourcePCRorHybridization from './SourcePCRorHybridization';
+import SourceHomologousRecombination from './SourceHomologousRecombination';
+import { SourceGenomeRegion } from './SourceGenomeRegion';
+import SourceManuallyTyped from './SourceManuallyTyped';
+import SourceAnnotation from './SourceAnnotation';
+import SourceDatabase from './SourceDatabase';
+import SourcePolymeraseExtension from './SourcePolymeraseExtension';
+import CollectionSource from './CollectionSource';
+import KnownSourceErrors from './KnownSourceErrors';
+import useBackendAPI from '../../hooks/useBackendAPI';
+import MultipleOutputsSelector from './MultipleOutputsSelector';
+import { cloningActions } from '@opencloning/store/cloning';
+import SourceCopySequence from './SourceCopySequence';
+import SourceReverseComplement from './SourceReverseComplement';
+import SourceKnownGenomeRegion from './SourceKnownGenomeRegion';
+import { doesSourceHaveOutput } from '@opencloning/store/cloning_utils';
+
+// There are several types of source, this components holds the common part,
+// which for now is a select element to pick which kind of source is created
+function Source({ sourceId }) {
+  const source = useSelector((state) => state.cloning.sources.find((s) => s.id === sourceId), isEqual);
+  const hasOutput = useSelector((state) => doesSourceHaveOutput(state.cloning, sourceId));
+  const { type: sourceType } = source;
+  let specificSource = null;
+  const templateOnlySources = ['CollectionSource', 'KnownGenomeCoordinatesSource'];
+  const knownErrors = useSelector((state) => state.cloning.knownErrors, isEqual);
+  const { requestStatus, sendPostRequest, sources, sequences } = useBackendAPI();
+  const { addSequenceAndUpdateItsSource, updateSequenceAndItsSource } = cloningActions;
+  const [chosenFragment, setChosenFragment] = React.useState(null);
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    const dispatchedAction = hasOutput ? updateSequenceAndItsSource : addSequenceAndUpdateItsSource;
+    // If there is only a single product, commit the result, else allow choosing via MultipleOutputsSelector
+    if (sources.length === 1) {
+      dispatch(dispatchedAction({ newSource: { ...sources[0], id: sourceId }, newSequence: sequences[0] }));
+    } else if (chosenFragment !== null) {
+      dispatch(dispatchedAction({ newSource: { ...sources[chosenFragment], id: sourceId }, newSequence: sequences[chosenFragment] }));
+    }
+  }, [sources, sequences, chosenFragment]);
+
+  switch (sourceType) {
+    /* eslint-disable */
+    case 'UploadedFileSource':
+      specificSource = <SourceFile {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'RestrictionEnzymeDigestionSource':
+      specificSource = <SourceRestriction {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'RepositoryIdSource':
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'AddgeneIdSource':
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'SnapGenePlasmidSource':
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'EuroscarfSource':
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'WekWikGeneIdSource':
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'OpenDNACollectionsSource':
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'LigationSource':
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'GibsonAssemblySource':
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'OverlapExtensionPCRLigationSource':
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'InFusionSource':
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'InVivoAssemblySource':
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'GatewaySource':
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'CreLoxRecombinationSource':
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'HomologousRecombinationSource':
+      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'PCRSource':
+      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'RestrictionAndLigationSource':
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'GenomeCoordinatesSource':
+      specificSource = <SourceGenomeRegion {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'KnownGenomeCoordinatesSource':
+      specificSource = <SourceKnownGenomeRegion {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'ManuallyTypedSource':
+      specificSource = <SourceManuallyTyped {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'CRISPRSource':
+      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'OligoHybridizationSource':
+      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'PolymeraseExtensionSource':
+      specificSource = <SourcePolymeraseExtension {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'DatabaseSource':
+      specificSource = <SourceDatabase {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'CollectionSource':
+      specificSource = <CollectionSource {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'CopySequence':
+      specificSource = <SourceCopySequence {...{ source }} />; break;
+    case 'AnnotationSource':
+      specificSource = <SourceAnnotation {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'ReverseComplementSource':
+      specificSource = <SourceReverseComplement {...{ source, requestStatus, sendPostRequest }} />; break;
+    default:
+      break;
+    /* eslint-enable */
+  }
+
+  return (
+    <>
+      {!templateOnlySources.includes(sourceType) && (<SourceTypeSelector {...{ source }} />)}
+      {sourceType && knownErrors[sourceType] && <KnownSourceErrors errors={knownErrors[sourceType]} />}
+      {specificSource}
+      {sources.length > 1 && (<MultipleOutputsSelector {...{ sources, sequences, sourceId, onFragmentChosen: setChosenFragment }} />)}
+    </>
+  );
+}
+
+export default React.memo(Source);

package/src/components/sources/SourceAnnotation.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { useSelector } from 'react-redux';
+import { isEqual } from 'lodash-es';
+import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
+import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
+
+function SourceAnnotation({ source, requestStatus, sendPostRequest }) {
+  const [annotationTool, setAnnotationTool] = React.useState('plannotate');
+
+  const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, source.id), isEqual);
+  const onSubmit = (event) => {
+    event.preventDefault();
+
+    const requestData = {
+      sequence: inputSequences[0],
+      source: { id: source.id, input: inputSequences.map((e) => ({ sequence: e.id })), annotation_tool: annotationTool },
+    };
+    sendPostRequest({ endpoint: 'annotate/plannotate', requestData, source });
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <FormControl fullWidth>
+        <InputLabel id="annotation-tool-label">Annotation Tool</InputLabel>
+        <Select
+          labelId="annotation-tool-label"
+          id="annotation-tool"
+          value={annotationTool}
+          label="Annotation Tool"
+          onChange={(e) => setAnnotationTool(e.target.value)}
+        >
+          <MenuItem value="plannotate">pLannotate</MenuItem>
+        </Select>
+      </FormControl>
+      <SubmitButtonBackendAPI
+        requestStatus={requestStatus}
+        {...(import.meta.env.VITE_UMAMI_WEBSITE_ID && { "data-umami-event": "submit-annotation" })}
+      >Annotate</SubmitButtonBackendAPI>
+    </form>
+  );
+}
+
+export default React.memo(SourceAnnotation);

package/src/components/sources/SourceAssembly.jsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { useSelector, shallowEqual, useDispatch } from 'react-redux';
+import { Checkbox, FormControlLabel, InputLabel, MenuItem, Select, TextField, FormControl, InputAdornment } from '@mui/material';
+import MultipleInputsSelector from './MultipleInputsSelector';
+import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
+import EnzymeMultiSelect from '../form/EnzymeMultiSelect';
+import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
+import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions';
+import { cloningActions } from '@opencloning/store/cloning';
+import LabelWithTooltip from '../form/LabelWithTooltip';
+
+const helpSingleSite = 'Even if input sequences contain multiple att sites '
+  + '(typically 2), a product could be generated where only one site recombines. '
+  + 'Select this option to get those products.';
+
+// A component representing the ligation or gibson assembly of several fragments
+function SourceAssembly({ source, requestStatus, sendPostRequest }) {
+  const assemblyType = source.type;
+  const { id: sourceId, input: sourceInput } = source;
+  const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
+  const inputContainsTemplates = inputSequences.some((sequence) => sequence.type === 'TemplateSequence');
+  const [minimalHomology, setMinimalHomology] = React.useState(20);
+  const [allowPartialOverlap, setAllowPartialOverlap] = React.useState(false);
+  const [circularOnly, setCircularOnly] = React.useState(false);
+  const [bluntLigation, setBluntLigation] = React.useState(false);
+  const [gatewaySettings, setGatewaySettings] = React.useState({ greedy: false, reactionType: null, onlyMultiSite: true });
+  const [enzymes, setEnzymes] = React.useState([]);
+
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    if (assemblyType === 'GatewaySource') {
+      setCircularOnly(true);
+    }
+  }, [assemblyType]);
+
+  React.useEffect(() => {
+    if (assemblyType === 'GatewaySource' && source.reaction_type) {
+      setGatewaySettings({ ...gatewaySettings, reactionType: source.reaction_type });
+    }
+  }, [source]);
+
+  const { updateSource } = cloningActions;
+
+  const preventSubmit = (
+    (assemblyType === 'RestrictionAndLigationSource' && enzymes.length === 0)
+    || (assemblyType === 'GatewaySource' && gatewaySettings.reactionType === null)
+    || inputContainsTemplates
+  );
+
+  const flipAllowPartialOverlap = () => {
+    setAllowPartialOverlap(!allowPartialOverlap);
+    if (!allowPartialOverlap) {
+      setBluntLigation(false);
+    }
+  };
+
+  const flipBluntLigation = () => {
+    setBluntLigation(!bluntLigation);
+    if (!bluntLigation) {
+      setAllowPartialOverlap(false);
+    }
+  };
+
+  const onSubmit = (event) => {
+    event.preventDefault();
+    const requestData = {
+      source: { id: sourceId, input: inputSequences.map((e) => ({ sequence: e.id })), output_name: source.output_name },
+      sequences: inputSequences,
+    };
+    if (['GibsonAssemblySource', 'OverlapExtensionPCRLigationSource', 'InFusionSource', 'InVivoAssemblySource'].includes(assemblyType)) {
+      const config = { params: {
+        minimal_homology: minimalHomology,
+        circular_only: circularOnly,
+      } };
+      // To instantiate the correct class on the backend
+      requestData.source.type = assemblyType;
+      sendPostRequest({ endpoint: 'gibson_assembly', requestData, config, source });
+    } else if (assemblyType === 'RestrictionAndLigationSource') {
+      if (enzymes.length === 0) { return; }
+      requestData.source.restriction_enzymes = enzymes;
+      const config = { params: {
+        allow_partial_overlap: allowPartialOverlap,
+        circular_only: circularOnly,
+      } };
+      sendPostRequest({ endpoint: 'restriction_and_ligation', requestData, config, source });
+    } else if (assemblyType === 'GatewaySource') {
+      requestData.source.greedy = gatewaySettings.greedy;
+      requestData.source.reaction_type = gatewaySettings.reactionType;
+      const config = { params: { circular_only: circularOnly, only_multi_site: gatewaySettings.onlyMultiSite } };
+      sendPostRequest({ endpoint: 'gateway', requestData, config, source });
+    } else if (assemblyType === 'CreLoxRecombinationSource') {
+      sendPostRequest({ endpoint: 'cre_lox_recombination', requestData, source });
+    } else {
+      const config = { params: {
+        allow_partial_overlap: allowPartialOverlap,
+        circular_only: circularOnly,
+        blunt: bluntLigation,
+      } };
+      sendPostRequest({ endpoint: classNameToEndPointMap[assemblyType], requestData, config, source });
+    }
+  };
+
+  const onChangeInput = (newInputSequenceIds) => {
+    const newInput = newInputSequenceIds.map((id) => ({ sequence: id }));
+    // We prevent setting empty input
+    if (newInput.length === 0) {
+      return;
+    }
+    dispatch(updateSource({ id: sourceId, input: newInput, type: assemblyType }));
+  };
+
+  return (
+    <div className="assembly">
+      <form onSubmit={onSubmit}>
+        <FormControl fullWidth>
+          <MultipleInputsSelector {...{
+            inputSequenceIds: sourceInput.map(({sequence}) => sequence), onChange: onChangeInput, label: 'Assembly inputs',
+          }}
+          />
+        </FormControl>
+        { ['GibsonAssemblySource', 'OverlapExtensionPCRLigationSource', 'InFusionSource', 'InVivoAssemblySource'].includes(assemblyType) && (
+        // I don't really understand why fullWidth is required here
+        <FormControl fullWidth>
+          <TextField
+            label="Minimal homology length"
+            value={minimalHomology}
+            onChange={(e) => { setMinimalHomology(e.target.value); }}
+            type="number"
+            defaultValue={20}
+            InputProps={{
+              endAdornment: <InputAdornment position="end">bp</InputAdornment>,
+              sx: { '& input': { textAlign: 'center' } },
+            }}
+          />
+        </FormControl>
+        )}
+        { (assemblyType === 'RestrictionAndLigationSource') && (
+        <EnzymeMultiSelect setEnzymes={setEnzymes} />
+        )}
+        { (assemblyType === 'GatewaySource') && (
+          <>
+            <FormControl fullWidth>
+              <InputLabel id="gateway-reaction-type-label">Reaction type</InputLabel>
+              <Select
+                labelId="gateway-reaction-type-label"
+                id="gateway-reaction-type"
+                value={gatewaySettings.reactionType || ''}
+                onChange={(e) => setGatewaySettings({ ...gatewaySettings, reactionType: e.target.value })}
+                label="Reaction type"
+              >
+                <MenuItem value="BP">BP</MenuItem>
+                <MenuItem value="LR">LR</MenuItem>
+              </Select>
+            </FormControl>
+            <FormControl fullWidth>
+              <FormControlLabel
+                control={<Checkbox checked={gatewaySettings.greedy} onChange={() => setGatewaySettings({ ...gatewaySettings, greedy: !gatewaySettings.greedy })} />}
+                label={(
+                  <LabelWithTooltip label="Greedy attP finder" tooltip="Use a more greedy consensus site to find attP sites (might give false positives)" />
+                )}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <FormControlLabel
+                control={<Checkbox checked={!gatewaySettings.onlyMultiSite} onChange={() => setGatewaySettings({ ...gatewaySettings, onlyMultiSite: !gatewaySettings.onlyMultiSite })} />}
+                label={(
+                  <LabelWithTooltip label="Single-site recombination" tooltip={helpSingleSite} />
+                )}
+              />
+            </FormControl>
+          </>
+        )}
+        { ['RestrictionAndLigationSource', 'GibsonAssemblySource', 'LigationSource', 'OverlapExtensionPCRLigationSource', 'GatewaySource', 'InFusionSource', 'InVivoAssemblySource'].includes(assemblyType) && (
+          <FormControl fullWidth style={{ textAlign: 'left' }}>
+            <FormControlLabel control={<Checkbox checked={circularOnly} onChange={() => setCircularOnly(!circularOnly)} />} label="Circular assemblies only" />
+          </FormControl>
+        )}
+        { ['RestrictionAndLigationSource', 'LigationSource'].includes(assemblyType) && (
+          <FormControl fullWidth style={{ textAlign: 'left' }}>
+            <FormControlLabel control={<Checkbox checked={allowPartialOverlap} onChange={flipAllowPartialOverlap} />} label="Allow partial overlaps" />
+          </FormControl>
+        )}
+        { (assemblyType === 'LigationSource') && (
+        <FormControl fullWidth style={{ textAlign: 'left' }}>
+          <FormControlLabel control={<Checkbox checked={bluntLigation} onChange={flipBluntLigation} />} label="Blunt ligation" />
+        </FormControl>
+        )}
+
+        {!preventSubmit && (
+          <SubmitButtonBackendAPI
+            requestStatus={requestStatus}
+            {...(import.meta.env.VITE_UMAMI_WEBSITE_ID && { "data-umami-event": `submit-assembly-${assemblyType}` })}
+          >Submit</SubmitButtonBackendAPI>
+        )}
+      </form>
+    </div>
+  );
+}
+
+export default SourceAssembly;

package/src/components/sources/SourceBox.css

@@ -0,0 +1,18 @@
+div.icon-corner {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    margin-left: .3em;
+    margin-bottom: .3em;
+}
+
+div.icon-corner button{
+    padding: 0;
+    border: none;
+    background: none;
+    color:#d32f2f;
+}
+
+div.icon-corner button:hover {
+    filter: brightness(70%);
+}

package/src/components/sources/SourceBox.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { useDispatch, useStore } from 'react-redux';
+import Tooltip from '@mui/material/Tooltip';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { cloningActions } from '@opencloning/store/cloning';
+import './SourceBox.css';
+import VerifyDeleteDialog from './VerifyDeleteDialog';
+import useStoreEditor from '../../hooks/useStoreEditor';
+import { isSequenceInputOfAnySource } from '@opencloning/store/cloning_utils';
+
+const { deleteSourceAndItsChildren, setMainSequenceId } = cloningActions;
+
+function SourceBox({ children, sourceId }) {
+  const dispatch = useDispatch();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const store = useStore();
+  const { updateStoreEditor } = useStoreEditor();
+
+  const tooltipText = <div className="tooltip-text">Delete source and children</div>;
+
+  const deleteSource = () => {
+    const { mainSequenceId, sources } = store.getState().cloning;
+    const source = sources.find((s) => s.id === sourceId);
+    dispatch(deleteSourceAndItsChildren(sourceId));
+    if (mainSequenceId && mainSequenceId === sourceId) {
+      updateStoreEditor('mainEditor', null);
+      dispatch(setMainSequenceId(null));
+    }
+  };
+  const onClickDeleteSource = () => {
+    const state = store.getState().cloning;
+    if (isSequenceInputOfAnySource(sourceId, state.sources)) {
+      setDialogOpen(true);
+    } else {
+      deleteSource();
+    }
+  };
+  return (
+    <div className="select-source">
+      <div className="icon-corner">
+        <Tooltip title={tooltipText} arrow placement="top">
+          <button type="submit" onClick={onClickDeleteSource}>
+            <DeleteIcon sx={{ fontSize: '2em' }} />
+          </button>
+        </Tooltip>
+      </div>
+      <VerifyDeleteDialog
+        dialogOpen={dialogOpen}
+        setDialogOpen={setDialogOpen}
+        onClickDelete={() => {
+          deleteSource();
+          setDialogOpen(false);
+        }}
+      />
+      {children}
+    </div>
+  );
+}
+
+export default React.memo(SourceBox);

package/src/components/sources/SourceCopySequence.jsx

@@ -0,0 +1,38 @@
+import { Button, FormControl } from '@mui/material';
+import React from 'react';
+import { batch, shallowEqual, useDispatch, useSelector } from 'react-redux';
+import SingleInputSelector from './SingleInputSelector';
+import { CopySequenceThunk } from '@opencloning/utils/thunks';
+import { cloningActions } from '@opencloning/store/cloning';
+
+const { deleteSourceAndItsChildren } = cloningActions;
+
+function SourceCopySequence({ source }) {
+  const [id, setId] = React.useState(null);
+  const allSequenceIds = useSelector((state) => state.cloning.sequences.map((sequence) => sequence.id), shallowEqual);
+  const dispatch = useDispatch();
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    batch(() => {
+      dispatch(deleteSourceAndItsChildren(source.id));
+      dispatch(CopySequenceThunk(id, source.id));
+    });
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <FormControl fullWidth>
+        <SingleInputSelector
+          label="Sequence to copy"
+          selectedId={id}
+          onChange={(e) => setId(e.target.value)}
+          inputSequenceIds={allSequenceIds}
+        />
+      </FormControl>
+      <Button type="submit" variant="contained" style={{ marginTop: 15 }}>Copy sequence</Button>
+    </form>
+  );
+}
+
+export default SourceCopySequence;

package/src/components/sources/SourceDatabase.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Alert } from '@mui/material';
+import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
+import useDatabase from '../../hooks/useDatabase';
+import useLoadDatabaseFile from '../../hooks/useLoadDatabaseFile';
+
+function SourceDatabase({ source, requestStatus, sendPostRequest }) {
+  const [file, setFile] = React.useState(null);
+  const [databaseId, setDatabaseId] = React.useState(null);
+  const database = useDatabase();
+  const [historyFileError, setHistoryFileError] = React.useState(null);
+  const { loadDatabaseFile } = useLoadDatabaseFile({ source, sendPostRequest, setHistoryFileError });
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    loadDatabaseFile(file, databaseId);
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      {database && <database.GetSequenceFileAndDatabaseIdComponent setFile={setFile} setDatabaseId={setDatabaseId} />}
+      {historyFileError && <Alert severity="error">{historyFileError}</Alert>}
+      {file && databaseId && <SubmitButtonBackendAPI requestStatus={requestStatus}>Submit </SubmitButtonBackendAPI>}
+    </form>
+  );
+}
+
+export default SourceDatabase;