Deploy preview for PR 42 🛫

pr-preview/pr-42/css/filter.css

@@ -2,7 +2,7 @@
   min-width: 100px;
   position: fixed;
   flex-direction: column;
-  background-color: #f5f5f5;
+  background-color: #e1e1e1;
   border-radius: 5px;
   padding: 10px;
   top: 10px;

pr-preview/pr-42/css/toggle.css

@@ -33,7 +33,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #ccc;
+  background-color: #e1e1e1;
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }

pr-preview/pr-42/index.html

@@ -9,6 +9,7 @@
 
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/dmx-logo.css">
+  <link rel="stylesheet" href="css/dmx-logo.css">
   <link rel="stylesheet" href="css/canvas.css">
   <link rel="stylesheet" href="css/modal.css">
   <link rel="stylesheet" href="css/toggle.css">
@@ -24,6 +25,7 @@
 
       <p>Welcome to <span id="logo">
           <span class="logo-d">d</span><span class="logo-m">m</span><span class="logo-x">X</span>
+          <span class="logo-d">d</span><span class="logo-m">m</span><span class="logo-x">X</span>
         </span></p>
 
       <div id="input-message">
@@ -95,32 +97,46 @@
       <span class="logo-d">d</span><span class="logo-m">m</span><span class="logo-x">X</span>
       <p>Welcome to dmX, an Event Data Explorer for EDM4hep. Learn more about dmX on the <a
           href="https://github.com/key4hep/dmx/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/dmx/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]">[email protected]</a></address>
+        <li class="contact-element">Juraj Smiesko:
+          <address class="email">
+            <a href="mailto:[email protected]">
+              <img src="img/juraj-email.png" 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]">[email protected]</a></address>
+        <li class="contact-element">Thomas Madlener:
+          <address class="email">
+            <a href="mailto:[email protected]">
+              <img src="img/thomas-email.png" 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]">[email protected]</a></address>
+        <li class="contact-element">Braulio Rivas:
+          <address class="email">
+            <a href="mailto:[email protected]">
+              <img src="img/braulio-email.png" 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" />
@@ -137,6 +153,7 @@
   <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/information.js"></script>
 </body>
 
 </html>

pr-preview/pr-42/js/information.js

@@ -43,3 +43,16 @@ const hideModal = () => {
 
 infoIcon.addEventListener("click", showModal);
 closeIcon.addEventListener("click", hideModal);
+
+window.addEventListener("click", (event) => {
+  const modal = document.getElementById("information-modal");
+
+  if (
+    event.target !== modal &&
+    !modal.contains(event.target) &&
+    event.target !== infoIcon &&
+    modal.style.display === "flex"
+  ) {
+    hideModal();
+  }
+});

pr-preview/pr-42/js/main.js

@@ -107,6 +107,12 @@ document
   .getElementById("visualize-button")
   .addEventListener("click", (event) => {
     event.preventDefault();
+
+    if (jsonData.data === undefined) {
+      errorMsg("No data loaded!");
+      return;
+    }
+
     const eventNum = document.getElementById("event-number").value;
 
     hideInputModal();