@openneuro/app 4.11.0 → 4.12.0-alpha.1

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

@@ -1,11 +1,7 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { MockedProvider } from '@apollo/client/testing'
-import FileTree, {
-  sortByFilename,
-  sortByName,
-  unescapePath,
-} from '../file-tree.jsx'
+import FileTree, { unescapePath, fileTreeLevels } from '../file-tree'
 
 // official Jest workaround for mocking methods not implemented in JSDOM
 window.matchMedia =
@@ -18,15 +14,110 @@ window.matchMedia =
     }
   }
 
-/* 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" />,
+const datasetFiles = [
+  {
+    id: 'b42624c6aea63fc5e3f6f3e712d9e44adc4dbfdc',
+    key: '834b88a80109f1b38e0ab85999090170889469ce',
+    filename: 'CHANGES',
+    size: 59,
+    directory: false,
+    annexed: false,
   },
-}))
-/* eslint-enable */
+  {
+    id: '63888a199a5ce37377b1cd708cda59577dad218f',
+    key: 'fa84e5f958ec72d42b3e196e592f6db9f7104b19',
+    filename: 'README',
+    size: 709,
+    directory: false,
+    annexed: false,
+  },
+  {
+    id: 'a2922b427c5c997e77ce058e0ce57ffd17123a7f',
+    key: '0b1856b91c11f67098ce60114417a62dd55730a5',
+    filename: 'dataset_description.json',
+    size: 172,
+    directory: false,
+    annexed: false,
+  },
+  {
+    id: 'a6378eea201d9cad639e0bee328e03132d30489d',
+    key: null,
+    filename: 'sub-01',
+    size: 0,
+    directory: true,
+    annexed: false,
+  },
+]
+
+const anatDir = {
+  id: '9703f3f6b4137c2b86a3a712eb34d78bdec9fd72',
+  key: null,
+  filename: 'sub-01:anat',
+  size: 0,
+  directory: true,
+  annexed: false,
+}
+
+const niftiFile = {
+  id: '69fd3617b27125c433ea5f8e0e2052c31828c253',
+  key: 'MD5E-s311112--bc8bbbacfd2ff823c2047ead1afec9b3.nii.gz',
+  filename: 'sub-01:anat:sub-01_T1w.nii.gz',
+  size: 311112,
+  directory: false,
+  annexed: true,
+}
+
+describe('fileTreeLevels()', () => {
+  it('handles top level files correctly', () => {
+    const { childFiles, currentFiles } = fileTreeLevels('', datasetFiles)
+    expect(currentFiles).toEqual(
+      expect.arrayContaining([
+        currentFiles.find(
+          f => f.id === 'a2922b427c5c997e77ce058e0ce57ffd17123a7f',
+        ),
+      ]),
+    )
+    expect(childFiles).toEqual({})
+  })
+  it('passes childFiles to the next level', () => {
+    const levelOneFiles = [...datasetFiles, anatDir]
+    const { childFiles, currentFiles } = fileTreeLevels('', levelOneFiles)
+    expect(currentFiles).toEqual(
+      expect.arrayContaining([
+        currentFiles.find(
+          f => f.id === 'a2922b427c5c997e77ce058e0ce57ffd17123a7f',
+        ),
+      ]),
+    )
+    expect(childFiles['sub-01']).toEqual(expect.arrayContaining([anatDir]))
+  })
+  it('passes two level deep childFiles to the next level', () => {
+    const levelTwoFiles = [...datasetFiles, anatDir, niftiFile]
+    const { childFiles, currentFiles } = fileTreeLevels('', levelTwoFiles)
+    expect(currentFiles).toEqual(
+      expect.arrayContaining([
+        currentFiles.find(
+          f => f.id === 'a2922b427c5c997e77ce058e0ce57ffd17123a7f',
+        ),
+      ]),
+    )
+    expect(childFiles['sub-01']).toEqual(expect.arrayContaining([niftiFile]))
+  })
+  it('passes two level deep childFiles to the next level', () => {
+    const levelTwoFiles = [anatDir, niftiFile]
+    const { childFiles, currentFiles } = fileTreeLevels('sub-01', levelTwoFiles)
+    expect(currentFiles).toEqual(
+      expect.arrayContaining([
+        currentFiles.find(
+          f => f.id === '9703f3f6b4137c2b86a3a712eb34d78bdec9fd72',
+        ),
+      ]),
+    )
+    expect(childFiles['sub-01:anat']).toEqual(
+      expect.arrayContaining([niftiFile]),
+    )
+  })
+})
 
 describe('FileTree component', () => {
   it('renders with default props', () => {
@@ -56,26 +147,6 @@ describe('FileTree component', () => {
       'fa-folder',
     )
   })
-  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')

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

@@ -1,15 +1,14 @@
 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'
 import { AccordionTab } from '@openneuro/components/accordion'
 
 export const DRAFT_FILES_QUERY = gql`
-  query dataset($datasetId: ID!, $filePrefix: String!) {
+  query dataset($datasetId: ID!, $tree: String!) {
     dataset(id: $datasetId) {
       draft {
-        files(prefix: $filePrefix) {
+        files(tree: $tree) {
           id
           key
           filename
@@ -23,9 +22,9 @@ export const DRAFT_FILES_QUERY = gql`
 `
 
 export const SNAPSHOT_FILES_QUERY = gql`
-  query snapshot($datasetId: ID!, $snapshotTag: String!, $filePrefix: String!) {
+  query snapshot($datasetId: ID!, $snapshotTag: String!, $tree: String!) {
     snapshot(datasetId: $datasetId, tag: $snapshotTag) {
-      files(prefix: $filePrefix) {
+      files(tree: $tree) {
         id
         key
         filename
@@ -37,24 +36,30 @@ export const SNAPSHOT_FILES_QUERY = gql`
   }
 `
 
+/**
+ * Prepend paths to the tree object returned to get absolute filenames
+ */
+export const nestFiles = path => file => ({
+  ...file,
+  filename: `${path}:${file.filename}`,
+})
+
+/**
+ * Merge cached dataset files with newly received data
+ */
 export const mergeNewFiles =
   (directory, snapshotTag) =>
   (past, { fetchMoreResult }) => {
     // Deep clone the old dataset object
+    const path = directory.filename
     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,
-      )
-    }
+    const newFiles = snapshotTag
+      ? newDatasetObj.snapshot.files
+      : newDatasetObj.dataset.draft.files
+    const fetchMoreData = snapshotTag
+      ? fetchMoreResult.snapshot
+      : fetchMoreResult.dataset.draft
+    newFiles.push(...fetchMoreData.files.map(nestFiles(path)))
     return newDatasetObj
   }
 
@@ -66,31 +71,21 @@ export const fetchMoreDirectory = (
 ) =>
   fetchMore({
     query: snapshotTag ? SNAPSHOT_FILES_QUERY : DRAFT_FILES_QUERY,
-    variables: { datasetId, snapshotTag, filePrefix: directory.filename + '/' },
+    variables: { datasetId, snapshotTag, tree: directory.id },
     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 (
     <AccordionTab
-      label={directory.filename}
+      label={directory.filename.split(':').pop()}
       accordionStyle="file-tree"
       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
       }}>
-      <FileTreeLoading size={directory.size} />
+      <div>Loading...</div>
     </AccordionTab>
   )
 }

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

@@ -0,0 +1,158 @@
+import React from 'react'
+import File from './file'
+import UpdateFile from '../mutations/update-file.jsx'
+import DeleteDir from '../mutations/delete-dir.jsx'
+import FileTreeUnloadedDirectory from './file-tree-unloaded-directory.jsx'
+import { Media } from '../../styles/media'
+import { AccordionTab } from '@openneuro/components/accordion'
+import { DatasetFile } from '../../types/dataset-file'
+
+export const unescapePath = (path: string): string => path.replace(/:/g, '/')
+
+interface FileTreeProps {
+  datasetId: string
+  snapshotTag: string
+  path: string
+  name: string
+  files: DatasetFile[]
+  editMode: boolean
+  defaultExpanded: boolean
+  datasetPermissions: any
+  toggleFileToDelete: ({ id, path, filename }) => void
+  isFileToBeDeleted: (id: string) => boolean
+  bulkDeleteButton: JSX.Element
+}
+
+export function fileTreeLevels(
+  path: string,
+  files: DatasetFile[],
+): { currentFiles: DatasetFile[]; childFiles: Record<string, DatasetFile[]> } {
+  // Split files into a tree for this level and child levels
+  // Special cases for root (path === '')
+  const currentFiles = []
+  const childFiles = {}
+  for (const f of files) {
+    // Any paths in this filename below the current path value
+    const lowerPath = f.filename.substring(`${path}:`.length)
+    if (path === '' ? f.filename.includes(':') : lowerPath.includes(':')) {
+      // At the top level, use the directory component (first segment)
+      // Below that, use all paths before the filename (sub-01:anat) for (sub-01:anat:sub-01_T1w.nii.gz)
+      const childPath =
+        path === ''
+          ? f.filename.split(':')[0]
+          : f.filename.split(':').slice(0, -1).join(':')
+      if (childFiles.hasOwnProperty(childPath)) {
+        childFiles[childPath].push(f)
+      } else {
+        childFiles[childPath] = [f]
+      }
+    } else {
+      currentFiles.push(f)
+    }
+  }
+  return { currentFiles, childFiles }
+}
+
+const FileTree = ({
+  datasetId,
+  snapshotTag = null,
+  path = '',
+  name = '',
+  files = [],
+  editMode = false,
+  defaultExpanded = false,
+  datasetPermissions,
+  toggleFileToDelete,
+  isFileToBeDeleted,
+  bulkDeleteButton,
+}: FileTreeProps): JSX.Element => {
+  const { childFiles, currentFiles } = fileTreeLevels(path, files)
+  return (
+    <AccordionTab
+      className=""
+      label={name}
+      accordionStyle="file-tree"
+      startOpen={defaultExpanded}>
+      {editMode && (
+        <Media className="filetree-dir-tools" greaterThanOrEqual="medium">
+          <span className="filetree-dir">
+            <UpdateFile
+              datasetId={datasetId}
+              path={unescapePath(path)}
+              tooltip={`Choose one or more files to be added to ${name}.`}
+              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} name={name} />
+            )}
+          </span>
+        </Media>
+      )}
+      <ul className="child-files">
+        {currentFiles.map((file, index) => {
+          if (file.directory) {
+            if (childFiles.hasOwnProperty(file.filename)) {
+              return (
+                <li className="clearfix filetree-item filetree-dir" key={index}>
+                  <FileTree
+                    datasetId={datasetId}
+                    snapshotTag={snapshotTag}
+                    editMode={editMode}
+                    defaultExpanded={true}
+                    datasetPermissions={datasetPermissions}
+                    toggleFileToDelete={toggleFileToDelete}
+                    isFileToBeDeleted={isFileToBeDeleted}
+                    files={childFiles[file.filename]}
+                    path={file.filename}
+                    name={file.filename.split(':').pop()}
+                    bulkDeleteButton={bulkDeleteButton}
+                  />
+                </li>
+              )
+            } else {
+              return (
+                <li className="clearfix filetree-item filetree-dir" key={index}>
+                  <FileTreeUnloadedDirectory
+                    datasetId={datasetId}
+                    snapshotTag={snapshotTag}
+                    directory={file}
+                  />
+                </li>
+              )
+            }
+          } else {
+            return (
+              <li className="clearfix filetree-item filetree-file" key={index}>
+                <File
+                  id={file.id}
+                  datasetId={datasetId}
+                  snapshotTag={snapshotTag}
+                  path={path}
+                  size={file.size}
+                  editMode={editMode}
+                  toggleFileToDelete={toggleFileToDelete}
+                  isFileToBeDeleted={isFileToBeDeleted}
+                  filename={file.filename.split(':').pop()}
+                  annexKey={file.key}
+                  datasetPermissions={datasetPermissions}
+                  annexed={file.annexed}
+                  isMobile={false}
+                />
+              </li>
+            )
+          }
+        })}
+      </ul>
+    </AccordionTab>
+  )
+}
+
+export default FileTree

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

@@ -81,7 +81,7 @@ export const apiPath = (datasetId, snapshotTag, filePath) => {
 
 interface FileProps {
   id: string
-  size: number
+  size: bigint
   datasetId: string
   path: string
   filename: string
@@ -99,7 +99,7 @@ interface FileProps {
     id: string
     path: string
     filename: string
-  }) => boolean
+  }) => void
   isFileToBeDeleted: (id: string) => boolean
 }
 

