@openneuro/app 4.36.1 → 4.37.0-alpha.0

package/src/scripts/search/scss/sliding-radio-group.scss

@@ -0,0 +1,115 @@
+@import '../../scss/variables';
+
+
+
+// Root container for the general SlidingRadioGroup component
+.sliding-radio-group-root {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  &.btn-group-wrapper.facet-radio.show-dataset-radios-container {
+    position: relative;
+    margin: 0 0 10px;
+    background-color: #f6f6f6;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    overflow: hidden;
+    min-height: 40px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: flex-start;
+
+    &:after {
+      content: none;
+      display: none;
+      background: none;
+      position: static;
+      width: 0;
+      height: 0;
+    }
+  }
+
+  // Styles for .dataset-filter-radio (individual radio button wrapper)
+  .dataset-filter-radio {
+    margin: 0;
+
+    [type='radio']:checked,
+    [type='radio']:not(:checked) {
+      position: absolute;
+      left: -9999px;
+    }
+
+    > label {
+      font-size: 13px;
+      line-height: 1.7em;
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      white-space: nowrap;
+      padding: 6px 12px;
+      border-right: 1px solid #ddd;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    &:last-child > label,
+    label.is-active {
+      border-right: none;
+    }
+
+    input[type='radio']:focus-within + label {
+      box-shadow: inset 0 0 3px 1px #00a3ff;
+      outline: 0;
+    }
+  }
+
+  // Styles for the inner group of radio buttons container
+
+  .show-dataset-radios-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    z-index: 1;
+    position: relative;
+    width: 100%;
+  }
+
+  .sliding-highlight {
+    position: absolute;
+    background-color: var(--current-theme-primary);
+    border-radius: 4px;
+
+    transition: left 0.3s ease, width 0.3s ease, top 0.3s ease, height 0.3s ease,
+      opacity 0.3s ease;
+    z-index: 0;
+    opacity: 0;
+  }
+
+  //Specific button states within this component (text color changes)
+
+  .dataset-filter-radio {
+    > label {
+      color: var(--current-theme-primary);
+      background-color: transparent;
+    }
+
+    [type='radio']:checked + label {
+      color: #fff;
+    }
+
+    [type='radio']:not(:checked) + label:hover {
+      color: var(--current-theme-primary-dark);
+    }
+  }
+}

package/src/scripts/search/search-container.tsx

@@ -1,14 +1,16 @@
-import React, { useContext, useEffect } from "react"
+import React, { useContext, useEffect, useRef, useState } from "react"
 import type { FC } from "react"
+import * as Sentry from "@sentry/react"
 import { useLocation } from "react-router-dom"
-import { SearchPage } from "../components/search-page/SearchPage"
-import { SearchResultsList } from "../components/search-page/SearchResultsList"
-import { NeurobagelSearch } from "../components/search-page/NeurobagelSearch"
+import { SearchPage } from "./components/SearchPage"
+import { SearchResultsList } from "./components/SearchResultsList"
+import { NeurobagelSearch } from "./components/NeurobagelSearch"
 import { Button } from "../components/button/Button"
 import { Loading } from "../components/loading/Loading"
