Codex/limit time axis labels (#130)

* Limit Mermaid time-axis labels for long workflows

* test

* checkout忘れていた

* Fix format (#131)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* スペースに変更

* Fix format (#132)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* ゼロ幅スペースで頑張る

* Fix format (#133)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* 間隔調整

* Fix format (#134)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* 間引く

* Fix format (#135)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* sleeptestを削除

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: Goryudyuma

dist/post/index.bundle.js

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "bun:test";
 import { Renderer } from "./renderer";
+import { TimeLabelFormatter } from "./timeLabels";
 import type { z } from "zod";
 import type { legendsSchema } from "./lib";
 
@@ -492,4 +493,81 @@ describe("Renderer", () => {
     expect(result).toContain("<summary>Chart</summary>");
     expect(result).toContain("</details>");
   });
+
+  it("should limit visible time labels when times are long", () => {
+    const renderer: Renderer = new Renderer();
+    const startTime: number = Date.parse("2024-01-01T00:00:00Z");
+    const samples: number = 120;
+    const times: Date[] = Array.from(
+      { length: samples },
+      (_, index: number): Date => new Date(startTime + index * 1000),
+    );
+    const firstLabel: string = times[0].toLocaleTimeString("en-GB", {
+      hour12: false,
+    });
+    const lastLabel: string = times[times.length - 1].toLocaleTimeString(
+      "en-GB",
+      { hour12: false },
+    );
+
+    const result: string = renderer.render(
+      [
+        {
+          title: "Long Timeline",
+          legends: [{ color: "Gray", name: "Metric" }],
+          data: [
+            {
+              stepName: undefined,
+              stackedBarData: [
+                Array.from(
+                  { length: times.length },
+                  (_, index: number): number => index,
+                ),
+              ],
+              times,
+              yAxis: {
+                title: "Units",
+              },
+            },
+          ],
+        },
+      ],
+      testMetricsID,
+    );
+
+    const match: RegExpMatchArray | null = result.match(
+      /x-axis "Time" (\[[^\]]+\])/,
+    );
+    expect(match).not.toBeNull();
+    const labels: string[] = JSON.parse(match![1]);
+
+    const hasVisibleCharacters = (label: string): boolean =>
+      /[0-9:]/.test(label);
+
+    expect(labels.length).toBe(times.length);
+    expect(labels[0]).toBe(firstLabel);
+    expect(labels[labels.length - 1]).toBe(lastLabel);
+    const visibleIndices: number[] = labels
+      .map((label: string, index: number): number =>
+        hasVisibleCharacters(label) ? index : -1,
+      )
+      .filter((index: number): index is number => index >= 0);
+    expect(visibleIndices[0]).toBe(0);
+    expect(visibleIndices[visibleIndices.length - 1]).toBe(labels.length - 1);
+
+    const labelStep: number = TimeLabelFormatter.calculateLabelStep(
+      labels.length,
+    );
+    for (let i = 1; i < visibleIndices.length; i += 1) {
+      const current: number = visibleIndices[i];
+      const previous: number = visibleIndices[i - 1];
+      expect(current - previous).toBeGreaterThanOrEqual(labelStep);
+    }
+
+    const hiddenLabels: string[] = labels.filter(
+      (label: string): boolean => !hasVisibleCharacters(label),
+    );
+    expect(hiddenLabels.length).toBe(labels.length - visibleIndices.length);
+    expect(new Set(hiddenLabels).size).toBe(hiddenLabels.length);
+  });
 });

dist/post/index.bundle.js.map

@@ -8,6 +8,7 @@ import type {
   stackedBarDataSchema,
   timesSchema,
 } from "./lib";
+import { TimeLabelFormatter } from "./timeLabels";
 
 export class Renderer {
   render(
@@ -52,11 +53,7 @@ ${charts}`;
   }
 
   private formatTimes(times: z.TypeOf<typeof timesSchema>): string {
-    return JSON.stringify(
-      times.map((d: Date): string =>
-        d.toLocaleTimeString("en-GB", { hour12: false }),
-      ),
-    );
+    return JSON.stringify(TimeLabelFormatter.format(times));
   }
 
   private formatYAxisRange(range?: string): string {

src/post/renderer.test.ts

@@ -0,0 +1,94 @@
+// Canvas metrics are measured from the GitHub Actions summary Mermaid output.
+const CHART_WIDTH_PX: number = 1161;
+const TICK_WIDTH_PX: number = 5;
+const LABEL_WIDTH_PX: number = 107;
+const REQUIRED_GAP_PX: number = LABEL_WIDTH_PX - TICK_WIDTH_PX;
+const ZERO_WIDTH_ZERO: string = "\u200b";
+const ZERO_WIDTH_ONE: string = "\u200c";
+const ZERO_WIDTH_SENTINEL: string = "\u200d";
+
+type TimePoints = ReadonlyArray<Date>;
+
+export class TimeLabelFormatter {
+  public static calculateLabelStep(count: number): number {
+    if (count <= 2) {
+      return 1;
+    }
+
+    const totalGapWidth: number = CHART_WIDTH_PX - TICK_WIDTH_PX * count;
+    if (totalGapWidth <= 0) {
+      return count;
+    }
+
+    const numerator: number = REQUIRED_GAP_PX * (count - 1);
+    return Math.max(1, Math.ceil(numerator / totalGapWidth));
+  }
+
+  public static format(times: TimePoints): string[] {
+    if (times.length === 0) {
+      return [];
+    }
+
+    const formattedTimes: string[] = times.map((d: Date): string =>
+      d.toLocaleTimeString("en-GB", { hour12: false }),
+    );
+
+    if (formattedTimes.length <= 2) {
+      return formattedTimes;
+    }
+
+    const labelStep: number = TimeLabelFormatter.calculateLabelStep(
+      formattedTimes.length,
+    );
+    if (labelStep <= 1) {
+      return formattedTimes;
+    }
+
+    const lastIndex: number = formattedTimes.length - 1;
+    const totalInteriorPositions: number = Math.max(
+      formattedTimes.length - 2,
+      0,
+    );
+    const estimatedInteriorLabels: number = Math.max(
+      Math.floor(lastIndex / labelStep) - 1,
+      0,
+    );
+    const usableInteriorLabels: number = Math.min(
+      totalInteriorPositions,
+      estimatedInteriorLabels,
+    );
+
+    const visibleLabelIndices: Set<number> = new Set<number>([0, lastIndex]);
+    if (usableInteriorLabels > 0) {
+      const spacing: number =
+        totalInteriorPositions / (usableInteriorLabels + 1);
+      for (let slot: number = 1; slot <= usableInteriorLabels; slot += 1) {
+        const targetIndex: number = 1 + Math.round(slot * spacing);
+        let clamped: number = Math.min(lastIndex - 1, Math.max(1, targetIndex));
+        while (visibleLabelIndices.has(clamped) && clamped < lastIndex - 1) {
+          clamped += 1;
+        }
+        visibleLabelIndices.add(clamped);
+      }
+    }
+
+    return formattedTimes.map((label: string, index: number): string =>
+      visibleLabelIndices.has(index)
+        ? label
+        : TimeLabelFormatter.encodeHiddenLabel(index),
+    );
+  }
+
+  private static encodeHiddenLabel(index: number): string {
+    const binary: string = index.toString(2);
+    return (
+      ZERO_WIDTH_SENTINEL +
+      binary
+        .split("")
+        .map((digit: string): string =>
+          digit === "0" ? ZERO_WIDTH_ZERO : ZERO_WIDTH_ONE,
+        )
+        .join("")
+    );
+  }
+}