62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T8c65,'use client' import * as React from 'react' import { Activity, Check, CheckCircle2, Clock, Code2, Copy, Cpu, Database, Download, Fingerprint, Key, Layers, Loader2, Search, ShieldCheck, Table2, Workflow, Zap, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' export interface FeatureDefinition { name: string dtype: 'Float64' | 'Int32' | 'String' description: string aggregationWindow: string onlineCacheKey: string freshness: string status: 'Online & Batch Ready' sourceSql: string sampleValue: string } export interface MetricCard { title: string value: string subtitle: string badge: string icon: React.ComponentType<{ className?: string }> } export interface FeatureStoreRegistryProps { className?: string } const metrics: MetricCard[] = [ { title: 'Total Features Registered', value: '18 Active Features', subtitle: '5 in this view · 4 views active', badge: '18 in Registry', icon: Layers, }, { title: 'Online Cache Hit Rate', value: '99.8%', subtitle: '1.4ms p95 latency · Redis Cluster', badge: '< 2ms SLA', icon: Zap, }, { title: 'Daily Ingestion Throughput', value: '14.8M Updates / Day', subtitle: '171.2 req/s avg · Stream + Batch', badge: 'Real-time CDC', icon: Activity, }, { title: 'Max Point-in-Time TTL', value: '30 Days', subtitle: 'Lookback window · Anti-leakage safe', badge: 'AS-OF Safe', icon: Clock, }, ] const features: FeatureDefinition[] = [ { name: 'avg_transaction_value_30d', dtype: 'Float64', description: '30-day sliding average transaction amount in base USD currency', aggregationWindow: '30-day sliding mean', onlineCacheKey: 'user:ft:avg_tx_val_30d', freshness: 'Synced 4m ago', status: 'Online & Batch Ready', sourceSql: 'AVG(amount_usd) OVER (PARTITION BY user_id ROWS BETWEEN 30 PRECEDING AND CURRENT ROW)', sampleValue: '$342.80', }, { name: 'failed_logins_24h', dtype: 'Int32', description: 'Failed authentication attempts in rolling 24-hour security window', aggregationWindow: '24-hour count', onlineCacheKey: 'user:ft:fail_login_24h', freshness: 'Synced 2m ago', status: 'Online & Batch Ready', sourceSql: 'SUM(CASE WHEN auth_success = FALSE THEN 1 ELSE 0 END)', sampleValue: '0', }, { name: 'lifetime_chargeback_count', dtype: 'Int32', description: 'Total historical dispute and payment chargeback occurrences', aggregationWindow: 'Cumulative lifetime', onlineCacheKey: 'user:ft:cb_cnt_lt', freshness: 'Synced 12m ago', status: 'Online & Batch Ready', sourceSql: 'COUNT(chargeback_id) OVER (PARTITION BY user_id)', sampleValue: '0', }, { name: 'preferred_payment_method', dtype: 'String', description: 'Most frequently utilized payment method category across checkout sessions', aggregationWindow: 'Mode category', onlineCacheKey: 'user:ft:pref_pay_method', freshness: 'Synced 18m ago', status: 'Online & Batch Ready', sourceSql: 'MODE(payment_method_code) OVER (PARTITION BY user_id)', sampleValue: '"apple_pay"', }, { name: 'risk_score_ml_v3', dtype: 'Float64', description: 'Real-time XGBoost inference fraud risk score probability [0.0 - 1.0]', aggregationWindow: 'Real-time inference', onlineCacheKey: 'user:ft:risk_score_v3', freshness: 'Synced 1m ago', status: 'Online & Batch Ready', sourceSql: 'MODEL_PREDICT_FRAUD_V3(features)', sampleValue: '0.042', }, ] const pythonFeastSource = `from datetime import timedelta from feast import ( BatchSource, Entity, FeatureView, Field, SnowflakeSource, ValueType, ) from feast.types import Float64, Int32, String # 1. Define Primary Entity user_entity = Entity( name="user_id", value_type=ValueType.STRING, join_keys=["user_id"], description="Global UUID representing verified consumer and business accounts", ) # 2. Snowflake Gold DW Batch Offline Source transactions_batch_source = SnowflakeSource( database="ANALYTICS_PROD", schema="GOLD_MARTS", table="fct_user_transactions_daily", timestamp_field="event_timestamp", created_timestamp_column="created_at", ) # 3. Dual-Store Feature View Definition (Redis Online + Snowflake Batch) user_30d_transaction_aggregates = FeatureView( name="user_30d_transaction_aggregates", entities=[user_entity], ttl=timedelta(days=30), schema=[ Field( name="avg_transaction_value_30d", dtype=Float64, description="30-day sliding average transaction amount in base USD currency", ), Field( name="failed_logins_24h", dtype=Int32, description="Failed authentication attempts in rolling 24-hour security window", ), Field( name="lifetime_chargeback_count", dtype=Int32, description="Total historical dispute and payment chargeback occurrences", ), Field( name="preferred_payment_method", dtype=String, description="Most frequently utilized payment method category across checkout sessions", ), Field( name="risk_score_ml_v3", dtype=Float64, description="Real-time XGBoost inference fraud risk score probability [0.0 - 1.0]", ), ], online=True, source=transactions_batch_source, tags={ "team": "fraud-ml", "tier": "tier-1-prod", "online_store": "redis_cluster", "batch_store": "snowflake_gold", "sla": "sub-2ms", }, )` function escapeHtml(str: string): string { return str.replace(/&/g, '&').replace(//g, '>') } function highlightPythonLine(line: string): string { if (!line.trim()) return ' ' const escaped = escapeHtml(line) // Comments if (/^\s*#/.test(escaped)) { return `${escaped}` } // Each emitted is parked behind a letter-only placeholder so a later // pass cannot match inside markup an earlier pass produced. const parked: string[] = [] const park = (html: string) => { const key = String(parked.length) .split('') .map((d) => String.fromCharCode(97 + Number(d))) .join('') parked.push(html) return `\u0000${key}\u0000` } let res = escaped // Strings res = res.replace(/(["'])(?:(?=(\\?))\2.)*?\1/g, (match) => park(`${match}`), ) // Keywords res = res.replace( /\b(from|import|def|class|return|as|True|False|None|with|for|in|and|or|not|is|if|else|elif)\b/g, (m) => park(`${m}`), ) // Types / Feast Classes res = res.replace( /\b(Entity|FeatureView|Field|SnowflakeSource|BatchSource|ValueType|Float64|Int32|String|timedelta)\b/g, (m) => park(`${m}`), ) // Arguments res = res.replace( /\b(name|value_type|join_keys|description|database|schema|table|timestamp_field|created_timestamp_column|entities|ttl|dtype|online|source|tags|days)\b(?=\s*=)/g, (m) => park(`${m}`), ) // Numbers res = res.replace(/\b(\d+)\b/g, (m) => park(`${m}`)) // Restore every parked span return res.replace(/\u0000([a-j]+)\u0000/g, (_, key: string) => { const idx = Number( key .split('') .map((c: string) => String(c.charCodeAt(0) - 97)) .join(''), ) return parked[idx] ?? '' }) } export function FeatureStoreRegistry({ className }: FeatureStoreRegistryProps) { const [activeTab, setActiveTab] = React.useState<'features' | 'python-feast' | 'lineage'>('features') const [searchQuery, setSearchQuery] = React.useState('') const [selectedType, setSelectedType] = React.useState<'all' | 'Float64' | 'Int32' | 'String'>('all') const [isMaterializing, setIsMaterializing] = React.useState(false) const [materializeSuccess, setMaterializeSuccess] = React.useState(false) const [isGeneratingDataset, setIsGeneratingDataset] = React.useState(false) const [datasetSuccess, setDatasetSuccess] = React.useState(false) const [copiedFeast, setCopiedFeast] = React.useState(false) const [copiedKey, setCopiedKey] = React.useState(null) const selectedEntityId = 'usr_9a4f201d-7e2b-4d68' const pythonLines = React.useMemo(() => pythonFeastSource.split('\n'), []) const filteredFeatures = React.useMemo(() => { const query = searchQuery.trim().toLowerCase() return features.filter((f) => { const matchesSearch = !query || f.name.toLowerCase().includes(query) || f.description.toLowerCase().includes(query) || f.onlineCacheKey.toLowerCase().includes(query) || f.dtype.toLowerCase().includes(query) const matchesType = selectedType === 'all' || f.dtype === selectedType return matchesSearch && matchesType }) }, [searchQuery, selectedType]) const copyToClipboard = React.useCallback((text: string, type: 'code' | 'key', keyName?: string) => { if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(text) if (type === 'code') { setCopiedFeast(true) setTimeout(() => { setCopiedFeast(false) }, 2000) } else if (type === 'key' && keyName) { setCopiedKey(keyName) setTimeout(() => { setCopiedKey(null) }, 2000) } } }, []) const handleMaterialize = React.useCallback(() => { if (isMaterializing) return setIsMaterializing(true) setMaterializeSuccess(false) setTimeout(() => { setIsMaterializing(false) setMaterializeSuccess(true) setTimeout(() => { setMaterializeSuccess(false) }, 3000) }, 1200) }, [isMaterializing]) const handleGenerateDataset = React.useCallback(() => { if (isGeneratingDataset) return setIsGeneratingDataset(true) setDatasetSuccess(false) setTimeout(() => { setIsGeneratingDataset(false) setDatasetSuccess(true) setTimeout(() => { setDatasetSuccess(false) }, 3000) }, 1000) }, [isGeneratingDataset]) return (

