[Tock Studio] Add time precision, feedback display, and filtering for Custom Metrics & Dialogs (dercbot 1756 1763 1765)

bot/admin/web/src/app/analytics/analytics.module.ts

@@ -31,6 +31,7 @@ import {
   NbCheckboxModule,
   NbContextMenuModule,
   NbDatepickerModule,
+  NbTimepickerModule,
   NbInputModule,
   NbListModule,
   NbMenuModule,
@@ -87,6 +88,7 @@ import { DialogsListFiltersComponent } from './dialogs/dialogs-list/dialogs-list
     NbCalendarModule,
     NbUserModule,
     NbDatepickerModule,
+    NbTimepickerModule,
     NbListModule,
     NbAccordionModule,
     NbContextMenuModule,

bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list-filters/dialogs-list-filters.component.html

@@ -109,7 +109,7 @@
                 fullWidth
                 fieldSize="small"
                 placeholder="Data collected after"
-                nbTooltip="Show dialogs created after this date"
+                nbTooltip="Show dialogs containing messages created after this date"
                 [nbDatepicker]="from_date"
                 formControlName="dialogCreationDateFrom"
               />
@@ -125,7 +125,14 @@
                 <nb-icon icon="x"></nb-icon>
               </button>
             </nb-form-field>
-            <nb-datepicker #from_date></nb-datepicker>
+
+            <nb-date-timepicker
+              #from_date
+              [step]="10"
+              singleColumn
+              format="y/MM/dd HH:mm"
+              [showCurrentTimeButton]="false"
+            ></nb-date-timepicker>
           </div>
 
           <div class="col-6 col-lg-3">
@@ -139,7 +146,7 @@
                 fullWidth
                 fieldSize="small"
                 placeholder="Data collected before"
-                nbTooltip="Show dialogs created before this date"
+                nbTooltip="Show dialogs containing messages created before this date"
                 [nbDatepicker]="to_date"
                 formControlName="dialogCreationDateTo"
               />
@@ -155,7 +162,14 @@
                 <nb-icon icon="x"></nb-icon>
               </button>
             </nb-form-field>
-            <nb-datepicker #to_date></nb-datepicker>
+
+            <nb-date-timepicker
+              #to_date
+              [step]="10"
+              singleColumn
+              format="y/MM/dd HH:mm"
+              [showCurrentTimeButton]="false"
+            ></nb-date-timepicker>
           </div>
 
           <div class="col-6 col-lg-3">
@@ -291,6 +305,48 @@
             </nb-form-field>
           </div>
 
+          <!-- Feedback filters -->
+          <div class="col-6 col-lg-3">
+            <nb-form-field class="mb-2">
+              <nb-icon
+                nbPrefix
+                icon="hand-thumbs-up"
+                *ngIf="!getFormControl('feedback').value"
+              ></nb-icon>
+              <nb-icon
+                nbPrefix
+                icon="hand-thumbs-up"
+                *ngIf="getFormControl('feedback').value === 'UP'"
+                class="text-success"
+              ></nb-icon>
+              <nb-icon
+                nbPrefix
+                icon="hand-thumbs-down"
+                *ngIf="getFormControl('feedback').value === 'DOWN'"
+                class="text-danger"
+              ></nb-icon>
+              <nb-select
+                fullWidth
+                size="small"
+                nbTooltip="Dialogues containing messages with feedback."
+                placeholder="Feedback"
+                formControlName="feedback"
+              >
+                <nb-option>Clear filter</nb-option>
+                <nb-option
+                  *ngFor="let vote of feedbackVotes"
+                  [value]="vote.value"
+                >
+                  <nb-icon
+                    icon="hand-thumbs-{{ vote.value.toLowerCase() }}"
+                    class="select-icon align-self-center mr-2 font-size-small"
+                  ></nb-icon>
+                  {{ vote.label }}
+                </nb-option>
+              </nb-select>
+            </nb-form-field>
+          </div>
+
           <div class="col-6 col-lg-3 pt-1">
             <nb-checkbox
               nbTooltip="Display dialogues held from the studio test view"
@@ -406,7 +462,13 @@
                 <nb-icon icon="x"></nb-icon>
               </button>
             </nb-form-field>
-            <nb-datepicker #from_date_annotation></nb-datepicker>
+            <nb-date-timepicker
+              #from_date_annotation
+              [step]="10"
+              singleColumn
+              format="y/MM/dd HH:mm"
+              [showCurrentTimeButton]="false"
+            ></nb-date-timepicker>
           </div>
 
           <div
@@ -439,7 +501,13 @@
                 <nb-icon icon="x"></nb-icon>
               </button>
             </nb-form-field>
-            <nb-datepicker #to_date_annotation></nb-datepicker>
+            <nb-date-timepicker
+              #to_date_annotation
+              [step]="10"
+              singleColumn
+              format="y/MM/dd HH:mm"
+              [showCurrentTimeButton]="false"
+            ></nb-date-timepicker>
           </div>
 
           <div

bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list-filters/dialogs-list-filters.component.ts

@@ -30,6 +30,12 @@ import {
   AnnotationStates
 } from '../../../../shared/components/annotation/annotations';
 import { SortOrder, SortOrders } from '../../../../shared/model/misc';
+import { FeedbackVote } from '../../dialogs';
+
+export const FeedbackVotes = [
+  { label: 'Positive feedback', value: FeedbackVote.UP },
+  { label: 'Negative feedback', value: FeedbackVote.DOWN }
+] as const;
 
 interface DialogListFiltersForm {
   exactMatch: FormControl<boolean>;
@@ -51,6 +57,7 @@ interface DialogListFiltersForm {
   annotationSort?: FormControl<SortOrder>;
   annotationCreationDateFrom?: FormControl<Date>;
   annotationCreationDateTo?: FormControl<Date>;
+  feedback?: FormControl<FeedbackVote>;
 }
 
 export type DialogListFilters = ExtractFormControlTyping<DialogListFiltersForm>;
@@ -62,6 +69,7 @@ export type DialogListFilters = ExtractFormControlTyping<DialogListFiltersForm>;
 })
 export class DialogsListFiltersComponent implements OnInit {
   private readonly destroy$: Subject<boolean> = new Subject();
+  private lastEmittedValue: Partial<DialogListFilters> | null = null;
 
   advanced: boolean = false;
   connectorTypes: ConnectorType[] = [];
@@ -70,6 +78,7 @@ export class DialogsListFiltersComponent implements OnInit {
   annotationStates = AnnotationStates;
   annotationReasons = AnnotationReasons;
   sortOrders = SortOrders;
+  feedbackVotes = FeedbackVotes;
 
   @Input() initialFilters: Partial<DialogListFilters>;
   @Output() onFilter = new EventEmitter<Partial<DialogListFilters>>();
@@ -93,11 +102,16 @@ export class DialogsListFiltersComponent implements OnInit {
         });
     });
 
