fix: searching json number property error (#1767)

Author: karl-power

.changeset/twelve-seahorses-do.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: searching json number property error

packages/app/src/components/DBRowJsonViewer.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, screen, within } from '@testing-library/react';
 
-import { DBRowJsonViewer } from './DBRowJsonViewer';
+import { buildJSONExtractQuery, DBRowJsonViewer } from './DBRowJsonViewer';
 import { RowSidePanelContext } from './DBRowSidePanel';
 
 // Mock Next.js router
@@ -195,4 +195,57 @@ describe('DBRowJsonViewer', () => {
       );
     });
   });
+
+  describe('buildJSONExtractQuery', () => {
+    it('returns null when keyPath equals parsedJsonRootPath (no nested path)', () => {
+      expect(
+        buildJSONExtractQuery(['LogAttributes'], ['LogAttributes']),
+      ).toBeNull();
+    });
+
+    it('returns null when keyPath is shorter than parsedJsonRootPath', () => {
+      expect(buildJSONExtractQuery([], ['LogAttributes'])).toBeNull();
+    });
+
+    it('builds query for single-level path with default JSONExtractString', () => {
+      expect(
+        buildJSONExtractQuery(['LogAttributes', 'field1'], ['LogAttributes']),
+      ).toBe("JSONExtractString(LogAttributes, 'field1')");
+    });
+
+    it('builds query for nested path', () => {
+      expect(
+        buildJSONExtractQuery(
+          ['LogAttributes', 'nested', 'field3'],
+          ['LogAttributes'],
+        ),
+      ).toBe("JSONExtractString(LogAttributes, 'nested', 'field3')");
+    });
+
+    it('uses JSONExtractFloat when specified', () => {
+      expect(
+        buildJSONExtractQuery(
+          ['SpanAttributes', 'count'],
+          ['SpanAttributes'],
+          'JSONExtractFloat',
+        ),
+      ).toBe("JSONExtractFloat(SpanAttributes, 'count')");
+    });
+
+    it('uses JSONExtractBool when specified', () => {
+      expect(
+        buildJSONExtractQuery(
+          ['LogAttributes', 'enabled'],
+          ['LogAttributes'],
+          'JSONExtractBool',
+        ),
+      ).toBe("JSONExtractBool(LogAttributes, 'enabled')");
+    });
+
+    it('handles path segments that look like array indices', () => {
+      expect(
+        buildJSONExtractQuery(['LogAttributes', '0', 'id'], ['LogAttributes']),
+      ).toBe("JSONExtractString(LogAttributes, '0', 'id')");
+    });
+  });
 });

packages/app/src/components/DBRowJsonViewer.tsx

@@ -30,9 +30,15 @@ import {
 import HyperJson, { GetLineActions, LineAction } from '@/components/HyperJson';
 import { mergePath } from '@/utils';
 
-function buildJSONExtractStringQuery(
+type JSONExtractFn =
+  | 'JSONExtractString'
+  | 'JSONExtractFloat'
+  | 'JSONExtractBool';
+
+export function buildJSONExtractQuery(
   keyPath: string[],
   parsedJsonRootPath: string[],
+  jsonExtractFn: JSONExtractFn = 'JSONExtractString',
 ): string | null {
   const nestedPath = keyPath.slice(parsedJsonRootPath.length);
   if (nestedPath.length === 0) {
@@ -41,7 +47,7 @@ function buildJSONExtractStringQuery(
 
   const baseColumn = parsedJsonRootPath[parsedJsonRootPath.length - 1];
   const jsonPathArgs = nestedPath.map(p => `'${p}'`).join(', ');
-  return `JSONExtractString(${baseColumn}, ${jsonPathArgs})`;
+  return `${jsonExtractFn}(${baseColumn}, ${jsonPathArgs})`;
 }
 
 import { RowSidePanelContext } from './DBRowSidePanel';
@@ -258,7 +264,7 @@ export function DBRowJsonViewer({
 
             // Handle parsed JSON from string columns using JSONExtractString
             if (isInParsedJson && parsedJsonRootPath) {
-              const jsonQuery = buildJSONExtractStringQuery(
+              const jsonQuery = buildJSONExtractQuery(
                 keyPath,
                 parsedJsonRootPath,
               );
@@ -301,10 +307,20 @@ export function DBRowJsonViewer({
 
             // Handle parsed JSON from string columns using JSONExtractString
             if (isInParsedJson && parsedJsonRootPath) {
-              const jsonQuery = buildJSONExtractStringQuery(
+              let jsonExtractFn: JSONExtractFn = 'JSONExtractString';
+
+              if (typeof value === 'number') {
+                jsonExtractFn = 'JSONExtractFloat';
+              } else if (typeof value === 'boolean') {
+                jsonExtractFn = 'JSONExtractBool';
+              }
+
+              const jsonQuery = buildJSONExtractQuery(
                 keyPath,
                 parsedJsonRootPath,
+                jsonExtractFn,
               );
+
               if (jsonQuery) {
                 searchFieldPath = jsonQuery;
               }
@@ -342,7 +358,7 @@ export function DBRowJsonViewer({
 
             // Handle parsed JSON from string columns using JSONExtractString
             if (isInParsedJson && parsedJsonRootPath) {
-              const jsonQuery = buildJSONExtractStringQuery(
+              const jsonQuery = buildJSONExtractQuery(
                 keyPath,
                 parsedJsonRootPath,
               );
@@ -368,10 +384,7 @@ export function DBRowJsonViewer({
 
         // Handle parsed JSON from string columns using JSONExtractString
         if (isInParsedJson && parsedJsonRootPath) {
-          const jsonQuery = buildJSONExtractStringQuery(
-            keyPath,
-            parsedJsonRootPath,
-          );
+          const jsonQuery = buildJSONExtractQuery(keyPath, parsedJsonRootPath);
           if (jsonQuery) {
             columnFieldPath = jsonQuery;
           }