@opencloning/ui 1.9.2 → 2.0.0

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.0.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;
-  };
-}

package/src/hooks/useHttpClient.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import getHttpClient, { getAuthenticatedHttpClient } from '@opencloning/utils/getHttpClient';
-import { useConfig } from './useConfig';
-
-export default function useHttpClient() {
-  const { backendUrl, requiresBackendAuth = false } = useConfig();
-
-  // Memoize the client creation and interceptor setup
-  const apiClient = React.useMemo(() => {
-    const createHttpClient = requiresBackendAuth ? getAuthenticatedHttpClient : getHttpClient;
-
-    if (!backendUrl) {
-      // Return a client without backend URL if config not loaded yet
-      return createHttpClient([]);
-    }
-    return createHttpClient([backendUrl]);
-  }, [backendUrl, requiresBackendAuth]);
-
-  return apiClient;
-}