Merge pull request #241 from parca-dev/binary-based-color-stack

doc: Adding doc on flamegraph's binary-based colour stack

Author: yomete

docs/flamegraph-binary-based-colour-stack.mdx

@@ -0,0 +1,40 @@
+# Binary-based Color Stack
+
+import BrowserWindow from '@site/src/components/BrowserWindow';
+
+For quick troubleshooting, you can use the binary-based color stack mode to quickly identify the most expensive binaries in the rendered flamegraph. In binary-based color stack mode, the colour of a node in the flamegraph is based on the
+binary that the function belongs to. This way, you can quickly identify the most expensive binaries in the given profile.
+
+### How to use it
+Open the User Preferences dialog by clicking the gear icon in the top-right corner of the UI.
+
+<BrowserWindow>
+
+![User Preferences Option](../static/img/parca/user-preferences-icon.png)
+</BrowserWindow>
+<br />
+
+In the User Preferences dialog, select your preferred color profile in the `Flamegraph Color Profile` section and click `Close`.
+
+
+<BrowserWindow>
+
+![Color Profile Selection](../static/img/parca/color-profile-selection.gif)
+
+</BrowserWindow>
+<br />
+
+:::tip
+You can always switch back to the `Default` color profile to disable the binary-based color stack mode.
+:::
+
+<br />
+
+You can also click on the `Binary` names at the top to highlight the nodes corresponding to that binary in the flamegraph.
+
+<BrowserWindow>
+
+![Highlighting Nodes From a Binary](../static/img/parca/highlighting-nodes-from-binary.png)
+
+</BrowserWindow>
+<br />

sidebars.js

@@ -41,6 +41,17 @@ module.exports = {
         },
         "observability",
         "configuration",
+        {
+          type: "category",
+          label: "Profile Visualization",
+          items: [
+            {
+              type: "category",
+              label: "Flamegraph",
+              items: ["flamegraph-binary-based-colour-stack"],
+            },
+          ],
+        },
       ],
     },
     {