@openneuro/app 4.2.0 → 4.2.1

package/src/scripts/file-tree/__tests__/file-tree-unloaded-directory.spec.jsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import DatasetQueryContext from '../../datalad/dataset/dataset-query-context.js'
-import FileTreeUnloadedDirectory, {
-  mergeNewFiles,
-} from '../file-tree-unloaded-directory.jsx'
-
-const dir = {
-  filename: 'test directory',
-}
-
-describe('FileTreeUnloadedDirectory component', () => {
-  it('renders with default props', () => {
-    expect(
-      mount(
-        <FileTreeUnloadedDirectory datasetId={'ds000001'} directory={dir} />,
-      ),
-    ).toMatchSnapshot()
-  })
-  it('calls fetchMoreDirectory when clicked', () => {
-    const fetchMore = jest.fn()
-    const wrapper = mount(
-      <DatasetQueryContext.Provider value={{ fetchMore }}>
-        <FileTreeUnloadedDirectory datasetId={'ds000001'} directory={dir} />
-      </DatasetQueryContext.Provider>,
-    )
-    wrapper.find('button').simulate('click')
-    expect(fetchMore).toHaveBeenCalled()
-  })
-  describe('mergeNewFiles', () => {
-    it('should return a new object', () => {
-      const defaultObj = { dataset: { draft: { files: [] } } }
-      expect(
-        mergeNewFiles(defaultObj, { fetchMoreResult: { ...defaultObj } }),
-      ).not.toBe(defaultObj)
-    })
-    it('merges file lists', () => {
-      const dir = { filename: 'sub-01', directory: true }
-      const a = { id: '1234', filename: 'a', directory: false }
-      const b = { id: '5678', filename: 'b', directory: false }
-      const c = { id: '91011', filename: 'sub-01/c', directory: false }
-      const defaultObj = { dataset: { draft: { files: [a, b] } } }
-      const updatedObj = { dataset: { draft: { files: [c] } } }
-      expect(
-        mergeNewFiles(dir)(defaultObj, { fetchMoreResult: updatedObj }).dataset
-          .draft.files,
-      ).toEqual([a, b, c])
-    })
-    it('removes the existing directory facade when merging lists', () => {
-      const dir = { filename: 'sub-01', directory: true }
-      const a = { id: '1234', filename: 'a', directory: false }
-      const b = { id: '5678', filename: 'b', directory: false }
-      const c = { id: '91011', filename: 'sub-01/c', directory: false }
-      const defaultObj = { dataset: { draft: { files: [dir, a, b] } } }
-      const updatedObj = { dataset: { draft: { files: [c] } } }
-      expect(
-        mergeNewFiles(dir)(defaultObj, { fetchMoreResult: updatedObj }).dataset
-          .draft.files,
-      ).toEqual([a, b, c])
-    })
-    it('works with snapshots', () => {
-      const dir = { filename: 'sub-01', directory: true }
-      const a = { id: '1234', filename: 'a', directory: false }
-      const b = { id: '5678', filename: 'b', directory: false }
-      const c = { id: '91011', filename: 'sub-01/c', directory: false }
-      const defaultObj = { snapshot: { files: [dir, a, b] } }
-      const updatedObj = { snapshot: { files: [c] } }
-      expect(
-        mergeNewFiles(dir, '1.0.0')(defaultObj, { fetchMoreResult: updatedObj })
-          .snapshot.files,
-      ).toEqual([a, b, c])
-    })
-  })
-})

package/src/scripts/file-tree/__tests__/file-tree.spec.jsx

