@openneuro/app 4.4.10 → 4.5.0

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

@@ -24,7 +24,6 @@ import {
   CloneDropdown,
   DatasetHeader,
   DatasetHeaderMeta,
-  DatasetPage,
   DatasetGitAccess,
   VersionList,
   DatasetTools,
@@ -70,7 +69,6 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
   const dateUpdatedDifference = formatDistanceToNow(
     parseISO(dataset.draft.modified),
   )
-  const isSnapshot = activeDataset !== 'draft'
 
   const [cookies] = useCookies()
   const profile = getUnexpiredProfile(cookies)
@@ -83,6 +81,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
       dataset.snapshots[dataset.snapshots.length - 1].hexsha
   const isDatasetAdmin =
     hasDatasetAdminPermissions(dataset.permissions, profile?.sub) || isAdmin
+  const modality: string = summary?.modalities[0] || ''
 
   return (
     <>
@@ -94,342 +93,328 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
           }`}
         />
       )}
-      <DatasetPage
-        modality={summary?.modalities[0] || ''}
-        renderHeader={() => (
-          <>
-            <DatasetHeader
-              pageHeading={description.Name}
-              modality={summary?.modalities[0] || null}
-              renderEditor={() => (
-                <EditDescriptionField
+      <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={summary.size}
+                  totalFiles={summary.totalFiles}
                   datasetId={datasetId}
-                  field="Name"
-                  rows={2}
-                  description={description.Name}
-                  editMode={hasEdit}>
-                  {description.Name}
-                </EditDescriptionField>
+                />
               )}
-            />
-          </>
-        )}
-        renderAlert={() => (
-          <>
-            {hasEdit && (
-              <DatasetAlertDraft
-                isPrivate={!dataset.public}
+            </div>
+            <div className="col follow-bookmark">
+              <FollowDataset
+                profile={profile}
                 datasetId={dataset.id}
-                hasDraftChanges={hasDraftChanges}
-                hasSnapshot={dataset.snapshots.length !== 0}
+                following={dataset.following}
+                followers={dataset.followers.length}
               />
-            )}
-          </>
-        )}
-        renderHeaderMeta={() => (
-          <>
-            {summary && (
-              <DatasetHeaderMeta
-                size={summary.size}
-                totalFiles={summary.totalFiles}
-                datasetId={datasetId}
+              <StarDataset
+                profile={profile}
+                datasetId={dataset.id}
+                starred={dataset.starred}
+                stars={dataset.stars.length}
               />
-            )}
-          </>
-        )}
-        renderFollowBookmark={() => (
-          <>
-            <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}
-            />
-          </>
-        )}
-        renderBrainLifeButton={() => (
-          <BrainLifeButton
-            datasetId={datasetId}
-            onBrainlife={dataset.onBrainlife}
-          />
-        )}
-        renderValidationBlock={() => (
-          <ValidationBlock>
-            <Validation datasetId={dataset.id} issues={dataset.draft.issues} />
-          </ValidationBlock>
-        )}
-        renderCloneDropdown={() => (
-          <CloneDropdown
-            gitAccess={
-              <DatasetGitAccess
-                hasEdit={hasEdit}
-                configGithub={config.github}
-                configUrl={config.url}
-                worker={dataset.worker}
-                datasetId={datasetId}
-                gitHash={dataset.draft.head}
+            </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>
+              <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>
+                )}
               />
-            }
-          />
-        )}
-        renderToolButtons={() => (
-          <DatasetTools
-            hasEdit={hasEdit}
-            isPublic={dataset.public}
-            datasetId={datasetId}
-            isAdmin={isAdmin}
-            hasSnapshot={dataset.snapshots.length !== 0}
-            isDatasetAdmin={isDatasetAdmin}
-          />
-        )}
-        renderFiles={() => (
-          <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>
-        )}
-        renderReadMe={() => (
-          <MetaDataBlock
-            heading="README"
-            className="dataset-readme markdown-body"
-            item={dataset.draft.readme}
-            renderEditor={() => (
-              <EditDescriptionField
+              <Comments
+                datasetId={dataset.id}
+                uploader={dataset.uploader}
+                comments={dataset.comments}
+              />
+            </div>
+            <div className="col sidebar">
+              {' '}
+              <EditDescriptionList
+                className="dmb-inline-list"
                 datasetId={datasetId}
-                field="readme"
-                rows={12}
-                description={dataset.draft.readme}
+                field="Authors"
+                heading="Authors"
+                description={description.Authors}
                 editMode={hasEdit}>
-                <ReadMore
-                  id="readme"
-                  expandLabel="Read More"
-                  collapseLabel="Collapse">
-                  <Markdown>{dataset.draft.readme || 'N/A'}</Markdown>
-                </ReadMore>
-              </EditDescriptionField>
-            )}
-          />
-        )}
-        renderSidebar={() => (
-          <>
-            <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 && (
+                {description?.Authors?.length ? description.Authors : ['N/A']}
+              </EditDescriptionList>
+              {summary && (
+                <ModalitiesMetaDataBlock
+                  items={summary.modalities}
+                  className="dmb-modalities"
+                />
+              )}
               <MetaDataBlock
-                heading="Tasks"
-                item={summary.tasks.length ? summary.tasks.join(', ') : 'N/A'}
-                className="dmb-inline-list"
+                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?.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
-                </>
-              }
-            />
+              {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'
+                      }
+                    />
 
-            {dataset.snapshots?.length ? (
+                    <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="Last Updated"
+                heading="Uploaded by"
                 item={
                   <>
-                    {dateModified} - {dateUpdatedDifference} ago
+                    {dataset.uploader.name} on {dateAdded} -{' '}
+                    {dateAddedDifference} ago
                   </>
                 }
               />
-            ) : null}
-            <MetaDataBlock heading="Sessions" item={numSessions} />
-            <>
-              {summary && (
+              {dataset.snapshots?.length ? (
                 <MetaDataBlock
-                  heading="Participants"
-                  item={summary.subjects.length}
+                  heading="Last Updated"
+                  item={
+                    <>
+                      {dateModified} - {dateUpdatedDifference} ago
+                    </>
+                  }
                 />
-              )}
-            </>
-
-            <MetaDataBlock
-              heading="Dataset DOI"
-              item={<DOILink DOI={description.DatasetDOI} />}
-            />
-            <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>
-          </>
-        )}
-        renderComments={() => (
-          <Comments
-            datasetId={dataset.id}
-            uploader={dataset.uploader}
-            comments={dataset.comments}
-          />
-        )}
-      />
+              ) : 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