diff --git a/docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md b/docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md new file mode 100644 index 0000000..05c57f4 --- /dev/null +++ b/docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md @@ -0,0 +1,32 @@ +# 0003 - Gestion réactive et découplée des overlays et popovers (Pub/Sub) + +## Contexte +Dans la vue d'ensemble (`OverviewComponent`), de multiples éléments d'interface flottants et éphémères cohabitent (infobulles D3, menus contextuels de jalon/séance, suggestions de recherche typeahead, popover d'aide rapide, menu déroulant des groupes de TP, légende interactive). +L'architecture initiale présentait plusieurs fragilités et dettes techniques : +1. **Couplage fort et rôle omniscient du composant parent** : `OverviewComponent` agissait comme un contrôleur impératif manipulant directement ses composants enfants via `@ViewChild` (`closePopovers`, `close`, etc.). +2. **Hacks directs sur le DOM** : Destruction manuelle du DOM via `document.querySelector("ngb-typeahead-window")?.remove()` pour forcer la fermeture du typeahead Bootstrap sans notification Angular. +3. **Couplage du pipeline de données avec l'UI** : Le rechargement des données (`loadGraphDataAndRefresh`, modification des filtres ou de la légende) déclenchait des fermetures intempestives d'overlays et des pertes de focus sur l'input de recherche (`blur`). +4. **Désynchronisation entre D3 et Angular (`NgZone`)** : L'interception d'événements de souris dans D3 (notamment sur `mousedown`) hors de la zone Angular provoquait des glitches visuels lors de la fermeture des dropdowns (suppression immédiate du style CSS `transform` par ng-bootstrap avant le retrait effectif de la classe `.show` par la détection de changement, faisant sauter le menu en haut à gauche sous la barre de navigation pendant l'enfoncement du clic). +5. **Calcul de positionnement dynamique inadapté sur le menu contextuel** : Le menu contextuel utilisait `ngbDropdown` en mode dynamique (Popper.js) sans ancre (`_anchor`), alors qu'il est positionné de manière fixe via les coordonnées de la souris (`position: fixed; [style.left]="left"; [style.top]="top"`). + +## Décision +1. **Mise en place d'un service réactif d'orchestration (`OverlayManagerService`)** : + - Service singleton Angular (`providedIn: 'root'`) implémentant le patron **Publish-Subscribe (Pub/Sub)** via un `Subject`. + - Typage granulaire des overlays (`OverlayType` : `TOOLTIP`, `CONTEXT_MENU`, `TYPEAHEAD`, `QUICK_HELP`, `DROPDOWN`, `ALL`). + - Méthodes sémantiques : `dismiss(type, options)`, `dismissAll(options)`, `dismissTransient(options)`. +2. **Synchronisation garantie avec Angular (`NgZone`)** : + - Encapsulation systématique des émissions d'événements dans `this.ngZone.run(...)` au sein du service pour garantir que tout ordre de fermeture issu de D3 déclenche immédiatement un cycle de détection de changement synchrone sans étape intermédiaire visible. +3. **Autonomie et auto-gestion des composants récepteurs** : + - `QuestionsChooserComponent`, `OverviewGraphContextualMenuComponent`, `TooltipService` et `OverviewComponent` (pour ses menus locaux de barre d'outils) s'abonnent à `overlayManagerService.dismiss$` et gèrent leur propre fermeture via les API officielles (`dismissPopup()`, `close()`, `hide()`). + - Désabonnement automatique via l'opérateur RxJS `takeUntil(this.destroy$)` pour prévenir toute fuite mémoire. +4. **Découplage strict entre le rendu D3 et l'état de l'UI** : + - Le pipeline de chargement des données (`loadGraphData`, `loadGraphDataAndRefresh`) est hermétique et ne déclenche aucune fermeture d'overlay ni de perte de focus. + - Suppression du listener prématuré `mousedown` sur le conteneur D3 `.chart-container` : la fermeture des overlays s'effectue uniquement lors des gestes physiques de navigation réels (`zoom.on("start")` et `zoom.on("zoom")` avec `event.sourceEvent != null`, `wheel`, `scroll`, glisser-déposer de jalons). +5. **Désactivation du calcul dynamique Popper sur le menu contextuel** : + - Ajout de l'attribut `display="static"` sur le `
` du menu contextuel pour désactiver le calcul dynamique Popper et laisser le contrôle du positionnement au CSS inline (`position: fixed`). + +## Conséquences +- **Élimination complète des hacks DOM** : Plus aucun appel à `querySelector` pour manipuler ou supprimer des éléments de composants tiers. +- **Robustesse et extensibilité** : Tout nouvel overlay ou panneau ajouté dans l'application peut s'abonner à `OverlayManagerService` sans modifier `OverviewComponent`. +- **Fidélité visuelle et fin des sauts d'affichage** : Élimination définitive des scintillements et des sauts de dropdowns sous la barre de navigation. +- **Règle d'architecture formalisée** : Mise à jour de `GEMINI.md` imposant l'usage exclusif de `OverlayManagerService` pour coordonner la fermeture des overlays. diff --git a/src/app/components/edit-milestone/edit-milestone.component.html b/src/app/components/edit-milestone/edit-milestone.component.html index 48a93da..1b47396 100644 --- a/src/app/components/edit-milestone/edit-milestone.component.html +++ b/src/app/components/edit-milestone/edit-milestone.component.html @@ -45,12 +45,12 @@
- +
-
diff --git a/src/app/components/edit-milestone/edit-milestone.component.ts b/src/app/components/edit-milestone/edit-milestone.component.ts index 2f5aa90..e5517b2 100644 --- a/src/app/components/edit-milestone/edit-milestone.component.ts +++ b/src/app/components/edit-milestone/edit-milestone.component.ts @@ -12,6 +12,8 @@ import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref"; import * as moment from "moment"; import { TypePickerOption } from "@shared/ui/type-picker/type-picker.component"; +import { DataService } from "@services/data.service"; + @Component({ selector: "edit-milestone", templateUrl: "./edit-milestone.component.html", @@ -27,6 +29,14 @@ export class EditMilestoneComponent implements OnInit { @Input() notes: string; milestoneForm: FormGroup; + get resolvedTpGroups(): string[] { + return this.tpGroups?.length ? this.tpGroups : (this.dataService?.tpGroups || []); + } + + get resolvedQuestions(): string[] { + return this.questions?.length ? this.questions : (this.dataService?.questions || []); + } + milestoneTypes: TypePickerOption[] = [ { value: 'reviews', label: 'REVIEW', color: 'var(--color-primary)' }, { value: 'corrections', label: 'CORRECTION', color: 'var(--color-danger)' }, @@ -35,7 +45,8 @@ export class EditMilestoneComponent implements OnInit { constructor( public activeModalService: CustomModalRef, - public fb: FormBuilder + public fb: FormBuilder, + private dataService: DataService ) {} ngOnInit(): void { diff --git a/src/app/components/edit-session/edit-session.component.html b/src/app/components/edit-session/edit-session.component.html index 374d994..04442c4 100644 --- a/src/app/components/edit-session/edit-session.component.html +++ b/src/app/components/edit-session/edit-session.component.html @@ -28,9 +28,14 @@
+ + +
+
- +
diff --git a/src/app/components/edit-session/edit-session.component.ts b/src/app/components/edit-session/edit-session.component.ts index e3dd096..ddb7399 100644 --- a/src/app/components/edit-session/edit-session.component.ts +++ b/src/app/components/edit-session/edit-session.component.ts @@ -1,7 +1,9 @@ import { ChangeDetectionStrategy, + ChangeDetectorRef, Component, Input, + OnDestroy, OnInit, } from "@angular/core"; import { @@ -13,9 +15,12 @@ import { } from "@angular/forms"; import { Session } from "@models/Session.model"; import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref"; +import { DataService } from "@services/data.service"; import { Utils } from "@services/utils"; +import { TranslateService } from "@ngx-translate/core"; import * as moment from "moment"; import { Observable, Subject, merge } from "rxjs"; +import { takeUntil } from "rxjs/operators"; @Component({ selector: "app-edit-session", @@ -23,19 +28,28 @@ import { Observable, Subject, merge } from "rxjs"; styleUrls: ["./edit-session.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class EditSessionComponent implements OnInit { +export class EditSessionComponent implements OnInit, OnDestroy { @Input() session: Session; @Input() addMode: boolean; @Input() tpGroups: string[]; @Input() defaultSessionDuration; @Input() notes: string; sessionForm: FormGroup; + defaultLabel: string = ""; + private destroy$ = new Subject(); + + get resolvedTpGroups(): string[] { + return this.tpGroups?.length ? this.tpGroups : (this.dataService?.tpGroups || []); + } notesOpen: boolean = false; constructor( public activeModalService: CustomModalRef, - public fb: FormBuilder + public fb: FormBuilder, + private dataService: DataService, + private translateService: TranslateService, + private cdr: ChangeDetectorRef ) {} endTimeValidator(): ValidatorFn { @@ -60,7 +74,43 @@ export class EditSessionComponent implements OnInit { } ngOnInit(): void { + this.computeDefaultLabel(); this.initForm(); + + this.translateService.onLangChange + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.computeDefaultLabel(); + }); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + computeDefaultLabel() { + const group = this.session?.tpGroup || ""; + const sessions = this.dataService?.sessions || []; + const sameGroup = sessions + .filter((s) => (s.tpGroup || "") === group && s !== this.session) + .slice() + .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime()); + + const curTime = this.session?.startDate ? new Date(this.session.startDate).getTime() : 0; + let idx = sameGroup.findIndex((s) => new Date(s.startDate).getTime() > curTime); + let sessionNumber = idx === -1 ? sameGroup.length + 1 : idx + 1; + + const defaultName = this.translateService.instant("DEFAULT-SESSION-NAME", { + number: sessionNumber, + }); + if (defaultName && defaultName !== "DEFAULT-SESSION-NAME") { + this.defaultLabel = defaultName; + } else { + const sessionPrefix = this.translateService.instant("SESSION") || "Séance"; + this.defaultLabel = `${sessionPrefix} ${sessionNumber}`; + } + this.cdr.markForCheck(); } private initForm() { @@ -71,6 +121,7 @@ export class EditSessionComponent implements OnInit { const endStr = tEnd ? `${tEnd.hour.toString().padStart(2, '0')}:${tEnd.minute.toString().padStart(2, '0')}` : '14:00'; this.sessionForm = this.fb.group({ + label: [this.session.label || ""], date: [this.session.startDate, Validators.required], startTime: [startStr, Validators.required], endTime: [endStr, Validators.required], @@ -79,6 +130,13 @@ export class EditSessionComponent implements OnInit { }); this.sessionForm.setValidators(this.endTimeValidator()); + // Recompute default placeholder if TP group changes + this.sessionForm.get('tpGroup')?.valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.computeDefaultLabel(); + }); + // Open the notes section if there's already text in it if (this.session.notes && this.session.notes.trim().length > 0) { this.notesOpen = true; @@ -93,7 +151,6 @@ export class EditSessionComponent implements OnInit { this.sessionForm.markAsDirty(); } - deleteSession() { this.activeModalService.close(null); } @@ -112,8 +169,9 @@ export class EditSessionComponent implements OnInit { const session = new Session( startDate, endDate, - form.value.tpGroup.trim() || "", - form.value.notes.trim() || "" + form.value.tpGroup ? form.value.tpGroup.trim() : "", + form.value.notes ? form.value.notes.trim() : "", + form.value.label ? form.value.label.trim() : "" ); this.activeModalService.close(session); diff --git a/src/app/components/graphs/base-graph.component.ts b/src/app/components/graphs/base-graph.component.ts index daef71f..10105c8 100644 --- a/src/app/components/graphs/base-graph.component.ts +++ b/src/app/components/graphs/base-graph.component.ts @@ -36,7 +36,8 @@ export abstract class BaseGraphComponent implements OnInit { repositories: Repository[], reviews: Milestone[], corrections: Milestone[], - questions + questions, + conserveZoom: boolean = false ) { this.loaderService.loadCommitsMetadata( repositories, @@ -44,8 +45,8 @@ export abstract class BaseGraphComponent implements OnInit { corrections, questions ); - this.loadGraphDataAndRefresh(); + this.loadGraphDataAndRefresh(conserveZoom); } - abstract loadGraphDataAndRefresh(); + abstract loadGraphDataAndRefresh(conserveZoom?: boolean); } diff --git a/src/app/components/graphs/overview/chart.scss b/src/app/components/graphs/overview/chart.scss index 41f2265..5cc22c2 100644 --- a/src/app/components/graphs/overview/chart.scss +++ b/src/app/components/graphs/overview/chart.scss @@ -79,17 +79,131 @@ body.dark-theme .commit { opacity: 0.5; } +.session-edge { + stroke: var(--color-info); + stroke-width: 1px; + stroke-dasharray: 4 3; + stroke-opacity: 0.3; + pointer-events: none; + transition: stroke-opacity var(--transition-normal); +} + +.session-container { + cursor: default; + + .session-body { + cursor: default; + fill: var(--color-info); + fill-opacity: 0.08; + stroke: none; + transition: fill-opacity var(--transition-normal); + } + + &:hover { + .session-body { + fill-opacity: 0.14; + } + .session-edge { + stroke-opacity: 0.55; + } + } +} + +.session-header-container { + cursor: default; + pointer-events: auto; + + .session-header-top-bar { + fill: var(--color-primary); + opacity: 0.95; + pointer-events: none; + transition: opacity var(--transition-normal); + } + + .session-header-bg { + fill: var(--color-info); + fill-opacity: 0.08; + stroke: none; + pointer-events: auto; + cursor: default; + transition: fill-opacity var(--transition-normal); + } + + .session-header-fo { + pointer-events: auto; + overflow: hidden; + cursor: default; + } + + .session-pill { + cursor: default; + transition: box-shadow var(--transition-fast), border-color var(--transition-fast); + min-width: 0; + max-width: 100%; + overflow: hidden; + + .session-pill-text { + min-width: 0; + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + } + } + + .session-note-btn { + transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); + cursor: pointer; + pointer-events: auto; + + &:hover { + background-color: rgba(56, 189, 248, 0.12) !important; + border-color: var(--color-primary) !important; + color: var(--color-primary) !important; + } + } + + .session-more-btn { + color: var(--color-text-muted); + background: transparent; + border: none; + cursor: pointer; + pointer-events: auto; + transition: color var(--transition-fast), transform var(--transition-fast); + + &:hover { + color: var(--color-primary) !important; + transform: scale(1.1); + } + } + + &:hover { + .session-header-top-bar { + opacity: 1; + filter: brightness(1.15); + } + .session-header-bg { + fill-opacity: 0.14; + } + .session-edge { + stroke-opacity: 0.55; + } + } +} + +// Fallback legacy .session class .session { stroke-width: 1px; stroke: var(--color-info); fill: var(--color-info); - fill-opacity: 0.1; + fill-opacity: 0.08; rx: 8px; ry: 8px; transition: fill-opacity var(--transition-normal); &:hover { - fill-opacity: 0.25; + fill-opacity: 0.2; } } @@ -134,14 +248,17 @@ body.dark-theme .commit { .review { > rect:first-child, > rect:nth-child(2) { fill: var(--color-primary); stroke: 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-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-drag-badge .badge-progress { stroke: var(--color-secondary); } } .hitbox { diff --git a/src/app/components/graphs/overview/overview.component.html b/src/app/components/graphs/overview/overview.component.html index 46cbe71..f8eebed 100644 --- a/src/app/components/graphs/overview/overview.component.html +++ b/src/app/components/graphs/overview/overview.component.html @@ -7,11 +7,11 @@ [mode]="'search'" [openOnFocus]="true" [ngModel]="searchFilter" - (ngModelChange)="searchFilter = $event; loadGraphDataAndRefresh()" + (ngModelChange)="searchFilter = $event; loadGraphDataAndRefresh(false)" [maxPillsWidth]="'70%'" [commitMessages]="commitMessagesFilter" - (commitMessagesChange)="commitMessagesFilter = $event; loadGraphDataAndRefresh()" - (filterGroupsChange)="filterGroups = $event; loadGraphDataAndRefresh()" + (commitMessagesChange)="commitMessagesFilter = $event; loadGraphDataAndRefresh(false)" + (filterGroupsChange)="filterGroups = $event; loadGraphDataAndRefresh(false)" [noQuestionMessage]="false" > @@ -19,7 +19,7 @@
-
+
-
-
@@ -230,7 +230,7 @@
{{ 'OVERVIEW-GRAPH.NO-COMMITS-TIT
+ [class.no-milestones]="loading || !hasTopStrip()">
@@ -264,7 +264,7 @@
{{ 'OVERVIEW-GRAPH.NO-COMMITS-TIT
-
+
`); + .on("click", (e: MouseEvent) => { + e.stopPropagation(); + const rawDate = overview.getDateFromMouseEvent(e); + overview.openEditSessionContextMenu( + session, + e.pageX, + e.pageY, + rawDate + ); + }); } + + group + .select(".session-more-btn") + .on("mouseenter", (e: MouseEvent) => { + e.stopPropagation(); + overview.ngZone.run(() => { + overview.hovered_session = session; + overview.hovered_commit = undefined; + overview.hovered_group_commit = undefined; + overview.hovered_milestone = undefined; + }); + overview.refreshTooltip(e.clientX, e.clientY); + }) + .on("mousemove", (e: MouseEvent) => { + e.stopPropagation(); + if (overview.hovered_session) { + overview.refreshTooltip(e.clientX, e.clientY); + } + }) + .on("mouseleave", (e: MouseEvent) => { + e.stopPropagation(); + overview.ngZone.run(() => { + overview.hovered_session = undefined; + }); + overview.tooltipService.hide(); + }) + .on("click", (e: MouseEvent) => { + e.stopPropagation(); + const rawDate = overview.getDateFromMouseEvent(e); + overview.openEditSessionContextMenu( + session, + e.pageX, + e.pageY, + rawDate + ); + }); } loadSessions() { @@ -1197,22 +1609,70 @@ export class OverviewComponent session.tpGroup === this.dataService.groupFilter ); - this.session_g = this.data_g.insert("g", () => this.repository_g ? this.repository_g.node() : null); + this.session_g = this.data_g.insert("g", () => + this.repository_g ? this.repository_g.node() : null + ); + + if (this.chart_abs_g) { + const hitbox = this.chart_abs_g.select(".milestone-strip-hitbox"); + if (!hitbox.empty()) { + this.session_header_g = this.chart_abs_g + .insert("g", () => (hitbox.node() as Element).nextSibling as Element) + .attr("class", "sessions-headers-group") + .attr("clip-path", "url(#top-strip-clip)") + .style("pointer-events", "auto"); + } else { + this.session_header_g = this.chart_abs_g + .append("g") + .attr("class", "sessions-headers-group") + .attr("clip-path", "url(#top-strip-clip)") + .style("pointer-events", "auto"); + } + } const overview = this; - setTimeout(() => { - this.session_g - .selectAll(".session") + this.session_g + .selectAll(".session-container") + .data(loaded_sessions) + .enter() + .each(function (d: Session) { + overview.buildSessionBody(d3.select(this), d); + }); + + if (this.session_header_g) { + this.session_header_g + .selectAll(".session-header-container") .data(loaded_sessions) .enter() .each(function (d: Session) { - overview.getRectForSession(d3.select(this), d); + overview.buildSessionHeader(d3.select(this), d); }); - }); + } + + this.updateSessionsTransforms(); + } + + private resolveMilestoneType( + m?: Milestone, + g?: d3.Selection + ): string { + if (m?.type) { + return m.type; + } + if (g) { + if (g.classed("correction") || g.classed("corrections")) return "corrections"; + if (g.classed("other") || g.classed("others")) return "others"; + if (g.classed("review") || g.classed("reviews")) return "reviews"; + } + return "reviews"; } private buildMilestoneGraphics(g: d3.Selection, m: Milestone, index: number) { + if (!m.type) { + m.type = this.resolveMilestoneType(m, g); + } + // Line g.append("rect") .attr("x", 0) @@ -1228,7 +1688,10 @@ export class OverviewComponent let text = g .append("text") .attr("y", -6) - .text(m.label || m.type.substring(0, m.type.length - 1) + " " + index) + .text( + m.label || + (m.type.endsWith("s") ? m.type.slice(0, -1) : m.type) + " " + index + ) .attr("text-anchor", "middle"); let bbox = text.node().getBBox(); @@ -1258,13 +1721,19 @@ export class OverviewComponent .attr("style", "cursor: pointer; pointer-events: all;"); } - private readonly MILESTONE_COLOR_MAP: Record = { + readonly MILESTONE_COLOR_MAP: Record = { + review: "var(--color-primary)", + reviews: "var(--color-primary)", correction: "var(--color-danger)", + corrections: "var(--color-danger)", other: "var(--color-secondary)", + others: "var(--color-secondary)", }; - private getMilestoneColor(type: string): string { - return this.MILESTONE_COLOR_MAP[type] || "var(--color-primary)"; + getMilestoneColor(type?: string): string { + if (!type) return "var(--color-primary)"; + const normalizedType = type.toLowerCase().trim(); + return this.MILESTONE_COLOR_MAP[normalizedType] || "var(--color-primary)"; } private getEuclideanDistance( @@ -1313,7 +1782,8 @@ export class OverviewComponent // Progress circle (r = 8, circumference = 2 * PI * 8 ~= 50.265) const circumference = 2 * Math.PI * 8; - const progressColor = this.getMilestoneColor(m.type); + const milestoneType = this.resolveMilestoneType(m, g); + const progressColor = this.getMilestoneColor(milestoneType); const progressCircle = badgeContent .append("circle") @@ -1322,6 +1792,7 @@ export class OverviewComponent .attr("cy", 0) .attr("r", 8) .attr("stroke", progressColor) + .style("stroke", progressColor) .attr("stroke-dasharray", circumference) .attr("stroke-dashoffset", circumference) .attr("transform", "rotate(-90)"); @@ -1445,6 +1916,14 @@ export class OverviewComponent setTimeout(() => { overview.ignoreNextMilestoneClick = false; }, overview.MILESTONE_CLICK_SUPPRESSION_DELAY); + document.dispatchEvent( + new MouseEvent("click", { + bubbles: true, + cancelable: true, + clientX: upEvent.clientX, + clientY: upEvent.clientY, + }) + ); const rawDate = overview.getDateFromMouseEvent(upEvent); overview.openEditMilestoneContextMenu( m, @@ -1492,6 +1971,7 @@ export class OverviewComponent element: d3.Selection, m?: Milestone ) { + this.overlayManagerService.dismissTransient(); this.isDraggingMilestone = true; this.hasMovedDuringDrag = false; this.clearMilestoneHoverTimer(); @@ -1541,8 +2021,7 @@ export class OverviewComponent this.removeDragTimeIndicator(); if (hasMoved) { - this.saveData(); - this.loadGraphDataAndRefresh(); + this.updateAfterMilestoneChange(); } } @@ -1679,7 +2158,7 @@ export class OverviewComponent index: number ) { const overview = this; - let g = parent.append("g").attr("class", class_); + let g = parent.append("g").datum(m).attr("class", class_); this.buildMilestoneGraphics(g, m, index); @@ -1739,8 +2218,6 @@ export class OverviewComponent .on("click", (e) => { if (overview.ignoreNextMilestoneClick) { overview.ignoreNextMilestoneClick = false; - e.stopPropagation(); - e.preventDefault(); return; } overview.clearMilestoneHoverTimer(); @@ -1749,80 +2226,81 @@ export class OverviewComponent overview.tooltipService.hide(); } if (overview.isDraggingMilestone) return; - e.stopPropagation(); const rawDate = overview.getDateFromMouseEvent(e); overview.openEditMilestoneContextMenu(m, e.pageX, e.pageY, rawDate); }); } loadReviews(milestone_filter: (review: Milestone) => number | boolean) { - let loaded_reviews = this.dataService.reviews.filter(milestone_filter); + let loaded_reviews = this.dataService.reviews + .filter(milestone_filter) + .slice() + .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); this.review_g = this.chart_abs_g.append("g"); const overview = this; - setTimeout(() => { - this.review_g - .selectAll(".review") - .data(loaded_reviews) - .enter() - .each(function (d: Milestone, i) { - overview.getLineForMilestone( - d3.select(this), - d, - "milestone review", - i - ); - }); - }); + this.review_g + .selectAll(".review") + .data(loaded_reviews) + .enter() + .each(function (d: Milestone, i) { + overview.getLineForMilestone( + d3.select(this), + d, + "milestone review", + i + ); + }); } loadCorrections(milestone_filter: (review: Milestone) => number | boolean) { - let loaded_corrections = - this.dataService.corrections.filter(milestone_filter); + let loaded_corrections = this.dataService.corrections + .filter(milestone_filter) + .slice() + .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); this.correction_g = this.chart_abs_g.append("g"); const overview = this; - setTimeout(() => { - this.correction_g - .selectAll(".correction") - .data(loaded_corrections) - .enter() - .each(function (d: Milestone, i) { - overview.getLineForMilestone( - d3.select(this), - d, - "milestone correction", - i - ); - }); - }); + this.correction_g + .selectAll(".correction") + .data(loaded_corrections) + .enter() + .each(function (d: Milestone, i) { + overview.getLineForMilestone( + d3.select(this), + d, + "milestone correction", + i + ); + }); } loadOthers(milestone_filter: (review: Milestone) => number | boolean) { - let loaded_other = this.dataService.others.filter(milestone_filter); + let loaded_other = this.dataService.others + .filter(milestone_filter) + .slice() + .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); this.other_g = this.chart_abs_g.append("g"); const overview = this; - setTimeout(() => { - this.other_g - .selectAll(".other") - .data(loaded_other) - .enter() - .each(function (d: Milestone, i) { - overview.getLineForMilestone( - d3.select(this), - d, - "milestone other", - i - ); - }); - }); + this.other_g + .selectAll(".other") + .data(loaded_other) + .enter() + .each(function (d: Milestone, i) { + overview.getLineForMilestone( + d3.select(this), + d, + "milestone other", + i + ); + }); } setupAxis(repositories: Repository[], minDate: Date, maxDate: Date) { @@ -2007,7 +2485,6 @@ export class OverviewComponent } }) .on("click", (e, d) => { - e.stopPropagation(); let currentRange = parseFloat(g.attr("group_range")) || 0; this.zoomToGroup(d, currentRange); }); @@ -2039,7 +2516,6 @@ export class OverviewComponent }); g.on("click", (e, d) => { - e.stopPropagation(); let currentRange = parseFloat(g.attr("group_range")) || 0; this.zoomToGroup(d, currentRange); }); @@ -2550,25 +3026,235 @@ export class OverviewComponent if (!this.session_g) return; const overview = this; - this.session_g.selectAll(".session-container").each(function(s: Session) { + this.session_g.selectAll(".session-container").each(function (s: Session) { const g = d3.select(this); const rawX1 = overview.xScaledTimeZoned(s.startDate); const rawX2 = overview.xScaledTimeZoned(s.endDate); - - const cx1 = Math.max(-50, Math.min(overview.width + 50, rawX1)); - const cx2 = Math.max(-50, Math.min(overview.width + 50, rawX2)); - const width = Math.max(0, cx2 - cx1); - - g.select(".session") - .attr("x", cx1) - .attr("width", width); - - const icon = g.select(".session-icon"); - if (!icon.empty()) { - icon.attr("x", rawX1 + 4) - .style("visibility", width < 32 ? "hidden" : "visible"); + + const visX1 = Math.max(0, rawX1); + 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 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) { + this.session_header_g.selectAll(".session-header-container").each(function (s: Session) { + const g = d3.select(this); + const rawX1 = overview.xScaledTimeZoned(s.startDate); + const rawX2 = overview.xScaledTimeZoned(s.endDate); + + const visX1 = Math.max(0, rawX1); + 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) { + return; + } + + // 1. Continuous header background (clamped to 0..inner_width) + g.select(".session-header-bg") + .attr("x", visX1) + .attr("y", 0) + .attr("height", overview.inner_margin.top) + .attr("width", visWidth); + + // 2. Top blue accent bar (above milestone labels) + g.select(".session-header-top-bar") + .attr("x", visX1) + .attr("y", 0) + .attr("height", 3) + .attr("width", visWidth); + + // 3. Dashed vertical lines going all the way to y = 0 + const showLeft = rawX1 >= 0 && rawX1 <= overview.inner_width; + g.select(".session-header-edge-left") + .attr("x1", rawX1) + .attr("x2", rawX1) + .style("display", showLeft ? "inline" : "none"); + + const showRight = rawX2 >= 0 && rawX2 <= overview.inner_width; + g.select(".session-header-edge-right") + .attr("x1", rawX2) + .attr("x2", rawX2) + .style("display", showRight ? "inline" : "none"); + + // 4. Sticky badges: stick to x = 0 if rawX1 < 0, otherwise sit at rawX1 + const foX = visX1; + const foWidth = Math.max(0, visX2 - foX); + + const fo = g.select(".session-header-fo"); + fo.attr("x", foX) + .attr("width", foWidth); + + const displayName = overview.getSessionDisplayName(s); + const groupName = s.tpGroup || ""; + const hasNotes = !!(s.notes && s.notes.trim().length > 0); + const hasGroup = !!groupName; + + const namePill = g.select(".session-name-pill"); + const groupPill = g.select(".session-group-pill"); + const noteBtn = g.select(".session-note-btn"); + const moreBtn = g.select(".session-more-btn"); + + if (!namePill.empty()) { + namePill.select(".session-name-text").text(displayName); + } + + if (foWidth < 28) { + // Extremely narrow: hide badges completely + fo.style("visibility", "hidden"); + return; + } + + fo.style("visibility", "visible"); + + // Width estimations + const charWidth = 6.2; + const iconAndPadding = 29; // 11px icon + 4px gap + 14px padding + const nameNeeded = iconAndPadding + displayName.length * charWidth; + const groupNeeded = hasGroup ? (iconAndPadding + groupName.length * charWidth) : 0; + const noteBtnWidth = hasNotes ? 20 : 0; + const moreBtnWidth = 16; // width of "..." dots + const gap = 4; + const padTotal = 8; + + // Total needed to display all available session elements in full + const neededAll = nameNeeded + (hasGroup ? gap + groupNeeded : 0) + (hasNotes ? gap + noteBtnWidth : 0) + padTotal; + + if (foWidth >= neededAll) { + // Case 1: Everything fits without truncation + if (!namePill.empty()) { + namePill.style("display", "inline-flex").style("max-width", "none"); + } + if (!groupPill.empty()) { + groupPill.style("display", "inline-flex").style("max-width", "none"); + } + if (!noteBtn.empty()) { + noteBtn.style("display", "inline-flex"); + } + if (!moreBtn.empty()) { + moreBtn.style("display", "none"); + } + } else { + // Case 2: Constrained width - priority: Name > Group > Note + // When an item cannot be displayed or is truncated, show "..." (moreBtn) to indicate hidden info + const neededNameAndGroup = nameNeeded + (hasGroup ? gap + groupNeeded : 0) + padTotal; + const neededNameGroupMore = neededNameAndGroup + (hasNotes ? gap + moreBtnWidth : 0); + + if (hasGroup && foWidth >= neededNameGroupMore) { + // Name full, Group full, Note dropped -> show "..." if hasNotes + if (!namePill.empty()) { + namePill.style("display", "inline-flex").style("max-width", "none"); + } + if (!groupPill.empty()) { + groupPill.style("display", "inline-flex").style("max-width", "none"); + } + if (!noteBtn.empty()) { + noteBtn.style("display", "none"); + } + if (!moreBtn.empty()) { + moreBtn.style("display", hasNotes ? "inline-flex" : "none"); + } + } else if (hasGroup && foWidth >= nameNeeded + gap + 38 + (hasNotes ? gap + moreBtnWidth : 0) + padTotal) { + // Name full, Group truncated with ellipsis, Note dropped -> show "..." if hasNotes + const availableForGroup = foWidth - nameNeeded - (hasNotes ? gap + moreBtnWidth : 0) - gap - padTotal; + if (!namePill.empty()) { + namePill.style("display", "inline-flex").style("max-width", "none"); + } + if (!groupPill.empty()) { + groupPill.style("display", "inline-flex").style("max-width", `${Math.max(34, availableForGroup)}px`); + } + if (!noteBtn.empty()) { + noteBtn.style("display", "none"); + } + if (!moreBtn.empty()) { + moreBtn.style("display", hasNotes ? "inline-flex" : "none"); + } + } else if (foWidth >= nameNeeded + ((hasGroup || hasNotes) ? gap + moreBtnWidth : 0) + padTotal) { + // Name full, Group dropped, Note dropped -> show "..." if hasGroup or hasNotes + if (!namePill.empty()) { + namePill.style("display", "inline-flex").style("max-width", "none"); + } + if (!groupPill.empty()) { + groupPill.style("display", "none"); + } + if (!noteBtn.empty()) { + noteBtn.style("display", "none"); + } + if (!moreBtn.empty()) { + moreBtn.style("display", (hasGroup || hasNotes) ? "inline-flex" : "none"); + } + } else if (foWidth >= 38 + ((hasGroup || hasNotes) ? gap + moreBtnWidth : 0) + padTotal) { + // Name truncated with ellipsis, Group & Note dropped -> show "..." if hasGroup or hasNotes + const availableForName = foWidth - ((hasGroup || hasNotes) ? gap + moreBtnWidth : 0) - padTotal; + if (!namePill.empty()) { + namePill.style("display", "inline-flex").style("max-width", `${Math.max(34, availableForName)}px`); + } + if (!groupPill.empty()) { + groupPill.style("display", "none"); + } + if (!noteBtn.empty()) { + noteBtn.style("display", "none"); + } + if (!moreBtn.empty()) { + moreBtn.style("display", (hasGroup || hasNotes) ? "inline-flex" : "none"); + } + } else if (foWidth >= 38) { + // Only enough room for Name truncated with ellipsis + if (!namePill.empty()) { + namePill.style("display", "inline-flex").style("max-width", `${foWidth - 6}px`); + } + if (!groupPill.empty()) { + groupPill.style("display", "none"); + } + if (!noteBtn.empty()) { + noteBtn.style("display", "none"); + } + if (!moreBtn.empty()) { + moreBtn.style("display", "none"); + } + } else { + // Width between 28px and 38px: + // Too small for Name pill, show "..." badge representing the hidden session info + if (!namePill.empty()) { + namePill.style("display", "none"); + } + if (!groupPill.empty()) { + groupPill.style("display", "none"); + } + if (!noteBtn.empty()) { + noteBtn.style("display", "none"); + } + if (!moreBtn.empty()) { + moreBtn.style("display", "inline-flex"); + } + } + } + }); + } } private updateMilestoneTransforms() { @@ -2668,16 +3354,26 @@ export class OverviewComponent } resetZoom(conserve?: boolean) { - this.data_g - .transition() - .duration(750) - .call( - this.zoom.transform, - (conserve ? this.current_zoom : undefined) || + if (conserve) { + if (this.current_zoom) { + this.data_g.call(this.zoom.transform, this.current_zoom); + } else { + this.data_g.call( + this.zoom.transform, d3.zoomIdentity.translate(0, 0).scale(1) - ); + ); + } + return; + } - // this.svg.append("g").attr("class", "brush").call(this.brush); + this.current_zoom = null; + this.overlayManagerService.dismissTransient(); + if (this.data_g && this.zoom) { + this.data_g + .transition() + .duration(750) + .call(this.zoom.transform, d3.zoomIdentity.translate(0, 0).scale(1)); + } } toggleDisplayMode(mode: 'opacity' | 'height' | 'text') { @@ -2689,6 +3385,7 @@ export class OverviewComponent zoomToGroup(commits: Commit[], range: number) { if (!commits || commits.length < 2 || range <= 0) return; + this.overlayManagerService.dismissAll(); let time_domain = this.x_scale.domain(); let minDate = time_domain[0].valueOf() as number; @@ -2710,17 +3407,21 @@ export class OverviewComponent } searchSubmit() { - this.loadGraphDataAndRefresh(); + this.loadGraphDataAndRefresh(false); } onFilterGroupsChange(groups: FilterGroup[]) { this.filterGroups = groups; - this.loadGraphDataAndRefresh(); + this.loadGraphDataAndRefresh(false); } clearQuestionsFilter() { if (this.questionsChooser) { - this.questionsChooser.clearAll(); + if (typeof this.questionsChooser.handleEscape === "function") { + this.questionsChooser.handleEscape(); + } else { + this.questionsChooser.clearAll(); + } } } @@ -2734,14 +3435,84 @@ export class OverviewComponent }); } - private saveData() { + updateCommitColors() { + if (!this.repositories_g) return; + + this.repositories_g.forEach((repo_g) => { + repo_g.selectAll(".commit:not(.commit-group)").each(function () { + const commits = d3.select(this).datum() as Commit[]; + if (commits && commits[0]?.color) { + d3.select(this) + .selectAll(".commit-normal, .commit-cloture") + .attr("fill", commits[0].color.color); + } + }); + + repo_g.selectAll(".commit-group").each(function () { + const commits = d3.select(this).datum() as Commit[]; + if (commits && commits.length > 0) { + const lastCommit = commits[commits.length - 1]; + if (lastCommit?.color) { + d3.select(this) + .select("path") + .attr("fill", lastCommit.color.color); + } + } + }); + }); + } + + updateAfterMilestoneChange(hadStripBefore?: boolean) { this.dataService.saveData(); - this.loadGraphMetadata( + const hasStripAfter = this.hasTopStrip(); + if ( + hadStripBefore !== undefined && + hadStripBefore !== hasStripAfter + ) { + // The top strip appeared or disappeared, requiring layout recalculation + this.loadGraphMetadata( + this.dataService.repositories, + this.dataService.reviews, + this.dataService.corrections, + this.dataService.questions, + true + ); + return; + } + + this.loaderService.loadCommitsMetadata( this.dataService.repositories, this.dataService.reviews, this.dataService.corrections, this.dataService.questions ); + + this.loadMilestoneAnnotations(); + this.updateCommitColors(); + } + + updateAfterSessionChange(hadStripBefore?: boolean) { + this.dataService.saveData(); + const hasStripAfter = this.hasTopStrip(); + if ( + hadStripBefore !== undefined && + hadStripBefore !== hasStripAfter + ) { + // The top strip appeared or disappeared, requiring layout recalculation + this.loadGraphMetadata( + this.dataService.repositories, + this.dataService.reviews, + this.dataService.corrections, + this.dataService.questions, + true + ); + return; + } + this.loadSessionAnnotations(); + } + + private saveData() { + this.updateAfterMilestoneChange(); } } diff --git a/src/app/components/graphs/questions-completion/questions-completion.component.ts b/src/app/components/graphs/questions-completion/questions-completion.component.ts index 5896307..d5c3fbd 100644 --- a/src/app/components/graphs/questions-completion/questions-completion.component.ts +++ b/src/app/components/graphs/questions-completion/questions-completion.component.ts @@ -106,7 +106,7 @@ export class QuestionsCompletionComponent } } - loadGraphDataAndRefresh() { + loadGraphDataAndRefresh(conserveZoom?: boolean) { let translations = this.translateService.instant([ "QUESTION", "COMMITS-COUNT", diff --git a/src/app/components/graphs/students-commits/students-commits.component.ts b/src/app/components/graphs/students-commits/students-commits.component.ts index d559071..636d1ba 100644 --- a/src/app/components/graphs/students-commits/students-commits.component.ts +++ b/src/app/components/graphs/students-commits/students-commits.component.ts @@ -107,7 +107,7 @@ export class StudentsCommitsComponent } } - loadGraphDataAndRefresh() { + loadGraphDataAndRefresh(conserveZoom?: boolean) { let translations = this.translateService.instant([ "STUDENT", "COMMITS-COUNT", diff --git a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html index e8a8ef6..e04ea17 100644 --- a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html +++ b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html @@ -1,4 +1,4 @@ -
+