@opencloning/ui 1.9.1 → 2.0.0

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';
+import { useStore } from 'react-redux';
 
-const { deleteSourceAndItsChildren, setState: setCloningState } = cloningActions;
-
-export default function useLoadDatabaseFile({ source, sendPostRequest, setHistoryFileError }) {
-  const dispatch = useDispatch();
+export default function useLoadDatabaseFile({ source, sendSourceRequest, setHistoryFileError }) {
   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);
@@ -105,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,12 +4,17 @@ 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, loadHistoryFile, loadFilesToSessionStorage } from '@opencloning/utils/readNwrite';
+import { formatTemplate } from '@opencloning/utils/readNwrite';
+import { encodePathSegment } from '@opencloning/utils/urlUtils';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
 
-const { setState: setCloningState, updateSource } = cloningActions;
+// For public urls (not the backend)
+const httpClient = getExternalHttpClient();
+
+const { updateSource } = cloningActions;
 
 /**
  * Hook to load sequences from URL parameters
@@ -20,9 +25,9 @@ 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(() => {
     async function loadSequenceFromUrlParams() {
@@ -44,23 +49,25 @@ 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 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' });
+            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',
@@ -71,12 +78,12 @@ 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);
 
-          dispatch(setCloningState(newState));
+          await applyCloningStrategy(newState, { mode: 'replace' });
         } catch (error) {
           addAlert({
             message: 'Error loading template',
@@ -146,4 +153,3 @@ export default function useUrlParamsLoader() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 }
-

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.1";
+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;
-}

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