Draft: Explore as search-first visualization (prototype)

.changeset/explore-formula-cards.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': minor
+---
+
+Explore time series, table, and number views can add formula cards (letter-ref expressions like `A / B`) with click-to-insert series badges, URL persistence, and Add to dashboard export.

.changeset/explore-series-cards.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': minor
+---
+
+Explore aggregated views now use multi-series cards (alias, per-series where, add/remove) instead of a single aggregation bar. The tile editor shares those cards and shows tile settings in a persistent right rail.

.changeset/explore-visualize-as.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': minor
+---
+
+Explore chart types are collapsed into a Visualize control and a Visualize as menu, so List stays the primary results view.

packages/api/src/routers/external-api/v2/utils/dashboards.ts

@@ -271,10 +271,13 @@ const convertToExternalTileChartConfig = (
           sourceId: config.source,
           numberFormat: config.numberFormat,
         };
+      // Treemap is not in the external dashboard schema yet; drop it
+      // rather than emitting an undocumented displayType.
       case DisplayType.Search:
       case DisplayType.Markdown:
       case DisplayType.Heatmap:
       case DisplayType.EventPatterns:
+      case DisplayType.Treemap:
         logger.error(
           { config },
           'Error converting chart config to external chart - unsupported display type for raw SQL config',
@@ -504,6 +507,13 @@ const convertToExternalTileChartConfig = (
         where: stringValueOrDefault(config.where, ''),
         whereLanguage: config.whereLanguage ?? 'lucene',
       };
+    case DisplayType.Treemap:
+      // Treemap is not in the external dashboard schema yet.
+      logger.error(
+        { config },
+        'Error converting chart config to external chart - unsupported display type',
+      );
+      return undefined;
     case undefined:
       logger.error(
         { config },

packages/app/package.json

@@ -14,7 +14,7 @@
     "build:clickhouse": "NEXT_PUBLIC_THEME=clickstack NEXT_PUBLIC_IS_LOCAL_MODE=true NEXT_PUBLIC_CLICKHOUSE_BUILD=true next build --webpack && node scripts/prepare-clickhouse-build-export.js",
     "run:clickhouse": "test -d out && npx rimraf tmp && mkdir tmp && cp -r out tmp/clickstack && echo 'visit http://localhost:3000/clickstack to start' && npx serve tmp -l 3000 || echo 'run build:clickhouse first'",
     "start": "next start",
-    "lint": "npx eslint . --ext .ts,.tsx --max-warnings 564",
+    "lint": "npx eslint . --ext .ts,.tsx --max-warnings 577",
     "lint:fix": "npx eslint . --ext .ts,.tsx --fix",
     "lint:styles": "stylelint **/*/*.{css,scss}",
     "ci:lint": "yarn lint && yarn tsc --noEmit && yarn lint:styles --quiet",
@@ -29,6 +29,7 @@
     "@codemirror/autocomplete": "^6.0.0",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.7.0",
+    "@codemirror/language": "^6.12.4",
     "@codemirror/lint": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@dagrejs/dagre": "^1.1.5",
@@ -40,6 +41,7 @@
     "@hyperdx/browser": "^0.22.1",
     "@hyperdx/common-utils": "^0.27.0",
     "@hyperdx/node-opentelemetry": "^0.9.0",
+    "@lezer/highlight": "^1.2.0",
     "@mantine/core": "^9.0.0",
     "@mantine/dates": "^9.0.0",
     "@mantine/dropzone": "^9.0.0",

packages/app/pages/explore/[savedSearchId].tsx

@@ -0,0 +1,3 @@
+import ExplorePage from '@/DBExplorePage';
+
+export default ExplorePage;

packages/app/pages/explore/index.tsx

@@ -0,0 +1,3 @@
+import ExplorePage from '@/DBExplorePage';
+
+export default ExplorePage;