@openneuro/app 4.1.0 → 4.2.1

package/src/scripts/datalad/dataset/dataset.jsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { Route, Switch } from 'react-router-dom'
-import DatasetQuery from './dataset-query.jsx'
-
-const Dataset = () => {
-  return (
-    <Switch>
-      <Route
-        name="datalad-snapshot"
-        path="/datasets/:datasetId/versions/:snapshotId"
-        component={DatasetQuery}
-      />
-      <Route
-        name="datalad-dataset"
-        path="/datasets/:datasetId/"
-        component={DatasetQuery}
-      />
-    </Switch>
-  )
-}
-
-export default Dataset

package/src/scripts/datalad/dataset/delete-page.tsx

@@ -1,92 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { withRouter, RouteComponentProps } from 'react-router-dom'
-import { useCookies } from 'react-cookie'
-import DeleteDatasetForm from '../mutations/delete-dataset-form.jsx'
-import DeleteDataset from '../mutations/delete.jsx'
-import LoggedIn from '../../authentication/logged-in.jsx'
-import {
-  hasEditPermissions,
-  getProfile,
-} from '../../refactor_2021/authentication/profile.js'
-import styled from '@emotion/styled'
-
-const Container = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-})
-
-const WarningNote = styled.div({
-  color: 'red',
-  display: 'flex',
-
-  i: {
-    marginRight: '0.5rem',
-  },
-})
-
-interface DeletePageProps extends RouteComponentProps {
-  dataset: Record<string, any>
-  returnToDataset?: () => void
-}
-
-const DeletePage = ({
-  dataset,
-  returnToDataset,
-}: DeletePageProps): React.ReactElement => {
-  const [values, setValues] = useState({
-    reason: '',
-    redirect: '',
-  })
-  const handleInputChange = (name, value) => {
-    const newValues = {
-      ...values,
-      [name]: value,
-    }
-    setValues(newValues)
-  }
-  const [cookies] = useCookies()
-  const user = getProfile(cookies)
-  const hasEdit =
-    (user && user.admin) ||
-    hasEditPermissions(dataset.permissions, user && user.sub)
-
-  return (
-    <Container>
-      <header className="col-xs-12">
-        <h1>Delete Dataset</h1>
-        <hr />
-      </header>
-      <DeleteDatasetForm
-        values={values}
-        onChange={handleInputChange}
-        hideDisabled={false}
-        hasEdit={hasEdit}
-      />
-      <WarningNote className="col-sm-6">
-        <i className="fa fa-asterisk" />
-        <p>
-          Warning: this action will permanently remove this dataset along with
-          associated snapshots.
-        </p>
-      </WarningNote>
-      <div className="col-xs-12 dataset-form-controls">
-        <div className="col-xs-12 modal-actions">
-          <button className="btn-admin-blue" onClick={returnToDataset}>
-            Return to Dataset
-          </button>
-          <LoggedIn>
-            <DeleteDataset datasetId={dataset.id} metadata={values} />
-          </LoggedIn>
-        </div>
-      </div>
-    </Container>
-  )
-}
-
-DeletePage.propTypes = {
-  dataset: PropTypes.object,
-  returnToDataset: PropTypes.func,
-}
-
-export default withRouter(DeletePage)

package/src/scripts/datalad/dataset/left-sidebar.jsx

