@opencloning/ui 1.0.0

package/src/components/sources/SourceFile.jsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import FormHelperText from '@mui/material/FormHelperText';
+import { Alert, Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select, TextField } from '@mui/material';
+import { useDispatch, batch, useStore, useSelector } from 'react-redux';
+import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
+import LabelWithTooltip from '../form/LabelWithTooltip';
+import { cloningActions } from '@opencloning/store/cloning';
+import { loadFilesToSessionStorage, loadHistoryFile, updateVerificationFileNames } from '@opencloning/utils/readNwrite';
+import useValidateState from '../../hooks/useValidateState';
+import { mergeStates, getGraftSequenceId, graftState } from '@opencloning/utils/network';
+
+const { deleteSourceAndItsChildren, restoreSource, setState: setCloningState } = cloningActions;
+
+const fileFormatToExtension = {
+  genbank: 'gb',
+  fasta: 'fasta',
+  snapgene: 'dna',
+  embl: 'embl',
+  json: 'json',
+};
+
+// A component providing an interface to import a file
+function SourceFile({ source, requestStatus, sendPostRequest }) {
+  const [circularize, setCircularize] = React.useState(false);
+  const [showCoordinates, setShowCoordinates] = React.useState(false);
+  const [coordinates, setCoordinates] = React.useState({ start: null, end: null });
+  const [fileFormat, setFileFormat] = React.useState('');
+  const hasOutput = useSelector((state) => state.cloning.sequences.some((s) => s.id === source.id));
+  // Error message for json only
+  const [alert, setAlert] = React.useState(null);
+  const dispatch = useDispatch();
+  const validateState = useValidateState();
+  const store = useStore();
+
+  const onChange = async (event) => {
+    setAlert(null);
+    const files = Array.from(event.target.files);
+    if (files.length === 0) {
+      return;
+    }
+    event.target.value = null;
+    // If the file is a history file, we load it
+    if (
+      fileFormat === 'json' || fileFormat === 'zip'
+      || (fileFormat === '' && (files[0].name.endsWith('.json') || files[0].name.endsWith('.zip')))
+    ) {
+      // If file format is explicitly set, rename file to match that extension
+      if (fileFormat) {
+        files[0] = new File([files[0]], files[0].name.replace(/\.[^/.]+$/, `.${fileFormatToExtension[fileFormat]}`), {
+          type: fileFormat === 'json' ? 'application/json' : files[0].type,
+        });
+      }
+      let cloningStrategy;
+      let verificationFiles;
+      try {
+        ({ cloningStrategy, verificationFiles } = await loadHistoryFile(files[0]));
+      } catch (e) {
+        console.error(e);
+        setAlert({ message: e.message, severity: 'error' });
+        return;
+      }
+
+      const validatedCloningStrategy = await validateState(cloningStrategy);
+      // Update the verificationFiles names if needed
+      const updatedVerificationFiles = updateVerificationFileNames(verificationFiles, cloningStrategy.files, validatedCloningStrategy.files);
+
+      const canGraft = getGraftSequenceId(validatedCloningStrategy) !== null;
+      const graft = hasOutput && canGraft;
+
+      if (hasOutput && !canGraft) {
+        setAlert({ message: 'Cannot graft cloning strategy as it does not converge on a single sequence, you can load it on a source without outputs', severity: 'error' });
+        return;
+      }
+
+      batch(async () => {
+        if (!graft) {
+          // Replace the source with the new one
+          dispatch(deleteSourceAndItsChildren(source.id));
+        }
+        try {
+          const cloningState = store.getState().cloning;
+          let mergedState;
+          let idShift;
+          if (graft) {
+            ({ mergedState, idShift } = graftState(validatedCloningStrategy, cloningState, source.id));
+          } else {
+            ({ mergedState, idShift } = mergeStates(validatedCloningStrategy, cloningState));
+          }
+          dispatch(setCloningState(mergedState));
+          await loadFilesToSessionStorage(updatedVerificationFiles, idShift);
+        } catch (e) {
+          setAlert({ message: e.message, severity: 'error' });
+          dispatch(restoreSource({ ...source, type: 'UploadedFileSource' }));
+        }
+      });
+      return;
+    }
+    const requestData = new FormData();
+    requestData.append('file', files[0]);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+      params: { circularize, sequence_file_format: fileFormat || null, ...coordinates },
+    };
+    sendPostRequest({ endpoint: 'read_from_file', requestData, config, source });
+  };
+
+  const updateCoordinates = (value, isStart) => {
+    setCoordinates((prev) => ({ ...prev, [isStart ? 'start' : 'end']: value }));
+  };
+
+  const onShowCoordinatesChange = () => {
+    const newShowCoordinates = !showCoordinates;
+    setShowCoordinates(newShowCoordinates);
+    if (!newShowCoordinates) {
+      setCoordinates({ start: null, end: null });
+    }
+  };
+
+  return (
+    <form className="submit-sequence-file" onSubmit={(e) => e.preventDefault()}>
+      <FormControl fullWidth>
+        <InputLabel id="select-file-format" shrink>File format</InputLabel>
+        <Select
+          labelId="select-file-format"
+          id="select-file-format"
+          value={fileFormat}
+          onChange={(e) => setFileFormat(e.target.value)}
+          label="File format"
+          displayEmpty
+        >
+          <MenuItem value="">Guess from extension</MenuItem>
+          <MenuItem value="genbank">Genbank / Ape</MenuItem>
+          <MenuItem value="fasta">FASTA</MenuItem>
+          <MenuItem value="snapgene">SnapGene (.dna)</MenuItem>
+          <MenuItem value="embl">EMBL</MenuItem>
+          <MenuItem value="json">JSON (history file)</MenuItem>
+          <MenuItem value="zip">Zip (history folder)</MenuItem>
+        </Select>
+      </FormControl>
+
+      <FormControl fullWidth>
+        <FormControlLabel
+          control={<Checkbox checked={circularize} onChange={() => setCircularize(!circularize)} />}
+          label={<LabelWithTooltip label="Circularize" tooltip="Make the sequence circular (for GenBank or Snapgene files, it will override the topology indicated in the file)" />}
+        />
+        <FormControlLabel
+          control={<Checkbox checked={showCoordinates} onChange={onShowCoordinatesChange} />}
+          label={<LabelWithTooltip label="Extract subsequence" tooltip="Does not work with JSON or Zip files" />}
+        />
+        {showCoordinates && (
+          <FormControl fullWidth className="extract-subsequence">
+            <TextField
+              label="Start"
+              value={coordinates.start}
+              onChange={(e) => updateCoordinates(e.target.value, true)}
+              type="number"
+            />
+            <TextField
+              label="End"
+              value={coordinates.end}
+              onChange={(e) => updateCoordinates(e.target.value, false)}
+              type="number"
+            />
+          </FormControl>
+        )}
+      </FormControl>
+
+      {alert && (<Alert sx={{ marginTop: '10px' }} severity={alert.severity}>{alert.message}</Alert>)}
+      <SubmitButtonBackendAPI
+        component="label"
+        requestStatus={requestStatus}
+        {...(import.meta.env.VITE_UMAMI_WEBSITE_ID && { "data-umami-event": "submit-file" })}
+      >
+        Select File
+        <input
+          type="file"
+          hidden
+          onChange={onChange}
+        />
+      </SubmitButtonBackendAPI>
+      <FormHelperText>Supports .gb, .dna, .embl, .fasta, .fa, .ape</FormHelperText>
+    </form>
+  );
+}
+
+export default SourceFile;

