gnomAD assistant prototype

.gitignore

@@ -18,6 +18,10 @@ deploy_config.json
 
 browser/build.env
 
+# Environment configuration (contains local paths and secrets)
+.env
+.env.fish
+
 # Build outputs
 browser/dist
 
@@ -36,3 +40,10 @@ hail-*.log
 
 # Reads metadata databases
 reads/*.db
+
+.grove
+.grove-worktrees
+
+# Binary artifacts for Docker builds
+bin/
+resources/

browser/package.json

@@ -21,6 +21,9 @@
     "@gnomad/track-transcripts": "4.0.0",
     "@gnomad/track-variants": "3.0.0",
     "@gnomad/ui": "^3.0.0",
+    "@copilotkit/react-core": "^1.10.6",
+    "@copilotkit/react-ui": "^1.10.6",
+    "@copilotkit/react-textarea": "^1.10.6",
     "@visx/axis": "^3.0.0",
     "@visx/group": "^3.0.0",
     "@visx/legend": "^3.12.0",

browser/src/App.tsx

@@ -1,13 +1,17 @@
 import React, { Suspense, lazy, useEffect, useState } from 'react'
 import { BrowserRouter as Router, Route, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
+import { CopilotKit } from '@copilotkit/react-core'
+import '@copilotkit/react-ui/styles.css'
+import './styles/chatComponents.css'
 
 import Delayed from './Delayed'
 import ErrorBoundary from './ErrorBoundary'
 
 import Notifications, { showNotification } from './Notifications'
 import StatusMessage from './StatusMessage'
 import userPreferences from './userPreferences'
+import { GnomadCopilot } from './GnomadCopilot'
 
 const NavBar = lazy(() => import('./NavBar'))
 const Routes = lazy(() => import('./Routes'))
@@ -41,7 +45,7 @@
   const location = useLocation()
   useEffect(() => {
     if ((window as any).gtag) {
-      ;(window as any).gtag('config', (window as any).gaTrackingId, {
+      ; (window as any).gtag('config', (window as any).gaTrackingId, {
         page_path: location.pathname,
       })
     }
@@ -69,10 +73,12 @@
   }
 `
 
+
 const BANNER_CONTENT = null
 
 const App = () => {
   const [isLoading, setIsLoading] = useState(true)
+
   useEffect(() => {
     userPreferences.loadPreferences().then(
       () => {
@@ -89,44 +95,49 @@
     )
   }, [])
 
+  const copilotKitUrl = '/api/copilotkit'
+
   return (
-    <Router>
-      {/* On any navigation, send event to Google Analytics. */}
-      <Route path="/" component={GoogleAnalytics} />
-
-      {/**
-       * On any navigation, scroll to the anchor specified by location fragment (if any) or to the top of the page.
-       * If the page's module is already loaded, scrolling is handled by this router's render function. If the page's
-       * module is loaded by Suspense, scrolling is handled by the useEffect hook in the PageLoading component.
-       */}
-      <Route
-        path="/"
-        render={({ location }: any) => {
-          scrollToAnchorOrStartOfPage(location)
-          return null
-        }}
-      />
-
-      <ErrorBoundary>
-        {isLoading ? (
-          <Delayed>
-            <StatusMessage>Loading</StatusMessage>
-          </Delayed>
-        ) : (
-          <Suspense fallback={null}>
-            <TopBarWrapper>
-              <NavBar />
-              {BANNER_CONTENT && <Banner>{BANNER_CONTENT}</Banner>}
-            </TopBarWrapper>
-            <Notifications />
-
-            <Suspense fallback={<PageLoading />}>
-              <Routes />
+    <CopilotKit runtimeUrl={copilotKitUrl}>
+      <Router>
+        {/* On any navigation, send event to Google Analytics. */}
+        <Route path="/" component={GoogleAnalytics} />
+
+        {/**
+         * On any navigation, scroll to the anchor specified by location fragment (if any) or to the top of the page.
+         * If the page's module is already loaded, scrolling is handled by this router's render function. If the page's
+         * module is loaded by Suspense, scrolling is handled by the useEffect hook in the PageLoading component.
+         */}
+        <Route
+          path="/"
+          render={({ location }: any) => {
+            scrollToAnchorOrStartOfPage(location)
+            return null
+          }}
+        />
+
+        <ErrorBoundary>
+          {isLoading ? (
+            <Delayed>
+              <StatusMessage>Loading</StatusMessage>
+            </Delayed>
+          ) : (
+            <Suspense fallback={null}>
+              <GnomadCopilot>
+                <TopBarWrapper>
+                  <NavBar />
+                  {BANNER_CONTENT && <Banner>{BANNER_CONTENT}</Banner>}
+                </TopBarWrapper>
+                <Notifications />
+                <Suspense fallback={<PageLoading />}>
+                  <Routes />
+                </Suspense>
+              </GnomadCopilot>
             </Suspense>
-          </Suspense>
-        )}
-      </ErrorBoundary>
-    </Router>
+          )}
+        </ErrorBoundary>
+      </Router>
+    </CopilotKit>
   )
 }
 

