> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# デモデイズ - 2026-07-17

> 2026-07-17のClickStackデモデイズ

<div id="chart-tooltip-improvements">
  ## チャートツールチップの改善
</div>

*[@brandon-pereira](https://github.com/brandon-pereira) によるデモ*

<iframe width="768" height="432" src="https://www.youtube.com/embed/EsnGp9RPSKM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

ClickStack のチャートツールチップは、使い勝手が大幅に向上しました。チャートをクリックすると、マウスを離してもツールチップが消えず、その場に固定されるようになったため、データを落ち着いて確認できます。固定されたツールチップには系列内のすべての値が表示され、数が多い場合も途中で切り取られることなく、一覧をスクロールして確認できます。

さらに、ツールチップから値をそのままコピーできるようになりました。これは顧客からのフィードバックを直接反映したものです。以前は必要なデータが見えていても取得する手段がありませんでしたが、現在は値をクリックするだけでクリップボードにコピーされます。

この改善は、ツールチップをチャート自身のコンテナー内ではなく、ポータル経由で描画する Recharts のアップグレードによって実現されています。これは、多数のチャートが密集して配置されたダッシュボードで特に効果を発揮します。ツールチップが周囲の要素に押し縮められたり、切り取られたりしなくなったためです。

**関連PR:** [#2642](https://github.com/hyperdxio/hyperdx/pull/2642) feat(charts): クリック時にインラインのドリルダウンアクション付きでチャートツールチップを固定

<div id="running-mcp-evals-from-a-pr">
  ## PRからMCP evalを実行する
</div>

*[@brandon-pereira](https://github.com/brandon-pereira)によるデモ*

<iframe width="768" height="432" src="https://www.youtube.com/embed/YcDm1Mnw-Qc" title="YouTube動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

チームは、MCP evalをローカルでしか実行できなかったこれまでと異なり、GitHubのPRから直接実行できるようになりました。これにより、コード変更がマージされる前に、MCPの品質にどのような影響を与えるかを誰でも確認できます。これは初期バージョンのセットアップで、evalパイプラインをCIに組み込み、自動実行して、集約スコアをPRに返すようにしています。

ClickStackのMCP evalフレームワークの仕組みについて詳しくは、ブログ記事「[HDX evalsでClickStack MCPサーバーをbenchmarkingする](https://clickhouse.com/blog/benchmarking-the-clickstack-mcp-server-with-hdx-evals)」をご覧ください。

**関連PR:** [#2628](https://github.com/hyperdxio/hyperdx/pull/2628) feat(evals): M1 CI skeleton — GitHub ActionsでMCP evalをエンドツーエンドで実行

<div id="metrics-support-in-the-mcp-server">
  ## MCPサーバーでのメトリクス対応
</div>

*デモ: [@karl-power](https://github.com/karl-power)*

<iframe width="768" height="432" src="https://www.youtube.com/embed/GqJWQN3P86c" title="YouTube 動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

MCPサーバーが、ログやトレースだけでなくメトリクスも扱えるようになり、それらをどれだけ適切に活用できているかを測る対応する eval フレームワークも追加されました。これにより、ClickStack がサポートする 5 種類のメトリクス型 (gauge、sum、histogram、exponential histogram、summary) 用のジェネレーターに加え、メトリクスがなければ解決できない新しい eval シナリオも追加されています。たとえば、JVM のメモリリークのように、ログやトレースだけでは実質的に解決が難しいケースです。

初期結果では、メトリクス対応の MCPサーバーは、Standard SQL 専用の標準的な MCPサーバーと比べて、これらのシナリオを明らかに速くクリアできています。主な理由は、答えにたどり着くまでに必要なツール呼び出し回数が少ないことです。まだ調整の余地はあります (同じメトリクスでも表記ゆれがあると、LLM のパターンマッチングがうまくいかないシナリオがあります) が、方向性は明確です。エージェントがメトリクスに直接アクセスできるようになることで、これまで手の届かなかった調査が可能になります。

**関連PR:** [#2645](https://github.com/hyperdxio/hyperdx/pull/2645) feat(evals): metric types と seeding のサポート

<div id="source-picker-improvements">
  ## ログソースピッカーの改善
</div>

*デモ: [@elizabetdev](https://github.com/elizabetdev)*

<iframe width="768" height="432" src="https://www.youtube.com/embed/XTQygZSMUTs" title="YouTube 動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

以前は、適切なログソースを選ぶのは、スクロールしながら勘で探すような作業でした。ログソース一覧が長いインスタンスでは、ドロップダウンを開いても実際にどのログソースが選択されているのか分かる視覚的な手がかりがありませんでした。今回の更新では、既存の複数選択パターンと同様に、現在選択中のログソースの横にチェックマークが表示されるようになり、クエリを始める前にどれがアクティブかをひと目で確認できます。

小さな変更ですが、「あれ、今見ているのはどれだっけ？」と迷う一瞬を減らせるため、1日の作業の中では意外と効いてきます。

**関連PR:** [#2651](https://github.com/hyperdxio/hyperdx/pull/2651) feat(app): ログソースピッカーで選択中のログソースを明確化

<div id="chart-builder-to-sql-conversion">
  ## チャートビルダーからSQLへの変換
</div>

*デモ担当 [@pulpdrew](https://github.com/pulpdrew)*

<iframe width="768" height="432" src="https://www.youtube.com/embed/IBNdi1rgiTc" title="YouTube 動画プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

以前は、視覚的なクエリビルダーから Raw SQL モードに切り替えると、最初からやり直しになっていました。ビルダーでフィルターやグループ化を使ってクエリを組み立てていても、途中でビルダーでは表現できない処理があると、SQL モードに移ったときには空のエディタしか表示されませんでした。

現在は、SQL モードに切り替えると、ビルダーのクエリがチャートの描画に使われるのと同じパイプラインで処理されるため、適切なマクロを使った等価なクエリがあらかじめ書き出された状態で SQL モードを開けます。値がハードコードされることもありません。逆方向の変換 (SQL からビルダーへ) はまだありませんが、ロードマップには入っています。

**関連PR:** [#2634](https://github.com/hyperdxio/hyperdx/pull/2634) feat: ビルダーのチャートを Raw SQL に自動変換, [#2666](https://github.com/hyperdxio/hyperdx/pull/2666) fix(charts): builder から SQL モードに切り替える際に選択したログソースを保持

<div id="new-filter-fetching-mechanism">
  ## 新しいフィルター値取得メカニズム
</div>

*デモ担当 [@knudtty](https://github.com/knudtty)*

<iframe width="768" height="432" src="https://www.youtube.com/embed/z31cAIJA3B4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

利用可能なフィルター値の一覧取得に、より賢いルーティング層が導入されました。新しいシステムでは、単一の固定戦略に頼るのではなく、スキーマ内で何が利用できるか、特にテキスト索引の有無を見て、フィルター一覧を生成する最も効率的な方法を選びます。

テキスト索引が利用できる場合、ClickStack はロールアップテーブルにフォールバックせず、それらを直接クエリします。これにより、維持が必要なロールアップの数が減るだけでなく、従来の方式で一部のユーザーが直面していたメモリ逼迫のリスクも抑えられます。これを利用するには ClickHouse 26.3 が必要なため、まだそのバージョンに移行していない場合は、アップグレードするまで既存のロールアップベースの方式が使われ、アップグレード後に自動で有効になります。

**関連 PR:** [#2643](https://github.com/hyperdxio/hyperdx/pull/2643) feat: `getAllKeyValues` を再設計し、テキスト索引から取り込まれるフィルターを追加

<div id="improved-rum-dashboard">
  ## 改良された RUM ダッシュボード
</div>

*デモ: [@teeohhem](https://github.com/teeohhem)*

<iframe width="768" height="432" src="https://www.youtube.com/embed/roNhRzLvXro" title="YouTube ビデオ プレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

Browser RUM ダッシュボードでは、各色の意味を説明する Markdown の凡例付きで、色分け表示が導入されました (この凡例は今後さらにわかりやすく改善できる余地があります) 。エラーのあるセッションのような項目を表示する数値タイルも、設定可能なしきい値に基づいて色分けされるようになり、問題のある箇所が無機質な数字の羅列に埋もれず、視覚的にすぐ分かるようになりました。

**関連 PR:** [#2671](https://github.com/hyperdxio/hyperdx/pull/2671) feat(dashboards): Browser RUM の web vitals、ページ読み込み、エラータイルを色分け