@openneuro/app 4.33.4 → 4.34.0-alpha.0

package/src/scripts/common/content/modality-cube-content.jsx

@@ -0,0 +1,92 @@
+import React from "react"
+import petScan from "./assets/modality-cubes/pet-scan.jpg"
+import nih from "./assets/modality-cubes/nih_cube.jpg"
+import eeg from "./assets/modality-cubes/eeg.jpg"
+import ieeg from "./assets/modality-cubes/ieeg.jpg"
+import mri from "./assets/modality-cubes/mri.jpg"
+import meg from "./assets/modality-cubes/meg.jpg"
+import nirs from "./assets/modality-cubes/nirs.jpg"
+import nih_logo from "./assets/portal-content/nih-bi-brand.png"
+
+export const cubeData = [
+  {
+    label: "MRI",
+    cubeImage: mri,
+    stats: (
+      <>
+        200 Datasets
+        <br />
+        200 Participants
+      </>
+    ),
+  },
+  {
+    label: "PET",
+    cubeImage: petScan,
+    stats: (
+      <>
+        200 Datasets
+        <br />
+        200 Participants
+      </>
+    ),
+  },
+  {
+    label: "MEG",
+    cubeImage: meg,
+    stats: (
+      <>
+        200 Datasets
+        <br />
+        200 Participants
+      </>
+    ),
+  },
+  {
+    label: "EEG",
+    cubeImage: eeg,
+    stats: (
+      <>
+        200 Datasets
+        <br />
+        200 Participants
+      </>
+    ),
+  },
+  {
+    label: "iEEG",
+    cubeImage: ieeg,
+    stats: (
+      <>
+        200 Datasets
+        <br />
+        200 Participants
+      </>
+    ),
+  },
+  {
+    label: "NIRS",
+    cubeImage: nirs,
+    stats: (
+      <>
+        200 Datasets
+        <br />
+        200 Participants
+      </>
+    ),
+  },
+  {
+    label: "NIH",
+    altText: "NIH BRAIN Initiative",
+    portal: true,
+    cubeImage: nih,
+    cubeFaceImage: nih_logo,
+    stats: (
+      <>
+        200 Datasets
+        <br />
+        200 Participants
+      </>
+    ),
+  },
+]

package/src/scripts/common/content/portal-content.jsx

