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 01/11] 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 ( + + + + CONTENTS + + + +
+
    + {idList.map((item) => ( +
  • + + {item} + + {activeId === item &&
    } +
    • ))} +
+
+ + + ); +}; 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(false); return ( - + @@ -108,7 +108,7 @@ export const FeatureCard = ({ feature }: { feature: Feature }) => { -
+

Activation Histogram

{
{feature.logits && ( -
+

Logits

@@ -180,10 +180,17 @@ export const FeatureCard = ({ feature }: { feature: Feature }) => {
)} -
+
- {feature.sampleGroups.map((sampleGroup) => ( + {feature.sampleGroups.slice(0,feature.sampleGroups.length/2).map((sampleGroup) => ( + + {analysisNameMap(sampleGroup.analysisName)} + + ))} + + + {feature.sampleGroups.slice(feature.sampleGroups.length/2,feature.sampleGroups.length).map((sampleGroup) => ( {analysisNameMap(sampleGroup.analysisName)} 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 (
-
+ +
Select dictionary: Date: Sun, 28 Jul 2024 16:56:26 +0800 Subject: [PATCH 03/11] Fix small typos --- ui/src/components/feature/sample.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/components/feature/sample.tsx b/ui/src/components/feature/sample.tsx index 58655c0..dc12391 100644 --- a/ui/src/components/feature/sample.tsx +++ b/ui/src/components/feature/sample.tsx @@ -104,10 +104,10 @@ export const FeatureActivationSample = ({ sample, sampleName, maxFeatureAct }: F
- +
{sampleName && {sampleName}: } - ... + ... {tokenGroupsTrigger.map((tokens, i) => (
Date: Sun, 28 Jul 2024 18:50:48 +0800 Subject: [PATCH 04/11] Update some css settings of side navigation. --- ui/src/components/app/sidenav.tsx | 8 ++++---- ui/src/globals.css | 3 +-- ui/src/routes/features/page.tsx | 4 ++-- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/ui/src/components/app/sidenav.tsx b/ui/src/components/app/sidenav.tsx index 2d709bf..ce978ea 100644 --- a/ui/src/components/app/sidenav.tsx +++ b/ui/src/components/app/sidenav.tsx @@ -38,14 +38,14 @@ export const SideNav = ({logitsExist}: {logitsExist:boolean}) => { }, ); return ( - - - + + + CONTENTS -
+
    {idList.map((item) => (
  • diff --git a/ui/src/globals.css b/ui/src/globals.css index bdca90d..cc3ca49 100644 --- a/ui/src/globals.css +++ b/ui/src/globals.css @@ -84,9 +84,8 @@ html { position: fixed; right: 0; top: 0; - width: 125px; + width: 80px; 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 b13cbf7..259f14d 100644 --- a/ui/src/routes/features/page.tsx +++ b/ui/src/routes/features/page.tsx @@ -89,11 +89,11 @@ export const FeaturesPage = () => { }, [dictionariesState.value]); return ( -
    +
    -
    +
    Select dictionary: