@opencloning/ui 1.7.3 → 1.8.1

package/src/components/sources/MultipleOutputsSelector.jsx

@@ -7,28 +7,45 @@ import OverhangsDisplay from '../OverhangsDisplay';
 import SubSequenceDisplayer from './SubSequenceDisplayer';
 import AssemblyPlanDisplayer from './AssemblyPlanDisplayer';
 
-function MultipleOutputsSelector({ sources, sequences, sourceId, onFragmentChosen }) {
+function MultipleOutputsSelector({
+  sources,
+  sequences,
+  sourceId,
+  onFragmentChosen,
+  mockable = {}, // for testing
+}) {
+  const [selectedOutput, setSelectedOutput] = React.useState(0);
+  const {
+    SubSequenceDisplayerComponent = SubSequenceDisplayer,
+    AssemblyPlanDisplayerComponent = AssemblyPlanDisplayer,
+    CircularOrLinearViewComponent = SimpleCircularOrLinearView,
+    OverhangsDisplayComponent = OverhangsDisplay,
+    convertSequence = convertToTeselaJson,
+  } = mockable;
+
+  React.useEffect(() => setSelectedOutput(0), [sources]);
+
   // If the output is already set or the list of outputs is empty, do not show this element
   if (sources.length === 0) { return null; }
 
-  // selectedOutput is a local property, until you commit the step by clicking
-  const [selectedOutput, setSelectedOutput] = React.useState(0);
-
   // Functions called to move between outputs of a restriction reaction
-  const incrementSelectedOutput = () => setSelectedOutput(
-    (selectedOutput + 1) % sources.length,
-  );
-  const decreaseSelectedOutput = () => setSelectedOutput((selectedOutput !== 0) ? (selectedOutput - 1) : sources.length - 1);
+  const incrementSelectedOutput = () => setSelectedOutput((current) => (
+    (current + 1) % sources.length
+  ));
+  const decreaseSelectedOutput = () => setSelectedOutput((current) => (
+    (current !== 0) ? (current - 1) : sources.length - 1
+  ));
 
   // The function to pick the fragment as the output, and execute the step
   const chooseFragment = (e) => {
     e.preventDefault();
-    onFragmentChosen(selectedOutput);
+    onFragmentChosen(Math.min(selectedOutput, sources.length - 1));
   };
 
   const editorName = `source_editor_${sourceId}`;
+  const safeSelectedOutput = Math.min(selectedOutput, sources.length - 1);
 
-  const seq = convertToTeselaJson(sequences[selectedOutput]);
+  const seq = convertSequence(sequences[safeSelectedOutput]);
 
   return (
     <div className="multiple-output-selector">
@@ -36,21 +53,17 @@ function MultipleOutputsSelector({ sources, sequences, sourceId, onFragmentChose
         <IconButton onClick={decreaseSelectedOutput} type="button" sx={{ height: 'fit-content' }}>
           <ArrowBack />
         </IconButton>
-        {selectedOutput + 1}
-        {' '}
-        /
-        {' '}
-        {sources.length}
+        {`${safeSelectedOutput + 1} / ${sources.length}`}
         <IconButton onClick={incrementSelectedOutput} type="button" sx={{ height: 'fit-content' }}>
           <ArrowForward />
         </IconButton>
       </div>
 
       <div className="fragment-picker">
-        <SubSequenceDisplayer {...{ source: sources[selectedOutput], sourceId }} />
-        <AssemblyPlanDisplayer {...{ source: sources[selectedOutput] }} />
-        <SimpleCircularOrLinearView {...{ sequenceData: seq, editorName, height: 'auto' }} />
-        <OverhangsDisplay {...{ sequenceData: seq, sequence: sequences[selectedOutput] }} />
+        <SubSequenceDisplayerComponent {...{ source: sources[safeSelectedOutput], sourceId }} />
+        <AssemblyPlanDisplayerComponent {...{ source: sources[safeSelectedOutput] }} />
+        <CircularOrLinearViewComponent {...{ sequenceData: seq, editorName, height: 'auto' }} />
+        <OverhangsDisplayComponent {...{ sequenceData: seq, sequence: sequences[safeSelectedOutput] }} />
       </div>
       <form onSubmit={chooseFragment}>
         <Button fullWidth type="submit" variant="contained">Choose product</Button>

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

@@ -85,7 +85,7 @@ describe('<RecombinaseList />', () => {
     const setRecombinasesSpy = cy.spy().as('setRecombinasesSpy');
     cy.mount(<RecombinaseList recombinases={[]} setRecombinases={setRecombinasesSpy} />);
 
-    setInputValue('Name (optional)', 'MyRecombinase', 'body');
+    setInputValue('Recombinase name (optional)', 'MyRecombinase', 'body');
     setInputValue('Site 1', 'AAaaTTC', 'body');
     setInputValue('Site 1 name', 'loxP', 'body');
     setInputValue('Site 2', 'CCaaGC', 'body');

package/src/components/sources/RecombinaseList.jsx

@@ -65,7 +65,7 @@ function RecombinaseList({ recombinases, setRecombinases }) {
       <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 1 }}>
         <TextField
           fullWidth
-          label="Name (optional)"
+          label="Recombinase name (optional)"
           value={name}
           onChange={(e) => setName(e.target.value)}
           size="small"

package/src/components/sources/SourceAssembly.jsx

@@ -2,7 +2,7 @@ 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 { anyAssemblyInputIsLinear, getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
 import EnzymeMultiSelect from '../form/EnzymeMultiSelect';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions';
@@ -20,6 +20,11 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
   const { id: sourceId, input: sourceInput } = source;
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
   const inputContainsTemplates = inputSequences.some((sequence) => sequence.type === 'TemplateSequence');
+  const anyInputIsLinear = useSelector(
+    (state) => anyAssemblyInputIsLinear(source, state.cloning.teselaJsonCache),
+  );
+  // It starts as undefined to avoid flashing the checkbox when the component mounts
+  const [inputContainsGenome, setInputContainsGenome] = React.useState(undefined);
   const [minimalHomology, setMinimalHomology] = React.useState(20);
   const [allowPartialOverlap, setAllowPartialOverlap] = React.useState(false);
   const [circularOnly, setCircularOnly] = React.useState(false);
@@ -43,6 +48,13 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
     }
   }, [source]);
 
+  React.useEffect(() => {
+    if (inputSequences.length == 1) {
+      setInputContainsGenome(false);
+    } else {
+      setInputContainsGenome(anyInputIsLinear);
+    }
+  }, [anyInputIsLinear, inputSequences.length]);
   const { updateSource } = cloningActions;
 
   const preventSubmit = (
@@ -97,7 +109,10 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
     } else if (assemblyType === 'RecombinaseSource') {
       if (recombinases.length === 0) { return; }
       requestData.source.recombinases = recombinases;
-      const config = { params: { reverse_recombinase: reverseRecombinase } };
+      const config = { params: {
+        reverse_recombinase: reverseRecombinase,
+        input_contains_genome: inputContainsGenome,
+      } };
       sendPostRequest({ endpoint: 'recombinase', requestData, config, source });
     } else {
       const config = { params: {
@@ -160,6 +175,25 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
                 )}
               />
             </FormControl>
+            {(anyInputIsLinear && inputSequences.length > 1) && inputContainsGenome !== undefined && (
+              <FormControl fullWidth style={{ textAlign: 'left' }}>
+                <FormControlLabel
+                  control={(
+                    <Checkbox
+                      data-testid="input-contains-genome-checkbox"
+                      checked={inputContainsGenome}
+                      onChange={() => setInputContainsGenome(prev => !prev)}
+                    />
+                  )}
+                  label={(
+                    <LabelWithTooltip
+                      label="Input contains genome"
+                      tooltip="Select this option if any of the linear input sequences is part of a genome. This will be used to simulate genome integration rather than treating it as a linear DNA sequence"
+                    />
+                  )}
+                />
+              </FormControl>
+            )}
           </>
         )}
         { (assemblyType === 'GatewaySource') && (

package/src/components/sources/SourceRepositoryId.jsx

@@ -223,7 +223,6 @@ function IndexJsonSelector({
           }}
           // Change options only when input changes (not when an option is picked)
           onInputChange={(event, newInputValue, reason) => (reason === 'input') && onInputChange(newInputValue)}
-          id="tags-standard"
           options={options}
           noOptionsText={userInput.length < requiredInput ? noOptionsText : 'Nothing found'}
           getOptionLabel={(o) => o.name}

package/src/components/sources/SourceTypeSelector.jsx

@@ -44,7 +44,7 @@ function SourceTypeSelector({ source }) {
       options.push(<MenuItem key="CopySequence" value="CopySequence">Use an existing sequence</MenuItem>);
     }
   } else {
-    // See https://github.com/manulera/OpenCloning_frontend/issues/101
+    // See https://github.com/OpenCloning/OpenCloning_frontend/issues/101
     if (inputSequences.length < 2) {
       options.push(<MenuItem key="RestrictionEnzymeDigestionSource" value="RestrictionEnzymeDigestionSource">Restriction</MenuItem>);
       options.push(<MenuItem key="PCRSource" value="PCRSource">PCR</MenuItem>);

package/src/components/verification/ImportSequencingFilesInput.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { sequencingFileExtensions } from '@opencloning/utils/sequencingFileExtensions';
+function ImportSequencingFilesInput({ onFileChange, fileInputRef }) {
+
+  return (
+    <input
+      type="file"
+      accept={sequencingFileExtensions.map((ext) => `.${ext}`).join(', ')}
+      multiple
+      onChange={(event) => {onFileChange(Array.from(event.target.files)); fileInputRef.current.value = '';}}
+      style={{ display: 'none' }}
+      ref={fileInputRef}
+    />
+  )
+}
+
+export default ImportSequencingFilesInput

package/src/components/verification/LoadFromDatabaseButton.jsx

@@ -14,11 +14,27 @@ function LoadFromDatabaseButton({ databaseId, onFileChange, setError, existingFi
     setSelectedFiles([]);
   }, [open]);
 
+  const handleSubmit = async () => {
+    setOpen(false);
+    try {
+      const filesToLoad = await Promise.all(selectedFiles.map((file) => files.find((f) => f.name === file).getFile()));
+      onFileChange(filesToLoad);
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
   React.useEffect(() => {
     async function getFiles() {
       setLoading(true);
       const allFiles = await database.getSequencingFiles(databaseId);
-      setFiles(allFiles.filter((file) => sequencingFileExtensions.includes(file.name.toLowerCase().split('.').pop())));
+      if (database.autoloadSequencingFiles) {
+        const filesToLoad = await Promise.all(allFiles.map((file) => file.getFile()));
+        onFileChange(filesToLoad);
+        setOpen(false);
+      } else {
+        setFiles(allFiles.filter((file) => sequencingFileExtensions.includes(file.name.toLowerCase().split('.').pop())));
+      }
       setLoading(false);
     }
     if (open) {
@@ -26,15 +42,6 @@ function LoadFromDatabaseButton({ databaseId, onFileChange, setError, existingFi
     }
   }, [open]);
 
-  const handleSubmit = async () => {
-    setOpen(false);
-    try {
-      const filesToLoad = await Promise.all(selectedFiles.map((file) => files.find((f) => f.name === file).getFile()));
-      onFileChange(filesToLoad);
-    } catch (error) {
-      setError(error.message);
-    }
-  };
 
   return (
     <>

package/src/components/verification/VerificationFileDialog.jsx

@@ -27,6 +27,7 @@ import LoadFromDatabaseButton from './LoadFromDatabaseButton';
 import { sequencingFileExtensions } from '@opencloning/utils/sequencingFileExtensions';
 import useHttpClient from '../../hooks/useHttpClient';
 import { getVerificationFileName } from '@opencloning/utils/readNwrite';
+import ImportSequencingFilesInput from './ImportSequencingFilesInput';
 
 const { addFile, removeFile: removeFileAction, removeFilesAssociatedToSequence, setMainSequenceId, setCurrentTab } = cloningActions;
 
@@ -52,9 +53,9 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
     updateStoreEditor('mainEditor', id);
     // TODO: ideally this should be done with a ref
     document.getElementById('opencloning-app-tabs')?.scrollIntoView();
-  }, [id]);
+  }, [id, dispatch, updateStoreEditor]);
 
-  const handleFileUpload = async (newFiles) => {
+  const handleFileUpload = useCallback(async (newFiles) => {
     // Clear the input
     fileInputRef.current.value = '';
     if (newFiles.some((file) => !sequencingFileExtensions.includes(file.name.toLowerCase().split('.').pop()))) {
@@ -109,7 +110,7 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
       alignments.forEach(({ base64str, file_name }) => { sessionStorage.setItem(`verification-${id}-${file_name}`, base64str); });
     });
     setLoadingMessage('');
-  };
+  }, [id, dispatch, httpClient, backendRoute, store, sequence]);
 
   const onFileChange = useCallback(async (files) => {
     setLoadingMessage('Aligning...');
@@ -126,13 +127,13 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
   const removeFile = useCallback((fileName) => {
     dispatch(removeFileAction({ fileName, sequenceId: id }));
     sessionStorage.removeItem(`verification-${id}-${fileName}`);
-  }, [id]);
+  }, [id, dispatch]);
 
-  const handleClickUpload = () => {
+  const handleClickUpload = useCallback(() => {
     fileInputRef.current?.click();
-  };
+  }, [fileInputRef]);
 
-  const downloadFile = (fileName) => {
+  const downloadFile = useCallback((fileName) => {
     const base64Content = sessionStorage.getItem(`verification-${id}-${fileName}`);
     if (!base64Content) {
       setError(`File ${fileName} not found in session storage`);
@@ -152,7 +153,7 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
     a.click();
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
-  };
+  }, [id]);
 
   return (
     <Dialog
@@ -165,14 +166,7 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
     >
       <DialogTitle>Verification files</DialogTitle>
       <DialogContent>
-        <input
-          type="file"
-          accept={sequencingFileExtensions.map((ext) => `.${ext}`).join(', ')}
-          multiple
-          onChange={(event) => onFileChange(Array.from(event.target.files))}
-          style={{ display: 'none' }}
-          ref={fileInputRef}
-        />
+        <ImportSequencingFilesInput onFileChange={onFileChange} fileInputRef={fileInputRef} />
 
         {loadingMessage && (
           <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', my: 2 }}>
@@ -229,13 +223,13 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
           )}
 
           {hasSequencingFile && (
-          <Button
-            variant="contained"
-            onClick={() => { setDialogOpen(false); toggleMain(); }}
-            color="success"
-          >
+            <Button
+              variant="contained"
+              onClick={() => { setDialogOpen(false); toggleMain(); }}
+              color="success"
+            >
             See alignments in editor
-          </Button>
+            </Button>
           )}
         </Box>
 

package/src/components/verification/index.js

@@ -0,0 +1 @@
+export { default as ImportSequencingFilesInput } from './ImportSequencingFilesInput';

package/src/config/defaultMainEditorProps.js

@@ -2,6 +2,7 @@ export default {
   isFullscreen: false,
   readOnly: false,
   disableBpEditing: true,
+  hideSingleImport: true,
   annotationVisibility: { reverseSequence: true, cutsites: false },
   ToolBarProps: {
     toolList: [

package/src/hooks/useAlerts.js

@@ -1,15 +1,14 @@
 import { useDispatch } from 'react-redux';
-import { cloningActions } from '@opencloning/store/cloning';
 
-export default function useAlerts() {
+export default function useAlerts({ actions }) {
   const dispatch = useDispatch();
 
   const addAlert = (alert) => {
-    dispatch(cloningActions.addAlert(alert));
+    dispatch(actions.addAlert(alert));
   };
 
   const removeAlert = (message) => {
-    dispatch(cloningActions.removeAlert(message));
+    dispatch(actions.removeAlert(message));
   };
 
   return { addAlert, removeAlert };

package/src/hooks/useBackendAPI.js

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 import error2String from '@opencloning/utils/error2String';
 import useBackendRoute from './useBackendRoute';
-import useAlerts from './useAlerts';
+import useCloningAlerts from './useCloningAlerts';
 import useHttpClient from './useHttpClient';
 
 export default function useBackendAPI() {
@@ -10,7 +10,7 @@ export default function useBackendAPI() {
   const [sequences, setSequences] = useState([]);
   const backendRoute = useBackendRoute();
   const httpClient = useHttpClient();
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
 
   const sendPostRequest = useCallback(async ({ endpoint, requestData, config = {}, source: { output }, modifySource = (s) => s }) => {
     setRequestStatus({ status: 'loading', message: 'loading' });
@@ -41,6 +41,9 @@ export default function useBackendAPI() {
 
       setSources(receivedSources); setSequences(resp.data.sequences);
     } catch (error) {
+      if (error.response && error.response.headers && error.response.headers['x-warning']) {
+        addAlert({ message: error.response.headers['x-warning'], severity: 'warning' });
+      }
       setRequestStatus({ status: 'error', message: error2String(error) });
       setSources([]);
       setSequences([]);

package/src/hooks/useCloningAlerts.js

@@ -0,0 +1,7 @@
+
+import { cloningActions } from '@opencloning/store/cloning';
+import useAlerts from './useAlerts';
+
+export default function useCloningAlerts() {
+  return useAlerts({ actions: cloningActions });
+}

package/src/hooks/useDebouncedSearchQuery.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+
+export default function useDebouncedSearchQuery(getQuery, { minChars = 3, debounceMs = 500 } = {}) {
+  const [input, setInput] = useState('');
+  const [debouncedInput, setDebouncedInput] = useState('');
+
+  const syncing = input !== debouncedInput;
+
+  let noOptionsText = 'No results found';
+  if (input.length < minChars) {
+    noOptionsText = `Type at least ${minChars} characters to search`;
+  } else if (syncing) {
+    noOptionsText = 'Loading...';
+  }
+
+  useEffect(() => {
+    const id = setTimeout(() => setDebouncedInput(input), debounceMs);
+    return () => clearTimeout(id);
+  }, [input, debounceMs]);
+
+  const query = React.useMemo(() => {
+    return {
+      ...getQuery(debouncedInput),
+      enabled: debouncedInput.length >= minChars
+    };
+  }, [getQuery, debouncedInput, minChars]);
+
+  const autocompleteProps = {
+    inputValue: input,
+    onInputChange: (_event, value, reason) => {
+      if (reason === 'input' || reason === 'reset') setInput(value);
+    },
+    filterOptions: (x) => syncing ? [] : x,
+    noOptionsText,
+  };
+
+  const clearInput = () => {
+    setInput('');
+  };
+
+  return { query, autocompleteProps, clearInput };
+}

package/src/hooks/useLoadDatabaseFile.js

@@ -53,7 +53,7 @@ export default function useLoadDatabaseFile({ source, sendPostRequest, setHistor
           const sequence = cloningStrategy.sequences.find((e) => e.id === cloningSource.id);
           const seq = convertToTeselaJson(sequence);
           const databaseName = await database.getSequenceName(seqDatabaseId);
-          if (seq.name !== databaseName) {
+          if (databaseName && (seq.name !== databaseName)) {
             seq.name = databaseName;
             const genbank = jsonToGenbank(seq);
             sequence.file_content = genbank;
@@ -68,11 +68,15 @@ export default function useLoadDatabaseFile({ source, sendPostRequest, setHistor
       }
       // This one won't have the source.id deleted
       const prevState = store.getState().cloning;
+      const { backendVersion, schemaVersion, frontendVersion } = prevState.appInfo;
+      cloningStrategy.backend_version = backendVersion;
+      cloningStrategy.schema_version = schemaVersion;
+      cloningStrategy.frontend_version = frontendVersion;
       cloningStrategy = await validateState(cloningStrategy);
 
       batch(() => {
         // Replace the source with the new one if called from a source
-        if (!ancestors) {
+        if (!ancestors && source) {
           dispatch(deleteSourceAndItsChildren(source.id));
         }
         const cloningState = store.getState().cloning;

package/src/hooks/useSequencingAlignment.js

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { buildAlignmentTrack, buildReferenceTrack, buildAlignmentConfig } from '@opencloning/utils/alignmentUtils';
+import useBackendRoute from './useBackendRoute';
+import useHttpClient from './useHttpClient';
+
+export default function useSequencingAlignment({ onError } = {}) {
+  const backendRoute = useBackendRoute();
+  const httpClient = useHttpClient();
+
+  const fetchAlignments = useCallback(async ({ sequenceModel, sequenceData, parsedFiles }) => {
+    // parsedFiles: [{ fileName, fileContent }] where fileContent is getTeselaJsonFromBase64 output
+    const traces = parsedFiles.map((f) => f.fileContent.sequence);
+    const resp = await httpClient.post(backendRoute('align_sanger'), { sequence: sequenceModel, traces });
+
+    const referenceTrack = buildReferenceTrack(sequenceData, resp.data[0]);
+    const otherTracks = parsedFiles.map((f, i) => {
+      const alignmentFile = { file_name: f.fileName, alignment: [resp.data[0], resp.data[i + 1]] }; // eslint-disable-line camelcase
+      return buildAlignmentTrack(f.fileContent, alignmentFile);
+    });
+
+    return buildAlignmentConfig(sequenceModel.id, sequenceData, [referenceTrack, ...otherTracks]);
+  }, [httpClient, backendRoute]);
+
+  return useMutation({ mutationFn: fetchAlignments, onError });
+}

package/src/hooks/useSnapgeneHistoryEndpoint.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useBackendRoute from './useBackendRoute';
 import useHttpClient from './useHttpClient';
-import useAlerts from './useAlerts';
+import useCloningAlerts from './useCloningAlerts';
 import { batch, useDispatch, useStore } from 'react-redux';
 import { mergeStates } from '@opencloning/utils/network';
 import { cloningActions } from '@opencloning/store/cloning';
@@ -21,7 +21,7 @@ const { setState: setCloningState, deleteSourceAndItsChildren } = cloningActions
 export default function useSnapgeneHistoryEndpoint() {
   const backendRoute = useBackendRoute();
   const httpClient = useHttpClient();
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const dispatch = useDispatch();
   const store = useStore();
   const url = backendRoute('read_snapgene_history');
@@ -48,7 +48,7 @@ export default function useSnapgeneHistoryEndpoint() {
       }
       if (resp.headers['x-warning']) {
         addAlert({
-          message: `SnapGene parsing warning: ${resp.headers['x-warning']}`,
+          message: `Not all SnapGene history was parsed: ${resp.headers['x-warning']}`,
           severity: 'warning',
         });
       }

package/src/hooks/useStoreEditor.js

@@ -2,8 +2,7 @@ import { useStore } from 'react-redux';
 import { updateEditor, addAlignment } from '@teselagen/ove';
 import { getPCRPrimers } from '@opencloning/store/cloning_utils';
 import { getTeselaJsonFromBase64 } from '@opencloning/utils/readNwrite';
-import { findRotation, syncChromatogramDataWithAlignment } from '@opencloning/utils/sequenceManipulation';
-import { getReverseComplementSequenceAndAnnotations, getReverseComplementSequenceString, rotateSequenceDataToPosition } from '@teselagen/sequence-utils';
+import { buildAlignmentTrack, buildReferenceTrack, buildAlignmentConfig, removePanelFromShown, updatePanelsShownWithAlignment } from '@opencloning/utils/alignmentUtils';
 
 export default function useStoreEditor() {
   const store = useStore();
@@ -27,74 +26,17 @@ export default function useStoreEditor() {
       const pcrPrimers = getPCRPrimers(cloning, id);
       const alignmentFiles = cloning.files.filter((e) => e.sequence_id === id && e.file_type === 'Sequencing file');
       let { panelsShown } = store.getState().VectorEditor.mainEditor;
-      panelsShown = [[...panelsShown[0].filter((p) => p.id !== 'simpleAlignment')]]
+      panelsShown = removePanelFromShown(panelsShown, 'simpleAlignment');
 
       if (alignmentFiles.length > 0) {
-        addAlignment(store, {
-          id: 'simpleAlignment',
-          alignmentType: 'Sequencing alignment',
-          name: `Seq. ${id}`,
-          // set the visibilities of the annotations you'd like to see
-          alignmentAnnotationVisibility: {
-            features: true,
-            parts: true,
-            translations: true,
-          },
-          alignmentTracks: [
-            {
-              sequenceData,
-              alignmentData: {
-                // the alignmentData just needs the sequence < TODO this has to be changed to be the largest ---
-                sequence: alignmentFiles[0].alignment[0],
-                name: sequenceData.name
-              },
-            },
-            ...await Promise.all(alignmentFiles.map(async (aln) => {
-              const fileContent = await getTeselaJsonFromBase64(sessionStorage.getItem(`verification-${id}-${aln.file_name}`), aln.file_name);
-              let chromatogramData = fileContent.chromatogramData;
-              let alignmentSequenceData = {
-                name: aln.file_name,
-                sequence: aln.alignment[1].replaceAll('-', ''),
-              };
-              if (chromatogramData) {
-                chromatogramData = syncChromatogramDataWithAlignment(chromatogramData, aln.alignment[1]);
-              }
-              if (fileContent.features && fileContent.features.length > 0) {
-                alignmentSequenceData = fileContent;
-                const alignmentSequence = aln.alignment[1].replaceAll('-', '');
-                let rotation = findRotation(fileContent.sequence, alignmentSequence);
-                // If the rotation is -1, it may be reverse complemented
-                const reverseComplemented = rotation === -1;
-                if (reverseComplemented) {
-                  rotation = findRotation(fileContent.sequence, getReverseComplementSequenceString(alignmentSequence));
-                  alignmentSequenceData = getReverseComplementSequenceAndAnnotations(fileContent);
-                }
-                if (rotation !== -1 && rotation !== 0) {
-                  rotation = reverseComplemented ? fileContent.sequence.length - rotation : rotation;
-                  alignmentSequenceData = rotateSequenceDataToPosition(alignmentSequenceData, rotation);
-                }
-              }
-              return {
-                sequenceData: {...alignmentSequenceData, name: aln.file_name},
-                alignmentData: {
-                  sequence: aln.alignment[1],
-                  name: aln.file_name
-                },
-                chromatogramData,
-              };
-            })),
-          ],
-        });
-        panelsShown = [[
-          ...panelsShown[0].filter((p) => p.id !== 'simpleAlignment'),
-          {
-            id: 'simpleAlignment',
-            type: 'alignment',
-            name: 'Alignments',
-            active: true,
-            isFullscreen: false,
-          },
-        ]];
+        const referenceTrack = buildReferenceTrack(sequenceData, alignmentFiles[0].alignment[0]);
+        const otherTracks = await Promise.all(alignmentFiles.map(async (aln) => {
+          const fileContent = await getTeselaJsonFromBase64(sessionStorage.getItem(`verification-${id}-${aln.file_name}`), aln.file_name);
+          return buildAlignmentTrack(fileContent, aln);
+        }));
+        const alignmentConfig = buildAlignmentConfig(id, sequenceData, [referenceTrack, ...otherTracks]);
+        addAlignment(store, alignmentConfig);
+        panelsShown = updatePanelsShownWithAlignment(panelsShown);
       }
       sequenceData.primers = sequenceData.primers.concat([...pcrPrimers]);
       updateEditor(store, editorName, { sequenceData, selectionLayer, panelsShown, sequenceDataHistory: {} });

package/src/hooks/useUrlParamsLoader.js

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { cloningActions } from '@opencloning/store/cloning';
 import useDatabase from './useDatabase';
 import useLoadDatabaseFile from './useLoadDatabaseFile';
-import useAlerts from './useAlerts';
+import useCloningAlerts from './useCloningAlerts';
 import useHttpClient from './useHttpClient';
 import useValidateState from './useValidateState';
 import { formatSequenceLocationString, getUrlParameters } from '@opencloning/utils/other';
@@ -18,7 +18,7 @@ const { setState: setCloningState, updateSource } = cloningActions;
 export default function useUrlParamsLoader() {
   const dispatch = useDispatch();
   const database = useDatabase();
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const setHistoryFileError = (e) => addAlert({ message: e, severity: 'error' });
   const { loadDatabaseFile } = useLoadDatabaseFile({ source: { id: 1 }, sendPostRequest: null, setHistoryFileError });
   const validateState = useValidateState();