@openneuro/app 4.22.0 → 4.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.22.0",
+  "version": "4.23.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -20,8 +20,8 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.34.0",
-    "@openneuro/client": "^4.22.0",
-    "@openneuro/components": "^4.22.0",
+    "@openneuro/client": "^4.23.0",
+    "@openneuro/components": "^4.23.0",
     "@tanstack/react-table": "^8.9.3",
     "bids-validator": "1.13.0",
     "bytes": "^3.0.0",
@@ -32,29 +32,31 @@
     "email-validator": "^2.0.4",
     "graphql": "16.8.1",
     "jwt-decode": "^2.2.0",
-    "markdown-to-jsx": "^7.4.0",
     "pluralize": "8.0.0",
     "prop-types": "^15.6.0",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
     "react-cookie": "4.0.3",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.2.0",
     "react-helmet": "6.1.0",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "6.3.0",
     "react-toastify": "6.0.9",
     "react-usestateref": "^1.0.8",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
     "semver": "^5.5.0",
     "subscriptions-transport-ws": "0.11.0",
     "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "6.1.3",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/dompurify": "^3",
     "@types/jsdom": "^16",
     "@types/node": "18.11.9",
     "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5",
+    "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "5.3.3",
     "@types/testing-library__jest-dom": "5.14.5",
     "core-js": "3.25.1",
@@ -72,5 +74,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "91d72c3a61f8a3041e810d957cd6f4e5440d6488"
+  "gitHead": "e86df78635d7ac6cfa03a2add5760b8539103583"
 }

package/src/client.jsx

@@ -6,7 +6,7 @@ import "./scripts/apm.js"
 import { ApolloProvider, InMemoryCache } from "@apollo/client"
 import { createClient } from "@openneuro/client"
 import React from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import { BrowserRouter, Route, Routes } from "react-router-dom"
 import App from "./scripts/app"
 import Index from "./scripts/index"
@@ -18,7 +18,9 @@ import "@openneuro/components/page/page.scss"
 
 gtag.initialize(config.analytics.trackingIds)
 
