working #304 (#305)

cypress/e2e/source_input_constrains.cy.js

@@ -1,6 +1,6 @@
 import { clickMultiSelectOption, manuallyTypeSequence, skipGoogleSheetErrors, skipNcbiCheck } from './common_functions';
 
-const singleInputOptions = ['RestrictionEnzymeDigestionSource', 'PCRSource', 'PolymeraseExtensionSource'];
+const singleInputOptions = ['RestrictionEnzymeDigestionSource', 'PCRSource', 'PolymeraseExtensionSource', 'AnnotationSource'];
 const multiInputOptions = ['LigationSource', 'GibsonAssemblySource', 'HomologousRecombinationSource', 'RestrictionAndLigationSource', 'CRISPRSource', 'OverlapExtensionPCRLigationSource', 'GatewaySource', 'InFusionSource'];
 const allOptions = [...singleInputOptions, ...multiInputOptions];
 function checkAllOptions(sourceId) {

src/components/annotation/PlannotateAnnotationReport.jsx

@@ -0,0 +1,33 @@
+import { Dialog, DialogContent, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import React from 'react';
+
+function PlannotateAnnotationReport({ dialogOpen, setDialogOpen, report }) {
+  return (
+    <Dialog fullWidth maxWidth="lg" open={dialogOpen} onClose={() => setDialogOpen(false)}>
+      <DialogContent>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'center' }}>Feature</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'center' }}>Percent identity</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'center' }}>Percent match length</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'center' }}>Description</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {report.map((row) => (
+              <TableRow key={`${row.Feature}-${row.Description}`}>
+                <TableCell>{row.Feature}</TableCell>
+                <TableCell>{row.percent_identity}</TableCell>
+                <TableCell>{row.percent_match_length}</TableCell>
+                <TableCell>{row.Description}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default PlannotateAnnotationReport;

src/components/navigation/MainAppBar.jsx

@@ -112,7 +112,7 @@ function MainAppBar() {
   // If you want to load a particular example on page load, you can do it here.
   // React.useEffect(() => {
   //   const fetchExample = async () => {
-  //     const { data } = await axios.get('examples/gateway.json');
+  //     const { data } = await axios.get('examples/plannotate.json');
   //     loadData(data, false, dispatch, addAlert, backendRoute('validate'));
   //     // dispatch(setCurrentTab(3));
   //     // 500 ms timeout

src/components/navigation/SelectExampleDialog.jsx

@@ -34,6 +34,10 @@ const examples = [
     title: 'Gateway cloning',
     link: 'gateway.json',
   },
+  {
+    title: 'Annotate features with pLannotate',
+    link: 'plannotate.json',
+  },
 ];
 
 function SelectExampleDialog({ onClose, open }) {

src/components/sources/FinishedSource.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
+import { Button } from '@mui/material';
 import { enzymesInRestrictionEnzymeDigestionSource } from '../../utils/sourceFunctions';
+import PlannotateAnnotationReport from '../annotation/PlannotateAnnotationReport';
 
 // TODO refactor this to use common part
 
@@ -88,6 +90,23 @@ function GatewayMessage({ source }) {
   );
 }
 
+function PlannotateAnnotationMessage({ source }) {
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  return (
+    <>
+      <div>
+        Annotation from
+        {' '}
+        <a href="https://github.com/mmcguffi/pLannotate" target="_blank" rel="noopener noreferrer">pLannotate</a>
+      </div>
+      <Button onClick={() => setDialogOpen(true)}>
+        See report
+      </Button>
+      <PlannotateAnnotationReport dialogOpen={dialogOpen} setDialogOpen={setDialogOpen} report={source.annotation_report} />
+    </>
+  );
+}
+
 function FinishedSource({ sourceId }) {
   const source = useSelector((state) => state.cloning.sources.find((s) => s.id === sourceId), shallowEqual);
   const primers = useSelector((state) => state.cloning.primers, shallowEqual);
@@ -187,6 +206,7 @@ function FinishedSource({ sourceId }) {
         </>
       );
       break;
+    case 'AnnotationSource': message = <PlannotateAnnotationMessage source={source} />; break;
     default: message = '';
   }
   return (

src/components/sources/Source.jsx

@@ -10,6 +10,7 @@ import SourcePCRorHybridization from './SourcePCRorHybridization';
 import SourceHomologousRecombination from './SourceHomologousRecombination';
 import SourceGenomeRegion from './SourceGenomeRegion';
 import SourceManuallyTyped from './SourceManuallyTyped';
+import SourceAnnotation from './SourceAnnotation';
 import ELabFTWSource from './ELabFTWSource';
 import SourcePolymeraseExtension from './SourcePolymeraseExtension';
 import CollectionSource from './CollectionSource';
@@ -88,6 +89,8 @@ function Source({ sourceId }) {
       specificSource = <CollectionSource {...{ source, requestStatus, sendPostRequest }} />; break;
     case 'CopyEntity':
       specificSource = <SourceCopyEntity {...{ source }} />; break;
+    case 'AnnotationSource':
+      specificSource = <SourceAnnotation {...{ source, requestStatus, sendPostRequest }} />; break;
     default:
       break;
     /* eslint-enable */

src/components/sources/SourceAnnotation.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { useSelector } from 'react-redux';
+import { isEqual } from 'lodash-es';
+import { getInputEntitiesFromSourceId } from '../../store/cloning_utils';
+import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
+
+function SourceAnnotation({ source, requestStatus, sendPostRequest }) {
+  const [annotationTool, setAnnotationTool] = React.useState('plannotate');
+
+  const inputSequences = useSelector((state) => getInputEntitiesFromSourceId(state, source.id), isEqual);
+  const onSubmit = (event) => {
+    event.preventDefault();
+
+    const requestData = {
+      sequence: inputSequences[0],
+      source: { id: source.id, input: inputSequences.map((e) => e.id), annotation_tool: annotationTool },
+    };
+    sendPostRequest({ endpoint: 'annotate/plannotate', requestData, source });
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <FormControl fullWidth>
+        <InputLabel id="annotation-tool-label">Annotation Tool</InputLabel>
+        <Select
+          labelId="annotation-tool-label"
+          id="annotation-tool"
+          value={annotationTool}
+          label="Annotation Tool"
+          onChange={(e) => setAnnotationTool(e.target.value)}
+        >
+          <MenuItem value="plannotate">pLannotate</MenuItem>
+        </Select>
+      </FormControl>
+      <SubmitButtonBackendAPI requestStatus={requestStatus}>Annotate</SubmitButtonBackendAPI>
+    </form>
+  );
+}
+
+export default React.memo(SourceAnnotation);

src/components/sources/SourceTypeSelector.jsx

@@ -42,6 +42,7 @@ function SourceTypeSelector({ source }) {
       options.push(<MenuItem key="RestrictionEnzymeDigestionSource" value="RestrictionEnzymeDigestionSource">Restriction</MenuItem>);
       options.push(<MenuItem key="PCRSource" value="PCRSource">PCR</MenuItem>);
       options.push(<MenuItem key="PolymeraseExtensionSource" value="PolymeraseExtensionSource">Polymerase extension</MenuItem>);
+      options.push(<MenuItem key="AnnotationSource" value="AnnotationSource">Annotate features</MenuItem>);
     }
     options.push(<MenuItem key="LigationSource" value="LigationSource">Ligation (sticky / blunt)</MenuItem>);
     options.push(<MenuItem key="GibsonAssemblySource" value="GibsonAssemblySource">Gibson assembly</MenuItem>);

src/utils/sourceFunctions.js

@@ -37,4 +37,5 @@ export const classNameToEndPointMap = {
   CRISPRSource: 'crispr',
   RestrictionAndLigationSource: 'restriction_and_ligation',
   GatewaySource: 'gateway',
+  AnnotationSource: 'annotate',
 };