OpenNeuroOrg · thinknoack · Apr 11, 2025 · Apr 11, 2025 · Apr 14, 2025 · Apr 14, 2025
diff --git a/.env.example b/.env.example
@@ -4,4 +4,8 @@ PERSISTENT_DIR=/data
 # macOS Development Setup - Fixes issues with elastic search container - set to ES_JAVA_OPTS=-XX:UseSVE=0 -Dio.netty.noUnsafe=true -Dio.netty.noKeySetOptimization=true  MEM_LIMIT=2g SECOMP="unconfined"
 MEM_LIMIT=
 ES_JAVA_OPTS=
-SECOMP=
+SECOMP=
+
+# coral --------------------------------------------------------------------
+
+CORAL_SIGNING_SECRET=""
diff --git a/config.env.example b/config.env.example
@@ -4,6 +4,9 @@ CRN_SERVER_URL=http://localhost:9876
 # Secret authentication value for this instance
 JWT_SECRET=
 
+# Coral Talk Secret from SSO Config in Admin Panel
+CORAL_JWT_SECRET=
+
 # Google oauth2 configuration - configure to enable Google auth
 # https://developers.google.com/identity/sign-in/web/sign-in for instructions
 GOOGLE_CLIENT_ID=

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -155,3 +155,17 @@ services:
     ports:
       - "9200:9200"
       - "9300:9300"
+
+  # Coral Project Talk
+  coral:
+    image: coralproject/talk:7
+    restart: always
+    ports:
+      - "5001:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - MONGODB_URI=mongodb://mongo:27017/coral
+      - REDIS_URI=redis://redis:6379
+      - SIGNING_SECRET=${CORAL_SIGNING_SECRET}
diff --git a/packages/openneuro-app/src/@types/custom.d.ts b/packages/openneuro-app/src/@types/custom.d.ts
@@ -45,6 +45,9 @@ interface Blob {
 
 interface Window {
   showDirectoryPicker: any
+  Coral?: {
+    createStreamEmbed: (config: any) => void
+  }
 }
 
 interface Navigator {

diff --git a/packages/openneuro-app/src/assets/coral/coral-embed.css b/packages/openneuro-app/src/assets/coral/coral-embed.css
@@ -0,0 +1,60 @@
+#coral {
+  --palette-primary-200: #b5cbd3;     
+  --palette-primary-400: #377ed2;
+  --palette-primary-500: #1c4550;
+  --palette-primary-700: #163a45;
+  --palette-primary-800: #102f38;
+  --palette-primary-900: #0b252c;
+
+  --palette-error-600: #cc322f;
+  --palette-error-700: #b32c29;
+  --palette-error-800: #992523;
+  --palette-error-900: #7f1f1d;
+
+  --palette-success-600: #28b463;
+  --palette-success-700: #239b56;
+  --palette-success-800: #1d8348;
+  --palette-success-900: #186a3b;
+
+  /* FONTS */
+  --font-family-primary: 'Open Sans', sans-serif;
+  --font-family-secondary: 'Nunito', sans-serif;
+
+  --font-weight-primary-bold: 700;
+  --font-weight-primary-semi-bold: 600;
+  --font-weight-primary-regular: 500;
+
+  --font-weight-secondary-bold: 700;
+  --font-weight-secondary-regular: 500;
+
+  /* SHADOWS */
+  --shadow-popover: 1px 0px 4px rgba(0, 0, 0, 0.25);
+}
+
+
+#coral .coral.coral-viewerBox{
+  display: none;
+}
+
+#coral{
+    --palette-primary-500: #1c4550;
+}
+
+#coral.meg{
+  --palette-primary-500:rgba(156, 57, 0, 1);
+}
+
+ #coral.eeg{
+    --palette-primary-500:rgba(134, 31, 55, 1);
+}
+
+ #coral.pet{
+    --palette-primary-500:rgba(0, 105, 192, 1);
+}
+
+ #coral.ieeg{
+    --palette-primary-500:rgba(18, 109, 62, 1);
+}
+#coral.mri{
+  --palette-primary-500:rgba(79, 51, 130, 1);
+}
diff --git a/packages/openneuro-app/src/client.jsx b/packages/openneuro-app/src/client.jsx
@@ -1,7 +1,6 @@
 /**
  * Browser client entrypoint
  */
-import "./scripts/utils/global-polyfill"
 import "./scripts/sentry"
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
 import React from "react"

diff --git a/packages/openneuro-app/src/index.html b/packages/openneuro-app/src/index.html
@@ -18,6 +18,11 @@
       href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
       rel="stylesheet"
     />
