style(ui): format all files with prettier

OpenMOSS · Jul 28, 2024 · 24d7c42 · 24d7c42
1 parent 77b5493
commit 24d7c42
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 70 deletions.
diff --git a/ui/src/components/app/sidenav.tsx b/ui/src/components/app/sidenav.tsx
@@ -1,24 +1,24 @@
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { useEffect, useState } from 'react';
-
-export const SideNav = ({logitsExist}: {logitsExist:boolean}) => {
-  const [activeId, setActiveId] = useState('');
-  let idList
-  if (logitsExist){
-    idList = ['Top', 'Hist.', 'Logits', 'Act.']
-  } else{
-    idList = ['Top', 'Hist.', 'Act.']
+import { useEffect, useState } from "react";
+
+export const SideNav = ({ logitsExist }: { logitsExist: boolean }) => {
+  const [activeId, setActiveId] = useState("");
+  let idList;
+  if (logitsExist) {
+    idList = ["Top", "Hist.", "Logits", "Act."];
+  } else {
+    idList = ["Top", "Hist.", "Act."];
   }
 
   const handleScroll = () => {
-    const sections = document.querySelectorAll('div[id]');
-    let currentSectionId = '';
+    const sections = document.querySelectorAll("div[id]");
+    let currentSectionId = "";
 
-    sections.forEach(section => {
-      if (idList.indexOf(section.id) != -1){
+    sections.forEach((section) => {
+      if (idList.indexOf(section.id) != -1) {
         const rect = section.getBoundingClientRect();
         if (rect.top <= window.innerHeight / 2) {
-            currentSectionId = section.id;
+          currentSectionId = section.id;
         }
       }
     });
@@ -27,36 +27,56 @@ export const SideNav = ({logitsExist}: {logitsExist:boolean}) => {
   };
 
   useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
 
     // Run the handler to set the initial active section
     handleScroll();
 
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener("scroll", handleScroll);
     };
-  }, );
+  });
 
   return (
-      <Card className="side-nav py-4">
-        <CardHeader className="p-0">
-          <CardTitle className="flex justify-between items-center text-xs p-2">
-            <span className="font-bold">CONTENTS</span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col">
-            <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}
+    <Card className="side-nav py-4">
+      <CardHeader className="p-0">
+        <CardTitle className="flex justify-between items-center text-xs p-2">
+          <span className="font-bold">CONTENTS</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col">
+          <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>
+                {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/dictionary/sample.tsx b/ui/src/components/dictionary/sample.tsx
@@ -136,17 +136,19 @@ export const DictionarySampleArea = ({ samples, onSamplesChange, dictionaryName
           ...featureAct,
         }))
       )
-      .reduce((acc, featureAct) => {
-        // Group by featureActIndex
-        const key = featureAct.featureActIndex.toString();
-        if (acc[key]) {
-          acc[key].push(featureAct);
-        } else {
-          acc[key] = [featureAct];
-        }
-        return acc;
-      }, {} as Record<string, { token: Uint8Array; tokenIndex: number; featureAct: number; maxFeatureAct: number }[]>) ||
-      {}
+      .reduce(
+        (acc, featureAct) => {
+          // Group by featureActIndex
+          const key = featureAct.featureActIndex.toString();
+          if (acc[key]) {
+            acc[key].push(featureAct);
+          } else {
+            acc[key] = [featureAct];
+          }
+          return acc;
+        },
+        {} as Record<string, { token: Uint8Array; tokenIndex: number; featureAct: number; maxFeatureAct: number }[]>
+      ) || {}
   )
     .sort(
       // Sort by sum of featureAct

diff --git a/ui/src/components/feature/feature-card.tsx b/ui/src/components/feature/feature-card.tsx
@@ -183,18 +183,20 @@ export const FeatureCard = ({ feature }: { feature: Feature }) => {
           <div id="Act." className="flex flex-col w-full gap-4">
             <Tabs defaultValue="top_activations">
               <TabsList className="font-bold">
-                {feature.sampleGroups.slice(0,feature.sampleGroups.length/2).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>
-                ))}
+                {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>
+                  ))}
               </TabsList>
               {feature.sampleGroups.map((sampleGroup) => (
                 <TabsContent

diff --git a/ui/src/components/feature/sample.tsx b/ui/src/components/feature/sample.tsx
@@ -70,7 +70,7 @@ export const FeatureActivationSample = ({ sample, sampleName, maxFeatureAct }: F
     [0]
   );
 
-  const tokensList = tokens.map((t) => t.featureAct)
+  const tokensList = tokens.map((t) => t.featureAct);
   const startTrigger = Math.max(tokensList.indexOf(Math.max(...tokensList)) - 100, 0);
   const endTrigger = Math.min(tokensList.indexOf(Math.max(...tokensList)) + 100, sample.context.length);
   const tokensTrigger = sample.context.slice(startTrigger, endTrigger).map((token, i) => ({
@@ -99,26 +99,25 @@ export const FeatureActivationSample = ({ sample, sampleName, maxFeatureAct }: F
     [0]
   );
 
-
   return (
     <div>
       <Accordion type="single" collapsible>
         <AccordionItem value="item-1">
           <AccordionTrigger>
-            <div className='flex justify-start flex-wrap w-full'>
+            <div className="flex justify-start flex-wrap w-full">
               {sampleName && <span className="text-gray-700 font-bold whitespace-pre">{sampleName}: </span>}
               {startTrigger != 0 && <span>...</span>}
-                {tokenGroupsTrigger.map((tokens, i) => (
-                  <div key={i} className="inline-block whitespace-pre">
-                    <SuperToken
-                      key={`group-${i}`}
-                      tokens={tokens}
-                      position={tokenGroupPositionsTrigger[i]}
-                      maxFeatureAct={maxFeatureAct}
-                      sampleMaxFeatureAct={sampleMaxFeatureAct}
-                    />
-                  </div>
-                ))}
+              {tokenGroupsTrigger.map((tokens, i) => (
+                <div key={i} className="inline-block whitespace-pre">
+                  <SuperToken
+                    key={`group-${i}`}
+                    tokens={tokens}
+                    position={tokenGroupPositionsTrigger[i]}
+                    maxFeatureAct={maxFeatureAct}
+                    sampleMaxFeatureAct={sampleMaxFeatureAct}
+                  />
+                </div>
+              ))}
               {endTrigger != 0 && <span> ...</span>}
             </div>
           </AccordionTrigger>

diff --git a/ui/src/globals.css b/ui/src/globals.css
@@ -75,7 +75,6 @@
   }
 }
 
-
 html {
   scroll-behavior: smooth;
 }

diff --git a/ui/src/routes/features/page.tsx b/ui/src/routes/features/page.tsx
@@ -1,6 +1,6 @@
 import { AppNavbar } from "@/components/app/navbar";
 import { FeatureCard } from "@/components/feature/feature-card";
-import { SideNav} from "@/components/app/sidenav";
+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";
@@ -91,7 +91,7 @@ export const FeaturesPage = () => {
   return (
     <div id="Top">
       <AppNavbar />
-      <SideNav logitsExist={(featureState.value && featureState.value.logits != null) ?? false}/>
+      <SideNav logitsExist={(featureState.value && featureState.value.logits != null) ?? false} />
       <div 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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,7 +75,6 @@ @@
       }
     }
     html {
       scroll-behavior: smooth;
     }
@@ Expand Down @@