Skip to content

Commit b797319

Browse files
akarivakariv
committed
More performant gender index page
1 parent 743ffed commit b797319

7 files changed

Lines changed: 89 additions & 110 deletions

File tree

‎src/app/gender-index-page-browser-header-element/gender-index-page-browser-header-element.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { I18nService } from '../i18n.service';
88
})
99
export class GenderIndexPageBrowserHeaderElementComponent implements OnInit {
1010

11-
@Input() selected: string;
1211
@Input() active: string;
1312
@Input() slug: string;
1413
@Input() name: string;

‎src/app/gender-index-page-browser-section/gender-index-page-browser-section.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@
1313
</a>
1414
</div>
1515
</div>
16-
<app-search-results [results]='charts' (shown)='active.next(name)'></app-search-results>
16+
<app-search-results [results]='charts'></app-search-results>

‎src/app/gender-index-page-browser-section/gender-index-page-browser-section.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export class GenderIndexPageBrowserSectionComponent implements OnInit, OnChanges
1515
@Input() slug: string;
1616
@Input() name: string;
1717
@Input() display: string;
18-
@Output() active = new EventEmitter<string>();
1918

2019
open = false;
2120
selected: string = null;

‎src/app/gender-index-page-browser/gender-index-page-browser.component.html‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
<div class='sticky-header'>
22
<div class='inner'>
3-
<app-gender-index-page-browser-header-element [selected]='selected' slug='aducation' name='השכלה' display='השכלה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
4-
<app-gender-index-page-browser-header-element [selected]='selected' slug='market' name='שוק העבודה' display='שוק העבודה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
5-
<app-gender-index-page-browser-header-element [selected]='selected' slug='occupation' name='מגדור מקצועי' display='מגדור מקצועי' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
6-
<app-gender-index-page-browser-header-element [selected]='selected' slug='poverty' name='ביטחון כלכלי ועוני' display='ביטחון כלכלי ועוני' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
7-
<app-gender-index-page-browser-header-element [selected]='selected' slug='power' name='עוצמה' display='עוצמה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
8-
<app-gender-index-page-browser-header-element [selected]='selected' slug='culture' name='תרבות ותקשורת' display='תרבות ותקשורת' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
9-
<app-gender-index-page-browser-header-element [selected]='selected' slug='family' name='משפחה וילודה' display='משפחה וילודה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
10-
<app-gender-index-page-browser-header-element [selected]='selected' slug='age65' name='גיל 65+' display='גיל 65+' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
11-
<app-gender-index-page-browser-header-element [selected]='selected' slug='time' name='זמן' display='זמן' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
12-
<app-gender-index-page-browser-header-element [selected]='selected' slug='violence' name='אלימות מגדרית' display='אלימות מגדרית' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
13-
<app-gender-index-page-browser-header-element [selected]='selected' slug='health' name='בריאות' display='בריאות' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
14-
<app-gender-index-page-browser-header-element [selected]='selected' slug='arabic' name='החברה הערבית' display='החברה הערבית' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
15-
<app-gender-index-page-browser-header-element [selected]='selected' slug='religious' name='החברה החרדית' display='החברה החרדית' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
16-
<app-gender-index-page-browser-header-element [selected]='selected' slug='suburbs' name='פריפריה' display='פריפריה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
3+
<app-gender-index-page-browser-header-element slug='aducation' name='השכלה' display='השכלה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
4+
<app-gender-index-page-browser-header-element slug='market' name='שוק העבודה' display='שוק העבודה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
5+
<app-gender-index-page-browser-header-element slug='occupation' name='מגדור מקצועי' display='מגדור מקצועי' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
6+
<app-gender-index-page-browser-header-element slug='poverty' name='ביטחון כלכלי ועוני' display='ביטחון כלכלי ועוני' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
7+
<app-gender-index-page-browser-header-element slug='power' name='עוצמה' display='עוצמה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
8+
<app-gender-index-page-browser-header-element slug='culture' name='תרבות ותקשורת' display='תרבות ותקשורת' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
9+
<app-gender-index-page-browser-header-element slug='family' name='משפחה וילודה' display='משפחה וילודה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
10+
<app-gender-index-page-browser-header-element slug='age65' name='גיל 65+' display='גיל 65+' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
11+
<app-gender-index-page-browser-header-element slug='time' name='זמן' display='זמן' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
12+
<app-gender-index-page-browser-header-element slug='violence' name='אלימות מגדרית' display='אלימות מגדרית' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
13+
<app-gender-index-page-browser-header-element slug='health' name='בריאות' display='בריאות' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
14+
<app-gender-index-page-browser-header-element slug='arabic' name='החברה הערבית' display='החברה הערבית' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
15+
<app-gender-index-page-browser-header-element slug='religious' name='החברה החרדית' display='החברה החרדית' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
16+
<app-gender-index-page-browser-header-element slug='suburbs' name='פריפריה' display='פריפריה' [active]='active' i18n-display></app-gender-index-page-browser-header-element>
1717
</div>
1818
</div>
1919

20-
<app-gender-index-page-browser-section [results]='results' slug='aducation' name='השכלה' display='השכלה' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
21-
<app-gender-index-page-browser-section [results]='results' slug='market' name='שוק העבודה' display='שוק העבודה' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
22-
<app-gender-index-page-browser-section [results]='results' slug='occupation' name='מגדור מקצועי' display='מגדור מקצועי' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
23-
<app-gender-index-page-browser-section [results]='results' slug='poverty' name='ביטחון כלכלי ועוני' display='ביטחון כלכלי ועוני' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
24-
<app-gender-index-page-browser-section [results]='results' slug='power' name='עוצמה' display='עוצמה' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
25-
<app-gender-index-page-browser-section [results]='results' slug='culture' name='תרבות ותקשורת' display='תרבות ותקשורת' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
26-
<app-gender-index-page-browser-section [results]='results' slug='family' name='משפחה וילודה' display='משפחה וילודה' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
27-
<app-gender-index-page-browser-section [results]='results' slug='age65' name='גיל 65+' display='גיל 65+' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
28-
<app-gender-index-page-browser-section [results]='results' slug='time' name='זמן' display='זמן' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
29-
<app-gender-index-page-browser-section [results]='results' slug='violence' name='אלימות מגדרית' display='אלימות מגדרית' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
30-
<app-gender-index-page-browser-section [results]='results' slug='health' name='בריאות' display='בריאות' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
31-
<app-gender-index-page-browser-section [results]='results' slug='arabic' name='החברה הערבית' display='החברה הערבית' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
32-
<app-gender-index-page-browser-section [results]='results' slug='religious' name='החברה החרדית' display='החברה החרדית' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
33-
<app-gender-index-page-browser-section [results]='results' slug='suburbs' name='פריפריה' display='פריפריה' (active)='setActive($event)' i18n-display></app-gender-index-page-browser-section>
20+
<app-gender-index-page-browser-section [results]='results' slug='aducation' name='השכלה' display='השכלה' i18n-display></app-gender-index-page-browser-section>
21+
<app-gender-index-page-browser-section [results]='results' slug='market' name='שוק העבודה' display='שוק העבודה' i18n-display></app-gender-index-page-browser-section>
22+
<app-gender-index-page-browser-section [results]='results' slug='occupation' name='מגדור מקצועי' display='מגדור מקצועי' i18n-display></app-gender-index-page-browser-section>
23+
<app-gender-index-page-browser-section [results]='results' slug='poverty' name='ביטחון כלכלי ועוני' display='ביטחון כלכלי ועוני' i18n-display></app-gender-index-page-browser-section>
24+
<app-gender-index-page-browser-section [results]='results' slug='power' name='עוצמה' display='עוצמה' i18n-display></app-gender-index-page-browser-section>
25+
<app-gender-index-page-browser-section [results]='results' slug='culture' name='תרבות ותקשורת' display='תרבות ותקשורת' i18n-display></app-gender-index-page-browser-section>
26+
<app-gender-index-page-browser-section [results]='results' slug='family' name='משפחה וילודה' display='משפחה וילודה' i18n-display></app-gender-index-page-browser-section>
27+
<app-gender-index-page-browser-section [results]='results' slug='age65' name='גיל 65+' display='גיל 65+' i18n-display></app-gender-index-page-browser-section>
28+
<app-gender-index-page-browser-section [results]='results' slug='time' name='זמן' display='זמן' i18n-display></app-gender-index-page-browser-section>
29+
<app-gender-index-page-browser-section [results]='results' slug='violence' name='אלימות מגדרית' display='אלימות מגדרית' i18n-display></app-gender-index-page-browser-section>
30+
<app-gender-index-page-browser-section [results]='results' slug='health' name='בריאות' display='בריאות' i18n-display></app-gender-index-page-browser-section>
31+
<app-gender-index-page-browser-section [results]='results' slug='arabic' name='החברה הערבית' display='החברה הערבית' i18n-display></app-gender-index-page-browser-section>
32+
<app-gender-index-page-browser-section [results]='results' slug='religious' name='החברה החרדית' display='החברה החרדית' i18n-display></app-gender-index-page-browser-section>
33+
<app-gender-index-page-browser-section [results]='results' slug='suburbs' name='פריפריה' display='פריפריה' i18n-display></app-gender-index-page-browser-section>

‎src/app/gender-index-page-browser/gender-index-page-browser.component.ts‎

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
1-
import { Component, OnInit, Input, AfterContentInit, ElementRef } from '@angular/core';
1+
import { Component, OnInit, Input, AfterViewInit, ElementRef, OnDestroy, AfterContentInit, AfterContentChecked, AfterViewChecked } from '@angular/core';
22
import { ApiService } from '../api.service';
33
import { ActivatedRoute } from '@angular/router';
4+
import { timer } from 'rxjs';
5+
import { take } from 'rxjs/operators';
46

57
@Component({
68
selector: 'app-gender-index-page-browser',
79
templateUrl: './gender-index-page-browser.component.html',
810
styleUrls: ['./gender-index-page-browser.component.less']
911
})
10-
export class GenderIndexPageBrowserComponent implements OnInit {
12+
export class GenderIndexPageBrowserComponent implements OnInit, OnDestroy {
1113

1214
@Input() active = null;
1315

1416
results: any[] = [];
1517
selected = null;
1618

19+
observer: IntersectionObserver;
20+
1721
constructor(private api: ApiService, private activatedRoute: ActivatedRoute, private el: ElementRef) {
18-
this.activatedRoute.fragment.subscribe((fragment) => {
19-
const dimension = fragment;
20-
if (dimension) {
21-
this.selected = dimension;
22-
}
23-
});
2422
}
2523

2624
ngOnInit() {
@@ -30,10 +28,54 @@ export class GenderIndexPageBrowserComponent implements OnInit {
3028
.filter((x) => x.kind === 'Gender Index')
3129
.sort((a, b) => a.series[0].order_index - b.series[0].order_index);
3230
this.results = gender_index_results;
31+
timer(1000).subscribe(() => {
32+
this.setupObserver();
33+
this.activatedRoute.fragment.pipe(
34+
take(1),
35+
).subscribe((fragment) => {
36+
const dimension = fragment;
37+
if (dimension) {
38+
const el = this.el.nativeElement as HTMLElement;
39+
const section = el.querySelector(`app-gender-index-page-browser-section[name="${dimension}"]`);
40+
if (section) {
41+
const boundingClientRect = section.getBoundingClientRect();
42+
const parent = document.scrollingElement;
43+
parent.scrollTop = boundingClientRect.top + parent.scrollTop - 158;
44+
}
45+
}
46+
});
47+
});
3348
});
3449
}
3550

3651
setActive(section) {
3752
this.active = section;
3853
}
54+
55+
setupObserver(): void {
56+
this.observer = new IntersectionObserver((entries) => {
57+
let intersectionHeight = -1;
58+
for (const entry of entries) {
59+
if (entry.isIntersecting) {
60+
const entryIntersectionHeight = entry.intersectionRect.height;
61+
const el: HTMLElement = entry.target as HTMLElement;
62+
if (entryIntersectionHeight > intersectionHeight) {
63+
intersectionHeight = entryIntersectionHeight;
64+
this.setActive(el.getAttribute('name'));
65+
}
66+
}
67+
}
68+
}, {threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.9, 1]});
69+
const el = this.el.nativeElement as HTMLElement;
70+
el.querySelectorAll('app-gender-index-page-browser-section').forEach((section) => {
71+
this.observer.observe(section);
72+
});
73+
}
74+
75+
ngOnDestroy(): void {
76+
if (this.observer) {
77+
this.observer.disconnect();
78+
}
79+
this.observer = null;
80+
}
3981
}