@@ -1,94 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import { ApolloProvider } from '@apollo/client'
-import FileTree, {
-  sortByFilename,
-  sortByName,
-  unescapePath,
-} from '../file-tree.jsx'
-
-// official Jest workaround for mocking methods not implemented in JSDOM
-window.matchMedia =
-  window.matchMedia ||
-  function() {
-    return {
-      matches: false,
-      addListener: jest.fn(),
-      removeListener: jest.fn(),
-    }
-  }
-
-/* eslint-disable */
-jest.mock('react-spring', () => ({
-  useSpring: jest.fn().mockImplementation(() => [{ mockProp: 1 }, jest.fn()]),
-  animated: {
-    path: () => <path data-testid="ANIMATED-COMPONENT" />,
-    div: () => <div data-testid="ANIMATED-COMPONENT" />,
-  },
-}))
-/* eslint-enable */
-
-describe('FileTree component', () => {
-  it('renders with default props', () => {
-    expect(mount(<FileTree />)).toMatchSnapshot()
-  })
-  it('expands and closes when clicked', () => {
-    // ApolloProvider isn't used in this test but must exist
-    // When enzyme supports hooks, this can be simplified
-    const wrapper = mount(
-      <ApolloProvider client={{}}>
-        <FileTree name="Top Level" />
-      </ApolloProvider>,
-    )
-    expect(
-      wrapper
-        .find('button.btn-file-folder > i.type-icon')
-        .hasClass('fa-folder-open'),
-    ).toBe(false)
-    wrapper.find('button').simulate('click')
-    expect(
-      wrapper
-        .find('button.btn-file-folder > i.type-icon')
-        .hasClass('fa-folder-open'),
-    ).toBe(true)
-    wrapper.find('button').simulate('click')
-    expect(
-      wrapper
-        .find('button.btn-file-folder > i.type-icon')
-        .hasClass('fa-folder-open'),
-    ).toBe(false)
-  })
-  describe('sortByFilename()', () => {
-    it('sorts the expected filename properties', () => {
-      expect(
-        sortByFilename(
-          { name: 'abc', filename: 'xyz' },
-          { name: 'xyz', filename: 'abc' },
-        ),
-      ).toBe(1)
-    })
-  })
-  describe('sortByName()', () => {
-    it('sorts the expected name properties', () => {
-      expect(
-        sortByName(
-          { name: 'abc', filename: 'xyz' },
-          { name: 'xyz', filename: 'abc' },
-        ),
-      ).toBe(-1)
-    })
-  })
-  describe('unescapePath()', () => {
-    it('does not alter an already escaped path', () => {
-      expect(unescapePath('sub-01/anat')).toBe('sub-01/anat')
-    })
-    it('does unescapes any : characters', () => {
-      expect(unescapePath('sub-01:anat')).toBe('sub-01/anat')
-    })
-    it('unescapes multiple : characters', () => {
-      expect(unescapePath('sub-01:anat:image.nii.gz')).toBe(
-        'sub-01/anat/image.nii.gz',
-      )
-    })
-  })
-})

package/src/scripts/file-tree/__tests__/file-viewer-type.spec.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import FileViewerType from '../file-viewer-type.jsx'
-
-describe('FileViewerType component', () => {
-  it('displays a fallback when an unknown file is specified', () => {
-    const wrapper = shallow(
-      <FileViewerType
-        path="unknown-file-extension.xyz"
-        data={new ArrayBuffer(128)}
-      />,
-    )
-    expect(wrapper.at(0).hasClass('file-viewer-fallback')).toBe(true)
-  })
-})

package/src/scripts/file-tree/__tests__/file.spec.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import File from '../file.jsx'
-import { CookiesProvider, Cookies } from 'react-cookie'
-
-describe('File component', () => {
-  it('renders with common props', () => {
-    expect(
-      shallow(<File datasetId="ds001" path="" filename="README" />),
-    ).toMatchSnapshot()
-  })
-  it('renders for dataset snapshots', () => {
-    expect(
-      shallow(
-        <File
-          datasetId="ds001"
-          snapshotTag="1.0.0"
-          path=""
-          filename="README"
-        />,
-      ),
-    ).toMatchSnapshot()
-  })
-  it('generates correct download links for top level files', () => {
-    const wrapper = shallow(
-      <File datasetId="ds001" path="" filename="README" />,
-    )
-    expect(wrapper.find('.download-file > a').prop('href')).toEqual(
-      '/crn/datasets/ds001/files/README',
-    )
-  })
-  it('generates correct download links for nested files', () => {
-    const wrapper = shallow(
-      <File
-        datasetId="ds001"
-        path="sub-01:anat"
-        filename="sub-01_T1w.nii.gz"
-      />,
-    )
-    expect(wrapper.find('.download-file > a').prop('href')).toEqual(
-      '/crn/datasets/ds001/files/sub-01:anat:sub-01_T1w.nii.gz',
-    )
-  })
-})

package/src/scripts/file-tree/__tests__/flat-to-tree.spec.js

