Skip to content

Embeddable charts 269#279

Open
lalithsagar10 wants to merge 27 commits intoSemiAnalysisAI:masterfrom
lalithsagar10:embeddable-charts-269
Open

Embeddable charts 269#279
lalithsagar10 wants to merge 27 commits intoSemiAnalysisAI:masterfrom
lalithsagar10:embeddable-charts-269

Conversation

@lalithsagar10
Copy link
Copy Markdown
Contributor

  • Added an iframe-safe embeddable scatter chart route and embed client/view components.
  • Implemented canonical/embed URL state support and expanded URL-state tests.
  • Added CSP/middleware/layout updates required for secure embedding.
  • Wired embed/share behavior into chart display helpers and inference chart display.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 1, 2026

Someone is attempting to deploy a commit to the SemiAnalysisAI Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 2, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
inferencemax-app Ready Ready Preview, Comment May 5, 2026 7:38pm

Request Review

Lalith and others added 24 commits May 5, 2026 13:14
…ysisAI#283)

Drops the amber "still in early stages of adding support" banner from
inference, historical trends, and evaluation chart displays. Cleans up
the now-unused isModelExperimental imports at the call sites.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…emiAnalysisAI#284)

* feat(inference): add toggleable bus/car speed overlay on scatter charts

Decorative emoji markers anchor each chart corner to a "vehicle"
metaphor: the bus sits at the batch-friendly end of the Pareto frontier
(high throughput / low cost on the low-interactivity side, or the
high-latency side on e2e charts) and the racing car sits at the
interactivity-favoring end. Corner placement is derived from
chartDefinition.chartType plus the metric's roofline direction so the
markers track the y-axis semantics across throughput, cost, and energy
metrics.

Adds a "Bus / Race Car" toggle to the inference legend (off by
default) backed by a new i_speed share-link param and threaded through
InferenceContext.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(inference): scale bus/race car overlay 40% larger

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(inference): TTFT-aware bus/car corners + searchable Y-axis selector

- Derive bus/car corner placement from the post-flipped roofline alone
  so input-token metrics that swap X to TTFT (interactivity chart) and
  e2e charts both anchor the bus on the high-latency batch side.
- Add a SearchableSelect component (single-select with grouped options
  and a built-in search input) and use it for the Y-axis metric picker.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test(inference): cover speed overlay corner logic, searchable select, E2E

- Extract corner placement into a pure helper (lib/speed-overlay.ts) and
  unit-test all four roofline directions plus the undefined fallback.
- Render speed-overlay images with data-testid + data-corner attributes
  so E2E tests can assert placement without geometry math.
- Add E2E coverage for the legend toggle, default + cost + input-token
  (TTFT) corner mappings, off-cleanup, and the i_speed URL param.
- Add unit tests for SearchableSelect: trigger label, group flattening,
  search filtering across option and group labels, no-results state,
  and click-to-select behavior.
- Mark searchable-select items with role="option" so existing E2E tests
  that target the Y-axis dropdown via [role="option"] keep working.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(searchable-select): suppress hydration on label, scope E2E search

- Trigger label is derived from URL/persisted state which only resolves
  client-side; suppress the harmless server/client mismatch on the
  trigger text (was causing React #418 in the production bundle and
  failing url-params.cy.ts tests that hit ?i_metric).
- Other components (chart legend, MultiSelect) reuse the "Search..."
  placeholder, so scope every speed-overlay E2E search lookup to the
  open Y-axis dropdown via [data-slot="select-content"].

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(searchable-select): defer trigger label until mount, drop enter anim

