@openneuro/app 4.5.0 → 4.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -19,10 +19,10 @@
     "@elastic/apm-rum": "5.9.1",
     "@emotion/react": "11.6.0",
     "@emotion/styled": "11.6.0",
-    "@openneuro/client": "^4.5.0",
-    "@openneuro/components": "^4.5.0",
+    "@openneuro/client": "^4.5.1",
+    "@openneuro/components": "^4.5.1",
     "babel-runtime": "^6.26.0",
-    "bids-validator": "1.9.2",
+    "bids-validator": "1.9.3",
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
     "core-js": "^3.3.2",
@@ -116,5 +116,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8771d59f40e642de9313468e8764f91fb0d811b2"
+  "gitHead": "92a2879d0f00400c240bfe3319f26c38db8ef866"
 }

package/src/scripts/{refactor_2021/authentication → authentication}/loginUrls.ts

@@ -1,4 +1,4 @@
-import { config } from '../../config'
+import { config } from '../config'
 
 export default {
   google: `${config.api}auth/google`,

package/src/scripts/{refactor_2021 → common}/containers/header.tsx

@@ -1,23 +1,23 @@
 import React, { FC, useContext } from 'react'
 import useState from 'react-usestateref'
-import UploaderContext from '../uploader/uploader-context.js'
-import UploadProgress from '../uploader/upload-progress.jsx'
+import UploaderContext from '../../uploader/uploader-context.js'
+import UploadProgress from '../../uploader/upload-progress.jsx'
 import { Header, LandingExpandedHeader } from '@openneuro/components/header'
 import { Input } from '@openneuro/components/input'
-import ModalitySelect from '../search/inputs/modality-select'
-import { SearchParamsCtx } from '../search/search-params-ctx'
-import initialSearchParams from '../search/initial-search-params'
-import { UserModalOpenCtx } from '../user-login-modal-ctx'
+import ModalitySelect from '../../search/inputs/modality-select'
+import { SearchParamsCtx } from '../../search/search-params-ctx'
+import initialSearchParams from '../../search/initial-search-params'
+import { UserModalOpenCtx } from '../../utils/user-login-modal-ctx'
 import { useLocation, useHistory } from 'react-router-dom'
 import { useCookies } from 'react-cookie'
-import signOut from '../authentication/signOut'
-import { getUnexpiredProfile } from '../authentication/profile'
-import FreshdeskWidget from '../freshdesk-widget'
-import AggregateCountsContainer from '../aggregate-queries/aggregate-counts-container'
-import loginUrls from '../authentication/loginUrls'
-import UploaderView from '../uploader/uploader-view.jsx'
-import UploadButton from '../uploader/upload-button.jsx'
-import UploadProgressButton from '../uploader/upload-progress-button.jsx'
+import signOut from '../../authentication/signOut'
+import { getUnexpiredProfile } from '../../authentication/profile'
+import FreshdeskWidget from '../partials/freshdesk-widget'
+import AggregateCountsContainer from '../../pages/front-page/aggregate-queries/aggregate-counts-container'
+import loginUrls from '../../authentication/loginUrls'
+import UploaderView from '../../uploader/uploader-view.jsx'
+import UploadButton from '../../uploader/upload-button.jsx'
+import UploadProgressButton from '../../uploader/upload-progress-button.jsx'
 const HeaderContainer: FC = () => {
   const history = useHistory()
 
@@ -134,7 +134,9 @@ const HeaderContainer: FC = () => {
             onSearch={() => {
               handleSubmit()
             }}
-            clearSearchParams={() => { clearSearchParams() }}
+            clearSearchParams={() => {
+              clearSearchParams()
+            }}
           />
         )}
       />

package/src/scripts/{datalad/fragments → common/partials}/freshdesk-widget.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useCookies } from 'react-cookie'
-import { getProfile } from '../../refactor_2021/authentication/profile'
+import { getProfile } from '../../authentication/profile'
 import { config } from '../../config'
 
 const buildCustomQuery = (customText, prepopulatedFields) => {

package/src/scripts/{refactor_2021/dataset → dataset}/comments/comments.jsx

@@ -5,7 +5,7 @@ import Comment from './comment.jsx'
 import CommentEditor from './comment-editor.jsx'
 import LoggedIn from '../../authentication/logged-in.jsx'
 import LoggedOut from '../../authentication/logged-out.jsx'
-import ErrorBoundary from '../../../errors/errorBoundary.jsx'
+import ErrorBoundary from '../../errors/errorBoundary.jsx'
 
 import ToastContent from '../../common/partials/toast-content.jsx'
 

package/src/scripts/{refactor_2021/dataset → dataset}/dataset-query.jsx

@@ -1,28 +1,28 @@
-import { apm } from '../../apm'
+import { apm } from '../apm'
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { useQuery, gql, useApolloClient } from '@apollo/client'
 import { Loading } from '@openneuro/components/loading'
 
-import DatasetQueryContext from '../../datalad/dataset/dataset-query-context.js'
-import DatasetContext from '../../datalad/dataset/dataset-context.js'
+import DatasetQueryContext from '../datalad/dataset/dataset-query-context.js'
+import DatasetContext from '../datalad/dataset/dataset-context.js'
 import DatasetRoutes from './dataset-routes'
-import FilesSubscription from '../../datalad/subscriptions/files-subscription.jsx'
-import usePermissionsSubscription from '../../datalad/subscriptions/usePermissionsSubscription'
-import useSnapshotsUpdatedSubscriptions from '../../datalad/subscriptions/useSnapshotsUpdatedSubscriptions'
+import FilesSubscription from '../datalad/subscriptions/files-subscription.jsx'
+import usePermissionsSubscription from '../datalad/subscriptions/usePermissionsSubscription'
+import useSnapshotsUpdatedSubscriptions from '../datalad/subscriptions/useSnapshotsUpdatedSubscriptions'
 import useDatasetDeletedSubscription, {
   datasetDeletedToast,
-} from '../../datalad/subscriptions/useDatasetDeletedSubscription.jsx'
-import useDraftSubscription from '../../datalad/subscriptions/useDraftSubscription.js'
-import * as DatasetQueryFragments from '../../datalad/dataset/dataset-query-fragments.js'
-import { DATASET_COMMENTS } from '../../datalad/dataset/comments-fragments.js'
+} from '../datalad/subscriptions/useDatasetDeletedSubscription.jsx'
+import useDraftSubscription from '../datalad/subscriptions/useDraftSubscription.js'
+import * as DatasetQueryFragments from '../datalad/dataset/dataset-query-fragments.js'
+import { DATASET_COMMENTS } from '../datalad/dataset/comments-fragments.js'
 import ErrorBoundary, {
   ErrorBoundaryAssertionFailureException,
-} from '../../errors/errorBoundary.jsx'
-import DatasetRedirect from '../../datalad/routes/dataset-redirect'
-import { trackAnalytics } from '../../utils/datalad'
-import FourOFourPage from '../../errors/404page'
-import FourOThreePage from '../../errors/403page'
+} from '../errors/errorBoundary.jsx'
+import DatasetRedirect from '../datalad/routes/dataset-redirect'
+import { trackAnalytics } from '../utils/datalad'
+import FourOFourPage from '../errors/404page'
+import FourOThreePage from '../errors/403page'
 
 /**
  * Generate the dataset page query

package/src/scripts/{refactor_2021/dataset → dataset}/download/download-datalad.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { getConfig, config } from '../../../config'
+import { getConfig, config } from '../../config'
 import ShellExample from './shell-example.jsx'
 import {
   getUnexpiredProfile,

package/src/scripts/{refactor_2021/dataset → dataset}/download/download-native.js

@@ -9,7 +9,7 @@ import {
   downloadCompleteToast,
   requestFailureToast,
 } from './native-file-toast.jsx'
-import { apm } from '../../../apm.js'
+import { apm } from '../../apm.js'
 import { downloadDataset } from './download-query'
 
 /**

package/src/scripts/{refactor_2021/dataset → dataset}/download/download-s3.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ShellExample from './shell-example.jsx'
-import { getConfig } from '../../../config'
+import { getConfig } from '../../config'
 
 export const DownloadSampleS3 = ({ datasetId, s3Bucket }) => (
   <ShellExample>

package/src/scripts/{refactor_2021/dataset → dataset}/draft-container.tsx

@@ -7,7 +7,7 @@ import parseISO from 'date-fns/parseISO'
 
 import Validation from '../validation/validation.jsx'
 import Files from './files'
-import { config } from '../../config'
+import { config } from '../config'
 import {
   getUnexpiredProfile,
   hasEditPermissions,

package/src/scripts/{refactor_2021/dataset → dataset}/files/__tests__/__snapshots__/file.spec.jsx.snap

@@ -22,7 +22,7 @@ exports[`File component renders for dataset snapshots 1`] = `
       <span
         class=" "
         data-flow="up"
-        data-tooltip="Download"
+        data-tooltip="Download: 500B"
       >
         <span
           class="edit-file download-file"
@@ -83,7 +83,7 @@ exports[`File component renders with common props 1`] = `
       <span
         class=" "
         data-flow="up"
-        data-tooltip="Download"
+        data-tooltip="Download: 500B"
       >
         <span
           class="edit-file download-file"

package/src/scripts/{refactor_2021/dataset → dataset}/files/__tests__/file-tree-unloaded-directory.spec.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
-import DatasetQueryContext from '../../../../datalad/dataset/dataset-query-context.js'
+import DatasetQueryContext from '../../../datalad/dataset/dataset-query-context.js'
 import FileTreeUnloadedDirectory, {
   mergeNewFiles,
 } from '../file-tree-unloaded-directory.jsx'

package/src/scripts/{refactor_2021/dataset → dataset}/files/__tests__/file.spec.jsx

@@ -1,25 +1,31 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
-import File from '../file.jsx'
+import File from '../file'
 
 describe('File component', () => {
   it('renders with common props', () => {
     const { asFragment } = render(
-      <File datasetId="ds001" path="" filename="README" />,
+      <File datasetId="ds001" path="" filename="README" size={500} />,
       { wrapper: MemoryRouter },
     )
     expect(asFragment()).toMatchSnapshot()
   })
   it('renders for dataset snapshots', () => {
     const { asFragment } = render(
-      <File datasetId="ds001" snapshotTag="1.0.0" path="" filename="README" />,
+      <File
+        datasetId="ds001"
+        snapshotTag="1.0.0"
+        path=""
+        filename="README"
+        size={500}
+      />,
       { wrapper: MemoryRouter },
     )
     expect(asFragment()).toMatchSnapshot()
   })
   it('generates correct download links for top level files', () => {
-    render(<File datasetId="ds001" path="" filename="README" />, {
+    render(<File datasetId="ds001" path="" filename="README" size={500} />, {
       wrapper: MemoryRouter,
     })
     expect(screen.getByRole('link', { name: 'download file' })).toHaveAttribute(
@@ -33,6 +39,7 @@ describe('File component', () => {
         datasetId="ds001"
         path="sub-01:anat"
         filename="sub-01_T1w.nii.gz"
+        size={2000000}
       />,
       { wrapper: MemoryRouter },
     )

package/src/scripts/{refactor_2021/dataset → dataset}/files/file-display.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 import FileView from './file-view.jsx'
-import { apiPath } from './file.jsx'
+import { apiPath } from './file'
 import styled from '@emotion/styled'
-import { Media } from '../../../styles/media'
+import { Media } from '../../styles/media'
 
 const PathBreadcrumb = styled.div`
   font-size: 14px;

package/src/scripts/{refactor_2021/dataset → dataset}/files/file-tree-unloaded-directory.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import DatasetQueryContext from '../../../datalad/dataset/dataset-query-context.js'
+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'

package/src/scripts/{refactor_2021/dataset → dataset}/files/file-tree.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import File from './file.jsx'
+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 { Media } from '../../styles/media'
 import { AccordionTab } from '@openneuro/components/accordion'
 
 export const sortByFilename = (a, b) => a.filename.localeCompare(b.filename)
@@ -66,6 +66,7 @@ const FileTree = ({
               datasetId={datasetId}
               snapshotTag={snapshotTag}
               path={path}
+              size={file.size}
               editMode={editMode}
               toggleFileToDelete={toggleFileToDelete}
               isFileToBeDeleted={isFileToBeDeleted}

package/src/scripts/{refactor_2021/dataset → dataset}/files/file-view.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Loading } from '@openneuro/components/loading'
-import { apiPath } from './file.jsx'
+import { apiPath } from './file'
 import FileViewerType from './file-viewer-type.jsx'
 
 const FileView = ({ datasetId, snapshotTag, path }) => {

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

@@ -1,9 +1,9 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import bytes from 'bytes'
 import { Link } from 'react-router-dom'
 import UpdateFile from '../mutations/update-file.jsx'
 import DeleteFile from '../mutations/delete-file.jsx'
-import { Media } from '../../../styles/media'
+import { Media } from '../../styles/media'
 import RemoveAnnexObject from '../mutations/remove-annex-object.jsx'
 import FlagAnnexObject from '../mutations/flag-annex-object.jsx'
 import { isAdmin } from '../../authentication/admin-user.jsx'
@@ -79,8 +79,33 @@ export const apiPath = (datasetId, snapshotTag, filePath) => {
   return `/crn/datasets/${datasetId}${snapshotPath}/files/${filePath}`
 }
 
+interface FileProps {
+  id: string
+  size: number
+  datasetId: string
+  path: string
+  filename: string
+  snapshotTag: string
+  editMode: boolean
+  isMobile: boolean
+  annexed: boolean
+  annexKey: string
+  datasetPermissions: string[]
+  toggleFileToDelete: ({
+    id,
+    path,
+    filename,
+  }: {
+    id: string
+    path: string
+    filename: string
+  }) => boolean
+  isFileToBeDeleted: (id: string) => boolean
+}
+
 const File = ({
   id,
+  size,
   datasetId,
   path,
   filename,
@@ -92,7 +117,7 @@ const File = ({
   datasetPermissions,
   toggleFileToDelete,
   isFileToBeDeleted,
-}) => {
+}: FileProps) => {
   const { icon, color } = getFileIcon(filename)
   const snapshotVersionPath = snapshotTag ? `/versions/${snapshotTag}` : ''
   // React route to display the file
@@ -109,7 +134,7 @@ const File = ({
       {filename}
       <span className="filetree-editfile">
         <Media greaterThanOrEqual="medium">
-          <Tooltip tooltip="Download">
+          <Tooltip tooltip={`Download: ${bytes.format(size) as string}`}>
             <span className="edit-file download-file">
               <a
                 href={apiPath(datasetId, snapshotTag, filePath(path, filename))}
@@ -131,7 +156,7 @@ const File = ({
           <Media greaterThanOrEqual="medium">
             <Tooltip tooltip="Update">
               <UpdateFile datasetId={datasetId} path={path}>
-                <i className="fa fa-file-o" />
+                <i className="fa fa-cloud-upload" />
               </UpdateFile>
             </Tooltip>
           </Media>
@@ -205,12 +230,4 @@ const File = ({
   )
 }
 
-File.propTypes = {
-  datasetId: PropTypes.string,
-  path: PropTypes.string,
-  filename: PropTypes.string,
-  snapshotTag: PropTypes.string,
-  editMode: PropTypes.bool,
-}
-
 export default File

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { flatToTree } from './flat-to-tree.js'
 import FileTree from './file-tree.jsx'
-import { Media } from '../../../styles/media'
+import { Media } from '../../styles/media'
 import { useMutation, gql } from '@apollo/client'
 import { WarnButton } from '@openneuro/components/warn-button'
 import { AccordionWrap } from '@openneuro/components/accordion'

package/src/scripts/{refactor_2021/dataset → dataset}/files/viewers/file-viewer-nifti.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Papaya from '../../../../common/partials/papaya.jsx'
+import Papaya from '../../../common/partials/papaya.jsx'
 import styled from '@emotion/styled'
 
 const StyleWrapper = styled.div`