Deploy 7.1.0 to production.

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log
+.git
+dist
+package-lock.json

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

Dockerfile

@@ -0,0 +1,23 @@
+ARG DOCKER_PULL_TAG=latest
+ARG REG=100225593120.dkr.ecr.us-east-1.amazonaws.com
+FROM ${REG}/agr_base_linux_env:${DOCKER_PULL_TAG} as build-stage
+
+WORKDIR /workdir/agr_ui
+
+ADD . .
+
+RUN mkdir /workdir/agr_ui/build
+
+ARG NODE_ENV=production
+ENV NODE_ENV ${NODE_ENV}
+
+RUN /bin/bash -c 'PS1=x && . /root/.profile && nvm install && nvm use && npm install --legacy-peer-deps && npm run build'
+
+FROM nginx
+
+WORKDIR /workdir/agr_ui/build
+
+COPY --from=build-stage /workdir/agr_ui/build /workdir/agr_ui/build
+COPY --from=build-stage /workdir/agr_ui/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 3000

Makefile

@@ -32,6 +32,15 @@ test-alb-deploy:
 prod-alb-deploy:
 	npx aws-cdk deploy prod-alb-stack
 
+stage-ui-deploy:
+	npx aws-cdk deploy agr-ui-stage
+
+test-ui-deploy:
+	npx aws-cdk deploy agr-ui-test
+
+prod-ui-deploy:
+	npx aws-cdk deploy agr-ui-production
+
 uirun:
 	npm start
 

cdk/amplify-production-stack.ts

