[ng] User config storage, service and UI are done

eic · May 27, 2024 · 28e3e24 · 28e3e24
1 parent 924a22f
commit 28e3e24
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 46 deletions.
diff --git a/firebird-ng/src/app/app.component.html b/firebird-ng/src/app/app.component.html
@@ -9,7 +9,8 @@
 <!--&lt;!&ndash;        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>&ndash;&gt;-->
 <!--        <a [routerLink]="['/']" [queryParams]="{ geo: 'centralDetector' }" class="nav-link">Sources</a>-->
 <!--      </li>-->
-      <li class="nav-item"><a [routerLink]="['display']" [queryParams]="{ geo: 'Setup' }" class="nav-link">Display</a></li>
+      <li class="nav-item"><a [routerLink]="['config']" class="nav-link">Configure</a></li>
+      <li class="nav-item"><a [routerLink]="['display']" class="nav-link">Display</a></li>
 <!--      <li class="nav-item"><a [routerLink]="['/']" [queryParams]="{ geo: 'Display' }" class="nav-link">Tracking</a></li>-->
 
 <!--      <li class="nav-item">-->

diff --git a/firebird-ng/src/app/input-config/input-config.component.html b/firebird-ng/src/app/input-config/input-config.component.html
@@ -1,55 +1,104 @@
 <!-- event-display-source.component.html -->
 <div class="container mt-3">
-  <h3>Event display source control</h3>
+  <h2>Configure geometry pipeline</h2>
+
+  <img src="assets/diagrams/geometry-pipeline.svg" alt="geometry-pipeline">
 
   <form >
-    <div class="mt-4">
-      <h5>Geometry source</h5>
-      <select class="form-control" [formControl]="selectedGeometry">
-        <option value="epic-central-optimized">EIC ePIC Central Detector optimized</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_bhcal.root">epic_bhcal.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_calorimeters.root">epic_calorimeters.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake.root">epic_craterlake.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_10x100.root">epic_craterlake_10x100.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_10x275.root">epic_craterlake_10x275.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_18x110_Au.root">epic_craterlake_18x110_Au.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_18x275.root">epic_craterlake_18x275.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_5x41.root">epic_craterlake_5x41.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_material_map.root">epic_craterlake_material_map.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_no_bhcal.root">epic_craterlake_no_bhcal.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_tracking_only.root">epic_craterlake_tracking_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_dirc_only.root">epic_dirc_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_drich_only.root">epic_drich_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_forward_detectors.root">epic_forward_detectors.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_forward_detectors_with_inserts.root">epic_forward_detectors_with_inserts.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_full.root">epic_full.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_imaging_only.root">epic_imaging_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_inner_detector.root">epic_inner_detector.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_ip6.root">epic_ip6.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_ip6_extended.root">epic_ip6_extended.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_lfhcal_only.root">epic_lfhcal_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_lfhcal_with_insert.root">epic_lfhcal_with_insert.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_mrich_only.root">epic_mrich_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_pfrich_only.root">epic_pfrich_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_pid_only.root">epic_pid_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_tof_endcap_only.root">epic_tof_endcap_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_tof_only.root">epic_tof_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_vertex_only.root">epic_vertex_only.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_zdc_lyso_sipm.root">epic_zdc_lyso_sipm.root</option>
-        <option value="https://eic.github.io/epic/artifacts/tgeo/epic_zdc_sipm_on_tile_only.root">epic_zdc_sipm_on_tile_only.root</option>
-      </select>
+  <div class="card mt-4">
+    <div class="card-body">
+      <h5 class="card-title">Geometry Source</h5>
+      <div class="form-group">
+        Geometry file sources are taken from <a href="https://eic.github.io/epic/">https://eic.github.io/epic/</a>
+        <select class="form-control" [formControl]="selectedGeometry">
+          <option value="epic-central-optimized">EIC ePIC Central Detector optimized</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_bhcal.root">epic_bhcal.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_calorimeters.root">epic_calorimeters.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake.root">epic_craterlake.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_10x100.root">epic_craterlake_10x100.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_10x275.root">epic_craterlake_10x275.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_18x110_Au.root">epic_craterlake_18x110_Au.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_18x275.root">epic_craterlake_18x275.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_5x41.root">epic_craterlake_5x41.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_material_map.root">epic_craterlake_material_map.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_no_bhcal.root">epic_craterlake_no_bhcal.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_craterlake_tracking_only.root">epic_craterlake_tracking_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_dirc_only.root">epic_dirc_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_drich_only.root">epic_drich_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_forward_detectors.root">epic_forward_detectors.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_forward_detectors_with_inserts.root">epic_forward_detectors_with_inserts.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_full.root">epic_full.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_imaging_only.root">epic_imaging_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_inner_detector.root">epic_inner_detector.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_ip6.root">epic_ip6.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_ip6_extended.root">epic_ip6_extended.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_lfhcal_only.root">epic_lfhcal_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_lfhcal_with_insert.root">epic_lfhcal_with_insert.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_mrich_only.root">epic_mrich_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_pfrich_only.root">epic_pfrich_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_pid_only.root">epic_pid_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_tof_endcap_only.root">epic_tof_endcap_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_tof_only.root">epic_tof_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_vertex_only.root">epic_vertex_only.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_zdc_lyso_sipm.root">epic_zdc_lyso_sipm.root</option>
+          <option value="https://eic.github.io/epic/artifacts/tgeo/epic_zdc_sipm_on_tile_only.root">epic_zdc_sipm_on_tile_only.root</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+    <div class="card mt-4">
+      <div class="card-body">
+        <h5 class="card-title">ROOT Geometry optimization</h5>
+        <div class="mt-4">
+          <h6>Leave only central detector (Remove Beamline, Far Froward and Backward)</h6>
+          <div class="form-check custom-control custom-switch">
+            <input class="custom-control-input" type="checkbox" id="geoPostEnabled" [formControl]="onlyCentralDetector">
+            <label class="custom-control-label" for="geoPostEnabled">Enabled</label>
+          </div>
+        </div>
+        <div class="mt-4">
+          <h6>Optimize detectors (remove parts such as glue, pixels, some layers, etc)</h6>
+          <div class="form-check custom-control custom-switch">
+            <input class="custom-control-input" type="checkbox" checked="checked" disabled>
+            <label class="custom-control-label" for="geoPostEnabled">Enabled</label>
+          </div>
+        </div>
+      </div>
     </div>
 