{/* TOP FEATURE VIEW HEADER */}

{/* Left: Title, Entity, Stores */}

feature_view /

user_30d_transaction_aggregates

v2.4.0

{/* Metadata Badges Strip */}

{/* Entity Pill */}

Entity: user_id [UUID]

{/* Online Store Pill */}

Redis Cluster · < 2ms latency

{/* Batch Store Pill */}

Snowflake Gold DW

{/* Right: Action Buttons */}

{/* Generate Training Dataset Button */} {/* Materialize Online Features Button */}

{/* 4 FEATURE STORE METRIC CARDS */}

{metrics.map((metric) => { const IconComp = metric.icon return (

{metric.title}

{metric.value}

{metric.subtitle} {metric.badge}

) })}

{/* MAIN TABS STUDIO */}

setActiveTab(val as 'features' | 'python-feast' | 'lineage')} defaultValue="features" className="flex flex-1 flex-col" > {/* Tabs Bar */}

Feature Definitions {features.length} Feast Definition Lineage & Architecture

Redis Online Serving: ACTIVE

{/* TAB 1: FEATURE DEFINITIONS TABLE */} {/* Filter / Search Controls */}

setSearchQuery(e.target.value)} placeholder="Filter by feature name, type, or cache key..." className="h-8 pl-8 font-mono text-xs" />

