add hover over concepts and support 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[];
 

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,15 +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 { 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(
@@ -21,30 +31,40 @@ 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">

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 }