@openneuro/app 4.22.0 → 4.24.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.22.0",
+  "version": "4.24.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -16,14 +16,14 @@
   "dependencies": {
     "@apollo/client": "3.7.2",
     "@artsy/fresnel": "^1.3.1",
-    "@elastic/apm-rum": "5.11.0",
+    "@elastic/apm-rum": "5.16.0",
     "@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.24.0-alpha.0",
+    "@openneuro/components": "^4.24.0-alpha.0",
     "@tanstack/react-table": "^8.9.3",
-    "bids-validator": "1.13.0",
+    "bids-validator": "1.14.6",
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
     "date-fns": "^2.16.1",
@@ -32,45 +32,47 @@
     "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/node": "20.12.7",
     "@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",
     "esbuild-plugin-globals": "^0.1.1",
     "history": "5.3.0",
-    "jsdom": "^16.5.3",
+    "jsdom": "24.0.0",
     "object.fromentries": "^2.0.0",
     "rollup-plugin-polyfill-node": "0.12.0",
     "sass": "^1.32.8",
     "stream-browserify": "^3.0.0",
     "typescript": "5.1.6",
-    "vite": "4.5.2",
-    "vitest": "0.34.4"
+    "vite": "4.5.3",
+    "vitest": "1.5.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "91d72c3a61f8a3041e810d957cd6f4e5440d6488"
+  "gitHead": "4e271231c20d21e4c8b5ba8851d67cb94b7f739a"
 }

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

@@ -13,7 +13,7 @@ exports[`SnapshotContainer component > includes JSON-LD data in the header 1`] =
   "onChangeClientState": [Function],
   "scriptTags": [
     {
-      "innerHTML": "{\\"@context\\":\\"http://schema.org\\",\\"@type\\":\\"Dataset\\",\\"name\\":\\"DS003-downsampled (only T1)\\",\\"author\\":[{\\"@type\\":\\"Person\\",\\"name\\":\\"J. Doe\\",\\"givenName\\":\\"J.\\",\\"familyName\\":\\"Doe\\"},{\\"@type\\":\\"Person\\",\\"name\\":\\"J. Doe\\",\\"givenName\\":\\"J.\\",\\"familyName\\":\\"Doe\\"},{\\"@type\\":\\"Person\\",\\"name\\":\\"J. Doe\\",\\"givenName\\":\\"J.\\",\\"familyName\\":\\"Doe\\"}],\\"datePublished\\":\\"2021-12-17T22:32:08.000Z\\",\\"dateModified\\":\\"2021-12-17T22:32:08.000Z\\",\\"license\\":\\"https://creativecommons.org/publicdomain/zero/1.0/\\",\\"publisher\\":{\\"@type\\":\\"Organization\\",\\"name\\":\\"OpenNeuro\\"},\\"description\\":\\"This dataset was obtained from the OpenfMRI project (http://www.openfmri.org).\\\\nAccession #: ds003\\\\nDescription: Rhyme judgment\\\\n\\\\nRelease history:\\\\n10/06/2011: initial release\\\\n3/21/2013: Updated release with QA information\\\\n\\\\nThis dataset is made available under the Public Domain Dedication and License \\\\nv1.0, whose full text can be found at \\\\nhttp://www.opendatacommons.org/licenses/pddl/1.0/. \\\\nWe hope that all users will follow the ODC Attribution/Share-Alike \\\\nCommunity Norms (http://www.opendatacommons.org/norms/odc-by-sa/); \\\\nin particular, while not legally required, we hope that all users \\\\nof the data will acknowledge the OpenfMRI project and NSF Grant \\\\nOCI-1131441 (R. Poldrack, PI) in any publications.\\\\n\\",\\"version\\":\\"1.0.0\\",\\"url\\":\\"https://openneuro.org/datasets/ds001032/versions/1.0.0\\"}",
+      "innerHTML": "{"@context":"http://schema.org","@type":"Dataset","name":"DS003-downsampled (only T1)","author":[{"@type":"Person","name":"J. Doe","givenName":"J.","familyName":"Doe"},{"@type":"Person","name":"J. Doe","givenName":"J.","familyName":"Doe"},{"@type":"Person","name":"J. Doe","givenName":"J.","familyName":"Doe"}],"datePublished":"2021-12-17T22:32:08.000Z","dateModified":"2021-12-17T22:32:08.000Z","license":"https://creativecommons.org/publicdomain/zero/1.0/","publisher":{"@type":"Organization","name":"OpenNeuro"},"description":"This dataset was obtained from the OpenfMRI project (http://www.openfmri.org).\\nAccession #: ds003\\nDescription: Rhyme judgment\\n\\nRelease history:\\n10/06/2011: initial release\\n3/21/2013: Updated release with QA information\\n\\nThis dataset is made available under the Public Domain Dedication and License \\nv1.0, whose full text can be found at \\nhttp://www.opendatacommons.org/licenses/pddl/1.0/. \\nWe hope that all users will follow the ODC Attribution/Share-Alike \\nCommunity Norms (http://www.opendatacommons.org/norms/odc-by-sa/); \\nin particular, while not legally required, we hope that all users \\nof the data will acknowledge the OpenfMRI project and NSF Grant \\nOCI-1131441 (R. Poldrack, PI) in any publications.\\n","version":"1.0.0","url":"https://openneuro.org/datasets/ds001032/versions/1.0.0"}",
       "type": "application/ld+json",
     },
   ],
