@opencloning/ui 1.7.3 → 1.9.0

package/src/components/SequenceViewer.jsx

@@ -0,0 +1,211 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useSelector, useStore } from 'react-redux';
+import { Editor, updateEditor, addAlignment } from '@teselagen/ove';
+import { Paper, IconButton } from '@mui/material';
+import {Fullscreen as FullscreenIcon, FullscreenExit as FullscreenExitIcon} from '@mui/icons-material';
+import defaultMainEditorProps from '../config/defaultMainEditorProps';
+import { updatePanelsShownWithAlignment, removePanelFromShown } from '@opencloning/utils/alignmentUtils';
+import useAppAlerts from '../../../../apps/opencloningdb/src/hooks/useAppAlerts';
+import { jsonToGenbank } from '@teselagen/bio-parsers';
+import AnnotationChangedAlert from './annotation/AnnotationChangedAlert';
+
+const EDITOR_NAME = 'sequenceViewer';
+
+
+function regionRightClickedOverride(items, { annotation }, props) {
+  const items2keep = items.filter((i) => i.text === 'Copy');
+  return [
+    ...items2keep,
+    {
+      text: 'Create',
+      submenu: [
+        "newFeature",
+      ],
+    },
+    ...(props.sequenceData.circular === true ? [
+      "--",
+      "selectInverse",
+      "--",
+    ] : []),
+  ];
+}
+
+function primerRightClickedOverride(items, { annotation }, props) {
+  return [
+    ...regionRightClickedOverride(items, { annotation }, props),
+    "--",
+    {
+      text: 'Delete Primer annotation',
+      cmd: 'deletePrimer',
+    }
+  ];
+}
+
+function featureRightClickedOverride(items, { annotation }, props) {
+  return [
+    ...regionRightClickedOverride(items, { annotation }, props),
+    "--",
+    "editFeature",
+    "deleteFeature",
+    "showRemoveDuplicatesDialogFeatures",
+    "--",
+    "toggleCdsFeatureTranslations",
+    "viewFeatureProperties",
+    "--",
+  ];
+}
+const rightClickOverrides = {
+  selectionLayerRightClicked: regionRightClickedOverride,
+  primerRightClicked: primerRightClickedOverride,
+  translationRightClicked: regionRightClickedOverride,
+  searchLayerRightClicked: regionRightClickedOverride,
+  featureRightClicked: featureRightClickedOverride,
+  partRightClicked: {},
+  orfRightClicked: {},
+  backgroundRightClicked: {},
+};
+
+const baseViewerProps = {
+  ...defaultMainEditorProps,
+  annotationVisibility: {featureTypesToHyde: {source: true}},
+  readOnly: false,
+  disableBpEditing: true,
+  selectionLayer: {},
+  sequenceData: {},
+  rightClickOverrides,
+};
+
+function SequenceViewer({ sequenceData, alignmentData, onUpdateAnnotation }) {
+  const store = useStore();
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const handleFullScreenChange = React.useCallback((newValue) => {
+    setIsFullscreen(newValue);
+    updateEditor(store, EDITOR_NAME, { isFullscreen: newValue });
+  }, [store, setIsFullscreen]);
+
+  const { addAlert } = useAppAlerts();
+
+  const annotationChanged = useSelector(
+    (state) => {
+      const history = state.VectorEditor.sequenceViewer?.sequenceDataHistory;
+      if (!history) return false;
+      return Object.keys(history).length > 0 && history.past.length !== 0;
+    }
+  );
+
+  const clearHistory = React.useCallback(() => {
+    updateEditor(store, EDITOR_NAME, { sequenceDataHistory: {}, sequenceData });
+  }, [store, sequenceData]);
+
+  const handleUpdateAnnotation = React.useCallback(async () => {
+    const newSequenceData = store.getState().VectorEditor.sequenceViewer.sequenceData;
+    if (newSequenceData.sequence.toUpperCase() !== sequenceData.sequence.toUpperCase()) {
+      addAlert({
+        message: 'Sequence bases have been changed, we cannot update the annotation',
+        severity: 'error',
+      });
+      clearHistory();
+      return;
+    }
+    const newFileContent = jsonToGenbank(newSequenceData);
+    try {
+      await onUpdateAnnotation(newFileContent);
+      clearHistory();
+    } catch (error) {
+      console.error(error);
+    }
+  }, [store, sequenceData, clearHistory, addAlert, onUpdateAnnotation]);
+
+  React.useEffect(() => {
+    if (!isFullscreen) return;
+    const onKeyDown = (e) => {
+      if (e.key === 'Escape') handleFullScreenChange(false);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [handleFullScreenChange, isFullscreen]);
+
+  const viewerProps = {
+    ...baseViewerProps,
+    isFullscreen,
+  };
+
+  React.useEffect(() => {
+    updateEditor(store, EDITOR_NAME, { ...baseViewerProps, sequenceData, sequenceDataHistory: {} });
+  }, [store, sequenceData]);
+
+  React.useEffect(() => {
+    const editorUpdate = {};
+
+    if (alignmentData) {
+      addAlignment(store, alignmentData);
+      const editorState = store.getState().VectorEditor?.[EDITOR_NAME];
+      const currentPanels = editorState?.panelsShown || [[]];
+      editorUpdate.panelsShown = updatePanelsShownWithAlignment(currentPanels);
+    } else {
+      const editorState = store.getState().VectorEditor?.[EDITOR_NAME];
+      if (editorState?.panelsShown) {
+        editorUpdate.panelsShown = removePanelFromShown(editorState.panelsShown, 'simpleAlignment');
+      }
+    }
+
+    editorUpdate.panelsShown[0].find((panel) => panel.id === 'rail').active = !sequenceData.circular;
+    editorUpdate.panelsShown[0].find((panel) => panel.id === 'circular').active = sequenceData.circular;
+
+    updateEditor(store, EDITOR_NAME, editorUpdate);
+
+  }, [sequenceData.circular, store, alignmentData]);
+
+  if (!sequenceData || !sequenceData.sequence) {
+    return null;
+  }
+
+  const fullscreenExitButton = isFullscreen && createPortal(
+    <IconButton
+      aria-label="Exit fullscreen"
+      onClick={() => setIsFullscreen(false)}
+      sx={{
+        position: 'fixed',
+        top: 8,
+        right: 8,
+        zIndex: 2147483647,
+        bgcolor: 'background.paper',
+        boxShadow: 3,
+        '&:hover': { bgcolor: 'action.hover' },
+      }}
+    >
+      <FullscreenExitIcon />
+    </IconButton>,
+    document.body,
+  );
+
+  return (
+    <Paper sx={{ p: 1, overflow: 'auto', position: 'relative' }}>
+      {!isFullscreen && (
+        <IconButton
+          aria-label="Fullscreen"
+          onClick={() => setIsFullscreen(true)}
+          sx={{
+            position: 'absolute',
+            top: 8,
+            right: 8,
+            zIndex: 1,
+          }}
+        >
+          <FullscreenIcon />
+        </IconButton>
+      )}
+      {fullscreenExitButton}
+      {annotationChanged && <AnnotationChangedAlert onSave={handleUpdateAnnotation} onCancel={clearHistory} />}
+      <Editor
+        editorName={EDITOR_NAME}
+        {...viewerProps}
+        height="800"
+      />
+    </Paper>
+  );
+}
+
+export default React.memo(SequenceViewer);

package/src/components/annotation/AnnotationChangedAlert.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Alert, Button } from '@mui/material';
+
+function AnnotationChangedAlert({ onSave, onCancel }) {
+  return (
+    <Alert
+      style={{maxWidth: '500px', margin: '10px auto'}}
+      severity="info"
+      data-testid="annotation-changed-alert"
+      action={
+        <>
+          <Button color="primary" onClick={onSave}>
+              Save
+          </Button>
+          <Button color="secondary" onClick={onCancel}>
+              Cancel
+          </Button>
+        </>
+      }
+    >
+      <strong>Annotation Changed</strong>
+    </Alert>
+  )
+}
+
+export default AnnotationChangedAlert

package/src/components/annotation/useUpdateAnnotationInMainSequence.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch, useStore } from 'react-redux';
-import useAlerts from '../../hooks/useAlerts';
+import useCloningAlerts from '../../hooks/useCloningAlerts';
 import { jsonToGenbank } from '@teselagen/bio-parsers';
 import { cloningActions } from '@opencloning/store/cloning';
 import useStoreEditor from '../../hooks/useStoreEditor';
