@openneuro/app 4.36.2 → 4.37.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.36.2",
+  "version": "4.37.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -16,7 +16,7 @@
   "dependencies": {
     "@apollo/client": "3.13.8",
     "@artsy/fresnel": "^1.3.1",
-    "@bids/validator": "npm:@jsr/bids__validator@^2.0.3",
+    "@bids/validator": "npm:@jsr/bids__validator@^2.0.7",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.57.0",
@@ -51,8 +51,10 @@
     "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/dompurify": "^3",
     "@types/jsdom": "^16",
     "@types/node": "20.12.7",
@@ -75,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b5acb4d59334f72298be62066e4064d59c8e10bc"
+  "gitHead": "01cd2b234a23c76a234dfb2c2839857041da777b"
 }

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

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 /* Accordion styles */
 
 .on-accordion-wrapper {

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

@@ -6,6 +6,7 @@ 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"
+import { ModalityHexagon } from "../../components/modality-cube/ModalityHexagon"
 
 export interface ActivitySliderProps {
   className?: string
@@ -62,28 +63,9 @@ export const ActivitySlider = ({
         {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>
+              <ModalityHexagon
+                primaryModality={node.latestSnapshot.summary?.primaryModality}
+              />
             </div>
             <div className="ds-name">
               <h4>

package/src/scripts/components/activity-slider/slider.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .activity-slider {
   h3 {
@@ -32,87 +32,6 @@
       margin: 10px 0 0;
     }
   }
-  .activity-slider-node {
-    .hexagon-wrapper {
-      text-align: center;
-      margin: 20px auto 0;
-      position: relative;
-      display: inline-block;
-      width: 45px;
-      height: 45px;
-      div.label {
-        position: absolute;
-        top: 0;
-        text-align: center;
-        width: 100%;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #fff;
-        font-weight: 600;
-        font-size: 13px;
-      }
-    }
-
-    .hexagon {
-      height: 100%;
-      width: calc(100% * 0.57735);
-      display: inline-block;
-    }
-
-    .hexagon:before {
-      position: absolute;
-      top: 0;
-      right: calc((100% / 2) - ((100% * 0.57735) / 2));
-      background-color: inherit;
-      height: inherit;
-      width: inherit;
-      content: '';
-      transform: rotateZ(60deg);
-    }
-
-    .hexagon:after {
-      position: absolute;
-      top: 0;
-      right: calc((100% / 2) - ((100% * 0.57735) / 2));
-      background-color: inherit;
-      height: inherit;
-      width: inherit;
-      content: '';
-      transform: rotateZ(-60deg);
-    }
-    .hexagon {
-      transition: background-color 0.3s;
-      background-color: $on-dark-aqua;
-
-      &.mri {
-        background-color: $mri-theme;
-      }
-      &.eeg {
-        background-color: $eeg-theme;
-      }
-
-      &.pet {
-        background-color: $pet-theme;
-      }
-      &.ieeg {
-        background-color: $ieeg-theme;
-      }
-
-      &.meg {
-        background-color: $meg-theme;
-      }
-      &.eeg {
-        background-color: $on-light-green;
-      }
-      &.nirs{
-        background-color: $nirs-theme;
-      }
-    }
-  }
 }
 .react-multi-carousel-dot--active button {
   background-color: var(--current-theme-primary);

package/src/scripts/components/button/button.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .on-button {
   font-family: $font-sans;

package/src/scripts/components/count-toggle/count-toggle.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .toggle-btn {
   border: 1px solid #aaa;

package/src/scripts/components/dropdown/dropdown.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .dropdown-wrapper {
   display: inline-block;

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

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .facet-accordion.on-accordion-wrapper {
   padding: 0 15px;
@@ -45,7 +45,7 @@
     .level-1 > li {
       border-top: 1px solid #dfdfdf;
       > span:hover {
-        background-color: var(--current-theme-primary-light);
+        background-color: var(--current-theme-primary-ultralight);
       }
 
       > .label {
@@ -60,7 +60,7 @@
         display: flex;
         justify-content: flex-start;
         &:hover {
-          background-color: var(--current-theme-primary-light);
+          background-color: var(--current-theme-primary-ultralight);
         }
 
         .label {
@@ -165,7 +165,8 @@
 .search-nav .facet-open.modality-facet {
   margin: 20px 0;
   border: 0;
-  background: #e5f4f7;
+  background: var(--current-theme-primary-ultralight);
+  border: 1px solid var(--current-theme-primary-light);
   border-radius: $border-radius-default;
   padding: 10px;
 

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

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 footer {
   background: $charcoal;

package/src/scripts/components/front-page/front-page.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 body {
   font-family: $font-sans;

package/src/scripts/components/header/header.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 header {
   position: relative;
 }

package/src/scripts/components/input/input.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 form,
 fieldset {

package/src/scripts/components/input/term-search.scss

@@ -1,4 +1,4 @@
-@import "../scss/variables";
+@import "../../scss/variables";
 
 .term-input {
   display: flex;

package/src/scripts/components/loading/loading.scss

@@ -18,7 +18,7 @@ $spinner-hexagon-bg-color: var(--current-theme-primary);
   width: $spinner-width;
   height: $spinner-height;
   border-radius: 0;
-  background: var(--current-theme-primary-light);
+  background: var(--current-theme-primary-ultralight);
   opacity: 1;
   top: $spinner-base-value;
 }

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

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .modal-wrapper {
   position: fixed;

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

@@ -0,0 +1,29 @@
+import React from "react"
+import type { FC } from "react"
+import { modalityShortMapping } from "../../components/formatting/modality-label"
+import "./modality-hexagon.scss"
+interface ModalityHexagonProps {
+  primaryModality: string | null | undefined
+}
+
+//ModalityHexagon component displays a colored hexagon and label
+// based on the provided primaryModality.
+
+export const ModalityHexagon: FC<ModalityHexagonProps> = ({
+  primaryModality,
+}) => {
+  const hexagonClass = primaryModality
+    ? primaryModality.toLowerCase()
+    : "no-modality"
+
+  const labelText = primaryModality
+    ? modalityShortMapping(primaryModality)
+    : <i className="fa fa-circle-o-notch fa-spin"></i>
+
+  return (
+    <div className="hexagon-wrapper">
+      <div className={`hexagon ${hexagonClass}`}></div>
+      <div className="label">{labelText}</div>
+    </div>
+  )
+}

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

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 // Variables for hexagonal grid and cube sizes
 $hex-width: 240px;
 $hex-height: 450px; // Height for the hex grid

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

@@ -0,0 +1,93 @@
+@import '../../scss/variables';
+
+.hexagon-wrapper {
+  text-align: center;
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  height: 45px;
+
+  div.label {
+    position: absolute;
+    top: 0;
+    text-align: center;
+    width: 100%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+    font-size: 13px;
+    color: #fff; // Default label color
+  }
+
+  .hexagon {
+    height: 100%;
+    width: calc(100% * 0.57735);
+    display: inline-block;
+    transition: background-color 0.3s;
+    background-color: $on-dark-aqua; // Default hexagon background
+
+    &:before,
+    &:after {
+      position: absolute;
+      top: 0;
+      right: calc((100% / 2) - ((100% * 0.57735) / 2));
+      background-color: inherit;
+      height: inherit;
+      width: inherit;
+      content: '';
+    }
+
+    &:before {
+      transform: rotateZ(60deg);
+    }
+
+    &:after {
+      transform: rotateZ(-60deg);
+    }
+
+    &.mri { background-color: $mri-theme; }
+    &.eeg { background-color: $on-light-green; } // EEG uses on-light-green
+    &.pet { background-color: $pet-theme; }
+    &.ieeg { background-color: $ieeg-theme; }
+    &.meg { background-color: $meg-theme; }
+    &.nirs { background-color: $nirs-theme; }
+  }
+}
+
+a {
+  .hexagon-wrapper {
+    margin: 20px auto; 
+
+    div.label {
+      color: unset; 
+    }
+
+    .hexagon {
+      transition: color 0.3s; 
+      background-color: #fff; 
+
+      // Modality specific colors (when inside 'a')
+      &.mri { background-color: #fff; color: $mri-theme; }
+      &.eeg { background-color: #fff; color: $eeg-theme; }
+      &.pet { background-color: #fff; color: $pet-theme; }
+      &.ieeg { background-color: #fff; color: $ieeg-theme; }
+      &.meg { background-color: #fff; color: $meg-theme; }
+      &.nirs { background-color: #fff; color: $nirs-theme; } 
+    }
+
+    &:hover {
+      .hexagon {
+        color: lighten($on-dark-aqua, 15%); 
+        &.mri { color: lighten($mri-theme, 10%); }
+        &.eeg { color: lighten($eeg-theme, 10%); }
+        &.pet { color: lighten($pet-theme, 10%); }
+        &.ieeg { color: lighten($ieeg-theme, 10%); }
+        &.meg { color: lighten($meg-theme, 10%); }
+      }
+    }
+  }
+}

package/src/scripts/components/page/page.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 @import '../scss//normalize';
 @import '../scss//helper-classes';
 @import '../scss//flex-grid';

package/src/scripts/components/progress-bar/progress-bar.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 // Outer container
 .progress {
   overflow: hidden;

package/src/scripts/components/radio/radio.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 .custom-radio {
   margin: 10px 0 20px;
   [type='radio']:checked,
@@ -319,7 +319,7 @@
       }
     }
     [type='radio']:not(:checked) + label:hover {
-      background-color: var(--current-theme-primary-light);
+      background-color: var(--current-theme-primary-ultralight);
     }
     [type='radio']:checked + label {
       color: #fff;

package/src/scripts/components/range/TwoHandleRange.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 $rangeWidth: 90%;
 
 .formRange-inner {
@@ -82,7 +82,7 @@ $rangeWidth: 90%;
 /* For Chrome browsers */
 .thumb::-webkit-slider-thumb {
   background-color: #fff;
-  border: 1px solid var(--current-theme-primary-light);
+  border: 1px solid var(--current-theme-primary-ultralight);
   border-radius: 50%;
   box-shadow: 0 0 5px -1px var(--current-theme-primary);
   cursor: pointer;
@@ -96,7 +96,7 @@ $rangeWidth: 90%;
 /* For Firefox browsers */
 .thumb::-moz-range-thumb {
   background-color: #fff;
-  border: 1px solid var(--current-theme-primary-light);
+  border: 1px solid var(--current-theme-primary-ultralight);
   border-radius: 50%;
   box-shadow: 0 0 5px -1px var(--current-theme-primary);
   cursor: pointer;

package/src/scripts/components/read-more/read-more.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 .has-read-more {
   position: relative;
 

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

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .upload-modal.modal-wrapper {
   // display: block;

package/src/scripts/components/tooltip/tooltip.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 /* START TOOLTIP STYLES */
 [data-tooltip] {