@opencloning/ui 1.0.0

package/src/hooks/useBackendRoute.js

@@ -0,0 +1,22 @@
+import { useSelector } from 'react-redux';
+
+export default function useBackendRoute() {
+  const configBackendUrl = useSelector((state) => state.cloning.config.backendUrl);
+  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/useDatabase.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import eLabFTWInterface from '../components/eLabFTW/eLabFTWInterface';
+import dummyInterface from '../components/dummy/DummyInterface';
+
+export default function useDatabase() {
+  const databaseName = useSelector((state) => state.cloning.config.database);
+
+  return React.useMemo(() => {
+    if (databaseName === 'elabftw') {
+      return eLabFTWInterface;
+    }
+    if (databaseName === 'dummy') {
+      return dummyInterface;
+    }
+    return null;
+  }, [databaseName]);
+}

package/src/hooks/useDragAndDropFile.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export default function useDragAndDropFile() {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [files, setFiles] = React.useState([]);
+
+  const handleDragOver = React.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = React.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = React.useCallback(async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    setFiles(e.dataTransfer.files);
+  }, []);
+
+  const clearFiles = React.useCallback(() => {
+    setFiles([]);
+  }, []);
+
+  return { handleDragLeave, handleDragOver, handleDrop, isDragging, files, clearFiles };
+}

package/src/hooks/useGatewaySites.js

@@ -0,0 +1,40 @@
+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';
+
+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 attemptAgain = useCallback(() => {
+    setConnectAttempt((p) => p + 1);
+  }, []);
+
+  React.useEffect(() => {
+    async function getSitesInTarget() {
+      setRequestStatus({ status: 'loading', message: 'loading' });
+      const url = backendRoute('annotation/get_gateway_sites');
+      const state = store.getState();
+      const sequence = state.cloning.sequences.find((seq) => seq.id === target);
+      try {
+        const { data: donorSites } = await httpClient.post(url, sequence, { params: { greedy } });
+        setRequestStatus({ status: 'success', message: '' });
+        setSites(formatGatewaySites(donorSites, 'att'));
+      } catch (error) {
+        setRequestStatus({ status: 'error', message: error2String(error) });
+        setSites([]);
+      }
+    }
+    if (target) {
+      getSitesInTarget();
+    }
+  }, [store, connectAttempt, target, greedy]);
+  return { requestStatus, attemptAgain, sites };
+}

package/src/hooks/useHttpClient.js

@@ -0,0 +1,12 @@
+import { useSelector } from 'react-redux';
+import React from 'react';
+import getHttpClient from '@opencloning/utils/getHttpClient';
+
+export default function useHttpClient() {
+  const backendUrl = useSelector((state) => state.cloning.config.backendUrl);
+
+  // Memoize the client creation and interceptor setup
+  const apiClient = React.useMemo(() => getHttpClient([backendUrl]), [backendUrl]);
+
+  return apiClient;
+}

package/src/hooks/useLoadDatabaseFile.js

