-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathReportWorkspace.tsx
More file actions
121 lines (118 loc) · 3.77 KB
/
Copy pathReportWorkspace.tsx
File metadata and controls
121 lines (118 loc) · 3.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { useState } from "react";
import { reportRegistry } from "../domain/reportRegistry";
import type { PeriodScope, ReportId, ReportRunScope, RunPeriodRole } from "../domain/types";
import { DataTable } from "./DataTable";
import { ReportDashboard } from "./ReportDashboard";
import { ReportScopePanel } from "./ReportScopePanel";
import { StackOverflowLogo } from "./StackOverflowLogo";
export interface ReportWorkspaceProps {
reportId: ReportId;
records: Record<string, unknown>[];
comparisonRecords?: Record<string, unknown>[];
currentScope?: PeriodScope;
comparisonScope?: PeriodScope;
outputSource?: "live-api" | "upload";
scope: ReportRunScope;
onScopeChange: (scope: ReportRunScope) => void;
onRun: (periodRole: RunPeriodRole) => void;
onRunBoth: () => void;
}
export function ReportWorkspace({
reportId,
records,
comparisonRecords,
currentScope,
comparisonScope,
outputSource,
scope,
onScopeChange,
onRun,
onRunBoth,
}: ReportWorkspaceProps) {
const [tab, setTab] = useState<"dashboard" | "table">("dashboard");
const report = reportRegistry.find((candidate) => candidate.id === reportId)!;
const comparisonEnabled = scope.comparison !== undefined;
return (
<section className="workspace-panel" aria-labelledby="selected-report-heading">
<div className="workspace-header">
<div>
<p className="workspace-kicker">{report.sourceRepo}</p>
<h2 className="workspace-heading" id="selected-report-heading">
{report.title}
</h2>
</div>
<StackOverflowLogo className="workspace-stack-mark" variant="glyph" />
</div>
<p className="workspace-copy">{report.description}</p>
<div className="workspace-readiness" role="note">
<span className="readiness-dot" aria-hidden="true" />
<p className="m0">
Ready for session credentials. Live API runs collect mapped datasets; uploads
render full script outputs.
</p>
</div>
<ReportScopePanel scope={scope} onChange={onScopeChange} />
<div className="run-controls">
<button
className="s-btn s-btn__filled report-run-primary"
type="button"
onClick={() => onRun("current")}
>
Run current period
</button>
{comparisonEnabled && (
<>
<button
className="s-btn s-btn__outlined report-run-secondary"
type="button"
onClick={() => onRun("comparison")}
>
Run comparison period
</button>
<button
className="s-btn s-btn__outlined report-run-secondary"
type="button"
onClick={onRunBoth}
>
Run both periods
</button>
</>
)}
</div>
<div className="s-navigation s-navigation__muted report-tabs" role="tablist">
<button
className="s-navigation--item"
type="button"
role="tab"
aria-selected={tab === "dashboard"}
onClick={() => setTab("dashboard")}
>
Dashboard
</button>
<button
className="s-navigation--item"
type="button"
role="tab"
aria-selected={tab === "table"}
onClick={() => setTab("table")}
>
Raw Table
</button>
</div>
{tab === "dashboard" ? (
<ReportDashboard
reportId={reportId}
records={records}
comparisonRecords={comparisonRecords}
currentScope={currentScope}
comparisonScope={comparisonScope}
outputSource={outputSource}
/>
) : (
<div className="raw-table-panel">
<DataTable records={records} />
</div>
)}
</section>
);
}