Merge branch 'master' into fix/export-title-wrapping

Author: adibarra

packages/app/src/components/inference/ui/GPUGraph.tsx

@@ -245,12 +245,12 @@ const GPUGraph = React.memo(
       const root = d3.select(svg);
       root
         .selectAll<SVGGElement, InferenceData>('.dot-group')
-        .transition()
+        .transition('legend-hover')
         .duration(150)
         .style('opacity', (d) => (`${d.date}_${d.hwKey}` === seriesId ? 1 : 0.15));
       root
         .selectAll<SVGPathElement, unknown>('.roofline-path')
-        .transition()
+        .transition('legend-hover')
         .duration(150)
         .style('opacity', function () {
           const key = (d3.select(this).datum() as { key: string } | null)?.key ?? '';
@@ -263,8 +263,12 @@ const GPUGraph = React.memo(
       const svg = chartRef.current?.getSvgElement?.();
       if (!svg) return;
       const root = d3.select(svg);
-      root.selectAll('.dot-group').transition().duration(150).style('opacity', null);
-      root.selectAll('.roofline-path').transition().duration(150).style('opacity', null);
+      root.selectAll('.dot-group').transition('legend-hover').duration(150).style('opacity', null);
+      root
+        .selectAll('.roofline-path')
+        .transition('legend-hover')
+        .duration(150)
+        .style('opacity', null);
     }, []);
 
     if (data.length === 0) {

packages/app/src/components/inference/ui/ScatterGraph.tsx

@@ -489,12 +489,12 @@ const ScatterGraph = React.memo(
         const root = d3.select(svg);
         root
           .selectAll<SVGGElement, InferenceData>('.dot-group')
-          .transition()
+          .transition('legend-hover')
           .duration(150)
           .style('opacity', (d) => (!isPointVisible(d) ? 0 : String(d.hwKey) === hwKey ? 1 : 0.15));
         root
           .selectAll<SVGPathElement, unknown>('.roofline-path')
-          .transition()
+          .transition('legend-hover')
           .duration(150)
           .style('opacity', function () {
             if (!isRooflineVisible(this)) return 0;
@@ -510,12 +510,12 @@ const ScatterGraph = React.memo(
       const root = d3.select(svg);
       root
         .selectAll<SVGGElement, InferenceData>('.dot-group')
-        .transition()
+        .transition('legend-hover')
         .duration(150)
         .style('opacity', (d) => (isPointVisible(d) ? 1 : 0));
       root
         .selectAll<SVGPathElement, unknown>('.roofline-path')
-        .transition()
+        .transition('legend-hover')
         .duration(150)
         .style('opacity', function () {
           return isRooflineVisible(this) ? 1 : 0;

packages/app/src/components/ui/chart-legend-item.tsx

@@ -26,8 +26,8 @@ const ChartLegendItem: React.FC<CommonLegendItemProps> = ({
   title,
   isActive,
   onClick,
-  onHover: _onHover,
-  onHoverEnd: _onHoverEnd,
+  onHover,
+  onHoverEnd,
   hw,
   isHighlighted,
   asFragment = false,
@@ -53,6 +53,8 @@ const ChartLegendItem: React.FC<CommonLegendItemProps> = ({
           isLegendExpanded ? 'w-fit whitespace-nowrap' : '',
         )}
         title={!isLegendExpanded && isLongText ? label : title}
+        onMouseEnter={onHover && isActive ? () => onHover(hw || name) : undefined}
+        onMouseLeave={onHoverEnd && isActive ? onHoverEnd : undefined}
       >
         <span
           className="inline-block w-3 h-3 rounded-full mr-2 flex-shrink-0 transition-opacity"

packages/app/src/hooks/useChartZoom.ts

@@ -99,7 +99,7 @@ export function useChartZoom(options: UseChartZoomOptions): UseChartZoomResult {
         // apply zoom reset with animation
         const transition = d3
           .select(svgRef.current)
-          .transition()
+          .transition('zoom')
           .duration(750)
           .call(zoomRef.current.transform as any, defaultZoomTransform);
 
@@ -187,7 +187,7 @@ export function useChartZoom(options: UseChartZoomOptions): UseChartZoomResult {
       // double-click to reset zoom
       svg.on('dblclick.zoom', () => {
         svg
-          .transition()
+          .transition('zoom')
           .duration(750)
           .call(zoom.transform as any, defaultZoomTransform);
         zoomTransformRef.current = defaultZoomTransform;

packages/app/src/lib/d3-chart/D3Chart/useD3ChartRenderer.ts

@@ -334,7 +334,10 @@ export function useD3ChartRenderer<T>(props: D3ChartProps<T>, deps: RendererDeps
           const newPos = this.getAttribute('transform');
           if (oldPos !== undefined && newPos && oldPos !== newPos) {
             this.setAttribute('transform', oldPos);
-            d3.select(this).transition().duration(transitionDuration).attr('transform', newPos);
+            d3.select(this)
+              .transition('data-update')
+              .duration(transitionDuration)
+              .attr('transform', newPos);
           }
         });
         // Roofline paths: restore old path, then transition to current
@@ -343,7 +346,7 @@ export function useD3ChartRenderer<T>(props: D3ChartProps<T>, deps: RendererDeps
           const newD = this.getAttribute('d');
           if (oldD !== undefined && newD && oldD !== newD) {
             this.setAttribute('d', oldD);
-            d3.select(this).transition().duration(transitionDuration).attr('d', newD);
+            d3.select(this).transition('data-update').duration(transitionDuration).attr('d', newD);
           }
         });
       }