refine grid filtering and zooming

Fixes #829

Author: starpit

app/content/css/ui.css

@@ -1369,6 +1369,16 @@ body.subwindow.sidecar-full-screen #sidecar .sidecar-bottom-stripe .sidecar-bott
     /* these two rules are an attempt to push the tooltips just above the bottom stripe */
     height: 2rem;
     align-items: center;
+
+    transition: opacity 150ms ease-in-out;
+}
+.graphical-icon.disabled {
+    opacity: 0.3;
+}
+.graphical-icon.disabled:hover {
+    opacity: 0.3 !important;
+    color: inherit !important;
+    cursor: default !important;
 }
 .graphical-icon[data-balloon]:after, .graphical-icon[data-balloon]:before {
     text-transform: none;

app/content/js/bottom-stripe.js

@@ -164,6 +164,17 @@ const addModeButton = (bottomStripe, opts, entity, show) => {
                 const view = direct(entity)
                 if (view && view.then && !actAsButton) {
                     view.then(custom => ui.showCustom(custom, { leaveBottomStripeAlonex: true }))
+                } else if (actAsButton && view && view.toggle) {
+                    view.toggle.forEach(({mode, disabled}) => {
+                        const button = bottomStripe.querySelector(`.sidecar-bottom-stripe-button[data-mode="${mode}"]`)
+                        if (button) {
+                            if (disabled) {
+                                button.classList.add('disabled')
+                            } else {
+                                button.classList.remove('disabled')
+                            }
+                        }
+                    })
                 }
             } else {
                 repl.pexec(command(entity), { leaveBottomStripeAlonex: true, echo, noHistory })

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

@@ -22,7 +22,7 @@ const prettyPrintDuration = require('pretty-ms'),
  * Draw the given activation in the given cell (a dom)
  *
  */
-exports.renderCell = (returnTo, cell, activation, isFailure=!activation.response.success, duration=activation.end-activation.start, latBucket=latencyBucket(duration), options) => {
+exports.renderCell = (returnTo, cell, activation, isFailure=!activation.response.success, duration=activation.end-activation.start, latBucket=isFailure ? -1 : latencyBucket(duration), options) => {
     let returnValue = cell
     if (!cell) {
         // then the caller asked us to make the container
@@ -44,11 +44,13 @@ exports.renderCell = (returnTo, cell, activation, isFailure=!activation.response
         cell = inner2
     }
 
+    cell.classList.add(`latency-${latBucket}`)
+
     const container = document.createElement('div')
     cell.appendChild(container)
 
     cell.className = `${cell.className} is-failure-${isFailure}`
-    container.className = `grid-cell-content latency-${latBucket}`
+    container.className = `grid-cell-content`
 
     // any extra info to display in the tooltip?
     let extraTooltip = ''

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

@@ -156,11 +156,66 @@ const drawGrid = (options, header) => activations => {
 
     //injectHTML(content, 'grid/bottom-bar.html', 'bottom-bar')
 
+    /** zoom update button click handler */
+    const rezoom = change => () => {
+        const gridGrid = content.querySelector(`.${css.gridGrid}`),
+              currentZoom = parseInt(gridGrid.getAttribute('data-zoom-level')),
+              newZoom = change(currentZoom),
+              zoomMin = -2,
+              zoomMax = 2
+
+        if (newZoom !== currentZoom) {
+            gridGrid.setAttribute('data-zoom-level', newZoom)
+            gridGrid.classList.remove(`zoom_${currentZoom}`)
+            gridGrid.classList.add(`zoom_${newZoom}`)
+
+            // and try to make the gridDom mostly squarish
+            const grids = gridGrid.querySelectorAll('.grid')
+            for (let idx = 0; idx < grids.length; idx++) {
+                const gridDom = grids[idx],
+                      gridLabel = gridDom.querySelector('.grid-label'),
+                      gridRow = gridDom.querySelector('.grid-row'),
+                      width = gridDom.getAttribute('data-width'),
+                      vws = newZoom === 0 ? 2.75 : newZoom === 1 ? 3 : newZoom === 2 ? 4 : 0.75
+
+                gridLabel.style.maxWidth = `${Math.max(8, width * vws * 1.1)}vw`
+                gridRow.style.maxWidth = `${Math.max(8, width * vws)}vw`
+            }
+            
+            if (newZoom === zoomMax) {
+                return { toggle: [{ mode: 'zoom-in', disabled: true },     // can't zoom in any further
+                                  { mode: 'zoom-out', disabled: false }] }
+            } else if (newZoom == zoomMin) {
+                return { toggle: [{ mode: 'zoom-out', disabled: true },    // can't zoom out any further
+                                  { mode: 'zoom-in', disabled: false }] }
+            } else {
+                return { toggle: [{ mode: 'zoom-out', disabled: false },
+                                  { mode: 'zoom-in', disabled: false }] }
+            }
+        }
+    }
+    const zoomIn = { mode: 'zoom-in',
+                     fontawesome: 'fas fa-search-plus',
+                     balloon: 'Use larger grid cells',
+                     flush: 'right',
+                     actAsButton: true,
+                     direct: rezoom(_ => Math.min(2, _ + 1))
+                   },
+          zoomOut = { mode: 'zoom-out',
+                      fontawesome: 'fas fa-search-minus',
+                      balloon: 'Use smaller grid cells',
+                      flush: 'right',
+                      actAsButton: true,
+                      direct: rezoom(_ => Math.max(-2, _ - 1))
+                    }
+
     return {
         type: 'custom',
         content,
         controlHeaders: true,
-        modes: modes('grid', options)
+
+        // add zoom buttons to the mode button model
+        modes: modes('grid', options).concat([zoomIn, zoomOut])
     }
 }
 
@@ -199,6 +254,7 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
           zoomLevelForDisplay = totalCount > 1000 ? -2 : totalCount <= 100 ? zoomLevel : 0 // don't zoom in too far, if there are many cells to display
 
     gridGrid.className = `${css.gridGrid} cell-container zoom_${zoomLevelForDisplay}`
+    gridGrid.setAttribute('data-zoom-level', zoomLevelForDisplay)
     colorBy('duration', gridGrid)
 
     if (!redraw) {
@@ -214,7 +270,7 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
         const onclick = drilldownWith(viewName, `action get "${group.path}"`)
         ui.addNameToSidecarHeader(sidecar, group.name, packageName, onclick)
 
-        drawLegend(viewName, rightHeader, group, options)
+        drawLegend(viewName, rightHeader, group, gridGrid, options)
     } else {
         const onclick = options.appName ? drilldownWith(viewName, `app get "${options.appName}"`) : undefined,
               pathComponents = (options.appName||'').split('/'),
@@ -224,7 +280,7 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
         ui.addNameToSidecarHeader(sidecar, name, packageName, onclick)
 
         if (groups.length > 0) {
-            drawLegend(viewName, rightHeader, summary, options)
+            drawLegend(viewName, rightHeader, summary, gridGrid, options)
         }
     }
 
@@ -281,13 +337,15 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
             group.height = L
             cells = grid.reserve(group)
 
+            gridDom.setAttribute('data-width', width)
+
             // now that we know the width of the grid, adjust the width of the label
             if (zoomLevel === 0) {
                 gridLabel.style.maxWidth = `${width * 2.75 * 1.1}vw`  // 2.75vw is the width in table.css; 1.1x to give a bit of overflow
             }
 
             // and try to make the gridDom mostly squarish
-            gridDom.querySelector('.grid-row').style.maxWidth = `${width * (zoomLevelForDisplay === 0 ? 2.75 : zoomLevelForDisplay === 1 ? 3 : zoomLevelForDisplay === 2 ? 4 : 0.75)}vw`
+            gridDom.querySelector('.grid-row').style.maxWidth = `${width * (zoomLevelForDisplay === 0 ? 2.75 : zoomLevelForDisplay === 1 ? 3 : zoomLevelForDisplay === 2 ? 4 : 0.75) * 1.1}vw`
 
             let idx = 0
             group.activations.forEach(activation => {

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

@@ -31,12 +31,29 @@ const prettyPrintDuration = require('pretty-ms'),
  * @param options user options from the CLI
  *
  */
-exports.drawLegend = (viewName, rightHeader, {statData, errorRate, nFailures}, options) => {
+exports.drawLegend = (viewName, rightHeader, {statData, errorRate, nFailures}, gridContainer, options) => {
     const existing = rightHeader.querySelector('.grid-header-key'),
           wrapper = existing || document.createElement('div'),
           existing2 = wrapper.querySelector('.cell-container'),
           wrapper2 = existing2 || document.createElement('div')
 
+    /** user asked to toggle the latency bucket filter */
+    const toggleFilter = idx => () => {
+        // isRemove: user deselected current filter
+        const isRemove = gridContainer.getAttribute('data-latency-filter') == idx,
+              containers = [wrapper2, gridContainer] // legend and main grid
+
+        containers.forEach(container => {
+            if (isRemove) {
+                container.classList.remove('has-latency-filter')
+                container.removeAttribute('data-latency-filter')
+            } else {
+                container.classList.add('has-latency-filter')
+                container.setAttribute('data-latency-filter', idx)
+            }
+        })
+    }
+    
     if (!existing) {
         rightHeader.appendChild(wrapper)
         wrapper.appendChild(wrapper2)
@@ -79,6 +96,8 @@ exports.drawLegend = (viewName, rightHeader, {statData, errorRate, nFailures}, o
 
             if (onclick) {
                 cell.onclick = onclick
+            } else {
+                cell.classList.add('grid-no-hover')
             }
 
             if (labelAsTooltip) {
@@ -109,27 +128,13 @@ exports.drawLegend = (viewName, rightHeader, {statData, errorRate, nFailures}, o
         valueDom.innerText = labelValue
     }
 
-    //
-    // find the index of the first and last non-zero legend entries
-    // for the performance squares (latency buckets)
-    const firstNonZero = statData.latBuckets.findIndex(_ => _ > 0)
-    let lastNonZero = -1
-    for (let idx = statData.latBuckets.length - 1; idx >= 0; idx--) {
-        if (statData.latBuckets[idx] > 0) {
-            lastNonZero = idx
-            break
-        }
-    }
-
     //
     // if we have at least one non-zero performance bucket, then
     // render the buckets up to that last non-zero bucket
     //
-    if (lastNonZero >= 0) {
+    {
         latencyBuckets.forEach((latencyRange, idx, A) => {
-            const isFirstNonZero = idx === firstNonZero,
-                  last = idx === A.length - 1,
-                  isLastNonZero = idx === lastNonZero,
+            const last = idx === A.length - 1,
                   lower = idx === 0 ? 0 : A[idx - 1],
                   upper = latencyRange,
                   roughlySame = upper - lower < 1000 && (lower < 1000 && upper < 1000 || lower > 1000 && upper > 1000)
@@ -146,14 +151,16 @@ exports.drawLegend = (viewName, rightHeader, {statData, errorRate, nFailures}, o
             // number of cells with this coloration
             const count = statData.latBuckets[idx]
 
+            const opts = { zoom: -1,
+                           useThisLabelInstead: (idx === A.length - 1 ? '>' : '') + (upper >= 500 && upper < 1000 ? `${(upper/1000).toLocaleString()}s` : prettyPrintDuration(upper)),
+                         }
+
             if (count > 0) {
-                entry(labelText, count, false, idx, // false means not a failure
-                    { zoom: -1, labelAsTooltip: true,
-                      balloonPos: lastNonZero >= 2 && idx < ~~(nLatencyBuckets / 2) ? 'right' : 'left',
-                      useThisLabelInstead: isFirstNonZero ? `fast` : isLastNonZero ? `slow` : nbsp,
-                      onclick: drilldownWith(viewName, () => repl.pexec(`grid ${optionsToString(options)} --success --latency-bucket ${idx}`))
-                    })
+                // only add an onclick handler if there is something to filter by
+                opts.onclick = toggleFilter(idx)
             }
+
+            entry(labelText, count, false, idx, opts) // false means not a failure
         })
     }
 
@@ -162,8 +169,9 @@ exports.drawLegend = (viewName, rightHeader, {statData, errorRate, nFailures}, o
     //
     entry('these cells represent activation failures',
         nFailures,
-        true, 0, // true means render as failure
+        true, -1, // true means render as failure
           { zoom: -1, labelAsTooltip: true, useThisLabelInstead: 'fail', balloonPos: 'left', balloonLength: 'medium',
-            onclick: drilldownWith(viewName, () => repl.pexec(`grid ${optionsToString(options)} --failure`))
+            //onclick: drilldownWith(viewName, () => repl.pexec(`grid ${optionsToString(options)} --failure`))
+            onclick: toggleFilter(-1)
           })
 }