Allowed to specify "no-cache" for file loading

packages/phoenix-ng/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>

packages/phoenix-ng/projects/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),
     );
   });
 

packages/phoenix-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));
   }
 
   /**

packages/phoenix-ng/projects/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

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/event-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({});
   });
 });

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/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;
     }
 

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);
     }
   }
 }