@opencloning/ui 1.7.2 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,95 @@
 # @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
+
+- [#677](https://github.com/manulera/OpenCloning_frontend/pull/677) [`04827d6`](https://github.com/manulera/OpenCloning_frontend/commit/04827d6184c5a1276814f60ef3c3fee2c832a6fd) Thanks [@manulera](https://github.com/manulera)! - Now loads history from Snapgene files
+
+- Updated dependencies []:
+  - @opencloning/store@1.7.3
+  - @opencloning/utils@1.7.3
+
 ## 1.7.2
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@opencloning/ui",
-  "version": "1.7.2",
+  "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.2",
-    "@opencloning/utils": "1.7.2",
-    "@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';
@@ -10,6 +10,7 @@ import HistoryLoadedDialog from './HistoryLoadedDialog';
 import useHttpClient from '../hooks/useHttpClient';
 import { getVerificationFileName } from '@opencloning/utils/readNwrite';
 import { isEqual } from 'lodash-es';
+import useSnapgeneHistoryEndpoint from '../hooks/useSnapgeneHistoryEndpoint';
 
 const { setState: setCloningState, deleteSourceAndItsChildren, addSourceAndItsOutputSequence } = cloningActions;
 
@@ -58,13 +59,13 @@ 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();
   const validateState = useValidateState();
   const httpClient = useHttpClient();
-
+  const { loadSnapgeneHistory } = useSnapgeneHistoryEndpoint();
   const [fileLoaderFunctions, setFileLoaderFunctions] = React.useState(null);
 
   React.useEffect(() => {
@@ -124,34 +125,40 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
         }
         // If there are sequences in the cloning state, give the option to merge or replace
 
+        return;
         // 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',
         });
+        return;
         // 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',
-          });
+      } else if (files.length === 1 && files[0].name.endsWith('.dna')) {
+        const success = await loadSnapgeneHistory(files[0]);
+        if (success) {
+          return;
         }
       }
+      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]);

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>