@openneuro/app 4.31.2 → 4.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.31.2",
+  "version": "4.32.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -16,11 +16,11 @@
   "dependencies": {
     "@apollo/client": "3.11.8",
     "@artsy/fresnel": "^1.3.1",
-    "@bids/validator": "npm:@jsr/bids__validator@^2.0.2",
+    "@bids/validator": "npm:@jsr/bids__validator@^2.0.3",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.45.1",
-    "@openneuro/components": "^4.31.2",
+    "@openneuro/components": "^4.32.0",
     "@sentry/react": "^8.25.0",
     "@tanstack/react-table": "^8.9.3",
     "buffer": "^6.0.3",
@@ -74,5 +74,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d2665a438f56c1b2400f33073a43f2e996c286d1"
+  "gitHead": "3dd549a9ec43bbbf00a295a35b30f43cb7c29ffd"
 }

package/src/@types/custom.d.ts

@@ -1,4 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
+// Allow .jpg imports
+declare module "*.jpg" {
+  const value: string
+  export = value
+}
 // Allow .png imports
 declare module "*.png" {
   const value: string

package/src/scripts/common/content/image-attribution.tsx

@@ -0,0 +1,72 @@
+import React from "react"
+import styled from "@emotion/styled"
+import { Link } from "react-router-dom"
+
+import nirs from "../../../../../openneuro-components/src/assets/nirs.jpg"
+import nih from "../../../../../openneuro-components/src/assets/nih_cube.jpg"
+
+/** Image attribution content. */
+export function Attribution(): React.ReactElement {
+  const AtributionBlock = styled.div`
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    img {
+      width: 30%;
+      max-width: 200px;
+      margin-right: 20px;
+      height: auto;
+    }
+    label {
+      font-weight: bold;
+    }
+      p:first-of-type{ margin-top:0}
+  `
+
+  return (
+    <>
+      <AtributionBlock>
+        <img src={nirs} alt="" />
+        <p>
+          <div>
+            <label>Used with permission:</label>{" "}
+            <a href="https://mne.tools/mne-nirs/stable/index.html">
+              MNE-NIRS
+            </a>
+          </div>
+          <div>
+            <label>Locations used: {" "}</label>
+            <Link to="/">
+              OpenNeuro
+            </Link>
+            {", "}
+            <Link to="/search/modality/nirs?query=%7B%22modality_selected%22%3A%22NIRS%22%7D">
+              NIRS Modality Search
+            </Link>
+          </div>
+        </p>
+      </AtributionBlock>
+      <AtributionBlock>
+        <img src={nih} alt="" />
+        <p>
+          <div>
+            <label>Used with permission:</label>{" "}
+            <a href="https://braininitiative.nih.gov/">
+              NIH BRAIN Initiative<sup>&reg;</sup>
+            </a>
+          </div>
+          <div>
+            <label>Locations used: {" "}</label>
+            <Link to="/">
+              OpenNeuro
+            </Link>
+            {", "}
+            <Link to="/search/nih?query=%7B%22brain_initiative%22%3A%22true%22%7D">
+              NIH BRAIN Initiative Portal
+            </Link>
+          </div>
+        </p>
+      </AtributionBlock>
+    </>
+  )
+}

package/src/scripts/datalad/dataset/dataset-query-fragments.js

@@ -131,8 +131,9 @@ export const DATASET_ISSUES = gql`
     id
     draft {
       id
-      issues { 
-        ${ISSUE_FIELDS}
+      issuesStatus {
+        errors
+        warnings
       }
       validation {
         errors
@@ -145,8 +146,9 @@ export const DATASET_ISSUES = gql`
 export const SNAPSHOT_ISSUES = gql`
   fragment SnapshotIssues on Snapshot {
     id
-    issues {
-      ${ISSUE_FIELDS}
+    issuesStatus {
+      errors
+      warnings
     }
     validation {
       errors

package/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap

@@ -159,23 +159,13 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                     role="switch"
                   >
                     <div>
-                      <h3
-                        class="metaheader"
-                      >
-                        BIDS Validation
-                      </h3>
-                      <span
-                        class="label text-warning pull-right"
-                      >
-                        1 Warning
-                      </span>
                       <span
-                        class="dataset-status ds-success"
+                        class="dataset-status ds-warning ds-validation-pending"
                       >
                         <i
-                          class="fa fa-check-circle"
+                          class="fa fa-circle-o-notch fa-spin"
                         />
-                         Valid
+                        Validation Pending
                       </span>
                     </div>
                   </div>

package/src/scripts/dataset/components/ValidationBlock.tsx

@@ -20,7 +20,10 @@ interface ValidationFragment {
 export interface ValidationBlockProps {
   datasetId: string
   version?: string
-  issues?: object
+  issuesStatus?: {
+    errors: number
+    warnings: number
+  }
   validation?: ValidationFragment
 }
 
@@ -32,13 +35,17 @@ export interface ValidationBlockProps {
 export const ValidationBlock: React.FC<ValidationBlockProps> = ({
   datasetId,
   version,
-  issues,
+  issuesStatus,
   validation,
 }) => {
-  if (issues) {
+  if (issuesStatus) {
     return (
       <div className="validation-accordion">
-        <LegacyValidation datasetId={datasetId} issues={issues} />
+        <LegacyValidation
+          datasetId={datasetId}
+          version={version}
+          issuesStatus={issuesStatus}
+        />
       </div>
     )
   } else {

package/src/scripts/dataset/components/__tests__/ValidationBlock.spec.tsx

@@ -7,10 +7,13 @@ vi.mock("../../../config.ts")
 
 describe("ValidationBlock component", () => {
   it("renders legacy validation if issues prop is present", () => {
-    const issues = [
-      {},
-    ]
-    render(<ValidationBlock datasetId="ds000031" issues={issues} />)
+    render(
+      <ValidationBlock
+        datasetId="ds000031"
+        issuesStatus={{ warnings: 3, errors: 0 }}
+        version="1.0.0"
+      />,
+    )
     expect(screen.getByText("BIDS Validation")).toBeInTheDocument()
   })
   it("renders schema validation if validation prop is present", () => {

package/src/scripts/dataset/draft-container.tsx

@@ -136,7 +136,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
                 <ValidationBlock
                   datasetId={dataset.id}
                   version={dataset.draft.head}
-                  issues={dataset.draft.issues}
+                  issuesStatus={dataset.draft.issuesStatus}
                   validation={dataset.draft.validation}
                 />
                 <CloneDropdown

package/src/scripts/dataset/snapshot-container.tsx

@@ -136,7 +136,7 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                 <ValidationBlock
                   datasetId={datasetId}
                   version={snapshot.tag}
-                  issues={snapshot.issues}
+                  issuesStatus={snapshot.issuesStatus}
                   validation={snapshot.validation}
                 />
                 <AnalyzeDropdown

package/src/scripts/pages/image-attribution.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import type { ReactElement } from "react"
+import { Attribution } from "../common/content/image-attribution"
+import Helmet from "react-helmet"
+import { frontPage } from "./front-page/front-page-content"
+import styled from "@emotion/styled"
+
+const ImageAttributionStyle = styled.div`
+  background: white;
+
+  .container {
+    max-width: 60em;
+  }
+`
+
+export function ImageAttribution(): ReactElement {
+  return (
+    <ImageAttributionStyle>
+      <Helmet>
+        <title>Image Attribution - {frontPage.pageTitle}</title>
+        <meta
+          name="description"
+          content={`Image Attribution of the ${frontPage.pageTitle} data archive`}
+        />
+      </Helmet>
+      <div className="container">
+        <h2>OpenNeuro Image Attribution</h2>
+        <Attribution />
+      </div>
+    </ImageAttributionStyle>
+  )
+}

package/src/scripts/routes.tsx

@@ -17,6 +17,7 @@ import FourOFourPage from "./errors/404page"
 import { ImportDataset } from "./pages/import-dataset"
 import { DatasetMetadata } from "./pages/metadata/dataset-metadata"
 import { TermsPage } from "./pages/terms"
+import { ImageAttribution } from "./pages/image-attribution"
 import { UserQuery } from "./users/user-query"
 import LoggedIn from "../scripts/authentication/logged-in"
 import LoggedOut from "../scripts/authentication/logged-out"
@@ -34,6 +35,7 @@ const AppRoutes: React.VoidFunctionComponent = () => (
     <Route path="/pet" element={<PETRedirect />} />
     <Route path="/cite" element={<Citation />} />
     <Route path="/terms" element={<TermsPage />} />
+    <Route path="/image-attribution" element={<ImageAttribution />} />
     <Route path="/import" element={<ImportDataset />} />
     <Route path="/metadata" element={<DatasetMetadata />} />
     <Route path="/public" element={<Navigate to="/search" replace />} />

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

@@ -8,6 +8,8 @@ describe("SearchContainer component", () => {
       const setContext = vi.fn()
       setDefaultSearch(
         "MRI",
+        "",
+        false,
         context,
         setContext,
         new URLSearchParams("/search"),
@@ -15,6 +17,8 @@ describe("SearchContainer component", () => {
       expect(setContext).not.toHaveBeenCalled()
       setDefaultSearch(
         "PET",
+        "",
+        false,
         context,
         setContext,
         new URLSearchParams("/search"),
@@ -31,6 +35,8 @@ describe("SearchContainer component", () => {
       })
       setDefaultSearch(
         "MRI",
+        "",
+        false,
         context,
         setContext,
         new URLSearchParams("mydatasets"),
@@ -47,6 +53,8 @@ describe("SearchContainer component", () => {
       })
       setDefaultSearch(
         "MRI",
+        "",
+        false,
         context,
         setContext,
         new URLSearchParams("bookmarks"),

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

@@ -1,4 +1,5 @@
 import React, { useContext } from "react"
+import * as Sentry from "@sentry/react"
 import type { FC } from "react"
 import { useNavigate, useParams } from "react-router-dom"
 import {
@@ -15,6 +16,8 @@ interface FiltersBlockContainerProps {
   loading: boolean
 }
 
+type FilterValue = string | number | boolean | string[] | number[]
+
 const FiltersBlockContainer: FC<FiltersBlockContainerProps> = ({
   numTotalResults,
   loading,
@@ -28,10 +31,25 @@ const FiltersBlockContainer: FC<FiltersBlockContainerProps> = ({
   const { path } = useParams()
   const globalSearchPath = "/search"
 
-  const removeFilter = (isModality: boolean) => (param, value): void => {
-    removeFilterItem(setSearchParams)(param, value)
-    if (isModality) navigate(globalSearchPath)
-  }
+  const removeFilter =
+    (isModality?: boolean) => (param: string, value: FilterValue): void => {
+      if (isModality && param === "modality_selected") {
+        removeFilterItem(setSearchParams)(param, value)
+        const queryParams = new URLSearchParams(location.search)
+        const query = queryParams.get("query")
+        if (query) {
+          try {
+            navigate(`${globalSearchPath}?${queryParams.toString()}`, {
+              replace: true,
+            })
+          } catch (error) {
+            Sentry.captureException(error)
+          }
+        }
+      } else {
+        removeFilterItem(setSearchParams)(param, value)
+      }
+    }
 
   const removeAllFilters = (): void => {
     // reset params to default values
@@ -39,8 +57,9 @@ const FiltersBlockContainer: FC<FiltersBlockContainerProps> = ({
       ...prevState,
       ...getSelectParams(initialSearchParams),
     }))
-    if (path !== globalSearchPath) navigate(globalSearchPath)
+    if (path !== globalSearchPath) navigate(globalSearchPath, { replace: true })
   }
+
   return (
     <FiltersBlock
       noFilters={noFilters}

package/src/scripts/search/initial-search-params.tsx

@@ -92,6 +92,12 @@ export const modality_available: ModalityOption[] = [
     portalPath: "/search/modality/meg",
     count: null,
   },
+  {
+    label: "NIRS",
+    value: "NIRS",
+    portalPath: "/search/modality/nirs",
+    count: null,
+  },
 ]
 
 export const flattenedModalities = modality_available.reduce(

package/src/scripts/search/inputs/__tests__/{nihselect.spec.tsx → initiative-select.spec.tsx}

@@ -2,7 +2,7 @@ import React from "react"
 import { fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { MemoryRouter, Route, Routes } from "react-router-dom"
 import { SearchParamsCtx } from "../../search-params-ctx"
-import NIHSelect from "../nih-select"
+import InitiativeSelect from "../initiative-select"
 
 const customRender = (
   ui,
@@ -24,13 +24,15 @@ const customRender = (
 
 describe("NIHSelect Component", () => {
   it("updates search params when NIH is selected and navigates to the NIH page", async () => {
-    customRender(<NIHSelect label="NIH Funding" />)
+    customRender(
+      <InitiativeSelect label="Initiative" />,
+    )
 
-    const nihOption = screen.getByText("NIH Funding")
+    const nihOption = screen.getByText("Initiative")
     fireEvent.click(nihOption)
 
     await waitFor(() => {
-      expect(screen.getByText("NIH Brain Initiative")).toBeInTheDocument()
+      expect(screen.getByText("Initiative")).toBeInTheDocument()
     })
   })
 })

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

@@ -1,7 +1,7 @@
 import KeywordInput from "./keyword-input"
 import AllDatasetsToggle from "./admin-allDatasets-toggle"
 import ModalitySelect from "./modality-select"
-import NIHSelect from "./nih-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"
@@ -29,9 +29,9 @@ export {
   DatasetTypeSelect,
   DateRadios,
   DiagnosisSelect,
+  InitiativeSelect,
   KeywordInput,
   ModalitySelect,
-  NIHSelect,
   ScannerManufacturers,
   ScannerManufacturersModelNames,
   SectionSelect,

package/src/scripts/search/inputs/{nih-select.tsx → initiative-select.tsx}

@@ -2,13 +2,14 @@ import React, { useContext, useEffect } from "react"
 import type { FC } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 import { SearchParamsCtx } from "../search-params-ctx"
+import { AccordionTab, AccordionWrap } from "@openneuro/components/accordion"
 import { SingleSelect } from "@openneuro/components/facets"
 
-interface NIHSelectProps {
-  label?: string
+interface InitiativeSelectProps {
+  label: string
 }
 
-const NIHSelect: FC<NIHSelectProps> = ({ label }) => {
+const InitiativeSelect: FC<InitiativeSelectProps> = ({ label }) => {
   const { searchParams, setSearchParams } = useContext(SearchParamsCtx)
   const navigate = useNavigate()
   const location = useLocation()
@@ -50,14 +51,25 @@ const NIHSelect: FC<NIHSelectProps> = ({ label }) => {
   }, [brain_initiative, location.search, navigate])
 
   return (
-    <SingleSelect
-      className="nih-facet facet-open"
-      label={label}
-      selected={brain_initiative === "true" ? "NIH" : ""}
-      setSelected={setBrainInitiative}
-      items={["NIH"]}
-    />
+    <>
+      <AccordionWrap className="modality-facet facet-accordion">
+        <AccordionTab
+          accordionStyle="plain"
+          label={label}
+          startOpen={false}
+          dropdown={false}
+        >
+          <SingleSelect
+            className="nih-facet facet-open"
+            selected={brain_initiative === "true" ? "NIH" : ""}
+            setSelected={setBrainInitiative}
+            items={["NIH"]}
+            label="NIH BRAIN Initiative"
+          />
+        </AccordionTab>
+      </AccordionWrap>
+    </>
   )
 }
 
-export default NIHSelect
+export default InitiativeSelect

package/src/scripts/search/inputs/show-datasets-radios.tsx

@@ -19,16 +19,23 @@ const ShowDatasetsRadios: FC = () => {
     datasetStatus_available,
     datasetStatus_selected,
   } = searchParams
-  const setShowSelected = (datasetType_selected) =>
+
+  const setShowSelected = (datasetType_selected) => {
     setSearchParams((prevState) => ({
       ...prevState,
       datasetType_selected,
+      datasetStatus_selected: datasetType_selected === "My Datasets"
+        ? prevState.datasetStatus_selected
+        : undefined,
     }))
-  const setShowMyUploadsSelected = (datasetStatus_selected) =>
+  }
+
+  const setShowMyUploadsSelected = (datasetStatus_selected) => {
     setSearchParams((prevState) => ({
       ...prevState,
       datasetStatus_selected,
     }))
+  }
 
   return loggedOut ? null : (
     <>
@@ -44,23 +51,21 @@ const ShowDatasetsRadios: FC = () => {
           setSelected={setShowSelected}
         />
       </div>
-      {datasetType_selected == "My Datasets"
-        ? (
-          <AccordionWrap className="facet-accordion">
-            <AccordionTab
-              accordionStyle="plain"
-              label="My Datasets Status"
-              startOpen={true}
-            >
-              <FacetSelect
-                selected={datasetStatus_selected}
-                setSelected={setShowMyUploadsSelected}
-                items={datasetStatus_available}
-              />
-            </AccordionTab>
-          </AccordionWrap>
-        )
-        : null}
+      {datasetType_selected === "My Datasets" && (
+        <AccordionWrap className="facet-accordion">
+          <AccordionTab
+            accordionStyle="plain"
+            label="My Datasets Status"
+            startOpen={true}
+          >
+            <FacetSelect
+              selected={datasetStatus_selected}
+              setSelected={setShowMyUploadsSelected}
+              items={datasetStatus_available}
+            />
+          </AccordionTab>
+        </AccordionWrap>
+      )}
     </>
   )
 }

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

@@ -20,9 +20,9 @@ import {
   DatasetTypeSelect,
   DateRadios,
   DiagnosisSelect,
+  InitiativeSelect,
   KeywordInput,
   ModalitySelect,
-  NIHSelect,
   ScannerManufacturers,
   ScannerManufacturersModelNames,
   SectionSelect,
@@ -55,6 +55,8 @@ export interface SearchContainerProps {
  */
 export const setDefaultSearch = (
   modality: string,
+  grant: string,
+  is_grant_portal: boolean,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   searchParams: Record<string, any>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -84,20 +86,31 @@ export const setDefaultSearch = (
     EEG: ["EEG"],
     iEEG: ["iEEG"],
     MEG: ["MEG"],
+    NIRS: ["NIRS"],
     NIH: ["NIH"],
   }
+
   if (
     modality &&
-    !modalitiesWithSecondaries[modality].includes(
+    !modalitiesWithSecondaries[modality]?.includes(
       searchParams.modality_selected,
     )
   ) {
-    setSearchParams(
-      (prevState: SearchParams): SearchParams => ({
-        ...prevState,
-        modality_selected: modality,
-      }),
-    )
+    setSearchParams((prevState) => ({
+      ...prevState,
+      modality_selected: modality,
+    }))
+  }
+
+  // Check for grant-related conditions
+  if (
+    is_grant_portal && grant === "nih" &&
+    searchParams.brain_initiative !== "true"
+  ) {
+    setSearchParams((prevState) => ({
+      ...prevState,
+      brain_initiative: "true",
+    }))
   }
 }
 
@@ -109,15 +122,26 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
   const { searchParams, setSearchParams } = useContext(SearchParamsCtx)
   const modality = portalContent?.modality || null
   const selected_grant = portalContent?.portalName || null
+  const is_grant_portal = portalContent?.portal || false
+  const grant = portalContent?.grant || null
 
   useEffect(() => {
     setDefaultSearch(
       modality,
+      grant,
+      is_grant_portal,
       searchParams,
       setSearchParams,
       new URLSearchParams(location.search),
     )
-  }, [modality, searchParams, setSearchParams, location.search])
+  }, [
+    modality,
+    grant,
+    is_grant_portal,
+    searchParams,
+    setSearchParams,
+    location.search,
+  ])
 
   const { loading, data, fetchMore, variables } = useSearchResults()
   const loadMore = loading ? () => {} : () => {
@@ -166,7 +190,6 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
         )}
         renderSearchFacets={() => (
           <>
-            <NIHSelect label={"Search NIH Brain Initiative Datasets"} />
             <NeurobagelSearch />
             <KeywordInput />
             <AdminUser>
@@ -176,6 +199,7 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
             {!portalContent
               ? <ModalitySelect portalStyles={true} label="Modalities" />
               : <ModalitySelect portalStyles={false} label="Choose Modality" />}
+            <InitiativeSelect label="Initiatives" />
             <DatasetTypeSelect />
             <AgeRangeInput />
             <SubjectCountRangeInput />

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

@@ -30,6 +30,10 @@ const SearchRoutes: FC = () => (
       path="/modality/pet"
       element={<SearchContainer portalContent={portalContent.pet} />}
     />
+    <Route
+      path="/modality/nirs"
+      element={<SearchContainer portalContent={portalContent.nirs} />}
+    />
     <Route
       path="/nih"
       element={<SearchContainer portalContent={portalGrantContent.nih} />}

package/src/scripts/validation-legacy/validation-legacy-query.ts

@@ -0,0 +1,26 @@
+import { gql, useQuery } from "@apollo/client"
+import { ISSUE_FIELDS } from "../datalad/dataset/dataset-query-fragments"
+
+export const LEGACY_VALIDATION_DATA_QUERY = gql`
+query ($datasetId: ID!, $version: String!) {
+  snapshot(datasetId: $datasetId, tag: $version) {
+    issues {
+      ${ISSUE_FIELDS}
+    }
+  }
+}
+`
+
+export const useLegacyValidationResults = (
+  datasetId: string,
+  version: string,
+) => {
+  const { loading, error, data } = useQuery(LEGACY_VALIDATION_DATA_QUERY, {
+    variables: { datasetId, version },
+  })
+  if (!loading && data) {
+    return { loading, error, issues: data.snapshot.issues }
+  } else {
+    return { loading, error, issues: [] }
+  }
+}

package/src/scripts/validation-legacy/{validation-results.jsx → validation-results.tsx}

@@ -1,29 +1,51 @@
 // dependencies -----------------------------------------------------------
 
 import React from "react"
-import PropTypes from "prop-types"
 import pluralize from "pluralize"
 import { AccordionTab, AccordionWrap } from "@openneuro/components/accordion"
-
 import Issues from "./validation-results.issues.jsx"
+import { useLegacyValidationResults } from "./validation-legacy-query.js"
+import { Loading } from "@openneuro/components/loading"
 
-// component setup --------------------------------------------------------
+function countFiles(issues) {
+  let numFiles = 0
+  for (const issue of issues) {
+    numFiles += Array.from(issue.files).length
+    if (issue.additionalFileCount) {
+      numFiles += issue.additionalFileCount
+    }
+  }
+  return numFiles
+}
 
-class ValidationResults extends React.Component {
-  // life cycle events ------------------------------------------------------
+interface ValidationResultsProp {
+  datasetId: string
+  version: string
+}
 
-  render() {
-    const errors = this.props.errors
-    const warnings = this.props.warnings
+export function ValidationResults(
+  { datasetId, version }: ValidationResultsProp,
+) {
+  const { loading, issues, error } = useLegacyValidationResults(
+    datasetId,
+    version,
+  )
 
-    if (errors === "Invalid") {
-      return false
-    }
+  if (loading || error) {
+    return (
+      <>
+        <Loading />
+        <span className="message">Loading validation results...</span>
+      </>
+    )
+  } else {
+    const warnings = issues.filter((issue) => issue.severity === "warning")
+    const errors = issues.filter((issue) => issue.severity === "error")
 
     // errors
     let errorsWrap
     if (errors.length > 0) {
-      const fileCount = this._countFiles(errors)
+      const fileCount = countFiles(errors)
       const errorHeader = (
         <span>
           view {errors.length} {pluralize("error", errors.length)} in{" "}
@@ -45,7 +67,7 @@ class ValidationResults extends React.Component {
     //warnings
     let warningWrap
     if (warnings && warnings.length > 0) {
-      const fileCount = this._countFiles(warnings)
+      const fileCount = countFiles(warnings)
       const warningHeader = (
         <span>
           view {warnings.length} {pluralize("warning", warnings.length)} in{" "}
@@ -72,29 +94,6 @@ class ValidationResults extends React.Component {
       </AccordionWrap>
     )
   }
-
-  // custom methods ---------------------------------------------------------
-
-  _countFiles(issues) {
-    let numFiles = 0
-    for (const issue of issues) {
-      numFiles += Array.from(issue.files).length
-      if (issue.additionalFileCount) {
-        numFiles += issue.additionalFileCount
-      }
-    }
-    return numFiles
-  }
-}
-
-ValidationResults.Props = {
-  errors: [],
-  warnings: [],
-}
-
-ValidationResults.propTypes = {
-  errors: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  warnings: PropTypes.array,
 }
 
 export default ValidationResults

package/src/scripts/validation-legacy/validation-status.jsx

@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import pluralize from "pluralize"
 import ValidationPanel from "./validation-panel.jsx"
-import Results from "./validation-results.jsx"
+import Results from "./validation-results"
 
 /**
  * These can't be React components due to legacy react-bootstrap
@@ -52,54 +52,68 @@ const Valid = () => (
   </div>
 )
 
-const Warnings = ({ errors, warnings }) => (
-  <ValidationPanel heading={warningHeader(warnings.length)}>
+const Warnings = ({ datasetId, version, issuesStatus }) => (
+  <ValidationPanel heading={warningHeader(issuesStatus.warnings)}>
     <div>
       <span className="message error fade-in">
         We found{" "}
         <strong>
-          {warnings.length + " " + pluralize("Warning", warnings.length)}
+          {issuesStatus.warnings + " " +
+            pluralize("Warning", issuesStatus.warnings)}
         </strong>{" "}
         in your dataset. You are not required to fix warnings, but doing so will
         make your dataset more BIDS compliant.
       </span>
     </div>
     <br />
-    <Results errors={errors} warnings={warnings} />
+    <Results datasetId={datasetId} version={version} />
   </ValidationPanel>
 )
 
 Warnings.propTypes = {
-  errors: PropTypes.array,
-  warnings: PropTypes.array,
+  issuesStatus: PropTypes.object,
+  datasetId: PropTypes.string,
+  version: PropTypes.string,
 }
 
-const Errors = ({ errors, warnings }) => (
-  <ValidationPanel heading={errorHeader(errors.length)}>
+const Errors = ({ datasetId, version, issuesStatus }) => (
+  <ValidationPanel heading={errorHeader(issuesStatus.errors)}>
     <span className="message error fade-in">
       Your dataset is no longer valid. You must fix the{" "}
-      <strong>{errors.length + " " + pluralize("Error", errors.length)}</strong>
-      {" "}
+      <strong>
+        {issuesStatus.errors + " " + pluralize("Error", issuesStatus.errors)}
+      </strong>{" "}
       to use all of the site features.
     </span>
     <br />
-    <Results errors={errors} warnings={warnings} />
+    <Results datasetId={datasetId} version={version} />
   </ValidationPanel>
 )
 
 Errors.propTypes = {
-  errors: PropTypes.array,
-  warnings: PropTypes.array,
+  issuesStatus: PropTypes.object,
+  datasetId: PropTypes.string,
+  version: PropTypes.string,
 }
 
-const ValidationStatus = ({ issues }) => {
-  if (issues) {
-    const warnings = issues.filter((issue) => issue.severity === "warning")
-    const errors = issues.filter((issue) => issue.severity === "error")
-    if (errors.length) {
-      return <Errors errors={errors} warnings={warnings} />
-    } else if (warnings.length) {
-      return <Warnings errors={errors} warnings={warnings} />
+const ValidationStatus = ({ issuesStatus, datasetId, version }) => {
+  if (issuesStatus) {
+    if (issuesStatus.errors > 0) {
+      return (
+        <Errors
+          issuesStatus={issuesStatus}
+          datasetId={datasetId}
+          version={version}
+        />
+      )
+    } else if (issuesStatus.warnings > 0) {
+      return (
+        <Warnings
+          issuesStatus={issuesStatus}
+          datasetId={datasetId}
+          version={version}
+        />
+      )
     } else {
       return <Valid />
     }

package/src/scripts/validation-legacy/validation.jsx

@@ -3,10 +3,14 @@ import PropTypes from "prop-types"
 import ValidationStatus from "./validation-status.jsx"
 import ErrorBoundary from "../errors/errorBoundary.jsx"
 
-const Validation = ({ issues }) => (
+const Validation = ({ issuesStatus, datasetId, version }) => (
   <>
     <ErrorBoundary subject={"error in dataset validation component"}>
-      <ValidationStatus issues={issues} />
+      <ValidationStatus
+        issuesStatus={issuesStatus}
+        datasetId={datasetId}
+        version={version}
+      />
     </ErrorBoundary>
   </>
 )