@@ -0,0 +1,149 @@
+import React from "react"
+
+import pet from "./assets/modality-cubes/pet-scan.jpg"
+import eeg from "./assets/modality-cubes/eeg.jpg"
+import ieeg from "./assets/modality-cubes/ieeg.jpg"
+import mri from "./assets/modality-cubes/mri.jpg"
+import meg from "./assets/modality-cubes/meg.jpg"
+import nirs from "./assets/modality-cubes/nirs.jpg"
+
+export const portalContent = {
+  mri: {
+    modality: "mri", // corresponds to values in `modality_available` in (packages/openneuro-app/src/scripts/refactor_2021/search/initial-search-params.tsx)
+    className: "search-page-mri",
+    portalName: "OpenNeuro MRI",
+    portalPrimary: (
+      <>
+        The OpenNeuro platform was developed by the{" "}
+        <a href="https://reproducibility.stanford.edu/">
+          Stanford Center for Reproducible Neuroscience
+        </a>{" "}
+        as a tool to encourage and enhance data sharing and analysis of raw MRI
+        data, using <a href="https://bids.neuroimaging.io">BIDS</a>{" "}
+        to organize and standardize these data.
+      </>
+    ),
+    publicDatasetStat: 100,
+    participantsStat: 1100,
+    hexBackgroundImage: mri,
+    swoopBackgroundColorLight: "rgba(109,83,156,1)",
+    swoopBackgroundColorDark: "rgba(45,34,64,1)",
+    communityHeader: null,
+    communityPrimary: null,
+    communitySecondary: null,
+  },
+  eeg: {
+    modality: "eeg", // corresponds to values in `modality_available` in (packages/openneuro-app/src/scripts/refactor_2021/search/initial-search-params.tsx)
+    className: "search-page-eeg",
+    portalName: "OpenNeuro EEG",
+    portalPrimary: (
+      <>
+        OpenNeuro added support for EEG datasets in 2019 when{" "}
+        <a href="https://www.nature.com/articles/s41597-019-0104-8">
+          EEG was incorporated
+        </a>{" "}
+        into the <a href="https://bids.neuroimaging.io">BIDS</a> standard.
+      </>
+    ),
+    publicDatasetStat: 100,
+    participantsStat: 1100,
+    hexBackgroundImage: eeg,
+    swoopBackgroundColorLight: "rgba(109,83,156,1)",
+    swoopBackgroundColorDark: "rgba(45,34,64,1)",
+    communityHeader: null,
+    communityPrimary: null,
+    communitySecondary: null,
+  },
+  ieeg: {
+    modality: "ieeg", // corresponds to values in `modality_available` in (packages/openneuro-app/src/scripts/refactor_2021/search/initial-search-params.tsx)
+    className: "search-page-ieeg",
+    portalName: "OpenNeuro iEEG",
+    portalPrimary: (
+      <>
+        OpenNeuro added support for iEEG datasets in 2019 when{" "}
+        <a href="https://www.nature.com/articles/s41597-019-0105-7">
+          iEEG was incorporated
+        </a>{" "}
+        into the <a href="https://bids.neuroimaging.io">BIDS</a> standard.
+      </>
+    ),
+    publicDatasetStat: 100,
+    participantsStat: 1100,
+    hexBackgroundImage: ieeg,
+    swoopBackgroundColorLight: "rgba(109,83,156,1)",
+    swoopBackgroundColorDark: "rgba(45,34,64,1)",
+    communityHeader: null,
+    communityPrimary: null,
+    communitySecondary: null,
+  },
+  meg: {
+    modality: "meg", // corresponds to values in `modality_available` in (packages/openneuro-app/src/scripts/refactor_2021/search/initial-search-params.tsx)
+    className: "search-page-meg",
+    portalName: "OpenNeuro MEG",
+    portalPrimary: (
+      <>
+        OpenNeuro added support for MEG datasets in 2018 when{" "}
+        <a href="https://www.nature.com/articles/sdata2018110">
+          MEG was incorporated
+        </a>{" "}
+        into the <a href="https://bids.neuroimaging.io">BIDS</a> standard.
+      </>
+    ),
+    publicDatasetStat: 100,
+    participantsStat: 1100,
+    hexBackgroundImage: meg,
+    swoopBackgroundColorLight: "rgba(109,83,156,1)",
+    swoopBackgroundColorDark: "rgba(45,34,64,1)",
+    communityHeader: null,
+    communityPrimary: null,
+    communitySecondary: null,
+  },
+  pet: {
+    modality: "pet", // corresponds to values in `modality_available` in (packages/openneuro-app/src/scripts/refactor_2021/search/initial-search-params.tsx)
+    className: "search-page-pet",
+    portalName: "OpenNeuro PET",
+    portalPrimary: (
+      <>
+        The PET portal of OpenNeuro is supported by a collaboration between
+        Stanford University, NIH, MGH and the Neurobiology Research Unit (NRU)
+        at Copenhagen University Hospital through the{" "}
+        <a href="https://openneuropet.github.io/">OpenNeuroPET project</a>. The
+        project is funded through the BRAIN Initiative and the Novo Nordisk
+        Foundation. Besides developing data sharing, the OpenNeuroPET project
+        also aims at developing user friendly tools for the BIDS based data
+        curation of PET data as well as tools for automated QC and template
+        building.
+      </>
+    ),
+    publicDatasetStat: 100,
+    participantsStat: 1100,
+    hexBackgroundImage: pet,
+    swoopBackgroundColorLight: "rgba(109,83,156,1)",
+    swoopBackgroundColorDark: "rgba(45,34,64,1)",
+    communityHeader: null,
+    communityPrimary: null,
+    communitySecondary: null,
+  },
+  nirs: {
+    modality: "nirs", // corresponds to values in `modality_available` in (packages/openneuro-app/src/scripts/refactor_2021/search/initial-search-params.tsx)
+    className: "search-page-nirs",
+    portalName: "OpenNeuro NIRS",
+    portalPrimary: (
+      <>
+        OpenNeuro added support for NIRS datasets in 2022 when{" "}
+        <a href="https://www.nature.com/articles/s41597-024-04136-9">
+          NIRS was incorporated
+        </a>{" "}
+        into the <a href="https://bids.neuroimaging.io">BIDS</a> standard.
+      </>
+    ),
+    publicDatasetStat: 100,
+    participantsStat: 1100,
+    hexBackgroundImage: nirs,
+    swoopBackgroundColorLight: " rgb(68, 114, 143)",
+    swoopBackgroundColorDark: " rgb(36, 80, 108)",
+    communityHeader: null,
+    communityPrimary: null,
+    communitySecondary: null,
+  },
+}

package/src/scripts/common/content/portal-grant-content.jsx

