@openneuro/app 4.33.3 → 4.34.0-alpha.0

package/src/scripts/components/modal/UserLoginModal.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import { Modal } from "./Modal"
+import { Button } from "../button/Button"
+import { Logo } from "../logo/Logo"
+import { AccordionTab } from "../../components/accordion/AccordionTab"
+import { AccordionWrap } from "../../components/accordion/AccordionWrap"
+import { useLocation } from "react-router-dom"
+
+import orcidIcon from "../../../assets/orcid_24x24.png"
+
+export interface UserLoginModalProps {
+  isOpen: boolean
+  toggle: () => void
+  loginUrls: Record<string, string>
+}
+
+export const UserLoginModal = ({
+  isOpen,
+  toggle,
+  loginUrls,
+}: UserLoginModalProps) => {
+  const location = useLocation()
+  const redirectPath = `${location.pathname}${location.search}`
+  return (
+    <>
+      <Modal isOpen={isOpen} toggle={toggle}>
+        <div className="sign-in-modal-header">
+          <Logo horizontal dark={true} width="230px" />
+          <h2>Sign in</h2>
+        </div>
+        <div className="sign-in-modal-content">
+          <div>
+            <a href={loginUrls.google + `?redirectPath=${btoa(redirectPath)}`}>
+              <Button
+                className="login-button"
+                primary
+                label="Google"
+                icon="fab fa-google"
+                iconSize="23px"
+              />
+            </a>
+          </div>
+          <div>
+            <a href={loginUrls.orcid + `?redirectPath=${btoa(redirectPath)}`}>
+              <Button
+                className="login-button"
+                primary
+                label="ORCID"
+                imgSrc={orcidIcon}
+              />
+            </a>
+            <AccordionWrap>
+              <AccordionTab
+                id="orcid-info-accordion"
+                label="What is this?"
+                accordionStyle="plain"
+                children={
+                  <>
+                    ORCID users are identified and connected to their
+                    contributions and affiliations, across disciplines, borders,
+                    and time.{" "}
+                    <a href="https://orcid.org/content/about-orcid">
+                      Learn more
+                    </a>
+                  </>
+                }
+              />
+            </AccordionWrap>
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+}

package/src/scripts/components/modal/__tests__/UserLoginModal.spec.tsx

@@ -0,0 +1,37 @@
+import { vi } from "vitest"
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { UserLoginModal } from "../UserLoginModal"
+import { MemoryRouter } from "react-router-dom"
+
+const loginUrls = {
+  google: "https://openneuro.org/crn/auth/google",
+  orcid: "https://openneuro.org/crn/auth/orcid",
+}
+
+const toggle = vi.fn()
+
+describe("UserLoginModal component", () => {
+  it("Google login link has correctly formed auth URL", () => {
+    render(
+      <MemoryRouter initialEntries={["/import?url=https://example.com"]}>
+        <UserLoginModal isOpen={true} toggle={toggle} loginUrls={loginUrls} />
+      </MemoryRouter>,
+    )
+    expect(
+      screen.getByRole("link", { name: /google/i }).getAttribute("href"),
+    ).toBe(
+      "https://openneuro.org/crn/auth/google?redirectPath=L2ltcG9ydD91cmw9aHR0cHM6Ly9leGFtcGxlLmNvbQ==",
+    )
+  })
+  it("ORCID login link has correctly formed auth URL", () => {
+    render(
+      <MemoryRouter initialEntries={["/import"]}>
+        <UserLoginModal isOpen={true} toggle={toggle} loginUrls={loginUrls} />
+      </MemoryRouter>,
+    )
+    expect(
+      screen.getByRole("link", { name: /orcid/i }).getAttribute("href"),
+    ).toBe("https://openneuro.org/crn/auth/orcid?redirectPath=L2ltcG9ydA==")
+  })
+})

package/src/scripts/components/modal/modal.scss

@@ -0,0 +1,60 @@
+@import '../scss/variables';
+
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  transition: opacity 0.3s;
+  z-index: 9000;
+  .modal {
+    background-color: #fff;
+    width: 500px;
+    max-width: 90%;
+    transition: transform 0.3s;
+    overflow: scroll;
+    max-height: 90vh;
+  }
+
+  .modal-close-x {
+    position: absolute;
+    right: 7px;
+    top: 4px;
+    cursor: pointer;
+    font-size: 18px;
+  }
+
+  .modal-body {
+    margin: 0 0 30px;
+  }
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 10, 10, 75%);
+  }
+
+  &.hide-modal {
+    opacity: 0;
+    transition-delay: 0.01s;
+    animation-fill-mode: forwards;
+    pointer-events: none;
+    .modal {
+      transform: translateY(-100vh);
+    }
+  }
+  &.show-modal {
+    opacity: 1;
+    pointer-events: auto;
+    .modal {
+      transform: translateY(0);
+    }
+  }
+}

