@opencloning/ui 1.9.1 → 1.9.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @opencloning/ui
 
+## 1.9.2
+
+### Patch Changes
+
+- [#734](https://github.com/OpenCloning/OpenCloning_frontend/pull/734) [`06bb1a5`](https://github.com/OpenCloning/OpenCloning_frontend/commit/06bb1a513519f598e9ec3b5eec73544e2ed3958e) Thanks [@manulera](https://github.com/manulera)! - Add duplicate feature option to the database sequence viewer
+
+- [#736](https://github.com/OpenCloning/OpenCloning_frontend/pull/736) [`bc045f9`](https://github.com/OpenCloning/OpenCloning_frontend/commit/bc045f9e74b4d5b84250dcb5a77b93de99e4d684) Thanks [@manulera](https://github.com/manulera)! - \* Unify load paths under single hook
+  - Remove warnings when adding db files to design tab
+- Updated dependencies [[`bc045f9`](https://github.com/OpenCloning/OpenCloning_frontend/commit/bc045f9e74b4d5b84250dcb5a77b93de99e4d684)]:
+  - @opencloning/store@1.9.2
+  - @opencloning/utils@1.9.2
+
 ## 1.9.1
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@opencloning/ui",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -25,6 +25,8 @@
     "./hooks/useAlerts": "./src/hooks/useAlerts.js",
     "./hooks/useCloningAlerts": "./src/hooks/useCloningAlerts.js",
     "./hooks/useSequencingAlignment": "./src/hooks/useSequencingAlignment.js",
+    "./hooks/useBackendRoute": "./src/hooks/useBackendRoute.js",
+    "./hooks/useHttpClient": "./src/hooks/useHttpClient.js",
     "./components/SequenceViewer": "./src/components/SequenceViewer.jsx",
     "./standalone": "./src/StandAloneOpenCloning.js"
   },
@@ -39,8 +41,8 @@
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
     "@mui/x-data-grid": "^8.28.5",
-    "@opencloning/store": "1.9.1",
-    "@opencloning/utils": "1.9.1",
+    "@opencloning/store": "1.9.2",
+    "@opencloning/utils": "1.9.2",
     "@teselagen/bio-parsers": "^0.4.38",
     "@teselagen/ove": "^0.8.42",
     "@teselagen/range-utils": "^0.3.20",

package/src/components/LoadCloningHistoryWrapper.jsx

@@ -2,17 +2,13 @@ import React from 'react';
 import { batch, useDispatch, useStore } from 'react-redux';
 import useCloningAlerts from '../hooks/useCloningAlerts';
 import useBackendRoute from '../hooks/useBackendRoute';
-import useValidateState from '../hooks/useValidateState';
+import useCloningHistoryLoader from '../hooks/useCloningHistoryLoader';
+import { getEmptyPlaceholderSource } from '@opencloning/store/cloning_utils';
 import { cloningActions } from '@opencloning/store/cloning';
-import { mergeStates } from '@opencloning/utils/network';
-import { loadFilesToSessionStorage, loadHistoryFile, updateVerificationFileNames } from '@opencloning/utils/readNwrite';
 import HistoryLoadedDialog from './HistoryLoadedDialog';
 import useHttpClient from '../hooks/useHttpClient';
-import { getVerificationFileName } from '@opencloning/utils/readNwrite';
-import { isEqual } from 'lodash-es';
-import useSnapgeneHistoryEndpoint from '../hooks/useSnapgeneHistoryEndpoint';
 
-const { setState: setCloningState, deleteSourceAndItsChildren, addSourceAndItsOutputSequence } = cloningActions;
+const { deleteSourceAndItsChildren, addSourceAndItsOutputSequence } = cloningActions;
 
 async function processSequenceFiles(files, backendRoute, httpClient) {
   const allSources = [];
@@ -63,9 +59,8 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
   const dispatch = useDispatch();
   const backendRoute = useBackendRoute();
   const store = useStore();
-  const validateState = useValidateState();
   const httpClient = useHttpClient();
-  const { loadSnapgeneHistory } = useSnapgeneHistoryEndpoint();
+  const { loadHistoryFromFile, loadSnapgeneHistory } = useCloningHistoryLoader();
   const [fileLoaderFunctions, setFileLoaderFunctions] = React.useState(null);
 
   React.useEffect(() => {
@@ -81,34 +76,11 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
       const isJsonFile = files.length === 1 && files[0].name.endsWith('.json');
       // If the file is a zip or json file, load the history file
       if (isZipFile || isJsonFile) {
-        let cloningStrategy;
-        let verificationFiles;
-        try {
-          ({ cloningStrategy, verificationFiles } = await loadHistoryFile(files[0]));
-        } catch (e) {
-          console.error(e);
-          addAlert({ message: e.message, severity: 'error' });
+        const prepared = await loadHistoryFromFile(files[0]);
+        if (!prepared) {
           return;
         }
 
-        const validatedState = await validateState(cloningStrategy);
-        // Update the verificationFiles names if needed
-        const updatedVerificationFiles = updateVerificationFileNames(verificationFiles, cloningStrategy.files, validatedState.files);
-
-        const updateState = async (newState, idShift) => {
-          dispatch(setCloningState(newState));
-          await loadFilesToSessionStorage(updatedVerificationFiles, idShift);
-        };
-
-        const replaceState = async () => {
-          await updateState(validatedState, 0);
-        };
-
-        const addState = async () => {
-          const { mergedState, idShift } = mergeStates(validatedState, cloningState);
-          await updateState(mergedState, idShift);
-        };
-
         const errorWrapper = (fn) => async () => {
           try {
             await fn();
@@ -117,11 +89,15 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
             addAlert({ message: e.message, severity: 'error' });
           }
         };
-          // If there are no sequences in the cloning state, load the history file
+        // If there are no sequences in the cloning state, load the history file
         if (cloningState.sequences.length === 0) {
-          errorWrapper(replaceState)();
+          errorWrapper(prepared.replace)();
         } else {
-          setFileLoaderFunctions({ addState: errorWrapper(addState), replaceState: errorWrapper(replaceState), clear: () => setFileLoaderFunctions(null) });
+          setFileLoaderFunctions({
+            addState: errorWrapper(prepared.merge),
+            replaceState: errorWrapper(prepared.replace),
+            clear: () => setFileLoaderFunctions(null),
+          });
         }
         // If there are sequences in the cloning state, give the option to merge or replace
 
@@ -144,8 +120,9 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
         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));
+          const emptyPlaceholder = getEmptyPlaceholderSource(cloningState.sources);
+          if (emptyPlaceholder) {
+            dispatch(deleteSourceAndItsChildren(emptyPlaceholder.id));
           }
           for (let i = 0; i < sources.length; i += 1) {
             dispatch(addSourceAndItsOutputSequence({ source: sources[i], sequence: sequences[i] }));

package/src/components/SequenceViewer.jsx

@@ -48,6 +48,18 @@ function featureRightClickedOverride(items, { annotation }, props) {
     "--",
     "editFeature",
     "deleteFeature",
+    {
+      text: "Duplicate Feature",
+      disabled: props.readOnly,
+      onClick: () => {
+        const { id, ...rest } = annotation;
+        props.upsertFeature({
+          ...rest,
+          // omit id → upsertDeleteActionGenerator assigns a new shortid
+          name: annotation.name ? `${annotation.name} (copy)` : undefined,
+        });
+      },
+    },
     "showRemoveDuplicatesDialogFeatures",
     "--",
     "toggleCdsFeatureTranslations",

package/src/components/form/TextFieldQueryValidated.jsx

@@ -10,6 +10,7 @@ import { TextField } from '@mui/material';
  * @param {string} placeholder - Placeholder text
  * @param {Function} getQuery - (value) => ({ queryKey, queryFn, ... }) — returns a query config for the given value (use value in queryKey so each input has its own cache).
  * @param {Function} onChange - Callback when validation succeeds; receives (queryData). Called with null when value is empty or validation fails.
+ * @param {Function} onValidationStateChange - Optional callback with ({ isChecking, isValid, hasValue }) when validation lifecycle changes.
  * @param {string} value - Controlled value (optional)
  * @param {number} debounceDelay - Delay in ms before running the query (default: 500)
  * @param {string} successMessage - Optional message to show when validation succeeds (default: ' ')
@@ -20,6 +21,7 @@ export default function TextFieldQueryValidated({
   placeholder,
   getQuery,
   onChange,
+  onValidationStateChange,
   debounceDelay = 500,
   successMessage = ' ',
   validatingMessage = 'Validating...',
@@ -44,24 +46,40 @@ export default function TextFieldQueryValidated({
     [getQuery, debouncedValue],
   );
 
-  const { data: validationError, isLoading, error, isSuccess } = useQuery({
+  const { data: validationError, isLoading, isFetching, error, isSuccess } = useQuery({
     ...queryConfig,
     enabled: debouncedValue.length > 0 && (queryConfig.enabled !== false),
   });
 
+  const isDebouncing = localValue !== debouncedValue;
+  const isChecking =
+    localValue.length > 0 &&
+    (isDebouncing || (debouncedValue.length > 0 && (isLoading || isFetching)));
+  const isValid =
+    localValue.length > 0 &&
+    localValue === debouncedValue &&
+    isSuccess &&
+    !validationError &&
+    !error;
+
+  const hasValue = localValue.length > 0;
+
+  useEffect(() => {
+    onValidationStateChange?.({ isChecking, isValid, hasValue });
+  }, [isChecking, isValid, hasValue, onValidationStateChange]);
 
   useEffect(() => {
     if (debouncedValue.length === 0) {
       onChange('');
       return;
     }
-    if (isSuccess && !validationError) {
+    if (localValue === debouncedValue && isSuccess && !validationError) {
       onChange(debouncedValue);
     }
     if (error || validationError) {
       onChange('');
     }
-  }, [debouncedValue, isSuccess, validationError, error, onChange]);
+  }, [localValue, debouncedValue, isSuccess, validationError, error, onChange]);
 
   const handleChange = (e) => {
     onChange('');
@@ -69,7 +87,7 @@ export default function TextFieldQueryValidated({
   };
 
   let helperText = ' ';
-  if (isLoading) {
+  if (isChecking) {
     helperText = validatingMessage;
   } else if (validationError) {
     helperText = validationError;

package/src/components/navigation/MainAppBar.jsx

@@ -4,7 +4,7 @@ import { Menu as MenuIcon } from '@mui/icons-material';
 import './MainAppBar.css';
 import { useDispatch } from 'react-redux';
 import ButtonWithMenu from './ButtonWithMenu';
-import { downloadCloningStrategyAsSvg, formatTemplate, loadHistoryFile, loadFilesToSessionStorage } from '@opencloning/utils/readNwrite';
+import { downloadCloningStrategyAsSvg, formatTemplate } from '@opencloning/utils/readNwrite';
 import SelectExampleDialog from './SelectExampleDialog';
 import SelectTemplateDialog from './SelectTemplateDialog';
 import FeedbackDialog from './FeedbackDialog';
@@ -13,11 +13,11 @@ import VersionDialog from './VersionDialog';
 import useCloningAlerts from '../../hooks/useCloningAlerts';
 import DownloadCloningStrategyDialog from '../DownloadCloningStrategyDialog';
 import LoadCloningHistoryWrapper from '../LoadCloningHistoryWrapper';
-import useValidateState from '../../hooks/useValidateState';
+import useCloningHistoryLoader from '../../hooks/useCloningHistoryLoader';
 import GithubCornerRight from './GithubCornerRight';
 import useHttpClient from '../../hooks/useHttpClient';
 
-const { setCurrentTab, setState: setCloningState } = cloningActions;
+const { setCurrentTab } = cloningActions;
 
 function MainAppBar() {
   const [openExampleDialog, setOpenExampleDialog] = React.useState(false);
@@ -32,7 +32,7 @@ function MainAppBar() {
 
   const dispatch = useDispatch();
   const { addAlert } = useCloningAlerts();
-  const validateState = useValidateState();
+  const { applyCloningStrategy, loadHistoryFromFile } = useCloningHistoryLoader();
 
   // Hidden input field, used to load files.
   const fileInputRef = React.useRef(null);
@@ -52,26 +52,30 @@ function MainAppBar() {
     setOpenExampleDialog(false);
     setOpenTemplateDialog(false);
     if (url) {
-      let data;
+      const fileName = url.split('/').pop();
+      let file;
       if (url.endsWith('.zip')) {
-        // For zip files, get as blob and process with loadHistoryFile
         const { data: blob } = await httpClient.get(url, { responseType: 'blob' });
-        const fileName = url.split('/').pop();
-        // eslint-disable-next-line no-undef
-        const file = new File([blob], fileName);
-        const { cloningStrategy, verificationFiles } = await loadHistoryFile(file);
-        data = await validateState(cloningStrategy);
-        await loadFilesToSessionStorage(verificationFiles, 0);
+        file = new File([blob], fileName);
       } else {
-        // For JSON files, get as JSON
-        let { data: jsonData } = await httpClient.get(url);
-        data = await validateState(jsonData);
+        const { data: jsonData } = await httpClient.get(url);
+        file = new File([JSON.stringify(jsonData)], fileName);
       }
+      const prepared = await loadHistoryFromFile(file, {
+        onError: (message) => addAlert({ message, severity: 'error' }),
+      });
+      if (!prepared) {
+        return;
+      }
+      let strategy = prepared.cloningStrategy;
       if (isTemplate) {
-        data = formatTemplate(data, url);
+        strategy = formatTemplate(strategy, url);
       }
-      dispatch(setCloningState(data));
-      dispatch(setCurrentTab(0))
+      await applyCloningStrategy(strategy, {
+        verificationFiles: prepared.verificationFiles,
+        mode: 'replace',
+      });
+      dispatch(setCurrentTab(0));
     }
   };
 

package/src/components/sources/SourceFile.jsx

@@ -1,15 +1,9 @@
 import React from 'react';
 import { FormHelperText, Alert, Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select, TextField } from '@mui/material';
-import { useDispatch, batch, useStore, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import LabelWithTooltip from '../form/LabelWithTooltip';
-import { cloningActions } from '@opencloning/store/cloning';
-import { loadFilesToSessionStorage, loadHistoryFile, updateVerificationFileNames } from '@opencloning/utils/readNwrite';
-import useValidateState from '../../hooks/useValidateState';
-import { mergeStates, getGraftSequenceId, graftState } from '@opencloning/utils/network';
-import useSnapgeneHistoryEndpoint from '../../hooks/useSnapgeneHistoryEndpoint';
-
-const { deleteSourceAndItsChildren, restoreSource, setState: setCloningState } = cloningActions;
+import useCloningHistoryLoader from '../../hooks/useCloningHistoryLoader';
 
 const fileFormatToExtension = {
   genbank: 'gb',
@@ -28,10 +22,7 @@ function SourceFile({ source, requestStatus, sendPostRequest }) {
   const hasOutput = useSelector((state) => state.cloning.sequences.some((s) => s.id === source.id));
   // Error message for json only
   const [alert, setAlert] = React.useState(null);
-  const dispatch = useDispatch();
-  const validateState = useValidateState();
-  const store = useStore();
-  const { loadSnapgeneHistory } = useSnapgeneHistoryEndpoint();
+  const { loadHistoryFromFile, loadSnapgeneHistory } = useCloningHistoryLoader();
   const onChange = async (event) => {
     setAlert(null);
     const files = Array.from(event.target.files);
@@ -39,6 +30,7 @@ function SourceFile({ source, requestStatus, sendPostRequest }) {
       return;
     }
     event.target.value = null;
+    const reportError = (message) => setAlert({ message, severity: 'error' });
     // If the file is a history file, we load it
     if (
       fileFormat === 'json' || fileFormat === 'zip'
@@ -50,54 +42,32 @@ function SourceFile({ source, requestStatus, sendPostRequest }) {
           type: fileFormat === 'json' ? 'application/json' : files[0].type,
         });
       }
-      let cloningStrategy;
-      let verificationFiles;
-      try {
-        ({ cloningStrategy, verificationFiles } = await loadHistoryFile(files[0]));
-      } catch (e) {
-        console.error(e);
-        setAlert({ message: e.message, severity: 'error' });
+
+      const prepared = await loadHistoryFromFile(files[0], { onError: reportError });
+      if (!prepared) {
         return;
       }
 
-      const validatedCloningStrategy = await validateState(cloningStrategy);
-      // Update the verificationFiles names if needed
-      const updatedVerificationFiles = updateVerificationFileNames(verificationFiles, cloningStrategy.files, validatedCloningStrategy.files);
-
-      const canGraft = getGraftSequenceId(validatedCloningStrategy) !== null;
-      const graft = hasOutput && canGraft;
-
-      if (hasOutput && !canGraft) {
+      if (hasOutput && !prepared.canGraft) {
         setAlert({ message: 'Cannot graft cloning strategy as it does not converge on a single sequence, you can load it on a source without outputs', severity: 'error' });
         return;
       }
 
-      batch(async () => {
-        if (!graft) {
-          // Replace the source with the new one
-          dispatch(deleteSourceAndItsChildren(source.id));
-        }
-        try {
-          const cloningState = store.getState().cloning;
-          let mergedState;
-          let idShift;
-          if (graft) {
-            ({ mergedState, idShift } = graftState(validatedCloningStrategy, cloningState, source.id));
-          } else {
-            ({ mergedState, idShift } = mergeStates(validatedCloningStrategy, cloningState));
-          }
-          dispatch(setCloningState(mergedState));
-          await loadFilesToSessionStorage(updatedVerificationFiles, idShift);
-        } catch (e) {
-          setAlert({ message: e.message, severity: 'error' });
-          dispatch(restoreSource({ ...source, type: 'UploadedFileSource' }));
+      const graft = hasOutput && prepared.canGraft;
+      try {
+        const applyOptions = { source, onError: reportError };
+        if (graft) {
+          await prepared.graft(applyOptions);
+        } else {
+          await prepared.merge(applyOptions);
         }
-      });
+      } catch {
+        // Error already reported via onError; state restored in applyCloningStrategy
+      }
       return;
     }
     if (fileFormat === 'snapgene' || (fileFormat === '' && files[0].name.endsWith('.dna'))) {
-      console.log('loading snapgene history');
-      const success = await loadSnapgeneHistory(files[0], source.id);
+      const success = await loadSnapgeneHistory(files[0], { source });
       if (success) {
         return;
       }

package/src/hooks/index.js

@@ -1,2 +1,4 @@
 export { useConfig } from './useConfig.js';
 export { default as useServerStaticFiles, localFilesHttpClient } from './useServerStaticFiles.js';
+export { default as useBackendRoute } from './useBackendRoute.js';
+export { default as useHttpClient } from './useHttpClient.js';

package/src/hooks/useCloningHistoryLoader.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { batch, useDispatch, useStore } from 'react-redux';
+import { cloningActions } from '@opencloning/store/cloning';
+import { getEmptyPlaceholderSource } from '@opencloning/store/cloning_utils';
+import { graftState, getGraftSequenceId, mergeStates } from '@opencloning/utils/network';
+import {
+  loadFilesToSessionStorage,
+  parseHistoryFile,
+  updateVerificationFileNames,
+} from '@opencloning/utils/readNwrite';
+import useBackendRoute from './useBackendRoute';
+import useCloningAlerts from './useCloningAlerts';
+import useHttpClient from './useHttpClient';
+import useValidateState from './useValidateState';
+
+const {
+  setState: setCloningState,
+  deleteSourceAndItsChildren,
+} = cloningActions;
+
+function makeAlertHandler(addAlert, onError, severity = 'error') {
+  return onError || ((message) => addAlert({ message, severity }));
+}
+
+function shouldDeleteSourceBeforeApply(mode, source) {
+  return source != null && mode === 'merge';
+}
+
+export default function useCloningHistoryLoader() {
+  const dispatch = useDispatch();
+  const store = useStore();
+  const validateState = useValidateState();
+  const { addAlert } = useCloningAlerts();
+  const backendRoute = useBackendRoute();
+  const httpClient = useHttpClient();
+  const snapgeneUrl = backendRoute('read_snapgene_history');
+
+  const applyCloningStrategy = React.useCallback(async (cloningStrategy, options = {}) => {
+    const {
+      verificationFiles = [],
+      mode,
+      source = null,
+      onError,
+    } = options;
+
+    const reportError = makeAlertHandler(addAlert, onError);
+    const deleteSourceBeforeApply = shouldDeleteSourceBeforeApply(mode, source);
+    const sourceId = source?.id ?? null;
+
+    const prevState = store.getState().cloning;
+
+    try {
+      if (deleteSourceBeforeApply) {
+        dispatch(deleteSourceAndItsChildren(sourceId));
+      }
+
+      const cloningState = store.getState().cloning;
+      let newState;
+      let idShift = 0;
+
+      if (mode === 'replace') {
+        newState = cloningStrategy;
+      } else if (mode === 'merge') {
+        ({ mergedState: newState, idShift } = mergeStates(cloningStrategy, cloningState));
+      } else if (mode === 'graft') {
+        ({ mergedState: newState, idShift } = graftState(cloningStrategy, cloningState, sourceId));
+      } else {
+        throw new Error(`Unknown apply mode: ${mode}`);
+      }
+
+      batch(() => {
+        dispatch(setCloningState(newState));
+      });
+
+      await loadFilesToSessionStorage(verificationFiles, idShift);
+    } catch (e) {
+      console.error(e);
+      dispatch(setCloningState(prevState));
+      reportError(e.message);
+      throw e;
+    }
+  }, [addAlert, dispatch, store]);
+
+  const loadHistoryFromFile = React.useCallback(async (file, options = {}) => {
+    const { onError } = options;
+    const reportError = makeAlertHandler(addAlert, onError);
+
+    let cloningStrategy;
+    let verificationFiles;
+    try {
+      ({ cloningStrategy, verificationFiles } = await parseHistoryFile(file));
+    } catch (e) {
+      console.error(e);
+      reportError(e.message);
+      return null;
+    }
+
+    const validatedState = await validateState(cloningStrategy);
+    const updatedVerificationFiles = updateVerificationFileNames(
+      verificationFiles,
+      cloningStrategy.files,
+      validatedState.files,
+    );
+    const canGraft = getGraftSequenceId(validatedState) !== null;
+
+    const apply = (applyOptions) => applyCloningStrategy(validatedState, {
+      verificationFiles: updatedVerificationFiles,
+      validate: false,
+      ...applyOptions,
+    });
+
+    return {
+      cloningStrategy: validatedState,
+      verificationFiles: updatedVerificationFiles,
+      canGraft,
+      replace: (applyOptions = {}) => apply({ mode: 'replace', ...applyOptions }),
+      merge: (applyOptions = {}) => apply({ mode: 'merge', ...applyOptions }),
+      graft: (applyOptions = {}) => apply({ mode: 'graft', ...applyOptions }),
+    };
+  }, [addAlert, applyCloningStrategy, validateState]);
+
+  const loadSnapgeneHistory = React.useCallback(async (file, options = {}) => {
+    const { source = null, onError, onWarning } = options;
+    const reportWarning = makeAlertHandler(addAlert, onWarning, 'warning');
+
+    const cloningState = store.getState().cloning;
+    const formData = new FormData();
+    formData.append('file', file);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+
+    try {
+      const resp = await httpClient.post(snapgeneUrl, formData, config);
+      const { data: cloningStrategy } = resp;
+
+      const isEmptyState = getEmptyPlaceholderSource(cloningState.sources) !== null;
+      const mode = isEmptyState ? 'replace' : 'merge';
+
+      if (resp.headers['x-warning']) {
+        reportWarning(`Not all SnapGene history was parsed: ${resp.headers['x-warning']}`);
+      }
+
+      await applyCloningStrategy(cloningStrategy, {
+        mode,
+        source,
+        onError,
+      });
+      return true;
+    } catch {
+      reportWarning('Failed to parse the history from the SnapGene file, will only read the sequence.');
+      return false;
+    }
+  }, [addAlert, applyCloningStrategy, httpClient, snapgeneUrl, store]);
+
+  return {
+    applyCloningStrategy,
+    loadHistoryFromFile,
+    loadSnapgeneHistory,
+  };
+}

package/src/hooks/useLoadDatabaseFile.js

@@ -1,25 +1,22 @@
-import { batch, useDispatch, useStore } from 'react-redux';
 import { jsonToGenbank } from '@teselagen/bio-parsers';
 import useValidateState from './useValidateState';
-import { convertToTeselaJson, loadHistoryFile } from '@opencloning/utils/readNwrite';
+import { convertToTeselaJson, parseHistoryFile } from '@opencloning/utils/readNwrite';
 import { getIdsOfSequencesWithoutChildSource } from '@opencloning/store/cloning_utils';
-import { mergeStates, graftState } from '@opencloning/utils/network';
-import { cloningActions } from '@opencloning/store/cloning';
+import useCloningHistoryLoader from './useCloningHistoryLoader';
 import useDatabase from './useDatabase';
-
-const { deleteSourceAndItsChildren, setState: setCloningState } = cloningActions;
+import { useStore } from 'react-redux';
 
 export default function useLoadDatabaseFile({ source, sendPostRequest, setHistoryFileError }) {
-  const dispatch = useDispatch();
   const validateState = useValidateState();
   const store = useStore();
   const database = useDatabase();
+  const { applyCloningStrategy } = useCloningHistoryLoader();
 
   const loadDatabaseFile = async (file, databaseId, ancestors = false) => {
     if (file.name.endsWith('.json')) {
       let cloningStrategy;
       try {
-        ({ cloningStrategy } = await loadHistoryFile(file));
+        ({ cloningStrategy } = await parseHistoryFile(file));
         // If the cloning strategy should end on a single sequence, set the databaseId for the right source
         const terminalSequences = getIdsOfSequencesWithoutChildSource(cloningStrategy.sources, cloningStrategy.sequences);
         if (terminalSequences.length === 1) {
@@ -29,7 +26,7 @@ export default function useLoadDatabaseFile({ source, sendPostRequest, setHistor
         // When importing sources that had inputs that we don't want to load, we turn them into database sources
         const allSequenceIds = [...cloningStrategy.sequences.map((e) => e.id), ...cloningStrategy.primers.map((e) => e.id)];
         cloningStrategy.sources = cloningStrategy.sources.map((s) => {
-          if (s.input.some(({sequence}) => !allSequenceIds.includes(sequence))) {
+          if (s.input.some(({ sequence }) => !allSequenceIds.includes(sequence))) {
             return { id: s.id, type: 'DatabaseSource', input: [], database_id: s.database_id };
           }
           return s;
@@ -66,7 +63,6 @@ export default function useLoadDatabaseFile({ source, sendPostRequest, setHistor
         setHistoryFileError(e.message);
         return;
       }
-      // This one won't have the source.id deleted
       const prevState = store.getState().cloning;
       const { backendVersion, schemaVersion, frontendVersion } = prevState.appInfo;
       cloningStrategy.backend_version = backendVersion;
@@ -74,28 +70,15 @@ export default function useLoadDatabaseFile({ source, sendPostRequest, setHistor
       cloningStrategy.frontend_version = frontendVersion;
       cloningStrategy = await validateState(cloningStrategy);
 
-      batch(() => {
-        // Replace the source with the new one if called from a source
-        if (!ancestors && source) {
-          dispatch(deleteSourceAndItsChildren(source.id));
-        }
-        const cloningState = store.getState().cloning;
-        try {
-          let mergedState;
-          if (ancestors) {
-            ({ mergedState } = graftState(cloningStrategy, cloningState, source.id));
-          } else {
-            ({ mergedState } = mergeStates(cloningStrategy, cloningState));
-          }
-          dispatch(setCloningState(mergedState));
-        } catch (e) {
-          setHistoryFileError(e.message);
-          console.error(e);
-          if (!ancestors) {
-            dispatch(setCloningState(prevState));
-          }
-        }
-      });
+      try {
+        await applyCloningStrategy(cloningStrategy, {
+          mode: ancestors ? 'graft' : 'merge',
+          source,
+          onError: setHistoryFileError,
+        });
+      } catch {
+        // Error already reported via onError; state restored in applyCloningStrategy when applicable
+      }
     } else {
       const requestData = new FormData();
       requestData.append('file', file);

package/src/hooks/useUrlParamsLoader.js

@@ -6,10 +6,11 @@ import useLoadDatabaseFile from './useLoadDatabaseFile';
 import useCloningAlerts from './useCloningAlerts';
 import useHttpClient from './useHttpClient';
 import useValidateState from './useValidateState';
+import useCloningHistoryLoader from './useCloningHistoryLoader';
 import { formatSequenceLocationString, getUrlParameters } from '@opencloning/utils/other';
-import { formatTemplate, loadHistoryFile, loadFilesToSessionStorage } from '@opencloning/utils/readNwrite';
+import { formatTemplate } from '@opencloning/utils/readNwrite';
 
-const { setState: setCloningState, updateSource } = cloningActions;
+const { updateSource } = cloningActions;
 
 /**
  * Hook to load sequences from URL parameters
@@ -23,6 +24,7 @@ export default function useUrlParamsLoader() {
   const { loadDatabaseFile } = useLoadDatabaseFile({ source: { id: 1 }, sendPostRequest: null, setHistoryFileError });
   const validateState = useValidateState();
   const httpClient = useHttpClient();
+  const { applyCloningStrategy, loadHistoryFromFile } = useCloningHistoryLoader();
 
   useEffect(() => {
     async function loadSequenceFromUrlParams() {
@@ -45,22 +47,24 @@ export default function useUrlParamsLoader() {
       } else if (urlParams.source === 'example' && urlParams.example) {
         try {
           const url = `${import.meta.env.BASE_URL}examples/${urlParams.example}`;
-          let data;
-          if (urlParams.example.endsWith('.zip')) {
-            // For zip files, get as blob and process with loadHistoryFile
-            const { data: blob } = await httpClient.get(url, { responseType: 'blob' });
-            const fileName = urlParams.example;
-            // eslint-disable-next-line no-undef
-            const file = new File([blob], fileName);
-            const { cloningStrategy, verificationFiles } = await loadHistoryFile(file);
-            data = await validateState(cloningStrategy);
-            await loadFilesToSessionStorage(verificationFiles, 0);
+          const fileName = urlParams.example;
+          if (fileName.endsWith('.zip')) {
+            const resp = await httpClient.get(url, { responseType: 'blob' });
+            if (resp.headers['content-type'] !== 'application/zip') {
+              throw new Error('Not found');
+            }
+            const file = new File([resp.data], fileName);
+            const prepared = await loadHistoryFromFile(file, { onError: setHistoryFileError });
+            await prepared?.replace();
           } else {
-            // For JSON files, get as JSON
-            const { data: jsonData } = await httpClient.get(url);
-            data = await validateState(jsonData);
+            const resp = await httpClient.get(url);
+            if (resp.headers['content-type'] !== 'application/json') {
+              throw new Error('Not found');
+            }
+            const file = new File([JSON.stringify(resp.data)], fileName);
+            const prepared = await loadHistoryFromFile(file, { onError: setHistoryFileError });
+            await prepared?.replace();
           }
-          dispatch(setCloningState(data));
         } catch (error) {
           addAlert({
             message: 'Error loading example',
@@ -76,7 +80,7 @@ export default function useUrlParamsLoader() {
           const validatedData = await validateState(data);
           const newState = formatTemplate(validatedData, url);
 
-          dispatch(setCloningState(newState));
+          await applyCloningStrategy(newState, { mode: 'replace' });
         } catch (error) {
           addAlert({
             message: 'Error loading template',
@@ -146,4 +150,3 @@ export default function useUrlParamsLoader() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 }
-

package/src/version.js

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

package/src/hooks/useSnapgeneHistoryEndpoint.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import useBackendRoute from './useBackendRoute';
-import useHttpClient from './useHttpClient';
-import useCloningAlerts from './useCloningAlerts';
-import { batch, useDispatch, useStore } from 'react-redux';
-import { mergeStates } from '@opencloning/utils/network';
-import { cloningActions } from '@opencloning/store/cloning';
-
-const { setState: setCloningState, deleteSourceAndItsChildren } = cloningActions;
-
-
-/**
- * Custom React hook that provides a function to load and process a SnapGene .dna file's cloning history
- * via the backend endpoint. If successful, updates the Redux cloning state (merging or replacing as appropriate)
- * and handles warnings. On failure, triggers a user alert.
- *
- * @returns {Object} An object with a single method `loadSnapgeneHistory(file)`:
- *   - {Promise<boolean>} loadSnapgeneHistory(file): Attempt to load and merge/replace SnapGene history.
- *     Returns true on successfully parsing the SnapGene file, otherwise returns false and triggers a warning alert.
- */
-export default function useSnapgeneHistoryEndpoint() {
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
-  const { addAlert } = useCloningAlerts();
-  const dispatch = useDispatch();
-  const store = useStore();
-  const url = backendRoute('read_snapgene_history');
-
-  const loadSnapgeneHistory = React.useCallback(async (file, sourceIdToDelete = null) => {
-    const cloningState = store.getState().cloning;
-    const formData = new FormData();
-    formData.append('file', file);
-    const config = {
-      headers: {
-        'content-type': 'multipart/form-data',
-      },
-    };
-    // If it fails to parse the history return false, true otherwise
-    try {
-      const resp = await httpClient.post(url, formData, config);
-      const { data: cloningStrategy } = resp;
-      let mergedState;
-      if (!(cloningState.sources.length === 1 && cloningState.sources[0].type === null)) {
-        ({ mergedState } = mergeStates(cloningStrategy, cloningState));
-      } else {
-        // If there is only one source and it is empty, replace the whole state
-        mergedState = cloningStrategy;
-      }
-      if (resp.headers['x-warning']) {
-        addAlert({
-          message: `Not all SnapGene history was parsed: ${resp.headers['x-warning']}`,
-          severity: 'warning',
-        });
-      }
-      batch(() => {
-        dispatch(setCloningState(mergedState));
-        if (sourceIdToDelete !== null) {
-          console.log('deleting source', sourceIdToDelete);
-          dispatch(deleteSourceAndItsChildren(sourceIdToDelete));
-        }
-      });
-      return true;
-    } catch {
-      addAlert({
-        message: 'Failed to parse the history from the SnapGene file, will only read the sequence.',
-        severity: 'warning',
-      });
-      return false;
-    }
-  }, [httpClient, addAlert, dispatch, store, url]);
-  return { loadSnapgeneHistory };
-}