@opencloning/ui 1.9.1 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # @opencloning/ui
 
+## 2.0.0
+
+### Major Changes
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Only send the auth token to the backend, and rename the http client APIs.
+
+  - `@opencloning/utils`: `@opencloning/utils/httpClients` exports `getBackendHttpClient(backendUrl, { authenticated })`, a client that can only reach the backend (`allowAbsoluteUrls: false`) and is the only one carrying the auth token, and `getExternalHttpClient()` for whitelisted external urls. Replaces `@opencloning/utils/getHttpClient` (`getHttpClient`, `getAuthenticatedHttpClient`). `attachAuthInterceptors` refuses clients that could send the token elsewhere.
+  - `@opencloning/ui` (breaking): `useHttpClient` is renamed `useBackendHttpClient` and takes urls relative to `backendUrl`; `useBackendRoute` is removed; `useBackendAPI` is renamed `useSourceRequest` and `sendPostRequest` is renamed `sendSourceRequest`.
+  - `@opencloning/opencloningdb`, `@opencloning/opencloning-elabftw`: clients can no longer be pointed at other hosts.
+
+### Patch Changes
+
+- [#778](https://github.com/OpenCloning/OpenCloning_frontend/pull/778) [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394) Thanks [@manulera](https://github.com/manulera)! - Encode values interpolated into request URL paths to prevent client-side path traversal. A sample UID such as `../workspaces/1/users/5` could make a user's own request hit a different endpoint, e.g. "delete UID" removing a workspace member.
+
+  - `@opencloning/utils`: new `encodePathSegment` (`@opencloning/utils/urlUtils`), which applies `encodeURIComponent` and rejects `.` and `..`.
+  - `@opencloning/opencloningdb`: all path parameters in `endpoints.js` are encoded.
+  - `@opencloning/opencloning-elabftw`: eLabFTW item and upload paths are encoded.
+  - `@opencloning/ui`: the `example`, `key` and `template` URL parameters are encoded when loading examples and templates.
+
+- Updated dependencies [[`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394), [`fe1d81c`](https://github.com/OpenCloning/OpenCloning_frontend/commit/fe1d81c6f4b85f6317a2a9e46cc68c571c79c394)]:
+  - @opencloning/utils@2.0.0
+  - @opencloning/store@2.0.0
+
+## 1.10.0
+
+### Minor Changes
+
+- [#773](https://github.com/OpenCloning/OpenCloning_frontend/pull/773) [`f7f376e`](https://github.com/OpenCloning/OpenCloning_frontend/commit/f7f376ee351d9b2da52413700836dc55ba54b5ea) Thanks [@manulera](https://github.com/manulera)! - Handle failed NCBI request to `dataset_report` in `SourceGenomeRegion`.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.10.0
+  - @opencloning/utils@1.10.0
+
+## 1.9.5
+
+### Patch Changes
+
+- Updated dependencies [[`73363e7`](https://github.com/OpenCloning/OpenCloning_frontend/commit/73363e7a7f7e494e20a54bd87e5dba97f8a9197e)]:
+  - @opencloning/utils@1.9.5
+  - @opencloning/store@1.9.5
+
+## 1.9.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.9.4
+  - @opencloning/utils@1.9.4
+
+## 1.9.3
+
+### Patch Changes
+
+- [#762](https://github.com/OpenCloning/OpenCloning_frontend/pull/762) [`df69a1b`](https://github.com/OpenCloning/OpenCloning_frontend/commit/df69a1bfb3b3128e93d89eef48a29f81a54ebb82) Thanks [@manulera](https://github.com/manulera)! - Fix QuotaExceededError when adding more than ~10 AB1/sequencing files (OpenCloning/OpenCloning#82). The raw contents of the verification files used to be persisted in Web Storage (localStorage, later sessionStorage), which has a quota of ~5 MB, so submitting around 10+ AB1 files failed with `QuotaExceededError` and the files/alignments disappeared. The contents are now kept in an in-memory store for the duration of the tab session, which has no quota.
+
+- Updated dependencies [[`df69a1b`](https://github.com/OpenCloning/OpenCloning_frontend/commit/df69a1bfb3b3128e93d89eef48a29f81a54ebb82)]:
+  - @opencloning/utils@1.9.3
+  - @opencloning/store@1.9.3
+
+## 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": "2.0.0",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -25,6 +25,7 @@
     "./hooks/useAlerts": "./src/hooks/useAlerts.js",
     "./hooks/useCloningAlerts": "./src/hooks/useCloningAlerts.js",
     "./hooks/useSequencingAlignment": "./src/hooks/useSequencingAlignment.js",
+    "./hooks/useBackendHttpClient": "./src/hooks/useBackendHttpClient.js",
     "./components/SequenceViewer": "./src/components/SequenceViewer.jsx",
     "./standalone": "./src/StandAloneOpenCloning.js"
   },
@@ -39,14 +40,14 @@
     "@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": "2.0.0",
+    "@opencloning/utils": "2.0.0",
     "@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.8.26",
-    "axios": "^1.16.0",
+    "axios": "^1.20.0",
     "lodash-es": "^4.18.1",
     "react-draggable": "^4.5.0"
   },

package/src/components/CloningSpeedDial.jsx

@@ -7,8 +7,7 @@ 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';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 
 const { setState: setCloningState } = cloningActions;
 
@@ -17,9 +16,8 @@ function useLocateSequencesInDatabaseAction() {
   const database = useDatabase();
   const store = useStore();
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
-  const url = backendRoute('normalize_cloning_strategy');
+  const httpClient = useBackendHttpClient();
+  const url = 'normalize_cloning_strategy';
 
   const { addAlert } = useCloningAlerts();
   const main = React.useCallback(async () => {

package/src/components/EditSequenceNameDialog.jsx

@@ -4,16 +4,14 @@ import { useDispatch, useSelector, useStore } from 'react-redux';
 import { isEqual } from 'lodash-es';
 import { cloningActions } from '@opencloning/store/cloning';
 import error2String from '@opencloning/utils/error2String';
-import useBackendRoute from '../hooks/useBackendRoute';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 
 function EditSequenceNameDialog({ id, dialogOpen, setDialogOpen }) {
   const [name, setName] = React.useState('');
   const [originalName, setOriginalName] = React.useState('');
   const [error, setError] = React.useState('');
   const store = useStore();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   const { updateSequenceAndItsSource } = cloningActions;
   const dispatch = useDispatch();
@@ -23,7 +21,7 @@ function EditSequenceNameDialog({ id, dialogOpen, setDialogOpen }) {
     const source = sources.find((s) => s.id === id);
     const sequence = sequences.find((s) => s.id === id);
     setError('');
-    const url = backendRoute('rename_sequence');
+    const url = 'rename_sequence';
     try {
       const { data: newSequence } = await httpClient.post(url, sequence, { params: { name } });
       const newSource = { ...source, output_name: newName };

package/src/components/ExternalServicesStatusCheck.jsx

@@ -1,8 +1,7 @@
 import { Alert, Button, CircularProgress } from '@mui/material';
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import useBackendRoute from '../hooks/useBackendRoute';
-import useHttpClient from '../hooks/useHttpClient';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 import { cloningActions } from '@opencloning/store/cloning';
 import { version } from '../index';
 
@@ -14,8 +13,7 @@ function ExternalServicesStatusCheck() {
   const [loading, setLoading] = React.useState(false);
   const [successMessage, setSuccessMessage] = React.useState('');
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   React.useEffect(() => {
     dispatch(updateAppInfo({ frontendVersion: version }));
     setLoading(true);
@@ -23,7 +21,7 @@ function ExternalServicesStatusCheck() {
       const services = [
         {
           message: 'Backend server is down',
-          url: backendRoute('version'),
+          url: 'version',
           check: (resp) => {
             if (resp.status === 200) {
               const { backend_version: backendVersion, schema_version: schemaVersion } = resp.data;

package/src/components/LoadCloningHistoryWrapper.jsx

@@ -1,20 +1,15 @@
 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';
+import useBackendHttpClient from '../hooks/useBackendHttpClient';
 
-const { setState: setCloningState, deleteSourceAndItsChildren, addSourceAndItsOutputSequence } = cloningActions;
+const { deleteSourceAndItsChildren, addSourceAndItsOutputSequence } = cloningActions;
 
-async function processSequenceFiles(files, backendRoute, httpClient) {
+async function processSequenceFiles(files, httpClient) {
   const allSources = [];
   const allSequences = [];
   const allWarnings = [];
@@ -31,7 +26,7 @@ async function processSequenceFiles(files, backendRoute, httpClient) {
         'content-type': 'multipart/form-data',
       },
     };
-    const url = backendRoute('read_from_file');
+    const url = 'read_from_file';
     try {
       const { data: { sources, sequences }, headers } = await httpClient.post(url, formData, config);
       // If there are warnings, add them to the list of warnings
@@ -61,11 +56,9 @@ async function processSequenceFiles(files, backendRoute, httpClient) {
 function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
   const { addAlert } = useCloningAlerts();
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
   const store = useStore();
-  const validateState = useValidateState();
-  const httpClient = useHttpClient();
-  const { loadSnapgeneHistory } = useSnapgeneHistoryEndpoint();
+  const httpClient = useBackendHttpClient();
+  const { loadHistoryFromFile, loadSnapgeneHistory } = useCloningHistoryLoader();
   const [fileLoaderFunctions, setFileLoaderFunctions] = React.useState(null);
 
   React.useEffect(() => {
@@ -81,34 +74,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 +87,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
 
@@ -141,11 +115,12 @@ function LoadCloningHistoryWrapper({ fileList, clearFiles, children }) {
         }
       }
       try {
-        const { sources, sequences, warnings } = await processSequenceFiles(files, backendRoute, httpClient);
+        const { sources, sequences, warnings } = await processSequenceFiles(files, 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/assembler/Assembler.jsx

@@ -19,8 +19,7 @@ import useCombinatorialAssembly from './useCombinatorialAssembly';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 import error2String from '@opencloning/utils/error2String';
 import { categoryFilter, downloadAssemblerFilesAsZip, getFilesToExportFromAssembler, getDefaultAssemblyOutputName, MAX_OUTPUT_NAME_LENGTH, sanitizeOutputName } from './assembler_utils';
-import useBackendRoute from '../../hooks/useBackendRoute';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 import useCloningAlerts from '../../hooks/useCloningAlerts';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import { useConfig } from '../../providers';
@@ -376,12 +375,11 @@ function categoriesFromSyntaxAndPlasmids(syntax, plasmids) {
 
 function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
   const [existingSyntaxDialogOpen, setExistingSyntaxDialogOpen] = React.useState(false)
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const { staticContentPath } = useConfig();
-  const backendRoute = useBackendRoute();
   const { addAlert } = useCloningAlerts();
   const onSyntaxSelect = React.useCallback(async (syntax, plasmids) => {
-    const url = backendRoute('validate_syntax');
+    const url = 'validate_syntax';
     try {
       await httpClient.post(url, syntax);
       setSyntax(syntax)
@@ -393,7 +391,7 @@ function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
         severity: 'error',
       });
     }
-  }, [setSyntax, addPlasmids, clearPlasmids, httpClient, backendRoute, addAlert])
+  }, [setSyntax, addPlasmids, clearPlasmids, httpClient, addAlert])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>
     {existingSyntaxDialogOpen && <ExistingSyntaxDialog

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box, ButtonGroup, Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
-import getHttpClient from '@opencloning/utils/getHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { readSubmittedTextFile } from '@opencloning/utils/readNwrite';
 import { normalizeSyntaxEnzymes } from '@opencloning/utils/normalizeSyntax';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 
-const httpClient = getHttpClient();
+const httpClient = getExternalHttpClient();
 const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
 httpClient.defaults.baseURL = baseURL;
 

package/src/components/assembler/useAssembler.js

@@ -1,7 +1,6 @@
 import { useCallback } from 'react'
 import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions'
-import useBackendRoute from '../../hooks/useBackendRoute'
-import useHttpClient from '../../hooks/useHttpClient'
+import useBackendHttpClient from '../../hooks/useBackendHttpClient'
 import { arrayCombinations } from './assembler_utils'
 
 
@@ -28,8 +27,7 @@ function formatLoadedFile(plasmid, id) {
 }
 
 export const useAssembler = () => {
-  const httpClient = useHttpClient();
-  const backendRoute = useBackendRoute();
+  const httpClient = useBackendHttpClient();
 
   const requestSources = useCallback(async (assemblerOutput) => {
     const processedOutput = []
@@ -41,7 +39,7 @@ export const useAssembler = () => {
             processedOutput[pos].push(formatLoadedFile(plasmid, pos + 1))
           } else {
             const { source } = plasmid;
-            const url = backendRoute(classNameToEndPointMap[source.type])
+            const url = classNameToEndPointMap[source.type]
             const {data} = await httpClient.post(url, source)
             if (data.sources.length !== 1) {
               console.error('Expected 1 source, got ' + data.sources.length)
@@ -59,7 +57,7 @@ export const useAssembler = () => {
       }
     }
     return processedOutput
-  }, [ httpClient, backendRoute ])
+  }, [ httpClient ])
 
 
   const requestAssemblies = useCallback(async (requestedSources, enzymes=['BsaI']) => {
@@ -67,7 +65,7 @@ export const useAssembler = () => {
     const assemblies = arrayCombinations(requestedSources);
     const output = []
     for (let assembly of assemblies) {
-      const url = backendRoute('restriction_and_ligation')
+      const url = 'restriction_and_ligation'
       const config = {
         params: {
           circular_only: true,
@@ -102,7 +100,7 @@ export const useAssembler = () => {
       }
     }
     return output;
-  }, [ httpClient, backendRoute ])
+  }, [ httpClient ])
 
   return { requestSources, requestAssemblies }
 }

package/src/components/domesticate/DomesticateDialog.jsx

@@ -19,8 +19,7 @@ import {
   TextField,
 } from '@mui/material';
 import error2String from '@opencloning/utils/error2String';
-import useBackendRoute from '../../hooks/useBackendRoute';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 import { featureToGenbankLocationString, mergeStates } from '@opencloning/utils';
 import { useDispatch, useStore } from 'react-redux';
 import { cloningActions } from '@opencloning/store/cloning';
@@ -77,8 +76,7 @@ function categoryPrefixSuffixValid(category, prefix, suffix) {
 }
 
 export default function DomesticateDialog({ open, onClose, initialContext, mainSequenceId }) {
-  const httpClient = useHttpClient();
-  const backendRoute = useBackendRoute();
+  const httpClient = useBackendHttpClient();
   const store = useStore();
 
   const location = React.useMemo(() => featureToGenbankLocationString(initialContext.annotation), [initialContext]);
@@ -131,7 +129,7 @@ export default function DomesticateDialog({ open, onClose, initialContext, mainS
       enzymes,
     };
     try {
-      const url = backendRoute('batch_cloning/domesticate');
+      const url = 'batch_cloning/domesticate';
       const { data } = await httpClient.post(url, body);
 
       const { mergedState, idShift } = mergeStates(data, store.getState().cloning);

package/src/components/form/EnzymeMultiSelect.jsx

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import GetRequestMultiSelect from './GetRequestMultiSelect';
-import useBackendRoute from '../../hooks/useBackendRoute';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 
 function EnzymeMultiSelect({ setEnzymes, label = 'Enzymes used', multiple = true }) {
-  const backendRoute = useBackendRoute();
-  const url = backendRoute('restriction_enzyme_list');
+  const url = 'restriction_enzyme_list';
   const getOptionsFromResponse = React.useCallback((data) => data.enzyme_names, []);
   const messages = React.useMemo(() => ({
     loadingMessage: 'retrieving enzymes...',
     errorMessage: 'Could not retrieve enzymes from server',
   }), []);
   const onChange = React.useCallback((value) => setEnzymes(value), [setEnzymes]);
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   return (
 

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,14 @@ 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';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
 
-const { setCurrentTab, setState: setCloningState } = cloningActions;
+// External urls (not the backend): no auth token, only whitelisted urls
+const httpClient = getExternalHttpClient();
+
+const { setCurrentTab } = cloningActions;
 
 function MainAppBar() {
   const [openExampleDialog, setOpenExampleDialog] = React.useState(false);
@@ -28,11 +31,10 @@ function MainAppBar() {
   const [openVersionDialog, setOpenVersionDialog] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const openMenu = Boolean(anchorEl);
-  const httpClient = useHttpClient();
 
   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 +54,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));
     }
   };