+    <script
+    src="http://localhost:5001/assets/js/embed.js"
+    async
+    defer
+  ></script>
   </head>
 
   <body>

diff --git a/...penneuro-app/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap b/...penneuro-app/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap
@@ -747,15 +747,8 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
               </div>
             </div>
             <div
-              class="dataset-comments"
-            >
-              <h2>
-                Comments
-              </h2>
-              <div>
-                Please sign in to contribute to the discussion.
-              </div>
-            </div>
+              id="coral_thread"
+            />
           </div>
         </div>
         <div

diff --git a/packages/openneuro-app/src/scripts/dataset/comments/__tests__/coral-embed.spec.jsx b/packages/openneuro-app/src/scripts/dataset/comments/__tests__/coral-embed.spec.jsx
@@ -0,0 +1,44 @@
+import React from "react"
+import { render, waitFor } from "@testing-library/react"
+import { CoralEmbed } from "../coral-embed"
+import { UserModalOpenCtx } from "../../../utils/user-login-modal-ctx"
+import { vi } from "vitest"
+
+vi.mock("../../../utils/user-login-modal-ctx", () => ({
+  UserModalOpenCtx: React.createContext({ setUserModalOpen: vi.fn() }),
+}))
+
+global.fetch = vi.fn().mockResolvedValue(Promise.resolve({
+  json: vi.fn().mockResolvedValue({ token: "mock-sso-token" }),
+}))
+
+// Mock the global Coral object
+const mockCoralCreateStreamEmbed = vi.fn()
+global.window.Coral = {
+  createStreamEmbed: mockCoralCreateStreamEmbed,
+}
+
+describe("CoralEmbed - Simple Embed.js Check (Vitest)", () => {
+  const mockStoryID = "simple-test-story"
+  const mockModalities = ["test"]
+
+  it("should check if window.Coral exists and initializeCoralEmbed is called", async () => {
+    render(
+      <UserModalOpenCtx.Provider value={{ setUserModalOpen: vi.fn() }}>
+        <CoralEmbed storyID={mockStoryID} modalities={mockModalities} />
+      </UserModalOpenCtx.Provider>,
+    )
+
+    // fetch and Coral initialization
+    await waitFor(() => {
+      expect(global.window.Coral).toBeDefined()
+      expect(mockCoralCreateStreamEmbed).toHaveBeenCalledTimes(1)
+    })
+
+    expect(mockCoralCreateStreamEmbed).toHaveBeenCalledWith(
+      expect.objectContaining({
+        storyID: mockStoryID,
+      }),
+    )
+  })
+})
diff --git a/packages/openneuro-app/src/scripts/dataset/comments/coral-embed.tsx b/packages/openneuro-app/src/scripts/dataset/comments/coral-embed.tsx
@@ -0,0 +1,56 @@
+import React, { useContext, useEffect, useRef } from "react"
+import * as Sentry from "@sentry/react"
+import { isAdmin } from "../../authentication/admin-user"
+import { UserModalOpenCtx } from "../../utils/user-login-modal-ctx"
+
+export const CoralEmbed: React.FC<{ storyID: string; modalities: string[] }> = (
+  { storyID, modalities },
+) => {
+  const coralContainerRef = useRef<HTMLDivElement>(null)
+  const isAdminUser = isAdmin()
+  const { setUserModalOpen } = useContext(UserModalOpenCtx)
+
+  useEffect(() => {
+    const fetchAndInitializeCoral = async () => {
+      const accessToken = document.cookie
+        .split("; ")
+        .find((cookie) => cookie.startsWith("accessToken="))
+        ?.split("=")[1]
+      const headers = accessToken
+        ? { Authorization: `Bearer ${accessToken}` }
+        : {}
+
+      try {
+        const response = await fetch("/api/auth/coral-sso", { headers })
+        const data = await response.json()
+        initializeCoralEmbed(data.token)
+      } catch (error) {
+        Sentry.captureException(error)
+        initializeCoralEmbed(undefined)
+      }
+    }
+
+    const initializeCoralEmbed = (token: string | undefined) => {
+      if (coralContainerRef.current && window.Coral) {
+        window.Coral.createStreamEmbed({
+          id: coralContainerRef.current.id,
+          autoRender: true,
+          rootURL: "http://localhost:5001",
+          storyID: storyID,
+          storyURL: window.location.href,
+          accessToken: token,
+          role: isAdminUser ? "ADMIN" : "COMMENTER",
+          containerClassName: modalities,
+          events: function (events) {
+            events.on("loginPrompt", function () {
+              setUserModalOpen(true)
+            })
+          },
+        })
+      }
+    }
+    fetchAndInitializeCoral()
+  }, [storyID, isAdminUser, setUserModalOpen])
+
+  return <div id="coral_thread" ref={coralContainerRef}></div>
+}
diff --git a/packages/openneuro-app/src/scripts/dataset/routes/dataset-default.tsx b/packages/openneuro-app/src/scripts/dataset/routes/dataset-default.tsx
@@ -3,49 +3,50 @@
 import { ReadMore } from "../../components/read-more/ReadMore"
 import { MetaDataBlock } from "../components/MetaDataBlock"
 import Files from "../files/files"
