Skip to content

Commit

Permalink
UI integration with server
Browse files Browse the repository at this point in the history
  • Loading branch information
DraTeots committed Jul 26, 2024
1 parent bc9578f commit c9138d7
Show file tree
Hide file tree
Showing 12 changed files with 141 additions and 109 deletions.
5 changes: 5 additions & 0 deletions firebird-ng/src/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
import {MainDisplayComponent} from "./main-display/main-display.component";
import {FileBrowserComponent} from "./file-browser/file-browser.component";
import {InputConfigComponent} from "./input-config/input-config.component";
import {Edm4hepListingComponent} from "./edm4hep-listing/edm4hep-listing.component";

export const routes: Routes = [
{ path: '', redirectTo: '/display', pathMatch: 'full' },
Expand All @@ -22,4 +23,8 @@ export const routes: Routes = [
path: 'geometry',
loadComponent: () => import('./geometry-tree/geometry-tree.component').then(m => m.GeometryTreeComponent)
},
{
path: 'listing',
loadComponent: () => import('./edm4hep-listing/edm4hep-listing.component').then(m => m.Edm4hepListingComponent)
},
];
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="container mt-3">
<h2 class="card-title">Configure geometry pipeline</h2>

<p>edm4hep-listing works!</p>
<p>{{message}}</p>

</div>
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { Edm4hepListingComponent } from './edm4hep-listing.component';

describe('Edm4hepListingComponent', () => {
let component: Edm4hepListingComponent;
let fixture: ComponentFixture<Edm4hepListingComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Edm4hepListingComponent]
})
.compileComponents();

