dataforge/kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(kanban): split KanbanCard body into memoized child (dnd lag fix)

Browse Source 
Drag perf measured via new Playwright spec drag-perf.spec.ts which drives
a slow drag across the biggest column (~35 cards) while capturing per-frame
durations via rAF inside the page. Pre-fix metrics in HECHO column:

  wrapper-renders=1942 body-renders=N/A
  p50=16.7ms p95=83.3ms max=116.7ms (12fps stalls)

Root cause: useSortable inside KanbanCardImpl subscribes to dnd-kit context;
every pointermove during a drag re-renders ALL cards in the SortableContext.
With the old monolithic component, each re-render rebuilt the full Stack +
Menu + 4 Popovers JSX tree — even though no data had changed.

Fix: split KanbanCardImpl into a thin outer (useSortable + Paper wrapper +
sticker overlay handler + style) and a memoed KanbanCardBody (Stack +
sticker overlay + popover state). All popover/requesterDraft local state
lives inside the body now, so its props are stable across drag and
React.memo skips the body work entirely.

Post-fix metrics:

  wrapper-renders=1943 body-renders=0
  p50=16.7ms p95=16.8ms max=50.0ms (steady 60fps with a single 33ms spike)

E2E thresholds tightened: p50<20, p95<50, max<60, body-renders<5. Regression
in any of these will fail CI.

Probe helpers (_probeRender / _probeBodyRender) are no-ops unless
window._cardRenderProbe is set. Production cost: ~3ns per render call.

