fix: Fix sidebar when selecting JSON property (#1231)

Closes HDX-2042 Closes HDX-2524 Closes HDX-2307 Closes #1010 # Summary This PR fixes errors that occurred when attempting to open the sidebar by clicking a log table row using a JSON logs table schema. The error was caused by `node-sql-parser` throwing exceptions when parsing SQL with JSON Expressions, resulting in HyperDX being unable to extract aliases from the SQL. In the long term, we'll want to have a true ClickHouse SQL parser. In the short term, this is fixed by: 1. Finding and replacing all JSON expressions in the sql with placeholder tokens, prior to parsing with node-sql-parser 2. Parsing with node-sql-parser to find aliases correctly 3. Replacing the placeholder tokens with the original JSON expressions ## Testing (All of the following use a JSON schema) ### Before <details> <summary>When selecting a JSON column with an alias</summary> <img width="1126" height="96" alt="Screenshot 2025-10-01 at 2 28 19 PM" src="https://github.com/user-attachments/assets/c35ed870-9986-4b30-9890-e1ca8ff6c92c" /> <img width="372" height="142" alt="Screenshot 2025-10-01 at 2 28 06 PM" src="https://github.com/user-attachments/assets/d65fdce4-6625-4308-b5d0-6f845a0f2f05" /> </details> <details> <summary>When filtering by a JSON column and using an alias on a non-JSON property</summary> <img width="800" height="103" alt="Screenshot 2025-10-01 at 2 29 44 PM" src="https://github.com/user-attachments/assets/aa7faabb-316b-4103-8840-74ac08519efb" /> <img width="372" height="142" alt="Screenshot 2025-10-01 at 2 28 06 PM" src="https://github.com/user-attachments/assets/eb86cce5-eee4-40f9-af93-2451bff32444" /> </details> ### After <details> <summary>When selecting a JSON column with an alias</summary> <img width="1126" height="96" alt="Screenshot 2025-10-01 at 2 28 19 PM" src="https://github.com/user-attachments/assets/678ba290-5215-4cc5-8fee-1bf67955aaa2" /> <img width="725" height="696" alt="Screenshot 2025-10-01 at 2 30 42 PM" src="https://github.com/user-attachments/assets/5da48109-a0cd-4b5f-a5e3-bd700116d81b" /> </details> <details> <summary>When filtering by a JSON column and using an alias on a non-JSON property</summary> <img width="800" height="103" alt="Screenshot 2025-10-01 at 2 29 44 PM" src="https://github.com/user-attachments/assets/715de816-639e-4ffd-9e09-341bd0b2ee4a" /> <img width="1271" height="888" alt="Screenshot 2025-10-01 at 2 30 24 PM" src="https://github.com/user-attachments/assets/b3b766de-be70-4161-b9ca-8aae9330b5f2" /> </details>

Author: pulpdrew

.changeset/sharp-phones-travel.md

@@ -0,0 +1,6 @@
+---
+"@hyperdx/common-utils": patch
+"@hyperdx/app": patch
+---
+
+fix: Fix sidebar when selecting JSON property

packages/app/src/hooks/useRowWhere.tsx

@@ -66,7 +66,7 @@ export function processRowToWhereClause(
 
  // Currently we can't distinguish null or 'null'
  if (value === 'null') {
- return SqlString.format(`isNull(??)`, [column]);
+ return SqlString.format(`isNull(??)`, [valueExpr]);
  }
  if (value.length > 1000 || column.length > 1000) {
  console.warn('Search value/object key too large.');

packages/common-utils/src/__tests__/clickhouse.test.ts

@@ -200,6 +200,27 @@ describe('chSqlToAliasMap - alias unit test', () => {
  };
  expect(res).toEqual(aliasMap);
  });
+
+ it('Alias, with JSON expressions', () => {
+ const chSqlInput: ChSql = {
+ sql: "SELECT Timestamp as ts,ResourceAttributes.service.name as service,toStartOfDay(LogAttributes.start.`time`) as start_time,Body,TimestampTime,ServiceName,TimestampTime FROM {HYPERDX_PARAM_1544803905:Identifier}.{HYPERDX_PARAM_129845054:Identifier} WHERE (TimestampTime >= fromUnixTimestamp64Milli({HYPERDX_PARAM_1456399765:Int64}) AND TimestampTime <= fromUnixTimestamp64Milli({HYPERDX_PARAM_1719057412:Int64})) AND (`ResourceAttributes`.`service`.`name` = 'serviceName') ORDER BY TimestampTime DESC LIMIT {HYPERDX_PARAM_49586:Int32} OFFSET {HYPERDX_PARAM_48:Int32}",
+ params: {
+ HYPERDX_PARAM_1544803905: 'default',
+ HYPERDX_PARAM_129845054: 'otel_logs',
+ HYPERDX_PARAM_1456399765: 1743038742000,
+ HYPERDX_PARAM_1719057412: 1743040542000,
+ HYPERDX_PARAM_49586: 200,
+ HYPERDX_PARAM_48: 0,
+ },
+ };
+ const res = chSqlToAliasMap(chSqlInput);
+ const aliasMap = {
+ ts: 'Timestamp',
+ service: 'ResourceAttributes.service.name',
+ start_time: 'toStartOfDay(LogAttributes.start.`time`)',
+ };
+ expect(res).toEqual(aliasMap);
+ });
 });
 
 describe('computeRatio', () => {