@openneuro/app 4.17.1 → 4.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -19,9 +19,9 @@
     "@elastic/apm-rum": "5.11.0",
     "@emotion/react": "11.6.0",
     "@emotion/styled": "11.6.0",
-    "@niivue/niivue": "0.23.1",
-    "@openneuro/client": "^4.17.1",
-    "@openneuro/components": "^4.17.1",
+    "@niivue/niivue": "0.33.1",
+    "@openneuro/client": "^4.18.0",
+    "@openneuro/components": "^4.18.0",
     "bids-validator": "1.10.0",
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c93f1fd308cddfbaef9990be47e77497a277b35e"
+  "gitHead": "0135730a3d7ff196b43abb69a6c89e6699c6a19e"
 }

package/src/scripts/dataset/download/download-script.tsx

@@ -0,0 +1,94 @@
+/**
+ * Generate a download script for this dataset
+ */
+import React from 'react'
+import { useLazyQuery, gql } from '@apollo/client'
+
+function inlineDownload(filename, data): void {
+  const element = document.createElement('a')
+  element.setAttribute(
+    'href',
+    'data:text/x-shellscript;charset=utf-8,' + encodeURIComponent(data),
+  )
+  element.setAttribute('download', filename)
+
+  element.style.display = 'none'
+  document.body.appendChild(element)
+
+  element.click()
+
+  document.body.removeChild(element)
+}
+
+function generateDownloadScript(data): string {
+  let script = '#!/bin/sh\n'
+  for (const f of data.snapshot.downloadFiles) {
+    script += `curl --create-dirs ${f.urls[0]} -o ${f.filename}\n`
+  }
+  return script
+}
+
+interface DownloadS3DerivativesProps {
+  datasetId: string
+  snapshotTag: string
+}
+
+const getSnapshotDownload = gql`
+  query snapshot($datasetId: ID!, $tag: String!) {
+    snapshot(datasetId: $datasetId, tag: $tag) {
+      id
+      downloadFiles {
+        id
+        directory
+        filename
+        urls
+        size
+      }
+    }
+  }
+`
+
+export const DownloadScript = ({
+  datasetId,
+  snapshotTag,
+}: DownloadS3DerivativesProps): JSX.Element => {
+  const [getDownload, { loading, data }] = useLazyQuery(getSnapshotDownload, {
+    variables: {
+      datasetId: datasetId,
+      tag: snapshotTag,
+    },
+    errorPolicy: 'all',
+  })
+  if (data) {
+    const script = generateDownloadScript(data)
+    inlineDownload(`${datasetId}-${snapshotTag}.sh`, script)
+  }
+  // This feature is only implemented for snapshots
+  if (snapshotTag) {
+    return (
+      <div>
+        <h4>Download with a shell script</h4>
+        <p>
+          A script is available to download with only curl. This may be useful
+          if your download environment makes it difficult to install DataLad or
+          Node.js.
+        </p>
+        <p>
+          {loading ? (
+            'Loading...'
+          ) : (
+            <a
+              href="#"
+              onClick={(): void => {
+                void getDownload()
+              }}>
+              Download shell script
+            </a>
+          )}
+        </p>
+      </div>
+    )
+  }
+}
+
+export default DownloadScript

package/src/scripts/dataset/files/file-tree.tsx