+    this.lastEmittedValue = { ...this.form.value };
+
     if (this.initialFilters) {
       this.form.patchValue(this.initialFilters);
+      this.lastEmittedValue = { ...this.form.value };
     }
 
-    this.form.valueChanges.pipe(debounceTime(500), takeUntil(this.destroy$)).subscribe(() => this.submitFiltersChange());
+    this.form.valueChanges.pipe(debounceTime(800), takeUntil(this.destroy$)).subscribe(() => {
+      this.submitFiltersChange();
+    });
   }
 
   form = new FormGroup<DialogListFiltersForm>({
@@ -119,7 +133,8 @@ export class DialogsListFiltersComponent implements OnInit {
     annotationReasons: new FormControl([]),
     annotationSort: new FormControl(),
     annotationCreationDateFrom: new FormControl(),
-    annotationCreationDateTo: new FormControl()
+    annotationCreationDateTo: new FormControl(),
+    feedback: new FormControl()
   });
 
   getFormControl(formControlName: string): FormControl {
@@ -128,8 +143,10 @@ export class DialogsListFiltersComponent implements OnInit {
 
   submitFiltersChange(): void {
     const formValue = this.form.value;
-
-    this.onFilter.emit(formValue);
+    if (JSON.stringify(formValue) !== JSON.stringify(this.lastEmittedValue)) {
+      this.onFilter.emit(formValue);
+      this.lastEmittedValue = { ...formValue };
+    }
   }
 
   resetControl(ctrl: FormControl, input?: HTMLInputElement): void {
@@ -139,7 +156,7 @@ export class DialogsListFiltersComponent implements OnInit {
     }
   }
 
-  patchControl(ctrl: FormControl, value: any): void {
+  patchControl(ctrl: FormControl, value: boolean): void {
     ctrl.patchValue(value);
   }
 

bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list.component.ts

@@ -90,7 +90,6 @@ export class DialogsListComponent implements OnInit, OnChanges, OnDestroy {
       ...this.filters,
       ...filters
     };
-
     this.search();
   }
 
@@ -157,7 +156,8 @@ export class DialogsListComponent implements OnInit, OnChanges, OnDestroy {
       this.filters.annotationReasons,
       this.filters.annotationSort,
       this.filters.annotationCreationDateFrom,
-      this.filters.annotationCreationDateTo
+      this.filters.annotationCreationDateTo,
+      this.filters.feedback
     );
 
     this.analytics.dialogs(this.dialogReportQuery).subscribe((result) => {

bot/admin/web/src/app/analytics/dialogs/dialogs.ts

@@ -20,6 +20,10 @@ import { ConnectorType } from '../../core/model/configuration';
 import { AnnotationReason, AnnotationState } from '../../shared/components/annotation/annotations';
 import { SortOrder } from '../../shared/model/misc';
 
+export enum FeedbackVote {
+  UP = 'UP',
+  DOWN = 'DOWN'
+}
 export class DialogReportQuery extends PaginatedQuery {
   constructor(
     public override namespace: string,
@@ -46,7 +50,8 @@ export class DialogReportQuery extends PaginatedQuery {
     public annotationReasons?: AnnotationReason[],
     public annotationSort?: SortOrder,
     public annotationCreationDateFrom?: Date,
-    public annotationCreationDateTo?: Date
+    public annotationCreationDateTo?: Date,
+    public feedback?: FeedbackVote
   ) {
     super(namespace, applicationName, language, start, size);
   }

bot/admin/web/src/app/bot-admin-app.module.ts

@@ -30,7 +30,8 @@ import {
   NbToastrModule,
   NbWindowModule,
   NbThemeModule,
-  NbIconLibraries
+  NbIconLibraries,
+  NbTimepickerModule
 } from '@nebular/theme';
 
 import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
@@ -54,6 +55,7 @@ import { NlpService } from './core-nlp/nlp.service';
     NbSidebarModule.forRoot(),
     NbMenuModule.forRoot(),
     NbDatepickerModule.forRoot(),
+    NbTimepickerModule.forRoot(),
     NbDialogModule.forRoot(),
     NbWindowModule.forRoot(),
     NbToastrModule.forRoot(),