@openneuro/app 4.36.2 → 4.37.0-alpha.1

package/src/scripts/search/components/DatasetsRadioTabs.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useContext } from "react"
+import type { FC } from "react"
+import { SearchParamsCtx } from "../search-params-ctx"
+import { useCookies } from "react-cookie"
+import { getUnexpiredProfile } from "../../authentication/profile"
+import { useUser } from "../../queries/user"
+import SlidingRadioGroup from "../inputs/sliding-radio-group"
+
+export const DatasetsRadioTabs: FC = () => {
+  const [cookies] = useCookies()
+  const loggedOut = !getUnexpiredProfile(cookies)
+  const { user } = useUser()
+  const isAdmin = user?.admin
+  const { searchParams, setSearchParams } = useContext(SearchParamsCtx)
+  const {
+    datasetType_available,
+    datasetType_selected,
+    datasetStatus_available,
+    datasetStatus_selected,
+    searchAllDatasets,
+  } = searchParams
+
+  const updatedDatasetTypeAvailable = [...datasetType_available]
+  if (isAdmin) {
+    const adminDatasetValue = "Admin: All Datasets"
+    const adminDatasetLabel = "Admin" // Define the new label
+
+    // Check if an item with the 'Admin: All Datasets' value already exists
+    const alreadyHasAdminDataset = updatedDatasetTypeAvailable.some((item) =>
+      (typeof item === "object" ? item.value : item) === adminDatasetValue
+    )
+
+    if (!alreadyHasAdminDataset) {
+      // Push it as an object with both value and the desired label
+      updatedDatasetTypeAvailable.push({
+        value: adminDatasetValue,
+        label: adminDatasetLabel,
+      })
+    }
+  }
+
+  const setShowSelected = useCallback(
+    (newDatasetTypeSelected: string) => {
+      setSearchParams((prevState) => {
+        const newSearchAllDatasets =
+          newDatasetTypeSelected === "Admin: All Datasets"
+
+        return {
+          ...prevState,
+          datasetType_selected: newDatasetTypeSelected,
+          searchAllDatasets: newSearchAllDatasets,
+
+          datasetStatus_selected: newSearchAllDatasets
+            ? undefined
+            : newDatasetTypeSelected === "My Datasets"
+            ? prevState.datasetStatus_selected
+            : undefined,
+        }
+      })
+    },
+    [setSearchParams],
+  )
+
+  const setShowMyUploadsSelected = useCallback(
+    (newDatasetStatusSelected: string) => {
+      setSearchParams((prevState) => ({
+        ...prevState,
+        datasetStatus_selected: newDatasetStatusSelected,
+      }))
+    },
+    [setSearchParams],
+  )
+
+  if (loggedOut) {
+    return null
+  }
+
+  return (
+    <>
+      <SlidingRadioGroup
+        items={updatedDatasetTypeAvailable}
+        selected={datasetType_selected}
+        setSelected={setShowSelected}
+        groupName="show-datasets"
+        className={datasetType_selected === "Admin: All Datasets"
+          ? "AdminAllDatasets"
+          : datasetType_selected.replace(/\s/g, "")}
+        initialSelectedValueOverride={searchAllDatasets
+          ? "Admin: All Datasets"
+          : undefined}
+      />
+
+      {datasetType_selected === "My Datasets" && !searchAllDatasets && (
+        <SlidingRadioGroup
+          items={datasetStatus_available}
+          selected={datasetStatus_selected}
+          setSelected={setShowMyUploadsSelected}
+          groupName="dataset-status"
+        />
+      )}
+    </>
+  )
+}

package/src/scripts/{components/search-page → search/components}/FilterListItem.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { ModalityLabel } from "../formatting/modality-label"
+import { ModalityLabel } from "../../components/formatting/modality-label"
 
 type TextList = string[]
 type Text = string

package/src/scripts/{components/search-page → search/components}/FiltersBlock.tsx

@@ -3,7 +3,8 @@ import { Button } from "../../components/button/Button"
 import { FilterListItem } from "./FilterListItem"
 import { TermListItem } from "./TermListItem"
 import type { FacetSelectValueType } from "../../components/facets/FacetSelect"