-import Comments from "../comments/comments"
 import EditDescriptionField from "../fragments/edit-description-field"
+import { CoralEmbed } from "../comments/coral-embed"
 
 /**
  * Default tab for dataset draft pages
  */
-export const DatasetDefault = ({ dataset, hasEdit }) => (
-  <>
-    <MetaDataBlock
-      heading="README"
-      className="dataset-readme markdown-body"
-      item={dataset.draft.readme}
-      renderEditor={() => (
-        <EditDescriptionField
-          datasetId={dataset.id}
-          field="readme"
-          rows={12}
-          description={dataset.draft.readme}
-          editMode={hasEdit}
-        >
-          <ReadMore
-            id="readme"
-            expandLabel="Read More"
-            collapseLabel="Collapse"
+export const DatasetDefault = ({ dataset, hasEdit }) => {
+  return (
+    <>
+      <MetaDataBlock
+        heading="README"
+        className="dataset-readme markdown-body"
+        item={dataset.draft.readme}
+        renderEditor={() => (
+          <EditDescriptionField
+            datasetId={dataset.id}
+            field="readme"
+            rows={12}
+            description={dataset.draft.readme}
+            editMode={hasEdit}
           >
-            <Markdown>{dataset.draft.readme || "N/A"}</Markdown>
-          </ReadMore>
-        </EditDescriptionField>
-      )}
-    />
-    <Files
-      datasetId={dataset.id}
-      snapshotTag={null}
-      datasetName={dataset.draft.description.Name}
-      files={dataset.draft.files}
-      editMode={hasEdit}
-      datasetPermissions={dataset.permissions}
-      summary={dataset.draft?.summary}
-    />
-    <Comments
-      datasetId={dataset.id}
-      uploader={dataset.uploader}
-      comments={dataset.comments}
-    />
-  </>
-)
+            <ReadMore
+              id="readme"
+              expandLabel="Read More"
+              collapseLabel="Collapse"
+            >
+              <Markdown>{dataset.draft.readme || "N/A"}</Markdown>
+            </ReadMore>
+          </EditDescriptionField>
+        )}
+      />
+      <Files
+        datasetId={dataset.id}
+        snapshotTag={null}
+        datasetName={dataset.draft.description.Name}
+        files={dataset.draft.files}
+        editMode={hasEdit}
+        datasetPermissions={dataset.permissions}
+        summary={dataset.draft?.summary}
+      />
+      <CoralEmbed
+        storyID={dataset.id}
+        modalities={dataset.draft.summary.modalities}
+      />
+    </>
+  )
+}
diff --git a/packages/openneuro-app/src/scripts/dataset/routes/snapshot-default.tsx b/packages/openneuro-app/src/scripts/dataset/routes/snapshot-default.tsx
@@ -3,7 +3,7 @@ import { Markdown } from "../../utils/markdown"
 import { ReadMore } from "../../components/read-more/ReadMore"
 import { MetaDataBlock } from "../components/MetaDataBlock"
 import Files from "../files/files"
-import Comments from "../comments/comments"
+import { CoralEmbed } from "../comments/coral-embed"
 
 /**
  * Default tab for snapshot pages
@@ -30,10 +30,9 @@ export const SnapshotDefault = ({ dataset, snapshot }) => (
       datasetPermissions={dataset.permissions}
       summary={snapshot?.summary}
     />
-    <Comments
-      datasetId={dataset.id}
-      uploader={dataset.uploader}
-      comments={dataset.comments}
+    <CoralEmbed
+      storyID={dataset.id}
+      modalities={dataset.draft.summary.modalities}
     />
   </>
 )
diff --git a/packages/openneuro-app/src/scripts/utils/global-polyfill.ts b/packages/openneuro-app/src/scripts/utils/global-polyfill.ts
diff --git a/packages/openneuro-server/src/config.ts b/packages/openneuro-server/src/config.ts
@@ -30,6 +30,9 @@ const config = {
     jwt: {
       secret: process.env.JWT_SECRET,
     },
+    coral: {
+      secret: process.env.CORAL_JWT_SECRET,
+    },
   },
   mongo: {
     url: process.env.MONGO_URL,