@openneuro/app 4.4.10 → 4.6.0-alpha.0

package/src/scripts/dataset/draft-container.tsx

@@ -0,0 +1,382 @@
+import React from 'react'
+import Markdown from 'markdown-to-jsx'
+import { useLocation, Redirect } from 'react-router-dom'
+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 { config } from '../config'
+import {
+  getUnexpiredProfile,
+  hasEditPermissions,
+  hasDatasetAdminPermissions,
+} from '../authentication/profile'
+import { useCookies } from 'react-cookie'
+import { DatasetAlertDraft } from './fragments/dataset-alert-draft'
+import {
+  MetaDataBlock,
+  ModalitiesMetaDataBlock,
+  BrainLifeButton,
+  ValidationBlock,
+  CloneDropdown,
+  DatasetHeader,
+  DatasetHeaderMeta,
+  DatasetGitAccess,
+  VersionList,
+  DatasetTools,
+} from '@openneuro/components/dataset'
+
+import { FollowDataset } from './mutations/follow'
+import { StarDataset } from './mutations/star'
+
+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
+}
+
+const formatDate = dateObject =>
+  new Date(dateObject).toISOString().split('T')[0]
+
+// Helper function for getting version from URL
+const snapshotVersion = location => {
+  const matches = location.pathname.match(/versions\/(.*?)(\/|$)/)
+  return matches && matches[1]
+}
+const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
+  const location = useLocation()
+  const activeDataset = snapshotVersion(location) || 'draft'
+
+  const [selectedVersion, setSelectedVersion] = React.useState(activeDataset)
+
+  const summary = dataset.draft.summary
+  const description = dataset.draft.description
+  const datasetId = dataset.id
+
+  const numSessions =
+    summary && summary.sessions.length > 0 ? summary.sessions.length : 1
+
+  const dateAdded = formatDate(dataset.created)
+  const dateAddedDifference = formatDistanceToNow(parseISO(dataset.created))
+  const dateModified = formatDate(dataset.draft.modified)
+  const dateUpdatedDifference = formatDistanceToNow(
+    parseISO(dataset.draft.modified),
+  )
+
+  const [cookies] = useCookies()
+  const profile = getUnexpiredProfile(cookies)
+  const isAdmin = profile?.admin
+  const hasEdit =
+    hasEditPermissions(dataset.permissions, profile?.sub) || isAdmin
+  const hasDraftChanges =
+    dataset.snapshots.length === 0 ||
+    dataset.draft.head !==
+      dataset.snapshots[dataset.snapshots.length - 1].hexsha
+  const isDatasetAdmin =
+    hasDatasetAdminPermissions(dataset.permissions, profile?.sub) || isAdmin
+  const modality: string = summary?.modalities[0] || ''
+
+  return (
+    <>
+      {dataset.snapshots && !hasEdit && (
+        <Redirect
+          to={`/datasets/${dataset.id}/versions/${
+            dataset.snapshots.length &&
+            dataset.snapshots[dataset.snapshots.length - 1].tag
+          }`}
+        />
+      )}
+      <div
+        className={`dataset dataset-draft dataset-page dataset-page-${modality?.toLowerCase()}`}>
+        <DatasetHeader
+          pageHeading={description.Name}
+          modality={modality}
+          renderEditor={() => (
+            <EditDescriptionField
+              datasetId={datasetId}
+              field="Name"
+              rows={2}
+              description={description.Name}
+              editMode={hasEdit}>
+              {description.Name}
+            </EditDescriptionField>
+          )}
+        />
+        <DatasetAlertDraft
+          isPrivate={!dataset.public}
+          datasetId={dataset.id}
+          hasDraftChanges={hasDraftChanges}
+          hasSnapshot={dataset.snapshots.length !== 0}
+        />
+        <div className="container">
+          <div className="grid grid-between dataset-header-meta">
+            <div className="col col-8 col-lg">
+              {summary && (
+                <DatasetHeaderMeta
+                  size={dataset.draft.size}
+                  totalFiles={summary.totalFiles}
+                  datasetId={datasetId}
+                />
+              )}
+            </div>
+            <div className="col follow-bookmark">
+              <FollowDataset
+                profile={profile}
+                datasetId={dataset.id}
+                following={dataset.following}
+                followers={dataset.followers.length}
+              />
+              <StarDataset
+                profile={profile}
+                datasetId={dataset.id}
+                starred={dataset.starred}
+                stars={dataset.stars.length}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="container">
+          <div className="grid grid-between">
+            <div className="col col-lg col-8">
+              <div className="dataset-validation">
+                <ValidationBlock>
+                  <Validation
+                    datasetId={dataset.id}
+                    issues={dataset.draft.issues}
+                  />
+                </ValidationBlock>
+                <BrainLifeButton
+                  datasetId={datasetId}
+                  onBrainlife={dataset.onBrainlife}
+                />
+                <CloneDropdown
+                  gitAccess={
+                    <DatasetGitAccess
+                      hasEdit={hasEdit}
+                      configGithub={config.github}
+                      configUrl={config.url}
+                      worker={dataset.worker}
+                      datasetId={datasetId}
+                      gitHash={dataset.draft.head}
+                    />
+                  }
+                />
+              </div>
+              <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">
+              {' '}
+              <EditDescriptionList
+                className="dmb-inline-list"
+                datasetId={datasetId}
+                field="Authors"
+                heading="Authors"
+                description={description.Authors}
+                editMode={hasEdit}>
+                {description?.Authors?.length ? description.Authors : ['N/A']}
+              </EditDescriptionList>
+              {summary && (
+                <ModalitiesMetaDataBlock
+                  items={summary.modalities}
+                  className="dmb-modalities"
+                />
+              )}
+              <MetaDataBlock
+                heading={dataset.snapshots.length ? 'Versions' : 'Version'}
+                item={
+                  <div className="version-block">
+                    <VersionList
+                      datasetId={datasetId}
+                      hasEdit={hasEdit}
+                      items={dataset.snapshots}
+                      className="version-dropdown"
+                      activeDataset={activeDataset}
+                      dateModified={dateModified}
+                      selected={selectedVersion}
+                      setSelected={setSelectedVersion}
+                    />
+                  </div>
+                }
+              />
+              {summary && (
+                <MetaDataBlock
+                  heading="Tasks"
+                  item={summary.tasks.length ? summary.tasks.join(', ') : 'N/A'}
+                  className="dmb-inline-list"
+                />
+              )}
+              {summary?.modalities.includes('pet') ||
+                summary?.modalities.includes('Pet') ||
+                (summary?.modalities.includes('PET') && (
+                  <>
+                    <MetaDataBlock
+                      heading={pluralize('Target', summary.pet?.BodyPart)}
+                      item={summary.pet?.BodyPart}
+                    />
+                    <MetaDataBlock
+                      heading={pluralize(
+                        'Scanner Manufacturer',
+                        summary.pet?.ScannerManufacturer,
+                      )}
+                      item={
+                        summary.pet?.ScannerManufacturer
+                          ? summary.pet?.ScannerManufacturer
+                          : 'N/A'
+                      }
+                    />
+
+                    <MetaDataBlock
+                      heading={pluralize(
+                        'Scanner Model',
+                        summary.pet?.ScannerManufacturersModelName,
+                      )}
+                      item={
+                        summary.pet?.ScannerManufacturersModelName
+                          ? summary.pet?.ScannerManufacturersModelName
+                          : 'N/A'
+                      }
+                    />
+                    <MetaDataBlock
+                      heading={pluralize(
+                        'Radionuclide',
+                        summary.pet?.TracerRadionuclide,
+                      )}
+                      item={
+                        summary.pet?.TracerRadionuclide
+                          ? summary.pet?.TracerRadionuclide
+                          : 'N/A'
+                      }
+                    />
+                    <MetaDataBlock
+                      heading={pluralize(
+                        'Radiotracer',
+                        summary.pet?.TracerName,
+                      )}
+                      item={
+                        summary.pet?.TracerName
+                          ? summary.pet?.TracerName
+                          : 'N/A'
+                      }
+                    />
+                  </>
+                ))}
+              <MetaDataBlock
+                heading="Uploaded by"
+                item={
+                  <>
+                    {dataset.uploader.name} on {dateAdded} -{' '}
+                    {dateAddedDifference} ago
+                  </>
+                }
+              />
+              {dataset.snapshots?.length ? (
+                <MetaDataBlock
+                  heading="Last Updated"
+                  item={
+                    <>
+                      {dateModified} - {dateUpdatedDifference} ago
+                    </>
+                  }
+                />
+              ) : null}
+              <MetaDataBlock heading="Sessions" item={numSessions} />
+              <>
+                {summary && (
+                  <MetaDataBlock
+                    heading="Participants"
+                    item={summary.subjects.length}
+                  />
+                )}
+              </>
+              <MetaDataBlock
+                heading="Dataset DOI"
+                item={
+                  <DOILink DOI={description.DatasetDOI} datasetId={datasetId} />
+                }
+              />
+              <MetaDataBlock heading="License" item={description.License} />
+              <MetaDataBlock
+                heading="Acknowledgements"
+                item={description.Acknowledgements}
+                renderEditor={() => (
+                  <EditDescriptionField
+                    datasetId={datasetId}
+                    field="Acknowledgements"
+                    rows={2}
+                    description={description.Acknowledgements}
+                    editMode={hasEdit}>
+                    <Markdown>{description.Acknowledgements || 'N/A'}</Markdown>
+                  </EditDescriptionField>
+                )}
+              />
+              <MetaDataBlock
+                heading="How to Acknowledge"
+                item={description.HowToAcknowledge}
+                renderEditor={() => (
+                  <EditDescriptionField
+                    datasetId={datasetId}
+                    field="HowToAcknowledge"
+                    rows={2}
+                    description={description.HowToAcknowledge}
+                    editMode={hasEdit}>
+                    <Markdown>{description.HowToAcknowledge || 'N/A'}</Markdown>
+                  </EditDescriptionField>
+                )}
+              />
+              <EditDescriptionList
+                className="dmb-list"
+                datasetId={datasetId}
+                field="Funding"
+                heading="Funding"
+                description={description.Funding}
+                editMode={hasEdit}>
+                {description.Funding?.length ? description.Funding : ['N/A']}
+              </EditDescriptionList>
+              <EditDescriptionList
+                className="dmb-list"
+                datasetId={datasetId}
+                field="ReferencesAndLinks"
+                heading="References and Links"
+                description={description.ReferencesAndLinks}
+                editMode={hasEdit}>
+                {description.ReferencesAndLinks?.length
+                  ? description.ReferencesAndLinks
+                  : ['N/A']}
+              </EditDescriptionList>
+              <EditDescriptionList
+                className="dmb-list"
+                datasetId={datasetId}
+                field="EthicsApprovals"
+                heading="Ethics Approvals"
+                description={description.EthicsApprovals}
+                editMode={hasEdit}>
+                {description.EthicsApprovals?.length
+                  ? description.EthicsApprovals
+                  : ['N/A']}
+              </EditDescriptionList>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default DraftContainer

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`