Metatron-discovery: Improve UI/UX Explore Data

[ufoscw]

Is your feature request related to a problem? Please describe.
Explore Data 화면의 기능 추가 및 UI 개선 사항입니다.

- 기능 추가

1. Tag List in LNB
2. 상단 검색바 (기본 검색바)

- 누락된 기능

1. Catalog Tree에서 Unclassified 분류 누락
2. Catalog 선택 후 선택된 Catalog Tree 강조
3. 카운트 0일 경우 Dim 처리
4. "Explore Data" 클릭 시 초기화면으로 이동

- UI 개선 사항

1. Description 값이 없을 경우 공간 확보
2. 추천 Data 배경 중복
3. Data Card View Margin
4. Gradient Background
5. My Favorite, Data Creator 항목 5개로 변경

[brandon-wonjune]

@AnnieHwang @ufoscw 해당 이슈 진행하는데 문의사항이 있습니다.
Q1.

해당 검색 이용시 아래에 출력되는 형태는 어떤 형태로 표시되어야 하나요?
각각의 해당하는 값을 표기하는 방식으로 표기해야되나요?
(예를들어, test를 검색시 test가 들어간 메타데이터를 각각 recommend, popular, updated, favorite, creator에서 각각 test가 있는 메타데이터를 표기)

Q2. Q1을 구현시 사용되는 api는 별도 조회 api없이 기존 recommend, popular, updated, favorite, creator에 nameContains를 param으로 넘겨서 조회하면 되나요?

Q3.

tags를 조회하는 api는 어느것을 사용해야되나요?

Q4. Q3에서 tag를 클릭시 발생하는 동작은 없나요?

[ufoscw]

A1. 검색 후에는 아래 목록 화면으로 이동하게 됩니다.
이번 스프린트에서는 필터영역을 제외하고 상단 검색바와 하단 목록으로 구성해주시면 됩니다.

A2. API는 아래를 사용하면 되며 검색 조건에 따라 파라미터를 아래처럼 구성해주세요.
기획서의 검색 범위중 Tags는 LNB의 tag 선택기능과 중복이라 제외하도록 하겠습니다.
검색 범위 : All, Data Name, Description, Creator

(GET) /api/metadatas

1. LNB Catalog 선택 후

(GET) /api/metadatas?catalogId={catalogId}

1-1. LNB Catalog 선택 후 검색 범위(All)

(GET) /api/metadatas?catalogId={catalogId}&keyword={searchKeyword}

1-2. LNB Catalog 선택 후 검색 범위(Data name)

(GET) /api/metadatas?catalogId={catalogId}&nameContains={searchKeyword}

1-3. LNB Catalog 선택 후 검색 범위(Description)

(GET) /api/metadatas?catalogId={catalogId}&descContains={searchKeyword}

1-4. LNB Catalog 선택 후 검색 범위(Creator)

(GET) /api/metadatas?catalogId={catalogId}&creatorContains={searchKeyword}

1. LNB Tags 선택 후

(GET) /api/metadatas?tag={tagName}

2-1. LNB Tags 선택 후 검색 범위(All)

(GET) /api/metadatas?tag={tagName}&keyword={searchKeyword}

2-2. LNB Tags 선택 후 검색 범위(Data name)

(GET) /api/metadatas?tag={tagName}&nameContains={searchKeyword}

2-3. LNB Tags 선택 후 검색 범위(Description)

(GET) /api/metadatas?tag={tagName}&descContains={searchKeyword}

2-4. LNB Tags 선택 후 검색 범위(Creator)

(GET) /api/metadatas?tag={tagName}&creatorContains={searchKeyword}

A3. 기존 tag 목록 조회에서 forTreeView Proejction을 사용해주세요. (Projection은 추가작업 후 다시 알려드릴게요.)

(GET) /api/metadatas/tags?projection=forTreeView

A4. Catalog 선택 후와 마찬가지로 목록 화면으로 이동합니다.

[AnnieHwang]

@brandon-wonjune 퍼블리셔에게 넘긴 디자인 검수 가이드올려요. 참고로 메인 리스트는 6개로, 우측 (favorite data 등)은 5개로 갯수 변경이 있습니다.

