Merge pull request #3264 from mempool/mononaut/fix-mining-dashboard-updates

Fix stale mining dashboard data

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
 import { EChartsOption, graphic } from 'echarts';
-import { Observable } from 'rxjs';
+import { merge, Observable, of } from 'rxjs';
-import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
+import { map, mergeMap, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
@@ -84,77 +84,84 @@ export class HashrateChartComponent implements OnInit {
         }
       });
 
-    this.hashrateObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
+    this.hashrateObservable$ = merge(
-      .pipe(
+      this.radioGroupForm.get('dateSpan').valueChanges
-        startWith(this.radioGroupForm.controls.dateSpan.value),
+        .pipe(
-        switchMap((timespan) => {
+          startWith(this.radioGroupForm.controls.dateSpan.value),
-          if (!this.widget && !firstRun) {
+          switchMap((timespan) => {
-            this.storageService.setValue('miningWindowPreference', timespan);
+            if (!this.widget && !firstRun) {
-          }
+              this.storageService.setValue('miningWindowPreference', timespan);
-          this.timespan = timespan;
+            }
-          firstRun = false;
+            this.timespan = timespan;
-          this.miningWindowPreference = timespan;
+            firstRun = false;
-          this.isLoading = true;
+            this.miningWindowPreference = timespan;
-          return this.apiService.getHistoricalHashrate$(timespan)
+            this.isLoading = true;
-            .pipe(
+            return this.apiService.getHistoricalHashrate$(this.timespan);
-              tap((response) => {
+          })
-                const data = response.body;
+        ),
+        this.stateService.chainTip$
+          .pipe(
+            switchMap(() => {
+              return this.apiService.getHistoricalHashrate$(this.timespan);
+            })
+          )
+      ).pipe(
+        tap((response: any) => {
+          const data = response.body;
 
-                // We generate duplicated data point so the tooltip works nicely
+          // We generate duplicated data point so the tooltip works nicely
-                const diffFixed = [];
+          const diffFixed = [];
-                let diffIndex = 1;
+          let diffIndex = 1;
-                let hashIndex = 0;
+          let hashIndex = 0;
-                while (hashIndex < data.hashrates.length) {
+          while (hashIndex < data.hashrates.length) {
-                  if (diffIndex >= data.difficulty.length) {
+            if (diffIndex >= data.difficulty.length) {
-                    while (hashIndex < data.hashrates.length) {
+              while (hashIndex < data.hashrates.length) {
-                      diffFixed.push({
+                diffFixed.push({
-                        timestamp: data.hashrates[hashIndex].timestamp,
+                  timestamp: data.hashrates[hashIndex].timestamp,
-                        difficulty: data.difficulty.length > 0 ?  data.difficulty[data.difficulty.length - 1].difficulty : null
+                  difficulty: data.difficulty.length > 0 ?  data.difficulty[data.difficulty.length - 1].difficulty : null
-                      });
-                      ++hashIndex;
-                    }
-                    break;
-                  }
-
-                  while (hashIndex < data.hashrates.length && diffIndex < data.difficulty.length &&
-                    data.hashrates[hashIndex].timestamp <= data.difficulty[diffIndex].time
-                  ) {
-                    diffFixed.push({
-                      timestamp: data.hashrates[hashIndex].timestamp,
-                      difficulty: data.difficulty[diffIndex - 1].difficulty
-                    });
-                    ++hashIndex;
-                  }
-                  ++diffIndex;
-                }
-
-                let maResolution = 15;
-                const hashrateMa = [];
-                for (let i = maResolution - 1; i < data.hashrates.length; ++i) {
-                  let avg = 0;
-                  for (let y = maResolution - 1; y >= 0; --y) {
-                    avg += data.hashrates[i - y].avgHashrate;
-                  }
-                  avg /= maResolution;
-                  hashrateMa.push([data.hashrates[i].timestamp * 1000, avg]);
-                }
-
-                this.prepareChartOptions({
-                  hashrates: data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]),
-                  difficulty: diffFixed.map(val => [val.timestamp * 1000, val.difficulty]),
-                  hashrateMa: hashrateMa,
                 });
-                this.isLoading = false;
+                ++hashIndex;
-              }),
+              }
-              map((response) => {
+              break;
-                const data = response.body;
+            }
-                return {
+
-                  blockCount: parseInt(response.headers.get('x-total-count'), 10),
+            while (hashIndex < data.hashrates.length && diffIndex < data.difficulty.length &&
-                  currentDifficulty: data.currentDifficulty,
+              data.hashrates[hashIndex].timestamp <= data.difficulty[diffIndex].time
-                  currentHashrate: data.currentHashrate,
+            ) {
-                };
+              diffFixed.push({
-              }),
+                timestamp: data.hashrates[hashIndex].timestamp,
-            );
+                difficulty: data.difficulty[diffIndex - 1].difficulty
+              });
+              ++hashIndex;
+            }
+            ++diffIndex;
+          }
+
+          let maResolution = 15;
+          const hashrateMa = [];
+          for (let i = maResolution - 1; i < data.hashrates.length; ++i) {
+            let avg = 0;
+            for (let y = maResolution - 1; y >= 0; --y) {
+              avg += data.hashrates[i - y].avgHashrate;
+            }
+            avg /= maResolution;
+            hashrateMa.push([data.hashrates[i].timestamp * 1000, avg]);
+          }
+
+          this.prepareChartOptions({
+            hashrates: data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]),
+            difficulty: diffFixed.map(val => [val.timestamp * 1000, val.difficulty]),
+            hashrateMa: hashrateMa,
+          });
+          this.isLoading = false;
+        }),
+        map((response) => {
+          const data = response.body;
+          return {
+            blockCount: parseInt(response.headers.get('x-total-count'), 10),
+            currentDifficulty: data.currentDifficulty,
+            currentHashrate: data.currentHashrate,
+          };
         }),
         share()
       );

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, NgZone, OnInit, HostBinding
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { EChartsOption, PieSeriesOption } from 'echarts';
-import { concat, Observable } from 'rxjs';
+import { merge, Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../services/seo.service';
 import { StorageService } from '../..//services/storage.service';
@@ -73,7 +73,7 @@ export class PoolRankingComponent implements OnInit {
         }
       });
 
-    this.miningStatsObservable$ = concat(
+    this.miningStatsObservable$ = merge(
       this.radioGroupForm.get('dateSpan').valueChanges
         .pipe(
           startWith(this.radioGroupForm.controls.dateSpan.value), // (trigger when the page loads)
@@ -89,7 +89,7 @@ export class PoolRankingComponent implements OnInit {
             return this.miningService.getMiningStats(this.miningWindowPreference);
           })
         ),
-        this.stateService.blocks$
+        this.stateService.chainTip$
           .pipe(
             switchMap(() => {
               return this.miningService.getMiningStats(this.miningWindowPreference);