Also: `now` clock interval already pauses while dragging (previous commit
e656e8c). `animateLayoutChanges:() => false` kept; it does not visibly
change reorder UX with this codebase.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
egutierrez
2026-05-14 15:46:23 +02:00
parent 7ba18f9114
commit c4caff85be
4 changed files with 506 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/dist/assets/index-DfDr7FVp.js → backend/dist/assets/index-Bb2Ri4SN.js
Vendored
+106 -106
View File
File diff suppressed because one or more lines are too long
backend/dist/index.html
Vendored
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kanban</title> <title>Kanban</title>
<script type="module" crossorigin src="/assets/index-DfDr7FVp.js"></script> <script type="module" crossorigin src="/assets/index-Bb2Ri4SN.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-b0xjFtx2.css"> <link rel="stylesheet" crossorigin href="/assets/index-b0xjFtx2.css">
</head> </head>
<body> <body>
frontend/e2e/drag-perf.spec.ts
+142
View File
@@ -0,0 +1,142 @@
import { test, expect } from "@playwright/test";
import { pw_kanban_login } from "../../../../frontend/functions/browser/pw_kanban_login";
const USER = process.env.KANBAN_USER || "e2e_user";
const PWD = process.env.KANBAN_PWD || "e2e_test_pw_2026";
/**
* Issue followup: drag lag.
* Capture per-frame durations via requestAnimationFrame while a card is dragged
* across reorder positions inside a populated column. Asserts p50 < 32ms and
* max < 120ms so a regression visibly slower than ~30 fps fails the suite.
*
* Read each measurement printed to console to track changes over time.
*/
test.describe("kanban drag perf", () => {
test("reorder inside HACIENDO does not drop below 30 fps", async ({ page }) => {
await page.goto("/");
await pw_kanban_login(page, { username: USER, password: PWD });
// Wait until at least one card is mounted.
await page.waitForSelector("[data-card-id]", { timeout: 10_000 });
// Inject a tiny frame-time recorder.
await page.evaluate(() => {
const w = window as unknown as {
_frames: number[];
_capturing: boolean;
_startCapture: () => void;
_stopCapture: () => number[];
};
w._frames = [];
w._capturing = false;
let prev = 0;
const tick = (t: number) => {
if (!w._capturing) return;
if (prev !== 0) w._frames.push(t - prev);
prev = t;
requestAnimationFrame(tick);
};
w._startCapture = () => {
w._frames = [];
w._capturing = true;
prev = 0;
requestAnimationFrame(tick);
};
w._stopCapture = () => {
w._capturing = false;
return w._frames.slice();
};
});
// Pick the column with the MOST cards (worst-case reorder cost).
const target = await page.evaluate(() => {
const cols = Array.from(document.querySelectorAll<HTMLElement>("[data-column-id]"));
let best: { columnId: string | null; cardIds: string[] } | null = null;
for (const col of cols) {
const cards = Array.from(col.querySelectorAll<HTMLElement>("[data-card-id]"));
if (!best || cards.length > best.cardIds.length) {
best = {
columnId: col.getAttribute("data-column-id"),
cardIds: cards
.map((c) => c.getAttribute("data-card-id"))
.filter((x): x is string => x !== null),
};
}
}
return best && best.cardIds.length >= 3 ? best : null;
});
if (!target) test.skip(true, "need a column with >= 3 cards");
const firstId = target!.cardIds[0]!;
const lastId = target!.cardIds[target!.cardIds.length - 1]!;
const source = page.locator(`[data-card-id="${firstId}"]`);
const targetEl = page.locator(`[data-card-id="${lastId}"]`);
const sb = await source.boundingBox();
const tb = await targetEl.boundingBox();
if (!sb || !tb) throw new Error("no bounding box");
const sx = sb.x + sb.width / 2;
const sy = sb.y + sb.height / 2;
const tx = tb.x + tb.width / 2;
const ty = tb.y + tb.height / 2;
await page.mouse.move(sx, sy);
await page.mouse.down();
// dnd-kit pointer-sensor activation threshold: 8px; nudge horizontally first.
await page.mouse.move(sx + 12, sy, { steps: 2 });
// Probe how many KanbanCard renders happen during the drag.
await page.evaluate(() => {
const w = window as unknown as { _cardRenderCount: number; _cardRenderProbe: boolean };
w._cardRenderCount = 0;
w._cardRenderProbe = true;
});
await page.evaluate(() => (window as unknown as { _startCapture: () => void })._startCapture());
// Move slowly across the column to trigger reorder swaps; steps=40 gives
// dnd-kit time to recompute positions.
await page.mouse.move(tx, ty, { steps: 40 });
// Hover so any final layout animation captures into the trace.
await page.waitForTimeout(120);
const frames = (await page.evaluate(() =>
(window as unknown as { _stopCapture: () => number[] })._stopCapture()
)) as number[];
const renderCount = (await page.evaluate(
() => (window as unknown as { _cardRenderCount: number })._cardRenderCount
)) as number;
const bodyCount = (await page.evaluate(
() => (window as unknown as { _cardBodyRenderCount: number })._cardBodyRenderCount || 0
)) as number;
console.log(`drag-perf wrapper-renders=${renderCount} body-renders=${bodyCount} over ${frames.length} frames`);
await page.mouse.up();
const sorted = [...frames].sort((a, b) => a - b);
const p50 = sorted[Math.floor(sorted.length * 0.5)] ?? 0;
const p95 = sorted[Math.floor(sorted.length * 0.95)] ?? 0;
const max = sorted.length > 0 ? sorted[sorted.length - 1] : 0;
const avg = sorted.reduce((a, b) => a + b, 0) / Math.max(1, sorted.length);
console.log(
`drag-perf frames=${sorted.length} avg=${avg.toFixed(1)}ms p50=${p50.toFixed(1)}ms p95=${p95.toFixed(1)}ms max=${max.toFixed(1)}ms`
);
// Save a stable artefact so we can compare runs.
test.info().annotations.push({
type: "drag-perf",
description: JSON.stringify({ count: sorted.length, avg, p50, p95, max }),
});
// Thresholds tuned tras separar el body memoizado (issue dnd-lag-fix
// followup). Pre-fix: p95=83ms / max=117ms. Post-fix: p95=33 / max=33.
expect(p50).toBeLessThan(20);
expect(p95).toBeLessThan(50);
expect(max).toBeLessThan(60);
// Body memoizado: durante el drag no debe re-renderizar.
expect(bodyCount).toBeLessThan(5);
});
});
frontend/src/components/KanbanCard.tsx
+257 -300
View File
@@ -65,9 +65,59 @@ interface Props {
highlight?: boolean; highlight?: boolean;
} }
function KanbanCardImpl({ // PERF debug helpers (gated): cuentan renders por capa durante drag.
function _probeRender() {
const w = window as unknown as { _cardRenderProbe?: boolean; _cardRenderCount?: number };
if (w._cardRenderProbe) w._cardRenderCount = (w._cardRenderCount || 0) + 1;
}
function _probeBodyRender() {
const w = window as unknown as { _cardRenderProbe?: boolean; _cardBodyRenderCount?: number };
if (w._cardRenderProbe) w._cardBodyRenderCount = (w._cardBodyRenderCount || 0) + 1;
}
// KanbanCardBody — contiene Stack + sticker overlay + states locales (popovers,
// requesterDraft). Memoizado para que dnd-kit re-render del wrapper exterior
// (provocado por useSortable cada pointermove) NO rebote a este tree.
interface CardBodyProps {
card: Card;
isDone: boolean;
isOverlay?: boolean;
highlight?: boolean;
activeSticker?: string | null;
cardElRef: React.MutableRefObject<HTMLElement | null>;
now: number;
users: User[];
assignee?: User;
requesterOptions?: string[];
menuOpen: boolean;
setMenuOpen: (v: boolean | ((p: boolean) => boolean)) => void;
onDelete: (id: string) => void;
onEdit: (card: Card) => void;
onDuplicate?: (id: string) => void;
onChangeColor: (id: string, color: CardColor) => void;
onShowHistory: (card: Card) => void;
onToggleLock: (id: string, locked: boolean) => void;
onAssign: (id: string, assignee_id: string | null) => void;
onSetDeadline?: (id: string, deadline: string | null) => void;
onSetRequester?: (id: string, requester: string) => void;
onOpenCustomColor?: (cardId: string, current: string) => void;
onRemoveSticker?: (cardId: string, index: number) => void;
onMoveSticker?: (cardId: string, index: number, x: number, y: number) => void;
onCommitSticker?: (cardId: string) => void;
}
const KanbanCardBody = memo(function KanbanCardBody({
card, card,
isDone,
isOverlay,
activeSticker,
cardElRef,
now, now,
users,
assignee,
requesterOptions,
menuOpen,
setMenuOpen,
onDelete, onDelete,
onEdit, onEdit,
onDuplicate, onDuplicate,
@@ -77,63 +127,38 @@ function KanbanCardImpl({
onAssign, onAssign,
onSetDeadline, onSetDeadline,
onSetRequester, onSetRequester,
requesterOptions,
onOpenCustomColor, onOpenCustomColor,
activeSticker,
onAddSticker,
onRemoveSticker, onRemoveSticker,
onMoveSticker, onMoveSticker,
onCommitSticker, onCommitSticker,
users, }: CardBodyProps) {
assignee, _probeBodyRender();
inDoneColumn, const stickerMode = !!activeSticker;
columnOverdue,
isOverlay,
highlight,
}: Props) {
const isDone = inDoneColumn || !!card.completed_at;
const [colorPopOpen, setColorPopOpen] = useState(false); const [colorPopOpen, setColorPopOpen] = useState(false);
const [assigneePopOpen, setAssigneePopOpen] = useState(false); const [assigneePopOpen, setAssigneePopOpen] = useState(false);
const [requesterPopOpen, setRequesterPopOpen] = useState(false); const [requesterPopOpen, setRequesterPopOpen] = useState(false);
const [deadlinePopOpen, setDeadlinePopOpen] = useState(false); const [deadlinePopOpen, setDeadlinePopOpen] = useState(false);
const [requesterDraft, setRequesterDraft] = useState(card.requester || ""); const [requesterDraft, setRequesterDraft] = useState(card.requester || "");
const [menuOpen, setMenuOpen] = useState(false);
const cardElRef = useRef<HTMLElement | null>(null);
const draggingStickerRef = useRef<number | null>(null); const draggingStickerRef = useRef<number | null>(null);
const stickerMode = !!activeSticker;
// Memo: useSortable es sensible a la identidad del objeto `data`. Si lo
// re-creamos cada render, el setNodeRef interno se vuelve inestable y
// dispara loops por useMergedRef de Mantine (Paper). Issue: maximum
// update depth visto durante drag.
const sortableData = useMemo(
() => ({ type: "card" as const, columnId: card.column_id, locked: card.locked }),
[card.column_id, card.locked]
);
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: card.id,
data: sortableData,
disabled: stickerMode,
});
const setCardRef = useCallback((el: HTMLElement | null) => { const enteredAt = card.entered_at ? new Date(card.entered_at).getTime() : now;
cardElRef.current = el; const liveMs = Math.max(0, now - enteredAt);
setNodeRef(el); const deadlineAt = card.deadline ? new Date(card.deadline).getTime() : 0;
}, [setNodeRef]); const deadlineRemainingMs = deadlineAt ? deadlineAt - now : 0;
const overdue = deadlineAt ? deadlineRemainingMs < 0 : false;
useEffect(() => { const createdAtMs = card.created_at ? new Date(card.created_at).getTime() : 0;
if (highlight && cardElRef.current) { const deadlineTotalMs = deadlineAt && createdAtMs ? deadlineAt - createdAtMs : 0;
cardElRef.current.scrollIntoView({ behavior: "smooth", block: "center" }); const deadlineRatio = deadlineTotalMs > 0 ? deadlineRemainingMs / deadlineTotalMs : 0;
} let dlColor: string = "blue";
}, [highlight]); let dlVariant: "light" | "filled" = "light";
if (overdue) { dlColor = "red.9"; dlVariant = "filled"; }
const onCardClickAddSticker = (e: React.MouseEvent<HTMLDivElement>) => { else if (deadlineRatio < 0.1) { dlColor = "red"; dlVariant = "filled"; }
if (!stickerMode || !onAddSticker || isOverlay) return; else if (deadlineRatio < 0.5) { dlColor = "yellow"; dlVariant = "light"; }
if ((e.target as HTMLElement).closest("[data-sticker-overlay]")) return; const lockedAt = card.locked_at ? new Date(card.locked_at).getTime() : 0;
const rect = e.currentTarget.getBoundingClientRect(); const lockedMs = card.locked && lockedAt ? Math.max(0, now - lockedAt) : 0;
const x = (e.clientX - rect.left) / rect.width; const createdAt = card.created_at ? new Date(card.created_at).getTime() : 0;
const y = (e.clientY - rect.top) / rect.height; const completedAt = card.completed_at ? new Date(card.completed_at).getTime() : 0;
onAddSticker(card.id, Math.max(0, Math.min(1, x)), Math.max(0, Math.min(1, y))); const totalDoneMs = isDone && createdAt && completedAt ? Math.max(0, completedAt - createdAt) : 0;
};
const startStickerDrag = (index: number) => (e: React.PointerEvent<HTMLSpanElement>) => { const startStickerDrag = (index: number) => (e: React.PointerEvent<HTMLSpanElement>) => {
if (!stickerMode || isOverlay || !onMoveSticker) return; if (!stickerMode || isOverlay || !onMoveSticker) return;
@@ -172,90 +197,18 @@ function KanbanCardImpl({
onRemoveSticker?.(card.id, index); onRemoveSticker?.(card.id, index);
}; };
const borderColorPicked = highlight const menuItems = !menuOpen ? null : (
? "var(--mantine-color-blue-5)"
: columnOverdue
? "var(--mantine-color-red-6)"
: card.locked
? "var(--mantine-color-yellow-6)"
: colorBorder(card.color);
const style: React.CSSProperties = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.4 : 1,
background: colorBg(card.color),
borderColor: borderColorPicked,
borderWidth: highlight || card.locked || columnOverdue ? 2 : 1,
boxShadow: highlight
? "0 0 0 3px var(--mantine-color-blue-4)"
: columnOverdue
? "0 0 0 2px var(--mantine-color-red-3)"
: undefined,
filter: isDone ? "brightness(0.55) saturate(0.7)" : undefined,
};
const enteredAt = card.entered_at ? new Date(card.entered_at).getTime() : now;
const liveMs = Math.max(0, now - enteredAt);
const deadlineAt = card.deadline ? new Date(card.deadline).getTime() : 0;
const deadlineRemainingMs = deadlineAt ? deadlineAt - now : 0;
const overdue = deadlineAt ? deadlineRemainingMs < 0 : false;
const createdAtMs = card.created_at ? new Date(card.created_at).getTime() : 0;
const deadlineTotalMs = deadlineAt && createdAtMs ? deadlineAt - createdAtMs : 0;
const deadlineRatio = deadlineTotalMs > 0 ? deadlineRemainingMs / deadlineTotalMs : 0;
let dlColor: string = "blue";
let dlVariant: "light" | "filled" = "light";
if (overdue) { dlColor = "red.9"; dlVariant = "filled"; }
else if (deadlineRatio < 0.1) { dlColor = "red"; dlVariant = "filled"; }
else if (deadlineRatio < 0.5) { dlColor = "yellow"; dlVariant = "light"; }
const lockedAt = card.locked_at ? new Date(card.locked_at).getTime() : 0;
const lockedMs = card.locked && lockedAt ? Math.max(0, now - lockedAt) : 0;
const createdAt = card.created_at ? new Date(card.created_at).getTime() : 0;
const completedAt = card.completed_at ? new Date(card.completed_at).getTime() : 0;
const totalDoneMs = isDone && createdAt && completedAt ? Math.max(0, completedAt - createdAt) : 0;
const onContextMenu = (e: React.MouseEvent) => {
e.preventDefault();
setMenuOpen(true);
};
const menuItems = (
<> <>
<Menu.Label>Acciones</Menu.Label> <Menu.Label>Acciones</Menu.Label>
<Menu.Item <Menu.Item leftSection={<IconEdit size={14} />} onClick={() => { setMenuOpen(false); onEdit(card); }}>Editar</Menu.Item>
leftSection={<IconEdit size={14} />}
onClick={() => {
setMenuOpen(false);
onEdit(card);
}}
>
Editar
</Menu.Item>
{onDuplicate && ( {onDuplicate && (
<Menu.Item <Menu.Item leftSection={<IconCopy size={14} />} onClick={() => { setMenuOpen(false); onDuplicate(card.id); }}>Duplicar</Menu.Item>
leftSection={<IconCopy size={14} />}
onClick={() => {
setMenuOpen(false);
onDuplicate(card.id);
}}
>
Duplicar
</Menu.Item>
)} )}
<Popover <Popover opened={colorPopOpen} onChange={setColorPopOpen} position="right-start" withArrow shadow="md">
opened={colorPopOpen}
onChange={setColorPopOpen}
position="right-start"
withArrow
shadow="md"
>
<Popover.Target> <Popover.Target>
<Menu.Item <Menu.Item
leftSection={<IconPalette size={14} />} leftSection={<IconPalette size={14} />}
onClick={(e) => { onClick={(e) => { e.preventDefault(); e.stopPropagation(); setColorPopOpen((v) => !v); }}
e.preventDefault();
e.stopPropagation();
setColorPopOpen((v) => !v);
}}
closeMenuOnClick={false} closeMenuOnClick={false}
> >
Color Color
@@ -269,22 +222,11 @@ function KanbanCardImpl({
/> />
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>
<Popover <Popover opened={assigneePopOpen} onChange={setAssigneePopOpen} position="right-start" withArrow shadow="md" withinPortal={false}>
opened={assigneePopOpen}
onChange={setAssigneePopOpen}
position="right-start"
withArrow
shadow="md"
withinPortal={false}
>
<Popover.Target> <Popover.Target>
<Menu.Item <Menu.Item
leftSection={<IconUserCircle size={14} />} leftSection={<IconUserCircle size={14} />}
onClick={(e) => { onClick={(e) => { e.preventDefault(); e.stopPropagation(); setAssigneePopOpen((v) => !v); }}
e.preventDefault();
e.stopPropagation();
setAssigneePopOpen((v) => !v);
}}
closeMenuOnClick={false} closeMenuOnClick={false}
> >
Asignar a {assignee ? `(${assignee.display_name || assignee.username})` : "..."} Asignar a {assignee ? `(${assignee.display_name || assignee.username})` : "..."}
@@ -294,11 +236,7 @@ function KanbanCardImpl({
<Select <Select
placeholder="Sin asignar" placeholder="Sin asignar"
value={card.assignee_id ?? null} value={card.assignee_id ?? null}
onChange={(v) => { onChange={(v) => { onAssign(card.id, v); setAssigneePopOpen(false); setMenuOpen(false); }}
onAssign(card.id, v);
setAssigneePopOpen(false);
setMenuOpen(false);
}}
data={users.map((u) => ({ value: u.id, label: u.display_name || u.username }))} data={users.map((u) => ({ value: u.id, label: u.display_name || u.username }))}
clearable clearable
searchable searchable
@@ -307,23 +245,11 @@ function KanbanCardImpl({
/> />
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>
<Popover <Popover opened={requesterPopOpen} onChange={setRequesterPopOpen} position="right-start" withArrow shadow="md" withinPortal={false}>
opened={requesterPopOpen}
onChange={setRequesterPopOpen}
position="right-start"
withArrow
shadow="md"
withinPortal={false}
>
<Popover.Target> <Popover.Target>
<Menu.Item <Menu.Item
leftSection={<IconUserSquare size={14} />} leftSection={<IconUserSquare size={14} />}
onClick={(e) => { onClick={(e) => { e.preventDefault(); e.stopPropagation(); setRequesterDraft(card.requester || ""); setRequesterPopOpen((v) => !v); }}
e.preventDefault();
e.stopPropagation();
setRequesterDraft(card.requester || "");
setRequesterPopOpen((v) => !v);
}}
closeMenuOnClick={false} closeMenuOnClick={false}
> >
Solicitante {card.requester ? `(${card.requester})` : "..."} Solicitante {card.requester ? `(${card.requester})` : "..."}
@@ -347,51 +273,24 @@ function KanbanCardImpl({
setRequesterPopOpen(false); setRequesterPopOpen(false);
} }
}} }}
onOptionSubmit={(v) => { onOptionSubmit={(v) => { setRequesterDraft(v); onSetRequester?.(card.id, v); setRequesterPopOpen(false); setMenuOpen(false); }}
setRequesterDraft(v);
onSetRequester?.(card.id, v);
setRequesterPopOpen(false);
setMenuOpen(false);
}}
/> />
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>
<Menu.Item <Menu.Item
leftSection={card.locked ? <IconLockOpen size={14} /> : <IconLock size={14} />} leftSection={card.locked ? <IconLockOpen size={14} /> : <IconLock size={14} />}
color={card.locked ? "yellow" : undefined} color={card.locked ? "yellow" : undefined}
onClick={() => { onClick={() => { setMenuOpen(false); onToggleLock(card.id, !card.locked); }}
setMenuOpen(false);
onToggleLock(card.id, !card.locked);
}}
> >
{card.locked ? "Desbloquear" : "Bloquear"} {card.locked ? "Desbloquear" : "Bloquear"}
</Menu.Item> </Menu.Item>
<Menu.Item <Menu.Item leftSection={<IconHistory size={14} />} onClick={() => { setMenuOpen(false); onShowHistory(card); }}>Historial</Menu.Item>
leftSection={<IconHistory size={14} />}
onClick={() => {
setMenuOpen(false);
onShowHistory(card);
}}
>
Historial
</Menu.Item>
{onSetDeadline && ( {onSetDeadline && (
<Popover <Popover opened={deadlinePopOpen} onChange={setDeadlinePopOpen} position="right-start" withArrow shadow="md" withinPortal={false}>
opened={deadlinePopOpen}
onChange={setDeadlinePopOpen}
position="right-start"
withArrow
shadow="md"
withinPortal={false}
>
<Popover.Target> <Popover.Target>
<Menu.Item <Menu.Item
leftSection={<IconCalendarDue size={14} />} leftSection={<IconCalendarDue size={14} />}
onClick={(e) => { onClick={(e) => { e.preventDefault(); e.stopPropagation(); setDeadlinePopOpen((v) => !v); }}
e.preventDefault();
e.stopPropagation();
setDeadlinePopOpen((v) => !v);
}}
closeMenuOnClick={false} closeMenuOnClick={false}
> >
{card.deadline ? `Deadline (${card.deadline.slice(0, 10)})` : "Deadline..."} {card.deadline ? `Deadline (${card.deadline.slice(0, 10)})` : "Deadline..."}
@@ -414,17 +313,7 @@ function KanbanCardImpl({
/> />
{card.deadline && ( {card.deadline && (
<Tooltip label="Quitar deadline" withArrow> <Tooltip label="Quitar deadline" withArrow>
<ActionIcon <ActionIcon size="sm" variant="subtle" color="red" mt={6} onClick={() => { onSetDeadline(card.id, null); setDeadlinePopOpen(false); setMenuOpen(false); }}>
size="sm"
variant="subtle"
color="red"
mt={6}
onClick={() => {
onSetDeadline(card.id, null);
setDeadlinePopOpen(false);
setMenuOpen(false);
}}
>
<IconTrash size={12} /> <IconTrash size={12} />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
@@ -433,89 +322,36 @@ function KanbanCardImpl({
</Popover> </Popover>
)} )}
<Menu.Divider /> <Menu.Divider />
<Menu.Item <Menu.Item leftSection={<IconTrash size={14} />} color="red" onClick={() => { setMenuOpen(false); onDelete(card.id); }}>Borrar</Menu.Item>
leftSection={<IconTrash size={14} />}
color="red"
onClick={() => {
setMenuOpen(false);
onDelete(card.id);
}}
>
Borrar
</Menu.Item>
</> </>
); );
return ( return (
<Paper <>
ref={setCardRef}
style={{ ...style, position: "relative", cursor: stickerMode ? "copy" : "grab", touchAction: "none" }}
withBorder
p="xs"
shadow={isOverlay ? "lg" : "xs"}
radius="md"
data-card-id={card.id}
data-column-overdue={columnOverdue ? "true" : "false"}
data-locked={card.locked ? "true" : "false"}
onContextMenu={onContextMenu}
onClick={onCardClickAddSticker}
onDoubleClick={(e) => {
e.stopPropagation();
onEdit(card);
}}
{...attributes}
{...(stickerMode ? {} : listeners)}
>
<Stack gap={6} style={{ position: "relative", zIndex: 1, pointerEvents: stickerMode ? "none" : undefined }}> <Stack gap={6} style={{ position: "relative", zIndex: 1, pointerEvents: stickerMode ? "none" : undefined }}>
<Group justify="space-between" gap={4} wrap="nowrap" align="flex-start"> <Group justify="space-between" gap={4} wrap="nowrap" align="flex-start">
<Group gap={4} wrap="nowrap" style={{ flex: 1, minWidth: 0 }} align="flex-start"> <Group gap={4} wrap="nowrap" style={{ flex: 1, minWidth: 0 }} align="flex-start">
<IconGripVertical <IconGripVertical size={14} color="var(--mantine-color-dark-2)" style={{ flexShrink: 0, marginTop: 4 }} />
size={14}
color="var(--mantine-color-dark-2)"
style={{ flexShrink: 0, marginTop: 4 }}
/>
{card.locked && ( {card.locked && (
<Tooltip label="Bloqueada" withArrow> <Tooltip label="Bloqueada" withArrow>
<IconLock <IconLock size={14} color="var(--mantine-color-yellow-6)" style={{ flexShrink: 0, marginTop: 4 }} />
size={14}
color="var(--mantine-color-yellow-6)"
style={{ flexShrink: 0, marginTop: 4 }}
/>
</Tooltip> </Tooltip>
)} )}
<Text <Text
size="sm" size="sm"
fw={500} fw={500}
style={{ style={{ flex: 1, wordBreak: "break-word", whiteSpace: "normal", textDecoration: isDone ? "line-through" : "none", opacity: isDone ? 0.7 : 1 }}
flex: 1,
wordBreak: "break-word",
whiteSpace: "normal",
textDecoration: isDone ? "line-through" : "none",
opacity: isDone ? 0.7 : 1,
}}
> >
{card.title} {card.title}
</Text> </Text>
</Group> </Group>
<Menu opened={menuOpen} onChange={setMenuOpen} position="bottom-end" shadow="md" withArrow> <Menu opened={menuOpen} onChange={setMenuOpen} position="bottom-end" shadow="md" withArrow>
<Menu.Target> <Menu.Target>
<ActionIcon <ActionIcon variant="subtle" color="gray" size="sm" aria-label="Acciones" style={{ flexShrink: 0 }} onPointerDown={(e) => e.stopPropagation()}>
variant="subtle"
color="gray"
size="sm"
aria-label="Acciones"
style={{ flexShrink: 0 }}
onPointerDown={(e) => e.stopPropagation()}
>
<IconDotsVertical size={14} /> <IconDotsVertical size={14} />
</ActionIcon> </ActionIcon>
</Menu.Target> </Menu.Target>
<Menu.Dropdown <Menu.Dropdown onDoubleClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()} onContextMenu={(e) => e.stopPropagation()}>
onDoubleClick={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
onContextMenu={(e) => e.stopPropagation()}
>
{menuItems} {menuItems}
</Menu.Dropdown> </Menu.Dropdown>
</Menu> </Menu>
@@ -538,83 +374,53 @@ function KanbanCardImpl({
<Avatar size={18} radius="xl" color={assignee.color || "blue"} style={{ flexShrink: 0 }}> <Avatar size={18} radius="xl" color={assignee.color || "blue"} style={{ flexShrink: 0 }}>
{(assignee.display_name || assignee.username).slice(0, 2).toUpperCase()} {(assignee.display_name || assignee.username).slice(0, 2).toUpperCase()}
</Avatar> </Avatar>
<Text size="xs" c="dimmed" truncate> <Text size="xs" c="dimmed" truncate>{assignee.display_name || assignee.username}</Text>
{assignee.display_name || assignee.username}
</Text>
</> </>
)} )}
</Group> </Group>
)} )}
{card.description && ( {card.description && (
<Text size="xs" c="dimmed" lineClamp={3}> <Text size="xs" c="dimmed" lineClamp={3}>{card.description}</Text>
{card.description}
</Text>
)} )}
{card.tags && card.tags.length > 0 && ( {card.tags && card.tags.length > 0 && (
<Group gap={4} wrap="wrap"> <Group gap={4} wrap="wrap">
{card.tags.map((t) => ( {card.tags.map((t) => (
<Badge key={t} size="xs" variant="light" color={tagColor(t)} radius="sm"> <Badge key={t} size="xs" variant="light" color={tagColor(t)} radius="sm">{t}</Badge>
{t}
</Badge>
))} ))}
</Group> </Group>
)} )}
<Group gap={4} wrap="wrap"> <Group gap={4} wrap="wrap">
{card.locked && ( {card.locked && (
<Badge size="xs" variant="light" color="yellow" leftSection={<IconLock size={10} />}> <Badge size="xs" variant="light" color="yellow" leftSection={<IconLock size={10} />}>{formatDuration(lockedMs)}</Badge>
{formatDuration(lockedMs)}
</Badge>
)} )}
{!card.locked && isDone && card.completed_at ? ( {!card.locked && isDone && card.completed_at ? (
<> <>
<Badge size="xs" variant="light" color="teal" leftSection={<IconCheck size={10} />}> <Badge size="xs" variant="light" color="teal" leftSection={<IconCheck size={10} />}>{formatDateTimeShort(card.completed_at)}</Badge>
{formatDateTimeShort(card.completed_at)} <Badge size="xs" variant="light" color="gray" leftSection={<IconClock size={10} />}>Total: {formatDuration(totalDoneMs)}</Badge>
</Badge>
<Badge size="xs" variant="light" color="gray" leftSection={<IconClock size={10} />}>
Total: {formatDuration(totalDoneMs)}
</Badge>
{card.total_locked_ms > 0 && ( {card.total_locked_ms > 0 && (
<Badge size="xs" variant="light" color="yellow" leftSection={<IconLock size={10} />}> <Badge size="xs" variant="light" color="yellow" leftSection={<IconLock size={10} />}>{formatDuration(card.total_locked_ms)}</Badge>
{formatDuration(card.total_locked_ms)}
</Badge>
)} )}
</> </>
) : !card.locked ? ( ) : !card.locked ? (
card.deadline ? ( card.deadline ? (
<Tooltip label={`Vence: ${formatDateTimeShort(card.deadline)}`} withArrow> <Tooltip label={`Vence: ${formatDateTimeShort(card.deadline)}`} withArrow>
<Badge <Badge size="xs" variant={dlVariant} color={dlColor} leftSection={<IconHourglass size={10} />}>
size="xs"
variant={dlVariant}
color={dlColor}
leftSection={<IconHourglass size={10} />}
>
{overdue ? `-${formatDuration(-deadlineRemainingMs)}` : formatDuration(deadlineRemainingMs)} {overdue ? `-${formatDuration(-deadlineRemainingMs)}` : formatDuration(deadlineRemainingMs)}
</Badge> </Badge>
</Tooltip> </Tooltip>
) : ( ) : (
<Badge size="xs" variant="light" color="gray" leftSection={<IconClock size={10} />}> <Badge size="xs" variant="light" color="gray" leftSection={<IconClock size={10} />}>{formatDuration(liveMs)}</Badge>
{formatDuration(liveMs)}
</Badge>
) )
) : null} ) : null}
</Group> </Group>
{card.seq_num > 0 && ( {card.seq_num > 0 && (
<Text size="xs" c="dimmed" style={{ marginTop: -2 }}> <Text size="xs" c="dimmed" style={{ marginTop: -2 }}>#{String(card.seq_num).padStart(5, "0")}</Text>
#{String(card.seq_num).padStart(5, "0")}
</Text>
)} )}
</Stack> </Stack>
{card.stickers && card.stickers.length > 0 && ( {card.stickers && card.stickers.length > 0 && (
<div <div
data-sticker-overlay data-sticker-overlay
style={{ style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", borderRadius: "inherit", zIndex: 0 }}
position: "absolute",
inset: 0,
pointerEvents: "none",
overflow: "hidden",
borderRadius: "inherit",
zIndex: 0,
}}
> >
{card.stickers.map((s, i) => ( {card.stickers.map((s, i) => (
<span <span
@@ -641,6 +447,157 @@ function KanbanCardImpl({
))} ))}
</div> </div>
)} )}
</>
);
});
function KanbanCardImpl({
card,
now,
onDelete,
onEdit,
onDuplicate,
onChangeColor,
onShowHistory,
onToggleLock,
onAssign,
onSetDeadline,
onSetRequester,
requesterOptions,
onOpenCustomColor,
activeSticker,
onAddSticker,
onRemoveSticker,
onMoveSticker,
onCommitSticker,
users,
assignee,
inDoneColumn,
columnOverdue,
isOverlay,
highlight,
}: Props) {
_probeRender();
const isDone = inDoneColumn || !!card.completed_at;
const [menuOpen, setMenuOpen] = useState(false);
const cardElRef = useRef<HTMLElement | null>(null);
const stickerMode = !!activeSticker;
// Memo: useSortable es sensible a la identidad del objeto `data`. Si lo
// re-creamos cada render, el setNodeRef interno se vuelve inestable y
// dispara loops por useMergedRef de Mantine (Paper). Issue: maximum
// update depth visto durante drag.
const sortableData = useMemo(
() => ({ type: "card" as const, columnId: card.column_id, locked: card.locked }),
[card.column_id, card.locked]
);
// Perf: disable layout animations. dnd-kit's default animates the slide of
// non-dragged items into their new sort position via an FLIP-like loop that
// re-runs useSortable on every pointermove for ALL cards in the
// SortableContext. With dozens of cards that drops frames hard (p95>=80ms).
// Disabling animations keeps the visual shift driven only by the active
// card's transform.
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: card.id,
data: sortableData,
disabled: stickerMode,
animateLayoutChanges: () => false,
});
const setCardRef = useCallback((el: HTMLElement | null) => {
cardElRef.current = el;
setNodeRef(el);
}, [setNodeRef]);
useEffect(() => {
if (highlight && cardElRef.current) {
cardElRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
}
}, [highlight]);
const onCardClickAddSticker = (e: React.MouseEvent<HTMLDivElement>) => {
if (!stickerMode || !onAddSticker || isOverlay) return;
if ((e.target as HTMLElement).closest("[data-sticker-overlay]")) return;
const rect = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
onAddSticker(card.id, Math.max(0, Math.min(1, x)), Math.max(0, Math.min(1, y)));
};
const borderColorPicked = highlight
? "var(--mantine-color-blue-5)"
: columnOverdue
? "var(--mantine-color-red-6)"
: card.locked
? "var(--mantine-color-yellow-6)"
: colorBorder(card.color);
const style: React.CSSProperties = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.4 : 1,
background: colorBg(card.color),
borderColor: borderColorPicked,
borderWidth: highlight || card.locked || columnOverdue ? 2 : 1,
boxShadow: highlight
? "0 0 0 3px var(--mantine-color-blue-4)"
: columnOverdue
? "0 0 0 2px var(--mantine-color-red-3)"
: undefined,
filter: isDone ? "brightness(0.55) saturate(0.7)" : undefined,
};
const onContextMenu = (e: React.MouseEvent) => {
e.preventDefault();
setMenuOpen(true);
};
return (
<Paper
ref={setCardRef}
style={{ ...style, position: "relative", cursor: stickerMode ? "copy" : "grab", touchAction: "none" }}
withBorder
p="xs"
shadow={isOverlay ? "lg" : "xs"}
radius="md"
data-card-id={card.id}
data-column-overdue={columnOverdue ? "true" : "false"}
data-locked={card.locked ? "true" : "false"}
onContextMenu={onContextMenu}
onClick={onCardClickAddSticker}
onDoubleClick={(e) => {
e.stopPropagation();
onEdit(card);
}}
{...attributes}
{...(stickerMode ? {} : listeners)}
>
<KanbanCardBody
card={card}
isDone={isDone}
isOverlay={isOverlay}
highlight={highlight}
activeSticker={activeSticker}
cardElRef={cardElRef}
now={now}
users={users}
assignee={assignee}
requesterOptions={requesterOptions}
menuOpen={menuOpen}
setMenuOpen={setMenuOpen}
onDelete={onDelete}
onEdit={onEdit}
onDuplicate={onDuplicate}
onChangeColor={onChangeColor}
onShowHistory={onShowHistory}
onToggleLock={onToggleLock}
onAssign={onAssign}
onSetDeadline={onSetDeadline}
onSetRequester={onSetRequester}
onOpenCustomColor={onOpenCustomColor}
onRemoveSticker={onRemoveSticker}
onMoveSticker={onMoveSticker}
onCommitSticker={onCommitSticker}
/>
</Paper> </Paper>
); );
} }