@openneuro/app 4.26.0 → 4.27.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.26.0",
+  "version": "4.27.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -16,14 +16,15 @@
   "dependencies": {
     "@apollo/client": "3.7.2",
     "@artsy/fresnel": "^1.3.1",
-    "@elastic/apm-rum": "5.16.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.34.0",
-    "@openneuro/client": "^4.26.0",
-    "@openneuro/components": "^4.26.0",
+    "@openneuro/client": "^4.27.0-alpha.0",
+    "@openneuro/components": "^4.27.0-alpha.0",
+    "@sentry/react": "^8.25.0",
     "@tanstack/react-table": "^8.9.3",
-    "bids-validator": "1.14.6",
+    "bids-validator": "1.14.8",
+    "buffer": "^6.0.3",
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
     "date-fns": "^2.16.1",
@@ -74,5 +75,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d40901233c20aa7eb55d93667b1e3f5c41734cfc"
+  "gitHead": "7577739ccee193d927d81806f0eeffc285a28800"
 }

package/src/client.jsx

@@ -2,7 +2,7 @@
  * Browser client entrypoint - see server.tsx for SSR entrypoint
  */
 import "./scripts/utils/global-polyfill"
-import "./scripts/apm.js"
+import "./scripts/sentry"
 import { ApolloProvider, InMemoryCache } from "@apollo/client"
 import { createClient } from "@openneuro/client"
 import React from "react"

package/src/scripts/common/content/download-agreement.ts

@@ -0,0 +1,9 @@
+export const DownloadAgreement = "I affirm that I have the appropriate \
+                institutional permissions to receive de-identified data for \
+                secondary data analysis, and that neither I nor my collaborators \
+                will attempt to reidentify individuals whose data are contained \
+                in downloads from OpenNeuro. Further, if for any reason the \
+                identity of participants contained in downloads from OpenNeuro \
+                become known to me I will make no effort to recontact such \
+                participants and will provide immediate notice to OpenNeuro \
+                staff."

package/src/scripts/common/content/terms.tsx

@@ -0,0 +1,39 @@
+import React, { ReactElement } from "react"
+
+/** Terms and conditions content. */
+export function Terms(): ReactElement {
+  return (
+    <>
+      <p>
+        I am the owner of this dataset and have any necessary ethics permissions
+        to share the data publicly. This dataset does not include any
+        identifiable personal health information as defined by the{" "}
+        <a href="https://www.hhs.gov/hipaa/for-professionals/privacy/laws-regulations/">
+          Health Insurance Portability and Accountability Act of 1996
+        </a>{" "}
+        (including names, zip codes, dates of birth, acquisition dates, etc). I
+        agree to destroy any key linking the personal identity of research
+        participants to the subject codes used in the dataset.
+      </p>
+      <p>
+        I agree that this dataset will become publicly available under a{" "}
+        <a href="https://wiki.creativecommons.org/wiki/CC0">
+          Creative Commons CC0
+        </a>{" "}
+        license after a grace period of 36 months counted from the date of the
+        first snapshot creation for this dataset. You will be able to apply for
+        up to two 6 month extensions to increase the grace period in case the
+        publication of a corresponding paper takes longer than expected. See
+        {" "}
+        <a href="/faq">FAQ</a> for details.
+      </p>
+      <p>This dataset is not subject to GDPR protections.</p>
+      <p>
+        Generally, data should only be uploaded to a single data archive. In the
+        rare cases where it is necessary to upload the data to two databases
+        (such as the NIMH Data Archive), I agree to ensure that the datasets are
+        harmonized across archives.
+      </p>
+    </>
+  )
+}

package/src/scripts/components/agreement.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { useLocalStorage } from "../utils/local-storage"
+import { DownloadAgreement } from "../common/content/download-agreement"
 import styled from "@emotion/styled"
 
 export const STORAGE_KEY = "agreement"
@@ -46,15 +47,7 @@ export const Agreement = () => {
           <div className="grid grid-between">
             <div className="col col-lg col-11">
               <p>
-                By clicking "I Agree", I affirm that I have the appropriate
-                institutional permissions to receive de-identified data for
-                secondary data analysis, and that neither I nor my collaborators
-                will attempt to reidentify individuals whose data are contained
-                in downloads from OpenNeuro. Further, if for any reason the
-                identity of participants contained in downloads from OpenNeuro
-                become known to me I will make no effort to recontact such
-                participants and will provide immediate notice to OpenNeuro
-                staff.
+                By clicking "I Agree", {DownloadAgreement}
               </p>
             </div>
             <div className="col col-lg col-1">

package/src/scripts/config.ts

@@ -20,13 +20,15 @@ export interface OpenNeuroConfig {
     }
   }
   analytics?: { trackingIds: string }
