Skip to content

Commit dfaa905

Browse files
rkufferrkuffer
authored
[Tock Studio] Dialogs annotations + filtering (#1838)
* annotations * Wip * Wip * Annotations wip + Sentence training buttons size * Wip * Misc * Endpoints url update * Dialogs filtering
1 parent 80dbe91 commit dfaa905

30 files changed

+1408
-394
lines changed

‎bot/admin/web/package-lock.json‎

Lines changed: 217 additions & 169 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bot/admin/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@
9292
"karma-coverage": "^2.2.0",
9393
"karma-jasmine": "^5.1.0",
9494
"karma-jasmine-html-reporter": "^2.0.0",
95+
"ngx-mf": "^5.2.0",
9596
"prettier": "2.6.2",
9697
"ts-node": "3.2.2",
9798
"typescript": "5.2.2"

‎bot/admin/web/src/app/analytics/dialog/dialog.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ <h1 class="flex-grow-1">Dialog</h1>
3535
></tock-no-data-found>
3636

3737
<nb-card *ngIf="dialog">
38-
<nb-card-body class="pl-3 pr-0">
38+
<nb-card-body class="p-0">
3939
<tock-chat-ui>
4040
<tock-chat-ui-dialog-logger
4141
[dialog]="dialog"

‎bot/admin/web/src/app/analytics/dialog/dialog.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class DialogComponent implements OnInit, OnDestroy {
3434
) {}
3535

3636
ngOnInit(): void {
37-
this.initialize();
37+
setTimeout(() => this.initialize());
3838
}
3939

4040
initialize(): void {

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

Lines changed: 221 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,66 @@
8282
>
8383
<form [formGroup]="form">
8484
<div class="row">
85+
<div class="col-6 col-lg-3">
86+
<nb-form-field class="mb-2">
87+
<nb-icon
88+
nbPrefix
89+
icon="calendar-plus"
90+
></nb-icon>
91+
<input
92+
nbInput
93+
fullWidth
94+
fieldSize="small"
95+
placeholder="Data collected after"
96+
nbTooltip="Show dialogs created after this date"
97+
[nbDatepicker]="from_date"
98+
formControlName="dialogCreationDateFrom"
99+
/>
100+
<button
101+
*ngIf="!!getFormControl('dialogCreationDateFrom').value"
102+
nbButton
103+
nbSuffix
104+
ghost
105+
nbTooltip="Clear"
106+
type="button"
107+
(click)="resetControl(getFormControl('dialogCreationDateFrom'))"
108+
>
109+
<nb-icon icon="x"></nb-icon>
110+
</button>
111+
</nb-form-field>
112+
<nb-datepicker #from_date></nb-datepicker>
113+
</div>
114+
115+
<div class="col-6 col-lg-3">
116+
<nb-form-field class="mb-2">
117+
<nb-icon
118+
nbPrefix
119+
icon="calendar-minus"
120+
></nb-icon>
121+
<input
122+
nbInput
123+
fullWidth
124+
fieldSize="small"
125+
placeholder="Data collected before"
126+
nbTooltip="Show dialogs created before this date"
127+
[nbDatepicker]="to_date"
128+
formControlName="dialogCreationDateTo"
129+
/>
130+
<button
131+
*ngIf="!!getFormControl('dialogCreationDateTo').value"
132+
nbButton
133+
nbSuffix
134+
ghost
135+
nbTooltip="Clear"
136+
type="button"
137+
(click)="resetControl(getFormControl('dialogCreationDateTo'))"
138+
>
139+
<nb-icon icon="x"></nb-icon>
140+
</button>
141+
</nb-form-field>
142+
<nb-datepicker #to_date></nb-datepicker>
143+
</div>
144+
85145
<div class="col-6 col-lg-3">
86146
<nb-form-field class="mb-2">
87147
<nb-icon
@@ -90,6 +150,7 @@
90150
></nb-icon>
91151
<nb-select
92152
fullWidth
153+
size="small"
93154
nbTooltip="Search for dialogs using this configuration."
94155
placeholder="Configuration"
95156
formControlName="configuration"
@@ -113,6 +174,7 @@
113174
></nb-icon>
114175
<nb-select
115176
fullWidth
177+
size="small"
116178
nbTooltip="Search for dialogs using this connector."
117179
placeholder="Connector"
118180
formControlName="connectorType"
@@ -140,6 +202,7 @@
140202
></nb-icon>
141203
<nb-select
142204
fullWidth
205+
size="small"
143206
nbTooltip="Search dialogs containing exchanges corresponding to the selected intent."
144207
placeholder="Intent"
145208
formControlName="intentName"
@@ -164,6 +227,7 @@
164227
></nb-icon>
165228
<nb-select
166229
fullWidth
230+
size="small"
167231
multiple
168232
nbTooltip="Hide exchanges corresponding to selected intents."
169233
placeholder="Hide intents"
@@ -179,9 +243,7 @@
179243
</nb-select>
180244
</nb-form-field>
181245
</div>
182-
</div>
183246

184-
<div class="row">
185247
<div class="col-6 col-lg-3">
186248
<nb-form-field>
187249
<nb-icon
@@ -191,7 +253,7 @@
191253
<input
192254
nbInput
193255
fullWidth
194-
fieldSize="medium"
256+
fieldSize="small"
195257
nbTooltip="Search a dialog by id"
196258
placeholder="Dialog id"
197259
type="text"
@@ -213,7 +275,16 @@
213275
</nb-form-field>
214276
</div>
215277

216-
<div class="col-6 col-lg-3 pt-2">
278+
<div class="col-6 col-lg-3 pt-1">
279+
<nb-checkbox
280+
nbTooltip="Display dialogues held from the studio test view"
281+
class="text-nowrap"
282+
formControlName="displayTests"
283+
>Display tests
284+
</nb-checkbox>
285+
</div>
286+
287+
<div class="col-6 col-lg-3 pt-1">
217288
<nb-checkbox
218289
nbTooltip="Display only dialogs containing Rag responses"
219290
class="text-nowrap"
@@ -222,14 +293,156 @@
222293
</nb-checkbox>
223294
</div>
224295

225-
<div class="col-6 col-lg-3 pt-2">
296+
<!-- Annotations filters -->
297+
298+
<div class="col-6 col-lg-3 pt-1 ellipsis">
226299
<nb-checkbox
227-
nbTooltip="Display dialogues held from the studio test view"
300+
nbTooltip="Display only annotated dialogs"
228301
class="text-nowrap"
229-
formControlName="displayTests"
230-
>Display tests
302+
formControlName="withAnnotations"
303+
>With annotation
231304
</nb-checkbox>
232305
</div>
306+
307+
<div
308+
class="col-6 col-lg-3"
309+
*ngIf="getFormControl('withAnnotations').value"
310+
>
311+
<nb-form-field class="mb-2">
312+
<nb-icon
313+
nbPrefix
314+
icon="pin-angle"
315+
></nb-icon>
316+
<nb-select
317+
fullWidth
318+
size="small"
319+
multiple
320+
nbTooltip="Filter annotations by state"
321+
placeholder="Annotations state"
322+
formControlName="annotationStates"
323+
>
324+
<nb-option>Clear selection</nb-option>
325+
<nb-option
326+
*ngFor="let state of annotationStates"
327+
[value]="state.value"
328+
>
329+
{{ state.label }}
330+
</nb-option>
331+
</nb-select>
332+
</nb-form-field>
333+
</div>
334+
335+
<div
336+
class="col-6 col-lg-3"
337+
*ngIf="getFormControl('withAnnotations').value"
338+
>
339+
<nb-form-field class="mb-2">
340+
<nb-icon
341+
nbPrefix
342+
icon="cone-striped"
343+
></nb-icon>
344+
<nb-select
345+
fullWidth
346+
size="small"
347+
multiple
348+
nbTooltip="Filter annotations by reason"
349+
placeholder="Annotations reasons"
350+
formControlName="annotationReasons"
351+
>
352+
<nb-option>Clear selection</nb-option>
353+
<nb-option
354+
*ngFor="let reason of annotationReasons"
355+
[value]="reason.value"
356+
>
357+
{{ reason.label }}
358+
</nb-option>
359+
</nb-select>
360+
</nb-form-field>
361+
</div>
362+
363+
<div
364+
class="col-6 col-lg-3"
365+
*ngIf="getFormControl('withAnnotations').value"
366+
>
367+
<nb-form-field class="mb-2">
368+
<nb-icon
369+
nbPrefix
370+
icon="calendar-plus"
371+
></nb-icon>
372+
<input
373+
nbInput
374+
fullWidth
375+
fieldSize="small"
376+
placeholder="Annotations created after"
377+
nbTooltip="Show annotations created after this date"
378+
[nbDatepicker]="from_date_annotation"
379+
formControlName="annotationCreationDateFrom"
380+
/>
381+
<button
382+
*ngIf="!!getFormControl('annotationCreationDateFrom').value"
383+
nbButton
384+
nbSuffix
385+
ghost
386+
nbTooltip="Clear"
387+
type="button"
388+
(click)="resetControl(getFormControl('annotationCreationDateFrom'))"
389+
>
390+
<nb-icon icon="x"></nb-icon>
391+
</button>
392+
</nb-form-field>
393+
<nb-datepicker #from_date_annotation></nb-datepicker>
394+
</div>
395+
396+
<div
397+
class="col-6 col-lg-3"
398+
*ngIf="getFormControl('withAnnotations').value"
399+
>
400+
<nb-form-field class="mb-2">
401+
<nb-icon
402+
nbPrefix
403+
icon="calendar-minus"
404+
></nb-icon>
405+
<input
406+
nbInput
407+
fullWidth
408+
fieldSize="small"
409+
placeholder="Annotations created before"
410+
nbTooltip="Show annotations created before this date"
411+
[nbDatepicker]="to_date_annotation"
412+
formControlName="annotationCreationDateTo"
413+
/>
414+
<button
415+
*ngIf="!!getFormControl('annotationCreationDateTo').value"
416+
nbButton
417+
nbSuffix
418+
ghost
419+
nbTooltip="Clear"
420+
type="button"
421+
(click)="resetControl(getFormControl('annotationCreationDateTo'))"
422+
>
423+
<nb-icon icon="x"></nb-icon>
424+
</button>
425+
</nb-form-field>
426+
<nb-datepicker #to_date_annotation></nb-datepicker>
427+
</div>
428+
429+
<div
430+
class="col-12 col-xl-6 d-flex gap-1 align-items-center"
431+
*ngIf="getFormControl('withAnnotations').value"
432+
>
433+
Sort order of annotations:
434+
<nb-radio-group
435+
formControlName="annotationSort"
436+
class="d-flex"
437+
>
438+
<nb-radio
439+
*ngFor="let order of sortOrders"
440+
[value]="order.value"
441+
>
442+
{{ order.label }}
443+
</nb-radio>
444+
</nb-radio-group>
445+
</div>
233446
</div>
234447
</form>
235448
</div>

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

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@ import { BotSharedService } from '../../../../shared/bot-shared.service';
77
import { StateService } from '../../../../core-nlp/state.service';
88
import { BotConfigurationService } from '../../../../core/bot-configuration.service';
99
import { RestService } from '../../../../core-nlp/rest/rest.service';
10+
import {
11+
AnnotationReason,
12+
AnnotationReasons,
13+
AnnotationState,
14+
AnnotationStates
15+
} from '../../../../shared/components/annotation/annotations';
16+
import { SortOrder, SortOrders } from '../../../../shared/model/misc';
1017

1118
interface DialogListFiltersForm {
1219
exactMatch: FormControl<boolean>;
@@ -19,6 +26,15 @@ interface DialogListFiltersForm {
1926
configuration?: FormControl<string>;
2027
intentsToHide?: FormControl<string[]>;
2128
isGenAiRagDialog?: FormControl<boolean>;
29+
dialogSort?: FormControl<SortOrder>;
30+
dialogCreationDateFrom?: FormControl<Date>;
31+
dialogCreationDateTo?: FormControl<Date>;
32+
withAnnotations?: FormControl<boolean>;
33+
annotationStates?: FormControl<AnnotationState[]>;
34+
annotationReasons?: FormControl<AnnotationReason[]>;
35+
annotationSort?: FormControl<SortOrder>;
36+
annotationCreationDateFrom?: FormControl<Date>;
37+
annotationCreationDateTo?: FormControl<Date>;
2238
}
2339

2440
export type DialogListFilters = ExtractFormControlTyping<DialogListFiltersForm>;
@@ -35,6 +51,10 @@ export class DialogsListFiltersComponent implements OnInit {
3551
connectorTypes: ConnectorType[] = [];
3652
configurationNameList: { label: string; applicationId: string }[];
3753

54+
annotationStates = AnnotationStates;
55+
annotationReasons = AnnotationReasons;
56+
sortOrders = SortOrders;
57+
3858
@Input() initialFilters: Partial<DialogListFilters>;
3959
@Output() onFilter = new EventEmitter<Partial<DialogListFilters>>();
4060

@@ -74,7 +94,16 @@ export class DialogsListFiltersComponent implements OnInit {
7494
ratings: new FormControl(),
7595
configuration: new FormControl(),
7696
intentsToHide: new FormControl([]),
77-
isGenAiRagDialog: new FormControl()
97+
isGenAiRagDialog: new FormControl(),
98+
dialogSort: new FormControl(),
99+
dialogCreationDateFrom: new FormControl(),
100+
dialogCreationDateTo: new FormControl(),
101+
withAnnotations: new FormControl(),
102+
annotationStates: new FormControl([]),
103+
annotationReasons: new FormControl([]),
104+
annotationSort: new FormControl(),
105+
annotationCreationDateFrom: new FormControl(),
106+
annotationCreationDateTo: new FormControl()
78107
});
79108

80109
getFormControl(formControlName: string): FormControl {

0 commit comments

Comments
 (0)