From a0eaff1513bb793972e22f5a1496427ce3b472af Mon Sep 17 00:00:00 2001
From: Georgiy Tarasov <skoob17@mail.ru>
Date: Sun, 16 Jun 2024 10:22:54 +0200
Subject: [PATCH] fix: histogram breakdown label for the null and other values
 (#22987)

---
 frontend/src/scenes/insights/utils.test.ts | 22 ++++++++++++++++++++++
 frontend/src/scenes/insights/utils.tsx     | 12 +++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/src/scenes/insights/utils.test.ts b/frontend/src/scenes/insights/utils.test.ts
index d5565d1cfbe6f..a79d884e73835 100644
--- a/frontend/src/scenes/insights/utils.test.ts
+++ b/frontend/src/scenes/insights/utils.test.ts
@@ -250,6 +250,28 @@ describe('formatBreakdownLabel()', () => {
         expect(formatBreakdownLabel('[124.8,124.8]', breakdownFilter, [], identity)).toEqual('124.8')
     })
 
+    it('handles histogram breakdowns for "other" value', () => {
+        const breakdownFilter: BreakdownFilter = {
+            breakdown: '$browser_version',
+            breakdown_type: 'event',
+            breakdown_histogram_bin_count: 10,
+        }
+        expect(formatBreakdownLabel('$$_posthog_breakdown_other_$$', breakdownFilter, [], identity)).toEqual(
+            'Other (i.e. all remaining values)'
+        )
+    })
+
+    it('handles histogram breakdowns for "null" value', () => {
+        const breakdownFilter: BreakdownFilter = {
+            breakdown: '$browser_version',
+            breakdown_type: 'event',
+            breakdown_histogram_bin_count: 10,
+        }
+        expect(formatBreakdownLabel('$$_posthog_breakdown_null_$$', breakdownFilter, [], identity)).toEqual(
+            'None (i.e. no value)'
+        )
+    })
+
     it('handles numeric breakdowns', () => {
         const breakdownFilter: BreakdownFilter = {
             breakdown: 'coolness_factor',
diff --git a/frontend/src/scenes/insights/utils.tsx b/frontend/src/scenes/insights/utils.tsx
index 34a46efff31c0..21a691a3d85a3 100644
--- a/frontend/src/scenes/insights/utils.tsx
+++ b/frontend/src/scenes/insights/utils.tsx
@@ -206,6 +206,15 @@ export function isNullBreakdown(breakdown_value: string | number | null | undefi
     )
 }
 
+function isValidJsonArray(maybeJson: string): boolean {
+    try {
+        const json = JSON.parse(maybeJson)
+        return Array.isArray(json)
+    } catch {
+        return false
+    }
+}
+
 export function formatBreakdownLabel(
     breakdown_value: BreakdownKeyType | undefined,
     breakdownFilter: BreakdownFilter | null | undefined,
@@ -215,7 +224,8 @@ export function formatBreakdownLabel(
     if (
         breakdownFilter?.breakdown_histogram_bin_count != null &&
         typeof breakdown_value === 'string' &&
-        breakdown_value.length > 0
+        breakdown_value.length > 0 &&
+        isValidJsonArray(breakdown_value)
     ) {
         // replace nan with null
         const bucketValues = breakdown_value.replace(/\bnan\b/g, 'null')