feat(app): event data explorer

.eslintrc.json

@@ -6,17 +6,14 @@
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "@typescript-eslint",
-    "prettier"
-  ],
+  "plugins": ["@typescript-eslint", "prettier"],
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-inferrable-types": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-this-alias": "off"
   }
-}
+}

packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/config-types.ts

@@ -8,17 +8,17 @@ export type ConfigLabel = {
 
 /** Type for Phoenix menu node "checkbox" config. */
 export type ConfigCheckbox = ConfigLabel & {
-  isChecked: boolean;
+  isChecked?: boolean;
   onChange: (value: boolean) => void;
 };
 
 /** Type for Phoenix menu node "slider" config. */
 export type ConfigSlider = ConfigLabel & {
-  value: number;
+  value?: number;
   min: number;
   max: number;
-  step: number;
-  allowCustomValue: boolean;
+  step?: number;
+  allowCustomValue?: boolean;
   onChange: (value: number) => void;
 };
 
@@ -29,14 +29,14 @@ export type ConfigButton = ConfigLabel & {
 
 /** Type for Phoenix menu node "color" config. */
 export type ConfigColor = ConfigLabel & {
-  color: string;
+  color?: string;
   onChange: (value: string) => void;
 };
 
 /** Type for Phoenix menu node "rangeSlider" config. */
 export type ConfigRangeSlider = ConfigLabel & {
-  value: number;
-  highValue: number;
+  value?: number;
+  highValue?: number;
   min: number;
   max: number;
   step: number;
@@ -51,11 +51,11 @@ export type ConfigSelect = ConfigLabel & {
 
 /** Type for all Phoenix menu mode configuration options. */
 export type PhoenixMenuConfigs = {
-  label: Partial<ConfigLabel>;
-  checkbox: Partial<ConfigCheckbox>;
-  slider: Partial<ConfigSlider>;
-  button: Partial<ConfigButton>;
-  color: Partial<ConfigColor>;
-  rangeSlider: Partial<ConfigRangeSlider>;
-  select: Partial<ConfigSelect>;
+  label: ConfigLabel;
+  checkbox: ConfigCheckbox;
+  slider: ConfigSlider;
+  button: ConfigButton;
+  color: ConfigColor;
+  rangeSlider: ConfigRangeSlider;
+  select: ConfigSelect;
 };

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

@@ -1,8 +1,6 @@
 <app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu
-  [eventDataImportOptions]="['JSON', 'JIVEXML', 'ZIP']"
-></app-ui-menu>
+<app-ui-menu [eventDataImportOptions]="eventDataImportOptions"></app-ui-menu>
 <app-embed-menu></app-embed-menu>
 <app-experiment-info
   experiment="atlas"

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

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { EventDisplayService } from 'phoenix-ui-components';
+import {
+  EventDataFormat,
+  EventDataImportOption,
+  EventDisplayService,
+} from 'phoenix-ui-components';
 import {
   Configuration,
   PresetView,
@@ -20,6 +24,11 @@ import phoenixMenuConfig from '../../../assets/files/config/atlas-config.json';
 })
 export class AtlasComponent implements OnInit {
   phoenixMenuRoot = new PhoenixMenuNode('Phoenix Menu', 'phoenix-menu');
+  eventDataImportOptions: EventDataImportOption[] = [
+    EventDataFormat.JSON,
+    EventDataFormat.JIVEXML,
+    EventDataFormat.ZIP,
+  ];
   loaded = false;
   loadingProgress = 0;
 

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

@@ -1,6 +1,6 @@
 <app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu [eventDataImportOptions]="['JSON', 'IG']"></app-ui-menu>
+<app-ui-menu [eventDataImportOptions]="eventDataImportOptions"></app-ui-menu>
 <app-embed-menu></app-embed-menu>
 <app-experiment-info
   experiment="cms"

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

@@ -6,7 +6,11 @@ import {
   ScriptLoader,
   PhoenixMenuNode,
 } from 'phoenix-event-display';
-import { EventDisplayService } from 'phoenix-ui-components';
+import {
+  EventDataFormat,
+  EventDataImportOption,
+  EventDisplayService,
+} from 'phoenix-ui-components';
 
 @Component({
   selector: 'app-cms',
@@ -20,6 +24,10 @@ export class CMSComponent implements OnInit {
   );
   loaded = false;
   loadingProgress = 0;
+  eventDataImportOptions: EventDataImportOption[] = [
+    EventDataFormat.JSON,
+    EventDataFormat.IG,
+  ];
 
   constructor(private eventDisplay: EventDisplayService) {}
 

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

@@ -1,6 +1,6 @@
 <app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>
 <app-nav></app-nav>
-<app-ui-menu [eventDataImportOptions]="['JSON', lhcbImporter]"></app-ui-menu>
+<app-ui-menu [eventDataImportOptions]="eventDataImportOptions"></app-ui-menu>
 <app-embed-menu></app-embed-menu>
 <app-experiment-info
   experiment="lhcb"

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

@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { EventDisplayService, ImportOption } from 'phoenix-ui-components';
+import {
+  EventDataFormat,
+  EventDataImportOption,
+  EventDisplayService,
+  ImportOption,
+} from 'phoenix-ui-components';
 import {
   PhoenixMenuNode,
   LHCbLoader,
@@ -29,6 +34,10 @@ export class LHCbComponent implements OnInit {
     this.handleLHCbJSONImport.bind(this),
     'application/json'
   );
+  eventDataImportOptions: EventDataImportOption[] = [
+    EventDataFormat.JSON,
+    this.lhcbImporter,
+  ];
 
   constructor(private eventDisplay: EventDisplayService) {}
 

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.html

@@ -0,0 +1,39 @@
+<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+  <!-- This is the tree node template for leaf nodes -->
+  <cdk-tree-node *cdkTreeNodeDef="let node" class="tree-node">
+    <button
+      mat-button
+      mat-stroked-button
+      class="tree-node-button"
+      (click)="onSelect(node.url)"
+    >
+      <svg class="node-icon">
+        <use href="assets/icons/file.svg#file"></use>
+      </svg>
+      {{ node.name }}
+    </button>
+  </cdk-tree-node>
+  <!-- This is the tree node template for expandable nodes -->
+  <cdk-nested-tree-node
+    *cdkTreeNodeDef="let node; when: hasChildren"
+    class="tree-node"
+  >
+    <button
+      mat-button
+      cdkTreeNodeToggle
+      class="tree-node-button"
+      [attr.aria-label]="'Toggle ' + node.name"
+    >
+      <svg
+        class="node-icon"
+        [class.node-icon-filled]="!treeControl.isExpanded(node)"
+      >
+        <use href="assets/icons/folder.svg#folder"></use>
+      </svg>
+      {{ node.name }}
+    </button>
+    <div [class.file-tree-invisible]="!treeControl.isExpanded(node)">
+      <ng-container cdkTreeNodeOutlet></ng-container>
+    </div>
+  </cdk-nested-tree-node>
+</cdk-tree>

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.scss

@@ -0,0 +1,28 @@
+.file-tree-invisible {
+  display: none;
+}
+
+.tree-node {
+  display: block;
+  margin: 0.25rem 0;
+
+  .tree-node {
+    padding-left: 1rem;
+  }
+}
+
+.tree-node-button {
+  outline: none;
+  padding: 0 0.75rem;
+}
+
+.node-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.25rem;
+  margin-top: -2px;
+
+  &.node-icon-filled {
+    --icon-fill: var(--phoenix-options-icon-path, #fff);
+  }
+}

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.spec.ts

@@ -0,0 +1,73 @@
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileExplorerComponent, FileNode } from './file-explorer.component';
+
+const getMockFileNode = () => {
+  const rootNode = new FileNode('RootNode');
+  const parentNode = new FileNode('ParentNode');
+  rootNode.children = {
+    ParentNode: parentNode,
+  };
+  parentNode.children = {
+    TestChild1: new FileNode('TestChild1'),
+    TestChild2: new FileNode('TestChild2'),
+  };
+
+  return rootNode;
+};
+
+describe('FileExplorerComponent', () => {
+  let component: FileExplorerComponent;
+  let fixture: ComponentFixture<FileExplorerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FileExplorerComponent],
+      imports: [CdkTreeModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileExplorerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should update dataSource on changes in input', () => {
+    const mockFileNode = getMockFileNode();
+    const sortedChildren = component.getSortedChildren(mockFileNode);
+
+    expect(component.dataSource.data.length).toBe(0);
+    component.ngOnChanges({
+      rootFileNode: {
+        currentValue: mockFileNode,
+        previousValue: undefined,
+        firstChange: undefined,
+        isFirstChange: () => true,
+      },
+    });
+
+    expect(component.dataSource.data).toEqual(sortedChildren);
+  });
+
+  it('should emit onFileSelect event on selection of file', () => {
+    spyOn(component.onFileSelect, 'emit');
+    component.onSelect('http://example.com/file.json');
+    expect(component.onFileSelect.emit).toHaveBeenCalledWith(
+      'http://example.com/file.json'
+    );
+  });
+
+  it('checks if node has children', () => {
+    const testNode = new FileNode('TestNode');
+    expect(component.hasChildren(0, testNode)).toBeFalse();
+
+    testNode.children = { TestChild: new FileNode() };
+    expect(component.hasChildren(0, testNode)).toBeTrue();
+  });
+});