restructure content and fetch kgs at render

Squashed commit of the following: commit 4e112ab6bb8117e51390741ba8f6ea499fdea3ee Author: Matt Watson <mattwat@gmail.com> Date: Thu Sep 24 16:17:42 2020 -0400 refactor dbGaP-link building functions commit 682b2f3929f50a9d9444156bc2cc7941dc4af9ad Author: Matt Watson <mattwat@gmail.com> Date: Thu Sep 24 16:15:00 2020 -0400 rename dbGaP link utilities commit 4bc03f2012bc46f17fbad2e68cdcfc408ddd646e Author: Matt Watson <mattwat@gmail.com> Date: Thu Sep 24 16:14:36 2020 -0400 add external link component commit 931a599560d918eb971cb2f39ee6af3e6635653a Author: Matt Watson <mattwat@gmail.com> Date: Thu Sep 24 15:52:11 2020 -0400 render result description above its instructions commit da25aa8e7fdabd1e9f0c342782dc929df0cd0283 Author: Matt Watson <mattwat@gmail.com> Date: Thu Sep 24 15:49:01 2020 -0400 fetch kg for result at time of render bump version
mbwatson · Sep 24, 2020 · e6f37a3 · e6f37a3
1 parent 805a511
commit e6f37a3
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "helx-search-client",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",

diff --git a/src/components/external-link.js b/src/components/external-link.js
@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+export const ExternalLink = styled.a.attrs(props => ({ target: '_blank', rel: 'noopener noreferrer', href: props.to }))``
+
+ExternalLink.propTypes = {
+    to: PropTypes.string.isRequired,
+}
+
diff --git a/src/components/search/result.js b/src/components/search/result.js
@@ -1,12 +1,13 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { useSearch } from '../../hooks'
 import { Subheading, Paragraph } from '../typography'
 import { Collapser } from '../collapser'
 import { KnowledgeGraphs } from '../search'
 import { VariablesList } from './study-variables-list'
-import { accessionLink } from '../../utils'
+import { dbGapLink } from '../../utils'
+import { ExternalLink } from '../external-link'
 
 const Wrapper = styled.div`
     display: flex;
@@ -27,7 +28,7 @@ const Name = styled(Subheading)`
 
 // Details
 
