Add an About and Help Navbar item (#288)

* Add About button * Add About and Help menus * Add custom popover templates for About and Help * Spacewalk NOT SpaceWalk
igvteam · Jul 1, 2024 · 1bdae80 · 1bdae80
1 parent dd14f48
commit 1bdae80
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
-# SpaceWalk
+# Spacewalk
 
 ![spacewalk](readme_img/spacewalk-screenshot.png)
 
-SpaceWalk is an application for displaying and interacting with super-resolution chromatin tracing data in 3D. 
-SpaceWalk includes [igv.js](https://github.com/igvteam/igv.js) and [juicebox.js](https://github.com/igvteam/juicebox.js) 
+Spacewalk is an application for displaying and interacting with super-resolution chromatin tracing data in 3D. 
+Spacewalk includes [igv.js](https://github.com/igvteam/igv.js) and [juicebox.js](https://github.com/igvteam/juicebox.js) 
 instances for rapid and intuitive visual comparison and interaction between 3D data and 1D genomic data.
 
 ## Requirements
@@ -12,7 +12,7 @@ instances for rapid and intuitive visual comparison and interaction between 3D d
 
 ## Supported Browsers
 
-SpaceWalk require a modern web browser with support for Javascript ECMAScript 2015.
+Spacewalk require a modern web browser with support for Javascript ECMAScript 2015.
 
 ## Installation
 * Clone this repository.
@@ -41,7 +41,7 @@ After launching the app. You will see a blank 3D space. Use one of the dropdown
 
 ![file load](readme_img/spacewalk-file-load.png)
 
-SpaceWalk supports loading files of various types:
+Spacewalk supports loading files of various types:
 - Point Cloud - Each file contains a list of point clusters. Each cluster corresponds to a genomic range.
 - Segment List - Each file contains a list of traces. Each trace contains a list of segments. Each segment is a genomic range.
 - IGV Tracks - Track files consumed by the IGV panel. Refer to the track section of the [igv.js wiki](https://github.com/igvteam/igv.js/wiki/Tracks-2.0)

diff --git a/index.html b/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Spacewalk built with Snowpack" />
-    <title>Spacewalk - Vite.js Build - Netlify Deployment</title>
+    <meta name="description" content="Spacewalk built with Vitejs" />
+    <title>Spacewalk</title>
 
     <link rel="icon" href="./favicon.ico" />
 
@@ -127,7 +127,7 @@
   <nav class="navbar fixed-top py-0 navbar-expand-sm navbar-dark bg-dark justify-content-between" style="display: none;">
 
     <div class="navbar-brand text-center align-middle">
-      SpaceWalk
+      Spacewalk
     </div>
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#spacewalk-navbar-content">
@@ -326,25 +326,25 @@
           </div>
         </li>
 
-      </ul>
-
-    </div>
-
-    <div id="spacewalk-help-icon-container" class="btn-group dropleft mr-2">
+        <!-- About -->
+        <li class="nav-item">
+          <div class="ml-2 mt-1">
+            <button id="spacewalk-about-button" title="About" type="button" class="btn nav-link" data-trigger="focus" data-toggle="popover" data-placement="bottom" data-html="true">
+              About
+            </button>
+          </div>
+        </li>
 
-      <div class="dropdown">
-        <button type="button" data-toggle="dropdown" class="btn dropdown-toggle">
-          <span class="fas fa-info-circle"></span>
-        </button>
+        <!-- Help -->
+        <li class="nav-item">
+          <div class="ml-2 mt-1">
+            <button id="spacewalk-help-button" title="Help" type="button" class="btn nav-link" data-trigger="focus" data-toggle="popover" data-placement="bottom" data-html="true">
+              Help
+            </button>
+          </div>
+        </li>
 
-        <div id="spacewalk-info-menu-container" class="dropdown-menu">
-          <a href="https://github.com/igvteam/spacewalk#spacewalk" target="_blank" class="dropdown-item">Github</a>
-          <div class="dropdown-divider"></div>
-          <a href="https://github.com/turner/sw2swb/wiki/The-Spacewalk-Binary-File-Format" target="_blank" class="dropdown-item">File Format</a>
-          <div class="dropdown-divider"></div>
-          <a id="spacewalk-info-menu-release" class="dropdown-item" href="#"></a>
-        </div>
-      </div>
+      </ul>
 
     </div>
 
@@ -949,5 +949,55 @@
 
   </main>
 
+  <!-- About button content -->
+  <div id="spacewalk-about-button-content" style="display: none;">
+    <p>
+      The Spacewalk browser is a project at the <a href="https://aidenlab.org/" target="_blank">Aiden Lab</a> as part of the NSF Center for Theoretical Biological Physics
+      and the NIH Center for Genome Imaging.
+    </p>
+
+    <p>
+      The lead developer of Spacewalk is Doug Turner. The application development team includes Dimos Gkountaroulis,
+      Olga Dudchenko, and Guy Nir.
+    </p>
+
+    <p>
+      The Spacewalk browser uses a custom .sw file format. This format was developed in collaboration with the laboratory of Jose Onuchic,
+      and it's development was led by Vinicius Contessoto,  Matheus Mello, Antonio Oliveira Junior, Jim Robinson, and Doug Turner. More information
+      on the file format is available <a href="https://github.com/turner/sw2swb/wiki/The-Spacewalk-Binary-File-Format" target="_blank">here</a>
+    </p>
+
+  </div>
+
+  <!--  Help button content -->
+  <div id="spacewalk-help-button-content" style="display: none;">
+
+    <!-- Docuumentation -->
+    <p>
+      <a href="https://github.com/igvteam/spacewalk/blob/master/README.md" target="_blank">Documentation</a>
+    </p>
+
+    <!-- Github Code -->
+    <p>
+      <a href="https://github.com/igvteam/spacewalk" target="_blank">Github Repository</a>
+    </p>
+
+    <!-- File Format -->
+    <p>
+      <a href="https://github.com/turner/sw2swb/wiki/The-Spacewalk-Binary-File-Format" target="_blank">File Format</a>
+    </p>
+
+    <!-- Issues -->
+    <p>
+      <a href="https://github.com/igvteam/spacewalk/issues" target="_blank">Issues</a>
+    </p>
+
+    <!-- Release Number-->
+    <p id="spacewalk-help-menu-release">
+
+    </p>
+
+  </div>
+
   </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -104,7 +104,7 @@ document.addEventListener("DOMContentLoaded", async (event) => {
     }
 
     const { tag_name } = await showRelease()
-    document.querySelector('#spacewalk-info-menu-release').innerHTML = `Spacewalk release ${ tag_name }`
+    document.getElementById('spacewalk-help-menu-release').innerHTML = `Spacewalk release ${ tag_name }`
     console.log(`Spacewalk release ${ tag_name }`)
 
     await initializationHelper(container)
@@ -117,6 +117,33 @@ document.addEventListener("DOMContentLoaded", async (event) => {
 
 const initializationHelper = async container => {
 
+    // About button
+    const aboutButtonContent = document.getElementById('spacewalk-about-button-content').innerHTML
+
+    const aboutConfig =
+        {
+            content: aboutButtonContent,
+            html: true,
+            template: '<div class="popover spacewalk-popover-about" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+        }
+    $('#spacewalk-about-button').popover(aboutConfig);
+
+    // Help button
+    const helpButtonContent = document.getElementById('spacewalk-help-button-content').innerHTML
+
+    const helpConfig =
+        {
+            content: helpButtonContent,
+            html: true,
+            template: '<div class="popover spacewalk-popover-help" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+        }
+
+    $('#spacewalk-help-button').popover(helpConfig)
+
+    // Dismiss on click away from popover
+    $('.popover-dismiss').popover({ trigger: 'focus' })
+
+
     await initializeMaterialLibrary()
 
     pointCloud = new PointCloud({ pickHighlighter: new PointCloudHighlighter(), deemphasizedColor: appleCrayonColorThreeJS('magnesium') })

diff --git a/styles/_navbar.scss b/styles/_navbar.scss
@@ -16,6 +16,11 @@
       //color: rgba(255,255,255,.5);
       color: $spacewalk_snow;
     }
+
+    .btn:focus, a:focus {
+      outline: none;
+      box-shadow: none;
+    }
   }
 
   .input-group {

diff --git a/styles/app.css b/styles/app.css
diff --git a/styles/app.css.map b/styles/app.css.map
diff --git a/styles/app.scss b/styles/app.scss
@@ -24,6 +24,19 @@ $spacewalk-threejs-canvas-center-dot-radius:6px;
 @import "ui_manager";
 @import "info_panel";
 
+.spacewalk-popover-about {
+  max-width: 512px;
+  .popover-body {
+    font-size: 1rem;
+  }
+}
+
+.spacewalk-popover-help {
+  .popover-body {
+    font-size: 1rem;
+  }
+}
+
 #spacewalk-info-menu-container {
   color:unset;
   width: max-content;