[view] Vertical Cluster List

[jejecrunch]

Description

• Collapsable Graph by @vgihan
  
  위 이미지를 수직으로 변형하여 적용

• Profile & Summary by @jejecrunch
  

Question

1. 수직축 길이 어떻게 변형되게 만들건지?
2. 프로필 이미지가 들어가는 게 맞는지?
3. Summary 내용에는 어떤 키워드가 들어가고 엔진 팀에서 어떻게 건네주는지?

Task

• Collasable Graph 구현
• Profile & Summary 구현

[vgihan]

정리 Good ~!

[jin-Pro]

3 . Summary 내용에는 어떤 키워드가 들어가고 엔진 팀에서 어떻게 건네주는지?
요 내용은 같이 얘기해보고 engine팀과 협의 보면 좋을 것 같아요!

[jejecrunch]

3 . Summary 내용에는 어떤 키워드가 들어가고 엔진 팀에서 어떻게 건네주는지? 요 내용은 같이 얘기해보고 engine팀과 협의 보면 좋을 것 같아요!

디스코드에서 말씀드렸지만 다른 분들도 보시면 좋을 것 같아서 우선 reply 달겠습니다 !

type Info = {
  ids: Array<Array<string>>;
  names: Array<Array<string>>;
  messages: Array<string>;
  lengths: Array<number>;
  graphHeights: Array<number>;
};

저희 팀은 우선 위의 타입으로 사용하게 될 것 같습니다 !
자세하게 말씀드리자면 우선 ids는 커밋의 id를 모아둔 배열이고, names는 author 모아둔 배열, messages는 커밋 메시지 모아둔 배열입니다.
lengths는 각 커밋의 길이를 모아둔 배열이고, graphHeights는 커밋의 길이에 따른 height을 미리 넣어둔 배열입니다 !
@vgihan 님께서 lengths, garphHeights 속성을 사용하시고, @jejecrunch 제가 ids, names, messages를 사용하고 있습니다.

혹시 더 설명이 필요하시다면 또 댓글 달아주세요 !

[jejecrunch]

1. 수직축 길이 어떻게 변형되게 만들건지?
   • 우선은 조금 더 고민해봐야겠지만 0.1 버전에서는 수직축 길이를 변형되지 않는 것이 1차 구현, 시간이 조금 더 남으면 변형되도록 추가 구현을 할 생각입니다.
2. 프로필 이미지가 들어가는 게 맞는지?
   • 프로필 이미지를 아직 받아오기 조금 힘들다는 얘기를 들어서 우선은 이름의 첫글자 + 툴팁으로 풀네임 보이게 하는 방식으로 가기로 했습니다.
3. Summary 내용에는 어떤 키워드가 들어가고 엔진 팀에서 어떻게 건네주는지?
   • 키워드 부분을 아직 가공하기 힘들다는 얘기를 들어서 fake data 기반으로 했을 때 클러스터의 마지막 커밋 메시지를 띄워주는 방식으로 하기로 했습니다.

여태까지 나왔던 내용 중에 일부만 정리해두겠습니다 !

[jejecrunch]

220830 진행상황

@vgihan 님 - graph 부분

@jejecrunch - summary 부분

추가로 구현해야할 것

@vgihan 님

• commit별로 dot을 지정해서 연결해두는 게 어떤가? 에 대한 답이 있다면 그거에 맞춰서 추가로 진행

@jejecrunch

• 프로필 파트 세로 정렬
• 툴팁 만들기
• 프로필 hover했을 때 애니메이션 추가
• summary 클릭했을 때 인터랙션 추가 (detail 화면 나오도록)

[jin-Pro]

상세한 설명 감사드립니다! 🤩

[vgihan]

정리 감사합니다 ㅜㅜ 😄

[jin-Pro]

@jejecrunch
해당 Summary 데이터는 Cluster의 경우 마지막 Commit 정보만 나타내주나요??
cluster의 경우 처음 commit message를 보여주고 클릭하면 cluster 내부 commit들을 모두 보여주는게 맞지 않나요??
하나의 commit을 클릭한 경우 Detail Component를 렌더링 해주어야할것같은데 어떻게 생각하시나요?

[jejecrunch]

@jejecrunch 해당 Summary 데이터는 Cluster의 경우 마지막 Commit 정보만 나타내주나요?? cluster의 경우 처음 commit message를 보여주고 클릭하면 cluster 내부 commit들을 모두 보여주는게 맞지 않나요?? 하나의 commit을 클릭한 경우 Detail Component를 렌더링 해주어야할것같은데 어떻게 생각하시나요?

@jin-Pro 님 질문 감사합니다 ! Summary에서 text 데이터는 cluster 마지막 commit message만을 출력합니다 !
summary에서 마지막 commit message 클릭 -> summary에서 여러개의 commit message를 보여줌 -> 특정한 한개의 commit message를 클릭 -> detail 컴포넌트로 전달
제가 이해한 건 위와 같은 프로세스인데 이 프로세스를 말씀하시는 게 맞을까요?
맞다면 4일 안에 제가 구현을 할 수 있을지 걱정이네요 ... ㅜ

[jin-Pro]

@jejecrunch 해당 Summary 데이터는 Cluster의 경우 마지막 Commit 정보만 나타내주나요?? cluster의 경우 처음 commit message를 보여주고 클릭하면 cluster 내부 commit들을 모두 보여주는게 맞지 않나요?? 하나의 commit을 클릭한 경우 Detail Component를 렌더링 해주어야할것같은데 어떻게 생각하시나요?

@jin-Pro 님 질문 감사합니다 ! Summary에서 text 데이터는 cluster 마지막 commit message만을 출력합니다 ! summary에서 마지막 commit message 클릭 -> summary에서 여러개의 commit message를 보여줌 -> 특정한 한개의 commit message를 클릭 -> detail 컴포넌트로 전달 제가 이해한 건 위와 같은 프로세스인데 이 프로세스를 말씀하시는 게 맞을까요? 맞다면 4일 안에 제가 구현을 할 수 있을지 걱정이네요 ... ㅜ

해당 내용 관련해서 discussion으로 넘길게요! 이야기가 길어질 것 같아요!

[jejecrunch]

220902 진행상황

#62 by @vgihan

#63 by @jejecrunch

이전 진행상황

더 많은 이야기를 했는데 아래 이야기만 생각나는 ...

1. 고정된 height값을 어떻게 하면 좋을지 언급 -> 1개의 커밋 height 사이즈를 50px로 결정

220903 진행상황

#62 은 우선 머지되어서 #63 과 합치고 있고 싱크 조율 중

결정된 사항

1. 인터랙션 프로세스
   1-1. 초기화면 : 전체 구간이 선택된 채로 모든 컴포넌트가 보여야 함
   1-2. 데이터가 선택되었을 때 : 그 구간의 클러스터와 전체 커밋 리스트, 통계 화면이 보여야 함
2. 기존에 Summary 부분에서 전체 Commit List가 보이는 방식을 채용
   2-1. 이후에 기존 Summary를 살리고 클릭하는 인터랙션을 추가하여 Detail로써 Commit List를 보여주는 방식을 구현할 예정
3. 커밋 메시지가 한줄에 다 보이지 않는 경우 말줄임표 사용
4. 클러스터 간 간격은 20px
5. 처음 시작 클러스터는 margin top을 10px 주고 시작

해야할 일

• height 안 맞는 부분 싱크 조율
• 반응형

[jejecrunch]

220904 진행상황

upstream main에 있는 내용

1. Cluster Graph - 한 클러스터 안에 commit 개수에 맞춰 height을 지정하여 보여줌
2. Summary - 한 클러스터의 전체 커밋 리스트를 보여줌
3. 아직 detail 컴포넌트로 들어가는 인터랙션은 없음

결정된 사항

• @vgihan : graph height은 고정하고 색과 같이 다른 방법으로 commit 갯수를 시각화해보는 작업
• @jejecrunch : summary는 전체 commit list가 아닌 기존처럼 cluster를 요약해서 보여주는 방식으로 작업
• 인터랙션 : graph나 summary를 선택하면 detail 컴포넌트가 열리고 detail 컴포넌트에서는 해당 클러스터의 전체 커밋 리스트가 보이도록
  해당 내용의 detail 컴포넌트는 @jin-Pro 님께서 맡아주시기로 하셨습니다.
  (이 부분은 summary 컴포넌트에서 detail 컴포넌트로 taskId를 전달해주기로 하였습니다.)

해야할 일

@vgihan

• graph height 고정
• commit 갯수 시각화

@jejecrunch

• 기존처럼 cluster 요약
• 인터랙션 추가
• detail 컴포넌트 클러스터 아래에 띄우도록 조정
• taskId 추가해서 type 수정

[vgihan]

220905 진행상황

ClusterGraph

• 기존 ClusterGraph는 Cluster Size (cluster에 포함된 commit 개수) 를 Graph의 height으로 표시했다면, 현재 진행중인 v2는 githru와 동일하게 height가 늘어나는 것이 아닌, 내부에 rect를 추가하여 degree를 나타내도록 수정했습니다.
• 이후 ClusterGraph의 Cluster element 클릭 시 Detail Component가 열리는 인터랙션 추가하면 될 것 같습니다.

Result

[jejecrunch]

220906 진행상황

Summary

• 현재 upstream main 브랜치에 올라가있는 Summary는 전체 커밋 리스트를 클러스터마다 여백을 주어 보여주고 있습니다.
• 현재 진행중인 v2는
  • 이전에 Summary에서 작업했던 내용과 동일하게 클러스터별로 작업한 Author 중복 없이 보여줍니다. (@vgihan 님께서 많이 도움을 주셨습니다! 감사합니다 (_ _ *))
  • 메시지의 경우는 클러스터의 마지막 커밋 메시지가 아닌 클러스터 안에 있는 커밋 메시지의 맨 앞 단어만 추출하여 counting하고 가장 많이 나온 단어부터 보여주도록 수정하였습니다.
    • 그렇게 변경한 이유는 기존의 마지막 커밋 메시지만 보여주는 게 그 클러스터에서 어떤 일이 일어나는지 정확히 알 수 없다고 느껴졌고, 커밋 메시지만 보여준다면 해당 부분에서 오해의 소지가 발생할 수 있을 것 같아 변경하게 되었습니다 ! 현재로서는 앞 단어 모음 배열이 가장 현실적이고 해당 클러스터를 얘기해줄 수 있을 것 같아 진행하였습니다. 이후 엔진팀에서 가공해주신다면 그 데이터로 대체될 예정입니다.
  • 클릭 이벤트 발생 시 디테일 컴포넌트가 출력되는 인터랙션은 모두 합친 후에 진행해야할 것 같아서 보류하였습니다.

Result

생각해보아야 할 점

1. 기존 message 부분에 들어가는 맨 앞 단어 모음들에서 가장 많이 나온 단어를 어떻게 보기 좋게 시각화해줄 것인가?
2. author 별로 background color가 다르게 들어갈 수 있는 방법

To do

• author 별로 background color 다르게 들어가게 하기

[jejecrunch]

해당 내용을 1차적으로는 모두 구현을 마친 상태이고, 각 맡은 기능 별로 이슈를 달아두는 게 좋을 것 같아 현 상태에서 닫겠습니다.