key4hep · brauliorivas · Jul 21, 2024 · Jun 24, 2024 · Jun 24, 2024 · Jun 24, 2024
diff --git a/css/empty-view.css b/css/empty-view.css
@@ -0,0 +1,18 @@
+#empty-view {
+  display: none;
+  align-items: center;
+  background-color: #e1e1e1;
+  padding: 10px;
+  position: fixed;
+  z-index: 1;
+  height: 30px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+  border: 1px solid #000;
+}
+
+#empty-view p {
+  margin-left: 10px;
+}
diff --git a/css/information.css b/css/information.css
@@ -37,3 +37,40 @@
 .info-modal-content {
   width: 100%;
 }
+
+#information-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.information-button {
+  background-color: #fff;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid black;
+  margin: 0 5px;
+}
+
+.information-button:hover {
+  cursor: pointer;
+  background-color: #c5c5c5;
+}
+
+#information-button {
+  background-color: #c5c5c5;
+}
+
+#view-information-button {
+  display: none;
+}
+
+#information-button {
+  display: none;
+}
+
+#view-information-content {
+  display: none;
+}
diff --git a/css/switch-deploy.css b/css/switch-deploy.css
@@ -0,0 +1,32 @@
+#switch-deploy {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  z-index: 1;
+  background-color: #fff;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #000;
+}
+
+#switch-deploy-button {
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #000;
+  padding: 5px;
+  border-radius: 5px;
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+#switch-deploy-button:hover {
+  background-color: #c5c5c5;
+  cursor: pointer;
+}
+
+#switch-deploy-text {
+  margin: 0 7px 0 0;
+}
diff --git a/css/views.css b/css/views.css
@@ -0,0 +1,61 @@
+#available-views {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 8px;
+  max-height: 90px;
+  overflow-y: auto;
+}
+
+.view-button {
+  background-color: #f1f1f1;
+  border: 1px solid #000;
+  border-radius: 5px;
+  padding: 8px;
+  margin: 8px;
+  cursor: pointer;
+  height: fit-content;
+}
+
+#views {
+  display: none;
+  flex-direction: column;
+  position: fixed;
+  top: 25%;
+  left: 10px;
+  width: fit-content;
+  height: 50%;
+  background-color: #e1e1e1;
+  padding: 15px;
+  border: 1px solid #000;
+  border-radius: 5px;
+}
+
+#view-selector {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: fit-content;
+}
+
+.view-selector-menu::-webkit-scrollbar {
+  width: 7px;
+}
+
+.view-selector-menu::-webkit-scrollbar-track {
+  background: #e1e1e1;
+  border-radius: 5px;
+}
+
+.view-selector-menu::-webkit-scrollbar-thumb {
+  background: #afafaf;
+  border-radius: 5px;
+}
+
+.view-selector-menu::-webkit-scrollbar-thumb:hover {
+  background: #858585;
+}
diff --git a/img/blue-info.svg b/img/blue-info.svg
diff --git a/index.html b/index.html
@@ -16,6 +16,9 @@
   <link rel="stylesheet" href="css/event.css">
   <link rel="stylesheet" href="css/information.css">
   <link rel="stylesheet" href="css/contact.css">
+  <link rel="stylesheet" href="css/views.css">
+  <link rel="stylesheet" href="css/empty-view.css">
+  <link rel="stylesheet" href="css/switch-deploy.css">
 </head>
 
 <body>
@@ -33,14 +36,23 @@
         <div class="mb-20">
           <label class="mr-10" for="input-file">Select EDM4hep JSON:</label>
           <input id="input-file" name="input-file" type="file" accept=".json">
-          <p class="small-text ml-20">Example input file (right click to save): <a
-              href="https://fccsw.web.cern.ch/fccsw/eede/p8_ee_ZH_ecm240.edm4hep.json">p8_ee_ZH_ecm240.edm4hep.json</a>
+          <p class="small-text ml-20">Example input files (right click to save):
+            <ul class="small-text">
+              <li>
+                Delphes: <a href="https://fccsw.web.cern.ch/fccsw/eede/p8_ee_ZH_ecm240.edm4hep.json">p8_ee_ZH_ecm240.edm4hep.json</a> [5.6 MB]
+              </li>
+              <li>
+                Full Sim: <a href="https://fccsw.web.cern.ch/fccsw/eede/wzp6_ee_mumuH_ecm240_CLD_RECO.edm4hep.json">wzp6_ee_mumuH_ecm240_CLD_RECO.edm4hep.json</a> [28 MB]
+              </li>
+            </ul>
           </p>
         </div>
         <div id="event-selector">
           <label class="mr-10" for="event-number">Select event number:</label>
           <select name="event-number" id="event-number"></select>
         </div>
+        <div id="available-views" class="view-selector-menu">
+        </div>
         <br>
         <div class="align-right">
           <button id="visualize-button">Visualize</button>
@@ -95,64 +107,93 @@
     <div class="info-modal-content">
       <span class="logo-letter e1">e</span><span class="logo-letter e2">e</span><span
         class="logo-letter d">d</span><span class="logo-letter e3">E</span>
