@opencloning/ui 1.0.0

package/src/components/sources/repositoryMetadata.js

@@ -0,0 +1,14 @@
+const repositoryMetadata = {
+  AddgeneIdSource: { slug: 'addgene', label: 'Addgene', inputLabel: 'Addgene ID', example: '39296' },
+  BenchlingUrlSource: { slug: 'benchling', label: 'Benchling', inputLabel: 'Benchling URL' },
+  EuroscarfSource: { slug: 'euroscarf', label: 'Euroscarf', inputLabel: 'Euroscarf ID', example: 'P30174' },
+  NCBISequenceSource: { slug: 'genbank', label: 'GenBank', inputLabel: 'GenBank ID', example: 'NM_001018957.2' },
+  IGEMSource: { slug: 'igem', label: 'iGEM' },
+  OpenDNACollectionsSource: { slug: 'open_dna_collections', label: 'Open DNA Collections' },
+  SEVASource: { slug: 'seva', label: 'SEVA Plasmids' },
+  SnapGenePlasmidSource: { slug: 'snapgene', label: 'SnapGene' },
+  WekWikGeneIdSource: { slug: 'wekwikgene', label: 'WeKwikGene', inputLabel: 'WeKwikGene ID', example: '0000304' },
+};
+
+export default repositoryMetadata;
+

