feat(debugger): add background color to instructions based on call count

matter-labs · Dec 12, 2023 · 1605aac · 1605aac
1 parent 973fe0f
commit 1605aac
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 1 deletion.
diff --git a/packages/app/src/components/debugger/SourceViewer.vue b/packages/app/src/components/debugger/SourceViewer.vue
@@ -15,7 +15,22 @@
       :data-testid="item.expandable ? 'instruction-list-item-expandable' : 'instruction-list-item'"
     >
       <label class="instruction-list-line">{{ item.line + 1 }}</label>
-      <span class="instruction-list-item-text-container">
+      <span
+        class="instruction-list-item-text-container"
+        :style="{
+          color:
+            traceCountPercentage[
+              `${address}_${Object.keys(pcLineMapping).find((key) => pcLineMapping[parseInt(key)] === item.index)}`
+            ] > 0.4
+              ? 'white'
+              : 'black',
+          backgroundColor: `rgba(200, 0, 0, ${
+            traceCountPercentage[
+              `${address}_${Object.keys(pcLineMapping).find((key) => pcLineMapping[parseInt(key)] === item.index)}`
+            ]
+          }`,
+        }"
+      >
         <span class="instruction-list-item-text" v-html="highlight(item.label, searchText)"></span>
         <span v-if="item.error" class="instruction-list-item-error" :title="item.error">{{ item.error }}</span>
       </span>
@@ -69,6 +84,12 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  traceCountPercentage: {
+    type: Object as PropType<{ [key: string]: number }>,
+  },
+  pcLineMapping: {
+    type: Object as PropType<{ [key: number]: number }>,
+  },
 });
 
 type InstructionNode = {

diff --git a/packages/app/src/composables/useTrace.ts b/packages/app/src/composables/useTrace.ts
@@ -200,6 +200,34 @@ export function useTraceNavigation(trace: ComputedRef<TraceFile | null>, initial
     }
   };
 
+  const traceCountPercentage = computed<{ [key: string]: number }>(() => {
+    if (!trace.value || !trace.value.steps || !trace.value.sources || index.value === null) {
+      return {};
+    }
+
+    const countDictionary = trace.value.steps.reduce((acc: { [key: string]: number }, step) => {
+      const key = `${step.contract_address}_${step.pc}`;
+      if (acc[key]) {
+        acc[key] += 1;
+      } else {
+        acc[key] = 1;
+      }
+      return acc;
+    }, {});
+
+    const countPercentageDictionary: { [key: string]: number } = {};
+
+    for (const [key, value] of Object.entries(countDictionary)) {
+      countPercentageDictionary[key] =
+        value /
+        Object.entries(countDictionary)
+          .map((x) => x[1])
+          .reduce((a, b) => Math.max(a, b));
+    }
+
+    return countPercentageDictionary;
+  });
+
   watch(trace, () => {
     index.value = null;
   });
@@ -208,6 +236,7 @@ export function useTraceNavigation(trace: ComputedRef<TraceFile | null>, initial
     index,
     total: computed(() => trace.value?.steps.length),
 
+    traceCountPercentage,
     activeStep,
     activeLines,
 

diff --git a/packages/app/src/views/DebuggerView.vue b/packages/app/src/views/DebuggerView.vue
@@ -60,6 +60,8 @@ SourceNode
               :activeStep="activeStep"
               :searchText="searchText"
               :active-lines="activeLines[item.address]"
+              :traceCountPercentage="traceCountPercentage"
+              :pcLineMapping="item.pcLineMapping"
               @nav:navigateToLine="navigateToLine"
             />
             <MetadataBlockPopup
@@ -214,6 +216,7 @@ const {
   activeStep,
   goTo,
   index: activeIndex,
+  traceCountPercentage,
   activeLines,
   total,
   navigateToLine,
@@ -225,6 +228,9 @@ type SourceNode = {
   source: string[];
   errors: Array<undefined | string>;
   expanded: boolean;
+  pcLineMapping: {
+    [key: number]: number;
+  };
 };
 const collection = ref<SourceNode[]>();
 const opened = ref(false);
@@ -353,6 +359,7 @@ watchEffect(() => {
         source,
         errors,
         expanded: false,
+        pcLineMapping: item.pc_line_mapping,
       };
     });
   } else {