[5-1-1. Alignment] Alignmentダイアログ実装

[itutu-tienday]

5-1-1. Alignmentダイアログ を実装する。

■設計資料

• 画面設計_v9_under-editing.pptx
  • https://drive.google.com/drive/folders/1ysYtYnQrYTyFBNAAbDcyQ8MalBwZdLi4
    • 画面設計_v9_under-editing.pptx
      • P.21 5-1. Workflow
      • P.22 5-1-1. Alignment

■関連

• MRI Image Viewer画像断面回転・Resize機能の組み込み #63
• Alignment Dialog RUN APIリクエスト処理組み込み #79

■不具合

• 1. 「＜＞」キーで画像を切り替えると、前の画像で入力した設定値が、クリアされている模様。
• 2. OK ボタンで確定→再度Alignment Dialogを表示すると、入力した設定値が、クリアされている模様。
• 3. 「Edit Imageset」で Edit Project画面へ遷移した後、OKで確定すると、Workflow画面へ戻っていない。

[Reactplus-Hao]

@sanglevinh
Implement dialog 5-1-1. Alignment

■Tài liệu design:

• https://drive.google.com/drive/u/0/folders/19q0VTCJlKIBDTpXwBCJOaoLnLFHrLNDe

  • File LATEST_Screen design_v9_under-editing (18/4).pptx
    - Slide 21: 5-1. Workflow
    - Slide 22: 5-1-1. Alignment

• Ngoài ra, KH cũng share cho bên mình tài liệu liên quan mà bên Cty phát triển API đã cung cấp cho họ
  Tài liệu này sẽ có update thường xuyên, nên tạm thời bên mình chỉ cần tham khảo là được ạ.
  https://docs.google.com/presentation/d/1-6ZDn9J81m9gbd-53z2VL_wvhfSh9dDi/edit#slide=id.p1

[Reactplus-Hao]

@itutu-tienday

Image Viewerで、傾きの操作、または傾き入力値の反映が行えるか、要検証。

上記の件について、BrainbrowserとOHIF Viewerライブラリを調査しました。

• Brainbrowserでは、
  • 傾きの操作、または傾き入力値の反映ができない
  • パラメータが取得できて、更新したパラメータを画像イメージに反映されることができる
• OHIF Viewerでは、
  • 傾きの操作ができる
  • OHIF Viewerの下記の画面に表示されているパラメータのみ取得できるが、表示できるのみ
  • パラメータの入力・編集などができない

傾きの操作、または傾き入力値の反映ができない

また、上記の課題について、Brainbrowserの外に画像傾きの対応を追加することができないと思います。
理由としては、

• 現在、Brainbrowserライブラリでは、canvasで対応していますので、Image ViewerのUIを更新することができない
• その他、ライブラリのImage Viewerのデータ構造とx、y、x軸の計算方法が調査できないため、座標を判断できない。
• また、座標の計算は、Image Viewerのデータ構造とcanvasでの拡大率に基づいて対応する必要があるが、
  これらの情報が全てライブラリの処理に含まれているため、計算できない

上記の調査結果を踏んで、AlignmentダイアログがどのライブラリのImage Viewerで実装するか、ご検討お願い致します。
AlignmentダイアログのUIの実装期限が5/9となりますので、早めに検討して頂ければ幸いです。

[itutu-tienday]

@Reactplus-Hao
上記調査結果について、了解しました。

Viewerの画像断面回転への対応について、以下issueへ情報を記載しています。

• MRI Image Viewer画像断面回転・Resize機能の組み込み #63

上記issueにも記載していますが、以下の対応方針としています。

• Alignment画面のViewerは、BrainBrowserですすめる。（～5/9）
• BrainBrowserへの画像断面回転の組み込みは、5/9～5/23 ですすめる。

[Reactplus-Hao]

@sanglevinh @linhb273
Việc xử lý để xoay nghiêng mặt cắt ảnh Viewer, KH đã tạo riêng task dưới đây cho mình
#63

