Tweak UI for new SRT

packages/libs/web-common/src/components/reporters/BedAndSequenceGenomicSequenceReporterForms.jsx

@@ -41,7 +41,7 @@ let SequenceRegionRange = (props) => {
         end={10000}
         step={1}
         onChange={getUpdateHandler(offset)}
-        size="6"
+        size={6}
       />
       nucleotides
     </React.Fragment>

packages/libs/web-common/src/components/reporters/BedGeneReporterForm.jsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import {
   RadioList,
-  CheckboxList,
   SingleSelect,
-  TextBox,
-  Checkbox,
   NumberSelector,
 } from '@veupathdb/wdk-client/lib/Components';
 import { FeaturesList } from './SequenceFormElements';
@@ -17,38 +14,52 @@ import createSequenceForm from './SequenceFormFactory';
  * Adapted from SequenceGeneReporterForm
  * (no protein options)
  */
-let util = Object.assign({}, ComponentUtils, ReporterUtils);
+const util = Object.assign({}, ComponentUtils, ReporterUtils);
 
-let splicedGenomicOptions = [
+const splicedGenomicOptions = [
   { value: 'cds', display: 'Coding Sequence' },
   { value: 'transcript', display: 'Transcript' },
 ];
 
-let dnaComponentOptions = [
+const dnaComponentOptions = [
   { value: 'exon', display: 'Exon' },
   { value: 'intron', display: 'Intron' },
 ];
 
-let transcriptComponentOptions = [
+const transcriptComponentOptions = [
   { value: 'five_prime_utr', display: "5' UTR" },
   { value: 'cds', display: 'CDS' },
   { value: 'three_prime_utr', display: "3' UTR" },
 ];
 
-let genomicAnchorValues = [
+const genomicAnchorValues = [
   { value: 'Start', display: 'Transcription Start***' },
   { value: 'CodeStart', display: 'Translation Start (ATG)' },
   { value: 'CodeEnd', display: 'Translation Stop Codon' },
   { value: 'End', display: 'Transcription Stop***' },
 ];
 
-let signs = [
+const signs = [
   { value: 'plus', display: '+' },
   { value: 'minus', display: '-' },
 ];
 
-let SequenceRegionRange = (props) => {
-  let { label, anchor, sign, offset, formState, getUpdateHandler } = props;
+const formSequenceTypeOptions = [
+  { value: 'genomic', display: 'Unspliced Genomic Region' },
+  {
+    value: 'spliced_genomic',
+    display: (
+      <>
+        Spliced Genomic Region (<i>i.e. transcribed sequences</i>)
+      </>
+    ),
+  },
+  { value: 'dna_component', display: 'DNA Component' },
+  { value: 'transcript_component', display: 'Transcript Component' },
+];
+
+const SequenceRegionRange = (props) => {
+  const { label, anchor, sign, offset, formState, getUpdateHandler } = props;
   return (
     <React.Fragment>
       <span>{label}</span>
@@ -71,15 +82,15 @@ let SequenceRegionRange = (props) => {
         end={10000}
         step={1}
         onChange={getUpdateHandler(offset)}
-        size="6"
+        size={6}
       />
       nucleotides
     </React.Fragment>
   );
 };
 
-let GenomicSequenceRegionInputs = (props) => {
-  let { formState, getUpdateHandler } = props;
+const GenomicSequenceRegionInputs = (props) => {
+  const { formState, getUpdateHandler } = props;
   return (
     <div>
       <div
@@ -114,14 +125,14 @@ let GenomicSequenceRegionInputs = (props) => {
 };
 
 /** @type import('./Types').ReporterFormComponent */
-let formBeforeCommonOptions = (props) => {
-  let { formState, updateFormState, onSubmit, includeSubmit } = props;
-  let getUpdateHandler = (fieldName) =>
+const formBeforeCommonOptions = (props) => {
+  const { formState, updateFormState, onSubmit, includeSubmit } = props;
+  const getUpdateHandler = (fieldName) =>
     util.getChangeHandler(fieldName, updateFormState, formState);
-  let typeUpdateHandler = function (newTypeValue) {
+  const typeUpdateHandler = function (newTypeValue) {
     updateFormState(Object.assign({}, formState, { type: newTypeValue }));
   };
-  let getTypeSpecificParams = () => {
+  const getTypeSpecificParams = () => {
     switch (formState.type) {
       case 'genomic':
         return (
@@ -161,26 +172,29 @@ let formBeforeCommonOptions = (props) => {
   };
   return (
     <React.Fragment>
-      <h3>Choose the type of result:</h3>
+      <h3>Choose the type of sequence:</h3>
       <div style={{ marginLeft: '2em' }}>
         <RadioList
           name="type"
           value={formState.type}
           onChange={typeUpdateHandler}
-          items={[
-            { value: 'genomic', display: 'Unspliced Genomic Region' },
-            { value: 'spliced_genomic', display: 'Spliced Genomic Region' },
-            { value: 'dna_component', display: 'DNA Component' },
-            { value: 'transcript_component', display: 'Transcript Component' },
-          ]}
+          items={formSequenceTypeOptions}
         />
-        <h4>Configure details:</h4>
+        <h4>
+          Configure details for{' '}
+          {
+            formSequenceTypeOptions.find(
+              (item) => item.value === formState.type
+            ).display
+          }
+          :
+        </h4>
         {getTypeSpecificParams()}
       </div>
     </React.Fragment>
   );
 };
-let formAfterSubmitButton = (props) => {
+const formAfterSubmitButton = (props) => {
   return (
     <React.Fragment>
       <div>
@@ -197,7 +211,7 @@ let formAfterSubmitButton = (props) => {
     </React.Fragment>
   );
 };
-let getFormInitialState = () => ({
+const getFormInitialState = () => ({
   type: 'genomic',
 
   reverseAndComplement: false,

packages/libs/web-common/src/components/reporters/ReporterForms.scss

@@ -0,0 +1,5 @@
+.ebrc-FixedWidth-detail {
+  .wdk-NumberSelector {
+    margin: 0 0.25em;
+  }
+}

packages/libs/web-common/src/components/reporters/SequenceFormElements.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { RadioList, CheckboxList } from '@veupathdb/wdk-client/lib/Components';
+import { RadioList } from '@veupathdb/wdk-client/lib/Components';
+import CheckboxList from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxList';
 
 let FeaturesList = (props) => {
   let { features, field, formState, getUpdateHandler } = props;
@@ -37,6 +38,7 @@ let ComponentsList = (props) => {
           onChange={getUpdateHandler(field)}
           items={features}
           linksPosition={null}
+          disabledCheckboxTooltipContent="Required field"
         />
       </div>
     </div>

packages/libs/web-common/src/components/reporters/SequenceFormFactory.jsx

@@ -1,44 +1,39 @@
 import React from 'react';
 import {
   RadioList,
-  CheckboxList,
-  SingleSelect,
-  TextBox,
-  Checkbox,
   NumberSelector,
+  Checkbox,
 } from '@veupathdb/wdk-client/lib/Components';
-import { FeaturesList, ComponentsList } from './SequenceFormElements';
+import { ComponentsList } from './SequenceFormElements';
 import * as ComponentUtils from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
 import * as ReporterUtils from '@veupathdb/wdk-client/lib/Views/ReporterForm/reporterUtils';
+import './ReporterForms.scss';
+
+const SINGLE_TRANSCRIPT_VIEW_FILTER_VALUE = {
+  name: 'representativeTranscriptOnly',
+  value: {},
+};
 
-let util = Object.assign({}, ComponentUtils, ReporterUtils);
+const util = Object.assign({}, ComponentUtils, ReporterUtils);
 
-let deflineFieldOptions = [
+const deflineFieldOptions = [
+  { value: 'gene_id', display: 'Gene ID', disabled: true },
   { value: 'organism', display: 'Organism' },
   { value: 'description', display: 'Description' },
   { value: 'position', display: 'Location' },
   { value: 'ui_choice', display: 'Input Parameters' },
   { value: 'segment_length', display: 'Segment Length' },
 ];
 
-let sequenceOptions = (props) => {
-  let { formState, updateFormState, onSubmit, includeSubmit } = props;
-  let getUpdateHandler = (fieldName) =>
+const sequenceOptions = (props) => {
+  const { formState, updateFormState } = props;
+  const getUpdateHandler = (fieldName) =>
     util.getChangeHandler(fieldName, updateFormState, formState);
   return (
     <React.Fragment>
       <h3>Fasta defline:</h3>
-      <div style={{ marginLeft: '2em' }}>
-        <RadioList
-          name="deflineType"
-          value={formState.deflineType}
-          onChange={getUpdateHandler('deflineType')}
-          items={[
-            { value: 'short', display: 'ID Only' },
-            { value: 'full', display: 'Full Fasta Header' },
-          ]}
-        />
-        {formState.deflineType === 'short' ? null : (
+      <div>
+        {formState.deflineType === 'full' && (
           <ComponentsList
             field="deflineFields"
             features={deflineFieldOptions}
@@ -48,49 +43,71 @@ let sequenceOptions = (props) => {
         )}
       </div>
       <h3>Sequence format:</h3>
-      <div style={{ marginLeft: '2em' }}>
+      <div
+        style={{
+          marginLeft: '2em',
+          display: 'grid',
+          gridTemplateColumns: 'auto 1fr',
+        }}
+      >
         <RadioList
           name="sequenceFormat"
           value={formState.sequenceFormat}
           onChange={getUpdateHandler('sequenceFormat')}
           items={[
+            { value: 'fixed_width', display: 'Fixed Width with' },
             { value: 'single_line', display: 'Single Line' },
-            { value: 'fixed_width', display: 'Fixed Width' },
           ]}
         />
-        {formState.sequenceFormat === 'single_line' ? null : (
-          <React.Fragment>
-            <span>Bases Per Line: </span>
-            <NumberSelector
-              name={'basesPerLine'}
-              start={0}
-              end={10000}
-              value={formState['basesPerLine']}
-              step={1}
-              onChange={getUpdateHandler('basesPerLine')}
-              size="6"
-            />
-          </React.Fragment>
-        )}
+        <div className="ebrc-FixedWidth-detail">
+          <NumberSelector
+            name={'basesPerLine'}
+            start={0}
+            end={10000}
+            value={formState['basesPerLine']}
+            step={1}
+            onChange={getUpdateHandler('basesPerLine')}
+            size={6}
+          />
+          <span>bases per line</span>
+        </div>
       </div>
     </React.Fragment>
   );
 };
 
-let createSequenceForm = (
+const createSequenceForm = (
   formBeforeCommonOptions,
   formAfterSubmitButton,
   getFormInitialState,
   reportType
 ) => {
-  let Form = (props) => {
-    let { formState, updateFormState, onSubmit, includeSubmit } = props;
-    let getUpdateHandler = (fieldName) =>
+  const Form = (props) => {
+    const {
+      formState,
+      updateFormState,
+      onSubmit,
+      includeSubmit,
+      viewFilters,
+      updateViewFilters,
+    } = props;
+    const getUpdateHandler = (fieldName) =>
       util.getChangeHandler(fieldName, updateFormState, formState);
+    const transcriptPerGeneChangeHandler = (isChecked) => {
+      const nextViewFilters =
+        viewFilters?.filter(
+          (filterValue) =>
+            filterValue.name !== SINGLE_TRANSCRIPT_VIEW_FILTER_VALUE.name
+        ) ?? [];
+      if (isChecked) {
+        nextViewFilters.push(SINGLE_TRANSCRIPT_VIEW_FILTER_VALUE);
+      }
+      updateViewFilters(nextViewFilters);
+    };
     return (
       <div>
         {formBeforeCommonOptions(props)}
-        <h3>Download Type:</h3>
+        <h3>Download type:</h3>
         <div style={{ marginLeft: '2em' }}>
           <RadioList
             name="attachmentType"
@@ -100,6 +117,22 @@ let createSequenceForm = (
           />
         </div>
         {reportType === 'Sequences' && sequenceOptions(props)}
+        <h3>Additional options:</h3>
+        <div style={{ marginLeft: '1.5em' }}>
+          <label>
+            <Checkbox
+              value={
+                viewFilters?.some(
+                  (f) => f.name === SINGLE_TRANSCRIPT_VIEW_FILTER_VALUE.name
+                ) ?? false
+              }
+              onChange={transcriptPerGeneChangeHandler}
+            />
+            <span style={{ marginLeft: '0.5em' }}>
+              Include only one transcript per gene (the longest)
+            </span>
+          </label>
+        </div>
         {includeSubmit && (
           <div style={{ margin: '0.8em' }}>
             <button className="btn" type="submit" onClick={onSubmit}>
@@ -112,17 +145,20 @@ let createSequenceForm = (
     );
   };
 
-  Form.getInitialState = () => ({
-    formState: {
-      attachmentType: 'plain',
-      deflineType: 'short',
-      deflineFields: deflineFieldOptions.map((x) => x.value),
-      sequenceFormat: 'fixed_width',
-      basesPerLine: 60,
-      ...getFormInitialState(),
-    },
-    formUiState: {},
-  });
+  Form.getInitialState = () => {
+    return {
+      formState: {
+        attachmentType: 'plain',
+        deflineType: 'full',
+        // QUESTION: should I remove this from formState when form is submitted or should backend expect this field?
+        deflineFields: ['gene_id'],
+        sequenceFormat: 'fixed_width',
+        basesPerLine: 60,
+        ...getFormInitialState(),
+      },
+      formUiState: {},
+    };
+  };
   return Form;
 };
 export default createSequenceForm;