Stacked bars for the versions

Author: matt-aitken

apps/webapp/app/components/primitives/charts/ChartRoot.tsx

@@ -40,6 +40,8 @@ export type ChartRootProps = {
   onViewAllLegendItems?: () => void;
   /** When true, constrains legend to max 50% height with scrolling */
   legendScrollable?: boolean;
+  /** Additional className for the legend */
+  legendClassName?: string;
   /** When true, chart fills its parent container height and distributes space between chart and legend */
   fillContainer?: boolean;
   /** Content rendered between the chart and the legend */
@@ -87,6 +89,7 @@ export function ChartRoot({
   legendValueFormatter,
   onViewAllLegendItems,
   legendScrollable = false,
+  legendClassName,
   fillContainer = false,
   beforeLegend,
   children,
@@ -114,6 +117,7 @@ export function ChartRoot({
         legendValueFormatter={legendValueFormatter}
         onViewAllLegendItems={onViewAllLegendItems}
         legendScrollable={legendScrollable}
+        legendClassName={legendClassName}
         fillContainer={fillContainer}
         beforeLegend={beforeLegend}
       >
@@ -133,6 +137,7 @@ type ChartRootInnerProps = {
   legendValueFormatter?: (value: number) => string;
   onViewAllLegendItems?: () => void;
   legendScrollable?: boolean;
+  legendClassName?: string;
   fillContainer?: boolean;
   beforeLegend?: React.ReactNode;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
@@ -148,6 +153,7 @@ function ChartRootInner({
   legendValueFormatter,
   onViewAllLegendItems,
   legendScrollable = false,
+  legendClassName,
   fillContainer = false,
   beforeLegend,
   children,
@@ -193,6 +199,7 @@ function ChartRootInner({
           valueFormatter={legendValueFormatter}
           onViewAllLegendItems={onViewAllLegendItems}
           scrollable={legendScrollable}
+          className={legendClassName}
         />
       )}
     </div>

apps/webapp/app/presenters/v3/ErrorGroupPresenter.server.ts

@@ -74,6 +74,7 @@ export type ErrorGroupSummary = {
 
 export type ErrorGroupOccurrences = Awaited<ReturnType<ErrorGroupPresenter["getOccurrences"]>>;
 export type ErrorGroupActivity = ErrorGroupOccurrences["data"];
+export type ErrorGroupActivityVersions = ErrorGroupOccurrences["versions"];
 
 export class ErrorGroupPresenter extends BasePresenter {
   constructor(
@@ -144,8 +145,8 @@ export class ErrorGroupPresenter extends BasePresenter {
   }
 
   /**
-   * Returns bucketed occurrence counts for a single fingerprint over a time range.
-   * Granularity is determined automatically from the range span.
+   * Returns bucketed occurrence counts for a single fingerprint over a time range,
+   * grouped by task_version for stacked charts.
    */
   public async getOccurrences(
     organizationId: string,
@@ -156,12 +157,14 @@ export class ErrorGroupPresenter extends BasePresenter {
     to: Date,
     versions?: string[]
   ): Promise<{
-    data: Array<{ date: Date; count: number }>;
+    data: Array<Record<string, number | Date>>;
+    versions: string[];
   }> {
     const granularityMs = errorGroupGranularity.getTimeGranularityMs(from, to);
     const intervalExpr = msToClickHouseInterval(granularityMs);
 
-    const queryBuilder = this.logsClickhouse.errors.createOccurrencesQueryBuilder(intervalExpr);
+    const queryBuilder =
+      this.logsClickhouse.errors.createOccurrencesByVersionQueryBuilder(intervalExpr);
 
     queryBuilder.where("organization_id = {organizationId: String}", { organizationId });
     queryBuilder.where("project_id = {projectId: String}", { projectId });
@@ -178,7 +181,7 @@ export class ErrorGroupPresenter extends BasePresenter {
       queryBuilder.where("task_version IN {versions: Array(String)}", { versions });
     }
 
-    queryBuilder.groupBy("error_fingerprint, bucket_epoch");
+    queryBuilder.groupBy("error_fingerprint, task_version, bucket_epoch");
     queryBuilder.orderBy("bucket_epoch ASC");
 
     const [queryError, records] = await queryBuilder.execute();
@@ -195,17 +198,27 @@ export class ErrorGroupPresenter extends BasePresenter {
       buckets.push(epoch);
     }
 
-    const byBucket = new Map<number, number>();
+    // Collect distinct versions and index results by (epoch, version)
+    const versionSet = new Set<string>();
+    const byBucketVersion = new Map<string, number>();
     for (const row of records ?? []) {
-      byBucket.set(row.bucket_epoch, (byBucket.get(row.bucket_epoch) ?? 0) + row.count);
+      const version = row.task_version || "unknown";
+      versionSet.add(version);
+      const key = `${row.bucket_epoch}:${version}`;
+      byBucketVersion.set(key, (byBucketVersion.get(key) ?? 0) + row.count);
     }
 
-    return {
-      data: buckets.map((epoch) => ({
-        date: new Date(epoch * 1000),
-        count: byBucket.get(epoch) ?? 0,
-      })),
-    };
+    const sortedVersions = sortVersionsDescending([...versionSet]);
+
+    const data = buckets.map((epoch) => {
+      const point: Record<string, number | Date> = { date: new Date(epoch * 1000) };
+      for (const version of sortedVersions) {
+        point[version] = byBucketVersion.get(`${epoch}:${version}`) ?? 0;
+      }
+      return point;
+    });
+
+    return { data, versions: sortedVersions };
   }
 
   private async getSummary(

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx

@@ -14,6 +14,7 @@ import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import {
   ErrorGroupPresenter,
   type ErrorGroupActivity,
+  type ErrorGroupActivityVersions,
   type ErrorGroupOccurrences,
   type ErrorGroupSummary,
 } from "~/presenters/v3/ErrorGroupPresenter.server";
@@ -43,10 +44,11 @@ import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { RunsIcon } from "~/assets/icons/RunsIcon";
-import { TaskRunListSearchFilters } from "~/components/runs/v3/RunFilters";
+import type { TaskRunListSearchFilters } from "~/components/runs/v3/RunFilters";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { CopyableText } from "~/components/primitives/CopyableText";
 import { LogsVersionFilter } from "~/components/logs/LogsVersionFilter";
+import { getSeriesColor } from "~/components/code/chartColors";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -121,7 +123,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       time.to,
       versions.length > 0 ? versions : undefined
     )
-    .catch(() => ({ data: [] as ErrorGroupActivity }));
+    .catch(() => ({ data: [] as ErrorGroupActivity, versions: [] as string[] }));
 
   return typeddefer({
     data: detailPromise,
@@ -334,13 +336,12 @@ function ErrorGroupDetail({
 
         <Suspense fallback={<ActivityChartBlankState />}>
           <TypedAwait resolve={activity} errorElement={<ActivityChartBlankState />}>
-            {(result) =>
-              result.data.length > 0 ? (
-                <ActivityChart activity={result.data} />
-              ) : (
-                <ActivityChartBlankState />
-              )
-            }
+            {(result) => {
+              if (result.data.length > 0 && result.versions.length > 0) {
+                return <ActivityChart activity={result.data} versions={result.versions} />;
+              }
+              return <ActivityChartBlankState />;
+            }}
           </TypedAwait>
         </Suspense>
       </div>
@@ -402,14 +403,24 @@ function ErrorGroupDetail({
   );
 }
 
-const activityChartConfig: ChartConfig = {
-  count: {
-    label: "Occurrences",
-    color: "#6366F1",
-  },
-};
+function ActivityChart({
+  activity,
+  versions,
+}: {
+  activity: ErrorGroupActivity;
+  versions: ErrorGroupActivityVersions;
+}) {
+  const chartConfig = useMemo(() => {
+    const cfg: ChartConfig = {};
+    for (let i = 0; i < versions.length; i++) {
+      cfg[versions[i]] = {
+        label: versions[i],
+        color: getSeriesColor(i),
+      };
+    }
+    return cfg;
+  }, [versions]);
 
-function ActivityChart({ activity }: { activity: ErrorGroupActivity }) {
   const data = useMemo(
     () =>
       activity.map((d) => ({
@@ -463,13 +474,22 @@ function ActivityChart({ activity }: { activity: ErrorGroupActivity }) {
 
   return (
     <Chart.Root
-      config={activityChartConfig}
+      config={chartConfig}
       data={data}
       dataKey="__timestamp"
-      series={["count"]}
+      series={versions}
       fillContainer
+      showLegend={versions.length > 1}
+      legendScrollable
+      legendClassName="w-48 shrink-0 pt-0 max-h-full"
+      className={
+        versions.length > 1
+          ? "!flex-row gap-x-3 [&>div:first-child]:min-w-0"
+          : undefined
+      }
     >
       <Chart.Bar
+        stackId="versions"
         xAxisProps={{
           tickFormatter: xAxisFormatter,
           ticks: midnightTicks,

internal-packages/clickhouse/src/errors.ts

@@ -314,3 +314,39 @@ export function createErrorOccurrencesQueryBuilder(
     settings
   );
 }
+
+export const ErrorOccurrencesByVersionQueryResult = z.object({
+  error_fingerprint: z.string(),
+  task_version: z.string(),
+  bucket_epoch: z.number(),
+  count: z.number(),
+});
+
+export type ErrorOccurrencesByVersionQueryResult = z.infer<
+  typeof ErrorOccurrencesByVersionQueryResult
+>;
+
+/**
+ * Creates a query builder for bucketed error occurrence counts grouped by task_version.
+ * Used for stacked-by-version activity charts on the error detail page.
+ */
+export function createErrorOccurrencesByVersionQueryBuilder(
+  ch: ClickhouseReader,
+  intervalExpr: string,
+  settings?: ClickHouseSettings
+): ClickhouseQueryBuilder<ErrorOccurrencesByVersionQueryResult> {
+  return new ClickhouseQueryBuilder(
+    "getErrorOccurrencesByVersion",
+    `
+      SELECT
+        error_fingerprint,
+        task_version,
+        toUnixTimestamp(toStartOfInterval(minute, ${intervalExpr})) as bucket_epoch,
+        sum(count) as count
+      FROM trigger_dev.error_occurrences_v1
+    `,
+    ch,
+    ErrorOccurrencesByVersionQueryResult,
+    settings
+  );
+}

internal-packages/clickhouse/src/index.ts

@@ -34,6 +34,7 @@ import {
   getErrorHourlyOccurrences,
   getErrorOccurrencesListQueryBuilder,
   createErrorOccurrencesQueryBuilder,
+  createErrorOccurrencesByVersionQueryBuilder,
   getErrorAffectedVersionsQueryBuilder,
 } from "./errors.js";
 export { msToClickHouseInterval } from "./intervals.js";
@@ -251,6 +252,8 @@ export class ClickHouse {
       occurrencesListQueryBuilder: getErrorOccurrencesListQueryBuilder(this.reader),
       createOccurrencesQueryBuilder: (intervalExpr: string) =>
         createErrorOccurrencesQueryBuilder(this.reader, intervalExpr),
+      createOccurrencesByVersionQueryBuilder: (intervalExpr: string) =>
+        createErrorOccurrencesByVersionQueryBuilder(this.reader, intervalExpr),
     };
   }
 }