Add "Copy as markdown" button (#665)

Adds a "Copy as markdown" button for easier export to LLMs. Example
output:

```md

**Old:** main (`d0a96f157601484683a809d1a87ee89270dbac96`)
**New:** `d360c0d4c9be11184254990b3fa53c4e562b01b4`

---

| Metric | main | d360c0d4c9be11184254990b3fa53c4e562b01b4 | P | Delta |
|---|---|---|---|---|
| QPS Total | 22771.24 (±2.4%) | 22483.63 (±3.7%) | 0.011 | -1.263% |
| Reads | 15938.69 (±2.4%) | 15737.51 (±3.7%) | 0.011 | -1.262% |
| Writes | 4555.22 (±2.4%) | 4497.49 (±3.7%) | 0.015 | -1.267% |
| Other | 2277.34 (±2.4%) | 2248.62 (±3.7%) | 0.009 | -1.261% |
| TPS | 1139.02 (±2.4%) | 1124.65 (±3.7%) | 0.010 | -1.261% |
| P95 Latency | 43.39ms (±1.8%) | 43.78ms (±2.7%) | 0.252 | 0.899% |
| Errors / Second | 0 (±0%) | 0 (±0%) | 1.000 | 0% |
| Total CPU / Query | 0μs (±0%) | 1389.18μs (±7.1%) | 0.000 | 0% |
| vtgate | 0μs (±0%) | 1016.17μs (±8.5%) | 0.000 | 0% |
| vttablet | 0μs (±0%) | 362.89μs (±8.6%) | 0.000 | 0% |
| Total Allocated / Query | 0B (±0%) | 39.11KB (±6.6%) | 0.000 | 0% |
| vtgate | 0B (±0%) | 29.72KB (±8.4%) | 0.000 | 0% |
| vttablet | 0B (±0%) | 9.38KB (±8.6%) | 0.000 | 0% |

| Metric | main | d360c0d4c9be11184254990b3fa53c4e562b01b4 | P | Delta |
|---|---|---|---|---|
| QPS Total | 22474.72 (±2.0%) | 21757.57 (±2.3%) | 0.000 | -3.191% |
| Reads | 15731.63 (±2.0%) | 15229.33 (±2.3%) | 0.000 | -3.193% |
| Writes | 4495.45 (±2.0%) | 4352.31 (±2.3%) | 0.000 | -3.184% |
| Other | 2247.64 (±2.0%) | 2175.93 (±2.3%) | 0.000 | -3.190% |
| TPS | 1124.17 (±2.0%) | 1088.32 (±2.3%) | 0.000 | -3.189% |
| P95 Latency | 43.78ms (±2.7%) | 44.98ms (±1.8%) | 0.000 | 2.741% |
| Errors / Second | 0 (±0%) | 0 (±0%) | 1.000 | 0% |
| Total CPU / Query | 1300.78μs (±8.4%) | 1391.36μs (±7.5%) | 0.009 | 6.964% |
| vtgate | 921.04μs (±11.1%) | 994.68μs (±7.6%) | 0.009 | 7.996% |
| vttablet | 379.67μs (±7.7%) | 392.15μs (±16.8%) | 0.353 | 3.286% |
| Total Allocated / Query | 35.83KB (±8.7%) | 39.54KB (±6.0%) | 0.000 | 10.369% |
| vtgate | 25.67KB (±11.7%) | 29.4KB (±6.0%) | 0.000 | 14.543% |
| vttablet | 10.22KB (±8.5%) | 10.04KB (±17.7%) | 0.436 | -1.758% |

| Metric | main | d360c0d4c9be11184254990b3fa53c4e562b01b4 | P | Delta |
|---|---|---|---|---|
| QPS Total | 4566.71 (±3.4%) | 3263.05 (±9.3%) | 0.000 | -28.547% |
| Reads | 2082.17 (±3.4%) | 1503.63 (±9.2%) | 0.000 | -27.786% |
| Writes | 2159.06 (±3.3%) | 1494.38 (±9.6%) | 0.000 | -30.786% |
| Other | 325.48 (±4.0%) | 265.05 (±10.0%) | 0.000 | -18.566% |
| TPS | 163.09 (±4.0%) | 116.00 (±9.8%) | 0.000 | -28.868% |
| P95 Latency | 861.95ms (±5.6%) | 969.02ms (±4.6%) | 0.000 | 12.422% |
| Errors / Second | 0.66 (±13.0%) | 0.99 (±20.2%) | 0.000 | 51.145% |
| Total CPU / Query | 3183.13μs (±5.3%) | 2047.19μs (±10.8%) | 0.000 | -35.686% |
| vtgate | 1587.05μs (±3.7%) | 1083.38μs (±3.4%) | 0.000 | -31.736% |
| vttablet | 1592.24μs (±13.6%) | 938.23μs (±20.2%) | 0.000 | -41.075% |
| Total Allocated / Query | 119.05KB (±3.3%) | 74.65KB (±7.0%) | 0.000 | -37.292% |
| vtgate | 83.32KB (±2.4%) | 52.48KB (±5.6%) | 0.000 | -37.015% |
| vttablet | 36.24KB (±4.0%) | 23.13KB (±7.3%) | 0.000 | -36.164% |
```

Signed-off-by: Mohamed Hamza <mhamza@fastmail.com>

Author: mhamza15

website/src/common/MacroBenchmarkTable.tsx

@@ -105,7 +105,7 @@ const getDeltaBadgeVariant = (key: string, delta: number, p: number) => {
   return "destructive";
 };
 
-const formatCellValue = (key: string, value: number) => {
+export const formatCellValue = (key: string, value: number) => {
   if (key.includes("CpuTime")) {
     return secondToMicrosecond(value);
   } else if (key.includes("MemStatsAllocBytes")) {

website/src/pages/ComparePage/ComparePage.tsx

@@ -14,22 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MacroBenchmarkTable from "@/common/MacroBenchmarkTable";
+import MacroBenchmarkTable, { formatCellValue, getRange } from "@/common/MacroBenchmarkTable";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import useApiCall from "@/hooks/useApiCall";
 import { CompareData, MacroBenchmarkTableData, VitessRefs } from "@/types";
 import {
   errorApi,
+  fixed,
   formatCompareData,
   getGitRefFromRefName,
   getRefName,
 } from "@/utils/Utils";
 import { PlusCircledIcon } from "@radix-ui/react-icons";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import CompareHero from "./components/CompareHero";
+import { Copy, Check } from "lucide-react";
 
 export default function Compare() {
   const navigate = useNavigate();
@@ -81,11 +83,84 @@ export default function Compare() {
   }, [gitRef.old, gitRef.new, vitessRefs]);
 
   let formattedData: MacroBenchmarkTableData[] = [];
-
   if (data !== undefined && data.length > 0) {
     formattedData = formatCompareData(data);
   }
 
+  const [copied, setCopied] = useState(false);
+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Generates a markdown summary of all workload comparison tables.
+  const generateCompareMarkdown = (): string => {
+    if (!data || data.length === 0) return "";
+    const oldName = vitessRefs
+      ? getRefName(gitRef.old, vitessRefs)
+      : gitRef.old;
+    const newName = vitessRefs
+      ? getRefName(gitRef.new, vitessRefs)
+      : gitRef.new;
+    const lines: string[] = [];
+
+    lines.push("# arewefastyet - Vitess benchmark comparison");
+    lines.push("");
+    const formatRef = (name: string, hash: string): string => {
+      if (name !== hash) {
+        return `${name} (\`${hash}\`)`;
+      }
+      return `\`${hash}\``;
+    };
+    lines.push(`**Old:** ${formatRef(oldName, gitOldRef)}`);
+    lines.push(`**New:** ${formatRef(newName, gitNewRef)}`);
+    lines.push("");
+    lines.push("---");
+    lines.push("");
+    // Per-workload tables.
+    data.forEach((macro, index) => {
+      if (macro.result.missing_results) return;
+      const tableData = formattedData[index];
+      if (!tableData) return;
+      lines.push(`## ${macro.workload}`);
+      lines.push("");
+      lines.push(
+        `| Metric | ${oldName} | ${newName} | P | Delta |`
+      );
+      lines.push(`|---|---|---|---|---|`);
+      const dataKeys = Object.keys(
+        tableData
+      ) as Array<keyof MacroBenchmarkTableData>;
+      dataKeys.forEach((key) => {
+        const row = tableData[key];
+        const oldVal = `${formatCellValue(key, Number(row.old.center))} (${getRange(row.old.range)})`;
+        const newVal = `${formatCellValue(key, Number(row.new.center))} (${getRange(row.new.range)})`;
+        const p = fixed(row.p, 3);
+        const delta = `${fixed(row.delta, 3)}%`;
+        lines.push(
+          `| ${row.title} | ${oldVal} | ${newVal} | ${p} | ${delta} |`
+        );
+      });
+
+      lines.push("");
+    });
+    return lines.join("\n");
+  };
+
+  const handleCopyMarkdown = async () => {
+    const markdown = generateCompareMarkdown();
+
+    try {
+      await navigator.clipboard.writeText(markdown);
+      setCopied(true);
+
+      if (copiedTimerRef.current) {
+        clearTimeout(copiedTimerRef.current);
+      }
+
+      copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy markdown to clipboard:", err);
+    }
+  };
+
   return (
     <>
       <CompareHero
@@ -118,6 +193,21 @@ export default function Compare() {
         )}
         {!isMacrobenchLoading && data !== undefined && data.length > 0 && (
           <>
+            <div className="flex justify-end w-[80vw] xl:w-[60vw] mt-8">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 border-dashed"
+                onClick={handleCopyMarkdown}
+              >
+                {copied ? (
+                  <Check className="mr-2 h-4 w-4 text-primary" />
+                ) : (
+                  <Copy className="mr-2 h-4 w-4 text-primary" />
+                )}
+                {copied ? "Copied!" : "Copy as markdown"}
+              </Button>
+            </div>
             {data.map((macro, index) => {
               return (
                 <div className="w-[80vw] xl:w-[60vw] my-12" key={index}>