@openneuro/app 4.20.6 → 4.21.0-alpha.1

package/src/scripts/dataset/components/DatasetGitAccess.tsx

@@ -0,0 +1,82 @@
+import React from "react"
+import { Tooltip } from "@openneuro/components/tooltip"
+import { Button } from "@openneuro/components/button"
+
+function copyToClipboard(text) {
+  navigator.clipboard.writeText(text)
+}
+
+export interface DatasetGitAccessProps {
+  datasetId: string
+  worker?: string
+  configUrl: string
+  gitHash: string
+  configGithub?: string
+  hasEdit?: boolean
+}
+
+export const DatasetGitAccess = ({
+  datasetId,
+  worker,
+  configUrl,
+  gitHash,
+  configGithub,
+  hasEdit,
+}: DatasetGitAccessProps) => {
+  const workerId = worker?.split("-").pop()
+  const url = `${configUrl}/git/${workerId}/${datasetId}`
+  const readURL = `https://github.com/${configGithub}/${datasetId}.git`
+  return (
+    <div className="dataset-git-access">
+      <span>
+        <h4>DataLad/Git URL</h4>
+        <a href="https://docs.openneuro.org/git" target="_blank">
+          View Documentation
+        </a>
+      </span>
+      <div className="git-url">
+        {workerId && (
+          <Tooltip tooltip="Copy URL To Clipboard" flow="right">
+            <Button
+              onClick={() => copyToClipboard(readURL)}
+              icon="fas fa-clipboard"
+              size="small"
+              iconSize="18px"
+              label="copy Github url"
+            />
+          </Tooltip>
+        )}
+        <div>{readURL}</div>
+      </div>
+      {hasEdit && (
+        <div className="git-url">
+          {workerId && (
+            <Tooltip tooltip="Copy URL To Clipboard" flow="right">
+              <Button
+                onClick={() => copyToClipboard(url)}
+                icon="fas fa-clipboard"
+                size="small"
+                iconSize="18px"
+                label="copy OpenNeuro url"
+              />
+            </Tooltip>
+          )}
+          <div>{url}</div>
+        </div>
+      )}
+
+      <div className="git-hash">
+        <Tooltip tooltip="Copy Git Hash to Clipboard" flow="right">
+          <Button
+            onClick={() => copyToClipboard(gitHash)}
+            icon="fas fa-clipboard"
+            size="small"
+            iconSize="18px"
+            label="copy git hash"
+          />
+        </Tooltip>
+        <div>Git Hash: {gitHash.slice(0, 7)}</div>
+      </div>
+    </div>
+  )
+}

