@openneuro/app 4.33.4 → 4.34.0

package/src/scripts/components/search-page/FiltersBlock.tsx

@@ -0,0 +1,277 @@
+import React from "react"
+import { Button } from "../../components/button/Button"
+import { FilterListItem } from "./FilterListItem"
+import { TermListItem } from "./TermListItem"
+import type { FacetSelectValueType } from "../../components/facets/FacetSelect"
+import "./filters-block.scss"
+
+export interface FiltersBlockProps {
+  keywords: string[]
+  modality_selected?: FacetSelectValueType
+  searchAllDatasets: boolean
+  datasetType_selected?: string
+  datasetStatus_selected?: FacetSelectValueType
+  ageRange?: [number, number]
+  subjectCountRange?: [number, number]
+  authors: string[]
+  sex_selected?: string
+  date_selected?: string
+  tasks: string[]
+  diagnosis_selected?: FacetSelectValueType
+  section_selected?: FacetSelectValueType
+  species_selected?: FacetSelectValueType
+  studyDomains?: string[]
+  bodyParts?: string[]
+  scannerManufacturers?: string[]
+  scannerManufacturersModelNames?: string[]
+  tracerNames?: string[]
+  tracerRadionuclides?: string[]
+  noFilters: boolean
+  removeFilterItem?(isModality?: boolean): (key: string, value) => void
+  removeAllFilters?(): void
+  numTotalResults: number
+  loading: boolean
+  bidsDatasetType_selected?: FacetSelectValueType
+  brain_initiative: string
+}
+
+export const FiltersBlock = ({
+  keywords,
+  loading,
+  searchAllDatasets,
+  modality_selected,
+  datasetType_selected,
+  datasetStatus_selected,
+  ageRange,
+  subjectCountRange,
+  authors,
+  sex_selected,
+  tasks,
+  diagnosis_selected,
+  section_selected,
+  species_selected,
+  studyDomains,
+  date_selected,
+  bodyParts,
+  scannerManufacturers,
+  scannerManufacturersModelNames,
+  tracerNames,
+  tracerRadionuclides,
+  noFilters,
+  removeFilterItem,
+  removeAllFilters,
+  numTotalResults,
+  bidsDatasetType_selected,
+  brain_initiative,
+}: FiltersBlockProps) => {
+  const ageRangeIsNull =
+    JSON.stringify(ageRange) === JSON.stringify([null, null])
+  const subjectCountRangeIsNull =
+    JSON.stringify(subjectCountRange) === JSON.stringify([null, null])
+
+  return (
+    <div className="filters-block">
+      <h2>
+        {noFilters
+          ? (
+            <b>
+              Showing all available {modality_selected ? modality_selected : ""}
+              {" "}
+              datasets
+            </b>
+          )
+          : (
+            <>
+              {loading
+                ? (
+                  " Loading Results..."
+                )
+                : (
+                  <>
+                    These filters return <span>{numTotalResults}</span>{" "}
+                    datasets:{" "}
+                  </>
+                )}
+              <Button
+                label="Clear All"
+                size="small"
+                onClick={removeAllFilters}
+              />
+            </>
+          )}
+      </h2>
+      <ul className="active-filters">
+        {keywords && (
+          <TermListItem
+            type="Keyword"
+            item={{ param: "keywords", values: keywords }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {modality_selected && (
+          <FilterListItem
+            type="Modality"
+            item={{ param: "modality_selected", value: modality_selected }}
+            removeFilterItem={removeFilterItem(true)}
+          />
+        )}
+        {brain_initiative && (
+          <FilterListItem
+            type="Initiative"
+            item={{ param: "brain_initiative", value: "NIH BRAIN Initiative" }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {bidsDatasetType_selected && (
+          <FilterListItem
+            type="Dataset Type"
+            item={{
+              param: "bidsDatasetType_selected",
+              value: bidsDatasetType_selected,
+            }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {!searchAllDatasets && (
+          <>
+            {datasetType_selected && (
+              <FilterListItem
+                type="Type"
+                item={{
+                  param: "datasetType_selected",
+                  value: datasetType_selected,
+                }}
+                removeFilterItem={removeFilterItem()}
+              />
+            )}
+            {datasetStatus_selected && (
+              <FilterListItem
+                type="Status"
+                item={{
+                  param: "datasetStatus_selected",
+                  value: datasetStatus_selected,
+                }}
+                removeFilterItem={removeFilterItem()}
+              />
+            )}
+          </>
+        )}
+        {!ageRangeIsNull && (
+          <FilterListItem
+            type="Age"
+            item={{ param: "ageRange", value: ageRange }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {!subjectCountRangeIsNull && (
+          <FilterListItem
+            type="Participants"
+            item={{ param: "subjectCountRange", value: subjectCountRange }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {authors && (
+          <TermListItem
+            type="Authors/PI"
+            item={{ param: "authors", values: authors }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {sex_selected && (
+          <FilterListItem
+            type="Gender"
+            item={{ param: "sex_selected", value: sex_selected }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {tasks && (
+          <TermListItem
+            type="Task"
+            item={{ param: "tasks", values: tasks }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {diagnosis_selected && (
+          <FilterListItem
+            type="Diagnosis"
+            item={{ param: "diagnosis_selected", value: diagnosis_selected }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {section_selected && (
+          <FilterListItem
+            type="Section"
+            item={{ param: "section_selected", value: section_selected }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {species_selected && (
+          <FilterListItem
+            type="Species"
+            item={{ param: "species_selected", value: species_selected }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {studyDomains && (
+          <TermListItem
+            type="Ontology"
+            item={{
+              param: "studyDomains",
+              values: studyDomains,
+            }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {date_selected && (
+          <FilterListItem
+            type="Publication Date "
+            item={{ param: "date_selected", value: date_selected }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+
+        {bodyParts && (
+          <TermListItem
+            type="Target"
+            item={{ param: "bodyParts", values: bodyParts }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {scannerManufacturers && (
+          <TermListItem
+            type="Scanner Manufacturers"
+            item={{
+              param: "scannerManufacturers",
+              values: scannerManufacturers,
+            }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {scannerManufacturersModelNames && (
+          <TermListItem
+            type="Scanner Model"
+            item={{
+              param: "scannerManufacturersModelNames",
+              values: scannerManufacturersModelNames,
+            }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {tracerNames && (
+          <TermListItem
+            type="Radiotracers"
+            item={{ param: "tracerNames", values: tracerNames }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+        {tracerRadionuclides && (
+          <TermListItem
+            type="Radionuclide"
+            item={{ param: "tracerRadionuclides", values: tracerRadionuclides }}
+            removeFilterItem={removeFilterItem()}
+          />
+        )}
+      </ul>
+    </div>
+  )
+}

package/src/scripts/components/search-page/ModalityHeader.tsx

@@ -0,0 +1,64 @@
+import React from "react"
+import type { ReactNode } from "react"
+
+export interface ModalityHeaderProps {
+  portalName: string
+  pageBrand?: string
+  portalPrimary: string | ReactNode
+  hexBackgroundImage: string
+  renderAggregateCounts: () => ReactNode
+}
+
+export const ModalityHeader = ({
+  portalName,
+  portalPrimary,
+  hexBackgroundImage,
+  pageBrand,
+  renderAggregateCounts,
+}: ModalityHeaderProps) => {
+  return (
+    <section className="search-page-portal-header">
+      <div className="container">
+        <div className="grid grid-nogutter">
+          <div className="col col-7 portal-primary">
+            <h1>{portalName}</h1>
+            <div className="primary-content">{portalPrimary}</div>
+            <div className="secondary-content">{renderAggregateCounts()}</div>
+          </div>
+          {pageBrand
+            ? (
+              <div className="col col-3">
+                <img
+                  src={pageBrand}
+                  alt={portalName}
+                  style={{
+                    margin: "30px 0 30px 50px",
+                    maxWidth: "380px",
+                    height: "auto",
+                  }}
+                />
+              </div>
+            )
+            : (
+              <div className="col col-3 hex-col">
+                <div
+                  className="search-hexagon"
+                  style={{
+                    backgroundImage: `url(${hexBackgroundImage})`,
+                  }}
+                >
+                  <div className="hexTop"></div>
+                  <div className="hexBottom"></div>
+                </div>
+                <div className="search-shade-cube">
+                  <div className="front"></div>
+                  <div className="top"></div>
+                  <div className="right"></div>
+                </div>
+              </div>
+            )}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/scripts/components/search-page/NeurobagelSearch.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+
+import NeurobagelLogo from "./neurobagel_logo.svg"
+import { AccordionTab } from "../../components/accordion/AccordionTab"
+import { AccordionWrap } from "../../components/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>
+  )
+}

package/src/scripts/components/search-page/SearchPage.tsx

@@ -0,0 +1,114 @@
+import React from "react"
+import { ModalityHeader } from "./ModalityHeader"
+import { CommunityHeader } from "./CommunityHeader"
+import "./search-page.scss"
+
+export interface PortalContent {
+  className?: string
+  portalName?: string
+  pageBrand?: string
+  portalPrimary?: string
+  hexBackgroundImage?: string
+  communityHeader?: string
+  communityPrimary?: string
+  communitySecondary?: string
+}
+
+export interface SearchPageProps {
+  portalContent?: PortalContent
+  renderSearchFacets: () => React.ReactNode
+  renderSearchResultsList: () => React.ReactNode
+  renderSortBy: () => React.ReactNode
+  renderFilterBlock: () => React.ReactNode
+  renderSearchHeader: () => React.ReactNode
+  renderLoading: () => React.ReactNode
+  renderAggregateCounts: () => React.ReactNode
+}
+
+export const SearchPage = ({
+  portalContent,
+  renderSearchFacets,
+  renderSearchResultsList,
+  renderSortBy,
+  renderFilterBlock,
+  renderSearchHeader,
+  renderLoading,
+  renderAggregateCounts,
+}: SearchPageProps) => {
+  const [isOpen, setOpen] = React.useState(false)
+  return (
+    <>
+      <section
+        className={`search search-page ${portalContent?.className || " "} ${
+          isOpen ? " search-filters-open" : " "
+        }`}
+      >
+        {portalContent
+          ? (
+            <>
+              {portalContent.portalName
+                ? (
+                  <ModalityHeader
+                    pageBrand={portalContent.pageBrand}
+                    portalName={portalContent.portalName}
+                    portalPrimary={portalContent.portalPrimary}
+                    hexBackgroundImage={portalContent.hexBackgroundImage}
+                    renderAggregateCounts={renderAggregateCounts}
+                  />
+                )
+                : null}
+              {portalContent.communityHeader
+                ? (
+                  <CommunityHeader
+                    communityHeader={portalContent.communityHeader}
+                    communityPrimary={portalContent.communityPrimary}
+                    communitySecondary={portalContent.communitySecondary}
+                  />
+                )
+                : null}
+            </>
+          )
+          : null}
+        <div className="container">
+          <div className="grid grid-nogutter">
+            <div className="col col-12 search-heading">
+              <h1>{renderSearchHeader()}</h1>
+            </div>
+
+            <div className="col col-12 search-wrapper">
+              <button
+                className="show-filters-btn"
+                onClick={() => setOpen(!isOpen)}
+              >
+                Show Filters
+              </button>
+              <div
+                className={isOpen
+                  ? "search-nav search-facet-wrapper show-mobile-filters"
+                  : "search-nav search-facet-wrapper"}
+              >
+                <button
+                  className="close-filters-btn"
+                  onClick={() => setOpen(!isOpen)}
+                >
+                  Close Filters
+                </button>
+                {renderSearchFacets()}
+              </div>
+              <div className="search-content">
+                {renderLoading()}
+                <div className="grid grid-nogutter">
+                  <div className="col col-12">{renderFilterBlock()}</div>
+                  <div className="col col-12">
+                    <div className="grid grid-nogutter">{renderSortBy()}</div>
+                  </div>
+                  {renderSearchResultsList()}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}