메타데이터 테이블에서 개선해야 할 기능들

[doheez]

Description

1. Row Editing Detail

현재 Row Editing 시 해당 Row의 모든 Column 값을 수정하고 저장할 수 있다. 하지만 anonymized_id처럼 변경되면 안 되는 필드값이 존재하므로 특정 Column은 데이터를 수정할 수 없도록 막아야 한다.

2. Table Updating

Row Deleting 또는 Row Editing 직후 테이블이 자동으로 업데이트되도록 수정해야 한다. 리팩토링 전 기존 테이블에서는 Page 컴포넌트에 meteDataUpdated state를 두어서 메타데이터에 변화가 생기면 테이블 컴포넌트에서 setMetaDataUpdated(!metaDataUpdated)를 시행하여 테이블 자체를 새로 불러오도록 아래 코드를 작성했다.

// Page.js
useEffect(() => {
      if (presentProject.projectId ) {
          getMetaData();
      }
}, [presentProject, metaDataUpdated]);

// Page.js
const getMetaData = () => {
    const url = `api/MetaData/${presentProject.projectId}`;
    setMetaData('loading');
    axios.get(url)
        .then(response => {
            setMetaData(response.data.body);
        }).catch(error => {
                ...
        });
};

// Page.js
metaData==='loading'
?
    <Stack alignItems="center" marginTop={2}>
        <CircularProgress margin={2}/>
        <Typography margin={2}>
            {'Loading Metadata...'}
        </Typography>
    </Stack>
:
<DicomTable />

하지만 이 방법을 사용하면 로딩 화면으로 바뀌었다가 테이블이 다시 나타나므로 사용자가 원래 테이블에서 어떤 값을 보고 있었는지, 어디를 수정했는지 시선을 놓치는 등 사용자 경험이 떨어질 수 있다. 따라서 테이블에서 데이터만 새로 로딩할 수 있도록 로직을 바꾸면 좋겠다.

3. Convert String to Number

현재 백엔드에서 API로 받아온 메타데이터는 value가 모두 string type이기 때문에 다음과 같은 문제가 발생한다.

1. Column Sorting 기능을 사용하면 숫자 데이터가 문자열 비교 형식으로 데이터 정렬이 이루어진다.

   [1, 10, 100, 123, 2, 250, 3, 30, ...]

2. Column Filtering 시 10 < 찾는 값 < 20 형태의 숫자 범위 검색을 할 수 없다.

따라서 숫자 형태의 문자열 데이터는 숫자로 parsing해서 테이블의 dataSource로 사용해야 한다.

4. Split Table Toolbar Component

MetaDataGrid 컴포넌트가 담고 있는 코드의 양이 많아서 가독성이 떨어지므로 Table Toolbar 컴포넌트를 분리하여 따로 관리하고 싶다. 하지만 컴포넌트를 분리했더니 화면에 Table Toolbar 자체가 나타나지 않았다. 시도해본 방법은 다음과 같다.

1. Toolbar 및 하위 컴포넌트 코드를 새 파일로 옮겨서 컴포넌트 분리, MetaDataGrid에 분리한 컴포넌트 삽입
2. 1번처럼 분리 후 Toolbar>Item 컴포넌트의 하위 컴포넌트 또한 따로 분리해서 Toolbar>Item의 component[1] property로 전달
3. 2번과 동일하지만 menuItemComponent[2] property로 전달
4. 2번과 동일하지만 menuItemRender[3] property로 전달
5. 2번과 동일하지만 menuItemTemplate[4] property로 전달
6. 2번과 동일하지만 render[5] property로 전달
7. 2번과 동일하지만 template[6] property로 전달

Data Grid Toolbar 컴포넌트를 분리할 수 있는 다른 방법을 찾아봐야 한다.

5. Lazy Loading

메타데이터 테이블에서 지금처럼 Client-Side Pagination을 사용하면 메타데이터의 개수가 증가함에 따라 테이블 로딩 시간이 길어지는 문제가 발생한다. 따라서 #272 (comment) 를 참고하여 Data Grid가 Server-Side Pagination으로 동작하도록 변경해야 한다.

하지만 테이블 데이터를 한 페이지씩만 불러오게 된다면 테이블 전체 선택과 관련된 기능들(CSV/Dicom Download, Delete)은 어떻게 처리해야 할지 고민해봐야 한다.

Solution

방법을 찾아보면서 조금씩 추가할 예정

Reference

[1] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#component
[2] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#menuItemComponent
[3] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#menuItemRender
[4] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#menuItemTemplate
[5] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#render
[6] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#template

[BEOKS]

1. Row Editing Detail
   현재 Row Editing 시 해당 Row의 모든 Column 값을 수정하고 저장할 수 있다. 하지만 anonymized_id처럼 변경되면 안 되는 필드값이 존재하므로 특정 Column은 데이터를 수정할 수 없도록 막아야 한다.

