incorporate descriptions into legend

main.js

@@ -2475,6 +2475,32 @@ a.minerva-root .badge-dark:focus, a.minerva-root .badge-dark.focus { outline: 0;
     fill : white;
 }
 
+.minerva-legend-grid {
+    gap: 8px;
+    display: grid;
+    grid-template-columns: auto auto;
+}
+.minerva-legend-grid > .minerva-channel-legend-wrapper {
+    grid-template-columns: auto auto;
+    pointer-events: all;
+    cursor: pointer;
+    display: grid;
+    gap: 8px;
+}
+.minerva-channel-legend-wrapper > .minerva-channel-legend-info {
+    opacity: 1;
+    max-width: 600px;
+    white-space: nowrap;
+    transition-timing-function: ease-in;
+    transition: max-width 1s, opacity 1s;
+}
+.minerva-channel-legend-wrapper > .minerva-channel-legend-info:not(.toggled) {
+    gap: 8px;
+    opacity: 0;
+    max-width: 0px;
+    transition-timing-function: ease-out;
+    transition: max-width 0.5s, opacity 0.5s;
+}
 body {
   margin: 0;
   height: 100vh;
@@ -2526,7 +2552,13 @@ const exhibitHTML = `
                         <i class="minerva-open-legend fas fa-chevron-left" style="font-size: 25px;"></i>
                         <i class="minerva-close-legend fas fa-chevron-right" style="font-size: 25px;"></i>
                     </a>
-                    <ul class="minerva-channel-legend list-unstyled m-0"></ul>
+                    <div class="minerva-legend-grid">
+                      <ul class="minerva-channel-legend list-unstyled m-0"></ul>
+                      <div class="minerva-channel-legend-wrapper">
+                        <ul class="minerva-channel-legend-info list-unstyled m-0"></ul>
+                        <a>&#9432;</a>
+                      </div>
+                    </div>
                     <div class="p-1 minerva-only-3d">
                       Depth:
                     </div>

render.js

@@ -263,6 +263,14 @@ Render.prototype = {
       title: 'Clone linked view'
     });
 
+    // Toggle legend info
+    ((k) => {
+      const el = document.getElementsByClassName(k).item(0);
+      el.addEventListener('click', () => {
+        $(".minerva-channel-legend-info").toggleClass("toggled");
+      });
+    })('minerva-channel-legend-wrapper');
+
     // Modals to copy shareable link and edit description
     $('#copy_link_modal').on('hidden.bs.modal', HS.cancelDrawing.bind(HS));
     $('.minerva-edit_description_modal').on('hidden.bs.modal', HS.cancelDrawing.bind(HS));
@@ -858,29 +866,40 @@ Render.prototype = {
   addChannelLegends: function() {
     const HS = this.hashstate;
     $('.minerva-channel-legend').empty();
-    HS.channels.forEach(this.addChannelLegend, this);
+    $('.minerva-channel-legend-info').empty();
+    HS.channel_legend_lines.forEach(this.addChannelLegend, this);
   },
 
   // Add channel legend label
-  addChannelLegend: function(channel, c) {
+  addChannelLegend: function(legend_line, c) {
     const color = this.indexColor(c, '#FFF');
     const HS = this.hashstate;
 
     var label = document.createElement('span');
     label.className = 'legend-label pl-3';
-    label.innerText = channel;
+    label.innerText = legend_line.name;
 
     var badge = document.createElement('span');
     $(badge).css('background-color', color);
     badge.className = 'badge legend-color';
     badge.innerText = '\u00a0';
 
     // Append channel legend to list
-    var ul = HS.el.getElementsByClassName('minerva-channel-legend')[0];
-    var li = document.createElement('li');
-    li.appendChild(badge);
-    li.appendChild(label);
-    ul.appendChild(li);
+    (() => {
+      var ul = HS.el.getElementsByClassName('minerva-channel-legend')[0];
+      var li = document.createElement('li');
+      li.appendChild(badge);
+      li.appendChild(label);
+      ul.appendChild(li);
+    })();
+
+    // Append channel info to list
+    (() => {
+      var ul = HS.el.getElementsByClassName('minerva-channel-legend-info')[0];
+      var li = document.createElement('li');
+      li.innerText = legend_line.description;
+      ul.appendChild(li);
+    })();
   },
 
   // Return map of channels to indices
@@ -1177,7 +1196,7 @@ Render.prototype = {
   // Color all the remaining HTML Code elements
   colorMarkerText: function (wid_waypoint) {
     const HS = this.hashstate;
-    const channelOrders = this.channelOrders(HS.channels);
+    const channelOrders = this.channelOrders(HS.channel_names);
     const wid_code = wid_waypoint.getElementsByTagName('code');
     for (var i = 0; i < wid_code.length; i ++) {
       var code = wid_code[i];

state.js

@@ -698,13 +698,30 @@ HashState.prototype = {
   },
 
   // Get the names of the current group's channels
-  get channels() {
+  get channel_names() {
     const g_chans = this.group.Channels;
     return g_chans.concat(this.active_masks.reduce((c, m) => {
       return c.concat(m.Channels || []);
     }, []));
   },
 
+  // Get the descriptions of current group's channels
+  get channel_descriptions() {
+    const g_chans = this.group.Descriptions || [];
+    return g_chans.concat(this.active_masks.reduce((c, m) => {
+      return c.concat(m.Descriptions || []);
+    }, []));
+  },
+
+  // Get channel names and descriptions 
+  get channel_legend_lines() {
+    const channel_descriptions = this.channel_descriptions;
+    return this.channel_names.map((name, i) => {
+      const description = channel_descriptions[i] || '';
+      return { name, description };
+    });
+  },
+
   // Get the waypoints of the current story
   get waypoints() {
     return (this.story || {}).Waypoints || [];
@@ -945,7 +962,7 @@ HashState.prototype = {
           const welcome = $(this.el).find('.minerva-welcome_modal');
           if (!this.customWelcome) {
             const channel_count = welcome.find('.minerva-channel_count')[0];
-            channel_count.innerText = this.channels.length;
+            channel_count.innerText = this.channel_names.length;
           }
           else {
             const welcome_body = welcome.find('.modal-body')[0];