tweak graph style

api/app.py

@@ -32,7 +32,7 @@ def flame_graph_get(key: str):
     return Response(content=data, media_type="image/svg+xml")
 
 @app.post("/flame_graph")
-def flame_graph(file: bytes = File(...)):
+def flame_graph(file: bytes = File(...), width: int = 1200):
     key = str(uuid.uuid4())
     temp = "/dev/shm/fg_%s.bin" % key
     with open(temp, "wb") as f:
@@ -51,7 +51,8 @@ def flame_graph(file: bytes = File(...)):
         )
 
         p3 = Popen(
-            ["perl", "flamegraph.pl"],
+            ["perl", "flamegraph.pl", "--bgcolors", "#FFFFFF",
+             "--fontsize", "10", "--fonttype", "monospace", "--width", str(width), "--title", " "],
             cwd="./FlameGraph",
             stdin=PIPE, stdout=PIPE, stderr=PIPE
         )

toolbox-web/src/components/FlameGraph.vue

@@ -1,8 +1,10 @@
 <template>
-  <v-container>
+  <v-container id="flamegraph-container">
 
     <p>Run with <code>perf record -F997 --call-graph dwarf -q &lt;program&gt;</code></p>
 
+    <p>You can also upload the file manually with <code>curl -s -XPOST {{apiUrl}}/flame_graph -F "file=@perf.data" | jq -r .key | xargs printf "{{apiUrl}}/flame_graph/%s\n" $1</code></p>
+
     <v-file-input :loading="loading" label="perf.data" id="flamegraph-upload" @change="onUpload()"></v-file-input>
 
     <object v-if="key" type="image/svg+xml" :data="getGraphUrl()"></object>
@@ -25,6 +27,7 @@ export default class FlameGraph extends Vue {
   public tool = toolByName('FlameGraph')
   public key: string | null = null
   public loading = false
+  public apiUrl = API_URL
 
   getGraphUrl() {
     return `${API_URL}/flame_graph/${this.key}`
@@ -39,6 +42,9 @@ export default class FlameGraph extends Vue {
     axios.post('http://localhost:8000/flame_graph', formData, {
       headers: {
         'Content-Type': 'multipart/form-data'
+      },
+      params: {
+        width: document.getElementById("flamegraph-container")?.offsetWidth.toString()
       }
     }).then(resp => {
       const result = resp.data as FlameGraphResult