機能リクエスト：状態ベクトル表示を変数の状態ごとに分割

[lilacs2039]

素晴らしいアプリケーションをありがとうございます。
シミュレーターの状態ベクトル表示を、変数の状態ごとに分けて表示していただけると見やすくなり、ありがたいです。

背景・課題

学習を進めていて、二変数以上のアルゴリズムはやや理解が進みませんでした。
現状の状態ベクトル表示は「全ての量子ビットを一つの変数として解釈して表示している」ため、状態ベクトルがどのように変化するのか直感的にわからなかったためです。
たとえば、以下のように説明が分かりづらくなっている場所があります。

Qni TUTORIAL 足し算回路　より
https://qniapp.github.io/qni/addition_circuit.html
計算結果の見方には注意が必要です。 計算結果の a の値は 4 と 8 (二進数で 0100 と 1000) の重ね合わせになっているはずですが、円表示で見ると 52 と 56 (二進数で 0110100 と 0111000) になっています。 これは計算結果に b の値 3 (二進数で 011) もあわせて表示されているためで、これが上位 3 ビットなので二進数では 0110000 (十進数で 48) が足し合わされています。 そこで a の値だけを読み取るには上位 3 ビットの 011 を無視するか、十進数で 48 を引いてやる必要があります。

対応案

そこで、以下のように量子ビットを変数に分けて、状態ベクトル表示を変数の状態ごとに分けて表示するのはいかがでしょうか？

例：量子テレポーテーション回路で、状態ベクトル表示を変数の状態ごとに分ける例

https://qniapp.github.io/qni/teleportation_circuit.html
量子ビットを「ボブの量子ビット」「アリスの量子ビット」の２つに変数分けします。（下図）

３量子ビットの８状態を、変数の状態ごとに分けて表示します。（下図）

変数の状態ごとに分けて表示することで、量子テレポーテーション後は「ボブの量子ビットは0であること」「アリスの量子ビットは 00, 10をとり得ること」が分かりやすくなります。

追加機能

以下の機能を追加することで上記が実現できると思います。

• 追加機能１. 量子ビットを変数ごとにグループ分けする
• 追加機能２. 状態ベクトル表示を変数の状態ごとに分けて表示する

備考

３変数以上では、もっとも量子ビット数の多い変数を横に、その他の変数を縦に並べると見やすいかもしれません。