[ENH] Add link to external participant level search to filters block

packages/openneuro-app/src/scripts/search/search-container.tsx

@@ -10,6 +10,7 @@
 } from "../authentication/profile"
 import { Button } from "@openneuro/components/button"
 import { Loading } from "@openneuro/components/loading"
+import { NeurobagelSearch } from "@openneuro/components/search-page"
 import {
   AgeRangeInput,
   AllDatasetsToggle,
@@ -156,6 +157,7 @@
         )}
         renderSearchFacets={() => (
           <>
+            <NeurobagelSearch />
             <KeywordInput />
             <AdminUser>
               <AllDatasetsToggle />

packages/openneuro-components/src/search-page/FiltersBlock.tsx

@@ -4,6 +4,8 @@
 import { FilterDateItem } from "./FilterDateItem"
 import { TermListItem } from "./TermListItem"
 import { FacetSelectValueType } from "../facets/FacetSelect"
+import { NeurobagelSearch } from "./NeurobagelSearch"
+
 
 export interface FiltersBlockProps {
   keywords: string[]
@@ -67,6 +69,7 @@
 
   return (
     <div className="filters-block">
+      {/* <NeurobagelSearch /> */}
       <h2>
         {noFilters
           ? (

packages/openneuro-components/src/search-page/NeurobagelSearch.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+
+import NeurobagelLogo from "./neurobagel_logo.svg"
+import { AccordionTab } from "../accordion/AccordionTab"
+import { AccordionWrap } from "../accordion/AccordionWrap"
+import styled from "@emotion/styled"
+
+const NeurobagelSearchDiv = styled.div`
+padding-bottom: 15px;
+border-bottom: 1px solid #dfdfdf; // $newspaper in _variables.scss
+margin-bottom: 10px;
+  img.inline-icon {
+    height: 1.1em;
+    vertical-align: middle;
+  }
+  .on-accordion-wrapper .keyword-accordion {
+    .accordion-title {
+        position: absolute;
+        top: -20px;
+        @media (max-width: 421px) {
+          left: 93px;
+        }
+        @media (max-width: 330px) {
+          left: 130px;
+        }
+        left: 375px;
+    }
+  }
+`
+
+export const NeurobagelSearch = () => {
+  return (
+    <NeurobagelSearchDiv>
+      <img src={NeurobagelLogo} className="inline-icon"/>{" "}
+      <a href="https://query.neurobagel.org/?node=OpenNeuro" target="_blank">
+        Search at the participant-level with Neurobagel
+      </a>        
+      <AccordionWrap>
+        <AccordionTab
+        accordionStyle="plain"
+        label="?"
+        className="keyword-accordion"
+        >
+          <span>
+            Search at the participant level is provided by{" "}
+            <a href="https://neurobagel.org" target="_blank">
+            Neurobagel
+            </a>
+            {", "}a third party project.
+
+            Neurobagel is a collection of tools for harmonizing phenotypic 
+            and imaging data descriptions, searching for participants across datasets, 
+            and constructing cohorts from multiple source datasets.
+          </span>
+        </AccordionTab>
+      </AccordionWrap>
+    </NeurobagelSearchDiv>
+  )
+}

packages/openneuro-components/src/search-page/index.ts

@@ -2,6 +2,7 @@ import { SearchResultsList } from "./SearchResultsList"
 import { FiltersBlock } from "./FiltersBlock"
 import { SearchPage } from "./SearchPage"
 import { SearchSort } from "./SearchSort"
+import { NeurobagelSearch } from "./NeurobagelSearch"
 
 /* TEMPORARY EXPORTS */
 // TODO: remove
@@ -15,4 +16,5 @@ export {
   SearchResultsList,
   SearchSort,
   SearchSortContainerExample,
+  NeurobagelSearch
 }