Better performance, limit zoom extent

whiletrue-industries · Jan 27, 2024 · a88820a · a88820a
1 parent d18e0ce
commit a88820a
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 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
@@ -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
@@ -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
@@ -18,5 +18,7 @@
         <div class='counts'>{{authorsMsg()}}</div>
     </div>
 </div>
-<app-time-line [id]='chronomap.title()' [state]='timelineState' [minDate]='minDate()' [maxDate]='maxDate()'
-    [chronomap]='chronomap' [showHovers]='false' [hoverable]='false' [hovered]='hovered'></app-time-line>
+@if (chronomap.timelineItems().length > 0) {
+    <app-time-line [id]='chronomap.title()' [state]='timelineState' [minDate]='minDate()' [maxDate]='maxDate()'
+        [chronomap]='chronomap' [showHovers]='false' [hoverable]='false' [limitless]='true' [hovered]='hovered'></app-time-line>    
+}
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
@@ -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<string>;
@@ -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
@@ -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<SVGSVGElement, unknown>();
+    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<SVGSVGElement, unknown>) => this.onZoom(e))
     this.svg = select<SVGSVGElement, unknown>(this.timeline.nativeElement)