Add caching and auth token retrieval to DFDA components

Implemented caching for DFDA variable search results to improve performance. Added a function to retrieve and use DFDA access tokens for secure data fetching. Enhanced user interface with loading indicators and improved layout for various components.

Took 23 minutes

Author: mikepsinn

app/dfda/components/CitizenScienceSection.tsx

@@ -39,7 +39,7 @@ export default function CitizenScienceSection() {
       <motion.div 
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        className="space-y-8"
+        className="grid grid-cols-1 md:grid-cols-3 gap-8"
       >
         {features.map((feature, index) => (
           <FeatureBox

app/dfda/components/CostSavingsTable.tsx

@@ -59,12 +59,19 @@ export default function CostSavingsTable() {
 
   return (
     <div className="relative overflow-hidden rounded-xl border-4 border-black bg-white p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
+            <motion.h1 
+        className="mb-6 text-4xl md:text-4xl font-black uppercase"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+      >
+        👀Look at those savings! 🤑
+      </motion.h1>
       <motion.h2 
-        className="mb-6 text-2xl md:text-4xl font-black uppercase"
+        className="mb-6 md:text-2xl font-black uppercase"
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
       >
-        Savings from a Decentralized Autonomous FDA 💰
+        Savings from a Decentralized Autonomous FDA 
       </motion.h2>
 
       <div className="-mx-6 sm:mx-0">

app/dfda/components/SolutionSection.tsx

@@ -3,32 +3,50 @@
 import { motion } from 'framer-motion'
 import { Database, Brain, Bell } from 'lucide-react'
 import { FeatureBox } from './FeatureBox'
+import { getSafeUrlWithToken } from '../dfdaActions'
+import { useState } from 'react'
 
 export default function SolutionSection() {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleDigitalTwinSafeClick = async (path: string) => {
+    setIsLoading(true)
+    const url = await getSafeUrlWithToken('')
+    window.open(url, '_blank')
+  }
   const features = [
     {
       title: "Automated Data Collection",
       desc: "Import data from wearables and apps while leveraging AI-powered collection methods for comprehensive health insights.",
       color: "bg-green-400",
       icon: Database,
       media: "https://fdai.earth/wp-content/uploads/2024/03/import.gif",
-      onClick: () => console.log("Data Collection clicked")
+      onClick: () => {
+        // go to https://safe.dfda.earth/import in new tab
+        handleDigitalTwinSafeClick('/import')
+      }
     },
     {
       title: "Automated Analysis",
       desc: "Advanced AI algorithms analyze your health data to identify patterns and potential root causes.",
       color: "bg-teal-400",
       icon: Brain,
       media: "https://fdai.earth/wp-content/uploads/2024/03/root-cause-analysis-4x-small.gif",
-      onClick: () => console.log("Analysis clicked")
+      onClick: () => {
+        // go to https://safe.dfda.earth/app/public/#/app/studies in new tab
+        handleDigitalTwinSafeClick('/studies')
+      }
     },
     {
       title: "Real-Time Decision Support",
       desc: "Get personalized insights and recommendations based on your real-time health data analysis.",
       color: "bg-emerald-400",
       icon: Bell,
       media: "https://fdai.earth/wp-content/uploads/2024/03/real-time-decision-support-notifications-personalized-app-image.png",
-      onClick: () => console.log("Decision Support clicked")
+      onClick: () => {
+        // go to https://safe.dfda.earth/app/public/#/app/studies
+        window.open('https://safe.dfda.earth/app/public/#/app/studies', '_blank')
+      }
     }
   ]
 
@@ -39,7 +57,7 @@ export default function SolutionSection() {
       <motion.div 
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        className="space-y-8"
+        className="grid grid-cols-1 md:grid-cols-3 gap-8"
       >
         {features.map((feature, index) => (
           <FeatureBox

app/dfda/components/VariableSearchAutocomplete.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Input } from '@/components/ui/input'
 import { GlobalVariable } from '@/types/models/GlobalVariable'
 import { searchDfdaVariables } from '@/lib/clinicaltables'
@@ -11,6 +11,45 @@ interface VariableSearchAutocompleteProps {
   placeholder: string
 }
 
+// Add cache interface
+interface SearchCache {
+  timestamp: number
+  results: GlobalVariable[]
+}
+
+// Add cache duration constant (e.g., 1 hour)
+const CACHE_DURATION = 60 * 60 * 1000
+
+function getCachedResults(key: string): GlobalVariable[] | null {
+  try {
+    const cached = localStorage.getItem(key)
+    if (!cached) return null
+
+    const { timestamp, results } = JSON.parse(cached) as SearchCache
+    if (Date.now() - timestamp > CACHE_DURATION) {
+      localStorage.removeItem(key)
+      return null
+    }
+
+    return results
+  } catch (error) {
+    console.error('Error reading from cache:', error)
+    return null
+  }
+}
+
+function setCachedResults(key: string, results: GlobalVariable[]) {
+  try {
+    const cacheData: SearchCache = {
+      timestamp: Date.now(),
+      results
+    }
+    localStorage.setItem(key, JSON.stringify(cacheData))
+  } catch (error) {
+    console.error('Error writing to cache:', error)
+  }
+}
+
 export default function VariableSearchAutocomplete({ 
   onVariableSelect, 
   searchParams = {},
@@ -20,14 +59,44 @@ export default function VariableSearchAutocomplete({
   const [variables, setVariables] = useState<GlobalVariable[]>([])
   const [isLoading, setIsLoading] = useState(false)
   const [showDropdown, setShowDropdown] = useState(false)
+  const componentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (componentRef.current && !componentRef.current.contains(event.target as Node)) {
+        setShowDropdown(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
 
   useEffect(() => {
     const search = async () => {
       console.log('Searching for:', searchTerm ? `"${searchTerm}"` : '(empty string)')
       setIsLoading(true)
       try {
+        // Create a cache key based on search term and params
+        const cacheKey = `dfda-variable-search:${searchTerm}:${JSON.stringify(searchParams)}`
+        
+        // Check cache first
+        const cachedResults = getCachedResults(cacheKey)
+        if (cachedResults) {
+          console.log(`Using cached results for ${cacheKey}`)
+          setVariables(cachedResults)
+          setIsLoading(false)
+          return
+        }
+
+        // If not in cache, perform the search
         const results = await searchDfdaVariables(searchTerm, searchParams)
-        console.log('Search results:', results.length, 'items found')
+        console.log(`Search results for ${cacheKey}:`, results.length, 'items found')
+        
+        // Cache the results
+        setCachedResults(cacheKey, results)
         setVariables(results)
       } catch (error) {
         console.error('Error searching:', error)
@@ -41,7 +110,7 @@ export default function VariableSearchAutocomplete({
   }, [searchTerm, searchParams])
 
   return (
-    <div className="relative flex-grow">
+    <div ref={componentRef} className="relative flex-grow">
       <Input
         type="search"
         value={searchTerm}

app/dfda/components/home-page.tsx

@@ -11,11 +11,11 @@ import OutcomeSearchAutocomplete from './OutcomeSearchAutocomplete'
 import AdvancedTrialSearch from './AdvancedTrialSearch'
 import { Robot } from '@phosphor-icons/react'
 import { FeatureBox } from './FeatureBox'
-import ProblemSection from './ProblemSection'
 import SolutionSection from './SolutionSection'
-import GoodNewsSection from './GoodNewsSection'
 import CitizenScienceSection from './CitizenScienceSection'
 import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { getSafeUrlWithToken } from '../dfdaActions'
 
 const SquigglyPattern = () => (
   <svg className="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
@@ -28,41 +28,46 @@ const SquigglyPattern = () => (
 
 export default function HomePage() {
   const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleDigitalTwinSafeClick = async (path: string) => {
+    //setIsLoading(true)
+    const url = await getSafeUrlWithToken('')
+    window.open(url, '_blank')
+  }
 
   const features = [
     {
-      title: "Right to Trial Act",
-      desc: "Help us create this groundbreaking legislation",
+      title: "The Cure Acceleration Act",
+      desc: "Help us give people suffering access to the most promising treatments",
       color: "bg-blue-400",
       icon: Scroll,
-      media: "https://example.com/right-to-trial.jpg",
-      onClick: () => {
+      media: "https://wiki.dfda.earth/right_to_trial_act_image.jpg",
+      onClick: async () => {
         console.log("Right to Trial Act clicked")
+        setIsLoading(true)
         router.push("/dfda/right-to-trial-act")
       }
     },
     {
-      title: "FDAi Agent",
+      title: "Your Personal FDAi Agent",
       desc: "Help us give everyone a free superintelligent doctor",
       color: "bg-green-400",
       icon: Robot,
       media: "https://player.vimeo.com/video/930843979?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479",
       onClick: () => {
         console.log("FDAi Agent clicked")
         // Add specific behavior here, e.g., open a modal with AI tool demo
+        window.open("https://fdai.earth", "_blank")
       }
     },
     {
-      title: "Digital Twin Safe",
+      title: "Your Digital Twin Safe",
       desc: "Securely store and control your health data",
       color: "bg-purple-400",
       icon: Pill,
       media: "https://user-images.githubusercontent.com/2808553/180306571-ac9cc741-6f34-4059-a814-6f8a72ed8322.png",
-      onClick: () => {
-        console.log("Digital Twin Safe clicked")
-        // get a dfda access token and append it to safe.dfda.earth and open it in a new tab
-        window.open("https://safe/dfda.earth", "_blank")
-      }
+      onClick: handleDigitalTwinSafeClick
     },
     {
       title: "Clinipedia",
@@ -93,6 +98,7 @@ export default function HomePage() {
       desc: "Learn about the historical context and need for decentralization",
       color: "bg-yellow-400",
       icon: Info,
+      media: "https://thinkbynumbers.org/wp-content/uploads/2021/03/news-story-headline-1-1024x563.png",
       href: "/dfda/why",
       onClick: () => {
         // open https://dfda.earth in a new tab
@@ -133,6 +139,11 @@ export default function HomePage() {
 
   return (
     <div className="">
+      {isLoading && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-white"></div>
+        </div>
+      )}
       <SquigglyPattern />
       <header className="relative mb-12 overflow-hidden rounded-xl border-4 border-black bg-white p-6 text-center shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
         <motion.h1 

app/dfda/dfdaActions.ts

@@ -1,9 +1,35 @@
 "use server"
 
-import { Effectiveness } from "@prisma/client"
+import {Effectiveness} from "@prisma/client"
+import {authOptions} from "@/lib/auth"
 
-import { prisma } from "@/lib/db"
+import {prisma} from "@/lib/db"
 import {findArticleByTopic, writeArticle} from "@/lib/agents/researcher/researcher";
+import {dfdaGET, getOrCreateDfdaAccessToken} from '@/lib/dfda'
+import {getServerSession} from 'next-auth/next'
+
+export async function getSafeUrlWithToken(url: string) {
+  if(!url.includes('https')) {
+    url = 'https://safe.dfda.earth/app/public/#/app/' + url;
+  }
+  const token = await getDfdaAccessToken();
+  return `${url}?access_token=${token}`;
+}
+
+export async function getDfdaAccessToken() {
+  const session = await getServerSession(authOptions)
+  if (!session?.user?.id) {
+    console.log('No user ID found in session:', session)
+    return null
+  }
+  
+  try {
+    return await getOrCreateDfdaAccessToken(session.user.id)
+  } catch (error) {
+    console.error('Error getting DFDA access token:', error)
+    return null
+  }
+} 
 
 export async function fetchConditions() {
   return prisma.dfdaCondition.findMany()
@@ -159,4 +185,8 @@ export async function getMetaAnalysis(treatmentName: string, conditionName: stri
   }
 
     return writeArticle(topic, "test-user");
+}
+
+export const getDataSources = async (): Promise<any> => {
+  return dfdaGET('connectors/list', { final_callback_url: window.location.href })
 }