MongoDB + Pagination 기능을 통한 메타데이터 Read 최적화 about web-dicom-management HOT 2 CLOSED

@doheez

궁금한거 있으면 말해줘

from web-dicom-management.

프론트엔드 문제점

현재 메타 데이터 테이블은 MUI 프레임워크에서 제공하는 client-side pagination을 사용한다. 전체 메타 데이터를 한 번에 로드한 후, 프론트엔드 단에서 전체 데이터 개수를 가지고 paging하는 방식이다.

따라서 프론트에서 기존 pagination 방식을 변경하지 않고 페이지별로 데이터를 불러온다면, 한 페이지 안에 포함되는 데이터가 (실제로는 전체 메타 데이터의 일부일 뿐인데도) 메타 데이터의 전부인 것으로 인식되어 다음 페이지로 이동하는 버튼 자체가 보이지 않게 된다.

해결 방법

Option 1

UI 프레임워크를 사용하지 않고 직접 테이블을 구현한다. 테이블 행 선택, 정렬, 필터링, Collapsible 행 등 다양한 기능을 포함해야 하므로 일일이 코드를 작성하는 것은 매우 어렵고 시간상 불가능할 것 같다.

Option 2

메타 데이터의 lazy loading을 구현하기 위해 Devextreme에서 제공하는 Data Grid의 Remote Virtual Scrolling 기능을 사용한다. 이를 통해 메타 데이터 테이블을 server-side pagination 방식으로 변경할 수 있을 것이라 생각한다. 이를 위해 우선 Devextreme Data Grid로 테이블 리팩토링이 선행되어야 한다. 추후 pagination 방식을 변경하기 위해 참고 문서를 기록해둔다.

Reference

[1] https://supportcenter.devexpress.com/ticket/details/t1001940/datagrid-how-to-add-server-side-paging
[2] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/remoteOperations/#paging
[3] https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RemoteVirtualScrolling/React/Light/

from web-dicom-management.