@@ -1,109 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Link, useLocation } from 'react-router-dom'
-import { useCookies } from 'react-cookie'
-import snapshotVersion from '../snapshotVersion.js'
-import parseISO from 'date-fns/parseISO'
-import format from 'date-fns/format'
-import {
-  getProfile,
-  hasEditPermissions,
-} from '../../refactor_2021/authentication/profile.js'
-
-export const SidebarRow = ({
-  datasetId,
-  id,
-  version,
-  modified,
-  draft = false,
-  active,
-}) => {
-  const url = draft
-    ? `/datasets/${datasetId}`
-    : `/datasets/${datasetId}/versions/${version}`
-  const activeClass = draft
-    ? (active === 'draft' && 'active') || ''
-    : (active === version && 'active') || ''
-  let dateModified
-  try {
-    dateModified = format(parseISO(modified), 'yyyy-MM-dd')
-  } catch (err) {
-    dateModified = 'N/A'
-  }
-  return (
-    <li key={id}>
-      <Link to={url} className={activeClass}>
-        <div className="clearfix">
-          <div className=" col-xs-12">
-            <span className="dataset-type">{version}</span>
-            <span className="date-modified">{dateModified}</span>
-            <span className="icons" />
-          </div>
-        </div>
-      </Link>
-    </li>
-  )
-}
-
-SidebarRow.propTypes = {
-  datasetId: PropTypes.string,
-  id: PropTypes.string,
-  version: PropTypes.string,
-  draft: PropTypes.bool,
-  active: PropTypes.string,
-  modified: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-}
-
-const LeftSidebar = ({ dataset, datasetId, draftModified, snapshots }) => {
-  const [cookies] = useCookies()
-  const location = useLocation()
-  const active = snapshotVersion(location) || 'draft'
-  const user = getProfile(cookies)
-  const hasEdit =
-    (user && user.admin) ||
-    hasEditPermissions(dataset.permissions, user && user.sub)
-  return (
-    <div className="left-sidebar">
-      <span className="slide">
-        <div role="presentation" className="snapshot-select">
-          <span>
-            <h3>Versions</h3>
-            <ul>
-              {hasEdit && (
-                <SidebarRow
-                  key={'Draft'}
-                  id={datasetId}
-                  datasetId={datasetId}
-                  version={'Draft'}
-                  modified={draftModified}
-                  draft
-                  active={active}
-                />
-              )}
-              {snapshots.map(snapshot => (
-                <SidebarRow
-                  key={snapshot.id}
-                  id={snapshot.id}
-                  datasetId={datasetId}
-                  version={snapshot.tag}
-                  modified={snapshot.created}
-                  active={active}
-                />
-              ))}
-            </ul>
-          </span>
-        </div>
-      </span>
-    </div>
-  )
-}
-
-LeftSidebar.propTypes = {
-  active: PropTypes.string,
-  dataset: PropTypes.object,
-  datasetId: PropTypes.string,
-  snapshots: PropTypes.array,
-  draftModified: PropTypes.string,
-}
-
-export default LeftSidebar