+import { modalityShortMapping } from "../components/formatting/modality-label"
+
 import {
   AgeRangeInput,
-  AllDatasetsToggle,
   AuthorInput,
   BodyPartsInput,
   DatasetTypeSelect,
@@ -21,7 +23,6 @@ import {
   ScannerManufacturersModelNames,
   SectionSelect,
   SexRadios,
-  ShowDatasetRadios,
   SortBySelect,
   SpeciesSelect,
   StudyDomainInput,
@@ -30,13 +31,15 @@ import {
   TracerNames,
   TracerRadionuclides,
 } from "./inputs"
+import { DatasetsRadioTabs } from "./components/DatasetsRadioTabs"
 import FiltersBlockContainer from "./filters-block-container"
 import AggregateCountsContainer from "../pages/front-page/aggregate-queries/aggregate-counts-container"
 import { useSearchResults } from "./use-search-results"
 import { SearchParamsCtx } from "./search-params-ctx"
 import type { SearchParams } from "./initial-search-params"
 import Helmet from "react-helmet"
-import AdminUser from "../authentication/admin-user.jsx"
+import type { SearchResultItemProps } from "./components/SearchResultItem"
+import { SearchResultDetails } from "./components/SearchResultDetails"
 
 export interface SearchContainerProps {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -97,7 +100,8 @@ export const setDefaultSearch = (
 
   // Check for grant-related conditions
   if (
-    is_grant_portal && grant === "nih" &&
+    is_grant_portal &&
+    grant === "nih" &&
     searchParams.brain_initiative !== "true"
   ) {
     setSearchParams((prevState) => ({
@@ -153,12 +157,59 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
     hasNextPage = data.datasets.pageInfo.hasNextPage
   }
 
+  const [clickedItemData, setClickedItemData] = useState<
+    SearchResultItemProps["node"] | null
+  >(null)
+
+  const lastOpenedButtonRef = useRef<HTMLButtonElement | null>(null)
+
+  useEffect(() => {
+    setClickedItemData(null)
+  }, [JSON.stringify(searchParams)])
+
+  // handleItemClick to accept itemId and event, and store the event.currentTarget
+  const handleItemClick = (
+    itemId: string,
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    const nodeData =
+      resultsList.find((item) => item.node.id === itemId)?.node || null
+
+    if (!nodeData) {
+      Sentry.captureException(`Error: nodeData not found for ID: ${itemId}`)
+      return
+    }
+
+    if (clickedItemData && clickedItemData.id === nodeData.id) {
+      // If the same item is clicked again, close details
+      setClickedItemData(null)
+      // Focus will be returned by handleCloseDetails
+    } else {
+      setClickedItemData(nodeData)
+      lastOpenedButtonRef.current = event.currentTarget
+    }
+  }
+
+  // handleCloseDetails to use setTimeout for focus
+  const handleCloseDetails = () => {
+    setClickedItemData(null)
+    setTimeout(() => {
+      if (lastOpenedButtonRef.current) {
+        lastOpenedButtonRef.current.focus()
+        lastOpenedButtonRef.current = null
+      }
+    }, 0)
+  }
+
+  const labelText = modality ? modalityShortMapping(modality) : null
+
   return (
     <>
       <Helmet>
-        <title>OpenNeuro - {modality || selected_grant || ""} Search</title>
+        <title>OpenNeuro - {labelText || selected_grant || ""} Search</title>
       </Helmet>
       <SearchPage
+        hasDetailsOpen={!!clickedItemData}
         portalContent={portalContent}
         renderAggregateCounts={() =>
           portalContent.modality
@@ -172,20 +223,27 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
         )}
         renderSortBy={() => <SortBySelect variables={variables} />}
         renderSearchHeader={() => (
-          <>
-            {portalContent
-              ? "Search " + (modality || selected_grant || "") + " Portal"
-              : "Search All Datasets"}
-          </>
+          <div className="grid grid-between grid-nogutter">
+            <div className="col-lg">
+              {portalContent
+                ? (
+                  <h2>
+                    {"Search " + (labelText || selected_grant || "") +
+                      " Portal"}
+                  </h2>
+                )
+                : <h1>{"Search All Datasets"}</h1>}
+            </div>
+            <div className="col-lg text-right">
+              <DatasetsRadioTabs />
+            </div>
+          </div>
         )}
         renderSearchFacets={() => (
           <>
             <NeurobagelSearch />
             <KeywordInput />
-            <AdminUser>
-              <AllDatasetsToggle />
-            </AdminUser>
-            {!searchParams.searchAllDatasets && <ShowDatasetRadios />}
+
             {!portalContent
               ? <ModalitySelect portalStyles={true} label="Modalities" />
               : <ModalitySelect portalStyles={false} label="Choose Modality" />}
@@ -233,18 +291,26 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
                 <SearchResultsList
                   items={resultsList}
                   datasetTypeSelected={searchParams.datasetType_selected}
+                  clickedItemData={clickedItemData}
+                  handleItemClick={handleItemClick}
                 />
                 {/* TODO: make div below into display component. */}
                 <div className="grid grid-nogutter" style={{ width: "100%" }}>
-                  {hasNextPage && resultsList.length > 0 &&
-                    (
-                      <div className="col col-12 load-more m-t-10">
-                        <Button label="Load More" onClick={loadMore} />
-                      </div>
-                    )}
+                  {hasNextPage && resultsList.length > 0 && (
+                    <div className="col col-12 load-more m-t-10">
+                      <Button label="Load More" onClick={loadMore} />
+                    </div>
+                  )}
                 </div>
               </>
             )}
+        renderItemDetails={() =>
+          clickedItemData && (
+            <SearchResultDetails
+              itemData={clickedItemData}
+              onClose={handleCloseDetails}
+            />
+          )}
       />
     </>
   )

package/src/scripts/search/use-search-results.tsx

@@ -61,8 +61,10 @@ const searchQuery = gql`
           }
           latestSnapshot {
             size
+            readme
             summary {
               modalities
+              primaryModality
               secondaryModalities
               sessions
               subjects
@@ -94,6 +96,7 @@ const searchQuery = gql`
             description {
               Name
               Authors
+              DatasetDOI
             }
           }
           analytics {

package/src/scripts/users/github-auth-button.tsx

@@ -18,7 +18,7 @@ const GithubSyncDiv = styled.div`
     margin: 10px;
 
     &:hover {
-      background-color: var(--current-theme-primary-light);
+      background-color: var(--current-theme-primary-ultralight);
        color: var(--current-theme-primary);
     }
     &.active {

package/src/scripts/components/scss/_variables.scss

@@ -1,245 +0,0 @@
-$font-sans: 'Open Sans', sans-serif;
-
-//old vars
-$white: #fff;
-$black: #000;
-$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);
-$turquoise: #009b76;
-$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
-
-$charcoal: #333;
-$newspaper: #dfdfdf;
-
-/* 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;
-
-$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%);
-
-$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%);
-
-$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%);
-
-$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);
-
-$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);
-
-$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%);
-
-
-$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%);
-
-$on-light-green: #00eeb5;
-$on-light-red: #c00342;
-$on-light-orange: rgb(255, 110, 43);
-
-$primary: $on-dark-aqua;
-
-$chiclet-color: #a2059e;
-
-/* CSS HEX */
-:root {
-  --mri-theme: #{$mri-theme};
-  --eeg-theme: #{$eeg-theme};
-  --pet-theme: #{$pet-theme};
-  --ieeg-theme: #{$ieeg-theme};
-  --meg-theme: #{$meg-theme};
-  --nirs-theme: #{$nirs-theme};
-
-  --on-light-aqua: #{$on-light-aqua};
-  --on-dark-aqua: #{$on-dark-aqua};
-  --on-light-green: #{on-light-green};
-
-  --current-theme-primary: #{$on-dark-aqua};
-  --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-header: #333;
-  --current-theme-header-dark: #333;
-}
-
-.mri-theme {
-  background-color: $mri-theme;
-}
-.eeg-theme {
-  background-color: $eeg-theme;
-}
-
-.pet-theme {
-  background-color: $pet-theme;
-}
-.ieeg-theme {
-  background-color: $ieeg-theme;
-}
-
-.on-light-aqua {
-  background-color: $on-light-aqua;
-}
-.on-light-green {
-  background-color: $on-light-green;
-}
-.on-dark-aqua {
-  background-color: $on-dark-aqua;
-}
-
-.meg-theme {
-  background-color: $meg-theme;
-}
-
-.nih-theme  {
-  background: $nih-theme;
-}
-
-.gray-bg {
-  background: #f3f3f3;
-}
-
-//Base unit used for spacing gutters
-$base-unit: 20px;
-
-//Screen Sizes
-$screen-sm: 480px;
-$screen-md: 767px;
-$screen-lg: 989px;
-
-$border-radius-default: 4px;
-
-.search-page-mri,
-.dataset-page-mri {
-  --current-theme-primary: #{$mri-theme};
-  --current-theme-primary-hover: #{$mri-hover};
-  --current-theme-primary-dark: #{$mri-dark};
-  --current-theme-secondary: #{$mri-secondary};
-  --current-theme-primary-light: #{$mri-light};
-  --current-theme-header: #{$mri-theme};
-  --current-theme-header-dark: #{$mri-dark};
-}
-
-.search-page-eeg,
-.dataset-page-eeg {
-  --current-theme-primary: #{$eeg-theme};
-  --current-theme-primary-hover: #{$eeg-hover};
-  --current-theme-primary-dark: #{$eeg-dark};
-  --current-theme-secondary: #{$eeg-secondary};
-  --current-theme-primary-light: #{$eeg-light};
-  --current-theme-header: #{$eeg-theme};
-  --current-theme-header-dark: #{$eeg-dark};
-}
-
-.search-page-pet,
-.dataset-page-pet {
-  --current-theme-primary: #{$pet-theme};
-  --current-theme-primary-hover: #{$pet-hover};
-  --current-theme-primary-dark: #{$pet-dark};
-  --current-theme-secondary: #{$pet-secondary};
-  --current-theme-primary-light: #{$pet-light};
-  --current-theme-header: #{$pet-theme};
-  --current-theme-header-dark: #{$pet-dark};
-}
-
-.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};
-}
-
-.search-page-ieeg,
-.dataset-page-ieeg {
-  --current-theme-primary: #{$ieeg-theme};
-  --current-theme-primary-hover: #{$ieeg-hover};
-  --current-theme-primary-dark: #{$ieeg-dark};
-  --current-theme-secondary: #{$ieeg-secondary};
-  --current-theme-primary-light: #{$ieeg-light};
-  --current-theme-header: #{$ieeg-theme};
-  --current-theme-header-dark: #{$ieeg-dark};
-}
-
-.search-page-meg,
-.dataset-page-meg {
-  --current-theme-primary: #{$meg-theme};
-  --current-theme-primary-hover: #{$meg-hover};
-  --current-theme-primary-dark: #{$meg-dark};
-  --current-theme-secondary: #{$meg-secondary};
-  --current-theme-primary-light: #{$meg-light};
-  --current-theme-header: #{$meg-theme};
-  --current-theme-header-dark: #{$meg-dark};
-}
-
-.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};
-}

package/src/scripts/components/search-page/SearchResultsList.tsx

@@ -1,29 +0,0 @@
-import React from "react"
-import { SearchResultItem } from "./SearchResultItem"
-import "./search-page.scss"
-
-export interface SearchResultsListProps {
-  items
-  datasetTypeSelected: string
-}
-
-export const SearchResultsList = ({
-  items,
-  datasetTypeSelected,
-}: SearchResultsListProps) => {
-  return (
-    <div className="search-results">
-      {items.map((data) => {
-        if (data) {
-          return (
-            <SearchResultItem
-              node={data.node}
-              key={data.node.id}
-              datasetTypeSelected={datasetTypeSelected}
-            />
-          )
-        }
-      })}
-    </div>
-  )
-}

package/src/scripts/dataset/files/index.tsx

@@ -1,6 +0,0 @@
-import Files from "./files"
-import FileDisplay from "./file-display"
-
-export { FileDisplay }
-
-export default Files

package/src/scripts/search/inputs/admin-allDatasets-toggle.tsx

@@ -1,47 +0,0 @@
-import React, { useContext } from "react"
-import type { FC } from "react"
-import { SearchParamsCtx } from "../search-params-ctx"
-import { Button } from "../../components/button/Button"
-import styled from "@emotion/styled"
-
-const StyledButton = styled(Button)`
-  width: auto;
-  padding: 6px 10px;
-  margin-bottom: 20px;
-  justify-content: flex-start;
-  &.active {
-    background: #fff5f3;
-    border-color: #e68383;
-    color: #710000;
-    i {
-      color: #710000;
-    }
-  }
-`
-
-const TaskInput: FC = () => {
-  const {
-    searchParams: { searchAllDatasets },
-    setSearchParams,
-  } = useContext(SearchParamsCtx)
-
-  const toggleSearchAllDatasets = () =>
-    setSearchParams((prevState) => ({
-      ...prevState,
-      searchAllDatasets: !prevState.searchAllDatasets,
-    }))
-
-  return (
-    <StyledButton
-      className={searchAllDatasets ? "active toggle-btn" : "toggle-btn"}
-      onClick={toggleSearchAllDatasets}
-      icon={searchAllDatasets ? "fas fa-check-square" : "far fa-square"}
-      label={searchAllDatasets
-        ? "Admin: Searching All Datasets"
-        : "Admin: Search All Datasets"}
-    >
-    </StyledButton>
-  )
-}
-
-export default TaskInput