Độ ưu tiên các task sẽ như dưới đây:

• Phần Viewer trong dialog Alignment thì sẽ chốt thư viện BrainBrowser（Deadline: ～5/9）
• Phần tích hợp xoay nghiêng mặt cắt ảnh vào BrainBrowser thì sẽ tiến hành trong thời gian: 5/9～5/23

[itutu-tienday]

• 5/8実装バージョンへのコメント
  • 細かな点ですが、画像の切り替え（ ←→ ）欄の付近に、現在の画像番号（*/N）を表示してください。 （※画面設計書v10にも反映しました）

[Reactplus-Hao]

• Gần cột switch ảnh （ ←→ ）, nhờ bên mình cho hiển thị mã số ảnh hiện tại (số lượng ảnh trong list đã chọn)（*/N）giúp họ

[itutu-tienday]

Alignment Dialogの設定値を、Workflow Run API へ渡す際のパラメータ（paramの設定値）について、以下の案へのレビューをお願いします。（対応可否、仕様への指摘、など）

• paramフォーマット案

  # images_alignment.yaml
  #
  # Repeat the following for the number of images.
  - 
    image_id: 0
    x_pos: 0
    y_pos: 0
    z_pos: 0
    x_rotate: 0.0
    y_rotate: 0.0
    z_rotate: 0.0
    x_resize: 0.0
    y_resize: 0.0
    z_resize: 0.0

• メモ

  • 現行システムでは、上記の様にパラメータの数が動的に変化するノードはないと思われるが、問題はないか？

[Reactplus-Hao]

Về phần parameter (giá trị setting của param) khi truyền giá trị setting trong Dialog Alignment đến Workflow Run API , họ dự định sẽ có format dưới đây.
Nhờ bên mình check xem có thể xử lý được như này không ạ?

• Format param

# images_alignment.yaml
#
# Repeat the following for the number of images.
- 
  image_id: 0
  x_pos: 0
  y_pos: 0
  z_pos: 0
  x_rotate: 0.0
  y_rotate: 0.0
  z_rotate: 0.0
  x_resize: 0.0
  y_resize: 0.0
  z_resize: 0.0

• Memo:
  • Trong hệ thống hiện tại, có vẻ như đang không có Node nào để thay đổi linh hoạt các parameter như trên. Vậy thì có vấn đề gì không?

[Reactplus-Hao]

@itutu-tienday

• paramフォーマット案について、問題がないと思います。

現行システムでは、上記の様にパラメータの数が動的に変化するノードはないと思われるが、問題はないか？

• Alignment Dialogの設定値を、Workflow Run API へ渡す仕様であれば、パラメータの数が動的に変化するノードが必要かと思いますので、ご検証よろしくお願い致します。

[Reactplus-Hao]

@itutu-tienday @emuemuJP
AlignmentダイアログのUIの実装について、対応とテスト実施が完了しましたので、ご確認お願い致します。

• テストエビデンス：
  • https://drive.google.com/file/d/1z4pflmF396kFB3AkBrNn_xSdYjm2loDs/view?usp=sharing
  • https://drive.google.com/file/d/1t_nGuTW8QOBQk8Kd9kiybBehokimCjdu/view?usp=sharing
  • https://drive.google.com/file/d/1bhnRBaPBj7dJjYnOhdMKaFAFOIUqU3jb/view?usp=sharing
• テストケース：
  • https://docs.google.com/spreadsheets/d/1fVFSiZMky76HGC9D7nvWCsm6ecWMFjd0kMnJ9qexw90/edit#gid=909937738

[itutu-tienday]

APIパラメータの確認について、ありがとうございます。
なお以下のコメントをいただいていますが、

パラメータの数が動的に変化するノードが必要かと思いますので、ご検証よろしくお願い致します。

上記の検証とは、Run API側で動的なパラメータを受け取り可能であるか？ の検証かと思われますが、その部分（BackEnd）の確認も、依頼したいと思います。

