From 2250a31e23c05d6a223e632adb87ef5e74abafe2 Mon Sep 17 00:00:00 2001
From: Alex Autem <autem.alex@gmail.com>
Date: Sun, 25 Jun 2023 21:20:43 -0500
Subject: [PATCH] fix(arcLinkLabels): fix arcLinkLabelsOffset for pie chart
 (#2369)

* Render arcLinkLabels layer after arcs

Adjusting the `arcLinkLabelsOffset` prop does not currently appear to do anything because the arcs are rendered on top of the label links. Moving arcs to the first layer fixes this issue.

* Include offset in useMemo dependency array

* Reorganize layers
---
 .../useArcLinkLabelsTransition.ts             |  2 +-
 packages/pie/src/Pie.tsx                      | 42 +++++++++----------
 packages/pie/src/props.ts                     |  2 +-
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts b/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts
index b652e2074..267d5f02f 100644
--- a/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts
+++ b/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts
@@ -78,7 +78,7 @@ const useTransitionPhases = <Datum extends DatumWithArcAndColor>({
                 opacity: 0,
             }),
         }),
-        [diagonalLength, straightLength, textOffset, getLinkColor, getTextColor]
+        [diagonalLength, straightLength, textOffset, getLinkColor, getTextColor, offset]
     )
 
 const interpolateLink = (
diff --git a/packages/pie/src/Pie.tsx b/packages/pie/src/Pie.tsx
index bb1d1a16e..a6189c455 100644
--- a/packages/pie/src/Pie.tsx
+++ b/packages/pie/src/Pie.tsx
@@ -122,32 +122,12 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
     const boundDefs = bindDefs(defs, dataWithArc, fill)
 
     const layerById: Record<PieLayerId, ReactNode> = {
-        arcLinkLabels: null,
         arcs: null,
+        arcLinkLabels: null,
         arcLabels: null,
         legends: null,
     }
 
-    if (enableArcLinkLabels && layers.includes('arcLinkLabels')) {
-        layerById.arcLinkLabels = (
-            <ArcLinkLabelsLayer<ComputedDatum<RawDatum>>
-                key="arcLinkLabels"
-                center={[centerX, centerY]}
-                data={dataWithArc}
-                label={arcLinkLabel}
-                skipAngle={arcLinkLabelsSkipAngle}
-                offset={arcLinkLabelsOffset}
-                diagonalLength={arcLinkLabelsDiagonalLength}
-                straightLength={arcLinkLabelsStraightLength}
-                strokeWidth={arcLinkLabelsThickness}
-                textOffset={arcLinkLabelsTextOffset}
-                textColor={arcLinkLabelsTextColor}
-                linkColor={arcLinkLabelsColor}
-                component={arcLinkLabelComponent}
-            />
-        )
-    }
-
     if (layers.includes('arcs')) {
         layerById.arcs = (
             <Arcs<RawDatum>
@@ -169,6 +149,26 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
         )
     }
 
+    if (enableArcLinkLabels && layers.includes('arcLinkLabels')) {
+        layerById.arcLinkLabels = (
+            <ArcLinkLabelsLayer<ComputedDatum<RawDatum>>
+                key="arcLinkLabels"
+                center={[centerX, centerY]}
+                data={dataWithArc}
+                label={arcLinkLabel}
+                skipAngle={arcLinkLabelsSkipAngle}
+                offset={arcLinkLabelsOffset}
+                diagonalLength={arcLinkLabelsDiagonalLength}
+                straightLength={arcLinkLabelsStraightLength}
+                strokeWidth={arcLinkLabelsThickness}
+                textOffset={arcLinkLabelsTextOffset}
+                textColor={arcLinkLabelsTextColor}
+                linkColor={arcLinkLabelsColor}
+                component={arcLinkLabelComponent}
+            />
+        )
+    }
+
     if (enableArcLabels && layers.includes('arcLabels')) {
         layerById.arcLabels = (
             <ArcLabelsLayer<ComputedDatum<RawDatum>>
diff --git a/packages/pie/src/props.ts b/packages/pie/src/props.ts
index b0e6edd95..7fa42bd87 100644
--- a/packages/pie/src/props.ts
+++ b/packages/pie/src/props.ts
@@ -10,7 +10,7 @@ export const defaultProps = {
     padAngle: 0,
     cornerRadius: 0,
 
-    layers: ['arcLinkLabels', 'arcs', 'arcLabels', 'legends'],
+    layers: ['arcs', 'arcLinkLabels', 'arcLabels', 'legends'],
 
     // layout
     startAngle: 0,