fixture = TestBed.createComponent(Edm4hepListingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
28 changes: 28 additions & 0 deletions firebird-ng/src/app/edm4hep-listing/edm4hep-listing.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import {Component, OnInit} from '@angular/core';
import {UserConfigService} from "../user-config.service";

@Component({
selector: 'app-edm4hep-listing',
standalone: true,
imports: [],
templateUrl: './edm4hep-listing.component.html',
styleUrl: './edm4hep-listing.component.scss'
})
export class Edm4hepListingComponent implements OnInit {

message = "";
fileName = "";

constructor(private configService: UserConfigService) {
}

ngOnInit(): void {
this.configService.edm4eicEventSource.subject.subscribe((value)=> {
this.fileName = value;
this.message = value;
});

// /work/eic2/EPIC/RECO/24.06.0/epic_craterlake/DIS/CC/10x100/minQ2=1000/pythia8CCDIS_10x100_minQ2=1000_beamEffects_xAngle=-0.025_hiDiv_5.1086.eicrecon.tree.edm4eic.root
// root://dtn-eic.jlab.org/work/eic2/EPIC/RECO/24.06.0/epic_craterlake/DIS/CC/10x100/minQ2=1000/pythia8CCDIS_10x100_minQ2=1000_beamEffects_xAngle=-0.025_hiDiv_5.1086.eicrecon.tree.edm4eic.root
}
}
39 changes: 17 additions & 22 deletions firebird-ng/src/app/input-config/input-config.component.html
Original file line number Diff line number Diff line change
@@ -1,45 +1,28 @@
<!-- event-display-source.component.html -->
<div class="container mt-3">
<h2>Configure geometry pipeline</h2>
<h2 class="card-title">Configure geometry pipeline</h2>

<img src="assets/diagrams/geometry-pipeline.svg" alt="geometry-pipeline">

<form >

<div class="card mt-4">
<div class="card-body">
<h5 class="card-title">Geometry Source</h5>
<div class="form-group">
Geometry file source:
<div class="mt-4">
<h6>API Host</h6>
This field sets the host address for the API server.
<mat-form-field class="full-width-field">
<mat-label>Geometry URL</mat-label>
<input type="text" matInput [formControl]="geometryUrl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option" [matTooltip]="option.url">{{option.name}}</mat-option>
</mat-autocomplete>
</mat-form-field>

</div>

</div>
<h4 class="card-title">Data Sources</h4>

<div class="form-group">
<div class="mt-4">
<h6>Events</h6>
Select events files
<h5>Geometry</h5>
Select file with the geometry
<div class="mt-4">
<firebird-resource-select #geometrySelect [options]="geometryOptions" label="Geometry source" class="full-width-field"></firebird-resource-select>
</div>

</div>
</div>



<h5 class="card-title">Events Source</h5>
<h5>Trajectories Source</h5>
<div class="form-group">
<select class="form-control" [formControl]="selectedEventSource">
<option value="no-events">No events (may upload later)</option>
Expand All @@ -59,6 +42,18 @@ <h5 class="card-title">Events Source</h5>
<option value="https://firebird-eic.org/py8_dis-nc_all_minq2-1_minp-300mev_vtxcut-5m_nevt-5.evt.zip">py8_dis-nc_all_minq2-1_minp-300mev_vtxcut-5m_nevt-5.evt.zip</option>
</select>
</div>

<div class="form-group">
<div class="mt-4">
<h5>EDM4EIC events</h5>
Select file with EDM4EIC data
<div class="mt-4">
<firebird-resource-select #edm4eicSelect [options]="edm4eicOptions" label="EDM4EIC file" class="full-width-field"></firebird-resource-select>
</div>
</div>
</div>


</div>
</div>

Expand Down
114 changes: 47 additions & 67 deletions firebird-ng/src/app/input-config/input-config.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,7 @@ import {AsyncPipe, NgForOf} from "@angular/common";
import {MatTooltip} from "@angular/material/tooltip";
import {ResourceSelectComponent} from "../resource-select/resource-select.component";

export interface Resource {
name: string;
url: string;
}


@Component({
selector: 'app-input-config',
Expand All @@ -29,54 +26,61 @@ export interface Resource {
})
export class InputConfigComponent implements OnInit, AfterViewInit {

geometrySelectValue = new FormControl('');
geometryUrl = new FormControl('');

selectedEventSource = new FormControl('');
onlyCentralDetector: FormControl<boolean | null> = new FormControl(true);
serverUseApi: FormControl<boolean | null> = new FormControl(false);
serverApiHost = new FormControl('localhost');
serverApiPort: FormControl<number | null> = new FormControl(5454);
filteredOptions: Observable<Resource[]> = new Observable<Resource[]>();


@ViewChild('geometrySelect')
geometrySelect!: ResourceSelectComponent;


myControl = new FormControl<string | Resource>('');
public geometryOptions: Resource[] = [
{url: "builtin://epic-central-optimized", name: "EIC ePIC Central Detector optimized"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_bhcal.root", name: "epic_bhcal.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_calorimeters.root", name: "epic_calorimeters.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_craterlake.root", name: "epic_craterlake.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_10x100.root", name: "epic_craterlake_10x100.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_10x275.root", name: "epic_craterlake_10x275.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_18x110_Au.root", name: "epic_craterlake_18x110_Au.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_18x275.root", name: "epic_craterlake_18x275.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_5x41.root", name: "epic_craterlake_5x41.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_material_map.root", name: "epic_craterlake_material_map.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_no_bhcal.root", name: "epic_craterlake_no_bhcal.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_tracking_only.root", name: "epic_craterlake_tracking_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_dirc_only.root", name: "epic_dirc_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_drich_only.root", name: "epic_drich_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_forward_detectors.root", name: "epic_forward_detectors.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_forward_detectors_with_inserts.root", name: "epic_forward_detectors_with_inserts.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_full.root", name: "epic_full.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_imaging_only.root", name: "epic_imaging_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_inner_detector.root", name: "epic_inner_detector.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_ip6.root", name: "epic_ip6.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_ip6_extended.root", name: "epic_ip6_extended.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_lfhcal_only.root", name: "epic_lfhcal_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_lfhcal_with_insert.root", name: "epic_lfhcal_with_insert.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_mrich_only.root", name: "epic_mrich_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_pfrich_only.root", name: "epic_pfrich_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_pid_only.root", name: "epic_pid_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_tof_endcap_only.root", name: "epic_tof_endcap_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_tof_only.root", name: "epic_tof_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_vertex_only.root", name: "epic_vertex_only.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_zdc_lyso_sipm.root", name: "epic_zdc_lyso_sipm.root"},
{url: "https://eic.github.io/epic/artifacts/tgeo/epic_zdc_sipm_on_tile_only.root", name: "epic_zdc_sipm_on_tile_only.root"}
@ViewChild('edm4eicSelect')
edm4eicSelect!: ResourceSelectComponent;


public geometryOptions: string[] = [
"builtin://epic-central-optimized",
"https://eic.github.io/epic/artifacts/tgeo/epic_bhcal.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_calorimeters.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_craterlake.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_10x100.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_10x275.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_18x110_Au.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_18x275.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_5x41.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_material_map.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_no_bhcal.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_tracking_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_dirc_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_drich_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_forward_detectors.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_forward_detectors_with_inserts.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_full.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_imaging_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_inner_detector.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_ip6.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_ip6_extended.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_lfhcal_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_lfhcal_with_insert.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_mrich_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_pfrich_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_pid_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_tof_endcap_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_tof_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_vertex_only.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_zdc_lyso_sipm.root",
"https://eic.github.io/epic/artifacts/tgeo/epic_zdc_sipm_on_tile_only.root"
];

public edm4eicOptions: string[] = [
"",

];


constructor(private configService: UserConfigService) {
}

Expand All @@ -100,42 +104,18 @@ export class InputConfigComponent implements OnInit, AfterViewInit {
ngAfterViewInit() {
// Now the 'geometrySelect' is available
this.bindConfigToControl(this.geometrySelect.value, this.configService.selectedGeometry);
this.bindConfigToControl(this.edm4eicSelect.value, this.configService.edm4eicEventSource);
}

ngOnInit(): void {
//this.selectedGeometry.setValue(this.configService.selectedGeometry.value, { emitEvent: false })
//this.bindConfigToControl(this.geometryUrl, this.configService.selectedGeometry);


this.bindConfigToControl(this.selectedEventSource, this.configService.eventSource);
this.bindConfigToControl(this.selectedEventSource, this.configService.trajectoryEventSource);
this.bindConfigToControl(this.onlyCentralDetector, this.configService.onlyCentralDetector);
this.bindConfigToControl(this.serverUseApi, this.configService.localServerUseApi);
this.bindConfigToControl(this.serverApiHost, this.configService.localServerHost);
this.bindConfigToControl(this.serverApiPort, this.configService.localServerPort);

// noinspection JSDeprecatedSymbols
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(value => {
// Get string name
const name = typeof value === 'string' ? value : value?.name;
return name ? this._filter(name as string) : this.geometryOptions.slice();
})
);
}

displayFn(data: any): string {
if(typeof data === "string") {
return data; // User input
}
if(typeof data.url === "string") {
return data.url;
}
return '';
}

private _filter(name: string): Resource[] {
const filterValue = name.toLowerCase();
return this.geometryOptions.filter(option => option.name.toLowerCase().includes(filterValue));
}
}
2 changes: 1 addition & 1 deletion firebird-ng/src/app/main-display/main-display.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -403,7 +403,7 @@ export class MainDisplayComponent implements OnInit {
ngOnInit() {


let eventSource = this.settings.eventSource.value;
let eventSource = this.settings.trajectoryEventSource.value;
let eventConfig = {eventFile: "https://firebird-eic.org/py8_all_dis-cc_beam-5x41_minq2-100_nevt-5.evt.json.zip", eventType: "zip"};
if( eventSource != "no-events" && !eventSource.endsWith("edm4hep.json")) {
let eventType = eventSource.endsWith("zip") ? "zip" : "json";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<mat-label>{{this.label}}</mat-label>
<input type="text" matInput [formControl]="value" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="onDisplayValueChange" autoSelectActiveOption="true">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option" [matTooltip]="option.url" (onSelectionChange)="onSelect(option)">
{{ option.name }}
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
20 changes: 6 additions & 14 deletions firebird-ng/src/app/resource-select/resource-select.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ import {AsyncPipe, NgForOf} from "@angular/common";
import {MatTooltip} from "@angular/material/tooltip";
import {MatInput, MatLabel} from "@angular/material/input";

export interface RemoteResourceOption {
name: string;
url: string;
}

@Component({
selector: 'firebird-resource-select',
Expand All @@ -36,7 +32,7 @@ export class ResourceSelectComponent implements OnInit {
/**
* List of resources to display in autocomplete
*/
@Input() options: RemoteResourceOption[] = [];
@Input() options: string[] = [];

/**
* Watermark text of the control
Expand All @@ -56,7 +52,7 @@ export class ResourceSelectComponent implements OnInit {
/**
* List of filtered options depending on user input
*/
public filteredOptions: Observable<RemoteResourceOption[]> = this.value.valueChanges.pipe(
public filteredOptions: Observable<string[]> = this.value.valueChanges.pipe(
startWith(''),
map(input=>this.filterOptions(input))
);
Expand Down Expand Up @@ -86,18 +82,18 @@ export class ResourceSelectComponent implements OnInit {

// Explanation of the return: if we have only 1 option, that fully fit the name,
// we probably have it selected already. Which means we want to show everything, so users can select something else
return (filteredList.length == 1 && name === filteredList[0].name) ? this.options.slice() : filteredList;
return (filteredList.length == 1 && name === filteredList[0]) ? this.options.slice() : filteredList;
}

/**
* Retrieves the options which .name contains subString.
*
* @param {string} subString - sub string that every option.name is tested by.
* @return {RemoteResourceOption[]} The filtered remote resource options.
* @return {string[]} The filtered remote resource options.
*/
private _selectOptions(subString: string): RemoteResourceOption[] {
private _selectOptions(subString: string): string[] {
const filterValue = subString.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}

/**
Expand All @@ -115,8 +111,4 @@ export class ResourceSelectComponent implements OnInit {
}
return result;
}

onSelect(option: RemoteResourceOption) {
// TODO add some hint, what is the name/value of selected object
}
}
Loading

0 comments on commit c9138d7

Please sign in to comment.