Deploying to gh-pages from @ 86328a3 🚀

main/.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "env": {
+      "browser": true,
+      "es2021": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+  },
+}

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.

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

main/css/canvas.css

@@ -0,0 +1,4 @@
+canvas {
+  margin: 0;
+  padding: 0;
+}

main/css/main.css

@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+  padding: 0;
+  /* overflow: hidden; */
+}
+
+.manipulation-tool {
+  display: none;
+}

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;
+}

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%;
+}