feat(app): support for importing with LHCb loader

packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.html

@@ -1,6 +1,6 @@
 <app-loader [loaded]="loaded"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu [eventDataFormats]="['JSON', 'JIVEXML', 'ZIP']"></app-ui-menu>
+<app-ui-menu [eventDataImportOptions]="['JSON', 'JIVEXML', 'ZIP']"></app-ui-menu>
 <app-experiment-info
   experiment="atlas"
   experimentTagline="ATLAS Experiment at CERN"

packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.html

@@ -1,6 +1,6 @@
 <app-loader [loaded]="loaded"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu [eventDataFormats]="['JSON', 'IG']"></app-ui-menu>
+<app-ui-menu [eventDataImportOptions]="['JSON', 'IG']"></app-ui-menu>
 <app-experiment-info
   experiment="cms"
   experimentTagline="CMS Experiment at LHC, CERN"

packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html

@@ -1,6 +1,6 @@
 <app-loader [loaded]="loaded"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu [eventDataFormats]="['JSON']"></app-ui-menu>
+<app-ui-menu [eventDataImportOptions]="['JSON', lhcbImporter]"></app-ui-menu>
 <app-experiment-info
   experiment="lhcb"
   experimentTagline="LHCb Experiment at CERN"

packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { EventDisplayService } from 'phoenix-ui-components';
-import { HttpClient } from '@angular/common/http';
+import { EventDisplayService, ImportOption } from 'phoenix-ui-components';
 import {
   PhoenixMenuNode,
   LHCbLoader,
@@ -22,10 +21,14 @@ export class LHCbComponent implements OnInit {
   );
   loaded = false;
 
-  constructor(
-    private eventDisplay: EventDisplayService,
-    private http: HttpClient
-  ) {}
+  lhcbImporter = new ImportOption(
+    'JSON (LHCb)',
+    '.json (LHCb)',
+    this.handleLHCbJSONImport.bind(this),
+    'application/json'
+  );
+
+  constructor(private eventDisplay: EventDisplayService) {}
 
   ngOnInit() {
     this.loader = new LHCbLoader();
@@ -48,20 +51,28 @@ export class LHCbComponent implements OnInit {
       'LHCb detector'
     );
 
-    this.loadEventData();
+    fetch('assets/files/lhcb/00191749_0005296728.json')
+      .then((res) => res.json())
+      .then((eventData) => {
+        this.loadEventData(eventData);
+      });
 
     this.eventDisplay.getLoadingManager().addLoadListenerWithCheck(() => {
       this.loaded = true;
     });
   }
 
-  private loadEventData() {
-    this.http
-      .get('assets/files/lhcb/00191749_0005296728.json')
-      .subscribe((data: any) => {
-        this.loader.process(data);
-        const eventData = this.loader.getEventData();
-        this.eventDisplay.buildEventDataFromJSON(eventData);
-      });
+  handleLHCbJSONImport(files: FileList) {
+    const reader = new FileReader();
+    reader.onload = () => {
+      this.loadEventData(JSON.parse(reader.result.toString()));
+    };
+    reader.readAsText(files[0]);
+  }
+
+  private loadEventData(data: any) {
+    this.loader.process(data);
+    const eventData = this.loader.getEventData();
+    this.eventDisplay.buildEventDataFromJSON(eventData);
   }
 }

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/io-options/io-options-dialog/io-options-dialog.component.html

@@ -1,28 +1,28 @@
 <div class="dialog">
   <h1 mat-dialog-title>Import and export options</h1>
   <div mat-dialog-content class="dialog-content">
-    <div *ngIf="eventDataFormats.length > 0">
+    <div *ngIf="eventDataImportOptions.length > 0">
       <h5>Import</h5>
 
       <h6 class="text-center">Event data</h6>
 
       <div class="row centered">
         <ng-container
-          *ngFor="let eventDataFormat of eventDataFormatsWithHandler"
+          *ngFor="let eventDataImportOption of eventDataOptionsWithHandler"
         >
           <input
             type="file"
-            [id]="'eventData' + eventDataFormat.format + 'File'"
+            [id]="'eventData' + eventDataImportOption.format + 'File'"
             class="inputfile"
-            [accept]="eventDataFormat.accept"
-            (change)="eventDataFormat.handler($event.target.files)"
+            [accept]="eventDataImportOption.accept"
+            (change)="eventDataImportOption.handler($event.target.files)"
           />
           <label
-            [for]="'eventData' + eventDataFormat.format + 'File'"
+            [for]="'eventData' + eventDataImportOption.format + 'File'"
             class="imageLabel"
           >
             <img src="assets/icons/eventData.svg" alt="Event data icon" />
-            Load {{ eventDataFormat.fileType }}
+            Load {{ eventDataImportOption.fileType }}
           </label>
         </ng-container>
       </div>

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/io-options/io-options-dialog/io-options-dialog.component.ts

@@ -16,9 +16,9 @@ import {
 })
 export class IOOptionsDialogComponent implements OnInit {
   @Input()
-  eventDataFormats: EventDataImportOption[] = [EventDataFormat.JSON];
+  eventDataImportOptions: EventDataImportOption[] = [EventDataFormat.JSON];
 
-  eventDataFormatsWithHandler: ImportOption[];
+  eventDataOptionsWithHandler: ImportOption[];
 
   private supportedEventDataFormats = [
     new ImportOption(
@@ -51,22 +51,34 @@ export class IOOptionsDialogComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.eventDataFormatsWithHandler = this.supportedEventDataFormats.filter(
+    this.eventDataOptionsWithHandler = this.supportedEventDataFormats.filter(
       (eventDataFormat) =>
-        this.eventDataFormats.includes(
+        this.eventDataImportOptions.includes(
           eventDataFormat.format as EventDataFormat
         )
     );
 
-    this.eventDataFormats.forEach((eventDataImportOption) => {
+    this.eventDataImportOptions.forEach((eventDataImportOption) => {
       if (eventDataImportOption instanceof ImportOption) {
-        this.eventDataFormatsWithHandler.push(eventDataImportOption);
+        const importHandler = eventDataImportOption.handler.bind(this);
+        eventDataImportOption.handler = (files: FileList) => {
+          importHandler(files);
+          this.onClose();
+        };
+        this.eventDataOptionsWithHandler.push(eventDataImportOption);
       }
     });
   }
 
   getSupportedEventDataFormats() {
-    return this.eventDataFormats
+    return this.eventDataImportOptions
+      .map((format) => {
+        if (format instanceof ImportOption) {
+          return format.format;
+        }
+
+        return format;
+      })
       .filter((format) => format !== 'ZIP')
       .join(', ');
   }

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/io-options/io-options.component.ts

@@ -10,14 +10,14 @@ import { IOOptionsDialogComponent } from './io-options-dialog/io-options-dialog.
 })
 export class IoOptionsComponent {
   @Input()
-  eventDataFormats: EventDataImportOption[] = [];
+  eventDataImportOptions: EventDataImportOption[] = [];
 
   constructor(private dialog: MatDialog) {}
 
   openIODialog() {
     const dialogRef = this.dialog.open(IOOptionsDialogComponent, {
       panelClass: 'dialog',
     });
-    dialogRef.componentInstance.eventDataFormats = this.eventDataFormats;
+    dialogRef.componentInstance.eventDataImportOptions = this.eventDataImportOptions;
   }
 }

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.html

@@ -15,7 +15,7 @@
     <app-share-link></app-share-link>
 
     <!-- Toggle for loading geometries modal-->
-    <app-io-options [eventDataFormats]="eventDataFormats"></app-io-options>
+    <app-io-options [eventDataImportOptions]="eventDataImportOptions"></app-io-options>
 
     <!-- Toggle for screenshot mode -->
     <app-ss-mode></app-ss-mode>

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.ts

@@ -8,7 +8,7 @@ import { EventDataImportOption } from '../../services/extras/event-data-import';
 })
 export class UiMenuComponent {
   @Input()
-  eventDataFormats: EventDataImportOption[] = [];
+  eventDataImportOptions: EventDataImportOption[] = [];
 
   hideUIMenu: boolean = false;
 }

packages/phoenix-ng/projects/phoenix-ui-components/src/index.ts

@@ -1,6 +1,6 @@
 export * from './components/nav/nav.component';
 export * from './components/phoenix-menu/index';
 export * from './components/ui-menu/index';
-export * from './services/index';
 export * from './components/loader/loader.component';
 export * from './components/phoenix-ui.module';
+export * from './services/index';

packages/phoenix-ng/projects/phoenix-ui-components/src/services/index.ts

@@ -1 +1,2 @@
 export * from './event-display.service';
+export * from './extras/event-data-import';