package/src/scripts/datalad/download/__tests__/__snapshots__/download-dataset.spec.jsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`dataset/download/DownloadDataset renders successfully 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;

package/src/scripts/datalad/download/__tests__/__snapshots__/download-tool.spec.jsx.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`dataset/download/DownloadTool renders successfully 1`] = `
-<div
-  className="tool"
-  role="presentation"
->
-  <WarnButton
-    action={[Function]}
-    cancel={
-      <i
-        className="fa fa-times"
-      />
-    }
-    confirm={
-      <i
-        className="fa fa-check"
-      />
-    }
-    icon="fa-download"
-    message=""
-    tooltip="Download"
-    warn={false}
-  />
-</div>
-`;

package/src/scripts/datalad/download/__tests__/download-dataset.spec.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import DownloadDataset from '../download-dataset.jsx'
-
-const defProps = {
-  match: {
-    params: {
-      datasetId: 'ds000224',
-      snapshotId: '1.0.0',
-    },
-  },
-}
-
-describe('dataset/download/DownloadDataset', () => {
-  it('renders successfully', () => {
-    const wrapper = shallow(<DownloadDataset {...defProps} />)
-    expect(wrapper).toMatchSnapshot()
-  })
-})

package/src/scripts/datalad/download/__tests__/download-tool.spec.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import DownloadTool from '../download-tool.jsx'
-
-const defProps = {
-  match: {
-    params: {
-      datasetId: 'ds000224',
-      snapshotId: '1.0.0',
-    },
-  },
-}
-
-describe('dataset/download/DownloadTool', () => {
-  it('renders successfully', () => {
-    const wrapper = shallow(<DownloadTool {...defProps} />)
-    expect(wrapper).toMatchSnapshot()
-  })
-})

package/src/scripts/datalad/download/download-command-line.jsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ShellExample from './shell-example.jsx'
-
-export const DownloadSampleCommand = ({ datasetId, snapshotTag }) => (
-  <ShellExample>
-    openneuro download {snapshotTag ? `--snapshot ${snapshotTag}` : '--draft'}{' '}
-    {datasetId} {datasetId}
-    -download/
-  </ShellExample>
-)
-
-DownloadSampleCommand.propTypes = {
-  datasetId: PropTypes.string,
-  snapshotTag: PropTypes.string,
-}
-
-const DownloadCommandLine = ({ datasetId, snapshotTag }) => (
-  <div>
-    <h4>Download with Node.js</h4>
-    <p>
-      Using{' '}
-      <a href="https://www.npmjs.com/package/@openneuro/cli">@openneuro/cli</a>{' '}
-      you can download this dataset from the command line using{' '}
-      <a href="https://nodejs.org/en/download/">Node.js</a>. This method is good
-      for larger datasets or unstable connections, but has known issues on
-      Windows.
-    </p>
-    <DownloadSampleCommand datasetId={datasetId} snapshotTag={snapshotTag} />
-    <p>
-      This will download to {datasetId}
-      -download/ in the current directory. If your download is interrupted and
-      you need to retry, rerun the command to resume the download.
-    </p>
-  </div>
-)
-
-DownloadCommandLine.propTypes = {
-  datasetId: PropTypes.string,
-  snapshotTag: PropTypes.string,
-}
-
-export default DownloadCommandLine

package/src/scripts/datalad/download/download-datalad.jsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { getConfig } from '../../config'
-import ShellExample from './shell-example.jsx'
-
-const DownloadDataladExample = ({ datasetId, githubOrganization }) => (
-  <ShellExample>
-    datalad install https://github.com/
-    {githubOrganization}/{datasetId}
-    .git
-  </ShellExample>
-)
-
-DownloadDataladExample.propTypes = {
-  datasetId: PropTypes.string,
-  githubOrganization: PropTypes.string,
-}
-
-const DownloadDataladInstructions = ({ datasetId, githubOrganization }) => (
-  <div>
-    <h4>Download with DataLad</h4>
-    <p>
-      Public datasets can be downloaded with{' '}
-      <a href="https://www.datalad.org">DataLad</a> or{' '}
-      <a href="https://git-annex.branchable.com/">Git Annex</a> from{' '}
-      <a href={`https://github.com/${githubOrganization}/${datasetId}`}>
-        GitHub.
-      </a>
-    </p>
-    <DownloadDataladExample
-      datasetId={datasetId}
-      githubOrganization={githubOrganization}
-    />
-    <p>
-      Check out{' '}
-      <a href="http://handbook.datalad.org/r.html?openneuro">
-        getting started with DataLad
-      </a>{' '}
-      for more on how to use this download method.
-    </p>
-  </div>
-)
-
-DownloadDataladInstructions.propTypes = {
-  datasetId: PropTypes.string,
-  githubOrganization: PropTypes.string,
-}
-
-const DownloadDatalad = props =>
-  // TODO - don't depend on async config
-  getConfig().hasOwnProperty('github') ? (
-    <DownloadDataladInstructions
-      {...props}
-      githubOrganization={getConfig().github}
-    />
-  ) : null
-
-export default DownloadDatalad

package/src/scripts/datalad/download/download-dataset.jsx

@@ -1,61 +0,0 @@
-/* global globalThis */
-import React from 'react'
-import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
-import styled from '@emotion/styled'
-import DownloadLink from './download-link.jsx'
-import DownloadS3 from './download-s3.jsx'
-import DownloadCommandLine from './download-command-line.jsx'
-import DownloadDatalad from './download-datalad.jsx'
-
-const PaddedDiv = styled.div`
-  padding: 1em;
-`
-
-const DownloadDataset = ({
-  match: {
-    // snapshotId is widely used but snapshotTag is more accurate
-    params: { datasetId, snapshotId: snapshotTag },
-  },
-}) => (
-  <div>
-    <div className="col-xs-12">
-      <h3>How to Download</h3>
-      <hr className="modal-inner" />
-    </div>
-    <div className="col-xs-12">
-      <PaddedDiv className="col-xs-6">
-        {'showDirectoryPicker' in globalThis ? (
-          <DownloadLink datasetId={datasetId} snapshotTag={snapshotTag} />
-        ) : (
-          <DownloadCommandLine
-            datasetId={datasetId}
-            snapshotTag={snapshotTag}
-          />
-        )}
-      </PaddedDiv>
-      <PaddedDiv className="col-xs-6">
-        <DownloadS3 datasetId={datasetId} />
-      </PaddedDiv>
-    </div>
-    <div className="col-xs-12">
-      {'showDirectoryPicker' in globalThis && (
-        <PaddedDiv className="col-xs-6">
-          <DownloadCommandLine
-            datasetId={datasetId}
-            snapshotTag={snapshotTag}
-          />
-        </PaddedDiv>
-      )}
-      <PaddedDiv className="col-xs-6">
-        <DownloadDatalad datasetId={datasetId} />
-      </PaddedDiv>
-    </div>
-  </div>
-)
-
-DownloadDataset.propTypes = {
-  match: PropTypes.object,
-}
-
-export default withRouter(DownloadDataset)

