1import type { TreeNode } from "./tree";
3function fmt(x: number): string {
4 if (Number.isNaN(x)) return "NaN";
5 if (!Number.isFinite(x)) return x > 0 ? "Inf" : "-Inf";
6 return Number.isInteger(x) ? String(x) : Number(x.toPrecision(6)).toString();
7}
9export function InfoPanel({ node }: { node: TreeNode | null }) {
10 if (!node) {
11 return (
12 <div className="info empty">
13 <p>Select an object in the tree to inspect it.</p>
14 </div>
15 );
16 }
18 const { detail } = node;
20 return (
21 <div className="info">
22 <div className="info-header">
23 <span className={"node-icon icon-" + node.icon}>
24 {detail.type === "dataset" ? "⋯" : ""}
25 </span>
26 <span className="info-title">{node.label}</span>
27 <span className="info-kind">
28 {detail.type === "dataset" ? "dataset" : detail.kind}
29 </span>
30 </div>
32 {detail.type === "object" ? (
33 detail.properties.length === 0 ? (
34 <p className="muted">No properties.</p>
35 ) : (
36 <table className="props">
37 <tbody>
38 {detail.properties.map(p => (
39 <tr key={p.key}>
40 <td className="pk">{p.key}</td>
41 <td className="pv">
42 {p.swatch && (
43 <span className="swatch" style={{ background: p.swatch }} />
44 )}
45 {p.value}
46 </td>
47 </tr>
48 ))}
49 </tbody>
50 </table>
51 )
52 ) : (
53 <div className="dataset-detail">
54 <table className="props">
55 <tbody>
56 <tr>
57 <td className="pk">shape</td>
58 <td className="pv">{detail.shapeLabel}</td>
59 </tr>
60 <tr>
61 <td className="pk">count</td>
62 <td className="pv">{detail.count}</td>
63 </tr>
64 {detail.stats && (
65 <>
66 <tr>
67 <td className="pk">min</td>
68 <td className="pv">{fmt(detail.stats.min)}</td>
69 </tr>
70 <tr>
71 <td className="pk">max</td>
72 <td className="pv">{fmt(detail.stats.max)}</td>
73 </tr>
74 <tr>
75 <td className="pk">mean</td>
76 <td className="pv">{fmt(detail.stats.mean)}</td>
77 </tr>
78 {detail.stats.nan > 0 && (
79 <tr>
80 <td className="pk">NaN</td>
81 <td className="pv">{detail.stats.nan}</td>
82 </tr>
83 )}
84 </>
85 )}
86 </tbody>
87 </table>
88 <div className="preview-label">values</div>
89 <pre className="preview">{detail.preview}</pre>
90 </div>
91 )}
92 </div>
93 );
94}