[#noissue] FlameGraph > fix bug & add zoom in/out button'

pinpoint-apm · Jan 8, 2025 · 3c070be · 3c070be
1 parent bfa1494
commit 3c070be
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/web-frontend/src/main/v3/apps/web/tsconfig.json b/web-frontend/src/main/v3/apps/web/tsconfig.json
@@ -22,6 +22,7 @@
       "@/routes/*": ["routes/*"],
       "@/utils/*": ["utils/*"],
       "@/*": ["*"],
+      "@pinpoint-fe/ui": ["../../../packages/ui/src"],
       "@pinpoint-fe/ui/*": ["../../../packages/ui/src/*"]
     }
   },

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameGraph.tsx b/web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameGraph.tsx
@@ -5,6 +5,9 @@ import { FlameNode, FlameNodeType, FlameNodeProps } from './FlameNode';
 import { FlameAxis } from './FlameAxis';
 import { FlameGraphConfigContext, flameGraphDefaultConfig } from './FlameGraphConfigContext';
 import { FlameTimeline } from './FlameTimeline';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui';
+import { GoZoomIn, GoZoomOut } from 'react-icons/go';
+import { Button } from '../ui';
 
 export interface FlameGraphProps<T>
   extends Pick<FlameNodeProps<T>, 'customNodeStyle' | 'customTextStyle' | 'onClickNode'> {
@@ -34,6 +37,10 @@ export const FlameGraph = <T,>({
   const widthRatio = (containerWidth - config.padding.left - config.padding.right) / widthOffset;
   const [scrollLeft, setScrollLeft] = React.useState(0);
 
+  React.useEffect(() => {
+    setScrollLeft(0);
+  }, [data]);
+
   React.useEffect(() => {
     const handleWheel = (event: WheelEvent) => {
       if (event.metaKey) {
@@ -127,8 +134,42 @@ export const FlameGraph = <T,>({
     return MaxDepth;
   }
 
+  function handleZoomClick(type: 'in' | 'out') {
+    setZoom((prevZoom) => {
+      if (type === 'in') {
+        return prevZoom + 1;
+      }
+      return Math.max(1, prevZoom - 1);
+    });
+  }
+
   return (
     <FlameGraphConfigContext.Provider value={{ config }}>
+      <TooltipProvider>
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <div className="absolute space-x-1 right-[275px] -top-10">
+              <Button
+                variant={'outline'}
+                size="sm"
+                className="h-7"
+                onClick={() => handleZoomClick('in')}
+              >
+                <GoZoomIn size={15} />
+              </Button>
+              <Button
+                variant={'outline'}
+                size="sm"
+                className="h-7"
+                onClick={() => handleZoomClick('out')}
+              >
+                <GoZoomOut size={15} />
+              </Button>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>Zoom In/Out: Command + Scroll</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <div className="relative w-full h-full overflow-x-auto" ref={containerRef}>
         <svg width={containerWidth} height={config.height.timeline} className="shadow-md">
           <FlameTimeline width={containerWidth} start={start} end={end} zoom={zoom} />

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameNode.tsx b/web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameNode.tsx
@@ -138,6 +138,8 @@ export const FlameNode = React.memo(FlameNodeComponent) as <T>(
 
 const getEllipsizedText = (text: string, maxWidth = 1, svgRef?: React.RefObject<SVGSVGElement>) => {
   if (!svgRef?.current) return text;
+
+  if (maxWidth <= 0) return null;
   else {
     const svg = svgRef.current;
     const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');