Refactor HomePage component and update related imports

Replaces HomePage component with DFDAHomePage and updates its structure. Adjusts related imports and incorporates a new VariableSearchAutocomplete with optimized caching.

Took 35 minutes

Author: mikepsinn

app/dfda/components/AdvancedTrialSearch.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react'
 import { Search, ArrowRight, ChevronDown } from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import { searchConditions, searchInterventions } from '@/lib/clinicaltables'
+import { searchConditions } from '@/lib/clinicaltables'
 import { motion, AnimatePresence } from 'framer-motion'
 interface SearchFilters {
   // Basic Search
@@ -229,18 +229,14 @@ export default function AdvancedTrialSearch({ initialFilters }: AdvancedTrialSea
     setCondition(value)
 
     // Removed the character length limitation
-    if (true) {
-      setLoading(true)
-      try {
-        const results = await searchConditions(value)
-        setSuggestions(results.slice(0, 5))
-      } catch (error) {
-        console.error('Error fetching suggestions:', error)
-      }
-      setLoading(false)
-    } else {
-      setSuggestions([])
+    setLoading(true)
+    try {
+      const results = await searchConditions(value)
+      setSuggestions(results.slice(0, 5))
+    } catch (error) {
+      console.error('Error fetching suggestions:', error)
     }
+    setLoading(false)
   }
 
   const handleInputFocus = async () => {

app/dfda/components/VariableSearchAutocomplete.tsx

@@ -40,9 +40,21 @@ function getCachedResults(key: string): GlobalVariable[] | null {
 
 function setCachedResults(key: string, results: GlobalVariable[]) {
   try {
+    // shrink the variables and just keep the name, url, and pngUrl
+    const smallerResults = results.map(variable => ({
+      name: variable.name,
+      url: variable.url,
+      pngUrl: variable.pngUrl,
+      id: variable.id,
+      userId: variable.userId,
+      variableId: variable.variableId,
+      displayName: variable.displayName,
+      description: variable.description,
+      variableCategoryName: variable.variableCategoryName
+    }))
     const cacheData: SearchCache = {
       timestamp: Date.now(),
-      results
+      results: smallerResults
     }
     localStorage.setItem(key, JSON.stringify(cacheData))
   } catch (error) {
@@ -60,6 +72,14 @@ export default function VariableSearchAutocomplete({
   const [isLoading, setIsLoading] = useState(false)
   const [showDropdown, setShowDropdown] = useState(false)
   const componentRef = useRef<HTMLDivElement>(null)
+  const [cachedVariables, setCachedVariables] = useState<GlobalVariable[]>([])
+  // Create a cache key based on search term and params
+  const cacheKey = `dfda-variable-search:${searchTerm}:${
+    JSON.stringify(Object.keys(searchParams).sort().reduce<Record<string, string>>((obj, key) => {
+      obj[key] = searchParams[key]
+      return obj
+    }, {}))
+  }`
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -75,17 +95,16 @@ export default function VariableSearchAutocomplete({
   }, [])
 
   useEffect(() => {
+      const cachedVariables = getCachedResults(cacheKey)
+    if (cachedVariables) {
+      setCachedVariables(cachedVariables)
+    }
+
     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(Object.keys(searchParams).sort().reduce<Record<string, string>>((obj, key) => {
-            obj[key] = searchParams[key]
-            return obj
-          }, {}))
-        }`
+
         // Check cache first
         const cachedResults = getCachedResults(cacheKey)
         if (cachedResults) {
@@ -161,6 +180,26 @@ export default function VariableSearchAutocomplete({
           ))}
         </div>
       )}
+
+      {/* Cached variables section */}
+      <div className="mt-4 flex flex-wrap gap-2">
+        {cachedVariables.map((variable, index) => (
+          <button
+            key={`${cacheKey}-${index}`}
+            onClick={() => onVariableSelect(variable)}
+            className="flex items-center gap-2 rounded-full border border-gray-200 bg-white px-3 py-1 text-sm hover:bg-gray-50"
+          >
+            {variable.pngUrl && (
+              <img 
+                src={variable.pngUrl} 
+                alt="" 
+                className="h-4 w-4 object-contain"
+              />
+            )}
+            <span>{variable.displayName || variable.name}</span>
+          </button>
+        ))}
+      </div>
     </div>
   )
 } 

app/dfda/components/home-page.tsx renamed to app/dfda/components/dfda-home-page.tsx

@@ -2,12 +2,10 @@
 
 import React from 'react'
 import Link from 'next/link'
-import { ArrowRight, Dna, Pill, Users, Activity, Info, Scroll } from 'lucide-react'
+import { ArrowRight, Pill, Users, Activity, Info, Scroll } from 'lucide-react'
 import { motion } from 'framer-motion'
 import CostSavingsTable from './CostSavingsTable'
-import PredictorSearchAutocomplete from './PredictorSearchAutocomplete'
 import { GlobalVariable } from '@/types/models/all'
-import OutcomeSearchAutocomplete from './OutcomeSearchAutocomplete'
 import AdvancedTrialSearch from './AdvancedTrialSearch'
 import { Robot } from '@phosphor-icons/react'
 import { FeatureBox } from './FeatureBox'
@@ -26,7 +24,7 @@ const SquigglyPattern = () => (
   </svg>
 )
 
-export default function HomePage() {
+export default function DFDAHomePage() {
   const router = useRouter()
   const [isLoading, setIsLoading] = useState(false)
 
@@ -168,16 +166,52 @@ export default function HomePage() {
 
       <main className="space-y-12">
         <section className="relative overflow-visible rounded-xl border-4 border-black bg-gradient-to-r from-pink-400 to-purple-400 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
-          <h2 className="mb-6 text-4xl font-black uppercase">See Effects of Foods🍟 or Drugs💊</h2>
+          <h2 className="mb-6 text-4xl font-black uppercase">See Effects of Foods🍟</h2>
           <div className="flex flex-col gap-4 md:flex-row">
-            <PredictorSearchAutocomplete onVariableSelect={onVariableSelect} />
+          <VariableSearchAutocomplete
+            onVariableSelect={onVariableSelect}
+            searchParams={{ 
+              sort: '-numberOfCorrelationsAsCause',
+              isPublic: '1',
+              variableCategoryName: 'Foods',
+              limit: '50'
+            }}
+            placeholder="Enter Foods🍟"
+          />
+            
+          </div>
+        </section>
+
+        <section className="relative overflow-visible rounded-xl border-4 border-black bg-gradient-to-r from-pink-400 to-purple-400 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
+          <h2 className="mb-6 text-4xl font-black uppercase">See Effects of Treatments💊</h2>
+          <div className="flex flex-col gap-4 md:flex-row">
+          <VariableSearchAutocomplete
+            onVariableSelect={onVariableSelect}
+            searchParams={{ 
+              sort: '-numberOfCorrelationsAsCause',
+              isPublic: '1',
+              variableCategoryName: 'Treatments',
+              limit: '50'
+            }}
+            placeholder="Enter treatment 💊"
+          />
+            
           </div>
         </section>
 
         <section className="relative overflow-visible rounded-xl border-4 border-black bg-gradient-to-r from-pink-400 to-purple-400 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
           <h2 className="mb-6 text-4xl font-black uppercase">See Most Effective Treatments for your Condition</h2>
           <div className="flex flex-col gap-4 md:flex-row">
-            <OutcomeSearchAutocomplete onVariableSelect={onVariableSelect} />
+          <VariableSearchAutocomplete
+            onVariableSelect={onVariableSelect}
+            searchParams={{ 
+              sort: '-numberOfCorrelationsAsCause',
+              isPublic: '1',
+              variableCategoryName: 'Symptoms',
+              limit: '50'
+            }}
+            placeholder="Enter treatment 💊"
+          />
           </div>
         </section>
 

app/dfda/page.tsx

@@ -1,11 +1,6 @@
 "use client"
 import React from 'react'
-import FindTreatments from './components/FindTreatments'
-import HealthTrackingLinkBoxes from './components/HealthTrackingLinkBoxes'
-import CostBenefitAnalysis from './components/CostBenefitAnalysis'
-import TopTreatments from './components/TopTreatments'
-import TreatmentConditionSearchBox from "@/app/dfda/components/TreatmentConditionSearchBox";
-import HomePage from './components/home-page'
+import HomePage from './components/dfda-home-page'
 
 export default function DFDAPage() {
     return (