-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #504 from 2taesung/main
#493 conflict 해결 pr
- Loading branch information
Showing
9 changed files
with
139 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -24,3 +24,7 @@ | |
stroke: var(--primary-color); | ||
stroke-width: 1; | ||
} | ||
|
||
.circle-group { | ||
fill: var(--primary-color); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawSubGraph.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import * as d3 from "d3"; | ||
import type { RefObject } from "react"; | ||
|
||
import type { ClusterGraphElement } from "../ClusterGraph.type"; | ||
import { getStartYEndY } from "../ClusterGraph.util"; | ||
import { GRAPH_WIDTH } from "../ClusterGraph.const"; | ||
|
||
// create tootip (HTML) | ||
const tooltip = d3 | ||
.select("body") | ||
.append("div") | ||
.attr("class", "tooltip") | ||
.style("position", "absolute") | ||
.style("z-index", "10") | ||
.style("visibility", "hidden") | ||
.text("Tooltip"); | ||
|
||
const calculateCirclePositions = (numOfCircles: number, startY: number, endY: number, gap: number) => { | ||
const positionStrategies = new Map<number, (start: number, end: number) => number[]>([ | ||
[1, (start, end) => [(start + end) / 2]], | ||
[2, (start, end) => [(3 * start + end) / 4, (start + 3 * end) / 4]], | ||
]); | ||
|
||
const strategy = positionStrategies.get(numOfCircles); | ||
|
||
return strategy ? strategy(startY, endY) : Array.from({ length: numOfCircles }, (_, i) => startY + i * gap); | ||
}; | ||
|
||
export const drawSubGraph = ( | ||
svgRef: RefObject<SVGSVGElement>, | ||
data: ClusterGraphElement[], | ||
detailElementHeight: number | ||
) => { | ||
const allCirclePositions = data.reduce( | ||
(acc, clusterData, index) => { | ||
if (clusterData.selected.current.includes(index)) { | ||
const { startY, endY } = getStartYEndY(clusterData, index, detailElementHeight); | ||
const numOfCircles = clusterData.cluster.commitNodeList.length; | ||
const gap = (endY - startY) / (numOfCircles - 1); | ||
const circlePositions = calculateCirclePositions(numOfCircles, startY, endY, gap); | ||
|
||
const enrichedPositions = circlePositions.map((y, circleIndex) => ({ y, clusterData, circleIndex })); | ||
return acc.concat(enrichedPositions); | ||
} | ||
return acc; | ||
}, | ||
[] as Array<{ y: number; clusterData: ClusterGraphElement; circleIndex: number }> | ||
); | ||
|
||
const circleRadius = 5; | ||
|
||
d3.select(svgRef.current) | ||
.selectAll(".circle-group") | ||
.data(allCirclePositions) | ||
.join("circle") | ||
.attr("class", "circle-group") | ||
.attr("cx", GRAPH_WIDTH / 2 + 2) | ||
.attr("cy", (d) => d.y) | ||
.attr("r", circleRadius) | ||
.on("mouseover", (_, { clusterData, circleIndex }) => { | ||
const { commitNodeList } = clusterData.cluster; | ||
const targetIndex = commitNodeList.length - 1 - circleIndex; | ||
const info = commitNodeList[targetIndex].commit.message; | ||
tooltip.text(info); | ||
return tooltip.style("visibility", "visible"); | ||
}) | ||
.on("mousemove", (event) => { | ||
return tooltip.style("top", `${event.pageY - 10}px`).style("left", `${event.pageX + 10}px`); | ||
}) | ||
.on("mouseout", () => { | ||
return tooltip.style("visibility", "hidden"); | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,44 @@ | ||
import { test, expect } from "@playwright/test"; | ||
|
||
test.describe("home", () => { | ||
const CLICK_INDEX = 0; | ||
test.beforeEach(async ({ page }) => { | ||
await page.goto("/"); | ||
}); | ||
|
||
test("has title", async ({ page }) => { | ||
await expect(page).toHaveTitle(/Githru/); | ||
}); | ||
|
||
test("when click cluster", async ({ page }) => { | ||
await page.waitForSelector("[data-testid=cluster-graph__container]", { state: "attached" }); | ||
|
||
const childContainers = await page.$$("[data-testid=cluster-graph__container]"); | ||
|
||
if (childContainers.length > CLICK_INDEX) { | ||
await childContainers[CLICK_INDEX].scrollIntoViewIfNeeded(); | ||
await childContainers[CLICK_INDEX].click(); | ||
} else { | ||
throw new Error("No child containers found"); | ||
} | ||
|
||
// waiting for changing | ||
await page.waitForTimeout(1000); | ||
|
||
const newChildContainers = await page.$$("[data-testid=cluster-graph__container]"); | ||
|
||
const targetIndexForCheck = CLICK_INDEX + 1; | ||
const transformPositionForCheck = 10 + targetIndexForCheck * 50 + 220; | ||
if (newChildContainers.length > targetIndexForCheck) { | ||
const transformValue = await newChildContainers[targetIndexForCheck].getAttribute("transform"); | ||
|
||
if (transformValue !== null) { | ||
expect(transformValue).toBe(`translate(2, ${transformPositionForCheck})`); | ||
} else { | ||
throw new Error("Transform attribute not found"); | ||
} | ||
} else { | ||
throw new Error("Not enough child containers found"); | ||
} | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters