絵文字ピッカーのすべての絵文字でマウスホバー時にtitle表示されるように

[yszkst]

What

• 絵文字ピッカーの検索結果以外でもマウスホバーによる絵文字名表示がされるように
• 絵文字ピッカー上のアイコンボタンをコンポーネント化

Why

#9750

Additional info (optional)

[syuilo]

コンポーネントをインスタンス化するのに少なくないコストがかかるから絵文字が多い場合のパフォーマンスへの影響が気になりますね👀

[yszkst]

まあ折りたたまれているのがデフォルトで都度開く分には困らないという楽観的なやつですね
1000個ぐらい入れて試してみます

[yszkst]

先に結論

PRのコード（計測2）は大雑把だったので入れるとするとホバー時にtitle設定（計測3) になりますね。

あとはホバー表示のためにこのコード追加と時間増を許容するかと、絵文字関連で他にあるIssueの妨げになるかは見ていなかったのでこの2つですかね。

計測

• 条件
  • ドライブに15個の画像を置き,、APIでそれぞれ100回ずつemoji/add を呼び1500個のカスタム絵文字を作成
  • pnpm buildをしてpnpm migrationandrun で起動
    • 当然ながらdevは遅い。セクションを閉じる操作も遅い。
  • Firefox Profilerで計測
    • 1500個のカスタム絵文字セクションを開くとき
    • 314個のpeopleセクションを開くとき
• 手抜き個所
  • add時点で同じ名前の絵文字が複数あっても動作はしていたのでそのままにしました
  • v-forは一応違うキーにするために計測時にすべてkeyにindexを追加

-- v-for="emoji in emojis"
-- :key="emoji"
++ v-for="(emoji, i) in emojis"
++ :key="`${emoji}${i}`"

セクションを開くときのブロック時間 (ms) (n = 1 ですが予想通りなのでこれで済ませます)

実装	1500個のカスタム絵文字	314個のpeople	備考
1. 元実装	353	271	4610d8dfe3695a08188cffe5ce6d8594af364604
2. 現PR	410	300	全てにtitle属性をcomputed
3. ホバー時title更新に変更	376	290	空の :title="title"　に @pointerenter="setTitle" で値設定

PRで1～2割増だったので、ホバー時に更新するようにしてみて元実装から1割以下の増になりました。

---

参考

Aが1500個、Bが314個のセクションを開いたときの動作
山の上の黒エリアの上の赤いエリアがブロック時間 (junk) を指しています。
1,2,3は表と同じ対応

[syuilo]

v-onceとか使えるかもしれないですね

[yszkst]

すみません、手を付けられず放置になっていました。

v-onceでも変わらず、有効な方法が見つけられなかったのでコンポーネント化は無しにして、buttonにカスタムデータ属性でemoji文字列を入れてpointerenterを入れようと思います。
プロファイラーでも特に問題はなさそうでした。

[codecov[bot]]

Codecov Report

Merging #9765 (87fb43e) into develop (e0b7633) will increase coverage by 0.00%. The diff coverage is 100.00%.

@@           Coverage Diff            @@
##           develop    #9765   +/-   ##
========================================
  Coverage    73.33%   73.33%           
========================================
  Files          809      809           
  Lines        77519    77541   +22     
  Branches      5392     5391    -1     
========================================
+ Hits         56849    56868   +19     
- Misses       20670    20673    +3     

Impacted Files	Coverage Δ
.../frontend/src/components/MkEmojiPicker.section.vue	100.00% <100.00%> (ø)
packages/frontend/src/components/MkEmojiPicker.vue	100.00% <100.00%> (ø)
packages/backend/src/core/NotificationService.ts	95.71% <0.00%> (-4.29%)	:arrow_down:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[yszkst]

typo修正しました

[tamaina]

p1.a9z.devに適用中

Firefox on macOSでカーソルが普通のに戻ってしまうのが気になるけど、これはFirefoxのバグっぽい

[tamaina]

（directiveにできないかなと思った）

[syuilo]

👍🏻

[yszkst]

🙏