-const Instructions = styled(Paragraph)`
+const ResultParagraph = styled(Paragraph)`
     margin: 1rem;
 `
 
@@ -58,36 +59,39 @@ const StudyName = styled.div``
 const StudyAccession = styled.div``
 
 export const Result = ({ result, query }) => {
-    const { name, instructions, tag_id } = result // other properties: description, identifiers, optional_targets, search_targets, pk, studies
-    const [knowledgeGraphs, setKnowledgeGraphs] = useState()
+    const { name, description, instructions, tag_id } = result // other properties: description, identifiers, optional_targets, search_targets, pk, studies
+    const [knowledgeGraphs, setKnowledgeGraphs] = useState([])
     const { fetchKnowledgeGraphs } = useSearch()
 
-    const handleExpandKnowledgeGraphs = () => {
+    useEffect(() => {
         const getKgs = async () => {
             const kgs = await fetchKnowledgeGraphs(tag_id, query)
-            console.log(kgs)
             setKnowledgeGraphs(kgs)
         }
-        if (!knowledgeGraphs) { getKgs() }
-    }
-
-    const handleCollapseKnowledgeGraphs = () => { console.log('closing kgs...') }
+        getKgs()
+    }, [])
 
     return (
         <Wrapper>
             <Name>Harmonized Variable: { name }</Name>
-            <Instructions>
+            <ResultParagraph>
+                <strong>Description</strong>: { description }
+            </ResultParagraph>
+            <ResultParagraph>
                 <strong>Instructions</strong>: { instructions }
-            </Instructions>
+            </ResultParagraph>
             {
                 result.studies.map(({ study_id, study_name, variables }) => (
                     <Collapser key={ `${ name } ${ study_id }` } ariaId={ 'studies' } { ...collapserStyles }
                         title={
                             <CollapserHeader>
-                                <StudyName><strong>Study</strong>: { study_name }</StudyName>
+                                <StudyName>
+                                    <strong>Study</strong>:
+                                    <ExternalLink to={ dbGapLink.study(study_id.replace(/^TOPMED\.STUDY:/, '')) } >{ study_name }</ExternalLink>
+                                </StudyName>
                                 <StudyAccession>
                                     <strong>Accession</strong>: 
-                                    <a href={ accessionLink(study_id.replace(/^TOPMED\.STUDY:/, '')) } rel="noopener noreferrer">{ study_id.replace(/^TOPMED\.STUDY:/, '') }</a>
+                                    <ExternalLink to={ dbGapLink.study(study_id.replace(/^TOPMED\.STUDY:/, '')) } >{ study_id.replace(/^TOPMED\.STUDY:/, '') }</ExternalLink>
                                 </StudyAccession>
                             </CollapserHeader>
                         }
@@ -96,13 +100,13 @@ export const Result = ({ result, query }) => {
                     </Collapser>
                 ))
             }
-            <Collapser key={ `${ name } kg` } ariaId={ `${ name } kg` } { ...collapserStyles }
-                title={ <CollapserHeader>Knowledge Graph</CollapserHeader> }
-                openHandler={ handleExpandKnowledgeGraphs }
-                closeHandler={ handleCollapseKnowledgeGraphs }
-            >
-                { knowledgeGraphs ? <KnowledgeGraphs graphs={ knowledgeGraphs } /> : 'Fetching Knowlege Graphs...' }
-            </Collapser>
+            {
+                knowledgeGraphs.length > 0 && (
+                    <Collapser key={ `${ name } kg` } ariaId={ `${ name } kg` } { ...collapserStyles } title={ <CollapserHeader>Knowledge Graph</CollapserHeader> }>
+                        <KnowledgeGraphs graphs={ knowledgeGraphs } />
+                    </Collapser>
+                )
+            }
         </Wrapper>
     )
 }
@@ -113,7 +117,6 @@ Result.propTypes = {
         description:PropTypes.string.isRequired,
         identifiers:PropTypes.array.isRequired,
         instructions:PropTypes.string.isRequired,
-        knowledge_graph:PropTypes.object.isRequired,
         optional_targets:PropTypes.array.isRequired,
         search_targets:PropTypes.array.isRequired,
         pk:PropTypes.number.isRequired,

diff --git a/src/components/search/study-variables-list.js b/src/components/search/study-variables-list.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { dbGapStudyLink } from '../../utils'
+import { dbGapLink } from '../../utils'
 
 const Wrapper = styled.div`
     flex-direction: column;
@@ -29,7 +29,7 @@ export const VariablesList = ({ studyId, variables }) => {
                 {
                     variables.map(variable => (
                         <ListItem key={ variable }>
-                            <VariableLink to={ dbGapStudyLink(studyId, variable) || null }>{ variable }</VariableLink>
+                            <VariableLink to={ dbGapLink.variable(studyId, variable) || null }>{ variable }</VariableLink>
                         </ListItem>
                     ))
                 }

diff --git a/src/utils/dbgap-links.js b/src/utils/dbgap-links.js
@@ -1,15 +1,17 @@
 const DB_GAP_URL = `https://www.ncbi.nlm.nih.gov/projects/gap/cgi-bin/variable.cgi`
 
-export const dbGapStudyLink = (studyId, variable) => {
-    // variable always has the form "phv987654321.v12.p23"
-    // and the "987654321" portion is used in the dbGap link
-    const matches = variable.match(/phv(\d+)\.v\d+\.p\d+$/)
-    if (matches) {
-        const [, variableDigits] = matches
-        return variableDigits ? `${ DB_GAP_URL }?study_id=${ studyId }&phv=${ variableDigits }` : `${ DB_GAP_URL }?studyId=${ studyId }&phv=${ variable }`
-    } else {
-        return null
-    }
+export const dbGapLink = {
+  variable: (studyId, variable) => {
+      // variable always has the form "phv987654321.v12.p23"
+      // and the "987654321" portion is used in the dbGap link
+      const matches = variable.match(/phv(\d+)\.v\d+\.p\d+$/)
+      if (matches) {
+          const [, variableDigits] = matches
+          return variableDigits ? `${ DB_GAP_URL }?study_id=${ studyId }&phv=${ variableDigits }` : `${ DB_GAP_URL }?studyId=${ studyId }&phv=${ variable }`
+      } else {
+          return null
+      }
+  },
+  study: studyId => `${ DB_GAP_URL }?study_id=${ studyId }`,
 }
 
-export const accessionLink = studyId => `${ DB_GAP_URL }?study_id=${ studyId }`