@openneuro/app 4.30.2 → 4.31.0

package/src/scripts/validation/validation-results.tsx

@@ -2,8 +2,10 @@ import React from "react"
 import { AccordionTab, AccordionWrap } from "@openneuro/components/accordion"
 import { Issues } from "./validation-issues"
 import { RadioGroup } from "@openneuro/components/radio"
-import type { DatasetIssues } from "@bids/validator/issues"
+import { Loading } from "@openneuro/components/loading"
 import styled from "@emotion/styled"
+import type { DatasetIssues } from "@bids/validator/issues"
+import { useValidationResults } from "./validation-results-query"
 
 const RadioSpan = styled.span`
   display: flex;
@@ -18,16 +20,18 @@ const RadioSpan = styled.span`
 `
 
 interface ValidationResultsProps {
-  issues: DatasetIssues
+  datasetId: string
+  version: string
 }
 
 type ValidationGroupBy = "code" | "location"
 
-/**
- * Display ValidationResults with collapsing panels
- */
-export function ValidationResults(
-  { issues }: ValidationResultsProps,
+interface ValidationResultsDisplayProps {
+  issues: DatasetIssues
+}
+
+export function ValidationResultsDisplay(
+  { issues }: ValidationResultsDisplayProps,
 ) {
   const [groupBy, setGroupBy] = React.useState<ValidationGroupBy>("code")
   const groupedIssues = issues.groupBy("severity")
@@ -93,4 +97,24 @@ export function ValidationResults(
   )
 }
 
+/**
+ * Display ValidationResults with collapsing panels
+ */
+export function ValidationResults(
+  { datasetId, version }: ValidationResultsProps,
+) {
+  const { issues, loading } = useValidationResults(datasetId, version)
+
+  if (loading) {
+    return (
+      <>
+        <Loading />
+        <span className="message">Loading validation results...</span>
+      </>
+    )
+  } else {
+    return <ValidationResultsDisplay issues={issues} />
+  }
+}
+
 export default ValidationResults

package/src/scripts/validation/validation.tsx

@@ -2,12 +2,6 @@ import React from "react"
 import pluralize from "pluralize"
 import { ValidationPanel } from "./validation-panel"
 import Results from "./validation-results"
-import type { DatasetIssues } from "@bids/validator/issues"
-
-/**
- * These can't be React components due to legacy react-bootstrap
- * validHeader, warningHeader, errorHeader
- */
 
 const validHeader = () => (
   <div className="super-valid">
@@ -53,79 +47,94 @@ const Valid = () => (
 )
 
 interface WarningsProps {
-  issues: DatasetIssues
-  warnings: DatasetIssues
+  datasetId: string
+  version: string
+  warnings: number
 }
 
-const Warnings = ({ issues, warnings }: WarningsProps) => (
-  <ValidationPanel heading={warningHeader(warnings.size)}>
+const Warnings = ({ datasetId, version, warnings }: WarningsProps) => (
+  <ValidationPanel heading={warningHeader(warnings)}>
     <div>
       <span className="message error fade-in">
         We found{" "}
         <strong>
-          {warnings.size + " " + pluralize("Warning", warnings.size)}
+          {warnings + " " + pluralize("warning", 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 issues={issues} />
+    <Results datasetId={datasetId} version={version} />
   </ValidationPanel>
 )
 
 interface ErrorsProps {
-  issues: DatasetIssues
-  errors: DatasetIssues
-  warnings: DatasetIssues
+  datasetId: string
+  version: string
+  errors: number
+  warnings: number
 }
 
-const Errors = ({ issues, errors }: ErrorsProps) => (
-  <ValidationPanel heading={errorHeader(errors.size)}>
+const Errors = ({ datasetId, version, errors }: ErrorsProps) => (
+  <ValidationPanel heading={errorHeader(errors)}>
     <span className="message error fade-in">
       Your dataset is no longer valid. You must fix the{" "}
-      <strong>{errors.size + " " + pluralize("Error", errors.size)}</strong>
-      {" "}
+      <strong>{errors + " " + pluralize("error", errors)}</strong>{" "}
       to use all of the site features.
     </span>
     <br />
-    <Results issues={issues} />
+    <Results datasetId={datasetId} version={version} />
   </ValidationPanel>
 )
 
 interface ValidationProps {
-  issues: DatasetIssues
+  datasetId: string
+  version?: string
+  errors: number
+  warnings: number
 }
 
-export const Validation = ({ issues }: ValidationProps) => {
-  if (issues) {
-    const grouped = issues.groupBy("severity")
-    const warnings = grouped.get("warning")
-    const errors = grouped.get("error")
-    if (errors?.size) {
-      return <Errors issues={issues} errors={errors} warnings={warnings} />
-    } else if (warnings?.size) {
-      return <Warnings issues={issues} warnings={warnings} />
-    } else {
-      return <Valid />
-    }
-  } else {
+export const Validation = (
+  { datasetId, version, errors, warnings }: ValidationProps,
+) => {
+  if (errors > 0) {
+    return (
+      <Errors
+        datasetId={datasetId}
+        version={version}
+        errors={errors}
+        warnings={warnings}
+      />
+    )
+  } else if (warnings > 0) {
     return (
-      <ValidationPanel
-        heading={
-          <div>
-            <span className="dataset-status ds-warning ds-validation-pending">
-              <i className="fa fa-circle-o-notch fa-spin" />
-              Validation Pending
-            </span>
-          </div>
-        }
-      >
-        <br />
-        <p className="ds-validation-pending-message">
-          The BIDS validator is running. This may take several minutes.
-        </p>
-      </ValidationPanel>
+      <Warnings datasetId={datasetId} version={version} warnings={warnings} />
     )
+  } else {
+    return <Valid />
   }
 }
+
+/**
+ * Display validation as pending
+ */
+export function ValidationPending() {
+  return (
+    <ValidationPanel
+      heading={
+        <div>
+          <span className="dataset-status ds-warning ds-validation-pending">
+            <i className="fa fa-circle-o-notch fa-spin" />
+            Validation Pending
+          </span>
+        </div>
+      }
+    >
+      <br />
+      <p className="ds-validation-pending-message">
+        The BIDS validator is running. This may take several minutes.
+      </p>
+    </ValidationPanel>
+  )
+}

package/src/scripts/workers/schema.worker.ts

@@ -2,14 +2,9 @@
 import { fileListToTree, validate } from "@bids/validator/main"
 import type { ValidationResult } from "@bids/validator/main"
 import type { Config, ValidatorOptions } from "@bids/validator/options"
+import validatorConfig from "./validator-config.json"
 
-const config: Config = {
-  error: [
-    { code: "NO_AUTHORS" },
-    { code: "SUBJECT_FOLDERS" }, // bids-standard/bids-specification#1928 downgrades to warning
-    { code: "EMPTY_DATASET_NAME" },
-  ],
-}
+const config: Config = validatorConfig
 
 const options: ValidatorOptions = {
   datasetPath: "browser",

package/tsconfig.json

@@ -6,9 +6,8 @@
     "tsBuildInfoFile": "../../.build-cache/app.tsbuildinfo"
   },
   "include": ["./src"],
-  "files": ["./src/lerna.json"],
+  "files": ["./src/lerna.json", "./src/scripts/workers/validator-config.json"],
   "references": [
-    { "path": "../openneuro-client" },
     { "path": "../openneuro-components" }
   ]
 }

package/vite.config.js

@@ -27,6 +27,7 @@ export default defineConfig({
     port: 80,
     host: "0.0.0.0",
     cors: true,
+    allowedHosts: ["app"],
   },
   build: {
     sourcemap: true,