@@ -139,6 +139,7 @@ const FileTree = ({
                   datasetId={datasetId}
                   snapshotTag={snapshotTag}
                   path={path}
+                  urls={file.urls}
                   size={file.size}
                   editMode={editMode}
                   toggleFileToDelete={toggleFileToDelete}

package/src/scripts/dataset/files/file.tsx

@@ -91,6 +91,7 @@ interface FileProps {
   annexed: boolean
   annexKey: string
   datasetPermissions: string[]
+  urls: string[]
   toggleFileToDelete: ({
     id,
     path,
@@ -117,6 +118,7 @@ const File = ({
   datasetPermissions,
   toggleFileToDelete,
   isFileToBeDeleted,
+  urls,
 }: FileProps): JSX.Element => {
   const { icon, color } = getFileIcon(filename)
   const snapshotVersionPath = snapshotTag ? `/versions/${snapshotTag}` : ''
@@ -137,7 +139,10 @@ const File = ({
           <Tooltip tooltip={`Download: ${bytes.format(size) as string}`}>
             <span className="edit-file download-file">
               <a
-                href={apiPath(datasetId, snapshotTag, filePath(path, filename))}
+                href={
+                  urls?.[0] ||
+                  apiPath(datasetId, snapshotTag, filePath(path, filename))
+                }
                 download
                 aria-label="download file">
                 <i className="fa fa-download" />

package/src/scripts/dataset/routes/download-dataset.tsx

@@ -8,6 +8,7 @@ import DownloadCommandLine from '../download/download-command-line.jsx'
 import DownloadDatalad from '../download/download-datalad.jsx'
 import { DatasetPageBorder } from './styles/dataset-page-border'
 import { HeaderRow3 } from './styles/header-row'
+import { DownloadScript } from '../download/download-script'
 
 const DownloadDataset = ({ worker, datasetPermissions }) => {
   const { datasetId, tag: snapshotTag } = useParams()
@@ -34,6 +35,7 @@ const DownloadDataset = ({ worker, datasetPermissions }) => {
         workerId={workerId}
         datasetPermissions={datasetPermissions}
       />
+      <DownloadScript datasetId={datasetId} snapshotTag={snapshotTag} />
     </DatasetPageBorder>
   )
 }

package/src/scripts/uploader/upload-issues.jsx

@@ -5,6 +5,7 @@ import { Loading } from '@openneuro/components/loading'
 import Results from '../validation/validation-results.jsx'
 import UploaderContext from './uploader-context.js'
 import validate from '../workers/validate'
+import schemaValidate from '../workers/schema'
 
 const UploadValidatorStatus = ({ issues, next, reset }) => {
   const errorCount = issues.errors.length
@@ -70,7 +71,11 @@ class UploadValidator extends React.Component {
         blacklistModalities: ['Microscopy'],
       },
     }
-    validate(this.props.files, options).then(this.done)
+    if (this.props.schemaValidator) {
+      schemaValidate(this.props.files, options).then(this.done)
+    } else {
+      validate(this.props.files, options).then(this.done)
+    }
   }
 
   /**
@@ -115,12 +120,14 @@ UploadValidator.propTypes = {
   files: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   next: PropTypes.func,
   reset: PropTypes.func,
+  schemaValidator: PropTypes.bool,
 }
 
 const UploadIssues = () => (
   <UploaderContext.Consumer>
     {uploader => (
       <UploadValidator
+        schemaValidator={uploader.schemaValidator}
         files={uploader.selectedFiles}
         next={() => uploader.setLocation('/upload/metadata')}
         reset={() => uploader.setLocation('/upload')}

package/src/scripts/uploader/upload-select.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import FileSelect from './file-select'
 import UploaderContext from './uploader-context.js'
+import AdminUser from '../authentication/admin-user'
 
 const UploadSelect = () => (
   <div>
@@ -20,6 +21,18 @@ const UploadSelect = () => (
           </a>{' '}
           to upload
           <FileSelect onChange={uploader.selectFiles} />
+          <AdminUser>
+            <input
+              type="checkbox"
+              id="schema-validator-checkbox"
+              onChange={uploader.toggleSchemaValidator}
+              defaultChecked={uploader.schemaValidator}
+            />
+            <label htmlFor="schema-validator-checkbox">
+              {' '}
+              Use schema based validator
+            </label>
+          </AdminUser>
         </div>
       )}
     </UploaderContext.Consumer>

package/src/scripts/uploader/uploader.jsx

@@ -67,6 +67,10 @@ export class UploadClient extends React.Component {
       failedFiles: new Set(),
       // Abort controller for abandoning the upload
       abortController: null,
+      // Enable the new schema validator
+      schemaValidator: false,
+      // Toggle schemaValidator flag
+      toggleSchemaValidator: this.toggleSchemaValidator,
     }
   }
 
@@ -80,6 +84,13 @@ export class UploadClient extends React.Component {
     this.setState({ location: locationFactory(path) })
   }
 
+  /**
+   * Enable or disable schema based validation
+   */
+  toggleSchemaValidator = () => {
+    this.setState({ schemaValidator: !this.state.schemaValidator })
+  }
+
   /**
    * Specify a dataset to resume upload for
    * @param {string} datasetId