Merge pull request #20 from Health-Informatics-UoN/fix_caching

Fix caching & Introduce groups

Author: vpnu

components/ConceptHover.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { InfoCircledIcon } from "@radix-ui/react-icons";
+
+export function ConceptHover({
+  conceptName,
+  relatedConcepts,
+}: {
+  conceptName: string;
+  relatedConcepts?: { conceptId: string; conceptName: string }[];
+}) {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <span className="flex items-center text-2xl cursor-pointer">
+          {conceptName}
+          <InfoCircledIcon className="ml-1" />
+        </span>
+      </HoverCardTrigger>
+
+      <HoverCardContent className="w-80">
+        <div className="space-y-2">
+          <div className="font-semibold">Related Concepts:</div>
+
+          {relatedConcepts?.length ? (
+            <div className="text-sm max-h-40 overflow-auto space-y-1">
+              {relatedConcepts.map((c) => (
+                <div key={c.conceptId} className="flex flex-col">
+                  <span>{c.conceptName}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {c.conceptId}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-sm text-muted-foreground">
+              No related concepts.
+            </div>
+          )}
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

components/ConceptList.tsx

@@ -9,10 +9,10 @@ export default function ConceptList({ concepts }: { concepts: Concept[] }) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const selectedConcepts = searchParams.getAll("conceptId");
+  const selectedConcepts = searchParams.getAll("conceptId").sort();
 
   const onSelect = (conceptId: string) => {
-    const currentParams = searchParams.getAll("conceptId");
+    const currentParams = searchParams.getAll("conceptId").sort();
 
     let nextConceptIds: string[];
 
@@ -35,8 +35,8 @@ export default function ConceptList({ concepts }: { concepts: Concept[] }) {
 
     // Reset page number
     params.set("page", "1");
-
-    router.replace(`${pathname}?${params.toString()}`);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    router.refresh();
   };
   const clearSelection = () => {
     router.replace(pathname);

components/DomainSelect.tsx

@@ -22,7 +22,7 @@ export default function DomainSelect({ domain }: { domain: string }) {
     }
 
     // Keep selected concepts
-    const conceptIds = searchParams.getAll("conceptId");
+    const conceptIds = searchParams.getAll("conceptId").sort();
     conceptIds.forEach((id) => params.append("conceptId", id));
 
     // Reset page number

components/NoteCard.tsx

@@ -14,7 +14,7 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { Badge } from "@/components/ui/badge";
-import { ArrowRightIcon, ChevronDown } from "lucide-react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 import Link from 'next/link'
 export default function NoteCard({
   note,
@@ -47,7 +47,7 @@ export default function NoteCard({
             <CollapsibleTrigger asChild>
               <Button variant="outline" className="group w-full bg-transparent">
                 Description
-                <ChevronDown className="ml-auto group-data-[state=open]:rotate-180" />
+                <ChevronDownIcon className="ml-auto group-data-[state=open]:rotate-180" />
               </Button>
             </CollapsibleTrigger>
             <CollapsibleContent className="flex flex-col items-start gap-2 p-2.5 pt-0 text-sm">

components/NotesList.tsx

@@ -3,16 +3,25 @@ import { Note } from "@/types/OmopTables";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { getMultiplePmcArticles } from "@/lib/services/pmcService";
 import { Badge } from "@/components/ui/badge";
-import { ScrollArea, ScrollBar } from "./ui/scroll-area";
-
+import { ConceptHover } from "./ConceptHover";
 export default async function NotesList({
+  relatedConcepts,
   notes,
-  conceptIds,
-  conceptName,
+  conceptDetails,
 }: {
+  relatedConcepts: Array<{
+    inputConceptId: string;
+    groupConcepts: Array<{
+      conceptId: string;
+      conceptName: string;
+    }>;
+  }>;
   notes: Note[];
-  conceptIds: Array<string> | null;
-  conceptName: string | null;
+  conceptDetails: Array<{
+    conceptId: string;
+    conceptName: string;
+    domain: string;
+  }>;
 }) {
   // Sort the PMC IDs for caching
   const pmcids = Array.from(
@@ -22,60 +31,79 @@ export default async function NotesList({
         .filter((id): id is string => Boolean(id)),
     ),
   ).sort();
-
   if (pmcids.length === 0) return;
   const articles =
     pmcids.length > 0 ? await getMultiplePmcArticles(pmcids) : {};
 
   return (
     <Card className="col-span-2">
       <CardHeader>
-        <CardTitle className="text-2xl">
-          {conceptIds && conceptName
-            ? `Case Reports for ${conceptName}`
-            : "No term selected"}
+        <CardTitle className="flex flex-wrap gap-2 items-center">
+          <span className="text-2xl">Case Reports for: </span>
+          {conceptDetails.map((c) => {
+            const related = relatedConcepts.find(
+              (r) => r.inputConceptId === c.conceptId,
+            );
+            return (
+              <ConceptHover
+                key={c.conceptId}
+                conceptName={c.conceptName}
+                relatedConcepts={related?.groupConcepts}
+              />
+            );
+          })}
         </CardTitle>
       </CardHeader>
 
       <CardContent>
-        {!conceptIds ? (
+        {!conceptDetails ? (
           <div className="text-muted-foreground text-center py-10">
             Select a concept from the sidebar to view the associated Case
             Reports.
           </div>
         ) : notes.length === 0 ? (
           <div className="text-muted-foreground text-center py-10">
-            No notes found for {conceptName}
+            No notes found for
+            {conceptDetails.map((c) => c.conceptName).join(", ")}.
           </div>
         ) : (
           <div className="grid grid-cols-1 gap-4">
             <div className="mb-4 flex items-center gap-2">
               <Badge variant="outline" className="bg-sky-100 dark:bg-[#1B3C53]">
                 Condition
               </Badge>
-              <Badge variant="outline" className="bg-emerald-100 dark:bg-[#3F4F44]">
+              <Badge
+                variant="outline"
+                className="bg-emerald-100 dark:bg-[#3F4F44]"
+              >
                 Drug
               </Badge>
-              <Badge variant="outline" className="bg-violet-100 dark:bg-[#49243E]">
+              <Badge
+                variant="outline"
+                className="bg-violet-100 dark:bg-[#49243E]"
+              >
                 Procedure
               </Badge>
-              <Badge variant="outline" className="bg-orange-100 dark:bg-amber-800">
+              <Badge
+                variant="outline"
+                className="bg-orange-100 dark:bg-amber-800"
+              >
                 Measurement
               </Badge>
             </div>
-              <div className="grid grid-cols-1 gap-4 px-1 py-1">
-                {notes.map((note) => {
-                  const pmcid = note.note_source_value?.match(/PMC(\d+)/)?.[1];
+            <div className="grid grid-cols-1 gap-4 px-1 py-1">
+              {notes.map((note) => {
+                const pmcid = note.note_source_value?.match(/PMC(\d+)/)?.[1];
 
-                  return (
-                    <NoteCard
-                      key={note.note_id}
-                      note={note}
-                      article={pmcid ? articles[pmcid] : null}
-                    />
-                  );
-                })}
-              </div>
+                return (
+                  <NoteCard
+                    key={note.note_id}
+                    note={note}
+                    article={pmcid ? articles[pmcid] : null}
+                  />
+                );
+              })}
+            </div>
           </div>
         )}
       </CardContent>

components/NotesPagination.tsx

@@ -30,9 +30,9 @@ export default function NotesPagination({
       params.set("domain", domain);
     }
     // Get conceptIds and add to URL
-    const conceptIds = searchParams.getAll("conceptId");
+    const conceptIds = searchParams.getAll("conceptId").sort();
     conceptIds.forEach((id) => params.append("conceptId", id));
-    
+
     // Add the page number
     params.set("page", String(newPage));
 

components/NotesSection.tsx

@@ -17,21 +17,20 @@ export default async function NotesSection({
     );
   }
 
-  const { conceptDetails, notes, total } = await getNotesForConcept(
+  const { conceptDetails, relatedConcepts, notes, total } = await getNotesForConcept(
     conceptIds,
     page,
   );
 
   const pageSize = 10;
   const totalPages = Math.ceil(total / pageSize);
-
   return (
     <div className="p-4 space-y-4">
       <div className="text-sm text-muted-foreground">{total} articles</div>
       <NotesList
+        relatedConcepts={relatedConcepts}
         notes={notes}
-        conceptIds={conceptIds}
-        conceptName={conceptDetails.map((c) => c.conceptName).join(", ")}
+        conceptDetails={conceptDetails}
       />
       <NotesPagination page={page} totalPages={totalPages} />
     </div>

components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }