@opencloning/ui 1.9.2 → 2.1.0

package/src/components/sources/SourcePCRorHybridization.jsx

@@ -10,7 +10,7 @@ import { cloningActions } from '@opencloning/store/cloning';
 import useStoreEditor from '../../hooks/useStoreEditor';
 import LabelWithTooltip from '../form/LabelWithTooltip';
 
-function SourcePCRorHybridization({ source, requestStatus, sendPostRequest }) {
+function SourcePCRorHybridization({ source, requestStatus, sendSourceRequest }) {
   // Represents a PCR if inputs != [], else is a oligo hybridization
 
   const dispatch = useDispatch();
@@ -58,14 +58,14 @@ function SourcePCRorHybridization({ source, requestStatus, sendPostRequest }) {
     if (!isPcr) {
       requestData.source.input = [forwardPrimerId, reversePrimerId].map((id) => ({ sequence: id }));
       const config = { params: { minimal_annealing: minimalAnnealingRef.current.value } };
-      sendPostRequest({ endpoint: 'oligonucleotide_hybridization', requestData, config, source });
+      sendSourceRequest({ endpoint: 'oligonucleotide_hybridization', requestData, config, source });
     } else {
       const config = { params: {
         minimal_annealing: minimalAnnealingRef.current.value,
         allowed_mismatches: allowedMismatchesRef.current.value,
       } };
       requestData.source.add_primer_features = addPrimerFeatures;
-      sendPostRequest({ endpoint: 'pcr', requestData, config, source });
+      sendSourceRequest({ endpoint: 'pcr', requestData, config, source });
     }
   };
 

package/src/components/sources/SourcePolymeraseExtension.jsx

@@ -4,7 +4,7 @@ import { Alert } from '@mui/material';
 import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 
-function SourcePolymeraseExtension({ source, requestStatus, sendPostRequest }) {
+function SourcePolymeraseExtension({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
   const { overhang_crick_3prime, overhang_watson_3prime } = inputSequences[0];
@@ -16,7 +16,7 @@ function SourcePolymeraseExtension({ source, requestStatus, sendPostRequest }) {
       sequences: inputSequences,
       source: { id: sourceId, input: inputSequences.map((e) => ({ sequence: e.id })) },
     };
-    sendPostRequest({ endpoint: 'polymerase_extension', requestData, source });
+    sendSourceRequest({ endpoint: 'polymerase_extension', requestData, source });
   };
   // No need for MultipleOutputsSelector, since there is only one output
   return (

package/src/components/sources/SourceRepositoryId.jsx

@@ -3,10 +3,10 @@ import { IconButton, InputAdornment, InputLabel, MenuItem, TextField, FormContro
 import { Clear as ClearIcon } from '@mui/icons-material';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
-import getHttpClient from '@opencloning/utils/getHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
 import repositoryMetadata from './repositoryMetadata';
 
-const httpClient = getHttpClient();
+const httpClient = getExternalHttpClient();
 
 function validateRepositoryId(repositoryId, repository) {
   switch (repository) {
@@ -243,7 +243,7 @@ function IndexJsonSelector({
 
 // A component providing an interface for the user to type a repository ID
 // and get a sequence
-function SourceRepositoryId({ source, requestStatus, sendPostRequest }) {
+function SourceRepositoryId({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [inputValue, setInputValue] = React.useState('');
   const [repositoryType, setRepositoryType] = React.useState(source.type || '');
@@ -290,7 +290,7 @@ function SourceRepositoryId({ source, requestStatus, sendPostRequest }) {
       extra.sequence_file_url = encodeURI(inputValue.url);
     }
     const requestData = { id: sourceId, ...extra, type: repositoryType };
-    sendPostRequest({ endpoint: `repository_id/${repositoryMeta.slug}`, requestData, source });
+    sendSourceRequest({ endpoint: `repository_id/${repositoryMeta.slug}`, requestData, source });
   };
   const helperText = error || (repositoryMeta?.example && `Example: ${repositoryMeta.example}`);
   return (

package/src/components/sources/SourceRestriction.jsx

@@ -7,7 +7,7 @@ import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 // A component providing an interface for the user to perform a restriction reaction
 // with one or more restriction enzymes, move between output fragments, and eventually
 // select one as an output.
-function SourceRestriction({ source, requestStatus, sendPostRequest }) {
+function SourceRestriction({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [enzymes, setEnzymes] = React.useState([]);
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
@@ -19,7 +19,7 @@ function SourceRestriction({ source, requestStatus, sendPostRequest }) {
       source: { id: sourceId, input: source.input },
       sequences: inputSequences,
     };
-    sendPostRequest({ endpoint: 'restriction', requestData, source, config: { params: { restriction_enzymes: enzymes } } });
+    sendSourceRequest({ endpoint: 'restriction', requestData, source, config: { params: { restriction_enzymes: enzymes } } });
   };
 
   return (

package/src/components/sources/SourceReverseComplement.jsx

@@ -3,7 +3,7 @@ import { shallowEqual, useSelector } from 'react-redux';
 import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 
-function SourceReverseComplement({ source, requestStatus, sendPostRequest }) {
+function SourceReverseComplement({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId, input } = source;
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
   const onSubmit = (event) => {
@@ -13,7 +13,7 @@ function SourceReverseComplement({ source, requestStatus, sendPostRequest }) {
       sequences: inputSequences,
       source: { id: sourceId, input },
     };
-    sendPostRequest({ endpoint: 'reverse_complement', requestData, source });
+    sendSourceRequest({ endpoint: 'reverse_complement', requestData, source });
   };
     // No need for MultipleOutputsSelector, since there is only one output
   return (

package/src/components/sources/SourceServerStaticFile.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { Alert, LinearProgress } from '@mui/material';
 
-function SourceServerStaticFile({ source, requestStatus, sendPostRequest }) {
+function SourceServerStaticFile({ source, requestStatus, sendSourceRequest }) {
   const onFileSelected = React.useCallback((file) => {
     const requestData = new FormData();
     requestData.append('file', file);
@@ -11,8 +11,8 @@ function SourceServerStaticFile({ source, requestStatus, sendPostRequest }) {
         'content-type': 'multipart/form-data',
       },
     };
-    sendPostRequest({ endpoint: 'read_from_file', requestData, config, source });
-  }, [sendPostRequest, source]);
+    sendSourceRequest({ endpoint: 'read_from_file', requestData, config, source });
+  }, [sendSourceRequest, source]);
 
   return (
     <>

package/src/components/verification/VerificationFileDialog.cy.jsx

@@ -4,6 +4,11 @@ import store from '@opencloning/store';
 import { cloningActions } from '@opencloning/store/cloning';
 import { loadDataAndMount } from '../../../../../cypress/e2e/common_funcions_store';
 import { getVerificationFileName } from '@opencloning/utils/readNwrite';
+import {
+  clearVerificationFileContents,
+  getVerificationFileContent,
+  setVerificationFileContent,
+} from '@opencloning/utils/verificationFileStore';
 import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
 import { Provider } from 'react-redux';
 
@@ -23,7 +28,7 @@ const base64str = 'aGVsbG8=';
 
 describe('<VerificationFileDialog />', () => {
   beforeEach(() => {
-    sessionStorage.clear();
+    clearVerificationFileContents();
   });
   it('renders and calls setDialogOpen with false when clicking close button', () => {
     // see: https://on.cypress.io/mounting-react
@@ -51,7 +56,7 @@ describe('<VerificationFileDialog />', () => {
   it('displays existing files and can download and delete them', () => {
     store.dispatch(setFiles(dummyFiles));
     dummyFiles.forEach((file) => {
-      sessionStorage.setItem(getVerificationFileName(file), base64str);
+      setVerificationFileContent(getVerificationFileName(file), base64str);
     });
     cy.mount(
       <Provider store={store}>
@@ -69,16 +74,11 @@ describe('<VerificationFileDialog />', () => {
 
     cy.get('[data-testid="DeleteIcon"]').first().click();
     cy.get('table').contains('file2.txt');
-    cy.get('table').contains('file1.txt').should('not.exist');
-
-    // Check that the file is not in sessionStorage
-    cy.window().its('sessionStorage')
-      .invoke('getItem', 'verification-1-file1.txt')
-      .should('be.null');
-
-    cy.window().its('sessionStorage')
-      .invoke('getItem', 'verification-1-file2.txt')
-      .should('not.be.null');
+    cy.get('table').contains('file1.txt').should('not.exist').then(() => {
+      // Check that the file is not in the verification file store
+      expect(getVerificationFileContent('verification-1-file1.txt')).to.be.null;
+      expect(getVerificationFileContent('verification-1-file2.txt')).to.not.be.null;
+    });
   });
 
   it('can submit files and aligns them', () => {
@@ -105,9 +105,8 @@ describe('<VerificationFileDialog />', () => {
       cy.expect(file.file_type).to.equal('Sequencing file');
       cy.expect(file.sequence_id).to.equal(2);
       cy.expect(file.alignment).to.have.length(2);
-      // The file content is stored in sessionStorage
-      cy.window().its('sessionStorage')
-        .invoke('getItem', getVerificationFileName(file))
+      // The file content is stored in the verification file store
+      cy.wrap(getVerificationFileContent(getVerificationFileName(file)))
         .should('not.be.null', { timeout: 10000 });
 
       cy.intercept('POST', 'http://127.0.0.1:8000/align_sanger*', {
@@ -133,9 +132,8 @@ describe('<VerificationFileDialog />', () => {
         cy.expect(file.file_type).to.equal('Sequencing file');
         cy.expect(file.sequence_id).to.equal(2);
         cy.expect(file.alignment).to.deep.equal(['A', 'C']);
-        // The file content is stored in sessionStorage
-        cy.window().its('sessionStorage')
-          .invoke('getItem', getVerificationFileName(file))
+        // The file content is stored in the verification file store
+        cy.wrap(getVerificationFileContent(getVerificationFileName(file)))
           .should('not.be.null', { timeout: 10000 });
       });
   });
@@ -187,9 +185,7 @@ describe('<VerificationFileDialog />', () => {
       cy.contains('Request failed');
       // It has not been added
       cy.get('table').contains('BZO902-13409020-13409020.ab1').should('not.exist');
-      cy.window().its('sessionStorage')
-        .invoke('getItem', 'verification-2-BZO902-13409020-13409020.ab1')
-        .should('be.null');
+      expect(getVerificationFileContent('verification-2-BZO902-13409020-13409020.ab1')).to.be.null;
 
       // Connection error
       cy.intercept('POST', 'http://127.0.0.1:8000/align_sanger*', {

package/src/components/verification/VerificationFileDialog.jsx

@@ -21,12 +21,15 @@ import { isEqual } from 'lodash-es';
 import { getTeselaJsonFromBase64, file2base64 } from '@opencloning/utils/readNwrite';
 import SequencingFileRow from './SequencingFileRow';
 import { cloningActions } from '@opencloning/store/cloning';
-import useBackendRoute from '../../hooks/useBackendRoute';
 import useStoreEditor from '../../hooks/useStoreEditor';
 import LoadFromDatabaseButton from './LoadFromDatabaseButton';
 import { sequencingFileExtensions } from '@opencloning/utils/sequencingFileExtensions';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 import { getVerificationFileName } from '@opencloning/utils/readNwrite';
+import {
+  getVerificationFileContent,
+  setVerificationFileContent,
+} from '@opencloning/utils/verificationFileStore';
 import ImportSequencingFilesInput from './ImportSequencingFilesInput';
 
 const { addFile, removeFile: removeFileAction, removeFilesAssociatedToSequence, setMainSequenceId, setCurrentTab } = cloningActions;
@@ -43,9 +46,8 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
   const dispatch = useDispatch();
   const fileInputRef = useRef(null);
   const { updateStoreEditor } = useStoreEditor();
-  const backendRoute = useBackendRoute();
   const store = useStore();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   const toggleMain = React.useCallback(() => {
     dispatch(setMainSequenceId(id));
@@ -78,7 +80,7 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
     const existingSequencingFilesInState = await Promise.all(store.getState().cloning.files
       .filter((f) => f.sequence_id === id && f.file_type === 'Sequencing file')
       .map(async (f) => {
-        const base64str = sessionStorage.getItem(getVerificationFileName(f));
+        const base64str = getVerificationFileContent(getVerificationFileName(f));
         const trace = (await getTeselaJsonFromBase64(base64str, f.file_name)).sequence;
         return { ...f, base64str, trace };
       }));
@@ -94,7 +96,7 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
     const allSequencingFiles = [...existingSequencingFilesInState, ...parsedSequencingFiles];
     const alignments = [];
     const traces = allSequencingFiles.map((f) => f.trace);
-    const resp = await httpClient.post(backendRoute('align_sanger'), { sequence, traces });
+    const resp = await httpClient.post('align_sanger', { sequence, traces });
 
     for (let i = 0; i < allSequencingFiles.length; i++) {
       alignments.push({ ...allSequencingFiles[i], alignment: [resp.data[0], resp.data[i + 1]] });
@@ -107,10 +109,10 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
         const { trace, base64str, ...rest } = alignment;
         dispatch(addFile(rest));
       });
-      alignments.forEach(({ base64str, file_name }) => { sessionStorage.setItem(`verification-${id}-${file_name}`, base64str); });
+      alignments.forEach(({ base64str, file_name }) => { setVerificationFileContent(`verification-${id}-${file_name}`, base64str); });
     });
     setLoadingMessage('');
-  }, [id, dispatch, httpClient, backendRoute, store, sequence]);
+  }, [id, dispatch, httpClient, store, sequence]);
 
   const onFileChange = useCallback(async (files) => {
     setLoadingMessage('Aligning...');
@@ -126,7 +128,6 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
 
   const removeFile = useCallback((fileName) => {
     dispatch(removeFileAction({ fileName, sequenceId: id }));
-    sessionStorage.removeItem(`verification-${id}-${fileName}`);
   }, [id, dispatch]);
 
   const handleClickUpload = useCallback(() => {
@@ -134,9 +135,9 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
   }, [fileInputRef]);
 
   const downloadFile = useCallback((fileName) => {
-    const base64Content = sessionStorage.getItem(`verification-${id}-${fileName}`);
+    const base64Content = getVerificationFileContent(`verification-${id}-${fileName}`);
     if (!base64Content) {
-      setError(`File ${fileName} not found in session storage`);
+      setError(`File ${fileName} not found in the verification file store`);
       return;
     }
     const binaryString = atob(base64Content);

package/src/hooks/index.js

@@ -1,4 +1,3 @@
 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';
+export { default as useBackendHttpClient } from './useBackendHttpClient.js';

package/src/hooks/useBackendHttpClient.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { getBackendHttpClient } from '@opencloning/utils/httpClients';
+import { useConfig } from './useConfig';
+
+/**
+ * Http client for the backend: urls are relative to config.backendUrl
+ * (e.g. httpClient.post('validate', body)), and requests can only reach the backend.
+ * For external urls use getExternalHttpClient() from @opencloning/utils/httpClients.
+ */
+export default function useBackendHttpClient() {
+  const { backendUrl, requiresBackendAuth = false } = useConfig();
+
+  return React.useMemo(
+    () => getBackendHttpClient(backendUrl, { authenticated: requiresBackendAuth }),
+    [backendUrl, requiresBackendAuth],
+  );
+}

package/src/hooks/useCloningHistoryLoader.js

@@ -4,13 +4,12 @@ import { cloningActions } from '@opencloning/store/cloning';
 import { getEmptyPlaceholderSource } from '@opencloning/store/cloning_utils';
 import { graftState, getGraftSequenceId, mergeStates } from '@opencloning/utils/network';
 import {
-  loadFilesToSessionStorage,
+  loadFilesToVerificationStore,
   parseHistoryFile,
   updateVerificationFileNames,
 } from '@opencloning/utils/readNwrite';
-import useBackendRoute from './useBackendRoute';
 import useCloningAlerts from './useCloningAlerts';
-import useHttpClient from './useHttpClient';
+import useBackendHttpClient from './useBackendHttpClient';
 import useValidateState from './useValidateState';
 
 const {
@@ -31,9 +30,8 @@ export default function useCloningHistoryLoader() {
   const store = useStore();
   const validateState = useValidateState();
   const { addAlert } = useCloningAlerts();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
-  const snapgeneUrl = backendRoute('read_snapgene_history');
+  const httpClient = useBackendHttpClient();
+  const snapgeneUrl = 'read_snapgene_history';
 
   const applyCloningStrategy = React.useCallback(async (cloningStrategy, options = {}) => {
     const {
@@ -72,7 +70,7 @@ export default function useCloningHistoryLoader() {
         dispatch(setCloningState(newState));
       });
 
-      await loadFilesToSessionStorage(verificationFiles, idShift);
+      await loadFilesToVerificationStore(verificationFiles, idShift);
     } catch (e) {
       console.error(e);
       dispatch(setCloningState(prevState));

package/src/hooks/useGatewaySites.js

@@ -2,16 +2,14 @@ import React, { useCallback, useState } from 'react';
 import { useStore } from 'react-redux';
 import error2String from '@opencloning/utils/error2String';
 import { formatGatewaySites } from '@opencloning/store/cloning_utils';
-import useBackendRoute from './useBackendRoute';
-import useHttpClient from './useHttpClient';
+import useBackendHttpClient from './useBackendHttpClient';
 
 export default function useGatewaySites({ target, greedy }) {
   const store = useStore();
   const [requestStatus, setRequestStatus] = useState({ status: null, message: '' });
   const [connectAttempt, setConnectAttempt] = useState(0);
   const [sites, setSites] = useState([]);
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   const attemptAgain = useCallback(() => {
     setConnectAttempt((p) => p + 1);
@@ -20,7 +18,7 @@ export default function useGatewaySites({ target, greedy }) {
   React.useEffect(() => {
     async function getSitesInTarget() {
       setRequestStatus({ status: 'loading', message: 'loading' });
-      const url = backendRoute('annotation/get_gateway_sites');
+      const url = 'annotation/get_gateway_sites';
       const state = store.getState();
       const sequence = state.cloning.sequences.find((seq) => seq.id === target);
       try {

package/src/hooks/useInitializeApp.js

@@ -1,15 +1,14 @@
 import { useEffect } from 'react';
+import { clearVerificationFileContents } from '@opencloning/utils/verificationFileStore';
 
 /**
  * Hook to initialize application-level concerns
- * - Clears session storage
+ * - Clears the in-memory verification file store
  */
 export default function useInitializeApp() {
 
   useEffect(() => {
-    // Clear session storage
-    // eslint-disable-next-line no-undef
-    sessionStorage.clear();
+    clearVerificationFileContents();
   }, []);
 }
 

package/src/hooks/useLoadDatabaseFile.js

@@ -6,7 +6,7 @@ import useCloningHistoryLoader from './useCloningHistoryLoader';
 import useDatabase from './useDatabase';
 import { useStore } from 'react-redux';
 
-export default function useLoadDatabaseFile({ source, sendPostRequest, setHistoryFileError }) {
+export default function useLoadDatabaseFile({ source, sendSourceRequest, setHistoryFileError }) {
   const validateState = useValidateState();
   const store = useStore();
   const database = useDatabase();
@@ -88,7 +88,7 @@ export default function useLoadDatabaseFile({ source, sendPostRequest, setHistor
         },
       };
       const modifySource = (s) => ({ ...s, database_id: databaseId });
-      sendPostRequest({ endpoint: 'read_from_file', requestData, config, source, modifySource });
+      sendSourceRequest({ endpoint: 'read_from_file', requestData, config, source, modifySource });
     }
   };
   return { loadDatabaseFile };

package/src/hooks/useSequencingAlignment.js

@@ -1,17 +1,15 @@
 import { useCallback } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { buildAlignmentTrack, buildReferenceTrack, buildAlignmentConfig } from '@opencloning/utils/alignmentUtils';
-import useBackendRoute from './useBackendRoute';
-import useHttpClient from './useHttpClient';
+import useBackendHttpClient from './useBackendHttpClient';
 
 export default function useSequencingAlignment({ onError } = {}) {
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   const fetchAlignments = useCallback(async ({ sequenceModel, sequenceData, parsedFiles }) => {
     // parsedFiles: [{ fileName, fileContent }] where fileContent is getTeselaJsonFromBase64 output
     const traces = parsedFiles.map((f) => f.fileContent.sequence);
-    const resp = await httpClient.post(backendRoute('align_sanger'), { sequence: sequenceModel, traces });
+    const resp = await httpClient.post('align_sanger', { sequence: sequenceModel, traces });
 
     const referenceTrack = buildReferenceTrack(sequenceData, resp.data[0]);
     const otherTracks = parsedFiles.map((f, i) => {
@@ -20,7 +18,7 @@ export default function useSequencingAlignment({ onError } = {}) {
     });
 
     return buildAlignmentConfig(sequenceModel.id, sequenceData, [referenceTrack, ...otherTracks]);
-  }, [httpClient, backendRoute]);
+  }, [httpClient]);
 
   return useMutation({ mutationFn: fetchAlignments, onError });
 }

package/src/hooks/useServerStaticFiles.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import getHttpClient from '@opencloning/utils/getHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
 import { useConfig } from '../providers';
 import useRequestForEffect from './useRequestForEffect';
 
 
-export const localFilesHttpClient = getHttpClient([]);
+export const localFilesHttpClient = getExternalHttpClient();
 
 function sequencesToCategories(sequences) {
   const allCategories = sequences

package/src/hooks/{useBackendAPI.js → useSourceRequest.js}

@@ -1,22 +1,20 @@
 import { useState, useCallback } from 'react';
 import error2String from '@opencloning/utils/error2String';
-import useBackendRoute from './useBackendRoute';
 import useCloningAlerts from './useCloningAlerts';
-import useHttpClient from './useHttpClient';
+import useBackendHttpClient from './useBackendHttpClient';
 
-export default function useBackendAPI() {
+export default function useSourceRequest() {
   const [requestStatus, setRequestStatus] = useState({ status: null, message: '' });
   const [sources, setSources] = useState([]);
   const [sequences, setSequences] = useState([]);
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const { addAlert } = useCloningAlerts();
 
-  const sendPostRequest = useCallback(async ({ endpoint, requestData, config = {}, source: { output }, modifySource = (s) => s }) => {
+  const sendSourceRequest = useCallback(async ({ endpoint, requestData, config = {}, source: { output }, modifySource = (s) => s }) => {
     setRequestStatus({ status: 'loading', message: 'loading' });
 
     // Url built like this in case trailing slash
-    const url = backendRoute(endpoint);
+    const url = endpoint;
     // paramsSerializer: { indexes: null } is to correctly serialize arrays in the URL
     const fullConfig = { ...config, paramsSerializer: { indexes: null } };
     try {
@@ -50,5 +48,5 @@ export default function useBackendAPI() {
     }
   }, []);
 
-  return { requestStatus, sources, sequences, sendPostRequest };
+  return { requestStatus, sources, sequences, sendSourceRequest };
 }

package/src/hooks/useStoreEditor.js

@@ -2,6 +2,7 @@ import { useStore } from 'react-redux';
 import { updateEditor, addAlignment } from '@teselagen/ove';
 import { getPCRPrimers } from '@opencloning/store/cloning_utils';
 import { getTeselaJsonFromBase64 } from '@opencloning/utils/readNwrite';
+import { getVerificationFileContent } from '@opencloning/utils/verificationFileStore';
 import { buildAlignmentTrack, buildReferenceTrack, buildAlignmentConfig, removePanelFromShown, updatePanelsShownWithAlignment } from '@opencloning/utils/alignmentUtils';
 
 export default function useStoreEditor() {
@@ -31,7 +32,7 @@ export default function useStoreEditor() {
       if (alignmentFiles.length > 0) {
         const referenceTrack = buildReferenceTrack(sequenceData, alignmentFiles[0].alignment[0]);
         const otherTracks = await Promise.all(alignmentFiles.map(async (aln) => {
-          const fileContent = await getTeselaJsonFromBase64(sessionStorage.getItem(`verification-${id}-${aln.file_name}`), aln.file_name);
+          const fileContent = await getTeselaJsonFromBase64(getVerificationFileContent(`verification-${id}-${aln.file_name}`), aln.file_name);
           return buildAlignmentTrack(fileContent, aln);
         }));
         const alignmentConfig = buildAlignmentConfig(id, sequenceData, [referenceTrack, ...otherTracks]);

package/src/hooks/useUrlParamsLoader.js

@@ -4,11 +4,15 @@ import { cloningActions } from '@opencloning/store/cloning';
 import useDatabase from './useDatabase';
 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 } from '@opencloning/utils/readNwrite';
+import { encodePathSegment } from '@opencloning/utils/urlUtils';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
+
+// For public urls (not the backend)
+const httpClient = getExternalHttpClient();
 
 const { updateSource } = cloningActions;
 
@@ -21,9 +25,8 @@ export default function useUrlParamsLoader() {
   const database = useDatabase();
   const { addAlert } = useCloningAlerts();
   const setHistoryFileError = (e) => addAlert({ message: e, severity: 'error' });
-  const { loadDatabaseFile } = useLoadDatabaseFile({ source: { id: 1 }, sendPostRequest: null, setHistoryFileError });
+  const { loadDatabaseFile } = useLoadDatabaseFile({ source: { id: 1 }, sendSourceRequest: null, setHistoryFileError });
   const validateState = useValidateState();
-  const httpClient = useHttpClient();
   const { applyCloningStrategy, loadHistoryFromFile } = useCloningHistoryLoader();
 
   useEffect(() => {
@@ -46,7 +49,7 @@ export default function useUrlParamsLoader() {
         }
       } else if (urlParams.source === 'example' && urlParams.example) {
         try {
-          const url = `${import.meta.env.BASE_URL}examples/${urlParams.example}`;
+          const url = `${import.meta.env.BASE_URL}examples/${encodePathSegment(urlParams.example)}`;
           const fileName = urlParams.example;
           if (fileName.endsWith('.zip')) {
             const resp = await httpClient.get(url, { responseType: 'blob' });
@@ -75,7 +78,7 @@ export default function useUrlParamsLoader() {
       } else if (urlParams.source === 'template' && urlParams.template && urlParams.key) {
         try {
           const baseUrl = 'https://assets.opencloning.org/OpenCloning-submission';
-          const url = `${baseUrl}/processed/${urlParams.key}/templates/${urlParams.template}`;
+          const url = `${baseUrl}/processed/${encodePathSegment(urlParams.key)}/templates/${encodePathSegment(urlParams.template)}`;
           const { data } = await httpClient.get(url);
           const validatedData = await validateState(data);
           const newState = formatTemplate(validatedData, url);

package/src/hooks/useValidateState.js

@@ -1,18 +1,16 @@
 import React from 'react';
 import useCloningAlerts from './useCloningAlerts';
-import useBackendRoute from './useBackendRoute';
-import useHttpClient from './useHttpClient';
+import useBackendHttpClient from './useBackendHttpClient';
 
 export default function useValidateState() {
-  const backendRoute = useBackendRoute();
   const { addAlert } = useCloningAlerts();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   const validateState = React.useCallback(async (newState) => {
     // Returns null if the state is valid, otherwise the new updated state
     // It also adds alerts
     try {
-      const response = await httpClient.post(backendRoute('validate'), newState);
+      const response = await httpClient.post('validate', newState);
       if (response.data !== null) {
         response.headers['x-warning'].split(';').forEach((warning) => {
           addAlert({
@@ -37,7 +35,7 @@ export default function useValidateState() {
       }
       return newState;
     }
-  }, [addAlert, backendRoute, httpClient]);
+  }, [addAlert, httpClient]);
 
   return validateState;
 }

package/src/version.js

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

package/src/hooks/useBackendRoute.js

@@ -1,23 +0,0 @@
-import { useConfig } from './useConfig';
-
-export default function useBackendRoute() {
-  const { backendUrl: configBackendUrl } = useConfig();
-  
-  if (!configBackendUrl) {
-    return () => {};
-  }
-  const backendUrl = configBackendUrl.endsWith('/') ? configBackendUrl : `${configBackendUrl}/`;
-
-  return function backendRoute(path) {
-    if (!backendUrl) {
-      throw new Error('Backend URL not set');
-    }
-    //   console.log(new URL('/api', window.location.origin).href);
-    //   console.log(new URL(import.meta.env.VITE_REACT_APP_BACKEND_URL, window.location.origin).href);
-    // This handles both the case where the backend url is absolute and the case where it is relative
-    const backendRoot = new URL(backendUrl, window.location.origin).href;
-    // Remove trailing slash from path
-    const sanitizedPath = path.endsWith('/') ? path.slice(0, -1) : path;
-    return new URL(sanitizedPath, backendRoot).href;
-  };
-}