fix: add warning for users accessing large datasets in chrome-based browsers

Author: nana-boateng

src/app/app.component.ts

@@ -1,4 +1,12 @@
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  computed,
+  effect,
+  inject,
+  OnDestroy,
+  OnInit,
+  signal,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { CommonModule } from '@angular/common';
@@ -9,7 +17,10 @@ import {
 } from './new.state/dataset/dataset.selectors';
 import { DataverseFetchActions } from './new.state/xml/xml.actions';
 import { BodyComponent } from './components/body/body.component';
-import { selectDatasetError } from './new.state/xml/xml.selectors';
+import {
+  selectDatasetChromeError,
+  selectDatasetError,
+} from './new.state/xml/xml.selectors';
 import { selectDatasetProgress } from './new.state/ui/ui.selectors';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { Languages } from './../assets/i18n/localizations';
@@ -38,6 +49,21 @@ import { Subject, takeUntil } from 'rxjs';
                 id="dataset-progress"
                 aria-label="Loading dataset..."
               ></progress>
+              @if (chromeError()) {
+                <span class="text-2xl">
+                  {{ 'APP.LOADING_WARNING' | translate }}
+                </span>
+                <span class="text-lg font-thin">
+                  {{ 'APP.LOADING_WARNING_2' | translate }}
+                </span>
+                <a
+                  href="{{ guideLink() }}"
+                  class="text-lg font-thin underline"
+                  target="_blank"
+                >
+                  {{ 'APP.LOADING_WARNING_3' | translate }}
+                </a>
+              }
             </label>
           </h1>
         </div>
@@ -90,6 +116,8 @@ export class AppComponent implements OnInit, OnDestroy {
   loaded = this.store.selectSignal(selectDatasetDownloadedSuccessfully);
   error = this.store.selectSignal(selectDatasetError);
   progress = this.store.selectSignal(selectDatasetProgress);
+  chromeError = this.store.selectSignal(selectDatasetChromeError);
+  guideLink = signal<string | null>(null);
   private route = inject(ActivatedRoute);
   private translate = inject(TranslateService);
   private destroy$ = new Subject<void>();
@@ -101,6 +129,15 @@ export class AppComponent implements OnInit, OnDestroy {
     } else {
       this.setLang('en-CA');
     }
+    if (localStorage.getItem('language') === 'en-CA') {
+      this.guideLink.set(
+        'https://learn.scholarsportal.info/all-guides/odesi/working-with-data/#Accessing-Data-Explorer-Through-Odesi',
+      );
+    } else if (localStorage.getItem('language') === 'fr-CA') {
+      this.guideLink.set(
+        'https://learn.scholarsportal.info/fr/guides/odesi/travailler-avec-des-donnees/#Accder-lExplorateur-de-donnes-laide-de-Odesi',
+      );
+    }
   }
 
   ngOnInit() {

src/app/new.state/xml/xml.actions.ts

@@ -36,6 +36,7 @@ export const DataverseFetchActions = createActionGroup({
     }>(),
     // API call failed for a variety of reasons
     'Fetch DDI Error': props<{ error: Error }>(),
+    'Fetch DDI Error After 15 Seconds': emptyProps,
     // DDI file found
     'Fetch Crosstab Start': props<{
       data: ddiJSONStructure;

src/app/new.state/xml/xml.effects.ts

@@ -1,7 +1,16 @@
 import { inject, Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { DataverseFetchActions, XmlManipulationActions } from './xml.actions';
-import { catchError, delay, exhaustMap, map, of, switchMap, tap } from 'rxjs';
+import {
+  catchError,
+  debounceTime,
+  delay,
+  exhaustMap,
+  map,
+  of,
+  switchMap,
+  tap,
+} from 'rxjs';
 import { DdiService } from '../../services/ddi.service';
 import { DatasetActions } from '../dataset/dataset.actions';
 import {
@@ -15,6 +24,22 @@ import {
 export class XmlEffects {
   private actions$ = inject(Actions);
 
+  loadingForMoreThan15Seconds = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(DataverseFetchActions.fetchDDIStart),
+      delay(15000),
+      map(() => DataverseFetchActions.fetchDDIErrorAfter15Seconds()),
+    );
+  });
+
+  loadingDecodedForMoreThan15Seconds = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(DataverseFetchActions.fetchCrosstabStart),
+      delay(15000),
+      map(() => DataverseFetchActions.fetchDDIErrorAfter15Seconds()),
+    );
+  });
+
   /**
    * Effect to fetch dataset from Dataverse
    *

src/app/new.state/xml/xml.interface.ts

@@ -190,7 +190,7 @@ export interface XmlState {
     secureUploadUrl: string | null;
   } | null;
   error: {
-    type: 'fetch' | 'upload' | null;
+    type: 'fetch' | 'upload' | 'chrome-error' | null;
     message: string | null;
   };
 }

src/app/new.state/xml/xml.reducer.ts

@@ -76,6 +76,13 @@ export const xmlReducer = createReducer(
       message: error.message || 'An error occurred while fetching the dataset',
     },
   })),
+  on(DataverseFetchActions.fetchDDIErrorAfter15Seconds, (state) => ({
+    ...state,
+    error: {
+      type: 'chrome-error' as const,
+      message: 'Dataset loading took too long',
+    },
+  })),
   on(DataverseFetchActions.datasetUploadError, (state, { error }) => ({
     ...state,
     error: {

src/app/new.state/xml/xml.selectors.ts

@@ -13,6 +13,11 @@ export const selectDatasetError = createSelector(
   (state) => state.error,
 );
 
+export const selectDatasetChromeError = createSelector(
+  selectDatasetError,
+  (error) => (error?.type === 'chrome-error' ? 'chrome-error' : false),
+);
+
 export const selectUserHasUploadAccess = createSelector(
   selectXmlFeature,
   (state) => !!state.info?.secureUploadUrl,

src/assets/i18n/en-CA.json

@@ -62,6 +62,9 @@
   },
   "APP": {
     "LOADING": "Loading dataset ...",
+    "LOADING_WARNING": "Looks like you're loading a large dataset. This may take a few minutes. Please wait.",
+    "LOADING_WARNING_2": "Google Chrome or Microsoft Edge browser users may experience an error with datasets larger than 500MB. Please use Firefox to view this dataset.",
+    "LOADING_WARNING_3": "Click here for more information",
     "ERROR": "An Error Occurred",
     "ERROR_FETCH": "Error fetching dataset: ",
     "ERROR_UNEXPECTED": "An unexpected error occurred. Please try again later.",

src/assets/i18n/fr-CA.json

@@ -61,7 +61,10 @@
     "VAR_REMOVED": "Variable retirée des tableaux croisés."
   },
   "APP": {
-    "LOADING": "Chargement du jeu de données",
+    "LOADING": "Chargement d'ensemble de données",
+    "LOADING_WARNING": "Il semble que vous chargiez un grand ensemble de données. Cela peut prendre quelques minutes. Veuillez patienter.",
+    "LOADING_WARNING_2": "Les utilisateurs des navigateurs Google Chrome et Microsoft Edge peuvent rencontrer une erreur avec les ensembles de données plus de 500 Mo. Veuillez utiliser Firefox pour afficher cet ensemble de données.",
+    "LOADING_WARNING_3": "Cliquez içi pour plus d'information",
     "ERROR": "Une erreur s'est produite",
     "ERROR_FETCH": "Erreur lors de la récupération du jeu de données : ",
     "ERROR_UNEXPECTED": "Une erreur inattendue s'est produite. Veuillez réessayer plus tard.",