From 55dd59010bb34b026046eb8f0aa1835aaad401af Mon Sep 17 00:00:00 2001
From: Andrei Kuchuk <kreezag@gmail.com>
Date: Sat, 6 Jul 2024 19:32:18 +0400
Subject: [PATCH] [#37] fix errors and types in profiler call-graph

---
 src/entities/profiler/types.ts                | 45 ++++++++++---
 src/screens/profiler/types.ts                 |  3 -
 .../call-graph-toolbar/call-graph-toolbar.vue | 28 +++++----
 .../profiler/ui/call-graph/call-graph.vue     | 63 ++++++-------------
 .../ui/call-stat-board/call-stat-board.vue    |  4 +-
 .../profiler/ui/flame-graph/flame-graph.vue   |  3 +-
 .../ui/profiler-page/profiler-page.vue        |  7 +--
 src/shared/types/partials.ts                  |  7 ---
 src/shared/ui/stat-board/stat-board.vue       |  2 +-
 src/widgets/ui/render-graph/render-graph.vue  |  9 +--
 10 files changed, 85 insertions(+), 86 deletions(-)
 delete mode 100644 src/screens/profiler/types.ts

diff --git a/src/entities/profiler/types.ts b/src/entities/profiler/types.ts
index f8b4cfa2..7424bf37 100644
--- a/src/entities/profiler/types.ts
+++ b/src/entities/profiler/types.ts
@@ -1,3 +1,5 @@
+import {GraphTypes, type Uuid} from "~/src/shared/types";
+
 export interface ProfilerCost {
   d_cpu: number;
   d_wt: number;
@@ -14,14 +16,6 @@ export interface ProfilerCost {
   p_wt: number;
 }
 
-export interface ProfilerEdge {
-  id: string,
-  parent: string | null,
-  caller: string | null,
-  callee: string,
-  cost: ProfilerCost
-}
-
 export interface Profiler {
   tags: {
     [key: string]: string | null | number
@@ -31,3 +25,38 @@ export interface Profiler {
   date: number,
   peaks: ProfilerCost,
 }
+
+export type TCallGraphEdge = {
+  data: {
+    color: string
+    label: string
+    source: string
+    target: string
+  }
+}
+
+export type TCallGraphNode = {
+  data: {
+    id: Uuid
+    color: string,
+    cost: Partial<ProfilerCost>
+    metrics: Partial<ProfilerCost>
+    name: string
+    textColor: string
+  }
+}
+
+export type TCallGraph = {
+  edges: TCallGraphEdge[],
+  nodes: TCallGraphNode[],
+  toolbar: { label: string; metric: GraphTypes; description: string }[],
+}
+
+
+export interface TCallGraphBoard {
+  edge: {
+    callee: string,
+    caller: string,
+    cost: Partial<ProfilerCost>,
+  }
+}
diff --git a/src/screens/profiler/types.ts b/src/screens/profiler/types.ts
deleted file mode 100644
index 9380eb46..00000000
--- a/src/screens/profiler/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { ProfilerEdge } from "~/src/entities/profiler/types";
-
-export type CallStackHoverData = ProfilerEdge & { position: { x: number; y: number } }
diff --git a/src/screens/profiler/ui/call-graph-toolbar/call-graph-toolbar.vue b/src/screens/profiler/ui/call-graph-toolbar/call-graph-toolbar.vue
index a979328e..7530f213 100644
--- a/src/screens/profiler/ui/call-graph-toolbar/call-graph-toolbar.vue
+++ b/src/screens/profiler/ui/call-graph-toolbar/call-graph-toolbar.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { GraphTypes, type TCallGraph } from '~/src/shared/types';
+import type {TCallGraph} from "~/src/entities/profiler/types";
+import { GraphTypes } from '~/src/shared/types';
 import { IconSvg } from '~/src/shared/ui';
 
 type Emits = {
-  changeMetric: [value: string];
+  changeMetric: [value: GraphTypes];
   fullscreen: [];
-  changeThreshold: [value: number];
-  changePercent: [value: string];
+  changeThreshold: [value?: number];
+  changePercent: [value?: number];
 };
 
 const emit = defineEmits<Emits>();
@@ -16,23 +17,26 @@ type Props = {
   toolbar: TCallGraph['toolbar'];
   isFullscreen: boolean;
   metric: GraphTypes;
-  threshold: number;
-  percent: number;
+  threshold?: number;
+  percent?: number;
 };
 
 const props = defineProps<Props>();
 
+const threshold = computed(() => props.threshold || '');
+const percent = computed(() => props.percent || '');
+
 const percentLabel = computed(() => (props.metric === GraphTypes.CALLS ? 'Min calls' : 'Percent'));
 
 const handleChangeThreshold = (event: Event) => {
-  emit('changeThreshold', parseFloat(
-    (event.target as HTMLInputElement)?.value ?? 0,
-  ));
+  emit('changeThreshold',
+    parseFloat((event.target as HTMLInputElement)?.value) || undefined,
+  );
 };
-const handleChangeMetric = (event: Event) => {
+const handlePercent = (event: Event) => {
   emit(
     'changePercent',
-    (event.target as HTMLInputElement)?.value ?? 0,
+    parseFloat((event.target as HTMLInputElement)?.value) || undefined,
   );
 };
 </script>
@@ -91,7 +95,7 @@ const handleChangeMetric = (event: Event) => {
           :min="metric === GraphTypes.CALLS ? 1 : 0"
           :max="metric === GraphTypes.CALLS ? 1000 : 100"
           :step="metric === GraphTypes.CALLS ? 10 : 5"
-          @input="handleChangeMetric"
+          @input="handlePercent"
         >
       </label>
     </div>
diff --git a/src/screens/profiler/ui/call-graph/call-graph.vue b/src/screens/profiler/ui/call-graph/call-graph.vue
index fd6499e9..362e0f27 100644
--- a/src/screens/profiler/ui/call-graph/call-graph.vue
+++ b/src/screens/profiler/ui/call-graph/call-graph.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, watchEffect } from 'vue';
+import { ref, computed, watchEffect } from 'vue';
 import { RenderGraph } from '~/src/widgets/ui';
-import type { Profiler } from '~/src/entities/profiler/types';
+import type {Profiler, TCallGraph} from '~/src/entities/profiler/types';
 import { REST_API_URL } from '~/src/shared/lib/io';
-import { GraphTypes, type TCallGraph } from '~/src/shared/types';
+import { GraphTypes } from '~/src/shared/types';
 import { CallStatBoard } from '../call-stat-board';
 import { CallGraphToolbar } from '~/src/screens/profiler/ui/call-graph-toolbar';
 
@@ -19,7 +19,7 @@ const percent = ref(10);
 
 const isReadyGraph = ref(false);
 const container = ref<HTMLElement>();
-const elements = ref<Omit<TCallGraph, 'toolbar'>>([]);
+const elements = ref<Omit<TCallGraph, 'toolbar'>>({ nodes: [], edges: [] });
 const toolbar = ref<TCallGraph['toolbar']>([]);
 
 const graphKey = computed(
@@ -30,12 +30,16 @@ const setMetric = (value: GraphTypes) => {
   metric.value = value;
 };
 
-const setThreshold = (value: number) => {
-  threshold.value = value;
+const setThreshold = (value?: number) => {
+  if (value || value === 0) {
+    threshold.value = value;
+  }
 };
 
-const setMinPercent = (value: number) => {
-  percent.value = value;
+const setMinPercent = (value?: number) => {
+  if (value || value === 0) {
+    percent.value = value;
+  }
 };
 
 const graphHeight = computed(() => (isFullscreen.value
@@ -43,17 +47,18 @@ const graphHeight = computed(() => (isFullscreen.value
   : (container.value as HTMLElement).offsetHeight));
 
 watchEffect(async () => {
-  const { toolbar: toolSettings, ...data }: TCallGraph = await fetch(`${REST_API_URL}/api/profiler/${props.payload.profile_uuid}/call-graph?threshold=${threshold.value}&percentage=${percent.value}&metric=${metric.value}`)
+  const { toolbar: toolSettings, ...data }: TCallGraph =
+    await fetch(
+      `${REST_API_URL}/api/profiler/${props.payload.profile_uuid}/call-graph?threshold=${threshold.value}&percentage=${percent.value}&metric=${metric.value}`
+    )
     .then((response) => response.json());
 
   elements.value = data || [];
   toolbar.value = toolSettings;
-});
 
-onMounted(() => {
-  // NOTE: need to show graph after parent render
   isReadyGraph.value = true;
 });
+
 </script>
 
 <template>
@@ -80,9 +85,9 @@ onMounted(() => {
       :threshold="threshold"
       :percent="percent"
       :is-fullscreen="isFullscreen"
-      @metric-change="setMetric"
-      @percent-change="setMinPercent"
-      @change-threshold-="setThreshold"
+      @change-metric="setMetric"
+      @change-percent="setMinPercent"
+      @change-threshold="setThreshold"
       @fullscreen="isFullscreen = !isFullscreen"
     />
   </div>
@@ -102,32 +107,4 @@ onMounted(() => {
 .call-graph--fullscreen {
   @apply rounded-none mt-0 top-0 left-0 fixed w-full h-full bg-gray-800 z-[99999];
 }
-
-.call-graph__toolbar {
-  @apply absolute top-5 left-5 flex bg-gray-200 p-2 rounded gap-x-5 shadow-lg;
-}
-
-.call-graph__toolbar--right {
-  @apply right-5 left-auto py-1;
-}
-
-.call-graph__toolbar-icon {
-  @apply w-4 h-4 fill-blue-500;
-}
-
-.call-graph__toolbar-action {
-  @apply text-xs uppercase text-gray-600;
-}
-
-.call-graph__toolbar-action--active {
-  @apply font-bold;
-}
-
-.call-graph__toolbar-input-wr {
-  @apply text-xs uppercase text-gray-600;
-}
-
-.call-graph__toolbar-input {
-  @apply border-gray-600 text-gray-600 w-10 font-bold text-right bg-gray-300 ml-1 py-1 rounded;
-}
 </style>
diff --git a/src/screens/profiler/ui/call-stat-board/call-stat-board.vue b/src/screens/profiler/ui/call-stat-board/call-stat-board.vue
index 6e021929..ecebb8ad 100644
--- a/src/screens/profiler/ui/call-stat-board/call-stat-board.vue
+++ b/src/screens/profiler/ui/call-stat-board/call-stat-board.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { defineProps } from 'vue';
-import type { ProfilerEdge } from '~/src/entities/profiler/types';
+import type { TCallGraphBoard } from '~/src/entities/profiler/types';
 import { StatBoard } from '~/src/shared/ui';
 
 type Props = {
-  edge: ProfilerEdge;
+  edge: TCallGraphBoard['edge'];
 };
 
 defineProps<Props>();
diff --git a/src/screens/profiler/ui/flame-graph/flame-graph.vue b/src/screens/profiler/ui/flame-graph/flame-graph.vue
index 9acbb7b4..e485115d 100644
--- a/src/screens/profiler/ui/flame-graph/flame-graph.vue
+++ b/src/screens/profiler/ui/flame-graph/flame-graph.vue
@@ -4,14 +4,13 @@ import debounce from 'lodash.debounce';
 import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
 import type { Profiler } from '~/src/entities/profiler/types';
 import { REST_API_URL } from '~/src/shared/lib/io';
-import type { CallStackHoverData } from '~/src/screens/profiler/types';
 
 type Props = {
   payload: Profiler;
 };
 
 type Emits = {
-  hover: [value: Omit<CallStackHoverData, 'id' | 'parent'>]; // TODO: need to define type
+  hover: [value: unknown]; // TODO: need to define type
   hide: [];
 };
 
diff --git a/src/screens/profiler/ui/profiler-page/profiler-page.vue b/src/screens/profiler/ui/profiler-page/profiler-page.vue
index 371358ad..577271b8 100644
--- a/src/screens/profiler/ui/profiler-page/profiler-page.vue
+++ b/src/screens/profiler/ui/profiler-page/profiler-page.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { Tabs, Tab } from 'vue3-tabs-component';
-import type { Profiler, ProfilerEdge } from '~/src/entities/profiler/types';
+import type { Profiler } from '~/src/entities/profiler/types';
 import type { NormalizedEvent } from '~/src/shared/types';
-import type { CallStackHoverData } from '../../types';
 import { CallGraph } from '../call-graph';
 import { CallStatBoard } from '../call-stat-board';
 import { FlameGraph } from '../flame-graph';
@@ -17,7 +16,7 @@ defineProps<Props>();
 
 const defaultPosition = { x: 0, y: 0 };
 
-const activeEdge = ref<ProfilerEdge | null>();
+const activeEdge = ref<unknown | null>();
 const activeTab = ref('');
 const activeEdgePosition = ref(defaultPosition);
 
@@ -44,7 +43,7 @@ const activeEdgeStyle = computed(() => {
   };
 });
 
-const setActiveEdge = (value: CallStackHoverData | undefined) => {
+const setActiveEdge = (value: unknown | undefined) => {
   if (value) {
     const { position, ...edge } = value || {};
 
diff --git a/src/shared/types/partials.ts b/src/shared/types/partials.ts
index 2f47e1a7..bd59cd85 100644
--- a/src/shared/types/partials.ts
+++ b/src/shared/types/partials.ts
@@ -1,4 +1,3 @@
-import type {EdgeDefinition, NodeDefinition} from "cytoscape";
 import type {Uuid} from "./events";
 
 export interface Source {
@@ -37,9 +36,3 @@ export enum TopFunctionsMetric {
   EXCLUSIVE_MEMORY = 'excl_mu',
   EXCLUSIVE_CALLS = 'excl_ct',
 }
-
-export type TCallGraph = {
-  edges: EdgeDefinition[],
-  nodes: NodeDefinition[],
-  toolbar: { label: string; metric: GraphTypes; description: string }[],
-}
diff --git a/src/shared/ui/stat-board/stat-board.vue b/src/shared/ui/stat-board/stat-board.vue
index 638c0cf0..b56cedce 100644
--- a/src/shared/ui/stat-board/stat-board.vue
+++ b/src/shared/ui/stat-board/stat-board.vue
@@ -6,7 +6,7 @@ import { useFormats } from '../../lib/formats';
 const { formatDuration, formatFileSize } = useFormats();
 
 type Props = {
-  cost: ProfilerCost;
+  cost: Partial<ProfilerCost>;
   size: 'sm' | 'md' | 'lg';
 };
 
diff --git a/src/widgets/ui/render-graph/render-graph.vue b/src/widgets/ui/render-graph/render-graph.vue
index 07d4195b..d4eb502d 100644
--- a/src/widgets/ui/render-graph/render-graph.vue
+++ b/src/widgets/ui/render-graph/render-graph.vue
@@ -1,19 +1,20 @@
 <script lang="ts" setup>
 // TODO: need to fix cytoscape console warnings
-import type { ElementsDefinition, NodeSingular } from 'cytoscape';
+import type { NodeSingular} from 'cytoscape';
 import {
   defineProps, onBeforeUnmount, onMounted, ref,
 } from 'vue';
 import { useCytoscape } from '~/src/features/lib/cytoscape';
+import type { TCallGraph, TCallGraphNode } from "~/src/entities/profiler/types";
 
 type Props = {
-  elements: ElementsDefinition;
+  elements: Omit<TCallGraph, 'toolbar'>;
   height: number;
 };
 
 const props = defineProps<Props>();
 
-const hoverNodeData = ref<unknown>();
+const hoverNodeData = ref<TCallGraphNode['data'] | undefined>();
 const tooltipPosition = ref<{ top: string; left: string } | undefined>();
 const destroyFn = ref();
 
@@ -29,7 +30,7 @@ const onNodeHover = (target?: NodeSingular, event?: MouseEvent) => {
     return;
   }
 
-  hoverNodeData.value = target.data();
+  hoverNodeData.value = target.data() as TCallGraphNode['data'];
 
   const x = event.offsetX;
   const y = event.offsetY;