질문하셨던 것 중에 4번을 제가 대답할 수 있을것 같은데. 태그리스트가 나오고 태그를 선택하면 해당 태그가 있는 목록이 메인 리스트에 보여져야 합니다. (없어서 기획서 추가가했어요)

• 컨텐츠 영역의 검색결과와 좌측 태그 선택 영역에서의 태그 선택 결과가 같이 & 조건으로 결과에 반영되어야 해요 ( A 검색 + tag01을 선택한 경우 = A가 포함된 메타 정보를 가지면서 tag01이 포함된 메타데이터 리스트가 표출되어야 함)
  
  
  
  • 특정 태그를 선택 시, 굳이 데이터에는 해당 태그를 하이라이트 할 필요는 없을 것 같아요(컨텐츠 영역에서 검색된 것만 하이라이트 하면 될것 같습니다)
    
    
  
  

[ufoscw]

@brandon-wonjune
Tag Tree 용 Projection이 추가되었습니다.

(GET) /api/metadatas/tags?projection=forTreeView

• Respoonse Sample

[
    {
        "name": "aa",
        "id": "381fc537-eb5f-4c25-b951-c15507fea41f",
        "count": 2
    },
    {
        "name": "bb",
        "id": "65e21718-bc4b-472d-8734-acc584f3565f",
        "count": 1
    },
    {
        "name": "cc",
        "id": "7415fa5c-0d01-4cab-ae86-07afc9e8a94c",
        "count": 1
    },
    {
        "name": "dd",
        "id": "aacde2a7-72a8-45c9-9c1c-ad5e52603b7e",
        "count": 0
    }
]

[AnnieHwang]

@brandon-wonjune @ufoscw 혹시 아래와 같이 변경 가능할까요(초록색부분 참조)? 좀 사용해 보니깐.. Catalogs나 Tags 선택시 저렇게 검색 결과 레이블이 나와야 할것 같아서요. 만약 당장 가능하면.. 저희 디자인 하고 다시 말씀드릴수 있을것 같아요.

[brandon-wonjune]

@AnnieHwang 현 상태로는 초록색 부분의 경우 아래와 같이 검색결과 레이블을 표시하는것이 가능합니다.

// 카테고리가 선택된 경우
테스트 에 'word'에 대한 20건의 검색결과가 존재합니다.

// 태그가 선택된 경우
tag 에 'word'에 대한 20건의 검색결과가 존재합니다.

// 선택되지 않은 경우
catalog(or Tag)에 'word'에 대한 0건의 검색결과가 존재합니다.

가능은하지만 카탈로그의 경우 해당 카탈로그의 상위 뎁스에 대한 정보를 표시할수는 없습니다.
뎁스를 제외하고 표시하는것으로 수정할까요?

[AnnieHwang]

@brandon-wonjune @ufoscw 네 그럼 디자인 빨리 진행할께요. 저 검색 결과 요약 부분이 디자인이 기존 것도 좀 어색해서요. Catalog와 Tag 결과를 반영한 hierachy 부분 및 검색 결과 건수.. 이 부분 재 디자인 진행하고 말씀드릴께요~

[brandon-wonjune]

https://github.com/metatron-app/metatron-discovery/pull/2348#issuecomment-511248820

추가 요구사항에 따라 아래와 같이 수정하였습니다.

• 검색어가 있는경우 x 버튼이 search에 표시되도록 수정 (catalog, tag, 상단검색바)
• scroll 할 경우 catalog, tag lnb부분이 비어보이는 현상 수정

나머지 추가사항에 대해서는 디자인과 기획이 정해지는데로 작업하겠습니다.

[ufoscw]

@brandon-wonjune
우선 현재 PR은 Close하고 재 논의된 내용 포함해서 다시 PR을 오픈해주세요.

[AnnieHwang]

@brandon-wonjune @ufoscw 디자인이 아래와 같이 완료되었습니다. 현재 작성중인 기획안도 같이 공유드립니다. @brandon-wonjune 화요일 오후 버젼과 달라진건, 카타로그/태그 선택 시에도 컨텐츠 영역 상단에 필터 바 UI영역이 존재합니다. 화면을 통일시켰어요!

1. 검색한 경우
2. All
3. 카탈로그 선택
4. 태그선택
5. no data
   

[AnnieHwang]

