{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sql-query-notebook", "title": "Sql Query Notebook", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/sql-query-notebook/sql-query-notebook.component.ts", "content": "// Hex, Deepnote, and Jupyter style SQL analytical query notebook with documentation\n// cells, executable Snowflake SQL editor with syntax coloring, live tabular results grid,\n// CSV export, and chart visualization. Port of the Vue block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n BarChart3,\n Check,\n Clock,\n Copy,\n Database,\n Download,\n FileCode2,\n FileText,\n Layers,\n Loader2,\n LucideAngularModule,\n Play,\n Plus,\n Table2,\n Target,\n Terminal,\n Trash2,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\ninterface CohortRow {\n signup_cohort: string\n cohort_label: string\n total_customers: number\n avg_mrr: number\n cohort_ltv: number\n expansion_rate: string\n retention_score: number\n}\n\nconst sqlQuery = `SELECT\n DATE_TRUNC('month', created_at) AS signup_cohort,\n COUNT(DISTINCT customer_id) AS total_customers,\n ROUND(AVG(mrr), 2) AS avg_mrr,\n ROUND(SUM(lifetime_value), 2) AS cohort_ltv\nFROM analytics.fct_subscriptions\nWHERE created_at >= '2026-01-01'\nGROUP BY 1 ORDER BY 1 DESC;`\n\nconst cohortResults: CohortRow[] = [\n {\n signup_cohort: '2026-06-01',\n cohort_label: 'Jun 2026',\n total_customers: 4820,\n avg_mrr: 248.5,\n cohort_ltv: 1428500.0,\n expansion_rate: '+18.4%',\n retention_score: 94,\n },\n {\n signup_cohort: '2026-05-01',\n cohort_label: 'May 2026',\n total_customers: 3940,\n avg_mrr: 232.1,\n cohort_ltv: 1148200.0,\n expansion_rate: '+14.1%',\n retention_score: 89,\n },\n {\n signup_cohort: '2026-04-01',\n cohort_label: 'Apr 2026',\n total_customers: 3110,\n avg_mrr: 219.8,\n cohort_ltv: 924100.0,\n expansion_rate: '+11.8%',\n retention_score: 85,\n },\n {\n signup_cohort: '2026-03-01',\n cohort_label: 'Mar 2026',\n total_customers: 2420,\n avg_mrr: 198.4,\n cohort_ltv: 682900.0,\n expansion_rate: '+8.6%',\n retention_score: 81,\n },\n]\n\n/** SQL syntax highlighter: tokenizes keywords, functions, strings, and numbers. */\nexport function highlightSqlLine(line: string): string {\n if (!line.trim()) return ' '\n const escaped = line.replace(/&/g, '&').replace(//g, '>')\n if (/^\\s*--/.test(escaped)) return `${escaped}`\n // Every emitted is parked behind a letter-only placeholder so later\n // passes cannot match inside the markup they already produced.\n const parked: string[] = []\n const park = (html: string) => {\n const key = String(parked.length)\n .split('')\n .map((d) => String.fromCharCode(97 + Number(d)))\n .join('')\n parked.push(html)\n return `\\u0000${key}\\u0000`\n }\n let out = escaped\n out = out.replace(/(['\"])(?:(?=(\\\\?))\\2.)*?\\1/g, (m) => park(`${m}`))\n out = out.replace(\n /\\b(DATE_TRUNC|COUNT|DISTINCT|ROUND|AVG|SUM|MIN|MAX|COALESCE|CAST|CONCAT|NOW|CURRENT_TIMESTAMP)\\b/g,\n (m) => park(`${m}`),\n )\n out = out.replace(\n /\\b(SELECT|FROM|WHERE|GROUP BY|ORDER BY|GROUP|ORDER|BY|DESC|ASC|AS|AND|OR|NOT|IN|ON|JOIN|LEFT|RIGHT|INNER|OUTER|LIMIT|HAVING|UNION|ALL|CASE|WHEN|THEN|ELSE|END|WITH)\\b/g,\n (m) => park(`${m}`),\n )\n out = out.replace(/\\b(\\d+(\\.\\d+)?)\\b/g, (m) => park(`${m}`))\n return out.replace(/\\u0000([a-j]+)\\u0000/g, (_, key: string) => {\n const idx = Number(\n key\n .split('')\n .map((c: string) => String(c.charCodeAt(0) - 97))\n .join(''),\n )\n return parked[idx] ?? ''\n })\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-sql-query-notebook, [ui-sql-query-notebook]',\n standalone: true,\n // Vue renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n

\n Customer Churn & Cohort Analysis · Q3 2026\n

\n v2.4\n
\n\n
\n
\n \n \n \n \n Snowflake Production Warehouse\n · Large Cluster\n
\n
\n \n {{ lastSaved() }}\n
\n
\n
\n
\n\n \n
\n \n \n Add SQL Cell\n \n\n \n @if (isRunningAll()) {\n \n } @else {\n \n }\n {{ isRunningAll() ? 'Running Notebook...' : 'Run All Cells' }}\n
\n
\n
\n\n \n
\n \n
\n
\n\n
\n
\n [MD] Doc\n Methodology & Hypothesis\n
\n\n \n \n {{ showMarkdownEditor() ? 'Preview' : 'Source' }}\n \n
\n\n
\n @if (showMarkdownEditor()) {\n
\n \n
\n } @else {\n
\n
\n

\n Cohort Retention & Expansion Query\n

\n

\n Grouping by monthly signup cohort to evaluate customer lifetime value (LTV) trajectory and expansion\n MRR across enterprise tiers. Filtered for 2026 activations from the primary subscriptions warehouse.\n

\n
\n\n
\n \n \n Source:\n analytics.fct_subscriptions\n
\n \n \n Target Retention:\n > 118% Net Expansion\n
\n \n \n Granularity:\n DATE_TRUNC('month')\n
\n
\n
\n }\n
\n \n\n \n
\n
\n\n
\n
\n \n [1] SQL\n \n Snowflake SQL\n\n \n \n \n {{ isCellRunning() ? 'Executing query...' : executionTime() + ' · ' + rowCountText() + ' rows' }}\n \n
\n
\n\n
\n \n @if (copiedSql()) {\n \n } @else {\n \n }\n {{ copiedSql() ? 'Copied' : 'Copy SQL' }}\n \n\n \n @if (isCellRunning()) {\n \n } @else {\n \n }\n Run Cell\n \n
\n
\n\n \n \n
\n @for (line of sqlLines(); track $index) {\n {{ $index + 1 }}\n }\n
\n\n
\n @for (line of sqlLines(); track $index) {\n \n \n
\n }\n \n \n\n \n
\n
\n
\n
\n \n Query Output\n
\n 4 cohorts · 14,290 records\n \n
\n\n
\n
\n \n \n
\n\n \n @if (copiedCsv()) {\n \n } @else {\n \n }\n {{ copiedCsv() ? 'Copied CSV!' : 'Export CSV' }}\n \n\n @if (activeResultTab() === 'table') {\n \n \n Visualize as Chart\n \n }\n
\n
\n\n @if (activeResultTab() === 'table') {\n
\n \n \n \n \n \n \n \n \n \n \n \n @for (row of allCohorts; track row.signup_cohort; let idx = $index) {\n \n \n \n \n \n \n \n }\n \n
signup_cohorttotal_customersavg_mrrcohort_ltvexpansion_velocity
\n
\n {{ idx + 1 }}\n {{ row.signup_cohort }}\n \n {{ row.cohort_label }}\n \n
\n 		\n {{ row.total_customers.toLocaleString() }}\n \n ${{ row.avg_mrr.toFixed(2) }}\n \n ${{\n row.cohort_ltv.toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })\n }}\n \n \n {{ row.expansion_rate }}\n \n
\n\n \n 4 of 4 cohort partitions loaded · 0 errors\n
\n \n Total Active Accounts:\n {{\n totalCustomersSum().toLocaleString()\n }}\n \n \n Cumulative Cohort LTV:\n \n ${{ totalLtvSum().toLocaleString('en-US', { minimumFractionDigits: 2 }) }}\n \n \n
\n
\n
\n } @else {\n
\n
\n
\n

Cohort Lifetime Value Trajectory

\n

\n Progression of cumulative customer LTV and expansion momentum by activation month.\n

\n
\n Snowflake Snowpark Analytics\n
\n\n
\n @for (item of allCohorts; track item.signup_cohort) {\n
\n
\n
\n {{ item.cohort_label }}\n ({{ item.signup_cohort }})\n \n {{ item.total_customers.toLocaleString() }} customers\n \n
\n
\n Avg MRR: ${{ item.avg_mrr.toFixed(2) }}\n \n ${{ item.cohort_ltv.toLocaleString('en-US', { minimumFractionDigits: 2 }) }}\n \n
\n
\n\n
\n
\n
\n
\n }\n
\n \n }\n \n \n\n \n @if (showExtraCell()) {\n
\n
\n\n
\n
\n [2] Python\n Downstream Snowpark Dataframe\n
\n\n
\n \n @if (extraCellRunning()) {\n \n } @else {\n \n }\n Run\n \n \n \n \n
\n
\n\n
\n import snowflake.snowpark as snowpark\nimport polars as pl\n\n# Read Cell [1] tabular results and compute hazard rate\ndf = cell_1_results.to_pandas()\ndf['expansion_velocity'] = df['cohort_ltv'] / df['total_customers']\nprint(f\"Average cohort customer value: ${df['expansion_velocity'].mean():.2f}\")\n
\n\n
\n
\n \n Output:\n Average cohort customer value: $292.77\n
\n
\n
\n }\n \n \n `,\n})\nexport class UiSqlQueryNotebookComponent {\n protected readonly BarChart3 = BarChart3\n protected readonly Check = Check\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly Database = Database\n protected readonly Download = Download\n protected readonly FileCode2 = FileCode2\n protected readonly FileText = FileText\n protected readonly Layers = Layers\n protected readonly Loader2 = Loader2\n protected readonly Play = Play\n protected readonly Plus = Plus\n protected readonly Table2 = Table2\n protected readonly Target = Target\n protected readonly Terminal = Terminal\n protected readonly Trash2 = Trash2\n protected readonly allCohorts = cohortResults\n\n @Input('class') className?: string\n\n readonly isRunningAll = signal(false)\n readonly isCellRunning = signal(false)\n readonly lastSaved = signal('Autosaved 1m ago')\n readonly activeCell = signal<'doc' | 'sql' | 'extra'>('sql')\n readonly activeResultTab = signal<'table' | 'chart'>('table')\n readonly copiedSql = signal(false)\n readonly copiedCsv = signal(false)\n readonly hoveredSqlLine = signal(null)\n readonly executionTime = signal('1.24s')\n readonly rowCount = signal(14290)\n readonly lastExecutionTimestamp = signal('14:28:40')\n readonly showMarkdownEditor = signal(false)\n readonly showExtraCell = signal(false)\n readonly extraCellRunning = signal(false)\n readonly markdownContent = signal(\n '# Cohort Retention & Expansion Query: Grouping by monthly signup cohort to evaluate customer lifetime value (LTV) trajectory and expansion MRR across enterprise tiers. Filtered for 2026 activations from the primary subscriptions warehouse.',\n )\n\n readonly sqlLines = computed(() => sqlQuery.split('\\n'))\n readonly totalCustomersSum = computed(() => cohortResults.reduce((acc, r) => acc + r.total_customers, 0))\n readonly totalLtvSum = computed(() => cohortResults.reduce((acc, r) => acc + r.cohort_ltv, 0))\n readonly maxCohortLtv = computed(() => Math.max(...cohortResults.map((r) => r.cohort_ltv)))\n readonly rowCountText = computed(() => this.rowCount().toLocaleString())\n\n get rootClass(): string {\n return cn(\n 'bg-background text-foreground border-border w-full overflow-hidden rounded-xl border shadow-xs',\n this.className,\n )\n }\n\n get statusDotClass(): string {\n return cn(\n 'size-1.5 rounded-full transition-colors',\n this.isCellRunning() ? 'bg-warning animate-pulse' : 'bg-success',\n )\n }\n\n get docCardClass(): string {\n return cn(\n 'border-border relative overflow-hidden shadow-none transition-colors',\n this.activeCell() === 'doc' ? 'ring-primary/20 ring-2' : '',\n )\n }\n\n get docStripClass(): string {\n return cn(\n 'absolute top-0 bottom-0 left-0 w-1 transition-colors',\n this.activeCell() === 'doc' ? 'bg-primary' : 'bg-transparent',\n )\n }\n\n get sqlCardClass(): string {\n return cn(\n 'border-border relative overflow-hidden shadow-none transition-colors',\n this.activeCell() === 'sql' ? 'ring-primary/20 ring-2' : '',\n )\n }\n\n get sqlStripClass(): string {\n return cn(\n 'absolute top-0 bottom-0 left-0 w-1 transition-colors',\n this.activeCell() === 'sql' ? 'bg-primary' : 'bg-transparent',\n )\n }\n\n get extraCardClass(): string {\n return cn(\n 'border-border relative overflow-hidden shadow-none transition-colors',\n this.activeCell() === 'extra' ? 'ring-primary/20 ring-2' : '',\n )\n }\n\n get extraStripClass(): string {\n return cn(\n 'absolute top-0 bottom-0 left-0 w-1 transition-colors',\n this.activeCell() === 'extra' ? 'bg-primary' : 'bg-transparent',\n )\n }\n\n lineNumberClass(idx: number): string {\n return cn('h-5 leading-5 transition-colors', this.hoveredSqlLine() === idx ? 'font-semibold text-zinc-300' : '')\n }\n\n sqlLineClass(idx: number): string {\n return cn(\n 'group flex h-5 items-center rounded-xs px-1 leading-5 transition-colors',\n this.hoveredSqlLine() === idx ? 'bg-zinc-800/40' : '',\n )\n }\n\n resultTabClass(tab: 'table' | 'chart'): string {\n return cn(\n 'flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n this.activeResultTab() === tab\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n highlightLine(line: string): string {\n return highlightSqlLine(line)\n }\n\n handleRunAll(): void {\n if (this.isRunningAll()) return\n this.isRunningAll.set(true)\n this.isCellRunning.set(true)\n setTimeout(() => {\n this.isCellRunning.set(false)\n this.isRunningAll.set(false)\n this.lastExecutionTimestamp.set(new Date().toTimeString().split(' ')[0])\n this.lastSaved.set('Saved just now')\n }, 620)\n }\n\n handleRunCell(): void {\n if (this.isCellRunning()) return\n this.isCellRunning.set(true)\n setTimeout(() => {\n this.isCellRunning.set(false)\n this.lastExecutionTimestamp.set(new Date().toTimeString().split(' ')[0])\n }, 480)\n }\n\n async handleCopySql(): Promise {\n try {\n await navigator.clipboard.writeText(sqlQuery)\n this.copiedSql.set(true)\n setTimeout(() => this.copiedSql.set(false), 2000)\n } catch {\n // Clipboard unavailable\n }\n }\n\n async handleExportCsv(): Promise {\n const csvHeaders = 'signup_cohort,total_customers,avg_mrr,cohort_ltv\\n'\n const csvRows = cohortResults\n .map((r) => `${r.signup_cohort},${r.total_customers},${r.avg_mrr},${r.cohort_ltv}`)\n .join('\\n')\n try {\n await navigator.clipboard.writeText(csvHeaders + csvRows)\n this.copiedCsv.set(true)\n setTimeout(() => this.copiedCsv.set(false), 2000)\n } catch {\n // Clipboard unavailable\n }\n }\n\n handleAddCell(): void {\n this.showExtraCell.set(true)\n this.activeCell.set('extra')\n }\n\n handleRunExtraCell(): void {\n this.extraCellRunning.set(true)\n setTimeout(() => this.extraCellRunning.set(false), 450)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sql-query-notebook/sql-query-notebook.component.ts" }, { "path": "packages/registry-angular/blocks/sql-query-notebook/index.ts", "content": "export { UiSqlQueryNotebookComponent, highlightSqlLine } from './sql-query-notebook.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/sql-query-notebook/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Hex, Deepnote, and Jupyter style SQL analytical query notebook with documentation cells, executable Snowflake SQL editor with syntax coloring, live tabular results grid, CSV export, and chart visualization.", "categories": [ "devops", "app" ] }