browser/src/DocumentTitle.ts

@@ -1,20 +1,68 @@
 import PropTypes from 'prop-types'
 import { useEffect } from 'react'
+import { useCopilotReadable } from '@copilotkit/react-core'
 
-const DocumentTitle = ({ title }: any) => {
+const DocumentTitle = ({ title, pageContext }: any) => {
   useEffect(() => {
     const fullTitle = title ? `${title} | gnomAD` : 'gnomAD'
     document.title = fullTitle
   }, [title])
+
+  let contextDescription = 'The current page context'
+  let contextValue = 'No context is available for the current page.'
+
+  if (pageContext) {
+    if (pageContext.gene_id && pageContext.symbol) {
+      contextDescription = 'The currently viewed gene'
+      const geneContext = {
+        gene_id: pageContext.gene_id,
+        symbol: pageContext.symbol,
+        name: pageContext.name,
+        reference_genome: pageContext.reference_genome,
+      }
+      contextValue = JSON.stringify(geneContext, null, 2)
+    } else if (pageContext.variant_id) {
+      contextDescription = 'The currently viewed variant'
+      const datasetId = new URL(window.location.href).searchParams.get('dataset')
+      const variantContext = {
+        variant_id: pageContext.variant_id,
+        dataset: datasetId,
+        reference_genome: pageContext.reference_genome,
+        caid: pageContext.caid,
+        rsids: pageContext.rsids,
+      }
+      contextValue = JSON.stringify(variantContext, null, 2)
+    } else if (pageContext.chrom && pageContext.start && pageContext.stop) {
+      contextDescription = 'The currently viewed genomic region'
+      const regionContext = {
+        chrom: pageContext.chrom,
+        start: pageContext.start,
+        stop: pageContext.stop,
+        reference_genome: pageContext.reference_genome,
+      }
+      contextValue = JSON.stringify(regionContext, null, 2)
+    } else {
+      // Fallback for other contexts that might be passed
+      contextValue = JSON.stringify(pageContext, null, 2)
+    }
+  }
+
+  useCopilotReadable({
+    description: contextDescription,
+    value: contextValue,
+  })
+
   return null
 }
 
 DocumentTitle.propTypes = {
   title: PropTypes.string,
+  pageContext: PropTypes.object,
 }
 
 DocumentTitle.defaultProps = {
   title: null,
+  pageContext: null,
 }
 
 export default DocumentTitle

browser/src/GenePage/GenePage.tsx

@@ -362,7 +362,7 @@ const GenePage = ({ datasetId, gene, geneId }: Props) => {
   return (
     <TrackPage>
       <TrackPageSection>
-        <DocumentTitle title={`${gene.symbol} | ${labelForDataset(datasetId)}`} />
+        <DocumentTitle title={`${gene.symbol} | ${labelForDataset(datasetId)}`} pageContext={gene} />
         <GnomadPageHeading
           selectedDataset={datasetId}
           datasetOptions={{