Merge pull request #52 from buggregator/issue/#33-improve-callgraph

Issue/#33 improve callgraph usability

Author: butschster

components/ProfilerPage/ProfilerPage.vue

@@ -3,7 +3,7 @@
     <div class="profiler-page__head"></div>
     <main class="profiler-page__main">
       <section ref="calls" class="profiler-page__callstack">
-        <PerfectScrollbar :style="{ height: '100vh' }">
+        <PerfectScrollbar :style="{ height: 'calc(100vh - 48px)' }">
           <ProfilerPageCallStack
             :event="event.payload"
             @hover="setActiveEdge"
@@ -165,7 +165,7 @@ export default defineComponent({
 }
 
 .profiler-page__stat {
-  @apply w-full flex flex-col md:w-4/5 divide-y divide-gray-300 dark:divide-gray-500;
+  @apply w-full flex flex-col divide-y divide-gray-300 dark:divide-gray-500;
 }
 
 .profiler-page__stat-board {

components/ProfilerPageCallGraph/ProfilerPageCallGraph.vue

@@ -7,6 +7,7 @@
     <RenderGraph
       v-if="isReadyGraph && graphKey"
       :key="graphKey"
+      class="profiler-page-call-graph__graph"
       :elements="graphElements"
       :height="graphHeight"
     >
@@ -134,7 +135,11 @@ export default defineComponent({
 @import "assets/mixins";
 
 .profiler-page-call-graph {
-  @apply relative flex rounded border border-gray-900 min-h-min min-w-min;
+  @apply relative flex rounded border border-gray-900 min-h-min min-w-min h-full;
+}
+
+.profiler-page-call-graph__graph {
+  @apply w-full h-full flex;
 }
 
 .profiler-page-call-graph--fullscreen {

components/RenderGraph/RenderGraph.vue

@@ -88,6 +88,7 @@ export default defineComponent({
   mounted() {
     const cy: Cytoscape = cytoscape({
       container: this.$refs.renderer as HTMLElement,
+      wheelSensitivity: 0.4,
       elements: this.elements,
       layout: {
         name: "dagre",