fixes for heap tracing

espressif · Sep 26, 2023 · 86ab91b · 86ab91b
1 parent d7e20c5
commit 86ab91b
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 79 deletions.
diff --git a/src/espIdf/tracing/appTracePanel.ts b/src/espIdf/tracing/appTracePanel.ts
@@ -139,7 +139,7 @@ export class AppTracePanel {
               });
             break;
           case "resolveAddresses":
-            this.resolveAddresses(msg);
+            this.resolveAddresses({addresses: JSON.parse(msg.addresses)});
             break;
           case "openFileAtLine":
             this.openFileAtLineNumber(msg.filePath, msg.lineNumber);
@@ -287,7 +287,7 @@ export class AppTracePanel {
   private getHtmlContent(webview: vscode.Webview): string {
     const scriptPath = webview.asWebviewUri(
       vscode.Uri.file(
-        path.join(this._extensionPath, "dist", "views", "size-bundle.js")
+        path.join(this._extensionPath, "dist", "views", "tracing-bundle.js")
       )
     );
     return `<!DOCTYPE html>

diff --git a/src/views/tracing/App.vue b/src/views/tracing/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useTracingStore } from "./store";
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 import { IconPulse } from "@iconify-prerendered/vue-codicon";
 
 const store = useTracingStore();
@@ -25,18 +25,18 @@ const {
 
 const persistentBytes = computed(() => {
   //amount of allocated memory that hasn’t been freed yet
-  return Object.keys(allocLookupTable).reduce(
-    (acc: any, currentKey: string) => acc + allocLookupTable[currentKey].size,
+  return Object.keys(allocLookupTable.value).reduce(
+    (acc: any, currentKey: string) => acc + allocLookupTable.value[currentKey].size,
     0
   );
 });
 const persistentCount = computed(() => {
   //number of allocations that haven’t been freed yet
-  return Object.keys(allocLookupTable).length;
+  return Object.keys(allocLookupTable.value).length;
 });
 const transientCount = computed(() => {
   //total number of memory allocations that have been freed
-  if (!plotDataReceived) {
+  if (!plotDataReceived.value) {
     return 0;
   }
   return (
@@ -47,7 +47,7 @@ const transientCount = computed(() => {
 });
 const totalBytes = computed(() => {
   //total allocated memory
-  if (!plotDataReceived) {
+  if (!plotDataReceived.value) {
     return 0;
   }
   return plotDataReceived.value.events
@@ -57,6 +57,10 @@ const totalBytes = computed(() => {
 const totalCount = computed(() => {
   return persistentCount.value + transientCount.value;
 });
+
+onMounted(() => {
+  store.getInitialData();
+});
 </script>
 
 <template>
@@ -120,13 +124,13 @@ const totalCount = computed(() => {
       <div class="container" v-if="heap">
         <div class="notification">
           <quick-action-menu
-            v-on:change="store.heapViewChange"
+            @change="store.heapViewChange"
           ></quick-action-menu>
           <div>
             <plot
               v-show="heapView.plot"
               v-bind:chart="dataPlot"
-              v-on:selected="store.plotSelected"
+              @selected="store.plotSelected"
               v-bind:events="eventIDs"
             >
             </plot>
@@ -154,7 +158,7 @@ const totalCount = computed(() => {
         <quick-call-stack
           v-if="tracePane"
           v-bind:info="traceInfo"
-          v-on:dismiss="tracePane = false"
+          v-on:dismiss="store.tracePane = false"
         >
         </quick-call-stack>
       </div>

diff --git a/src/views/tracing/components/CallStack.vue b/src/views/tracing/components/CallStack.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
   cache: Object;
 }>();
 
-const callRef: Ref<any[]> = ref([]);
+const itemRefs: Ref<any[]> = ref([]);
 
 const store = useTracingStore();
 
@@ -95,12 +95,15 @@ function sortBy(a, b) {
   return 0;
 }
 function collapseOrExpandCalls() {
-  if (callRef && callRef.value && callRef.value.length > 0) {
-    callRef.value.forEach((calls) => {
-      calls.collapseAndExpandAll && calls.collapseAndExpandAll(!isExpanded);
+  if (itemRefs && itemRefs.value && itemRefs.value.length > 0) {
+    itemRefs.value.forEach((calls) => {
+      calls.children[0].__vueParentComponent.exposed["collapseAndExpandAll"] &&
+        calls.children[0].__vueParentComponent.exposed["collapseAndExpandAll"](
+          !isExpanded.value
+        );
     });
   }
-  isExpanded.value = !isExpanded;
+  isExpanded.value = !isExpanded.value;
 }
 </script>
 
@@ -142,7 +145,7 @@ function collapseOrExpandCalls() {
         </button>
       </div>
       <div class="control">
-        <button class="button" @click="collapseOrExpandCalls()">
+        <button class="button" @click="collapseOrExpandCalls">
           <template v-if="isExpanded">
             <span class="icon is-small">
               <IconTriangleUp />
@@ -174,7 +177,7 @@ function collapseOrExpandCalls() {
       <div class="column">Function Name</div>
     </div>
     <div class="scroll-container">
-      <div v-for="(calls, index) in callStack" :key="index">
+      <div v-for="(calls, index) in callStack" :key="index" ref="itemRefs">
         <calls
           ref="callRef"
           v-bind:tree="createTreeFromAddressArray(calls)"

diff --git a/src/views/tracing/components/Calls.vue b/src/views/tracing/components/Calls.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onMounted, ref, Ref } from "vue";
 import { TracingTree, useTracingStore } from "../store";
 
 const props = defineProps<{
@@ -8,21 +8,39 @@ const props = defineProps<{
   total: number;
 }>();
 
-let isOpen: boolean = false;
+let isOpen: Ref<boolean> = ref(false);
+
+const callRef = ref();
 
 const store = useTracingStore();
 
 const spaces = computed(() => {
   return new Array(props.space).join("&nbsp;&nbsp;&nbsp;&nbsp;");
 });
 
+function collapseAndExpandAll(isExpand: boolean) {
+  if (props.tree.child) {
+    isOpen.value = isExpand;
+  }
+  if (callRef && callRef.value && callRef.value.collapseAndExpandAll) {
+    callRef.value.collapseAndExpandAll(isExpand);
+  }
+}
+
+defineExpose({
+  collapseAndExpandAll,
+});
+
 function toggle() {
   if (props.tree.child) {
-    isOpen = !isOpen;
+    isOpen.value = !isOpen.value;
   }
 }
 function percentage() {
-  return `(${Math.ceil((props.tree.size / props.total) * 100).toFixed(2)}%)`;
+  const percentageStr = `(${Math.ceil(
+    (props.tree.size / props.total) * 100
+  ).toFixed(2)}%)`;
+  return percentageStr === "(0.00%)" ? "" : percentageStr;
 }
 function openFileAtLine(filePath: string, lineNumber: string) {
   let lineNumMatches = lineNumber.match(/[0-9]*/);
@@ -31,6 +49,10 @@ function openFileAtLine(filePath: string, lineNumber: string) {
     store.treeOpenFileHandler(filePath, lineNumberInt);
   }
 }
+
+onMounted(() => {
+  console.log(props.tree);
+})
 </script>
 
 <template>
@@ -40,7 +62,7 @@ function openFileAtLine(filePath: string, lineNumber: string) {
         {{ tree.size }}
         &nbsp;
         <span class="is-pulled-right is-hidden-mobile">
-          {{ percentage() === "(0.00%)" ? "" : percentage() }}
+          {{ percentage() }}
           &nbsp;&nbsp;
         </span>
       </div>
@@ -68,6 +90,7 @@ function openFileAtLine(filePath: string, lineNumber: string) {
     </div>
     <div v-show="isOpen" v-if="tree.child">
       <Calls
+        ref="callRef"
         v-bind:tree="tree.child"
         v-bind:space="space + 1"
         :total="total"

diff --git a/src/views/tracing/components/LeakList.vue b/src/views/tracing/components/LeakList.vue
@@ -10,7 +10,7 @@ import {
 
 const props = defineProps<{
   cache: object;
-  leaks: object;
+  leaks: any;
 }>();
 
 const store = useTracingStore();
@@ -20,7 +20,7 @@ const filter: Ref<{ functionName: string }> = ref({
   functionName: "",
 });
 
-const callRef: Ref<any[]> = ref([]);
+const itemRefs: Ref<any[]> = ref([]);
 
 const leakList = computed(() => {
   return Object.keys(props.leaks).filter((calls) => {
@@ -47,31 +47,34 @@ const totalMemory = computed(() => {
 
 function createTreeFromAddressArray(addr: string): any {
   const calls = props.leaks[addr].evt.callers;
-  return store.createTreeFromAddressArray(calls);
+  const tracingTree = store.createTreeFromAddressArray(calls);
+  return tracingTree;
 }
 function reverseCallStack() {
   leakList.value.forEach((addr) => {
     props.leaks[addr].evt.callers.reverse();
   });
 }
 function collapseOrExpandCalls() {
-  if (callRef && callRef.value && callRef.value.length > 0) {
-    callRef.value.forEach((calls) => {
-      calls.collapseAndExpandAll &&
-        calls.collapseAndExpandAll(!this.isExpanded);
+  if (itemRefs && itemRefs.value && itemRefs.value.length > 0) {
+    itemRefs.value.forEach((calls) => {
+      calls.children[0].__vueParentComponent.exposed["collapseAndExpandAll"] &&
+        calls.children[0].__vueParentComponent.exposed["collapseAndExpandAll"](
+          !isExpanded.value
+        );
     });
   }
-  isExpanded.value = !isExpanded;
+  isExpanded.value = !isExpanded.value;
 }
 function fetchFunctionNameForAddr(addr: string): string {
-  const tree = store.createTreeFromAddressArray([addr]);
+  const tree = createTreeFromAddressArray(addr);
   if (tree && tree.name) {
     return tree.name;
   }
   return addr;
 }
 function fetchFunctionFilePath(addr: string): string {
-  const tree = store.createTreeFromAddressArray([addr]);
+  const tree = createTreeFromAddressArray(addr);
   if (tree && tree.description) {
     return tree.description;
   }
@@ -98,11 +101,11 @@ function fetchFunctionFilePath(addr: string): string {
           <span class="icon is-small">
             <IconHistory />
           </span>
-          <span>Reverse Call Stack</span>
+          <span>Reverse Leaks Stack</span>
         </button>
       </div>
       <div class="control">
-        <button class="button" @click="collapseOrExpandCalls()">
+        <button class="button" @click="collapseOrExpandCalls">
           <template v-if="isExpanded">
             <span class="icon is-small">
               <IconTriangleUp />
@@ -124,9 +127,8 @@ function fetchFunctionFilePath(addr: string): string {
       <div class="column">Function Name</div>
     </div>
     <div class="scroll-container">
-      <div v-for="(addr, index) in leakList" :key="index">
+      <div v-for="(addr, index) in leakList" :key="index" ref="itemRefs">
         <calls
-          ref="callRef"
           v-bind:tree="createTreeFromAddressArray(addr)"
           :index="index"
           :space="1"

diff --git a/src/views/tracing/components/Plot.vue b/src/views/tracing/components/Plot.vue
@@ -4,7 +4,7 @@ import { Ref, onMounted, ref, watch } from "vue";
 
 const props = defineProps<{
   chart: Array<any>;
-  events: object;
+  events: any;
 }>();
 
 const chartProp: Ref<{
@@ -37,7 +37,7 @@ function plotClickHandler(d) {
   if (!clickableTrace(d)) {
     return;
   }
-  const eventIDs = this.events;
+  const eventIDs = props.events;
   const traceInfo = {} as any;
   const index = d.points[0].pointIndex;
   const evt = Object.assign({}, d.points[0].data.evt[index]);
@@ -61,16 +61,17 @@ onMounted(() => {
   const bgColor = style.getPropertyValue("--vscode-editor-background");
   const fontColor = style.getPropertyValue("--vscode-editor-foreground");
 
-  layout["paper_bgcolor"] = bgColor;
-  layout["plot_bgcolor"] = bgColor;
-  layout["font"] = {
+  layout.value["paper_bgcolor"] = bgColor;
+  layout.value["plot_bgcolor"] = bgColor;
+  layout.value["font"] = {
     color: fontColor,
   };
 
   Plotly.newPlot("plot", props.chart, layout.value, chartProp.value);
   const plot = document.getElementById("plot");
   if (plot) {
     plot.addEventListener("plotly_click", (d) => {
+      console.log(d);
       plotClickHandler(d);
     });
   }

diff --git a/src/views/tracing/components/QuickActionMenu.vue b/src/views/tracing/components/QuickActionMenu.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+const emits = defineEmits(["change"]);
 function heapViewChange(evt: MouseEvent) {
   const target: HTMLElement = evt.target as HTMLElement;
   const buttonKey = target.dataset.dictKey;
-  this.$emit("change", buttonKey);
+  emits("change", buttonKey);
 }
 </script>
 

diff --git a/src/views/tracing/main.ts b/src/views/tracing/main.ts
@@ -40,12 +40,14 @@ app.component("quick-call-stack", QuickCallStack);
 app.component("quick-action-menu", QuickActionMenu);
 app.component("leak-list", LeakList);
 app.component("stats-view", Stats);
+app.mount("#app");
 
 const store = useTracingStore();
 
 // Message Receiver
 window.addEventListener("message", (m: any) => {
   const msg = m.data;
+  console.log(msg);
   switch (msg.command) {
     case "initialLoad":
       store.updateModelWithTraceData(msg.value);