package/src/scripts/datalad/download/download-link.jsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { downloadNative } from './download-native.js'
-import { useApolloClient } from '@apollo/client'
-
-const DownloadLink = ({ datasetId, snapshotTag }) => {
-  const client = useApolloClient()
-  return (
-    <div>
-      <h4>Download with your browser</h4>
-      <p>
-        This method is convenient and allows you to select a local directory to
-        download the dataset to.
-      </p>
-      <h5>Steps</h5>
-      <ol>
-        <li>
-          Select a local directory to save the dataset and grant permission to
-          OpenNeuro to read and write into this directory.
-        </li>
-        <li>
-          Download will run in the background, please leave the site open while
-          downloading.
-        </li>
-        <li>A notification will appear when complete.</li>
-      </ol>
-      <button
-        className="btn-blue"
-        onClick={downloadNative(datasetId, snapshotTag, client)}>
-        <i className={'fa fa-download'} /> Download
-      </button>
-    </div>
-  )
-}
-
-DownloadLink.propTypes = {
-  datasetId: PropTypes.string.isRequired,
-  snapshotTag: PropTypes.string,
-}
-
-export default DownloadLink

package/src/scripts/datalad/download/download-native.js

@@ -1,118 +0,0 @@
-import { trackDownload } from './track-download.js'
-import {
-  downloadToast,
-  downloadToastUpdate,
-  downloadToastDone,
-  downloadAbortToast,
-  nativeErrorToast,
-  permissionsToast,
-  downloadCompleteToast,
-  requestFailureToast,
-} from './native-file-toast.jsx'
-import { apm } from '../../apm.js'
-import { downloadDataset } from './download-query'
-
-/**
- * Given a file, create any missing parent directories, obtain directory handle, and return the file handle within that
- * @param {*} initialDirectoryHandle Native file API directoryEntry
- * @param {string} path 'sub-01/anat/subject-image.nii.gz' style paths
- */
-export const openFileTree = async (initialDirectoryHandle, path) => {
-  let directoryHandle = initialDirectoryHandle
-  // Get list of any parent directories
-  const pathTokens = path.split('/')
-  const dirTokens = pathTokens.slice(0, -1)
-  const filename = pathTokens.slice(-1)
-  if (dirTokens.length > 0) {
-    for (const token of dirTokens) {
-      directoryHandle = await directoryHandle.getDirectoryHandle(token, {
-        create: true,
-      })
-    }
-  }
-  return directoryHandle.getFileHandle(filename, { create: true })
-}
-
-class DownloadAbortError extends Error {
-  constructor(message) {
-    super(message)
-    this.name = 'DownloadAbortError'
-  }
-}
-
-/**
- * Downloads a dataset via the native file API, skipping expensive compression if the browser supports it
- * @param {string} datasetId Accession number string for a dataset
- * @param {string} snapshotTag Snapshot tag name
- */
-export const downloadNative = (datasetId, snapshotTag, client) => async () => {
-  const filesToDownload = await downloadDataset(client)({
-    datasetId,
-    snapshotTag,
-  })
-
-  // Try trackDownload but don't worry if it fails
-  try {
-    trackDownload(client, datasetId, snapshotTag)
-  } catch (err) {
-    apm.captureError(err)
-  }
-  const apmTransaction = apm.startTransaction(
-    `download:${datasetId}`,
-    'download',
-  )
-  if (apmTransaction)
-    apmTransaction.addLabels({ datasetId, snapshot: snapshotTag })
-  let downloadCanceled = false
-  let toastId
-  try {
-    const apmSelect =
-      apmTransaction && apmTransaction.startSpan('showDirectoryPicker')
-    // Open user selected directory
-    const dirHandle = await window.showDirectoryPicker()
-    toastId = downloadToast(
-      dirHandle.name,
-      datasetId,
-      snapshotTag,
-      () => (downloadCanceled = true),
-    )
-    apmSelect && apmSelect.end()
-    for (const [index, file] of filesToDownload.entries()) {
-      const apmDownload =
-        apmTransaction &&
-        apmTransaction.startSpan(`download ${file.filename}:${file.size}`)
-      if (downloadCanceled) {
-        throw new DownloadAbortError('Download canceled by user request')
-      }
-      const fileHandle = await openFileTree(dirHandle, file.filename)
-      // Skip files which are already complete
-      if (fileHandle.size == file.size) continue
-      const writable = await fileHandle.createWritable()
-      const { body, status, statusText } = await fetch(file.urls.pop())
-      if (status === 200) {
-        await body.pipeTo(writable)
-      } else {
-        apmDownload && apmDownload.captureError(statusText)
-        return requestFailureToast()
-      }
-      apmDownload && apmDownload.end()
-      downloadToastUpdate(toastId, index / filesToDownload.length)
-    }
-    downloadCompleteToast(dirHandle.name)
-  } catch (err) {
-    if (err.name === 'AbortError') {
-      return
-    } else if (err.name === 'DownloadAbortError') {
-      downloadAbortToast()
-    } else if (err.name === 'NotAllowedError') {
-      permissionsToast()
-    } else {
-      // Some unknown issue occurred (out of disk space, disk caught fire, etc...)
-      nativeErrorToast()
-    }
-    apm.captureError(err)
-  } finally {
-    if (apmTransaction) apmTransaction.end()
-    downloadToastDone(toastId)
-  }
-}

