From 0cf47a63eece983bc6350df2e2b467067f636c48 Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@dalibo.com>
Date: Fri, 10 Jul 2020 16:18:46 +0200
Subject: [PATCH 1/2] Left align text in tooltips

---
 src/assets/scss/_plan.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/assets/scss/_plan.scss b/src/assets/scss/_plan.scss
index 26f57319..4359ebda 100644
--- a/src/assets/scss/_plan.scss
+++ b/src/assets/scss/_plan.scss
@@ -321,6 +321,9 @@ $connector-line: 2px solid darken($line-color, 10%);
   }
 }
 
+.tippy-popper .tippy-tooltip {
+  text-align: left;
+}
 .tippy-popper .text-muted {
   color: inherit !important;
 }

From 19e2f32c6525601988801d377c0010abaa320d0e Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@dalibo.com>
Date: Fri, 10 Jul 2020 16:18:28 +0200
Subject: [PATCH 2/2] Show blocks as size in bytes as well

We assume that the block size is 8kB

Fixes #210
---
 src/components/Diagram.vue  | 10 +++++-----
 src/components/PlanNode.vue | 24 ++++++++++++------------
 src/enums.ts                | 14 ++++++++++++++
 src/filters.ts              | 12 +++++++++++-
 4 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
index 7b0c3a21..3f589351 100644
--- a/src/components/Diagram.vue
+++ b/src/components/Diagram.vue
@@ -136,7 +136,7 @@
 <script lang="ts">
 import * as _ from 'lodash';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { duration, durationClass, rows, factor } from '@/filters';
+import { blocks, duration, durationClass, rows, factor } from '@/filters';
 import { EstimateDirection, CenterMode, BuffersMetric, HighlightMode, NodeProp, Metric } from '../enums';
 import Node from '@/inode';
 import { IPlan } from '../iplan';
@@ -278,10 +278,10 @@ export default class Diagram extends Vue {
         written = node[NodeProp.EXCLUSIVE_LOCAL_WRITTEN_BLOCKS];
         break;
     }
-    text += hit ? '<br>Hit: ' + rows(hit) : '';
-    text += read ? '<br>Read: ' + rows(read) : '';
-    text += dirtied ? '<br>Dirtied: ' + rows(dirtied) : '';
-    text += written ? '<br>Written: ' + rows(written) : '';
+    text += hit ? '<br>Hit: ' + blocks(hit) : '';
+    text += read ? '<br>Read: ' + blocks(read) : '';
+    text += dirtied ? '<br>Dirtied: ' + blocks(dirtied) : '';
+    text += written ? '<br>Written: ' + blocks(written) : '';
     text = text ? text : ' N/A';
     switch (this.viewOptions.buffersMetric) {
       case BuffersMetric.shared:
diff --git a/src/components/PlanNode.vue b/src/components/PlanNode.vue
index eb157261..b8f53800 100644
--- a/src/components/PlanNode.vue
+++ b/src/components/PlanNode.vue
@@ -172,24 +172,24 @@
               </tr>
               <tr>
                 <th>Shared</th>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_SHARED_HIT_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_SHARED_READ_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_SHARED_DIRTIED_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_SHARED_WRITTEN_BLOCKS') || '-' }}</td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_SHARED_HIT_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_SHARED_READ_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_SHARED_DIRTIED_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_SHARED_WRITTEN_BLOCKS') || '-'"></td>
               </tr>
               <tr>
                 <th>Temp</th>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_TEMP_HIT_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_TEMP_READ_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_TEMP_DIRTIED_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_TEMP_WRITTEN_BLOCKS') || '-' }}</td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_TEMP_HIT_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_TEMP_READ_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_TEMP_DIRTIED_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_TEMP_WRITTEN_BLOCKS') || '-'"></td>
               </tr>
               <tr>
                 <th>Local</th>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_LOCAL_HIT_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_LOCAL_READ_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_LOCAL_DIRTIED_BLOCKS') || '-' }}</td>
-                <td class="text-right">{{ formattedProp('EXCLUSIVE_LOCAL_WRITTEN_BLOCKS') || '-' }}</td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_LOCAL_HIT_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_LOCAL_READ_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_LOCAL_DIRTIED_BLOCKS') || '-'"></td>
+                <td class="text-right" v-html="formattedProp('EXCLUSIVE_LOCAL_WRITTEN_BLOCKS') || '-'"></td>
               </tr>
             </table>
             <!-- iobuffer tab -->
diff --git a/src/enums.ts b/src/enums.ts
index 8305dda9..2f9359e7 100644
--- a/src/enums.ts
+++ b/src/enums.ts
@@ -148,6 +148,7 @@ export enum PropType {
   json,
   space,
   increment,
+  blocks,
 }
 
 export const nodePropTypes: any = {};
@@ -176,6 +177,19 @@ nodePropTypes[NodeProp.IO_WRITE_TIME] = PropType.duration;
 nodePropTypes[NodeProp.EXCLUSIVE_IO_READ_TIME] = PropType.duration;
 nodePropTypes[NodeProp.EXCLUSIVE_IO_WRITE_TIME] = PropType.duration;
 
+nodePropTypes[NodeProp.EXCLUSIVE_SHARED_HIT_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_SHARED_READ_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_SHARED_DIRTIED_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_SHARED_WRITTEN_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_TEMP_HIT_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_TEMP_READ_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_TEMP_DIRTIED_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_TEMP_WRITTEN_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_LOCAL_HIT_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_LOCAL_READ_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_LOCAL_DIRTIED_BLOCKS] = PropType.blocks;
+nodePropTypes[NodeProp.EXCLUSIVE_LOCAL_WRITTEN_BLOCKS] = PropType.blocks;
+
 export class WorkerProp {
   // plan property keys
   public static WORKER_NUMBER: string = 'Worker Number';
diff --git a/src/filters.ts b/src/filters.ts
index fb1b927b..96c9f1b5 100644
--- a/src/filters.ts
+++ b/src/filters.ts
@@ -62,11 +62,19 @@ export function formatBytes(bytes: number, decimals = 2) {
   const dm = decimals < 0 ? 0 : decimals;
   const units = ['Bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  const compiled = _.template('${value}&nbsp;<span class="text-muted">${unit}</span>');
+  const compiled = _.template('${value}&nbsp;${unit}');
   const value = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)).toLocaleString();
   return compiled({value, unit: units[i]});
 }
 
+export function blocks(value: number): string {
+  if (!value) {
+    return '';
+  }
+  return value.toLocaleString() + '&nbsp;<span class="text-muted">|</span>&nbsp;<small>' +
+    formatBytes(value * 8 * 1024) + '</small>';
+}
+
 export function formatNodeProp(key: string, value: any, detail: boolean): string {
   if (_.has(nodePropTypes, key)) {
     if (nodePropTypes[key] === PropType.duration) {
@@ -92,6 +100,8 @@ export function formatNodeProp(key: string, value: any, detail: boolean): string
       return JSON.stringify(value, null, 2);
     } else if (nodePropTypes[key] === PropType.space) {
       return space(value);
+    } else if (nodePropTypes[key] === PropType.blocks) {
+      return blocks(value);
     }
   }
   return value;