From 127838ea3c9a5238a7ff81c5f142d16ea106364a Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Thu, 10 Sep 2026 10:34:21 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20assignment=20statu?= =?UTF-8?q?s=20badges=20and=20status=20filters=20interaction?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assignment-chooser.component.html | 68 +++++++--- .../assignment-chooser.component.scss | 119 ++++++++++++------ .../assignment-chooser.component.ts | 78 ++++++++++++ src/app/models/Assignment.model.ts | 2 + src/assets/i18n/en.json | 2 + src/assets/i18n/fr.json | 2 + src/assets/i18n/ru.json | 2 + src/styles/_components.scss | 99 +++++++++++++++ src/styles/_variables.scss | 12 ++ 9 files changed, 328 insertions(+), 56 deletions(-) diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.html b/src/app/components/home/assignment-chooser/assignment-chooser.component.html index e7586b0f..9222ed29 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.html +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.html @@ -95,25 +95,47 @@
{{ 'HOME.FILTER.STATUS' | translate }}
-
@@ -256,7 +278,8 @@
{{ 'HOME.FILTER.YEAR' | translate }}
'disabled-card': !authService.isSignedIn(), 'is-selected': isSelected(assignment.id), 'is-editing': editingAssignmentId === assignment.id, - 'is-shrunk': (hoveredAssignment === assignment.id || isSelected(assignment.id)) && editingAssignmentId !== assignment.id + 'is-shrunk': (hoveredAssignment === assignment.id || isSelected(assignment.id)) && editingAssignmentId !== assignment.id, + 'status-preview-dimmed': hoveredStatusPreview && assignment.id !== -1 && assignment.uiStatus !== hoveredStatusPreview }">
@@ -289,12 +312,27 @@
{{ 'HOME.FILTER.YEAR' | translate }}
translate) }} - - {{ 'HOME.STATUS.' + assignment.uiStatus.toUpperCase() | translate }} - - - {{ 'HOME.NEW' | translate }} - +
span { + display: inline-flex; + align-items: center; + gap: 6px; padding: 0.35rem 0.8rem; border-radius: 99px; - border: none; - background-color: var(--color-bg-body); - color: var(--color-text-secondary); + border: 1px dashed var(--color-border); + background-color: transparent; + color: var(--color-text-muted); font-size: 0.8rem; - font-weight: 500; - transition: all 0.15s ease; + font-weight: 400; + opacity: 0.4; + filter: grayscale(100%); + transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); + user-select: none; + + .chip-icon { + flex-shrink: 0; + opacity: 0.7; + } + + .filter-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: currentColor; + display: inline-block; + flex-shrink: 0; + opacity: 0.7; + } } + + // Hover when inactive: invite activation + &:hover > span { + opacity: 0.7; + filter: grayscale(40%); + background-color: var(--color-hover); + } + + // ACTIVE / CHECKED STATES (100% visible, fully colored) input[type="checkbox"]:checked + span { - background-color: var(--color-primary); - color: #ffffff; + opacity: 1; + filter: none; + border-style: solid; + + .chip-icon, + .filter-dot { + opacity: 1; + } + } + + &.chip-prepared input[type="checkbox"]:checked + span { + background-color: var(--badge-prepared-bg); + color: var(--badge-prepared-text); + border-color: var(--badge-prepared-border); + } + &.chip-ongoing input[type="checkbox"]:checked + span { + background-color: var(--badge-ongoing-bg); + color: var(--badge-ongoing-text); + border-color: var(--badge-ongoing-border); } - &:hover span { - filter: brightness(0.95); + &.chip-finished input[type="checkbox"]:checked + span { + background-color: var(--badge-finished-bg); + color: var(--badge-finished-text); + border-color: var(--badge-finished-border); + } + &.chip-default input[type="checkbox"]:checked + span { + background-color: var(--badge-default-bg); + color: var(--badge-default-text); + border-color: var(--badge-default-border); + } + + &:hover input[type="checkbox"]:checked + span { + filter: brightness(0.96); + opacity: 1; } } } @@ -277,6 +337,13 @@ margin: 0; position: relative; z-index: 1; + transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), filter 200ms cubic-bezier(0.23, 1, 0.32, 1); + + &.status-preview-dimmed { + opacity: 0.35; + filter: grayscale(80%); + pointer-events: none; + } &.is-editing { z-index: 10; @@ -409,36 +476,6 @@ max-width: 450px; } -.status-badge { - padding: 0.2rem 0.5rem; - border-radius: 6px; - font-size: 0.75rem; - font-weight: 500; - letter-spacing: 0; - display: inline-flex; - align-items: center; - text-transform: capitalize; - border: none; - - &.status-prepared { - background-color: var(--badge-prepared-bg); - color: var(--badge-prepared-text); - } - &.status-ongoing { - background-color: var(--badge-ongoing-bg); - color: var(--badge-ongoing-text); - } - &.status-finished { - background-color: var(--badge-finished-bg); - color: var(--badge-finished-text); - } - &.status-default { - background-color: var(--color-surface); - color: var(--color-text-secondary); - border: 1px solid var(--color-border); - } -} - .meta-info { margin-top: 2px; diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts index ec674b92..4809cb3e 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts @@ -55,6 +55,10 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { selectedAssignments: Set = new Set(); hoveredAssignment: number | null = null; + // Status hover preview state + hoveredStatusPreview: string | null = null; + private statusPreviewTimeout: any = null; + // Inline edit state editingAssignmentId: number | null = null; isCreatingNew = false; @@ -155,6 +159,77 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.filterType = type; } + onStatusMouseEnter(status: string) { + if (this.statusPreviewTimeout) { + clearTimeout(this.statusPreviewTimeout); + } + this.statusPreviewTimeout = setTimeout(() => { + this.hoveredStatusPreview = status; + this.cdr.markForCheck(); + }, 180); + } + + onStatusMouseLeave() { + if (this.statusPreviewTimeout) { + clearTimeout(this.statusPreviewTimeout); + this.statusPreviewTimeout = null; + } + if (this.hoveredStatusPreview !== null) { + this.hoveredStatusPreview = null; + this.cdr.markForCheck(); + } + } + + isStatusIsolated(status: string): boolean { + const s = this.advancedFilters.status; + const allStatuses: Array = [ + "prepared", + "ongoing", + "finished", + "default", + ]; + return ( + s[status as keyof typeof s] === true && + allStatuses.filter((k) => k !== status).every((k) => !s[k]) + ); + } + + getStatusTooltip(status: string): string { + return this.isStatusIsolated(status) + ? "HOME.STATUS-TOOLTIP-RESET" + : "HOME.STATUS-TOOLTIP-ISOLATE"; + } + + toggleStatusFilterFromBadge( + status: "prepared" | "ongoing" | "finished" | "default", + event: MouseEvent + ) { + event.stopPropagation(); + if (this.statusPreviewTimeout) { + clearTimeout(this.statusPreviewTimeout); + this.statusPreviewTimeout = null; + } + this.hoveredStatusPreview = null; + + if (this.isStatusIsolated(status)) { + this.advancedFilters.status = { + prepared: true, + ongoing: true, + finished: true, + default: true, + }; + } else { + this.advancedFilters.status = { + prepared: status === "prepared", + ongoing: status === "ongoing", + finished: status === "finished", + default: status === "default", + }; + } + this.savePreferences(); + this.cdr.markForCheck(); + } + constructor( private databaseService: DatabaseService, private dataService: DataService, @@ -206,6 +281,9 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { if (this.dbSubscription) { this.dbSubscription.unsubscribe(); } + if (this.statusPreviewTimeout) { + clearTimeout(this.statusPreviewTimeout); + } } async loadAssignments() { diff --git a/src/app/models/Assignment.model.ts b/src/app/models/Assignment.model.ts index bfba5a8f..7ae658f9 100644 --- a/src/app/models/Assignment.model.ts +++ b/src/app/models/Assignment.model.ts @@ -11,6 +11,8 @@ import { Type } from "class-transformer"; */ export class Assignment { id: number; + uiStatus?: "prepared" | "ongoing" | "finished" | "default"; + uiType?: "github" | "gitlab"; @Type(() => Metadata) metadata: Metadata; diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 529be8f4..d4e39c20 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -148,6 +148,8 @@ "FINISHED": "Finished", "DEFAULT": "Not scheduled" }, + "STATUS-TOOLTIP-ISOLATE": "Click to isolate this status", + "STATUS-TOOLTIP-RESET": "Click to show all assignments", "NO-ASSIGNMENTS": "No assignments found", "SELECTED-ASSIGNMENTS": "assignment(s) selected", "SORT-BY": "Sort by", diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index a88a3c63..958f799d 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -147,6 +147,8 @@ "FINISHED": "Terminé", "DEFAULT": "Non programmé" }, + "STATUS-TOOLTIP-ISOLATE": "Cliquer pour isoler ce statut", + "STATUS-TOOLTIP-RESET": "Cliquer pour réafficher tous les devoirs", "NO-ASSIGNMENTS": "Aucun devoir trouvé", "SELECTED-ASSIGNMENTS": "devoir(s) sélectionné(s)", "SORT-BY": "Trier par", diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index bb1bcc62..aa1ec21d 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -146,6 +146,8 @@ "FINISHED": "Завершено", "DEFAULT": "Не запланировано" }, + "STATUS-TOOLTIP-ISOLATE": "Нажмите, чтобы отфильтровать по этому статусу", + "STATUS-TOOLTIP-RESET": "Нажмите, чтобы показать все задания", "NO-ASSIGNMENTS": "Задания не найдены", "SELECTED-ASSIGNMENTS": "заданий выбрано", "SORT-BY": "Сортировать по", diff --git a/src/styles/_components.scss b/src/styles/_components.scss index ffb2f8f2..e30b5446 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -2213,3 +2213,102 @@ body:has(app-custom-modal-container) ngb-typeahead-window { } } } + +/* ========================================= + STATUS BADGES (Linear / Modern Dev Style) + ========================================= */ +.status-badge { + padding: 0.2rem 0.55rem; + border-radius: 9999px; + font-size: 0.725rem; + font-weight: 400; + letter-spacing: 0; + display: inline-flex; + align-items: center; + gap: 5px; + text-transform: capitalize; + border: 1px solid transparent; + cursor: pointer; + user-select: none; + background: transparent; + outline: none; + line-height: 1.25; + transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.16s ease, filter 0.16s ease; + + &:hover { + transform: translateY(-1px); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); + } + + &:active { + transform: scale(0.96); + } + + .status-text { + display: inline-block; + font-weight: 400; + } + + .status-icon { + flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .status-pulse-dot { + width: 5.5px; + height: 5.5px; + border-radius: 50%; + background-color: currentColor; + position: relative; + flex-shrink: 0; + + &::after { + content: ''; + position: absolute; + inset: 0; + border-radius: 50%; + background-color: currentColor; + opacity: 0.45; + animation: status-pulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite; + } + } + + &.status-prepared { + background-color: var(--badge-prepared-bg); + color: var(--badge-prepared-text); + border-color: var(--badge-prepared-border); + } + &.status-ongoing { + background-color: var(--badge-ongoing-bg); + color: var(--badge-ongoing-text); + border-color: var(--badge-ongoing-border); + } + &.status-finished { + background-color: var(--badge-finished-bg); + color: var(--badge-finished-text); + border-color: var(--badge-finished-border); + } + &.status-default { + background-color: var(--badge-default-bg); + color: var(--badge-default-text); + border-color: var(--badge-default-border); + } +} + +@keyframes status-pulse { + 0% { + transform: scale(1); + opacity: 0.45; + } + 60% { + transform: scale(1.8); + opacity: 0; + } + 100% { + transform: scale(1.8); + opacity: 0; + } +} + diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index d2fa5666..a06d0a35 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -47,10 +47,16 @@ $font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Robot --badge-prepared-bg: #eff6ff; --badge-prepared-text: #1d4ed8; + --badge-prepared-border: rgba(59, 130, 246, 0.28); --badge-ongoing-bg: #ecfdf5; --badge-ongoing-text: #047857; + --badge-ongoing-border: rgba(16, 185, 129, 0.28); --badge-finished-bg: #f3f4f6; --badge-finished-text: #4b5563; + --badge-finished-border: rgba(148, 163, 184, 0.28); + --badge-default-bg: #f8fafc; + --badge-default-text: #64748b; + --badge-default-border: rgba(100, 116, 139, 0.28); --timeline-track-bg: #f3f4f6; --timeline-text: #6b7280; @@ -114,10 +120,16 @@ body.dark-theme { --badge-prepared-bg: rgba(59, 130, 246, 0.15); --badge-prepared-text: #60a5fa; + --badge-prepared-border: rgba(96, 165, 250, 0.3); --badge-ongoing-bg: rgba(16, 185, 129, 0.15); --badge-ongoing-text: #34d399; + --badge-ongoing-border: rgba(52, 211, 153, 0.3); --badge-finished-bg: rgba(148, 163, 184, 0.15); --badge-finished-text: #94a3b8; + --badge-finished-border: rgba(148, 163, 184, 0.25); + --badge-default-bg: rgba(100, 116, 139, 0.15); + --badge-default-text: #94a3b8; + --badge-default-border: rgba(148, 163, 184, 0.3); --timeline-track-bg: #334155; --timeline-text: #94a3b8; From 0123c65bdcede76b5c187d6bdcb9bd7ec55693d4 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Thu, 10 Sep 2026 13:32:02 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8=20redesign=20milestone=20labels?= =?UTF-8?q?=20with=20chronological=20overlap=20masking?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/graphs/overview/chart.scss | 79 +++- .../graphs/overview/overview.component.html | 1 - .../graphs/overview/overview.component.ts | 416 +++++++++++++++--- 3 files changed, 412 insertions(+), 84 deletions(-) diff --git a/src/app/components/graphs/overview/chart.scss b/src/app/components/graphs/overview/chart.scss index 5cc22c24..53daf66f 100644 --- a/src/app/components/graphs/overview/chart.scss +++ b/src/app/components/graphs/overview/chart.scss @@ -133,6 +133,8 @@ body.dark-theme .commit { pointer-events: auto; overflow: hidden; cursor: default; + mask: url(#milestone-badges-cutout-mask); + -webkit-mask: url(#milestone-badges-cutout-mask); } .session-pill { @@ -211,56 +213,87 @@ body.dark-theme .commit { pointer-events: auto; cursor: pointer; - > rect:first-child { + .milestone-vertical-line { transition: width var(--transition-fast), transform var(--transition-fast); } - &:hover > rect:first-child { + &:hover .milestone-vertical-line { width: 2px; transform: translate(-1px, 0); } - > rect:nth-child(2) { - rx: 12px; - ry: 12px; - transition: filter var(--transition-normal), transform var(--transition-normal); - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); + .milestone-label-group { + pointer-events: none; } - - &:hover > rect:nth-child(2) { - transform: translateY(-2px); - filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15)); + + // --- Bottom Bar --- + .milestone-bottom-bar { + pointer-events: none; + transition: height var(--transition-fast), y var(--transition-fast), filter var(--transition-fast); } - > text { - fill: var(--color-surface); - user-select: none; - font-family: var(--font-family-sans); - font-size: 12px; - font-weight: 500; - transition: transform var(--transition-normal); + // Hover feedback: bar thickens upward (bottom stays at y=0, perfectly attached to line) + &:hover .milestone-bottom-bar { + y: -4.5px; + height: 4.5px; + filter: brightness(1.15); } - &:hover > text { - transform: translateY(-2px); + .milestone-text { + fill: var(--color-text-primary); + user-select: none; + pointer-events: none; + font-family: var(--font-family-sans); + font-size: 11px; + font-weight: 600; + line-height: 1; + transition: fill var(--transition-fast); } } .review { - > rect:first-child, > rect:nth-child(2) { fill: var(--color-primary); stroke: var(--color-primary); } + .milestone-vertical-line { + fill: var(--color-primary); + stroke: var(--color-primary); + } + .milestone-bottom-bar { + fill: var(--color-primary); + } + &:hover .milestone-text { + fill: var(--color-primary); + } .milestone-drag-badge .badge-progress { stroke: var(--color-primary); } } .correction { - > rect:first-child, > rect:nth-child(2) { fill: var(--color-danger); stroke: var(--color-danger); } + .milestone-vertical-line { + fill: var(--color-danger); + stroke: var(--color-danger); + } + .milestone-bottom-bar { + fill: var(--color-danger); + } + &:hover .milestone-text { + fill: var(--color-danger); + } .milestone-drag-badge .badge-progress { stroke: var(--color-danger); } } .other { - > rect:first-child, > rect:nth-child(2) { fill: var(--color-secondary); stroke: var(--color-secondary); } + .milestone-vertical-line { + fill: var(--color-secondary); + stroke: var(--color-secondary); + } + .milestone-bottom-bar { + fill: var(--color-secondary); + } + &:hover .milestone-text { + fill: var(--color-secondary); + } .milestone-drag-badge .badge-progress { stroke: var(--color-secondary); } } + .hitbox { fill: transparent !important; stroke: none !important; diff --git a/src/app/components/graphs/overview/overview.component.html b/src/app/components/graphs/overview/overview.component.html index f8eebed9..20eba8b7 100644 --- a/src/app/components/graphs/overview/overview.component.html +++ b/src/app/components/graphs/overview/overview.component.html @@ -489,4 +489,3 @@
{{ "OVERVIEW-GRA (saveSession)="onSaveSession($event)" > - diff --git a/src/app/components/graphs/overview/overview.component.ts b/src/app/components/graphs/overview/overview.component.ts index 4fe068bc..2c91dd76 100644 --- a/src/app/components/graphs/overview/overview.component.ts +++ b/src/app/components/graphs/overview/overview.component.ts @@ -95,7 +95,6 @@ export class OverviewComponent showReviews = true; showOthers = true; defaultSessionDuration: NgbTimeStruct; - // Modal variables dateModal; labelModal: string; @@ -127,6 +126,7 @@ export class OverviewComponent session_header_g: d3.Selection; review_g: d3.Selection; correction_g: d3.Selection; + milestones_g: d3.Selection; commits_line_g: d3.Selection; data_g: d3.Selection; commits_g: d3.Selection; @@ -162,6 +162,7 @@ export class OverviewComponent private resizeTimeout: any; private last_zoom_k: number = 0; private zoomTimeoutId: any = null; + private zoomRafId: number | null = null; isRefreshing: boolean = false; private isThrottledGroupUpdate = false; private needsGroupUpdate = false; @@ -399,6 +400,10 @@ export class OverviewComponent clearTimeout(this.refreshTimeout); this.refreshTimeout = null; } + if (this.zoomRafId !== null) { + cancelAnimationFrame(this.zoomRafId); + this.zoomRafId = null; + } this.clearMilestoneHoverTimer(); this.cancelMilestoneLongPress(); this.stopDragScrollTimer(); @@ -744,14 +749,23 @@ export class OverviewComponent overview.x_scale ); - if (!overview.isRefreshing) { - overview.isRefreshing = true; - requestAnimationFrame(() => { - overview.x_g.call(this.x_axis.scale(overview.x_scale_copy)); - overview.refreshElementState(); - overview.isRefreshing = false; - }); + if (overview.zoomRafId !== null) { + return; + } + + overview.zoomRafId = requestAnimationFrame(() => { + overview.zoomRafId = null; + overview.x_g.call(overview.x_axis.scale(overview.x_scale_copy)); + overview.refreshElementState(); + }); + }) + .on("end", () => { + if (overview.zoomRafId !== null) { + cancelAnimationFrame(overview.zoomRafId); + overview.zoomRafId = null; } + overview.x_g.call(overview.x_axis.scale(overview.x_scale_copy)); + overview.refreshElementState(); }) .filter((event) => { return event.shiftKey || !(event instanceof WheelEvent); @@ -1032,6 +1046,7 @@ export class OverviewComponent if (this.dataService.sessions && this.showSessions) { this.loadSessions(); } + this.updateMilestoneCutoutMask(); } loadMilestoneAnnotations() { @@ -1050,25 +1065,61 @@ export class OverviewComponent review.questions?.includes(question) ).length); + if (this.milestones_g != null) { + this.milestones_g.remove(); + this.milestones_g = null; + } if (this.review_g != null) { this.review_g.remove(); this.review_g = null; } if (this.correction_g != null) { this.correction_g.remove(); this.correction_g = null; } if (this.other_g != null) { this.other_g.remove(); this.other_g = null; } if (this.filteredCommitsCount === 0) { + this.updateMilestoneCutoutMask(); return; } + const allMilestones: { milestone: Milestone; type: string; index: number }[] = []; + if (this.dataService.reviews && this.showReviews) { - this.loadReviews(milestone_filter); + this.dataService.reviews.filter(milestone_filter).forEach((m, i) => { + allMilestones.push({ milestone: m, type: "review", index: i }); + }); } if (this.dataService.corrections && this.showCorrections) { - this.loadCorrections(milestone_filter); + this.dataService.corrections.filter(milestone_filter).forEach((m, i) => { + allMilestones.push({ milestone: m, type: "correction", index: i }); + }); } if (this.dataService.others && this.showOthers) { - this.loadOthers(milestone_filter); + this.dataService.others.filter(milestone_filter).forEach((m, i) => { + allMilestones.push({ milestone: m, type: "other", index: i }); + }); } + + // Sort chronologically ascending: oldest first, newest last. + // In SVG, elements rendered later in DOM are displayed on top! + allMilestones.sort((a, b) => { + const tA = new Date(a.milestone.date).getTime(); + const tB = new Date(b.milestone.date).getTime(); + if (tA !== tB) return tA - tB; + return (a.milestone.label || "").localeCompare(b.milestone.label || ""); + }); + + this.milestones_g = this.chart_abs_g.append("g").attr("class", "milestones-layer"); + + const overview = this; + allMilestones.forEach(({ milestone, type, index }) => { + overview.getLineForMilestone( + overview.milestones_g, + milestone, + `milestone ${type}`, + index + ); + }); + + this.updateMilestoneCutoutMask(); } isContextualMenuShown() { @@ -1493,6 +1544,7 @@ export class OverviewComponent .attr("y", 3) .attr("width", foWidth) .attr("height", 23) + .attr("mask", "url(#milestone-badges-cutout-mask)") .style("visibility", foWidth < 28 ? "hidden" : "visible") .style("pointer-events", "auto") .style("overflow", "hidden"); @@ -1673,54 +1725,276 @@ export class OverviewComponent m.type = this.resolveMilestoneType(m, g); } - // Line + // 1. Line g.append("rect") + .attr("class", "milestone-vertical-line") .attr("x", 0) .attr("y", 0) .attr("width", 1) .attr("height", this.inner_height) .attr("transform", "translate(" + [-0.5, 0] + ")"); - // Box - let box = g.append("rect").attr("y", 0); + // 2. Label group (anchored, masked when overlapping newer milestones) + const labelGroup = g.append("g").attr("class", "milestone-label-group"); // Text - let text = g + const labelText = + m.label || + (m.type.endsWith("s") ? m.type.slice(0, -1) : m.type) + " " + index; + + let text = labelGroup .append("text") - .attr("y", -6) - .text( - m.label || - (m.type.endsWith("s") ? m.type.slice(0, -1) : m.type) + " " + index - ) + .attr("class", "milestone-text") + .attr("y", -8) + .text(labelText) .attr("text-anchor", "middle"); - let bbox = text.node().getBBox(); + let textWidth = 40; + try { + const node = text.node(); + if (node && typeof node.getBBox === 'function') { + const bbox = node.getBBox(); + if (bbox && bbox.width > 0) { + textWidth = bbox.width; + } + } + } catch { + textWidth = labelText.length * 7.5; + } - // Adjust for pill padding - bbox.width += 16; - bbox.height += 10; - bbox.x -= 8; - bbox.y -= 5; + const paddingX = 8; + const barWidth = Math.max(30, textWidth + paddingX * 2); - box.attr("width", bbox.width); - box.attr("height", bbox.height); - box.attr("x", -bbox.width / 2); - box.attr("y", bbox.y); + // Horizontal bottom accent bar (same as session top bar: height 3px, rx 1.5, ry 1.5) + labelGroup + .append("rect") + .attr("class", "milestone-bottom-bar") + .attr("x", -barWidth / 2) + .attr("y", -3) + .attr("width", barWidth) + .attr("height", 3) + .attr("rx", 1.5) + .attr("ry", 1.5); - const badgeX = bbox.width / 2 - 2; - const badgeY = bbox.y + bbox.height - 2; + const badgeX = barWidth / 2 - 2; + const badgeY = -5; g.attr("data-badge-x", badgeX).attr("data-badge-y", badgeY); - // Hitbox (transparent, plus large pour faciliter le clic) + // Hitbox (transparent, covering the label and top of line) g.append("rect") .attr("class", "hitbox") - .attr("width", bbox.width + 30) - .attr("height", bbox.height + 30) - .attr("x", -(bbox.width + 30) / 2) - .attr("y", bbox.y - 15) + .attr("width", barWidth + 30) + .attr("height", 32) + .attr("x", -(barWidth + 30) / 2) + .attr("y", -24) .attr("style", "cursor: pointer; pointer-events: all;"); } + updateMilestoneCutoutMask() { + if (!this.svg_abs) return; + + let defs = this.svg_abs.select("defs"); + if (defs.empty()) { + defs = this.svg_abs.append("defs"); + } + + // 1. Maintain chronological DOM order (oldest first, newest last = on top in SVG painter model) + if (this.milestones_g) { + this.milestones_g + .selectAll(".milestone") + .sort((a: Milestone, b: Milestone) => { + const tA = new Date(a.date).getTime(); + const tB = new Date(b.date).getTime(); + if (tA !== tB) return tA - tB; + return (a.label || "").localeCompare(b.label || ""); + }); + } + + // 2. Collect visible milestones and their geometric bounds + interface VisibleMilestoneItem { + element: d3.Selection; + labelGroup: d3.Selection; + milestone: Milestone; + x: number; + width: number; + date: Date; + time: number; + } + + const visibleItems: VisibleMilestoneItem[] = []; + const overview = this; + + if (this.chart_abs_g) { + this.chart_abs_g.selectAll(".milestone").each(function (m: Milestone) { + const el = d3.select(this) as d3.Selection; + if (el.classed("hidden")) return; + const x = overview.xScaledTimeZoned(m.date); + if (x < -100 || x > overview.width + 100) return; + + const bar = el.select(".milestone-bottom-bar"); + let width = 50; + if (!bar.empty()) { + const barW = parseFloat(bar.attr("width") || "50"); + if (!isNaN(barW) && barW > 0) { + width = barW; + } + } + visibleItems.push({ + element: el, + labelGroup: el.select(".milestone-label-group"), + milestone: m, + x, + width, + date: new Date(m.date), + time: new Date(m.date).getTime(), + }); + }); + } + + // Sort chronologically ascending + visibleItems.sort((a, b) => { + if (a.time !== b.time) return a.time - b.time; + return (a.milestone.label || "").localeCompare(b.milestone.label || ""); + }); + + // 3. Update Session Badges Cutout Mask (#milestone-badges-cutout-mask) + let sessionMask = defs.select("#milestone-badges-cutout-mask"); + if (sessionMask.empty()) { + sessionMask = defs + .append("mask") + .attr("id", "milestone-badges-cutout-mask") + .attr("maskUnits", "userSpaceOnUse") + .attr("x", "0") + .attr("y", "0") + .attr("width", "100%") + .attr("height", "100%"); + + sessionMask + .append("rect") + .attr("x", -5000) + .attr("y", 0) + .attr("width", 100000) + .attr("height", 100) + .attr("fill", "white"); + + sessionMask.append("g").attr("id", "milestone-mask-cutouts"); + } + + const sessionMaskCutoutsGroup = sessionMask.select("#milestone-mask-cutouts"); + if (!sessionMaskCutoutsGroup.empty()) { + const sessionCutouts = visibleItems.map((item) => ({ + x: item.x - item.width / 2, + width: item.width, + })); + + const sRects = sessionMaskCutoutsGroup.selectAll("rect").data(sessionCutouts); + sRects.exit().remove(); + sRects + .enter() + .append("rect") + .merge(sRects as any) + .attr("x", (d) => d.x) + .attr("y", 0) + .attr("width", (d) => d.width) + .attr("height", 28) + .attr("rx", 1.5) + .attr("ry", 1.5) + .attr("fill", "black"); + } + + // 4. Milestone-to-Milestone Overlap Cutouts (#milestone-overlap-defs) + let overlapDefs = defs.select("#milestone-overlap-defs"); + if (overlapDefs.empty()) { + overlapDefs = defs.append("g").attr("id", "milestone-overlap-defs"); + } + + const overlapPadding = 4; // 4px padding on each side to prevent texts/traits from clashing + const usedMaskIds = new Set(); + + visibleItems.forEach((current, i) => { + const currentHalfWidth = current.width / 2; + const currentLeft = current.x - currentHalfWidth; + const currentRight = current.x + currentHalfWidth; + + const cutoutsForCurrent: { relX: number; cutWidth: number }[] = []; + + // Check all NEWER milestones (j > i) that overlap with this milestone's horizontal span + for (let j = i + 1; j < visibleItems.length; j++) { + const newer = visibleItems[j]; + const newerHalfCutWidth = newer.width / 2 + overlapPadding; + const newerLeft = newer.x - newerHalfCutWidth; + const newerRight = newer.x + newerHalfCutWidth; + + // Check if horizontal intervals overlap + if (currentRight >= newerLeft && currentLeft <= newerRight) { + // Overlap detected! In current milestone's local coordinate system: + const relX = (newer.x - current.x) - newerHalfCutWidth; + cutoutsForCurrent.push({ + relX, + cutWidth: newer.width + overlapPadding * 2, + }); + } + } + + if (cutoutsForCurrent.length === 0) { + // No overlap with any newer milestone: remove mask + current.labelGroup.attr("mask", null); + } else { + // Apply cutout mask to erase the area under newer milestones + const maskId = `milestone-overlap-mask-${i}`; + usedMaskIds.add(maskId); + + let oMask = overlapDefs.select(`#${maskId}`); + if (oMask.empty()) { + oMask = overlapDefs + .append("mask") + .attr("id", maskId) + .attr("maskUnits", "userSpaceOnUse") + .attr("x", "-5000") + .attr("y", "-100") + .attr("width", "10000") + .attr("height", "200"); + + oMask + .append("rect") + .attr("class", "mask-base") + .attr("x", -5000) + .attr("y", -100) + .attr("width", 10000) + .attr("height", 200) + .attr("fill", "white"); + + oMask.append("g").attr("class", "mask-cuts"); + } + + const cutsGroup = oMask.select(".mask-cuts"); + const cutRects = cutsGroup.selectAll("rect").data(cutoutsForCurrent); + cutRects.exit().remove(); + cutRects + .enter() + .append("rect") + .merge(cutRects as any) + .attr("x", (d) => d.relX) + .attr("y", -30) + .attr("width", (d) => d.cutWidth) + .attr("height", 30) + .attr("rx", 1.5) + .attr("ry", 1.5) + .attr("fill", "black"); + + current.labelGroup.attr("mask", `url(#${maskId})`); + } + }); + + // Clean up unused overlap masks + overlapDefs.selectAll("mask").each(function () { + const id = d3.select(this).attr("id"); + if (id && !usedMaskIds.has(id)) { + d3.select(this).remove(); + } + }); + } + readonly MILESTONE_COLOR_MAP: Record = { review: "var(--color-primary)", reviews: "var(--color-primary)", @@ -2006,6 +2280,7 @@ export class OverviewComponent element.attr("transform", `translate(${currentX}, ${this.inner_margin.top})`); this.updateDragTimeIndicator(currentX, m.date); + this.updateMilestoneCutoutMask(); this.handleDragEdgeScrolling(currentX, element, m); } @@ -3035,26 +3310,34 @@ export class OverviewComponent const visX2 = Math.min(overview.inner_width, rawX2); const visWidth = Math.max(0, visX2 - visX1); - const isVisible = rawX2 > 0 && rawX1 < overview.inner_width; - g.style("visibility", isVisible ? "visible" : "hidden"); - - if (isVisible) { - g.select(".session-body") - .attr("x", visX1) - .attr("width", visWidth); - - const showLeft = rawX1 >= 0 && rawX1 <= overview.inner_width; - g.select(".session-edge-left") - .attr("x1", rawX1) - .attr("x2", rawX1) - .style("display", showLeft ? "inline" : "none"); + const isVisible = + !isNaN(rawX1) && + !isNaN(rawX2) && + rawX2 > 0 && + rawX1 < overview.inner_width && + visWidth > 0; + g.style("display", isVisible ? null : "none") + .style("visibility", isVisible ? "visible" : "hidden"); - const showRight = rawX2 >= 0 && rawX2 <= overview.inner_width; - g.select(".session-edge-right") - .attr("x1", rawX2) - .attr("x2", rawX2) - .style("display", showRight ? "inline" : "none"); + if (!isVisible) { + return; } + + g.select(".session-body") + .attr("x", visX1) + .attr("width", visWidth); + + const showLeft = rawX1 >= 0 && rawX1 <= overview.inner_width; + g.select(".session-edge-left") + .attr("x1", rawX1) + .attr("x2", rawX1) + .style("display", showLeft ? "inline" : "none"); + + const showRight = rawX2 >= 0 && rawX2 <= overview.inner_width; + g.select(".session-edge-right") + .attr("x1", rawX2) + .attr("x2", rawX2) + .style("display", showRight ? "inline" : "none"); }); if (this.session_header_g) { @@ -3067,13 +3350,25 @@ export class OverviewComponent const visX2 = Math.min(overview.inner_width, rawX2); const visWidth = Math.max(0, visX2 - visX1); - const isVisible = rawX2 > 0 && rawX1 < overview.inner_width; - g.style("visibility", isVisible ? "visible" : "hidden"); + const isVisible = + !isNaN(rawX1) && + !isNaN(rawX2) && + rawX2 > 0 && + rawX1 < overview.inner_width && + visWidth > 0; + + const fo = g.select(".session-header-fo"); if (!isVisible) { + g.style("display", "none").style("visibility", "hidden"); + if (!fo.empty()) { + fo.style("display", "none").style("visibility", "hidden"); + } return; } + g.style("display", null).style("visibility", "visible"); + // 1. Continuous header background (clamped to 0..inner_width) g.select(".session-header-bg") .attr("x", visX1) @@ -3105,7 +3400,6 @@ export class OverviewComponent const foX = visX1; const foWidth = Math.max(0, visX2 - foX); - const fo = g.select(".session-header-fo"); fo.attr("x", foX) .attr("width", foWidth); @@ -3125,11 +3419,11 @@ export class OverviewComponent if (foWidth < 28) { // Extremely narrow: hide badges completely - fo.style("visibility", "hidden"); + fo.style("display", "none").style("visibility", "hidden"); return; } - fo.style("visibility", "visible"); + fo.style("display", null).style("visibility", "visible"); // Width estimations const charWidth = 6.2; @@ -3255,6 +3549,7 @@ export class OverviewComponent } }); } + this.updateMilestoneCutoutMask(); } private updateMilestoneTransforms() { @@ -3262,6 +3557,7 @@ export class OverviewComponent .attr("transform", (m: Milestone) => `translate(${this.xScaledTimeZoned(m.date)}, ${this.inner_margin.top})` ); + this.updateMilestoneCutoutMask(); } private updateDisplayModes() { From b1f9a93b0d4f750757a8f52eadae24156172e1b0 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Thu, 10 Sep 2026 13:51:54 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=92=84=20match=20milestone=20bar=20th?= =?UTF-8?q?ickness,=20text=20width=20and=20exact=20cutout=20bounds?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/graphs/overview/chart.scss | 6 +++--- .../graphs/overview/overview.component.ts | 14 +++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/app/components/graphs/overview/chart.scss b/src/app/components/graphs/overview/chart.scss index 53daf66f..d5556f1a 100644 --- a/src/app/components/graphs/overview/chart.scss +++ b/src/app/components/graphs/overview/chart.scss @@ -232,10 +232,10 @@ body.dark-theme .commit { transition: height var(--transition-fast), y var(--transition-fast), filter var(--transition-fast); } - // Hover feedback: bar thickens upward (bottom stays at y=0, perfectly attached to line) + // Hover feedback: bar thickens upward (matches vertical line hover at 3px, bottom stays at y=0) &:hover .milestone-bottom-bar { - y: -4.5px; - height: 4.5px; + y: -3px; + height: 3px; filter: brightness(1.15); } diff --git a/src/app/components/graphs/overview/overview.component.ts b/src/app/components/graphs/overview/overview.component.ts index 2c91dd76..6debd3bd 100644 --- a/src/app/components/graphs/overview/overview.component.ts +++ b/src/app/components/graphs/overview/overview.component.ts @@ -1745,7 +1745,7 @@ export class OverviewComponent let text = labelGroup .append("text") .attr("class", "milestone-text") - .attr("y", -8) + .attr("y", -7) .text(labelText) .attr("text-anchor", "middle"); @@ -1762,17 +1762,17 @@ export class OverviewComponent textWidth = labelText.length * 7.5; } - const paddingX = 8; - const barWidth = Math.max(30, textWidth + paddingX * 2); + const paddingX = 2; + const barWidth = Math.max(16, textWidth + paddingX * 2); - // Horizontal bottom accent bar (same as session top bar: height 3px, rx 1.5, ry 1.5) + // Horizontal bottom accent bar (same 2px visual thickness as vertical line, rounded ends like session bar) labelGroup .append("rect") .attr("class", "milestone-bottom-bar") .attr("x", -barWidth / 2) - .attr("y", -3) + .attr("y", -2) .attr("width", barWidth) - .attr("height", 3) + .attr("height", 2) .attr("rx", 1.5) .attr("ry", 1.5); @@ -1908,7 +1908,7 @@ export class OverviewComponent overlapDefs = defs.append("g").attr("id", "milestone-overlap-defs"); } - const overlapPadding = 4; // 4px padding on each side to prevent texts/traits from clashing + const overlapPadding = 0; // Cutout matches exact trait width, no further const usedMaskIds = new Set(); visibleItems.forEach((current, i) => {