Merge pull request #53 from buggregator/hotifx/callgraph-styles

Improvements for the issue #33

Author: butschster

components/ProfilerPageCallGraph/ProfilerPageCallGraph.vue

@@ -56,14 +56,15 @@
       class="profiler-page-call-graph__toolbar profiler-page-call-graph__toolbar--right"
     >
       <label class="profiler-page-call-graph__toolbar-input-wr">
-        Threshold:
+        Threshold
 
         <input
           class="profiler-page-call-graph__toolbar-input"
           type="number"
           :value="threshold"
           :min="0"
-          :max="100"
+          :max="10"
+          :step="0.1"
           @input="setThreshold($event.target.value)"
         />
       </label>
@@ -155,11 +156,11 @@ export default defineComponent({
 }
 
 .profiler-page-call-graph__toolbar {
-  @apply absolute top-5 left-5 flex bg-gray-200 p-2 rounded gap-x-5;
+  @apply absolute top-5 left-5 flex bg-gray-200 p-2 rounded gap-x-5 shadow-lg;
 }
 
 .profiler-page-call-graph__toolbar--right {
-  @apply right-5 left-auto;
+  @apply right-5 left-auto py-1;
 }
 
 .profiler-page-call-graph__toolbar-icon {
@@ -175,6 +176,6 @@ export default defineComponent({
 }
 
 .profiler-page-call-graph__toolbar-input {
-  @apply border-b bg-transparent border-gray-600 text-gray-600 w-8;
+  @apply border-gray-600 text-gray-600 w-10 font-bold text-right bg-gray-300 ml-1 py-1 rounded;
 }
 </style>

components/RenderGraph/RenderGraph.vue

@@ -45,24 +45,26 @@ const stylesConfig: Stylesheet[] = [
       "text-wrap": "wrap",
       width: "label",
       height: "label",
-      "border-width": "1px",
-      "border-color": "#333",
+      "border-width": "2px",
+      "border-color": "#000",
     },
   },
   {
     selector: "edge",
     style: {
       "line-color": "data(color)",
       "background-color": "data(color)",
-      "text-outline-width": "5px",
-      width: 1.5,
+      "text-outline-width": "2px",
+      width: 2,
       height: "label",
       "target-arrow-shape": "triangle",
       "target-arrow-color": "data(color)",
       content: "data(label)",
       color: "#fff",
-      "curve-style": "bezier",
-      "loop-direction": "90deg",
+      "curve-style": "taxi",
+      "taxi-direction": "downward",
+      "edge-distances": "node-position",
+      "control-point-distance": "5px",
     },
   },
 ];
@@ -94,7 +96,7 @@ export default defineComponent({
         name: "dagre",
         nodeSep: 10,
         edgeSep: 10,
-        rankSep: 50,
+        rankSep: 80,
         rankDir: "TB",
       } as DagreLayoutOptions,
       style: stylesConfig,
@@ -113,8 +115,6 @@ export default defineComponent({
       this.hoverNodeData = null;
     });
 
-    cy.nodes().ungrabify();
-
     this.renderer = cy;
   },
   beforeUnmount() {