@@ -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/components/NemarButton.tsx

@@ -16,7 +16,11 @@ export const NemarButton: React.FC<NemarButtonProps> = ({
     <>
       {onNemar && (
         <div className="brainlife-block">
-          <Tooltip tooltip="View and analyze on NEMAR" flow="up">
+          <Tooltip
+            tooltip="View and analyze this dataset on the NEMAR OpenNeuro portal for MEG, iEEG, and EEG data"
+            flow="up"
+            wrapText={true}
+          >
             <Button
               className="brainlife-link"
               primary={true}

package/src/scripts/dataset/files/viewers/file-viewer-nifti.tsx

@@ -14,14 +14,23 @@ const FileViewerNifti = ({
         url: imageUrl,
         colorMap: "gray",
         opacity: 1,
-        visible: true,
         limitFrames4D: 5,
       },
     ]
     const nv = new Niivue({ dragAndDropEnabled: false })
     ;(window as any).niivue = nv
     nv.attachToCanvas(canvas.current)
-    nv.loadVolumes(volumeList) // press the "v" key to cycle through volumes
+    nv.loadVolumes(volumeList) // press the "v" key to cycle through views (axial, coronal, sagittal, 3D, etc.)
+    nv.graph.autoSizeMultiplanar = true // use autosizing
+    nv.opts.multiplanarForceRender = true // ensure that we draw the time series graph in the tile usually reserved for the 3D render
+    nv.graph.normalizeValues = false // use raw data values on y-axis
+    nv.graph.opacity = 1.0 // show the graph
+    // Notes: 
+    // 1.   If an image only has one volume, the timeseries graph will not be visible.
+    //      The 3D render will be placed in the graph tile instead. 
+    // 2.   Users can navigate volumes forward and backward in the series using the left and right arrow keys on desktop devices
+    // 3.   On touch screens, users can tap on the timeseries graph to jump to a volume index
+    // 4.   Users can load all volumes by clicking on the "..." displayed on the timeseries graph
   }, [imageUrl])
 
   return <canvas ref={canvas} height={800} />

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/errors/errorRoute.jsx

@@ -7,22 +7,22 @@ import OrcidGeneral from "./orcid/general.jsx"
 import OrcidEmail from "./orcid/email.jsx"
 import OrcidGiven from "./orcid/given.jsx"
 import OrcidFamily from "./orcid/family.jsx"
+import FourOFourPage from "./404page"
 
-class ErrorRoute extends React.Component {
-  render() {
-    return (
-      <div className="container errors">
-        <div className="panel">
-          <Routes>
-            <Route path="orcid" element={<OrcidGeneral />} />
-            <Route path="orcid/email" element={<OrcidEmail />} />
-            <Route path="orcid/given" element={<OrcidGiven />} />
-            <Route path="orcid/family" element={<OrcidFamily />} />
-          </Routes>
-        </div>
+function ErrorRoute() {
+  return (
+    <div className="container errors">
+      <div className="panel">
+        <Routes>
+          <Route path="orcid" element={<OrcidGeneral />} />
+          <Route path="orcid/email" element={<OrcidEmail />} />
+          <Route path="orcid/given" element={<OrcidGiven />} />
+          <Route path="orcid/family" element={<OrcidFamily />} />
+          <Route path="*" element={<FourOFourPage />} />
+        </Routes>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 export default ErrorRoute

package/src/scripts/routes.tsx

@@ -39,7 +39,7 @@ const AppRoutes: React.VoidFunctionComponent = () => (
       path="/dashboard"
       element={<Navigate to="/search?mydatasets" replace />}
     />
-    <Route element={<FourOFourPage />} />
+    <Route path="/*" element={<FourOFourPage />} />
   </Routes>
 )
 

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

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

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

@@ -155,46 +155,11 @@ export interface SearchParams {
   tracerRadionuclides: string[]
   sortBy_available
   sortBy_selected
+  bidsDatasetType_available: string[]
+  bidsDatasetType_selected: string | null
 }
 
-// TODO: move to this initial state
-//       and load dynamic options on mount
 const initialSearchParams: SearchParams = {
-  keywords: [],
-  searchAllDatasets: false,
-  datasetType_available,
-  datasetType_selected: null,
-  datasetStatus_available,
-  datasetStatus_selected: null,
-  modality_available,
-  modality_selected: null,
-  ageRange: [null, null],
-  subjectCountRange: [null, null],
-  diagnosis_available: [],
-  diagnosis_selected: null,
-  tasks: [],
-  authors: [],
-  // more
-  sex_available: [],
-  sex_selected: null,
-  date_available: [],
-  date_selected: null,
-  species_available: [],
-  species_selected: null,
-  section_available: [],
-  section_selected: null,
-  studyDomains: [],
-  bodyParts: [],
-  scannerManufacturers: [],
-  scannerManufacturersModelNames: [],
-  tracerNames: [],
-  tracerRadionuclides: [],
-  sortBy_available: sortBy,
-  sortBy_selected: sortBy[0],
-}
-
-// TODO: (stretch) delete and move to dynamically loaded initialSearchParams
-const TEMPORARY_initialSearchParams: SearchParams = {
   keywords: [],
   searchAllDatasets: false,
   datasetType_available,
@@ -237,6 +202,8 @@ const TEMPORARY_initialSearchParams: SearchParams = {
   tracerRadionuclides: [],
   sortBy_available: sortBy,
   sortBy_selected: sortBy[0],
+  bidsDatasetType_available: ["raw", "derivative"],
+  bidsDatasetType_selected: null,
 }
 
-export default TEMPORARY_initialSearchParams
+export default initialSearchParams

package/src/scripts/search/inputs/dataset-type-select.tsx

@@ -0,0 +1,33 @@
+import React, { FC, useContext } from "react"
+import { SearchParamsCtx } from "../search-params-ctx"
+import { FacetSelect } from "@openneuro/components/facets"
+import { AccordionTab, AccordionWrap } from "@openneuro/components/accordion"
+
+const DatasetTypeSelect: FC = () => {
+  const { searchParams, setSearchParams } = useContext(SearchParamsCtx)
+
+  const { bidsDatasetType_selected, bidsDatasetType_available } = searchParams
+  const setDatasetType = (bidsDatasetType_selected) =>
+    setSearchParams((prevState) => ({
+      ...prevState,
+      bidsDatasetType_selected,
+    }))
+
+  return (
+    <AccordionWrap className="facet-accordion">
+      <AccordionTab
+        accordionStyle="plain"
+        label="Dataset Type"
+        startOpen={false}
+      >
+        <FacetSelect
+          selected={bidsDatasetType_selected}
+          setSelected={setDatasetType}
+          items={bidsDatasetType_available}
+        />
+      </AccordionTab>
+    </AccordionWrap>
+  )
+}
+
+export default DatasetTypeSelect

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

@@ -4,6 +4,7 @@ import ModalitySelect from "./modality-select"
 import ShowDatasetRadios from "./show-datasets-radios"
 import AgeRangeInput from "./age-range-input"
 import SubjectCountRangeInput from "./subject-count-range-input"
+import DatasetTypeSelect from "./dataset-type-select"
 import DiagnosisSelect from "./diagnosis-select"
 import TaskInput from "./task-input"
 import AuthorInput from "./author-input"
@@ -24,6 +25,7 @@ export {
   AllDatasetsToggle,
   AuthorInput,
   BodyPartsInput,
+  DatasetTypeSelect,
   DateRadios,
   DiagnosisSelect,
   KeywordInput,

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

@@ -16,6 +16,7 @@ import {
   AllDatasetsToggle,
   AuthorInput,
   BodyPartsInput,
+  DatasetTypeSelect,
   DateRadios,
   DiagnosisSelect,
   KeywordInput,
@@ -101,14 +102,12 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
 
   const { searchParams, setSearchParams } = useContext(SearchParamsCtx)
   const modality = portalContent?.modality || null
-  useEffect(() => {
-    setDefaultSearch(
-      modality,
-      searchParams,
-      setSearchParams,
-      new URLSearchParams(location.search),
-    )
-  }, [modality, searchParams.modality_selected, setSearchParams, location])
+  setDefaultSearch(
+    modality,
+    searchParams,
+    setSearchParams,
+    new URLSearchParams(location.search),
+  )
 
   const { loading, data, fetchMore, refetch, variables, error } =
     useSearchResults()
@@ -166,6 +165,7 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
             {!portalContent
               ? <ModalitySelect portalStyles={true} label="Modalities" />
               : <ModalitySelect portalStyles={false} label="Choose Modality" />}
+            <DatasetTypeSelect />
             <AgeRangeInput />
             <SubjectCountRangeInput />
             <DiagnosisSelect />

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

@@ -123,6 +123,7 @@ export const getSelectParams = ({
   scannerManufacturersModelNames,
   tracerNames,
   tracerRadionuclides,
+  bidsDatasetType_selected,
 }) => ({
   keywords,
   modality_selected,
@@ -144,6 +145,7 @@ export const getSelectParams = ({
   scannerManufacturersModelNames,
   tracerNames,
   tracerRadionuclides,
+  bidsDatasetType_selected,
 })
 
 /**

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(