From eef1a5e81ee4a9a3b1ee45b9481cf73171c2d244 Mon Sep 17 00:00:00 2001
From: Andrei Kuchuk <kreezag@gmail.com>
Date: Sat, 21 Sep 2024 22:56:38 +0400
Subject: [PATCH] fix ts errors for profiler call-stat-board

---
 .../profiler/lib/cytoscape/inicialize.ts      | 25 ++-----
 src/entities/profiler/lib/cytoscape/types.ts  | 23 ------
 src/entities/profiler/types.ts                | 11 +--
 .../profiler/ui/call-graph/call-graph.vue     |  8 ++-
 .../profiler/ui/flame-graph/flame-graph.vue   | 71 ++++++++++++++-----
 src/entities/profiler/ui/index.ts             |  1 -
 .../ui/profiler-page/profiler-page.vue        | 67 ++---------------
 .../profiler/ui/render-graph/render-graph.vue | 31 ++++----
 8 files changed, 81 insertions(+), 156 deletions(-)
 delete mode 100644 src/entities/profiler/lib/cytoscape/types.ts

diff --git a/src/entities/profiler/lib/cytoscape/inicialize.ts b/src/entities/profiler/lib/cytoscape/inicialize.ts
index da0e7937..fa56637a 100644
--- a/src/entities/profiler/lib/cytoscape/inicialize.ts
+++ b/src/entities/profiler/lib/cytoscape/inicialize.ts
@@ -1,34 +1,17 @@
-import cytoscape from 'cytoscape';
-import type { Core as Cytoscape, ElementsDefinition, EventObjectNode, NodeSingular, Stylesheet } from "cytoscape";
+import cytoscape, {type NodeDataDefinition} from 'cytoscape';
+import type { Core as Cytoscape, ElementsDefinition, EventObjectNode, Stylesheet } from "cytoscape";
 import dagre, { type DagreLayoutOptions } from "cytoscape-dagre";
-import type {ProfilerEdge} from "../../types";
 import { cytoscapeStyles } from "./config";
 
 
 type TInitializeProps = {
   elements: ElementsDefinition,
   container: HTMLElement,
-  onNodeHover: (edge?: ProfilerEdge, event?: MouseEvent) => void,
+  onNodeHover: (data?: NodeDataDefinition, event?: MouseEvent) => void,
 }
 
 type TInitialize = (data: TInitializeProps) => () => void;
 