-import "./filters-block.scss"
+import "../scss/filters-block.scss"
+import { modalityShortMapping } from "../../components/formatting/modality-label"
 
 export interface FiltersBlockProps {
   keywords: string[]
@@ -69,17 +70,13 @@ export const FiltersBlock = ({
   const subjectCountRangeIsNull =
     JSON.stringify(subjectCountRange) === JSON.stringify([null, null])
 
+  const labelText = modalityShortMapping(modality_selected)
+
   return (
     <div className="filters-block">
       <h2>
         {noFilters
-          ? (
-            <b>
-              Showing all available {modality_selected ? modality_selected : ""}
-              {" "}
-              datasets
-            </b>
-          )
+          ? <b>Showing all available {labelText ? labelText : ""} datasets</b>
           : (
             <>
               {loading

package/src/scripts/search/components/MetaListItemList.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import type { FC, ReactNode } from "react"
+
+interface MetaListItemListProps {
+  typeLabel: ReactNode
+  items: (string | ReactNode)[]
+}
+
+/**
+ * A reusable component for rendering a list of meta items in the search results details.
+ */
+export const MetaListItemList: FC<MetaListItemListProps> = (
+  { typeLabel, items },
+) => {
+  if (!items || items.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="result-summary-meta">
+      <label>{typeLabel}:</label>
+      <div>
+        {items.map((item, index) => (
+          <span className="list-item" key={index}>
+            {item}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/scripts/{components/search-page → search/components}/SearchPage.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { ModalityHeader } from "./ModalityHeader"
 import { CommunityHeader } from "./CommunityHeader"
-import "./search-page.scss"
+import "../scss/search-page.scss"
 
 export interface PortalContent {
   className?: string
@@ -15,6 +15,7 @@ export interface PortalContent {
 }
 
 export interface SearchPageProps {
+  hasDetailsOpen?: boolean
   portalContent?: PortalContent
   renderSearchFacets: () => React.ReactNode
   renderSearchResultsList: () => React.ReactNode
@@ -23,15 +24,18 @@ export interface SearchPageProps {
   renderSearchHeader: () => React.ReactNode
   renderLoading: () => React.ReactNode
   renderAggregateCounts: () => React.ReactNode
+  renderItemDetails: () => React.ReactNode
 }
 
 export const SearchPage = ({
+  hasDetailsOpen,
   portalContent,
   renderSearchFacets,
   renderSearchResultsList,
   renderSortBy,
   renderFilterBlock,
   renderSearchHeader,
+  renderItemDetails,
   renderLoading,
   renderAggregateCounts,
 }: SearchPageProps) => {
@@ -69,18 +73,14 @@ export const SearchPage = ({
             </>
           )
           : null}
-        <div className="container">
+        <div className="container-full">
           <div className="grid grid-nogutter">
-            <div className="col col-12 search-heading">
-              <h1>{renderSearchHeader()}</h1>
-            </div>
-
             <div className="col col-12 search-wrapper">
               <button
                 className="show-filters-btn"
                 onClick={() => setOpen(!isOpen)}
               >
-                Show Filters
+                Show Additional Filters
               </button>
               <div
                 className={isOpen
@@ -95,16 +95,23 @@ export const SearchPage = ({
                 </button>
                 {renderSearchFacets()}
               </div>
-              <div className="search-content">
+              <div
+                className={`search-content  ${
+                  hasDetailsOpen ? " details-opened" : ""
+                }`}
+              >
+                <div className="search-heading">{renderSearchHeader()}</div>
                 {renderLoading()}
                 <div className="grid grid-nogutter">
                   <div className="col col-12">{renderFilterBlock()}</div>
                   <div className="col col-12">
                     <div className="grid grid-nogutter">{renderSortBy()}</div>
                   </div>
+
                   {renderSearchResultsList()}
                 </div>
               </div>
+              {renderItemDetails()}
             </div>
           </div>
         </div>

package/src/scripts/search/components/SearchResultDetails.tsx

@@ -0,0 +1,167 @@
+import React, { useEffect, useRef } from "react"
+import type { FC, ReactNode } from "react"
+import bytes from "bytes"
+import parseISO from "date-fns/parseISO"
+import formatDistanceToNow from "date-fns/formatDistanceToNow"
+import { Link } from "react-router-dom"
+import type { SearchResultItemProps } from "./SearchResultItem"
+import { ModalityLabel } from "../../components/formatting/modality-label"
+import { MetaListItemList } from "./MetaListItemList"
+import "../scss/search-result-details.scss"
+
+interface SearchResultDetailsProps {
+  itemData: SearchResultItemProps["node"] | null
+  onClose: () => void
+}
+
+export const SearchResultDetails: FC<SearchResultDetailsProps> = (
+  { itemData, onClose },
+) => {
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (itemData && closeButtonRef.current) {
+      closeButtonRef.current.focus()
+    }
+  }, [itemData])
+
+  if (!itemData) {
+    return null
+  }
+
+  const formatDate = (dateString: string): string => {
+    if (!dateString) return "N/A"
+    const date = new Date(dateString)
+    return date.toISOString().split("T")[0]
+  }
+
+  const summary = itemData.latestSnapshot?.summary
+  const numSessions = summary?.sessions?.length > 0
+    ? summary.sessions.length
+    : 1
+  const numSubjects = summary?.subjects?.length > 0
+    ? summary.subjects.length
+    : 1
+
+  // Header for more details
+  const moreDetailsHeader = (
+    <h4>
+      <Link to={"/datasets/" + itemData?.id}>
+        {itemData.latestSnapshot?.description?.Name || itemData.id}
+      </Link>
+    </h4>
+  )
+
+  // Lists
+  const modalityList = summary?.modalities?.length
+    ? (
+      <div className="modality-list">
+        <MetaListItemList
+          typeLabel={
+            <>{summary?.modalities.length === 1 ? "Modality" : "Modalities"}</>
+          }
+          items={summary?.modalities.map((modality) => (
+            <ModalityLabel key={modality} modality={modality} />
+          ))}
+        />
+      </div>
+    )
+    : null
+
+  const taskList = summary?.tasks?.length
+    ? (
+      <div className="task-list">
+        <MetaListItemList typeLabel={<>Tasks</>} items={summary?.tasks} />
+      </div>
+    )
+    : null
+
+  const tracers = summary?.pet?.TracerName?.length
+    ? (
+      <div className="tracers-list">
+        <MetaListItemList
+          typeLabel={
+            <>
+              {summary?.pet?.TracerName.length === 1
+                ? "Radiotracer"
+                : "Radiotracers"}
+            </>
+          }
+          items={summary?.pet?.TracerName}
+        />
+      </div>
+    )
+    : null
+
+  // function for consistent meta item rendering
+  const renderMetaItem = (
+    label: string | ReactNode,
+    content: ReactNode,
+  ): JSX.Element => (
+    <div className="result-summary-meta">
+      <label>{label}:&nbsp;</label>
+      {content}
+    </div>
+  )
+
+  const sessions = renderMetaItem("Sessions", numSessions.toLocaleString())
+  const subjects = renderMetaItem("Participants", numSubjects.toLocaleString())
+  const size = renderMetaItem(
+    "Size",
+    bytes(itemData?.latestSnapshot?.size) || "unknown",
+  )
+  const files = renderMetaItem("Files", summary?.totalFiles?.toLocaleString())
+  const lastUpdatedDisplay = renderMetaItem(
+    "Last Updated",
+    <div>
+      {formatDate(
+        itemData.snapshots?.[itemData.snapshots.length - 1]?.created ||
+          itemData.created,
+      )}
+    </div>,
+  )
+  const accessionNumberDisplay = renderMetaItem(
+    "Openneuro Accession Number",
+    <Link to={"/datasets/" + itemData?.id}>
+      {itemData?.id}
+    </Link>,
+  )
+  const authors = renderMetaItem(
+    "Authors",
+    <div>{itemData.latestSnapshot?.description?.Authors}</div>,
+  )
+  const uploaderDisplay = renderMetaItem(
+    "Uploader by",
+    <div>
+      {itemData.uploader?.name} on {formatDate(itemData?.created)} -{" "}
+      {formatDistanceToNow(parseISO(itemData?.created))} ago
+    </div>,
+  )
+
+  return (
+    <div className="search-details">
+      <div className="search-details-scroll">
+        <button
+          className="close-details-button"
+          onClick={onClose}
+          aria-label="Close details"
+          ref={closeButtonRef}
+        >
+          &times;
+        </button>
+        {moreDetailsHeader}
+        {authors}
+        {modalityList}
+        {taskList}
+        {accessionNumberDisplay}
+        {tracers}
+        {sessions}
+        {subjects}
+        {size}
+        {files}
+        {uploaderDisplay}
+        {lastUpdatedDisplay}
+      </div>
+    </div>
+  )
+}