[FE] feat#254 그래프 hover시에 툴팁으로 커밋 정보 안내, UX 개선 #294

yunchaehyun · 2023-12-13T09:38:27Z

close #254

✅ 작업 내용

기존 텍스트 노드 삭제 후 툴팁 추가
- 그래프 circle 노드에 hover시에 툴팁으로 커밋 해시, 커밋 메시지 안내
- tspan 요소의 텍스트 너비(tspan이라 길이 아니고 너비에요! 한글이랑 영어랑 길이가 달라요)가 정해진 길이를 넘어가면 자르고 말줄임을 추가하도록 구현
- circle 노드에 커서 포인터 설정
툴팁, circle에서 툴팁으로 가는 경로에 hover하면 꺼지지 않도록, 그리고 요소에 mouseout되면 꺼지도록 구현
이게 가장 큰 어려움이였는데, 툴팁으로 가는 경로에 투명한 rect svg 요소를 넣어서 해결할 수 있었습니다!
(테스트용으로 border 처리해놓은 rect입니다)

그리고 노드 자체에 mouseout 이벤트를 넣어 노드가 호버된게 아니라면 툴팁을 지우도록 구현하였습니다!

  svg.select("#node").on("mouseout", (event) => {
    const nodeNotHovered = !(
      event.relatedTarget.nodeName === "rect" ||
      event.relatedTarget.nodeName === "tspan"
    );

    if (nodeNotHovered) {
      svg.select("#tooltip").remove();
    }
  });

📸 스크린샷(FE만)

기존	1차 구현	2차 구현 (UX 개선)

📌 이슈 사항

툴팁이 한번 렌더링되고 나서 update 함수로 다시 렌더링 되지 않고 내용만 바뀌도록 구현하고 싶은데 당장 코앞이 데모라 구현하지 못했습니다🥲

🟢 완료 조건

텍스트로 보여주는 커밋 메시지를 지우고 툴팁으로 정보를 보여준다

✍ 궁금한 점

노드에 호버되었냐는 불리언 변수인데 더 좋은거 없을까요..ㅠㅠ

 const nodeNotHovered = !(
      event.relatedTarget.nodeName === "rect" ||
      event.relatedTarget.nodeName === "tspan"
    );

YuHyun-P

수고하셨습니다!! 그래프에서 이제 해시도 볼 수 있네요ㅎㅎ

툴팁, circle에서 툴팁으로 가는 경로에 hover하면 꺼지지 않도록, 그리고 요소에 mouseout되면 꺼지도록 구현
이게 가장 큰 어려움이였는데, 툴팁으로 가는 경로에 투명한 rect svg 요소를 넣어서 해결할 수 있었습니다!

자세히 설명해주셔서 이해하기 편했습니다👍

툴팁이 한번 렌더링되고 나서 update 함수로 다시 렌더링 되지 않고 내용만 바뀌도록 구현하고 싶은데 당장 코앞이 데모라 구현하지 못했습니다🥲

이렇게 쌓여가는 기술 부채..끝나고 하나씩 상환합시다! D3 쪽은 할 게 많네요..ㅎㅎ

노드에 호버되었냐는 불리언 변수인데 더 좋은거 없을까요..ㅠㅠ

음 결국 노드랑 툴팁에서 mouseout 되었는지 판별하는 것 같아서 mouseoutNode는 어떤가요 ? 아니면 아래처럼 ?!

const hoverTooltip = event.relatedTarget.nodeName === "rect" || event.relatedTarget.nodeName === "tspan";
if (!hoverTooltip)

YuHyun-P · 2023-12-13T10:20:39Z

packages/frontend/src/components/graph/renderTooltip.ts

+}
+
+export default function renderTooltip(
+  svg: d3.Selection<SVGGElement | null, unknown, null, undefined>,


renderTooltip을 호출하는 쪽에서 타입 가드하면 여기 타입을 좁힐 수 있을 거 같지만..아직 D3 타입이 익숙하지 않아서 모르겠네요. 나중에 개선하면 좋을 것 같아요!

맞아요ㅠㅠ 저도 이걸로 고민했는데 당장은 떠오르지 않아서 우선 IDE에 뜨는 타입대로 작성하였습니다! 추후에 수정해볼게요!

YuHyun-P · 2023-12-13T10:21:29Z

packages/frontend/src/components/graph/renderTooltip.ts

+  // 투명한 네모를 위에 위치시키기
+  tooltip
+    .append("rect")
+    .attr("width", 30)
+    .attr("height", 30)
+    // 요기 바꿔보심 돼여
+    .attr("fill", "transparent")
+    .style("cursor", "pointer")
+    .attr("transform", transparentRectPosition);


이런 방법도 있네요 굿굿!👍👍👍👍

YuHyun-P · 2023-12-13T10:24:26Z

packages/frontend/src/components/graph/renderTooltip.ts

+
+        let start = 0;
+        let end = tspanMaxWidth;
+        let mid;
+        while (start < end) {
+          mid = Math.floor((start + end) / 2);
+          const truncatedText = `${originalText.slice(0, mid)}...`;
+          currentValueNode.text(truncatedText); // Set text here for width calculation
+          const textWidth =
+            currentValueNode?.node()?.getComputedTextLength() || 0;
+          if (textWidth > tspanMaxWidth) {
+            end = mid;
+          } else {
+            start = mid + 1;
+          }
+        }
+        const truncatedText = `${originalText.slice(0, start - 1)}...`;
+        currentValueNode.text(truncatedText);


말줄임에 이분 탐색이 사용되다니 신기해요!!
tspan 너비를 안 넘어갈 때까지 반복하면서 텍스트를 자르는 건가요?

네 맞습니다!!🤩
tspan의 너비를 잴 수 있는 방법이나 메서드가 뚜렷하지 않아 추가하게 되었습니다!

YuHyun-P · 2023-12-13T10:26:09Z

packages/frontend/src/components/graph/renderTooltip.ts

+  const tooltipDataFormat = [
+    {
+      text: "Commit Hash: ",
+      value: d.data.id.slice(0, 7),


해시 7자리만 보여주는 거 너무 좋아요!

yunchaehyun · 2023-12-13T10:42:11Z

수고하셨습니다!! 그래프에서 이제 해시도 볼 수 있네요ㅎㅎ

툴팁, circle에서 툴팁으로 가는 경로에 hover하면 꺼지지 않도록, 그리고 요소에 mouseout되면 꺼지도록 구현
이게 가장 큰 어려움이였는데, 툴팁으로 가는 경로에 투명한 rect svg 요소를 넣어서 해결할 수 있었습니다!

자세히 설명해주셔서 이해하기 편했습니다👍

툴팁이 한번 렌더링되고 나서 update 함수로 다시 렌더링 되지 않고 내용만 바뀌도록 구현하고 싶은데 당장 코앞이 데모라 구현하지 못했습니다🥲

이렇게 쌓여가는 기술 부채..끝나고 하나씩 상환합시다! D3 쪽은 할 게 많네요..ㅎㅎ

노드에 호버되었냐는 불리언 변수인데 더 좋은거 없을까요..ㅠㅠ

음 결국 노드랑 툴팁에서 mouseout 되었는지 판별하는 것 같아서 mouseoutNode는 어떤가요 ? 아니면 아래처럼 ?!
const hoverTooltip = event.relatedTarget.nodeName === "rect" || event.relatedTarget.nodeName === "tspan";
if (!hoverTooltip) 

09db8f1✨
좋아서 반영했어요! 감사합니다 ㅎㅎ

[#254]

yunchaehyun requested a review from YuHyun-P December 13, 2023 09:38

yunchaehyun self-assigned this Dec 13, 2023

YuHyun-P approved these changes Dec 13, 2023

View reviewed changes

yunchaehyun added 7 commits December 13, 2023 20:21

feat: D3 툴팁 렌더링 함수 구현

5502f84

[#254]

chore: 기존 커밋 메시지 안내 텍스트 요소 제거

6d6b781

[#254]

feat: 써클에 hover시 툴팁 적용

9887d5f

[#254]

feat: 노드 hover시에 툴팁 삭제되게 구현

eac6546

[#254]

style: 써클에 커서 포인터 설정

0d0badc

[#254]

refactor: 툴팁 mouseout 변수 변경

202cd8a

[#254]

chore: app, document 수정

64f816c

[#254]

yunchaehyun force-pushed the feature-fe-#254 branch from a7851f4 to 64f816c Compare December 13, 2023 11:23

yunchaehyun merged commit f83dfe7 into dev-fe Dec 13, 2023

yunchaehyun deleted the feature-fe-#254 branch December 13, 2023 11:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] feat#254 그래프 hover시에 툴팁으로 커밋 정보 안내, UX 개선 #294

[FE] feat#254 그래프 hover시에 툴팁으로 커밋 정보 안내, UX 개선 #294

yunchaehyun commented Dec 13, 2023

YuHyun-P left a comment •

edited

Loading

YuHyun-P Dec 13, 2023

yunchaehyun Dec 13, 2023

YuHyun-P Dec 13, 2023

YuHyun-P Dec 13, 2023

yunchaehyun Dec 13, 2023

YuHyun-P Dec 13, 2023

yunchaehyun commented Dec 13, 2023

[FE] feat#254 그래프 hover시에 툴팁으로 커밋 정보 안내, UX 개선 #294

[FE] feat#254 그래프 hover시에 툴팁으로 커밋 정보 안내, UX 개선 #294

Conversation

yunchaehyun commented Dec 13, 2023

✅ 작업 내용

📸 스크린샷(FE만)

📌 이슈 사항

🟢 완료 조건

✍ 궁금한 점

YuHyun-P left a comment • edited Loading

Choose a reason for hiding this comment

YuHyun-P Dec 13, 2023

Choose a reason for hiding this comment

yunchaehyun Dec 13, 2023

Choose a reason for hiding this comment

YuHyun-P Dec 13, 2023

Choose a reason for hiding this comment

YuHyun-P Dec 13, 2023

Choose a reason for hiding this comment

yunchaehyun Dec 13, 2023

Choose a reason for hiding this comment

YuHyun-P Dec 13, 2023

Choose a reason for hiding this comment

yunchaehyun commented Dec 13, 2023

YuHyun-P left a comment •

edited

Loading