Visualizando la jungla de datos - Parte III. Excursión a los mapas de calor basados en %SYS.MONLBL

La cobertura del código y su optmización del rendimiento ya han surgido muchas veces, así que la mayoría de vosotors seguro que ya conocéis la herramienta SYS.MONLBL.

A menudo, un enfoque visual para revisar el código es mucho más intuitivo que los números puros. Este es principalmente el objetivo de esta serie de artículos. Esta vez vamos a hacer una pequeña excursión lejos de Python y sus herramientas, y vamos a explorar la generación de mapas de calor de los informes ^%SYS.MONLBL.

Como recordatorio rápido, un mapa de calor es solo una herramienta de visualización concreta, que nos da una visión general de los datos, en la que los colores representan un determinado valor. En nuestro caso, los datos serán líneas de código, con el tiempo que se dedica a ellas representado en colores.

^%SYS.MONLBL

Para obtener más información sobre cómo ejecutar la monitorización línea a línea, consulta esta documentación. En resumen, vamos a trabajar con un archivo CSV como salida completa de un análisis. Es mucho más útil si realmente tenemos el código fuente que estamos tratando de analizar. Asegúrate de compilar tu código con la marca k (mantén la fuente).

Cómo preparar la salida

Como salida objetivo vamos a utilizar un documento ya preparado en html. Solo incluirá un diseño muy básico y una pequeña función en javascript para realizar el coloreado final.

Por motivo de seguriad, este bloque no puede estar editado como código

Routine
Line
Total Time
Code




    

Analizar y reunir la información

Por medio de los siguientes scripts se obtiene la información relevante del CSV generado y se introduce en nuestra plantilla:

monlbl.sh

#!/bin/bash

cat $1|grep -vi totals| awk -F"," 'FNR>1 {out=""$1"" "" $2 "" $54 "
"; for(i=55;i<=NF;i++){out=out$i","}; out=substr(out, 1, length(out)-1) "
"; print out }'

gen-heatmap.sh

#!/bin/bash
./monlbl.sh $1 > /tmp/temp.data
sed -e '//r/tmp/temp.data' template.html

Que llamamos de esta forma:

./gen-heatmap.sh /tmp/report.csv > heatmap.html

Resultado final

Ajustables

Si echas un vistazo más de cerca a la función de coloreado en nuestra plantilla, verás que no estoy usando un mapeo lineal para los tiempos:

    function colorize() {
        var rows=$("#data tr")
        var max=Math.max.apply(Math,rows.slice(1,rows.length).map(function(){ return this.childNodes[2].textContent}))
        for (i=1;i<rows.length;i++){
            var val=rows[i].childNodes[2].textContent;
            var c=(Math.pow(1-val/max,3))*255;
            var col=rgba(255,c,c,0.7);
            console.log(col);
            rows[i].style.backgroundColor=col;
        }
    }

Encontré que esto funcionaba bastante bien con los ejemplos que probé, pero los resultados pueden variar. Evidentemente, se puede aumentar el exponente para llevarlo más al rojo, o viceversa.

Código

Puedes encontrar todos los archivos relevantes aquí