-  sentry?: { environment: string }
+  sentry?: {
+    environment: string
+    dsn: string
+  }
   support?: {
     url: string
   }
   github?: string
   publicBucket?: string
-  ELASTIC_APM_SERVER_URL?: string
 }
 
 export const config: OpenNeuroConfig = {
@@ -54,11 +56,13 @@ export const config: OpenNeuroConfig = {
       },
     ),
   },
-  sentry: { environment: globalThis.OpenNeuroConfig.ENVIRONMENT },
+  sentry: {
+    environment: globalThis.OpenNeuroConfig.ENVIRONMENT,
+    dsn: globalThis.OpenNeuroConfig.SENTRY_DSN,
+  },
   support: { url: globalThis.OpenNeuroConfig.SUPPORT_URL },
   github: globalThis.OpenNeuroConfig.DATALAD_GITHUB_ORG,
   publicBucket: globalThis.OpenNeuroConfig.AWS_S3_PUBLIC_BUCKET,
-  ELASTIC_APM_SERVER_URL: globalThis.OpenNeuroConfig.ELASTIC_APM_SERVER_URL,
 }
 
 export const getConfig = (): OpenNeuroConfig => config

package/src/scripts/dataset/dataset-query.jsx

@@ -1,5 +1,5 @@
-import { apm } from "../apm"
 import React from "react"
+import * as Sentry from "@sentry/react"
 import PropTypes from "prop-types"
 import { useNavigate, useParams } from "react-router-dom"
 import { gql, useApolloClient, useQuery } from "@apollo/client"