-    <div class="mt-4">
-      <h5>Selected events</h5>
-      <select class="form-control mt-2" REMformControlName="selectedEvent">
-        <option value="Central detector">Central detector</option>
-        <option value="Far forward">Far forward</option>
-      </select>
+    <div class="card mt-4">
+      <div class="card-body">
+        <h5 class="card-title">WebGL Geometry optimization</h5>
+        <div class="mt-4">
+          <h6>Merge geometries if possible</h6>
+          Merging geometries allows to significantly improve the performance by reducing the number of
+          <a href="https://discourse.threejs.org/t/webgl-drawcalls/24476">drawcalls</a>.
+          <div class="form-check custom-control custom-switch">
+            <input class="custom-control-input" type="checkbox" checked="checked" disabled>
+            <label class="custom-control-label" for="geoPostEnabled">Enabled</label>
+          </div>
+        </div>
+      </div>
     </div>
 
+<!--    <div class="card mt-4">-->
+<!--      <div class="card-body">-->
+<!--        <h5 class="card-title">Rendering</h5>-->
+<!--        <div class="mt-4">-->
+<!--          <h6>Debug menu</h6>-->
+<!--          <a href="https://discourse.threejs.org/t/webgl-drawcalls/24476">drawcalls</a> significantly improving the performance.-->
+<!--          <div class="form-check custom-control custom-switch">-->
+<!--            <input class="custom-control-input" type="checkbox" checked="checked" disabled>-->
+<!--            <label class="custom-control-label" for="geoPostEnabled">Enabled</label>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+
     <div class="mt-4 text-center">
       <button type="button" class="btn btn-lg btn-primary" [routerLink]="['/display']">DISPLAY</button>
     </div>
+
   </form>
 </div>
