@opencloning/ui 1.0.0

package/src/components/LoadCloningHistoryWrapper.jsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { batch, useDispatch, useStore } from 'react-redux';
+import useAlerts from '../hooks/useAlerts';
+import useBackendRoute from '../hooks/useBackendRoute';
+import useValidateState from '../hooks/useValidateState';
+import { cloningActions } from '@opencloning/store/cloning';
+import { mergeStates } from '@opencloning/utils/network';
+import { loadFilesToSessionStorage, loadHistoryFile, updateVerificationFileNames } from '@opencloning/utils/readNwrite';
+import HistoryLoadedDialog from './HistoryLoadedDialog';
+import useHttpClient from '../hooks/useHttpClient';
+import { getVerificationFileName } from '@opencloning/utils/readNwrite';
+import { isEqual } from 'lodash-es';
+
+const { setState: setCloningState, deleteSourceAndItsChildren, addSourceAndItsOutputSequence } = cloningActions;
+
+async function processSequenceFiles(files, backendRoute, httpClient) {
+  const allSources = [];
+  const allSequences = [];
+  const allWarnings = [];
+
+  const processFile = async (file) => {
+    const fileName = file.name;
+    const fileContent = await file.arrayBuffer();
+    const newFile = new File([fileContent], fileName);
+
+    const formData = new FormData();
+    formData.append('file', newFile);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+    const url = backendRoute('read_from_file');
+    try {
+      const { data: { sources, sequences }, headers } = await httpClient.post(url, formData, config);
+      // If there are warnings, add them to the list of warnings
+      const warnings = headers['x-warning'] ? [`${fileName}: ${headers['x-warning']}`] : [];
+      return { sources, sequences, warnings };
+    } catch (e) {
+      if (e.code === 'ERR_NETWORK') {
+        throw new Error('Cannot connect to backend server');
+      } else {
+        console.error(e);
+        throw new Error(`Could not read the file ${fileName}`);
+      }
+    }
+  };
+
+  const results = await Promise.all(Array.from(files).map((file) => processFile(file)));
+
+  results.forEach(({ sources, sequences, warnings }) => {
+    allSources.push(...sources);
+    allSequences.push(...sequences);
+    allWarnings.push(...warnings);
+  });
+
+  return { sources: allSources, sequences: allSequences, warnings: allWarnings };
+}
+
+function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
+  const { addAlert } = useAlerts();
+  const dispatch = useDispatch();
+  const backendRoute = useBackendRoute();
+  const store = useStore();
+  const validateState = useValidateState();
+  const httpClient = useHttpClient();
+
+  const [fileLoaderFunctions, setFileLoaderFunctions] = React.useState(null);
+
+  React.useEffect(() => {
+    if (fileList.length === 0) {
+      return;
+    }
+    setFileLoaderFunctions(null);
+    const files = Array.from(fileList);
+    clearFiles();
+    const processFileSubmission = async () => {
+      const cloningState = store.getState().cloning;
+      const isZipFile = files.length === 1 && files[0].name.endsWith('.zip');
+      const isJsonFile = files.length === 1 && files[0].name.endsWith('.json');
+      // If the file is a zip or json file, load the history file
+      if (isZipFile || isJsonFile) {
+        let cloningStrategy;
+        let verificationFiles;
+        try {
+          ({ cloningStrategy, verificationFiles } = await loadHistoryFile(files[0]));
+        } catch (e) {
+          console.error(e);
+          addAlert({ message: e.message, severity: 'error' });
+          return;
+        }
+
+        const validatedState = await validateState(cloningStrategy);
+        // Update the verificationFiles names if needed
+        const updatedVerificationFiles = updateVerificationFileNames(verificationFiles, cloningStrategy.files, validatedState.files);
+
+        const updateState = async (newState, idShift) => {
+          dispatch(setCloningState(newState));
+          await loadFilesToSessionStorage(updatedVerificationFiles, idShift);
+        };
+
+        const replaceState = async () => {
+          await updateState(validatedState, 0);
+        };
+
+        const addState = async () => {
+          const { mergedState, idShift } = mergeStates(validatedState, cloningState);
+          await updateState(mergedState, idShift);
+        };
+
+        const errorWrapper = (fn) => async () => {
+          try {
+            await fn();
+          } catch (e) {
+            console.error(e);
+            addAlert({ message: e.message, severity: 'error' });
+          }
+        };
+          // If there are no sequences in the cloning state, load the history file
+        if (cloningState.sequences.length === 0) {
+          errorWrapper(replaceState)();
+        } else {
+          setFileLoaderFunctions({ addState: errorWrapper(addState), replaceState: errorWrapper(replaceState), clear: () => setFileLoaderFunctions(null) });
+        }
+        // If there are sequences in the cloning state, give the option to merge or replace
+
+        // You cannot drop a zip or json file and a sequence file at the same time
+      } else if (files.some((file) => file.name.endsWith('.json') || file.name.endsWith('.zip'))) {
+        addAlert({
+          message: 'Drop either a single JSON/zip file or multiple sequence files. Not both.',
+          severity: 'error',
+        });
+        // Process a bunch of sequence files
+      } else {
+        try {
+          const { sources, sequences, warnings } = await processSequenceFiles(files, backendRoute, httpClient);
+          batch(() => {
+            // If there is only one source and it is empty, delete it
+            if (cloningState.sources.length === 1 && cloningState.sources[0].type === null) {
+              dispatch(deleteSourceAndItsChildren(cloningState.sources[0].id));
+            }
+            for (let i = 0; i < sources.length; i += 1) {
+              dispatch(addSourceAndItsOutputSequence({ source: sources[i], sequence: sequences[i] }));
+            }
+            warnings.forEach((warning) => addAlert({ message: warning, severity: 'warning' }));
+          });
+        } catch (e) {
+          console.error(e);
+          addAlert({
+            message: e.message,
+            severity: 'error',
+          });
+        }
+      }
+    };
+    processFileSubmission();
+  }, [fileList]);
+  return (
+    <>
+      {fileLoaderFunctions && <HistoryLoadedDialog fileLoaderFunctions={fileLoaderFunctions} />}
+      {children}
+    </>
+  );
+}
+
+export default LoadCloningHistoryWrapper;

