From 1334a601766871ab87ad2dcc17ef03cfbc879234 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Mon, 7 Sep 2026 10:52:44 +0200 Subject: [PATCH 1/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20search=20sh?= =?UTF-8?q?ortcuts,=20styling=20and=20lifecycle=20cleanup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graphs/overview/overview.component.ts | 34 ++- .../questions-chooser.component.html | 15 +- .../questions-chooser.component.scss | 65 +++--- .../questions-chooser.component.ts | 201 ++++++++++++------ 4 files changed, 217 insertions(+), 98 deletions(-) diff --git a/src/app/components/graphs/overview/overview.component.ts b/src/app/components/graphs/overview/overview.component.ts index a4f950e..7a29d8f 100644 --- a/src/app/components/graphs/overview/overview.component.ts +++ b/src/app/components/graphs/overview/overview.component.ts @@ -269,8 +269,10 @@ export class OverviewComponent @HostListener("document:keydown", ["$event"]) handleGlobalShortcuts(event: KeyboardEvent) { - if (document.body.classList.contains("modal-open")) return; - if (OsUtils.isTypingInInput(event)) { + if ( + document.body.classList.contains("modal-open") || + document.querySelector(".modal.show, .custom-modal-backdrop") !== null + ) { return; } @@ -280,7 +282,27 @@ export class OverviewComponent event.preventDefault(); this.clearQuestionsFilter(); this.triggerShortcut("escape"); - } else if (key === "r") { + return; + } + + if (OsUtils.isTypingInInput(event)) { + return; + } + + if ( + key === "f" && + !event.ctrlKey && + !event.metaKey && + !event.altKey + ) { + event.preventDefault(); + if (this.questionsChooser && typeof this.questionsChooser.focus === "function") { + this.questionsChooser.focus(); + } + return; + } + + if (key === "r") { event.preventDefault(); this.loadGraph(this.dataService.startDate, this.dataService.endDate); this.triggerShortcut("r"); @@ -2720,7 +2742,11 @@ export class OverviewComponent clearQuestionsFilter() { if (this.questionsChooser) { - this.questionsChooser.clearAll(); + if (typeof this.questionsChooser.handleEscape === "function") { + this.questionsChooser.handleEscape(); + } else { + this.questionsChooser.clearAll(); + } } } diff --git a/src/app/components/questions-chooser/questions-chooser.component.html b/src/app/components/questions-chooser/questions-chooser.component.html index 06e6c29..d437729 100644 --- a/src/app/components/questions-chooser/questions-chooser.component.html +++ b/src/app/components/questions-chooser/questions-chooser.component.html @@ -10,8 +10,7 @@ *ngIf="items.length > 0" (dragover)="onContainerDragOver($event)" (dragleave)="onContainerDragLeave($event)" - (drop)="onContainerDrop($event)" - style="position: relative;"> + (drop)="onContainerDrop($event)"> @@ -182,8 +181,8 @@ (mousedown)="$event.stopPropagation(); $event.preventDefault()" (click)="$event.stopPropagation()">
-
- +
+ @@ -346,18 +345,18 @@
-
-
+
+
! {{ 'QUESTIONS-CHOOSER-CHEAT-EXCLUDE' | translate }}
• -
+
⇥ Tab {{ 'QUESTIONS-CHOOSER-CHEAT-SUGGESTIONS' | translate }}
• -
+
? {{ 'QUESTIONS-CHOOSER-CHEAT-HELP' | translate }}
diff --git a/src/app/components/questions-chooser/questions-chooser.component.scss b/src/app/components/questions-chooser/questions-chooser.component.scss index 99c8f75..c1b6881 100644 --- a/src/app/components/questions-chooser/questions-chooser.component.scss +++ b/src/app/components/questions-chooser/questions-chooser.component.scss @@ -19,7 +19,7 @@ position: relative; &.disabled { - background-color: #e9ecef; + background-color: var(--color-hover); cursor: not-allowed; } } @@ -39,6 +39,7 @@ height: 100%; min-width: 0; /* Prevents intrinsic content size from overriding flex constraints */ box-sizing: border-box; + position: relative; /* Hide scrollbar for Chrome, Safari and Opera */ &::-webkit-scrollbar { @@ -52,7 +53,7 @@ .ghost-preview { opacity: 0.5; pointer-events: none; - box-shadow: 0 0 0 1px #3b82f6 inset; + box-shadow: 0 0 0 1px var(--color-primary) inset; } // ====================== @@ -62,8 +63,8 @@ .pill { display: inline-flex; align-items: center; - background-color: #eff6ff; - color: #1d4ed8; + background-color: var(--color-primary-bg); + color: var(--color-primary); border-radius: 9999px; padding: 0.1rem 0.5rem; margin-right: 0.5rem; @@ -104,7 +105,7 @@ margin-left: 0.4rem; cursor: pointer; opacity: 0.5; - color: #1d4ed8; + color: var(--color-primary); transition: opacity 150ms ease-out, transform 150ms ease-out; position: relative; @@ -144,8 +145,8 @@ } &.selected-pill { - border-color: #1d4ed8; - box-shadow: 0 0 0 1px #1d4ed8; + border-color: var(--color-primary); + box-shadow: 0 0 0 1px var(--color-primary); &.commit-pill { border-color: var(--color-text-secondary, #475569); @@ -217,7 +218,7 @@ opacity: 0.85; &.question-icon { - color: #1d4ed8; + color: var(--color-primary); } &.commit-icon { @@ -388,6 +389,14 @@ border-bottom: 1px solid var(--color-border); margin-bottom: 10px; + .quick-help-title-wrap { + gap: 6px; + + .quick-help-icon { + color: var(--color-primary); + } + } + .quick-help-title { font-size: 0.82rem; color: var(--color-text-primary); @@ -573,6 +582,11 @@ color: var(--color-text-muted); pointer-events: none; background: transparent; + gap: 8px; + + .cheat-group { + gap: 4px; + } .cheat-label { font-size: 0.68rem; @@ -592,40 +606,40 @@ :host-context(body.dark-theme) { .pill { - background-color: rgba(96, 165, 250, 0.15); - color: #60a5fa; + background-color: var(--color-primary-bg); + color: var(--color-primary); - .close-icon { color: #60a5fa; } + .close-icon { color: var(--color-primary); } &.selected-pill { - border-color: #60a5fa; - box-shadow: 0 0 0 1px #60a5fa; + border-color: var(--color-primary); + box-shadow: 0 0 0 1px var(--color-primary); } &.commit-pill { background-color: transparent; - color: var(--color-text-secondary, #94a3b8); - border-color: var(--color-border, #475569); + color: var(--color-text-secondary); + border-color: var(--color-border); &.selected-pill { - border-color: var(--color-text-secondary, #94a3b8); - box-shadow: 0 0 0 1px var(--color-text-secondary, #94a3b8); + border-color: var(--color-text-secondary); + box-shadow: 0 0 0 1px var(--color-text-secondary); } - .close-icon { color: var(--color-text-secondary, #94a3b8); } + .close-icon { color: var(--color-text-secondary); } } } .pill-icon.question-icon { - color: #60a5fa; + color: var(--color-primary); } .pill-icon.commit-icon { - color: var(--color-text-secondary, #94a3b8); + color: var(--color-text-secondary); } .connector-icon { - background: #3b82f6; + background: var(--color-primary); } .connector-icon.unlink-icon { @@ -633,7 +647,7 @@ } .pill.merged-right:not(.commit-pill) { - border-right-color: var(--color-border, #475569); + border-right-color: var(--color-border); } .pill-connector.merged { @@ -658,10 +672,9 @@ .quick-help-popover { .help-feature-card { - background: rgba(255, 255, 255, 0.04); - border-color: rgba(255, 255, 255, 0.08); + background: var(--color-hover); + border-color: var(--color-border); } - } .transparent-input { @@ -680,7 +693,7 @@ min-width: 50px; padding: 0; margin: 0; - color: #495057; + color: var(--color-text-primary); width: 100%; &:focus { diff --git a/src/app/components/questions-chooser/questions-chooser.component.ts b/src/app/components/questions-chooser/questions-chooser.component.ts index 7bc00e8..67fff58 100644 --- a/src/app/components/questions-chooser/questions-chooser.component.ts +++ b/src/app/components/questions-chooser/questions-chooser.component.ts @@ -10,13 +10,15 @@ import { QueryList, ElementRef, HostListener, + ChangeDetectorRef, + Optional, } from "@angular/core"; -import { ChangeDetectorRef } from "@angular/core"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; import { NgbTypeahead } from "@ng-bootstrap/ng-bootstrap"; import { merge, Observable, Subject } from "rxjs"; import { filter, map } from "rxjs/operators"; import { OsUtils } from "@utils/os.utils"; +import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service"; export interface FilterGroup { criteria: { @@ -71,7 +73,6 @@ export class QuestionsChooserComponent disabled: boolean; - pressedShortcut: string = null; showQuickHelp = false; helpShiftX = 0; helpShiftY = 0; @@ -133,13 +134,54 @@ export class QuestionsChooserComponent } } + private isModalOpen(): boolean { + if (this.customModalService && this.customModalService.hasOpenModals()) { + return true; + } + if (document.body.classList.contains("modal-open")) { + return true; + } + return !!document.querySelector(".modal.show, .custom-modal-backdrop"); + } + + handleEscape(event?: KeyboardEvent) { + if (this.isModalOpen()) return; + if (event) { + event.preventDefault(); + event.stopPropagation(); + } + + if (this.showQuickHelp) { + this.closeQuickHelp(); + } + if (this.instance && this.instance.isPopupOpen()) { + this.instance.dismissPopup(); + } + this.clearAll(); + if (this.inputField && this.inputField.nativeElement) { + this.inputField.nativeElement.blur(); + } + this.selectedPillIndex = null; + this.editingPillIndex = null; + this.cdr.markForCheck(); + } + + private getTypeaheadElement(): HTMLElement | null { + const ownsId = this.inputField?.nativeElement?.getAttribute("aria-owns"); + if (ownsId) { + const el = document.getElementById(ownsId); + if (el) return el; + } + return document.querySelector("ngb-typeahead-window") as HTMLElement; + } + updateHelpPosition() { if (!this.showQuickHelp) { this.resetHelpPosition(); return; } - const typeaheadEl = document.querySelector("ngb-typeahead-window") as HTMLElement; + const typeaheadEl = this.getTypeaheadElement(); const isTypeaheadVisible = typeaheadEl && ((this.instance && this.instance.isPopupOpen()) || @@ -156,7 +198,8 @@ export class QuestionsChooserComponent const typeaheadRect = typeaheadEl.getBoundingClientRect(); const containerRect = containerEl.getBoundingClientRect(); - const helpWidth = 360; + const helpEl = this.quickHelpPopover ? this.quickHelpPopover.nativeElement : null; + const helpWidth = helpEl && helpEl.offsetWidth > 0 ? helpEl.offsetWidth : Math.min(360, window.innerWidth - 32); // Resting position of quick-help-popover relative to viewport (top: calc(100% + 8px), right: 0 relative to pseudo-input-container): const restingTop = containerRect.bottom + 8; @@ -247,14 +290,18 @@ export class QuestionsChooserComponent }); } - const typeaheadEl = document.querySelector("ngb-typeahead-window") as HTMLElement; + const typeaheadEl = this.getTypeaheadElement(); if (typeaheadEl) { this.attachTypeaheadObservers(typeaheadEl); } this.updateHelpPosition(); - requestAnimationFrame(() => this.updateHelpPosition()); - setTimeout(() => this.updateHelpPosition(), 50); + requestAnimationFrame(() => { + this.updateHelpPosition(); + requestAnimationFrame(() => { + this.updateHelpPosition(); + }); + }); } private stopObservingTypeahead() { @@ -281,30 +328,33 @@ export class QuestionsChooserComponent return OsUtils.modifierKey; } + public focus() { + if (this.inputField && this.inputField.nativeElement) { + this.inputField.nativeElement.focus(); + } + } + @HostListener("document:keydown", ["$event"]) handleGlobalKeyDown(event: KeyboardEvent) { if (this.mode !== "search") return; - if (this.showQuickHelp && event.key === "Escape") { - this.showQuickHelp = false; - this.stopObservingTypeahead(); - this.resetHelpPosition(); - event.preventDefault(); + if (this.isModalOpen()) return; + + if (event.key === "Escape") { + this.handleEscape(event); return; } - if (event.key.toLowerCase() === "f") { + + if ( + event.key.toLowerCase() === "f" && + !event.ctrlKey && + !event.metaKey && + !event.altKey + ) { if (OsUtils.isTypingInInput(event)) { return; } event.preventDefault(); - - this.pressedShortcut = "f"; - if (this.inputField && this.inputField.nativeElement) { - this.inputField.nativeElement.focus(); - } - - setTimeout(() => { - if (this.pressedShortcut === "f") this.pressedShortcut = null; - }, 150); + this.focus(); } } @@ -341,22 +391,28 @@ export class QuestionsChooserComponent } public clearAll() { + this.question = ""; this.items = []; this.questions = []; this.commitMessages = []; this.selectedPillIndex = null; this.editingPillIndex = null; + this.isTypingExclusion = false; this.onChange(this.questions); this.commitMessagesChange.emit(this.commitMessages); this.emitFilterGroups(); } - constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) {} + constructor( + private elementRef: ElementRef, + private cdr: ChangeDetectorRef, + @Optional() private customModalService?: CustomModalService + ) {} @HostListener("document:click", ["$event"]) clickout(event) { if (!this.elementRef.nativeElement.contains(event.target)) { - const typeaheadWindow = document.querySelector("ngb-typeahead-window"); + const typeaheadWindow = this.getTypeaheadElement(); if (typeaheadWindow && typeaheadWindow.contains(event.target)) { return; } @@ -384,6 +440,17 @@ export class QuestionsChooserComponent return; // Let the editInput handle it } + if (event.key === "Escape") { + this.handleEscape(event); + return; + } + + if (event.key === "?" && this.mode === "search") { + event.preventDefault(); + this.toggleQuickHelp(); + return; + } + if (event.key === "ArrowLeft" && OsUtils.isModifierPressed(event)) { const currentGroup = this.getGroupRange(this.selectedPillIndex); if (currentGroup.start > 0) { @@ -480,6 +547,21 @@ export class QuestionsChooserComponent return results; } + private getMatchingQuestionSuggestions( + cleanSearch: string, + isEditing = false + ): string[] { + return this.questionSuggestions + .filter( + (question) => + (this.mode === "search" || + !this.questions.includes(question) || + (isEditing && question === this.editingOldValue)) && + question.toLowerCase().indexOf(cleanSearch.toLowerCase()) > -1 + ) + .slice(0, 8); + } + searchQuestions = (text: Observable) => { const clicksWithClosedPopup$ = this.click$.pipe( filter(() => !this.instance.isPopupOpen()) @@ -490,13 +572,7 @@ export class QuestionsChooserComponent const raw = (searchRaw || "").trim(); const isExclusion = this.isTypingExclusion || raw.startsWith("!"); const cleanSearch = raw.startsWith("!") ? raw.substring(1).trim() : raw; - const matchingQuestions = this.questionSuggestions - .filter( - (question) => - (this.mode === "search" || !this.questions.includes(question)) && - question.toLowerCase().indexOf(cleanSearch.toLowerCase()) > -1 - ) - .slice(0, 8); + const matchingQuestions = this.getMatchingQuestionSuggestions(cleanSearch, false); if (this.mode !== "search") { return matchingQuestions; @@ -517,15 +593,11 @@ export class QuestionsChooserComponent const raw = (searchRaw || "").trim(); const isExclusion = this.editingIsExclusion || raw.startsWith("!"); const cleanSearch = raw.startsWith("!") ? raw.substring(1).trim() : raw; - const matchingQuestions = this.questionSuggestions - .filter( - (question) => - (this.mode === "search" || - !this.questions.includes(question) || - question === this.editingOldValue) && - question.toLowerCase().indexOf(cleanSearch.toLowerCase()) > -1 - ) - .slice(0, 8); + const matchingQuestions = this.getMatchingQuestionSuggestions(cleanSearch, true); + + if (this.mode !== "search") { + return matchingQuestions; + } const results = this.buildTypeaheadResults(cleanSearch, matchingQuestions, isExclusion); if (this.showQuickHelp) { @@ -536,6 +608,18 @@ export class QuestionsChooserComponent ); }; + private onInputCaptureKeyDown = (event: KeyboardEvent) => { + if (event.key === "Tab") { + event.preventDefault(); + event.stopPropagation(); // Stop ngbTypeahead from processing the Tab key + if (this.instance.isPopupOpen()) { + this.instance.dismissPopup(); + } else { + this.click$.next(this.question || ""); + } + } + }; + ngOnInit(): void { this.disabled = false; this.questions = [...this.questions]; @@ -543,27 +627,27 @@ export class QuestionsChooserComponent this.commitMessages = [...this.commitMessages]; this.syncItemsFromInputs(); - this.inputField.nativeElement.addEventListener( - "keydown", - (event: KeyboardEvent) => { - if (event.key === "Tab") { - event.preventDefault(); - event.stopPropagation(); // Stop ngbTypeahead from processing the Tab key - if (this.instance.isPopupOpen()) { - this.instance.dismissPopup(); - } else { - this.click$.next(this.question || ""); - } - } - }, - true - ); // Use capture phase + if (this.inputField && this.inputField.nativeElement) { + this.inputField.nativeElement.addEventListener( + "keydown", + this.onInputCaptureKeyDown, + true + ); // Use capture phase + } } ngOnDestroy(): void { this.stopObservingTypeahead(); + if (this.inputField && this.inputField.nativeElement) { + this.inputField.nativeElement.removeEventListener( + "keydown", + this.onInputCaptureKeyDown, + true + ); + } this.focus$.unsubscribe(); this.click$.unsubscribe(); + this.editFocus$.unsubscribe(); } syncItemsFromInputs() { @@ -696,11 +780,8 @@ export class QuestionsChooserComponent } onMainInputKeyDown(event: KeyboardEvent) { - if (this.showQuickHelp && event.key === "Escape") { - this.showQuickHelp = false; - this.stopObservingTypeahead(); - this.resetHelpPosition(); - event.preventDefault(); + if (event.key === "Escape") { + this.handleEscape(event); return; } if ( From 6f8f3afcd7d3e441e42829c7e2141f49037425a2 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Mon, 7 Sep 2026 11:13:44 +0200 Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=8E=A8=20Replace=20question=20tag=20i?= =?UTF-8?q?con=20with=20question=20mark=20in=20questions=20chooser?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../questions-chooser.component.html | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/app/components/questions-chooser/questions-chooser.component.html b/src/app/components/questions-chooser/questions-chooser.component.html index d437729..42fabb8 100644 --- a/src/app/components/questions-chooser/questions-chooser.component.html +++ b/src/app/components/questions-chooser/questions-chooser.component.html @@ -38,8 +38,9 @@ - - + + + @@ -104,8 +105,9 @@ [class.merged-right]="di < getDraggedItems().length - 1" [class.merged-left]="di > 0"> - - + + + @@ -134,8 +136,9 @@ - - + + + @@ -202,7 +205,7 @@
- + #1
@@ -239,7 +242,7 @@
- + #1
@@ -302,8 +305,9 @@
- - + + + {{ 'QUESTIONS-CHOOSER-QUESTIONS-HEADER' | translate }}
@@ -332,8 +336,9 @@
- - + + + {{ 'QUESTIONS-CHOOSER-EXCLUDE-QUESTION' | translate }} From 3058a5e54c9fc3915e1588fbbbad3005ddd82191 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Mon, 7 Sep 2026 16:23:38 +0200 Subject: [PATCH 3/9] =?UTF-8?q?=F0=9F=90=9B=20Fix=20popovers=20auto-close?= =?UTF-8?q?=20on=20overview=20graph=20interaction=20and=20keep=20search=20?= =?UTF-8?q?input=20focus=20on=20enter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graphs/overview/overview.component.html | 2 +- .../graphs/overview/overview.component.ts | 58 ++++++++++++++++--- ...verview-graph-contextual-menu.component.ts | 24 ++++++-- .../questions-chooser.component.ts | 44 +++++++++----- 4 files changed, 99 insertions(+), 29 deletions(-) diff --git a/src/app/components/graphs/overview/overview.component.html b/src/app/components/graphs/overview/overview.component.html index 46cbe71..3169e4f 100644 --- a/src/app/components/graphs/overview/overview.component.html +++ b/src/app/components/graphs/overview/overview.component.html @@ -19,7 +19,7 @@
-
+
+
- +
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/overview/chart.scss b/src/app/components/graphs/overview/chart.scss index 41f2265..38bf306 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; } } diff --git a/src/app/components/graphs/overview/overview.component.html b/src/app/components/graphs/overview/overview.component.html index f069bbc..d476885 100644 --- a/src/app/components/graphs/overview/overview.component.html +++ b/src/app/components/graphs/overview/overview.component.html @@ -230,7 +230,7 @@
{{ 'OVERVIEW-GRAPH.NO-COMMITS-TIT
+ [class.no-milestones]="loading || !hasTopStrip()">
@@ -360,12 +360,35 @@
{{ "OVERVIEW-GRA
-
+
+ + {{ getSessionDisplayName(hovered_session) }} + + + + + + + + + {{ hovered_session.tpGroup }} + +
+
+ + {{ formatSessionTime(hovered_session) }} +
+
+
+ {{ 'EDIT-SESSION.NOTES' | translate }} +
+

{{ hovered_session.notes }}

-

{{ hovered_session.notes }}

svg { diff --git a/src/app/components/graphs/overview/overview.component.ts b/src/app/components/graphs/overview/overview.component.ts index 9fda9d0..0c3f8d6 100644 --- a/src/app/components/graphs/overview/overview.component.ts +++ b/src/app/components/graphs/overview/overview.component.ts @@ -31,6 +31,7 @@ import { BaseGraphComponent } from "../base-graph.component"; import { OsUtils } from "@utils/os.utils"; import * as d3 from "d3"; +import * as moment from "moment"; import { Repository } from "../../../models/Repository.model"; import { tick } from "@angular/core/testing"; import { rejects } from "assert"; @@ -123,6 +124,7 @@ export class OverviewComponent axis_abs_g: d3.Selection; other_g: d3.Selection; session_g: d3.Selection; + session_header_g: d3.Selection; review_g: d3.Selection; correction_g: d3.Selection; commits_line_g: d3.Selection; @@ -212,18 +214,18 @@ export class OverviewComponent onMarkerChange(marker: string) { this.markerHoverState[marker].wasClicked = true; - if (marker === 'sessions') { - this.loadSessionAnnotations(); - return; - } const chartDiv = document.getElementById("chart"); const currentlyHasNoMilestonesClass = chartDiv?.classList.contains("no-milestones") ?? false; - const willHaveNoMilestones = this.loading || !this.hasDisplayedMilestones(); + const willHaveNoStrip = this.loading || !this.hasTopStrip(); - if (currentlyHasNoMilestonesClass !== willHaveNoMilestones) { + if (currentlyHasNoMilestonesClass !== willHaveNoStrip) { this.loadGraphDataAndRefresh(); } else { - this.loadMilestoneAnnotations(); + if (marker === 'sessions') { + this.loadSessionAnnotations(); + } else { + this.loadMilestoneAnnotations(); + } } } @@ -470,13 +472,8 @@ export class OverviewComponent } toggleCategory(label: string) { - if (label === 'SESSION') { - this.showSessions = !this.showSessions; - this.saveMarkerPreferences(); - this.loadSessionAnnotations(); - return; - } - if (label === 'REVIEW' || label === 'CORRECTION' || label === 'OTHER') { + if (label === 'SESSION' || label === 'REVIEW' || label === 'CORRECTION' || label === 'OTHER') { + if (label === 'SESSION') this.showSessions = !this.showSessions; if (label === 'REVIEW') this.showReviews = !this.showReviews; if (label === 'CORRECTION') this.showCorrections = !this.showCorrections; if (label === 'OTHER') this.showOthers = !this.showOthers; @@ -484,12 +481,16 @@ export class OverviewComponent const chartDiv = document.getElementById("chart"); const currentlyHasNoMilestonesClass = chartDiv?.classList.contains("no-milestones") ?? false; - const willHaveNoMilestones = this.loading || !this.hasDisplayedMilestones(); + const willHaveNoStrip = this.loading || !this.hasTopStrip(); - if (currentlyHasNoMilestonesClass !== willHaveNoMilestones) { + if (currentlyHasNoMilestonesClass !== willHaveNoStrip) { this.loadGraphDataAndRefresh(); } else { - this.loadMilestoneAnnotations(); + if (label === 'SESSION') { + this.loadSessionAnnotations(); + } else { + this.loadMilestoneAnnotations(); + } } return; } @@ -530,12 +531,25 @@ export class OverviewComponent ); } + hasDisplayedSessions(): boolean { + if (!this.dataService || !this.showSessions) return false; + const session_filter = (s: Session) => + !this.dataService.groupFilter || + !s.tpGroup || + s.tpGroup === this.dataService.groupFilter; + return !!this.dataService.sessions?.some(session_filter); + } + + hasTopStrip(): boolean { + return this.hasDisplayedMilestones() || this.hasDisplayedSessions(); + } + updateVariableFromCss(): void { let chart_div = document.getElementById("chart"); if (!chart_div) return; - const noMilestones = this.loading || !this.hasDisplayedMilestones(); - if (noMilestones) { + const noTopStrip = this.loading || !this.hasTopStrip(); + if (noTopStrip) { chart_div.classList.add("no-milestones"); } else { chart_div.classList.remove("no-milestones"); @@ -588,6 +602,10 @@ export class OverviewComponent this.height - this.inner_margin.top - this.inner_margin.bottom ); + if (this.svg_abs) { + this.svg_abs.select("#top-strip-clip rect").attr("width", this.inner_width); + } + this.repo_spacing = css_var_number("repo-space"); } @@ -619,6 +637,7 @@ export class OverviewComponent noMatchesText: this.translateService.instant("SEARCH-NOT-FOUND"), suggestionLimit: 5, }; + this.updateSessionsTransforms(); } loadGraph(startDate?: string, endDate?: string) { @@ -660,20 +679,24 @@ export class OverviewComponent this.hovered_session || this.hovered_milestone ) { - if (!this.tooltipService.isShowing()) { - this.tooltipService.showAtPosition( - this.d3TooltipTemplate, - x, - y, - "right", - undefined, - true - ); - } else { - this.tooltipService.moveTooltip(x, y, "right"); - } + this.ngZone.run(() => { + if (!this.tooltipService.isShowing()) { + this.tooltipService.showAtPosition( + this.d3TooltipTemplate, + x, + y, + "right", + undefined, + true + ); + } else { + this.tooltipService.moveTooltip(x, y, "right"); + } + }); } else { - this.tooltipService.hide(); + this.ngZone.run(() => { + this.tooltipService.hide(); + }); } } @@ -851,7 +874,17 @@ export class OverviewComponent .append("g") .attr("transform", "translate(" + translation + ")"); - if (this.hasDisplayedMilestones() && this.inner_margin.top > 0) { + this.svg_abs + .append("defs") + .append("svg:clipPath") + .attr("id", "top-strip-clip") + .append("svg:rect") + .attr("x", 0) + .attr("y", 0) + .attr("width", this.inner_width) + .attr("height", this.height); + + if (this.hasTopStrip() && this.inner_margin.top > 0) { this.chart_abs_g .append("rect") .attr("class", "milestone-strip-hitbox") @@ -963,6 +996,10 @@ export class OverviewComponent this.session_g.remove(); this.session_g = null; } + if (this.session_header_g != null) { + this.session_header_g.remove(); + this.session_header_g = null; + } if (this.filteredCommitsCount === 0) { return; } @@ -1077,9 +1114,9 @@ export class OverviewComponent this.hovered_milestone = undefined; this.tooltipService.hide(); } - const hadMilestonesBefore = this.hasDisplayedMilestones(); + const hadStripBefore = this.hasTopStrip(); this.saveMilestone(result.oldMilestone, result.newMilestone); - this.updateAfterMilestoneChange(hadMilestonesBefore); + this.updateAfterMilestoneChange(hadStripBefore); let translations = this.translateService.instant([ "SUCCESS", @@ -1112,8 +1149,13 @@ export class OverviewComponent onSaveSession(result: { oldSession: Session; newSession: Session }) { try { + if (this.hovered_session) { + this.hovered_session = undefined; + this.tooltipService.hide(); + } + const hadStripBefore = this.hasTopStrip(); this.saveSession(result.oldSession, result.newSession); - this.updateAfterSessionChange(); + this.updateAfterSessionChange(hadStripBefore); let translations = this.translateService.instant([ "SUCCESS", @@ -1146,8 +1188,13 @@ export class OverviewComponent onDeleteSession(session: Session) { try { + if (this.hovered_session) { + this.hovered_session = undefined; + this.tooltipService.hide(); + } + const hadStripBefore = this.hasTopStrip(); this.deleteSession(session); - this.updateAfterSessionChange(); + this.updateAfterSessionChange(hadStripBefore); let translations = this.translateService.instant([ "SUCCESS", @@ -1169,9 +1216,9 @@ export class OverviewComponent this.hovered_milestone = undefined; this.tooltipService.hide(); } - const hadMilestonesBefore = this.hasDisplayedMilestones(); + const hadStripBefore = this.hasTopStrip(); this.deleteMilestone(milestone); - this.updateAfterMilestoneChange(hadMilestonesBefore); + this.updateAfterMilestoneChange(hadStripBefore); let translations = this.translateService.instant([ "SUCCESS", @@ -1200,12 +1247,54 @@ export class OverviewComponent ); } - getRectForSession(g: d3.Selection, session: Session) { + getSessionDisplayName(session: Session): string { + if (!session) return ""; + if (session.label && session.label.trim().length > 0) { + return session.label.trim(); + } + const allSessions = this.dataService?.sessions || []; + const sameGroup = allSessions + .filter((s) => (s.tpGroup || "") === (session.tpGroup || "")) + .slice() + .sort( + (a, b) => + new Date(a.startDate).getTime() - new Date(b.startDate).getTime() + ); + + const idx = sameGroup.indexOf(session); + const num = idx >= 0 ? idx + 1 : 1; + const defaultName = this.translateService.instant("DEFAULT-SESSION-NAME", { + number: num, + }); + if (defaultName && defaultName !== "DEFAULT-SESSION-NAME") { + return defaultName; + } + const sessionPrefix = this.translateService.instant("SESSION") || "Séance"; + return `${sessionPrefix} ${num}`; + } + + formatSessionTime(session: Session): string { + if (!session) return ""; + const start = moment(session.startDate); + const end = moment(session.endDate); + if (start.isSame(end, "day")) { + return `${start.format("DD/MM/YYYY")} · ${start.format( + "HH:mm" + )} - ${end.format("HH:mm")}`; + } + return `${start.format("DD/MM/YYYY HH:mm")} - ${end.format( + "DD/MM/YYYY HH:mm" + )}`; + } + + buildSessionBody(g: d3.Selection, session: Session) { const overview = this; - - let group = g.append("g") + const sessionKey = session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime(); + + let group = g + .append("g") .datum(session) - .attr("class", "session-container") + .attr("class", `session-container session-group-${sessionKey}`) .attr("clip-path", "url(#clip)") .on("contextmenu", (e) => { e.preventDefault(); @@ -1226,50 +1315,264 @@ export class OverviewComponent e.pageY, rawDate ); + }) + .on("mouseenter", () => { + d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", "0.14"); + d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", "0.55"); + }) + .on("mouseleave", () => { + d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", null); + d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", null); }); const rawX1 = this.xScaledTimeZoned(session.startDate); const rawX2 = this.xScaledTimeZoned(session.endDate); - const cx1 = Math.max(-50, Math.min(this.width + 50, rawX1)); - const cx2 = Math.max(-50, Math.min(this.width + 50, rawX2)); - const width = Math.max(0, cx2 - cx1); + const visX1 = Math.max(0, rawX1); + const visX2 = Math.min(this.inner_width, rawX2); + const visWidth = Math.max(0, visX2 - visX1); - group.append("rect") - .attr("class", "session") - .attr("x", cx1) + // Tinted body background (fill only, no stroke, so no top border) + group + .append("rect") + .attr("class", `session-body session-bg-${sessionKey}`) + .attr("x", visX1) + .attr("y", 0) .attr("height", this.scrollable_height) + .attr("width", visWidth); + + // Left vertical dashed line + group + .append("line") + .attr("class", `session-edge session-edge-left session-edge-${sessionKey}`) + .attr("x1", rawX1) + .attr("y1", 0) + .attr("x2", rawX1) + .attr("y2", this.scrollable_height) + .style("display", rawX1 >= 0 && rawX1 <= this.inner_width ? "inline" : "none"); + + // Right vertical dashed line + group + .append("line") + .attr("class", `session-edge session-edge-right session-edge-${sessionKey}`) + .attr("x1", rawX2) + .attr("y1", 0) + .attr("x2", rawX2) + .attr("y2", this.scrollable_height) + .style("display", rawX2 >= 0 && rawX2 <= this.inner_width ? "inline" : "none"); + } + + buildSessionHeader(g: d3.Selection, session: Session) { + const overview = this; + const sessionKey = session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime(); + + let group = g + .append("g") + .datum(session) + .attr("class", `session-header-container session-hdr-group-${sessionKey}`) + .style("pointer-events", "auto") + .on("contextmenu", (e) => { + e.preventDefault(); + e.stopPropagation(); + const rawDate = overview.getDateFromMouseEvent(e); + overview.openEditSessionContextMenu( + session, + e.pageX, + e.pageY, + rawDate + ); + }) + .on("click", (e) => { + const rawDate = overview.getDateFromMouseEvent(e); + overview.openEditSessionContextMenu( + session, + e.pageX, + e.pageY, + rawDate + ); + }) + .on("mouseenter", () => { + d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", "0.14"); + d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", "0.55"); + }) + .on("mouseleave", () => { + d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", null); + d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", null); + }); + + const rawX1 = this.xScaledTimeZoned(session.startDate); + const rawX2 = this.xScaledTimeZoned(session.endDate); + const visX1 = Math.max(0, rawX1); + const visX2 = Math.min(this.inner_width, rawX2); + const visWidth = Math.max(0, visX2 - visX1); + + const displayName = this.getSessionDisplayName(session); + const hasNotes = !!(session.notes && session.notes.trim().length > 0); + const groupName = session.tpGroup || ""; + + const usersSvg = ``; + + const calendarSvg = ``; + + const noteSvg = ``; + + // 1. Continuous header background filling top strip behind pills + group + .append("rect") + .attr("class", `session-header-bg session-bg-${sessionKey}`) + .attr("x", visX1) + .attr("y", 0) + .attr("height", this.inner_margin.top) + .attr("width", visWidth) + .style("pointer-events", "auto"); + + // 2. Left vertical dashed line (header) + group + .append("line") + .attr("class", `session-edge session-header-edge-left session-edge-${sessionKey}`) + .attr("x1", rawX1) + .attr("y1", 0) + .attr("x2", rawX1) + .attr("y2", this.inner_margin.top) + .style("display", rawX1 >= 0 && rawX1 <= this.inner_width ? "inline" : "none"); + + // 3. Right vertical dashed line (header) + group + .append("line") + .attr("class", `session-edge session-header-edge-right session-edge-${sessionKey}`) + .attr("x1", rawX2) + .attr("y1", 0) + .attr("x2", rawX2) + .attr("y2", this.inner_margin.top) + .style("display", rawX2 >= 0 && rawX2 <= this.inner_width ? "inline" : "none"); + + // 4. Top blue accent bar (above milestone labels and dashed line tops) + group + .append("rect") + .attr("class", `session-header-top-bar session-bar-${sessionKey}`) + .attr("x", visX1) .attr("y", 0) - .attr("width", width); - - if (session.notes) { - group.append("foreignObject") - .attr("class", "session-icon") - .attr("x", rawX1 + 4) - .attr("y", 4) - .attr("width", 24) - .attr("height", 24) - .style("visibility", width < 32 ? "hidden" : "visible") - .on("mouseenter", (e, d) => { + .attr("height", 3) + .attr("width", visWidth) + .attr("rx", 1.5) + .attr("ry", 1.5); + + // 5. Sticky foreignObject for pills + const foX = visX1; + const foWidth = Math.max(0, visX2 - foX); + + const fo = group + .append("foreignObject") + .attr("class", "session-header-fo") + .attr("x", foX) + .attr("y", 3) + .attr("width", foWidth) + .attr("height", 23) + .style("visibility", foWidth < 28 ? "hidden" : "visible") + .style("pointer-events", "auto") + .style("overflow", "hidden"); + + fo.html(` +
+ + + ${calendarSvg} + ${displayName} + + + ${groupName ? ` + + ${usersSvg} + ${groupName} + ` : ''} + + ${hasNotes ? ` + + ${noteSvg} + ` : ''} + + +
+ `); + + if (hasNotes) { + group + .select(".session-note-btn") + .on("mouseenter", (e: MouseEvent) => { e.stopPropagation(); - overview.hovered_session = d; - overview.hovered_commit = undefined; - overview.hovered_group_commit = undefined; - overview.hovered_g = d3.select(e.currentTarget); + 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) => { + .on("mousemove", (e: MouseEvent) => { e.stopPropagation(); if (overview.hovered_session) { overview.refreshTooltip(e.clientX, e.clientY); } }) - .on("mouseleave", (e) => { + .on("mouseleave", (e: MouseEvent) => { e.stopPropagation(); - overview.hovered_session = undefined; - overview.refreshTooltip(); + overview.ngZone.run(() => { + overview.hovered_session = undefined; + }); + overview.tooltipService.hide(); }) - .html(``); + .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() { @@ -1280,18 +1583,47 @@ 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; this.session_g - .selectAll(".session") + .selectAll(".session-container") .data(loaded_sessions) .enter() .each(function (d: Session) { - overview.getRectForSession(d3.select(this), d); + 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.buildSessionHeader(d3.select(this), d); + }); + } + this.updateSessionsTransforms(); } @@ -2638,25 +2970,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() { @@ -2861,15 +3403,15 @@ export class OverviewComponent }); } - updateAfterMilestoneChange(hadMilestonesBefore?: boolean) { + updateAfterMilestoneChange(hadStripBefore?: boolean) { this.dataService.saveData(); - const hasMilestonesAfter = this.hasDisplayedMilestones(); + const hasStripAfter = this.hasTopStrip(); if ( - hadMilestonesBefore !== undefined && - hadMilestonesBefore !== hasMilestonesAfter + hadStripBefore !== undefined && + hadStripBefore !== hasStripAfter ) { - // The top milestone strip appeared or disappeared, requiring layout recalculation + // The top strip appeared or disappeared, requiring layout recalculation this.loadGraphMetadata( this.dataService.repositories, this.dataService.reviews, @@ -2890,8 +3432,22 @@ export class OverviewComponent this.updateCommitColors(); } - updateAfterSessionChange() { + 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 + ); + return; + } this.loadSessionAnnotations(); } diff --git a/src/app/models/Session.model.ts b/src/app/models/Session.model.ts index 694b3f3..a3ab4ef 100644 --- a/src/app/models/Session.model.ts +++ b/src/app/models/Session.model.ts @@ -21,7 +21,8 @@ export class Session { startDate: Date, endDate: Date, public tpGroup?: string, - public notes?: string + public notes?: string, + public label?: string ) { this.startDate = moment(startDate).toDate(); this.endDate = moment(endDate).toDate(); @@ -33,7 +34,13 @@ export class Session { * @returns A session */ static withJSON(json): Session { - return new Session(json.startDate, json.endDate, json.tpGroup, json.notes); + return new Session( + json.startDate, + json.endDate, + json.tpGroup, + json.notes, + json.label + ); } /** @@ -51,6 +58,9 @@ export class Session { if (this.notes) { json["notes"] = this.notes; } + if (this.label) { + json["label"] = this.label; + } return json; } } diff --git a/src/app/services/data.service.ts b/src/app/services/data.service.ts index b04668c..8fd3c80 100644 --- a/src/app/services/data.service.ts +++ b/src/app/services/data.service.ts @@ -15,7 +15,7 @@ export class DataService { /** * The TP groups of the class */ - tpGroups: string[]; + private _tpGroups: string[] = []; /** * The date on which the data was last recovered from Github @@ -50,7 +50,7 @@ export class DataService { constructor(private databaseService: DatabaseService) { this.repoToLoad = false; this.barIndex = 5; - this.tpGroups = []; + this._tpGroups = []; this.hideDeleteRepoConfirmation = false; this.groupFilter = ""; } @@ -87,12 +87,60 @@ export class DataService { this.assignment.title = title; } + get tpGroups(): string[] { + const groups = new Set(this._tpGroups || []); + if (this._assignment?.repositories) { + for (const repo of this._assignment.repositories) { + if (repo.tpGroup && repo.tpGroup.trim()) { + groups.add(repo.tpGroup.trim()); + } + } + } + if (this._assignment?.sessions) { + for (const session of this._assignment.sessions) { + if (session.tpGroup && session.tpGroup.trim()) { + groups.add(session.tpGroup.trim()); + } + } + } + const allMilestones = [ + ...(this._assignment?.corrections || []), + ...(this._assignment?.reviews || []), + ...(this._assignment?.others || []), + ]; + for (const m of allMilestones) { + if (m.tpGroup && m.tpGroup.trim()) { + groups.add(m.tpGroup.trim()); + } + } + return Array.from(groups).sort(); + } + + set tpGroups(groups: string[]) { + this._tpGroups = groups || []; + } + get questions(): string[] { - return this.assignment?.questions; + const qSet = new Set(this.assignment?.questions || []); + const allMilestones = [ + ...(this.assignment?.corrections || []), + ...(this.assignment?.reviews || []), + ...(this.assignment?.others || []), + ]; + for (const m of allMilestones) { + if (m.questions && Array.isArray(m.questions)) { + for (const q of m.questions) { + if (q && q.trim()) qSet.add(q.trim()); + } + } + } + return Array.from(qSet); } set questions(questions: string[]) { - this.assignment.questions = questions; + if (this.assignment) { + this.assignment.questions = questions; + } } get repositories(): Repository[] { diff --git a/src/app/services/database.service.ts b/src/app/services/database.service.ts index db112c2..27346dc 100644 --- a/src/app/services/database.service.ts +++ b/src/app/services/database.service.ts @@ -21,6 +21,19 @@ export class DatabaseService extends Dexie { this.version(1).stores({ assignments: "++id, metadata.title", }); + this.version(2).stores({ + assignments: "++id, metadata.title", + }).upgrade(tx => { + return tx.table("assignments").toCollection().modify(assignment => { + if (assignment.sessions && Array.isArray(assignment.sessions)) { + assignment.sessions.forEach((session: any) => { + if (session.label === undefined) { + session.label = ""; + } + }); + } + }); + }); this.assignments = this.table("assignments"); this.assignments.mapToClass(Assignment); } diff --git a/src/app/shared/ui/custom-modal/custom-modal.service.ts b/src/app/shared/ui/custom-modal/custom-modal.service.ts index d3a88ca..b2a47c5 100644 --- a/src/app/shared/ui/custom-modal/custom-modal.service.ts +++ b/src/app/shared/ui/custom-modal/custom-modal.service.ts @@ -36,6 +36,7 @@ export class CustomModalService { options: CustomModalOptions = {} ): CustomModalRef { this.openModalsCount++; + document.body.classList.add("custom-modal-open"); // 1. Create the container component (the overlay and modal dialog) const containerFactory = this.componentFactoryResolver.resolveComponentFactory( @@ -97,6 +98,9 @@ export class CustomModalService { // Cleanup when modal closes customModalRef.result.finally(() => { this.openModalsCount = Math.max(0, this.openModalsCount - 1); + if (this.openModalsCount === 0) { + document.body.classList.remove("custom-modal-open"); + } document.body.style.overflow = previousBodyOverflow; this.appRef.detachView(containerRef.hostView); containerRef.destroy(); diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 78980d2..529be8f 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -6,6 +6,7 @@ "CORRECTION": "Correction", "OTHER": "Other", "SESSION": "Session", + "DEFAULT-SESSION-NAME": "Session {{number}}", "SEARCH-NOT-FOUND": "No questions found", "QUESTIONS": "Questions", "DATE": "Date", @@ -324,6 +325,7 @@ "EDIT-SESSION": { "CREATE-TITLE": "Create session", "EDIT-TITLE": "Edit session", + "LABEL-LABEL": "Session name (optional)", "DATE-LABEL": "Date", "START-TIME-LABEL": "Start time", "END-TIME-LABEL": "End time", diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 15a171d..a88a3c6 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -6,6 +6,7 @@ "CORRECTION": "Correction", "OTHER": "Autre", "SESSION": "Séance", + "DEFAULT-SESSION-NAME": "Séance {{number}}", "SEARCH-NOT-FOUND": "Aucune question trouvée", "DATE": "Date", "TP-GROUP-SELECT": { @@ -324,6 +325,7 @@ "EDIT-SESSION": { "CREATE-TITLE": "Créer une séance", "EDIT-TITLE": "Editer la séance", + "LABEL-LABEL": "Nom de la séance (optionnel)", "DATE-LABEL": "Date", "START-TIME-LABEL": "Heure de début", "END-TIME-LABEL": "Heure de fin", diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index 186a834..bb1bcc6 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -6,6 +6,7 @@ "CORRECTION": "Исправление", "OTHER": "Другое", "SESSION": "Сеанс", + "DEFAULT-SESSION-NAME": "Сеанс {{number}}", "SEARCH-NOT-FOUND": "Вопросы не найдены", "QUESTIONS": "Вопросы", "DATE": "Дата", @@ -321,6 +322,7 @@ "EDIT-SESSION": { "CREATE-TITLE": "Создать сеанс", "EDIT-TITLE": "Редактировать сеанс", + "LABEL-LABEL": "Название занятия (необязательно)", "DATE-LABEL": "Дата", "START-TIME-LABEL": "Время начала", "END-TIME-LABEL": "Время окончания", diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 957aa7b..ffb2f8f 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -1964,6 +1964,12 @@ ngb-typeahead-window { } } +// When a modal is open, elevate typeahead dropdown above the modal ($zindex-modal: 1210) +body.custom-modal-open ngb-typeahead-window, +body:has(app-custom-modal-container) ngb-typeahead-window { + z-index: $zindex-modal-typeahead !important; +} + /* ========================================= FLOATING ACTION BAR ========================================= */ diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 232f586..d2fa566 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -203,6 +203,7 @@ $zindex-sidebar-close-btn: 1110; $zindex-modal-backdrop: 1200; $zindex-modal: 1210; +$zindex-modal-typeahead: 1250; $zindex-toast: 9999; $zindex-tooltip: 10000; From dd686c644f245c97806cd325a53e741aa9f0847d Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Thu, 10 Sep 2026 03:50:08 +0200 Subject: [PATCH 8/9] =?UTF-8?q?=F0=9F=90=9B=20Restore=20zoom=20reset=20on?= =?UTF-8?q?=20load/filter=20and=20maintain=20search=20input=20focus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/graphs/base-graph.component.ts | 7 +- .../graphs/overview/overview.component.html | 10 +-- .../graphs/overview/overview.component.ts | 75 +++++++++++++------ .../questions-completion.component.ts | 2 +- .../students-commits.component.ts | 2 +- .../questions-chooser.component.html | 2 +- .../questions-chooser.component.ts | 8 +- 7 files changed, 72 insertions(+), 34 deletions(-) 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/overview.component.html b/src/app/components/graphs/overview/overview.component.html index d476885..d7c5d62 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" > @@ -33,11 +33,11 @@
-
-
diff --git a/src/app/components/graphs/overview/overview.component.ts b/src/app/components/graphs/overview/overview.component.ts index 0c3f8d6..cf18fd2 100644 --- a/src/app/components/graphs/overview/overview.component.ts +++ b/src/app/components/graphs/overview/overview.component.ts @@ -219,7 +219,7 @@ export class OverviewComponent const willHaveNoStrip = this.loading || !this.hasTopStrip(); if (currentlyHasNoMilestonesClass !== willHaveNoStrip) { - this.loadGraphDataAndRefresh(); + this.loadGraphDataAndRefresh(true); } else { if (marker === 'sessions') { this.loadSessionAnnotations(); @@ -395,6 +395,10 @@ export class OverviewComponent if (this.resizeObserver) { this.resizeObserver.disconnect(); } + if (this.refreshTimeout) { + clearTimeout(this.refreshTimeout); + this.refreshTimeout = null; + } this.clearMilestoneHoverTimer(); this.cancelMilestoneLongPress(); this.stopDragScrollTimer(); @@ -484,7 +488,7 @@ export class OverviewComponent const willHaveNoStrip = this.loading || !this.hasTopStrip(); if (currentlyHasNoMilestonesClass !== willHaveNoStrip) { - this.loadGraphDataAndRefresh(); + this.loadGraphDataAndRefresh(true); } else { if (label === 'SESSION') { this.loadSessionAnnotations(); @@ -507,7 +511,7 @@ export class OverviewComponent this.hiddenCategories.add(label); } - this.loadGraphDataAndRefresh(); + this.loadGraphDataAndRefresh(true); } commit_date_format = Utils.COMMIT_DATE_FORMAT; @@ -613,6 +617,7 @@ export class OverviewComponent this.refresh(); setTimeout(() => { + this.current_zoom = null; if (this.dataService.repoToLoad) { this.loadGraph(this.dataService.startDate, this.dataService.endDate); } else { @@ -621,7 +626,8 @@ export class OverviewComponent this.dataService.repositories, this.dataService.reviews, this.dataService.corrections, - this.dataService.questions + this.dataService.questions, + false ); this.loading = false; @@ -643,13 +649,15 @@ export class OverviewComponent loadGraph(startDate?: string, endDate?: string) { try { this.loading = true; + this.current_zoom = null; this.loaderService.loadRepositories(startDate, endDate).subscribe(() => { this.loadGraphMetadata( this.dataService.repositories, this.dataService.reviews, this.dataService.corrections, - this.dataService.questions + this.dataService.questions, + false ); this.loading = false; }); @@ -700,14 +708,14 @@ export class OverviewComponent } } - loadGraphData() { + loadGraphData(conserveZoom: boolean = false) { if (!this.data_g) return; this.loadPoints(); this.loadAnnotations(); - this.setupZoom(); + this.setupZoom(conserveZoom); } - setupZoom() { + setupZoom(conserveZoom: boolean = false) { const overview = this; // This line may be removed if zoom is bugged. Used to somehow make zoom works on webkit based browsers. d3.select(document.body).on("wheel.body", (e) => {}); @@ -778,7 +786,11 @@ export class OverviewComponent } }, { passive: false }); - this.resetZoom(true); + if (conserveZoom) { + this.resetZoom(true); + } else { + this.resetZoom(false); + } } refresh() { @@ -810,7 +822,7 @@ export class OverviewComponent this.inner_margin.bottom + this.getDisplayedRepositories().length * this.repo_spacing ); - this.loadGraphDataAndRefresh(); + this.loadGraphDataAndRefresh(true); }, 100); } } @@ -975,12 +987,26 @@ export class OverviewComponent } processingData = false; + private refreshTimeout?: any; + private pendingConserveZoom = false; - loadGraphDataAndRefresh() { + loadGraphDataAndRefresh(conserveZoom: boolean = false) { + if (!conserveZoom) { + this.current_zoom = null; + this.pendingConserveZoom = false; + } else if (this.refreshTimeout === undefined || this.refreshTimeout === null) { + this.pendingConserveZoom = true; + } this.processingData = true; - setTimeout(() => { + if (this.refreshTimeout) { + clearTimeout(this.refreshTimeout); + } + this.refreshTimeout = setTimeout(() => { + const shouldConserve = this.pendingConserveZoom; + this.refreshTimeout = null; + this.pendingConserveZoom = false; this.refresh(); - this.loadGraphData(); + this.loadGraphData(shouldConserve); this.processingData = false; }, 0); } @@ -3310,11 +3336,14 @@ export class OverviewComponent return; } - this.overlayManagerService.dismissAll({ blurInput: true }); - this.data_g - .transition() - .duration(750) - .call(this.zoom.transform, d3.zoomIdentity.translate(0, 0).scale(1)); + 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') { @@ -3348,12 +3377,12 @@ export class OverviewComponent } searchSubmit() { - this.loadGraphDataAndRefresh(); + this.loadGraphDataAndRefresh(false); } onFilterGroupsChange(groups: FilterGroup[]) { this.filterGroups = groups; - this.loadGraphDataAndRefresh(); + this.loadGraphDataAndRefresh(false); } clearQuestionsFilter() { @@ -3416,7 +3445,8 @@ export class OverviewComponent this.dataService.repositories, this.dataService.reviews, this.dataService.corrections, - this.dataService.questions + this.dataService.questions, + true ); return; } @@ -3444,7 +3474,8 @@ export class OverviewComponent this.dataService.repositories, this.dataService.reviews, this.dataService.corrections, - this.dataService.questions + this.dataService.questions, + true ); return; } 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/questions-chooser/questions-chooser.component.html b/src/app/components/questions-chooser/questions-chooser.component.html index 42fabb8..82328a8 100644 --- a/src/app/components/questions-chooser/questions-chooser.component.html +++ b/src/app/components/questions-chooser/questions-chooser.component.html @@ -151,7 +151,7 @@ [class.transparent-input]="!isMainPillActive || mode === 'choose'" [class.edit-input]="isMainPillActive && mode !== 'choose'" [attr.size]="isMainPillActive ? (question?.length || 1) : 1" - [editable]="true" [resultTemplate]="rt" (keydown.enter)="onEnter()" (keydown)="onMainInputKeyDown($event)" + [editable]="true" [resultTemplate]="rt" (keydown.enter)="onEnter($event)" (keydown)="onMainInputKeyDown($event)" [inputFormatter]="typeaheadFormatter" [resultFormatter]="typeaheadFormatter" placeholder="{{ placeholderKey | translate }}" [disabled]="disabled" container="body" diff --git a/src/app/components/questions-chooser/questions-chooser.component.ts b/src/app/components/questions-chooser/questions-chooser.component.ts index 9fba678..a6d75d5 100644 --- a/src/app/components/questions-chooser/questions-chooser.component.ts +++ b/src/app/components/questions-chooser/questions-chooser.component.ts @@ -803,6 +803,9 @@ export class QuestionsChooserComponent this.scrollToEnd(); this.emitFilterGroups(); this.focus(); + setTimeout(() => { + this.focus(); + }, 0); } deleteItem(index: number) { @@ -1548,7 +1551,10 @@ export class QuestionsChooserComponent return item.type === "commit"; } - onEnter() { + onEnter(event?: Event) { + if (event) { + event.preventDefault(); + } if (this.instance && this.instance.isPopupOpen()) { return; } From 9da0be5e7137778b941dd36c6d8017705f8f1a60 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Thu, 10 Sep 2026 03:58:04 +0200 Subject: [PATCH 9/9] =?UTF-8?q?=F0=9F=90=9B=20Match=20milestone=20drag=20p?= =?UTF-8?q?rogress=20circle=20color=20with=20milestone=20type?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/graphs/overview/chart.scss | 3 ++ .../graphs/overview/overview.component.html | 2 +- .../graphs/overview/overview.component.ts | 40 ++++++++++++++++--- 3 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/app/components/graphs/overview/chart.scss b/src/app/components/graphs/overview/chart.scss index 38bf306..5cc22c2 100644 --- a/src/app/components/graphs/overview/chart.scss +++ b/src/app/components/graphs/overview/chart.scss @@ -248,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 d7c5d62..f8eebed 100644 --- a/src/app/components/graphs/overview/overview.component.html +++ b/src/app/components/graphs/overview/overview.component.html @@ -399,7 +399,7 @@
{{ "OVERVIEW-GRA
diff --git a/src/app/components/graphs/overview/overview.component.ts b/src/app/components/graphs/overview/overview.component.ts index cf18fd2..4fe068b 100644 --- a/src/app/components/graphs/overview/overview.component.ts +++ b/src/app/components/graphs/overview/overview.component.ts @@ -1653,7 +1653,26 @@ export class OverviewComponent 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) @@ -1669,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(); @@ -1699,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( @@ -1754,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") @@ -1763,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)");