@@ -0,0 +1,30 @@
+import React from "react"
+import brain from "./assets/modality-cubes/brain-initiative.jpg"
+import nihbibrand from "./assets/portal-content/nih-bi-brand.png"
+
+export const portalGrantContent = {
+  nih: {
+    portal: true,
+    grant: "nih", // corresponds to values in `modality_available` in (packages/openneuro-app/src/scripts/refactor_2021/search/initial-search-params.tsx)
+    className: "search-page-nih",
+    portalName: "NIH BRAIN Initiative",
+    portalPrimary: (
+      <>
+        <a href="https://braininitiative.nih.gov/">The BRAIN Initiative®</a>, is
+        public-private research initiative with a common goal of accelerating
+        the development of innovative neurotechnologies. In 2019, OpenNeuro was
+        designated a BRAIN Initiative data archive. The datasets below were
+        collected under BRAIN Initiative-sponsored grants.
+      </>
+    ),
+    publicDatasetStat: 100,
+    participantsStat: 1100,
+    hexBackgroundImage: brain,
+    pageBrand: nihbibrand,
+    swoopBackgroundColorLight: "rgba(33, 85, 138, 1)",
+    swoopBackgroundColorDark: "rgba(155, 211, 221, 1)",
+    communityHeader: null,
+    communityPrimary: null,
+    communitySecondary: null,
+  },
+}

package/src/scripts/common/content/sortby-list.jsx

@@ -0,0 +1,18 @@
+export const sortBy = [
+  {
+    label: "Relevance",
+    value: "relevance",
+  },
+  {
+    label: "Newest",
+    value: "newest",
+  },
+  {
+    label: "Oldest",
+    value: "oldest",
+  },
+  {
+    label: "Activity",
+    value: "activity",
+  },
+]

package/src/scripts/common/forms/warn-button.jsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 import PropTypes from "prop-types"
-import { Tooltip } from "@openneuro/components/tooltip"
+import { Tooltip } from "../../components/tooltip/Tooltip"
 import { toast } from "react-toastify"
 import ToastContent from "../partials/toast-content.jsx"
 