-const formatProfilerEdge = (node?: NodeSingular): ProfilerEdge | undefined => {
-  if (!node) {
-    return undefined;
-  }
-
-  const data = node.data();
-
-  return {
-    id: data.id,
-    parent: data.name,
-    caller: data.caller,
-    callee: data.callee,
-    cost: data.cost,
-  }
-}
-
 const initialize: TInitialize = ({
   elements,
   container,
@@ -51,7 +34,7 @@ const initialize: TInitialize = ({
   });
 
   cy.on("mouseover", "node", (event: EventObjectNode) => {
-    onNodeHover(formatProfilerEdge(event.target), event.originalEvent);
+    onNodeHover(event.target.data(), event.originalEvent);
   });
 
   cy.on("mouseout", "node", () => {
diff --git a/src/entities/profiler/lib/cytoscape/types.ts b/src/entities/profiler/lib/cytoscape/types.ts
deleted file mode 100644
index d42d2aba..00000000
--- a/src/entities/profiler/lib/cytoscape/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ProfilerCost } from "../../types";
-
-export type TNode = {
-  data: {
-    id: string,
-    parent: string | null,
-    name: string,
-    cost?: ProfilerCost,
-    color?: string,
-    textColor?: string,
-  }
-}
-
-export type TEdge = {
-  data: {
-    id?: string,
-    source: string,
-    target: string,
-    label?: string,
-    color?: string,
-    weight?: number,
-  }
-}
diff --git a/src/entities/profiler/types.ts b/src/entities/profiler/types.ts
index 91f3a477..b187236b 100644
--- a/src/entities/profiler/types.ts
+++ b/src/entities/profiler/types.ts
@@ -24,14 +24,6 @@ export interface ProfilerCost {
   excl_ct: number,
 }
 
-export interface ProfilerEdge {
-  id: string,
-  parent: string | null,
-  caller: string | null,
-  callee: string,
-  cost: StatsBase
-}
-
 export interface Profiler {
   tags: {
     [key: string]: string | null | number
@@ -72,4 +64,5 @@ export interface ProfileFlameChart {
   type: "task" | string
 }
 
-export type CallStackHoverData = ProfilerEdge & { position: { x: number; y: number } }
+
+export type CallStackHoverData = { title: string, cost: Partial<ProfilerCost>}
diff --git a/src/entities/profiler/ui/call-graph/call-graph.vue b/src/entities/profiler/ui/call-graph/call-graph.vue
index 083d8b03..b3984104 100644
--- a/src/entities/profiler/ui/call-graph/call-graph.vue
+++ b/src/entities/profiler/ui/call-graph/call-graph.vue
@@ -2,7 +2,7 @@
 import type { ElementsDefinition } from 'cytoscape'
 import { ref, computed, onMounted, watchEffect } from 'vue'
 import { type EventId, GraphTypes } from '@/shared/types'
-import { IconSvg } from '@/shared/ui'
+import { IconSvg, type StatBoardCost } from '@/shared/ui'
 import { useProfiler } from '../../lib'
 import type { ProfilerCallGraph } from '../../types'
 import { CallStatBoard } from '../call-stat-board'
@@ -83,7 +83,11 @@ const percentLabel = computed(() => (metric.value === GraphTypes.CALLS ? 'Min ca
       :height="graphHeight"
     >
       <template #default="{ data }">
-        <CallStatBoard :title="data?.callee" :cost="data?.cost" />
+        <CallStatBoard
+          v-if="data.cost"
+          :title="data?.title || ''"
+          :cost="data.cost as StatBoardCost"
+        />
       </template>
     </RenderGraph>
 
diff --git a/src/entities/profiler/ui/flame-graph/flame-graph.vue b/src/entities/profiler/ui/flame-graph/flame-graph.vue
index d94e49e0..070ff18a 100644
--- a/src/entities/profiler/ui/flame-graph/flame-graph.vue
+++ b/src/entities/profiler/ui/flame-graph/flame-graph.vue
@@ -1,28 +1,52 @@
 <script lang="ts" setup>
 import { FlameChart } from 'flame-chart-js'
 import debounce from 'lodash.debounce'
-import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
+import { ref, onMounted, nextTick, onBeforeUnmount, computed } from 'vue'
 import type { EventId } from '@/shared/types'
+import type { StatBoardCost } from '@/shared/ui'
 import { useProfiler } from '../../lib'
 import type { CallStackHoverData } from '../../types'
+import { CallStatBoard } from '../../ui/call-stat-board'
 
 type Props = {
   id: EventId
 }
 
-type Emits = {
-  hover: [value: CallStackHoverData]
-  hide: []
-}
-
 const { getFlameChart } = useProfiler()
 
+const defaultPosition = { x: 0, y: 0 }
+
 const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
 
 const canvas = ref<HTMLCanvasElement>()
 const graph = ref<HTMLCanvasElement>()
 
+const activeStatBoard = ref<CallStackHoverData>()
+const activeStatBoardPosition = ref(defaultPosition)
+
+const activeStatBoardStyle = computed(() => {
+  const width = 750
+  const height = 150
+
+  let top = activeStatBoardPosition.value.y
+  let left = activeStatBoardPosition.value.x
+
+  if (width + activeStatBoardPosition.value.x > window.innerWidth - 80) {
+    const deltaX = width + activeStatBoardPosition.value.x - window.innerWidth + 100
+    left -= deltaX
+  }
+
+  if (height + activeStatBoardPosition.value.y > window.innerHeight) {
+    top = activeStatBoardPosition.value.y - height
+  }
+
+  return {
+    top: `${top + 10}px`,
+    left: `${left}px`,
+    width: `${width}px`
+  }
+})
+
 const renderChart = async () => {
   if (!graph.value || !canvas.value) {
     return
@@ -46,19 +70,16 @@ const renderChart = async () => {
       options: {
         tooltip: (data, _, mouse) => {
           if (data === null) {
-            emit('hide')
+            activeStatBoard.value = undefined
           } else {
-            emit('hover', {
-              id: data.data.id,
-              parent: data.data.parent,
-              callee: data.data.source.name,
-              caller: '',
+            activeStatBoard.value = {
               cost: data.data.source.cost,
-              position: {
-                x: mouse?.x ? mouse.x + 20 : 0,
-                y: mouse?.y ? mouse.y - 20 : 0
-              }
-            })
+              title: data.data.source.name
+            }
+            activeStatBoardPosition.value = {
+              x: mouse?.x ? mouse.x + 20 : 0,
+              y: mouse?.y ? mouse.y - 20 : 0
+            }
           }
         }
       }
@@ -88,7 +109,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  emit('hide')
+  activeStatBoard.value = undefined
 })
 </script>
 
@@ -97,6 +118,14 @@ onBeforeUnmount(() => {
     <div ref="graph" class="flame-graph">
       <canvas ref="canvas" class="flame-graph__canvas" />
     </div>
+
+    <CallStatBoard
+      v-if="activeStatBoard?.cost"
+      class="profiler-page__hover-edge"
+      :title="activeStatBoard.title || ''"
+      :cost="activeStatBoard.cost as StatBoardCost"
+      :style="activeStatBoardStyle"
+    />
   </div>
 </template>
 
@@ -114,4 +143,8 @@ onBeforeUnmount(() => {
 .flame-graph__canvas {
   @apply w-full h-full bg-white pt-3;
 }
+
+.profiler-page__hover-edge {
+  @apply absolute z-10 h-auto;
+}
 </style>
diff --git a/src/entities/profiler/ui/index.ts b/src/entities/profiler/ui/index.ts
index cd6e0d9d..e921ff7d 100644
--- a/src/entities/profiler/ui/index.ts
+++ b/src/entities/profiler/ui/index.ts
@@ -1,3 +1,2 @@
 export * from './preview-card'
-export * from './render-graph'
 export * from './profiler-page'
diff --git a/src/entities/profiler/ui/profiler-page/profiler-page.vue b/src/entities/profiler/ui/profiler-page/profiler-page.vue
index 37e34b1f..51a5c29f 100644
--- a/src/entities/profiler/ui/profiler-page/profiler-page.vue
+++ b/src/entities/profiler/ui/profiler-page/profiler-page.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { Tabs, Tab } from 'vue3-tabs-component'
 import type { NormalizedEvent } from '@/shared/types'
-import type { Profiler, ProfilerEdge, CallStackHoverData } from '../../types'
+import type { Profiler } from '../../types'
 import { CallGraph } from '../call-graph'
-import { CallStatBoard } from '../call-stat-board'
 import { FlameGraph } from '../flame-graph'
 import { TopFunctions } from '../top-functions'
 
@@ -14,53 +13,7 @@ type Props = {
 
 defineProps<Props>()
 
-const defaultPosition = { x: 0, y: 0 }
-
-const activeEdge = ref<ProfilerEdge | null>()
 const activeTab = ref('')
-const activeEdgePosition = ref(defaultPosition)
-
-const activeEdgeStyle = computed(() => {
-  const width = 750
-  const height = 150
-
-  let top = activeEdgePosition.value.y
-  let left = activeEdgePosition.value.x
-
-  if (width + activeEdgePosition.value.x > window.innerWidth - 80) {
-    const deltaX = width + activeEdgePosition.value.x - window.innerWidth + 100
-    left -= deltaX
-  }
-
-  if (height + activeEdgePosition.value.y > window.innerHeight) {
-    top = activeEdgePosition.value.y - height
-  }
-
-  return {
-    top: `${top + 10}px`,
-    left: `${left}px`,
-    width: `${width}px`
-  }
-})
-
-const clearActiveEdge = () => {
-  activeEdge.value = null
-  activeEdgePosition.value = defaultPosition
-}
-
-const setActiveEdge = (value: CallStackHoverData | undefined) => {
-  if (!value) {
-    clearActiveEdge()
-    return
-  }
-
-  const { position, ...edge } = value || {}
-
-  activeEdge.value = edge
-  activeEdgePosition.value = position
-
-  return
-}
 
 const tabChange = (selectedTab: { tab: { name: string } }) => {
   activeTab.value = selectedTab.tab.name
@@ -77,6 +30,7 @@ const tabChange = (selectedTab: { tab: { name: string } }) => {
               <CallGraph
                 v-if="activeTab === 'Call graph'"
                 :id="event.id"
+                :key="activeTab"
                 :payload="event.payload"
               />
             </Tab>
@@ -88,8 +42,6 @@ const tabChange = (selectedTab: { tab: { name: string } }) => {
                 :key="activeTab"
                 :data-key="activeTab"
                 :payload="event.payload"
-                @hover="setActiveEdge"
-                @hide="clearActiveEdge"
               />
             </Tab>
 
@@ -97,20 +49,13 @@ const tabChange = (selectedTab: { tab: { name: string } }) => {
               <TopFunctions
                 v-if="activeTab === 'Top functions'"
                 :id="event.id"
+                :key="activeTab"
                 :payload="event.payload"
               />
             </Tab>
           </Tabs>
         </section>
       </div>
-
-      <CallStatBoard
-        v-if="activeEdge"
-        class="profiler-page__hover-edge"
-        :title="activeEdge.callee"
-        :cost="activeEdge.cost"
-        :style="activeEdgeStyle"
-      />
     </main>
   </div>
 </template>
@@ -143,8 +88,4 @@ const tabChange = (selectedTab: { tab: { name: string } }) => {
 .profiler-page__stat-tabs .tabs-component-panel {
   @apply h-full;
 }
-
-.profiler-page__hover-edge {
-  @apply absolute z-10 h-auto;
-}
 </style>
diff --git a/src/entities/profiler/ui/render-graph/render-graph.vue b/src/entities/profiler/ui/render-graph/render-graph.vue
index 5857ab3f..2e0b2c7f 100644
--- a/src/entities/profiler/ui/render-graph/render-graph.vue
+++ b/src/entities/profiler/ui/render-graph/render-graph.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { ElementsDefinition } from 'cytoscape'
+import type { ElementsDefinition, NodeDataDefinition } from 'cytoscape'
 import { defineProps, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useCytoscape } from '../../lib'
-import type { ProfilerEdge } from '../../types'
+import type { CallStackHoverData } from '../../types'
 
 type Props = {
   elements: ElementsDefinition
@@ -11,7 +11,7 @@ type Props = {
 
 const props = defineProps<Props>()
 
-const hoverNodeData = ref<ProfilerEdge>()
+const activeStatBoard = ref<CallStackHoverData>()
 const tooltipPosition = ref<{ top: string; left: string } | undefined>()
 const destroyFn = ref()
 
@@ -19,22 +19,17 @@ const renderer = ref<HTMLElement>()
 const parent = ref<HTMLElement>()
 const tooltip = ref<HTMLElement>()
 
-const onNodeHover = (edge?: ProfilerEdge, event?: MouseEvent) => {
-  if (!edge || !event) {
-    hoverNodeData.value = undefined
+const onNodeHover = (data?: NodeDataDefinition, event?: MouseEvent) => {
+  if (!data || !event) {
+    activeStatBoard.value = undefined
     tooltipPosition.value = undefined
 
     return
   }
 
-  const { id, callee, cost, caller, parent } = edge
-
-  hoverNodeData.value = {
-    id,
-    callee,
-    cost,
-    caller,
-    parent
+  activeStatBoard.value = {
+    title: data.name,
+    cost: data.cost
   }
 
   const x = event.offsetX
@@ -86,13 +81,13 @@ onBeforeUnmount(() => {
   <div
     ref="tooltip"
     class="render-graph__tooltip"
-    :class="{ 'render-graph__tooltip--active': hoverNodeData }"
+    :class="{ 'render-graph__tooltip--active': activeStatBoard }"
     :style="tooltipPosition"
   >
-    <div v-if="hoverNodeData">
-      <slot :data="hoverNodeData">
+    <div v-if="activeStatBoard">
+      <slot :data="activeStatBoard">
         <h4 class="render-graph__tooltip-title">
-          {{ hoverNodeData }}
+          {{ activeStatBoard }}
         </h4>
       </slot>
     </div>