@openneuro/app 4.30.2 → 4.31.0

package/src/scripts/uploader/upload-issues.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import pluralize from "pluralize"
 import { Loading } from "@openneuro/components/loading"
-import { ValidationResults } from "../validation/validation-results"
+import { ValidationResultsDisplay } from "../validation/validation-results"
 import UploaderContext from "./uploader-context.js"
 import { validation } from "../workers/schema.js"
 import type { ValidationResult } from "@bids/validator/main"
@@ -106,7 +106,7 @@ class UploadValidator
             next={this.props.next}
             reset={this.props.reset}
           />
-          <ValidationResults
+          <ValidationResultsDisplay
             issues={this.state.issues}
           />
           <span className="bids-link">

package/src/scripts/users/__tests__/datasest-card.spec.tsx

@@ -0,0 +1,201 @@
+import React from "react"
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { DATASETS_QUERY, UserDatasetsView } from "../user-datasets-view"
+import { MockedProvider } from "@apollo/client/testing"
+import DatasetCard from "../dataset-card"
+
+// Mocked datasets
+const mockDatasets = [
+  {
+    node: {
+      id: "ds000001",
+      name: "The DBS-fMRI dataset",
+      created: "2025-01-22T19:55:49.997Z",
+      followers: [
+        { userId: "user1", datasetId: "ds000001" },
+        { userId: "user2", datasetId: "ds000001" },
+      ],
+      stars: [
+        { userId: "user1", datasetId: "ds000001" },
+      ],
+      latestSnapshot: {
+        id: "ds000001:1.0.0",
+        size: 6000,
+        created: "2025-01-22T19:55:49.997Z",
+        issues: [{ severity: "low" }],
+        description: {
+          Name: "DBS-FMRI",
+          Authors: ["John Doe"],
+          SeniorAuthor: "Dr. Smith",
+          DatasetType: "fMRI",
+        },
+      },
+    },
+  },
+  {
+    node: {
+      id: "ds000002",
+      name: "The DBS-fMRI dataset 2",
+      created: "2025-01-22T19:55:49.997Z",
+      followers: [
+        { userId: "user1", datasetId: "ds000002" },
+        { userId: "user2", datasetId: "ds000002" },
+      ],
+      stars: [
+        { userId: "user1", datasetId: "ds000002" },
+      ],
+      latestSnapshot: {
+        id: "ds000002:1.0.0",
+        size: 6000,
+        created: "2025-01-22T19:55:49.997Z",
+        issues: [{ severity: "medium" }],
+        description: {
+          Name: "DBS-FMRI 2",
+          Authors: ["Jane Doe"],
+          SeniorAuthor: "Dr. Johnson",
+          DatasetType: "fMRI",
+        },
+      },
+    },
+  },
+]
+
+describe("<UserDatasetsView />", () => {
+  const mockUser = {
+    id: "user1",
+    name: "John Doe",
+    location: "Somewhere",
+    institution: "Some University",
+    email: "john.doe@example.com",
+  }
+  const mockHasEdit = true
+
+  it("renders loading state", () => {
+    const mockLoadingQuery = {
+      request: {
+        query: DATASETS_QUERY,
+        variables: { first: 25 },
+      },
+      result: { data: { datasets: { edges: [] } } },
+    }
+
+    render(
+      <MockedProvider mocks={[mockLoadingQuery]} addTypename={false}>
+        <UserDatasetsView user={mockUser} hasEdit={mockHasEdit} />
+      </MockedProvider>,
+    )
+
+    expect(screen.getByText("Loading datasets...")).toBeInTheDocument()
+  })
+
+  it("renders error state", async () => {
+    const mockErrorQuery = {
+      request: {
+        query: DATASETS_QUERY,
+        variables: { first: 25 },
+      },
+      error: new Error("Failed to fetch datasets"),
+    }
+
+    render(
+      <MockedProvider mocks={[mockErrorQuery]} addTypename={false}>
+        <UserDatasetsView user={mockUser} hasEdit={mockHasEdit} />
+      </MockedProvider>,
+    )
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("Failed to fetch datasets: Failed to fetch datasets"),
+      ).toBeInTheDocument()
+    })
+  })
+
+  it("filters datasets by public filter", async () => {
+    const mockDatasetQuery = {
+      request: {
+        query: DATASETS_QUERY,
+        variables: { first: 25 },
+      },
+      result: { data: { datasets: { edges: mockDatasets } } },
+    }
+
+    render(
+      <MockedProvider mocks={[mockDatasetQuery]} addTypename={false}>
+        <UserDatasetsView user={mockUser} hasEdit={mockHasEdit} />
+      </MockedProvider>,
+    )
+
+    await waitFor(() => screen.getByTestId("public-filter"))
+    fireEvent.click(screen.getByTestId("public-filter"))
+    await waitFor(() => screen.getByText("Public"))
+    fireEvent.click(screen.getByText("Public"))
+
+    expect(screen.getByTestId("public-filter")).toHaveTextContent(
+      "Filter by: Public",
+    )
+  })
+
+  it("handles sorting datasets", async () => {
+    const mockDatasetQuery = {
+      request: {
+        query: DATASETS_QUERY,
+        variables: { first: 25 },
+      },
+      result: { data: { datasets: { edges: mockDatasets } } },
+    }
+
+    render(
+      <MockedProvider mocks={[mockDatasetQuery]} addTypename={false}>
+        <UserDatasetsView user={mockUser} hasEdit={mockHasEdit} />
+      </MockedProvider>,
+    )
+
+    await waitFor(() => screen.queryByText(mockDatasets[0].node.name))
+
+    fireEvent.click(screen.getByTestId("sort-order"))
+    await waitFor(() => screen.getByText("Name (A-Z)"))
+    fireEvent.click(screen.getByText("Name (Z-A)"))
+
+    expect(screen.getByTestId("sort-order")).toHaveTextContent("Name (Z-A)")
+  })
+})
+
+const mockDataset = {
+  id: "ds000001",
+  name: "Test Dataset",
+  created: "2025-01-01T00:00:00Z",
+  date: "2025-01-01T00:00:00Z",
+  public: true,
+  analytics: {
+    downloads: 12345,
+    views: 67890,
+  },
+  followers: [
+    { userId: "user1", datasetId: "ds000001" },
+    { userId: "user2", datasetId: "ds000001" },
+  ],
+  stars: [
+    { userId: "user1", datasetId: "ds000001" },
+  ],
+  latestSnapshot: {
+    id: "ds000001:1.0.0",
+    size: 1024 ** 3,
+    issues: [{ severity: "low" }],
+    created: "2025-01-01T00:00:00Z",
+    description: {
+      Authors: ["John Doe"],
+      SeniorAuthor: "Dr. Smith",
+      DatasetType: "fMRI",
+    },
+  },
+}
+
+describe("DatasetCard", () => {
+  it("should render dataset information correctly", () => {
+    render(<DatasetCard dataset={mockDataset} hasEdit={false} />)
+
+    expect(screen.getByText("Test Dataset")).toBeInTheDocument()
+    expect(screen.getByText("ds000001")).toBeInTheDocument()
+    expect(screen.getByText("1.00 GB")).toBeInTheDocument()
+  })
+})