package/src/scripts/components/accordion/AccordionTab.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+
+import { Icon } from "../icon/Icon"
+import "./accordion.scss"
+
+export type AccordionTabStyle = "plain" | "file-tree" | "bids-wrapper"
+
+export interface AccordionTabProps {
+  children: React.ReactNode
+  id?: string
+  className?: string
+  label: string | number | React.ReactNode
+  startOpen?: boolean
+  dropdown?: boolean
+  accordionStyle: AccordionTabStyle
+  onClick?: (expanded?: boolean) => void
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const AccordionTab: React.FC<AccordionTabProps> = ({
+  children,
+  id,
+  label,
+  className,
+  accordionStyle,
+  startOpen,
+  dropdown,
+  onClick,
+}) => {
+  const [isOpen, setOpen] = React.useState(startOpen)
+  const fileTreeIcon = accordionStyle == "file-tree"
+    ? (
+      <Icon
+        className="file-icon"
+        icon={isOpen ? "fas fa-folder-open" : "fas fa-folder"}
+        label={label}
+      />
+    )
+    : null
+
+  return (
+    <article
+      className={`${accordionStyle || ""}` + " accordion " +
+        `${className || ""}`}
+      id={id}
+    >
+      <div
+        className={`accordion-title ${isOpen ? "open" : ""}`}
+        role="switch"
+        onClick={() => {
+          onClick?.(!isOpen)
+          setOpen(!isOpen)
+        }}
+      >
+        {fileTreeIcon || label}
+      </div>
+      <div
+        className={`accordion-item ${!isOpen ? " collapsed" : ""} ${
+          dropdown ? " dropdown-style" : ""
+        }`}
+      >
+        {isOpen && <div className="accordion-content">{children}</div>}
+      </div>
+    </article>
+  )
+}

package/src/scripts/components/accordion/AccordionWrap.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import "./accordion.scss"
+
+export interface AccordionWrapProps {
+  children: React.ReactNode
+  className?: string
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const AccordionWrap: React.FC<AccordionWrapProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <div className={`${className || ""}` + " on-accordion-wrapper"} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/scripts/components/accordion/__tests__/AccordionTab.spec.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { AccordionTab } from "../AccordionTab"
+
+describe("AccordionTab component", () => {
+  it("is open by default with startOpen prop", async () => {
+    render(
+      <AccordionTab
+        id="test"
+        className=""
+        label="test"
+        startOpen
+        accordionStyle="plain"
+      >
+        Child Element Text
+      </AccordionTab>,
+    )
+    expect(await screen.getByText(/Child Element Text/)).toBeVisible()
+  })
+  it('displays an icon when accordionStyle = "fileTree"', async () => {
+    render(
+      <AccordionTab
+        id="test"
+        className=""
+        label="test"
+        startOpen
+        accordionStyle="file-tree"
+      >
+        Child Element Text
+      </AccordionTab>,
+    )
+    expect(await screen.getByText(/Child Element Text/)).toBeInTheDocument()
+    expect(await screen.getByRole("img")).toBeInTheDocument()
+  })
+})

package/src/scripts/components/accordion/accordion.scss

@@ -0,0 +1,68 @@
+@import '../scss/variables';
+/* Accordion styles */
+
+.on-accordion-wrapper {
+  background-color: #fff;
+  position: relative;
+  .accordion {
+    box-sizing: border-box;
+  }
+  .accordion-item {
+    overflow: hidden;
+    transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
+    height: auto;
+  }
+
+  .accordion-item.collapsed {
+    max-height: 0;
+    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
+  }
+  .accordion-item.dropdown-style {
+    position: absolute;
+    background-color: #fff;
+    left: 0;
+    right: 0;
+    .accordion-content {
+      padding: 10px;
+    }
+  }
+
+  .accordion-title {
+    color: $charcoal;
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    &::after {
+      margin-left: 10px;
+      font-family: FontAwesome;
+      content: '\f078';
+    }
+
+    &:hover,
+    &.open {
+      color: var(--current-theme-primary-hover);
+      color: black;
+    }
+
+    &.open {
+      &::after {
+        content: '\f077';
+        border-top: 0;
+      }
+    }
+
+    .file-icon {
+      margin-right: 10px;
+    }
+  }
+
+  .accordion-content {
+    padding: 0;
+  }
+}
+
+.file-tree .accordion-content {
+  margin-left: 10px;
+}

package/src/scripts/components/activity-slider/ActivitySlider.tsx

@@ -0,0 +1,121 @@
+import React from "react"
+import formatDistanceToNow from "date-fns/formatDistanceToNow"
+import parseISO from "date-fns/parseISO"
+import { Link } from "react-router-dom"
+import Carousel from "react-multi-carousel/lib/Carousel"
+import type { ArrowProps, ResponsiveType } from "react-multi-carousel/lib/types"
+import "react-multi-carousel/lib/styles.css"
+import "./slider.scss"
+
+export interface ActivitySliderProps {
+  className?: string
+  showDots?: boolean
+  infinite?: boolean
+  keyBoardControl?: boolean
+  containerClass?: string
+  itemClass?: string
+  slideHeader?: React.ReactNode
+  responsive: ResponsiveType
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  data: any[]
+}
+
+const LeftArrow = ({ onClick }: ArrowProps) => (
+  <i
+    className="fas fa-chevron-left"
+    onClick={() => onClick()}
+  />
+)
+
+const RightArrow = ({ onClick }: ArrowProps) => (
+  <i
+    className="fas fa-chevron-right"
+    onClick={() => onClick()}
+  />
+)
+
+export const ActivitySlider = ({
+  className,
+  data,
+  showDots,
+  slideHeader,
+  responsive,
+  infinite,
+  keyBoardControl,
+  containerClass,
+  itemClass,
+}: ActivitySliderProps) => {
+  return (
+    <div className={"activity-slider" + " " + className}>
+      <h3>{slideHeader}</h3>
+      {/* @ts-expect-error type issues with react-multi-carousel package */}
+      <Carousel
+        infinite={infinite}
+        keyBoardControl={keyBoardControl}
+        containerClass={containerClass}
+        itemClass={itemClass}
+        showDots={showDots}
+        responsive={responsive}
+        customLeftArrow={<LeftArrow />}
+        customRightArrow={<RightArrow />}
+      >
+        {data.map(({ node }) => (
+          <div className="activity-slider-node" key={node.id}>
+            <div className="ds-modality">
+              <div className="hexagon-wrapper">
+                {node.latestSnapshot.summary?.primaryModality
+                  ? (
+                    <>
+                      <div
+                        className={"hexagon " +
+                          node.latestSnapshot.summary?.primaryModality
+                            .toLowerCase()}
+                      >
+                      </div>
+                      <div className="label">
+                        {node.latestSnapshot.summary?.primaryModality}
+                      </div>
+                    </>
+                  )
+                  : (
+                    <>
+                      <div className="hexagon no-modality"></div>
+                      <div className="label">N/A</div>
+                    </>
+                  )}
+              </div>
+            </div>
+            <div className="ds-name">
+              <h4>
+                <Link
+                  to={"datasets/" +
+                    node.id +
+                    "/versions/" +
+                    node.latestSnapshot.tag}
+                >
+                  {node.latestSnapshot.description.Name}
+                </Link>
+              </h4>
+            </div>
+
+            {node.publishDate
+              ? (
+                <div className="ds-pub-date">
+                  {formatDistanceToNow(parseISO(node.publishDate))} ago
+                </div>
+              )
+              : null}
+
+            {node.analytics
+              ? (
+                <div className="ds-pub-views">
+                  {node.analytics.views.toLocaleString()} views
+                </div>
+              )
+              : null}
+          </div>
+        ))}
+      </Carousel>
+    </div>
+  )
+}