package/src/components/MainSequenceCheckBox.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import DownloadIcon from '@mui/icons-material/Download';
+import EditIcon from '@mui/icons-material/Edit';
+import CheckIcon from '@mui/icons-material/Rule';
+import Tooltip from '@mui/material/Tooltip';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import { isEqual } from 'lodash-es';
+import { cloningActions } from '@opencloning/store/cloning';
+import useStoreEditor from '../hooks/useStoreEditor';
+import DownloadSequenceFileDialog from './DownloadSequenceFileDialog';
+import EditSequenceNameDialog from './EditSequenceNameDialog';
+import VerificationFileDialog from './verification/VerificationFileDialog';
+import SubmitToDatabaseDialog from './form/SubmitToDatabaseDialog';
+import { getSourceDatabaseId } from '@opencloning/store/cloning_utils';
+import useDatabase from '../hooks/useDatabase';
+
+function MainSequenceCheckBox({ id }) {
+  const [downloadDialogOpen, setDownloadDialogOpen] = React.useState(false);
+  const [editNameDialogOpen, setEditNameDialogOpen] = React.useState(false);
+  const [verificationDialogOpen, setVerificationDialogOpen] = React.useState(false);
+  const [eLabDialogOpen, setELabDialogOpen] = React.useState(false);
+  const dispatch = useDispatch();
+  const database = useDatabase();
+  const { updateStoreEditor } = useStoreEditor();
+  const store = useStore();
+  const { setMainSequenceId, setCurrentTab } = cloningActions;
+  const mainSequenceId = useSelector((state) => state.cloning.mainSequenceId);
+  const hasVerificationFiles = useSelector((state) => state.cloning.files.some((file) => file.sequence_id === id));
+
+  const databaseId = useSelector((state) => getSourceDatabaseId(state.cloning.sources, id), isEqual);
+  const hasDatabaseId = Boolean(databaseId);
+  const toggleMain = () => {
+    const { mainSequenceId } = store.getState().cloning;
+    if (mainSequenceId !== id) {
+      dispatch(setMainSequenceId(id));
+      updateStoreEditor('mainEditor', id);
+    }
+    dispatch(setCurrentTab(3));
+    // TODO: ideally this should be done with a ref
+    document.getElementById('opencloning-app-tabs')?.scrollIntoView();
+  };
+  const tooltipText = <div className="tooltip-text">See sequence in main editor</div>;
+
+  const DatabaseIcon = hasDatabaseId ? database?.DatabaseIcon : database?.SubmitIcon;
+
+  return (
+    <div className="node-corner">
+      {downloadDialogOpen && <DownloadSequenceFileDialog {...{ id, dialogOpen: downloadDialogOpen, setDialogOpen: setDownloadDialogOpen }} />}
+      {editNameDialogOpen && <EditSequenceNameDialog {...{ id, dialogOpen: editNameDialogOpen, setDialogOpen: setEditNameDialogOpen }} />}
+      {verificationDialogOpen && <VerificationFileDialog {...{ id, dialogOpen: verificationDialogOpen, setDialogOpen: setVerificationDialogOpen }} />}
+      {eLabDialogOpen && <SubmitToDatabaseDialog {...{ id, dialogOpen: eLabDialogOpen, setDialogOpen: setELabDialogOpen, resourceType: 'sequence' }} />}
+      {database && (
+        <Tooltip title={hasDatabaseId ? `Stored in ${database.name}` : `Submit to ${database.name}`} arrow placement="top">
+          <DatabaseIcon
+            onClick={() => (hasDatabaseId ? window.open(database.getSequenceLink(databaseId), '_blank') : setELabDialogOpen(true))}
+            type="button"
+            className="node-corner-icon"
+            sx={{
+              color: hasDatabaseId ? 'success.main' : 'gray',
+              cursor: 'pointer',
+            }}
+          />
+        </Tooltip>
+      )}
+      <Tooltip title="Verification files" arrow placement="top">
+        <CheckIcon onClick={() => setVerificationDialogOpen(true)} type="button" className="node-corner-icon" sx={{ color: hasVerificationFiles ? '#2e7d32' : 'gray', cursor: 'pointer', '&:hover': { filter: 'brightness(70%)' } }} />
+      </Tooltip>
+      <Tooltip title="Change name" arrow placement="top">
+        <EditIcon onClick={() => setEditNameDialogOpen(true)} type="button" className="node-corner-icon" sx={{ color: 'gray', cursor: 'pointer', '&:hover': { filter: 'brightness(70%)' } }} />
+      </Tooltip>
+      <Tooltip title={tooltipText} arrow placement="top">
+        <VisibilityIcon onClick={toggleMain} type="button" className="node-corner-icon" sx={{ cursor: 'pointer', color: (id === mainSequenceId) ? '#2e7d32' : 'gray', '&:hover': { filter: 'brightness(70%)' } }} />
+      </Tooltip>
+      <Tooltip title="Download sequence" arrow placement="top">
+        <DownloadIcon onClick={() => setDownloadDialogOpen(true)} type="button" className="node-corner-icon" sx={{ color: 'gray', cursor: 'pointer', '&:hover': { filter: 'brightness(70%)' } }} />
+      </Tooltip>
+
+    </div>
+  );
+}
+
+export default MainSequenceCheckBox;

