KANBAN-328

apps/main-app/src/components/alleleTable/alleleTableSectionHelp.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ExternalLink from '../ExternalLink';
+
+const AlleleTableSectionHelp = () => (
+  <div>
+    <p>
+      An allele is one of multiple possible forms of a functional genomic element (most
+      often described as a locus or a gene), differing from the reference DNA sequence.
+      The genomic element can be endogenous or constructed. The change(s) present in a
+      given allele is effectively described by genomic variant(s). See a <ExternalLink href="https://twitter.com/alliancegenome/status/1379572405765570560" target="_blank"> brief tutorial</ExternalLink>.
+    </p>
+    <p>
+      The <ExternalLink href="https://varnomen.hgvs.org/recommendations/general/" target="_blank">HGVS</ExternalLink> (Human Genome Variation Society)
+      name for the Variant is linked to its location in JBrowse.
+    </p>
+  </div>
+);
+
+export default AlleleTableSectionHelp;

apps/main-app/src/components/sequenceFeatureViewer/sequenceFeatureViewerSubsectionHelp.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const SequenceFeatureViewerSubsectionHelp = () => (
+  <div>
+    <p>
+      The Allele/Variant Sequence Viewer shows the positions of allele-associated
+      variants, where this data exists, in the context of the transcripts for the
+      gene. Since the viewer is showing the genomic positions, alleles where the
+      genomic location of the alteration is not known currently will not be displayed
+      in the viewer. Polymorphisms determined by whole genome or whole exon sequencing
+      are also not shown in this view due to the overwhelming number of these variants.
+      To view these, use the link to the Alliance JBrowse below the viewer.
+    </p>
+  </div>
+);
+
+export default SequenceFeatureViewerSubsectionHelp;

apps/main-app/src/containers/genePage/alleleTable.js

@@ -133,6 +133,10 @@ const AlleleTable = ({geneId}) => {
     {
       dataField: 'category',
       text: 'Category',
+      helpPopupProps: {
+        id: 'gene-page--alleles-table--allele-category-help',
+        children: <span>An indication of whether the referenced object is an allele where the genomic location of the nucleotide change in not known (“allele”), an allele where one or more genomic locations of nucleotide change(s) are known (“allele with N associated variant(s)”), or a variant, i.e., a specific nucleotide change at a specified location on the genome (“variant”).</span>,
+      },
       headerStyle: {width: '140px'},
       filterName: 'alleleCategory',
       filterable: getDistinctFieldValue(resolvedData, 'filter.alleleCategory'),
@@ -211,7 +215,8 @@ const AlleleTable = ({geneId}) => {
       text: 'Molecular consequence',
       helpPopupProps: {
         id: 'gene-page--alleles-table--molecular-consequence-help',
-        children: <span>Variant consequences were predicted by the <ExternalLink href="https://uswest.ensembl.org/info/docs/tools/vep/index.html" target="_blank">Ensembl Variant Effect Predictor (VEP) tool</ExternalLink> based on Alliance variants information.</span>,
+        children: <span>Variant consequences were predicted by the <ExternalLink href="https://uswest.ensembl.org/info/docs/tools/vep/index.html" target="_blank">Ensembl Variant Effect Predictor (VEP) tool</ExternalLink> based on Alliance variants information.
+          Examples are: frameshift variant, stop gained, missense variant, splice donor variant, splice acceptor variant, stop gained, splice region variant, intron variant, coding sequence variant, 5 prime UTR variant, and inframe deletion.</span>,
       },
       headerStyle: {width: variantConsequenceColWidth},
       style: {

apps/main-app/src/containers/genePage/genomeFeatureWrapper.js

@@ -23,8 +23,13 @@ import {
   getSingleGenomeLocation,
 } from '../../lib/utils';
 
+import SequenceFeatureViewerSubsectionHelp from '../../components/sequenceFeatureViewer/sequenceFeatureViewerSubsectionHelp';
+
 const APOLLO_SERVER_PREFIX = '/apollo/';
 const LINK_BUFFER = 1.2;
+const helpSequenceViewer = 'The Allele/Variant Sequence Viewer shows the positions of allele-associated variants, where this data exists, in the context of the transcripts for the gene. Since the viewer is showing the genomic positions, alleles where the genomic location of the alteration is not known currently will not be displayed in the viewer. Polymorphisms determined by whole genome or whole exon sequencing are also not shown in this view due to the overwhelming number of these variants. To view these, use the link to the Alliance JBrowse below the viewer.';
+
+
 
 class GenomeFeatureWrapper extends Component {
 
@@ -231,6 +236,11 @@ class GenomeFeatureWrapper extends Component {
           <AttributeLabel>Assembly version</AttributeLabel>
           <AttributeValue>{assembly}
           </AttributeValue>
+          <AttributeLabel>Viewer Help
+            </AttributeLabel>
+          <HelpPopup id='sequence-feature-viewer-subsection-help'>
+            <SequenceFeatureViewerSubsectionHelp />
+          </HelpPopup>
         </AttributeList>
 
         <HorizontalScroll width={960}>

apps/main-app/src/containers/genePage/index.js

@@ -6,6 +6,7 @@ import { OrthologyFilteredTable, OrthologyUserGuide, OrthologyBasicInfo } from '
 import GoUserGuide from '../../components/geneOntologyRibbon/goUserGuide';
 import PathwayUserGuide from '../../components/pathway/pathwayUserGuide';
 import ModelSectionHelp from '../../components/model/modelSectionHelp';
+import AlleleTableSectionHelp from '../../components/alleleTable/alleleTableSectionHelp';
 
 import GeneOntologyRibbon from '../../components/geneOntologyRibbon';
 import PathwayWidget from '../../components/pathway/pathwayWidget';
@@ -162,7 +163,7 @@ const GenePage = ({geneId}) => {
           <DiseaseComparisonRibbon geneId={data.id} geneTaxon={data.species.taxonId} />
         </Subsection>
 
-        <Subsection title={ALLELES}>
+        <Subsection help={<AlleleTableSectionHelp />} title={ALLELES}>
           <AlleleTable
             geneId={data.id}
           />