> ## 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-10

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

<div id="text-index-fix-for-map-column-disjunction-filters">
  ## MapカラムのOR条件フィルタに対するテキスト索引の修正
</div>

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

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

Aaron は、Mapカラムの属性に対するクエリを含むレポートの動作が予想外に遅いという問題のデバッグを手伝っている中で、これを見つけました。すでに本人は materialized column と bloom filter を追加して回避していましたが、Map属性向けに既存の最適化があることを考えると、本来それは不要なはずでした。

原因は、Map属性を複数の候補値でフィルタリングする際に `hasAny` 関数が使われていたことでした。これは実質的に配列に対する選言チェックです。たとえば、ユーザー ID のようなログ属性を値のリストに照合するケースです。26.5 未満の ClickHouse では、これによってテキスト索引がトリガーされていませんでした。この修正では、その選言を括弧で囲んだ複数の OR 等価比較に書き換えることで、索引が正しく有効になるようにしています。Aaron は `EXPLAIN` を使って、書き換え後のクエリが期待どおりスキップ索引にヒットすることを確認しました。

大半のユーザーはすでに 26.5 以降を使っていますが、まだ移行していないユーザーにとっては、それまでの間もこうしたクエリを高速に保てます。

**関連PR:** [#2643](https://github.com/hyperdxio/hyperdx/pull/2643) feat: getAllKeyValues を見直し、テキスト索引から生成されるフィルタを追加

<div id="profiling-data-in-clickcannon">
  ## ClickCannon のプロファイリングデータ
</div>

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

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

ClickHouse のベンチマーク向けに合成データを生成するツール ClickCannon については、最近[ブログで紹介しました](https://clickhouse.com/blog/building-clickcannon-a-tool-for-benchmark-clickhouse)。今回 Spencer は、既存のログ、メトリクス、トレースのサポートに加えて、プロファイリングシグナルを追加しました。プロファイリングデータは、スタックの深さを設定して生成でき、実行時にその場でシミュレートすることも、ディスクから読み込むこともできます。取り込み方法も他のシグナルと同じで、ClickCannon で profiles テーブルを指定すると、行の生成が始まります。

プロファイルのペイロードは他のシグナルよりかなり大きいことが分かったため、各サンプルに追加するキー数の調整や、インスタンスサイズに対するスループットの確認は、現在も継続して進められています。このデータを大規模に生成できるようになったことで、チームはスキーマの最適化に着手し、そのための基準点を得られるようになりました。これは、ClickStack 全体でプロファイリングデータとその可視化をサポートする、より広範な取り組みにもつながっています。さらに Spencer は、ClickStack のログビューアでプロファイルフレームをレンダリングするための初期検討も行いました。

<div id="bar-charts">
  ## 棒グラフ
</div>

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

<Frame>
  <iframe src="https://www.youtube.com/embed/JIQJpGMh5tk" 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 />
</Frame>

棒グラフが追加されました。これは、数か月前に作成されたものの、リベースの途中で放置されたままになっていた PR に着想を得たものです。現在では、ClickStack でグラフが表示されるあらゆる場所、つまりダッシュボード、MCP ダッシュボードビルダーなどで利用できます。棒グラフで、従来はline チャートが担っていた時点比較の用途をカバーできるようになったため、違いをより明確にする目的で、line チャートは時系列にリネームされました。

棒グラフは系列 limit をサポートしているため、高カーディナリティな Group By を使用している場合でも、表示する棒の数を制御できます。また、custom order by にも対応しているため、デフォルトの並び順ではなく、最も重要な Metric でソートできます。

**関連 PR:** [#2606](https://github.com/hyperdxio/hyperdx/pull/2606) feat: Add categorical bar chart display type, [#2618](https://github.com/hyperdxio/hyperdx/pull/2618) feat: Allow custom order by on categorical (pie/bar) charts

<div id="community-contributions">
  ## コミュニティからの貢献
</div>

*デモ: [@vinzee](https://github.com/vinzee) と [@zoov-xavier](https://github.com/zoov-xavier)*

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

今週は、PR レビューを通じて、コミュニティからすばらしい貢献が 2 件ありました。[#vinzee](https://github.com/vinzee) からは、検索バーの Lucene/SQL トグルの横に構文リファレンスボタンが追加され、ユーザーはページを離れることなく、アプリ内ですぐにクエリ構文や利用可能なオプションの例を確認できるようになりました。

[@zoov-xavier](https://github.com/zoov-xavier) からは、フィルターピルで値を手動入力できるようになりました。これまでは、サンプルされた値のドロップダウンから選ぶことしかできなかったため、そのサンプルにまだ読み込まれていない値ではフィルターできませんでした。これで、必要な値を入力して Enter キーを押すだけで済みます。

**関連 PR:** [#2381](https://github.com/hyperdxio/hyperdx/pull/2381) 検索入力にクエリ構文リファレンスを追加, [#2471](https://github.com/hyperdxio/hyperdx/pull/2471) feat(search): フィルターピル編集中の自由入力値を許可

<div id="alert-annotations-on-charts">
  ## チャート上のアラート注釈
</div>

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

<Frame>
  <iframe src="https://www.youtube.com/embed/NmEYBvtjpAQ" 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 />
</Frame>

これは、アラートの発火時にチャート上で注釈を確認したいという顧客からの要望を受けて実装されたものです。新たに「アラート注釈を表示」トグルが追加され、既定ではオフになっています。この機能では、アラートがいつ発火し、いつ復旧したかがチャート上に直接正確に表示されます。アラートが現在表示中の時間範囲の外ですでに発火状態だった場合は、ウィンドウ開始前から有効だったことを示すため、チャートの左端にマーカーが表示されます。また、注釈はアラートの発火や復旧に合わせてリアルタイムに更新されます。

Tom はこれを再利用可能な注釈パターンとして実装したため、今後リリースや Kubernetes イベントのような新しい種類の注釈を追加する場合も、同じアプローチに沿って容易に重ねていけるはずです。

**関連 PR:** [#2605](https://github.com/hyperdxio/hyperdx/pull/2605) feat(dashboards): タイルチャートでのアラート発火/復旧注釈, [#2616](https://github.com/hyperdxio/hyperdx/pull/2616) fix(dashboards): タイルチャートでのアラート注釈の視認性を改善

<div id="event-patterns-tile-polish-and-line-series-actions">
  ## イベントパターン、タイルの洗練、ライン系列のアクション
</div>

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

<Frame>
  <iframe src="https://www.youtube.com/embed/Nwo_nt5VZL4" 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 />
</Frame>

イベントパターンが、正式な第一級のダッシュボードタイルタイプになりました。パターンタイルを作成し、`WHERE` 句やパターン式を指定することで、たとえば service name や severity text で絞り込み、繰り返し現れるパターンをひと目で把握できるようになりました。

Brandon はまた、小さなタイル上の可視化におけるテキスト折り返しも改善しました。これにより、長いタイトルが不自然に切り取られるのではなく、省略記号付きで複数行に折り返されるようになりました。さらに、タイルのアクションボタンの表示もすっきりし、小さなタイルでは CSS の container query を使ってコンテキストメニューに折りたたまれ、サイズを大きくすると再びタイル上に直接表示されます。加えて、保存せずにタイルの Display Settings を閉じると、変更内容が気づかないうちに破棄されることがあった問題も修正され、編集内容が失われる前に適切な警告が表示されるようになりました。

最後に、ユーザーからのフィードバックを受けて、既存の Search アクションに加え、ライン系列をクリックして値をコピーしたり、そのラインだけにフォーカスしたりできるようになりました。Brandon はまた、Recharts v3 への upgrade も進めており、多くのグループを含むテーブルでツールチップが途中で切れてしまう問題の修正を目指しています。

**関連PR:** [#2604](https://github.com/hyperdxio/hyperdx/pull/2604) feat: イベントパターンを第一級のダッシュボードタイルタイプとして追加, [#2596](https://github.com/hyperdxio/hyperdx/pull/2596) fix(charts): ダッシュボードタイルのタイトルに複数行の省略表示を使用, [#2597](https://github.com/hyperdxio/hyperdx/pull/2597) fix: 未保存変更モーダル向けに display/heatmap settings の変更状態を追跡, [#2611](https://github.com/hyperdxio/hyperdx/pull/2611) feat(charts): 系列ごとの drill-down アクション、新しいタブでの drill-in、および search と同期したフォーカス

<div id="dashboard-and-service-map-styling">
  ## ダッシュボードとサービスマップのスタイリング
</div>

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

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

使い勝手の向上に重点を置いたスタイリング改善を一通り行いました。個々の変更は小さいものの、全体として見た目も操作感もかなりすっきりしています。ダッシュボードでは、編集可能なタイルのヘッダー色がライトモードで統一されておらず、グレーのものと白のものが混在していましたが、現在はヘッダー下にすっきりした区切り線が入り、見た目も統一されました。ホバー時のみ表示されるタイル操作の位置も、小さなレスポンシブカードでタイトルに重ならないよう調整されています。さらに、チャートでズームをリセットできるようになりました。

サービスマップにも同様の調整が加えられています。コントロールはカラーモードに対応し、常に黒で表示されるのではなく、ライトモードでは明るく、ダークモードでは暗く表示されるようになりました。凡例でもレイテンシ、エラー率、スループットがより明確に区別されるようになり、サービスをクリックしてそのサービスにフォーカスし、もう一度クリックしてフォーカスを解除して全体表示に戻すこともできます。

**関連PR:** [#2592](https://github.com/hyperdxio/hyperdx/pull/2592) ダッシュボードタイルのスタイリングとヘッダーレイアウトの改善, [#2601](https://github.com/hyperdxio/hyperdx/pull/2601) feat(service-map): メトリクスの色トグルとポップオーバーの改善