- suppressHydrationWarning kept the SSR-rendered default label in place
  after hydration, so URL params like ?i_metric=y_costh never produced
  the right trigger text. Track a `mounted` flag and render the
  placeholder during SSR / first render, then swap in the resolved
  label on the next client tick (matches Radix Select's behavior).
- Drop the tailwindcss-animate enter animations on the dropdown panel:
  the initial 0-opacity / 0-scale frames made Cypress treat the search
  input as not visible and fail cy.type() in CI.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(searchable-select): hoist search header out of the scroll container

Sticky position with no enclosing scroll context resolves to fixed in
Chrome/Firefox, leaving the search input pinned to the viewport top
behind the global page header — Cypress correctly reports the input as
covered and fails cy.type(). Move the search header into a sibling div
above the scrollable list so its position is plain static / relative,
and the scroll area only contains the option list.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test(speed-overlay): drop tautological car-vs-bus contract test

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: adibarra <93070681+adibarra@users.noreply.github.com>
…le (SemiAnalysisAI#285)

* feat(inference): line labels for unofficial run rooflines

The "Line Labels" toggle now also labels overlay (unofficial run)
rooflines, not just official ones. Each (hwKey, runIndex) pair gets its
own label using the run-palette color (matching the legend swatches),
sharing the same greedy collision-avoidance pass as official labels so
they never overlap. Both interactivity-chart placement and TTFT/E2EL
endpoint placement support overlay, and the zoom handler updates them
in lockstep with official labels.

Also document the broader rule in AGENTS.md: any new inference /
evaluation chart feature must work for both official and unofficial
overlay paths, with manual verification and at least one test against
the overlay branch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(inference): label overlay rooflines with branch name to match legend

The overlay legend shows "✕ <branch>" per loaded unofficial run, but
the line labels were using the hw label (e.g. "B200") so the chart and
legend didn't speak the same language. Look up the run via
unofficialRunInfos[runIndex] and use the same "✕ <branch>" text in
both placement modes (interactivity mid-line + TTFT/E2EL endpoint).
Falls back to the hw label only when run metadata is missing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ce Car (SemiAnalysisAI#287)

* feat(inference): add Donkey / Elytra Minecraft overlay alongside Bus / Race Car

Adds a second decorative overlay pair using Minecraft assets — chested
donkey for the batch corner, elytra for the interactivity corner — as a
toggle independent of the existing Bus / Race Car overlay. Both pairs
share the same metric-aware corner placement (via getSpeedOverlayCorners)
and stack horizontally inward when enabled together so neither pair
hides the other.

Asset sources (transparent PNGs from the Minecraft Wiki):
- public/decorative/donkey-chest.png — Chested_Donkey_JE5
- public/decorative/elytra.png — Elytra_JE2_BE2 (256px render)

State threaded through InferenceContext as showMinecraftOverlay /
setShowMinecraftOverlay with i_mc share-link param. Existing speed
overlay testids (speed-overlay-bus / -car) preserved as aliases so
prior E2E selectors keep working. New describe block covers toggle
default, image hrefs, corner placement, both-on stacking offset, and
URL-param restore for the new pair.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(overlay): swap elytra to the front-facing 2D inventory sprite

The previous side-view 3D render read as an unrecognizable shape next
to the donkey. Use the canonical 256×256 front-facing inventory sprite
(both wings spread, pixel-art) from the Minecraft Wiki so the meaning
("flying gear") is immediately legible at the chart-corner size. Also
note the asset provenance in a code comment near the render site.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(overlay): use ElytraNew front-facing sprite (per review)

Drops in the user-specified ElytraNew.png from the Minecraft Fandom
wiki — both wings spread, classic in-game inventory framing — and
updates the attribution comment to point at the new source.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(overlay): render the donkey 50% larger than other overlay icons

Donkey-with-chest now anchors at 1.5× SIZE (≈117 px) while bus, race
car, and elytra stay at the standard 78 px. Per-pair slowSize/fastSize
fields make the stacking offset honor each image's actual width so the
larger donkey doesn't overlap a stacked elytra/bus when both pairs are
on.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…alysisAI#288)

* feat(gpu-graph): add date line labels to GPU comparison rooflines

The "Line Labels" toggle is now available on the GPU config /
comparison-date dashboard graph too, sharing the same showLineLabels
state as the scatter chart. Each visible (date, hwKey) roofline gets
exactly one label rendered along it — text is the **date** rather than
the hw config, since the legend already carries the hw identity in
its grouping and color, and date is the dimension that distinguishes
series within a single GPU comparison view.

Implementation mirrors ScatterGraph: a custom layer dedupes per
(date, hwKey) by picking the longest roofline, runs greedy collision
avoidance on the interactivity chart (try start → midpoint → 2/3 →
endpoint) and falls back to spaced-out endpoint labels for
TTFT / E2EL. Zoom updates labels in lockstep with the rooflines.
Labels respect the activeDates legend filter so toggling a series off
hides its label.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(gpu-graph): include hw config in line label, not just the date

Each line label now reads "<hw display label> • <date>" so the chart
is self-contained — the user no longer has to cross-reference the
legend's hw grouping to know which roofline is which GPU. Bumps
LABEL_W from 90 to 160 to give the wider labels enough horizontal
breathing room in the collision-avoidance pass. Component test asserts
both the date strings and the hw display labels appear.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…emiAnalysisAI#278)

* fix: close precision multiselect when focus moves to other filters

* fix: unify inference dropdown one-click switching behavior

* Dropdown changes fixed

* Fixed e2e tests

* fix: dropdown Escape key, selected-option styling, and switching regression test

---------

Co-authored-by: Lalith <lalith@todaiyo.ai>
Co-authored-by: Alec Ibarra <93070681+adibarra@users.noreply.github.com>
* chore: bump deps and override vulnerable transitive deps (uuid, postcss)

* chore: bump next/react to latest patch and unpin
…oss (SemiAnalysisAI#297)

* feat(theme): scatter Minecraft assets + Ender Dragon fly-across on minecraft theme

Adds a `MinecraftDecorations` client component that renders six iconic
Minecraft assets at fixed corner positions when the minecraft theme is
active, plus a one-shot Ender Dragon GIF that flies right-to-left across
the viewport every time the theme is activated:

  - top-left:    Creeper mob render
  - top-right:   Diamond pickaxe (rotated 35°, mining vibe)
  - mid-right:   Technoblade body render (RIP — pig-king skin)
  - bottom-left: Grass block
  - bottom-mid:  TNT
  - bottom-right: Diamond
  - top stripe:  Ender Dragon, fly-across once per activation

Mirrors the `RickMortyDecorations` pattern from PR SemiAnalysisAI#295: a
MutationObserver on `document.documentElement` toggles the cast live
with the mode picker, all images are `pointer-events: none` at z-0, and
the static cutouts are hidden below `lg` so narrow chart layouts stay
clean.

The dragon uses a `dragonNonce` React key so its `<img>` remounts on
every off→on theme transition, restarting the CSS animation. Keyframe
`mc-dragon-flyacross` lives in globals.css next to the existing
splash-bounce animation, takes ~9s, and respects
`prefers-reduced-motion: reduce`.

Asset provenance: minecraft.wiki (CC BY-NC-SA 3.0) for blocks/items
and the Ender Dragon GIF; mc-heads.net body render for the Technoblade
skin (decorative use).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(theme): drop Technoblade cutout from minecraft decorations

Removes the mid-right Technoblade body render and its asset. Six
remaining decorations (creeper, diamond pickaxe, grass block, TNT,
diamond, dragon) keep the spread of the cast unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(theme): swap creeper for zombified piglin facing inward

Replace the top-left creeper with a Zombified Piglin sprite from the
Minecraft Wiki. The canonical render faces left (sword arm out the
viewer's left), which on a top-left anchor would point AWAY from the
chart. Mirror it with `scaleX(-1)` so the sword-arm faces toward the
middle of the viewport, where the user's attention actually is.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(theme): add CC BY-NC-SA 3.0 attribution for minecraft assets

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: adibarra <93070681+adibarra@users.noreply.github.com>
…es (SemiAnalysisAI#293)

Bumps the all-minor-patch group with 4 updates in the / directory: [pnpm/action-setup](https://github.com/pnpm/action-setup), [anthropics/claude-code-action](https://github.com/anthropics/claude-code-action), [slackapi/slack-github-action](https://github.com/slackapi/slack-github-action) and [cypress-io/github-action](https://github.com/cypress-io/github-action).


Updates `pnpm/action-setup` from 6.0.3 to 6.0.5
- [Release notes](https://github.com/pnpm/action-setup/releases)
- [Commits](pnpm/action-setup@903f9c1...8912a91)

Updates `anthropics/claude-code-action` from 1.0.107 to 1.0.111
- [Release notes](https://github.com/anthropics/claude-code-action/releases)
- [Commits](anthropics/claude-code-action@567fe95...fefa07e)

Updates `slackapi/slack-github-action` from 3.0.2 to 3.0.3
- [Release notes](https://github.com/slackapi/slack-github-action/releases)
- [Changelog](https://github.com/slackapi/slack-github-action/blob/main/CHANGELOG.md)
- [Commits](slackapi/slack-github-action@03ea543...45a88b9)

Updates `cypress-io/github-action` from 7.1.9 to 7.1.10
- [Release notes](https://github.com/cypress-io/github-action/releases)
- [Changelog](https://github.com/cypress-io/github-action/blob/master/CHANGELOG.md)
- [Commits](cypress-io/github-action@783cb3f...c495c3d)

---
updated-dependencies:
- dependency-name: anthropics/claude-code-action
  dependency-version: 1.0.111
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: all-minor-patch
- dependency-name: cypress-io/github-action
  dependency-version: 7.1.10
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: all-minor-patch
- dependency-name: pnpm/action-setup
  dependency-version: 6.0.5
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: all-minor-patch
- dependency-name: slackapi/slack-github-action
  dependency-version: 3.0.3
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: all-minor-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Alec Ibarra <93070681+adibarra@users.noreply.github.com>
…env vars (SemiAnalysisAI#305)

* fix(ci): claude workflow dev server failing due to missing .env + db env vars

* fix(ci): drop bogus -- --hostname/--port args that next dev mistakes for project dir; remove .env stub (dotenv-cli v11 tolerates missing file)
)

* test(e2e): improve run speed, consolidate spec files

* test(e2e): close export popover between csv-export tests

---------

Co-authored-by: Alec Ibarra <93070681+adibarra@users.noreply.github.com>
…I#307)

* feat(theme): play canonical Ender Dragon growl during fly-across

Adds the dragon idle/growl SFX (~3s, ~26 KB MP3 transcoded from
minecraft.wiki's Ender_dragon_idle1.ogg) that fires on every off→on
minecraft theme activation, in lockstep with the existing dragon
fly-across GIF. Gated on the same `minecraft-sound` localStorage flag
used by the click-sound effect in minecraft-background.tsx so a single
mute toggle covers all SFX, and skipped when prefers-reduced-motion is
set (matching the visual suppression). Browsers block autoplay before
the first user gesture — that's silently caught; the very next theme
toggle is itself a gesture and unlocks subsequent plays.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(theme): hover dragon mid-screen so the growl lands on a pause

Extends the fly-across to 12s with a 35%→60% (4.2s–7.2s) hold at center,
and delays the audio start by 4.2s so the 3s growl sample plays during
the held position instead of bleeding across the entrance/exit motion.
The wing-flap GIF keeps the dragon visually alive during the hover.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants