feat(view): 스토리라인 필터 릴리즈/기여자 필터링 UI, 기능 구현 (#1027)

* feat: 기여자, 릴리즈 필터 추가

* feat: 스토리라인 필터 적용

* refactor: 스토리라인 차트 필터 스타일  변경 및  코드 주석 제거

Author: hyemimi

packages/view/src/components/StorylineChart/ReleaseVisualization.tsx

@@ -7,7 +7,6 @@ import {
   calculateReleaseNodePosition,
   findFirstReleaseContributorNodes,
   generateReleaseFlowLineData,
-  generateReleaseFlowLinePath,
 } from "./StorylineChart.util";
 
 /**
@@ -297,7 +296,34 @@ export const renderReleaseVisualization = ({
     .enter()
     .append("path")
     .attr("class", "flow-line")
-    .attr("d", (d) => generateReleaseFlowLinePath(d, xScale, yScale))
+    .attr("d", (d) => {
+      // 실제 노드 위치를 찾아서 경로 생성 (날짜까지 매칭)
+      const startActivity = releaseContributorActivities.find(
+        (a) =>
+          a.releaseIndex === d.startReleaseIndex &&
+          a.folderPath === d.startFolder &&
+          a.contributorName === d.contributorName &&
+          a.date.getTime() === d.startDate.getTime()
+      );
+      const endActivity = releaseContributorActivities.find(
+        (a) =>
+          a.releaseIndex === d.endReleaseIndex &&
+          a.folderPath === d.endFolder &&
+          a.contributorName === d.contributorName &&
+          a.date.getTime() === d.endDate.getTime()
+      );
+
+      if (!startActivity || !endActivity) {
+        return "";
+      }
+
+      const x1 = calculateReleaseNodePosition(startActivity, xScale, activitiesByRelease);
+      const y1 = (yScale(d.startFolder) || 0) + yScale.bandwidth() / 2;
+      const x2 = calculateReleaseNodePosition(endActivity, xScale, activitiesByRelease);
+      const y2 = (yScale(d.endFolder) || 0) + yScale.bandwidth() / 2;
+      const midX = (x1 + x2) / 2;
+      return `M ${x1},${y1} Q ${midX},${y1} ${midX},${(y1 + y2) / 2} Q ${midX},${y2} ${x2},${y2}`;
+    })
     .attr("fill", "none")
     .attr("stroke", (d) => colorScale(d.contributorName) as string)
     .attr("stroke-width", 2)

packages/view/src/components/StorylineChart/StorylineChart.scss

@@ -65,6 +65,11 @@
     font-weight: $font-weight-regular;
   }
 
+  &__filters {
+    margin-top: 0.5rem;
+    padding: 1rem;
+  }
+
   &__breadcrumb {
     display: flex;
     align-items: center;

packages/view/src/components/StorylineChart/StorylineChart.tsx

@@ -7,16 +7,18 @@ import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import WorkspacePremiumRoundedIcon from "@mui/icons-material/WorkspacePremiumRounded";
 import { Link } from "@mui/material";
 
-import { useDataStore } from "store";
+import { useDataStore, useStorylineFilterStore } from "store";
 
 import { DIMENSIONS, getResponsiveChartWidth } from "./StorylineChart.const";
 import "./StorylineChart.scss";
 import { extractReleaseBasedContributorActivities } from "./StorylineChart.util";
 import { renderReleaseVisualization } from "./ReleaseVisualization";
 import { useFolderNavigation } from "./useFolderNavigation";
+import StorylineFilters from "./StorylineFilters";
 
 const StorylineChart = () => {
   const [totalData] = useDataStore(useShallow((state) => [state.data]));
+  const { releaseRange, selectedContributors } = useStorylineFilterStore();
 
   const svgRef = useRef<SVGSVGElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -39,6 +41,41 @@ const StorylineChart = () => {
 
   const breadcrumbs = useMemo(() => getBreadcrumbs(), [getBreadcrumbs]);
 
+  // 원본 활동 데이터 계산
+  const releaseContributorActivities = useMemo(() => {
+    if (!totalData || totalData.length === 0 || releaseTopFolderPaths.length === 0) {
+      return [];
+    }
+
+    const currentDepth = currentPath === "" ? 1 : currentPath.split("/").length + 1;
+    return extractReleaseBasedContributorActivities(totalData, releaseTopFolderPaths, currentDepth);
+  }, [totalData, releaseTopFolderPaths, currentPath]);
+
+  // 필터링된 activities 계산
+  const filteredActivities = useMemo(() => {
+    if (releaseContributorActivities.length === 0) {
+      return [];
+    }
+
+    let filtered = [...releaseContributorActivities];
+
+    // 릴리즈 범위 필터
+    if (releaseRange) {
+      filtered = filtered.filter(
+        (activity) =>
+          activity.releaseIndex >= releaseRange.startReleaseIndex &&
+          activity.releaseIndex <= releaseRange.endReleaseIndex
+      );
+    }
+
+    // 기여자 필터
+    if (selectedContributors.length > 0) {
+      filtered = filtered.filter((activity) => selectedContributors.includes(activity.contributorName));
+    }
+
+    return filtered;
+  }, [releaseContributorActivities, releaseRange, selectedContributors]);
+
   useEffect(() => {
     const updateWidth = () => {
       const containerWidth = containerRef.current?.clientWidth;
@@ -66,20 +103,6 @@ const StorylineChart = () => {
   }, []);
 
   const { topContributorName, releaseRangeLabel } = useMemo(() => {
-    if (!totalData || totalData.length === 0 || releaseTopFolderPaths.length === 0) {
-      return {
-        topContributorName: null,
-        releaseRangeLabel: "...",
-      };
-    }
-
-    const currentDepth = currentPath === "" ? 1 : currentPath.split("/").length + 1;
-    const releaseContributorActivities = extractReleaseBasedContributorActivities(
-      totalData,
-      releaseTopFolderPaths,
-      currentDepth
-    );
-
     if (releaseContributorActivities.length === 0) {
       return {
         topContributorName: null,
@@ -125,7 +148,7 @@ const StorylineChart = () => {
       topContributorName: mostActiveContributor || null,
       releaseRangeLabel: rangeLabel || "...",
     };
-  }, [totalData, releaseTopFolderPaths, currentPath]);
+  }, [releaseContributorActivities]);
 
   useEffect(() => {
     if (!totalData || totalData.length === 0) {
@@ -142,17 +165,9 @@ const StorylineChart = () => {
 
     const svg = d3.select(svgRef.current).attr("width", chartWidth).attr("height", DIMENSIONS.height);
 
-    // activity가 있는 폴더 카운트
-    const currentDepth = currentPath === "" ? 1 : currentPath.split("/").length + 1;
-    const releaseContributorActivities = extractReleaseBasedContributorActivities(
-      totalData,
-      releaseTopFolderPaths,
-      currentDepth
-    );
-
     svg.selectAll("*").remove();
 
-    if (releaseContributorActivities.length === 0) {
+    if (filteredActivities.length === 0) {
       svg
         .append("text")
         .attr("x", chartWidth / 2)
@@ -167,12 +182,12 @@ const StorylineChart = () => {
 
     renderReleaseVisualization({
       svg,
-      releaseContributorActivities,
+      releaseContributorActivities: filteredActivities,
       releaseTopFolderPaths,
       tooltipRef,
       onFolderClick: navigateToFolder,
     });
-  }, [totalData, releaseGroups, releaseTopFolderPaths, navigateToFolder, currentPath, chartWidth]);
+  }, [filteredActivities, releaseTopFolderPaths, navigateToFolder, chartWidth, totalData, releaseGroups]);
 
   const topContributorLabel = topContributorName || "...";
 
@@ -218,6 +233,9 @@ const StorylineChart = () => {
 
         <div className="storyline-chart__subtitle">{releaseRangeLabel}</div>
       </div>
+      <div className="storyline-chart__filters">
+        {releaseContributorActivities.length > 0 && <StorylineFilters activities={releaseContributorActivities} />}
+      </div>
 
       <svg
         className="storyline-chart__chart"

packages/view/src/components/StorylineChart/StorylineChart.type.ts

@@ -32,7 +32,9 @@ export interface ReleaseContributorActivity {
 export interface ReleaseFlowLineData {
   startReleaseIndex: number;
   startFolder: string;
+  startDate: Date;
   endReleaseIndex: number;
   endFolder: string;
+  endDate: Date;
   contributorName: string;
 }

packages/view/src/components/StorylineChart/StorylineChart.util.ts

@@ -75,12 +75,25 @@ export function generateReleaseFlowLineData(
       const current = activities[i];
       const next = activities[i + 1];
 
-      if (current.releaseIndex !== next.releaseIndex) {
+      // 같은 릴리즈, 같은 폴더, 같은 시간이 아닌 경우 선을 그림
+      // (오프셋이 다른 경우 = 다른 릴리즈, 다른 폴더, 또는 다른 시간)
+      const isSamePosition =
+        current.releaseIndex === next.releaseIndex &&
+        current.folderPath === next.folderPath &&
+        current.date.getTime() === next.date.getTime();
+
+      // 릴리즈가 연속적인지 확인 (같은 릴리즈이거나 바로 다음 릴리즈인 경우만)
+      const isConsecutiveRelease =
+        current.releaseIndex === next.releaseIndex || current.releaseIndex + 1 === next.releaseIndex;
+
+      if (!isSamePosition && isConsecutiveRelease) {
         flowLineData.push({
           startReleaseIndex: current.releaseIndex,
           startFolder: current.folderPath,
+          startDate: current.date,
           endReleaseIndex: next.releaseIndex,
           endFolder: next.folderPath,
+          endDate: next.date,
           contributorName: current.contributorName,
         });
       }