feat(view): add transition in Summary

githru · Sep 12, 2022 · 34aee96 · 34aee96
1 parent 49a5c94
commit 34aee96
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.tsx b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.tsx
@@ -56,7 +56,8 @@ const drawClusterGraph = (
     .attr("transform", (d, i) => getClusterPosition(d, i, true));
   group
     .transition()
-    .duration(500)
+    .duration(300)
+    .ease(d3.easeLinear)
     .attr("transform", (d, i) => getClusterPosition(d, i));
 
   drawClusterBox(group);
@@ -81,13 +82,11 @@ const ClusterGraph = ({
   const clusterSizes = getClusterSizes(data);
   const graphHeight = getGraphHeight(clusterSizes);
   const selectedIndex = getSelectedIndex(data, selectedData);
-  const selectedPrevIndex = useRef(-1);
 
   const clusterGraphElements = data.map((cluster, i) => ({
     cluster,
     clusterSize: clusterSizes[i],
     selected: selectedIndex,
-    prevSelected: selectedPrevIndex.current,
   }));
 
   useEffect(() => {
@@ -97,19 +96,11 @@ const ClusterGraph = ({
       );
     };
     drawClusterGraph(svgRef, clusterGraphElements, handleClickCluster);
-    selectedPrevIndex.current = selectedIndex;
     return () => {
       destroyClusterGraph(svgRef);
     };
   }, [clusterGraphElements, selectedIndex, setSelectedData]);
 
-  useEffect(() => {
-    return () => {
-      selectedPrevIndex.current = -1;
-      destroyClusterGraph(svgRef);
-    };
-  }, [data]);
-
   return <svg ref={svgRef} width={SVG_WIDTH} height={graphHeight} />;
 };
 

diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.type.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.type.ts
@@ -6,7 +6,6 @@ export type ClusterGraphElement = {
   cluster: ClusterNode;
   clusterSize: number;
   selected?: number;
-  prevSelected?: number;
 };
 
 export type SVGElementSelection<T extends BaseType> = Selection<

diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.ts
@@ -25,7 +25,8 @@ export function getClusterPosition(
   i: number,
   isPrev = false
 ) {
-  const selected = (isPrev ? d.prevSelected : d.selected) || Infinity;
+  const curSelected = d.selected || Infinity;
+  const selected = isPrev ? Infinity : curSelected;
   const margin = selected >= 0 && selected < i ? DETAIL_HEIGHT : 0;
   const x = SVG_MARGIN.left;
   const y = SVG_MARGIN.top + i * (CLUSTER_HEIGHT + NODE_GAP) + margin;

diff --git a/packages/view/src/components/VerticalClusterList/Summary/Summary.scss b/packages/view/src/components/VerticalClusterList/Summary/Summary.scss
@@ -18,6 +18,16 @@
   border-radius: $border--radius;
 }
 
+@mixin animate($animation, $duration, $method, $times) {
+  animation: $animation $duration $method $times;
+}
+
+@mixin keyframes($name) {
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
 .summary__entire {
   width: 85%;
   margin-left: 20px;
@@ -158,9 +168,19 @@
 .summary_detail_container {
   height: 280px;
   margin-top: 20px;
-  overflow: auto;
+  overflow: scroll;
 
   &::-webkit-scrollbar {
     display: none; /* Chrome, Safari, Opera*/
   }
+
+  @include keyframes(open_detail) {
+    0% {
+      height: 0;
+    }
+    100% {
+      height: 280px;
+    }
+  }
+  @include animate(open_detail, 0.3s, linear, 1);
 }