fix(ui): update defaultVisibleRange handling and adjust node colors

Author: dest1n1s

ui-ssr/src/components/feature/feature-card.tsx

@@ -155,10 +155,12 @@ export const FeatureCardCompactForEmbed = memo(
     feature,
     className,
     plain = false,
+    defaultVisibleRange = 20,
   }: {
     feature: FeatureCompact
     className?: string
     plain?: boolean
+    defaultVisibleRange?: number
   }) => {
     return (
       <div
@@ -207,7 +209,7 @@ export const FeatureCardCompactForEmbed = memo(
             samplingName="top_activations"
             totalLength={feature.samples.length}
             initialSamples={feature.samples}
-            defaultVisibleRange={20}
+            defaultVisibleRange={defaultVisibleRange}
             hideTitle={true}
             className="mt-0"
           />

ui-ssr/src/routes/embed.dictionaries.$dictionaryName.features.$featureIndex.tsx

@@ -15,6 +15,7 @@ export const Route = createFileRoute(
     z
       .object({
         plain: z.boolean().optional().catch(false),
+        visibleRange: z.coerce.number().optional(),
       })
       .parse(search),
   component: EmbedFeaturePage,
@@ -43,7 +44,7 @@ export const Route = createFileRoute(
 
 function EmbedFeaturePage() {
   const { feature } = Route.useLoaderData()
-  const { plain } = Route.useSearch()
+  const { plain, visibleRange } = Route.useSearch()
 
   return (
     <div
@@ -53,7 +54,11 @@ function EmbedFeaturePage() {
       )}
     >
       <div className={cn('max-w-3xl mx-auto', plain && 'max-w-none')}>
-        <FeatureCardCompactForEmbed feature={feature} plain={plain} />
+        <FeatureCardCompactForEmbed
+          feature={feature}
+          plain={plain}
+          defaultVisibleRange={visibleRange}
+        />
       </div>
     </div>
   )

ui-ssr/src/utils/circuit.ts

@@ -25,9 +25,9 @@ export function getNodeColor(featureType: string): string {
     case 'embedding':
       return '#69b3a2'
     case 'cross layer transcoder':
-      return '#4ecdc4'
+      return '#f59f00'
     case 'lorsa':
-      return '#7a4cff'
+      return '#339af0'
     default:
       return '#95a5a6'
   }