Merge pull request #3187 from OpenNeuroOrg/edf-viewer

feat(app): Add Neurosift viewer for EDF and NWB files

Author: nellh

packages/openneuro-app/src/scripts/dataset/files/file-viewer-type.jsx

@@ -6,6 +6,7 @@ import FileViewerJson from "./viewers/file-viewer-json.jsx"
 import FileViewerTsv from "./viewers/file-viewer-tsv.jsx"
 import FileViewerCsv from "./viewers/file-viewer-csv.jsx"
 import FileViewerHtml from "./viewers/file-viewer-html.jsx"
+import { FileViewerNeurosift } from "./viewers/file-viewer-neurosift"
 
 /**
  * Choose the right viewer for each file type
@@ -34,6 +35,10 @@ const FileViewerType = ({ path, url, data }) => {
     return <FileViewerCsv data={data} />
   } else if (path.endsWith(".html")) {
     return <FileViewerHtml data={data} />
+  } else if (path.endsWith(".edf")) {
+    return <FileViewerNeurosift url={url} filetype="edf" />
+  } else if (path.endsWith(".nwb")) {
+    return <FileViewerNeurosift url={url} filetype="nwb" />
   } else {
     return (
       <div className="file-viewer-fallback">

packages/openneuro-app/src/scripts/dataset/files/viewers/__tests__/file-viewer-neurosift.spec.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { FileViewerNeurosift } from "../file-viewer-neurosift"
+
+describe("File Viewer - EDF", () => {
+  it("renders an iframe with a src value", () => {
+    render(
+      <FileViewerNeurosift
+        url="https://example.com/example.edf"
+        filetype="edf"
+      />,
+    )
+    expect(screen.getByTitle("Neurosift viewer")).toBeInTheDocument()
+  })
+})

packages/openneuro-app/src/scripts/dataset/files/viewers/file-viewer-neurosift.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import styled from "@emotion/styled"
+
+const ScaledIframe = styled.iframe`
+  width: 100%;
+  height: 50vh;
+  border: none;
+`
+
+interface FileViewerNeurosiftProps {
+  url: string
+  filetype: "nwb" | "edf"
+}
+
+/**
+ * Viewer embedding Neurosift for EDF and NWB data
+ */
+export const FileViewerNeurosift = (
+  { url, filetype }: FileViewerNeurosiftProps,
+) => {
+  const viewerUrl =
+    `https://neurosift.app/?p=/${filetype}&embedded=1&url=${url}`
+  return <ScaledIframe src={viewerUrl} title="Neurosift viewer" />
+}
+
+export default FileViewerNeurosift