From dbd541df495d729264cf146b69871e9817442323 Mon Sep 17 00:00:00 2001
From: Tom McLaughlin <tom@codedown.io>
Date: Tue, 13 Feb 2024 21:08:45 -0800
Subject: [PATCH] Final fixes

---
 src/TreeMap/CleanTreeMap.tsx | 47 +++++++++++-------------------------
 src/TreeMap/Uid.ts           | 15 ++++++++++++
 2 files changed, 29 insertions(+), 33 deletions(-)
 create mode 100644 src/TreeMap/Uid.ts

diff --git a/src/TreeMap/CleanTreeMap.tsx b/src/TreeMap/CleanTreeMap.tsx
index ed63c3c..c540358 100644
--- a/src/TreeMap/CleanTreeMap.tsx
+++ b/src/TreeMap/CleanTreeMap.tsx
@@ -3,7 +3,9 @@ import { type HierarchyRectangularNode, hierarchy, treemap } from "d3-hierarchy"
 import { scaleSequential } from "d3-scale";
 import { interpolateMagma,  } from "d3-scale-chromatic";
 import { select } from "d3-selection";
-import { CSSProperties, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { CSSProperties, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+import {uid} from "./Uid";
 
 
 interface Props<D> {
@@ -17,22 +19,6 @@ interface Props<D> {
   valueFn: (d: D) => number;
 }
 
-var count = 1;
-
-export function uid(name) {
-  return new Id("O-" + (name == null ? "" : name + "-") + ++count);
-}
-
-function Id(id) {
-  this.id = id;
-  this.href = new URL(`#${id}`, location) + "";
-}
-
-Id.prototype.toString = function() {
-  return "url(" + this.href + ")";
-};
-
-
 const baseSvgStyle: CSSProperties = {
   maxWidth: "100%",
   height: "auto",
@@ -56,6 +42,12 @@ export default function CleanTreeMap<D>({data, width, height, labelFn, subLabelF
   const svgRef = useRef(null);
   const [selectedData, setSelectedData] = useState(data);
   const [breadcrumbs, setBreadcrumbs] = useState<IBreadcrumb[]>([makeBreadcrumb(data, labelFn, setSelectedData)]);
+
+  useEffect(() => {
+    setSelectedData(data);
+    setBreadcrumbs([makeBreadcrumb(data, labelFn, setSelectedData)]);
+  }, [data, labelFn, setSelectedData]);
+
   const breadcrumbsRef = useRef(breadcrumbs);
   breadcrumbsRef.current = breadcrumbs;
 
@@ -113,11 +105,8 @@ export default function CleanTreeMap<D>({data, width, height, labelFn, subLabelF
        .attr("stdDeviation", 3);
 
     const node = svg.selectAll("g")
-                    .data(group(root, (d) => d.height))
-                    .join("g")
+                    .data(root)
                     .attr("filter", shadow)
-                    .selectAll("g")
-                    .data((d) => d[1])
                     .join("g")
                     .attr("transform", (d) => `translate(${d.x0},${d.y0})`)
                     .style("cursor", (d) => d.children ? "pointer" : "default")
@@ -141,22 +130,14 @@ export default function CleanTreeMap<D>({data, width, height, labelFn, subLabelF
     node.append("text")
         .attr("clip-path", d => d["clipUid"])
         .selectAll("tspan")
-        .data(d => [labelFn(d.data), subLabelFn(d.data, d.value)])
+        .data(d => [
+          labelFn(d.data) + (d.children ? (" (+" + (d.descendants().length - 1) + ")") : ""),
+          subLabelFn(d.data, d.value)
+        ])
         .join("tspan")
         .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
         .text(d => d);
 
-    node.filter(d => d.children && d.children.length > 0)
-        .append("text")
-        .attr("x", (d) => d.x1 - d.x0 - 6)
-        .attr("dy", -1)
-        .attr("fill-opacity", 0.7)
-        .attr("text-anchor", "end")
-        .selectAll("tspan")
-        .data(d => ["(" + (d.descendants().length - 1) + ")"])
-        .join("tspan")
-        .text(d => d);
-
     node.filter(d => d.children && d.children.length > 0).selectAll("tspan")
         .attr("dx", 3)
         .attr("y", 13);
diff --git a/src/TreeMap/Uid.ts b/src/TreeMap/Uid.ts
new file mode 100644
index 0000000..aed7b67
--- /dev/null
+++ b/src/TreeMap/Uid.ts
@@ -0,0 +1,15 @@
+
+var count = 1;
+
+export function uid(name) {
+  return new Id("O-" + (name == null ? "" : name + "-") + ++count);
+}
+
+function Id(id) {
+  this.id = id;
+  this.href = new URL(`#${id}`, location) + "";
+}
+
+Id.prototype.toString = function() {
+  return "url(" + this.href + ")";
+};