323 lines
10 KiB
TypeScript
323 lines
10 KiB
TypeScript
"use client";
|
|
|
|
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";
|
|
|
|
type MatrixRow = SurfaceFinancialRow | DetailFinancialRow;
|
|
|
|
type StatementMatrixProps = {
|
|
periods: FinancialStatementPeriod[];
|
|
sections: StatementTreeSection[];
|
|
selectedRowRef: StatementInspectorSelection | null;
|
|
onToggleRow: (key: string) => void;
|
|
onSelectRow: (selection: StatementInspectorSelection) => void;
|
|
renderCellValue: (
|
|
row: MatrixRow,
|
|
periodId: string,
|
|
previousPeriodId: string | null,
|
|
) => string;
|
|
periodLabelFormatter: (value: string) => string;
|
|
dense?: boolean;
|
|
};
|
|
|
|
function isSurfaceNode(
|
|
node: StatementTreeNode,
|
|
): 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";
|
|
}> = [];
|
|
|
|
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.confidence === "low") {
|
|
badges.push({ label: "Low confidence", tone: "warning" });
|
|
}
|
|
|
|
const detailCount = node.directDetailCount;
|
|
if (detailCount > 0) {
|
|
badges.push({ label: `${detailCount} details`, tone: "default" });
|
|
}
|
|
|
|
return badges;
|
|
}
|
|
|
|
function badgeClass(tone: "default" | "warning" | "muted", dense?: boolean) {
|
|
const baseClasses = dense
|
|
? "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 === "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)]",
|
|
);
|
|
}
|
|
|
|
function renderNodes(
|
|
props: StatementMatrixProps & { nodes: StatementTreeNode[]; dense?: boolean },
|
|
) {
|
|
const { dense = false } = props;
|
|
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 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 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={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-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-1 text-left",
|
|
paddingY,
|
|
)}
|
|
onClick={() => props.onSelectRow(nextSelection)}
|
|
>
|
|
<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="block max-w-full truncate text-[10px] text-[color:var(--terminal-muted)]"
|
|
title={node.row.localName}
|
|
>
|
|
{node.row.localName}
|
|
{node.row.residualFlag ? " · residual" : ""}
|
|
</span>
|
|
) : surfaceBadges(node).length > 0 ? (
|
|
<div className="flex flex-wrap gap-1">
|
|
{surfaceBadges(node).map((badge) => (
|
|
<span
|
|
key={`${node.row.key}-${badge.label}`}
|
|
className={badgeClass(badge.tone, dense)}
|
|
>
|
|
{badge.label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
{props.periods.map((period, index) => (
|
|
<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>
|
|
</tr>
|
|
{renderNodes({
|
|
...props,
|
|
nodes: node.children,
|
|
dense,
|
|
})}
|
|
</>
|
|
) : null}
|
|
</Fragment>
|
|
);
|
|
});
|
|
}
|
|
|
|
export function StatementMatrix({
|
|
periods,
|
|
sections,
|
|
selectedRowRef,
|
|
onToggleRow,
|
|
onSelectRow,
|
|
renderCellValue,
|
|
periodLabelFormatter,
|
|
dense = false,
|
|
}: StatementMatrixProps) {
|
|
return (
|
|
<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="financial-matrix-header">Metric</th>
|
|
{periods.map((period) => (
|
|
<th key={period.id} className="financial-matrix-header">
|
|
<div className="flex flex-col gap-1">
|
|
<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>
|
|
{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>
|
|
) : null}
|
|
{renderNodes({
|
|
periods,
|
|
sections,
|
|
selectedRowRef,
|
|
onToggleRow,
|
|
onSelectRow,
|
|
renderCellValue,
|
|
periodLabelFormatter,
|
|
dense,
|
|
nodes: section.nodes,
|
|
})}
|
|
</Fragment>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|