Skip to content

Commit 24a9367

Browse files
andyjmacleanandyjmaclean
authored
Merge pull request #959 from europeana/feat/MET-6977-Chained-Rerun-Design
MET-6977 Chained Rerun Design
2 parents 4ffa8e7 + 29e9aaf commit 24a9367

File tree

6 files changed

+570
-273
lines changed

6 files changed

+570
-273
lines changed

‎projects/sandbox/src/app/_services/sandbox-conf.service.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ describe('SandboxConfService', () => {
2727

2828
it('should toggle the ancestor-mode', () => {
2929
expect(service.isAncestorMode()).toBeFalsy();
30-
service.toggleAncestorMode();
30+
service.toggleAncestorMode('');
3131
expect(service.isAncestorMode()).toBeTruthy();
32-
service.toggleAncestorMode();
32+
service.toggleAncestorMode('');
3333
expect(service.isAncestorMode()).toBeFalsy();
3434
});
3535
});

‎projects/sandbox/src/app/_services/sandbox-conf.service.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { FixedLengthArray, SandboxPage, SandboxPageType } from '../_models';
33

44
@Injectable({ providedIn: 'root' })
55
export class SandboxConfService {
6+
readonly ANCESTOR_MODE = 'ancestor-mode';
7+
68
sandboxNavConf: FixedLengthArray<SandboxPage, 8> = [
79
{
810
stepTitle: 'Home',
@@ -51,17 +53,23 @@ export class SandboxConfService {
5153
}
5254

5355
isAncestorMode(): boolean {
54-
return this.sandboxNavConf[2].stepSubClass === 'ancestor-mode';
56+
return (this.sandboxNavConf[2].stepSubClass ?? '').includes(this.ANCESTOR_MODE);
57+
}
58+
59+
setAncestorAlignment(alignment: string): void {
60+
if (this.sandboxNavConf[2].stepSubTitle) {
61+
this.sandboxNavConf[2].stepSubClass = `${this.ANCESTOR_MODE} ${alignment}`;
62+
}
5563
}
5664

57-
toggleAncestorMode(): void {
65+
toggleAncestorMode(alignment: string): void {
5866
if (this.sandboxNavConf[2].stepSubTitle) {
5967
this.sandboxNavConf[2].stepSubTitle = undefined;
6068
this.sandboxNavConf[2].stepSubClass = undefined;
6169
this.sandboxNavConf[2].stepSubTitleClick = undefined;
6270
} else {
6371
this.sandboxNavConf[2].stepSubTitle = true;
64-
this.sandboxNavConf[2].stepSubClass = 'ancestor-mode';
72+
this.sandboxNavConf[2].stepSubClass = `${this.ANCESTOR_MODE} ${alignment}`;
6573
this.sandboxNavConf[2].stepSubTitleClick = this.toggleAncestorMode.bind(this);
6674
}
6775
}

‎projects/sandbox/src/app/dataset-info/dataset-info.component.html‎

Lines changed: 128 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
<ng-template
2+
#tmpChildDatasetsLabel
3+
let-childCount="childCount"
4+
let-inline="inline"
5+
let-labelSingular="labelSingular"
6+
let-labelPlural="labelPlural"
7+
>
8+
<ng-container [ngPlural]="childCount">
9+
<span class="child-datasets-label" [ngClass]="{ inline: inline }" [attr.count]="childCount">
10+
<ng-template ngPluralCase="=1">{{ labelSingular }}</ng-template>
11+
<ng-template ngPluralCase="other">{{ labelPlural }}</ng-template></span
12+
>
13+
</ng-container>
14+
</ng-template>
15+
116
<ng-template #tmpCtrlDebias>
217
<span
318
*ngIf="canOfferDebiasView()"
@@ -170,14 +185,43 @@
170185

171186
<!-- reruns -->
172187
@let hierarchy = hierarchyData(); @if(hierarchy) { @let childCount = hierarchy.children.length;
188+
189+
<span class="parent-dataset rerun-nav" *ngIf="hierarchyData(); let hierarchy">
190+
@let parent = hierarchy.parent; @let parent_id = parent ? parent.id : '';
191+
<a
192+
class="parent-link rerun-nav"
193+
[attr.linkText]="parent ? parent.id : '/'"
194+
[attr.tabindex]="!!parent ? 0 : -1"
195+
href="/dataset/{{ parent_id }}"
196+
[ngClass]="{
197+
disabled: !parent
198+
}"
199+
(click)="!!parent && navTo(parent_id)"
200+
(keydown.enter)="!!parent && navTo(parent_id)"
201+
><span
202+
[attr.content]="!!parent && parent.name.length ? parent.name : null"
203+
class="parent-label"
204+
></span
205+
></a>
206+
</span>
207+
173208
<div class="child-datasets list-container">
174-
<ul tabindex="-1">
209+
<ul
210+
tabindex="-1"
211+
[ngClass]="{
212+
'show-3-teeth': childCount === 1,
213+
'show-4-teeth': childCount === 2,
214+
'show-5-teeth': childCount === 3,
215+
'show-6-teeth': childCount > 3
216+
}"
217+
>
175218
@if(childCount) {
176-
<ng-container *ngFor="let item of hierarchy.children; let i = index">
219+
<ng-container *ngFor="let item of padRerunChildren(hierarchy.children); let i = index">
220+
@if(item && item.id){
177221
<li>
178222
<a
179223
tabindex="0"
180-
title="view rerun"
224+
title="view rerun ({{ item.id }}) - '{{ item.name }}'"
181225
#link
182226
class="rerun-nav"
183227
href="/dataset/{{ item.id }}"
@@ -191,29 +235,66 @@
191235
<span class="rerun-item-marker"></span>
192236
</a>
193237
</li>
238+
} @else { @if(item){
239+
<li>
240+
<ng-container
241+
*ngTemplateOutlet="
242+
tmpChildDatasetsLabel;
243+
context: {
244+
childCount: childCount,
245+
labelSingular: 'rerun',
246+
labelPlural: 'reruns',
247+
inline: true
248+
}
249+
"
250+
>
251+
</ng-container>
252+
</li>
253+
}@else {
254+
<li class="toothless">
255+
<span class="invisible">&nbsp;</span>
256+
</li>
257+
} }
194258
</ng-container>
195259
}
196260
</ul>
197261
</div>
198-
<ng-container [ngPlural]="childCount">
199-
<span class="child-datasets-label" [attr.count]="childCount">
200-
<ng-template ngPluralCase="=1">rerun</ng-template>
201-
<ng-template ngPluralCase="other">reruns</ng-template></span
202-
>
262+
263+
@if(childCount === 0 || childCount > 5) {
264+
<ng-container
265+
*ngTemplateOutlet="
266+
tmpChildDatasetsLabel;
267+
context: {
268+
childCount: childCount,
269+
labelSingular: 'rerun',
270+
labelPlural: 'reruns',
271+
inline: false
272+
}
273+
"
274+
>
203275
</ng-container>
204-
}
276+
} }
205277

206278
<!-- reruns -->
207279
@if(hierarchy) {
208280
<div class="related-datasets list-container">
209281
@let childCount = hierarchy.siblings.length;
210-
<ul tabindex="-1">
282+
<ul
283+
tabindex="-1"
284+
[ngClass]="{
285+
'connect-curve-to-orb': childCount > 3,
286+
'show-3-teeth': childCount === 1,
287+
'show-4-teeth': childCount === 2,
288+
'show-6-teeth': childCount > 3
289+
}"
290+
>
211291
@if(childCount) {
212-
<ng-container *ngFor="let item of hierarchy.siblings; let i = index">
292+
<ng-container *ngFor="let item of padRerunSiblings(hierarchy.siblings); let i = index">
293+
@if(item && item.id){
213294
<li>
214295
<a
215296
tabindex="0"
216-
title="view rerun"
297+
title="view sibling rerun ({{ item.id }}) - '{{ item.name }}'"
217298
#link
218299
class="rerun-nav"
219300
href="/dataset/{{ item.id }}"
@@ -227,37 +308,48 @@
227308
<span class="rerun-item-field">{{ item.name }}</span>
228309
</a>
229310
</li>
311+
312+
}@else { @if(i === 0 && childCount < 4) {
313+
<li>
314+
<ng-container
315+
*ngTemplateOutlet="
316+
tmpChildDatasetsLabel;
317+
context: {
318+
childCount: childCount,
319+
labelSingular: 'sibling run',
320+
labelPlural: 'sibling runs',
321+
inline: true
322+
}
323+
"
324+
>
325+
</ng-container>
326+
</li>
327+
} @else {
328+
<li class="toothless">
329+
<span class="invisible">&nbsp;</span>
330+
</li>
331+
} }
230332
</ng-container>
231333
}
232334
</ul>
233-
<ng-container [ngPlural]="childCount">
234-
<span class="child-datasets-label" [attr.count]="childCount">
235-
<ng-template ngPluralCase="=1">sibling run</ng-template>
236-
<ng-template ngPluralCase="other">sibling runs</ng-template></span
237-
>
335+
336+
@if(childCount < 1 || childCount > 3) {
337+
<ng-container
338+
*ngTemplateOutlet="
339+
tmpChildDatasetsLabel;
340+
context: {
341+
childCount: childCount,
342+
labelSingular: 'sibling run',
343+
labelPlural: 'sibling runs',
344+
inline: false
345+
}
346+
"
347+
>
238348
</ng-container>
349+
}
239350
</div>
240351
}
241352

