Merge pull request #3077 from OpenNeuroOrg/analyze-dropdown

Snapshot page analyze dropdown menu for external tools

packages/openneuro-app/src/scripts/datalad/dataset/dataset-query-fragments.js

@@ -194,7 +194,6 @@ export const SNAPSHOT_FIELDS = gql`
     }
     ...SnapshotIssues
     hexsha
-    onBrainlife
   }
   ${SNAPSHOT_ISSUES}
 `

packages/openneuro-app/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap

@@ -302,6 +302,99 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                 </article>
               </div>
             </div>
+            <div
+              class="clone-dropdown css-1jpt4j3"
+            >
+              <div
+                class="undefined dropdown-wrapper"
+              >
+                <div
+                  class="toggle "
+                >
+                  <span>
+                    <button
+                      aria-label="Analyze"
+                      class="on-button on-button--small on-button--primary  clone-link"
+                      role="button"
+                      type="button"
+                    >
+                      Analyze
+                      <i
+                        class="fas fa-caret-up"
+                      />
+                      <i
+                        class="fas fa-caret-down"
+                      />
+                    </button>
+                  </span>
+                </div>
+                <div
+                  class="menu collapsed"
+                  role="menu"
+                >
+                  <div
+                    class="dataset-git-access"
+                  >
+                    <span>
+                      <h4>
+                        Analyze this dataset
+                      </h4>
+                    </span>
+                    <p>
+                      Work with OpenNeuro datasets using any of these third-party tools.
+                    </p>
+                    <hr />
+                    <img
+                      height="16"
+                      src="/packages/openneuro-app/src/assets/external/brainlife.png"
+                      width="16"
+                    />
+                     
+                    <a
+                      href="https://brainlife.io/openneuro/ds001032/1.0.0"
+                      target="_blank"
+                    >
+                      View on Brainlife.io
+                    </a>
+                    <p>
+                      Brainlife.io is a free cloud platform for secure neuroscience data analysis.
+                    </p>
+                    <hr />
+                    <img
+                      height="16"
+                      src="/packages/openneuro-app/src/assets/external/nemar.png"
+                      width="16"
+                    />
+                     
+                    <a
+                      href="https://nemar.org/dataexplorer/detail?dataset_id=ds001032"
+                      target="_blank"
+                    >
+                      View on NEMAR
+                    </a>
+                    <p>
+                      View and analyze this dataset on the NEMAR OpenNeuro portal for MEG, iEEG, and EEG data.
+                    </p>
+                    <hr />
+                    <img
+                      height="16"
+                      src="/packages/openneuro-app/src/assets/external/cbrain.png"
+                      width="16"
+                    />
+                     
+                    <a
+                      href="https://portal.cbrain.mcgill.ca/openneuro/ds001032/versions/1.0.0"
+                      target="_blank"
+                    >
+                      View on CBRAIN
+                    </a>
+                    <p>
+                      CBRAIN is a web-based distributed computing platform for collaborative neuroimaging research.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
             <div
               class="clone-dropdown"
             >
@@ -330,6 +423,7 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                 </div>
                 <div
                   class="menu collapsed"
+                  role="menu"
                 >
                   <div>
                     <span>
@@ -1054,6 +1148,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
                 </div>
                 <div
                   class="menu collapsed"
+                  role="menu"
                 >
                   <div
                     class="version-list-dropdown"

packages/openneuro-app/src/scripts/dataset/components/AnalyzeDropdown.tsx

@@ -0,0 +1,98 @@
+import React from "react"
+import { Dropdown } from "@openneuro/components/dropdown"
+import { Button } from "@openneuro/components/button"
+import styled from "@emotion/styled"
+import BrainlifeIcon from "../../../assets/external/brainlife.png"
+import NemarIcon from "../../../assets/external/nemar.png"
+import CbrainIcon from "../../../assets/external/cbrain.png"
+
+export interface CloneDropdownProps {
+  datasetId: string
+  snapshotVersion: string
+}
+
+const AnalyzeDiv = styled.div`
+  padding-right: 1em;
+`
+
+export const AnalyzeDropdown: React.FC<CloneDropdownProps> = (
+  { datasetId, snapshotVersion },
+) => {
+  const brainlifeUrl =
+    `https://brainlife.io/openneuro/${datasetId}/${snapshotVersion}`
+  const nemarUrl =
+    `https://nemar.org/dataexplorer/detail?dataset_id=${datasetId}`
+  const cbrainUrl =
+    `https://portal.cbrain.mcgill.ca/openneuro/${datasetId}/versions/${snapshotVersion}`
+  return (
+    <AnalyzeDiv className="clone-dropdown">
+      <Dropdown
+        label={
+          <Button
+            className="clone-link"
+            primary={true}
+            size="small"
+            label="Analyze"
+          >
+            <i className="fas fa-caret-up"></i>
+            <i className="fas fa-caret-down"></i>
+          </Button>
+        }
+      >
+        <div className="dataset-git-access">
+          <span>
+            <h4>Analyze this dataset</h4>
+          </span>
+          <p>
+            Work with OpenNeuro datasets using any of these third-party tools.
+          </p>
+          <hr />
+          <img
+            src={BrainlifeIcon}
+            height="16"
+            width="16"
+          />{" "}
+          <a
+            href={brainlifeUrl}
+            target="_blank"
+          >
+            View on Brainlife.io
+          </a>
+          <p>
+            Brainlife.io is a free cloud platform for secure neuroscience data
+            analysis.
+          </p>
+          <hr />
+          <img
+            src={NemarIcon}
+            height="16"
+            width="16"
+          />{" "}
+          <a
+            href={nemarUrl}
+            target="_blank"
+          >
+            View on NEMAR
+          </a>
+          <p>
+            View and analyze this dataset on the NEMAR OpenNeuro portal for MEG,
+            iEEG, and EEG data.
+          </p>
+          <hr />
+          <img
+            src={CbrainIcon}
+            height="16"
+            width="16"
+          />{" "}
+          <a href={cbrainUrl} target="_blank">
+            View on CBRAIN
+          </a>
+          <p>
+            CBRAIN is a web-based distributed computing platform for
+            collaborative neuroimaging research.
+          </p>
+        </div>
+      </Dropdown>
+    </AnalyzeDiv>
+  )
+}

