From 90c1b9a4ab3c90325f00af5525c909b9551b820a Mon Sep 17 00:00:00 2001
From: StarConnor <105139493+StarConnor@users.noreply.github.com>
Date: Sat, 27 Jul 2024 19:42:18 +0800
Subject: [PATCH] Add feature of side navigation

---
 ui/src/components/app/sidenav.tsx          | 64 ++++++++++++++++++++++
 ui/src/components/feature/feature-card.tsx | 17 ++++--
 ui/src/globals.css                         | 16 ++++++
 ui/src/routes/features/page.tsx            |  4 +-
 4 files changed, 95 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/components/app/sidenav.tsx

diff --git a/ui/src/components/app/sidenav.tsx b/ui/src/components/app/sidenav.tsx
new file mode 100644
index 0000000..98db50e
--- /dev/null
+++ b/ui/src/components/app/sidenav.tsx
@@ -0,0 +1,64 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { useEffect, useState } from 'react';
+
+export const SideNav = ({logitsExist} : {logitsExist : boolean}) => {
+  const [activeId, setActiveId] = useState('');
+  // const idList = [{item:'Top'}, {item:'Hist.'}, {item:'Logits'}, {item:'Act.'}]
+  let idList
+  if (logitsExist){
+    // idList = [{id:'Top'}, {id:'Hist.'}, {id:'Logits'}, {id:'Act.'}]
+    idList = ['Top', 'Hist.', 'Logits', 'Act.']
+  } else{
+    idList = ['Top', 'Hist.', 'Act.']
+  }
+
+  const handleScroll = () => {
+    const sections = document.querySelectorAll('div[id]');
+    let currentSectionId = '';
+
+    sections.forEach(section => {
+      if (idList.indexOf(section.id) != -1){
+        const rect = section.getBoundingClientRect();
+        if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
+            currentSectionId = section.id;
+        }
+      }
+    });
+
+    setActiveId(currentSectionId);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    // Run the handler to set the initial active section
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, );
+
+  return (
+      <Card className="side-nav">
+        <CardHeader>
+          <CardTitle className="flex justify-between items-center text-base">
+            <span className="font-bold">CONTENTS</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-4">
+            <ul >
+              {idList.map((item) => (
+                <li key={item} style={{ position: 'relative', marginBottom: '10px' }}>
+                <a href={"#"+item} style={{ textDecoration: 'none', display: 'block', padding: '10px 0', color: activeId === item ? 'blue' : 'black' }}>
+                    {item}
+                </a>
+                {activeId === item && <div style={{ position: 'absolute', left: '-10px', top: '0', bottom: '0', width: '2px', backgroundColor: 'blue' }}></div>}
+                </li>))}
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+  );
+};
diff --git a/ui/src/components/feature/feature-card.tsx b/ui/src/components/feature/feature-card.tsx
index fecc1a5..38cf273 100644
--- a/ui/src/components/feature/feature-card.tsx
+++ b/ui/src/components/feature/feature-card.tsx
@@ -88,7 +88,7 @@ export const FeatureCard = ({ feature }: { feature: Feature }) => {
   const [showCustomInput, setShowCustomInput] = useState<boolean>(false);
 
   return (
-    <Card className="container">
+    <Card id="Interp." className="container">
       <CardHeader>
         <CardTitle className="flex justify-between items-center text-xl">
           <span>
@@ -108,7 +108,7 @@ export const FeatureCard = ({ feature }: { feature: Feature }) => {
 
           <FeatureInterpretation feature={feature} />
 
-          <div className="flex flex-col w-full gap-4">
+          <div id="Hist." className="flex flex-col w-full gap-4">
             <p className="font-bold">Activation Histogram</p>
             <Plot
               data={feature.featureActivationHistogram}
@@ -123,7 +123,7 @@ export const FeatureCard = ({ feature }: { feature: Feature }) => {
           </div>
 
           {feature.logits && (
-            <div className="flex flex-col w-full gap-4">
+            <div id="Logits" className="flex flex-col w-full gap-4">
               <p className="font-bold">Logits</p>
               <div className="flex gap-4">
                 <div className="flex flex-col w-1/2 gap-4">
@@ -180,10 +180,17 @@ export const FeatureCard = ({ feature }: { feature: Feature }) => {
             </div>
           )}
 
-          <div className="flex flex-col w-full gap-4">
+          <div id="Act." className="flex flex-col w-full gap-4">
             <Tabs defaultValue="top_activations">
               <TabsList className="font-bold">
-                {feature.sampleGroups.map((sampleGroup) => (
+                {feature.sampleGroups.slice(0,feature.sampleGroups.length/2).map((sampleGroup) => (
+                  <TabsTrigger key={`tab-trigger-${sampleGroup.analysisName}`} value={sampleGroup.analysisName}>
+                    {analysisNameMap(sampleGroup.analysisName)}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+              <TabsList className="font-bold">
+                {feature.sampleGroups.slice(feature.sampleGroups.length/2,feature.sampleGroups.length).map((sampleGroup) => (
                   <TabsTrigger key={`tab-trigger-${sampleGroup.analysisName}`} value={sampleGroup.analysisName}>
                     {analysisNameMap(sampleGroup.analysisName)}
                   </TabsTrigger>
diff --git a/ui/src/globals.css b/ui/src/globals.css
index 9e24275..bdca90d 100644
--- a/ui/src/globals.css
+++ b/ui/src/globals.css
@@ -74,3 +74,19 @@
     @apply bg-background text-foreground;
   }
 }
+
+
+html {
+  scroll-behavior: smooth;
+}
+/* Side navigation styles */
+.side-nav {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 125px;
+  height: 100%;
+  background-color: #f4f4f4;
+  /* padding: 10px; */
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+}
diff --git a/ui/src/routes/features/page.tsx b/ui/src/routes/features/page.tsx
index f55925f..387747e 100644
--- a/ui/src/routes/features/page.tsx
+++ b/ui/src/routes/features/page.tsx
@@ -1,5 +1,6 @@
 import { AppNavbar } from "@/components/app/navbar";
 import { FeatureCard } from "@/components/feature/feature-card";
+import { SideNav} from "@/components/app/sidenav";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -90,7 +91,8 @@ export const FeaturesPage = () => {
   return (
     <div>
       <AppNavbar />
-      <div className="pt-4 pb-20 px-20 flex flex-col items-center gap-12">
+      <SideNav logitsExist={(featureState.value && featureState.value.logits != null) ?? false}/>
+      <div id="Top" className="pt-4 pb-20 px-20 flex flex-col items-center gap-12">
         <div className="container grid grid-cols-[auto_600px_auto_auto] justify-center items-center gap-4">
           <span className="font-bold justify-self-end">Select dictionary:</span>
           <Select