package/src/scripts/components/modality-cube/ModalityCube.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+import "./modality-cube.scss"
+
+export interface ModalityCubeProps {
+  label: string
+  stats: React.ReactNode
+  portal: boolean
+  cubeImage?: string
+  altText?: string
+  cubeFaceImage: string
+  onClick: (redirectPath: string) => (e: React.MouseEvent) => void
+}
+
+export const ModalityCube: React.FC<ModalityCubeProps> = ({
+  label,
+  stats,
+  portal = false,
+  cubeImage,
+  altText,
+  cubeFaceImage,
+  onClick,
+}) => {
+  return (
+    <li
+      className="hex"
+      onClick={portal
+        ? onClick("search/" + label.toLowerCase())
+        : onClick("search/modality/" + label.toLowerCase())}
+    >
+      <div className={"hexIn " + label.toLowerCase() + "-cube"}>
+        <div>
+          <div
+            className="img"
+            style={{ backgroundImage: `url(${cubeImage})` }}
+          >
+            <div className="modality-cube">
+              <div className="front">
+                <span className="label">
+                  {cubeFaceImage
+                    ? (
+                      <img
+                        style={{ maxWidth: "120px" }}
+                        src={cubeFaceImage}
+                        alt={altText}
+                      />
+                    )
+                    : label}
+                </span>
+              </div>
+              <div className="top"></div>
+              <div className="right"></div>
+            </div>
+            <h3 className="content1">{label}</h3>
+            <div className="content2">{stats}</div>
+          </div>
+        </div>
+      </div>
+    </li>
+  )
+}

package/src/scripts/components/modality-cube/modality-cube.scss

