improve the timeline design

Author: tcouper

apps/learner-ux/src/App.js

@@ -143,11 +143,42 @@ function UserCredentialsTimelinePage() {
             return b.eventTime.localeCompare(a.eventTime);
         });
     }, [selectedCredentialIds, credentialDetailsById]);
-    return (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold", children: "Credential Timeline" }), _jsxs("p", { className: "text-sm text-slate-600", children: ["User: ", userId || "unknown"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Link, { to: "/users", className: "text-sm text-blue-700 underline", children: "Back to users" }), _jsx(Button, { onClick: loadTimeline, disabled: loading, children: loading ? "Loading..." : "Refresh" })] })] }), error && _jsx("p", { className: "mb-3 text-sm text-red-700", children: error }), !loading && !error && payload?.caliperCredentials.length === 0 && (_jsx("p", { className: "text-sm text-slate-600", children: "No credentials found for this user." })), payload?.caliperCredentials.length ? (_jsxs("div", { className: "grid gap-4 lg:grid-cols-[1fr_1.4fr]", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "Snapshots" }), _jsx("p", { className: "text-xs text-slate-600", children: "Select zero, one, or multiple snapshots." }), payload.caliperCredentials.map((credential) => (_jsxs("div", { className: "flex cursor-pointer items-start gap-3 rounded border border-slate-200 bg-white p-3 hover:bg-slate-50", children: [_jsx("input", { type: "checkbox", className: "mt-1", "aria-label": `Select snapshot ${credential.credentialId}`, checked: selectedCredentialIds.includes(credential.credentialId), onChange: (event) => toggleCredentialSelection(credential.credentialId, event.target.checked) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: credential.credentialId }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Issued: ", formatTimestamp(credential.issuedAt)] }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Issuer: ", credential.issuerId] }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Events: ", credential.eventCount] })] })] }, credential.credentialId)))] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "Event Timeline" }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Selected snapshots: ", selectedCredentialIds.length, " | Events: ", mergedEvents.length] }), detailsError && _jsx("p", { className: "text-sm text-red-700", children: detailsError }), detailsLoading && _jsx("p", { className: "text-sm text-slate-600", children: "Loading selected snapshot events..." }), selectedCredentialIds.length === 0 && (_jsx("p", { className: "rounded border border-dashed border-slate-300 p-3 text-sm text-slate-600", children: "Select one or more snapshots to render the timeline." })), selectedCredentialIds.length > 0 && !detailsLoading && mergedEvents.length === 0 && (_jsx("p", { className: "rounded border border-dashed border-slate-300 p-3 text-sm text-slate-600", children: "No events were found in the selected snapshots." })), mergedEvents.length > 0 && (_jsx("div", { className: "space-y-0", children: mergedEvents.map((timelineEvent, index) => (_jsx(EventTimelineItem, { event: timelineEvent, isLast: index === mergedEvents.length - 1 }, timelineEvent.eventKey))) }))] })] })) : null] }) }));
+    const groupedEvents = useMemo(() => groupEventsBySecond(mergedEvents), [mergedEvents]);
+    const credentialColorsById = useMemo(() => {
+        const map = {};
+        selectedCredentialIds.forEach((credentialId, index) => {
+            map[credentialId] = pickCredentialColor(index);
+        });
+        return map;
+    }, [selectedCredentialIds]);
+    return (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold", children: "Credential Timeline" }), _jsxs("p", { className: "text-sm text-slate-600", children: ["User: ", userId || "unknown"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Link, { to: "/users", className: "text-sm text-blue-700 underline", children: "Back to users" }), _jsx(Button, { onClick: loadTimeline, disabled: loading, children: loading ? "Loading..." : "Refresh" })] })] }), error && _jsx("p", { className: "mb-3 text-sm text-red-700", children: error }), !loading && !error && payload?.caliperCredentials.length === 0 && (_jsx("p", { className: "text-sm text-slate-600", children: "No credentials found for this user." })), payload?.caliperCredentials.length ? (_jsxs("div", { className: "grid gap-4 lg:grid-cols-[1fr_1.4fr]", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "Snapshots" }), _jsx("p", { className: "text-xs text-slate-600", children: "Select zero, one, or multiple snapshots." }), payload.caliperCredentials.map((credential) => ((() => {
+                                    const selected = selectedCredentialIds.includes(credential.credentialId);
+                                    const color = credentialColorsById[credential.credentialId];
+                                    return (_jsxs("div", { className: "flex cursor-pointer items-start gap-3 rounded border border-slate-200 bg-white p-3 hover:bg-slate-50", style: selected && color ? {
+                                            borderLeftWidth: 6,
+                                            borderLeftColor: color.border,
+                                            backgroundColor: color.bg
+                                        } : undefined, children: [_jsx("input", { type: "checkbox", className: "mt-1", "aria-label": `Select snapshot ${credential.credentialId}`, checked: selected, onChange: (event) => toggleCredentialSelection(credential.credentialId, event.target.checked) }), _jsxs("div", { children: [_jsxs("p", { className: "font-medium", children: [credential.credentialId, selected && color && (_jsx("span", { className: "ml-2 inline-block h-2.5 w-2.5 rounded-full align-middle", style: { backgroundColor: color.chip }, "aria-hidden": true }))] }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Issued: ", formatTimestamp(credential.issuedAt)] }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Issuer: ", credential.issuerId] }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Events: ", credential.eventCount] })] })] }, credential.credentialId));
+                                })()))] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "Event Timeline" }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Selected snapshots: ", selectedCredentialIds.length, " | Events: ", mergedEvents.length] }), detailsError && _jsx("p", { className: "text-sm text-red-700", children: detailsError }), detailsLoading && _jsx("p", { className: "text-sm text-slate-600", children: "Loading selected snapshot events..." }), selectedCredentialIds.length === 0 && (_jsx("p", { className: "rounded border border-dashed border-slate-300 p-3 text-sm text-slate-600", children: "Select one or more snapshots to render the timeline." })), selectedCredentialIds.length > 0 && !detailsLoading && mergedEvents.length === 0 && (_jsx("p", { className: "rounded border border-dashed border-slate-300 p-3 text-sm text-slate-600", children: "No events were found in the selected snapshots." })), groupedEvents.length > 0 && (_jsx("div", { className: "space-y-0", children: groupedEvents.map((group, index) => (_jsx(TimelineSecondGroup, { group: group, isLast: index === groupedEvents.length - 1, credentialColorsById: credentialColorsById }, group.minuteKey))) }))] })] })) : null] }) }));
 }