@@ -1,55 +0,0 @@
-import { flatToTree } from '../flat-to-tree.js'
-
-const CHANGES = Object.freeze({
-  id: '3d9b15b3ef4e9da06e265e6078d3b4ddf8495102',
-  filename: 'CHANGES',
-  size: 39,
-})
-
-const nifti = Object.freeze({
-  id: '50512c7261fc006eb59bfd16f2a9d3140c9efe62',
-  filename: 'sub-01/anat/sub-01_T1w.nii.gz',
-  size: 311112,
-})
-
-const sub01Unloaded = Object.freeze({
-  id: 'directory:sub-01',
-  filename: 'sub-01',
-  size: 1,
-  directory: true,
-})
-
-const exampleFiles = [CHANGES, nifti]
-
-describe('FileTree', () => {
-  describe('flatToTree()', () => {
-    it('accepts an array and returns a tree', () => {
-      expect(flatToTree(exampleFiles)).toEqual({
-        name: '',
-        files: [CHANGES],
-        directories: [
-          {
-            name: 'sub-01',
-            path: 'sub-01',
-            files: [],
-            directories: [
-              {
-                name: 'anat',
-                path: 'sub-01:anat',
-                files: [{ ...nifti, filename: 'sub-01_T1w.nii.gz' }],
-                directories: [],
-              },
-            ],
-          },
-        ],
-      })
-    })
-    it('accepts directory stubs and returns them as directories', () => {
-      expect(flatToTree([CHANGES, sub01Unloaded])).toEqual({
-        name: '',
-        files: [CHANGES],
-        directories: [{ ...sub01Unloaded, name: sub01Unloaded.filename }],
-      })
-    })
-  })
-})

package/src/scripts/file-tree/file-tree-loading.jsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useSpring, animated } from 'react-spring'
-import styled from '@emotion/styled'
-
-const ProgressOuter = styled.div`
-  width: 100%;
-  height: 2px;
-  background-color: #f5f5f5;
-  margin: 10px 0;
-`
-const ProgressInner = styled(animated.div)`
-  height: 100%;
-  color: white;
-  line-height: 2px;
-  text-align: center;
-  width: 0%;
-`
-
-/**
- * Estimate time to fetch files
- * @param {Navigator} navigator
- * @returns {(size: number) => number}
- */
-export const estimateDuration = navigator => size => {
-  // One file is about 100 bytes
-  const estimatedBytes = size * 100
-  if ('connection' in navigator) {
-    // Estimate duration precisely if we can
-    const downlink = navigator.connection.downlink
-    return (estimatedBytes / (downlink * 1024)) * 1000 + 50
-  } else {
-    // Fallback estimate of a conservative general connection (10 mbps)
-    return (estimatedBytes / (10 * 1024)) * 1000 + 50
-  }
-}
-
-const FileTreeLoading = ({ size }) => {
-  const config = {
-    mass: 5,
-    tension: 2000,
-    friction: 200,
-    duration: estimateDuration(navigator)(size),
-  }
-  const props = useSpring({
-    config,
-    from: {
-      width: '0%',
-      backgroundColor: '#f5f5f5',
-    },
-    to: { width: '100%', backgroundColor: 'var(--secondary)' },
-  })
-  return (
-    <ProgressOuter>
-      <ProgressInner style={props} />
-    </ProgressOuter>
-  )
-}
-
-FileTreeLoading.propTypes = {
-  size: PropTypes.number,
-}
-
-export default FileTreeLoading

package/src/scripts/file-tree/file-tree-unloaded-directory.jsx