[Reactplus-Hao]

@itutu-tienday

• 要件としては、下記の認識で合っていますでしょうか。
  • Alignment Dialogの設定値を、Workflow Run API へ渡す時に、各のノードにパラメータ値が動的に追加・変化されます。
  • ProjectsをReproduceする時に、これらのパラメータ値を取得・再利用できるために、これらのパラメータ値がサーバーの方で保存されます。

上記の仕様であれば、対応できると思います。

[itutu-tienday]

要件としては、下記の認識で合っていますでしょうか。

合っているものと思います。
※現行のoptinistのRun APIを基本変えずに、そのまま利用する想定です。

また以下、質問を追記します。

• 質問

  • APIのparamパラメーターは、おそらくdict型で指定する必要があるようなので、後述のフォーマットで想定します。 （もし問題があれば、お伝えください）
  • 先日、FEの方から以下のコメントをいただいていますが、ここまでの情報整理状況で、FEの方は問題なく対応可能そうでしょうか？

    パラメータの数が動的に変化するノードが必要かと思いますので、ご検証よろしくお願い致します。

• paramフォーマット案

  # images_alignment.yaml
  
  alignments:
    # Repeat the following for the number of images.
    - 
      image_id: 0
      x_pos: 0
      y_pos: 0
      z_pos: 0
      x_rotate: 0.0
      y_rotate: 0.0
      z_rotate: 0.0
      x_resize: 0.0
      y_resize: 0.0
      z_resize: 0.0

[Reactplus-Hao]

@itutu-tienday

1. 「＜＞」キーで画像を切り替えると、前の画像で入力した設定値が、クリアされている模様。
2. OK ボタンで確定→再度Alignment Dialogを表示すると、入力した設定値が、クリアされている模様。

• 上記の２つの不具合は、API統合の処理と関連する内容のため、API統合の段階で確認させて頂きます。
  • 1.の不具合のテストケースを下記のテストケースのファイル（00. Alignment DialogシートのAlignment Dialog_19）に補足しました。
  • 2.の不具合は、現在のテストケースファイルの00. Alignment DialogシートのAlignment Dialog_36に存在しています。
    • テストケース：https://docs.google.com/spreadsheets/d/1fVFSiZMky76HGC9D7nvWCsm6ecWMFjd0kMnJ9qexw90/edit#gid=909937738
      • 備考：現在のテストケースでは、Pendingのテストケースは、API統合の処理と関連する内容のため、API統合の段階でテスト実施させて頂きます。

3.「Edit Imageset」で Edit Project画面へ遷移した後、OKで確定すると、Workflow画面へ戻っていない。

上記の不具合は、Alignment Dialogの内容ではなく、Workflow画面の内容となりますでしょうかね。
弊社の開発者が修正させて頂きます。

[Reactplus-Hao]

@itutu-tienday

1. 「＜＞」キーで画像を切り替えると、前の画像で入力した設定値が、クリアされている模様。

2. OK ボタンで確定→再度Alignment Dialogを表示すると、入力した設定値が、クリアされている模様。
3. 「Edit Imageset」で Edit Project画面へ遷移した後、OKで確定すると、Workflow画面へ戻っていない。

上記の３つの不具合を修正して、ソースコードをPushしましたので、ご確認お願い致します。
エビデンスは下記の動画となります。
https://drive.google.com/file/d/1qS4eFOw8nfB16P4vQqlBZKBeB2Wzxqww/view

[itutu-tienday]

不具合（No.1-3）の修正を確認。

あとは、関連issue #79 の完了をもって、クローズとする。

[Reactplus-Hao]

@itutu-tienday
なお、操作の仕様は下記の通りとなっていますが、仕様について問題がありませんでしょうか。