@@ -0,0 +1,108 @@
+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 { getIdsOfSequencesWithoutChildSource } from '@opencloning/store/cloning_utils';
+import { mergeStates, graftState } from '@opencloning/utils/network';
+import { cloningActions } from '@opencloning/store/cloning';
+import useDatabase from './useDatabase';
+
+const { deleteSourceAndItsChildren, setState: setCloningState } = cloningActions;
+
+export default function useLoadDatabaseFile({ source, sendPostRequest, setHistoryFileError }) {
+  const dispatch = useDispatch();
+  const validateState = useValidateState();
+  const store = useStore();
+  const database = useDatabase();
+
+  const loadDatabaseFile = async (file, databaseId, ancestors = false) => {
+    if (file.name.endsWith('.json')) {
+      let cloningStrategy;
+      try {
+        ({ cloningStrategy } = await loadHistoryFile(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) {
+          const lastSource = cloningStrategy.sources.find((s) => s.id === terminalSequences[0]);
+          lastSource.database_id = databaseId;
+        }
+        // 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))) {
+            return { id: s.id, type: 'DatabaseSource', input: [], database_id: s.database_id };
+          }
+          return s;
+        });
+
+        // Get primer names (in case they have changed with respect to what was in the file)
+        // and verify that the sequence of the primer in the database is the same as the sequence in the cloning strategy
+        const primerDatabaseIds = cloningStrategy.primers.filter((p) => p.database_id).map((p) => p.database_id);
+        const databasePrimers = await Promise.all(primerDatabaseIds.map(database.getPrimer));
+        databasePrimers.forEach((databasePrimer, index) => {
+          const primerInCloningStrategy = cloningStrategy.primers.find((p) => p.database_id === databasePrimer.database_id);
+          primerInCloningStrategy.name = databasePrimer.name;
+          if (primerInCloningStrategy.sequence !== databasePrimer.sequence) {
+            throw new Error(`The sequence of primer ${primerInCloningStrategy.name} (${primerInCloningStrategy.database_id}) conflicts with the sequence in the database`);
+          }
+        });
+
+        // Get the sequence name from the database and update the cloning strategy with it if it is different
+        await Promise.all(cloningStrategy.sources.filter((s) => s.database_id).map(async (cloningSource) => {
+          const seqDatabaseId = cloningSource.database_id;
+          const sequence = cloningStrategy.sequences.find((e) => e.id === cloningSource.id);
+          const seq = convertToTeselaJson(sequence);
+          const databaseName = await database.getSequenceName(seqDatabaseId);
+          if (seq.name !== databaseName) {
+            seq.name = databaseName;
+            const genbank = jsonToGenbank(seq);
+            sequence.file_content = genbank;
+            // Maybe this is unnecessary
+            cloningSource.output_name = databaseName;
+          }
+        }));
+      } catch (e) {
+        console.error(e);
+        setHistoryFileError(e.message);
+        return;
+      }
+      // This one won't have the source.id deleted
+      const prevState = store.getState().cloning;
+      cloningStrategy = await validateState(cloningStrategy);
+
+      batch(() => {
+        // Replace the source with the new one if called from a source
+        if (!ancestors) {
+          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));
+          }
+        }
+      });
+    } else {
+      const requestData = new FormData();
+      requestData.append('file', file);
+      const config = {
+        headers: {
+          'content-type': 'multipart/form-data',
+        },
+      };
+      const modifySource = (s) => ({ ...s, database_id: databaseId });
+      sendPostRequest({ endpoint: 'read_from_file', requestData, config, source, modifySource });
+    }
+  };
+  return { loadDatabaseFile };
+}

package/src/hooks/useStoreEditor.js

