@openneuro/app 4.8.2 → 4.9.1

package/src/scripts/dataset/__tests__/snapshot-container.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Helmet from 'react-helmet'
+import '@testing-library/jest-dom/extend-expect'
+import { SnapshotContainer } from '../snapshot-container'
+import { MockAppWrapper } from '../../fixtures/mock-app-wrapper'
+import { dataset, snapshot } from '../../fixtures/dataset-query'
+
+const defProps = {
+  dataset,
+  snapshot,
+  tag: '1.0.0',
+}
+
+describe('SnapshotContainer component', () => {
+  it('renders successfully', () => {
+    const { asFragment } = render(<SnapshotContainer {...defProps} />, {
+      wrapper: MockAppWrapper,
+    })
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it('includes JSON-LD data in the header', () => {
+    render(<SnapshotContainer {...defProps} />, {
+      wrapper: MockAppWrapper,
+    })
+    const header = Helmet.peek()
+    expect(header).toMatchSnapshot()
+  })
+})

package/src/scripts/dataset/common/follow-toggles.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled'
+
+export const FollowToggles = styled.div`
+  display: flex;
+  font-size: 14px;
+  margin-left: auto;
+
+  .toggle-counter-wrap {
+    display: inline-flex;
+    margin-left: 1ch;
+  }
+`

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

@@ -24,7 +24,6 @@ import {
   ValidationBlock,
   CloneDropdown,
   DatasetHeader,
-  DatasetHeaderMeta,
   DatasetGitAccess,
   VersionList,
   DatasetTools,
@@ -38,6 +37,7 @@ import EditDescriptionList from './fragments/edit-description-list.jsx'
 import { DOILink } from './fragments/doi-link'
 
 import { TabRoutesDraft } from './routes/tab-routes-draft'
+import { FollowToggles } from './common/follow-toggles'
 
 export interface DraftContainerProps {
   dataset
@@ -107,14 +107,30 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
           pageHeading={description.Name}
           modality={modality}
           renderEditor={() => (
-            <EditDescriptionField
-              datasetId={datasetId}
-              field="Name"
-              rows={2}
-              description={description.Name}
-              editMode={hasEdit}>
-              {description.Name}
-            </EditDescriptionField>
+            <>
+              <EditDescriptionField
+                datasetId={datasetId}
+                field="Name"
+                rows={2}
+                description={description.Name}
+                editMode={hasEdit}>
+                {description.Name}
+              </EditDescriptionField>
+              <FollowToggles>
+                <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}
+                />
+              </FollowToggles>
+            </>
           )}
         />
         <DatasetAlertDraft
@@ -123,34 +139,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
           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="dataset-content container">
           <div className="grid grid-between">
             <div className="col col-lg col-8">
               <div className="dataset-validation">
@@ -191,7 +180,10 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
               </DatasetPageTabContainer>
             </div>
             <div className="col sidebar">
-              {' '}
+              <MetaDataBlock
+                heading="OpenNeuro Accession Number"
+                item={datasetId}
+              />
               <EditDescriptionList
                 className="dmb-inline-list"
                 datasetId={datasetId}

package/src/scripts/dataset/files/file-viewer-type.jsx

@@ -19,7 +19,7 @@ const FileViewerType = ({ path, url, data }) => {
     path.endsWith('.txt')
   ) {
     return <FileViewerText data={data} />
-  } else if (path.endsWith('.nii.gz') || path.endsWith('.nii')) {
+  } else if (path.endsWith('.nii.gz') || path.endsWith('.nii') || path.endsWith('.mgh') || path.endsWith('.mgz')) {
     return <FileViewerNifti imageUrl={url} />
   } else if (path.endsWith('.json')) {
     return <FileViewerJson data={data} />

package/src/scripts/dataset/files/files.jsx

@@ -8,6 +8,18 @@ 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 bytes from 'bytes'
+
+const FileTreeMeta = styled.span`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`
+
+const FileTreeMetaLabel = styled.label`
+  font-weight: bold;
+  padding-left: 1ch;
+`
 
 const StyleWrapper = styled.div`
   .filetree-wrapper {
@@ -28,6 +40,7 @@ const Files = ({
   files,
   editMode = false,
   datasetPermissions,
+  summary,
 }) => {
   const [filesToDelete, setFilesToDelete] = useState({})
   const [isDeleting, setIsDeleting] = useState(false)
@@ -108,6 +121,14 @@ const Files = ({
         </Media>
         <Media greaterThanOrEqual="medium">
           <div className="filetree-item">
+            {summary && (
+              <FileTreeMeta>
+                <FileTreeMetaLabel>Files:</FileTreeMetaLabel>{' '}
+                {summary.totalFiles}{' '}
+                <FileTreeMetaLabel>Size:</FileTreeMetaLabel>{' '}
+                {bytes(summary.size)}
+              </FileTreeMeta>
+            )}
             <FileTree
               datasetId={datasetId}
               snapshotTag={snapshotTag}
@@ -136,6 +157,7 @@ Files.propTypes = {
   editMode: PropTypes.bool,
   fetchMore: PropTypes.func,
   datasetPermissions: PropTypes.object,
+  summary: PropTypes.object,
 }
 
 export default Files

package/src/scripts/dataset/routes/dataset-default.tsx

@@ -11,20 +11,6 @@ import EditDescriptionField from '../fragments/edit-description-field'
  */
 export const DatasetDefault = ({ dataset, hasEdit }) => (
   <>
-    <ReadMore
-      fileTree={true}
-      id="collapse-tree"
-      expandLabel="Expand File Tree"
-      collapseLabel="Collapse File Tree">
-      <Files
-        datasetId={dataset.id}
-        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"
@@ -45,6 +31,15 @@ export const DatasetDefault = ({ dataset, hasEdit }) => (
         </EditDescriptionField>
       )}
     />
+    <Files
+      datasetId={dataset.id}
+      snapshotTag={null}
+      datasetName={dataset.draft.description.Name}
+      files={dataset.draft.files}
+      editMode={hasEdit}
+      datasetPermissions={dataset.permissions}
+      summary={dataset.draft?.summary}
+    />
     <Comments
       datasetId={dataset.id}
       uploader={dataset.uploader}

package/src/scripts/dataset/routes/snapshot-default.tsx

@@ -10,20 +10,6 @@ import Comments from '../comments/comments'
  */
 export const SnapshotDefault = ({ dataset, snapshot }) => (
   <>
-    <ReadMore
-      fileTree={true}
-      id="collapse-tree"
-      expandLabel="Read More"
-      collapseLabel="Collapse">
-      <Files
-        datasetId={dataset.id}
-        snapshotTag={snapshot.tag}
-        datasetName={snapshot.description.Name}
-        files={snapshot.files}
-        editMode={false}
-        datasetPermissions={dataset.permissions}
-      />
-    </ReadMore>
     <MetaDataBlock
       heading="README"
       item={
@@ -35,6 +21,15 @@ export const SnapshotDefault = ({ dataset, snapshot }) => (
       }
       className="dataset-readme markdown-body"
     />
+    <Files
+      datasetId={dataset.id}
+      snapshotTag={snapshot.tag}
+      datasetName={snapshot.description.Name}
+      files={snapshot.files}
+      editMode={false}
+      datasetPermissions={dataset.permissions}
+      summary={snapshot?.summary}
+    />
     <Comments
       datasetId={dataset.id}
       uploader={dataset.uploader}

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

@@ -20,7 +20,6 @@ import {
   ValidationBlock,
   CloneDropdown,
   DatasetHeader,
-  DatasetHeaderMeta,
   DatasetGitAccess,
   VersionList,
   DatasetTools,
@@ -40,6 +39,8 @@ import { StarDataset } from './mutations/star'
 import { SNAPSHOT_FIELDS } from '../datalad/dataset/dataset-query-fragments.js'
 import { DOILink } from './fragments/doi-link'
 import { TabRoutesSnapshot } from './routes/tab-routes-snapshot'
+import schemaGenerator from '../utils/json-ld.js'
+import { FollowToggles } from './common/follow-toggles'
 
 const formatDate = dateObject =>
   new Date(dateObject).toISOString().split('T')[0]
@@ -56,7 +57,7 @@ type SnapshotContainerProps = {
   snapshot
 }
 
-const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
+export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
   dataset,
   tag,
   snapshot,
@@ -94,14 +95,31 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
         <title>
           {description.Name} - {pageTitle}
         </title>
+        <script type="application/ld+json">{schemaGenerator(snapshot)}</script>
       </Helmet>
       <div
         className={`dataset dataset-draft dataset-page dataset-page-${modality?.toLowerCase()}`}>
         {summary && (
-          <DatasetHeader
-            pageHeading={description.Name}
-            modality={summary?.modalities[0]}
-          />
+          <>
+            <DatasetHeader
+              pageHeading={description.Name}
+              modality={summary?.modalities[0]}>
+              <FollowToggles>
+                <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}
+                />
+              </FollowToggles>
+            </DatasetHeader>
+          </>
         )}
         {snapshot?.deprecated && (
           <DatasetAlertVersion
@@ -111,34 +129,7 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
             hasEdit={hasEdit}
           />
         )}
-        <div className="container">
-          <div className="grid grid-between dataset-header-meta">
-            <div className="col col-8 col-lg">
-              {summary && (
-                <DatasetHeaderMeta
-                  size={snapshot.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="dataset-content container">
           <div className="grid grid-between">
             <div className="col col-lg col-8">
               <div className="dataset-validation">
@@ -179,6 +170,10 @@ const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
               </DatasetPageTabContainer>
             </div>
             <div className="col sidebar">
+              <MetaDataBlock
+                heading="OpenNeuro Accession Number"
+                item={datasetId}
+              />
               <MetaDataBlock
                 heading="Authors"
                 item={

package/src/scripts/fixtures/dataset-query.ts

@@ -0,0 +1,300 @@
+// Example queries responses for use in tests
+export const dataset = {
+  id: 'ds001032',
+  created: '2021-12-17T22:24:05.500Z',
+  public: true,
+  following: true,
+  followers: [
+    {
+      userId: '18492691-707f-4161-bc73-6ed22ce40138',
+      __typename: 'Follower',
+    },
+  ],
+  starred: false,
+  stars: [],
+  worker: 'datalad-0',
+  draft: {
+    id: 'ds001032',
+    modified: '2021-12-17T22:32:35.282Z',
+    readme:
+      'This dataset was obtained from the OpenfMRI project (http://www.openfmri.org).\nAccession #: ds003\nDescription: Rhyme judgment\n\nRelease history:\n10/06/2011: initial release\n3/21/2013: Updated release with QA information\n\nThis dataset is made available under the Public Domain Dedication and License \nv1.0, whose full text can be found at \nhttp://www.opendatacommons.org/licenses/pddl/1.0/. \nWe hope that all users will follow the ODC Attribution/Share-Alike \nCommunity Norms (http://www.opendatacommons.org/norms/odc-by-sa/); \nin particular, while not legally required, we hope that all users \nof the data will acknowledge the OpenfMRI project and NSF Grant \nOCI-1131441 (R. Poldrack, PI) in any publications.\n',
+    head: 'd62fdc42e2a568a6f89e33d68d3ef343ff883e02',
+    size: 623389,
+    description: {
+      Name: 'DS003-downsampled (only T1)',
+      Authors: ['J. Doe', 'J. Doe', 'J. Doe'],
+      DatasetDOI: null,
+      License: 'CC0',
+      Acknowledgements: null,
+      HowToAcknowledge: null,
+      Funding: null,
+      ReferencesAndLinks: null,
+      EthicsApprovals: null,
+      __typename: 'Description',
+    },
+    summary: {
+      modalities: ['MRI'],
+      secondaryModalities: ['MRI_Structural'],
+      sessions: [],
+      subjects: ['01', '02'],
+      subjectMetadata: [
+        {
+          participantId: '01',
+          age: 25,
+          sex: 'M',
+          group: null,
+          __typename: 'SubjectMetadata',
+        },
+      ],
+      tasks: [],
+      size: 623389,
+      totalFiles: 7,
+      dataProcessed: false,
+      pet: null,
+      __typename: 'Summary',
+    },
+    __typename: 'Draft',
+    issues: [
+      {
+        severity: 'warning',
+        code: 82,
+        reason:
+          'Tabular file contains custom columns not described in a data dictionary',
+        files: [
+          {
+            evidence:
+              'Columns: sex, age not defined, please define in: /participants.json',
+            line: null,
+            character: null,
+            reason:
+              'Tabular file contains custom columns not described in a data dictionary',
+            file: {
+              name: 'participants.tsv',
+              path: '/datalad/ds001032/participants.tsv',
+              relativePath: '/participants.tsv',
+              __typename: 'ValidationIssueFileDetail',
+            },
+            __typename: 'ValidationIssueFile',
+          },
+        ],
+        additionalFileCount: 0,
+        __typename: 'ValidationIssue',
+      },
+    ],
+  },
+  __typename: 'Dataset',
+  permissions: {
+    id: 'ds001032',
+    userPermissions: [
+      {
+        user: {
+          id: '18492691-707f-4161-bc73-6ed22ce40138',
+          email: 'test@example.com',
+          __typename: 'User',
+        },
+        level: 'admin',
+        __typename: 'Permission',
+      },
+    ],
+    __typename: 'DatasetPermissions',
+  },
+  snapshots: [
+    {
+      id: 'ds001032:1.0.0',
+      tag: '1.0.0',
+      created: '2021-12-17T22:22:49.000Z',
+      hexsha: 'e4daf5567b86426b13e2d319859164e410975056',
+      __typename: 'Snapshot',
+    },
+    {
+      id: 'ds001032:2.0.0',
+      tag: '2.0.0',
+      created: '2021-12-17T22:32:08.000Z',
+      hexsha: 'd62fdc42e2a568a6f89e33d68d3ef343ff883e02',
+      __typename: 'Snapshot',
+    },
+  ],
+  metadata: {
+    datasetId: 'ds001032',
+    datasetUrl: null,
+    datasetName: null,
+    firstSnapshotCreatedAt: null,
+    latestSnapshotCreatedAt: null,
+    dxStatus: '',
+    tasksCompleted: [],
+    trialCount: null,
+    grantFunderName: '',
+    grantIdentifier: '',
+    studyDesign: '',
+    studyDomain: '',
+    studyLongitudinal: '',
+    dataProcessed: null,
+    species: '',
+    associatedPaperDOI: '',
+    openneuroPaperDOI: '',
+    seniorAuthor: null,
+    adminUsers: [],
+    ages: [],
+    modalities: [],
+    affirmedDefaced: true,
+    affirmedConsent: false,
+    __typename: 'Metadata',
+  },
+  comments: [],
+  uploader: {
+    id: '18492691-707f-4161-bc73-6ed22ce40138',
+    name: 'Test User',
+    email: 'test@example.com',
+    __typename: 'User',
+  },
+  analytics: {
+    downloads: 0,
+    views: 23,
+    __typename: 'Analytic',
+  },
+  derivatives: [],
+  onBrainlife: false,
+}
+
+export const snapshot = {
+  id: 'ds001032:1.0.0',
+  tag: '1.0.0',
+  created: '2021-12-17T22:32:08.000Z',
+  readme:
+    'This dataset was obtained from the OpenfMRI project (http://www.openfmri.org).\nAccession #: ds003\nDescription: Rhyme judgment\n\nRelease history:\n10/06/2011: initial release\n3/21/2013: Updated release with QA information\n\nThis dataset is made available under the Public Domain Dedication and License \nv1.0, whose full text can be found at \nhttp://www.opendatacommons.org/licenses/pddl/1.0/. \nWe hope that all users will follow the ODC Attribution/Share-Alike \nCommunity Norms (http://www.opendatacommons.org/norms/odc-by-sa/); \nin particular, while not legally required, we hope that all users \nof the data will acknowledge the OpenfMRI project and NSF Grant \nOCI-1131441 (R. Poldrack, PI) in any publications.\n',
+  size: 623389,
+  deprecated: null,
+  description: {
+    Name: 'DS003-downsampled (only T1)',
+    Authors: ['J. Doe', 'J. Doe', 'J. Doe'],
+    DatasetDOI: null,
+    License: 'CC0',
+    Acknowledgements: null,
+    HowToAcknowledge: null,
+    Funding: null,
+    ReferencesAndLinks: null,
+    EthicsApprovals: null,
+    __typename: 'Description',
+  },
+  files: [
+    {
+      id: '7dcbfd4d8ef17174c6eb2cc023f7950c682563a5',
+      key: '4feabfe8803db741e9a0c5ad00bc3ada109558e3',
+      filename: 'CHANGES',
+      size: 52,
+      directory: null,
+      annexed: false,
+      __typename: 'DatasetFile',
+    },
+    {
+      id: '63888a199a5ce37377b1cd708cda59577dad218f',
+      key: 'fa84e5f958ec72d42b3e196e592f6db9f7104b19',
+      filename: 'README',
+      size: 709,
+      directory: null,
+      annexed: false,
+      __typename: 'DatasetFile',
+    },
+    {
+      id: '0a2a5d8d72a31f03608db59c4cfd650aba77c363',
+      key: 'b08aa0ec5b5e716479824859524a22140fb2af82',
+      filename: 'T1w.json',
+      size: 196,
+      directory: null,
+      annexed: false,
+      __typename: 'DatasetFile',
+    },
+    {
+      id: 'a2922b427c5c997e77ce058e0ce57ffd17123a7f',
+      key: '0b1856b91c11f67098ce60114417a62dd55730a5',
+      filename: 'dataset_description.json',
+      size: 172,
+      directory: null,
+      annexed: false,
+      __typename: 'DatasetFile',
+    },
+    {
+      id: 'f682a32c9538082fa6c8ad11e9a536dc07d1d0cf',
+      key: '37ecbdc7ab8ffaf2cddecc338092f6679089287d',
+      filename: 'participants.tsv',
+      size: 36,
+      directory: null,
+      annexed: false,
+      __typename: 'DatasetFile',
+    },
+    {
+      id: 'directory:sub-01',
+      key: null,
+      filename: 'sub-01',
+      size: 1,
+      directory: true,
+      annexed: null,
+      __typename: 'DatasetFile',
+    },
+    {
+      id: 'directory:sub-02',
+      key: null,
+      filename: 'sub-02',
+      size: 1,
+      directory: true,
+      annexed: null,
+      __typename: 'DatasetFile',
+    },
+  ],
+  summary: {
+    modalities: ['MRI'],
+    secondaryModalities: ['MRI_Structural'],
+    sessions: [],
+    subjects: ['01', '02'],
+    subjectMetadata: [
+      {
+        participantId: '01',
+        age: 25,
+        sex: 'M',
+        group: null,
+        __typename: 'SubjectMetadata',
+      },
+    ],
+    tasks: [],
+    size: 623389,
+    totalFiles: 7,
+    dataProcessed: false,
+    pet: null,
+    __typename: 'Summary',
+  },
+  analytics: {
+    downloads: 0,
+    views: 24,
+    __typename: 'Analytic',
+  },
+  issues: [
+    {
+      severity: 'warning',
+      code: 82,
+      reason:
+        'Tabular file contains custom columns not described in a data dictionary',
+      files: [
+        {
+          evidence:
+            'Columns: sex, age not defined, please define in: /participants.json',
+          line: null,
+          character: null,
+          reason:
+            'Tabular file contains custom columns not described in a data dictionary',
+          file: {
+            name: 'participants.tsv',
+            path: '/datalad/ds001032/participants.tsv',
+            relativePath: '/participants.tsv',
+            __typename: 'ValidationIssueFileDetail',
+          },
+          __typename: 'ValidationIssueFile',
+        },
+      ],
+      additionalFileCount: 0,
+      __typename: 'ValidationIssue',
+    },
+  ],
+  __typename: 'Snapshot',
+  hexsha: 'd62fdc42e2a568a6f89e33d68d3ef343ff883e02',
+  onBrainlife: false,
+}