packages/openneuro-app/src/scripts/dataset/components/__tests__/AnalyzeDropdown.spec.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { AnalyzeDropdown } from "../AnalyzeDropdown"
+
+describe("AnalyzeDropdown component", () => {
+  it("opens when clicked", () => {
+    render(
+      <AnalyzeDropdown datasetId="ds000031" snapshotVersion="1.0.0" />,
+    )
+
+    const button = screen.getByRole("button")
+    const menu = screen.getByRole("menu")
+
+    expect(button).toBeVisible()
+    expect(menu).toHaveClass("collapsed")
+    fireEvent.click(button)
+    expect(menu).toHaveClass("expanded")
+  })
+})

packages/openneuro-app/src/scripts/dataset/draft-container.tsx

@@ -15,7 +15,6 @@ import {
 } from "../authentication/profile"
 import { useCookies } from "react-cookie"
 import { DatasetAlertDraft } from "./fragments/dataset-alert-draft"
-import { BrainLifeButton } from "./components/BrainLifeButton"
 import { CloneDropdown } from "./components/CloneDropdown"
 import { DatasetGitAccess } from "./components/DatasetGitAccess"
 import { DatasetHeader } from "./components/DatasetHeader"
@@ -141,10 +140,6 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => {
                     issues={dataset.draft.issues}
                   />
                 </ValidationBlock>
-                <BrainLifeButton
-                  datasetId={datasetId}
-                  onBrainlife={dataset.onBrainlife}
-                />
                 <CloneDropdown
                   gitAccess={
                     <DatasetGitAccess

packages/openneuro-app/src/scripts/dataset/snapshot-container.tsx

@@ -10,8 +10,7 @@ import Validation from "../validation/validation.jsx"
 import { config } from "../config"
 import DatasetCitation from "./fragments/dataset-citation.jsx"
 import { DatasetAlertVersion } from "./fragments/dataset-alert-version"
-
-import { BrainLifeButton } from "./components/BrainLifeButton"
+import { AnalyzeDropdown } from "./components/AnalyzeDropdown"
 import { CloneDropdown } from "./components/CloneDropdown"
 import { DatasetGitAccess } from "./components/DatasetGitAccess"
 import { DatasetHeader } from "./components/DatasetHeader"
@@ -21,7 +20,6 @@ import { MetaDataListBlock } from "./components/MetaDataListBlock"
 import { ModalitiesMetaDataBlock } from "./components/ModalitiesMetaDataBlock"
 import { ValidationBlock } from "./components/ValidationBlock"
 import { VersionList } from "./components/VersionList"
-import { NemarButton } from "./components/NemarButton"
 import { Username } from "../users/username"
 import { Loading } from "@openneuro/components/loading"
 
@@ -131,15 +129,8 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({
                 <ValidationBlock>
                   <Validation datasetId={dataset.id} issues={snapshot.issues} />
                 </ValidationBlock>
-                <NemarButton
-                  datasetId={datasetId}
-                  onNemar={summary?.modalities.includes("EEG") ||
-                    summary?.modalities.includes("iEEG") ||
-                    summary?.modalities.includes("MEG")}
-                />
-                <BrainLifeButton
+                <AnalyzeDropdown
                   datasetId={datasetId}
-                  onBrainlife={snapshot.onBrainlife}
                   snapshotVersion={snapshot.tag}
                 />
                 <CloneDropdown

packages/openneuro-app/src/scripts/fixtures/dataset-query.ts

@@ -153,7 +153,6 @@ export const dataset = {
     __typename: "Analytic",
   },
   derivatives: [],
-  onBrainlife: false,
 }
 
 export const snapshot = {
@@ -296,5 +295,4 @@ export const snapshot = {
   ],
   __typename: "Snapshot",
   hexsha: "d62fdc42e2a568a6f89e33d68d3ef343ff883e02",
-  onBrainlife: false,
 }

packages/openneuro-app/src/scripts/queries/dataset.ts

@@ -45,7 +45,6 @@ export const getDatasetPage = gql`
         dataladUrl
         local
       }
-      onBrainlife
     }
   }
   ${DatasetQueryFragments.DRAFT_FRAGMENT}