package/src/scripts/datalad/download/download-query.js

@@ -1,22 +0,0 @@
-import { datasets } from '@openneuro/client'
-
-export const downloadDataset = client => async ({ datasetId, snapshotTag }) => {
-  if (snapshotTag) {
-    const { data } = await client.query({
-      query: datasets.downloadSnapshot,
-      variables: {
-        datasetId,
-        tag: snapshotTag,
-      },
-    })
-    return data.snapshot.files
-  } else {
-    const { data } = await client.query({
-      query: datasets.downloadDataset,
-      variables: {
-        datasetId,
-      },
-    })
-    return data.dataset.draft.files
-  }
-}

package/src/scripts/datalad/download/download-s3.jsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ShellExample from './shell-example.jsx'
-import { getConfig } from '../../config'
-
-export const DownloadSampleS3 = ({ datasetId, s3Bucket }) => (
-  <ShellExample>
-    aws s3 sync --no-sign-request s3://
-    {s3Bucket}/{datasetId} {datasetId}
-    -download/
-  </ShellExample>
-)
-
-DownloadSampleS3.propTypes = {
-  datasetId: PropTypes.string,
-  s3Bucket: PropTypes.string,
-}
-
-const DownloadS3Instructions = ({ datasetId, s3Bucket }) => (
-  <div>
-    <h4>Download from S3</h4>
-    <p>
-      The most recently published snapshot can be downloaded from S3. This
-      method is best for larger datasets or unstable connections. This example
-      uses <a href="https://aws.amazon.com/cli/">AWS CLI.</a>
-    </p>
-    <DownloadSampleS3 datasetId={datasetId} s3Bucket={s3Bucket} />
-    <p>
-      To download unpublished datasets or older snapshots, see advanced methods
-      below.
-    </p>
-  </div>
-)
-
-DownloadS3Instructions.propTypes = {
-  datasetId: PropTypes.string,
-  s3Bucket: PropTypes.string,
-}
-
-const DownloadS3 = props =>
-  // TODO - don't depend on async config
-  getConfig().hasOwnProperty('publicBucket') ? (
-    <DownloadS3Instructions {...props} s3Bucket={getConfig().publicBucket} />
-  ) : null
-
-export default DownloadS3