From a88820a1203b9e5c630482d956c11367f10e799a Mon Sep 17 00:00:00 2001 From: Adam Kariv Date: Sat, 27 Jan 2024 09:10:42 +0200 Subject: [PATCH] Better performance, limit zoom extent --- .../app/chronomap-page/chronomap-page.component.ts | 6 ++++-- projects/chronomaps/src/app/data.service.ts | 10 +++++----- .../directory-item/directory-item.component.html | 6 ++++-- .../directory-item/directory-item.component.ts | 12 +++++++++--- .../src/app/time-line/time-line.component.ts | 7 +++++-- 5 files changed, 27 insertions(+), 14 deletions(-) diff --git a/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.ts b/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.ts index 79aaa1b..ce227f1 100644 --- a/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.ts +++ b/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, effect, signal } from '@angular/core'; import { ChronomapDatabase, DataService } from '../data.service'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; -import { delay, filter, first, map, tap, timer } from 'rxjs'; +import { delay, filter, first, map, switchMap, tap, timer } from 'rxjs'; import { MapService } from '../map.service'; import { StateService } from '../state.service'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; @@ -72,7 +72,9 @@ export class ChronomapPageComponent { if (slug && chronomaps.length > 0) { const chronomap = chronomaps.find(c => c.slug() === slug); if (chronomap) { - chronomap.fetchContent().subscribe(() => { + chronomap.fetchMeta().pipe( + switchMap(() => chronomap.fetchContent()), + ).subscribe(() => { this.chronomap.set(chronomap); }); } diff --git a/projects/chronomaps/src/app/data.service.ts b/projects/chronomaps/src/app/data.service.ts index 131ed9a..e1c65c2 100644 --- a/projects/chronomaps/src/app/data.service.ts +++ b/projects/chronomaps/src/app/data.service.ts @@ -347,11 +347,11 @@ export class DirectoryDatabase extends BaserowDatabase { const map = new ChronomapDatabase(this.database, chronomap, this.http); return map; }) || []); - forkJoin([...this.chronomaps().map(map => map.fetchMeta())]).subscribe((maps) => { - console.log('all maps loaded'); - // const byUpdateTime = this.chronomaps().sort((a, b) => b.lastModified().getTime() - a.lastModified().getTime()); - // this.chronomaps.set(byUpdateTime); - }); + // forkJoin([...this.chronomaps().map(map => map.fetchMeta())]).subscribe((maps) => { + // console.log('all maps loaded'); + // // const byUpdateTime = this.chronomaps().sort((a, b) => b.lastModified().getTime() - a.lastModified().getTime()); + // // this.chronomaps.set(byUpdateTime); + // }); }); } } diff --git a/projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.html b/projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.html index 08f0b46..c8a68df 100644 --- a/projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.html +++ b/projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.html @@ -18,5 +18,7 @@
{{authorsMsg()}}
- +@if (chronomap.timelineItems().length > 0) { + +} diff --git a/projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.ts b/projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.ts index 3dd623b..345f467 100644 --- a/projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.ts +++ b/projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.ts @@ -1,7 +1,7 @@ -import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild, WritableSignal, computed, effect, signal } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, WritableSignal, computed, effect, signal } from '@angular/core'; import { Author, ChronomapDatabase, DataService, DirectoryDatabase } from '../../data.service'; import * as dayjs from 'dayjs'; -import { last } from 'rxjs'; +import { last, switchMap } from 'rxjs'; import { marked } from 'marked'; import { Router } from '@angular/router'; @@ -15,7 +15,7 @@ import { Router } from '@angular/router'; '(click)': 'navigate()' } }) -export class DirectoryItemComponent implements AfterViewInit { +export class DirectoryItemComponent implements OnInit, AfterViewInit { @Input() chronomap: ChronomapDatabase; @Input() timelineState: WritableSignal; @@ -72,6 +72,12 @@ export class DirectoryItemComponent implements AfterViewInit { }); } + ngOnInit(): void { + this.chronomap.fetchMeta().pipe( + switchMap(() => this.chronomap.fetchContent()), + ).subscribe(); + } + ngAfterViewInit(): void { this.alignment.next(this.arrowContainer.nativeElement.getBoundingClientRect().width - 26); } diff --git a/projects/chronomaps/src/app/time-line/time-line.component.ts b/projects/chronomaps/src/app/time-line/time-line.component.ts index ca830cf..ce0488a 100644 --- a/projects/chronomaps/src/app/time-line/time-line.component.ts +++ b/projects/chronomaps/src/app/time-line/time-line.component.ts @@ -131,7 +131,6 @@ export class TimeLineComponent implements OnInit, OnChanges, AfterViewInit { } ngOnInit(): void { - this.chronomap.fetchContent().subscribe(); this.parseState(this.state ? (this.state() || '') : ''); } @@ -153,10 +152,14 @@ export class TimeLineComponent implements OnInit, OnChanges, AfterViewInit { init() { this.timeline.nativeElement.innerHTML = ''; this.zoomBehaviour = zoom(); + const maxZoom = (this.maxDate.getTime() - this.minDate.getTime()) / (1000 * 10 * 60); if (!this.limitless) { this.zoomBehaviour = this.zoomBehaviour - .scaleExtent([1, 100000]) + .scaleExtent([1, maxZoom]) .translateExtent([[0, 0], [this.WIDTH, 0]]); + } else { + this.zoomBehaviour = this.zoomBehaviour + .scaleExtent([0, maxZoom]); } this.zoomBehaviour = this.zoomBehaviour.on('zoom', (e: D3ZoomEvent) => this.onZoom(e)) this.svg = select(this.timeline.nativeElement)