From 344a6dcc0903eb0480d1f34d19f40f5277a6b5a9 Mon Sep 17 00:00:00 2001
From: Alex Autem <autem.alex@gmail.com>
Date: Tue, 20 Jun 2023 14:30:49 -0500
Subject: [PATCH 1/3] 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.
---
 packages/pie/src/props.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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,

From 6c5507372160782a1aa7d74238a8200110a00660 Mon Sep 17 00:00:00 2001
From: Alex Autem <autem.alex@gmail.com>
Date: Tue, 20 Jun 2023 16:38:38 -0500
Subject: [PATCH 2/3] Include offset in useMemo dependency array

---
 packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 = (

From a60805db27bd56c1f7442e248c16d7168c906731 Mon Sep 17 00:00:00 2001
From: Alex Autem <autem.alex@gmail.com>
Date: Tue, 20 Jun 2023 16:38:55 -0500
Subject: [PATCH 3/3] Reorganize layers

---
 packages/pie/src/Pie.tsx | 42 ++++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

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>>