이 부분은 프론트에서 구현하는 것은 데이터가 수정 불가능한지 따로 파악하기가 어렵기 때문에 매우 어렵다. 프론트에서는 지금처럼 모든 컬럼을 수정할 수 있도록 유지하며, Update API를 요청받은 벡엔드에서 만약 일관성이 위반되는 요청을 받을 경우 적절한 에러메시지를 응답하고 프론트에서는 이를 alert로 처리하는게 좋을 것 같다. @leeseungmin4966 벡엔드 참고바람

[BEOKS]

2. Table Updating
   Row Deleting 또는 Row Editing 직후 테이블이 자동으로 업데이트되도록 수정해야 한다. 리팩토링 전 기존 테이블에서는 Page 컴포넌트에 meteDataUpdated state를 두어서 메타데이터에 변화가 생기면 테이블 컴포넌트에서 setMetaDataUpdated(!metaDataUpdated)를 시행하여 테이블 자체를 새로 불러오도록 아래 코드를 작성했다.

이와 관련된 버그가 현재 확인되므로 #279 참조, 버그 수정 후 해당사항에 대한 리팩토링을 진행해야 할 듯 하다.

[BEOKS]

3. Convert String to Number
   현재 백엔드에서 API로 받아온 메타데이터는 value가 모두 string type이기 때문에 다음과 같은 문제가 발생한다.
   Column Filtering 시 10 < 찾는 값 < 20 형태의 숫자 범위 검색을 할 수 없다.
   따라서 숫자 형태의 문자열 데이터는 숫자로 parsing해서 테이블의 dataSource로 사용해야 한다.

이 부분은 데이터 업로드 할 때 리팩토링이 필요하다. CSV 파일을 파싱하는 과정에서 모든 데이터를 string으로 취급하기 때문이다. 현재 코드 수정 완료

[BEOKS]

4. Split Table Toolbar Component
   MetaDataGrid 컴포넌트가 담고 있는 코드의 양이 많아서 가독성이 떨어지므로 Table Toolbar 컴포넌트를 분리하여 따로 관리하고 싶다. 하지만 컴포넌트를 분리했더니 화면에 Table Toolbar 자체가 나타나지 않았다. 시도해본 방법은 다음과 같다.
   Toolbar 및 하위 컴포넌트 코드를 새 파일로 옮겨서 컴포넌트 분리, MetaDataGrid에 분리한 컴포넌트 삽입
   1번처럼 분리 후 Toolbar>Item 컴포넌트의 하위 컴포넌트 또한 따로 분리해서 Toolbar>Item의 component[1] property로 전달
   2번과 동일하지만 menuItemComponent[2] property로 전달
   2번과 동일하지만 menuItemRender[3] property로 전달
   2번과 동일하지만 menuItemTemplate[4] property로 전달
   2번과 동일하지만 render[5] property로 전달
   2번과 동일하지만 template[6] property로 전달
   Data Grid Toolbar 컴포넌트를 분리할 수 있는 다른 방법을 찾아봐야 한다.

이건 우선 에러를 해결하고 같이 리팩토링 해보면 좋을 것 같다.

[BEOKS]

5. Lazy Loading
   메타데이터 테이블에서 지금처럼 Client-Side Pagination을 사용하면 메타데이터의 개수가 증가함에 따라 테이블 로딩 시간이 길어지는 문제가 발생한다. 따라서 MongoDB + Pagination 기능을 통한 메타데이터 Read 최적화 #272 (comment) 를 참고하여 Data Grid가 Server-Side Pagination으로 동작하도록 변경해야 한다.
   하지만 테이블 데이터를 한 페이지씩만 불러오게 된다면 테이블 전체 선택과 관련된 기능들(CSV/Dicom Download, Delete)은 어떻게 처리해야 할지 고민해봐야 한다.

현재 이 부분을 어떻게 처리할 지 나도 고민이다. 만약 페이지네이션을 구현한다면 언급한 전체 선택 관련 기능 뿐만 아니라, 전체 통계 뷰를 파악하는데도 한계가 있을 것 같다. 만약 페이지네이션을 구현한다면 통계와 관련된 테이터를 조회하는 API를 따로 생성해야 하고, 전체 선택 관련 기능을 위한 API 도 따로 생성해주어야 할 것 같다. 그러나 현재 실사용 중인 프로젝트의 최대 메타데이터가 25000개 정도인데, 사용에 불편함이 없을 정도이기 때문에 에러 수정 작업을 우선한다.

[BEOKS]

오... 근데 이슈를 생각하는 깊이가 엄청 성장했네 대단하다. 잘 성장하는게 나중에 회사가면 이쁨 많이 받겠는데?

[doheez]

이게 다 보고 배울 선배가 있기 때문 아닙니까😉 아직 부족하니 더 가르쳐주십쇼🙏🏻
#279 는 일단 리팩토링한 테이블 dev 브랜치에 합쳐놓고 새 브랜치 파서 해볼겡