package/src/components/verification/LoadFromDatabaseButton.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControlLabel } from '@mui/material';
+import useDatabase from '../../hooks/useDatabase';
+import { sequencingFileExtensions } from '@opencloning/utils/sequencingFileExtensions';
+
+function LoadFromDatabaseButton({ databaseId, onFileChange, setError, existingFileNames }) {
+  const database = useDatabase();
+  const [open, setOpen] = React.useState(false);
+  const [files, setFiles] = React.useState([]);
+  const [selectedFiles, setSelectedFiles] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    setSelectedFiles([]);
+  }, [open]);
+
+  React.useEffect(() => {
+    async function getFiles() {
+      setLoading(true);
+      const allFiles = await database.getSequencingFiles(databaseId);
+      setFiles(allFiles.filter((file) => sequencingFileExtensions.includes(file.name.toLowerCase().split('.').pop())));
+      setLoading(false);
+    }
+    if (open) {
+      getFiles();
+    }
+  }, [open]);
+
+  const handleSubmit = async () => {
+    setOpen(false);
+    try {
+      const filesToLoad = await Promise.all(selectedFiles.map((file) => files.find((f) => f.name === file).getFile()));
+      onFileChange(filesToLoad);
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        variant="contained"
+        onClick={() => setOpen(true)}
+      >
+        {`Load from ${database.name}`}
+      </Button>
+      <Dialog open={open} onClose={() => setOpen(false)}>
+        <DialogTitle>Select sequencing files to load</DialogTitle>
+        <DialogContent>
+          {loading && <CircularProgress />}
+          {!loading && files.length > 0 && (
+            <div>
+              {files.map((file, index) => (
+                <div key={file.name}>
+                  <FormControlLabel
+                    control={(
+                      <Checkbox
+                        disabled={existingFileNames.includes(file.name)}
+                        checked={selectedFiles.includes(file.name) || existingFileNames.includes(file.name)}
+                        onChange={(e) => {
+                          if (e.target.checked) {
+                            setSelectedFiles([...selectedFiles, file.name]);
+                          } else {
+                            setSelectedFiles(selectedFiles.filter((f) => f !== file.name));
+                          }
+                        }}
+                      />
+                    )}
+                    label={file.name}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+          {!loading && files.length === 0 && (
+            <DialogContentText>
+              No sequencing files found in the database.
+            </DialogContentText>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button color="error" onClick={() => setOpen(false)}>Cancel</Button>
+          <Button color="primary" onClick={handleSubmit}>Load</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+
+export default LoadFromDatabaseButton;

package/src/components/verification/SequencingFileRow.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+import DownloadIcon from '@mui/icons-material/Download';
+import {
+  TableCell,
+  TableRow,
+  IconButton,
+} from '@mui/material';
+import { useSelector } from 'react-redux';
+
+function SequencingFileRow({ id, fileName, removeFile, downloadFile }) {
+  const fileType = useSelector((state) => state.cloning.files.find((f) => f.file_name === fileName && f.sequence_id === id).file_type);
+
+  return (
+    <TableRow>
+      <TableCell sx={{ display: 'flex', alignItems: 'center' }}>
+        <IconButton onClick={() => removeFile(fileName)}>
+          <DeleteIcon />
+        </IconButton>
+        <IconButton onClick={() => downloadFile(fileName)} color="primary">
+          <DownloadIcon />
+        </IconButton>
+      </TableCell>
+      <TableCell>
+        {fileName}
+      </TableCell>
+      <TableCell>
+        {fileType}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default SequencingFileRow;

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

@@ -0,0 +1,176 @@
+import React from 'react';
+import VerificationFileDialog from './VerificationFileDialog';
+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';
+
+const { setFiles, setConfig } = cloningActions;
+
+const dummyFiles = [
+  { file_name: 'file1.txt', sequence_id: 1, file_type: 'Sequencing file' },
+  { file_name: 'file2.txt', sequence_id: 1, file_type: 'Sequencing file' },
+  { file_name: 'file1.txt', sequence_id: 2, file_type: 'Sequencing file' },
+];
+// This is the base64 encoded string for the text "hello"
+const base64str = 'aGVsbG8=';
+
+describe('<VerificationFileDialog />', () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+  it('renders and calls setDialogOpen with false when clicking close button', () => {
+    // see: https://on.cypress.io/mounting-react
+    const setDialogOpenSpy = cy.spy().as('setDialogOpenSpy');
+    cy.mount(<VerificationFileDialog id={1} dialogOpen setDialogOpen={setDialogOpenSpy} />);
+
+    // Click close button
+    cy.get('button').contains('Close').click();
+    cy.get('@setDialogOpenSpy').should('have.been.calledWith', false);
+
+    // Reset spy
+    setDialogOpenSpy.resetHistory();
+
+    // Click outside dialog
+    cy.get('.MuiDialog-container').click(0, 0);
+    cy.get('@setDialogOpenSpy').should('have.been.calledWith', false);
+  });
+
+  it('displays existing files and can download and delete them', () => {
+    store.dispatch(setFiles(dummyFiles));
+    dummyFiles.forEach((file) => {
+      sessionStorage.setItem(getVerificationFileName(file), base64str);
+    });
+    cy.mount(<VerificationFileDialog id={1} dialogOpen setDialogOpen={() => {}} />);
+    // Even though there are two files with the same name, only one should be displayed
+    cy.get('table td').filter(':contains("file1.txt")').should('have.length', 1);
+    cy.get('table').contains('file2.txt');
+    cy.get('table td').filter(':contains("Sequencing file")').should('have.length', 2);
+    cy.get('[data-testid="DownloadIcon"]').first().click();
+    cy.readFile('cypress/downloads/file1.txt').should('eq', 'hello');
+
+    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');
+  });
+
+  it('can submit files and aligns them', () => {
+    store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
+
+    loadDataAndMount(
+      'cypress/test_files/sequencing/cloning_strategy_linear.json',
+      store,
+      () => {
+        cy.mount(<VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />);
+      },
+    ).then(() => {
+      cy.get('button').contains('Submit files').click();
+      cy.get('input[type="file"]').selectFile('cypress/test_files/sequencing/BZO902-13409020-13409020.ab1', { force: true });
+      cy.get('table').contains('BZO902-13409020-13409020.ab1', { timeout: 20000 });
+    }).then(() => {
+      const file = store.getState().cloning.files.find(
+        (f) => f.file_name === 'BZO902-13409020-13409020.ab1',
+      );
+      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))
+        .should('not.be.null', { timeout: 10000 });
+
+      cy.intercept('POST', 'http://127.0.0.1:8000/align_sanger*', {
+        statusCode: 200,
+        body: ['A', 'T', 'C'],
+      }).as('alignSanger');
+      // We upload another file now
+      cy.get('button').contains('Submit files').click();
+      cy.get('input[type="file"]').selectFile('cypress/test_files/sequencing/BZO903-13409037-13409037.ab1', { force: true });
+
+      cy.get('table').contains('BZO903-13409037-13409037.ab1', { timeout: 20000 });
+      cy.wait('@alignSanger').then((interception) => {
+        // Submits both the old and new sequences for alignment
+        expect(interception.request.body.traces).to.have.length(2);
+      });
+    })
+      .then(() => {
+      // The file has been added to the store
+        const file = store.getState().cloning.files.find(
+          (f) => f.file_name === 'BZO903-13409037-13409037.ab1',
+        );
+        cy.expect(file).to.exist;
+        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))
+          .should('not.be.null', { timeout: 10000 });
+      });
+  });
+  it('handles errors', () => {
+    store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
+    loadDataAndMount(
+      'cypress/test_files/sequencing/cloning_strategy_linear.json',
+      store,
+      () => {
+        cy.mount(<VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />);
+      },
+    ).then(() => {
+      // Error if submitting non-allowed files
+      cy.get('button').contains('Submit files').click();
+      cy.get('input[type="file"]').selectFile('cypress/test_files/sequencing/cloning_strategy_linear.json', { force: true });
+      cy.contains('Only ab1');
+
+      // Error if submitting .ab1 files that are not valid
+      cy.get('button').contains('Submit files').click();
+      cy.get('input[type="file"]').selectFile('cypress/test_files/sequencing/wrong.ab1', { force: true });
+      cy.contains('Error parsing wrong.ab1:', { timeout: 20000 });
+
+      cy.intercept('POST', 'http://127.0.0.1:8000/align_sanger*', {
+        statusCode: 200,
+        body: ['A', 'T'],
+      });
+      // Error if name already exists
+      // Add it once
+      cy.get('button').contains('Submit files').click();
+      cy.get('input[type="file"]').selectFile('cypress/test_files/sequencing/BZO903-13409037-13409037.ab1', { force: true });
+      cy.get('table').contains('BZO903-13409037-13409037.ab1', { timeout: 20000 });
+
+      // Add it again
+      cy.get('button').contains('Submit files').click();
+      cy.get('input[type="file"]').selectFile('cypress/test_files/sequencing/BZO903-13409037-13409037.ab1', { force: true });
+      cy.contains('A file named BZO903-13409037-13409037.ab1 is already associated to this sequence');
+
+      // Error if the server returns an error
+      cy.intercept('POST', 'http://127.0.0.1:8000/align_sanger*', {
+        statusCode: 500,
+      });
+      cy.get('button').contains('Submit files').click();
+      cy.get('input[type="file"]').selectFile('cypress/test_files/sequencing/BZO902-13409020-13409020.ab1', { force: true });
+      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');
+
+      // Connection error
+      cy.intercept('POST', 'http://127.0.0.1:8000/align_sanger*', {
+        forceNetworkError: true,
+      });
+      cy.get('button').contains('Submit files').click();
+      cy.get('input[type="file"]').selectFile('cypress/test_files/sequencing/BZO902-13409020-13409020.ab1', { force: true });
+      cy.contains('Network Error');
+    });
+  });
+});

package/src/components/verification/VerificationFileDialog.jsx

@@ -0,0 +1,248 @@
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Box,
+  CircularProgress,
+  Alert,
+} from '@mui/material';
+import { batch, shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
+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 { getVerificationFileName } from '@opencloning/utils/readNwrite';
+
+const { addFile, removeFile: removeFileAction, removeFilesAssociatedToSequence, setMainSequenceId, setCurrentTab } = cloningActions;
+
+export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }) {
+  const fileNames = useSelector((state) => state.cloning.files.filter((f) => (f.sequence_id === id)).map((f) => f.file_name), shallowEqual);
+  const fileTypes = useSelector((state) => state.cloning.files.filter((f) => (f.sequence_id === id)).map((f) => f.file_type), shallowEqual);
+  const hasSequencingFile = fileTypes.includes('Sequencing file');
+  const databaseId = useSelector((state) => state.cloning.sources.find((s) => s.id === id)?.database_id, isEqual);
+
+  const sequence = useSelector((state) => state.cloning.sequences.find((e) => e.id === id), shallowEqual);
+  const [loadingMessage, setLoadingMessage] = useState('');
+  const [error, setError] = useState('');
+  const dispatch = useDispatch();
+  const fileInputRef = useRef(null);
+  const { updateStoreEditor } = useStoreEditor();
+  const backendRoute = useBackendRoute();
+  const store = useStore();
+  const httpClient = useHttpClient();
+
+  const toggleMain = React.useCallback(() => {
+    dispatch(setMainSequenceId(id));
+    dispatch(setCurrentTab(3));
+    updateStoreEditor('mainEditor', id);
+    // TODO: ideally this should be done with a ref
+    document.getElementById('opencloning-app-tabs')?.scrollIntoView();
+  }, [id]);
+
+  const handleFileUpload = async (newFiles) => {
+    // Clear the input
+    fileInputRef.current.value = '';
+    if (newFiles.some((file) => !sequencingFileExtensions.includes(file.name.toLowerCase().split('.').pop()))) {
+      throw new Error(`Only ${sequencingFileExtensions.join(', ')} files are accepted`);
+    }
+
+    // Read the new sequencing files
+    const parsedSequencingFiles = await Promise.all(newFiles.map(async (newFile) => {
+      const base64str = await file2base64(newFile);
+      return {
+        sequence_id: id,
+        trace: (await getTeselaJsonFromBase64(base64str, newFile.name)).sequence,
+        base64str,
+        file_name: newFile.name,
+        file_type: 'Sequencing file',
+      };
+    }));
+
+    // Read the existing sequencing files
+    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 trace = (await getTeselaJsonFromBase64(base64str, f.file_name)).sequence;
+        return { ...f, base64str, trace };
+      }));
+
+    // Throw an error if repeated files are found
+    const existingSequencingFilesInStateNames = existingSequencingFilesInState.map((f) => f.file_name);
+    const repeatedFile = parsedSequencingFiles.find((f) => existingSequencingFilesInStateNames.includes(f.file_name));
+    if (repeatedFile) {
+      throw new Error(`A file named ${repeatedFile.file_name} is already associated to this sequence`);
+    }
+
+    // We have to align all again to have a common reference
+    const allSequencingFiles = [...existingSequencingFilesInState, ...parsedSequencingFiles];
+    const alignments = [];
+    const traces = allSequencingFiles.map((f) => f.trace);
+    const resp = await httpClient.post(backendRoute('align_sanger'), { sequence, traces });
+
+    for (let i = 0; i < allSequencingFiles.length; i++) {
+      alignments.push({ ...allSequencingFiles[i], alignment: [resp.data[0], resp.data[i + 1]] });
+    }
+
+    // Add the files to the store
+    batch(() => {
+      dispatch(removeFilesAssociatedToSequence(id));
+      alignments.forEach((alignment) => {
+        const { trace, base64str, ...rest } = alignment;
+        dispatch(addFile(rest));
+      });
+      alignments.forEach(({ base64str, file_name }) => { sessionStorage.setItem(`verification-${id}-${file_name}`, base64str); });
+    });
+    setLoadingMessage('');
+  };
+
+  const onFileChange = useCallback(async (files) => {
+    setLoadingMessage('Aligning...');
+    setError('');
+    try {
+      await handleFileUpload(files);
+      setLoadingMessage('');
+    } catch (e) {
+      setError(e.message);
+      setLoadingMessage('');
+    }
+  }, [handleFileUpload]);
+
+  const removeFile = useCallback((fileName) => {
+    dispatch(removeFileAction({ fileName, sequenceId: id }));
+    sessionStorage.removeItem(`verification-${id}-${fileName}`);
+  }, [id]);
+
+  const handleClickUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const downloadFile = (fileName) => {
+    const base64Content = sessionStorage.getItem(`verification-${id}-${fileName}`);
+    if (!base64Content) {
+      setError(`File ${fileName} not found in session storage`);
+      return;
+    }
+    const binaryString = atob(base64Content);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    const file = new Blob([bytes], { type: 'application/octet-stream' });
+    const url = URL.createObjectURL(file);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Dialog
+      open={dialogOpen}
+      onClose={() => setDialogOpen(false)}
+      className="verification-file-dialog"
+      maxWidth="md"
+      fullWidth
+      sx={{ textAlign: 'center' }}
+    >
+      <DialogTitle>Verification files</DialogTitle>
+      <DialogContent>
+        <input
+          type="file"
+          accept={sequencingFileExtensions.map((ext) => `.${ext}`).join(', ')}
+          multiple
+          onChange={(event) => onFileChange(Array.from(event.target.files))}
+          style={{ display: 'none' }}
+          ref={fileInputRef}
+        />
+
+        {loadingMessage && (
+          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', my: 2 }}>
+            <CircularProgress />
+            <Box sx={{ ml: 2, fontSize: '1.2rem' }}>{loadingMessage}</Box>
+          </Box>
+        )}
+
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell />
+                <TableCell>File Name</TableCell>
+                <TableCell>Type</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {fileNames.map((fileName) => (
+                <SequencingFileRow
+                  key={fileName}
+                  id={id}
+                  fileName={fileName}
+                  removeFile={removeFile}
+                  downloadFile={downloadFile}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+
+        {error && (
+          <Box sx={{ mt: 2 }}>
+            <Alert severity="error">
+              {error}
+            </Alert>
+          </Box>
+        )}
+
+        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2, gap: 2 }}>
+          <Button
+            variant="contained"
+            onClick={handleClickUpload}
+          >
+            Submit files
+          </Button>
+
+          {databaseId && (
+            <LoadFromDatabaseButton
+              existingFileNames={fileNames}
+              databaseId={databaseId}
+              onFileChange={onFileChange}
+            />
+          )}
+
+          {hasSequencingFile && (
+          <Button
+            variant="contained"
+            onClick={() => { setDialogOpen(false); toggleMain(); }}
+            color="success"
+          >
+            See alignments in editor
+          </Button>
+          )}
+        </Box>
+
+        <DialogActions>
+          <Button onClick={() => setDialogOpen(false)}>Close</Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/config/defaultMainEditorProps.js

@@ -0,0 +1,44 @@
+export default {
+  isFullscreen: false,
+  readOnly: false,
+  disableBpEditing: true,
+  annotationVisibility: { reverseSequence: true, cutsites: false },
+  ToolBarProps: {
+    toolList: [
+      'downloadTool',
+      'undoTool',
+      'redoTool',
+      'cutsiteTool',
+      'featureTool',
+      'findTool',
+      'visibilityTool',
+    ],
+  },
+  adjustCircularLabelSpacing: true,
+  panelsShown: [[
+    {
+      id: 'rail',
+      name: 'Linear Map',
+      active: true,
+    },
+    {
+      id: 'sequence',
+      name: 'Sequence Map',
+    },
+    {
+      id: 'circular',
+      name: 'Circular Map',
+    },
+    {
+      id: 'properties',
+      name: 'Properties',
+    },
+  ]],
+  massageCmds: (cmds) => {
+    // just using the print cmd here as an example but other cmds are also valid targets for modifying
+    Object.keys(cmds).forEach((key) => {
+      delete cmds[key].hotkey;
+    });
+    return cmds;
+  },
+};

package/src/hooks/useAlerts.js

@@ -0,0 +1,16 @@
+import { useDispatch } from 'react-redux';
+import { cloningActions } from '@opencloning/store/cloning';
+
+export default function useAlerts() {
+  const dispatch = useDispatch();
+
+  const addAlert = (alert) => {
+    dispatch(cloningActions.addAlert(alert));
+  };
+
+  const removeAlert = (message) => {
+    dispatch(cloningActions.removeAlert(message));
+  };
+
+  return { addAlert, removeAlert };
+}

package/src/hooks/useBackendAPI.js

@@ -0,0 +1,51 @@
+import { useState, useCallback } from 'react';
+import error2String from '@opencloning/utils/error2String';
+import useBackendRoute from './useBackendRoute';
+import useAlerts from './useAlerts';
+import useHttpClient from './useHttpClient';
+
+export default function useBackendAPI() {
+  const [requestStatus, setRequestStatus] = useState({ status: null, message: '' });
+  const [sources, setSources] = useState([]);
+  const [sequences, setSequences] = useState([]);
+  const backendRoute = useBackendRoute();
+  const httpClient = useHttpClient();
+  const { addAlert } = useAlerts();
+
+  const sendPostRequest = 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);
+    // paramsSerializer: { indexes: null } is to correctly serialize arrays in the URL
+    const fullConfig = { ...config, paramsSerializer: { indexes: null } };
+    try {
+      const resp = await httpClient.post(url, requestData, fullConfig);
+      if (resp.headers['x-warning']) {
+        addAlert({ message: resp.headers['x-warning'], severity: 'warning' });
+      }
+
+      // Most endpoints return an error if no products would be created,
+      // but just in case, we check if response is empty and generate an error
+      // TODO: Unit test here
+      if (resp.data.sources.length === 0) {
+        setSources([]);
+        setSequences([]);
+        setRequestStatus({ status: 'error', message: 'No outputs returned' });
+        return;
+      }
+
+      setRequestStatus({ status: null, message: '' });
+
+      const receivedSources = resp.data.sources.map(modifySource);
+
+      setSources(receivedSources); setSequences(resp.data.sequences);
+    } catch (error) {
+      setRequestStatus({ status: 'error', message: error2String(error) });
+      setSources([]);
+      setSequences([]);
+    }
+  }, []);
+
+  return { requestStatus, sources, sequences, sendPostRequest };
+}