diff --git a/firebird-ng/src/app/input-config/input-config.component.ts b/firebird-ng/src/app/input-config/input-config.component.ts
@@ -15,10 +15,13 @@ import {ConfigProperty} from "../utils/config-property";
 })
 export class InputConfigComponent implements OnInit {
 
-  selectedGeometry: FormControl<string | null>;
+  selectedGeometry = new FormControl('');
+  onlyCentralDetector: FormControl<boolean | null> = new FormControl(true);
 
   constructor(private configService: UserConfigService) {
-    this.selectedGeometry = new FormControl();
+
+
+
     // this.selectedGeometry.valueChanges.subscribe(
     //   value => this.configService.selectedGeometry.value=value??""
     // );
@@ -74,6 +77,7 @@ export class InputConfigComponent implements OnInit {
   ngOnInit(): void {
     //this.selectedGeometry.setValue(this.configService.selectedGeometry.value, { emitEvent: false })
     this.bindConfigToControl(this.selectedGeometry, this.configService.selectedGeometry);
+    this.bindConfigToControl(this.onlyCentralDetector, this.configService.onlyCentralDetector);
   //   const savedSettings = this.geometryService.getState();
   //   if (savedSettings) {
   //     this.geoForm.setValue(savedSettings);

diff --git a/firebird-ng/src/app/user-config.service.ts b/firebird-ng/src/app/user-config.service.ts
@@ -7,8 +7,10 @@ import {ConfigProperty} from "./utils/config-property";
 export class UserConfigService {
 
   public selectedGeometry: ConfigProperty<string>;
+  public onlyCentralDetector: ConfigProperty<boolean>;
 
   constructor() {
-    this.selectedGeometry = new ConfigProperty("selectedGeometry", "epic-central-optimized");
+    this.selectedGeometry = new ConfigProperty("geometry.selectedGeometry", "epic-central-optimized");
+    this.onlyCentralDetector = new ConfigProperty("geometry.onlyCentralDetector", true);
   }
 }
diff --git a/firebird-ng/src/assets/diagrams/geometry-pipeline.drawio b/firebird-ng/src/assets/diagrams/geometry-pipeline.drawio
@@ -0,0 +1,40 @@
+<mxfile host="app.diagrams.net" modified="2024-05-26T19:33:56.009Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36" etag="CbRi9kmq4VcUYhB2oYRe" version="24.4.8" type="device">
+  <diagram name="Page-1" id="22VLPHBLLeuIhvIN_V5i">
+    <mxGraphModel dx="1600" dy="1053" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="kljRtqIGl1iEmk1v1EDj-1" value="Geometry Source" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;gradientColor=#b3b3b3;" vertex="1" parent="1">
+          <mxGeometry width="120" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="kljRtqIGl1iEmk1v1EDj-2" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#f5f5f5;strokeColor=#666666;" edge="1" parent="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="130" y="34.5" as="sourcePoint" />
+            <mxPoint x="170" y="34.5" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="kljRtqIGl1iEmk1v1EDj-3" value="ROOT &lt;br&gt;geometry &lt;br&gt;optimization" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#7ea6e0;" vertex="1" parent="1">
+          <mxGeometry x="180" width="120" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="kljRtqIGl1iEmk1v1EDj-5" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#f5f5f5;strokeColor=#666666;" edge="1" parent="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="310" y="34.5" as="sourcePoint" />
+            <mxPoint x="350" y="34.5" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="kljRtqIGl1iEmk1v1EDj-6" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;fillColor=#f5f5f5;strokeColor=#666666;" edge="1" parent="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="490" y="34.5" as="sourcePoint" />
+            <mxPoint x="530" y="34.5" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="kljRtqIGl1iEmk1v1EDj-7" value="WebGL/Three.js&lt;br&gt;Optimization&lt;br&gt;Prettification" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e6d0de;strokeColor=#996185;gradientColor=#d5739d;" vertex="1" parent="1">
+          <mxGeometry x="360" width="120" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="kljRtqIGl1iEmk1v1EDj-9" value="Render!" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;gradientColor=#97d077;" vertex="1" parent="1">
+          <mxGeometry x="540" width="120" height="70" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>