[DEV] Updated Analysis with Tooltip (#24)

examples/vec_add.py

@@ -123,8 +123,6 @@ def test_out_of_bounds_add():
     assert (result_original_masks == expected_original_masks).all()
     assert (result_valid_masks == expected_valid_masks).all()
     assert (result_invalid_masks == expected_invalid_masks).all()
-    # Not sure what this test is checking?
-    # assert (result_invalid_masks == expected_invalid_masks).all()
 
 
 if __name__ == "__main__":

triton_viz/analysis.py

@@ -44,6 +44,8 @@ def analyze_records():
     )
     data = [["Grid Size", tuple(grid_size)]]
     data += [[op_type, count] for op_type, count in op_type_counts.items()]
-    data.append(["Masked Load Ratio", overall_load_ratio])
-    data.append(["Masked Store Ratio", overall_store_ratio])
+    data.append(["Total number of bytes loaded", total_load_bytes_true])
+    data.append(["Masked Load Ratio", round(overall_load_ratio, 3)])
+    data.append(["Total number of bytes stored", total_store_bytes_true])
+    data.append(["Masked Store Ratio", round(overall_store_ratio, 3)])
     return data

triton_viz/interface.py

@@ -2,6 +2,7 @@
 import triton_viz
 import tempfile
 from .analysis import analyze_records
+from .tooltip import create_tooltip
 import pandas as pd
 
 
@@ -38,10 +39,10 @@ def launch(share=True):
                 s2 = gr.Slider(0, m[1] - 1, value=0, step=1, label="Program Id 1")
                 s3 = gr.Slider(0, m[2] - 1, value=0, step=1, label="Program Id 2")
                 b1 = gr.Button("Precompute")
-                # gr.Markdown(f"## Program Ids: {tuple(m)}")
-                df = pd.DataFrame(analysis_data, columns=["Metric", "Value"])
                 gr.Markdown("## Analysis")
-                gr.Dataframe(df)
+                df = pd.DataFrame(analysis_data, columns=["Metric", "Value"])
+                analysis_with_tooltip = create_tooltip(df)
+                gr.HTML(analysis_with_tooltip)
                 if failures:
                     gr.Markdown(
                         show_label=False,

triton_viz/tooltip.py

@@ -0,0 +1,78 @@
+tooltip_descriptions = {
+    "Grid Size": "Indicates the grid size used in the kernel launch.",
+    "BinaryOp": "Shows the total number of binary operations performed in this kernel.",
+    "MakeRange": "Shows the total number of arange operations performed in this kernel.",
+    "Load": "Shows the total number of load operations performed in this kernel.",
+    "Store": "Shows the total number of store operations performed in this kernel.",
+    "ExpandDims": "Shows the total number of expand_dims operations performed in this kernel.",
+    "Dot": "Shows the total number of dot operations performed in this kernel.",
+    "Reduce": "Shows the total number of reduce operations performed in this kernel.",
+    "Total number of bytes loaded": "Shows the total number of bytes loaded (mask=True).Note:On GPUs, this metric does not equate to the total number of bytes loaded from global memory (DRAM), as some data accesses may be handled through GPU caches.",
+    "Masked Load Ratio": "Ratio of total number of bytes loaded (mask=True)/total number of bytes loaded (mask=True) + (mask=False).",
+    "Total number of bytes stored": "Shows the total number of bytes stored (mask=True).",
+    "Masked Store Ratio": "Ratio of total number of bytes stored (mask=True)/total number of bytes stored (mask=True) + (mask=False).",
+}
+
+
+def create_tooltip(df):
+    styles = """
+    <style>
+        .dataframe {
+            width: 100%;
+            border-collapse: collapse;
+            margin: auto;
+        }
+        .dataframe th {
+            color: white !important;
+            background-image: linear-gradient(to right, #434343, #757575); !important;
+        }
+        .dataframe td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        .tooltip {
+            position: relative;
+            display: block;
+        }
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 100%;
+            background-color: #555;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px;
+            position: absolute;
+            z-index: 100;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+        .gradio_container, .gradio_container * {
+            overflow: visible !important;
+        }
+    </style>
+    """
+
+    html = styles + '<table class="dataframe"><thead><tr>'
+    for col in df.columns:
+        html += f"<th>{col}</th>"
+    html += "</tr></thead><tbody>"
+
+    for index, row in df.iterrows():
+        tooltip_text = tooltip_descriptions.get(
+            row["Metric"], "No description available."
+        )
+        html += f'<tr><td class="tooltip">{row["Metric"]}<span class="tooltiptext">{tooltip_text}</span></td>'
+        html += f'<td>{row["Value"]}</td></tr>'
+
+    html += "</tbody></table>"
+
+    return html