[#37] fix errors and types in profiler call-graph

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

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>

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,30 +30,35 @@ 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
   ? window.innerHeight
   : (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>

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>();

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: [];
 };
 

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

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 }[],
-}

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

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;