@opencloning/ui 1.7.3 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # @opencloning/ui
 
+## 1.8.1
+
+### Patch Changes
+
+- [#699](https://github.com/OpenCloning/OpenCloning_frontend/pull/699) [`8e841bd`](https://github.com/OpenCloning/OpenCloning_frontend/commit/8e841bdee4797df61bcf8d1972e3c3581d24fbfb) Thanks [@manulera](https://github.com/manulera)! - Improve snapgene warning
+
+- Updated dependencies []:
+  - @opencloning/store@1.8.1
+  - @opencloning/utils@1.8.1
+
+## 1.8.0
+
+### Minor Changes
+
+- [#694](https://github.com/OpenCloning/OpenCloning_frontend/pull/694) [`2ff9010`](https://github.com/OpenCloning/OpenCloning_frontend/commit/2ff90103c1d9e8e984533e51ecf4dc7978756a57) Thanks [@manulera](https://github.com/manulera)! - \* Rename `useAlerts` to `useCloningAlerts`, separate alerts in cloning and opencloningdb apps.
+  - Add `react-query` to avoid managing requests with `useState`/`useEffect`. Going forward, prefer `useMutation` or `useQuery` over manual `useState`/`useEffect` patterns, we will replace them over time.
+  - Prevent importing the same primer from the database twice (remove it from options in `PrimerDatabaseImportForm`).
+  - Add `Imported from unknown database` option in `FinishedSource` component, not to fail when `DatabaseSource` is present, but no database is set up.
+  - Improve placement of app alerts to be within the `OpenCloning` component, not app-wide.
+  - Fix hiding ancestors.
+  - Add standalone `SequenceViewer` component.
+  - Refactor alignment functionality into a separate hook for better reusability into `useSequencingAlignment.js`.
+  - Add support for loading
+
+### Patch Changes
+
+- Updated dependencies [[`2ff9010`](https://github.com/OpenCloning/OpenCloning_frontend/commit/2ff90103c1d9e8e984533e51ecf4dc7978756a57), [`2ff9010`](https://github.com/OpenCloning/OpenCloning_frontend/commit/2ff90103c1d9e8e984533e51ecf4dc7978756a57)]:
+  - @opencloning/store@1.8.0
+  - @opencloning/utils@1.8.0
+
+## 1.7.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.7.8
+  - @opencloning/utils@1.7.8
+
+## 1.7.7
+
+### Patch Changes
+
+- [#689](https://github.com/manulera/OpenCloning_frontend/pull/689) [`c5d9309`](https://github.com/manulera/OpenCloning_frontend/commit/c5d93099583fdfafafd40e9924d2216b596e0cec) Thanks [@manulera](https://github.com/manulera)! - Added experimental feature for domestication that relies on API calls to goldenbraidpro
+
+- Updated dependencies [[`c5d9309`](https://github.com/manulera/OpenCloning_frontend/commit/c5d93099583fdfafafd40e9924d2216b596e0cec)]:
+  - @opencloning/utils@1.7.7
+  - @opencloning/store@1.7.7
+
+## 1.7.6
+
+### Patch Changes
+
+- [#686](https://github.com/manulera/OpenCloning_frontend/pull/686) [`c81b179`](https://github.com/manulera/OpenCloning_frontend/commit/c81b179b4fece50271ea214cab1f8a356e36811f) Thanks [@manulera](https://github.com/manulera)! - useBackendAPI now shows x-warning messages when the backend returns a failed request with that header. This is used and tested for partial restriction-ligation.
+
+- [#686](https://github.com/manulera/OpenCloning_frontend/pull/686) [`c81b179`](https://github.com/manulera/OpenCloning_frontend/commit/c81b179b4fece50271ea214cab1f8a356e36811f) Thanks [@manulera](https://github.com/manulera)! - Fix MultipleOutputsSelector to reset to position 0 when sources change. This was giving an error before when number of sources chaged if the position was higher than the length of the new source array, as it was trying to index the array beyond its length.
+
+- Updated dependencies []:
+  - @opencloning/store@1.7.6
+  - @opencloning/utils@1.7.6
+
+## 1.7.5
+
+### Patch Changes
+
+- [#684](https://github.com/manulera/OpenCloning_frontend/pull/684) [`034c738`](https://github.com/manulera/OpenCloning_frontend/commit/034c73840dc183b6b3584365c1db899d2f0c548b) Thanks [@manulera](https://github.com/manulera)! - Allow recombinase genome setting
+
+- Updated dependencies [[`034c738`](https://github.com/manulera/OpenCloning_frontend/commit/034c73840dc183b6b3584365c1db899d2f0c548b)]:
+  - @opencloning/store@1.7.5
+  - @opencloning/utils@1.7.5
+
+## 1.7.4
+
+### Patch Changes
+
+- [#682](https://github.com/manulera/OpenCloning_frontend/pull/682) [`04703a9`](https://github.com/manulera/OpenCloning_frontend/commit/04703a9269a5d4cc4bdde478c1ec61e5c73b0d2a) Thanks [@manulera](https://github.com/manulera)! - Fix bug when copying pcr products
+
+- Updated dependencies [[`04703a9`](https://github.com/manulera/OpenCloning_frontend/commit/04703a9269a5d4cc4bdde478c1ec61e5c73b0d2a)]:
+  - @opencloning/utils@1.7.4
+  - @opencloning/store@1.7.4
+
 ## 1.7.3
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@opencloning/ui",
-  "version": "1.7.3",
+  "version": "1.8.1",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -17,32 +17,38 @@
     "./components/form/RetryAlert": "./src/components/form/RetryAlert.jsx",
     "./components/form/RequestStatusWrapper": "./src/components/form/RequestStatusWrapper.jsx",
     "./components/form/PostRequestSelect": "./src/components/form/PostRequestSelect.jsx",
+    "./components/verification": "./src/components/verification/index.js",
     "./providers/ConfigProvider": "./src/providers/index.js",
     "./providers/DatabaseContext": "./src/providers/DatabaseContext.jsx",
     "./hooks": "./src/hooks/index.js",
+    "./hooks/useLoadDatabaseFile": "./src/hooks/useLoadDatabaseFile.js",
+    "./hooks/useAlerts": "./src/hooks/useAlerts.js",
+    "./hooks/useCloningAlerts": "./src/hooks/useCloningAlerts.js",
+    "./hooks/useSequencingAlignment": "./src/hooks/useSequencingAlignment.js",
+    "./components/SequenceViewer": "./src/components/SequenceViewer.jsx",
     "./standalone": "./src/StandAloneOpenCloning.js"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/manulera/OpenCloning_frontend.git",
+    "url": "https://github.com/OpenCloning/OpenCloning_frontend.git",
     "directory": "packages/ui"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^5.15.17",
-    "@mui/material": "^5.15.17",
-    "@mui/x-data-grid": "^8.25.0",
-    "@opencloning/store": "1.7.3",
-    "@opencloning/utils": "1.7.3",
-    "@teselagen/bio-parsers": "^0.4.34",
-    "@teselagen/ove": "^0.8.34",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/material": "^5.18.0",
+    "@mui/x-data-grid": "^8.28.5",
+    "@opencloning/store": "1.8.1",
+    "@opencloning/utils": "1.8.1",
+    "@teselagen/bio-parsers": "^0.4.38",
+    "@teselagen/ove": "^0.8.42",
     "@teselagen/range-utils": "^0.3.20",
     "@teselagen/sequence-utils": "^0.3.42",
-    "@zip.js/zip.js": "^2.7.62",
-    "axios": "^1.12.2",
-    "lodash-es": "^4.17.23",
-    "react-draggable": "^4.4.6"
+    "@zip.js/zip.js": "^2.8.26",
+    "axios": "^1.16.0",
+    "lodash-es": "^4.18.1",
+    "react-draggable": "^4.5.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/AppAlerts.jsx

@@ -2,16 +2,16 @@ import { Alert } from '@mui/material';
 import { isEqual } from 'lodash-es';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import useAlerts from '../hooks/useAlerts';
 import ExternalServicesStatusCheck from './ExternalServicesStatusCheck';
 
-function AppAlerts() {
-  const { alerts } = useSelector((state) => state.cloning, isEqual);
-  const { removeAlert } = useAlerts();
+function AppAlerts( { reducerName, removeAlert } ) {
+  const { alerts } = useSelector((state) => state[reducerName], isEqual);
   return (
-    <div id="global-error-message-wrapper">
-      {alerts.map((alert, index) => (<Alert key={index} severity={alert.severity} onClose={() => { removeAlert(alert.message); }}>{alert.message}</Alert>))}
-      <ExternalServicesStatusCheck />
+    <div className="app-alerts-container" style={{ position: 'absolute' }}>
+      <div id="global-error-message-wrapper">
+        {alerts.map((alert, index) => (<Alert key={index} severity={alert.severity} onClose={() => { removeAlert(alert.message); }}>{alert.message}</Alert>))}
+        <ExternalServicesStatusCheck />
+      </div>
     </div>
   );
 }

package/src/components/CloningHistory.jsx

@@ -5,6 +5,7 @@ import { getSortedSourceIds } from '@opencloning/utils/network';
 import NetWorkNode from './NetworkNode';
 import NewSourceBox from './sources/NewSourceBox';
 import DragAndDropCloningHistoryWrapper from './DragAndDropCloningHistoryWrapper';
+import CloningSpeedDial from './CloningSpeedDial';
 
 function CloningHistory() {
   const startingSourceIds = useSelector(
@@ -19,6 +20,7 @@ function CloningHistory() {
   );
   return (
     <DragAndDropCloningHistoryWrapper>
+      <CloningSpeedDial />
       <div className="tf-tree tf-ancestor-tree">
         <div>
           <ul>

package/src/components/CloningSpeedDial.jsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { Box, SpeedDial, SpeedDialAction } from '@mui/material'
+import { Build as BuildIcon, Sync as SyncIcon } from '@mui/icons-material'
+import useDatabase from '../hooks/useDatabase';
+import { useDispatch, useStore } from 'react-redux';
+import { getSequencesNotInDatabase } from '@opencloning/utils/network';
+import { cloningActions } from '@opencloning/store/cloning';
+import useCloningAlerts from '../hooks/useCloningAlerts';
+import { cloneDeep } from 'lodash-es';
+import useBackendRoute from '../hooks/useBackendRoute';
+import useHttpClient from '../hooks/useHttpClient';
+
+const { setState: setCloningState } = cloningActions;
+
+
+function useLocateSequencesInDatabaseAction() {
+  const database = useDatabase();
+  const store = useStore();
+  const dispatch = useDispatch();
+  const backendRoute = useBackendRoute();
+  const httpClient = useHttpClient();
+  const url = backendRoute('normalize_cloning_strategy');
+
+  const { addAlert } = useCloningAlerts();
+  const main = React.useCallback(async () => {
+    const { sequences: seqState, sources: srcState, primers, description } = store.getState().cloning;
+    let sequences = cloneDeep(seqState);
+    let sources = cloneDeep(srcState);
+
+    const sequencesNotInDb = getSequencesNotInDatabase(sources, sequences);
+    if (sequencesNotInDb.length === 0) {
+      addAlert({
+        message: 'All sequences are already in the database',
+        severity: 'success',
+      });
+      return;
+    }
+    const promises = sequencesNotInDb.map((sequence) => database.locateSequenceInDatabase(sequence));
+    const results = await Promise.all(promises);
+    if (!results.some((result) => result.length > 0)) {
+      addAlert({
+        message: 'No sequences located in database',
+        severity: 'success',
+      });
+      return;
+    }
+
+    for (let i = 0; i < results.length; i++) {
+      if (results[i].length === 0) {
+        continue;
+      }
+      const localId = sequencesNotInDb[i].id;
+      const newSequence = { ...results[i][0].sequence, id: localId };
+      const newSource = { type: 'DatabaseSource', database_id: results[i][0].sequence_ref.id, input: [], id: localId };
+      sources = sources.map((s) => s.id === localId ? newSource : s);
+      sequences = sequences.map((s) => s.id === localId ? newSequence : s);
+      addAlert({
+        message: `Sequence ${localId} located in database`,
+        severity: 'success',
+      });
+    }
+    const { data: newCloningStrategy } = await httpClient.post(url, { sequences, sources, primers, description });
+    dispatch(setCloningState(newCloningStrategy));
+
+    // while (handledSequenceIds.size < sequences.length || iter < sequences.length) {
+    //   iter++;
+    //   const sequenceIdsThatAreInput = new Set(getSequenceIdsThatAreInput(sources));
+
+    //   if (!sequenceIdsThatAreInput.includes(sequence.id)) {
+    //     const newSource = {
+    //       input: [],
+    //       type: 'DatabaseSource',
+    //       database_id: result[0].sequence_ref.id,
+    //     };
+    //     const newSequence = result[0].sequence
+    //     batch(() => {
+    //       dispatch(deleteSourceAndItsChildren(sequence.id));
+    //       dispatch(addSourceAndItsOutputSequence({ source: newSource, sequence: newSequence }));
+    //     });
+    //   }
+    //   console.log(result);
+    // }
+  }, [database, store, dispatch, addAlert, httpClient, url]);
+  return main;
+}
+function CloningSpeedDial() {
+  const database = useDatabase();
+  const locateSequencesInDatabaseAction = useLocateSequencesInDatabaseAction();
+  if (!database || !database.locateSequenceInDatabase) return null;
+  return (
+    // <Box sx={{ position: 'absolute', bottom: 0, right: 0 }}>
+    <Box sx={{ position: 'fixed', bottom: 10, left: 10, zIndex: 1000 }} data-testid="cloning-speed-dial">
+      <SpeedDial icon={<BuildIcon />} ariaLabel="Cloning tools" direction="up" >
+        { database && Boolean(database.locateSequenceInDatabase) && <SpeedDialAction icon={<SyncIcon />} tooltipTitle="Synchronize sequences with database" onClick={locateSequencesInDatabaseAction} /> }
+      </SpeedDial>
+
+    </Box>
+  // </Box>
+  )
+}
+
+export default CloningSpeedDial

package/src/components/DownloadCloningStrategyDialog.jsx

@@ -2,7 +2,7 @@ import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl,
 import React from 'react';
 import { useSelector, useStore } from 'react-redux';
 import { downloadStateAsJson, downloadStateAsZip } from '@opencloning/utils/readNwrite';
-import useAlerts from '../hooks/useAlerts';
+import useCloningAlerts from '../hooks/useCloningAlerts';
 
 
 function DownloadCloningStrategyDialog({ open, setOpen }) {
@@ -11,7 +11,7 @@ function DownloadCloningStrategyDialog({ open, setOpen }) {
   const hasVerificationFiles = useSelector(({ cloning }) => cloning.files.length > 0);
 
   const store = useStore();
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
 
   return (
     <Dialog

package/src/components/LoadCloningHistoryWrapper.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { batch, useDispatch, useStore } from 'react-redux';
-import useAlerts from '../hooks/useAlerts';
+import useCloningAlerts from '../hooks/useCloningAlerts';
 import useBackendRoute from '../hooks/useBackendRoute';
 import useValidateState from '../hooks/useValidateState';
 import { cloningActions } from '@opencloning/store/cloning';
@@ -59,7 +59,7 @@ async function processSequenceFiles(files, backendRoute, httpClient) {
 }
 
 function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const dispatch = useDispatch();
   const backendRoute = useBackendRoute();
   const store = useStore();

package/src/components/MainSequenceEditor.jsx

@@ -4,11 +4,13 @@ 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 useCloningAlerts from '../hooks/useCloningAlerts';
 import { Alert, Button } from '@mui/material';
 import { useSelector } from 'react-redux';
 import useUpdateAnnotationInMainSequence from './annotation/useUpdateAnnotationInMainSequence';
 import useStoreEditor from '../hooks/useStoreEditor';
+import DomesticateDialog from './domesticate/DomesticateDialog';
+import AnnotationChangedAlert from './annotation/AnnotationChangedAlert';
 
 const { setMainSequenceSelection, addPrimer } = cloningActions;
 
@@ -41,23 +43,9 @@ function primerRightClickedOverride(items, { annotation }, props) {
   ];
 }
 
-function featureRightClickedOverride(items, { annotation }, props) {
-  return [
-    ...regionRightClickedOverride(items, { annotation }, props),
-    "--",
-    "editFeature",
-    "deleteFeature",
-    "showRemoveDuplicatesDialogFeatures",
-    "--",
-    "toggleCdsFeatureTranslations",
-    "viewFeatureProperties",
-  ];
-}
-
-
 function MainSequenceEditor() {
   const dispatch = useDispatch();
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const { updateStoreEditor } = useStoreEditor();
   const updateAnnotationInMainSequence = useUpdateAnnotationInMainSequence();
 
@@ -67,7 +55,7 @@ function MainSequenceEditor() {
       if (!history) return false;
       const sequenceId = state.VectorEditor.mainEditor?.sequenceData?.id;
       if (sequenceId === 'opencloning_primer_design_product') return false;
-      return state.cloning.mainSequenceId && Object.keys(history).length > 0 && history.future.length === 0;
+      return state.cloning.mainSequenceId && Object.keys(history).length > 0 && history.past.length !== 0;
     }
   );
 
@@ -76,6 +64,30 @@ function MainSequenceEditor() {
   const mainSequenceId = useSelector((state) => state.cloning.mainSequenceId);
   const topDivRef = React.useRef(null);
 
+  const [domesticateDialogOpen, setDomesticateDialogOpen] = React.useState(false);
+  const [domesticateContext, setDomesticateContext] = React.useState(null);
+
+  const featureRightClickedOverride = React.useCallback((items, { annotation }, props) => {
+    return [
+      ...regionRightClickedOverride(items, { annotation }, props),
+      "--",
+      "editFeature",
+      "deleteFeature",
+      "showRemoveDuplicatesDialogFeatures",
+      "--",
+      "toggleCdsFeatureTranslations",
+      "viewFeatureProperties",
+      "--",
+      {
+        text: 'Domesticate (experimental)',
+        onClick: () => {
+          setDomesticateContext({ sequenceData: props.sequenceData, annotation });
+          setDomesticateDialogOpen(true);
+        },
+      },
+    ];
+  }, []);
+
   React.useEffect(() => {
     if (annotationChanged) {
       setTimeout(() => {
@@ -142,25 +154,20 @@ function MainSequenceEditor() {
   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>
+      <AnnotationChangedAlert onSave={updateAnnotationInMainSequence} onCancel={onAnnotationCancel} />
       }
       <Editor {...{ editorName, ...defaultMainEditorProps, ...extraProp, height: '800' }} />
+      {domesticateDialogOpen && 
+        <DomesticateDialog
+          open={domesticateDialogOpen}
+          onClose={() => {
+            setDomesticateDialogOpen(false);
+            setDomesticateContext(null);
+          }}
+          initialContext={domesticateContext}
+          mainSequenceId={mainSequenceId}
+        />
+      }
     </div>
   );
 }

package/src/components/NetworkNode.jsx

@@ -17,9 +17,7 @@ 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)));
+function SequenceContent({ sequenceId, sequenceIsTemplate, isSavedToDatabase }) {
   return (
     <span className="tf-nc" style={{ borderColor: isSavedToDatabase ? 'green' : 'default' }}>
       <span className="node-text">
@@ -35,15 +33,18 @@ const SequenceContent = React.memo(({ sequenceId, sequenceIsTemplate }) => {
       </span>
     </span>
   );
-});
+};
+
+const MemoizedSequenceContent = React.memo(SequenceContent);
 
-function SequenceWrapper({ children, sequenceId, sequenceIsTemplate }) {
+function SequenceWrapper({ children, sequenceId, sequenceIsTemplate, isSavedToDatabase }) {
   if (sequenceId === null) {
     return children;
   }
+  const className = 'sequence-node' + (isSavedToDatabase ? ' in-database' : '');
   return (
-    <li key={sequenceId} id={`sequence-${sequenceId}`} className="sequence-node">
-      <SequenceContent {...{ sequenceId, sequenceIsTemplate }} />
+    <li key={sequenceId} id={`sequence-${sequenceId}`} className={className}>
+      <MemoizedSequenceContent {...{ sequenceId, sequenceIsTemplate, isSavedToDatabase }} />
       <ul>
         {children}
       </ul>
@@ -94,15 +95,16 @@ function NetWorkNode({ sourceId }) {
     if (tooltipRef.current) {
       tooltipRef.current.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
     }
-  }, [ancestorsHidden, sourceId, sequenceId]);
+  }, [ancestorsHidden, sourceId, sequenceId, dispatch]);
 
   const Icon = ancestorsHidden ? VisibilityIcon : VisibilityOffIcon;
   const visibilityIconToolTip = ancestorsHidden ? 'Show ancestors' : 'Hide ancestors';
   const isSavedToDatabase = database && hasDatabaseId;
+  const className = 'source-node' + (isSavedToDatabase ? ' in-database' : '');
 
   return (
-    <SequenceWrapper {...{ sequenceId, sequenceIsTemplate }}>
-      <li id={`source-${sourceId}`} className={`source-node ${ancestorsHidden ? 'hidden-ancestors' : ''}`}>
+    <SequenceWrapper {...{ sequenceId, sequenceIsTemplate, isSavedToDatabase }}>
+      <li id={`source-${sourceId}`} className={className} style={{ marginBottom: ancestorsHidden ? '30px' : undefined }}>
         <Box component="span" className="tf-nc" style={{ borderColor: isSavedToDatabase ? 'green' : 'default' }}>
           <span className="node-text">
             <SourceBox {...{ sourceId }}>
@@ -116,36 +118,36 @@ function NetWorkNode({ sourceId }) {
               {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>
+              <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>
+              <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>
+          <ul style={ancestorsHidden ? { visibility: 'hidden', height: 0, overflow: 'hidden' } : undefined}>
+            {parentSourceIds.map((id) => (
+              <MemoizedNetWorkNode sourceId={id} key={`node-${id}`} />
+            ))}
+          </ul>
         )}
       </li>
     </SequenceWrapper>

package/src/components/OpenCloning.jsx

@@ -1,7 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Tabs } from '@mui/material';
-import { isEqual } from 'lodash-es';
 import DescriptionEditor from './DescriptionEditor';
 import PrimerList from './primers/PrimerList';
 import SettingsTab from './settings/SettingsTab';
@@ -14,6 +13,7 @@ import SequenceTab from './SequenceTab';
 import AppAlerts from './AppAlerts';
 import Assembler from './assembler/Assembler';
 import { useConfig } from '../hooks/useConfig';
+import useCloningAlerts from '../hooks/useCloningAlerts';
 
 const { setCurrentTab } = cloningActions;
 
@@ -23,6 +23,7 @@ function OpenCloning() {
   const tabPanelsRef = useRef(null);
   const [smallDevice, setSmallDevice] = useState(window.innerWidth < 600);
   const { showAppBar: hasAppBar, enableAssembler } = useConfig();
+  const { removeAlert } = useCloningAlerts();
 
   React.useEffect(() => {
     const handleResize = () => {
@@ -44,7 +45,6 @@ function OpenCloning() {
 
   return (
     <div className="app-container" style={{ height: hasAppBar ? 'calc(100vh - 114px - 10px)' : '100vh' }}>
-      <AppAlerts />
       <Tabs
         variant={smallDevice ? 'scrollable' : 'standard'}
         scrollButtons={smallDevice ? 'auto' : false}
@@ -52,7 +52,7 @@ function OpenCloning() {
         centered={!smallDevice}
         value={currentTab}
         onChange={changeTab}
-        sx={{ pb: 3, pt: 1 }}
+        sx={{ pb: 2, pt: 1 }}
         id="opencloning-app-tabs"
       >
         <CustomTab label="Cloning" index={0} />
@@ -64,6 +64,7 @@ function OpenCloning() {
         {enableAssembler && <CustomTab label="Assembler" index={6} />}
       </Tabs>
       <div className="tab-panels-container" ref={tabPanelsRef}>
+        <AppAlerts reducerName="cloning" removeAlert={removeAlert} />
         <TabPanel index={1} value={currentTab} className="primer-tab-pannel">
           <div className="primer-list-container">
             <PrimerList />

package/src/components/SequenceViewer.cy.jsx

@@ -0,0 +1,27 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import SequenceViewer from './SequenceViewer';
+import { convertToTeselaJson } from '@opencloning/utils/readNwrite';
+
+describe('<SequenceViewer /> fullscreen', () => {
+  it('opens and closes fullscreen', () => {
+    cy.readFile('cypress/test_files/sequencing/locus.gb', 'utf8').then((fileContent) => {
+      const sequenceModel = { id: 'locus-1', file_content: fileContent };
+      const sequenceData = convertToTeselaJson(sequenceModel);
+
+      cy.mount(<SequenceViewer sequenceData={sequenceData} alignmentData={null} />);
+
+      cy.contains('2026 bps').should('be.visible');
+      cy.get('[aria-label="Fullscreen"]').should('be.visible').click();
+
+      cy.get('[aria-label="Exit fullscreen"]').should('be.visible');
+      cy.get('[aria-label="Fullscreen"]').should('not.exist');
+
+      cy.get('[aria-label="Exit fullscreen"]').click();
+
+      cy.get('[aria-label="Exit fullscreen"]').should('not.exist');
+      cy.get('[aria-label="Fullscreen"]').should('be.visible');
+    });
+  });
+});
+