package/src/components/sources/SourceGenomeRegion.cy.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { AssemblyIdSelector, SpeciesPicker, SequenceAccessionPicker, } from './SourceGenomeRegion';
+
+describe('<AssemblyIdSelector />', () => {
+  it('can propose a paired accession if the assembly has no annotation', () => {
+    const setAssemblyId = cy.spy().as('setAssemblyId');
+    const setHasAnnotation = cy.spy().as('setHasAnnotation');
+    const onAssemblyIdChange = cy.spy().as('onAssemblyIdChange');
+
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCA_000002945.3/dataset_report*', {
+      statusCode: 200,
+      body: {
+        reports: [{
+          accession: 'GCA_000002945.3',
+          organism: {
+            tax_id: 559292,
+            organism_name: 'Saccharomyces cerevisiae'
+          },
+          annotation_info: undefined,
+          paired_accession: 'GCF_000002945.3',
+          assembly_info: {
+            assembly_status: 'current'
+          }
+        }]
+      }
+    }).as('getAssemblyInfo');
+
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCF_000002945.3/dataset_report*', {
+      statusCode: 200, 
+      body: {
+        reports: [{
+          accession: 'GCF_000002945.3',
+          organism: {
+            tax_id: 559292,
+            organism_name: 'Saccharomyces cerevisiae'
+          },
+          annotation_info: {},
+          assembly_info: {
+            assembly_status: 'current'
+          }
+        }]
+      }
+    }).as('getPairedAssemblyInfo');
+
+    cy.mount(
+      <AssemblyIdSelector 
+        setAssemblyId={setAssemblyId}
+        setHasAnnotation={setHasAnnotation}
+        onAssemblyIdChange={onAssemblyIdChange}
+      />
+    );
+    cy.get('input').type('GCA_000002945.3');
+    cy.wait('@getAssemblyInfo');
+
+    cy.wait('@getPairedAssemblyInfo');
+    cy.contains('Equivalent assembly GCF_000002945.3 has annotation').should('exist');
+  });
+  it('handles NCBI being down displaying the right error', () => {
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCA_000002945.3/dataset_report*', {
+      statusCode: 500,
+      body: {}
+    }).as('getAssemblyInfo');
+
+    cy.mount(
+      <AssemblyIdSelector setAssemblyId={cy.spy()} setHasAnnotation={cy.spy()} onAssemblyIdChange={cy.spy()} />
+    );
+    cy.get('input').type('GCA_000002945.3', { delay: 0});
+    cy.wait('@getAssemblyInfo');
+    cy.contains('Could not connect to server for validation.').should('exist');
+  });
+});
+
+describe('<SpeciesPicker />', () => {
+  it('handles NCBI being down displaying the right error', () => {
+    const setSpecies = cy.spy().as('setSpecies');
+    const setAssemblyId = cy.spy().as('setAssemblyId');
+
+    cy.mount(
+      <SpeciesPicker setSpecies={setSpecies} setAssemblyId={setAssemblyId} />
+    );
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/taxonomy/taxon_suggest/**', {
+      statusCode: 500,
+      body: {}
+    }).as('getTaxonSuggest');
+
+    cy.get('input').type('Saccharomyces cerevisiae', { delay: 0});
+    cy.wait('@getTaxonSuggest');
+    cy.contains('Could not retrieve data').should('exist');
+    // cy.get('li').contains('Saccharomyces cerevisiae - 559292').click();
+  });
+});
+
+describe('<SequenceAccessionPicker />', () => {
+  it('handles NCBI being down displaying the right error', () => {
+    const setSequenceAccession = cy.spy().as('setSequenceAccession');
+    const assemblyAccession = 'GCA_000002945.3';
+
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCA_000002945.3/sequence_reports*', {
+      statusCode: 500,
+      body: {}
+    }).as('getSequenceReports');
+
+    cy.mount(
+      <SequenceAccessionPicker assemblyAccession={assemblyAccession} sequenceAccession={''} setSequenceAccession={setSequenceAccession} />
+    );
+    cy.contains('Could not load chromosomes').should('exist');
+  });
+  it('displays the chromosomes', () => {
+    const setSequenceAccession = cy.spy().as('setSequenceAccession');
+    const assemblyAccession = 'GCA_000002945.3';
+
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCA_000002945.3/sequence_reports*', {
+      statusCode: 200,
+      body: { reports: [{ chr_name: 'chr1', refseq_accession: 'NC_000001.10' }, { chr_name: 'chr2', refseq_accession: 'NC_000002.11' }] }
+    }).as('getSequenceReports');
+
+    cy.mount(
+      <SequenceAccessionPicker assemblyAccession={assemblyAccession} setSequenceAccession={setSequenceAccession} />
+    );
+    cy.wait('@getSequenceReports');
+    cy.get('label').siblings('div').first().click();
+    cy.contains('chr1 - NC_000001.10').should('exist');
+    cy.contains('chr2 - NC_000002.11').should('exist');
+    cy.get('div[role="presentation"]').contains('chr1 - NC_000001.10').click();
+    // Check that the spy was called with the expected value
+    cy.get('@setSequenceAccession').should('have.been.calledWith', 'NC_000001.10');
+
+  });
+});
+
+