package/src/components/MainSequenceEditor.jsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { Editor, updateEditor } from '@teselagen/ove';
+import { useDispatch, useStore } from 'react-redux';
+import { getReverseComplementSequenceString, getSequenceDataBetweenRange } from '@teselagen/sequence-utils';
+import defaultMainEditorProps from '../config/defaultMainEditorProps';
+import { cloningActions } from '@opencloning/store/cloning';
+import useAlerts from '../hooks/useAlerts';
+import { Alert, Button } from '@mui/material';
+import { useSelector } from 'react-redux';
+import useUpdateAnnotationInMainSequence from './annotation/useUpdateAnnotationInMainSequence';
+import useStoreEditor from '../hooks/useStoreEditor';
+
+const { setMainSequenceSelection, addPrimer } = cloningActions;
+
+function regionRightClickedOverride(items, { annotation }, props) {
+  const items2keep = items.filter((i) => i.text === 'Copy');
+  return [
+    ...items2keep,
+    {
+      text: 'Create',
+      submenu: [
+        "newFeature",
+        "newPrimer",
+      ],
+    },
+    ...(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",
+  ];
+}
+
+
+function MainSequenceEditor() {
+  const dispatch = useDispatch();
+  const { addAlert } = useAlerts();
+  const { updateStoreEditor } = useStoreEditor();
+  const updateAnnotationInMainSequence = useUpdateAnnotationInMainSequence();
+
+  const annotationChanged = useSelector(
+    (state) => {
+      const history = state.VectorEditor.mainEditor?.sequenceDataHistory;
+      if (!history) return false;
+      return state.cloning.mainSequenceId && Object.keys(history).length > 0 && history.future.length === 0;
+    }
+  );
+
+  const store = useStore();
+  const editorName = 'mainEditor';
+  const mainSequenceId = useSelector((state) => state.cloning.mainSequenceId);
+  const topDivRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (annotationChanged) {
+      setTimeout(() => {
+        topDivRef.current.scrollIntoView({ behavior: 'smooth' });
+      }, 250);
+    }
+  }, [annotationChanged]);
+
+
+  const onAnnotationCancel = () => {
+    const currentSequenceData = store.getState().VectorEditor.mainEditor.sequenceData;
+    updateStoreEditor('mainEditor', mainSequenceId, { sequenceData: currentSequenceData });
+  };
+
+  const beforeAnnotationCreate = ({ annotationTypePlural, annotation, props, isEdit }) =>  {
+
+    if (annotationTypePlural === 'primers') {
+      const existingPrimerNames = store.getState().cloning.primers.map((p) => p.name);
+      if (existingPrimerNames.includes(annotation.name)) {
+        addAlert({
+          message: `A primer with name "${annotation.name}" already exists`,
+          severity: 'error',
+        });
+        return false;
+      }
+      let { sequence } = getSequenceDataBetweenRange(props.sequenceData, annotation);
+      if (annotation.strand === -1) {
+        sequence = getReverseComplementSequenceString(sequence);
+      }
+      dispatch(addPrimer({
+        name: annotation.name,
+        sequence: sequence,
+      }));
+      addAlert({
+        message: `Primer "${annotation.name}" created`,
+        severity: 'success',
+      });
+    } else if (annotationTypePlural !== 'features') {
+      return false;
+    }
+  };
+
+  const extraProp = {
+    beforeAnnotationCreate,
+    onSelectionOrCaretChanged: (a) => dispatch(setMainSequenceSelection(a)),
+    selectionLayer: {},
+    sequenceData: {},
+    rightClickOverrides: {
+      selectionLayerRightClicked: regionRightClickedOverride,
+      primerRightClicked: primerRightClickedOverride,
+      translationRightClicked: regionRightClickedOverride,
+      searchLayerRightClicked: regionRightClickedOverride,
+      featureRightClicked: featureRightClickedOverride,
+      partRightClicked: {},
+      orfRightClicked: {},
+      backgroundRightClicked: {},
+    },
+  };
+
+  React.useEffect(() => {
+    updateEditor(store, editorName, { ...defaultMainEditorProps, ...extraProp });
+  }, []);
+
+  return (
+    <div style={{ textAlign: 'left' }} ref={topDivRef}>
+      {annotationChanged &&
+      <Alert
+        style={{maxWidth: '500px', margin: '10px auto'}}
+        severity="info"
+        data-testid="annotation-changed-alert"
+        action={
+          <>
+            <Button color="primary" onClick={updateAnnotationInMainSequence}>
+              Save
+            </Button>
+            <Button color="secondary" onClick={onAnnotationCancel}>
+              Cancel
+            </Button>
+          </>
+        }
+      >
+        <strong>Annotation Changed</strong>
+      </Alert>
+      }
+      <Editor {...{ editorName, ...defaultMainEditorProps, ...extraProp, height: '800' }} />
+    </div>
+  );
+}
+export default React.memo(MainSequenceEditor);

