Allowed to specify "no-cache" for file loading

This is actually useful in case of automatic file reload when cycling on live events. Without it, new events are not loaded as the cache enters the game. This included extending the file-loader API to allow any options to be passed when loading a file.
HSF · Sep 27, 2023 · cc338ef · cc338ef
1 parent b0cb15a
commit cc338ef
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 29 deletions.
diff --git a/.../projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.html b/.../projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.html
@@ -5,7 +5,7 @@
       mat-button
       mat-stroked-button
       class="tree-node-button"
-      (click)="onSelect(node.url)"
+      (click)="onSelect(node.url, node.nocache)"
     >
       <svg class="node-icon">
         <use href="assets/icons/file.svg#file"></use>

diff --git a/...ojects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.test.ts b/...ojects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.test.ts
@@ -1,7 +1,11 @@
 import { CdkTreeModule } from '@angular/cdk/tree';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FileExplorerComponent, FileNode } from './file-explorer.component';
+import {
+  FileExplorerComponent,
+  FileNode,
+  FileEvent,
+} from './file-explorer.component';
 
 const getMockFileNode = () => {
   const rootNode = new FileNode('RootNode');
@@ -57,9 +61,9 @@ describe('FileExplorerComponent', () => {
 
   it('should emit onFileSelect event on selection of file', () => {
     jest.spyOn(component.onFileSelect, 'emit');
-    component.onSelect('http://example.com/file.json');
+    component.onSelect('http://example.com/file.json', true);
     expect(component.onFileSelect.emit).toHaveBeenCalledWith(
-      'http://example.com/file.json',
+      new FileEvent('http://example.com/file.json', true),
     );
   });
 

diff --git a/...ng/projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.ts b/...ng/projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.ts
@@ -12,10 +12,20 @@ import { MatTreeNestedDataSource } from '@angular/material/tree';
 export class FileNode {
   name: string;
   url: string;
+  nocache: boolean;
   children: { [key: string]: FileNode };
 
   constructor(name?: string) {
     this.name = name;
+    this.nocache = false;
+  }
+}
+export class FileEvent {
+  url: string;
+  nocache: boolean;
+  constructor(url: string, nocache: boolean) {
+    this.url = url;
+    this.nocache = nocache;
   }
 }
 
@@ -26,7 +36,8 @@ export class FileNode {
 })
 export class FileExplorerComponent implements OnChanges {
   @Input() rootFileNode: FileNode;
-  @Output() onFileSelect: EventEmitter<string> = new EventEmitter<string>();
+  @Output() onFileSelect: EventEmitter<FileEvent> =
+    new EventEmitter<FileEvent>();
 
   treeControl = new NestedTreeControl<FileNode>(
     this.getSortedChildren.bind(this),
@@ -44,8 +55,8 @@ export class FileExplorerComponent implements OnChanges {
   hasChildren = (_: number, node: FileNode) =>
     !!node.children && Object.keys(node.children).length > 0;
 
-  onSelect(url: string) {
-    this.onFileSelect.emit(url);
+  onSelect(url: string, nocache: boolean) {
+    this.onFileSelect.emit(new FileEvent(url, nocache));
   }
 
   /**

diff --git a/...jects/phoenix-ui-components/lib/components/ui-menu/cycle-events/cycle-events.component.ts b/...jects/phoenix-ui-components/lib/components/ui-menu/cycle-events/cycle-events.component.ts
@@ -60,7 +60,7 @@ export class CycleEventsComponent implements OnInit {
       // special value -1 is used to denote wrapping of the current set of events
       if (index == -1) {
         if (this.reloading) {
-          // reload the current events
+          // reload the current events, ignoring caches
           this.fileLoader.reloadLastEvents(this.eventDisplay);
         }
         // put back index to 0 to start with first event anyway

diff --git a/...ent-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.test.ts b/...ent-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.test.ts
@@ -2,7 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { EventDisplayService } from '../../../../services/event-display.service';
-import { FileNode } from '../../../file-explorer/file-explorer.component';
+import {
+  FileNode,
+  FileEvent,
+} from '../../../file-explorer/file-explorer.component';
 import { FileLoaderService } from '../../../../services/file-loader.service';
 import { PhoenixUIModule } from '../../../phoenix-ui.module';
 import { EventDataExplorerDialogData } from '../event-data-explorer.component';
@@ -37,14 +40,17 @@ describe.skip('EventDataExplorerDialogComponent', () => {
     {
       name: 'event_data/test.json',
       url: 'https://example.com/event_data/test.json',
+      nocache: false,
     },
     {
       name: 'event_data/test.xml',
       url: 'https://example.com/event_data/test.xml',
+      nocache: true,
     },
     {
       name: 'config_data/test.json',
       url: 'https://example.com/config_data/test.json',
+      nocache: false,
     },
   ];
 
@@ -108,7 +114,9 @@ describe.skip('EventDataExplorerDialogComponent', () => {
       );
 
     jest.spyOn(FileLoaderService.prototype, 'loadEvent');
-    component.loadEvent('https://example.com/event_data/test.json');
+    component.loadEvent(
+      new FileEvent('https://example.com/event_data/test.json', false),
+    );
     expect(mockFileLoaderService.loadEvent).toHaveBeenCalled();
   });
 
@@ -125,7 +133,9 @@ describe.skip('EventDataExplorerDialogComponent', () => {
           return true;
         },
       );
-    component.loadConfig('https://example.com/config_data/test.json');
+    component.loadConfig(
+      new FileEvent('https://example.com/config_data/test.json', false),
+    );
     expect(mockStateManager.loadStateFromJSON).toHaveBeenCalledWith({});
   });
 });
diff --git a/...nu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.ts b/...nu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.ts
@@ -1,7 +1,10 @@
 import { Component, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { EventDisplayService } from '../../../../services/event-display.service';
-import { FileNode } from '../../../file-explorer/file-explorer.component';
+import {
+  FileNode,
+  FileEvent,
+} from '../../../file-explorer/file-explorer.component';
 import { FileLoaderService } from '../../../../services/file-loader.service';
 import { EventDataExplorerDialogData } from '../event-data-explorer.component';
 
@@ -10,6 +13,7 @@ const supportFileTypes = ['json', 'xml'];
 export type FileResponse = {
   name: string;
   url: string;
+  nocache: boolean;
 };
 
 @Component({
@@ -56,17 +60,21 @@ export class EventDataExplorerDialogComponent {
     );
   }
 
-  loadEvent(file: string) {
+  loadEvent(file: FileEvent) {
     this.loading = true;
-    this.error = this.fileLoader.loadEvent(file, this.eventDisplay);
+    this.error = this.fileLoader.loadEvent(
+      file.url,
+      this.eventDisplay,
+      file.nocache ? { cache: 'no-cache' } : {},
+    );
     this.loading = false;
     if (!this.error) this.onClose();
   }
 
-  loadConfig(file: string) {
+  loadConfig(file: FileEvent) {
     this.loading = true;
     this.error = this.fileLoader.makeRequest(
-      `${this.dialogData.apiURL}?type=config&f=${file}`,
+      `${this.dialogData.apiURL}?type=config&f=${file.url}`,
       'text',
       (config) => {
         const stateManager = this.eventDisplay.getStateManager();
@@ -94,6 +102,7 @@ export class EventDataExplorerDialogComponent {
       });
 
       fileNode.url = filePath.url;
+      fileNode.nocache = filePath.nocache;
       fileNode = rootNode;
     }
 

diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/services/file-loader.service.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/services/file-loader.service.ts
@@ -11,6 +11,7 @@ import { JiveXMLLoader } from 'phoenix-event-display';
 })
 export class FileLoaderService {
   private lastEventsURL: string = '';
+  private lastEventsOptions: boolean = false;
 
   async unzip(data: ArrayBuffer) {
     const archive = new JSZip();
@@ -35,8 +36,9 @@ export class FileLoaderService {
     urlPath: string,
     responseType: 'json' | 'text' | 'blob',
     onData: (data: any) => void,
+    options: any = {},
   ) {
-    fetch(urlPath)
+    fetch(urlPath, options)
       .then((res) => res[responseType]())
       .then((data) => {
         if (responseType === 'blob') {
@@ -66,25 +68,35 @@ export class FileLoaderService {
     eventDisplay.buildEventDataFromJSON(processedEventData);
   }
 
-  loadEvent(file: string, eventDisplay: EventDisplayService) {
+  loadEvent(
+    file: string,
+    eventDisplay: EventDisplayService,
+    options: any = {},
+  ) {
     this.lastEventsURL = file;
+    this.lastEventsOptions = options;
     const isZip = file.split('.').pop() === 'zip';
     const rawfile = isZip ? file.substring(0, file.length - 4) : file;
-    return this.makeRequest(file, isZip ? 'blob' : 'text', (eventData) => {
-      switch (rawfile.split('.').pop()) {
-        case 'xml':
-          this.loadJiveXMLEvent(eventData, eventDisplay);
-          break;
-        case 'json':
-          this.loadJSONEvent(eventData, eventDisplay);
-          break;
-      }
-    });
+    return this.makeRequest(
+      file,
+      isZip ? 'blob' : 'text',
+      (eventData) => {
+        switch (rawfile.split('.').pop()) {
+          case 'xml':
+            this.loadJiveXMLEvent(eventData, eventDisplay);
+            break;
+          case 'json':
+            this.loadJSONEvent(eventData, eventDisplay);
+            break;
+        }
+      },
+      options,
+    );
   }
 
   reloadLastEvents(eventDisplay: EventDisplayService) {
     if (this.lastEventsURL.length > 0) {
-      this.loadEvent(this.lastEventsURL, eventDisplay);
+      this.loadEvent(this.lastEventsURL, eventDisplay, this.lastEventsOptions);
     }
   }
 }