@openneuro/app 4.5.0 → 4.6.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.5.0",
+  "version": "4.6.0-alpha.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.6.0-alpha.1",
+    "@openneuro/components": "^4.6.0-alpha.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": "43f49a6f1c5d20f6ea0ddc30be58ab10fecf8957"
 }

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/datalad/dataset/dataset-query-fragments.js

@@ -8,6 +8,7 @@ export const DRAFT_FRAGMENT = gql`
       modified
       readme
       head
+      size
       description {
         Name
         Authors
@@ -136,6 +137,7 @@ export const SNAPSHOT_FIELDS = gql`
     tag
     created
     readme
+    size
     deprecated {
       id
       user

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/dataset/dataset-routes.jsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { Route, Switch } from 'react-router-dom'
+import SnapshotContainer from './snapshot-container'
+import DraftContainer from './draft-container'
+
+const DatasetRoutes = ({ dataset, error }) => {
+  useEffect(() => {
+    if (error) {
+      throw error
+    }
+  }, [dataset, error])
+
+  return (
+    <Switch>
+      <Route
+        path="/datasets/:datasetId/versions/:tag"
+        render={({
+          match: {
+            params: { tag },
+          },
+        }) => {
+          return <SnapshotContainer dataset={dataset} tag={tag} />
+        }}
+      />
+      <Route
+        path="/datasets/:datasetId"
+        render={() => <DraftContainer dataset={dataset} />}
+      />
+    </Switch>
+  )
+}
+
+DatasetRoutes.propTypes = {
+  dataset: PropTypes.object,
+  error: PropTypes.object,
+}
+
+export default DatasetRoutes

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

@@ -5,16 +5,15 @@ import pluralize from 'pluralize'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import parseISO from 'date-fns/parseISO'
 
+import { DatasetPageTabContainer } from './routes/styles/dataset-page-tab-container'
 import Validation from '../validation/validation.jsx'
-import Files from './files'
-import { config } from '../../config'
+import { config } from '../config'
 import {
   getUnexpiredProfile,
   hasEditPermissions,
   hasDatasetAdminPermissions,
 } from '../authentication/profile'
 import { useCookies } from 'react-cookie'
-import Comments from './comments/comments.jsx'
 import { DatasetAlertDraft } from './fragments/dataset-alert-draft'
 import {
   MetaDataBlock,
@@ -28,7 +27,6 @@ import {
   VersionList,
   DatasetTools,
 } from '@openneuro/components/dataset'
-import { ReadMore } from '@openneuro/components/read-more'
 
 import { FollowDataset } from './mutations/follow'
 import { StarDataset } from './mutations/star'
@@ -37,6 +35,8 @@ import EditDescriptionField from './fragments/edit-description-field.jsx'
 import EditDescriptionList from './fragments/edit-description-list.jsx'
 import { DOILink } from './fragments/doi-link'
 
+import { TabRoutesDraft } from './routes/tab-routes-draft'
+
 export interface DraftContainerProps {
   dataset
   tag?: string
@@ -120,7 +120,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
             <div className="col col-8 col-lg">
               {summary && (
                 <DatasetHeaderMeta
-                  size={summary.size}
+                  size={dataset.draft.size}
                   totalFiles={summary.totalFiles}
                   datasetId={datasetId}
                 />
@@ -169,55 +169,17 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
                   }
                 />
               </div>
-              <div className="dataset-tool-buttons">
-                <DatasetTools
-                  hasEdit={hasEdit}
-                  isPublic={dataset.public}
-                  datasetId={datasetId}
-                  isAdmin={isAdmin}
-                  hasSnapshot={dataset.snapshots.length !== 0}
-                  isDatasetAdmin={isDatasetAdmin}
-                />
-              </div>
-              <ReadMore
-                fileTree={true}
-                id="collapse-tree"
-                expandLabel="Expand File Tree"
-                collapseLabel="Collapse File Tree">
-                <Files
-                  datasetId={datasetId}
-                  snapshotTag={null}
-                  datasetName={dataset.draft.description.Name}
-                  files={dataset.draft.files}
-                  editMode={hasEdit}
-                  datasetPermissions={dataset.permissions}
-                />
-              </ReadMore>
-              <MetaDataBlock
-                heading="README"
-                className="dataset-readme markdown-body"
-                item={dataset.draft.readme}
-                renderEditor={() => (
-                  <EditDescriptionField
-                    datasetId={datasetId}
-                    field="readme"
-                    rows={12}
-                    description={dataset.draft.readme}
-                    editMode={hasEdit}>
-                    <ReadMore
-                      id="readme"
-                      expandLabel="Read More"
-                      collapseLabel="Collapse">
-                      <Markdown>{dataset.draft.readme || 'N/A'}</Markdown>
-                    </ReadMore>
-                  </EditDescriptionField>
-                )}
-              />
-              <Comments
-                datasetId={dataset.id}
-                uploader={dataset.uploader}
-                comments={dataset.comments}
+              <DatasetTools
+                hasEdit={hasEdit}
+                isPublic={dataset.public}
+                datasetId={datasetId}
+                isAdmin={isAdmin}
+                hasSnapshot={dataset.snapshots.length !== 0}
+                isDatasetAdmin={isDatasetAdmin}
               />
+              <DatasetPageTabContainer>
+                <TabRoutesDraft dataset={dataset} hasEdit={hasEdit} />
+              </DatasetPageTabContainer>
             </div>
             <div className="col sidebar">
               {' '}

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 }) => {