datajunction-ui 0.0.94 → 0.0.96

package/src/app/pages/QueryPlannerPage/styles.css

@@ -2,6 +2,15 @@
    Materialization Planner - Three Column Layout
    ================================= */
 
+/* Reset native browser input styling for all planner inputs */
+.cube-search,
+.combobox-search,
+.filter-input {
+  -webkit-appearance: none;
+  appearance: none;
+  box-shadow: none;
+}
+
 /* CSS Variables for theming */
 :root {
   --planner-bg: #f8fafc;
@@ -857,6 +866,13 @@
   gap: 2px;
 }
 
+.dimension-full-name {
+  font-size: 10px;
+  color: var(--planner-text-muted);
+  font-family: var(--font-display);
+  word-break: break-all;
+}
+
 .dimension-path {
   font-size: 10px;
   color: var(--planner-text-dim);
@@ -3557,6 +3573,55 @@ a.action-btn {
   cursor: not-allowed;
 }
 
+/* =================================
+   Engine Selection
+   ================================= */
+
+.engine-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--planner-border);
+  background: var(--planner-bg);
+  flex-shrink: 0;
+}
+
+.engine-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.engine-pills {
+  display: flex;
+  gap: 4px;
+}
+
+.engine-pill {
+  padding: 4px 10px;
+  border: 1px solid var(--planner-border);
+  border-radius: 12px;
+  background: transparent;
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.12s ease;
+}
+
+.engine-pill:hover {
+  border-color: #059669;
+  color: #059669;
+}
+
+.engine-pill.active {
+  background: #059669;
+  border-color: #059669;
+  color: white;
+  font-weight: 500;
+}
+
 /* =================================
    Run Query Section
    ================================= */
@@ -3950,8 +4015,9 @@ a.action-btn {
 .results-table th {
   position: sticky;
   top: 0;
+  z-index: 1;
   padding: 10px 12px;
-  background: var(--planner-bg);
+  background: #f8fafc;
   color: var(--planner-text);
   font-weight: 600;
   text-align: left;
@@ -3962,7 +4028,7 @@ a.action-btn {
 }
 
 .results-table th:hover {
-  background: var(--planner-bg-hover, #f1f5f9);
+  background: #f1f5f9;
 }
 
 .results-table th.sorted {
@@ -4051,3 +4117,155 @@ a.action-btn {
 .filters-list .filter-chip {
   padding: 4px 10px;
 }
+
+/* =================================
+   Results View - Tab bar & Chart
+   ================================= */
+
+.results-tabs-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px 0;
+  border-bottom: 1px solid var(--planner-border);
+  background: var(--planner-surface);
+  flex-shrink: 0;
+}
+
+.results-tabs {
+  display: flex;
+  gap: 2px;
+}
+
+.results-tab {
+  padding: 6px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: var(--font-body);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--planner-text-muted);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  margin-bottom: -1px;
+}
+
+.results-tab:hover:not(.disabled) {
+  color: var(--planner-text);
+}
+
+.results-tab.active {
+  color: var(--accent-primary);
+  border-bottom-color: var(--accent-primary);
+}
+
+.results-tab.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.results-tabs-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  padding-bottom: 6px;
+}
+
+/* Chart wrapper - fills remaining height */
+.results-chart-wrapper {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+  padding: 16px 8px 8px;
+  display: flex;
+  align-items: stretch;
+}
+
+/* KPI cards */
+.kpi-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: flex-start;
+  padding: 8px;
+}
+
+.kpi-card {
+  background: var(--planner-surface);
+  border: 1px solid var(--planner-border);
+  border-radius: var(--radius-lg);
+  padding: 20px 28px;
+  min-width: 160px;
+  text-align: center;
+}
+
+.kpi-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--planner-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+
+.kpi-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--planner-text);
+  font-family: var(--font-display);
+  line-height: 1.1;
+}
+
+.kpi-type {
+  font-size: 10px;
+  color: var(--planner-text-dim);
+  margin-top: 6px;
+}
+
+.chart-no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  color: var(--planner-text-muted);
+  font-size: 13px;
+}
+
+/* =================================
+   Small Multiples
+   ================================= */
+
+.small-multiples {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.small-multiple {
+  flex-shrink: 0;
+  height: 220px;
+  padding: 0 0 8px 0;
+  border-bottom: 1px solid var(--planner-border);
+}
+
+.small-multiple:last-child {
+  border-bottom: none;
+}
+
+.small-multiple-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--planner-text-muted);
+  padding: 8px 0 0 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.small-multiple-chart {
+  height: 188px;
+}

