@openneuro/app 4.36.1 → 4.37.0-alpha.0

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

@@ -1,21 +1,17 @@
 import React from "react"
-import bytes from "bytes"
+import getYear from "date-fns/getYear"
 import parseISO from "date-fns/parseISO"
-import formatDistanceToNow from "date-fns/formatDistanceToNow"
 import { Link } from "react-router-dom"
 import { Tooltip } from "../../components/tooltip/Tooltip"
 import { Icon } from "../../components/icon/Icon"
 import { useCookies } from "react-cookie"
 import { getProfile } from "../../authentication/profile"
 import { useUser } from "../../queries/user"
-import "./search-result.scss"
+import "../scss/search-result.scss"
 import activityPulseIcon from "../../../assets/activity-icon.png"
-import { ModalityLabel } from "../../components/formatting/modality-label"
 import { hasEditPermissions } from "../../authentication/profile"
-/**
- * Return an equivalent to moment(date).format('L') without moment
- * @param {*} dateObject
- */
+import { ModalityHexagon } from "../../components/modality-cube/ModalityHexagon"
+
 export const formatDate = (dateObject) =>
   new Date(dateObject).toISOString().split("T")[0]
 
@@ -50,6 +46,7 @@ export interface SearchResultItemProps {
     latestSnapshot: {
       id: string
       size: number
+      readme: string
       summary: {
         pet: {
           BodyPart: string
@@ -58,6 +55,7 @@ export interface SearchResultItemProps {
           TracerName: string[]
           TracerRadionuclide: string
         }
+        primaryModality: string
         modalities: string[]
         sessions: []
         subjects: string[]
@@ -84,7 +82,9 @@ export interface SearchResultItemProps {
         warnings: number
       }
       description: {
+        Authors: string[]
         Name: string
+        DatasetDOI: string
       }
     }
     analytics: {
@@ -112,11 +112,15 @@ export interface SearchResultItemProps {
     ]
   }
   datasetTypeSelected?: string
+  onClick: (itemId: string, event: React.MouseEvent<HTMLButtonElement>) => void
+  isExpanded: boolean
 }
 
 export const SearchResultItem = ({
   node,
   datasetTypeSelected,
+  onClick,
+  isExpanded,
 }: SearchResultItemProps) => {
   const { user } = useUser()
   const [cookies] = useCookies()
@@ -125,96 +129,10 @@ export const SearchResultItem = ({
 
   const isAdmin = user?.admin
   const hasEdit = hasEditPermissions(node.permissions, profileSub) || isAdmin
-
-  const heading = node.latestSnapshot.description?.Name
-    ? node.latestSnapshot.description?.Name
-    : node.id
-  const summary = node.latestSnapshot?.summary
   const datasetId = node.id
-  const numSessions = summary?.sessions.length > 0 ? summary.sessions.length : 1
-  const numSubjects = summary?.subjects.length > 0 ? summary.subjects.length : 1
-  const accessionNumber = (
-    <span className="result-summary-meta">
-      <strong>Openneuro Accession Number:</strong>
-      <Link to={"/datasets/" + datasetId}>{node.id}</Link>
-    </span>
-  )
-  const sessions = (
-    <span className="result-summary-meta">
-      <strong>Sessions:</strong>
-      <span>{numSessions.toLocaleString()}</span>
-    </span>
-  )
-
-  const ages = (value) => {
-    if (value) {
-      const ages = value.filter((x) => x)
-      if (ages.length === 0) return "N/A"
-      else if (ages.length === 1) return ages[0]
-      else return `${Math.min(...ages)} - ${Math.max(...ages)}`
-    } else return "N/A"
-  }
 
-  const agesRange = (
-    <span className="result-summary-meta">
-      <strong>
-        {node?.metadata?.ages?.length === 1
-          ? "Participant's Age"
-          : "Participants' Ages"}
-        :{" "}
-      </strong>
-      <span>
-        {ages(summary?.subjectMetadata?.map((subject) => subject.age))}
-      </span>
-    </span>
-  )
-  const subjects = (
-    <span className="result-summary-meta">
-      <strong>Participants:</strong>
-      <span>{numSubjects.toLocaleString()}</span>
-    </span>
-  )
-  const size = (
-    <span className="result-summary-meta">
-      <strong>Size:</strong>
-      <span>{bytes(node?.latestSnapshot?.size) || "unknown"}</span>
-    </span>
-  )
-  const files = (
-    <span className="result-summary-meta">
-      <strong>Files:</strong>
-      <span>{summary?.totalFiles.toLocaleString()}</span>
-    </span>
-  )
+  const heading = node.latestSnapshot.description?.Name?.trim() || datasetId
 
-  const dateAdded = formatDate(node.created)
-  const dateAddedDifference = formatDistanceToNow(parseISO(node.created))
-  let lastUpdatedDate
-  if (node.snapshots.length) {
-    const dateUpdated = formatDate(
-      node.snapshots[node.snapshots.length - 1].created,
-    )
-    const dateUpdatedDifference = formatDistanceToNow(
-      parseISO(node.snapshots[node.snapshots.length - 1].created),
-    )
-
-    lastUpdatedDate = (
-      <>
-        <span className="updated-divider">|</span>
-        <div className="updated-date">
-          <span>Updated:</span>
-          {dateUpdated} - {dateUpdatedDifference} ago
-        </div>
-      </>
-    )
-  }
-
-  const uploader = (
-    <div className="uploader">
-      <span>Uploaded by:</span>
-      {node.uploader?.name} on {dateAdded} - {dateAddedDifference} ago
-    </div>
-  )
   const downloads = node.analytics.downloads
     ? node.analytics.downloads.toLocaleString() + " Downloads \n"
     : ""
@@ -292,33 +210,12 @@ export const SearchResultItem = ({
     </Tooltip>
   )
 
-  const _list = (type, items) => {
-    if (items && items.length > 0) {
-      return (
-        <>
-          <strong>{type}:</strong>
-          <div>
-            {items.map((item, index) => (
-              <span className="list-item" key={index}>
-                {item}
-              </span>
-            ))}
-          </div>
-        </>
-      )
-    } else {
-      return null
-    }
-  }
-
   let invalid = false
-  // Legacy issues still flagged
   if (node.latestSnapshot.issues) {
-    invalid = node.latestSnapshot.issues.some((issue) =>
-      issue.severity === "error"
+    invalid = node.latestSnapshot.issues.some(
+      (issue) => issue.severity === "error",
     )
   } else {
-    // Test if there's any schema validator errors
     invalid = node.latestSnapshot.validation?.errors > 0
   }
   const shared = !node.public && node.uploader?.id !== profileSub
@@ -346,74 +243,61 @@ export const SearchResultItem = ({
     </div>
   )
 
-  const modalityList = summary?.modalities.length
-    ? (
-      <div className="modality-list">
-        {_list(
-          <>{summary?.modalities.length === 1 ? "Modality" : "Modalities"}</>,
-          summary?.modalities.map((modality) => (
-            <ModalityLabel key={modality} modality={modality} />
-          )),
-        )}
-      </div>
-    )
-    : null
-  const taskList = summary?.tasks.length
-    ? <div className="task-list">{_list(<>Tasks</>, summary?.tasks)}</div>
-    : null
-
-  const tracers = summary?.pet?.TracerName?.length
-    ? (
-      <div className="tracers-list">
-        {_list(
-          <>
-            {summary?.pet?.TracerName.length === 1
-              ? "Radiotracer"
-              : "Radiotracers"}
-          </>,
-          summary?.pet?.TracerName,
-        )}
-      </div>
-    )
-    : null
+  const year = getYear(parseISO(node.created))
+  const authors = node.latestSnapshot.description?.Authors
+    ? node.latestSnapshot.description.Authors.join(" and ")
+    : "NO AUTHORS FOUND"
+  const datasetCite =
+    `${authors} (${year}). ${node.latestSnapshot.description.Name}. OpenNeuro. [Dataset] doi: ${node.latestSnapshot.description.DatasetDOI}`
+  const trimlength = 450
 
   return (
     <>
-      <div className="grid grid-nogutter search-result">
+      <div
+        className={`grid grid-nogutter search-result ${
+          isExpanded ? "expanded" : ""
+        }`}
+      >
         <div className="col col-9">
-          <h3>
-            <Link to={"/datasets/" + datasetId}>{heading}</Link>
-          </h3>
-          <div className="result-upload-info">
-            {uploader}
-            {lastUpdatedDate}
+          <div className="col col-12">
+            <h3>
+              <Link to={"/datasets/" + datasetId}>{heading}</Link>
+            </h3>
+            <p>
+              {node.latestSnapshot?.readme
+                ? (node.latestSnapshot.readme.length > trimlength
+                  ? `${node.latestSnapshot.readme.substring(0, trimlength)}...`
+                  : node.latestSnapshot.readme)
+                : ""}
+            </p>
+            <cite>{datasetCite}</cite>
           </div>
         </div>
 
-        <div className="col col-3 col-sm">
+        <div className="col col-3 grid">
+          <div className="col col-12 result-icon-wrap">
+            {datasetOwenerIcons}
+            {activityIcon}
+            <ModalityHexagon
+              primaryModality={node.latestSnapshot.summary?.primaryModality}
+            />
+          </div>
           {MyDatasetsPage && (
-            <div className="dataset-permissions-tag">
+            <div className="col col-12 dataset-permissions-tag text-right">
               <small>Access: {datasetPerms}</small>
             </div>
           )}
-          <div className="result-icon-wrap">
-            {datasetOwenerIcons}
-            {activityIcon}
+          <div className="col col-12 result-actions">
+            <button
+              className={`on-button on-button--small ${
+                isExpanded && "expanded"
+              }`}
+              onClick={(e) => onClick(node.id, e)}
+            >
+              {isExpanded ? "Hide Details" : "Show Details"}
+            </button>
           </div>
         </div>
-        <div className="col col-12 result-meta-body">
-          {modalityList}
-          {taskList}
-          {tracers}
-        </div>
-        <div className="result-meta-footer">
-          {accessionNumber}
-          {sessions}
-          {subjects}
-          {agesRange}
-          {size}
-          {files}
-        </div>
       </div>
     </>
   )

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

@@ -0,0 +1,45 @@
+import React from "react"
+import { SearchResultItem } from "./SearchResultItem"
+import "../scss/search-page.scss"
+import type { SearchResultItemProps } from "./SearchResultItem"
+
+export interface SearchResultsListProps {
+  items: { node: SearchResultItemProps["node"] }[]
+  datasetTypeSelected: string
+  clickedItemData: SearchResultItemProps["node"] | null
+  handleItemClick: (
+    itemId: string,
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => void
+}
+
+export const SearchResultsList = ({
+  items,
+  datasetTypeSelected,
+  clickedItemData,
+  handleItemClick,
+}: SearchResultsListProps) => {
+  return (
+    <>
+      <div
+        className={`search-results col col-12 ${clickedItemData ? "open" : ""}`}
+      >
+        {items.map((data) => {
+          if (data) {
+            const isActive = clickedItemData?.id === data.node.id
+            return (
+              <SearchResultItem
+                node={data.node}
+                key={data.node.id}
+                datasetTypeSelected={datasetTypeSelected}
+                onClick={handleItemClick}
+                isExpanded={isActive}
+              />
+            )
+          }
+          return null
+        })}
+      </div>
+    </>
+  )
+}

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

@@ -1,6 +1,6 @@
 import React from "react"
-import { Dropdown } from "../dropdown/Dropdown"
-import "./search-sort.scss"
+import { Dropdown } from "../../components/dropdown/Dropdown"
+import "../scss/search-sort.scss"
 
 export interface SearchSortProps {
   items: {

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

@@ -13,7 +13,7 @@ import {
   SearchParamsCtx,
   useCheckIfParamsAreSelected,
 } from "./search-params-ctx"
-import { FiltersBlock } from "../components/search-page/FiltersBlock"
+import { FiltersBlock } from "./components/FiltersBlock"
 import initialSearchParams from "./initial-search-params"
 
 interface FiltersBlockContainerProps {

package/src/scripts/search/inputs/index.ts

@@ -1,8 +1,6 @@
 import KeywordInput from "./keyword-input"
-import AllDatasetsToggle from "./admin-allDatasets-toggle"
 import ModalitySelect from "./modality-select"
 import InitiativeSelect from "./initiative-select"
-import ShowDatasetRadios from "./show-datasets-radios"
 import AgeRangeInput from "./age-range-input"
 import SubjectCountRangeInput from "./subject-count-range-input"
 import DatasetTypeSelect from "./dataset-type-select"
@@ -23,7 +21,6 @@ import SortBySelect from "./sort-by-select"
 
 export {
   AgeRangeInput,
-  AllDatasetsToggle,
   AuthorInput,
   BodyPartsInput,
   DatasetTypeSelect,
@@ -36,7 +33,6 @@ export {
   ScannerManufacturersModelNames,
   SectionSelect,
   SexRadios,
-  ShowDatasetRadios,
   SortBySelect,
   SpeciesSelect,
   StudyDomainInput,

package/src/scripts/search/inputs/sliding-radio-group.tsx

@@ -0,0 +1,127 @@
+import React, { useCallback, useEffect, useRef, useState } from "react"
+import type { FC } from "react"
+import "../scss/sliding-radio-group.scss"
+
+interface RadioItem {
+  value: string
+  label: string
+}
+
+interface SlidingRadioGroupProps {
+  items: (string | RadioItem)[]
+  selected: string | undefined
+  setSelected: (value: string) => void
+  groupName: string
+  className?: string
+  initialSelectedValueOverride?: string
+}
+
+const SlidingRadioGroup: FC<SlidingRadioGroupProps> = ({
+  items,
+  selected,
+  setSelected,
+  groupName,
+  className = "",
+  initialSelectedValueOverride,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const radioLabelRefs = useRef<{ [key: string]: HTMLLabelElement }>({})
+  const [sliderStyles, setSliderStyles] = useState({
+    left: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+  })
+
+  const calculateSliderPosition = useCallback((targetValue: string) => {
+    if (!containerRef.current || !radioLabelRefs.current[targetValue]) {
+      return { left: 0, width: 0, height: 0, top: 0 }
+    }
+
+    const targetLabel = radioLabelRefs.current[targetValue]
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const labelRect = targetLabel.getBoundingClientRect()
+
+    return {
+      left: labelRect.left - containerRect.left,
+      width: labelRect.width,
+      height: labelRect.height,
+      top: labelRect.top - containerRect.top,
+    }
+  }, [])
+
+  useEffect(() => {
+    const updateSlider = () => {
+      const valueToCalculate = initialSelectedValueOverride || selected
+
+      if (valueToCalculate) {
+        const newStyles = calculateSliderPosition(valueToCalculate)
+        setSliderStyles(newStyles)
+      } else {
+        // If nothing is selected, hide the slider
+        setSliderStyles({ left: 0, width: 0, height: 0, top: 0 })
+      }
+    }
+
+    const timeoutId = setTimeout(updateSlider, 50)
+    window.addEventListener("resize", updateSlider)
+
+    return () => {
+      clearTimeout(timeoutId)
+      window.removeEventListener("resize", updateSlider)
+    }
+  }, [selected, calculateSliderPosition, initialSelectedValueOverride])
+
+  const isSliderVisible = sliderStyles.width > 0 && sliderStyles.height > 0
+
+  return (
+    <div
+      className={`sliding-radio-group-root ${className} btn-group-wrapper facet-radio show-dataset-radios-container`}
+      ref={containerRef}
+    >
+      {/* The sliding highlight element */}
+      <div
+        className="sliding-highlight"
+        style={{
+          left: sliderStyles.left,
+          width: sliderStyles.width,
+          height: sliderStyles.height - 2,
+          top: sliderStyles.top,
+          opacity: isSliderVisible ? 1 : 0,
+        }}
+      />
+
+      <div className="show-dataset-radios-group" role="radiogroup">
+        {items.map((item) => {
+          const value = typeof item === "object" ? item.value : item
+          const label = typeof item === "object" ? item.label : item
+          const isChecked = selected === value
+
+          return (
+            <div className="dataset-filter-radio" key={value}>
+              <input
+                type="radio"
+                id={`${groupName}-${value.replace(/\s/g, "")}`}
+                name={groupName}
+                value={value}
+                checked={isChecked}
+                onChange={() => setSelected(value)}
+              />
+              <label
+                htmlFor={`${groupName}-${value.replace(/\s/g, "")}`}
+                ref={(el) => {
+                  if (el) radioLabelRefs.current[value] = el
+                }}
+                className={isChecked ? "is-active" : ""}
+              >
+                {label}
+              </label>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default SlidingRadioGroup

package/src/scripts/search/inputs/sort-by-select.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from "react"
 import type { FC } from "react"
 import { SearchParamsCtx } from "../search-params-ctx"
-import { SearchSort } from "../../components/search-page/SearchSort"
+import { SearchSort } from "../components/SearchSort"
 
 interface SortBySelectProps {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

package/src/scripts/{components/search-page → search/scss}/filters-block.scss

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