@@ -0,0 +1,303 @@
+@import '../scss/variables';
+// Variables for hexagonal grid and cube sizes
+$hex-width: 240px;
+$hex-height: 450px; // Height for the hex grid
+$hex-padding: 2%; // Margin padding for hexagon inside
+$hex-grid-width: 1020px; // Width for the hex grid
+$modality-cube-width: 69%; // Modality cube width
+$modality-cube-height: 60%; // Modality cube height
+$gridbreakpoint: calc($hex-grid-width + 500px); // single col
+
+#hexGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax($hex-width, 1fr)); // Dynamic columns
+  justify-items: center;
+  width: 100%;
+  max-width: $hex-grid-width;
+  margin: 0 auto;
+  overflow: hidden;
+  font-family: sans-serif;
+  list-style: none;
+  padding: 40px 0 7.4%;
+  gap: 20px;
+
+  @media (max-width: $gridbreakpoint) {
+    grid-template-columns: repeat(3, $hex-width); // Switch to 3 columns
+    margin: 0 auto;
+    flex-basis: 100%;
+    justify-content: center;
+  }
+}
+
+.hex {
+  position: relative;
+  visibility: hidden;
+  outline: 1px solid transparent;
+  backface-visibility: hidden;
+  width: $hex-width;
+  margin: 0 10px;
+  &::after {
+    content: '';
+    display: block;
+    padding-bottom: 86.602%; // Maintain hexagonal aspect ratio
+  }
+
+  // Default: Shift every second row in the 4-column layout
+  &:nth-child(8n + 5),
+  &:nth-child(8n + 6),
+  &:nth-child(8n + 7),
+  &:nth-child(8n + 8) {
+    left: calc($hex-width / 2 + 10px); // Staggered shift for items in the 4-column layout
+  }
+
+  // Ensure items 8, 9, 10, and 11 are in the third row with no shift
+  &:nth-child(8) {
+    grid-row: 3;  // Place item 8 in the third row
+    left: 0; // Remove the left shift
+  }
+
+  &:nth-child(9),
+  &:nth-child(10),
+  &:nth-child(11) {
+    grid-row: 3;  // Ensure items 9, 10, and 11 are in the same row (3rd)
+    left: 0;  // Remove the left shift
+  }
+
+  @media (max-width: $gridbreakpoint) {
+    // Reset positioning for smaller screens
+    &:nth-child(n) {
+      left: 0;
+    }
+
+    // Set 3-column layout for smaller screens
+    display: grid;
+    grid-template-columns: repeat(3, $hex-width); // 3 columns for smaller screens
+    gap: 20px; // Maintain grid gap
+
+    // Adjust placement of items to ensure 3-column layout is respected
+    &:nth-child(1), &:nth-child(2), &:nth-child(3) {
+      grid-row: 1; // First row
+    }
+
+    &:nth-child(4), &:nth-child(5) {
+      grid-row: 2; // Second row
+      left: calc($hex-width / 2 + 10px); // Shift right for 4th and 5th items
+    }
+
+    &:nth-child(6), &:nth-child(7), &:nth-child(8) {
+      grid-row: 3; // Third row
+      left: 0; // No shift
+    }
+
+    &:nth-child(9), &:nth-child(10) {
+      grid-row: 4; // Fourth row
+      left: calc($hex-width / 2 + 10px); // Shift right for 9th and 10th items
+    }
+
+    &:nth-child(11) {
+      grid-row: 5; // Fifth row
+      left: 0; // No shift for item 11
+    }
+  }
+}
+
+// styling for the single hex items - contains the cube faces
+.hexIn {
+  position: absolute;
+  width: 96%;
+  padding-bottom: 110.851%; // Maintain hexagonal aspect ratio
+  margin: $hex-padding; 
+  overflow: hidden;
+  visibility: hidden;
+  outline: 1px solid transparent;
+  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
+
+  > div {
+    display: block;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: #fff;
+    overflow: hidden;
+    transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
+    position: absolute;
+    visibility: visible;
+    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
+    
+    .img {
+      position: absolute;
+      visibility: visible;
+      outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
+
+      .modality-cube {
+        height: $modality-cube-height; 
+        width: $modality-cube-width; 
+        margin: 20px 0 0;
+        z-index: 1000;
+        position: relative;
+        visibility: visible;
+        transform-style: preserve-3d;
+        transform: scale3d(1.05, 1.04, 1.04) rotateX(-36deg) rotateY(-45deg)
+          rotateZ(0deg) translate3d(0px, 0px, 0px) skew(0deg, 0deg);
+
+        // Adjust the faces for correct positioning
+        > .front,
+        > .top,
+        > .right {
+          position: absolute;
+          box-sizing: border-box;
+          text-align: center;
+          height: 100%;
+          width: 100%;
+          color: #000;
+          font-weight: bold;
+          opacity: 1;
+          transition: opacity 0.8s;
+        }
+
+        > .front {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          font-size: 30px;
+          transform: translate3d(-30px, 93px, 0) rotateY(0deg);
+          span.label {
+            color: #fff;
+          }
+        }
+
+        > .top {
+          transform-origin: top center;
+          background-color: rgba(0, 0, 0, 0.1);
+          transform: rotateX(-270deg) translate3d(62px, -69px, 0);
+        }
+
+        > .right {
+          transform-origin: top right;
+          background-color: rgba(0, 0, 0, 0.4);
+          transform: rotateY(-270deg) translate3d(130px, 64px, 0);
+        }
+      }
+    }
+  }
+  
+  > div .img .modality-cube > .front {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-position: center center;
+    background-size: cover;
+    overflow: hidden;
+    -webkit-clip-path: polygon(
+      50% 0%,
+      100% 25%,
+      100% 75%,
+      50% 100%,
+      0% 75%,
+      0% 25%
+    );
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+
+    &:before,
+    &:after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: '';
+      opacity: 0;
+      transition: opacity 0.6s;
+    }
+    &:before {
+      background: rgb(13 255 0);
+    }
+
+    .content1,
+    .content2 {
+      width: 100%;
+      box-sizing: border-box;
+      font-weight: 300;
+      opacity: 0;
+      padding: 0 5px;
+      position: absolute;
+      top: 0;
+    }
+
+    .content1,
+    .content2 {
+      color: #fff;
+      text-align: center;
+      z-index: 1;
+      margin: 0;
+      font-weight: 600;
+    }
+    .content1 {
+      transform: translateY(120px);
+    }
+
+    .content2 {
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      margin: 0;
+      transform: translateY(150px);
+    }
+  }
+}
+
+.hexIn:hover,
+.hexIn:focus {
+  .content1,
+  .content2 {
+    opacity: 1;
+    transition: opacity 0.5s, transform 0.5s;
+  }
+
+  .content1 {
+    transform: translateY(80px);
+  }
+  .content2 {
+    transform: translateY(120px);
+  }
+
+  > div .img .modality-cube {
+    .front,
+    .top,
+    .right {
+      opacity: 0;
+      transition: 0.8s;
+    }
+  }
+  .img:before,
+  .img:after {
+    opacity: 1;
+    transition: 0.5s;
+  }
+}
+
+// theme color vars
+// Theme color variables
+@mixin modality-theme($theme) {
+  & > div .img {
+    &:before,
+    .modality-cube > .front {
+      background-color: $theme;
+    }
+  }
+}
+
+.nirs-cube {@include modality-theme($nirs-theme);}
+.mri-cube {@include modality-theme($mri-theme);}
+.eeg-cube {@include modality-theme($eeg-theme);}
+.pet-cube {@include modality-theme($pet-theme);}
+.ieeg-cube {@include modality-theme($ieeg-theme);}
+.meg-cube {@include modality-theme($meg-theme);}
+.nih-cube {@include modality-theme($nih-theme);}

