sudacode/SubMiner
1
0
Fork 0
mirror of https://github.com/ksyasuda/SubMiner.git synced 2026-03-21 00:11:27 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix(stats): align session event popovers with chart plot area

Browse Source
This commit is contained in:
Kyle Yasuda
2026-03-17 23:56:58 -07:00
parent e694963426
commit a5b1c0509d
5 changed files with 953 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

416
stats/src/components/sessions/SessionDetail.tsx
View File

@@ -11,6 +11,7 @@ import {
ReferenceArea,
ReferenceLine,
CartesianGrid,
Customized,
} from 'recharts';
import { useSessionDetail } from '../../hooks/useSessions';
import { getStatsClient } from '../../hooks/useStatsApi';
@@ -18,8 +19,11 @@ import type { KnownWordsTimelinePoint } from '../../hooks/useSessions';
import { CHART_THEME } from '../../lib/chart-theme';
import {
buildSessionChartEvents,
extractSessionEventNoteInfo,
resolveActiveSessionMarkerKey,
type SessionChartMarker,
type SessionEventNoteInfo,
type SessionChartPlotArea,
} from '../../lib/session-events';
import { buildLookupRateDisplay } from '../../lib/yomitan-lookup';
import { getSessionDisplayWordCount } from '../../lib/session-word-count';
@@ -69,19 +73,6 @@ function lookupKnownWords(map: Map<number, number>, linesSeen: number): number {
return best > 0 ? map.get(best)! : 0;
}
function extractNoteExpression(note: {
noteId: number;
fields: Record<string, { value: string }>;
}): SessionEventNoteInfo {
const expression =
note.fields?.Expression?.value ??
note.fields?.expression?.value ??
note.fields?.Word?.value ??
note.fields?.word?.value ??
'';
return { noteId: note.noteId, expression };
}
interface RatioChartPoint {
tsMs: number;
knownPct: number;
@@ -102,11 +93,30 @@ type TimelineEntry = {
tokensSeen: number;
};
function SessionChartOffsetProbe({
offset,
onPlotAreaChange,
}: {
offset?: { left?: number; width?: number };
onPlotAreaChange: (plotArea: SessionChartPlotArea) => void;
}) {
useEffect(() => {
if (!offset) return;
const { left, width } = offset;
if (typeof left !== 'number' || !Number.isFinite(left)) return;
if (typeof width !== 'number' || !Number.isFinite(width)) return;
onPlotAreaChange({ left, width });
}, [offset?.left, offset?.width, onPlotAreaChange]);
return null;
}
export function SessionDetail({ session }: SessionDetailProps) {
const { timeline, events, knownWordsTimeline, loading, error } = useSessionDetail(
session.sessionId,
);
const [activeMarkerKey, setActiveMarkerKey] = useState<string | null>(null);
const [hoveredMarkerKey, setHoveredMarkerKey] = useState<string | null>(null);
const [pinnedMarkerKey, setPinnedMarkerKey] = useState<string | null>(null);
const [noteInfos, setNoteInfos] = useState<Map<number, SessionEventNoteInfo>>(new Map());
const [loadingNoteIds, setLoadingNoteIds] = useState<Set<number>>(new Set());
const requestedNoteIdsRef = useRef<Set<number>>(new Set());
@@ -124,6 +134,7 @@ export function SessionDetail({ session }: SessionDetailProps) {
const pauseCount = events.filter((e) => e.eventType === EventType.PAUSE_START).length;
const seekCount = seekEvents.length;
const cardEventCount = cardEvents.length;
const activeMarkerKey = resolveActiveSessionMarkerKey(hoveredMarkerKey, pinnedMarkerKey);
const activeMarker = useMemo<SessionChartMarker | null>(
() => markers.find((marker) => marker.key === activeMarkerKey) ?? null,
[markers, activeMarkerKey],
@@ -161,7 +172,8 @@ export function SessionDetail({ session }: SessionDetailProps) {
setNoteInfos((prev) => {
const next = new Map(prev);
for (const note of notes) {
const info = extractNoteExpression(note);
const info = extractSessionEventNoteInfo(note);
if (!info) continue;
next.set(info.noteId, info);
}
return next;
@@ -205,8 +217,10 @@ export function SessionDetail({ session }: SessionDetailProps) {
yomitanLookupEvents={yomitanLookupEvents}
pauseRegions={pauseRegions}
markers={markers}
activeMarkerKey={activeMarkerKey}
onActiveMarkerChange={setActiveMarkerKey}
hoveredMarkerKey={hoveredMarkerKey}
onHoveredMarkerChange={setHoveredMarkerKey}
pinnedMarkerKey={pinnedMarkerKey}
onPinnedMarkerChange={setPinnedMarkerKey}
noteInfos={noteInfos}
loadingNoteIds={loadingNoteIds}
onOpenNote={handleOpenNote}
@@ -227,8 +241,10 @@ export function SessionDetail({ session }: SessionDetailProps) {
yomitanLookupEvents={yomitanLookupEvents}
pauseRegions={pauseRegions}
markers={markers}
activeMarkerKey={activeMarkerKey}
onActiveMarkerChange={setActiveMarkerKey}
hoveredMarkerKey={hoveredMarkerKey}
onHoveredMarkerChange={setHoveredMarkerKey}
pinnedMarkerKey={pinnedMarkerKey}
onPinnedMarkerChange={setPinnedMarkerKey}
noteInfos={noteInfos}
loadingNoteIds={loadingNoteIds}
onOpenNote={handleOpenNote}
@@ -251,8 +267,10 @@ function RatioView({
yomitanLookupEvents,
pauseRegions,
markers,
activeMarkerKey,
onActiveMarkerChange,
hoveredMarkerKey,
onHoveredMarkerChange,
pinnedMarkerKey,
onPinnedMarkerChange,
noteInfos,
loadingNoteIds,
onOpenNote,
@@ -269,8 +287,10 @@ function RatioView({
yomitanLookupEvents: SessionEvent[];
pauseRegions: Array<{ startMs: number; endMs: number }>;
markers: SessionChartMarker[];
activeMarkerKey: string | null;
onActiveMarkerChange: (markerKey: string | null) => void;
hoveredMarkerKey: string | null;
onHoveredMarkerChange: (markerKey: string | null) => void;
pinnedMarkerKey: string | null;
onPinnedMarkerChange: (markerKey: string | null) => void;
noteInfos: Map<number, SessionEventNoteInfo>;
loadingNoteIds: Set<number>;
onOpenNote: (noteId: number) => void;
@@ -280,6 +300,7 @@ function RatioView({
lookupRate: ReturnType<typeof buildLookupRateDisplay>;
session: SessionSummary;
}) {
const [plotArea, setPlotArea] = useState<SessionChartPlotArea | null>(null);
const chartData: RatioChartPoint[] = [];
for (const t of sorted) {
const totalWords = getSessionDisplayWordCount(t);
@@ -313,84 +334,99 @@ function RatioView({
<div className="relative">
<ResponsiveContainer width="100%" height={130}>
<AreaChart data={chartData}>
<defs>
<linearGradient id={`knownGrad-${session.sessionId}`} x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stopColor="#a6da95" stopOpacity={0.4} />
<stop offset="100%" stopColor="#a6da95" stopOpacity={0.15} />
</linearGradient>
<linearGradient id={`unknownGrad-${session.sessionId}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#c6a0f6" stopOpacity={0.25} />
<stop offset="100%" stopColor="#c6a0f6" stopOpacity={0.08} />
</linearGradient>
</defs>
<CartesianGrid
horizontal
vertical={false}
stroke="#494d64"
strokeDasharray="4 4"
strokeOpacity={0.4}
/>
<XAxis
dataKey="tsMs"
type="number"
domain={[tsMin, tsMax]}
tick={{ fontSize: 9, fill: CHART_THEME.tick }}
axisLine={false}
tickLine={false}
tickFormatter={formatTime}
interval="preserveStartEnd"
/>
<YAxis
yAxisId="pct"
orientation="right"
domain={[0, 100]}
ticks={[0, 50, 100]}
tick={{ fontSize: 9, fill: CHART_THEME.tick }}
tickFormatter={(v: number) => `${v}%`}
axisLine={false}
tickLine={false}
width={32}
/>
<Tooltip
contentStyle={tooltipStyle}
labelFormatter={formatTime}
formatter={(_value: number, name: string, props: { payload?: RatioChartPoint }) => {
const d = props.payload;
if (!d) return [_value, name];
if (name === 'Known')
return [`${d.knownWords.toLocaleString()} (${d.knownPct.toFixed(1)}%)`, 'Known'];
if (name === 'Unknown')
return [
`${d.unknownWords.toLocaleString()} (${d.unknownPct.toFixed(1)}%)`,
'Unknown',
];
return [_value, name];
}}
itemSorter={() => -1}
/>
{/* Pause shaded regions */}
{pauseRegions.map((r, i) => (
<ReferenceArea
key={`pause-${i}`}
yAxisId="pct"
x1={r.startMs}
x2={r.endMs}
y1={0}
y2={100}
fill="#f5a97f"
fillOpacity={0.15}
stroke="#f5a97f"
strokeOpacity={0.4}
strokeDasharray="3 3"
strokeWidth={1}
<Customized
component={
<SessionChartOffsetProbe
onPlotAreaChange={(nextPlotArea) => {
setPlotArea((prevPlotArea) =>
prevPlotArea &&
prevPlotArea.left === nextPlotArea.left &&
prevPlotArea.width === nextPlotArea.width
? prevPlotArea
: nextPlotArea,
);
}}
/>
}
/>
))}
<defs>
<linearGradient id={`knownGrad-${session.sessionId}`} x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stopColor="#a6da95" stopOpacity={0.4} />
<stop offset="100%" stopColor="#a6da95" stopOpacity={0.15} />
</linearGradient>
<linearGradient id={`unknownGrad-${session.sessionId}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#c6a0f6" stopOpacity={0.25} />
<stop offset="100%" stopColor="#c6a0f6" stopOpacity={0.08} />
</linearGradient>
</defs>
{/* Card mine markers */}
<CartesianGrid
horizontal
vertical={false}
stroke="#494d64"
strokeDasharray="4 4"
strokeOpacity={0.4}
/>
<XAxis
dataKey="tsMs"
type="number"
domain={[tsMin, tsMax]}
tick={{ fontSize: 9, fill: CHART_THEME.tick }}
axisLine={false}
tickLine={false}
tickFormatter={formatTime}
interval="preserveStartEnd"
/>
<YAxis
yAxisId="pct"
orientation="right"
domain={[0, 100]}
ticks={[0, 50, 100]}
tick={{ fontSize: 9, fill: CHART_THEME.tick }}
tickFormatter={(v: number) => `${v}%`}
axisLine={false}
tickLine={false}
width={32}
/>
<Tooltip
contentStyle={tooltipStyle}
labelFormatter={formatTime}
formatter={(_value: number, name: string, props: { payload?: RatioChartPoint }) => {
const d = props.payload;
if (!d) return [_value, name];
if (name === 'Known')
return [`${d.knownWords.toLocaleString()} (${d.knownPct.toFixed(1)}%)`, 'Known'];
if (name === 'Unknown')
return [
`${d.unknownWords.toLocaleString()} (${d.unknownPct.toFixed(1)}%)`,
'Unknown',
];
return [_value, name];
}}
itemSorter={() => -1}
/>
{/* Pause shaded regions */}
{pauseRegions.map((r, i) => (
<ReferenceArea
key={`pause-${i}`}
yAxisId="pct"
x1={r.startMs}
x2={r.endMs}
y1={0}
y2={100}
fill="#f5a97f"
fillOpacity={0.15}
stroke="#f5a97f"
strokeOpacity={0.4}
strokeDasharray="3 3"
strokeWidth={1}
/>
))}
{/* Card mine markers */}
{cardEvents.map((e, i) => (
<ReferenceLine
key={`card-${i}`}
@@ -418,7 +454,7 @@ function RatioView({
);
})}
{/* Yomitan lookup markers */}
{/* Yomitan lookup markers */}
{yomitanLookupEvents.map((e, i) => (
<ReferenceLine
key={`yomitan-${i}`}
@@ -431,38 +467,41 @@ function RatioView({
/>
))}
<Area
yAxisId="pct"
dataKey="knownPct"
stackId="ratio"
stroke="#a6da95"
strokeWidth={1.5}
fill={`url(#knownGrad-${session.sessionId})`}
name="Known"
type="monotone"
dot={false}
activeDot={{ r: 3, fill: '#a6da95', stroke: '#1e2030', strokeWidth: 1 }}
isAnimationActive={false}
/>
<Area
yAxisId="pct"
dataKey="unknownPct"
stackId="ratio"
stroke="#c6a0f6"
strokeWidth={0}
fill={`url(#unknownGrad-${session.sessionId})`}
name="Unknown"
type="monotone"
isAnimationActive={false}
/>
<Area
yAxisId="pct"
dataKey="knownPct"
stackId="ratio"
stroke="#a6da95"
strokeWidth={1.5}
fill={`url(#knownGrad-${session.sessionId})`}
name="Known"
type="monotone"
dot={false}
activeDot={{ r: 3, fill: '#a6da95', stroke: '#1e2030', strokeWidth: 1 }}
isAnimationActive={false}
/>
<Area
yAxisId="pct"
dataKey="unknownPct"
stackId="ratio"
stroke="#c6a0f6"
strokeWidth={0}
fill={`url(#unknownGrad-${session.sessionId})`}
name="Unknown"
type="monotone"
isAnimationActive={false}
/>
</AreaChart>
</ResponsiveContainer>
<SessionEventOverlay
markers={markers}
tsMin={tsMin}
tsMax={tsMax}
activeMarkerKey={activeMarkerKey}
onActiveMarkerChange={onActiveMarkerChange}
plotArea={plotArea}
hoveredMarkerKey={hoveredMarkerKey}
onHoveredMarkerChange={onHoveredMarkerChange}
pinnedMarkerKey={pinnedMarkerKey}
onPinnedMarkerChange={onPinnedMarkerChange}
noteInfos={noteInfos}
loadingNoteIds={loadingNoteIds}
onOpenNote={onOpenNote}
@@ -516,8 +555,10 @@ function FallbackView({
yomitanLookupEvents,
pauseRegions,
markers,
activeMarkerKey,
onActiveMarkerChange,
hoveredMarkerKey,
onHoveredMarkerChange,
pinnedMarkerKey,
onPinnedMarkerChange,
noteInfos,
loadingNoteIds,
onOpenNote,
@@ -533,8 +574,10 @@ function FallbackView({
yomitanLookupEvents: SessionEvent[];
pauseRegions: Array<{ startMs: number; endMs: number }>;
markers: SessionChartMarker[];
activeMarkerKey: string | null;
onActiveMarkerChange: (markerKey: string | null) => void;
hoveredMarkerKey: string | null;
onHoveredMarkerChange: (markerKey: string | null) => void;
pinnedMarkerKey: string | null;
onPinnedMarkerChange: (markerKey: string | null) => void;
noteInfos: Map<number, SessionEventNoteInfo>;
loadingNoteIds: Set<number>;
onOpenNote: (noteId: number) => void;
@@ -544,6 +587,7 @@ function FallbackView({
lookupRate: ReturnType<typeof buildLookupRateDisplay>;
session: SessionSummary;
}) {
const [plotArea, setPlotArea] = useState<SessionChartPlotArea | null>(null);
const chartData: FallbackChartPoint[] = [];
for (const t of sorted) {
const totalWords = getSessionDisplayWordCount(t);
@@ -563,42 +607,57 @@ function FallbackView({
<div className="relative">
<ResponsiveContainer width="100%" height={130}>
<LineChart data={chartData}>
<XAxis
dataKey="tsMs"
type="number"
domain={[tsMin, tsMax]}
tick={{ fontSize: 9, fill: CHART_THEME.tick }}
axisLine={false}
tickLine={false}
tickFormatter={formatTime}
interval="preserveStartEnd"
/>
<YAxis
tick={{ fontSize: 9, fill: CHART_THEME.tick }}
axisLine={false}
tickLine={false}
width={30}
allowDecimals={false}
/>
<Tooltip
contentStyle={tooltipStyle}
labelFormatter={formatTime}
formatter={(value: number) => [`${value.toLocaleString()}`, 'Total tokens']}
/>
{pauseRegions.map((r, i) => (
<ReferenceArea
key={`pause-${i}`}
x1={r.startMs}
x2={r.endMs}
fill="#f5a97f"
fillOpacity={0.15}
stroke="#f5a97f"
strokeOpacity={0.4}
strokeDasharray="3 3"
strokeWidth={1}
<Customized
component={
<SessionChartOffsetProbe
onPlotAreaChange={(nextPlotArea) => {
setPlotArea((prevPlotArea) =>
prevPlotArea &&
prevPlotArea.left === nextPlotArea.left &&
prevPlotArea.width === nextPlotArea.width
? prevPlotArea
: nextPlotArea,
);
}}
/>
}
/>
))}
<XAxis
dataKey="tsMs"
type="number"
domain={[tsMin, tsMax]}
tick={{ fontSize: 9, fill: CHART_THEME.tick }}
axisLine={false}
tickLine={false}
tickFormatter={formatTime}
interval="preserveStartEnd"
/>
<YAxis
tick={{ fontSize: 9, fill: CHART_THEME.tick }}
axisLine={false}
tickLine={false}
width={30}
allowDecimals={false}
/>
<Tooltip
contentStyle={tooltipStyle}
labelFormatter={formatTime}
formatter={(value: number) => [`${value.toLocaleString()}`, 'Total tokens']}
/>
{pauseRegions.map((r, i) => (
<ReferenceArea
key={`pause-${i}`}
x1={r.startMs}
x2={r.endMs}
fill="#f5a97f"
fillOpacity={0.15}
stroke="#f5a97f"
strokeOpacity={0.4}
strokeDasharray="3 3"
strokeWidth={1}
/>
))}
{cardEvents.map((e, i) => (
<ReferenceLine
@@ -634,24 +693,27 @@ function FallbackView({
/>
))}
<Line
dataKey="totalWords"
stroke="#8aadf4"
strokeWidth={1.5}
dot={false}
activeDot={{ r: 3, fill: '#8aadf4', stroke: '#1e2030', strokeWidth: 1 }}
name="Total tokens"
type="monotone"
isAnimationActive={false}
/>
<Line
dataKey="totalWords"
stroke="#8aadf4"
strokeWidth={1.5}
dot={false}
activeDot={{ r: 3, fill: '#8aadf4', stroke: '#1e2030', strokeWidth: 1 }}
name="Total tokens"
type="monotone"
isAnimationActive={false}
/>
</LineChart>
</ResponsiveContainer>
<SessionEventOverlay
markers={markers}
tsMin={tsMin}
tsMax={tsMax}
activeMarkerKey={activeMarkerKey}
onActiveMarkerChange={onActiveMarkerChange}
plotArea={plotArea}
hoveredMarkerKey={hoveredMarkerKey}
onHoveredMarkerChange={onHoveredMarkerChange}
pinnedMarkerKey={pinnedMarkerKey}
onPinnedMarkerChange={onPinnedMarkerChange}
noteInfos={noteInfos}
loadingNoteIds={loadingNoteIds}
onOpenNote={onOpenNote}

219
stats/src/components/sessions/SessionEventOverlay.tsx Normal file
View File

@@ -0,0 +1,219 @@
import { useEffect, useRef, type FocusEvent, type MouseEvent } from 'react';
import {
projectSessionMarkerLeftPx,
resolveActiveSessionMarkerKey,
togglePinnedSessionMarkerKey,
type SessionChartMarker,
type SessionEventNoteInfo,
type SessionChartPlotArea,
} from '../../lib/session-events';
import { SessionEventPopover } from './SessionEventPopover';
interface SessionEventOverlayProps {
markers: SessionChartMarker[];
tsMin: number;
tsMax: number;
plotArea: SessionChartPlotArea | null;
hoveredMarkerKey: string | null;
onHoveredMarkerChange: (markerKey: string | null) => void;
pinnedMarkerKey: string | null;
onPinnedMarkerChange: (markerKey: string | null) => void;
noteInfos: Map<number, SessionEventNoteInfo>;
loadingNoteIds: Set<number>;
onOpenNote: (noteId: number) => void;
}
function toPercent(tsMs: number, tsMin: number, tsMax: number): number {
if (tsMax <= tsMin) return 50;
const ratio = ((tsMs - tsMin) / (tsMax - tsMin)) * 100;
return Math.max(0, Math.min(100, ratio));
}
function markerLabel(marker: SessionChartMarker): string {
switch (marker.kind) {
case 'pause':
return '||';
case 'seek':
return marker.direction === 'backward' ? '<<' : '>>';
case 'card':
return '\u26CF';
}
}
function markerColors(marker: SessionChartMarker): { border: string; bg: string; text: string } {
switch (marker.kind) {
case 'pause':
return { border: '#f5a97f', bg: 'rgba(245,169,127,0.16)', text: '#f5a97f' };
case 'seek':
return marker.direction === 'backward'
? { border: '#f5bde6', bg: 'rgba(245,189,230,0.16)', text: '#f5bde6' }
: { border: '#8bd5ca', bg: 'rgba(139,213,202,0.16)', text: '#8bd5ca' };
case 'card':
return { border: '#a6da95', bg: 'rgba(166,218,149,0.16)', text: '#a6da95' };
}
}
function popupAlignment(percent: number): string {
if (percent <= 15) return 'left-0 translate-x-0';
if (percent >= 85) return 'right-0 translate-x-0';
return 'left-1/2 -translate-x-1/2';
}
function handleWrapperBlur(
event: FocusEvent<HTMLDivElement>,
onHoveredMarkerChange: (markerKey: string | null) => void,
pinnedMarkerKey: string | null,
markerKey: string,
): void {
if (pinnedMarkerKey === markerKey) return;
const nextFocused = event.relatedTarget;
if (nextFocused instanceof Node && event.currentTarget.contains(nextFocused)) {
return;
}
onHoveredMarkerChange(null);
}
function handleWrapperMouseLeave(
event: MouseEvent<HTMLDivElement>,
onHoveredMarkerChange: (markerKey: string | null) => void,
pinnedMarkerKey: string | null,
markerKey: string,
): void {
if (pinnedMarkerKey === markerKey) return;
const nextHovered = event.relatedTarget;
if (nextHovered instanceof Node && event.currentTarget.contains(nextHovered)) {
return;
}
onHoveredMarkerChange(null);
}
export function SessionEventOverlay({
markers,
tsMin,
tsMax,
plotArea,
hoveredMarkerKey,
onHoveredMarkerChange,
pinnedMarkerKey,
onPinnedMarkerChange,
noteInfos,
loadingNoteIds,
onOpenNote,
}: SessionEventOverlayProps) {
if (markers.length === 0) return null;
const rootRef = useRef<HTMLDivElement>(null);
const activeMarkerKey = resolveActiveSessionMarkerKey(hoveredMarkerKey, pinnedMarkerKey);
useEffect(() => {
if (!pinnedMarkerKey) return;
function handleDocumentPointerDown(event: PointerEvent): void {
if (rootRef.current?.contains(event.target as Node)) {
return;
}
onPinnedMarkerChange(null);
onHoveredMarkerChange(null);
}
function handleDocumentKeyDown(event: KeyboardEvent): void {
if (event.key !== 'Escape') return;
onPinnedMarkerChange(null);
onHoveredMarkerChange(null);
}
document.addEventListener('pointerdown', handleDocumentPointerDown);
document.addEventListener('keydown', handleDocumentKeyDown);
return () => {
document.removeEventListener('pointerdown', handleDocumentPointerDown);
document.removeEventListener('keydown', handleDocumentKeyDown);
};
}, [pinnedMarkerKey, onHoveredMarkerChange, onPinnedMarkerChange]);
return (
<div ref={rootRef} className="pointer-events-none absolute inset-0 z-30 overflow-visible">
{markers.map((marker) => {
const percent = toPercent(marker.anchorTsMs, tsMin, tsMax);
const left = plotArea
? `${projectSessionMarkerLeftPx({
anchorTsMs: marker.anchorTsMs,
tsMin,
tsMax,
plotLeftPx: plotArea.left,
plotWidthPx: plotArea.width,
})}px`
: `${percent}%`;
const colors = markerColors(marker);
const isActive = marker.key === activeMarkerKey;
const isPinned = marker.key === pinnedMarkerKey;
const loading =
marker.kind === 'card' && marker.noteIds.some((noteId) => loadingNoteIds.has(noteId));
return (
<div
key={marker.key}
className="pointer-events-auto absolute top-0 -translate-x-1/2 pt-1"
style={{ left }}
onMouseEnter={() => onHoveredMarkerChange(marker.key)}
onMouseLeave={(event) =>
handleWrapperMouseLeave(event, onHoveredMarkerChange, pinnedMarkerKey, marker.key)
}
onFocusCapture={() => onHoveredMarkerChange(marker.key)}
onBlurCapture={(event) =>
handleWrapperBlur(event, onHoveredMarkerChange, pinnedMarkerKey, marker.key)
}
>
<div className="relative flex flex-col items-center">
<button
type="button"
aria-label={`Show ${marker.kind} event details`}
aria-pressed={isPinned}
className="flex h-5 min-w-5 items-center justify-center rounded-full border px-1 text-[10px] font-semibold shadow-sm backdrop-blur-sm"
style={{
borderColor: colors.border,
background: colors.bg,
color: colors.text,
}}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onHoveredMarkerChange(marker.key);
onPinnedMarkerChange(togglePinnedSessionMarkerKey(pinnedMarkerKey, marker.key));
}}
>
{markerLabel(marker)}
</button>
{isActive ? (
<div
className={`pointer-events-auto absolute top-5 z-50 pt-2 ${popupAlignment(percent)}`}
onMouseDownCapture={() => {
if (!isPinned) {
onPinnedMarkerChange(marker.key);
}
}}
>
<SessionEventPopover
marker={marker}
noteInfos={noteInfos}
loading={loading}
pinned={isPinned}
onTogglePinned={() =>
onPinnedMarkerChange(
togglePinnedSessionMarkerKey(pinnedMarkerKey, marker.key),
)
}
onClose={() => {
onPinnedMarkerChange(null);
onHoveredMarkerChange(null);
}}
onOpenNote={onOpenNote}
/>
</div>
) : null}
</div>
</div>
);
})}
</div>
);
}