@koeun222 이제 모든 MDM의 사용자화면(Explorer Data) 디자인이 다 나왔는데.. 딱 한장의 디자인이 안나왔어요. 부탁드려요. 해당 화면은 Favorite Data > Data Creator > 상세 화면이예요!

[brandon-wonjune]

@AnnieHwang 요청하신 디자인 변경에 대해 적용하였습니다.
api 작업이 완료되는데로 적용할 사항들 입니다.

• lnb 즐겨찾기
• metadata list 목록 우측 상단에서 catalog에 대한 뎁스
  

• 필터링 (적용 가능한 필터목록 필요)
  

[AnnieHwang]

@brandon-wonjune @ufoscw 혹시 필터링 항목에 Publisher는 올 수 없을까요?

[AnnieHwang]

@brandon-wonjune @koeun222 @ufoscw 즐겨찾기 기능은 #2386 에서 진행하도록 하겠습니다~

[ufoscw]

@brandon-wonjune

1. LNB 즐겨찾기는 이슈 분리하였으니 이 이슈에서는 기능을 뺴주세요.

1. Catalog Tree 전체 Hierarchy 조회 파라미터 추가되었습니다. request 결과는 depth 순서로 정렬된 카탈로그 배열입니다.

(GET) /catalogs/{catalogId}/tree(?includeAllHierarchies)

• request sample

/api/catalogs/04221adf-ac9f-46a7-aa1f-87c33517adb0/tree?includeAllHierarchies=true

• respoonse sample

[
    {
        "id": "1e7d0003-6375-447a-a51a-e041db5116a5",
        "name": "bbb"
    },
    {
        "id": "f41257e2-88f6-48c8-b217-9a8e35284658",
        "name": "ccc"
    },
    {
        "id": "04221adf-ac9f-46a7-aa1f-87c33517adb0",
        "name": "ddd"
    }
]

1. 필터링 조건은 @AnnieHwang 님과 논의 후 다시 알려드릴게요.

[ufoscw]

@brandon-wonjune

1. Catalogs 탭과 Tags 탭을 전환할때 선택된 카탈로그의 Tree가 최초 상태로 돌아갑니다.
   

1. 목록의 DataSource, DataBase, StagingDB의 색상이 동일합니다.
   

[thinkcsww]

@ufoscw

1. 카탈로그 Hierarchy 추가하였습니다.

1. Tree 상태 유지되도록 변경하였습니다.

2. 데이터 타입 색상 동일한 현상 수정하였습니다.

[ufoscw]

@thinkcsww @AnnieHwang
검색 결과 그리드의 상단 Filter 기능은 추후 이슈를 개별 등록하여 진행하도록 하겠습니다.
현재 상태에서 "Data type"으로 필터링 하는 부분의 기능은 빼서 다시 PR 오픈 해주세요.

[ufoscw]

@eltriny 위 코멘트 확인 부탁드려요.

[AnnieHwang]

@thinkcsww 목록 UI에 다소 개선사항이 있어 올려드려요~ 질문 있으시면 말씀주세요!!

[thinkcsww]

@AnnieHwang
favorite이 없는 경우가 우측에 Myfavorite이 없는 경우 인가요?

[AnnieHwang]

@thinkcsww 아니요. 좌측 Catalogs 상단에 있는 favorite말하는거예요. (아래 기획서 캡쳐분에서 노란박스 말하는거예요~Catalog의 favorite이요)

[thinkcsww]

@AnnieHwang
기획서에 보면 즐겨찾기 한 데이터가 없을 경우 'No favorite data' 노출이라고 되어있는데
이 경우에 어떻게 화면이 표시가 돼야할까요?

[AnnieHwang]

@thinkcsww 혹시 그 부분이 퍼블에 안나왔나요? 제가 디자이너분께 확인부탁드렸어요. 답변오면 말씀드릴께요!

[koeun222]

디자인 추가해서 퍼블에 오늘 넘겼습니다-

[koeun222]

popular data의 정보가 최소일경우(파일명+인기도&만든사람) Myfavorite list가 5개면 아래이미지처럼 정렬이 맞지않아서 My favorite 와 favorite creator는 4개 넣는걸로 @AnnieHwang 와 얘기했습니다-

[thinkcsww]

@AnnieHwang
수정했습니다.