Add history window controls and expand taxonomy pack support
- add 3Y/5Y/10Y financial history filtering and reorganize normalization details UI - add new fiscal taxonomy surface/income bridge/KPI packs and update Rust taxonomy loading - auto-detect Homebrew SQLite for native `sqlite-vec` in local dev/e2e with docs and env guidance
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type ControlButtonVariant = 'primary' | 'ghost' | 'secondary' | 'danger';
|
||||
type ControlButtonVariant = "primary" | "ghost" | "secondary" | "danger";
|
||||
|
||||
export type FinancialControlOption = {
|
||||
value: string;
|
||||
@@ -34,19 +34,25 @@ type FinancialControlBarProps = {
|
||||
};
|
||||
|
||||
export function FinancialControlBar({
|
||||
title = 'Control Bar',
|
||||
title = "Control Bar",
|
||||
subtitle,
|
||||
sections,
|
||||
actions,
|
||||
className
|
||||
className,
|
||||
}: FinancialControlBarProps) {
|
||||
return (
|
||||
<section className={cn('border-t border-[color:var(--line-weak)] pt-4', className)}>
|
||||
<section
|
||||
className={cn("border-t border-[color:var(--line-weak)] pt-4", className)}
|
||||
>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3>
|
||||
<h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">
|
||||
{title}
|
||||
</h3>
|
||||
{subtitle ? (
|
||||
<p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p>
|
||||
<p className="mt-1 text-sm text-[color:var(--terminal-muted)]">
|
||||
{subtitle}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -56,7 +62,7 @@ export function FinancialControlBar({
|
||||
<Button
|
||||
key={action.id}
|
||||
type="button"
|
||||
variant={action.variant ?? 'secondary'}
|
||||
variant={action.variant ?? "secondary"}
|
||||
disabled={action.disabled}
|
||||
className="px-2 py-1 text-xs sm:min-h-9"
|
||||
onClick={action.onClick}
|
||||
@@ -70,17 +76,16 @@ export function FinancialControlBar({
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-3">
|
||||
{sections.map((section) => (
|
||||
<div
|
||||
key={section.id}
|
||||
className="data-surface px-3 py-3"
|
||||
>
|
||||
<span className="mb-2 block text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{section.label}</span>
|
||||
<div key={section.id} className="data-surface px-3 py-3">
|
||||
<span className="mb-2 block text-[11px] text-[color:var(--terminal-muted)]">
|
||||
{section.label}
|
||||
</span>
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
{section.options.map((option) => (
|
||||
<Button
|
||||
key={`${section.id}-${option.value}`}
|
||||
type="button"
|
||||
variant={option.value === section.value ? 'primary' : 'ghost'}
|
||||
variant={option.value === section.value ? "primary" : "ghost"}
|
||||
disabled={option.disabled}
|
||||
className="px-2 py-1 text-xs sm:min-h-9"
|
||||
onClick={() => section.onChange(option.value)}
|
||||
|
||||
@@ -91,12 +91,14 @@ function FinancialsToolbarComponent({
|
||||
const groupedSections = useMemo(() => {
|
||||
const statementKeys = ["surface"];
|
||||
const periodKeys = ["cadence"];
|
||||
const historyKeys = ["history"];
|
||||
const modeKeys = ["display"];
|
||||
const scaleKeys = ["scale"];
|
||||
|
||||
return {
|
||||
statement: sections.filter((s) => statementKeys.includes(s.key)),
|
||||
period: sections.filter((s) => periodKeys.includes(s.key)),
|
||||
history: sections.filter((s) => historyKeys.includes(s.key)),
|
||||
mode: sections.filter((s) => modeKeys.includes(s.key)),
|
||||
scale: sections.filter((s) => scaleKeys.includes(s.key)),
|
||||
};
|
||||
@@ -147,6 +149,29 @@ function FinancialsToolbarComponent({
|
||||
))}
|
||||
</ControlGroup>
|
||||
|
||||
{groupedSections.history.length > 0 && (
|
||||
<ControlGroup showDivider>
|
||||
{groupedSections.history.map((section) => (
|
||||
<Fragment key={section.key}>
|
||||
{section.options.map((option) => {
|
||||
const isActive = section.value === option.value;
|
||||
return (
|
||||
<Button
|
||||
key={`${section.key}-${option.value}`}
|
||||
variant={isActive ? "secondary" : "ghost"}
|
||||
size="compact"
|
||||
onClick={() => section.onChange(option.value)}
|
||||
className="text-xs"
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
))}
|
||||
</ControlGroup>
|
||||
)}
|
||||
|
||||
{groupedSections.mode.length > 0 && (
|
||||
<ControlGroup showDivider>
|
||||
{groupedSections.mode.map((section) => (
|
||||
|
||||
@@ -6,6 +6,8 @@ import { cn } from "@/lib/utils";
|
||||
|
||||
type NormalizationSummaryProps = {
|
||||
normalization: NormalizationMetadata;
|
||||
showHeader?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function SummaryField(props: {
|
||||
@@ -20,7 +22,7 @@ function SummaryField(props: {
|
||||
props.tone === "warning" && "border-l-2 border-[#7f6250] pl-3",
|
||||
)}
|
||||
>
|
||||
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
<p className="text-[11px] text-[color:var(--terminal-muted)]">
|
||||
{props.label}
|
||||
</p>
|
||||
<p
|
||||
@@ -39,21 +41,30 @@ function SummaryField(props: {
|
||||
|
||||
export function NormalizationSummary({
|
||||
normalization,
|
||||
showHeader = true,
|
||||
className,
|
||||
}: NormalizationSummaryProps) {
|
||||
const hasMaterialUnmapped = normalization.materialUnmappedRowCount > 0;
|
||||
const hasWarnings = normalization.warnings.length > 0;
|
||||
|
||||
return (
|
||||
<section className="border-t border-[color:var(--line-weak)] pt-4">
|
||||
<header className="mb-3">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Normalization Summary
|
||||
</h3>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Pack, parser, and residual mapping health for the compact statement
|
||||
surface.
|
||||
</p>
|
||||
</header>
|
||||
<section
|
||||
className={cn(
|
||||
showHeader ? "border-t border-[color:var(--line-weak)] pt-4" : "",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{showHeader ? (
|
||||
<header className="mb-3">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Normalization Summary
|
||||
</h3>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Pack, parser, and residual mapping health for the compact statement
|
||||
surface.
|
||||
</p>
|
||||
</header>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-x-6 gap-y-1 md:grid-cols-4 xl:grid-cols-8">
|
||||
<SummaryField
|
||||
@@ -90,7 +101,7 @@ export function NormalizationSummary({
|
||||
|
||||
{hasWarnings ? (
|
||||
<div className="mt-3 border-t border-[color:var(--line-weak)] pt-3">
|
||||
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
<p className="text-[11px] text-[color:var(--terminal-muted)]">
|
||||
Parser Warnings
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { Fragment, memo, useMemo, useRef } from 'react';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { ChevronDown, ChevronRight } from 'lucide-react';
|
||||
import type { FinancialStatementPeriod, SurfaceFinancialRow, DetailFinancialRow } from '@/lib/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Fragment } from "react";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import type {
|
||||
DetailFinancialRow,
|
||||
FinancialStatementPeriod,
|
||||
SurfaceFinancialRow,
|
||||
} from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type {
|
||||
StatementInspectorSelection,
|
||||
StatementTreeNode,
|
||||
StatementTreeSection
|
||||
} from '@/lib/financials/statement-view-model';
|
||||
StatementTreeSection,
|
||||
} from "@/lib/financials/statement-view-model";
|
||||
|
||||
type MatrixRow = SurfaceFinancialRow | DetailFinancialRow;
|
||||
|
||||
@@ -19,172 +22,183 @@ type StatementMatrixProps = {
|
||||
selectedRowRef: StatementInspectorSelection | null;
|
||||
onToggleRow: (key: string) => void;
|
||||
onSelectRow: (selection: StatementInspectorSelection) => void;
|
||||
renderCellValue: (row: MatrixRow, periodId: string, previousPeriodId: string | null) => string;
|
||||
renderCellValue: (
|
||||
row: MatrixRow,
|
||||
periodId: string,
|
||||
previousPeriodId: string | null,
|
||||
) => string;
|
||||
periodLabelFormatter: (value: string) => string;
|
||||
dense?: boolean;
|
||||
virtualized?: boolean;
|
||||
};
|
||||
|
||||
function isSurfaceNode(node: StatementTreeNode): node is Extract<StatementTreeNode, { kind: 'surface' }> {
|
||||
return node.kind === 'surface';
|
||||
}
|
||||
|
||||
function rowSelected(
|
||||
function isSurfaceNode(
|
||||
node: StatementTreeNode,
|
||||
selectedRowRef: StatementInspectorSelection | null
|
||||
) {
|
||||
if (!selectedRowRef) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (node.kind === 'surface') {
|
||||
return selectedRowRef.kind === 'surface' && selectedRowRef.key === node.row.key;
|
||||
}
|
||||
|
||||
return selectedRowRef.kind === 'detail'
|
||||
&& selectedRowRef.key === node.row.key
|
||||
&& selectedRowRef.parentKey === node.parentSurfaceKey;
|
||||
): node is Extract<StatementTreeNode, { kind: "surface" }> {
|
||||
return node.kind === "surface";
|
||||
}
|
||||
|
||||
function surfaceBadges(node: Extract<StatementTreeNode, { kind: 'surface' }>) {
|
||||
const badges: Array<{ label: string; tone: 'default' | 'warning' | 'muted' }> = [];
|
||||
function surfaceBadges(node: Extract<StatementTreeNode, { kind: "surface" }>) {
|
||||
const badges: Array<{
|
||||
label: string;
|
||||
tone: "default" | "warning" | "muted";
|
||||
}> = [];
|
||||
|
||||
if (node.row.resolutionMethod === 'formula_derived') {
|
||||
badges.push({ label: 'Formula', tone: node.row.confidence === 'low' ? 'warning' : 'default' });
|
||||
if (node.row.resolutionMethod === "formula_derived") {
|
||||
badges.push({
|
||||
label: "Formula",
|
||||
tone: node.row.confidence === "low" ? "warning" : "default",
|
||||
});
|
||||
}
|
||||
|
||||
if (node.row.resolutionMethod === 'not_meaningful') {
|
||||
badges.push({ label: 'N/M', tone: 'muted' });
|
||||
if (node.row.resolutionMethod === "not_meaningful") {
|
||||
badges.push({ label: "N/M", tone: "muted" });
|
||||
}
|
||||
|
||||
if (node.row.confidence === 'low') {
|
||||
badges.push({ label: 'Low confidence', tone: 'warning' });
|
||||
if (node.row.confidence === "low") {
|
||||
badges.push({ label: "Low confidence", tone: "warning" });
|
||||
}
|
||||
|
||||
const detailCount = node.row.detailCount ?? node.directDetailCount;
|
||||
if (detailCount > 0) {
|
||||
badges.push({ label: `${detailCount} details`, tone: 'default' });
|
||||
badges.push({ label: `${detailCount} details`, tone: "default" });
|
||||
}
|
||||
|
||||
return badges;
|
||||
}
|
||||
|
||||
function badgeClass(tone: 'default' | 'warning' | 'muted', dense?: boolean) {
|
||||
function badgeClass(tone: "default" | "warning" | "muted", dense?: boolean) {
|
||||
const baseClasses = dense
|
||||
? 'rounded border px-1 py-0.5 text-[9px] uppercase tracking-[0.12em]'
|
||||
: 'rounded-full border px-2 py-0.5 text-[10px] uppercase tracking-[0.14em]';
|
||||
? "rounded border px-1 py-0.5 text-[9px]"
|
||||
: "rounded border px-2 py-0.5 text-[10px]";
|
||||
|
||||
if (tone === 'warning') {
|
||||
return cn(baseClasses, 'border-[#84614f] bg-[rgba(112,76,54,0.22)] text-[#ffd7bf]');
|
||||
if (tone === "warning") {
|
||||
return cn(
|
||||
baseClasses,
|
||||
"border-[#84614f] bg-[rgba(112,76,54,0.22)] text-[#ffd7bf]",
|
||||
);
|
||||
}
|
||||
|
||||
if (tone === 'muted') {
|
||||
return cn(baseClasses, 'border-[color:var(--line-weak)] bg-[rgba(80,85,92,0.16)] text-[color:var(--terminal-muted)]');
|
||||
if (tone === "muted") {
|
||||
return cn(
|
||||
baseClasses,
|
||||
"border-[color:var(--line-weak)] bg-[rgba(80,85,92,0.16)] text-[color:var(--terminal-muted)]",
|
||||
);
|
||||
}
|
||||
|
||||
return cn(baseClasses, 'border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] text-[color:var(--terminal-bright)]');
|
||||
return cn(
|
||||
baseClasses,
|
||||
"border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] text-[color:var(--terminal-bright)]",
|
||||
);
|
||||
}
|
||||
|
||||
// Flatten tree nodes for virtualization
|
||||
type FlattenedNode = {
|
||||
node: StatementTreeNode;
|
||||
sectionKey: string;
|
||||
sectionLabel?: string;
|
||||
isSectionHeader?: boolean;
|
||||
};
|
||||
|
||||
function flattenSections(sections: StatementTreeSection[]): FlattenedNode[] {
|
||||
const result: FlattenedNode[] = [];
|
||||
|
||||
function flattenNodes(nodes: StatementTreeNode[], sectionKey: string): void {
|
||||
for (const node of nodes) {
|
||||
result.push({ node, sectionKey });
|
||||
|
||||
if (node.kind === 'surface' && node.expanded && node.children.length > 0) {
|
||||
flattenNodes(node.children, sectionKey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const section of sections) {
|
||||
if (section.label) {
|
||||
result.push({
|
||||
node: {} as StatementTreeNode,
|
||||
sectionKey: section.key,
|
||||
sectionLabel: section.label,
|
||||
isSectionHeader: true
|
||||
});
|
||||
}
|
||||
flattenNodes(section.nodes, section.key);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[]; dense?: boolean }) {
|
||||
function renderNodes(
|
||||
props: StatementMatrixProps & { nodes: StatementTreeNode[]; dense?: boolean },
|
||||
) {
|
||||
const { dense = false } = props;
|
||||
const buttonSize = dense ? 'size-7' : 'size-11';
|
||||
const buttonClass = dense ? 'rounded' : 'rounded-lg';
|
||||
const labelSize = dense ? 'text-[13px]' : 'text-sm';
|
||||
const detailLabelSize = dense ? 'text-xs' : 'text-[13px]';
|
||||
const paddingY = dense ? 'py-1.5' : 'py-2';
|
||||
const gapClass = dense ? 'gap-1' : 'gap-2';
|
||||
const buttonSize = dense ? "size-6" : "size-8";
|
||||
const buttonClass = dense ? "rounded" : "rounded-lg";
|
||||
const labelSize = dense ? "text-[13px]" : "text-sm";
|
||||
const detailLabelSize = dense ? "text-[11px]" : "text-xs";
|
||||
const paddingY = dense ? "py-1.5" : "py-2";
|
||||
const gapClass = dense ? "gap-1.5" : "gap-2";
|
||||
|
||||
return props.nodes.map((node) => {
|
||||
const isSelected = rowSelected(node, props.selectedRowRef);
|
||||
const labelIndent = node.kind === 'detail' ? node.level * 16 + 16 : node.level * 16;
|
||||
const labelIndent =
|
||||
node.kind === "detail" ? node.level * 16 + 16 : node.level * 16;
|
||||
const canToggle = isSurfaceNode(node) && node.expandable;
|
||||
const nextSelection: StatementInspectorSelection = node.kind === 'surface'
|
||||
? { kind: 'surface', key: node.row.key }
|
||||
: { kind: 'detail', key: node.row.key, parentKey: node.parentSurfaceKey };
|
||||
const nextSelection: StatementInspectorSelection =
|
||||
node.kind === "surface"
|
||||
? { kind: "surface", key: node.row.key }
|
||||
: {
|
||||
kind: "detail",
|
||||
key: node.row.key,
|
||||
parentKey: node.parentSurfaceKey,
|
||||
};
|
||||
const rowClass = cn(
|
||||
"financial-matrix-row",
|
||||
node.kind === "detail" && "financial-matrix-row-detail",
|
||||
);
|
||||
const stickyCellClass = cn(
|
||||
"financial-matrix-sticky-cell",
|
||||
node.kind === "detail" && "financial-matrix-sticky-cell-detail",
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment key={node.id}>
|
||||
<tr className={cn(isSelected && 'bg-[color:rgba(70,77,87,0.48)]')}>
|
||||
<td className="sticky left-0 z-10 bg-[color:var(--panel)]">
|
||||
<div className={cn('flex min-w-[240px] items-start', gapClass)} style={{ paddingLeft: `${labelIndent}px` }}>
|
||||
<tr className={rowClass}>
|
||||
<td className={stickyCellClass}>
|
||||
<div
|
||||
className={cn("flex min-w-0 items-start", gapClass)}
|
||||
style={{ paddingLeft: `${labelIndent}px` }}
|
||||
>
|
||||
{canToggle ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`${node.expanded ? 'Collapse' : 'Expand'} ${node.row.label} details`}
|
||||
aria-label={`${node.expanded ? "Collapse" : "Expand"} ${node.row.label} details`}
|
||||
aria-expanded={node.expanded}
|
||||
aria-controls={`statement-children-${node.id}`}
|
||||
className={cn(
|
||||
'mt-0.5 inline-flex shrink-0 items-center justify-center border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]',
|
||||
"mt-0.5 inline-flex shrink-0 items-center justify-center border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]",
|
||||
buttonSize,
|
||||
buttonClass
|
||||
buttonClass,
|
||||
)}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
props.onToggleRow(node.row.key);
|
||||
}}
|
||||
>
|
||||
{node.expanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
|
||||
{node.expanded ? (
|
||||
<ChevronDown className="size-3.5" />
|
||||
) : (
|
||||
<ChevronRight className="size-3.5" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<span className={cn('inline-flex shrink-0 items-center justify-center text-[color:var(--terminal-muted)]', buttonSize)} aria-hidden="true">
|
||||
{node.kind === 'detail' ? '·' : ''}
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex shrink-0 items-center justify-center text-[color:var(--terminal-muted)]",
|
||||
buttonSize,
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{node.kind === "detail" ? "·" : ""}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className={cn('flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left', paddingY)}
|
||||
className={cn(
|
||||
"flex min-w-0 flex-1 flex-col items-start gap-1 text-left",
|
||||
paddingY,
|
||||
)}
|
||||
onClick={() => props.onSelectRow(nextSelection)}
|
||||
>
|
||||
<span className={cn(
|
||||
labelSize,
|
||||
'text-[color:var(--terminal-bright)]',
|
||||
node.kind === 'detail' && cn(detailLabelSize, 'text-[color:var(--terminal-soft)]'),
|
||||
node.kind === 'surface' && node.level > 0 && 'text-[color:var(--terminal-soft)]'
|
||||
)}>
|
||||
<span
|
||||
className={cn(
|
||||
"block max-w-full truncate",
|
||||
labelSize,
|
||||
node.kind === "detail"
|
||||
? cn(
|
||||
detailLabelSize,
|
||||
"text-[color:var(--terminal-muted)]",
|
||||
)
|
||||
: "text-[color:var(--terminal-bright)]",
|
||||
node.kind === "surface" &&
|
||||
node.level > 0 &&
|
||||
"text-[color:var(--accent)]",
|
||||
)}
|
||||
title={node.row.label}
|
||||
>
|
||||
{node.row.label}
|
||||
</span>
|
||||
{node.kind === 'detail' ? (
|
||||
<span className="text-[10px] text-[color:var(--terminal-muted)]">
|
||||
{node.kind === "detail" ? (
|
||||
<span
|
||||
className="block max-w-full truncate text-[10px] text-[color:var(--terminal-muted)]"
|
||||
title={node.row.localName}
|
||||
>
|
||||
{node.row.localName}
|
||||
{node.row.residualFlag ? ' · residual' : ''}
|
||||
{node.row.residualFlag ? " · residual" : ""}
|
||||
</span>
|
||||
) : (
|
||||
) : surfaceBadges(node).length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{surfaceBadges(node).map((badge) => (
|
||||
<span
|
||||
@@ -195,25 +209,37 @@ function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[];
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
{props.periods.map((period, index) => (
|
||||
<td key={`${node.id}-${period.id}`} className="font-mono text-xs">
|
||||
{props.renderCellValue(node.row, period.id, index > 0 ? props.periods[index - 1]?.id ?? null : null)}
|
||||
<td
|
||||
key={`${node.id}-${period.id}`}
|
||||
className={cn(
|
||||
"financial-matrix-value-cell font-mono text-xs",
|
||||
node.kind === "detail" && "text-[color:var(--terminal-muted)]",
|
||||
)}
|
||||
>
|
||||
{props.renderCellValue(
|
||||
node.row,
|
||||
period.id,
|
||||
index > 0 ? (props.periods[index - 1]?.id ?? null) : null,
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
{isSurfaceNode(node) && node.expanded ? (
|
||||
<>
|
||||
<tr id={`statement-children-${node.id}`} className="sr-only">
|
||||
<td colSpan={props.periods.length + 1}>Expanded children for {node.row.label}</td>
|
||||
<td colSpan={props.periods.length + 1}>
|
||||
Expanded children for {node.row.label}
|
||||
</td>
|
||||
</tr>
|
||||
{renderNodes({
|
||||
...props,
|
||||
nodes: node.children,
|
||||
dense
|
||||
dense,
|
||||
})}
|
||||
</>
|
||||
) : null}
|
||||
@@ -222,193 +248,73 @@ function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[];
|
||||
});
|
||||
}
|
||||
|
||||
export function StatementMatrix(props: StatementMatrixProps) {
|
||||
const { dense = false, virtualized = false } = props;
|
||||
const tableClass = dense ? 'data-table-dense min-w-[960px]' : 'data-table min-w-[1040px]';
|
||||
|
||||
// Hooks must be called unconditionally
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
const flatRows = useMemo(() => flattenSections(props.sections), [props.sections]);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: flatRows.length,
|
||||
getScrollElement: () => parentRef.current,
|
||||
estimateSize: (index) => {
|
||||
const item = flatRows[index];
|
||||
if (item.isSectionHeader) return dense ? 32 : 40;
|
||||
if (item.node.kind === 'surface' && surfaceBadges(item.node as any).length > 0) return dense ? 44 : 56;
|
||||
return dense ? 36 : 48;
|
||||
},
|
||||
overscan: 10,
|
||||
});
|
||||
|
||||
// Non-virtualized version (original implementation with dense support)
|
||||
if (!virtualized) {
|
||||
return (
|
||||
<div className="data-table-wrap">
|
||||
<table className={tableClass}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
|
||||
{props.periods.map((period) => (
|
||||
<th key={period.id}>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span>{props.periodLabelFormatter(period.periodEnd ?? period.filingDate)}</span>
|
||||
<span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{period.filingType} · {period.periodLabel}</span>
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.sections.map((section) => (
|
||||
<Fragment key={section.key}>
|
||||
{section.label ? (
|
||||
<tr className="bg-[color:var(--panel-soft)]">
|
||||
<td colSpan={props.periods.length + 1} className="font-semibold text-[color:var(--terminal-bright)]">
|
||||
{section.label}
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
{renderNodes({
|
||||
...props,
|
||||
nodes: section.nodes,
|
||||
dense
|
||||
})}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Virtualized version for large datasets
|
||||
|
||||
export function StatementMatrix({
|
||||
periods,
|
||||
sections,
|
||||
selectedRowRef,
|
||||
onToggleRow,
|
||||
onSelectRow,
|
||||
renderCellValue,
|
||||
periodLabelFormatter,
|
||||
dense = false,
|
||||
}: StatementMatrixProps) {
|
||||
return (
|
||||
<div ref={parentRef} className="data-table-wrap h-[600px] overflow-auto">
|
||||
<table className={tableClass}>
|
||||
<thead className="sticky top-0 z-20 bg-[color:var(--panel)]">
|
||||
<div className="financial-matrix-wrap">
|
||||
<table className="financial-matrix">
|
||||
<colgroup>
|
||||
<col className="financial-matrix-metric-col" />
|
||||
{periods.map((period) => (
|
||||
<col
|
||||
key={`col-${period.id}`}
|
||||
className="financial-matrix-period-col"
|
||||
/>
|
||||
))}
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="sticky left-0 z-30 bg-[color:var(--panel)]">Metric</th>
|
||||
{props.periods.map((period) => (
|
||||
<th key={period.id}>
|
||||
<th className="financial-matrix-header">Metric</th>
|
||||
{periods.map((period) => (
|
||||
<th key={period.id} className="financial-matrix-header">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span>{props.periodLabelFormatter(period.periodEnd ?? period.filingDate)}</span>
|
||||
<span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{period.filingType} · {period.periodLabel}</span>
|
||||
<span className="text-sm font-medium text-[color:var(--terminal-bright)]">
|
||||
{periodLabelFormatter(
|
||||
period.periodEnd ?? period.filingDate,
|
||||
)}
|
||||
</span>
|
||||
<span className="text-[11px] tracking-normal text-[color:var(--terminal-muted)]">
|
||||
{period.filingType} · {period.periodLabel}
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
style={{ height: `${virtualizer.getTotalSize()}px` }}
|
||||
className="relative"
|
||||
>
|
||||
{virtualizer.getVirtualItems().map((virtualRow) => {
|
||||
const item = flatRows[virtualRow.index];
|
||||
|
||||
if (item.isSectionHeader) {
|
||||
return (
|
||||
<tr
|
||||
key={`section-${item.sectionKey}`}
|
||||
className="absolute w-full bg-[color:var(--panel-soft)]"
|
||||
style={{ transform: `translateY(${virtualRow.start}px)` }}
|
||||
>
|
||||
<td colSpan={props.periods.length + 1} className="font-semibold text-[color:var(--terminal-bright)]">
|
||||
{item.sectionLabel}
|
||||
<tbody>
|
||||
{sections.map((section) => (
|
||||
<Fragment key={section.key}>
|
||||
{section.label ? (
|
||||
<tr className="financial-matrix-section-row">
|
||||
<td
|
||||
colSpan={periods.length + 1}
|
||||
className="financial-matrix-section-cell"
|
||||
>
|
||||
{section.label}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
const node = item.node;
|
||||
const isSelected = rowSelected(node, props.selectedRowRef);
|
||||
const labelIndent = node.kind === 'detail' ? node.level * 16 + 16 : node.level * 16;
|
||||
const canToggle = isSurfaceNode(node) && node.expandable;
|
||||
const nextSelection: StatementInspectorSelection = node.kind === 'surface'
|
||||
? { kind: 'surface', key: node.row.key }
|
||||
: { kind: 'detail', key: node.row.key, parentKey: node.parentSurfaceKey };
|
||||
|
||||
const buttonSize = dense ? 'size-7' : 'size-11';
|
||||
const buttonClass = dense ? 'rounded' : 'rounded-lg';
|
||||
const labelSize = dense ? 'text-[13px]' : 'text-sm';
|
||||
const detailLabelSize = dense ? 'text-xs' : 'text-[13px]';
|
||||
const paddingY = dense ? 'py-1.5' : 'py-2';
|
||||
const gapClass = dense ? 'gap-1' : 'gap-2';
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={node.id}
|
||||
className={cn('absolute w-full', isSelected && 'bg-[color:rgba(70,77,87,0.48)]')}
|
||||
style={{ transform: `translateY(${virtualRow.start}px)` }}
|
||||
>
|
||||
<td className="sticky left-0 z-10 bg-[color:var(--panel)]">
|
||||
<div className={cn('flex min-w-[240px] items-start', gapClass)} style={{ paddingLeft: `${labelIndent}px` }}>
|
||||
{canToggle ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`${node.expanded ? 'Collapse' : 'Expand'} ${node.row.label} details`}
|
||||
aria-expanded={node.expanded}
|
||||
aria-controls={`statement-children-${node.id}`}
|
||||
className={cn(
|
||||
'mt-0.5 inline-flex shrink-0 items-center justify-center border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]',
|
||||
buttonSize,
|
||||
buttonClass
|
||||
)}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
props.onToggleRow(node.row.key);
|
||||
}}
|
||||
>
|
||||
{node.expanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
|
||||
</button>
|
||||
) : (
|
||||
<span className={cn('inline-flex shrink-0 items-center justify-center text-[color:var(--terminal-muted)]', buttonSize)} aria-hidden="true">
|
||||
{node.kind === 'detail' ? '·' : ''}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className={cn('flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left', paddingY)}
|
||||
onClick={() => props.onSelectRow(nextSelection)}
|
||||
>
|
||||
<span className={cn(
|
||||
labelSize,
|
||||
'text-[color:var(--terminal-bright)]',
|
||||
node.kind === 'detail' && cn(detailLabelSize, 'text-[color:var(--terminal-soft)]'),
|
||||
node.kind === 'surface' && node.level > 0 && 'text-[color:var(--terminal-soft)]'
|
||||
)}>
|
||||
{node.row.label}
|
||||
</span>
|
||||
{node.kind === 'detail' ? (
|
||||
<span className="text-[10px] text-[color:var(--terminal-muted)]">
|
||||
{node.row.localName}
|
||||
{node.row.residualFlag ? ' · residual' : ''}
|
||||
</span>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{surfaceBadges(node as any).map((badge) => (
|
||||
<span
|
||||
key={`${node.row.key}-${badge.label}`}
|
||||
className={badgeClass(badge.tone, dense)}
|
||||
>
|
||||
{badge.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
{props.periods.map((period, index) => (
|
||||
<td key={`${node.id}-${period.id}`} className="font-mono text-xs">
|
||||
{props.renderCellValue(node.row, period.id, index > 0 ? props.periods[index - 1]?.id ?? null : null)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
) : null}
|
||||
{renderNodes({
|
||||
periods,
|
||||
sections,
|
||||
selectedRowRef,
|
||||
onToggleRow,
|
||||
onSelectRow,
|
||||
renderCellValue,
|
||||
periodLabelFormatter,
|
||||
dense,
|
||||
nodes: section.nodes,
|
||||
})}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import type {
|
||||
DetailFinancialRow,
|
||||
DimensionBreakdownRow,
|
||||
@@ -27,12 +28,14 @@ type StatementRowInspectorProps = {
|
||||
rowKey: string,
|
||||
unit: SurfaceFinancialRow["unit"],
|
||||
) => string;
|
||||
showHeader?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function InspectorField(props: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="py-1.5">
|
||||
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
<p className="text-[11px] text-[color:var(--terminal-muted)]">
|
||||
{props.label}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-[color:var(--terminal-bright)]">
|
||||
@@ -57,16 +60,25 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
|
||||
: null;
|
||||
|
||||
return (
|
||||
<section className="border-t border-[color:var(--line-weak)] pt-4">
|
||||
<header className="mb-3">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Row Details
|
||||
</h3>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Inspect compact-surface resolution, raw drill-down rows, and
|
||||
dimensional evidence.
|
||||
</p>
|
||||
</header>
|
||||
<section
|
||||
className={cn(
|
||||
props.showHeader === false
|
||||
? ""
|
||||
: "border-t border-[color:var(--line-weak)] pt-4",
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
{props.showHeader === false ? null : (
|
||||
<header className="mb-3">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Row Details
|
||||
</h3>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Inspect compact-surface resolution, raw drill-down rows, and
|
||||
dimensional evidence.
|
||||
</p>
|
||||
</header>
|
||||
)}
|
||||
|
||||
{!selection ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">
|
||||
@@ -132,7 +144,7 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
|
||||
|
||||
{selection.detailRows.length > 0 ? (
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-3">
|
||||
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
<p className="text-[11px] text-[color:var(--terminal-muted)]">
|
||||
Raw Detail Labels
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
|
||||
Reference in New Issue
Block a user