cleanup of summary/table view

Fixes #786

Author: starpit

app/content/css/themes/ibm.css

@@ -150,6 +150,10 @@ badge.clickable:hover {
 .sidecar-bottom-stripe .sidecar-bottom-stripe-button:not(.sidecar-bottom-stripe-button-active):hover, .sidecar-bottom-stripe .sidecar-bottom-stripe-button.hover, .sidecar-bottom-stripe-button-as-button.selected {
     color: var(--color-brand-02);
 }
+.sidecar-bottom-stripe .sidecar-bottom-stripe-button-as-button.sidecar-bottom-stripe-button-as-radio-button:not(.sidecar-bottom-stripe-button-active):hover, .sidecar-bottom-stripe-button-as-button.sidecar-bottom-stripe-button-as-radio-button.selected {
+    color: var(--color-support-03);
+    color: #e31a1c;
+}
 
 sidecar .header-right-bits {
     color: hsla(201, 22%, 10%, 1);

app/content/css/ui.css

@@ -1687,3 +1687,14 @@ break {
 .bx--breadcrumb .bx--no-link:not(.bx--link) {
     font-weight: 400;
 }
+
+.icon-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.icon-container .deemphasize {
+    white-space: nowrap;
+    font-size: 0.5em;
+    margin-top: 0.5ex;
+}

app/content/js/bottom-stripe.js

@@ -21,6 +21,7 @@ const css = {
     modeContainer: '#sidecar .sidecar-bottom-stripe .sidecar-bottom-stripe-left-bits .sidecar-bottom-stripe-mode-bits',
     button: 'sidecar-bottom-stripe-button',
     buttonActingAsButton: 'sidecar-bottom-stripe-button-as-button',
+    buttonActingAsRadioButton: 'sidecar-bottom-stripe-button-as-radio-button',
     active: 'sidecar-bottom-stripe-button-active',
     selected: 'selected',
     hidden: 'hidden'
@@ -29,8 +30,9 @@ exports.css = css
 
 const addModeButton = (bottomStripe, opts, entity, show) => {
     const {mode, label, flush, selected, selectionController, visibleWhen,
-           fontawesome, balloon, balloonLength, data, command=()=>mode, direct,
-           defaultMode, actAsButton, echo=false, noHistory=true} = opts
+           fontawesome, labelBelow,   // show label below the fontawesome?
+           balloon, balloonLength, data, command=()=>mode, direct,
+           defaultMode, actAsButton, radioButton=false, echo=false, noHistory=true} = opts
 
     if (visibleWhen && visibleWhen !== show) {
         // only visible when a specific mode is active!
@@ -46,6 +48,10 @@ const addModeButton = (bottomStripe, opts, entity, show) => {
         // let's make them behave a bit more like buttons
         button.classList.add(css.buttonActingAsButton)
 
+        if (radioButton) {
+            button.classList.add(css.buttonActingAsRadioButton)
+        }
+
         if (selected) {
             button.classList.add(css.selected)
         }
@@ -72,10 +78,20 @@ const addModeButton = (bottomStripe, opts, entity, show) => {
 
     // add the button label
     if (fontawesome) {
-        const icon = document.createElement('i')
+        const iconContainer = document.createElement('span'),
+              icon = document.createElement('i')
         icon.className = fontawesome
         button.classList.add('graphical-icon')
-        button.appendChild(icon)
+        button.appendChild(iconContainer)
+        iconContainer.appendChild(icon)
+        iconContainer.classList.add('icon-container')
+
+        if (labelBelow) {
+            const labelContainer = document.createElement('div')
+            labelContainer.classList.add('deemphasize')
+            labelContainer.innerText = label
+            iconContainer.appendChild(labelContainer)
+        }
     } else {
         button.innerText = label || mode
     }
@@ -132,11 +148,15 @@ const addModeButton = (bottomStripe, opts, entity, show) => {
                 })*/
 
             } else if (actAsButton && selected !== undefined) {
-                const currentSelected = bottomStripe.querySelector(`.${css.selected}`)
-                if (currentSelected) {
-                    currentSelected.classList.remove(css.selected)
+                if (radioButton) {
+                    button.classList.toggle(css.selected)
+                } else {
+                    const currentSelected = bottomStripe.querySelector(`.${css.selected}`)
+                    if (currentSelected) {
+                        currentSelected.classList.remove(css.selected)
+                    }
+                    button.classList.add(css.selected)
                 }
-                button.classList.add(css.selected)
             }
 
             // execute the command

app/content/js/repl.js

@@ -907,6 +907,7 @@ self.exec = (commandUntrimmed, execOptions) => {
                                     }
                                 })
                                 .catch(err => {
+                                    console.error(err)
                                     if (execOptions && execOptions.noHistory) {
                                         // then pass the error upstream
                                         throw err
@@ -919,6 +920,8 @@ self.exec = (commandUntrimmed, execOptions) => {
                     }
                 })
                 .catch(err => {
+                    console.error(err)
+
                     if (ui.headless) {
                         throw err
                     } else {

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

@@ -68,7 +68,7 @@ const summarizePerformance = (activations, options) => {
               initTime = (initAnno && initAnno.value) || 0,
               start = activation.start - waitTime,
               executionTime = activation.end - activation.start,
-              total = executionTime + waitTime + initTime
+              total = executionTime + waitTime /*+ initTime*/
 
         const durDisparity = executionTime - durAvgForFastest,
               waitDisparity = Math.max(0, waitTime - waitAvgForFastest),
@@ -85,8 +85,10 @@ const summarizePerformance = (activations, options) => {
         return { total, start, reasons }
     }
 
-    // outlier activations
-    const outliers = summaries.slice(idxOutlier),
+    // outlier activations; make sure not to include degenerate
+    // "outliers" that are just the median
+    const median = summaries[idx50].duration
+    const outliers = summaries.slice(idxOutlier).filter(({duration}) => duration > median),
           outlierMax = outliers.reduce((max, {duration}) => Math.max(max, duration), 0)
 
     return { min, max,