Improvements to tree size measurements

src/main.js

@@ -305,7 +305,7 @@ function extendBounds(bounds, coordinates) {
 function buildPopupContent(properties) {
   const { kind, label, name, plantedDate, removedDate, details, parentId, groupIds } = properties;
   const entries = Object.entries(details ?? {}).filter(
-    ([key, value]) => value !== null && value !== undefined && shouldShowDetailField(key),
+    ([key, value]) => value !== null && value !== undefined && shouldShowDetailField(key, details),
   );
   const lifecycleEntries = [];
   const relationshipEntries = [];
@@ -344,14 +344,23 @@ function buildPopupContent(properties) {
   return `${title}${subtitle}<div>${detailRows}${linkRows}</div>`;
 }
 
-function shouldShowDetailField(key) {
+function shouldShowDetailField(key, details = {}) {
+  if (
+    Array.isArray(details.measurements) &&
+    (key === "canopyDiameter" || key === "height")
+  ) {
+    return false;
+  }
+
   return !key.endsWith("Url") && key !== "gardenOrgId";
 }
 
 function formatDetailLabel(key) {
   const labels = {
-    canopyDiameterMeters: "Canopy diameter",
-    heightMeters: "Height",
+    canopyDiameter: "Canopy diameter",
+    height: "Height",
+    measurements: "Measurements",
+    measuredDate: "Measured",
     plantedDate: "Planted",
     removedDate: "Removed",
     commonName: "Common name",
@@ -373,7 +382,11 @@ function formatDetailLabel(key) {
 }
 
 function formatDetailValue(key, value) {
-  if (key === "canopyDiameterMeters" || key === "heightMeters") {
+  if (key === "measurements") {
+    return formatPlantMeasurements(value);
+  }
+
+  if (key === "canopyDiameter" || key === "height") {
     return `${value} m`;
   }
 
@@ -384,6 +397,34 @@ function formatDetailValue(key, value) {
   return String(value);
 }
 
+function formatPlantMeasurements(measurements) {
+  if (!Array.isArray(measurements)) {
+    return String(measurements);
+  }
+
+  return measurements.map(formatPlantMeasurement).join("; ");
+}
+
+function formatPlantMeasurement(measurement) {
+  const parts = [];
+
+  if (measurement.measuredDate) {
+    parts.push(formatDetailValue("measuredDate", measurement.measuredDate));
+  }
+
+  if (measurement.canopyDiameter !== undefined) {
+    parts.push(
+      `canopy ${formatDetailValue("canopyDiameter", measurement.canopyDiameter)}`,
+    );
+  }
+
+  if (measurement.height !== undefined) {
+    parts.push(`height ${formatDetailValue("height", measurement.height)}`);
+  }
+
+  return parts.join(", ");
+}
+
 function escapeHtml(value) {
   return String(value)
     .replaceAll("&", "&amp;")