Front : 메타데이터 필터링 기능 구현

[BEOKS]

Description

현재 프로젝트는 전체 메타데이터를 보여주는 테이블 기능을 가지고 있다.
그러나 사용자는 Malignancy가 양성인 경우, 나이가 20살에서 50살 사이인 경우, 머신러닝 추론 확률값이 40% 이하인 경우 등
특정한 조건을 통해서 데이터를 찾아보는 것을 원한다. 이를 해결하기 위해서는 필터링 기능이 필요하다.

Solution

1. Data Grid로 리팩토링
MUI Data Grid Component에서는 아래와 같이 특정 속성에 대한 필터링 기능을 제공하고 있다.[1] 현재 사용하고 있는 Table Component 대신 이용해서 기존의 기능을 유지하되 Data Grid를 적용할 수 있다면 필터링 뿐만 아니라 Data Grid의 다양한 기능을 사용할 수 있기에 이상적일 것이다.
단, 이미지를 보여주는 Dicom Row를 따로 삽입하는 등의 기능을 구현할 때는 이슈가 생길 수 있다.

Alternative (option)

2. Search Component 기능 추가
Data Grid로 이동이 불가능하다면, 검색 기능을 가진 뷰 코드를 작성해야 한다. MUI의 Search Component 등을 이용하여 각 속성마다 검색조건을 적용할 수 있는 뷰를 만들면 일치하는 조건을 검색하기에는 좋겠지만, 범위형 검색기능을 추가하려면 추가적인 코드 작성이 필요하다. Data Grid로 리팩토링을 실패한 경우 더 충분히 고려해보자

궁금하거나 이해가 안된다면 아래 코맨트를 작성해주세요!

Reference

1. https://mui.com/components/data-grid/
2. https://smartdevpreneur.com/the-easiest-way-to-implement-material-ui-table-search

[doheez]

MUI Data Grid를 사용할 수 없는 이유

Table 컴포넌트와 다르게 Data Grid에서의 Collapsible Row는 Master Detail이라는 이름으로 존재하는데, 이는 MUI 유료 버전에서만 사용할 수 있는 컴포넌트이다.

Data Grid는 자식 컴포넌트로 Row를 따로 삽입하지 않고 Data Grid의 props로 데이터를 곧바로 전달하는 방식이기 때문에 직접 Collapse 기능을 구현하는 것도 불가능할 것으로 보인다.

대안: Devextreme Data Grid

Devextreme의 Data Grid로 테이블 리팩토링을 진행한다면 기존의 Collapse[1] 기능을 살리면서 Filtering[2] 기능 또한 수월하게 구현할 수 있을 것 같다.

Reference

[1] https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/React/Light/
[2] https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/React/Light/