@openneuro/app 4.33.3 → 4.34.0-alpha.0

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

@@ -0,0 +1,417 @@
+import React 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 { Tooltip } from "../../components/tooltip/Tooltip"
+import { Icon } from "../../components/icon/Icon"
+
+import "./search-result.scss"
+import activityPulseIcon from "../../../assets/activity-icon.png"
+import { ModalityLabel } from "../../components/formatting/modality-label"
+
+/**
+ * Return an equivalent to moment(date).format('L') without moment
+ * @param {*} dateObject
+ */
+export const formatDate = (dateObject) =>
+  new Date(dateObject).toISOString().split("T")[0]
+
+export interface SearchResultItemProps {
+  node: {
+    id: string
+    created: string
+    uploader: {
+      id: string
+      name: string
+    }
+    public: boolean
+    permissions: {
+      id: string
+      userPermissions: [
+        {
+          userId: string
+          level: string
+          access: string
+          user: {
+            id: string
+            name: string
+            email: string
+            provider: string
+          }
+        },
+      ]
+    }
+    metadata: {
+      ages: number[]
+    }
+    latestSnapshot: {
+      id: string
+      size: number
+      summary: {
+        pet: {
+          BodyPart: string
+          ScannerManufacturer: string
+          ScannerManufacturersModelName: string
+          TracerName: string[]
+          TracerRadionuclide: string
+        }
+        modalities: string[]
+        sessions: []
+        subjects: string[]
+        subjectMetadata: [
+          {
+            participantId: string
+            age: [{ age?: number }]
+            sex: string
+            group: null
+          },
+        ]
+        tasks: string[]
+        size: number
+        totalFiles: number
+        dataProcessed: boolean
+      }
+      issues: [
+        {
+          severity: string
+        },
+      ]
+      validation: {
+        errors: number
+        warnings: number
+      }
+      description: {
+        Name: string
+      }
+    }
+    analytics: {
+      views: number
+      downloads: number
+    }
+    stars: [
+      {
+        userId: string
+        datasetId: string
+      },
+    ]
+    followers: [
+      {
+        userId: string
+        datasetId: string
+      },
+    ]
+    snapshots: [
+      {
+        id: string
+        created: string
+        tag: string
+      },
+    ]
+  }
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  profile: Record<string, any> // TODO - Use the actual user type here
+  datasetTypeSelected?: string
+  hasEditPermissions: (permissions: object, userId: string) => boolean
+}
+
+export const SearchResultItem = ({
+  node,
+  profile,
+  datasetTypeSelected,
+  hasEditPermissions,
+}: SearchResultItemProps) => {
+  const isAdmin = profile?.admin
+  const hasEdit = hasEditPermissions(node.permissions, profile?.sub) || isAdmin
+
+  const heading = node.latestSnapshot.description?.Name
+  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>
+      <span>{node.id}</span>
+    </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 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"
+    : ""
+  const views = node.analytics.views
+    ? node.analytics.views.toLocaleString() + " Views \n"
+    : ""
+  const following = node.followers.length
+    ? node.followers.length.toLocaleString() + " Follower \n"
+    : ""
+  const stars = node.stars.length
+    ? node.stars.length.toLocaleString() + " Bookmarked"
+    : ""
+
+  const activtyTooltip = downloads + views + following + stars
+
+  const activityIcon = (
+    <Tooltip
+      tooltip={activtyTooltip}
+      flow="up"
+      className="result-icon result-activity-icon"
+    >
+      <Icon
+        imgSrc={activityPulseIcon}
+        iconSize="22px"
+        label="activity"
+        iconOnly={true}
+      />
+    </Tooltip>
+  )
+
+  const sharedWithIcon = (
+    <Tooltip
+      tooltip="Shared with me"
+      flow="up"
+      className="result-icon result-shared-icon"
+    >
+      <Icon
+        icon="fas fa-user"
+        color="rgb(119,191,217)"
+        iconSize="16px"
+        label="Shared With"
+        iconOnly={true}
+      />
+    </Tooltip>
+  )
+  const publicIcon = (
+    <Tooltip
+      tooltip="Visible to all viewers"
+      flow="up"
+      className="result-icon result-publlic-icon"
+    >
+      <Icon
+        icon="fas fa-globe"
+        color="rgb(116,181,105)"
+        iconSize="16px"
+        label="Public"
+        iconOnly={true}
+      />
+    </Tooltip>
+  )
+
+  const errorsIcon = hasEdit && (
+    <Tooltip
+      tooltip="Invalid"
+      flow="up"
+      className="result-icon result-errors-icon"
+    >
+      <Icon
+        icon="fas fa-exclamation-circle"
+        color="rgb(202,97,86)"
+        iconSize="16px"
+        label="Invalid"
+        iconOnly={true}
+      />
+    </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"
+    )
+  } else {
+    // Test if there's any schema validator errors
+    invalid = node.latestSnapshot.validation?.errors > 0
+  }
+  const shared = !node.public && node.uploader.id !== profile.sub
+
+  const MyDatasetsPage = datasetTypeSelected === "My Datasets"
+  const datasetPerms = node.permissions.userPermissions.map((item) => {
+    if (item.user.id === profile?.sub && item.access !== null) {
+      if (item.access === "ro") {
+        return "Read Only"
+      } else if (item.access === "rw") {
+        return "Edit"
+      } else {
+        return "Admin"
+      }
+    } else {
+      return null
+    }
+  })
+
+  const datasetOwenerIcons = (
+    <div className="owner-icon-wrap">
+      {node.public ? publicIcon : null}
+      {shared ? sharedWithIcon : null}
+      {invalid ? errorsIcon : null}
+    </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
+
+  return (
+    <>
+      <div className="grid grid-nogutter search-result">
+        <div className="col col-9">
+          <h3>
+            <Link to={"/datasets/" + datasetId}>{heading}</Link>
+          </h3>
+          <div className="result-upload-info">
+            {uploader}
+            {lastUpdatedDate}
+          </div>
+        </div>
+
+        <div className="col col-3 col-sm">
+          {MyDatasetsPage && (
+            <div className="dataset-permissions-tag">
+              <small>Access: {datasetPerms}</small>
+            </div>
+          )}
+          <div className="result-icon-wrap">
+            {datasetOwenerIcons}
+            {activityIcon}
+          </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/components/search-page/SearchResultsList.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+
+import { SearchResultItem } from "./SearchResultItem"
+
+import "./search-page.scss"
+
+// TODO - unify this type with the one in the app package
+export interface OpenNeuroTokenProfile {
+  sub: string
+  email: string
+  provider: string
+  name: string
+  admin: boolean
+  iat: number
+  exp: number
+}
+
+export interface SearchResultsListProps {
+  items
+  profile?: OpenNeuroTokenProfile
+  datasetTypeSelected: string
+  hasEditPermissions: (permissions: object, userId: string) => boolean
+}
+
+export const SearchResultsList = ({
+  items,
+  profile,
+  datasetTypeSelected,
+  hasEditPermissions,
+}: SearchResultsListProps) => {
+  return (
+    <div className="search-results">
+      {items.map((data) => {
+        if (data) {
+          return (
+            <SearchResultItem
+              node={data.node}
+              key={data.node.id}
+              profile={profile}
+              hasEditPermissions={hasEditPermissions}
+              datasetTypeSelected={datasetTypeSelected}
+            />
+          )
+        }
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,52 @@
+import React from "react"
+import { Dropdown } from "../dropdown/Dropdown"
+import "./search-sort.scss"
+
+export interface SearchSortProps {
+  items: {
+    label: string
+    value: string
+  }[]
+
+  selected: {
+    label: string
+    value: string
+  }
+  setSelected: (selected: { label: string; value: string }) => void
+}
+
+export const SearchSort = ({
+  items,
+  selected,
+  setSelected,
+}: SearchSortProps) => {
+  return (
+    <div className="col search-sort">
+      <Dropdown
+        label={
+          <div className="search-sort-list-label">
+            <b>SORT BY:</b> {selected.label}
+            <i className="fas fa-exchange-alt fa-rotate-90" />
+          </div>
+        }
+        children={
+          <div className="search-sort-dropdown-list">
+            <ul>
+              {items.map((item, index) => (
+                <li
+                  key={index}
+                  onClick={() => setSelected(item)}
+                >
+                  {selected.value === item.value && (
+                    <i className="fas fa-check" />
+                  )}
+                  <span className="label">{item.label}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        }
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,9 @@
+import React from "react"
+import { SearchSort } from "./SearchSort"
+
+export const SearchSortContainerExample = ({ items }) => {
+  const [selected, setSelected] = React.useState(items[0])
+  return (
+    <SearchSort items={items} selected={selected} setSelected={setSelected} />
+  )
+}

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

@@ -0,0 +1,41 @@
+import React from "react"
+
+type Item = {
+  param: string
+  values: string[]
+}
+
+export interface TermListItemProps {
+  item: Item
+  type?: string
+  removeFilterItem?(param, value): void
+}
+export const TermListItem = ({
+  item,
+  type,
+  removeFilterItem = () => {},
+}: TermListItemProps) => {
+  if (item.values.length === 0) {
+    return null
+  } else {
+    return (
+      <>
+        <li className="search-term-list">
+          <strong className="terms-heading">{type}:</strong>
+          <ul>
+            {item.values.map((term, index) => (
+              <li key={index}>
+                <span>
+                  {term}
+                  <span onClick={() => removeFilterItem(item.param, term)}>
+                    &times;
+                  </span>
+                </span>
+              </li>
+            ))}
+          </ul>
+        </li>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,17 @@
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { NeurobagelSearch } from "../NeurobagelSearch"
+
+describe("NeurobagelSearch component", () => {
+  it("? toggle can be clicked", async () => {
+    render(<NeurobagelSearch />)
+    await fireEvent.click(await screen.getByRole("switch"))
+    expect(await screen.findByRole("switch")).toHaveClass("open")
+    expect(
+      screen.getByText(
+        "Neurobagel is a collection of tools for harmonizing phenotypic and imaging data descriptions",
+        { exact: false },
+      ),
+    ).toBeVisible()
+  })
+})

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

@@ -0,0 +1,99 @@
+@import '../scss/variables';
+
+.filters-block {
+  position: relative;
+  border-bottom: 1px solid $newspaper;
+  margin-bottom: 10px;
+  h2 {
+    margin: 0 0 20px;
+    display: flex;
+    align-items: flex-end;
+    line-height: 1;
+    font-weight: 400;
+    font-size: 18px;
+    @media (max-width: 450px) {
+      flex-wrap: wrap;
+    }
+    span {
+      color: #000;
+      font-weight: 700;
+      margin: 0 5px;
+    }
+    .on-button {
+      display: block;
+      width: 65px;
+      margin-left: auto;
+      text-transform: uppercase;
+      border: 0;
+      border-radius: 0;
+      padding: 0;
+      background: none;
+      &:hover {
+        color: #000;
+      }
+      @media (max-width: 450px) {
+        min-width: 100%;
+        margin-top: 20px;
+        text-align: left;
+      }
+    }
+  }
+  .active-filters {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    li {
+      margin-right: 30px;
+      margin-bottom: 15px;
+      font-size: 13px;
+      line-height: 1.7em;
+      &:last-child {
+        margin-right: 0;
+      }
+      strong {
+        margin-right: 10px;
+        text-transform: uppercase;
+        color: #666;
+      }
+      > span {
+        display: flex;
+        padding: 6px 10px;
+        color: #fff;
+        border-radius: $border-radius-default;
+        background-color: $chiclet-color;
+        transition: background-color 0.3s;
+        justify-content: center;
+        cursor: pointer;
+        &:hover {
+          background-color: darken($chiclet-color, 10%);
+        }
+        span {
+          color: #fff;
+          font-size: 22px;
+          margin-left: 8px;
+          margin-top: -1px;
+        }
+      }
+      &.search-term-list {
+        margin-bottom: 0;
+        margin-right: 30px;
+        ul li {
+          margin-right: 10px;
+        }
+      }
+      ul {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        li {
+        }
+      }
+    }
+  }
+}