fix ts errors for profiler call-stat-board

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", () => {

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>}

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>
 

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>

src/entities/profiler/ui/index.ts

@@ -1,3 +1,2 @@
 export * from './preview-card'
-export * from './render-graph'
 export * from './profiler-page'

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,29 +42,20 @@ const tabChange = (selectedTab: { tab: { name: string } }) => {
                 :key="activeTab"
                 :data-key="activeTab"
                 :payload="event.payload"
-                @hover="setActiveEdge"
-                @hide="clearActiveEdge"
               />
             </Tab>
 
             <Tab name="Top functions">
               <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>