@openneuro/app 4.33.4 → 4.34.0

package/src/scripts/components/facets/facet.scss

@@ -0,0 +1,244 @@
+@import '../scss/variables';
+
+.facet-accordion.on-accordion-wrapper {
+  padding: 0 15px;
+  border-bottom: 1px solid #ddd;
+
+  .accordion-title {
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0.05em;
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .facet-list {
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      li {
+        cursor: pointer;
+        font-weight: 300;
+        color: #666;
+        font-size: 14px;
+        &.selected-facet {
+          > .label,
+          > .label span {
+            color: var(--current-theme-primary);
+            font-weight: 600;
+          }
+        }
+        .label {
+          display: flex;
+          align-items: center;
+          span {
+            margin-left: 10px;
+            display: flex;
+            color: #666;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+    .level-1 > li {
+      border-top: 1px solid #dfdfdf;
+      > span:hover {
+        background-color: var(--current-theme-primary-light);
+      }
+
+      > .label {
+        padding: 10px 10px 10px 20px;
+      }
+    }
+    .level-2 {
+      margin-bottom: 10px;
+      display: block;
+      width: 100%;
+      > li {
+        display: flex;
+        justify-content: flex-start;
+        &:hover {
+          background-color: var(--current-theme-primary-light);
+        }
+
+        .label {
+          margin-left: 15px;
+        }
+        &:before {
+          content: '-';
+          margin-left: 30px;
+        }
+      }
+    }
+  }
+
+  .facet-list ul li {
+    > .label {
+      font-weight: 500;
+    }
+    &.selected-facet > .label {
+      color: var(--current-theme-primary);
+      font-weight: 600;
+
+      span {
+        color: var(--current-theme-primary);
+      }
+    }
+    &.selected-facet:hover {
+      background-color: none;
+    }
+  }
+}
+
+.facet-range {
+  margin: 20px 0;
+}
+
+.facet-date-picker.on-accordion-wrapper .accordion-item {
+  overflow: visible;
+  .range-input {
+    padding: 0 0 20px 0;
+    .react-daterange-picker {
+      width: 100%;
+    }
+    .react-daterange-picker__wrapper {
+      border: 0;
+      width: 100%;
+      .react-daterange-picker__range-divider {
+        margin: 0 15px;
+        display: inline-block;
+      }
+      .react-daterange-picker__inputGroup {
+        min-width: auto;
+        flex-grow: 0;
+        padding: 0;
+        input {
+          cursor: pointer;
+          line-height: 20px;
+          display: inline-block;
+          color: #666;
+        }
+      }
+      .react-daterange-picker__clear-button {
+        margin-left: auto;
+      }
+      .react-daterange-picker__button {
+        color: var(--current-theme-primary);
+        &:hover {
+          color: var(--current-theme-primary-hover);
+        }
+      }
+    }
+  }
+
+  .react-calendar__month-view__days__day,
+  .react-calendar__month-view__days__day--weekend {
+    color: $charcoal;
+  }
+  .react-calendar__tile--now {
+    background-color: #eee;
+  }
+  .react-calendar__tile--active {
+    background-color: var(--current-theme-primary);
+    color: #fff;
+  }
+}
+
+.fade-out-facet {
+  max-height: 0;
+  height: auto;
+  transition: max-height 1s;
+  overflow: hidden;
+}
+
+.fade-in-facet {
+  height: auto;
+  max-height: 800px;
+  transition: max-height 1s;
+}
+
+.dataset-status.facet-accordion.on-accordion-wrapper {
+  border-bottom: 0;
+}
+.search-nav .facet-open.modality-facet {
+  margin: 20px 0;
+  border: 0;
+  background: #e5f4f7;
+  border-radius: $border-radius-default;
+  padding: 10px;
+
+  h2 {
+    margin: 10px 0 15px;
+    font-size: 19px;
+    font-weight: 600;
+    color: var(--current-theme-primary);
+  }
+  .facet-list {
+    padding: 0 0 10px;
+    color: var(--current-theme-primary);
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      li {
+        cursor: pointer;
+      }
+    }
+    .label {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      span {
+        margin-left: 10px;
+        display: inline-block;
+        font-size: 14px;
+      }
+    }
+
+    .level-1 > li {
+      border-top: 1px solid $newspaper;
+
+      > .label {
+        padding: 10px;
+      }
+    }
+    .level-2 {
+      margin-bottom: 10px;
+      font-size: 14px;
+      > li {
+        display: flex;
+        justify-content: flex-start;
+
+        .label {
+          margin-left: 15px;
+        }
+        &:before {
+          content: '-';
+          margin-left: 12px;
+        }
+      }
+    }
+  }
+  .facet-list ul li {
+    > .label {
+      font-weight: 500;
+    }
+    &.selected-facet > .label {
+      color: var(--current-theme-primary);
+      font-weight: 600;
+      span {
+        color: var(--current-theme-primary);
+      }
+    }
+  }
+}
+
+.facet-search {
+  padding-bottom: 30px;
+  .term-block {
+    margin: 30px 0 0;
+  }
+}

package/src/scripts/components/footer/Footer.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { Link } from "react-router-dom"
+import { frontPage } from "../../common/content/front-page-content"
+import "./footer.scss"
+
+export interface FooterProps {
+  version: string
+}
+
+export const Footer: React.FC<FooterProps> = ({ version }) => {
+  const versionLink =
+    `https://github.com/OpenNeuroOrg/openneuro/releases/tag/v${version}`
+  return (
+    <footer className="on-foot">
+      <div className="grid grid-between align-center">
+        <div className="col col-4  version">
+          <span>
+            OpenNeuro
+            <a href={versionLink}>
+              {" "}v{version}
+            </a>
+          </span>
+        </div>
+        <div className="col col-4 privacy-policy">
+          <span>
+            <a href={frontPage.titlePanel.privacyLink}>
+              Privacy Policy
+            </a>
+          </span>
+          {", "}
+          <span>
+            <Link to="/terms">
+              Terms
+            </Link>
+          </span>
+          {", "}
+          &{" "}
+          <span>
+            <Link to="/image-attribution">
+              Image Attribution
+            </Link>
+          </span>
+        </div>
+        <div className="col col-4  copy">
+          <span>
+            &copy; {new Date().getFullYear()} {frontPage.copyright.holder}
+          </span>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/scripts/components/footer/footer.scss

@@ -0,0 +1,20 @@
+@import '../scss/variables';
+
+footer {
+  background: $charcoal;
+  color: #ffffff;
+  padding: 10px;
+  a,
+  a:link {
+    color: $on-light-aqua;
+  }
+  .grid {
+    font-size: 12px;
+    .col:nth-child(2) {
+      text-align: center;
+    }
+    .col:last-child {
+      text-align: right;
+    }
+  }
+}

package/src/scripts/components/formatting/__tests__/modality-label.spec.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { ModalityLabel, modalityShortMapping } from "../modality-label"
+
+describe("modalityShortMapping", () => {
+  it("maps ieeg to iEEG", () => {
+    expect(modalityShortMapping("ieeg")).toBe("iEEG")
+  })
+  it("maps iEEG to iEEG", () => {
+    expect(modalityShortMapping("iEEG")).toBe("iEEG")
+  })
+  it("maps beh to Behavioral", () => {
+    expect(modalityShortMapping("beh")).toBe("Behavioral")
+  })
+  it("maps motion to Motion", () => {
+    expect(modalityShortMapping("motion")).toBe("Motion")
+  })
+  it("maps undefined to undefined", () => {
+    expect(modalityShortMapping(undefined)).toBe(undefined)
+  })
+  it("maps null to null", () => {
+    expect(modalityShortMapping(null)).toBe(null)
+  })
+  it("maps other to uppercase", () => {
+    expect(modalityShortMapping("other")).toBe("OTHER")
+  })
+})
+
+describe("ModalityLabel", () => {
+  it("renders the short name", () => {
+    const { getByText } = render(<ModalityLabel modality="ieeg" />)
+    expect(getByText("iEEG")).toBeInTheDocument()
+  })
+})

package/src/scripts/components/formatting/modality-label.tsx

@@ -0,0 +1,34 @@
+/**
+ * Provide a mapping from the schema names to an expected short name used for OpenNeuro display
+ */
+export function modalityShortMapping(modality) {
+  switch (modality) {
+    case "ieeg":
+    case "iEEG":
+      return "iEEG"
+    case "beh":
+      return "Behavioral"
+    case "motion":
+      return "Motion"
+    case "micro":
+      return "Microscopy"
+    case undefined:
+      return undefined
+    case null:
+      return null
+    default:
+      return modality.toUpperCase()
+  }
+}
+
+interface ModalityLabelProps {
+  // TODO: type could be schema.objects.modalities if it had a type definition
+  modality: string
+}
+
+/**
+ * String mapping component that renders schema modality labels as human readable labels
+ */
+export function ModalityLabel({ modality }: ModalityLabelProps) {
+  return modalityShortMapping(modality)
+}

package/src/scripts/components/front-page/ActivityHeader.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { Icon } from "../icon/Icon"
+import activityIcon from "../assets/activity-icon.png"
+import "./front-page.scss"
+
+export const ActivityHeader: React.FC = () => {
+  return (
+    <h2>
+      <Icon label="Activity" imgSrc={activityIcon} iconSize="40px" />
+    </h2>
+  )
+}

package/src/scripts/components/front-page/AffiliateBlock.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+import { affiliateContent } from "../../common/content/affiliate-content.jsx"
+import { AffiliateArticle } from "../affiliate-article/AffiliateArticle"
+
+import "./front-page.scss"
+
+export const AffiliateBlock: React.FC = () => {
+  return (
+    <div className=" affiliate-wrap">
+      {affiliateContent.map((item, index) => (
+        <AffiliateArticle
+          logo={item.logo}
+          key={index}
+          header={item.header}
+          contentOne={item.contentOne}
+          contentTwo={item.contentTwo}
+        />
+      ))}
+    </div>
+  )
+}

package/src/scripts/components/front-page/Contributors.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { Logo } from "../logo/Logo"
+
+import { frontPage } from "../../common/content/front-page-content"
+import "./front-page.scss"
+
+export const Contributors: React.FC = () => {
+  return (
+    <div className="contributors">
+      <div className="container">
+        <div className="contributor-logo-header">
+          <Logo dark horizontal={false} />
+
+          <h3>Support for {frontPage.pageTitle} provided by</h3>
+        </div>
+        <div className="contributors-wrap">
+          {frontPage.support.map((item, index) => (
+            <div key={index} className="contributor">
+              <a href={item.link} title={item.title}>
+                <img src={item.logo} alt={item.alt} loading="lazy" />
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/scripts/components/front-page/GetUpdates.tsx

@@ -0,0 +1,99 @@
+import React from "react"
+import { Button } from "../button/Button"
+import { Input } from "../input/Input"
+import "./front-page.scss"
+
+export const modes = {
+  // display prompt / email input / submit button
+  GET: Symbol("get"),
+  // display success message / done
+  SUCCESS: Symbol("success"),
+  // display error message / try again button
+  ERROR: Symbol("error"),
+}
+
+export const submitHandler = (subscribe, mode, setMode, value) => (e) => {
+  e.preventDefault()
+  switch (mode) {
+    case modes.SUCCESS:
+      break
+    case modes.ERROR:
+      setMode(modes.GET)
+      break
+    case modes.GET:
+    default:
+      subscribe(value, (result) => {
+        if (result.data) {
+          setMode(
+            result.data.subscribeToNewsletter ? modes.SUCCESS : modes.ERROR,
+          )
+        }
+      })
+      break
+  }
+}
+
+const getText = (mode) => {
+  switch (mode) {
+    case modes.ERROR:
+      return {
+        headingText: "Whoops.",
+        messageText:
+          "We were unable to sign you up for updates. Please try again.",
+        buttonText: "Try Again",
+      }
+    case modes.SUCCESS:
+      return {
+        headingText: "Success!",
+        messageText: "You are now signed up to receive news updates.",
+        buttonText: "Done",
+      }
+    case modes.GET:
+    default:
+      return {
+        headingText: "Get Updates",
+        buttonText: "Subscribe",
+        messageText: "Find out about new version and future releases",
+      }
+  }
+}
+
+export const GetUpdates = ({ subscribe, initialMode = modes.GET }) => {
+  const [mode, setMode] = React.useState(initialMode)
+  const [value, setValue] = React.useState("")
+  const { headingText, messageText, buttonText } = getText(mode)
+  return (
+    <div className="get-updates-bar">
+      <div className="get-updates-label">
+        <h2>{headingText}</h2>
+        <h3>{messageText}</h3>
+      </div>
+      <form
+        onSubmit={submitHandler(subscribe, mode, setMode, value)}
+        className="get-updates-form"
+      >
+        <>
+          <div className="">{}</div>
+          {mode === modes.GET && (
+            <Input
+              type="email"
+              label="Email Address"
+              placeholder="email@openneuro.com"
+              labelStyle="float"
+              name="float-example"
+              value={value}
+              setValue={setValue}
+            />
+          )}
+          <Button
+            type="submit"
+            size="small"
+            secondary
+            label={buttonText}
+            disabled={mode === modes.SUCCESS}
+          />
+        </>
+      </form>
+    </div>
+  )
+}

package/src/scripts/components/front-page/Infographic.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+
+import { frontPage } from "../../common/content/front-page-content"
+import "./front-page.scss"
+
+export const Infographic: React.FC = () => {
+  return (
+    <div className="front-infographic">
+      <span className="bg-circle"></span>
+      {frontPage.infographic.map((item, index) => (
+        <div key={index} className="infograph-block" id={item.htmlID}>
+          <span>
+            <img
+              src={item.image}
+              alt=""
+              loading="lazy"
+              width="312"
+              height="349"
+            />
+          </span>
+          <div className="info-card">
+            <h3>{item.name}</h3>
+            <div>{item.content}</div>
+          </div>
+        </div>
+      ))}
+      <div className="view-docs">
+        <h3>Want to get started?</h3>
+        Check out the{" "}
+        <a href="https://docs.openneuro.org/user-guide">
+          OpenNeuro User Documentation
+        </a>
+      </div>
+    </div>
+  )
+}