-ReactDOM.render(
+const mainElement = document.getElementById("main")
+const container = createRoot(mainElement)
+container.render(
   <App>
     <ApolloProvider
       client={createClient(`${config.url}/crn/graphql`, {
@@ -41,5 +43,4 @@ ReactDOM.render(
       </BrowserRouter>
     </ApolloProvider>
   </App>,
-  document.getElementById("main"),
 )

package/src/scripts/components/data-table.tsx

@@ -8,7 +8,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table"
 import styled from "@emotion/styled"
-import { format, isValid, parseISO } from "date-fns"
+import { format, isValid, parse, parseISO } from "date-fns"
 
 interface DataTableProps {
   data: any[]
@@ -33,10 +33,32 @@ const TD = styled.td`
   padding: 3px;
 `
 
+function extractDateString(dateString) {
+  const formats = [
+    "yyyy-MM-dd", // ISO 8601
+    "yyyy-MM-ddTHH:mm:ss", // ISO 8601 with time
+    "MM/dd/yyyy", // US (M/D/YYYY)
+    "dd/MM/yyyy", // European (D/M/YYYY)
+  ]
+
+  for (const format of formats) {
+    const parsedDate = parse(dateString, format, new Date())
+    if (isValid(parsedDate)) {
+      return parsedDate
+    }
+  }
+
+  return false
+}
+
 function CellFormat(props): any {
   const value = props.getValue()
-  if (typeof value === "string" && isValid(parseISO(value))) {
-    return format(parseISO(value), "yyyy-MM-dd")
+  let extractedDate
+  if (typeof value === "string") {
+    extractedDate = extractDateString(value)
+  }
+  if (extractedDate instanceof Date) {
+    return format(extractedDate, "yyyy-MM-dd")
   } else if (typeof value === "string" && /^ds[0-9]{6}$/.exec(value)) {
     return <a href={`/datasets/${value}`}>{value}</a>
   } else if (Array.isArray(value)) {

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

@@ -498,46 +498,48 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
               <div>
                 <article>
                   <section>
-                    <div>
-                      <p>
-                        This dataset was obtained from the OpenfMRI project (
-                        <a
-                          href="http://www.openfmri.org"
-                        >
-                          http://www.openfmri.org
-                        </a>
-                        ).
+                    <p>
+                      This dataset was obtained from the OpenfMRI project (
+                      <a
+                        href="http://www.openfmri.org"
+                      >
+                        http://www.openfmri.org
+                      </a>
+                      ).
 Accession #: ds003
 Description: Rhyme judgment
-                      </p>
-                      <p>
-                        Release history:
+                    </p>
+                    
+
+                    <p>
+                      Release history:
 10/06/2011: initial release
 3/21/2013: Updated release with QA information
-                      </p>
-                      <p>
-                        This dataset is made available under the Public Domain Dedication and License 
-v1.0, whose full text can be found at 
+                    </p>
+                    
 
-                        <a
-                          href="http://www.opendatacommons.org/licenses/pddl/1.0/"
-                        >
-                          http://www.opendatacommons.org/licenses/pddl/1.0/
-                        </a>
-                        . 
-We hope that all users will follow the ODC Attribution/Share-Alike 
+                    <p>
+                      This dataset is made available under the Public Domain Dedication and License
+v1.0, whose full text can be found at
+
+                      <a
+                        href="http://www.opendatacommons.org/licenses/pddl/1.0/"
+                      >
+                        http://www.opendatacommons.org/licenses/pddl/1.0/
+                      </a>
+                      .
+We hope that all users will follow the ODC Attribution/Share-Alike
 Community Norms (
-                        <a
-                          href="http://www.opendatacommons.org/norms/odc-by-sa/"
-                        >
-                          http://www.opendatacommons.org/norms/odc-by-sa/
-                        </a>
-                        ); 
-in particular, while not legally required, we hope that all users 
-of the data will acknowledge the OpenfMRI project and NSF Grant 
+                      <a
+                        href="http://www.opendatacommons.org/norms/odc-by-sa/"
+                      >
+                        http://www.opendatacommons.org/norms/odc-by-sa/
+                      </a>
+                      );
+in particular, while not legally required, we hope that all users
+of the data will acknowledge the OpenfMRI project and NSF Grant
 OCI-1131441 (R. Poldrack, PI) in any publications.
-                      </p>
-                    </div>
+                    </p>
                   </section>
                 </article>
               </div>

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

@@ -115,6 +115,7 @@ export const DatasetTools = ({
             : `/datasets/${datasetId}/derivatives`}
           icon="fa-cubes"
           label="Derivatives"
+          disable={!agree}
         />
       )}
       <DatasetToolButton

package/src/scripts/dataset/routes/derivatives.tsx

@@ -1,8 +1,10 @@
 import React from "react"
+import { Navigate, useParams } from "react-router-dom"
 import DownloadS3Derivative from "../download/download-derivative-s3"
 import DownloadDataLadDerivative from "../download/download-derivative-datalad"
 import { DatasetPageBorder } from "./styles/dataset-page-border"
 import { HeaderRow3 } from "./styles/header-row"
+import { useAgreement } from "../../components/agreement"
 
 interface DerivativeElementProps {
   name: string
@@ -38,6 +40,12 @@ interface DerivativesProps {
 }
 
 const Derivatives = ({ derivatives }: DerivativesProps): JSX.Element => {
+  const { datasetId, tag: snapshotTag } = useParams()
+  const [agreed] = useAgreement()
+  // If the derivatives page is directly visited without the agreement, return to the dataset page
+  if (!agreed) {
+    return <Navigate to={`/datasets/${datasetId}`} replace={true} />
+  }
   return (
     <DatasetPageBorder>
       <HeaderRow3>Available Derivatives</HeaderRow3>

package/src/scripts/scss/dataset/dataset-page.scss

@@ -272,6 +272,9 @@
             content: '';
           }
         }
+        p {
+          display: inline-block;
+        }
       }
     }
   }

package/src/scripts/utils/__tests__/__snapshots__/markdown.spec.tsx.snap

@@ -2,38 +2,46 @@
 
 exports[`Test <Markdown> component > allows a href with certain protocols 1`] = `
 <DocumentFragment>
-  <a
-    href="https://example.com"
-  >
-    Example link that should work.
-  </a>
+  <p>
+    <a
+      href="https://example.com"
+    >
+      Example link that should work.
+    </a>
+  </p>
 </DocumentFragment>
 `;
 
 exports[`Test <Markdown> component > does not allow href with unknown protocols 1`] = `
 <DocumentFragment>
-  <a>
-    Example link that should not work.
-  </a>
+  <p>
+    <a>
+      Example link that should not work.
+    </a>
+  </p>
 </DocumentFragment>
 `;
 
 exports[`Test <Markdown> component > filters close-break tags 1`] = `
 <DocumentFragment>
-  <span>
+  <p>
     <br />
     sample text
     <br />
-  </span>
+  </p>
 </DocumentFragment>
 `;
 
 exports[`Test <Markdown> component > filters out disallowed tags 1`] = `
 <DocumentFragment>
   <ul>
+    
+
     <li>
       Markdown document
     </li>
+    
+
   </ul>
 </DocumentFragment>
 `;
@@ -41,17 +49,21 @@ exports[`Test <Markdown> component > filters out disallowed tags 1`] = `
 exports[`Test <Markdown> component > safely handles broken HTML tags 1`] = `
 <DocumentFragment>
   <ul>
+    
+
     <li>
       Markdown document
 
       <br />
       <br />
-      <ul>
-        <li>
-          test content
-        </li>
-      </ul>
     </li>
+    
+
+    <li>
+      test content
+    </li>
+    
+
   </ul>
 </DocumentFragment>
 `;

package/src/scripts/utils/markdown.tsx

@@ -1,6 +1,8 @@
 import React from "react"
-import MarkdownToJsx from "markdown-to-jsx"
+import ReactMarkdown from "react-markdown"
 import DOMPurify from "dompurify"
+import rehypeRaw from "rehype-raw"
+import remarkGfm from "remark-gfm"
 
 interface MarkdownProps {
   children: string
@@ -161,7 +163,9 @@ export function Markdown({ children }: MarkdownProps) {
   })
   return (
     <>
-      <MarkdownToJsx>{sanitizedMarkdown}</MarkdownToJsx>
+      <ReactMarkdown rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]}>
+        {sanitizedMarkdown}
+      </ReactMarkdown>
     </>
   )
 }

package/src/scripts/validation/validation-results.issues.issue.jsx

@@ -73,7 +73,7 @@ class Issue extends React.Component {
         <span className="e-meta">
           <label>File Metadata:</label>
           <p>
-            {file.size / 1000} KB | {file.type}
+            {file.size / 1000} KB {file.type ? ` | ${file.type}` : ""}
           </p>
         </span>
       )

package/src/scripts/validation/validation-results.issues.jsx

@@ -31,23 +31,28 @@ class Issues extends React.Component {
         </span>
       )
 
-      // issue sub-errors
-      const subErrors = Array.from(issue.files).map((error, index2) => {
-        // Schema validator returns multiple files here
+      let subErrors = []
+      if (issue.files instanceof Map) {
+        // Schema validator returns multiple files here as a map
         // map those to the old sub-issue model to display them
-        if (error?.length) {
-          return error.filter(Boolean).map((i, index3) => {
-            return (
-              <Issue
-                type={this.props.issueType}
-                file={i.file}
-                error={i}
-                index={index3}
-                key={index3}
-              />
-            )
-          })
-        } else {
+        let index = 0
+        for (const [path, fObj] of issue.files) {
+          const error = {
+            reason: path,
+            file: fObj,
+          }
+          subErrors.push(
+            (<Issue
+              type={this.props.issueType}
+              error={error}
+              index={index}
+              key={index}
+            />),
+          )
+          index += 1
+        }
+      } else {
+        subErrors = Array.from(issue.files).map((error, index2) => {
           return error
             ? (
               <Issue
@@ -59,8 +64,8 @@ class Issues extends React.Component {
               />
             )
             : null
-        }
-      })
+        })
+      }
 
       if (issue.additionalFileCount > 0) {
         subErrors.push(