package/src/scripts/dataset/components/DatasetHeader.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { Link } from "react-router-dom"
+
+export interface DatasetHeaderProps {
+  modality: string
+  pageHeading: string
+  renderEditor?: () => React.ReactNode
+  children?: JSX.Element
+}
+
+export const DatasetHeader: React.FC<DatasetHeaderProps> = ({
+  pageHeading,
+  modality,
+  renderEditor,
+  children,
+}) => {
+  return (
+    <div className="dataset-header">
+      <div className="container">
+        <div className="grid grid-between">
+          <div className="col">
+            <h1>
+              <Link to={"/search/modality/" + modality}>
+                <div className="hexagon-wrapper">
+                  <div className="hexagon no-modality"></div>
+                  <div className="label">
+                    {modality
+                      ? (
+                        modality.substr(0, 4)
+                      )
+                      : <i className="fa fa-circle-o-notch fa-spin"></i>}
+                  </div>
+                </div>
+              </Link>
+              {renderEditor?.() || pageHeading}
+              {children}
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/scripts/dataset/components/DatasetHeaderMeta.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import bytes from "bytes"
+
+export interface DatasetHeaderMetaProps {
+  datasetId: string
+  totalFiles: number
+  size: number
+}
+
+export const DatasetHeaderMeta: React.FC<DatasetHeaderMetaProps> = ({
+  datasetId,
+  totalFiles,
+  size,
+}) => {
+  return (
+    <div>
+      <span>OpenNeuro Accession Number:</span> {datasetId}
+      <span>Files:</span> {totalFiles}
+      <span>Size:</span> {bytes(size)}
+    </div>
+  )
+}

package/src/scripts/dataset/components/DatasetToolButton.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import styled, { StyledComponent } from "@emotion/styled"
+import { Link } from "react-router-dom"
+import { Tooltip } from "@openneuro/components/tooltip"
+import { Icon } from "@openneuro/components/icon"
+import { useLocation } from "react-router-dom"
+
+interface DatasetToolStyleProps {
+  active: boolean
+}
+
+export const DatasetToolStyle: StyledComponent<DatasetToolStyleProps> = styled
+  .span<DatasetToolStyleProps>(
+    (props) => `
+  display: flex;
+  margin: 0 auto 10px;
+  flex-basis: auto;
+  padding: 0 15px;
+  justify-content: center;
+  a {
+    color: var(--current-theme-primary);
+    font-size: 17px;
+    text-decoration: none;
+    font-weight: 400;
+    padding: 4px;
+    border-bottom: 2px solid transparent;
+    border-bottom-color: ${
+      props.active ? "var(--current-theme-primary)" : "transparent"
+    };
+    i {
+      margin-right: 6px;
+      font-size: 15px;
+    }
+    &:hover {
+      border-bottom-color: var(--current-theme-primary);
+    }
+  }
+`,
+  )
+
+export const DatasetToolButton = ({ path, icon, tooltip, label }) => {
+  const location = useLocation()
+  return (
+    <DatasetToolStyle active={location.pathname == path}>
+      <Tooltip tooltip={tooltip} flow="up">
+        <Link to={path}>
+          <Icon icon={`fa ${icon}`} label={label} />
+        </Link>
+      </Tooltip>
+    </DatasetToolStyle>
+  )
+}

package/src/scripts/dataset/components/DatasetTools.tsx

@@ -0,0 +1,149 @@
+import React from "react"
+import { DatasetToolButton } from "./DatasetToolButton"
+import styled, { StyledComponent } from "@emotion/styled"
+import { useAgreement } from "../../components/agreement"
+
+interface DatasetToolStyleProps {}
+
+export const DatasetToolStyle: StyledComponent<DatasetToolStyleProps> = styled
+  .span`
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+`
+
+export interface DatasetToolsProps {
+  hasEdit: boolean
+  isPublic: boolean
+  datasetId: string
+  snapshotId?: string
+  isAdmin: boolean
+  isDatasetAdmin: boolean
+  hasSnapshot?: boolean
+  hasDerivatives?: boolean
+}
+
+export const DatasetTools = ({
+  hasEdit,
+  isPublic,
+  datasetId,
+  snapshotId,
+  isAdmin,
+  hasSnapshot,
+  isDatasetAdmin,
+  hasDerivatives,
+}: DatasetToolsProps) => {
+  const [agree] = useAgreement()
+  const isSnapshot = snapshotId
+  return (
+    <DatasetToolStyle>
+      <DatasetToolButton
+        tooltip={"View the dataset file tree"}
+        path={snapshotId
+          ? `/datasets/${datasetId}/versions/${snapshotId}`
+          : `/datasets/${datasetId}`}
+        icon="fa-folder"
+        label="Files"
+      />
+      {hasEdit && !isPublic && !isSnapshot && (
+        <>
+          {hasSnapshot
+            ? (
+              <DatasetToolButton
+                tooltip="Publicize the dataset"
+                path={`/datasets/${datasetId}/publish`}
+                icon="fa-globe"
+                label="Publish"
+              />
+            )
+            : (
+              <DatasetToolButton
+                tooltip="Create a version to publish"
+                path={`/datasets/${datasetId}/snapshot?publish`}
+                icon="fa-globe"
+                label="Publish"
+              />
+            )}
+        </>
+      )}
+      {hasEdit && !isSnapshot && (
+        <DatasetToolButton
+          tooltip="Share this dataset with collaborators"
+          path={`/datasets/${datasetId}/share`}
+          icon="fa-user"
+          label="Share"
+        />
+      )}
+      {hasEdit && isSnapshot && (
+        <DatasetToolButton
+          tooltip="View the Dataset Draft"
+          path={`/datasets/${datasetId}`}
+          icon="fa-pencil"
+          label="View Draft"
+        />
+      )}
+      {hasEdit && !isSnapshot && (
+        <DatasetToolButton
+          tooltip="Create a new version of the dataset"
+          path={`/datasets/${datasetId}/snapshot`}
+          icon="fa-camera"
+          label="Versioning"
+        />
+      )}
+      {isAdmin && !isSnapshot && (
+        <DatasetToolButton
+          tooltip="Admin Datalad Tools"
+          path={`/datasets/${datasetId}/admin`}
+          icon="fa-magic"
+          label="Admin"
+        />
+      )}
+      {agree && (
+        <DatasetToolButton
+          tooltip="How to Download"
+          path={snapshotId
+            ? `/datasets/${datasetId}/versions/${snapshotId}/download`
+            : `/datasets/${datasetId}/download`}
+          icon="fa-download"
+          label="Download"
+        />
+      )}
+      {hasDerivatives && (
+        <DatasetToolButton
+          tooltip="Available Derivatives"
+          path={snapshotId
+            ? `/datasets/${datasetId}/versions/${snapshotId}/derivatives`
+            : `/datasets/${datasetId}/derivatives`}
+          icon="fa-cubes"
+          label="Derivatives"
+        />
+      )}
+      <DatasetToolButton
+        tooltip={hasEdit
+          ? "A form to describe your dataset (helps colleagues discover your dataset)"
+          : "View the dataset metadata"}
+        path={snapshotId
+          ? `/datasets/${datasetId}/versions/${snapshotId}/metadata`
+          : `/datasets/${datasetId}/metadata`}
+        icon="fa-file-code"
+        label="Metadata"
+      />
+      {isDatasetAdmin && !isSnapshot && (
+        <DatasetToolButton
+          tooltip="Remove your dataset from OpenNeuro"
+          path={`/datasets/${datasetId}/delete`}
+          icon="fa-trash"
+          label="Delete"
+        />
+      )}
+      {hasEdit && isSnapshot && (
+        <DatasetToolButton
+          tooltip="Flag this version as deprecated"
+          path={`/datasets/${datasetId}/versions/${snapshotId}/deprecate`}
+          icon="fa-remove"
+          label="Deprecate Version"
+        />
+      )}
+    </DatasetToolStyle>
+  )
+}

package/src/scripts/dataset/components/MetaDataBlock.tsx

@@ -0,0 +1,24 @@
+import Markdown from "markdown-to-jsx"
+import React from "react"
+
+export interface MetaDataBlockProps {
+  heading: string
+  item: React.ReactNode | string[] | number
+  className?: string
+  renderEditor?: () => React.ReactNode
+}
+
+export const MetaDataBlock = ({
+  heading,
+  item,
+  className,
+  renderEditor,
+}: MetaDataBlockProps) => {
+  const fieldContent = renderEditor ? renderEditor() : item
+  return (
+    <div className={"dataset-meta-block " + className}>
+      <h2 className="dmb-heading">{heading}</h2>
+      <>{fieldContent}</>
+    </div>
+  )
+}

package/src/scripts/dataset/components/MetaDataListBlock.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+
+export interface MetaDataListBlockProps {
+  heading: string
+  item: React.ReactNode | string[] | number
+  className?: string
+  renderEditor?: () => React.ReactNode
+}
+
+export const MetaDataListBlock = ({
+  heading,
+  item,
+  className,
+  renderEditor,
+}: MetaDataListBlockProps) => {
+  const fieldContent = renderEditor ? renderEditor() : item
+  return (
+    <div className={"dataset-meta-block " + className}>
+      <h2 className="dmb-heading">{heading}</h2>
+      {fieldContent}
+    </div>
+  )
+}

package/src/scripts/dataset/components/ModalitiesMetaDataBlock.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { Link } from "react-router-dom"
+
+export interface ModalitiesMetaDataBlockProps {
+  items: string[]
+  className?: string
+}
+
+export const ModalitiesMetaDataBlock = ({
+  items,
+  className,
+}: ModalitiesMetaDataBlockProps) => {
+  const customCase = {
+    mri: "MRI",
+    ieeg: "iEEG",
+    pet: "PET",
+    eeg: "EEG",
+    meg: "MEG",
+  }
+  return (
+    <div className={"dataset-meta-block " + className}>
+      <h2 className="dmb-heading">Available Modalities</h2>
+      {items.map((item, index) => (
+        <Link key={index} to={"/search/modality/" + item.toLowerCase()}>
+          {item.toLowerCase() in customCase
+            ? customCase[item.toLowerCase()]
+            : item}
+        </Link>
+      ))}
+    </div>
+  )
+}

package/src/scripts/dataset/components/NemarButton.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import { Tooltip } from "@openneuro/components/tooltip"
+import { Button } from "@openneuro/components/button"
+
+export interface NemarButtonProps {
+  datasetId: string
+  onNemar: boolean
+}
+
+export const NemarButton: React.FC<NemarButtonProps> = ({
+  datasetId,
+  onNemar,
+}) => {
+  const url = `https://nemar.org/dataexplorer/detail?dataset_id=${datasetId}`
+  return (
+    <>
+      {onNemar && (
+        <div className="brainlife-block">
+          <Tooltip tooltip="View and analyze on NEMAR" flow="up">
+            <Button
+              className="brainlife-link"
+              primary={true}
+              size="small"
+              onClick={() => {
+                window.open(url, "_blank")
+              }}
+              label="NEMAR"
+            />
+          </Tooltip>
+        </div>
+      )}
+    </>
+  )
+}

package/src/scripts/dataset/components/ValidationBlock.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+
+export interface ValidationBlockProps {
+  children?: React.ReactNode
+}
+
+export const ValidationBlock: React.FC<ValidationBlockProps> = ({
+  children,
+}) => {
+  return <div className="validation-accordion">{children}</div>
+}

package/src/scripts/dataset/components/VersionList.tsx

@@ -0,0 +1,115 @@
+import React from "react"
+import { Link } from "react-router-dom"
+import { Dropdown } from "@openneuro/components/dropdown"
+
+export interface VersionListProps {
+  items: {
+    label: string
+    value: string
+    id: string
+    tag: string
+    created: Date
+    deprecated: boolean
+  }[]
+  hasEdit: boolean
+  selected: string
+  setSelected: (selected: string) => void
+  className: string
+  activeDataset: string
+  dateModified: string
+  datasetId?: string
+}
+const formatDate = (dateObject) =>
+  new Date(dateObject).toISOString().split("T")[0]
+
+export const VersionList = ({
+  items,
+  selected,
+  setSelected,
+  className,
+  dateModified,
+  datasetId,
+  hasEdit,
+}: VersionListProps) => {
+  const deprecatedItem = (itemTag, itemCreated) => {
+    setSelected(itemTag)
+  }
+  const setVersion = (itemTag, itemCreated) => {
+    setSelected(itemTag)
+  }
+  return (
+    <>
+      <div className="active-version">
+        <div>{selected === "draft" ? "Draft" : selected}</div>
+        {selected === "draft" ? "Updated" : "Created"}: {dateModified}
+      </div>
+      {items.length
+        ? (
+          <Dropdown
+            className={className}
+            label={
+              <div className="version-list-label">
+                <b>Versions</b>
+                <i className="fas fa-chevron-up" />
+                <i className="fas fa-chevron-down" />
+              </div>
+            }
+          >
+            <div className="version-list-dropdown">
+              <ul>
+                <li
+                  onClick={() => setVersion("draft", dateModified)}
+                  className={selected === "draft" ? "selected" : ""}
+                >
+                  <Link className="dataset-tool" to={"/datasets/" + datasetId}>
+                    <span className="label">
+                      Draft
+                      <span className="active">
+                        {selected === "draft" ? "*" : ""}
+                      </span>
+                    </span>
+                    {dateModified}
+                  </Link>
+                </li>
+                {items.map((item, index) => (
+                  <li
+                    key={index}
+                    onClick={item.deprecated === true
+                      ? () => deprecatedItem(item.tag, item.created)
+                      : () => setVersion(item.tag, formatDate(item.created))}
+                    className={selected === item.tag ? "selected" : ""}
+                  >
+                    <Link
+                      className="dataset-tool"
+                      to={"/datasets/" + datasetId + "/versions/" + item.tag}
+                    >
+                      <span className="label">
+                        v{item.tag}
+                        <span className="active">
+                          {selected === item.tag ? "*" : ""}
+                        </span>
+                        <span className="deprecated">
+                          {item.deprecated === true ? "Deprecated" : ""}
+                        </span>
+                      </span>
+                      {formatDate(item.created)}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </Dropdown>
+        )
+        : hasEdit
+        ? (
+          <Link
+            className="dataset-tool"
+            to={"/datasets/" + datasetId + "/snapshot"}
+          >
+            Create Version
+          </Link>
+        )
+        : null}
+    </>
+  )
+}

package/src/scripts/dataset/components/__tests__/DatasetAlert.spec.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { DatasetAlert } from "../DatasetAlert"
+
+describe("DatasetAlert component", () => {
+  it("all props are rendered", () => {
+    render(
+      <DatasetAlert alert="alert text" footer="footer text" level="warning">
+        <span role="marquee">test text</span>
+      </DatasetAlert>,
+    )
+
+    expect(screen.getByRole("marquee")).toBeVisible()
+    expect(screen.getByText("alert text")).toBeVisible()
+    expect(screen.getByText("footer text")).toBeVisible()
+  })
+  it('sets the correct alert class based on "level" prop', () => {
+    render(
+      <DatasetAlert alert="alert text" footer="footer text" level="warning">
+        Warning!
+      </DatasetAlert>,
+    )
+    expect(screen.getByRole("alert")).toHaveClass("warning")
+  })
+})

package/src/scripts/dataset/components/__tests__/DatasetHeaders.spec.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+import { DatasetHeader } from "../DatasetHeader"
+
+describe("DatasetHeader component", () => {
+  it("renders with an undefined modality", () => {
+    render(
+      <DatasetHeader
+        pageHeading="test page"
+        modality={undefined}
+        renderEditor={() => <></>}
+      />,
+      { wrapper: MemoryRouter },
+    )
+    expect(screen.queryByRole("heading")).toBeInTheDocument()
+  })
+})