‎src/app/result-card-dataset/result-card-dataset.component.ts‎

Lines changed: 7 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { BehaviorSubject, ReplaySubject, Subscription } from 'rxjs';
99
templateUrl: './result-card-dataset.component.html',
1010
styleUrls: ['./result-card-dataset.component.less']
1111
})
12-
export class ResultCardDatasetComponent implements OnInit, OnChanges, OnDestroy {
12+
export class ResultCardDatasetComponent implements OnChanges {
1313

1414
@Input() result: any;
1515
@Input() genderIndex: boolean;
@@ -19,46 +19,22 @@ export class ResultCardDatasetComponent implements OnInit, OnChanges, OnDestroy
1919
@Input() title = true;
2020

2121
colorScale = cs;
22-
_savedResult = null;
2322
_analyzedColors = null;
2423
_chart = null;
2524
ratio = 65;
26-
27-
iobs: IntersectionObserver;
28-
visible$ = new BehaviorSubject<boolean>(false);
29-
visibleSub: Subscription = null;
3025

3126
constructor(public _: I18nService, private el: ElementRef) {}
3227

33-
ngOnInit() {
34-
this.visibleSub = this.visible$.subscribe((visible) => {
35-
if (visible) {
36-
this._chart = this._savedResult;
37-
if (this._analyzedColors !== this._chart) {
38-
analyzeColors(this._chart);
39-
this._analyzedColors = this._chart;
40-
}
41-
} else {
42-
this._chart = null;
43-
}
44-
});
45-
}
46-
47-
ngOnDestroy() {
48-
this.visibleSub.unsubscribe();
49-
if (this.iobs) {
50-
this.iobs.unobserve(this.el.nativeElement);
51-
this.iobs.disconnect();
52-
}
53-
}
54-
5528
ngOnChanges() {
56-
if (this.result !== this._savedResult) {
57-
this._savedResult = this.result;
29+
if (this.result !== this._chart) {
30+
this._chart = this.result;
5831
}
32+
if (this._analyzedColors !== this._chart) {
33+
analyzeColors(this._chart);
34+
this._analyzedColors = this._chart;
35+
}
5936
const chart_type = this.result.chart_type || '';
6037
this.ratio = chart_type.indexOf('hbars') === 0 ? 200 : 60;
61-
this.visible$.next(this.visible);
6238
}
6339

6440
}

‎src/app/search-results/search-results.component.ts‎

Lines changed: 3 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ import { debounceTime, map } from 'rxjs/operators';
1111
templateUrl: './search-results.component.html',
1212
styleUrls: ['./search-results.component.less']
1313
})
14-
export class SearchResultsComponent implements OnInit, OnDestroy, OnChanges, AfterContentInit {
14+
export class SearchResultsComponent implements OnInit, OnDestroy, OnChanges {
1515

1616
@Input() manager: SearchManager;
1717
@Input() results: any[];
18-
@Output() shown = new EventEmitter<void>();
18+
1919
columns = [[], []];
2020
columnAll = [];
2121
@ViewChild('column0') column0ref: ElementRef;
@@ -26,9 +26,7 @@ export class SearchResultsComponent implements OnInit, OnDestroy, OnChanges, Aft
2626
visible = false;
2727

2828
iobs: IntersectionObserver;
29-
visible$ = new BehaviorSubject<boolean>(false);
30-
visibleSub: Subscription = null;
31-
29+
3230
constructor(public api: ApiService,
3331
private bottommer: BottommerService,
3432
private el: ElementRef) {
@@ -42,35 +40,7 @@ export class SearchResultsComponent implements OnInit, OnDestroy, OnChanges, Aft
4240
}
4341
});
4442
this.visible = true;
45-
} else {
46-
this.visibleSub = this.visible$.subscribe((visible) => {
47-
if (!this.visible && visible) {
48-
this.visible = visible;
49-
this.shown.next();
50-
}
51-
this.visible = visible;
52-
});
53-
}
54-
}
55-
56-
restartObserver() {
57-
if (this.iobs) {
58-
this.iobs.disconnect();
5943
}
60-
this.iobs.observe(this.el.nativeElement);
61-
}
62-
63-
ngAfterContentInit() {
64-
this.iobs = new IntersectionObserver(
65-
(entries) => {
66-
this.visible$.next(entries[0].isIntersecting);
67-
},
68-
{
69-
rootMargin: '0px',
70-
threshold: 0
71-
}
72-
);
73-
this.restartObserver();
7444
}
7545

7646
clear() {
@@ -87,10 +57,6 @@ export class SearchResultsComponent implements OnInit, OnDestroy, OnChanges, Aft
8757
this.searchResultsSubs.unsubscribe();
8858
this.searchResultsSubs = null;
8959
}
90-
if (this.visibleSub) {
91-
this.visibleSub.unsubscribe();
92-
this.visibleSub = null;
93-
}
9460
}
9561

9662
ngOnChanges() {
@@ -105,9 +71,6 @@ export class SearchResultsComponent implements OnInit, OnDestroy, OnChanges, Aft
10571
});
10672
} else if (this.results && this.results.length) {
10773
this.assignCards(this.results);
108-
setTimeout(() => {
109-
this.restartObserver();
110-
}, 0);
11174
}
11275
}
11376

0 commit comments

Comments
 (0)