Improve UI and add flamegraph availability tracking

- Add has_flamegraph field to track flamegraph availability in diff tables
- Show flamegraph button only when flamegraph data is actually available
- Display environment identifier in binary detail cards for better debugging
- Fix API base URL in docker-compose.dev.yml to include /api prefix
- Improve layout and styling of environment cards

Author: pablogsal

backend/app/routers/benchmarks.py

@@ -122,6 +122,7 @@ async def get_diff_table(
             "metric_key": metric_key,
             "curr_python_version_str": f"{selected_commit.python_major}.{selected_commit.python_minor}.{selected_commit.python_patch}",
             "curr_result_id": result.id,
+            "has_flamegraph": result.flamegraph_html is not None,
         }
 
         # Try to find previous commit's data for comparison

backend/app/schemas.py

@@ -140,6 +140,7 @@ class DiffTableRow(BaseModel):
     prev_python_version_str: Optional[str] = None
     curr_python_version_str: str
     curr_result_id: str
+    has_flamegraph: bool = False
 
 
 class PythonVersionFilterOption(BaseModel):

docker-compose.dev.yml

@@ -42,7 +42,7 @@ services:
     image: node:20-alpine
     working_dir: /app
     environment:
-      NEXT_PUBLIC_API_BASE: http://localhost:8000
+      NEXT_PUBLIC_API_BASE: http://localhost:8000/api
     ports:
       - "9002:9002"
     depends_on:

frontend/src/app/binaries/[id]/page.tsx

@@ -98,11 +98,16 @@ function EnvironmentCard({
               )}
             </div>
           </div>
-          <div className="flex items-center gap-2">
-            <Badge variant="secondary">
-              {environment.commit_count} commits
-            </Badge>
-            <Badge variant="outline">{environment.run_count} runs</Badge>
+          <div className="flex flex-col items-end gap-2">
+            <div className="text-xs text-muted-foreground font-mono">
+              Identifier: {environment.id}
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant="secondary">
+                {environment.commit_count} commits
+              </Badge>
+              <Badge variant="outline">{environment.run_count} runs</Badge>
+            </div>
           </div>
         </div>
       </CardHeader>

frontend/src/app/diff/page.tsx

@@ -74,6 +74,7 @@ interface EnhancedDiffTableRow {
 
   // Result ID for flamegraph
   curr_result_id?: string;
+  has_flamegraph?: boolean;
 }
 import CommitTooltipContent from '@/components/diff/CommitTooltipContent';
 
@@ -348,6 +349,7 @@ function DiffTableContent() {
               curr_python_version_str: baseRow.curr_python_version_str,
               prev_python_version_str: baseRow.prev_python_version_str,
               curr_result_id: baseRow.curr_result_id,
+              has_flamegraph: baseRow.has_flamegraph,
 
               // High watermark data
               high_watermark_curr: hwRow?.curr_metric_value || 0,
@@ -1177,7 +1179,7 @@ function DiffTableContent() {
                           {row.total_allocated_curr.toLocaleString()}
                         </TableCell>
                         <TableCell className="text-center">
-                          {row.curr_result_id ? (
+                          {row.curr_result_id && row.has_flamegraph ? (
                             <Button
                               variant="outline"
                               size="sm"

frontend/src/lib/types.ts

@@ -67,6 +67,7 @@ export type DiffTableRow = {
   prev_python_version_str?: string;
   curr_python_version_str: string;
   curr_result_id: string;
+  has_flamegraph?: boolean;
 };
 
 export type AuthToken = {