Import source: web/src/components/OrbitalOverview
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,429 @@
|
||||
import { memo, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { motion, useAnimationFrame } from "motion/react";
|
||||
import type { LiveTarget, TargetState } from "../lib/types";
|
||||
import { arcPath, polar } from "../lib/geometry";
|
||||
import { fmtUptime, pctSign } from "../lib/format";
|
||||
import { STATE_COLOR, useUI } from "../lib/ui";
|
||||
import { useSpringNumber } from "../hooks/useSpringNumber";
|
||||
import dialTexture from "../assets/dial-texture.webp";
|
||||
|
||||
const CX = 200;
|
||||
const CY = 200;
|
||||
const R_MIN = 100;
|
||||
const R_MAX = 172;
|
||||
const R_EJECT = 184; // a down node escapes to the outer rim
|
||||
const PATH_UPDATE_MS = 80;
|
||||
|
||||
/** Static backdrop: orbit hairlines, compass ticks, crosshairs. */
|
||||
const Field = memo(function Field({ radii }: { radii: number[] }) {
|
||||
return (
|
||||
<g>
|
||||
{/* crosshairs */}
|
||||
<line x1={CX} y1={8} x2={CX} y2={392} stroke="var(--color-ink-800)" strokeWidth={0.5} opacity={0.25} />
|
||||
<line x1={8} y1={CY} x2={392} y2={CY} stroke="var(--color-ink-800)" strokeWidth={0.5} opacity={0.25} />
|
||||
{/* orbit bands */}
|
||||
{radii.map((r, i) => (
|
||||
<circle
|
||||
key={i}
|
||||
cx={CX}
|
||||
cy={CY}
|
||||
r={r}
|
||||
fill="none"
|
||||
stroke="var(--color-ink-800)"
|
||||
strokeWidth={0.6}
|
||||
opacity={0.55}
|
||||
/>
|
||||
))}
|
||||
{/* compass ticks on the outer rim */}
|
||||
{[0, 90, 180, 270].map((a) => {
|
||||
const p1 = polar(CX, CY, 186, a);
|
||||
const p2 = polar(CX, CY, 192, a);
|
||||
return (
|
||||
<line
|
||||
key={a}
|
||||
x1={p1.x}
|
||||
y1={p1.y}
|
||||
x2={p2.x}
|
||||
y2={p2.y}
|
||||
stroke="var(--color-ink-700)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<circle cx={CX} cy={CY} r={189} fill="none" stroke="var(--color-ink-800)" strokeWidth={0.5} opacity={0.4} />
|
||||
</g>
|
||||
);
|
||||
});
|
||||
|
||||
interface NodeSim {
|
||||
angle: number;
|
||||
radius: number;
|
||||
}
|
||||
|
||||
interface NodeEls {
|
||||
g: SVGGElement | null;
|
||||
trail: SVGPathElement | null;
|
||||
scar: SVGPathElement | null;
|
||||
dot: SVGCircleElement | null;
|
||||
halo1: SVGCircleElement | null;
|
||||
halo2: SVGCircleElement | null;
|
||||
flare: SVGCircleElement | null;
|
||||
}
|
||||
|
||||
function overallState(targets: LiveTarget[]): TargetState {
|
||||
if (targets.some((t) => t.state === "down")) return "down";
|
||||
if (targets.some((t) => t.state === "degraded")) return "degraded";
|
||||
if (targets.every((t) => t.state === "unknown")) return "unknown";
|
||||
return "up";
|
||||
}
|
||||
|
||||
interface OrbitalOverviewProps {
|
||||
targets: LiveTarget[];
|
||||
onSelect: (id: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Circular visualization #2 — the orbital overview.
|
||||
*
|
||||
* Continuous motion runs entirely outside React: one animation frame loop
|
||||
* mutates transforms/attributes on refs, so React only renders when data
|
||||
* or hover changes. This is what keeps it smooth at any target count.
|
||||
*/
|
||||
export function OrbitalOverview({ targets, onSelect }: OrbitalOverviewProps) {
|
||||
const { t, lang, window, reduced } = useUI();
|
||||
const [hovered, setHovered] = useState<string | null>(null);
|
||||
|
||||
const n = Math.max(targets.length, 1);
|
||||
// Shared orbit bands: many targets per ring keeps the field legible.
|
||||
const nBands = Math.max(3, Math.min(6, Math.ceil(n / 4)));
|
||||
const bandRadii = useMemo(
|
||||
() =>
|
||||
Array.from({ length: nBands }, (_, b) =>
|
||||
nBands === 1 ? (R_MIN + R_MAX) / 2 : R_MIN + (b * (R_MAX - R_MIN)) / (nBands - 1),
|
||||
),
|
||||
[nBands],
|
||||
);
|
||||
|
||||
const baseRadius = (i: number) => bandRadii[i % nBands];
|
||||
// Kepler-flavored: inner bands run faster; small per-node jitter keeps
|
||||
// co-orbiting nodes from locking step.
|
||||
const speeds = useMemo(
|
||||
() =>
|
||||
targets.map((_, i) => {
|
||||
const k = (i % nBands) / Math.max(1, nBands - 1);
|
||||
const period = (90 + k * 130) * (1 + ((i * 37) % 11) * 0.012);
|
||||
return 360 / period;
|
||||
}),
|
||||
[targets.length, nBands],
|
||||
);
|
||||
|
||||
const sims = useRef<Map<string, NodeSim>>(new Map());
|
||||
const els = useRef<Map<string, NodeEls>>(new Map());
|
||||
const scannerRef = useRef<SVGPathElement | null>(null);
|
||||
const lastT = useRef<number | null>(null);
|
||||
const lastPathT = useRef(0);
|
||||
|
||||
targets.forEach((target, i) => {
|
||||
if (!sims.current.has(target.id)) {
|
||||
sims.current.set(target.id, {
|
||||
angle: (i * 137.5) % 360,
|
||||
radius: baseRadius(i),
|
||||
});
|
||||
}
|
||||
if (!els.current.has(target.id)) {
|
||||
els.current.set(target.id, {
|
||||
g: null, trail: null, scar: null, dot: null,
|
||||
halo1: null, halo2: null, flare: null,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const liveIds = new Set(targets.map((target) => target.id));
|
||||
for (const id of sims.current.keys()) {
|
||||
if (!liveIds.has(id)) sims.current.delete(id);
|
||||
}
|
||||
for (const id of els.current.keys()) {
|
||||
if (!liveIds.has(id)) els.current.delete(id);
|
||||
}
|
||||
}, [targets]);
|
||||
|
||||
const refOf = (id: string) => els.current.get(id)!;
|
||||
|
||||
useAnimationFrame((time) => {
|
||||
if (reduced) return;
|
||||
const dt = lastT.current === null ? 0 : Math.min(0.1, (time - lastT.current) / 1000);
|
||||
lastT.current = time;
|
||||
const now = time / 1000;
|
||||
const updatePaths = time - lastPathT.current >= PATH_UPDATE_MS;
|
||||
if (updatePaths) lastPathT.current = time;
|
||||
|
||||
targets.forEach((target, i) => {
|
||||
const sim = sims.current.get(target.id)!;
|
||||
const el = els.current.get(target.id);
|
||||
if (!el?.g) return;
|
||||
|
||||
sim.angle = (sim.angle + speeds[i] * dt) % 360;
|
||||
const wantR = target.state === "down" ? R_EJECT : baseRadius(i);
|
||||
sim.radius += (wantR - sim.radius) * Math.min(1, dt * 2.6);
|
||||
|
||||
const pos = polar(CX, CY, sim.radius, sim.angle);
|
||||
el.g.setAttribute("transform", `translate(${pos.x.toFixed(2)} ${pos.y.toFixed(2)})`);
|
||||
|
||||
if (updatePaths && el.trail) {
|
||||
el.trail.setAttribute(
|
||||
"d",
|
||||
target.state === "unknown" ? "" : arcPath(CX, CY, sim.radius, sim.angle - 16, sim.angle),
|
||||
);
|
||||
}
|
||||
if (updatePaths && el.scar) {
|
||||
el.scar.setAttribute(
|
||||
"d",
|
||||
target.state === "down"
|
||||
? arcPath(CX, CY, baseRadius(i), sim.angle - 11, sim.angle + 11)
|
||||
: "",
|
||||
);
|
||||
}
|
||||
|
||||
// degraded breath: gentle 2s oscillation, down flare: harsher throb
|
||||
if (el.dot) {
|
||||
const breath =
|
||||
target.state === "degraded" ? 1 + 0.3 * (0.5 + 0.5 * Math.sin(now * Math.PI)) : 1;
|
||||
const r = (target.state === "down" ? 5 : 4) * breath * (hovered === target.id ? 1.3 : 1);
|
||||
el.dot.setAttribute("r", r.toFixed(2));
|
||||
}
|
||||
if (el.flare) {
|
||||
if (target.state === "down") {
|
||||
const flare = 0.5 + 0.5 * Math.abs(Math.sin(now * 2.6));
|
||||
el.flare.setAttribute("r", (11 + flare * 5).toFixed(2));
|
||||
el.flare.setAttribute("opacity", (0.18 + flare * 0.4).toFixed(3));
|
||||
} else {
|
||||
el.flare.setAttribute("opacity", "0");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (scannerRef.current) {
|
||||
const a = (now * 6) % 360;
|
||||
scannerRef.current.setAttribute("transform", `rotate(${a.toFixed(2)} ${CX} ${CY})`);
|
||||
}
|
||||
});
|
||||
|
||||
const sys = overallState(targets);
|
||||
const winKey = window === "7d" ? "uptime_7d" : "uptime_24h";
|
||||
const known = targets.filter((x) => x[winKey] !== undefined);
|
||||
const meanUptime =
|
||||
known.length > 0
|
||||
? known.reduce((acc, x) => acc + (x[winKey] ?? 0), 0) / known.length
|
||||
: undefined;
|
||||
const displayMean = useSpringNumber(meanUptime ?? 0);
|
||||
|
||||
return (
|
||||
<figure className="relative select-none">
|
||||
<figcaption className="microlabel mb-3 flex items-baseline gap-4">
|
||||
<span>{t.orbit}</span>
|
||||
<span className="rule-fade flex-1" />
|
||||
<span className="tabular">{targets.length}</span>
|
||||
</figcaption>
|
||||
|
||||
<div className="orbital-stage relative w-full max-w-[600px] mx-auto">
|
||||
{/* machined-dial backdrop — the orbit sits on real metal */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="dial-backdrop"
|
||||
style={{ backgroundImage: `url(${dialTexture})` }}
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 400 400"
|
||||
className="relative w-full block"
|
||||
role="img"
|
||||
aria-label={`${t.overall}: ${t.state[sys]}`}
|
||||
>
|
||||
<Field radii={bandRadii} />
|
||||
|
||||
{/* center-anchored trails/scars (updated imperatively) */}
|
||||
{targets.map((target, i) => {
|
||||
const sim = sims.current.get(target.id)!;
|
||||
return (
|
||||
<g key={`paths-${target.id}`}>
|
||||
<path
|
||||
ref={(node) => { refOf(target.id).trail = node; }}
|
||||
d={reduced || target.state === "unknown" ? "" : arcPath(CX, CY, sim.radius, sim.angle - 16, sim.angle)}
|
||||
fill="none"
|
||||
stroke={STATE_COLOR[target.state]}
|
||||
strokeWidth={1}
|
||||
opacity={0.22}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
ref={(node) => { refOf(target.id).scar = node; }}
|
||||
d={target.state === "down" ? arcPath(CX, CY, baseRadius(i), sim.angle - 11, sim.angle + 11) : ""}
|
||||
fill="none"
|
||||
stroke="var(--color-down)"
|
||||
strokeWidth={0.75}
|
||||
strokeDasharray="2 3"
|
||||
opacity={0.45}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* ——— core ——— */}
|
||||
<motion.g
|
||||
initial={reduced ? false : { opacity: 0, scale: 0.85 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={reduced ? { duration: 0 } : { type: "spring", stiffness: 70, damping: 16, delay: 0.2 }}
|
||||
style={{ transformOrigin: "200px 200px" }}
|
||||
>
|
||||
<circle cx={CX} cy={CY} r={46} fill="var(--color-ink-900)" stroke="var(--color-ink-700)" strokeWidth={0.75} />
|
||||
<motion.circle
|
||||
cx={CX}
|
||||
cy={CY}
|
||||
r={52}
|
||||
fill="none"
|
||||
strokeWidth={1.25}
|
||||
animate={{ stroke: STATE_COLOR[sys] }}
|
||||
transition={{ duration: 0.8 }}
|
||||
opacity={0.9}
|
||||
/>
|
||||
{/* scanner hand — sweeps once a minute, like a second hand */}
|
||||
{!reduced && (
|
||||
<path
|
||||
ref={scannerRef}
|
||||
d={arcPath(CX, CY, 57, 0, 26)}
|
||||
fill="none"
|
||||
stroke="var(--color-brass)"
|
||||
strokeWidth={1}
|
||||
strokeLinecap="round"
|
||||
opacity={0.8}
|
||||
/>
|
||||
)}
|
||||
<text
|
||||
x={CX}
|
||||
y={CY + 4}
|
||||
textAnchor="middle"
|
||||
fontFamily="var(--font-display)"
|
||||
fontSize={26}
|
||||
fill="var(--color-paper)"
|
||||
className="tabular"
|
||||
>
|
||||
{meanUptime !== undefined ? fmtUptime(lang, displayMean) : "—"}
|
||||
<tspan fontSize={11} fill="var(--color-paper-faint)" dx={1.5}>{pctSign(lang)}</tspan>
|
||||
</text>
|
||||
<text
|
||||
x={CX}
|
||||
y={CY + 22}
|
||||
textAnchor="middle"
|
||||
fontFamily="var(--font-mono)"
|
||||
fontSize={7}
|
||||
letterSpacing={lang === "fa" ? 0 : 2}
|
||||
fill="var(--color-paper-faint)"
|
||||
style={{ textTransform: "uppercase" }}
|
||||
>
|
||||
{t.overall}
|
||||
</text>
|
||||
</motion.g>
|
||||
|
||||
{/* ——— orbiting bodies (positioned imperatively) ——— */}
|
||||
{targets.map((target, i) => {
|
||||
const sim = sims.current.get(target.id)!;
|
||||
const color = STATE_COLOR[target.state];
|
||||
const isHover = hovered === target.id;
|
||||
const pos = polar(
|
||||
CX,
|
||||
CY,
|
||||
reduced ? baseRadius(i) + (target.state === "down" ? R_EJECT - baseRadius(i) : 0) : sim.radius,
|
||||
reduced ? (i * 137.5) % 360 : sim.angle,
|
||||
);
|
||||
|
||||
return (
|
||||
<g
|
||||
key={target.id}
|
||||
ref={(node) => { refOf(target.id).g = node; }}
|
||||
transform={`translate(${pos.x.toFixed(2)} ${pos.y.toFixed(2)})`}
|
||||
>
|
||||
{/* flare halo (down) — driven by the frame loop */}
|
||||
<circle
|
||||
ref={(node) => { refOf(target.id).flare = node; }}
|
||||
r={11}
|
||||
fill="none"
|
||||
stroke="var(--color-down)"
|
||||
strokeWidth={0.75}
|
||||
opacity={target.state === "down" && reduced ? 0.4 : 0}
|
||||
/>
|
||||
|
||||
{/* state-change ripple */}
|
||||
{!reduced && target.stateChangedAt > 0 && (
|
||||
<motion.circle
|
||||
key={`ripple-${target.stateChangedAt}`}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
initial={{ r: 5, opacity: 0.9, strokeWidth: 2 }}
|
||||
animate={{ r: 30, opacity: 0, strokeWidth: 0.5 }}
|
||||
transition={{ duration: 1.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* layered soft glow — no SVG filters, just cheap circles */}
|
||||
<circle
|
||||
ref={(node) => { refOf(target.id).halo2 = node; }}
|
||||
r={isHover ? 13 : 10}
|
||||
fill={color}
|
||||
opacity={0.07}
|
||||
/>
|
||||
<circle
|
||||
ref={(node) => { refOf(target.id).halo1 = node; }}
|
||||
r={isHover ? 9 : 7}
|
||||
fill={color}
|
||||
opacity={0.16}
|
||||
/>
|
||||
|
||||
{/* the body itself */}
|
||||
<circle
|
||||
ref={(node) => { refOf(target.id).dot = node; }}
|
||||
r={target.state === "down" ? 5 : 4}
|
||||
fill={color}
|
||||
stroke="var(--color-ink-950)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
{target.state === "unknown" && (
|
||||
<circle r={6.5} fill="none" stroke="var(--color-idle)" strokeWidth={0.5} opacity={0.6} />
|
||||
)}
|
||||
|
||||
{/* label on hover, always for down */}
|
||||
{(isHover || target.state === "down") && (
|
||||
<motion.text
|
||||
initial={reduced ? false : { opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.18 }}
|
||||
y={-13}
|
||||
textAnchor="middle"
|
||||
fontFamily="var(--font-mono)"
|
||||
fontSize={8.5}
|
||||
fill={isHover ? "var(--color-paper)" : color}
|
||||
paintOrder="stroke"
|
||||
stroke="var(--color-ink-950)"
|
||||
strokeWidth={3}
|
||||
style={{ pointerEvents: "none" }}
|
||||
>
|
||||
{target.name}
|
||||
</motion.text>
|
||||
)}
|
||||
|
||||
{/* hit area */}
|
||||
<circle
|
||||
r={13}
|
||||
fill="transparent"
|
||||
style={{ cursor: "pointer" }}
|
||||
onMouseEnter={() => setHovered(target.id)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
onClick={() => onSelect(target.id)}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
</figure>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user