@@ -21,6 +21,7 @@ import {
21
21
debounceTime ,
22
22
filter ,
23
23
map ,
24
+ shareReplay ,
24
25
startWith ,
25
26
take ,
26
27
} from 'rxjs/operators' ;
@@ -31,6 +32,7 @@ import {runGroupByChanged} from '../../actions';
31
32
import {
32
33
getColorGroupRegexString ,
33
34
getRunIdsForExperiment ,
35
+ getRunGroupBy ,
34
36
getRuns ,
35
37
} from '../../store/runs_selectors' ;
36
38
import { groupRuns } from '../../store/utils' ;
@@ -44,8 +46,10 @@ const INPUT_CHANGE_DEBOUNCE_INTERVAL_MS = 500;
44
46
template : `<regex-edit-dialog-component
45
47
[regexString]="groupByRegexString$ | async"
46
48
[colorRunPairList]="colorRunPairList$ | async"
47
- (onSave)="onSave($event)"
49
+ [selectedGroupBy]="groupByRegexType$ | async"
50
+ (onSave)="onSave()"
48
51
(regexInputOnChange)="onRegexInputOnChange($event)"
52
+ (regexTypeOnChange)="onRegexTypeOnChange($event)"
49
53
></regex-edit-dialog-component>` ,
50
54
styles : [
51
55
`
@@ -60,17 +64,34 @@ const INPUT_CHANGE_DEBOUNCE_INTERVAL_MS = 500;
60
64
} )
61
65
export class RegexEditDialogContainer {
62
66
private readonly experimentIds : string [ ] ;
67
+ private readonly expNameByExpId : Record < string , string > ;
63
68
private readonly runIdToEid$ : Observable < Record < string , string > > ;
64
69
private readonly allRuns$ : Observable < Run [ ] > ;
65
70
private readonly tentativeRegexString$ : Subject < string > =
66
71
new Subject < string > ( ) ;
72
+ private readonly tentativeRegexType$ : Subject < GroupByKey > =
73
+ new Subject < GroupByKey > ( ) ;
67
74
68
75
readonly groupByRegexString$ : Observable < string > = defer ( ( ) => {
69
76
return merge (
70
77
this . store . select ( getColorGroupRegexString ) . pipe ( take ( 1 ) ) ,
71
78
this . tentativeRegexString$
72
79
) ;
73
- } ) . pipe ( startWith ( '' ) ) ;
80
+ } ) . pipe ( startWith ( '' ) , shareReplay ( 1 ) ) ;
81
+
82
+ readonly groupByRegexType$ : Observable < GroupByKey > = merge (
83
+ this . store . select ( getRunGroupBy ) . pipe (
84
+ take ( 1 ) ,
85
+ map ( ( group ) => group . key )
86
+ ) ,
87
+ this . tentativeRegexType$
88
+ ) . pipe (
89
+ filter (
90
+ ( key ) => key === GroupByKey . REGEX || key === GroupByKey . REGEX_BY_EXP
91
+ ) ,
92
+ startWith ( GroupByKey . REGEX ) ,
93
+ shareReplay ( 1 )
94
+ ) ;
74
95
75
96
readonly colorRunPairList$ : Observable < ColorGroup [ ] > = defer ( ( ) => {
76
97
return this . groupByRegexString$ . pipe (
@@ -84,18 +105,31 @@ export class RegexEditDialogContainer {
84
105
}
85
106
} ) ,
86
107
combineLatestWith (
108
+ this . groupByRegexType$ ,
87
109
this . allRuns$ ,
88
110
this . runIdToEid$ ,
89
111
this . store . select ( settingsSelectors . getColorPalette ) ,
90
112
this . store . select ( getDarkModeEnabled )
91
113
) ,
92
114
map (
93
- ( [ regexString , allRuns , runIdToEid , colorPalette , darkModeEnabled ] ) => {
115
+ ( [
116
+ regexString ,
117
+ regexType ,
118
+ allRuns ,
119
+ runIdToEid ,
120
+ colorPalette ,
121
+ darkModeEnabled ,
122
+ ] ) => {
94
123
const groupBy = {
95
- key : GroupByKey . REGEX ,
124
+ key : regexType ,
96
125
regexString,
97
126
} ;
98
- const groups = groupRuns ( groupBy , allRuns , runIdToEid ) ;
127
+ const groups = groupRuns (
128
+ groupBy ,
129
+ allRuns ,
130
+ runIdToEid ,
131
+ this . expNameByExpId
132
+ ) ;
99
133
const groupKeyToColorString = new Map < string , string > ( ) ;
100
134
const colorRunPairList : ColorGroup [ ] = [ ] ;
101
135
@@ -121,9 +155,14 @@ export class RegexEditDialogContainer {
121
155
constructor (
122
156
private readonly store : Store < State > ,
123
157
public dialogRef : MatDialogRef < RegexEditDialogContainer > ,
124
- @Inject ( MAT_DIALOG_DATA ) data : { experimentIds : string [ ] }
158
+ @Inject ( MAT_DIALOG_DATA )
159
+ data : {
160
+ experimentIds : string [ ] ;
161
+ expNameByExpId : Record < string , string > ;
162
+ }
125
163
) {
126
164
this . experimentIds = data . experimentIds ;
165
+ this . expNameByExpId = data . expNameByExpId ;
127
166
128
167
this . runIdToEid$ = combineLatest (
129
168
this . experimentIds . map ( ( experimentId ) => {
@@ -155,16 +194,29 @@ export class RegexEditDialogContainer {
155
194
}
156
195
157
196
onRegexInputOnChange ( regexString : string ) {
197
+ // Whenever regex input changes the subject emits new object.
158
198
this . tentativeRegexString$ . next ( regexString ) ;
159
199
}
160
200
161
- onSave ( regexString : string ) : void {
162
- this . store . dispatch (
163
- runGroupByChanged ( {
164
- experimentIds : this . experimentIds ,
165
- groupBy : { key : GroupByKey . REGEX , regexString : regexString } ,
166
- } )
167
- ) ;
201
+ onRegexTypeOnChange ( regexType : GroupByKey ) {
202
+ // Whenever regex type changes the subject emits new object.
203
+ this . tentativeRegexType$ . next ( regexType ) ;
204
+ }
205
+
206
+ onSave ( ) : void {
207
+ this . groupByRegexString$
208
+ . pipe ( combineLatestWith ( this . groupByRegexType$ ) )
209
+ . subscribe ( ( [ regexString , key ] ) => {
210
+ if ( regexString ) {
211
+ this . store . dispatch (
212
+ runGroupByChanged ( {
213
+ experimentIds : this . experimentIds ,
214
+ groupBy : { key, regexString} ,
215
+ expNameByExpId : this . expNameByExpId ,
216
+ } )
217
+ ) ;
218
+ }
219
+ } ) ;
168
220
}
169
221
}
170
222
0 commit comments