@openneuro/app 4.28.0 → 4.28.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.28.0",
+  "version": "4.28.2",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -19,8 +19,8 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.34.0",
-    "@openneuro/client": "^4.28.0",
-    "@openneuro/components": "^4.28.0",
+    "@openneuro/client": "^4.28.2",
+    "@openneuro/components": "^4.28.2",
     "@sentry/react": "^8.25.0",
     "@tanstack/react-table": "^8.9.3",
     "bids-validator": "1.14.8",
@@ -75,5 +75,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9a52e0bfc8c7eb1c676a78b2a17876d319625999"
+  "gitHead": "d9daaef8662914c49acf452df0f020e992923b72"
 }

package/src/scripts/dataset/files/file-display.jsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useContext } from "react"
 import PropTypes from "prop-types"
 import { useParams } from "react-router-dom"
 import FileView from "./file-view.jsx"
@@ -6,6 +6,9 @@ import { apiPath } from "./file"
 import styled from "@emotion/styled"
 import { Media } from "../../styles/media"
 import { DatasetPageBorder } from "../routes/styles/dataset-page-border"
+import DatasetQueryContext from "../../datalad/dataset/dataset-query-context"
+import { fetchMoreDirectory } from "./file-tree-unloaded-directory.jsx"
+import { Loading } from "@openneuro/components/loading"
 
 const PathBreadcrumb = styled.div`
   font-size: 14px;
@@ -52,29 +55,56 @@ FileDisplayBreadcrumb.propTypes = {
   filePath: PropTypes.string,
 }
 
-const FileDisplay = ({ datasetId, snapshotTag = null, filePath }) => (
-  <DatasetPageBorder className="dataset-form display-file">
-    <PathBreadcrumb>
-      <FileDisplayBreadcrumb filePath={filePath} />
-    </PathBreadcrumb>
-    <div className="display-file-body">
-      <FileView
-        datasetId={datasetId}
-        snapshotTag={snapshotTag}
-        path={filePath}
-      />
-    </div>
+const FileDisplay = ({ dataset, snapshotTag = null, filePath }) => {
+  const { fetchMore } = useContext(DatasetQueryContext)
+  const files = snapshotTag ? dataset.files : dataset.draft.files
+  const datasetFile = files.find((file) => file.filename === filePath)
+  // If no file matches, we are missing data, load the next missing parent
+  if (!datasetFile) {
+    const components = filePath.split(":")
+    for (let i = components.length; i > 0; i--) {
+      const path = components.slice(0, i).join(":")
+      const file = files.find((file) => file.filename === path)
+      if (file && file.directory) {
+        fetchMoreDirectory(fetchMore, dataset.id, snapshotTag, file)
+        break
+      }
+    }
+    return (
+      <DatasetPageBorder className="dataset-form display-file">
+        <PathBreadcrumb>
+          <FileDisplayBreadcrumb filePath={filePath} />
+        </PathBreadcrumb>
+        <Loading />
+      </DatasetPageBorder>
+    )
+  } else {
+    const url = datasetFile?.urls?.[0] ||
+      apiPath(dataset.id, snapshotTag, filePath)
+    return (
+      <DatasetPageBorder className="dataset-form display-file">
+        <PathBreadcrumb>
+          <FileDisplayBreadcrumb filePath={filePath} />
+        </PathBreadcrumb>
+        <div className="display-file-body">
+          <FileView
+            url={url}
+            path={filePath}
+          />
+        </div>
 
-    <Media greaterThanOrEqual="medium">
-      <hr />
-      <div className="modal-download btn-admin-blue">
-        <a href={apiPath(datasetId, snapshotTag, filePath)} download>
-          <i className="fa fa-download" /> Download
-        </a>
-      </div>
-    </Media>
-  </DatasetPageBorder>
-)
+        <Media greaterThanOrEqual="medium">
+          <hr />
+          <div className="modal-download btn-admin-blue">
+            <a href={url} download>
+              <i className="fa fa-download" /> Download
+            </a>
+          </div>
+        </Media>
+      </DatasetPageBorder>
+    )
+  }
+}
 
 FileDisplay.propTypes = {
   datasetId: PropTypes.string,
@@ -82,10 +112,10 @@ FileDisplay.propTypes = {
   snapshotTag: PropTypes.string,
 }
 
-export const FileDisplayRoute = ({ datasetId, snapshotTag }) => {
+export const FileDisplayRoute = ({ dataset, snapshotTag }) => {
   return (
     <FileDisplay
-      datasetId={datasetId}
+      dataset={dataset}
       snapshotTag={snapshotTag}
       {...useParams()}
     />

package/src/scripts/dataset/files/file-view.jsx

@@ -1,10 +1,8 @@
 import React, { useEffect, useState } from "react"
 import { Loading } from "@openneuro/components/loading"
-import { apiPath } from "./file"
 import FileViewerType from "./file-viewer-type.jsx"
 
-const FileView = ({ datasetId, snapshotTag, path }) => {
-  const url = apiPath(datasetId, snapshotTag, path)
+const FileView = ({ url, path }) => {
   const [data, setData] = useState(new ArrayBuffer(0))
   const [loading, setLoading] = useState(true)
 

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

@@ -7,6 +7,7 @@ import { DatasetPageBorder } from "./styles/dataset-page-border"
 import { HeaderRow4 } from "./styles/header-row"
 import FileView from "../files/file-view"
 import styled from "@emotion/styled"
+import { apiPath } from "../files/file"
 
 const FormRow = styled.div`
   margin-top: 0;
@@ -108,8 +109,7 @@ const SnapshotRoute = ({
               <FormRow>
                 <HeaderRow4>Current Changelog</HeaderRow4>
                 <FileView
-                  datasetId={datasetId}
-                  snapshotTag={latestSnapshot.tag}
+                  url={apiPath(datasetId, latestSnapshot.tag, "CHANGES")}
                   path="CHANGES"
                 />
               </FormRow>

package/src/scripts/dataset/routes/tab-routes-draft.tsx

@@ -61,7 +61,7 @@ export const TabRoutesDraft = ({ dataset, hasEdit }) => {
       />
       <Route
         path="file-display/:filePath"
-        element={<FileDisplayRoute datasetId={dataset.id} />}
+        element={<FileDisplayRoute dataset={dataset} />}
       />
       <Route path="metadata" element={<AddMetadata dataset={dataset} />} />
     </Routes>

package/src/scripts/dataset/routes/tab-routes-snapshot.tsx

@@ -39,7 +39,7 @@ export const TabRoutesSnapshot = ({ dataset, snapshot }) => {
       <Route
         path="file-display/:filePath"
         element={
-          <FileDisplayRoute datasetId={dataset.id} snapshotTag={snapshot.tag} />
+          <FileDisplayRoute dataset={snapshot} snapshotTag={snapshot.tag} />
         }
       />
       <Route path="metadata" element={<AddMetadata dataset={dataset} />} />