@openneuro/app 4.36.2 → 4.37.0-alpha.0

package/src/scripts/dataset/files/{file-display.jsx → file-display.tsx}

@@ -1,5 +1,4 @@
 import React, { useContext } from "react"
-import PropTypes from "prop-types"
 import { useParams } from "react-router-dom"
 import FileView from "./file-view.jsx"
 import { apiPath } from "./file"
@@ -23,10 +22,16 @@ const PathBreadcrumb = styled.div`
   }
 `
 
+interface FileDisplayBreadcrumbProps {
+  filePath: string
+}
+
 /**
  * Create dataset -> dir -> filename breadcrumbs
  */
-export const FileDisplayBreadcrumb = ({ filePath }) => {
+export const FileDisplayBreadcrumb = (
+  { filePath }: FileDisplayBreadcrumbProps,
+) => {
   const tokens = filePath.split(":")
   return (
     <>
@@ -51,13 +56,23 @@ export const FileDisplayBreadcrumb = ({ filePath }) => {
   )
 }
 
-FileDisplayBreadcrumb.propTypes = {
-  filePath: PropTypes.string,
+interface FileDisplayFileArray {
+  filename: string
+  directory: boolean
+  urls: string[]
+}
+
+interface FileDisplayProps {
+  datasetId: string
+  files: FileDisplayFileArray[]
+  snapshotTag?: string
+  filePath?: string
 }
 
-const FileDisplay = ({ dataset, snapshotTag = null, filePath }) => {
+const FileDisplay = (
+  { datasetId, files, snapshotTag = null, filePath }: FileDisplayProps,
+) => {
   const { fetchMore } = useContext(DatasetQueryContext)
-  const files = snapshotTag ? dataset.files : dataset.draft.files
   const datasetFile = files.find((file) => file.filename === filePath)
   // If no file matches, we are missing data, load the next missing parent
   if (!datasetFile) {
@@ -66,7 +81,7 @@ const FileDisplay = ({ dataset, snapshotTag = null, filePath }) => {
       const path = components.slice(0, i).join(":")
       const file = files.find((file) => file.filename === path)
       if (file && file.directory) {
-        fetchMoreDirectory(fetchMore, dataset.id, snapshotTag, file)
+        fetchMoreDirectory(fetchMore, datasetId, snapshotTag, file)
         break
       }
     }
@@ -80,7 +95,7 @@ const FileDisplay = ({ dataset, snapshotTag = null, filePath }) => {
     )
   } else {
     const url = datasetFile?.urls?.[0] ||
-      apiPath(dataset.id, snapshotTag, filePath)
+      apiPath(datasetId, snapshotTag, filePath)
     return (
       <DatasetPageBorder className="dataset-form display-file">
         <PathBreadcrumb>
@@ -106,25 +121,23 @@ const FileDisplay = ({ dataset, snapshotTag = null, filePath }) => {
   }
 }
 
-FileDisplay.propTypes = {
-  datasetId: PropTypes.string,
-  filePath: PropTypes.string,
-  snapshotTag: PropTypes.string,
+interface FileDisplayRouteProps {
+  datasetId: string
+  files: FileDisplayFileArray[]
+  snapshotTag?: string
 }
 
-export const FileDisplayRoute = ({ dataset, snapshotTag }) => {
+export const FileDisplayRoute = (
+  { datasetId, files, snapshotTag }: FileDisplayRouteProps,
+) => {
   return (
     <FileDisplay
-      dataset={dataset}
+      datasetId={datasetId}
+      files={files}
       snapshotTag={snapshotTag}
       {...useParams()}
     />
   )
 }
 
-FileDisplayRoute.propTypes = {
-  datasetId: PropTypes.string,
-  snapshotTag: PropTypes.string,
-}
-
 export default FileDisplay

package/src/scripts/dataset/routes/tab-routes-draft.tsx

@@ -64,7 +64,12 @@ export const TabRoutesDraft = ({ dataset, hasEdit }) => {
       />
       <Route
         path="file-display/:filePath"
-        element={<FileDisplayRoute dataset={dataset} />}
+        element={
+          <FileDisplayRoute
+            datasetId={dataset.id}
+            files={dataset.draft.files}
+          />
+        }
       />
       <Route path="metadata" element={<AddMetadata dataset={dataset} />} />
     </Routes>

package/src/scripts/dataset/routes/tab-routes-snapshot.tsx

@@ -39,7 +39,11 @@ export const TabRoutesSnapshot = ({ dataset, snapshot }) => {
       <Route
         path="file-display/:filePath"
         element={
-          <FileDisplayRoute dataset={snapshot} snapshotTag={snapshot.tag} />
+          <FileDisplayRoute
+            datasetId={dataset.id}
+            files={snapshot.files}
+            snapshotTag={snapshot.tag}
+          />
         }
       />
       <Route path="metadata" element={<AddMetadata dataset={dataset} />} />

package/src/scripts/dataset/snapshot-container.tsx

@@ -93,11 +93,23 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
         className={`dataset dataset-draft dataset-page dataset-page-${modality?.toLowerCase()}`}
       >
         {summary && (
-          <>
-            <DatasetHeader
-              pageHeading={description.Name}
-              modality={summary?.modalities[0]}
-            >
+          <DatasetHeader
+            pageHeading={description.Name}
+            modality={summary?.modalities[0]}
+            datasetHeaderTools={
+              <div className="dataset-tool-buttons">
+                <DatasetTools
+                  hasEdit={hasEdit}
+                  isPublic={dataset.public}
+                  datasetId={datasetId}
+                  snapshotId={snapshot.tag}
+                  isAdmin={isAdmin}
+                  isDatasetAdmin={isDatasetAdmin}
+                  hasDerivatives={hasDerivatives}
+                />
+              </div>
+            }
+            datasetUserActions={
               <FollowToggles>
                 <FollowDataset
                   profile={profile !== null}
@@ -112,8 +124,8 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                   stars={dataset.stars.length}
                 />
               </FollowToggles>
-            </DatasetHeader>
-          </>
+            }
+          />
         )}
         {!dataset.public && isDatasetAdmin && (
           <DatasetAlertPrivate
@@ -156,17 +168,6 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                   }
                 />
               </div>
-              <div className="dataset-tool-buttons">
-                <DatasetTools
-                  hasEdit={hasEdit}
-                  isPublic={dataset.public}
-                  datasetId={datasetId}
-                  snapshotId={snapshot.tag}
-                  isAdmin={isAdmin}
-                  isDatasetAdmin={isDatasetAdmin}
-                  hasDerivatives={hasDerivatives}
-                />
-              </div>
               <DatasetPageTabContainer>
                 <TabRoutesSnapshot dataset={dataset} snapshot={snapshot} />
               </DatasetPageTabContainer>
@@ -263,18 +264,17 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                     />
                   </>
                 ))}
-              {!isAnonymousReviewer &&
-                (
-                  <MetaDataBlock
-                    heading="Uploaded by"
-                    item={
-                      <>
-                        <Username user={dataset.uploader} /> on{" "}
-                        <DateDistance date={dataset.created} />
-                      </>
-                    }
-                  />
-                )}
+              {!isAnonymousReviewer && (
+                <MetaDataBlock
+                  heading="Uploaded by"
+                  item={
+                    <>
+                      <Username user={dataset.uploader} /> on{" "}
+                      <DateDistance date={dataset.created} />
+                    </>
+                  }
+                />
+              )}
 
               {dataset.snapshots.length && (
                 <MetaDataBlock
@@ -362,16 +362,13 @@ export interface SnapshotLoaderProps {
 const SnapshotLoader: React.FC<SnapshotLoaderProps> = ({ dataset }) => {
   const { tag } = useParams()
   const { loading, error, data, fetchMore, stopPolling, startPolling } =
-    useQuery(
-      getSnapshotDetails,
-      {
-        variables: {
-          datasetId: dataset.id,
-          tag,
-        },
-        errorPolicy: "all",
+    useQuery(getSnapshotDetails, {
+      variables: {
+        datasetId: dataset.id,
+        tag,
       },
-    )
+      errorPolicy: "all",
+    })
   if (loading) {
     return (
       <div className="loading-dataset">
@@ -392,10 +389,7 @@ const SnapshotLoader: React.FC<SnapshotLoaderProps> = ({ dataset }) => {
           startPolling,
         }}
       >
-        <SnapshotContainer
-          dataset={dataset}
-          snapshot={data.snapshot}
-        />
+        <SnapshotContainer dataset={dataset} snapshot={data.snapshot} />
       </DatasetQueryContext.Provider>
     )
   }

package/src/scripts/scss/dataset/dataset-page.scss

@@ -1,26 +1,55 @@
 @import '../variables.scss';
 .dataset {
   .dataset-header {
-    h1 {
+    .ds-header-inner {
       display: flex;
       align-items: center;
-      color: #fff;
-      font-size: 24px;
-      @media (max-width: 767px) {
-        font-size: 20px;
-        flex-wrap: wrap;
-        justify-content: center;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      @media screen and (max-width: 767px) {
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
       }
-    }
-    .hexagon-wrapper {
-      margin-right: 10px;
-      @media (max-width: 767px) {
-        width: 56px;
-        height: 56px;
-        div.label {
-          font-size: 17px;
+      .ds-inner-left {
+        max-width: 70%;
+        @media screen and (max-width: 767px) {
+          max-width: 100%;
+        }
+        h1 a {
+          margin-right: 10px;
+        }
+      }
+      .ds-inner-right {
+        max-width: 30%;
+        @media screen and (max-width: 767px) {
+          max-width: 100%;
+        }
+      }
+      h1 {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        font-size: 24px;
+        margin: 10px 0;
+        @media (max-width: 767px) {
+          font-size: 20px;
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+      }
+      .hexagon-wrapper {
+        @media (max-width: 767px) {
+          width: 56px;
+          height: 56px;
+          div.label {
+            font-size: 17px;
+          }
         }
       }
+      .dataset-tool-buttons {
+        flex-basis: 100%;
+      }
     }
   }
 
@@ -144,106 +173,6 @@
   }
 }
 
-.dataset {
-  .hexagon-wrapper {
-    text-align: center;
-    margin: 20px auto;
-    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;
-    }
-
-    .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);
-    }
-  }
-
-  a {
-    .hexagon {
-      transition: color 0.3s;
-      background-color: #fff;
-
-      &.mri {
-        color: $mri-theme;
-      }
-      &.eeg {
-        color: $eeg-theme;
-      }
-
-      &.pet {
-        color: $pet-theme;
-      }
-      &.ieeg {
-        color: $ieeg-theme;
-      }
-
-      &.meg {
-        color: $meg-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%);
-        }
-      }
-    }
-  }
-}
-
 .sidebar .dataset-meta-block {
   margin-bottom: 25px;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
@@ -356,11 +285,6 @@
 .dataset-page {
   .dataset-header {
     background-color: var(--current-theme-header);
-    background: linear-gradient(
-      16deg,
-      var(--current-theme-header-dark),
-      var(--current-theme-header)
-    );
   }
 }
 

package/src/scripts/scss/variables.scss

@@ -7,14 +7,11 @@ $mine-shaft: #222;
 $stanford-red: #8c1515;
 $coral: #eb472c;
 $salmon: #ec7764;
-
 $rock: #5f574f;
 $stone: #928b81;
 $driftwood: #b6b1a9;
 $misty: #dad7cb;
-
 $fuchsia: #9169a7;
-
 $ocean: #00505c;
 $algae: #175e54;
 $sky: rgb(0, 124, 146);
@@ -23,64 +20,81 @@ $persian-green: #00b489;
 $night: #012a30;
 $jungle-mist: #b5cbd3;
 $dodger-blue: #5890ff;
-
 $yellow: #ffd820;
 $honey: #fffcee;
-
 $success: #24c85e;
 $info: #24c8c8;
 $warning: #f7ba4b;
 $danger: #c82424;
-
 $notification-green: #77e6a3;
-
 $warning-orange-cream: #ffefdb;
 $warning-orange: #df7600;
-
 //end old vars
 
+// gray colors
 $charcoal: #333;
 $newspaper: #dfdfdf;
+$cloud: #F8F8F8;
 
 /* SCSS RGB */
 $on-light-aqua: rgb(55, 188, 210);
 $on-dark-aqua: rgba(32, 78, 90, 1);
 $on-secondary: #196583;
-$on-dark-aqua-light: #e5f4f7;
+$on-light: #8bc8d4;
+$on-ultralight: adjust-color($on-dark-aqua, $lightness: 72%);
 
 $mri-theme: rgba(79, 51, 130, 1);
 $mri-hover: adjust-color($mri-theme, $lightness: 10%);
 $mri-dark: darken($mri-theme, 25%);
 $mri-secondary: adjust-color($mri-theme, $lightness: 15%);
 $mri-light: adjust-color($mri-theme, $lightness: 45%);
+$mri-ultralight: adjust-color($mri-theme, $lightness: 62%);
 
 $eeg-theme: rgba(134, 31, 55, 1);
 $eeg-hover: adjust-color($eeg-theme, $lightness: 10%);
 $eeg-dark: darken($eeg-theme, 25%);
 $eeg-secondary: adjust-color($eeg-theme, $lightness: 15%);
 $eeg-light: adjust-color($eeg-theme, $lightness: 45%);
+$eeg-ultralight: adjust-color($eeg-theme, $lightness: 65%);
 
 $pet-theme: rgba(0, 105, 192, 1);
 $pet-hover: adjust-color($pet-theme, $lightness: 10%);
 $pet-dark: darken($pet-theme, 25%);
 $pet-secondary: adjust-color($pet-theme, $lightness: 15%);
 $pet-light: adjust-color($pet-theme, $lightness: 45%);
+$pet-ultralight: adjust-color($pet-theme, $lightness: 60%);
 
 $ieeg-theme: rgba(18, 109, 62, 1);
 $ieeg-hover: adjust-color($ieeg-theme, $lightness: 10%);
 $ieeg-dark: darken($ieeg-theme, 25%);
 $ieeg-secondary: adjust-color($ieeg-theme, $lightness: 15%);
 $ieeg-light: rgb(200, 212, 153);
+$ieeg-ultralight: adjust-color($ieeg-theme, $lightness: 72%);
 
 $meg-theme: rgba(156, 57, 0, 1);
 $meg-hover: adjust-color($meg-theme, $lightness: 10%);
 $meg-dark: darken($meg-theme, 25%);
 $meg-secondary: adjust-color($meg-theme, $lightness: 15%);
 $meg-light: adjust-color($meg-theme, $lightness: 45%);
+$meg-ultralight: adjust-color($meg-theme, $lightness: 68%);
+
+$nih-theme: rgb(34, 133, 148);
+$nih-hover: adjust-color($nih-theme, $lightness: 10%);
+$nih-dark: rgba(32, 85, 138, 1);
+$nih-secondary: adjust-color($nih-theme, $lightness: 15%);
+$nih-light: rgba(155, 211, 221, 1);
+
+$nirs-theme: rgb(166 21 40);
+$nirs-hover: adjust-color($nirs-theme, $lightness: 10%);
+$nirs-dark: darken($nirs-theme, 25%);
+$nirs-secondary: adjust-color($nirs-theme, $lightness: 15%);
+$nirs-light: adjust-color($nirs-theme, $lightness: 45%);
+$nirs-ultralight: adjust-color($nirs-theme, $lightness: 61%);
 
 $on-light-green: #00eeb5;
 $on-light-red: #c00342;
 $on-light-orange: rgb(255, 110, 43);
+$text-cite: #509145;
 
 $primary: $on-dark-aqua;
 
@@ -95,7 +109,6 @@ $screen-lg: 989px;
 
 $border-radius-default: 4px;
 
-
 /* CSS HEX */
 :root {
   --mri-theme: #{$mri-theme};
@@ -103,7 +116,8 @@ $border-radius-default: 4px;
   --pet-theme: #{$pet-theme};
   --ieeg-theme: #{$ieeg-theme};
   --meg-theme: #{$meg-theme};
-
+  --nirs-theme: #{$nirs-theme};
+  --nih-theme: #{$nih-theme};
   --on-light-aqua: #{$on-light-aqua};
   --on-dark-aqua: #{$on-dark-aqua};
   --on-light-green: #{on-light-green};
@@ -112,12 +126,15 @@ $border-radius-default: 4px;
   --current-theme-primary-hover: #{$on-light-aqua};
   --current-theme-secondary: #{$on-secondary};
   --current-theme-primary-dark: #{$on-dark-aqua};
-  --current-theme-primary-light: #{$on-dark-aqua-light};
+  --current-theme-primary-light: #{$on-light};
+  --current-theme-primary-ultralight: #{$on-ultralight};
   --current-theme-header: #333;
   --current-theme-header-dark: #333;
   --font-sans: #{$font-sans};
   --border-radius-default: #{$border-radius-default};
   --newspaper: #{$newspaper};
+  --cloud: #{$cloud};
+  --text-citation: #{$text-cite};
 }
 
 .mri-theme {
@@ -148,11 +165,18 @@ $border-radius-default: 4px;
   background-color: $meg-theme;
 }
 
+.nih-theme {
+  background: $nih-theme;
+}
+
+.nirs-theme {
+  background: $nirs-theme;
+}
+
 .gray-bg {
   background: #f3f3f3;
 }
 
-
 .search-page-mri,
 .dataset-page-mri {
   --current-theme-primary: #{$mri-theme};
@@ -162,6 +186,7 @@ $border-radius-default: 4px;
   --current-theme-primary-light: #{$mri-light};
   --current-theme-header: #{$mri-theme};
   --current-theme-header-dark: #{$mri-dark};
+  --current-theme-primary-ultralight: #{$mri-ultralight};
 }
 
 .search-page-eeg,
@@ -173,6 +198,7 @@ $border-radius-default: 4px;
   --current-theme-primary-light: #{$eeg-light};
   --current-theme-header: #{$eeg-theme};
   --current-theme-header-dark: #{$eeg-dark};
+  --current-theme-primary-ultralight: #{$eeg-ultralight};
 }
 
 .search-page-pet,
@@ -184,6 +210,7 @@ $border-radius-default: 4px;
   --current-theme-primary-light: #{$pet-light};
   --current-theme-header: #{$pet-theme};
   --current-theme-header-dark: #{$pet-dark};
+  --current-theme-primary-ultralight: #{$pet-ultralight};
 }
 
 .search-page-ieeg,
@@ -195,6 +222,7 @@ $border-radius-default: 4px;
   --current-theme-primary-light: #{$ieeg-light};
   --current-theme-header: #{$ieeg-theme};
   --current-theme-header-dark: #{$ieeg-dark};
+  --current-theme-primary-ultralight: #{$ieeg-ultralight};
 }
 
 .search-page-meg,
@@ -206,4 +234,28 @@ $border-radius-default: 4px;
   --current-theme-primary-light: #{$meg-light};
   --current-theme-header: #{$meg-theme};
   --current-theme-header-dark: #{$meg-dark};
+  --current-theme-primary-ultralight: #{$meg-ultralight};
+}
+
+.search-page-nirs,
+.dataset-page-nirs {
+  --current-theme-primary: #{$nirs-theme};
+  --current-theme-primary-hover: #{$nirs-hover};
+  --current-theme-primary-dark: #{$nirs-dark};
+  --current-theme-secondary: #{$nirs-secondary};
+  --current-theme-primary-light: #{$nirs-light};
+  --current-theme-header: #{$nirs-theme};
+  --current-theme-header-dark: #{$nirs-dark};
+  --current-theme-primary-ultralight: #{$nirs-ultralight};
+}
+
+.search-page-nih,
+.dataset-page-nih {
+  --current-theme-primary: #{$nih-theme};
+  --current-theme-primary-hover: #{$nih-hover};
+  --current-theme-primary-dark: #{$nih-dark};
+  --current-theme-secondary: #{$nih-secondary};
+  --current-theme-primary-light: #{$nih-light};
+  --current-theme-header: #{$nih-theme};
+  --current-theme-header-dark: #{$nih-dark};
 }

package/src/scripts/{components/search-page → search}/__tests__/NuerobagelSearch.spec.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { fireEvent, render, screen } from "@testing-library/react"
-import { NeurobagelSearch } from "../NeurobagelSearch"
+import { NeurobagelSearch } from "../components/NeurobagelSearch"
 
 describe("NeurobagelSearch component", () => {
   it("? toggle can be clicked", async () => {