From 045ff6bde6db171bcacb229709c001b8e48066be Mon Sep 17 00:00:00 2001 From: Jeffrey Wong Date: Wed, 1 May 2024 16:21:25 -0400 Subject: [PATCH 1/6] Accordion component; FAQ start --- src/client/components/accordion.js | 61 ++++++++++++++++++++++++++++++ src/client/components/home.js | 9 +++++ src/styles/accordion.css | 50 ++++++++++++++++++++++++ src/styles/home.css | 8 ++-- src/styles/index.css | 1 + 5 files changed, 125 insertions(+), 4 deletions(-) create mode 100644 src/client/components/accordion.js create mode 100644 src/styles/accordion.css diff --git a/src/client/components/accordion.js b/src/client/components/accordion.js new file mode 100644 index 000000000..71a4db5ad --- /dev/null +++ b/src/client/components/accordion.js @@ -0,0 +1,61 @@ +import h from 'react-hyperscript'; +import { Component } from 'react'; +import { makeClassList } from '../dom'; + + +export const ACCORDION_ITEM_FIELDS = { + TITLE: 'title', + DESCRIPTION: 'description' +}; + + +export class AccordionItem extends Component { + constructor(props){ + super(props); + + this.state = { + isOpen: false + }; + } + + toggleItem(){ + this.setState({ isOpen: !this.state.isOpen }); + } + + render(){ + const { title, description } = this.props.item; + const { isOpen } = this.state; + return h('div.accordion-item', { + className: makeClassList({ + 'open': isOpen + }), + onClick: () => this.toggleItem() + }, [ + h('div.accordion-item-header', [ + h( 'div.accordion-item-header-title', title ), + isOpen ? h('i.material-icons.accordion-item-header-icon', 'expand_less') : + h('i.material-icons.accordion-item-header-icon', 'expand_more') + ]), + h('p.accordion-item-content', description ) + ]); + } +} + +export class Accordion extends Component { + constructor(props){ + super(props); + + this.state = { + }; + } + + render(){ + const { title, items } = this.props; + return h('div.accordion', [ + h('h2.accordion-title', title ), + h('div.accordion-items', items.map( (item, key) => h( AccordionItem, { key, item } ) ) ) + ]); + } +} + +export default Accordion; \ No newline at end of file diff --git a/src/client/components/home.js b/src/client/components/home.js index 82c2153be..6265b12c3 100644 --- a/src/client/components/home.js +++ b/src/client/components/home.js @@ -7,6 +7,7 @@ import { Carousel, CAROUSEL_CONTENT } from './carousel'; import { tryPromise } from '../../util'; import { formatDistanceToNow } from 'date-fns'; import DocumentSearch from '../document-search'; +import Accordion from './accordion.js'; import { TWITTER_ACCOUNT_NAME, SAMPLE_DOC_ID, EMAIL_ADDRESS_INFO } from '../../config'; import _ from 'lodash'; @@ -557,6 +558,14 @@ class Home extends Component { ]) ]) ]), + h('div.home-section.home-fluid-section.home-fluid-section-no-figure', [ + h('div.home-fluid-section-copy', [ + h( Accordion, { title: 'Frequently Asked Questions', items: [ + { title: 'What is Biofactoid?', description: 'Biofactoid is a platform for creating and sharing digital profiles of scientific discoveries in articles. Authors can create a profile of their article, and researchers can explore the profiles to find related research.' }, + { title: 'What is Biofactoid?', description: 'Biofactoid is a platform for creating and sharing digital profiles of scientific discoveries in articles. Authors can create a profile of their article, and researchers can explore the profiles to find related research.' } + ] } ) + ]) + ]), h('div.home-section.home-search-results', [ this.state.searchMode ? ( this.state.searching ? ( diff --git a/src/styles/accordion.css b/src/styles/accordion.css new file mode 100644 index 000000000..5e8aa187a --- /dev/null +++ b/src/styles/accordion.css @@ -0,0 +1,50 @@ +.accordion { + position: relative; +} + +.accordion-items { + max-width: 70%; +} + +.accordion-item { + background: lightcoral; +} + +.accordion-item-header { + position: relative; +} + +.accordion-item-header .accordion-item-header-title { + font-size: large; +} + +.accordion-item-header:hover { + cursor: pointer; +} + +.accordion-item-header-icon { + position: absolute; + top: 70%; + right: 0; + transform: translateY(-50%); + width: 30px; + height: 30px; + transition: all 0.2s ease; +} + +.accordion .accordion-item-content { + padding: 0 1em; + opacity: 0; + max-height: 0; + overflow: hidden; + transition: all 0.2s ease; +} + +.accordion .accordion-item.open .accordion-item-header { + margin-bottom: 15px; +} + +.accordion .accordion-item.open .accordion-item-content { + max-height: 1000px; + opacity: 1; +} \ No newline at end of file diff --git a/src/styles/home.css b/src/styles/home.css index 731dd800b..2732dd617 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -660,9 +660,9 @@ } } -.home-search-doc-top { - /* flex: 1 1 auto; */ -} +/* .home-search-doc-top { + flex: 1 1 auto; +} */ .home-search-doc-title { position: relative; @@ -886,7 +886,7 @@ display: none; } - ..home-intro-figure-sm-alt-section { + .home-intro-figure-sm-alt-section { display: block; } diff --git a/src/styles/index.css b/src/styles/index.css index d4693a150..d4248022f 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -6,6 +6,7 @@ @import "./custom-icons.css"; @import "./popover"; @import "./carousel.css"; +@import "./accordion.css"; @import "./related-papers.css"; @import "./react-tabs.css"; @import "./init-app.css"; From 28232f77b7eefc228dc4774af6e1ccbe8ea36789 Mon Sep 17 00:00:00 2001 From: Jeffrey Wong Date: Thu, 2 May 2024 10:29:10 -0400 Subject: [PATCH 2/6] Optional title --- src/client/components/accordion.js | 2 +- src/client/components/home.js | 4 +++- src/styles/accordion.css | 20 +++++++------------- 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/src/client/components/accordion.js b/src/client/components/accordion.js index 71a4db5ad..34ef83ae9 100644 --- a/src/client/components/accordion.js +++ b/src/client/components/accordion.js @@ -52,7 +52,7 @@ export class Accordion extends Component { render(){ const { title, items } = this.props; return h('div.accordion', [ - h('h2.accordion-title', title ), + title ? h('h3.accordion-title', title ) : null, h('div.accordion-items', items.map( (item, key) => h( AccordionItem, { key, item } ) ) ) ]); } diff --git a/src/client/components/home.js b/src/client/components/home.js index 6265b12c3..bdd25849b 100644 --- a/src/client/components/home.js +++ b/src/client/components/home.js @@ -560,7 +560,9 @@ class Home extends Component { ]), h('div.home-section.home-fluid-section.home-fluid-section-no-figure', [ h('div.home-fluid-section-copy', [ - h( Accordion, { title: 'Frequently Asked Questions', items: [ + h( Accordion, { + title: 'Frequently Asked Questions', + items: [ { title: 'What is Biofactoid?', description: 'Biofactoid is a platform for creating and sharing digital profiles of scientific discoveries in articles. Authors can create a profile of their article, and researchers can explore the profiles to find related research.' }, { title: 'What is Biofactoid?', description: 'Biofactoid is a platform for creating and sharing digital profiles of scientific discoveries in articles. Authors can create a profile of their article, and researchers can explore the profiles to find related research.' } ] } ) diff --git a/src/styles/accordion.css b/src/styles/accordion.css index 5e8aa187a..bbd3584eb 100644 --- a/src/styles/accordion.css +++ b/src/styles/accordion.css @@ -1,35 +1,30 @@ .accordion { position: relative; + max-width: 75%; } -.accordion-items { - max-width: 70%; +.accordion-item { + padding: 1em 0.5em; + border-bottom: 1px solid rgb(234, 234, 234); } -.accordion-item { - background: lightcoral; +.accordion p { + margin: 0; } .accordion-item-header { position: relative; } -.accordion-item-header .accordion-item-header-title { - font-size: large; -} - .accordion-item-header:hover { cursor: pointer; } .accordion-item-header-icon { position: absolute; - top: 70%; + top: 50%; right: 0; transform: translateY(-50%); - width: 30px; - height: 30px; - transition: all 0.2s ease; } .accordion .accordion-item-content { @@ -37,7 +32,6 @@ opacity: 0; max-height: 0; overflow: hidden; - transition: all 0.2s ease; } .accordion .accordion-item.open .accordion-item-header { From 3adb083469757c7100be08216f176f2e7b34c8f4 Mon Sep 17 00:00:00 2001 From: Jeffrey Wong Date: Thu, 2 May 2024 13:39:44 -0400 Subject: [PATCH 3/6] Adding in text from FAQ. --- src/client/components/accordion.js | 6 +- src/client/components/home.js | 110 ++++++++++++++++++++++++++++- src/styles/accordion.css | 26 +++++-- 3 files changed, 131 insertions(+), 11 deletions(-) diff --git a/src/client/components/accordion.js b/src/client/components/accordion.js index 34ef83ae9..064d60d45 100644 --- a/src/client/components/accordion.js +++ b/src/client/components/accordion.js @@ -1,6 +1,7 @@ import h from 'react-hyperscript'; import { Component } from 'react'; import { makeClassList } from '../dom'; +import _ from 'lodash'; export const ACCORDION_ITEM_FIELDS = { @@ -25,6 +26,7 @@ export class AccordionItem extends Component { render(){ const { title, description } = this.props.item; const { isOpen } = this.state; + const content = _.isString( description ) ? [ h('p', description) ] : description; return h('div.accordion-item', { className: makeClassList({ 'open': isOpen @@ -32,11 +34,11 @@ export class AccordionItem extends Component { onClick: () => this.toggleItem() }, [ h('div.accordion-item-header', [ - h( 'div.accordion-item-header-title', title ), + h( 'p.accordion-item-header-title', title ), isOpen ? h('i.material-icons.accordion-item-header-icon', 'expand_less') : h('i.material-icons.accordion-item-header-icon', 'expand_more') ]), - h('p.accordion-item-content', description ) + h('div.accordion-item-content', content ) ]); } } diff --git a/src/client/components/home.js b/src/client/components/home.js index bdd25849b..d487547fd 100644 --- a/src/client/components/home.js +++ b/src/client/components/home.js @@ -563,9 +563,113 @@ class Home extends Component { h( Accordion, { title: 'Frequently Asked Questions', items: [ - { title: 'What is Biofactoid?', description: 'Biofactoid is a platform for creating and sharing digital profiles of scientific discoveries in articles. Authors can create a profile of their article, and researchers can explore the profiles to find related research.' }, - { title: 'What is Biofactoid?', description: 'Biofactoid is a platform for creating and sharing digital profiles of scientific discoveries in articles. Authors can create a profile of their article, and researchers can explore the profiles to find related research.' } - ] } ) + { title: 'What is Biofactoid?', description: 'A tool to map biological pathways, assembled from author-curated results in papers.'}, + { title: 'What problem does Biofactoid help solve?', description: [ + h('p', 'Think about the last time you snapped a photo of your friends or family (or your pet). Your phone automatically identified and focused on all the faces, but, whether you were aware of it or not, it also labelled those faces (and cars, food, cute babies) so that it could organise your album by the places, people, pets and things within the images.'), + h('p', 'Wouldn’t it be great if all of the scientific details in a paper were readily identifiable by computers so that information across the literature could be precisely related and combined?'), + h('p', 'Despite the fact that scientific papers are distributed digitally, the content itself -- plain text and images -- remains rooted in the print era. Unfortunately, knowledge in the text and figures in papers is extremely challenging for computers to accurately extract and use. We traditionally rely on expert curators at biological resources (e.g., UniProt) to read papers and enter the information in a format that a computer can work with. However, this is expensive and there are too many papers for expert curators to handle at the same time.'), + h('p', 'Biofactoid rethinks the way information in papers is captured by enabling curation by authors of scientific articles, which is accurate, since authors are authoritative experts on their studies, and scales to support comprehensive, up-to-the-minute coverage of the literature.') + ]}, + { title: 'What kind of information does Biofactoid contain?', description: 'Functional relationships (e.g., binding, transcription) between molecules and chemicals. For instance, "NAD+ binds to mouse PARP1".'}, + { title: 'What species does Biofactoid support?', description: [ + h('p', [ + 'Biofactoid supports entries about human biology and major model organisms including: ', + h('em', 'M. musculus'), h('span', ', '), + h('em', 'R. norvegicus'), h('span', ', '), + h('em', 'S. cerevisiae'), h('span', ', '), + h('em', 'D. melanogaster'), h('span', ', '), + h('em', 'E. coli'), h('span', ', '), + h('em', 'C. elegans'), h('span', ', '), + h('em', 'D. rerio'), h('span', ', '), + h('em', 'A. thaliana'), h('span', ', as well as '), + h('em', 'SARS-CoV-2'), h('span', '.') + ]) + ]}, + { title: 'Can anyone submit an article?', description: 'Any author of a primary research article is welcome to submit content to Biofactoid. Authors access the curation tool via a private web link. Author names and emails are associated with Biofactoid records and matched against corresponding author and ORCID information (when available) for each article. The Biofactoid website displays the name of the author who created the record, linked to their ORCID.' }, + { title: 'How long will it take to create an entry for my article?', description: 'A typical author spends a total of 6 minutes (median time) to add information from a paper; this usually involves 3 interactions. More than a quarter of users finish in less than 3 minutes.' }, + { title: 'Do I need to create an account?', description: 'No. All Biofactoid data is freely and openly available for all to use, download and redistribute without restriction. Authors curate their paper by following a private web link. Email addresses remain private and are never shared.' }, + { title: 'How does Biofactoid compare to pathway databases like Reactome or STRING?', description: [ + h('p', 'Biofactoid collects pathway and network data and makes it available as a resource to support many different uses. Biofactoid data can be searched as is, as a knowledge resource. It can also provide input data for pathway and network analyses, such as the following:'), + h('ul', [ + h('li', [ + 'STRING collects data from other sources, such as Biocarta, BioCyc, Gene Ontology, KEGG, and Reactome; ', + h('u', 'Biofactoid is a primary source of curated data') + ]), + h('li', 'Reactome curates a defined set of human pathways from select papers, focusing on a consensus (i.e. "textbook") interpretation of biological processes; Biofactoid supports author-curation of all papers with pathway results') + ]) + ]}, + { title: 'What are examples of how Biofactoid data is used?', description: [ + h('p', 'Biofactoid collects pathway and network data and makes it available as a resource to support many different uses. Biofactoid data can be searched as is, as a knowledge resource. It can also provide input data for pathway and network analyses, such as the following:'), + h('ul', [ + h('li', [ + h('b', 'Interpreting long lists of genes from large-scale experiments'), + h('ul', [ + h('p', 'Comprehensive quantification of DNA, RNA and proteins in biological samples yields long lists of measured entities (e.g. differentially expressed genes) which are difficult to interpret. Pathway enrichment analysis summarises gene lists as a smaller, more easily interpretable list of affected pathways. Pathway data is obtained from manually curated resources.'), + h('li', [ + h('a.plain-link', { href: 'https://www.science.org/doi/full/10.1126/scisignal.aan3580', target: '_blank' }, 'Integrated in vivo multiomics analysis identifies p21-activated kinase signaling as a driver of colitis.'), + ' Sci. Signal 11 (2018)' + ]), + h('li', [ + h('a.plain-link', { href: 'https://www.nature.com/articles/nature13108', target: '_blank' }, 'Epigenomic alterations define lethal CIMP-positive ependymomas of infancy.'), + ' Nature 506 (2014)' + ]), + h('li', [ + h('a.plain-link', { href: 'https://www.nature.com/articles/nature13483', target: '_blank' }, 'DNA-damage-induced differentiation of leukaemic cells as an anti-cancer barrier.'), + ' Nature 514 (2014)' + ]) + ]) + ]), + h('li', [ + h('b', 'Exploring the mechanistic neighbourhood of a gene or drug'), + h('ul', [ + h('p', 'Functional screens (e.g., RNAi) and genetic screens can implicate one or a few genes in a phenotype. However, complex cellular networks of gene products and chemicals underlie most genotype-to-phenotype relationships. An integrated resource of curated biological relationships enables researchers to explore a neighbourhood of direct and indirect mechanistic interactions for a protein (or drug) of interest.'), + h('li', [ + 'Search engines: ', + h('a.plain-link', { href: 'https://string-db.org/', target: '_blank' }, 'STRING'), + h('span', ', '), + h('a.plain-link', { href: 'https://genemania.org/', target: '_blank' }, 'GeneMANIA'), + h('span', ', '), + h('a.plain-link', { href: 'https://apps.pathwaycommons.org/', target: '_blank' }, 'Pathway Commons Search') + ]) + ]), + ]), + h('li', [ + h('b', 'Network analysis'), + h('ul', [ + h('p', 'The research community has used pathway and interaction data in a wide variety of computational analyses:'), + h('li', [ + h('em', 'Constructing quantitative dynamical models from curated pathways'), + h('ul', [ + h('li', [ + h('a.plain-link', { href: 'https://pubmed.ncbi.nlm.nih.gov/24273241/', target: '_blank' }, 'Pathway Commons at virtual cell: use of pathway data for mathematical.'), + ' Bioinformatics 15:30 (2014)' + ]) + ]), + ]), + h('li', [ + h('em', 'Using curated pathways to assemble a kinase signalling network that explains kinase data'), + h('ul', [ + h('li', [ + h('a.plain-link', { href: 'https://www.nature.com/articles/nmeth.3773', target: '_blank' }, 'DREAM Challenge: Hill, S. M. et al. Inferring causal molecular networks: empirical assessment through a community-based effort.'), + ' Nat. Methods 13 (2016)' + ]) + ]), + ]), + h('li', [ + h('em', 'Using curated pathways to explain mutually exclusive mutations in cancer'), + h('ul', [ + h('li', [ + h('a.plain-link', { href: 'https://genomebiology.biomedcentral.com/articles/10.1186/s13059-015-0612-6', target: '_blank' }, 'Systematic identification of cancer driving signaling pathways based on mutual exclusivity of genomic alterations.'), + ' Genome Biology 16:45 (2015)' + ]) + ]), + ]) + ]) + ]) + ]) + ]} + ] + }) ]) ]), h('div.home-section.home-search-results', [ diff --git a/src/styles/accordion.css b/src/styles/accordion.css index bbd3584eb..e597f2a97 100644 --- a/src/styles/accordion.css +++ b/src/styles/accordion.css @@ -1,6 +1,7 @@ .accordion { - position: relative; - max-width: 75%; + margin: auto; + width: 75%; + padding: 10px; } .accordion-item { @@ -8,14 +9,15 @@ border-bottom: 1px solid rgb(234, 234, 234); } -.accordion p { - margin: 0; -} - .accordion-item-header { position: relative; } +.accordion-item-header .accordion-item-header-title { + margin: 0; + max-width: 90%; +} + .accordion-item-header:hover { cursor: pointer; } @@ -32,6 +34,18 @@ opacity: 0; max-height: 0; overflow: hidden; + + & p { + color: #000; + } + + & ul { + margin-top: 0; + } + + & li { + margin: 0; + } } .accordion .accordion-item.open .accordion-item-header { From 71ee68cf45a5e4255b90db265c60ccab68c45423 Mon Sep 17 00:00:00 2001 From: Jeffrey Wong Date: Thu, 2 May 2024 14:04:28 -0400 Subject: [PATCH 4/6] Accommodate small screen sizes --- src/client/components/home.js | 23 +++++++++++++++-------- src/styles/accordion.css | 8 +++++++- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/client/components/home.js b/src/client/components/home.js index d487547fd..5e9f7a5ab 100644 --- a/src/client/components/home.js +++ b/src/client/components/home.js @@ -378,7 +378,8 @@ class Home extends Component { h('a.home-nav-link', [ h(ContactPopover) ]), - h('a.home-nav-link', { href: `https://twitter.com/${TWITTER_ACCOUNT_NAME}`, target: '_blank' }, 'Twitter') + h('a.home-nav-link', { href: `https://twitter.com/${TWITTER_ACCOUNT_NAME}`, target: '_blank' }, 'Twitter'), + h('a.home-nav-link', { href: '#faq' }, 'FAQ') ]) ]), h('div.home-intro', [ @@ -561,7 +562,7 @@ class Home extends Component { h('div.home-section.home-fluid-section.home-fluid-section-no-figure', [ h('div.home-fluid-section-copy', [ h( Accordion, { - title: 'Frequently Asked Questions', + title: [ h('span', { id: 'faq' }, 'Frequently Asked Questions')], items: [ { title: 'What is Biofactoid?', description: 'A tool to map biological pathways, assembled from author-curated results in papers.'}, { title: 'What problem does Biofactoid help solve?', description: [ @@ -571,9 +572,9 @@ class Home extends Component { h('p', 'Biofactoid rethinks the way information in papers is captured by enabling curation by authors of scientific articles, which is accurate, since authors are authoritative experts on their studies, and scales to support comprehensive, up-to-the-minute coverage of the literature.') ]}, { title: 'What kind of information does Biofactoid contain?', description: 'Functional relationships (e.g., binding, transcription) between molecules and chemicals. For instance, "NAD+ binds to mouse PARP1".'}, - { title: 'What species does Biofactoid support?', description: [ + { title: 'Which species does Biofactoid support?', description: [ h('p', [ - 'Biofactoid supports entries about human biology and major model organisms including: ', + 'Humans and major model organisms including: ', h('em', 'M. musculus'), h('span', ', '), h('em', 'R. norvegicus'), h('span', ', '), h('em', 'S. cerevisiae'), h('span', ', '), @@ -585,10 +586,16 @@ class Home extends Component { h('em', 'SARS-CoV-2'), h('span', '.') ]) ]}, - { title: 'Can anyone submit an article?', description: 'Any author of a primary research article is welcome to submit content to Biofactoid. Authors access the curation tool via a private web link. Author names and emails are associated with Biofactoid records and matched against corresponding author and ORCID information (when available) for each article. The Biofactoid website displays the name of the author who created the record, linked to their ORCID.' }, - { title: 'How long will it take to create an entry for my article?', description: 'A typical author spends a total of 6 minutes (median time) to add information from a paper; this usually involves 3 interactions. More than a quarter of users finish in less than 3 minutes.' }, + { title: 'Can anyone submit an article?', description: [ + h('p', [ + h('span', 'Any author of a primary research article is welcome to submit content to Biofactoid. Authors access the curation tool via a private web link. Author names and emails are associated with Biofactoid records and matched against corresponding author and '), + h('a.plain-link', { href: 'https://orcid.org/', target: '_blank' }, 'Open Researcher and Contributor ID (ORCID)'), + h('span', ' information (when available) for each article. The Biofactoid website displays the name of the author who created the record, linked to their ORCID.') + ]) + ]}, + { title: 'How long does it take?', description: 'A typical author spends a total of 6 minutes to add information from a paper; this usually involves 3 interactions. More than a quarter of users finish in less than 3 minutes.' }, { title: 'Do I need to create an account?', description: 'No. All Biofactoid data is freely and openly available for all to use, download and redistribute without restriction. Authors curate their paper by following a private web link. Email addresses remain private and are never shared.' }, - { title: 'How does Biofactoid compare to pathway databases like Reactome or STRING?', description: [ + { title: 'How does Biofactoid compare to other pathway databases like Reactome or STRING?', description: [ h('p', 'Biofactoid collects pathway and network data and makes it available as a resource to support many different uses. Biofactoid data can be searched as is, as a knowledge resource. It can also provide input data for pathway and network analyses, such as the following:'), h('ul', [ h('li', [ @@ -598,7 +605,7 @@ class Home extends Component { h('li', 'Reactome curates a defined set of human pathways from select papers, focusing on a consensus (i.e. "textbook") interpretation of biological processes; Biofactoid supports author-curation of all papers with pathway results') ]) ]}, - { title: 'What are examples of how Biofactoid data is used?', description: [ + { title: 'How is Biofactoid data is used?', description: [ h('p', 'Biofactoid collects pathway and network data and makes it available as a resource to support many different uses. Biofactoid data can be searched as is, as a knowledge resource. It can also provide input data for pathway and network analyses, such as the following:'), h('ul', [ h('li', [ diff --git a/src/styles/accordion.css b/src/styles/accordion.css index e597f2a97..8b97a242f 100644 --- a/src/styles/accordion.css +++ b/src/styles/accordion.css @@ -1,6 +1,6 @@ .accordion { margin: auto; - width: 75%; + width: 70%; padding: 10px; } @@ -55,4 +55,10 @@ .accordion .accordion-item.open .accordion-item-content { max-height: 1000px; opacity: 1; +} + +@media (max-width: 750px) { + .accordion { + width: 100%; + } } \ No newline at end of file From c60b33632d691be0985c2d3fe2a7c1a7f47f17a4 Mon Sep 17 00:00:00 2001 From: Jeffrey Wong Date: Thu, 2 May 2024 14:52:17 -0400 Subject: [PATCH 5/6] Toggle when header is clicked (not entire content) --- src/client/components/accordion.js | 14 ++++++------- src/client/components/home.js | 32 ++++++++++++++++++++---------- src/styles/accordion.css | 4 ++-- 3 files changed, 30 insertions(+), 20 deletions(-) diff --git a/src/client/components/accordion.js b/src/client/components/accordion.js index 064d60d45..9c71c0dba 100644 --- a/src/client/components/accordion.js +++ b/src/client/components/accordion.js @@ -27,13 +27,13 @@ export class AccordionItem extends Component { const { title, description } = this.props.item; const { isOpen } = this.state; const content = _.isString( description ) ? [ h('p', description) ] : description; - return h('div.accordion-item', { - className: makeClassList({ - 'open': isOpen - }), - onClick: () => this.toggleItem() - }, [ - h('div.accordion-item-header', [ + return h('div.accordion-item', [ + h('div.accordion-item-header', { + className: makeClassList({ + 'open': isOpen + }), + onClick: () => this.toggleItem() + }, [ h( 'p.accordion-item-header-title', title ), isOpen ? h('i.material-icons.accordion-item-header-icon', 'expand_less') : h('i.material-icons.accordion-item-header-icon', 'expand_more') diff --git a/src/client/components/home.js b/src/client/components/home.js index 5e9f7a5ab..12e198f17 100644 --- a/src/client/components/home.js +++ b/src/client/components/home.js @@ -564,26 +564,36 @@ class Home extends Component { h( Accordion, { title: [ h('span', { id: 'faq' }, 'Frequently Asked Questions')], items: [ - { title: 'What is Biofactoid?', description: 'A tool to map biological pathways, assembled from author-curated results in papers.'}, + { title: 'What is Biofactoid?', description: [ + h('p', [ + 'A tool to map ', + h('a.plain-link', { href: 'https://en.wikipedia.org/wiki/Biological_pathway', target: '_blank' }, 'biological pathways'), + ' assembled from author-curated results in papers.' + ]) + ]}, { title: 'What problem does Biofactoid help solve?', description: [ h('p', 'Think about the last time you snapped a photo of your friends or family (or your pet). Your phone automatically identified and focused on all the faces, but, whether you were aware of it or not, it also labelled those faces (and cars, food, cute babies) so that it could organise your album by the places, people, pets and things within the images.'), h('p', 'Wouldn’t it be great if all of the scientific details in a paper were readily identifiable by computers so that information across the literature could be precisely related and combined?'), - h('p', 'Despite the fact that scientific papers are distributed digitally, the content itself -- plain text and images -- remains rooted in the print era. Unfortunately, knowledge in the text and figures in papers is extremely challenging for computers to accurately extract and use. We traditionally rely on expert curators at biological resources (e.g., UniProt) to read papers and enter the information in a format that a computer can work with. However, this is expensive and there are too many papers for expert curators to handle at the same time.'), + h('p', [ + 'Despite the fact that scientific papers are distributed digitally, the content itself -- plain text and images -- remains rooted in the print era. Unfortunately, knowledge in the text and figures in papers is extremely challenging for computers to accurately extract and use. We traditionally rely on expert curators at biological resources (e.g., ', + h('a.plain-link', { href: 'https://www.uniprot.org/', target: '_blank' }, 'UniProt'), + ') to read papers and enter the information in a format that a computer can work with. However, this is expensive and there are too many papers for expert curators to handle at the same time.' + ]), h('p', 'Biofactoid rethinks the way information in papers is captured by enabling curation by authors of scientific articles, which is accurate, since authors are authoritative experts on their studies, and scales to support comprehensive, up-to-the-minute coverage of the literature.') ]}, { title: 'What kind of information does Biofactoid contain?', description: 'Functional relationships (e.g., binding, transcription) between molecules and chemicals. For instance, "NAD+ binds to mouse PARP1".'}, { title: 'Which species does Biofactoid support?', description: [ h('p', [ 'Humans and major model organisms including: ', - h('em', 'M. musculus'), h('span', ', '), - h('em', 'R. norvegicus'), h('span', ', '), - h('em', 'S. cerevisiae'), h('span', ', '), - h('em', 'D. melanogaster'), h('span', ', '), - h('em', 'E. coli'), h('span', ', '), - h('em', 'C. elegans'), h('span', ', '), - h('em', 'D. rerio'), h('span', ', '), - h('em', 'A. thaliana'), h('span', ', as well as '), - h('em', 'SARS-CoV-2'), h('span', '.') + h('em', 'M. musculus'), ', ', + h('em', 'R. norvegicus'), ', ', + h('em', 'S. cerevisiae'), ', ', + h('em', 'D. melanogaster'), ', ', + h('em', 'E. coli'), ', ', + h('em', 'C. elegans'), ', ', + h('em', 'D. rerio'), ', ', + h('em', 'A. thaliana'), ', as well as ', + h('em', 'SARS-CoV-2.') ]) ]}, { title: 'Can anyone submit an article?', description: [ diff --git a/src/styles/accordion.css b/src/styles/accordion.css index 8b97a242f..c1bd8aed5 100644 --- a/src/styles/accordion.css +++ b/src/styles/accordion.css @@ -48,11 +48,11 @@ } } -.accordion .accordion-item.open .accordion-item-header { +.accordion .accordion-item .accordion-item-header.open { margin-bottom: 15px; } -.accordion .accordion-item.open .accordion-item-content { +.accordion .accordion-item .accordion-item-header.open + .accordion-item-content { max-height: 1000px; opacity: 1; } From 67869ab2c72282542fa4b1f0e364d2ff01bc34c8 Mon Sep 17 00:00:00 2001 From: Jeffrey Wong Date: Thu, 2 May 2024 14:53:22 -0400 Subject: [PATCH 6/6] Accommodate large content. --- src/styles/accordion.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/accordion.css b/src/styles/accordion.css index c1bd8aed5..ea34cca88 100644 --- a/src/styles/accordion.css +++ b/src/styles/accordion.css @@ -53,7 +53,7 @@ } .accordion .accordion-item .accordion-item-header.open + .accordion-item-content { - max-height: 1000px; + max-height: 2000px; opacity: 1; }