@@ -9,7 +9,7 @@ const { updateSequence } = cloningActions;
 
 export default function useUpdateAnnotationInMainSequence() {
   const store = useStore();
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const dispatch = useDispatch();
   const { updateStoreEditor } = useStoreEditor();
 

package/src/components/assembler/Assembler.jsx

@@ -21,7 +21,7 @@ import error2String from '@opencloning/utils/error2String';
 import { categoryFilter, downloadAssemblerFilesAsZip, getFilesToExportFromAssembler, getDefaultAssemblyOutputName, MAX_OUTPUT_NAME_LENGTH, sanitizeOutputName } from './assembler_utils';
 import useBackendRoute from '../../hooks/useBackendRoute';
 import useHttpClient from '../../hooks/useHttpClient';
-import useAlerts from '../../hooks/useAlerts';
+import useCloningAlerts from '../../hooks/useCloningAlerts';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import { useConfig } from '../../providers';
 import { isEqual } from 'lodash-es';
@@ -379,7 +379,7 @@ function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
   const httpClient = useHttpClient();
   const { staticContentPath } = useConfig();
   const backendRoute = useBackendRoute();
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const onSyntaxSelect = React.useCallback(async (syntax, plasmids) => {
     const url = backendRoute('validate_syntax');
     try {
@@ -440,7 +440,7 @@ function SyntaxOverviewButton({ syntax }) {
 function Assembler() {
   const [syntax, setSyntax] = React.useState(null);
   const [plasmids, setPlasmids] = React.useState([])
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const appInfo = useSelector(({ cloning }) => cloning.appInfo, isEqual);
 
   const categories = React.useMemo(() => {

package/src/components/domesticate/DomesticateDialog.jsx

@@ -0,0 +1,274 @@
+/* eslint-disable camelcase -- request/response fields match OpenAPI (snake_case) */
+import React from 'react';
+import {
+  Alert,
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from '@mui/material';
+import error2String from '@opencloning/utils/error2String';
+import useBackendRoute from '../../hooks/useBackendRoute';
+import useHttpClient from '../../hooks/useHttpClient';
+import { featureToGenbankLocationString, mergeStates } from '@opencloning/utils';
+import { useDispatch, useStore } from 'react-redux';
+import { cloningActions } from '@opencloning/store/cloning';
+
+/** Matches OpenAPI `CloningType` */
+export const CLONING_TYPES = ['domestication', 'synthesis'];
+
+/** Matches OpenAPI `EnzymeToRemove` */
+export const ENZYMES_TO_REMOVE = ['BsmBI', 'BsaI', 'BtgZI', 'BpiI'];
+
+/** Matches OpenAPI `AllowedCategory` (exact strings) */
+export const ALLOWED_CATEGORIES = [
+  'PROM+5UTR (A1-A2-A3-B1-B2)',
+  "PROM+5UTR(f) (A1-A2-A3-B1)",
+  'DIST+PROX (A1-A2)',
+  'CORE+5UTR (A3-B1-B2)',
+  'DIST(A1)',
+  'PROX (A2)',
+  'INTERACTION ADAPTOR (A1-A2-A3-B1-B2b)',
+  'PROM+5UTR+mir173 (A1-A2-A3-B1b)',
+  'NTAG (B2)',
+  'CDS (B3-B4-B5)',
+  'CDS1 (B3)',
+  'CDS2 (B4)',
+  'CDS2+CTAG (B4-B5)',
+  'CDS1+CDS2 (B3-B4)',
+  'CTAG (B5)',
+  "5'FS (B2-B3b)",
+  'Target (B4b)',
+  "'3FS (B5b)",
+  'goi (B2-B3)',
+  'int (B4)',
+  'iog (B5)',
+  'fgoi (B2-B3-B4-B5)',
+  '3UTR+TERM (B6-C1)',
+  'PROM DPolIII+DRCas12 (A1-A2-A3-B1-B2e)',
+  '3_prime processing (B6c-C1)',
+  'PROM DPolIII (A1-A2-A3-B1-B2c)',
+  'PROM MPolIII (A1-A2-A3-B1-B2d)',
+  'sgRNA (B6b-C1)',
+];
+
+const FOUR_BP = /^[ACGT]{4}$/;
+
+const { setState: setCloningState, setCurrentTab } = cloningActions;
+
+function categoryPrefixSuffixValid(category, prefix, suffix) {
+  const pref = prefix.toUpperCase();
+  const suff = suffix.toUpperCase();
+  if (!category) {
+    return FOUR_BP.test(pref) && FOUR_BP.test(suff);
+  }
+  return prefix === '' && suffix === '';
+}
+
+export default function DomesticateDialog({ open, onClose, initialContext, mainSequenceId }) {
+  const httpClient = useHttpClient();
+  const backendRoute = useBackendRoute();
+  const store = useStore();
+
+  const location = React.useMemo(() => featureToGenbankLocationString(initialContext.annotation), [initialContext]);
+  const [cloningType, setCloningType] = React.useState('domestication');
+  const [partName, setPartName] = React.useState(initialContext.annotation.name);
+  const [prefix, setPrefix] = React.useState('');
+  const [suffix, setSuffix] = React.useState('');
+  const [category, setCategory] = React.useState('');
+  const [enzymes, setEnzymes] = React.useState(['BsaI', 'BsmBI']);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const dispatch = useDispatch();
+
+  const categoryValueForApi = category || null;
+
+  const validationOk = Boolean(
+    partName.trim() && enzymes.length >= 1 && categoryPrefixSuffixValid(category, prefix, suffix),
+  );
+
+  const helperCategory = category
+    ? 'With a category selected, prefix and suffix must be empty.'
+    : 'Without a category, prefix and suffix must each be exactly 4 bases (A/C/G/T).';
+
+  const toggleEnzyme = (name) => {
+    setEnzymes((prev) => (prev.includes(name) ? prev.filter((e) => e !== name) : [...prev, name]));
+  };
+
+  const handleCategoryChange = (e) => {
+    const v = e.target.value;
+    setCategory(v);
+    if (v) {
+      setPrefix('');
+      setSuffix('');
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!validationOk || !initialContext) return;
+    setIsSubmitting(true);
+    const sequence = store.getState().cloning.sequences.find((s) => s.id === mainSequenceId);
+    const body = {
+      sequence,
+      location: location.trim(),
+      cloning_type: cloningType,
+      part_name: partName.trim(),
+      prefix: categoryValueForApi ? '' : prefix.toUpperCase(),
+      suffix: categoryValueForApi ? '' : suffix.toUpperCase(),
+      category: categoryValueForApi,
+      enzymes,
+    };
+    try {
+      const url = backendRoute('batch_cloning/domesticate');
+      const { data } = await httpClient.post(url, body);
+
+      const { mergedState, idShift } = mergeStates(data, store.getState().cloning);
+      const originalSequenceIdInNewState = data.sources.find((s) => s.type === 'ManuallyTypedSource')?.id;
+      if (!originalSequenceIdInNewState) {
+        throw new Error('Original sequence not found in new state');
+      }
+      const originalSequenceIdInMergedState = originalSequenceIdInNewState + idShift;
+      mergedState.sequences = mergedState.sequences.filter((s) => s.id !== originalSequenceIdInMergedState);
+      mergedState.sources = mergedState.sources.filter((s) => s.id !== originalSequenceIdInMergedState);
+      mergedState.sources.map((s) => {
+        s.input = s.input.map((i) => {
+          if (i.sequence === originalSequenceIdInMergedState) {
+            return { ...i, sequence: mainSequenceId };
+          }
+          return i;
+        });
+      });
+
+      dispatch(setCloningState(mergedState));
+      dispatch(setCurrentTab(0));
+      onClose();
+    } catch (err) {
+      setError(error2String(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <form onSubmit={handleSubmit}>
+        <DialogTitle>Domesticate (experimental)</DialogTitle>
+        <DialogContent>
+          <Alert severity="info" sx={{ mb: 2 }}>
+            {helperCategory}
+          </Alert>
+          <TextField
+            margin="dense"
+            label="Location"
+            value={location}
+            disabled
+            fullWidth
+            required
+          />
+          <TextField
+            margin="dense"
+            label="Part name"
+            value={partName}
+            onChange={(ev) => setPartName(ev.target.value)}
+            fullWidth
+            required
+          />
+          <FormControl fullWidth margin="dense">
+            <InputLabel id="cloning-type-label">Cloning type</InputLabel>
+            <Select
+              labelId="cloning-type-label"
+              label="Cloning type"
+              value={cloningType}
+              onChange={(ev) => setCloningType(ev.target.value)}
+            >
+              {CLONING_TYPES.map((t) => (
+                <MenuItem key={t} value={t}>{t}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          {location.includes('join') && cloningType === 'synthesis' && 
+          <Alert severity="info" sx={{ mb: 2 }}>Synthesis will remove introns in this feature</Alert>
+          }
+          <FormControl fullWidth margin="dense">
+            <InputLabel id="category-label" shrink>
+              Category
+            </InputLabel>
+            <Select
+              labelId="category-label"
+              label="Category"
+              value={category}
+              onChange={handleCategoryChange}
+              displayEmpty
+              notched
+            >
+              <MenuItem value="">
+                <em>None — use 4 bp prefix/suffix</em>
+              </MenuItem>
+              {ALLOWED_CATEGORIES.map((c) => (
+                <MenuItem key={c} value={c}>{c}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <TextField
+            margin="dense"
+            label="Prefix"
+            value={prefix}
+            onChange={(ev) => setPrefix(ev.target.value.toUpperCase().replace(/[^ACGT]/g, ''))}
+            fullWidth
+            disabled={Boolean(category)}
+            inputProps={{ maxLength: 4 }}
+            helperText={category ? 'Clear category to edit' : 'Exactly 4 A/C/G/T when no category'}
+          />
+          <TextField
+            margin="dense"
+            label="Suffix"
+            value={suffix}
+            onChange={(ev) => setSuffix(ev.target.value.toUpperCase().replace(/[^ACGT]/g, ''))}
+            fullWidth
+            disabled={Boolean(category)}
+            inputProps={{ maxLength: 4 }}
+          />
+          <Box sx={{ mt: 1 }}>
+            <FormControl component="fieldset" variant="standard" required error={enzymes.length === 0}>
+              <FormHelperText>Enzymes to remove (at least one)</FormHelperText>
+              <FormGroup row>
+                {ENZYMES_TO_REMOVE.map((enz) => (
+                  <FormControlLabel
+                    key={enz}
+                    control={(
+                      <Checkbox
+                        checked={enzymes.includes(enz)}
+                        onChange={() => toggleEnzyme(enz)}
+                        name={enz}
+                      />
+                    )}
+                    label={enz}
+                  />
+                ))}
+              </FormGroup>
+            </FormControl>
+          </Box>
+          {error && <Alert severity="error">{error}</Alert>}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} color="inherit">Cancel</Button>
+          <Button type="submit" variant="contained" disabled={!validationOk || isSubmitting}>
+            {isSubmitting ? 'Submitting…' : 'Submit'}
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+}

package/src/components/form/GetRequestMultiSelect.jsx

@@ -66,7 +66,6 @@ export default function GetRequestMultiSelect({
         <Autocomplete
           multiple={multiple}
           onChange={(event, value) => { onChange(value); }}
-          id="tags-standard"
           options={options}
           getOptionLabel={getOptionLabel}
           defaultValue={multiple ? [] : ''}

package/src/components/form/PostRequestSelect.jsx

@@ -65,7 +65,6 @@ export default function PostRequestSelect({ setValue, getOptions, getOptionLabel
         onChange={(event, value) => { setValue(value); setUserInput(getOptionLabel(value)); }}
         // Change options only when input changes (not when an option is picked)
         onInputChange={(event, newInputValue, reason) => { if (reason === 'input') { setUserInput(newInputValue); setConnectAttemp(connectAttempt + 1); } }}
-        id="tags-standard"
         options={options}
         noOptionsText={noOptionsText || 'Type at least 3 characters to search'}
         getOptionLabel={getOptionLabel}