@@ -1,108 +0,0 @@
-import React, { useState, useContext, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import DatasetQueryContext from '../datalad/dataset/dataset-query-context.js'
-import FileTreeLoading from './file-tree-loading.jsx'
-import { gql } from '@apollo/client'
-
-export const DRAFT_FILES_QUERY = gql`
-  query dataset($datasetId: ID!, $filePrefix: String!) {
-    dataset(id: $datasetId) {
-      draft {
-        files(prefix: $filePrefix) {
-          id
-          key
-          filename
-          size
-          directory
-          annexed
-        }
-      }
-    }
-  }
-`
-
-export const SNAPSHOT_FILES_QUERY = gql`
-  query snapshot($datasetId: ID!, $snapshotTag: String!, $filePrefix: String!) {
-    snapshot(datasetId: $datasetId, tag: $snapshotTag) {
-      files(prefix: $filePrefix) {
-        id
-        key
-        filename
-        size
-        directory
-        annexed
-      }
-    }
-  }
-`
-
-export const mergeNewFiles = (directory, snapshotTag) => (
-  past,
-  { fetchMoreResult },
-) => {
-  // Deep clone the old dataset object
-  const newDatasetObj = JSON.parse(JSON.stringify(past))
-  const mergeNewFileFilter = f => f.id !== directory.id
-  // Remove ourselves from the array
-  if (snapshotTag) {
-    newDatasetObj.snapshot.files = newDatasetObj.snapshot.files.filter(
-      mergeNewFileFilter,
-    )
-    newDatasetObj.snapshot.files.push(...fetchMoreResult.snapshot.files)
-  } else {
-    newDatasetObj.dataset.draft.files = newDatasetObj.dataset.draft.files.filter(
-      mergeNewFileFilter,
-    )
-    newDatasetObj.dataset.draft.files.push(
-      ...fetchMoreResult.dataset.draft.files,
-    )
-  }
-  return newDatasetObj
-}
-
-export const fetchMoreDirectory = (
-  fetchMore,
-  datasetId,
-  snapshotTag,
-  directory,
-) =>
-  fetchMore({
-    query: snapshotTag ? SNAPSHOT_FILES_QUERY : DRAFT_FILES_QUERY,
-    variables: { datasetId, snapshotTag, filePrefix: directory.filename + '/' },
-    updateQuery: mergeNewFiles(directory, snapshotTag),
-  })
-
-const FileTreeUnloadedDirectory = ({ datasetId, snapshotTag, directory }) => {
-  const [loading, setLoading] = useState(false)
-  const [displayLoading, setDisplayLoading] = useState(false)
-  const { fetchMore } = useContext(DatasetQueryContext)
-  useEffect(() => {
-    if (loading) {
-      const timer = setTimeout(() => setDisplayLoading(true), 150)
-      return () => clearTimeout(timer)
-    }
-  }, [loading])
-  return (
-    <button
-      className="btn-file-folder"
-      onClick={() => {
-        // Show a loading state while we wait on the directory to stream in
-        setLoading(true)
-        fetchMoreDirectory(fetchMore, datasetId, snapshotTag, directory)
-        // No need to clear since this component is unmounted immediately
-      }}>
-      <i className={`type-icon fa fa-folder${loading ? '-open' : ''}`} />{' '}
-      {directory.filename}
-      <i className={`accordion-icon fa fa-caret${loading ? '-up' : '-down'}`} />
-      {displayLoading && <FileTreeLoading size={directory.size} />}
-    </button>
-  )
-}
-
-FileTreeUnloadedDirectory.propTypes = {
-  datasetId: PropTypes.string,
-  snapshotTag: PropTypes.string,
-  directory: PropTypes.object,
-}
-
-export default FileTreeUnloadedDirectory

package/src/scripts/file-tree/file-tree.jsx

@@ -1,133 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import File from './file.jsx'
-import UpdateFile from '../datalad/mutations/update-file.jsx'
-import DeleteDir from '../datalad/mutations/delete-dir.jsx'
-import FileTreeUnloadedDirectory from './file-tree-unloaded-directory.jsx'
-import { Media } from '../styles/media'
-
-export const sortByFilename = (a, b) => a.filename.localeCompare(b.filename)
-
-export const sortByName = (a, b) => a.name.localeCompare(b.name)
-
-export const unescapePath = path => path.replace(/:/g, '/')
-
-const isTopLevel = dir => !dir.path.includes(':')
-
-const FileTree = ({
-  datasetId,
-  snapshotTag = null,
-  path = '',
-  name = '',
-  files = [],
-  directories = [],
-  editMode = false,
-  defaultExpanded = false,
-  datasetPermissions,
-  toggleFileToDelete,
-  isFileToBeDeleted,
-  bulkDeleteButton,
-}) => {
-  const [expanded, setExpanded] = useState(defaultExpanded)
-  return (
-    <>
-      <button
-        className="btn-file-folder"
-        onClick={() => setExpanded(!expanded)}>
-        <i className={`type-icon fa fa-folder${expanded ? '-open' : ''}`} />{' '}
-        {name}
-        <i
-          className={`accordion-icon fa fa-caret${expanded ? '-up' : '-down'}`}
-        />
-      </button>
-      {expanded && (
-        <>
-          {editMode && (
-            <Media greaterThanOrEqual="medium">
-              <span className="filetree-editfile">
-                <UpdateFile
-                  datasetId={datasetId}
-                  path={unescapePath(path)}
-                  multiple>
-                  <i className="fa fa-plus" /> Add Files
-                </UpdateFile>
-                <UpdateFile
-                  datasetId={datasetId}
-                  path={unescapePath(path)}
-                  tooltip={`Choose a folder to be added to /${name}. Adding a folder with an existing name will overwrite that folder.`}
-                  directory>
-                  <i className="fa fa-plus" /> Add Directory
-                </UpdateFile>
-                {bulkDeleteButton || (
-                  <DeleteDir datasetId={datasetId} path={path} />
-                )}
-              </span>
-            </Media>
-          )}
-          <ul className="child-files">
-            {files.sort(sortByFilename).map((file, index) => (
-              <li className="clearfix" key={index}>
-                <File
-                  id={file.id}
-                  datasetId={datasetId}
-                  snapshotTag={snapshotTag}
-                  path={path}
-                  editMode={editMode}
-                  toggleFileToDelete={toggleFileToDelete}
-                  isFileToBeDeleted={isFileToBeDeleted}
-                  {...file}
-                  annexKey={file.key}
-                  datasetPermissions={datasetPermissions}
-                />
-              </li>
-            ))}
-            {directories.sort(sortByName).map((dir, index) => {
-              if ('files' in dir || 'directories' in dir) {
-                // Loaded directory
-                return (
-                  <li className="clearfix" key={index}>
-                    <FileTree
-                      datasetId={datasetId}
-                      snapshotTag={snapshotTag}
-                      editMode={editMode}
-                      defaultExpanded={isTopLevel(dir)}
-                      datasetPermissions={datasetPermissions}
-                      toggleFileToDelete={toggleFileToDelete}
-                      isFileToBeDeleted={isFileToBeDeleted}
-                      {...dir}
-                    />
-                  </li>
-                )
-              } else {
-                // Unloaded
-                return (
-                  <li className="clearfix" key={index}>
-                    <FileTreeUnloadedDirectory
-                      datasetId={datasetId}
-                      snapshotTag={snapshotTag}
-                      directory={dir}
-                    />
-                  </li>
-                )
-              }
-            })}
-          </ul>
-        </>
-      )}
-    </>
-  )
-}
-
-FileTree.propTypes = {
-  datasetId: PropTypes.string,
-  files: PropTypes.array,
-  snapshotTag: PropTypes.string,
-  path: PropTypes.string,
-  name: PropTypes.string,
-  directories: PropTypes.array,
-  editMode: PropTypes.bool,
-  defaultExpanded: PropTypes.bool,
-  datasetPermissions: PropTypes.object,
-}
-
-export default FileTree

package/src/scripts/file-tree/file-view.jsx

@@ -1,31 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import Spinner from '../common/partials/spinner.jsx'
-import { apiPath } from './file.jsx'
-import FileViewerType from './file-viewer-type.jsx'
-
-const FileView = ({ datasetId, snapshotTag, path }) => {
-  const url = apiPath(datasetId, snapshotTag, path)
-  const [data, setData] = useState(new ArrayBuffer(0))
-  const [loading, setLoading] = useState(true)
-
-  const fetchUrl = async () => {
-    const response = await fetch(url)
-    const data = await response.arrayBuffer()
-    setData(data)
-    setLoading(false)
-  }
-
-  useEffect(() => {
-    if (loading) {
-      fetchUrl()
-    }
-  })
-
-  if (loading) {
-    return <Spinner active text="Loading File" />
-  } else {
-    return <FileViewerType path={path} url={url} data={data} />
-  }
-}
-
-export default FileView

package/src/scripts/file-tree/file-viewer-type.jsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import FileViewerText from './viewers/file-viewer-text.jsx'
-import FileViewerNifti from './viewers/file-viewer-nifti.jsx'
-import FileViewerJson from './viewers/file-viewer-json.jsx'
-import FileViewerTsv from './viewers/file-viewer-tsv.jsx'
-import FileViewerCsv from './viewers/file-viewer-csv.jsx'
-import FileViewerHtml from './viewers/file-viewer-html.jsx'
-
-/**
- * Choose the right viewer for each file type
- */
-const FileViewerType = ({ path, url, data }) => {
-  if (
-    path.endsWith('README') ||
-    path.endsWith('CHANGES') ||
-    path.endsWith('.txt')
-  ) {
-    return <FileViewerText data={data} />
-  } else if (path.endsWith('.nii.gz') || path.endsWith('.nii')) {
-    return <FileViewerNifti imageUrl={url} />
-  } else if (path.endsWith('.json')) {
-    return <FileViewerJson data={data} />
-  } else if (path.endsWith('.tsv')) {
-    return <FileViewerTsv data={data} />
-  } else if (path.endsWith('.csv')) {
-    return <FileViewerCsv data={data} />
-  } else if (path.endsWith('.html')) {
-    return <FileViewerHtml data={data} />
-  } else {
-    return (
-      <div className="file-viewer-fallback">
-        This file must be downloaded to view it.
-      </div>
-    )
-  }
-}
-
-FileViewerType.propTypes = {
-  path: PropTypes.string,
-  url: PropTypes.string,
-  data: PropTypes.instanceOf(ArrayBuffer),
-}
-
-export default FileViewerType