improve rendering of grid for higher number of cells

Fixes #627

Author: starpit

app/plugins/modules/activation-visualizations/lib/cell.js

@@ -50,21 +50,24 @@ exports.renderCell = (returnTo, cell, activation, isFailure=!activation.response
     cell.className = `${cell.className} is-failure-${isFailure}`
     container.className = `grid-cell-content latency-${latBucket}`
 
-    if (!isFailure && (!options || options.zoom > 0)) {
-        const innerLabel = document.createElement('span')
-        innerLabel.innerText = prettyPrintDuration(duration)
-        container.appendChild(innerLabel)
-    }
-
-    //label = document.createElement('div')
-    // container.appendChild(label)
-    // label.className = 'cell-label'
-    // label.innerText = labelText || ''
+    // any extra info to display in the tooltip?
+    let extraTooltip = ''
 
     if (isFailure) {
         const fdom = document.createElement('div')
         fdom.className = 'grid-oops-overlay'
         container.appendChild(fdom)
+
+    } else if (!options || options.zoom > 0) {
+        // for larger zoom levels, and only for successful activations,
+        // render the latency inside the cell
+        const innerLabel = document.createElement('span')
+        innerLabel.innerText = prettyPrintDuration(duration)
+        container.appendChild(innerLabel)
+
+    } else {
+        // for higher zoom levels (zoom < 0), render the latency in the tooltip
+        extraTooltip += `${newline}${prettyPrintDuration(duration)}`
     }
 
     if (activation) {
@@ -88,7 +91,7 @@ exports.renderCell = (returnTo, cell, activation, isFailure=!activation.response
         cell.isFailure = isFailure
         cell.setAttribute('data-action-name', activation.name)
         cell.setAttribute('data-balloon-break', 'data-balloon-break')
-        cell.setAttribute('data-balloon', `${options && options.nameInTooltip ? activation.name + ' action, invoked ' : ''}${ui.prettyPrintTime(activation.start, 'short')}${msg}`)
+        cell.setAttribute('data-balloon', `${options && options.nameInTooltip ? activation.name + ' action, invoked ' : ''}${ui.prettyPrintTime(activation.start, 'short')}${msg}${extraTooltip}`)
         cell.setAttribute('data-balloon-pos', 'up')
     }
 

app/plugins/modules/activation-visualizations/lib/grid.js

@@ -287,11 +287,12 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
             }
 
             // and try to make the gridDom mostly squarish
-            gridDom.querySelector('.grid-row').style.maxWidth = `${width * (zoomLevelForDisplay === 0 ? 2.5 : zoomLevelForDisplay === 1 ? 3 : zoomLevelForDisplay === 2 ? 4 : 3)}vw`
+            gridDom.querySelector('.grid-row').style.maxWidth = `${width * (zoomLevelForDisplay === 0 ? 2.5 : zoomLevelForDisplay === 1 ? 3 : zoomLevelForDisplay === 2 ? 4 : 0.75)}vw`
 
             let idx = 0
             group.activations.forEach(activation => {
-                renderCell(viewName, cells[idx], activation, !isSuccess(activation))
+                renderCell(viewName, cells[idx], activation, !isSuccess(activation),
+                           undefined, undefined, { zoom: zoomLevelForDisplay })
                 idx++
             })
         } else {
@@ -313,7 +314,8 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
                         const cell = makeCellDom()
                         cellContainer.appendChild(cell)
                         cell.classList.add('grid-cell-newly-created')
-                        renderCell(viewName, cell, activation, !isSuccess(activation))
+                        renderCell(viewName, cell, activation, !isSuccess(activation), undefined, undefined,
+                                   { zoom: zoomLevelForDisplay })
                     }
                 } catch (e) {
                     console.error(e)

app/plugins/modules/activation-visualizations/web/css/table.css

@@ -395,6 +395,10 @@
     /* square aspect ratio */
     width: 0.75vw;
     height: 0.75vw;
+
+    /* for higher zoom levels, use a transparent outline to blur the small cells together better */
+    border: none;
+    outline: 1px solid rgba(255,255,255,0.4);
 }
 .activation-viz-plugin .grid .grid-cell {
     display: flex;