package/src/components/NetworkNode.jsx

@@ -0,0 +1,159 @@
+import React, { useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Box, Tooltip } from '@mui/material';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { isEqual } from 'lodash-es';
+import Source from './sources/Source';
+import './NetworkTree.css';
+import SequenceEditor from './SequenceEditor';
+import FinishedSource from './sources/FinishedSource';
+import MainSequenceCheckBox from './MainSequenceCheckBox';
+import TemplateSequence from './TemplateSequence';
+import { getSourceDatabaseId, isSourceATemplate } from '@opencloning/store/cloning_utils';
+import { cloningActions } from '@opencloning/store/cloning';
+import SourceBox from './sources/SourceBox';
+import { getSortedSourceIds } from '@opencloning/utils/network';
+import useDatabase from '../hooks/useDatabase';
+
+const { addToSourcesWithHiddenAncestors, removeFromSourcesWithHiddenAncestors, addSequenceInBetween } = cloningActions;
+
+const SequenceContent = React.memo(({ sequenceId, sequenceIsTemplate }) => {
+  const database = useDatabase();
+  const isSavedToDatabase = database && useSelector((state) => Boolean(getSourceDatabaseId(state.cloning.sources, sequenceId)));
+  return (
+    <span className="tf-nc" style={{ borderColor: isSavedToDatabase ? 'green' : 'default' }}>
+      <span className="node-text">
+        {sequenceIsTemplate ? (
+          <TemplateSequence sequenceId={sequenceId} />
+        ) : (
+          <>
+            <SequenceEditor {...{ sequenceId }} />
+            <MainSequenceCheckBox {...{ id: sequenceId }} />
+          </>
+        )}
+        <div className="corner-id" style={{ color: isSavedToDatabase ? 'green' : 'default' }}>{sequenceId}</div>
+      </span>
+    </span>
+  );
+});
+
+function SequenceWrapper({ children, sequenceId, sequenceIsTemplate }) {
+  if (sequenceId === null) {
+    return children;
+  }
+  return (
+    <li key={sequenceId} id={`sequence-${sequenceId}`} className="sequence-node">
+      <SequenceContent {...{ sequenceId, sequenceIsTemplate }} />
+      <ul>
+        {children}
+      </ul>
+    </li>
+  );
+}
+
+// A component that renders the ancestry tree
+function NetWorkNode({ sourceId }) {
+  const tooltipRef = useRef(null);
+  const info = useSelector((state) => {
+    const s = state.cloning.sources.find((source) => source.id === sourceId);
+    const sequenceId = state.cloning.sequences.map((sequence) => sequence.id).includes(s.id) ? s.id : null;
+    return {
+      sequenceId,
+      sourceInput: s.input,
+      hasDatabaseId: Boolean(getSourceDatabaseId(state.cloning.sources, s.id)),
+      sequenceIsTemplate: sequenceId && state.cloning.sequences.find((sequence) => sequence.id === sequenceId).type === 'TemplateSequence',
+      sourceIsTemplate: isSourceATemplate(state.cloning, sourceId),
+    };
+  }, isEqual);
+  const { sequenceId, sourceInput, hasDatabaseId, sequenceIsTemplate, sourceIsTemplate } = info;
+  const ancestorsHidden = useSelector((state) => state.cloning.sourcesWithHiddenAncestors.includes(sourceId));
+  const parentSourceIds = useSelector((state) => {
+    const parentSources = state.cloning.sources.filter((source) => sourceInput.some(({sequence}) => sequence === source.id));
+    return getSortedSourceIds(parentSources, state.cloning.sources);
+  }, isEqual);
+
+  const dispatch = useDispatch();
+  const database = useDatabase();
+
+  const onVisibilityClick = React.useCallback(() => {
+    if (ancestorsHidden) {
+      dispatch(removeFromSourcesWithHiddenAncestors(sourceId));
+      // Give it a bit of time to render the ancestors
+      setTimeout(() => {
+        // If it has children sequence align to the children
+        if (sequenceId) {
+          document.getElementById(`sequence-${sequenceId}`)?.scrollIntoView({ alignToTop: false, block: 'end' });
+        } else {
+          document.getElementById(`source-${sourceId}`)?.scrollIntoView({ alignToTop: false, block: 'end' });
+        }
+      }, 100);
+    } else {
+      dispatch(addToSourcesWithHiddenAncestors(sourceId));
+    }
+
+    if (tooltipRef.current) {
+      tooltipRef.current.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
+    }
+  }, [ancestorsHidden, sourceId, sequenceId]);
+
+  const Icon = ancestorsHidden ? VisibilityIcon : VisibilityOffIcon;
+  const visibilityIconToolTip = ancestorsHidden ? 'Show ancestors' : 'Hide ancestors';
+  const isSavedToDatabase = database && hasDatabaseId;
+
+  return (
+    <SequenceWrapper {...{ sequenceId, sequenceIsTemplate }}>
+      <li id={`source-${sourceId}`} className={`source-node ${ancestorsHidden ? 'hidden-ancestors' : ''}`}>
+        <Box component="span" className="tf-nc" style={{ borderColor: isSavedToDatabase ? 'green' : 'default' }}>
+          <span className="node-text">
+            <SourceBox {...{ sourceId }}>
+              {(sequenceId !== null && !sourceIsTemplate) ? (
+                <FinishedSource {...{ sourceId }} />
+              ) : (
+                <Source {...{ sourceId }} />
+              )}
+            </SourceBox>
+            <div className="corner-id" style={{ color: isSavedToDatabase ? 'green' : 'default' }}>
+              {sourceId}
+            </div>
+            { (!sourceIsTemplate && sourceInput.length > 0 && sequenceId) && (
+            <div className="before-node before-node-visibility">
+              <Tooltip
+                arrow
+                title={visibilityIconToolTip}
+                placement="left"
+              >
+                <div ref={tooltipRef}>
+                  <Icon onClick={onVisibilityClick} style={{ color: 'grey' }} />
+                </div>
+              </Tooltip>
+            </div>
+            )}
+            { (sourceIsTemplate && sourceInput.length > 0)
+            && (
+            <div className="before-node before-node-sequence-in-between">
+              <Tooltip arrow title="Add sequence in between" placement={sourceInput.length > 1 ? 'top' : 'left'}>
+                <div>
+                  <AddCircleIcon onClick={() => { dispatch(addSequenceInBetween(sourceId)); }} color="success" />
+                </div>
+              </Tooltip>
+            </div>
+            )}
+          </span>
+        </Box>
+        {parentSourceIds.length > 0 && (
+        <ul className={ancestorsHidden ? 'hidden-ancestors' : ''}>
+          {parentSourceIds.map((id) => (
+            <MemoizedNetWorkNode sourceId={id} key={`node-${id}`} />
+          ))}
+        </ul>
+        )}
+      </li>
+    </SequenceWrapper>
+  );
+}
+
+const MemoizedNetWorkNode = React.memo(NetWorkNode);
+
+export default React.memo(NetWorkNode);