242-
<span class="parent-dataset rerun-nav" *ngIf="hierarchyData(); let hierarchy">
243-
@let parent = hierarchy.parent; @let parent_id = parent ? parent.id : '';
244-
<a
245-
class="parent-link rerun-nav"
246-
[attr.linkText]="parent ? parent.id : '/'"
247-
[attr.tabindex]="!!parent ? 0 : -1"
248-
href="/dataset/{{ parent_id }}"
249-
[ngClass]="{
250-
disabled: !parent
251-
}"
252-
(click)="!!parent && navTo(parent_id)"
253-
(keydown.enter)="!!parent && navTo(parent_id)"
254-
><span
255-
[attr.content]="!!parent && parent.name.length ? parent.name : null"
256-
class="parent-label"
257-
></span
258-
></a>
259-
</span>
260-
261353
<ul
262354
class="dataset-info container-h"
263355
*ngIf="datasetInfo(); let datasetInfo"

‎projects/sandbox/src/app/dataset-info/dataset-info.component.spec.ts‎

Lines changed: 66 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,36 @@ describe('DatasetInfoComponent', () => {
144144
expect(component.keycloakSignal()).toBeTruthy();
145145
});
146146

147+
it('should pad the children array', () => {
148+
expect(component.padRerunChildren([]).length).toEqual(1);
149+
const id = {
150+
id: '1',
151+
name: 'a'
152+
};
153+
const arr = [id, id, id, id, id];
154+
expect(component.padRerunChildren(arr).length).toEqual(6);
155+
expect(component.padRerunChildren([id]).length).toEqual(5);
156+
expect(component.padRerunChildren(arr.slice(1, 2)).length).toEqual(5);
157+
expect(component.padRerunChildren(arr.slice(1, 3)).length).toEqual(5);
158+
expect(component.padRerunChildren(arr.slice(1, 4)).length).toEqual(5);
159+
expect(component.padRerunChildren(arr.slice(1, 5)).length).toEqual(6);
160+
});
161+
162+
it('should pad the related array', () => {
163+
expect(component.padRerunSiblings([]).length).toEqual(0);
164+
const id = {
165+
id: '1',
166+
name: 'a'
167+
};
168+
const arr = [id, id, id, id, id];
169+
expect(component.padRerunSiblings(arr).length).toEqual(5);
170+
expect(component.padRerunSiblings([id]).length).toEqual(3);
171+
expect(component.padRerunSiblings(arr.slice(1, 2)).length).toEqual(3);
172+
expect(component.padRerunSiblings(arr.slice(1, 3)).length).toEqual(4);
173+
expect(component.padRerunSiblings(arr.slice(1, 4)).length).toEqual(5);
174+
expect(component.padRerunSiblings(arr.slice(1, 5)).length).toEqual(5);
175+
});
176+
147177
it('should navigate', () => {
148178
spyOn(router, 'navigate');
149179
component.navTo('x');
@@ -393,7 +423,31 @@ describe('DatasetInfoComponent', () => {
393423
expect(component.datasetInfo()).toBeFalsy();
394424
});
395425

426+
it('should compute the hierarchy alignment', () => {
427+
fixture.componentRef.setInput('datasetId', '1');
428+
429+
expect(component.hierarchyAlignment()).toEqual('align-center');
430+
431+
component.hierarchyData.set({
432+
siblings: [{ id: '1', name: 'One' }],
433+
children: [],
434+
hasContent: false
435+
});
436+
TestBed.flushEffects();
437+
expect(component.hierarchyAlignment()).toEqual('push-left');
438+
439+
component.hierarchyData.set({
440+
siblings: [],
441+
children: [{ id: '1', name: 'One' }],
442+
hasContent: false
443+
});
444+
TestBed.flushEffects();
445+
expect(component.hierarchyAlignment()).toEqual('push-right');
446+
});
447+
396448
it('should toggle the ancestry', fakeAsync(() => {
449+
fixture.componentRef.setInput('datasetId', '1');
450+
397451
expect(component.isAncestorMode()).toBeFalsy();
398452
component.toggleAncestorMode();
399453
expect(component.isAncestorMode()).toBeTruthy();
@@ -536,7 +590,15 @@ describe('DatasetInfoComponent', () => {
536590
});
537591

538592
it('should run the debias report', fakeAsync(() => {
593+
spyOn(debias, 'runDebiasReport').and.callThrough();
594+
expect(component.isOwner()).toBeFalsy();
595+
component.runOrShowDebiasReport(true);
596+
expect(debias.runDebiasReport).not.toHaveBeenCalled();
597+
598+
component.keycloak.idTokenParsed = { sub: '1234' };
599+
539600
fixture.componentRef.setInput('datasetId', '1');
601+
tick(1);
540602
fixture.detectChanges();
541603
TestBed.flushEffects();
542604
tick(1);
@@ -546,15 +608,13 @@ describe('DatasetInfoComponent', () => {
546608
if (datasetInfo) {
547609
expect(datasetInfo['created-by-id']).toEqual('1234');
548610
}
611+
expect(component.isOwner()).toBeTruthy();
549612

550-
spyOn(debias, 'runDebiasReport').and.callThrough();
613+
component.runOrShowDebiasReport(false);
614+
expect(debias.runDebiasReport).not.toHaveBeenCalled();
551615

552616
component.runOrShowDebiasReport(true);
553-
tick(1);
554-
fixture.detectChanges();
555-
TestBed.flushEffects();
556-
tick(1);
557-
expect(debias.runDebiasReport).not.toHaveBeenCalled();
617+
expect(debias.runDebiasReport).toHaveBeenCalled();
558618
}));
559619
});
560620
});

0 commit comments

Comments
 (0)