package/src/scripts/components/page/Page.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+import React from "react"
+
+import { Header } from "../header/Header"
+import { LandingExpandedHeader } from "../header/LandingExpandedHeader"
+import { Input } from "../input/Input"
+import { Footer } from "../footer/Footer"
+
+import "./page.scss"
+
+export interface PageProps {
+  children: React.ReactNode
+  headerArgs
+  className?: string
+}
+
+export const Page = ({ children, headerArgs, className }: PageProps) => {
+  const [isOpenSupport, setSupportIsOpen] = React.useState(false)
+
+  const toggleLogin = () => alert("this is a context")
+  const toggleSupport = () => setSupportIsOpen((prevIsOpen) => !prevIsOpen)
+  return (
+    <>
+      <article className={className}>
+        <Header
+          isOpenSupport={isOpenSupport}
+          toggleLoginModal={toggleLogin}
+          signOutAndRedirect={() => console.log("signed out")}
+          toggleSupport={toggleSupport}
+          profile={headerArgs.user}
+          expanded={headerArgs.expanded}
+          navigateToNewSearch={() => console.log("go to /search")}
+          renderUploader={() => <li>Upload</li>}
+          renderOnFreshDeskWidget={() => <>This is a freshdesk widget</>}
+          renderOnExpanded={(profile) => (
+            <LandingExpandedHeader
+              user={profile}
+              renderFacetSelect={() => <>front facet example</>}
+              renderSearchInput={() => (
+                <Input
+                  placeholder="Search"
+                  type="text"
+                  name="front-page-search"
+                  labelStyle="default"
+                  label="search"
+                  value=""
+                  setValue={(_) => {}}
+                />
+              )}
+              onSearch={() => console.log("User search by keyword.")}
+            />
+          )}
+        />
+        {children}
+        <div className="on-foot">
+          <Footer version="x.x.x" />
+        </div>
+      </article>
+    </>
+  )
+}