-      <p>Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the <a
-          href="https://github.com/key4hep/eede/wiki" target="_blank" rel="noopener noreferrer">wiki</a>.
-        Want to learn more about EDM4hep? Check out the <a href="https://edm4hep.web.cern.ch" target="_blank"
-          rel="noopener noreferrer">EDM4hep</a> website.
-      </p>
-      <p>
-        Found a bug or have a feature request? Open a new <a href="https://github.com/key4hep/eede/issues"
-          target="_blank" rel="noopener noreferrer">issue</a>.
-      </p>
-      <p>Contact:</p>
-      <ul>
-        <li class="contact-element">Juraj Smiesko:
-          <address class="email">
-            <a href="mailto:[email protected]">
-              <img src="img/juraj-email.webp" alt="juraj-email" height="21px" />
-            </a>
-          </address>
-          <button class="copy-email-button" data-email="[email protected]">
-            <abbr title="Copy to Clipboard">
-              <img src="img/copy.svg" alt="Copy" width="16" height="16" />
-            </abbr>
-          </button>
-
-        </li>
-        <li class="contact-element">Thomas Madlener:
-          <address class="email">
-            <a href="mailto:[email protected]">
-              <img src="img/thomas-email.webp" alt="thomas-email" height="21px" />
-            </a>
-          </address>
-          <button class="copy-email-button" data-email="[email protected]">
-            <abbr title="Copy to Clipboard">
-              <img src="img/copy.svg" alt="Copy" width="16" height="16" />
-            </abbr>
-          </button>
-        </li>
-        <li class="contact-element">Braulio Rivas:
-          <address class="email">
-            <a href="mailto:[email protected]">
-              <img src="img/braulio-email.webp" alt="braulio-email" height="21px" />
-            </a>
-          </address>
-          <button class="copy-email-button" data-email="[email protected]">
-            <abbr title="Copy to Clipboard">
-              <img src="img/copy.svg" alt="Copy" width="16" height="16" />
-            </abbr>
-          </button>
-        </li>
-      </ul>
+      <div id="information-buttons">
+        <button id="view-information-button" class="information-button">This view</button>
+        <button id="information-button" class="information-button">About eede</button>
+      </div>
+      <div id="information-options">
+        <div id="information-content">
+          <p>Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the <a
+              href="https://github.com/key4hep/eede/wiki" target="_blank" rel="noopener noreferrer">wiki</a>.
+            Want to learn more about EDM4hep? Check out the <a href="https://edm4hep.web.cern.ch" target="_blank"
+              rel="noopener noreferrer">EDM4hep</a> website.
+          </p>
+          <p>
+            Found a bug or have a feature request? Open a new <a href="https://github.com/key4hep/eede/issues"
+              target="_blank" rel="noopener noreferrer">issue</a>.
+          </p>
+          <p>Contact:</p>
+          <ul>
+            <li class="contact-element">Juraj Smiesko:
+              <address class="email">
+                <a href="mailto:[email protected]">
+                  <img src="img/juraj-email.webp" alt="juraj-email" height="21px" />
+                </a>
+              </address>
+              <button class="copy-email-button" data-email="[email protected]">
+                <abbr title="Copy to Clipboard">
+                  <img src="img/copy.svg" alt="Copy" width="16" height="16" />
+                </abbr>
+              </button>
+
+            </li>
+            <li class="contact-element">Thomas Madlener:
+              <address class="email">
+                <a href="mailto:[email protected]">
+                  <img src="img/thomas-email.webp" alt="thomas-email" height="21px" />
+                </a>
+              </address>
+              <button class="copy-email-button" data-email="[email protected]">
+                <abbr title="Copy to Clipboard">
+                  <img src="img/copy.svg" alt="Copy" width="16" height="16" />
+                </abbr>
+              </button>
+            </li>
+            <li class="contact-element">Braulio Rivas:
+              <address class="email">
+                <a href="mailto:[email protected]">
+                  <img src="img/braulio-email.webp" alt="braulio-email" height="21px" />
+                </a>
+              </address>
+              <button class="copy-email-button" data-email="[email protected]">
+                <abbr title="Copy to Clipboard">
+                  <img src="img/copy.svg" alt="Copy" width="16" height="16" />
+                </abbr>
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div id="view-information-content">
+          <h2 id="view-title-info"></h2>
+          <div id="view-description-info"></div>
+        </div>
+      </div>
     </div>
   </div>
 
+  <div id="views">
+    <p>Select a view:</p>
+    <div id="view-selector" class="view-selector-menu"></div>
+  </div>
+
+  <div id="empty-view">
+    <img src="img/blue-info.svg" alt="Empty view" width="20" height="20" />
+    <p>This view has no elements</p>
+  </div>
+
+  <div id="switch-deploy">
+    <p id="switch-deploy-text">Switch to</p>
+    <button id="switch-deploy-button">release</button>
+  </div>
+
   <canvas id="canvas" width="100vw" height="100vh"></canvas>
 
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" type="text/javascript"></script>
   <script type="module" src="js/main.js"></script>
-  <script type="module" src="js/menu/filter/filter.js"></script>
   <script type="module" src="js/information.js"></script>
+  <script type="module" src="js/views/views.js"></script>
+  <script type="module" src="js/menu/filter/filter.js"></script>
+  <script type="module" src="js/switch-deploy.js"></script>
 </body>
 
-</html>
+</html>