Subscribed unsubscribe Subscribe Subscribe

TKYProfが少しかっこよくなったので、まじめに紹介します

Haskell

先日プレアルファ版としてリリースしたTKYProfを少しかっこよくしました。今日はまじめにTKYProfの紹介を書きます。

TKYProfって何?

Haskell処理系であるGHCのプロファイリング機能で出力されるテキストファイルを見やすくするためのツールです。

具体的には次のような特徴を持っています。

  • webベースでブラウザから閲覧する
  • JavaScriptによる綺麗でインタラクティブなグラフ
  • cabal install tkyprofのみの簡単インストール

TKYProfという名前は、PerlのプロファイラであるDevel::KYTProfがあるなら次はTKYかな、くらいのもので深い意味はありません。

動作環境・お断り

  • 互換性とかほとんど考慮していないので、いわゆるモダンブラウザでしか動かないと思います。
    • HTML 5のHistroy APIのpushState popstateとか。
  • Firefoxでトップページのボックスが崩れてしまいますが、直し方がわかりません。
    • 詳しい方は是非forkしてpull requestしてください。お願いします。

5分でわかるTKYProf

インストール手順

インストールはモダンなHaskell環境がある方なら簡単です。

% cabal install tkyprof

とすれば、人によっては大量のパッケージがビルドされた後、cabalのbinディレクトリ*1にtkyprofというバイナリができあがります。

使い方

ターミナルからtkyprofを起動してみましょう。

% tkyprof
TKYProf 0.0.6.1 launched, listening on http://localhost:3000/

出力されたとおり、 http://localhost:3000/ にアクセスしてみましょう。

前回よりかっこよくなっていますね。ロゴもファビコンもInkscapeで頑張って作りました。タイポグラフィーは手抜きしてweb fontsです。

それではお手元の*.profファイルをアップロードしてみましょう。アップロードの仕方は2通りあります。

  1. デスクトップなどからドラッグ & ドロップ
  2. ファイル選択ダイアログ

今回はwebで拾ったとある*.profファイルを使ってみます。アップロード後にリダイレクトされ、グラフが出てきます。

画面を説明します。

  • Time profiling | Alloc profilingボタン
    • このボタンを押すことで、CPU時間のグラフあるいは、メモリアロケーションのグラフに切り替えられます。
  • グラフ
    • 円の演習方向の角度が、一つのコスト集約点の*累積*値の割合を表します。
      • 中央の円はMAIN.MAINを表し100%の累積値と読みます。
      • 一番外周の薄紫の円弧はだいたい6割程度を占めるボトルネックとなっていることがわかります。
    • 円の半径方向は、コールグラフの深さを表しています。
    • コスト集約点の枝自体のコストは、その子、つまり1つ外周で枝と同じ色の円弧として表示されます。
    • 一番外側の円弧は(見えないほどコストの低い子がいなければ)葉を表しています。
    • つまり、最適化で手をつけるべきところは、できるだけ外側の大きな円弧を見つけることです。
    • 円弧をクリックすると、そのノードを親としてグラフを描画し直します。ようはズームインします。
  • 横のグレーの領域
    • Current node
      • 現在図の中央に来ているノードの情報が表示されています。
    • Children
      • current nodeにぶら下がる子ノードの名前が最大10件まで表示されます。
      • ここら辺はクリッカブルにしたり、ソートしたり、ビューを改善したりする予定です。
  • スクロールすると出てくるSummary
    • グローバルなプロファイル情報です。

いろいろクリックしてズームするとこんな感じになります。便利!

技術的なあれこれ

内部の実装の話です。

Haskell
  • Yesodを使っています。特にひねりもなく普通の使い方をしていると思います。
    • スタンドアローンのアプリとして気軽に使いたかったこともあり、モデルはDBを使わずに単なるSTMの変数としてfoundation data type(TKYProf型)に格納しています。
  • *.profからTree CostCentreを作る際に、Treeに対するzipperを使っています。
  • そのうちtkyprofをtkyprofにかけたいと思っています。
  • wai-handler-webkitでスタンドアローンアプリを試してみる予定です。
JavaScript
  • d3.js
    • グラフの描画にはd3.jsを使っています。大変綺麗なグラフで満足しています。
    • partitionの計算にバグがあったのでforkした修正版を使っています。pull requestしましたが、まだ本家には取り込まれていません。
    • ノード数が多いとちょっと重いのが気になります。
    • メソッドチェーンでつないでいくスタイルですが、サンプルコードでは妙な意図を込めたインデントをしていて僕は受け付けなかったです。
  • jQuery
  • Julius
    • Juliusテンプレートは#{}しか使えないので、もう少し柔軟になったらいいのになと思います。
    • JS初心者なので、JavaScript: The Good Partsを参考に書きました。
    • pushState/popstateを使って、ボタンやグラフのクリック時の挙動をブラウザのアドレスバーに反映しています。後々webサービス化したときに、parmalinkがあった方がよいからです。
HTML/CSS
  • HTML 5 / CSS 3っぽい感じにしてありますが、どちらももう少し整理したいところです。

今後

今後も引き続き改良していく予定です。v1.0.0を出すときにはwebサービスとして出せるといいなと思っています。

*1:もちろんPATHを通してありますよね?