Merge pull request #2248 from broadinstitute/ew-refine-pathways

Robustify pathway search and visualization (SCP-5990)

Author: eweitz

app/javascript/components/explore/ExploreDisplayPanelManager.jsx

@@ -25,7 +25,8 @@ import BookmarkManager from '~/components/bookmarks/BookmarkManager'
 import { EXPRESSION_SORT_OPTIONS } from '~/components/visualization/PlotDisplayControls'
 
 /** Get the selected clustering and annotation, or their defaults */
-function getSelectedClusterAndAnnot(exploreInfo, exploreParams) {
+export function getSelectedClusterAndAnnot(exploreInfo, exploreParams) {
+  if (!exploreInfo) {return [null, null]}
   const annotList = exploreInfo.annotationList
   let selectedCluster
   let selectedAnnot

app/javascript/components/explore/ExploreDisplayTabs.jsx

@@ -23,7 +23,7 @@ import useResizeEffect from '~/hooks/useResizeEffect'
 import LoadingSpinner from '~/lib/LoadingSpinner'
 import { log } from '~/lib/metrics-api'
 import { getFeatureFlagsWithDefaults } from '~/providers/UserProvider'
-import ExploreDisplayPanelManager from './ExploreDisplayPanelManager'
+import ExploreDisplayPanelManager, {getSelectedClusterAndAnnot} from './ExploreDisplayPanelManager'
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
 import Tooltip from 'react-bootstrap/lib/Tooltip'
 import PlotTabs from './PlotTabs'
@@ -32,22 +32,6 @@ import {
 } from '~/lib/cell-faceting'
 import { getIsPathway } from '~/lib/search-utils'
 
-/** Get the selected clustering and annotation, or their defaults */
-export function getSelectedClusterAndAnnot(exploreInfo, exploreParams) {
-  if (!exploreInfo) {return [null, null]}
-  const annotList = exploreInfo.annotationList
-  let selectedCluster
-  let selectedAnnot
-  if (exploreParams?.cluster) {
-    selectedCluster = exploreParams.cluster
-    selectedAnnot = exploreParams.annotation
-  } else {
-    selectedCluster = annotList.default_cluster
-    selectedAnnot = annotList.default_annotation
-  }
-
-  return [selectedCluster, selectedAnnot]
-}
 
 /** Determine if current annotation has one-vs-rest or pairwise DE */
 function getHasComparisonDe(exploreInfo, exploreParams, comparison) {
@@ -539,6 +523,9 @@ export default function ExploreDisplayTabs({
     queries = exploreParams.genes
   }
 
+  // eslint-disable-next-line no-unused-vars
+  const [_, selectedAnnotation] = getSelectedClusterAndAnnot(exploreInfo, exploreParams)
+
   return (
     <>
       {/* Render top content for Explore view, i.e. gene search box and plot tabs */}
@@ -550,7 +537,9 @@ export default function ExploreDisplayTabs({
               queryFn={queryFn}
               allGenes={exploreInfo ? exploreInfo.uniqueGenes : []}
               isLoading={!exploreInfo}
-              speciesList={exploreInfo ? exploreInfo.taxonNames : []}/>
+              speciesList={exploreInfo ? exploreInfo.taxonNames : []}
+              selectedAnnotation={selectedAnnotation}
+            />
             { // show if this is gene search || gene list
               (isGene || isGeneList || hasIdeogramOutputs || isPathway) &&
                 <OverlayTrigger placement="top" overlay={

app/javascript/components/explore/StudyGeneField.jsx

@@ -41,9 +41,9 @@ function getIsPartialPathwayMatch(query, allGenes) {
 }
 
 /** Parse gene name from heterogeneous array  */
-function getQueriesFromSearchOptions(newQueryArray, speciesList) {
+function getQueriesFromSearchOptions(newQueryArray, speciesList, selectedAnnotation) {
   let newQueries
-  if (newQueryArray[0]?.isGene === true || !getIsEligibleForPathwayExplore(speciesList)) {
+  if (newQueryArray[0]?.isGene === true || !getIsEligibleForPathwayExplore(speciesList, selectedAnnotation)) {
     // Query is a gene
     newQueries = newQueryArray.map(g => g.value)
   } else if (newQueryArray.length === 0) {
@@ -64,19 +64,20 @@ function getQueriesFromSearchOptions(newQueryArray, speciesList) {
 }
 
 /** Indicate whether pathway view should be available for this study */
-function getIsEligibleForPathwayExplore(speciesList) {
+export function getIsEligibleForPathwayExplore(speciesList, selectedAnnotation) {
   const isEligibleForPathwayExplore = (
     speciesList.length === 1 && speciesList[0] === 'Homo sapiens' &&
+    selectedAnnotation.type === 'group' &&
     getFeatureFlagsWithDefaults()?.show_pathway_expression
   )
   return isEligibleForPathwayExplore
 }
 
 /** Collapse search options to query array */
-function getQueryArrayFromSearchOptions(searchOptions, speciesList) {
+function getQueryArrayFromSearchOptions(searchOptions, speciesList, selectedAnnotation) {
   let queryArray = []
 
-  if (!getIsEligibleForPathwayExplore(speciesList)) {
+  if (!getIsEligibleForPathwayExplore(speciesList, selectedAnnotation)) {
     return searchOptions
   }
 
@@ -98,17 +99,19 @@ function getQueryArrayFromSearchOptions(searchOptions, speciesList) {
 * @param allGenes String array of valid genes in the study
 * @param speciesList String array of species scientific names
 */
-export default function StudyGeneField({ queries, queryFn, allGenes, speciesList, isLoading=false }) {
+export default function StudyGeneField({
+  queries, queryFn, allGenes, speciesList, selectedAnnotation, isLoading=false
+}) {
   const [inputText, setInputText] = useState('')
 
-  const rawSuggestions = getAutocompleteSuggestions(inputText, allGenes)
-  const searchOptions = getSearchOptions(rawSuggestions, speciesList)
-
+  const includePathways = getIsEligibleForPathwayExplore(speciesList, selectedAnnotation)
+  const rawSuggestions = getAutocompleteSuggestions(inputText, allGenes, includePathways)
+  const searchOptions = getSearchOptions(rawSuggestions, speciesList, selectedAnnotation)
 
   let enteredQueryArray = []
   if (inputText.length === 0 && queries && queries.length > 0) {
-    const queriesSearchOptions = getSearchOptions(queries, speciesList)
-    enteredQueryArray = getQueryArrayFromSearchOptions(queriesSearchOptions, speciesList)
+    const queriesSearchOptions = getSearchOptions(queries, speciesList, selectedAnnotation)
+    enteredQueryArray = getQueryArrayFromSearchOptions(queriesSearchOptions, speciesList, selectedAnnotation)
   } else {
     enteredQueryArray = searchOptions
   }
@@ -129,7 +132,7 @@ export default function StudyGeneField({ queries, queryFn, allGenes, speciesList
 
     const newNotPresentQueries = new Set([])
     if (newQueryArray) {
-      if (!getIsEligibleForPathwayExplore(speciesList)) {
+      if (!getIsEligibleForPathwayExplore(speciesList, selectedAnnotation)) {
         newQueryArray.map(g => g.value).forEach(query => {
           // if an entered gene is not in the valid gene options for the study
           const isInvalidQuery = getIsInvalidQuery(query, allGenes)
@@ -138,7 +141,7 @@ export default function StudyGeneField({ queries, queryFn, allGenes, speciesList
           }
         })
       } else {
-        const newQueries = getQueriesFromSearchOptions(newQueryArray, speciesList)
+        const newQueries = getQueriesFromSearchOptions(newQueryArray, speciesList, selectedAnnotation)
         newQueries.forEach(query => {
           // if an entered gene is not in the valid gene options for the study
           const isInvalidQuery = getIsInvalidQuery(query, allGenes)
@@ -153,7 +156,7 @@ export default function StudyGeneField({ queries, queryFn, allGenes, speciesList
     if (newNotPresentQueries.size > 0) {
       setShowNotPresentGeneChoice(true)
     } else if (newQueryArray && newQueryArray.length) {
-      const newQueries = getQueriesFromSearchOptions(newQueryArray, speciesList)
+      const newQueries = getQueriesFromSearchOptions(newQueryArray, speciesList, selectedAnnotation)
       const queries = newQueries
       if (queries.length > window.MAX_GENE_SEARCH) {
         log('search-too-many-genes', { numGenes: queries.length })
@@ -178,7 +181,7 @@ export default function StudyGeneField({ queries, queryFn, allGenes, speciesList
         return queryArray
       }
     }
-    const searchOptions = getSearchOptions(inputTextValues, speciesList)
+    const searchOptions = getSearchOptions(inputTextValues, speciesList, selectedAnnotation)
     const queryOptions = searchOptions[0].options
     const newQueryArray = queryArray.concat(queryOptions)
     setInputText('')
@@ -226,8 +229,8 @@ export default function StudyGeneField({ queries, queryFn, allGenes, speciesList
   useEffect(() => {
     if (queries.join(',') !== queryArray.map(opt => opt.value).join(',')) {
       // the genes have been updated elsewhere -- resync
-      const queriesSearchOptions = getSearchOptions(queries, speciesList)
-      const newQueryArray = getQueryArrayFromSearchOptions(queriesSearchOptions, speciesList)
+      const queriesSearchOptions = getSearchOptions(queries, speciesList, selectedAnnotation)
+      const newQueryArray = getQueryArrayFromSearchOptions(queriesSearchOptions, speciesList, selectedAnnotation)
       setQueryArray(newQueryArray)
       setInputText('')
       setNotPresentQueries(new Set([]))
@@ -354,7 +357,7 @@ export default function StudyGeneField({ queries, queryFn, allGenes, speciesList
 /** Last filtering applied before showing selectable autocomplete options */
 function finalFilterOptions(option, rawInput) {
   const input = rawInput.toLowerCase()
-  const label = option.label.toLowerCase()
+  const label = 'label' in option ? option.label.toLowerCase() : option.toLowerCase()
   const isPathway = option.data.isGene === false
   return isPathway || label.includes(input) // partial match
 }
@@ -376,8 +379,8 @@ function filterSearchOptions(rawGeneOptions, rawPathwayOptions) {
 }
 
 /** takes an array of gene name strings, and returns options suitable for react-select */
-function getSearchOptions(rawSuggestions, speciesList) {
-  if (!getIsEligibleForPathwayExplore(speciesList)) {
+function getSearchOptions(rawSuggestions, speciesList, selectedAnnotation) {
+  if (!getIsEligibleForPathwayExplore(speciesList, selectedAnnotation)) {
     return rawSuggestions.map(rawSuggestion => {
       const geneName = rawSuggestion
       return { label: geneName, value: geneName, isGene: true }

app/javascript/components/visualization/Pathway.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Popover, OverlayTrigger } from 'react-bootstrap'
-import { manageDrawPathway } from '~/lib/pathway-expression'
+import { manageDrawPathway, writeLoadingIndicator } from '~/lib/pathway-expression'
 import { getIdentifierForAnnotation, naturalSort } from '~/lib/cluster-utils'
 import { round } from '~/lib/metrics-perf'
 
@@ -136,6 +136,7 @@ export default function Pathway({
   moveDescription()
   document.addEventListener('ideogramDrawPathway', configurePathwayTooltips)
   document.addEventListener('ideogramDrawPathway', updatePathwayOntologies)
+  document.addEventListener('ideogramDrawPathway', writeLoadingIndicator)
 
   /** Upon clicking a pathway node, show new pathway and expression overlay */
   function handlePathwayNodeClick(event, pathwayId) {

app/javascript/lib/pathway-expression.js

@@ -32,6 +32,8 @@ window.onerror = function(error) {
   }
 }
 
+const loadingCls = 'pathway-loading-expression'
+
 /**
  * Get mean, percent, and color per gene, by annotation label
  *
@@ -279,7 +281,7 @@ function writePathwayAnnotationLabelMenu(label, dotPlotMetrics) {
 }
 
 /** Update pathway header with SCP label menu, info icon */
-function writePathwayExpressionHeader(loadingCls, dotPlotMetrics, label, pathwayGenes) {
+function writePathwayExpressionHeader(dotPlotMetrics, label, pathwayGenes) {
   // Remove "Loading expression...", as load is done
   document.querySelector(`.${loadingCls}`)?.remove()
 
@@ -288,9 +290,12 @@ function writePathwayExpressionHeader(loadingCls, dotPlotMetrics, label, pathway
 }
 
 /** Add "Loading expression..." to pathway header while dot plot metrics are being fetched */
-function writeLoadingIndicator(loadingCls) {
+export function writeLoadingIndicator() {
   document.querySelector('.pathway-label-menu-container')?.remove()
   const headerLink = document.querySelector('._ideoPathwayHeader a')
+  if (!headerLink) {
+    return
+  }
   const style = 'color: #777; font-style: italic; margin-left: 10px;'
   const loading = `<span class="${loadingCls}" style="${style}">Loading expression...</span>`
   document.querySelector(`.${loadingCls}`)?.remove()
@@ -326,9 +331,6 @@ export async function renderPathwayExpression(studyAccession, cluster, annotatio
     return
   }
 
-  const loadingCls = 'pathway-loading-expression'
-  writeLoadingIndicator(loadingCls)
-
   /** After invisible dot plot renders, color each gene by expression metrics */
   function backgroundDotPlotDrawCallback(dotPlot) {
     // The first render is for uncollapsed cell-x-gene metrics (heatmap),
@@ -353,11 +355,11 @@ export async function renderPathwayExpression(studyAccession, cluster, annotatio
 
     allDotPlotMetrics = mergeDotPlotMetrics(dotPlotMetrics, allDotPlotMetrics)
 
-    writePathwayExpressionHeader(loadingCls, allDotPlotMetrics, label, pathwayGenes)
+    writePathwayExpressionHeader(allDotPlotMetrics, label, pathwayGenes)
 
     colorPathwayGenesByExpression(label, allDotPlotMetrics)
 
-    if (numRenders <= dotPlotGeneBatches.length) {
+    if (numRenders < dotPlotGeneBatches.length - 1) {
       numRenders += 1
       // Future optimization: render background dot plot one annotation at a time.  This would
       // speed up initial pathway expression overlay rendering, and increase the practical limit

app/javascript/lib/search-utils.js

@@ -182,9 +182,9 @@ function getPathwaySuggestions(inputText, maxPathwaySuggestions) {
  *
  * @param {String} inputString String typed by user into text input
  * @param {Array<String>} targets List of strings to match against
- * @param {Integer} numSuggestions Number of suggestions to show
+ * @param {Boolean} includePathways Whether include pathway suggestions
  */
-export function getAutocompleteSuggestions(inputText, targets, numSuggestions=NUM_SUGGESTIONS) {
+export function getAutocompleteSuggestions(inputText, targets, includePathways) {
   // Autocomplete when user starts typing
   if (!targets?.length || !inputText) {
     return []
@@ -203,7 +203,7 @@ export function getAutocompleteSuggestions(inputText, targets, numSuggestions=NU
       .sort((a, b) => {return a.localeCompare(b)})
 
   let topMatches = prefixMatches
-  if (prefixMatches.length < numSuggestions) {
+  if (prefixMatches.length < NUM_SUGGESTIONS) {
     // Get similarly-named genes, as measured by Dice coefficient (`rating`)
     const similar = stringSimilarity.findBestMatch(inputText, targets)
     const similarMatches =
@@ -220,10 +220,13 @@ export function getAutocompleteSuggestions(inputText, targets, numSuggestions=NU
 
   if (exactMatch) {topMatches.unshift(exactMatch)} // Put any exact match first
 
-  const maxPathwaySuggestions = numSuggestions - prefixMatches.length
-  const pathwaySuggestions = getPathwaySuggestions(inputText, maxPathwaySuggestions)
+  const maxPathwaySuggestions = NUM_SUGGESTIONS - prefixMatches.length
+  let pathwaySuggestions = []
+  if (includePathways) {
+    pathwaySuggestions = getPathwaySuggestions(inputText, maxPathwaySuggestions)
+  }
 
-  const topGeneMatches = topMatches.slice(0, numSuggestions)
+  const topGeneMatches = topMatches.slice(0, NUM_SUGGESTIONS)
 
   topMatches = topGeneMatches.concat(pathwaySuggestions)
 

test/js/explore/study-gene-keyword.test.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { render, waitFor, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 
-import StudyGeneField, { getIsInvalidQuery } from 'components/explore/StudyGeneField'
+import StudyGeneField, { getIsInvalidQuery, getIsEligibleForPathwayExplore } from 'components/explore/StudyGeneField'
 import * as UserProvider from '~/providers/UserProvider'
 import { interestingNames, interactionCacheCsn1s1 } from './../visualization/pathway.test-data'
 
@@ -67,7 +67,10 @@ describe('Search query display text', () => {
       })
 
     const { container } = render(
-      <StudyGeneField queries={[]} queryFn={() => {}} allGenes={['PTEN']} speciesList={['Homo sapiens']} />
+      <StudyGeneField
+        queries={[]} queryFn={() => {}} allGenes={['PTEN']}
+        speciesList={['Homo sapiens']} selectedAnnotation={{ type: 'group' }}
+      />
     )
 
     // Find the input field inside react-select
@@ -97,5 +100,26 @@ describe('Search query display text', () => {
     const pathwayIsInvalid = getIsInvalidQuery('CSN1S1', ['PTEN'])
     expect(pathwayIsInvalid).toBe(false)
   })
+
+  it('determines if view is eligible for pathway exploration', async () => {
+    jest
+      .spyOn(UserProvider, 'getFeatureFlagsWithDefaults')
+      .mockReturnValue({
+        show_pathway_expression: true
+      })
+
+    // Confirm mouse is not eligible
+    const isMouseEligible = getIsEligibleForPathwayExplore(['Mus musculus'], { type: 'group' })
+    expect(isMouseEligible).toBe(false)
+
+    // Confirm numeric annotation is not eligible
+    const isNumericAnnotationEligible = getIsEligibleForPathwayExplore(['Homo sapiens'], { type: 'numeric' })
+    expect(isNumericAnnotationEligible).toBe(false)
+
+    // Confirm group annotation for human is eligible
+    const isHumanGroupAnnotationEligible = getIsEligibleForPathwayExplore(['Homo sapiens'], { type: 'group' })
+    expect(isHumanGroupAnnotationEligible).toBe(true)
+  })
+
 })