@@ -21,7 +21,14 @@ export class AmplifyProductionStack extends cdk.Stack {
       { source: 'https://alliancegenome.org',          target: 'https://www.alliancegenome.org',                                                      status: amplify.RedirectStatus.PERMANENT_REDIRECT },
 
       { source: '/api/<*>',                            target: 'https://prod-alb.alliancegenome.org/api/<*>',                                         status: amplify.RedirectStatus.REWRITE },
-
+
+      { source: '/jbrowse2',                           target: 'https://www.alliancegenome.org/jbrowse2/',                                            status: amplify.RedirectStatus.PERMANENT_REDIRECT },
+      { source: '/jbrowse2/',                          target: 'https://main.dgaayxgqoarxf.amplifyapp.com/',                                          status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowse2/<*>',                       target: 'https://main.dgaayxgqoarxf.amplifyapp.com/<*>',                                       status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/XenBaseXTJBrowse/<*>',   target: 'https://jbrowse.xenbase.org/XenJBrowse/data/xt9_1/<*>',                               status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/XenBaseXLJBrowse/<*>',   target: 'https://jbrowse.xenbase.org/XenJBrowse/data/xl9_2/<*>',                               status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/XenBaseData/<*>',        target: 'https://jbrowse.xenbase.org/XenJBrowse/<*>',                                          status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/RGDJBrowse/<*>',         target: 'https://rgd.mcw.edu/jbrowse2/<*>',                                                    status: amplify.RedirectStatus.REWRITE },
       { source: '/jbrowse/worms/protein',              target: 'https://www.alliancegenome.org/jbrowse/worms/protein/',                               status: amplify.RedirectStatus.PERMANENT_REDIRECT },
       { source: '/jbrowse/worms/protein/',             target: 'https://main.djgvd7iswt7yy.amplifyapp.com/',                                          status: amplify.RedirectStatus.REWRITE },
       { source: '/jbrowse/worms/protein/<*>',          target: 'https://main.djgvd7iswt7yy.amplifyapp.com/<*>',                                       status: amplify.RedirectStatus.REWRITE },

cdk/amplify-stage-stack.ts

@@ -17,6 +17,13 @@ export class AmplifyStageStack extends cdk.Stack {
 
     const stage_paths = [
       { source: '/api/<*>',                            target: 'https://stage-api.alliancegenome.org/api/<*>',                                        status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowse2',                           target: 'https://stage.alliancegenome.org/jbrowse2/',                                          status: amplify.RedirectStatus.PERMANENT_REDIRECT },
+      { source: '/jbrowse2/',                          target: 'https://stage.dgaayxgqoarxf.amplifyapp.com/',                                         status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowse2/<*>',                       target: 'https://stage.dgaayxgqoarxf.amplifyapp.com/<*>',                                      status: amplify.RedirectStatus.REWRITE }, 
+      { source: '/jbrowsedata/XenBaseXTJBrowse/<*>',   target: 'https://jbrowse.xenbase.org/XenJBrowse/data/xt9_1/<*>',                               status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/XenBaseXLJBrowse/<*>',   target: 'https://jbrowse.xenbase.org/XenJBrowse/data/xl9_2/<*>',                               status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/XenBaseData/<*>',        target: 'https://jbrowse.xenbase.org/XenJBrowse/<*>',                                          status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/RGDJBrowse/<*>',         target: 'https://rgd.mcw.edu/jbrowse2/<*>',                                                    status: amplify.RedirectStatus.REWRITE },
       { source: '/jbrowse/worms/protein',              target: 'https://stage.alliancegenome.org/jbrowse/worms/protein/',                             status: amplify.RedirectStatus.PERMANENT_REDIRECT },
       { source: '/jbrowse/worms/protein/',             target: 'https://staging.djgvd7iswt7yy.amplifyapp.com/',                                       status: amplify.RedirectStatus.REWRITE },
       { source: '/jbrowse/worms/protein/<*>',          target: 'https://staging.djgvd7iswt7yy.amplifyapp.com/<*>',                                    status: amplify.RedirectStatus.REWRITE },

cdk/amplify-test-stack.ts

@@ -18,6 +18,13 @@ export class AmplifyTestStack extends cdk.Stack {
     const test_paths = [
       { source: '/api/<*>',                            target: 'https://test-alb.alliancegenome.org/api/<*>',                                         status: amplify.RedirectStatus.REWRITE },
 
+      { source: '/jbrowse2',                           target: 'https://test.alliancegenome.org/jbrowse2/',                                           status: amplify.RedirectStatus.PERMANENT_REDIRECT },
+      { source: '/jbrowse2/',                          target: 'https://stage.dgaayxgqoarxf.amplifyapp.com/',                                         status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowse2/<*>',                       target: 'https://stage.dgaayxgqoarxf.amplifyapp.com/<*>',                                      status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/XenBaseXTJBrowse/<*>',   target: 'https://jbrowse.xenbase.org/XenJBrowse/data/xt9_1/<*>',                               status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/XenBaseXLJBrowse/<*>',   target: 'https://jbrowse.xenbase.org/XenJBrowse/data/xl9_2/<*>',                               status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/XenBaseData/<*>',        target: 'https://jbrowse.xenbase.org/XenJBrowse/<*>',                                          status: amplify.RedirectStatus.REWRITE },
+      { source: '/jbrowsedata/RGDJBrowse/<*>',         target: 'https://rgd.mcw.edu/jbrowse2/<*>',                                                    status: amplify.RedirectStatus.REWRITE },
       { source: '/jbrowse/worms/protein',              target: 'https://test.alliancegenome.org/jbrowse/worms/protein/',                              status: amplify.RedirectStatus.PERMANENT_REDIRECT },
       { source: '/jbrowse/worms/protein/',             target: 'https://main.djgvd7iswt7yy.amplifyapp.com/',                                          status: amplify.RedirectStatus.REWRITE },
       { source: '/jbrowse/worms/protein/<*>',          target: 'https://main.djgvd7iswt7yy.amplifyapp.com/<*>',                                       status: amplify.RedirectStatus.REWRITE },

cdk/cdk-app.ts

@@ -20,7 +20,7 @@ new AmplifyALBStack(app, 'stage-alb-stack', {
 new AmplifyALBStack(app, 'test-alb-stack', {
   stackName: 'test-alb-stack',
   dnsName: 'test',
-  targetInstanceId: 'i-003fafec7d050fd97',
+  targetInstanceId: 'i-0ccfdcd8c43104be5',
   env: {
     region: process.env.CDK_DEFAULT_REGION,
     account: process.env.CDK_DEFAULT_ACCOUNT,
@@ -30,7 +30,7 @@ new AmplifyALBStack(app, 'test-alb-stack', {
 new AmplifyALBStack(app, 'prod-alb-stack', {
   stackName: 'prod-alb-stack',
   dnsName: 'prod',
-  targetInstanceId: 'i-003fafec7d050fd97',
+  targetInstanceId: 'i-0ccfdcd8c43104be5',
   env: {
     region: process.env.CDK_DEFAULT_REGION,
     account: process.env.CDK_DEFAULT_ACCOUNT,

nginx.conf

@@ -0,0 +1,7 @@
+server {
+	listen 3000;
+	root /workdir/agr_ui/build;
+	index index.html;
+
+	error_page 404 =200 /index.html;
+}

package.json

@@ -13,7 +13,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@geneontology/curie-util-es5": "^1.2.4",
-    "@geneontology/wc-gocam-viz": "0.0.51",
+    "@geneontology/wc-gocam-viz": "1.0.0",
     "@geneontology/wc-ribbon-strips": "0.0.37",
     "@geneontology/wc-ribbon-table": "0.0.57",
     "@testing-library/jest-dom": "^5.16.1",
@@ -28,7 +28,7 @@
     "custom-event-polyfill": "^1.0.6",
     "d3-selection": "2.0.0",
     "document-register-element": "1.13.1",
-    "generic-sequence-panel": "^1.4.0",
+    "generic-sequence-panel": "^1.4.1",
     "html-react-parser": "^0.10.0",
     "immutable": "^3.8.1",
     "lodash.clone": "^4.5.0",

src/components/dataTable/AnnotatedEntitiesPopupCuration.js

@@ -22,28 +22,30 @@ import AnnotationType from './AnnotationType';
 import AssociationCellCuration from './AssociationCellCuration';
 import AssertedGenes from './AssertedGenes';
 import GeneticModifiersCellCuration from './GeneticModifiersCellCuration';
-import { buildProviderWithUrl } from './utils';
+import { buildProviderWithUrl, getIdentifier } from './utils';
 import StrainBackground from './StrainBackground';
 
 function renderLink(entity) {
-  const url = getResourceUrl(entity.subject.curie, entity.subject.type, entity.subject.subtype)
+  const curie = getIdentifier(entity.diseaseAnnotationSubject);
+  const url = getResourceUrl(curie, entity.diseaseAnnotationSubject.type, entity.diseaseAnnotationSubject.subtype)
 
   if (entity.type === 'AlleleDiseaseAnnotation') {
-    const innerText = entity.subject.alleleSymbol ? entity.subject.alleleSymbol.displayText : entity.subject.name;
+    const innerText = entity.diseaseAnnotationSubject.alleleSymbol ? entity.diseaseAnnotationSubject.alleleSymbol.displayText : entity.diseaseAnnotationSubject.name;
     const inner = <span dangerouslySetInnerHTML={{__html: innerText}}/>;
-    return <Link to={`/allele/${entity.subject.curie}`}>{inner}</Link>;
+    return <Link to={`/allele/${curie}`}>{inner}</Link>;
   } else if(entity.type === 'GeneDiseaseAnnotation'){
-      const innerText = entity.subject.geneSymbol ? entity.subject.geneSymbol.displayText : entity.subject.name;
+      const innerText = entity.diseaseAnnotationSubject.geneSymbol ? entity.diseaseAnnotationSubject.geneSymbol.displayText : entity.diseaseAnnotationSubject.name;
       const inner = <span dangerouslySetInnerHTML={{__html: innerText}}/>;
-      return <Link to={`/gene/${entity.subject.curie}`}>{inner}</Link>;
+      return <Link to={`/gene/${curie}`}>{inner}</Link>;
   } else {
-      const inner = <span dangerouslySetInnerHTML={{__html: entity.subject.name}}/>;
-    return <ExternalLink href={url}>{inner}</ExternalLink>;
+      const inner = <span dangerouslySetInnerHTML={{__html: entity.diseaseAnnotationSubject.name}}/>;
+      return <ExternalLink href={url}>{inner}</ExternalLink>;
   }
 }
 
-function AnnotatedEntitiesPopupCuration(props) {
-  const {children, entities, parentPage, mainRowCurie } = props;
+
+
+function AnnotatedEntitiesPopupCuration({ children, entities, parentPage, mainRowCurie, pubModIds }) {
 
   if (!entities || !entities.length) {
     return null;
@@ -68,11 +70,11 @@ function AnnotatedEntitiesPopupCuration(props) {
                 <th>Name</th>
                 <th>Type</th>
                 <th className={style.associationCell}>Association</th>
-                { parentPage === 'gene' ? <th>Additional implicated genes</th> : <></> }
+                { parentPage === 'gene' || parentPage === 'disease' ? <th>Additional implicated genes</th> : <></> }
                 <th>Experimental condition</th>
                 <th></th>
                 <th>Genetic Modifiers</th>
-                { parentPage === 'gene' ? <th>Strain Background</th> : <></> }
+                { parentPage === 'gene' || parentPage === 'disease' ? <th>Strain Background</th> : <></> }
                 <th>Genetic Sex</th>
                 <th className={style.relatedNotes}>Notes</th>
                 <th>Annotation type</th>
@@ -88,19 +90,19 @@ function AnnotatedEntitiesPopupCuration(props) {
                   return (
                     <tr key={entity.id}>
                       <td>{renderLink(entity)}</td>
-                      <td><TypeCellCuration subject={entity.subject}/></td>
+                      <td><TypeCellCuration subject={entity.diseaseAnnotationSubject}/></td>
                       <td><AssociationCellCuration association={entity.relation?.name}/></td>
-                      { parentPage === 'gene' ?  <td><AssertedGenes assertedGenes={entity.assertedGenes} mainRowCurie={mainRowCurie}/></td> : <></>}
+                      { parentPage === 'gene' || parentPage === 'disease' ?  <td><AssertedGenes assertedGenes={entity.assertedGenes} mainRowCurie={mainRowCurie}/></td> : <></>}
                       <td><ExperimentalConditionCellCuration conditions={entity.conditionRelations}/></td>
                       <td><ExperimentalConditionCellCuration conditions={entity.conditionModifiers}/></td>
                       <td><GeneticModifiersCellCuration relation={entity.diseaseGeneticModifierRelation} modifiers={entity.diseaseGeneticModifiers}/></td>
-                      { parentPage === 'gene' ? <td><StrainBackground strainBackground={entity.sgdStrainBackground}/></td> : <></> }
+                      { parentPage === 'gene' || parentPage === 'disease' ? <td><StrainBackground strainBackground={entity.sgdStrainBackground}/></td> : <></> }
                       <td><GeneticSex geneticSex={entity.geneticSex}/></td>
                       <td><RelatedNotes className={style.relatedNotes} relatedNotes={entity.relatedNotes}/></td>
                       <td><AnnotationType  annotationType={entity.annotationType}/></td>
                       <td><EvidenceCodesCellCuration evidenceCodes={entity.evidenceCodes}/></td>
                       <td><ProviderCellCuration provider={provider} /></td>
-                      <td><SingleReferenceCellCuration singleReference={entity.singleReference}/></td>
+                      <td><SingleReferenceCellCuration singleReference={entity.singleReference} pubModIds={pubModIds}/></td>
                     </tr>
                 )
               })

src/components/dataTable/AssertedGenes.js

@@ -1,21 +1,22 @@
 import CollapsibleList from '../collapsibleList/collapsibleList';
-import ExternalLink from '../ExternalLink';
+import { Link } from 'react-router-dom';
+import { getIdentifier } from './utils';
 
 
 function makeAssertedGeneLink(curie, geneSymbol) {
     if(curie) {
       const symbol = <span dangerouslySetInnerHTML={{__html: geneSymbol}}/>;
-      return <ExternalLink href={`https://www.alliancegenome.org/gene/${curie}`}>{symbol}</ExternalLink>;
+      return <Link to={`/gene/${curie}`}>{symbol}</Link>;
     }
     return null;
 }
 
 function AssertedGenes({assertedGenes, mainRowCurie}) {
-  const filteredAssertedGenes = assertedGenes?.filter(gene => gene.curie !== mainRowCurie);
+  const filteredAssertedGenes = assertedGenes?.filter(gene => getIdentifier(gene) !== mainRowCurie);
   if(assertedGenes && assertedGenes.length > 1) {
     return (
         <CollapsibleList collapsedSize={assertedGenes.length}>
-        {filteredAssertedGenes.map(gene => makeAssertedGeneLink(gene.curie, gene.geneSymbol.displayText))}
+          {filteredAssertedGenes.map(gene => makeAssertedGeneLink(getIdentifier(gene), gene.geneSymbol.displayText))}
         </CollapsibleList>
     );
   }

src/components/dataTable/DataTable.js

@@ -25,6 +25,8 @@ import HorizontalScroll from '../horizontalScroll';
 import { buildTableQueryString } from '../../lib/utils';
 import LoadingSpinner from '../loadingSpinner';
 import DropdownNoDataFilter from './DropdownNoDataFilter';
+import {DOWNLOAD_BUTTON_THRESHOLD} from '../../constants';
+import { Link } from 'react-router-dom';
 
 const DataTable = ({
   className,
@@ -120,6 +122,8 @@ const DataTable = ({
     onSizePerPageChange: scrollIntoView
   });
 
+  let disabled = paginationObj.options?.totalSize > DOWNLOAD_BUTTON_THRESHOLD;
+
   columns.forEach(column => {
     const filterField = column.filterName || column.dataField;
     const columnFilter = filters &&
@@ -221,10 +225,21 @@ const DataTable = ({
           )
         }
       </PaginationProvider>
-      {downloadUrl &&
-      <DownloadButton
-        downloadUrl={`${downloadUrl}${downloadUrl.indexOf('?') < 0 ? '?' : '&'}${buildTableQueryString(tableState)}`}
-      />
+      {
+        downloadUrl &&
+          <DownloadButton
+            downloadUrl={`${downloadUrl}${downloadUrl.indexOf('?') < 0 ? '?' : '&'}${buildTableQueryString(tableState)}`}
+            disabled={disabled}
+          />
+      }
+      { 
+        disabled && 
+          <div style={{color: 'red'}}>
+            The table above cannot be downloaded because there are too many rows in the unfiltered table. 
+            Please apply filter(s) to limit the number of rows to less than {DOWNLOAD_BUTTON_THRESHOLD} to enable the Download button or visit our 
+            <Link to="/downloads"> Downloads page </Link>
+            to download the entire data set.
+          </div>
       }
     </div>
   );

src/components/dataTable/DiseaseQualifiersColumn.js

@@ -7,10 +7,10 @@ const DiseaseQualifiersColumn = ({qualifiers}) => {
   if (!qualifiers || !qualifiers.length) {
     return null;
   }
-
+  
   return (
     <CommaSeparatedList>
-      {qualifiers.map(qualifier => qualifier)}
+      {qualifiers.map(qualifier => qualifier.replaceAll("_", " "))}
     </CommaSeparatedList>
   );
 };

src/components/dataTable/GeneticModifiersCellCuration.js

@@ -3,28 +3,30 @@ import { CollapsibleList } from '../collapsibleList';
 import ExternalLink from '../ExternalLink';
 import { getResourceUrl } from './getResourceUrl';
 import { Link } from 'react-router-dom';
+import { getIdentifier } from './utils';
 
 
 function GeneticModifierLink(modifier) {
+    const identifier = getIdentifier(modifier);
     switch(modifier?.type) {
         case 'Gene':
             if (modifier.geneSymbol) {
                 return (
-                    <Link to={`/gene/${modifier.curie}`} target='_blank'>
+                    <Link to={`/gene/${identifier}`} target='_blank'>
                         <span dangerouslySetInnerHTML={{__html: modifier.geneSymbol.displayText}}/>
                     </Link>);
             }
             break;
         case 'Allele':
             if (modifier.alleleSymbol) {
                 return (
-                    <Link to={`/allele/${modifier.curie}`}  target='_blank'>
+                    <Link to={`/allele/${identifier}`}  target='_blank'>
                         <span dangerouslySetInnerHTML={{__html: modifier.alleleSymbol.displayText}}/>
                     </Link>);
             }
             break;
         case 'AffectedGenomicModel':
-            let url = getResourceUrl(modifier.curie, modifier.type, modifier.subtype);
+            let url = getResourceUrl(identifier, modifier.type, modifier.subtype);
             if (url && modifier.name) {                
                 return ( 
                     <ExternalLink href={url}>

src/components/dataTable/ReferencesCellViaOrthologyCuration.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import ExternalLink from '../ExternalLink';
+
+const ReferenceCellViaOrthologyCuration = () => {
+  const curie = "MGI:6194238";
+  const url = `http://www.informatics.jax.org/accession/${curie}`;
+  return (
+    <ExternalLink href={url} key={curie} title={curie}>{curie}</ExternalLink>
+  );
+};
+
+export default ReferenceCellViaOrthologyCuration;