package/src/app/pages/Root/__tests__/index.test.jsx

@@ -42,8 +42,8 @@ describe('<Root />', () => {
     });
 
     // Check navigation links exist
-    expect(screen.getByText('Explore')).toBeInTheDocument();
-    expect(screen.getByText('Query Planner')).toBeInTheDocument();
+    expect(screen.getAllByText('Catalog')).toHaveLength(1);
+    expect(screen.getAllByText('Explore')).toHaveLength(1);
   });
 
   it('renders Docs dropdown', async () => {

package/src/app/pages/Root/index.tsx

@@ -56,12 +56,12 @@ export function Root() {
             <div className="menu-item here menu-here-bg menu-lg-down-accordion me-0 me-lg-2 fw-semibold">
               <span className="menu-link">
                 <span className="menu-title">
-                  <a href="/">Explore</a>
+                  <a href="/">Catalog</a>
                 </span>
               </span>
               <span className="menu-link">
                 <span className="menu-title">
-                  <a href="/planner">Query Planner</a>
+                  <a href="/planner">Explore</a>
                 </span>
               </span>
               <span className="menu-link">

package/src/app/services/DJService.js

@@ -13,6 +13,9 @@ const DJ_GQL = process.env.REACT_APP_DJ_GQL
 // Export the base URL for components that need direct access
 export const getDJUrl = () => DJ_URL;
 
+const QUERY_END_STATES = ['FINISHED', 'CANCELED', 'FAILED'];
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
 export const DataJunctionAPI = {
   listNodesForLanding: async function (
     namespace,
@@ -1217,33 +1220,35 @@ export const DataJunctionAPI = {
   metricsV3: async function (
     metricSelection,
     dimensionSelection,
-    filters = '',
+    filters = [],
     useMaterialized = true,
+    dialect = null,
   ) {
     const params = new URLSearchParams();
     metricSelection.forEach(metric => params.append('metrics', metric));
     dimensionSelection.forEach(dimension =>
       params.append('dimensions', dimension),
     );
-    if (filters) {
-      params.append('filters', filters);
-    }
-    if (useMaterialized) {
-      params.append('use_materialized', 'true');
-      params.append('dialect', 'druid');
-    } else {
-      params.append('use_materialized', 'false');
-      params.append('dialect', 'spark');
+    if (filters && filters.length > 0) {
+      filters.forEach(f => params.append('filters', f));
     }
+    const resolvedDialect = dialect || (useMaterialized ? 'druid' : 'trino');
+    params.append('use_materialized', useMaterialized ? 'true' : 'false');
+    params.append('dialect', resolvedDialect);
     return await (
       await fetch(`${DJ_URL}/sql/metrics/v3/?${params}`, {
         credentials: 'include',
-        params: params,
       })
     ).json();
   },
 
-  data: async function (metricSelection, dimensionSelection, filters = []) {
+  data: async function (
+    metricSelection,
+    dimensionSelection,
+    filters = [],
+    dialect = null,
+    onProgress = null,
+  ) {
     const params = new URLSearchParams();
     metricSelection.map(metric => params.append('metrics', metric));
     dimensionSelection.map(dimension => params.append('dimensions', dimension));
@@ -1251,18 +1256,56 @@ export const DataJunctionAPI = {
       filters.forEach(f => params.append('filters', f));
     }
     params.append('limit', '10000');
-    const response = await fetch(`${DJ_URL}/data/?${params}`, {
+    params.append('async_', 'true');
+    params.append('dialect', dialect || 'trino');
+
+    let pollInterval = 1000;
+
+    // Submit the query once
+    const submitResponse = await fetch(`${DJ_URL}/data/?${params}`, {
       credentials: 'include',
     });
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
+    if (!submitResponse.ok) {
+      const errorData = await submitResponse.json().catch(() => ({}));
       throw new Error(
         errorData.message ||
           errorData.detail ||
-          `Query failed: ${response.status}`,
+          `Query failed: ${submitResponse.status}`,
       );
     }
-    return await response.json();
+    let results = await submitResponse.json();
+
+    // Report links from the first response so they're visible during polling
+    if (onProgress && results.links?.length > 0) {
+      onProgress({ links: results.links });
+    }
+
+    // Poll by query ID using GET /data/query/{id} to avoid re-submitting
+    while (!QUERY_END_STATES.includes(results.state)) {
+      await sleep(pollInterval);
+      pollInterval = Math.min(pollInterval * 2, 10000);
+
+      const pollResponse = await fetch(`${DJ_URL}/data/query/${results.id}`, {
+        credentials: 'include',
+      });
+      if (!pollResponse.ok) {
+        const errorData = await pollResponse.json().catch(() => ({}));
+        throw new Error(
+          errorData.message ||
+            errorData.detail ||
+            `Query poll failed: ${pollResponse.status}`,
+        );
+      }
+      results = await pollResponse.json();
+    }
+
+    if (results.state === 'CANCELED') {
+      throw new Error('Query execution was canceled');
+    }
+    if (results.state === 'FAILED') {
+      throw new Error(results.errors?.[0] || 'Query execution failed');
+    }
+    return results;
   },
 
   nodeData: async function (nodeName, selection = null) {

package/src/app/services/__tests__/DJService.test.jsx

@@ -619,19 +619,17 @@ describe('DataJunctionAPI', () => {
   it('calls data correctly', async () => {
     const metricSelection = ['metric1'];
     const dimensionSelection = ['dimension1'];
-    const params = new URLSearchParams();
-    metricSelection.forEach(metric => params.append('metrics', metric));
-    dimensionSelection.forEach(dimension =>
-      params.append('dimensions', dimension),
-    );
-    fetch.mockResponseOnce(JSON.stringify({}));
+    fetch.mockResponseOnce(JSON.stringify({ state: 'FINISHED', results: [] }));
     await DataJunctionAPI.data(metricSelection, dimensionSelection);
     expect(fetch).toHaveBeenCalledWith(
-      `${DJ_URL}/data/?${params}&limit=10000`,
-      {
-        credentials: 'include',
-      },
+      expect.stringContaining(`${DJ_URL}/data/?`),
+      { credentials: 'include' },
     );
+    const url = fetch.mock.calls[0][0];
+    expect(url).toContain('metrics=metric1');
+    expect(url).toContain('dimensions=dimension1');
+    expect(url).toContain('limit=10000');
+    expect(url).toContain('async_=true');
   });
 
   it('calls compiledSql correctly', async () => {
@@ -2449,7 +2447,7 @@ describe('DataJunctionAPI', () => {
   // Test metricsV3 (lines 1106-1124)
   it('calls metricsV3 correctly', async () => {
     fetch.mockResponseOnce(JSON.stringify({ sql: 'SELECT ...' }));
-    await DataJunctionAPI.metricsV3(['metric1'], ['dim1'], 'filter=value');
+    await DataJunctionAPI.metricsV3(['metric1'], ['dim1'], ['filter=value']);
     expect(fetch).toHaveBeenCalledWith(
       expect.stringContaining('/sql/metrics/v3/?'),
       expect.objectContaining({ credentials: 'include' }),
@@ -2994,19 +2992,19 @@ describe('DataJunctionAPI', () => {
   });
 
   // ===== metricsV3 — useMaterialized=false branch (lines 1224-1225) =====
-  it('calls metricsV3 with useMaterialized=false (spark dialect)', async () => {
+  it('calls metricsV3 with useMaterialized=false (trino dialect)', async () => {
     fetch.mockResponseOnce(JSON.stringify({ sql: 'SELECT ...' }));
-    await DataJunctionAPI.metricsV3(['metric1'], ['dim1'], '', false);
+    await DataJunctionAPI.metricsV3(['metric1'], ['dim1'], [], false);
     const url = fetch.mock.calls[0][0];
     expect(url).toContain('use_materialized=false');
-    expect(url).toContain('dialect=spark');
+    expect(url).toContain('dialect=trino');
   });
 
   // ===== data — filters non-empty branch (line 1240) =====
   it('calls data with filters array', async () => {
     fetch.mockResolvedValueOnce({
       ok: true,
-      json: () => Promise.resolve([{ col: 'metric1', value: 42 }]),
+      json: () => Promise.resolve({ state: 'FINISHED', results: [] }),
     });
     await DataJunctionAPI.data(
       ['metric1'],