diff --git a/main/.eslintrc.js b/main/.eslintrc.js new file mode 100644 index 00000000..6b52cf23 --- /dev/null +++ b/main/.eslintrc.js @@ -0,0 +1,11 @@ +module.exports = { + "env": { + "browser": true, + "es2021": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + }, +} diff --git a/main/.nojekyll b/main/.nojekyll new file mode 100644 index 00000000..e69de29b diff --git a/main/LICENSE b/main/LICENSE new file mode 100644 index 00000000..17e1e5cd --- /dev/null +++ b/main/LICENSE @@ -0,0 +1,24 @@ +BSD 2-Clause License + +Copyright (c) 2023, CERN + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +2. Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/main/README.md b/main/README.md new file mode 100644 index 00000000..61aa432b --- /dev/null +++ b/main/README.md @@ -0,0 +1,36 @@ +# dmX +*data model eXplorer* + +Warning: **Experimental** + +Explore your events at [dmX](https://key4hep.github.io/dmx/). + +To generate your `.json` file use `edm4hep2json` available in the Key4hep stack. +Example usage for the events from FCC `winter2023` campaign: +``` +source /cvmfs/sw.hsf.org/key4hep/setup.sh +edm4hep2json -l Particle \ + -n 10 \ + -o p8_ee_WW_ecm240.json \ + /eos/experiment/fcc/ee/generation/DelphesEvents/winter2023/IDEA/p8_ee_WW_ecm240/events_059793334.root +``` + + +## Development + +The tool is written in pure JS and draws on HTML Cavas. +To run a local version, clone the repo and create simple web server: +```bash +python -m http.server +``` +after that visit localhost (`http://0.0.0.0:8000/`) in your browser. + +## ToDo + +* Filters: + * generator status + * generation + * ancestor +* Event switcher +* Status box +* Details box diff --git a/main/css/canvas.css b/main/css/canvas.css new file mode 100644 index 00000000..a3d94128 --- /dev/null +++ b/main/css/canvas.css @@ -0,0 +1,4 @@ +canvas { + margin: 0; + padding: 0; +} diff --git a/main/css/main.css b/main/css/main.css new file mode 100644 index 00000000..c62a1736 --- /dev/null +++ b/main/css/main.css @@ -0,0 +1,9 @@ +body { + margin: 0; + padding: 0; + /* overflow: hidden; */ +} + +.manipulation-tool { + display: none; +} diff --git a/main/css/modal.css b/main/css/modal.css new file mode 100644 index 00000000..361c3f3b --- /dev/null +++ b/main/css/modal.css @@ -0,0 +1,106 @@ +.modal-background { + display: block; + position: fixed; + z-index: 1; + padding-top: 150px; + left: 0; + right: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 2px solid #888; + width: 50%; + border-radius: 15px; + font-family: Arial, sans-serif; +} + +.close-button { + color: #aaaaaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close-button:hover, +.close-button:focus { + color: #000; + text-decoration: none; + cursor: pointer; +} + +#visualize-button { + border: 2px solid #4caf50; + border-radius: 15px; + color: black; + background-color: white; + padding: 16px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + transition-duration: 0.4s; + cursor: pointer; +} + +#visualize-button:hover, +#visualize-button:focus { + background-color: #4caf50; + color: white; +} + +#event-selector { + display: none; +} + +div.align-right { + display: flex; + justify-content: flex-end; +} + +.mb-20 { + margin-bottom: 20px; +} + +.mr-10 { + margin-right: 10px; +} + +#logo { + font-size: 40px; + font-family: serif; +} + +#logo-d { + color: #6e84f8; + font-style: italic; +} + +#logo-m { + color: #2b3fa4; + font-style: italic; +} + +#logo-x { + color: #9e2c2c; + font-size: 60px; +} + +#logo-background { + background-color: "#a6a6a6"; +} + +.small-text { + font-size: 80%; + color: grey; +} + +.ml-20 { + margin-left: 20px; +} diff --git a/main/css/toggle.css b/main/css/toggle.css new file mode 100644 index 00000000..397d820f --- /dev/null +++ b/main/css/toggle.css @@ -0,0 +1,74 @@ +#toggle { + position: fixed; + display: none; + flex-direction: row; + justify-content: center; + align-items: center; + top: 10px; + left: 10px; + z-index: 1; +} + +#toggle-label { + margin-right: 10px; + font-family: sans-serif; +} + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +input:checked + .slider { + background-color: #2196f3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196f3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} diff --git a/main/data/particles.js b/main/data/particles.js new file mode 100644 index 00000000..5a594dab --- /dev/null +++ b/main/data/particles.js @@ -0,0 +1,521 @@ +export const mappings = { + // Quarks + "1": "d", + "-1": "{\\bar d}", + "2": "u", + "-2": "{\\bar u}", + "3": "s", + "-3": "{\\bar s}", + "4": "c", + "-4": "{\\bar c}", + "5": "b", + "-5": "{\\bar b}", + "6": "t", + "-6": "{\\bar t}", + "7": "b^{\\prime}", + "8": "t^{\\prime}", + + // Leptons + "11": "e^{-}", + "-11": "e^{+}", + "12": "\\nu_{e}", + "-12": "{\\bar \\nu}_{e}", + "13": "\\mu^{-}", + "-13": "\\mu^{+}", + "14": "\\nu_{\\mu}", + "-14": "{\\bar \\nu}_{\\mu}", + "15": "\\tau^{-}", + "-15": "\\tau^{+}", + "16": "\\nu_{\\tau}", + "-16": "{\\bar \\nu}_{\\tau}", + "17": "\\tau^{\\prime-}", + "18": "\\nu_{{\\tau}^{\\prime}}", + + // Excited Particles + "4000001": "d^{*}", + "4000002": "u^{*}", + "4000011": "e^{*}", + "4000012": "\\nu_{e}^{*}", + + // Gauge and Higgs Bosons + "21": "g", + "22": "\\gamma", + "23": "Z^{0}", + "24": "W^{+}", + "-24": "W^{-}", + "25": "h^{0}", + "32": "Z^{\\prime}", + "33": "Z^{\\prime\\prime}", + "34": "W^{\\prime}", + "35": "H^{0}", + "36": "A^{0}", + "37": "H^{+}", + + // Diquarks + "1103": "(dd)_{1}", + "2101": "(ud)_{0}", + "2103": "(ud)_{1}", + "2203": "(uu)_{1}", + "3101": "(sd)_{0}", + "3103": "(sd)_{1}", + "3201": "(su)_{0}", + "3203": "(su)_{1}", + "3303": "(ss)_{1}", + "4101": "(cd)_{0}", + "4103": "(cd)_{1}", + "4201": "(cu)_{0}", + "4203": "(cu)_{1}", + "4301": "(cs)_{0}", + "4303": "(cs)_{1}", + "4403": "(cc)_{1}", + "5101": "(bd)_{0}", + "5103": "(bd)_{1}", + "5201": "(bu)_{0}", + "5203": "(bu)_{1}", + "5301": "(bs)_{0}", + "5303": "(bs)_{1}", + "5401": "(bc)_{0}", + "5403": "(bc)_{1}", + "5503": "(bb)_{1}", + + // Technicolor Particles + "3000111": "\\pi^{0}_{tech}", + "3000211": "\\pi^{+}_{tech}", + "3000221": "\\pi^{\\prime0}_{tech}", + "3100221": "\\eta^{0}_{tech}", + "3000113": "\\rho^{0}_{tech}", + "3000213": "\\rho^{+}_{tech}", + "3000223": "\\omega^{0}_{tech}", + "3100021": "V_{8}", + "3060111": "\\pi^{1}_{tech,22}", + "3160111": "\\pi^{8}_{tech,22}", + "3130113": "\\rho_{tech,11}", + "3140113": "\\rho_{tech,12}", + "3150113": "\\rho_{tech,21}", + "3160113": "\\rho_{tech,22}", + + // R-Hadrons + "1000993": "R^{0}_{{\\widetilde{g}}g}", + "1009113": "R^{0}_{{\\widetilde{g}}d{\\bar{d}}}", + "1009213": "R^{+}_{{\\widetilde{g}}u{\\bar{u}}}", + "1009223": "R^{0}_{{\\widetilde{g}}u{\\bar{u}}}", + "1009313": "R^{0}_{{\\widetilde{g}}d{\\bar{s}}}", + "1009323": "R^{+}_{{\\widetilde{g}}u{\\bar{s}}}", + "1009333": "R^{0}_{{\\widetilde{g}}s{\\bar{s}}}", + "1091114": "R^{-}_{{\\widetilde{g}}ddd}", + "1092114": "R^{0}_{{\\widetilde{g}}udd}", + "1092214": "R^{+}_{{\\widetilde{g}}uud}", + "1092224": "R^{++}_{{\\widetilde{g}}uuu}", + "1093114": "R^{-}_{{\\widetilde{g}}sdd}", + "1093214": "R^{0}_{{\\widetilde{g}}sud}", + "1093224": "R^{+}_{{\\widetilde{g}}suu}", + "1093314": "R^{-}_{{\\widetilde{g}}ssd}", + "1093324": "R^{0}_{{\\widetilde{g}}ssu}", + "1093324": "R^{-}_{{\\widetilde{g}}sss}", + "1000612": "R^{+}_{{\\widetilde{t_{1}}}{\\bar{d}}}", + "1000622": "R^{0}_{{\\widetilde{t_{1}}}{\\bar{u}}}", + "1000632": "R^{+}_{{\\widetilde{t_{1}}}{\\bar{s}}}", + "1000642": "R^{0}_{{\\widetilde{t_{1}}}{\\bar{c}}}", + "1000652": "R^{+}_{{\\widetilde{t_{1}}}{\\bar{b}}}", + "1006113": "R^{0}_{{\\widetilde{t_{1}}}dd_{1}}", + "1006211": "R^{+}_{{\\widetilde{t_{1}}}ud_{0}}", + "1006213": "R^{+}_{{\\widetilde{t_{1}}}ud_{1}}", + "1006223": "R^{++}_{{\\widetilde{t_{1}}}uu_{1}}", + "1006311": "R^{0}_{{\\widetilde{t_{1}}}sd_{0}}", + "1006313": "R^{0}_{{\\widetilde{t_{1}}}sd_{1}}", + "1006321": "R^{+}_{{\\widetilde{t_{1}}}su_{0}}", + "1006323": "R^{+}_{{\\widetilde{t_{1}}}su_{1}}", + "1006333": "R^{0}_{{\\widetilde{t_{1}}}ss_{1}}", + + // Susy Particles + "1000001": "{\\widetilde{d}}_{L}", + "1000002": "{\\widetilde{u}}_{L}", + "1000003": "{\\widetilde{s}}_{L}", + "1000004": "{\\widetilde{c}}_{L}", + "1000005": "{\\widetilde{b}}_{1}", + "1000006": "{\\widetilde{t}}_{1}", + "1000011": "{\\widetilde{e}}^{-}_{L}", + "1000012": "{\\widetilde{\\nu}}_{eL}", + "1000013": "{\\widetilde{\\mu}}^{-}_{L}", + "1000014": "{\\widetilde{\\nu}}_{\\muL}", + "1000015": "{\\widetilde{\\tau}}^{-}_{1}", + "1000016": "{\\widetilde{\\nu}}_{\\tauL}", + "2000001": "{\\widetilde{d}}_{R}", + "2000002": "{\\widetilde{u}}_{R}", + "2000003": "{\\widetilde{s}}_{R}", + "2000004": "{\\widetilde{c}}_{R}", + "2000005": "{\\widetilde{b}}_{2}", + "2000006": "{\\widetilde{t}}_{2}", + "2000011": "{\\widetilde{e}}^{-}_{R}", + "2000013": "{\\widetilde{\\mu}}^{-}_{R}", + "2000015": "{\\widetilde{\\tau}}^{-}_{2}", + "1000021": "{\\widetilde{g}}", + "1000022": "{\\widetilde{\\chi}}^{0}_{1}", + "1000023": "{\\widetilde{\\chi}}^{0}_{2}", + "1000024": "{\\widetilde{\\chi}}^{+}_{1}", + "1000025": "{\\widetilde{\\chi}}^{0}_{3}", + "1000035": "{\\widetilde{\\chi}}^{0}_{4}", + "1000037": "{\\widetilde{\\chi}}^{+}_{2}", + "1000039": "{\\widetilde{G}}", + + // Special Particles + "39": "G", + "41": "R^{0}", + "42": "LQ^{c}", + "110": "reggeon", + "990": "pomeron", + "9990": "odderon", + + // Light I = 1 Mesons + "111": "\\pi^{0}", + "211": "\\pi^{+}", + "-211": "\\pi^{-}", + "9000111": "a_{0}(980)^{0}", + "9000211": "a_{0}(980)^{+}", + "100111": "\\pi(1300)^{0}", + "100211": "\\pi(1300)^{+}", + "10111": "a_{0}(1450)^{0}", + "10211": "a_{0}(1450)^{+}", + "9010111": "\\pi(1800)^{0}", + "9010211": "\\pi(1800)^{+}", + "113": "\\rho^{0}(770)", + "213": "\\rho(770)^{+}", + "-213": "\\rho(770)^{-}", + "10113": "b_{1}(1235)^{0}", + "10213": "b_{1}(1235)^{+}", + "20113": "a_{1}(1260)^{0}", + "20213": "a_{1}(1260)^{+}", + "-20213": "{\\bar a}_{1}(1260)^{+}", + "9000113": "\\pi_{1}(1400)^{0}", + "9000213": "\\pi_{1}(1400)^{+}", + "100113": "\\rho(1450)^{0}", + "100213": "\\rho(1450)^{+}", + "9010113": "\\pi_{1}(1600)^{0}", + "9010213": "\\pi_{1}(1600)^{+}", + "9020113": "a_{1}(1640)^{0}", + "9020213": "a_{1}(1640)^{+}", + "30113": "\\rho(1700)^{0}", + "30213": "\\rho(1700)^{+}", + "9030113": "\\rho(1900)^{0}", + "9030213": "\\rho(1900)^{+}", + "9040113": "\\rho(2150)^{0}", + "9040213": "\\rho(2150)^{+}", + "115": "a_{2}(1320)^{0}", + "215": "a_{2}(1320)^{+}", + "10115": "\\pi_{2}(1670)^{0}", + "10215": "\\pi_{2}(1670)^{+}", + "9000115": "a_{2}(1700)^{0}", + "9000215": "a_{2}(1700)^{+}", + "9010115": "\\pi_{2}(2100)^{0}", + "9010215": "\\pi_{2}(2100)^{+}", + "117": "\\rho_{3}(1690)^{0}", + "217": "\\rho_{3}(1690)^{+}", + "9000117": "\\rho_{3}(1990)^{0}", + "9000217": "\\rho_{3}(1990)^{+}", + "9010117": "\\rho_{3}(2250)^{0}", + "9010217": "\\rho_{3}(2250)^{+}", + "119": "a_{4}(2040)^{0}", + "219": "a_{4}(2040)^{+}", + + // Light I = 0 Mesons + "221": "\\eta", + "331": "\\eta^{\\prime}(958)", + "-331": "{\\bar \\eta}^{\\prime}(958)", + "9000221": "f_{0}(600)", + "9010221": "f_{0}(980)", + "100221": "\\eta(1295)", + "10221": "f_{0}(1370)", + "9020221": "\\eta(1405)", + "100331": "\\eta(1475)", + "9030221": "f_{0}(1500)", + "10331": "f_{0}(1710)", + "9040221": "\\eta(1760)", + "9050221": "f_{0}(2020)", + "9060221": "f_{0}(2100)", + "9070221": "f_{0}(2200)", + "9080221": "\\eta(2225)", + "223": "\\omega(782)", + "333": "\\phi(1020)", + "10223": "h_{1}(1170)", + "20223": "f_{1}(1285)", + "10333": "h_{1}(1380)", + "20333": "f_{1}(1420)", + "100223": "\\omega(1420)", + "9000223": "f_{1}(1510)", + "9010223": "h_{1}(1595)", + "30223": "\\omega(1650)", + "100333": "\\phi(1680)", + "225": "f_{2}(1270)", + "9000225": "f_{2}(1430)", + "335": "f_{2}^{\\prime}(1525)", + "9010225": "f_{2}(1565)", + "9020225": "f_{2}(1640)", + "10225": "\\eta_{2}(1645)", + "9030225": "f_{2}(1810)", + "10335": "\\eta_{2}(1870)", + "9040225": "f_{2}(1910)", + "9050225": "f_{2}(1950)", + "9060225": "f_{2}(2010)", + "9070225": "f_{2}(2150)", + "9080225": "f_{2}(2300)", + "9090225": "f_{2}(2340)", + "227": "\\omega_{3}(1670)", + "337": "\\phi_{3}(1850)", + "229": "f_{4}(2050)", + "9000229": "f_{J}(2220)", + "9010229": "f_{4}(2300)", + + // Strange Mesons + "130": "K^{0}_{L}", + "310": "K^{0}_{S}", + "311": "K^{0}", + "-311": "{\\bar K}^{0}", + "321": "K^{+}", + "-321": "K^{-}", + "9000311": "K^{*}_{0}(800)^{0}", + "9000321": "K^{*}_{0}(800)^{+}", + "10311": "K^{*}_{0}(1430)^{0}", + "10321": "K^{*}_{0}(1430)^{+}", + "100311": "K(1460)^{0}", + "100321": "K(1460)^{+}", + "9010311": "K(1830)^{0}", + "9010321": "K(1830)^{+}", + "9020311": "K^{*}_{0}(1950)^{0}", + "9020321": "K^{*}_{0}(1950)^{+}", + "313": "K^{*}(892)^{0}", + "-313": "{\\bar K}^{*}(892)^{0}", + "323": "K^{*}(892)^{+}", + "-323": "K^{*}(892)^{-}", + "10313": "K_{1}(1270)^{0}", + "10323": "K_{1}(1270)^{+}", + "20313": "K_{1}(1400)^{0}", + "20323": "K_{1}(1400)^{+}", + "100313": "K^{*}(1410)^{0}", + "100323": "K^{*}(1410)^{+}", + "9000313": "K_{1}(1650)^{0}", + "9000323": "K_{1}(1650)^{+}", + "30313": "K^{*}(1680)^{0}", + "30323": "K^{*}(1680)^{+}", + "315": "K_{2}^{*}(1430)^{0}", + "325": "K_{2}^{*}(1430)^{+}", + "9000315": "K_{2}(1580)^{0}", + "9000325": "K_{2}(1580)^{+}", + "10315": "K_{2}(1770)^{0}", + "10325": "K_{2}(1770)^{+}", + "20315": "K_{2}(1820)^{0}", + "20325": "K_{2}(1820)^{+}", + "9010315": "K^{*}_{2}(1980)^{0}", + "9010325": "K^{*}_{2}(1980)^{+}", + "9020315": "K_{2}(2250)^{0}", + "9020325": "K_{2}(2250)^{+}", + "317": "K_{3}^{*}(1780)^{0}", + "327": "K_{3}^{*}(1780)^{+}", + "9010317": "K_{3}(2320)^{0}", + "9010327": "K_{3}(2320)^{+}", + "319": "K_{4}^{*}(2045)^{0}", + "329": "K_{4}^{*}(2045)^{+}", + "9000319": "K_{4}(2500)^{0}", + "9000329": "K_{4}(2500)^{+}", + + // Charmed Mesons + "411": "D^{+}", + "-411": "d^{-}", + "421": "D^{0}", + "-421": "{\\bar D}^{0}", + "10411": "D^{*}_{0}(2400)^{+}", + "10421": "D^{*}_{0}(2400)^{0}", + "413": "D^{*}(2010)^{+}", + "-413": "{\\bar D}^{*}(2010)^{+}", + "423": "D^{*}(2007)^{0}", + "-423": "{\\bar D}^{*}(2007)^{0}", + "10413": "D_{1}(2420)^{+}", + "10423": "D_{1}(2420)^{0}", + "20413": "D_{1}(H)^{+}", + "20423": "D_{1}(2430)^{0}", + "415": "D^{*}_{2}(2460)^{+}", + "425": "D^{*}_{2}(2460)^{0}", + "431": "D^{+}_{s}", + "-431": "{\\bar D}^{+}_{s}", + "10431": "D^{*}_{s0}(2317)^{+}", + "433": "D^{*+}_{s}", + "10433": "D_{s1}(2536)^{+}", + "20433": "D_{s1}(2460)^{+}", + "435": "D^{*}_{s2}(2573)^{+}", + + // Bottom Mesons + "511": "B^{0}", + "-511": "{\\bar B}^{0}", + "521": "B^{+}", + "-521": "B^{-}", + "10511": "B^{*0}_{0}", + "10521": "B^{*+}_{0}", + "513": "B^{*0}", + "-513": "{\\bar B}^{*0}", + "523": "B^{*+}", + "-523": "B^{*-}", + "10513": "B_{1}(L)^{0}", + "10523": "B_{1}(L)^{+}", + "20513": "B_{1}(H)^{0}", + "20523": "B_{1}(H)^{+}", + "515": "B^{*0}_{2}", + "525": "B^{*+}_{2}", + "531": "B^{0}_{s}", + "-531": "{\\bar B}^{0}_{s}", + "10531": "B^{*0}_{s0}", + "533": "B^{*0}_{s}", + "10533": "B_{s1}(L)^{0}", + "20533": "B_{s1}(H)^{0}", + "535": "B^{*0}_{s2}", + "541": "B^{+}_{c}", + "10541": "B^{*+}_{c0}", + "543": "B^{*+}_{c}", + "10543": "B_{c1}(L)^{+}", + "20543": "B_{c1}(H)^{+}", + "545": "B^{*+}_{c2}", + + // cc Mesons + "441": "\\eta_{c}(1S)", + "10441": "\\chi_{c0}(1P)", + "100441": "\\eta_{c}(2S)", + "443": "J/\\psi(1S)", + "10443": "h_{c}(1P)", + "20443": "\\chi_{c1}(1P)", + "100443": "\\psi(2S)", + "30443": "\\psi(3770)", + "9000443": "\\psi(4040)", + "9010443": "\\psi(4160)", + "9020443": "\\psi(4415)", + "445": "\\chi_{c2}(1P)", + "100445": "\\chi_{c2}(2P)", + + // bb Mesons + "551": "\\eta_{b}(1S)", + "10551": "\\chi_{b0}(1P)", + "100551": "\\eta_{b}(2S)", + "110551": "\\chi_{b0}(2P)", + "200551": "\\eta_{b}(3S)", + "210551": "\\chi_{b0}(3P)", + "553": "\\Upsilon(1S)", + "10553": "h_{b}(1P)", + "20553": "\\chi_{b1}(1P)", + "30553": "\\Upsilon_{1}(1D)", + "100553": "\\Upsilon(2S)", + "110553": "h_{b}(2P)", + "120553": "\\chi_{b1}(2P)", + "130553": "\\Upsilon_{1}(2D)", + "200553": "\\Upsilon(3S)", + "210553": "h_{b}(3P)", + "220553": "\\chi_{b1}(3P)", + "300553": "\\Upsilon(4S)", + "9000553": "\\Upsilon(10860)", + "9010553": "\\Upsilon(11020)", + "555": "\\chi_{b2}(1P)", + "10555": "\\eta_{b2}(1D)", + "20555": "\\Upsilon_{2}(1D)", + "100555": "\\chi_{b2}(2P)", + "110555": "\\eta_{b2}(2D)", + "120555": "\\Upsilon_{2}(2D)", + "200555": "\\chi_{b2}(3P)", + "557": "\\Upsilon_{3}(1D)", + "100557": "\\Upsilon_{3}(2D)", + + // Light Baryons + "2212": "p", + "-2212": "{\\bar p}", + "2112": "n", + "-2112": "{\\bar n}", + "2224": "\\Delta^{++}", + "-2224": "{\\bar \\Delta}^{++}", + "2214": "\\Delta^{+}", + "-2214": "{\\bar \\Delta}^{+}", + "2114": "\\Delta^{0}", + "1114": "\\Delta^{-}", + "-1114": "{\\bar \\Delta}^{-}", + + // Strange Baryons + "3122": "\\Lambda", + "-3122": "{\\bar \\Lambda}", + "3222": "\\Sigma^{+}", + "-3222": "\\Sigma^{-}", + "3212": "\\Sigma^{0}", + "-3212": "{\\bar \\Sigma}^{0}", + "3112": "\\Sigma^{-}", + "3224": "\\Sigma^{*+}", + "-3224": "{\\bar \\Sigma}^{*+}", + "3214": "\\Sigma^{*0}", + "3114": "\\Sigma^{*-}", + "3322": "\\Xi^{0}", + "3312": "\\Xi^{-}", + "-3312": "{\\bar \\Xi}^{-}", + "3324": "\\Xi^{*0}", + "3314": "\\Xi^{*-}", + "3334": "\\Omega^{-}", + + // Charmed Baryons + "4122": "\\Lambda^{+}_{c}", + "-4122": "\\Lambda^{-}_{c}", + "4222": "\\Sigma^{++}_{c}", + "-4222": "\\Sigma^{--}_{c}", + "4212": "\\Sigma^{+}_{c}", + "-4212": "\\Sigma^{-}_{c}", + "4112": "\\Sigma^{0}_{c}", + "4224": "\\Sigma^{*++}_{c}", + "4214": "\\Sigma^{*+}_{c}", + "4114": "\\Sigma^{*0}_{c}", + "4232": "\\Xi^{+}_{c}", + "4132": "\\Xi^{0}_{c}", + "4322": "\\Xi^{\\prime+}_{c}", + "4312": "\\Xi^{\\prime0}_{c}", + "4324": "\\Xi^{*+}_{c}", + "4314": "\\Xi^{*0}_{c}", + "4332": "\\Omega^{0}_{c}", + "4334": "\\Omega^{*0}_{c}", + "4412": "\\Xi^{+}_{cc}", + "4422": "\\Xi^{++}_{cc}", + "4414": "\\Xi^{*+}_{cc}", + "4424": "\\Xi^{*++}_{cc}", + "4432": "\\Omega^{+}_{cc}", + "4434": "\\Omega^{*+}_{cc}", + "4444": "\\Omega^{++}_{ccc}", + + // Pentaquarks + "9221132": "\\Theta^{+}", + "9331122": "\\Phi^{--}", + + // Bottom Baryons + "5122": "\\Lambda^{0}_{b}", + "5112": "\\Sigma^{-}_{b}", + "5212": "\\Sigma^{0}_{b}", + "5222": "\\Sigma^{+}_{b}", + "5114": "\\Sigma^{*-}_{b}", + "5214": "\\Sigma^{*0}_{b}", + "5224": "\\Sigma^{*+}_{b}", + "5132": "\\Xi^{-}_{b}", + "5232": "\\Xi^{0}_{b}", + "5312": "\\Xi^{\\prime-}_{b}", + "5322": "\\Xi^{\\prime0}_{b}", + "5314": "\\Xi^{*-}_{b}", + "5324": "\\Xi^{*0}_{b}", + "5332": "\\Omega^{-}_{b}", + "5334": "\\Omega^{*-}_{b}", + "5142": "\\Xi^{0}_{bc}", + "5242": "\\Xi^{+}_{bc}", + "5412": "\\Xi^{\\prime0}_{bc}", + "5422": "\\Xi^{\\prime+}_{bc}", + "5414": "\\Xi^{*0}_{bc}", + "5424": "\\Xi^{*+}_{bc}", + "5342": "\\Omega^{0}_{bc}", + "5432": "\\Omega^{\\prime0}_{bc}", + "5434": "\\Omega^{*0}_{bc}", + "5442": "\\Omega^{+}_{bcc}", + "5444": "\\Omega^{*+}_{bcc}", + "5512": "\\Xi^{-}_{bb}", + "5522": "\\Xi^{0}_{bb}", + "5514": "\\Xi^{*-}_{bb}", + "5524": "\\Xi^{*0}_{bb}", + "5532": "\\Omega^{-}_{bb}", + "5534": "\\Omega^{*-}_{bb}", + "5542": "\\Omega^{0}_{bbc}", + "5544": "\\Omega^{*0}_{bbc}", + "5554": "\\Omega^{-}_{bbb}", +} \ No newline at end of file diff --git a/main/favicon.ico b/main/favicon.ico new file mode 100644 index 00000000..7b894743 Binary files /dev/null and b/main/favicon.ico differ diff --git a/main/img/dmx_logo.png b/main/img/dmx_logo.png new file mode 100644 index 00000000..3f89a3f6 Binary files /dev/null and b/main/img/dmx_logo.png differ diff --git a/main/index.html b/main/index.html new file mode 100644 index 00000000..5a37f9ec --- /dev/null +++ b/main/index.html @@ -0,0 +1,61 @@ + + + + + + + dmX + + + + + + + + + + +
+ Show PDG IDs + +
+ + + + + + + + \ No newline at end of file diff --git a/main/input/.gitignore b/main/input/.gitignore new file mode 100644 index 00000000..d6b7ef32 --- /dev/null +++ b/main/input/.gitignore @@ -0,0 +1,2 @@ +* +!.gitignore diff --git a/main/js/graphic-primitives.js b/main/js/graphic-primitives.js new file mode 100644 index 00000000..e9aec198 --- /dev/null +++ b/main/js/graphic-primitives.js @@ -0,0 +1,59 @@ +export function drawLine(ctx, startX, startY, endX, endY, color) { + ctx.save(); + ctx.strokeStyle = color; + ctx.beginPath(); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); + ctx.stroke(); + ctx.restore(); +} + +export function drawCross(ctx, x, y, color = "#F00") { + const crossLenght = 6; + ctx.save(); + ctx.strokeStyle = color; + ctx.beginPath(); + ctx.moveTo(x - crossLenght, y - crossLenght); + ctx.lineTo(x + crossLenght, y + crossLenght); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(x + crossLenght, y - crossLenght); + ctx.lineTo(x - crossLenght, y + crossLenght); + ctx.stroke(); + ctx.restore(); +} + +export function drawRoundedRect(ctx, x, y, width, height, fillColor) { + ctx.save(); + + ctx.fillStyle = fillColor; + ctx.beginPath(); + ctx.roundRect(x, y, width, height, 15); + ctx.fill(); + + ctx.strokeStyle = "black"; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.roundRect(x, y, width, height, 15); + ctx.stroke(); + ctx.restore(); +} + +export function drawTex(ctx, x, y, texImg, maxWidth) { + let scale = (maxWidth * 0.9) / texImg.naturalWidth; + if (scale > 2) { + scale = 2; + } + const tempHeight = texImg.naturalHeight * scale; + const tempWidth = texImg.naturalWidth * scale; + + ctx.save(); + ctx.drawImage( + texImg, + x - tempWidth / 2, + y - tempHeight / 2, + tempWidth, + tempHeight + ); + ctx.restore(); +} diff --git a/main/js/main.js b/main/js/main.js new file mode 100644 index 00000000..f7dd8148 --- /dev/null +++ b/main/js/main.js @@ -0,0 +1,342 @@ +import { errorMsg, loadMCParticles } from "./tools.js"; +import Toggle from "./menu/toggle.js"; + +const toggle = new Toggle(); + +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +let draggedInfoBox = -1; +let isDragging = false; +let prevMouseX = 0; +let prevMouseY = 0; + +let jsonData = {}; +const infoBoxes = []; +const parentLinks = []; +const childrenLinks = []; +let visibleBoxes = []; +let visibleParentLinks = []; +let visibleChildrenLinks = []; + +const mouseDown = function (event) { + event.preventDefault(); + + const boundigClientRect = canvas.getBoundingClientRect(); + const mouseX = parseInt(event.clientX - boundigClientRect.x); + const mouseY = parseInt(event.clientY - boundigClientRect.y); + + prevMouseX = mouseX; + prevMouseY = mouseY; + + for (let i = visibleBoxes.length - 1; i >= 0; i--) { + if (infoBoxes[visibleBoxes[i]].isHere(mouseX, mouseY)) { + draggedInfoBox = visibleBoxes[i]; + isDragging = true; + return; + } + } +}; + +const mouseUp = function (event) { + if (!isDragging) { + return; + } + + event.preventDefault(); + isDragging = false; + + // console.time("drawAll"); + drawAll(); + // console.timeEnd("drawAll"); +}; + +const mouseOut = function (event) { + if (!isDragging) { + return; + } + + event.preventDefault(); + isDragging = false; +}; + +const mouseMove = function (event) { + if (!isDragging) { + return; + } + event.preventDefault(); + + const boundigClientRect = canvas.getBoundingClientRect(); + const mouseX = parseInt(event.clientX - boundigClientRect.x); + const mouseY = parseInt(event.clientY - boundigClientRect.y); + + const dx = mouseX - prevMouseX; + const dy = mouseY - prevMouseY; + + const infoBox = infoBoxes[draggedInfoBox]; + infoBox.x += dx; + infoBox.y += dy; + + // console.time("drawVisible"); + drawVisible(); + // console.timeEnd("drawVisible"); + + prevMouseX = mouseX; + prevMouseY = mouseY; +}; + +const onScroll = function () { + getVisible(); +}; + +const getVisible = function () { + const boundigClientRect = canvas.getBoundingClientRect(); + + visibleBoxes = []; + visibleParentLinks = []; + visibleChildrenLinks = []; + + for (const box of infoBoxes) { + if ( + box.isVisible( + 0 - boundigClientRect.x, + 0 - boundigClientRect.y, + window.innerWidth, + window.innerHeight + ) + ) { + visibleBoxes.push(box.id); + } + } + + for (const boxId of visibleBoxes) { + for (const linkId of infoBoxes[boxId].parentLinks) { + visibleParentLinks.push(linkId); + } + for (const parentBoxId of infoBoxes[boxId].parents) { + for (const linkId of infoBoxes[parentBoxId].childrenLinks) { + visibleChildrenLinks.push(linkId); + } + } + } + for (const link of parentLinks) { + if ( + link.isVisible( + 0 - boundigClientRect.x, + 0 - boundigClientRect.y, + window.innerWidth, + window.innerHeight, + infoBoxes + ) + ) { + visibleParentLinks.push(link.id); + } + } + + for (const boxId of visibleBoxes) { + for (const linkId of infoBoxes[boxId].childrenLinks) { + visibleChildrenLinks.push(linkId); + } + for (const childrenBoxId of infoBoxes[boxId].children) { + for (const linkId of infoBoxes[childrenBoxId].parentLinks) { + visibleParentLinks.push(linkId); + } + } + } + for (const link of childrenLinks) { + if ( + link.isVisible( + 0 - boundigClientRect.x, + 0 - boundigClientRect.y, + window.innerWidth, + window.innerHeight, + infoBoxes + ) + ) { + visibleChildrenLinks.push(link.id); + } + } + + visibleParentLinks = [...new Set(visibleParentLinks)]; + visibleChildrenLinks = [...new Set(visibleChildrenLinks)]; + + /* + console.log("Visible boxes: ", visibleBoxes); + console.log("Visible parentLinks: ", visibleParentLinks); + console.log("Visible childrenLinks: ", visibleChildrenLinks); + */ +}; + +const drawVisible = function () { + const boundigClientRect = canvas.getBoundingClientRect(); + ctx.clearRect( + 0 - boundigClientRect.x, + 0 - boundigClientRect.y, + window.innerWidth, + window.innerHeight + ); + for (const linkId of visibleParentLinks) { + parentLinks[linkId].draw(ctx, infoBoxes); + } + for (const linkId of visibleChildrenLinks) { + childrenLinks[linkId].draw(ctx, infoBoxes); + } + for (const boxId of visibleBoxes) { + infoBoxes[boxId].draw(ctx); + } +}; + +const drawAll = function () { + ctx.clearRect(0, 0, canvas.width, canvas.height); + // console.time("drawParentLinks"); + for (const link of parentLinks) { + link.draw(ctx, infoBoxes); + } + // console.timeEnd("drawParentLinks"); + // console.time("drawChildrenLinks"); + for (const link of childrenLinks) { + link.draw(ctx, infoBoxes); + } + // console.timeEnd("drawChildrenLinks"); + // console.time("drawBoxes"); + for (const infoBox of infoBoxes) { + infoBox.draw(ctx); + } + // console.timeEnd("drawBoxes"); +}; + +function start() { + if (!infoBoxes) { + return; + } + + // Get How many rows + const rows = infoBoxes.map((obj) => { + return obj.row; + }); + const maxRow = Math.max(...rows); + + // Order infoBoxes into rows + const boxRows = []; + for (let i = 0; i <= maxRow; i++) { + boxRows.push([]); + } + for (const box of infoBoxes) { + boxRows[box.row].push(box.id); + } + const rowWidths = boxRows.map((obj) => { + return obj.length; + }); + const maxRowWidth = Math.max(...rowWidths); + + const boxWidth = infoBoxes[0].width; + const boxHeight = infoBoxes[0].height; + const horizontalGap = boxWidth * 0.4; + const verticalGap = boxHeight * 0.3; + + canvas.width = + boxWidth * (maxRowWidth + 1) + horizontalGap * (maxRowWidth + 1); + canvas.height = boxHeight * (maxRow + 1) + verticalGap * (maxRow + 2); + + for (const [i, row] of boxRows.entries()) { + for (const [j, boxId] of row.entries()) { + const box = infoBoxes[boxId]; + + if (row.length % 2 === 0) { + const distanceFromCenter = j - row.length / 2; + if (distanceFromCenter < 0) { + box.x = + canvas.width / 2 - + boxWidth - + horizontalGap / 2 + + (distanceFromCenter + 1) * boxWidth + + (distanceFromCenter + 1) * horizontalGap; + } else { + box.x = + canvas.width / 2 + + horizontalGap / 2 + + distanceFromCenter * boxWidth + + distanceFromCenter * horizontalGap; + } + } else { + const distanceFromCenter = j - row.length / 2; + box.x = + canvas.width / 2 - + boxWidth / 2 + + distanceFromCenter * boxWidth + + distanceFromCenter * horizontalGap; + } + box.y = i * verticalGap + verticalGap + i * boxHeight; + } + } + + drawAll(); + + getVisible(); +} + +canvas.onmousedown = mouseDown; +canvas.onmouseup = mouseUp; +canvas.onmouseout = mouseOut; +canvas.onmousemove = mouseMove; +window.onscroll = onScroll; + +/* +function showInputModal() { + const modal = document.getElementById("input-modal"); + + modal.style.display = "block"; +} +*/ + +function hideInputModal() { + const modal = document.getElementById("input-modal"); + + modal.style.display = "none"; +} + +document.getElementById("input-file").addEventListener("change", (event) => { + for (const file of event.target.files) { + if (!file.name.endsWith("edm4hep.json")) { + errorMsg("Provided file is not EDM4hep JSON!"); + } + + if (!file.type.endsWith("/json")) { + errorMsg("ERROR: Provided file is not EDM4hep JSON!"); + } + + const reader = new FileReader(); + reader.addEventListener("load", (event) => { + const fileText = event.target.result; + jsonData = JSON.parse(fileText); + + const eventNumberInput = document.getElementById("event-number"); + eventNumberInput.max = Object.keys(jsonData).length - 1; + document.getElementById("event-selector").style.display = "block"; + }); + reader.readAsText(file); + break; + } +}); + +document + .getElementById("visualize-button") + .addEventListener("click", (event) => { + event.preventDefault(); + const eventNum = document.getElementById("event-number").value; + loadMCParticles(jsonData, eventNum, infoBoxes, parentLinks, childrenLinks); + if (infoBoxes.length === 0) { + errorMsg("Provided file does not contain any MC particle tree!"); + return; + } + for (const eventNum in jsonData) { + delete jsonData[eventNum]; + } + start(); + hideInputModal(); + window.scroll((canvas.width - window.innerWidth) / 2, 0); + toggle.init(infoBoxes, drawAll); + }); diff --git a/main/js/menu/toggle.js b/main/js/menu/toggle.js new file mode 100644 index 00000000..c9c84c3a --- /dev/null +++ b/main/js/menu/toggle.js @@ -0,0 +1,30 @@ +const toggle = document.getElementById("toggle"); +const slider = document.getElementsByClassName("slider")[0]; + +class Toggle { + constructor() { + this.isSliderActive = false; + } + + init(infoBoxes, drawAll) { + toggle.style.display = "flex"; + + slider.addEventListener("click", () => { + this.isSliderActive = !this.isSliderActive; + + if (this.isSliderActive) { + for (const infoBox of infoBoxes) { + infoBox.updateTexImg(`${infoBox.pdg}`); + } + } else { + for (const infoBox of infoBoxes) { + infoBox.updateTexImg(infoBox.name); + } + } + + drawAll(); + }); + } +} + +export default Toggle; diff --git a/main/js/objects.js b/main/js/objects.js new file mode 100644 index 00000000..7abc8e26 --- /dev/null +++ b/main/js/objects.js @@ -0,0 +1,259 @@ +import { drawTex, drawRoundedRect } from "./graphic-primitives.js"; + +export class InfoBox { + constructor(id) { + this.id = parseInt(id); + + // Appearance + this.x = 0; + this.y = 0; + this.width = 120; + this.height = 240; + this.lineColor = "black"; + this.lineWidth = 2; + this.color = "white"; + this.row = -1; + + this.texImg = null; + + // Physics data + this.name = ""; + this.momentum = 0; // GeV + this.px = 0; // GeV + this.py = 0; // GeV + this.pz = 0; // GeV + this.vertex = 0; // mm, distance from 0, 0, 0 + this.vx = 0; // mm + this.vy = 0; // mm + this.vz = 0; // mm + this.time = 0; // ns + this.mass = 0; // GeV + this.charge = 0; // e + this.pdg = 0; + this.genStatus = 0; + this.simStatus = 0; + this.parents = []; + this.children = []; + + this.parentLinks = []; + this.childrenLinks = []; + } + + updateTexImg(text) { + let svg = MathJax.tex2svg(text).firstElementChild; + + this.texImg = document.createElement("img"); + this.texImg.src = + "data:image/svg+xml;base64," + + btoa( + '\n' + + svg.outerHTML + ); + } + + draw(ctx) { + // drawCross(ctx, this.x, this.y); + + const boxCenterX = this.x + this.width / 2; + + drawRoundedRect(ctx, this.x, this.y, this.width, this.height, "#f5f5f5"); + + if (this.texImg.complete) { + drawTex( + ctx, + boxCenterX, + this.y + this.height * 0.4, + this.texImg, + this.width + ); + } else { + this.texImg.onload = () => { + drawTex( + ctx, + boxCenterX, + this.y + this.height * 0.4, + this.texImg, + this.width + ); + }; + } + + const topY = this.y + 20; + const topLines = []; + topLines.push("ID: " + this.id); + topLines.push("Gen. stat.: " + this.genStatus); + topLines.push("Sim. stat.: " + this.simStatus); + + const bottomY = this.y + this.height * 0.6; + const bottomLines = []; + bottomLines.push("p = " + this.momentum + " GeV"); + bottomLines.push("d = " + this.vertex + " mm"); + bottomLines.push("t = " + this.time + " ns"); + bottomLines.push("m = " + this.mass + " GeV"); + if (Math.abs(this.charge) < 1.0 && this.charge != 0) { + if (Math.round(this.charge * 1000) === 667) { + bottomLines.push("q = 2/3 e"); + } + if (Math.round(this.charge * 1000) === -667) { + bottomLines.push("q = -2/3 e"); + } + if (Math.round(this.charge * 1000) === 333) { + bottomLines.push("q = 1/3 e"); + } + if (Math.round(this.charge * 1000) === -333) { + bottomLines.push("q = -1/3 e"); + } + } else { + bottomLines.push("q = " + this.charge + " e"); + } + + ctx.save(); + ctx.font = "16px sans-serif"; + for (const [i, lineText] of topLines.entries()) { + ctx.fillText( + lineText, + boxCenterX - ctx.measureText(lineText).width / 2, + topY + i * 23 + ); + } + + for (const [i, lineText] of bottomLines.entries()) { + ctx.fillText( + lineText, + boxCenterX - ctx.measureText(lineText).width / 2, + bottomY + i * 22 + ); + } + ctx.restore(); + } + + isHere(mouseX, mouseY) { + if ( + mouseX > this.x && + mouseX < this.x + this.width && + mouseY > this.y && + mouseY < this.y + this.height + ) { + return true; + } + + return false; + } + + isVisible(x, y, width, height) { + if ( + x + width > this.x && + x < this.x + this.width && + y + height > this.y && + y < this.y + this.height + ) { + return true; + } + + return false; + } +} + +export class Link { + constructor(id, boxFrom, boxTo) { + this.id = parseInt(id); + this.from = boxFrom; + this.to = boxTo; + this.color = "#A00"; + this.xShift = 0; + } + + draw(ctx, infoBoxes) { + const boxFrom = infoBoxes[this.from]; + const boxTo = infoBoxes[this.to]; + + const fromX = boxFrom.x + boxFrom.width / 2; + const fromY = boxFrom.y + boxFrom.height; + const toX = boxTo.x + boxTo.width / 2; + const toY = boxTo.y; + + if (toY > fromY) { + var cpFromY = (toY - fromY) / 2 + fromY; + var cpToY = cpFromY; + } else { + cpFromY = (fromY - toY) / 2 + fromY; + cpToY = toY - (fromY - toY) / 2; + } + + if (toX > fromX) { + var cpFromX = (toX - fromX) / 4 + fromX; + var cpToX = (3 * (toX - fromX)) / 4 + fromX; + } else { + cpFromX = (3 * (fromX - toX)) / 4 + toX; + cpToX = (fromX - toX) / 4 + toX; + } + + /* + drawCross(ctx, fromX, fromY, "blue"); + drawCross(ctx, toX, toY, "green"); + drawCross(ctx, cpFromX, cpFromY, "yellow"); + drawLine(ctx, fromX, fromY, cpFromX, cpFromY, "yellow") + drawCross(ctx, cpToX, cpToY, "orange"); + drawLine(ctx, toX, toY, cpToX, cpToY, "orange") + */ + + ctx.save(); + ctx.strokeStyle = this.color; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(fromX + this.xShift, fromY); + ctx.bezierCurveTo( + cpFromX + this.xShift, + cpFromY, + cpToX + this.xShift, + cpToY, + toX + this.xShift, + toY + ); + ctx.stroke(); + ctx.restore(); + + /* + ctx.save(); + ctx.font = "14px sans-serif"; + ctx.fillStyle = this.color; + const idText = "ID: " + this.id; + ctx.fillText(idText, + cpToX, cpToY); + ctx.restore(); + */ + } + + isVisible(x, y, width, height, infoBoxes) { + const boxFrom = infoBoxes[this.from]; + const boxTo = infoBoxes[this.to]; + + const fromX = boxFrom.x + boxFrom.width / 2; + const fromY = boxFrom.y + boxFrom.height; + const toX = boxTo.x + boxTo.width / 2; + const toY = boxTo.y; + + const boxX = Math.min(fromX, toX); + const boxWidth = Math.abs(fromX - toX); + const boxY = Math.min(fromY, toY); + const boxHeight = Math.abs(fromY - toY); + + /* + console.log("boxX: ", this.boxX); + console.log("boxY: ", this.boxY); + console.log("boxWidth: ", this.boxWidth); + console.log("boxHeight: ", this.boxHeight); + */ + + if ( + x + width > boxX && + x < boxX + boxWidth && + y + height > boxY && + y < boxY + boxHeight + ) { + return true; + } + + return false; + } +} diff --git a/main/js/tools.js b/main/js/tools.js new file mode 100644 index 00000000..99e40a3a --- /dev/null +++ b/main/js/tools.js @@ -0,0 +1,141 @@ +import { InfoBox, Link } from "./objects.js"; +import { mappings } from "../data/particles.js"; + +export function infoMsg(msg) { + const msgDiv = document.getElementById("input-message"); + msgDiv.classList.add("mb-20"); + msgDiv.style.color = "gray"; + msgDiv.innerHTML = "

INFO: " + msg + "

"; +} + +export function errorMsg(msg) { + const msgDiv = document.getElementById("input-message"); + msgDiv.classList.add("mb-20"); + msgDiv.style.color = "red"; + msgDiv.innerHTML = "

ERROR: " + msg + "

"; +} + +export function loadMCParticles( + jsonData, + eventNum, + infoBoxes, + parentLinks, + childrenLinks +) { + const eventData = jsonData["Event " + eventNum]; + try { + const mcParticles = Object.values(eventData).find( + (element) => element.collType == "edm4hep::MCParticleCollection" + ); + for (const [i, particle] of mcParticles.collection.entries()) { + const box = new InfoBox(i); + box.pdg = particle.PDG; + box.genStatus = particle.generatorStatus; + box.simStatus = particle.simulatorStatus; + box.momentum = Math.sqrt( + Math.pow(particle.momentum.x, 2) + + Math.pow(particle.momentum.y, 2) + + Math.pow(particle.momentum.z, 2) + ); + box.momentum = Math.round(box.momentum * 100) / 100; + box.vertex = Math.sqrt( + Math.pow(particle.vertex.x, 2) + + Math.pow(particle.vertex.y, 2) + + Math.pow(particle.vertex.z, 2) + ); + box.vertex = Math.round(box.vertex * 100) / 100; + box.px = Math.round(particle.momentum.x * 100) / 100; + box.py = Math.round(particle.momentum.y * 100) / 100; + box.pz = Math.round(particle.momentum.z * 100) / 100; + + box.vx = particle.vertex.x; + box.vy = particle.vertex.y; + box.vz = particle.vertex.z; + + box.charge = particle.charge; + box.time = Math.round(particle.time * 100) / 100; + box.mass = Math.round(particle.mass * 100) / 100; + + box.name = getName(particle.PDG); + box.updateTexImg(box.name); + + if (particle.parents.length === 0 && particle.daughters.length === 0) { + box.row = -1; + console.log("WARNING: Standalone particle!"); + } + + if (particle.parents.length === 0) { + box.row = 0; + } + + for (const j in particle.parents) { + const parentId = particle.parents[j].index; + box.parents.push(parentId); + const link = new Link(parseInt(parentLinks.length), parentId, i); + link.color = "#A00"; // Darkish red + link.xShift = 3; + parentLinks.push(link); + box.parentLinks.push(link.id); + } + + for (const j in particle.daughters) { + const childrenId = particle.daughters[j].index; + box.children.push(childrenId); + const link = new Link(parseInt(childrenLinks.length), i, childrenId); + link.color = "#0A0"; // Darkish green + link.xShift = -3; + childrenLinks.push(link); + box.childrenLinks.push(link.id); + } + + infoBoxes.push(box); + } + } catch (err) { + if (err instanceof TypeError) { + return; + } + } + + const getMaxRow = function (parentIds) { + let maxRow = -1; + for (const parentId of parentIds) { + if (infoBoxes[parentId].row === -1) { + return -1; + } + + if (infoBoxes[parentId].row > maxRow) { + maxRow = infoBoxes[parentId].row; + } + } + + return maxRow; + }; + + let repeat = true; + while (repeat) { + repeat = false; + for (const infoBox of infoBoxes) { + if (infoBox.row >= 0) { + continue; + } + const parentRow = getMaxRow(infoBox.parents); + if (parentRow >= 0) { + infoBox.row = parentRow + 1; + } else { + repeat = true; + } + } + } +} + +function getName(pdg) { + const particle = mappings[pdg]; + + if (particle !== undefined) { + console.log("Name: " + particle); + return particle; + } + + console.log("PDG: " + pdg.toString()); + return "PDG: " + pdg.toString(); +}