• Alignmentダイアログの「OK」ボタンを押さないと、設定したパラメータが保存できない
• Alignmentダイアログの「Cancel」と「X」ボタンを押すと、設定したパラメータが保存できない
• テキストボックスに数字を入力した場合、「Set Origin」ボタンと「OK」ボタンを押さないと、保存できない。
• テキストボックスに数字を入力した場合、「Set Origin」ボタンを押せずに、「OK」ボタンのみ押すと、パラメータデータが保存されていますが、そのパラメータが画像に反映されない

[itutu-tienday]

@Reactplus-Hao

ご記載の想定仕様と、現在の実装内容（5/18版）に、若干差異があるようです。 （不具合 No.1 の修正の影響？）
以下、ご確認ください。

--

• Alignmentダイアログの「OK」ボタンを押さないと、設定したパラメータが保存できない
• Alignmentダイアログの「Cancel」と「X」ボタンを押すと、設定したパラメータが保存できない

上記でOKです。

• テキストボックスに数字を入力した場合、「Set Origin」ボタンと「OK」ボタンを押さないと、保存できない。

→ 上記は、Set Originを押さなくても、OKクリックで、パラメータは保存されているようです。 （※この動作でよいものと思います）

→ また、「＜＞」をクリックした場合には、どのような挙動で実装とされているでしょうか？
　→ 現在は、Set Origin は押していないが、Set Originを押した場合と同じ挙動である様です。
　→ 暗黙的に Set Origin されている点は、少し分かりづらいかもしれませんが、現状の挙動でOKと思います。

• テキストボックスに数字を入力した場合、「Set Origin」ボタンを押せずに、「OK」ボタンのみ押すと、パラメータデータが保存されていますが、そのパラメータが画像に反映されない

→ 上記は、OKクリック後、再度ダイアログを開くと「パラメータは画像に反映されている」ようです。 （※この動作でよいものと思います）

[Reactplus-Hao]

Spec thao tác bên mình dự định có trên Alignment Dialog và nội dung thao tác bên mình đang làm có vẻ đang khác nhau. (Liệu có phải do chỉnh sủa bug No.1 nên bị ảnh hưởng không?)
Nhờ bên mình check giúp.

Cần phải nhấn vào button OK thì mới save parameter đã setting.
Nếu nhấn vào button X hoặc Cancel thì sẽ không save parameter đã setting

Spec trên thì OK rồi, và thao tác hiện tại thì cũng đang như vậy.

Sau khi đã nhập số vào trong text box, cần phải nhấn button Set Origin và button OK thì mới save parameter đã setting.

Họ check thao tác hiện tại, thì thấy có vẻ như không cần nhấn button Set Origin mà chỉ nhấn OK thì vẫn lưu parameter được (Họ nghĩ thao tác như này OK rồi)

• Ngoài ra, trường hợp đã click vào button Next/ Back thì bên mình đang làm với thao tác như nào?
  • Họ check thì thấy có vẻ như hiện tại hoạt động khi không nhấn button Set Origin và hoạt động khi nhấn Set Origin đang giống nhau.
  • Sẽ hơi khó hiểu ở phần Set Origin, nhưng với hoạt động như hiện tại thì OK rồi.

Trường hợp ko set origin mà chỉ nhấn OK thì vẫn lưu client nhưng ko apply vào ảnh

Họ check thao tác hiện tại, thì thấy sau khi click vào button OK và mở lại dialog thì parameter đã được phản ánh lên ảnh luôn (Thao tác như này OK)

[Reactplus-Hao]

@itutu-tienday
確かに現在の動作はご記載のようになっていますね。
なお、「＜＞」をクリックした場合には、Set Originを押した場合とSet Originを押さない場合は同じ挙動でパラメータを保存しましが、
Set Originを押した場合、そのパラメータを画像に反映されています。
現在の動作でよいものであれば、このまま対応させて頂きます。

[itutu-tienday]

@Reactplus-Hao
現時点では、現状の動作でOKです。

※なお Set Originボタンの挙動は、画像断面回転の件と関連しているため、回転機能の組み込み完了後、調整はあるかもしれません。