|
1 | | -<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> |
| 1 | +# Masterclasses @ Hamburg |
2 | 2 |
|
3 | | -# iSpy WebGL (Masterclasses @ UHH) |
4 | | - |
5 | | -Dieses Repository enthält eine modifizierte Version des iSpy WebGL Event Displays, welches für die Masterclasses an der Universität Hamburg angepasst wurde. Die ursprüngliche Version des iSpy WebGL Event Displays wurde von der CMS Kollaboration (Mitwirkende: [F. Ali](https://github.com/9inpachi), [L. Barnard](https://github.com/lukebarnard), [M. Hategan](https://github.com/hategan), [S. Lee](https://github.com/SeungJunLee0), [C. Logrén](https://github.com/carpppa), [T. McCauley](https://github.com/tpmccauley), [P. Nguyen](https://github.com/phongn), [M. Saunby](https://github.com/msaunby)) entwickelt und ist unter folgende Links verfügbar: |
| 3 | +This repository contains a modified version of the iSpy WebGL Event Display, which has been adapted for the masterclasses at the University of Hamburg. The original version of the iSpy WebGL Event Display was developed by the CMS Collaboration (contributors: [F. Ali](https://github.com/9inpachi), [L. Barnard](https://github.com/lukebarnard), [M. Hategan](https://github.com/hategan), [S. Lee](https://github.com/SeungJunLee0), [C. Logrén](https://github.com/carpppa), [T. McCauley](https://github.com/tpmccauley), [P. Nguyen](https://github.com/phongn), [M. Saunby](https://github.com/msaunby)) and is available at the following links: |
6 | 4 |
|
7 | 5 | [](https://doi.org/10.5281/zenodo.8043417) |
8 | 6 | [](https://github.com/cms-outreach/ispy-webgl) |
9 | 7 |
|
10 | | -Production Version: [https://cern.ch/ispy-webgl](https://cern.ch/ispy-webgl) |
11 | | - |
12 | | -Publication: [T McCauley 2017 J. Phys.: Conf. Ser. 898 072030](https://doi.org/10.1088/1742-6596/898/7/072030) |
13 | | - |
14 | | -## Was ist iSpy WebGL? |
15 | | - |
16 | | -iSpy WebGL ist ein browserbasiertes Event Display für das CMS Experiment am LHC. Es ermöglicht die Visualisierung von Ereignisdaten, die von den [iSpy Analyzers](https://github.com/cms-outreach/ispy-analyzers) |
17 | | - |
18 | | -<img src="./assets/ispy-webgl-screenshot-1.0.0.png"></img> |
19 | | - |
20 | | -## Erste Schritte |
21 | | - |
22 | | -### Öffnen von Files |
23 | | - |
24 | | -Über das Menü "Open File" <i class="fa fa-folder-open" style="border: 1px solid black; padding: 6px; display: inline-block;"></i> können Events geöffnet werden. Es gibt zwei Möglichkeiten, Events zu öffnen: |
25 | | - |
26 | | -1. **Open local file(s)**: Hier kann eine Datei aus dem lokalen Dateisystem aus ausgewählt werden. Die Datei muss im [.ig](https://github.com/cms-outreach/ispy-analyzers) Format vorliegen. |
27 | | - |
28 | | -2. **Open file(s) from the Web**: Hier kann aus bereitgestellten Beispielen für verschiedene Prozesse ausgewählt werden. |
29 | | - |
30 | | -### Navigation zwischen Events |
31 | | - |
32 | | -Nachdem ein file geöffnet wurde, können durch die Events dieses files navigieren, indem die Pfeiltasten Ihres Tastatures <i class="fa fa-arrow-left" style="border: 1px solid black; padding: 6px; display: inline-block;"></i> <i class="fa fa-arrow-right" style="border: 1px solid black; padding: 6px; display: inline-block;"></i> oder die Knöpfe <i class="fa fa-step-backward" style="border: 1px solid black; padding: 6px; display: inline-block;"></i> <i class="fa fa-step-forward" style="border: 1px solid black; padding: 6px; display: inline-block;"></i> aus der oberen Leiste verwenden werden. |
33 | | - |
34 | | -### Ansichten wechseln |
35 | | - |
36 | | -Ein Event kann in verschiedenen Ansichten dargestellt werden. Die Ansichten können über die Knöpfe <span style="border: 1px solid black; padding: 3px; display: inline-block;">3D</span>, <span style="border: 1px solid black; padding: 3px; display: inline-block;">rφ</span> oder <span style="border: 1px solid black; padding: 3px; display: inline-block;">ρz</span> aus der oberen Leiste gewechselt werden. Um auf die Anfangsansicht zurückzukehren, kann auf den Knopf <i class="fa fa-home" style="border: 1px solid black; padding: 6px; display: inline-block;"></i> geklickt werden. |
37 | | - |
38 | | -### Detektor Elemente ein- und ausblenden |
39 | | - |
40 | | -Unter dem Reiter "Detector" in der Kontrollleiste auf der rechten Seite, können die verschiedenen Detektorelemente (in abstrahierter Form) ein- und ausblenden werden. Die Detektorelemente sind in verschiedene Gruppen unterteilt, die über die Dropdown-Liste auswählen werden können. Dafür muss die Checkbox "show" unter der jeweiligen Gruppe aktiviert werden. |
41 | | - |
42 | | -Eine "reelle" Ansicht der CMS Detektorteile kann aber auch angezeigt werden. Dafür muss das Modell des jeweiligen Teils über den Knopf "Import 3D Model" <i class="fa fa-download" style="border: 1px solid black; padding: 6px; display: inline-block;"></i> und danach "import file(s) from the Web" importiert werden. Zu Bachten ist jedoch, dass die 3D Modelle in einigen Fällen sehr groß sein können und die Darstellung des Events verlangsamen können. |
43 | | -Durch neuladen der Seite, können alle importierten Modelle wieder entfernt werden. |
44 | | - |
45 | | -### Eventobjecte ein- und ausblenden |
46 | | - |
47 | | -Die Teilchenspuren in einem geladenen Event können über die Checkboxen unter dem Reiter "Show/Hide" in der Kontrollleiste auf der rechten Seite ein- und ausgeblendet werden. Um diese Einstellung beim Wechseln zwischen Events beizubehalten, kann die Checkbox "Keep settings" aktiviert werden. |
48 | | - |
49 | | -Bestimmte Informationen yum Events bzw. zu den Teilchen können über die Checkboxen unter dem Reiter "Event Info" ein- und ausgeblendet werden. Z.B. kann das pT und die Ladung von Elektronen und Muonen durch das Aktivieren der Checkboxen "Track Info" beim rüberfahren über die Spur angezeigt werden. |
50 | | - |
51 | | -### Anwenden von Schnitten |
52 | | - |
53 | | -Aktuell können Schnitte auf das pT und ET angewendet werden und dabei nur die Spuren anzeigen, die diese Schnitte erfüllen. Dazu können die Schieberegler unter dem Reiter "Momentum Cuts" verwenden werden. Die Schieberegler können auch durch das Eingeben von Werten in das Textfeld geändert werden. |
54 | | - |
55 | | -!!! note |
56 | | - Die Schnitte dienen nur der Visualisierung und haben keinen Einfluss auf auf die spätere Selection der Events. |
57 | | - |
58 | | -### Invariantenmasse berechnen |
59 | | - |
60 | | -Spuren von Muonen und Elektronen können durch das Draufklicken selektiert werden und die Invariantenmasse dieser Teilchen kann durch das Drücken von <span style="border: 1px solid black; padding: 3px; display: inline-block;">m</span> auf der Tastatur berechnet werden. Die Invariantenmasse wird in einem Popup-Fenster angezeigt. Die anzahl der Selektierten Spuren, kann unter dem Reiter "Event Info" eingesehen werden. |
| 8 | +## Developer's Guide |
61 | 9 |
|
62 | | -## Die Selektion und Analyse von Events |
| 10 | +This guide provides instructions for developers who want to edit, expand functionalities, or contribute to the event display project. It covers the setup of the development environment, cloning the repository, installing dependencies, and running the application in development mode. |
63 | 11 |
|
64 | | -### Selektionschnitte auf einem bestimmten Event Testen |
| 12 | +### Prerequisites |
65 | 13 |
|
66 | | -<img src="./assets/selection_gui.png"></img> |
| 14 | +- **Node.js**: [Download](https://nodejs.org/en/download/) |
67 | 15 |
|
68 | | -Unter dem Reiter "Event Selection" können die Schnitte auf die verschiedenen Teilchenvariablen anwenden. Wie im Bild zu sehen, sind 3 unterschiedliche Arten von Schnitten möglich: |
| 16 | +### Getting the Code |
69 | 17 |
|
70 | | -1. **Teilchenanzahl**: Die kann auf Muonen, Elektronen und Photonen und Jets angewendet werden. Die Anzahl ist dabei eine positive ganze Zahl, womit nur Events mit exakter Übereinstimmung der Anzahl an Teilchen selektiert werden. Wird im Feld "-1" eingegeben, wird dieser Schnitt ignoriert und diese Teilchen fließen weder in die Selektion noch in der Berechnung der Invariantenmasse ein. |
| 18 | +You can either download the repository as a ZIP file or clone the repository using Git (recommended). If you want to contribute to the project, it is highly recommended to fork the repository to your personal GitHub account and clone the fork. |
71 | 19 |
|
72 | | -2. **Charge Sign**: Hier kann ausgewählt werden, ob bei jeweils einer Teilchengruppe es sich um Teilchen-Antiteilchen Paare handelt (Ladungssumme ergibt dabei 0) oder es sich um Teilchen bzw. Antiteilchen handelt. Die Auswahlmöglichkeiten sind "{leer}", "Same" und "Opposite". Bei "" wird dieser Schnitt ignoriert und die Selektion wird nicht auf die Ladung der Teilchen angewendet. |
| 20 | +Then, follow these commands: |
73 | 21 |
|
74 | | -3. **Impuls**: Hier kann den Mindestimpuls sowohl für die Leptonen (Muonen und Elektronen) als auch für das MET ausgewählt werden. Die Einheit ist GeV und durch die Eingabe von "-1" wird dieser Schnitt ignoriert. |
| 22 | +```bash |
| 23 | +# Clone the repository using git clone. |
| 24 | +# (Adjust the URL if you're using a fork) |
| 25 | +$ git clone git@github.com:haddadanas/Masterclass_UHH.git masterclass |
| 26 | +$ cd masterclass/ |
75 | 27 |
|
76 | | -Mit dem Knopf "Check Selection" wird die Selektion auf das aktuelle Event angewendet. Außerdem werden in den 2 drunterliegenden Feldern die Anzahl der Events im File, die diese Selektion erfüllen, sowie die Indizes der ersten 5 Events angezeigt. |
| 28 | +# Installing Dependencies |
| 29 | +$ npm update |
| 30 | +# After npm installs all dependencies, you should be ready to code |
77 | 31 |
|
78 | | -### Plotten der Invarianten Masse |
79 | 32 |
|
80 | | -Nachdem eine Selektion eingestellt ist, kann über den Analyse-Knopf <i class="fa fa-chart-bar" style="border: 1px solid black; padding: 6px; display: inline-block;"></i> die Invariantenmasse der selektierten Events geplottet werden. Der Plot wird in einem Popup-Fenster unter dem Tab "Invariant Mass" angezeigt. Die eingeflossenen Daten in den Plot könne als CSV-Datei durch den Knopf unter dem Plot heruntergeladen werden. |
| 33 | +# Compile the TypeScript code to JavaScript and bundle everything using webpack |
| 34 | +$ npm run build |
| 35 | +# For debugging purposes, process using the development mode for TypeScript and webpack |
| 36 | +$ npm run build:dev |
| 37 | +# For testing, start a server and run the website locally |
| 38 | +$ npm test |
| 39 | +``` |
81 | 40 |
|
82 | | -## Papers und talks |
| 41 | +### Structure of the Code |
83 | 42 |
|
84 | | -["WebGL and three.js in CMS"](https://tpmccauley.github.io/cms-webgl-cwp/#/) at the HEP Software Foundation Visualization Workshop, March 2017. |
| 43 | +- The main code files are located in the `ts/` directory. |
| 44 | +- The webpage can be found in the `index.html` file. |
| 45 | +- The processed and bundled files will be output to the `dist/` directory. |
| 46 | +- The `dist/` directory also contains all assets used by the website, including stylesheets, images, and locale files for translations. |
85 | 47 |
|
86 | | -["iSpy WebGL: a browser-based event display for CMS using WebGL"](https://indico.cern.ch/event/570249/contributions/2450053/subcontributions/218722/attachments/1401904/2139981/mccauley-ispywebgl-hsf.pdf) at HEP Software Foundation Visualization Workshop, Jan 2017. |
| 48 | +## Guides for Teachers or Students |
87 | 49 |
|
88 | | -"A browser-based event display for the CMS Experiment at the LHC using WebGL", at CHEP 2016. |
89 | | -[paper](https://doi.org/10.1088/1742-6596/898/7/072030), [slides](https://indico.cern.ch/event/505613/contributions/2228350/attachments/1346680/2045130/Oral-v4-449.pdf), [highlight summary slide](https://indico.cern.ch/event/505613/contributions/2228350/attachments/1346680/2030787/Highlights-v0-449.pdf) |
| 50 | +Look for the _Help_ section in the application for guides on how to use the event display or set it up for the masterclasses. |
0 commit comments