@opencloning/ui 1.7.2 → 1.8.1

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();

package/src/hooks/useValidateState.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import useAlerts from './useAlerts';
+import useCloningAlerts from './useCloningAlerts';
 import useBackendRoute from './useBackendRoute';
 import useHttpClient from './useHttpClient';
 
 export default function useValidateState() {
   const backendRoute = useBackendRoute();
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const httpClient = useHttpClient();
 
   const validateState = React.useCallback(async (newState) => {
@@ -37,7 +37,7 @@ export default function useValidateState() {
       }
       return newState;
     }
-  }, [addAlert, backendRoute]);
+  }, [addAlert, backendRoute, httpClient]);
 
   return validateState;
 }

package/src/index.css

@@ -7,15 +7,6 @@ button {
     border-color: rgb(25, 118, 210);
 }
 
-ul.hidden-ancestors {
-    display: none;
-}
-
-/* So that the eye icon is visible */
-li.hidden-ancestors {
-    margin-bottom: 30px;
-}
-
 .app-container {
     display: flex;
     flex-direction: column;
@@ -288,14 +279,15 @@ div.MuiPaper-root[role=alert] {
 }
 
 div#global-error-message-wrapper {
-    position: fixed;
+    position: relative;
     top: 0;
     z-index: 999;
     max-width: 25em;
 }
 
 div#global-error-message-wrapper > div {
-    margin: 10px;
+    margin-left: 10px;
+    margin-bottom: 10px;
     /* Allow line breaks in very long strings only when necessary */
     word-break: break-word;
 }

package/src/version.js

@@ -1,2 +1,2 @@
 // Version placeholder - replaced at publish time via prepack script
-export const version = "1.7.2";
+export const version = "1.8.1";