package/src/scripts/users/__tests__/user-card.spec.tsx

@@ -1,10 +1,22 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import type { User } from "../user-card"
 import { UserCard } from "../user-card"
 
+interface User {
+  id: string
+  name: string
+  location: string
+  github?: string
+  institution: string
+  email: string
+  avatar: string
+  orcid: string
+  links: string[]
+}
+
 describe("UserCard Component", () => {
   const baseUser: User = {
+    id: "123",
     name: "John Doe",
     email: "johndoe@example.com",
     orcid: "0000-0001-2345-6789",
@@ -12,6 +24,7 @@ describe("UserCard Component", () => {
     institution: "University of California",
     links: ["https://example.com", "https://example.org"],
     github: "johndoe",
+    avatar: "https://example.com/avatar.jpg",
   }
 
   it("renders all user details when all data is provided", () => {
@@ -44,10 +57,14 @@ describe("UserCard Component", () => {
 
   it("renders without optional fields", () => {
     const minimalUser: User = {
+      id: "124",
       name: "Jane Doe",
       email: "janedoe@example.com",
       orcid: "0000-0002-3456-7890",
       links: [],
+      avatar: "https://example.com/avatar.jpg",
+      location: "",
+      institution: "",
     }
 
     render(<UserCard user={minimalUser} />)
@@ -70,8 +87,14 @@ describe("UserCard Component", () => {
 
   it("renders correctly when links are empty", () => {
     const userWithEmptyLinks: User = {
-      ...baseUser,
-      links: [],
+      id: "125",
+      name: "John Smith",
+      email: "johnsmith@example.com",
+      orcid: "0000-0003-4567-8901",
+      links: [], // Empty links
+      avatar: "https://example.com/avatar.jpg",
+      location: "New York, NY",
+      institution: "NYU",
     }
 
     render(<UserCard user={userWithEmptyLinks} />)
@@ -84,10 +107,14 @@ describe("UserCard Component", () => {
 
   it("renders correctly when location and institution are missing", () => {
     const userWithoutLocationAndInstitution: User = {
+      id: "126",
       name: "Emily Doe",
       email: "emilydoe@example.com",
       orcid: "0000-0003-4567-8901",
       links: ["https://example.com"],
+      avatar: "https://example.com/avatar.jpg",
+      location: "",
+      institution: "",
     }
 
     render(<UserCard user={userWithoutLocationAndInstitution} />)

package/src/scripts/users/__tests__/user-query.spec.tsx

@@ -4,6 +4,12 @@ import { MockedProvider } from "@apollo/client/testing"
 import { MemoryRouter, Route, Routes } from "react-router-dom"
 import { UserQuery } from "../user-query"
 import { GET_USER_BY_ORCID } from "../user-query"
+import * as ProfileUtils from "../../authentication/profile"
+
+Object.defineProperty(ProfileUtils, "getProfile", {
+  value: () => ({ sub: "1" }),
+  writable: true,
+})
 
 const validOrcid = "0009-0001-9689-7232"
 

package/src/scripts/users/__tests__/user-routes.spec.tsx

@@ -3,8 +3,8 @@ import { cleanup, render, screen } from "@testing-library/react"
 import { MemoryRouter } from "react-router-dom"
 import { MockedProvider } from "@apollo/client/testing"
 import { UserRoutes } from "../user-routes"
-import type { User } from "../user-routes"
-import { UPDATE_USER } from "../user-query"
+import type { User } from "../../types/user-types"
+import { DATASETS_QUERY } from "../user-datasets-view"
 
 const defaultUser: User = {
   id: "1",
@@ -21,24 +21,49 @@ const defaultUser: User = {
 const mocks = [
   {
     request: {
-      query: UPDATE_USER,
-      variables: {
-        id: "1",
-        name: "John Doe",
-        location: "Unknown",
-        github: "",
-        institution: "Unknown Institution",
-        email: "john.doe@example.com",
-        avatar: "https://dummyimage.com/200x200/000/fff",
-        orcid: "0000-0000-0000-0000",
-        links: [],
-      },
+      query: DATASETS_QUERY,
+      variables: { first: 25 },
     },
     result: {
       data: {
-        updateUser: {
-          id: "1",
-          name: "John Doe",
+        datasets: {
+          edges: [
+            {
+              node: {
+                id: "ds001012",
+                created: "2025-01-22T19:55:49.997Z",
+                name: "The DBS-fMRI dataset",
+                public: null,
+                analytics: {
+                  views: 9,
+                  downloads: 0,
+                },
+                stars: [],
+                followers: [
+                  {
+                    userId: "47e6a401-5edf-4022-801f-c05fffbf1d10",
+                    datasetId: "ds001012",
+                  },
+                ],
+                latestSnapshot: {
+                  id: "ds001012:1.0.0",
+                  size: 635,
+                  created: "2025-01-22T19:55:49.997Z",
+                  description: {
+                    Name: "The DBS-fMRI dataset",
+                    Authors: [
+                      "Jianxun Ren",
+                      " Changqing Jiang",
+                      "Wei Zhang",
+                      "Louisa Dahmani",
+                      "Lunhao Shen",
+                      "Feng Zhang",
+                    ],
+                  },
+                },
+              },
+            },
+          ],
         },
       },
     },
@@ -60,7 +85,6 @@ describe("UserRoutes Component", () => {
 
   it("renders UserDatasetsView for the default route", async () => {
     renderWithRouter(user, "/", true)
-    expect(screen.getByText(`${user.name}'s Datasets`)).toBeInTheDocument()
     const datasetsView = await screen.findByTestId("user-datasets-view")
     expect(datasetsView).toBeInTheDocument()
   })

package/src/scripts/users/components/user-dataset-filters.tsx

@@ -0,0 +1,157 @@
+import React from "react"
+import styles from "../scss/datasetcard.module.scss"
+
+interface UserDatasetFiltersProps {
+  publicFilter: string
+  setPublicFilter: React.Dispatch<React.SetStateAction<string>>
+  sortOrder: string
+  setSortOrder: React.Dispatch<React.SetStateAction<string>>
+  searchQuery: string
+  setSearchQuery: React.Dispatch<React.SetStateAction<string>>
+}
+
+export const UserDatasetFilters: React.FC<UserDatasetFiltersProps> = ({
+  publicFilter,
+  setPublicFilter,
+  sortOrder,
+  setSortOrder,
+  searchQuery,
+  setSearchQuery,
+}) => {
+  const [isFilterOpen, setIsFilterOpen] = React.useState(false)
+  const [isSortOpen, setIsSortOpen] = React.useState(false)
+
+  const currentSortBy = sortOrder === "name-asc"
+    ? "Name (A-Z)"
+    : sortOrder === "name-desc"
+    ? "Name (Z-A)"
+    : sortOrder === "date-newest"
+    ? "Added (Newest)"
+    : sortOrder === "date-oldest"
+    ? "Oldest"
+    : "Updated"
+
+  return (
+    <div className={styles.userDSfilters}>
+      {/* Search Input */}
+      <input
+        type="text"
+        placeholder="Keyword Search (Name or ID)"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className={styles.searchInput}
+      />
+
+      {/* Filter by Visibility */}
+      <div
+        data-testid="public-filter"
+        className={`${styles.filterDiv} ${isFilterOpen ? styles.open : ""}`}
+        onClick={() => setIsFilterOpen(!isFilterOpen)}
+      >
+        <span>
+          Filter by:{" "}
+          <b>
+            {publicFilter === "all"
+              ? "All"
+              : publicFilter.charAt(0).toUpperCase() + publicFilter.slice(1)}
+          </b>
+        </span>
+        <div className={styles.filterDropdown}>
+          {isFilterOpen && (
+            <ul>
+              <li
+                onClick={() => {
+                  setPublicFilter("all")
+                  setIsFilterOpen(false)
+                }}
+                className={publicFilter === "all" ? styles.active : ""}
+              >
+                All
+              </li>
+              <li
+                onClick={() => {
+                  setPublicFilter("public")
+                  setIsFilterOpen(false)
+                }}
+                className={publicFilter === "public" ? styles.active : ""}
+              >
+                Public
+              </li>
+              <li
+                onClick={() => {
+                  setPublicFilter("private")
+                  setIsFilterOpen(false)
+                }}
+                className={publicFilter === "private" ? styles.active : ""}
+              >
+                Private
+              </li>
+            </ul>
+          )}
+        </div>
+      </div>
+
+      {/* Sort Options */}
+      <div
+        data-testid="sort-order"
+        className={`${styles.sortDiv} ${isSortOpen ? styles.open : ""}`}
+        onClick={() => setIsSortOpen(!isSortOpen)}
+      >
+        <span>
+          Sort by: <b>{currentSortBy}</b>
+        </span>
+        <div className={styles.sortDropdown}>
+          {isSortOpen && (
+            <ul>
+              <li
+                onClick={() => {
+                  setSortOrder("name-asc")
+                  setIsSortOpen(false)
+                }}
+                className={sortOrder === "name-asc" ? styles.active : ""}
+              >
+                Name (A-Z)
+              </li>
+              <li
+                onClick={() => {
+                  setSortOrder("name-desc")
+                  setIsSortOpen(false)
+                }}
+                className={sortOrder === "name-desc" ? styles.active : ""}
+              >
+                Name (Z-A)
+              </li>
+              <li
+                onClick={() => {
+                  setSortOrder("date-newest")
+                  setIsSortOpen(false)
+                }}
+                className={sortOrder === "date-newest" ? styles.active : ""}
+              >
+                Added
+              </li>
+              <li
+                onClick={() => {
+                  setSortOrder("date-oldest")
+                  setIsSortOpen(false)
+                }}
+                className={sortOrder === "date-oldest" ? styles.active : ""}
+              >
+                Oldest
+              </li>
+              <li
+                onClick={() => {
+                  setSortOrder("date-updated")
+                  setIsSortOpen(false)
+                }}
+                className={sortOrder === "date-updated" ? styles.active : ""}
+              >
+                Updated
+              </li>
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/scripts/users/dataset-card.tsx

@@ -0,0 +1,121 @@
+import React from "react"
+import { formatDistanceToNow, parseISO } from "date-fns"
+import activityPulseIcon from "../../assets/activity-icon.png"
+import { Tooltip } from "@openneuro/components/tooltip"
+import { Icon } from "@openneuro/components/icon"
+import styles from "./scss/datasetcard.module.scss"
+import type { DatasetCardProps } from "../types/user-types"
+
+export const DatasetCard: React.FC<DatasetCardProps> = (
+  { dataset, hasEdit },
+) => {
+  // Check visibility conditions
+  if (!dataset.public && !hasEdit) {
+    return null
+  }
+
+  const dateAdded = new Date(dataset.created).toLocaleDateString()
+
+  // Check if the created date is valid before formatting
+  const parsedCreatedDate = parseISO(dataset.created)
+  const dateAddedDifference = isNaN(parsedCreatedDate.getTime())
+    ? "Invalid date"
+    : formatDistanceToNow(parsedCreatedDate)
+
+  // Check if dataset.analytics exists before accessing its properties
+  const downloads = dataset.analytics?.downloads
+    ? `${dataset.analytics.downloads.toLocaleString()} Downloads \n`
+    : ""
+  const views = dataset.analytics?.views
+    ? `${dataset.analytics.views.toLocaleString()} Views \n`
+    : ""
+
+  // Check if dataset.followers is an array and has length
+  const following = Array.isArray(dataset.followers) && dataset.followers.length
+    ? `${dataset.followers.length.toLocaleString()} Follower \n`
+    : ""
+
+  // Check if dataset.stars is an array and has length
+  const stars = Array.isArray(dataset.stars) && dataset.stars.length
+    ? `${dataset.stars.length.toLocaleString()} Bookmarked`
+    : ""
+
+  const activityTooltip = downloads + views + following + stars
+
+  const activityIcon = (
+    <Tooltip
+      tooltip={activityTooltip}
+      flow="up"
+      className="result-icon result-activity-icon"
+    >
+      <Icon
+        imgSrc={activityPulseIcon}
+        iconSize="22px"
+        label="activity"
+        iconOnly={true}
+      />
+    </Tooltip>
+  )
+
+  const publicIcon = dataset.public && (
+    <Tooltip
+      tooltip="Visible to all viewers"
+      flow="up"
+      className="result-icon result-public-icon"
+    >
+      <Icon
+        icon="fas fa-globe"
+        color="rgb(116,181,105)"
+        iconSize="16px"
+        label="Public"
+        iconOnly={true}
+      />
+    </Tooltip>
+  )
+
+  const sizeInBytes = dataset.latestSnapshot?.size
+  let datasetSize = "Unknown size"
+
+  if (sizeInBytes) {
+    if (sizeInBytes >= 1024 ** 3) {
+      datasetSize = `${(sizeInBytes / (1024 ** 3)).toFixed(2)} GB`
+    } else if (sizeInBytes >= 1024 ** 2) {
+      datasetSize = `${(sizeInBytes / (1024 ** 2)).toFixed(2)} MB`
+    } else if (sizeInBytes >= 1024) {
+      datasetSize = `${(sizeInBytes / 1024).toFixed(2)} KB`
+    } else {
+      datasetSize = `${sizeInBytes} bytes`
+    }
+  }
+
+  return (
+    <div
+      className={styles.userDsCard}
+      key={dataset.id}
+      data-testid={`user-ds-${dataset.id}`}
+    >
+      <h4>
+        <a href={`/datasets/${dataset.id}`}>{dataset.name}</a>
+      </h4>
+      <div className={styles.userDsFooter}>
+        <div className={styles.userMetawrap}>
+          <span>
+            Added: <b>{dateAdded}</b> ({dateAddedDifference} ago)
+          </span>
+          <span>
+            OpenNeuro Accession Number: <b>{dataset.id}</b>
+          </span>
+          <span>
+            Dataset Size: <b>{datasetSize}</b>
+          </span>
+        </div>
+        <div className={styles.userIconwrap}>
+          {activityIcon}
+          {publicIcon && <div className="owner-icon-wrap">{publicIcon}</div>}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DatasetCard