@@ -0,0 +1,101 @@
+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 { findRotation, syncChromatogramDataWithAlignment } from '@opencloning/utils/sequenceManipulation';
+import { getReverseComplementSequenceAndAnnotations, getReverseComplementSequenceString, rotateSequenceDataToPosition } from '@teselagen/sequence-utils';
+
+export default function useStoreEditor() {
+  const store = useStore();
+
+  const updateStoreEditor = async (editorName, id, selectionLayer = {}) => {
+    if (id === null) {
+      // if id is null and selectionLayer is empty, clear the sequenceData
+      if (Object.keys(selectionLayer).length === 0) {
+        updateEditor(store, editorName, { sequenceData: {}, selectionLayer, sequenceDataHistory: {} });
+      } else {
+        updateEditor(store, editorName, { selectionLayer, sequenceDataHistory: {} });
+      }
+    } else {
+      // otherwise, update the sequenceData with the new id
+      const { cloning } = store.getState();
+      const { teselaJsonCache } = cloning;
+      const sequenceData = { ...teselaJsonCache[id] };
+      const sequence = cloning.sequences.find((e) => e.id === id);
+      const sequenceWithoutSequencingField = { ...sequence };
+      delete sequenceWithoutSequencingField.sequencing;
+      const pcrPrimers = getPCRPrimers(cloning, id);
+      const alignmentFiles = cloning.files.filter((e) => e.sequence_id === id && e.file_type === 'Sequencing file');
+      let { panelsShown } = store.getState().VectorEditor.mainEditor;
+      if (alignmentFiles.length > 0) {
+        addAlignment(store, {
+          id: 'simpleAlignment',
+          alignmentType: 'Sequencing alignment',
+          name: `Seq. ${id}`,
+          // set the visibilities of the annotations you'd like to see
+          alignmentAnnotationVisibility: {
+            features: true,
+            parts: true,
+            translations: true,
+          },
+          alignmentTracks: [
+            {
+              sequenceData,
+              alignmentData: {
+                // the alignmentData just needs the sequence < TODO this has to be changed to be the largest ---
+                sequence: alignmentFiles[0].alignment[0],
+              },
+            },
+            ...await Promise.all(alignmentFiles.map(async (aln) => {
+              const fileContent = await getTeselaJsonFromBase64(sessionStorage.getItem(`verification-${id}-${aln.file_name}`), aln.file_name);
+              let chromatogramData = fileContent.chromatogramData;
+              let alignmentSequenceData = {
+                name: aln.file_name,
+                sequence: aln.alignment[1].replaceAll('-', ''),
+              };
+              if (chromatogramData) {
+                chromatogramData = syncChromatogramDataWithAlignment(chromatogramData, aln.alignment[1]);
+              }
+              if (fileContent.features && fileContent.features.length > 0) {
+                alignmentSequenceData = fileContent;
+                const alignmentSequence = aln.alignment[1].replaceAll('-', '');
+                let rotation = findRotation(fileContent.sequence, alignmentSequence);
+                // If the rotation is -1, it may be reverse complemented
+                const reverseComplemented = rotation === -1;
+                if (reverseComplemented) {
+                  rotation = findRotation(fileContent.sequence, getReverseComplementSequenceString(alignmentSequence));
+                  alignmentSequenceData = getReverseComplementSequenceAndAnnotations(fileContent);
+                }
+                if (rotation !== -1 && rotation !== 0) {
+                  rotation = reverseComplemented ? fileContent.sequence.length - rotation : rotation;
+                  alignmentSequenceData = rotateSequenceDataToPosition(alignmentSequenceData, rotation);
+                }
+              }
+              return {
+                sequenceData: {...alignmentSequenceData, name: aln.file_name},
+                alignmentData: {
+                  sequence: aln.alignment[1],
+                },
+                chromatogramData,
+              };
+            })),
+          ],
+        });
+        panelsShown = [[
+          ...panelsShown[0].filter((p) => p.id !== 'simpleAlignment'),
+          {
+            id: 'simpleAlignment',
+            type: 'alignment',
+            name: 'Alignments',
+            active: true,
+            isFullscreen: false,
+          },
+        ]];
+      }
+      sequenceData.primers = sequenceData.primers.concat([...pcrPrimers]);
+      updateEditor(store, editorName, { sequenceData, selectionLayer, panelsShown, sequenceDataHistory: {} });
+    }
+  };
+
+  return { updateStoreEditor };
+}

package/src/hooks/useValidateState.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import useAlerts from './useAlerts';
+import useBackendRoute from './useBackendRoute';
+import useHttpClient from './useHttpClient';
+
+export default function useValidateState() {
+  const backendRoute = useBackendRoute();
+  const { addAlert } = useAlerts();
+  const httpClient = useHttpClient();
+
+  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);
+      if (response.data !== null) {
+        response.headers['x-warning'].split(';').forEach((warning) => {
+          addAlert({
+            message: warning,
+            severity: 'warning',
+          });
+        });
+      }
+      // Either return the updated state or the original state if it was valid
+      return response.data || newState;
+    } catch (e) {
+      if (e.code === 'ERR_NETWORK') {
+        addAlert({
+          message: 'Cannot connect to backend server to validate the JSON file',
+          severity: 'error',
+        });
+      } else {
+        addAlert({
+          message: 'Cloning strategy could be loaded, but it is not valid',
+          severity: 'warning',
+        });
+      }
+      return newState;
+    }
+  }, [addAlert, backendRoute]);
+
+  return validateState;
+}

package/vitest.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'path';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: '../../tests/setup.js',
+    include: ['src/**/*.{test,spec}.{js,jsx}'],
+  },
+  resolve: {
+    alias: {
+      '@opencloning/ui': resolve(__dirname, './src'),
+      '@opencloning/store': resolve(__dirname, '../store/src'),
+      '@opencloning/utils': resolve(__dirname, '../utils/src/utils'),
+    },
+  },
+});