package/src/scripts/dataset/files/{files.jsx → files.tsx}

@@ -1,13 +1,13 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { flatToTree } from './flat-to-tree.js'
-import FileTree from './file-tree.jsx'
+import FileTree from './file-tree'
 import { Media } from '../../styles/media'
 import { useMutation, gql } from '@apollo/client'
 import { WarnButton } from '@openneuro/components/warn-button'
 import { AccordionWrap } from '@openneuro/components/accordion'
 import styled from '@emotion/styled'
 import { Tooltip } from '@openneuro/components/tooltip'
+import { DatasetFile } from '../../types/dataset-file'
 import bytes from 'bytes'
 
 const FileTreeMeta = styled.span`
@@ -33,6 +33,16 @@ const DELETE_FILES = gql`
   }
 `
 
+interface FilesProps {
+  datasetId: string
+  snapshotTag: string
+  datasetName: string
+  files: DatasetFile[]
+  editMode: boolean
+  datasetPermissions: any
+  summary: any
+}
+
 const Files = ({
   datasetId,
   snapshotTag,
@@ -41,14 +51,14 @@ const Files = ({
   editMode = false,
   datasetPermissions,
   summary,
-}) => {
+}: FilesProps): JSX.Element => {
   const [filesToDelete, setFilesToDelete] = useState({})
   const [isDeleting, setIsDeleting] = useState(false)
   const [deleteFiles] = useMutation(DELETE_FILES)
 
-  const isFileToBeDeleted = id => id in filesToDelete
+  const isFileToBeDeleted = (id: string): boolean => id in filesToDelete
 
-  const toggleFileToDelete = ({ id, path, filename }) =>
+  const toggleFileToDelete = ({ id, path, filename }): void =>
     setFilesToDelete(prevFilesToDelete => {
       if (isFileToBeDeleted(id)) {
         delete prevFilesToDelete[id]
@@ -60,10 +70,10 @@ const Files = ({
       }
     })
 
-  const bulkDelete = () => {
+  const bulkDelete = (): void => {
     if (Object.values(filesToDelete).length) {
       setIsDeleting(true)
-      deleteFiles({
+      void deleteFiles({
         variables: { datasetId, files: Object.values(filesToDelete) },
       }).then(() => {
         setIsDeleting(false)
@@ -72,7 +82,6 @@ const Files = ({
     }
   }
 
-  const fileTree = flatToTree(files)
   const disableBtn = Object.values(filesToDelete).length ? null : true
   const filesCount = Object.values(filesToDelete).length
   const bulkDeleteButton =
@@ -88,11 +97,11 @@ const Files = ({
             </Tooltip>
           ) : (
             <WarnButton
-              message={'Bulk Delete (' + filesCount + ')'}
+              message={`Bulk Delete (${filesCount})`}
               icon="fas fa-dumpster"
               iconOnly={true}
               className="edit-file"
-              tooltip={'Delete ' + filesCount}
+              tooltip={`Delete ${filesCount}`}
               onConfirmedClick={bulkDelete}
             />
           )}
@@ -108,7 +117,7 @@ const Files = ({
               datasetId={datasetId}
               snapshotTag={snapshotTag}
               path={''}
-              {...fileTree}
+              files={files}
               name={datasetName}
               editMode={editMode}
               defaultExpanded={false}
@@ -133,7 +142,7 @@ const Files = ({
               datasetId={datasetId}
               snapshotTag={snapshotTag}
               path={''}
-              {...fileTree}
+              files={files}
               name={datasetName}
               editMode={editMode}
               defaultExpanded={true}

package/src/scripts/types/dataset-file.ts

@@ -0,0 +1,11 @@
+// Temporary type representing the GraphQL DatasetFile type
+// TODO - Derive this from the GraphQL schema
+export interface DatasetFile {
+  id: string
+  key?: string
+  filename: string
+  size?: bigint
+  annexed?: boolean
+  urls?: string[]
+  directory?: boolean
+}

package/src/scripts/dataset/files/__tests__/file-tree-loading.spec.jsx

@@ -1,18 +0,0 @@
-import { estimateDuration } from '../file-tree-loading.jsx'
-
-describe('FileTreeLoading component', () => {
-  describe('estimateDuration()', () => {
-    it('returns an estimate if navigator has a downlink set', () => {
-      const mockNavigator = {
-        connection: {
-          downlink: 20,
-        },
-      }
-      expect(estimateDuration(mockNavigator)(250)).toEqual(1270.703125)
-    })
-    it('returns an estimate if navigator does not have a downlink', () => {
-      const mockNavigator = {}
-      expect(estimateDuration(mockNavigator)(250)).toEqual(2491.40625)
-    })
-  })
-})

package/src/scripts/dataset/files/__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/dataset/files/file-tree-loading.jsx

@@ -1,65 +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 (navigator && '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 navRef = typeof navigator === 'undefined' ? undefined : navigator
-  const config = {
-    mass: 5,
-    tension: 2000,
-    friction: 200,
-    duration: estimateDuration(navRef)(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