@@ -48,11 +48,7 @@ export const DatasetQueryHook = ({ datasetId, draft }) => {
       }
       return <FourOFourPage message={error.message} />
     } else {
-      try {
-        apm.captureError(error)
-      } catch (err) {
-        // Ignore failure to write to APM
-      }
+      Sentry.captureException(error)
       return <FourOFourPage />
     }
   } else {

package/src/scripts/dataset/download/download-native.js

@@ -1,3 +1,4 @@
+import * as Sentry from "@sentry/react"
 import { trackDownload } from "./track-download.js"
 import {
   downloadAbortToast,
@@ -9,7 +10,6 @@ import {
   permissionsToast,
   requestFailureToast,
 } from "./native-file-toast.jsx"
-import { apm } from "../../apm.js"
 import { downloadDataset } from "./download-query"
 
 /**
@@ -46,7 +46,7 @@ let downloadCanceled
  * Recursive download for file trees via browser file access API
  */
 const downloadTree = async (
-  { datasetId, snapshotTag, client, apmTransaction, dirHandle, toastId },
+  { datasetId, snapshotTag, client, dirHandle, toastId },
   path = "",
   tree = null,
 ) => {
@@ -64,7 +64,6 @@ const downloadTree = async (
           datasetId,
           snapshotTag,
           client,
-          apmTransaction,
           dirHandle,
           toastId,
         },
@@ -100,7 +99,7 @@ const downloadTree = async (
       if (status === 200) {
         await body.pipeThrough(progress).pipeTo(writable)
       } else {
-        apmTransaction.captureError(statusText)
+        Sentry.captureException(statusText)
         return requestFailureToast(file.filename)
       }
     }
@@ -117,18 +116,13 @@ export const downloadNative = (datasetId, snapshotTag, client) => async () => {
   try {
     trackDownload(client, datasetId, snapshotTag)
   } catch (err) {
-    apm.captureError(err)
-  }
-  const apmTransaction = apm &&
-    apm.startTransaction(`download:${datasetId}`, "download")
-  if (apmTransaction) {
-    apmTransaction.addLabels({ datasetId, snapshot: snapshotTag })
+    Sentry.captureException(err)
   }
+  const scope = new Sentry.Scope()
+  scope.setContext("dataset", { datasetId, snapshot: snapshotTag })
   downloadCanceled = false
   let toastId
   try {
-    const apmSelect = apmTransaction &&
-      apmTransaction.startSpan("showDirectoryPicker")
     // Open user selected directory
     const dirHandle = await window.showDirectoryPicker()
     toastId = downloadToast(
@@ -137,12 +131,10 @@ export const downloadNative = (datasetId, snapshotTag, client) => async () => {
       snapshotTag,
       () => (downloadCanceled = true),
     )
-    apmSelect && apmSelect.end()
     await downloadTree({
       datasetId,
       snapshotTag,
       client,
-      apmTransaction,
       dirHandle,
       toastId,
     })
@@ -158,9 +150,9 @@ export const downloadNative = (datasetId, snapshotTag, client) => async () => {
       // Some unknown issue occurred (out of disk space, disk caught fire, etc...)
       nativeErrorToast()
     }
-    apm.captureError(err)
+    Sentry.captureException(err)
   } finally {
-    if (apmTransaction) apmTransaction.end()
     downloadToastDone(toastId)
+    Sentry.getCurrentScope().clear()
   }
 }

package/src/scripts/dataset/mutations/admin-exports.jsx

@@ -1,7 +1,6 @@
 import React from "react"
 import { gql, useMutation } from "@apollo/client"
 import PropTypes from "prop-types"
-import { reexporterLogsURL } from "../../resources/kibana"
 import { Button } from "@openneuro/components/button"
 import styled from "@emotion/styled"
 
@@ -50,15 +49,6 @@ const AdminExports = ({ dataset }) => {
             reexportRemotes({ variables: { datasetId: dataset.id } })
           }}
         />
-        <Button
-          icon="fa fa-file-text"
-          label="View Export Logs"
-          secondary={true}
-          size="small"
-          onClick={() => {
-            window.open(reexporterLogsURL, "_blank")
-          }}
-        />
       </ButtonRow>
     </div>
   )

package/src/scripts/errors/errorBoundary.jsx

@@ -1,6 +1,6 @@
-import { apm } from "../apm"
 import React from "react"
 import PropTypes from "prop-types"
+import * as Sentry from "@sentry/react"
 import FreshdeskInterface from "./freshdeskInterface.jsx"
 
 // raises error if catchErrorIf returns true
@@ -36,8 +36,7 @@ class ErrorBoundary extends React.Component {
   componentDidCatch(error, { componentStack }) {
     const message = String(error)
     error.componentStack = componentStack
-    apm.setCustomContext({ datasetId: this.props.datasetId })
-    apm.captureError(error)
+    Sentry.captureException(error)
     this.setState({
       message,
     })

package/src/scripts/pages/__tests__/terms.spec.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { TermsPage } from "../terms"
+
+describe("TermsPage", () => {
+  it("renders the terms and conditions", () => {
+    render(<TermsPage />)
+    expect(screen.getByText("OpenNeuro Terms and Conditions"))
+      .toBeInTheDocument()
+  })
+})

package/src/scripts/pages/front-page/front-page.tsx

@@ -1,5 +1,5 @@
-import { apm } from "../../apm"
 import React from "react"
+import * as Sentry from "@sentry/react"
 import { gql, useQuery } from "@apollo/client"
 import { Mutation } from "@apollo/client/react/components"
 import styled from "@emotion/styled"
@@ -111,7 +111,7 @@ export const FrontPageTopQuery = ({ query }) => {
     )
   } else if (result.error || result.data.datasets == null) {
     if (result?.error) {
-      apm.captureError(result?.error)
+      Sentry.captureException(result?.error)
     }
     return <div>Failed to load top datasets, please try again later.</div>
   } else {
@@ -141,7 +141,7 @@ export const FrontPageNewQuery = ({ query }) => {
     return <Loading />
   } else if (result.error || result.data.datasets == null) {
     if (result?.error) {
-      apm.captureError(result?.error)
+      Sentry.captureException(result?.error)
     }
     return <div>Failed to load top datasets, please try again later.</div>
   } else {

package/src/scripts/pages/terms.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from "react"
+import { Terms } from "../common/content/terms"
+import Helmet from "react-helmet"
+import { frontPage } from "./front-page/front-page-content"
+import { DownloadAgreement } from "../common/content/download-agreement"
+import styled from "@emotion/styled"
+
+const TermsPageStyle = styled.div`
+  background: white;
+
+  .container {
+    max-width: 60em;
+  }
+`
+
+export function TermsPage(): ReactElement {
+  return (
+    <TermsPageStyle>
+      <Helmet>
+        <title>Terms and Conditions - {frontPage.pageTitle}</title>
+        <meta
+          name="description"
+          content={`Terms and conditions of the ${frontPage.pageTitle} data archive`}
+        />
+      </Helmet>
+      <div className="container">
+        <h2>OpenNeuro Terms and Conditions</h2>
+        <h3>
+          By uploading to the {frontPage.pageTitle}{" "}
+          data archive I agree to the following conditions:
+        </h3>
+        <Terms />
+        <h3>Downloading Data:</h3>
+        <p>{DownloadAgreement}</p>
+      </div>
+    </TermsPageStyle>
+  )
+}

package/src/scripts/routes.tsx

@@ -16,6 +16,7 @@ import Citation from "./pages/citation-page"
 import FourOFourPage from "./errors/404page"
 import { ImportDataset } from "./pages/import-dataset"
 import { DatasetMetadata } from "./pages/metadata/dataset-metadata"
+import { TermsPage } from "./pages/terms"
 
 const AppRoutes: React.VoidFunctionComponent = () => (
   <Routes>
@@ -28,6 +29,7 @@ const AppRoutes: React.VoidFunctionComponent = () => (
     <Route path="/error/*" element={<ErrorRoute />} />
     <Route path="/pet" element={<PETRedirect />} />
     <Route path="/cite" element={<Citation />} />
+    <Route path="/terms" element={<TermsPage />} />
     <Route path="/import" element={<ImportDataset />} />
     <Route path="/metadata" element={<DatasetMetadata />} />
     <Route path="/public" element={<Navigate to="/search" replace />} />

package/src/scripts/sentry.ts

@@ -0,0 +1,20 @@
+import * as Sentry from "@sentry/react"
+import { config } from "./config"
+import { version } from "../lerna.json"
+
+Sentry.init({
+  dsn: config.sentry.dsn,
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.replayIntegration(),
+  ],
+  // Performance Monitoring
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: [config.url],
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  environment: config.sentry.environment,
+  release: `openneuro-app@${version}`,
+})

package/src/scripts/uploader/upload-disclaimer-input.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
+import { Terms } from "../common/content/terms"
 
 interface UploadDisclaimerInputProps {
   affirmedDefaced: boolean
@@ -30,36 +31,7 @@ export const UploadDisclaimerInput: React.FunctionComponent<
         By uploading this dataset to OpenNeuro I agree to the following
         conditions:
       </h4>
-      <p>
-        I am the owner of this dataset and have any necessary ethics permissions
-        to share the data publicly. This dataset does not include any
-        identifiable personal health information as defined by the{" "}
-        <a href="https://www.hhs.gov/hipaa/for-professionals/privacy/laws-regulations/">
-          Health Insurance Portability and Accountability Act of 1996
-        </a>{" "}
-        (including names, zip codes, dates of birth, acquisition dates, etc). I
-        agree to destroy any key linking the personal identity of research
-        participants to the subject codes used in the dataset.
-      </p>
-      <p>
-        I agree that this dataset will become publicly available under a{" "}
-        <a href="https://wiki.creativecommons.org/wiki/CC0">
-          Creative Commons CC0
-        </a>{" "}
-        license after a grace period of 36 months counted from the date of the
-        first snapshot creation for this dataset. You will be able to apply for
-        up to two 6 month extensions to increase the grace period in case the
-        publication of a corresponding paper takes longer than expected. See
-        {" "}
-        <a href="/faq">FAQ</a> for details.
-      </p>
-      <p>This dataset is not subject to GDPR protections.</p>
-      <p>
-        Generally, data should only be uploaded to a single data archive. In the
-        rare cases where it is necessary to upload the data to two databases
-        (such as the NIMH Data Archive), I agree to ensure that the datasets are
-        harmonized across archives.
-      </p>
+      <Terms />
       <p>Please affirm one of the following:</p>
       <DisclaimerLabel>
         <input

package/src/scripts/uploader/uploader.jsx

@@ -1,4 +1,4 @@
-import { apm } from "../apm"
+import * as Sentry from "@sentry/react"
 import { toast } from "react-toastify"
 import ToastContent from "../common/partials/toast-content.jsx"
 import React from "react"
@@ -224,7 +224,7 @@ export class UploadClient extends React.Component {
           })
         })
         .catch((error) => {
-          apm.captureError(error)
+          Sentry.captureException(error)
           toast.error(
             <ToastContent
               title="Dataset creation failed"
@@ -302,7 +302,7 @@ export class UploadClient extends React.Component {
         this.uploadCompleteAction()
       }
     } catch (error) {
-      apm.captureError(error)
+      Sentry.captureException(error)
       const toastId = toast.error(
         <ToastContent
           title="Dataset upload failed"
@@ -327,7 +327,7 @@ export class UploadClient extends React.Component {
         try {
           this.state.xhr.abort()
         } catch (e) {
-          apm.captureError(e)
+          Sentry.captureException(e)
         }
       }
     }