refactor(view): rename class prop of element in ClusterGraph

githru · Sep 11, 2022 · 0ea3fc7 · 0ea3fc7
1 parent b9cc3a4
commit 0ea3fc7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss
@@ -1,18 +1,18 @@
-.cluster-container {
-  .cluster-box {
+.cluster-graph_container {
+  .cluster-graph_cluster {
     rx: 5;
     stroke-width: 1;
     stroke: rgb(13, 71, 161, 0.4);
     fill: transparent;
   }
 
-  .degree-box {
+  .cluster-graph_degree {
     rx: 5;
     fill: rgb(13, 71, 161, 0.4);
   }
 
   &:hover {
-    .cluster-box {
+    .cluster-graph_cluster {
       stroke-width: 3;
     }
   }

diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.tsx b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.tsx
@@ -23,7 +23,7 @@ import type {
 const drawClusterBox = (container: SVGElementSelection<SVGGElement>) => {
   container
     .append("rect")
-    .attr("class", "cluster-box")
+    .attr("class", "cluster-graph_cluster")
     .attr("width", GRAPH_WIDTH)
     .attr("height", CLUSTER_HEIGHT);
 };
@@ -32,7 +32,7 @@ const drawDegreeBox = (container: SVGElementSelection<SVGGElement>) => {
   const widthScale = d3.scaleLinear().range([0, GRAPH_WIDTH]).domain([0, 10]);
   container
     .append("rect")
-    .attr("class", "degree-box")
+    .attr("class", "cluster-graph_degree")
     .attr("width", (d) => widthScale(Math.min(d.clusterSize, 10)))
     .attr("height", CLUSTER_HEIGHT)
     .attr(
@@ -48,11 +48,11 @@ const drawClusterGraph = (
 ) => {
   const group = d3
     .select(svgRef.current)
-    .selectAll(".cluster-container")
+    .selectAll(".cluster-graph_container")
     .data(data)
     .join("g")
     .on("click", onClickCluster)
-    .attr("class", "cluster-container")
+    .attr("class", "cluster-graph_container")
     .attr("transform", (d, i) => getClusterPosition(d, i, true));
   group
     .transition()