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

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 { FileViewerEdf } from "./viewers/file-viewer-edf"
 
 /**
  * Choose the right viewer for each file type
@@ -34,6 +35,8 @@ const FileViewerType = ({ path, url, data }) => {
     return <FileViewerCsv data={data} />
   } else if (path.endsWith(".html")) {
     return <FileViewerHtml data={data} />
+  } else if (path.endsWith(".edf") || path.endsWith(".nwb")) {
+    return <FileViewerEdf url={url} />
   } else {
     return (
       <div className="file-viewer-fallback">

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

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

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

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