-function EventTimelineItem(props) {
-    const { event, isLast } = props;
-    return (_jsxs("div", { className: "relative pl-8", children: [!isLast && _jsx("span", { className: "absolute left-[11px] top-6 h-[calc(100%-8px)] w-px bg-slate-300", "aria-hidden": true }), _jsx("span", { className: "absolute left-2 top-3 h-2 w-2 rounded-full bg-blue-600", "aria-hidden": true }), _jsxs("div", { className: "mb-4 rounded border border-slate-200 bg-slate-50 p-3", children: [_jsxs("p", { className: "font-medium", children: [event.actorLabel, " ", event.actionLabel, " ", event.objectLabel] }), _jsxs("p", { className: "text-xs text-slate-600", children: ["When: ", formatTimestamp(event.eventTime)] }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Category: ", toDisplayEventType(event.eventType), " | Snapshot: ", toDisplayRef(event.credentialId)] })] })] }));
+const CREDENTIAL_COLORS = [
+    { border: "#7c9cf5", bg: "#f5f7ff", chip: "#dbe5ff" },
+    { border: "#5aa4b1", bg: "#f2fbfd", chip: "#d3eff4" },
+    { border: "#a786d9", bg: "#faf6ff", chip: "#eadcfb" },
+    { border: "#69a86f", bg: "#f3fbf4", chip: "#d9f1dc" },
+    { border: "#c58b5c", bg: "#fdf7f2", chip: "#f4e1d2" },
+    { border: "#c67a9b", bg: "#fef5f9", chip: "#f8d8e6" }
+];
+function TimelineSecondGroup(props) {
+    const { group, isLast, credentialColorsById } = props;
+    return (_jsxs("div", { className: "relative pb-2 pl-8", children: [!isLast && _jsx("span", { className: "absolute left-[11px] top-7 h-[calc(100%-6px)] w-px bg-slate-300", "aria-hidden": true }), _jsx("span", { className: "absolute left-2 top-4 h-2 w-2 rounded-full bg-blue-600", "aria-hidden": true }), _jsx("p", { className: "mb-2 pt-1 text-xs font-semibold text-slate-700", children: formatTimestampToSecond(group.minuteKey) }), _jsx("div", { className: "space-y-2 pb-2", children: group.events.map((event) => {
+                    const color = credentialColorsById[event.credentialId];
+                    return (_jsxs("div", { className: "rounded border border-slate-200 p-3", style: color ? {
+                            borderLeftWidth: 6,
+                            borderLeftColor: color.border,
+                            backgroundColor: color.bg
+                        } : undefined, children: [_jsxs("p", { className: "font-medium", children: [event.actorLabel, " ", event.actionLabel, " ", event.objectLabel] }), _jsxs("p", { className: "text-xs text-slate-600", children: ["Category: ", toDisplayEventType(event.eventType), " | Snapshot: ", toDisplayRef(event.credentialId)] })] }, event.eventKey));
+                }) })] }));
 }
 function extractCredentialEvents(detail) {
     const payload = detail.rawPayload;
@@ -251,6 +282,55 @@ function formatTimestamp(timestamp) {
     }
     return asDate.toLocaleString();
 }
+function formatTimestampToSecond(timestamp) {
+    if (!timestamp) {
+        return "unknown time";
+    }
+    const asDate = new Date(timestamp);
+    if (Number.isNaN(asDate.getTime())) {
+        return timestamp;
+    }
+    return asDate.toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        second: "2-digit"
+    });
+}
+function toMinuteKey(timestamp) {
+    const asDate = new Date(timestamp);
+    if (Number.isNaN(asDate.getTime())) {
+        return timestamp;
+    }
+    return new Date(Math.floor(asDate.getTime() / 60000) * 60000).toISOString();
+}
+function groupEventsBySecond(events) {
+    const groupsByMinute = new Map();
+    const orderedMinuteKeys = [];
+    for (const event of events) {
+        const minuteKey = toMinuteKey(event.eventTime);
+        const existing = groupsByMinute.get(minuteKey);
+        if (existing) {
+            existing.push(event);
+            continue;
+        }
+        groupsByMinute.set(minuteKey, [event]);
+        orderedMinuteKeys.push(minuteKey);
+    }
+    return orderedMinuteKeys.map((minuteKey) => ({
+        minuteKey,
+        events: groupsByMinute.get(minuteKey) ?? []
+    }));
+}
+function pickCredentialColor(index) {
+    const color = CREDENTIAL_COLORS[index % CREDENTIAL_COLORS.length];
+    if (color) {
+        return color;
+    }
+    return { border: "#7c9cf5", bg: "#f5f7ff", chip: "#dbe5ff" };
+}
 function LearnerPage() {
     const { learnerId = "demo-learner" } = useParams();
     const [context, setContext] = useState(null);