readded highlighting to build time rendered menubar and reverted to lookup for the study static pages

Author: John Rogers

src/app/studies/[slug]/page.tsx

@@ -48,27 +48,57 @@ export default async function StudyPage({
   try {
     console.log(`Generating static page for study: ${slug}`);
 
-    // Fetch the specific study data for this slug
-    const response = await fetch(
+    // First, fetch the study by slug to get the UUID
+    const searchResponse = await fetch(
       `https://harmonydataweaviate.azureedge.net/discover/search?query=*&num_results=1&offset=0&resource_type=study&slug=${encodeURIComponent(
         slug
       )}`
     );
 
-    if (!response.ok) {
-      throw new Error(`Failed to fetch study by slug: ${response.statusText}`);
+    if (!searchResponse.ok) {
+      throw new Error(
+        `Failed to fetch study by slug: ${searchResponse.statusText}`
+      );
     }
 
-    const data = await response.json();
-    const studyResult = data.results?.[0];
+    const searchData = await searchResponse.json();
+    const studyResult = searchData.results?.[0];
 
     if (!studyResult) {
       throw new Error(`Study with slug "${slug}" not found`);
     }
 
-    console.log(`Found study data for ${slug}:`, studyResult.extra_data?.name);
+    const uuid = studyResult.extra_data?.uuid;
+    if (!uuid) {
+      throw new Error(`Study with slug "${slug}" has no UUID`);
+    }
+
+    console.log(`Found study UUID for ${slug}: ${uuid}`);
+
+    // Now fetch the full study data using the UUID via the lookup endpoint
+    const lookupResponse = await fetch(
+      `https://harmonydataweaviate.azureedge.net/discover/lookup?uuid=${uuid}`
+    );
+
+    if (!lookupResponse.ok) {
+      throw new Error(
+        `Failed to fetch study by UUID: ${lookupResponse.statusText}`
+      );
+    }
+
+    const lookupData = await lookupResponse.json();
+    const fullStudyResult = lookupData.results?.[0];
+
+    if (!fullStudyResult) {
+      throw new Error(`Study with UUID "${uuid}" not found in lookup`);
+    }
+
+    console.log(
+      `Found full study data for ${slug}:`,
+      fullStudyResult.dataset_schema?.name
+    );
 
-    const study = transformSearchResultToStudyDetail(studyResult);
+    const study = transformSearchResultToStudyDetail(fullStudyResult);
 
     return <StudyPageClient study={study} />;
   } catch (error) {

src/components/Sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import {
   Box,
@@ -11,6 +13,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { LayoutGrid } from "lucide-react";
 import { getAssetPrefix } from "@/lib/utils/shared";
+import { usePathname } from "next/navigation";
 
 const navigationItems = [
   { text: "Search", icon: getAssetPrefix() + "/icons/discover.svg", href: "/" },
@@ -33,6 +36,8 @@ const navigationItems = [
 ];
 
 export default function Sidebar() {
+  const pathname = usePathname();
+
   // Use CSS media queries for responsive behavior instead of client-side logic
   return (
     <>
@@ -88,17 +93,22 @@ export default function Sidebar() {
               key={item.text}
               component={Link}
               href={item.href}
+              selected={pathname === item.href}
               sx={{
                 flexDirection: "column",
                 minWidth: 48,
                 minHeight: 48,
                 px: 1,
                 py: 0.5,
                 borderRadius: 2,
-                color: "#444653",
+                color: pathname === item.href ? "primary.main" : "#444653",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
+                bgcolor: pathname === item.href ? "action.selected" : "inherit",
+                "&.Mui-selected": {
+                  bgcolor: "action.selected",
+                },
               }}
             >
               <ListItemIcon
@@ -196,12 +206,16 @@ export default function Sidebar() {
               <ListItemButton
                 component={Link}
                 href={item.href}
+                selected={pathname === item.href}
                 sx={{
                   minHeight: 48,
                   justifyContent: "center",
                   px: 2.5,
                   flexDirection: "column",
-                  color: "#444653",
+                  color: pathname === item.href ? "primary.main" : "#444653",
+                  "&.Mui-selected": {
+                    bgcolor: "action.selected",
+                  },
                 }}
               >
                 <ListItemIcon