[FEATURE]フロントエンドのパフォーマンス改善

[nasuka]

背景

• 全画面地図のデータ点が増加した場合に動作が重くなる
  • 特にスマートフォン等のスペックの低い端末では、クラッシュすることがある

提案内容

• 案としては以下が想定されるが、アプローチを検討するところから実施する
  • 解決案
    • 全画面地図をSVG -> canvas化することでパフォーマンスを向上させる

その他

恐らく全画面地図の描画動作が重くなっていると思われる
全画面地図の描画はデバイスによってファイルが分かれており、それぞれ以下のファイルで実装されている。
現状ではスマホ側がボトルネックになっているが、PC側でもデータ点の増加に応じて動作が重くなる事象が確認されており、できれば両方で動作を改善したい。（よりクリティカルなのはスマホ側ではある）

• スマホ: MobileMap.tsx
• PC: DesktopMap.tsx

[nishio]

解決案
全画面地図をSVG -> canvas化することでパフォーマンスを向上させる

30個のクラスタの見出し部分に出ている散布図を消すだけで3GBのメモリ消費が100MBになると思う。(GTTは今そうやってるんだっけ)
canvas化は「操作可能な状態を保つため」だと思うが、その要件を捨てると画像にする選択肢もありえる。
クラスタの見出し部分は操作できなくてもいいかなという気がする。
特にスマホで見る人は小さい画面で細かい操作をしたいと思っているのかどうか微妙。

[nishio]

indexの下の方のクラスタ詳細ビューをsetTimeoutとかで分離したら最初の散布図が出るまでの時間が1/31になったりしないかな