{/* Type filter pills */}

{(['all', 'Float64', 'Int32', 'String'] as const).map((t) => ( ))}

Showing {filteredFeatures.length} of {features.length} features

{/* Feature Definitions Table */}

Feature Name & Type Description & Aggregation Window Online Cache Key (Redis) Freshness Status {filteredFeatures.map((feature) => ( {/* Feature Name & Type */}

{feature.name}

{feature.dtype}

{/* Description & Aggregation Window */}

{feature.description}

{feature.aggregationWindow}

{/* Online Cache Key */} {/* Freshness / Last Synced */}

{feature.freshness}

{/* Feature Status */} {feature.status} ))}

{/* Interactive Entity Live Feature Vector Inspector */}

Live Online Feature Vector Lookup Simulator feast.get_online_features()

Target Entity: {selectedEntityId}

{features.map((feature) => (

{feature.name} {feature.aggregationWindow}

{feature.sampleValue} < 1.2ms

))}

{/* TAB 2: PYTHON FEAST DEFINITION CODE BOX */}

{/* Code Box Toolbar Header */}

feature_definitions/user_aggregates.py Python 3.11 · Feast 0.42+

{/* Code Gutter and Syntax Highlighter */}

{/* Line Numbers Gutter */}

{pythonLines.map((_, idx) => (

{idx + 1}

))}

{/* Python Code Content */}

{pythonLines.map((line, idx) => (

))}

{/* Code Footer Meta */}

{pythonLines.length} lines · UTF-8 · Feast Entity & FeatureView DSL

Valid Feast Schema Contract

{/* TAB 3: STORAGE & LINEAGE ARCHITECTURE */}

{/* Offline Batch Lineage Card */}

Offline Batch Store Architecture

Snowflake Gold

Immutable historical logs for time-travel queries, training set generation, and AS-OF joins without point-in-time data leakage.

Database & Schema: ANALYTICS_PROD.GOLD_MARTS

Source Table: fct_user_transactions_daily

Timestamp Partition: event_timestamp (UTC)

Historical Depth: 3 Years (Lookback TTL 30 Days)

{/* Online Low-Latency Cache Card */}

Online Key-Value Cache Architecture

Redis 7.2 Cluster

Ultra-low latency memory tier providing sub-2 millisecond retrieval for online model inference microservices and fraud scoring.

Cluster Topology: 3 Master Shards + 3 Replicas

Key Prefix Pattern: user:ft:{feature_name}

Read SLA (p95): < 1.4ms Latency

Materialization Schedule: Every 15 mins via Feast Job

) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/input.json","https://uipkge.dev/r/react/table.json","https://uipkge.dev/r/react/tabs.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/feature-store-registry/FeatureStoreRegistry.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/FeatureStoreRegistry.tsx"}],"className":"h-[70svh] min-h-80"}]]}]