datajunction-ui 0.0.93 → 0.0.95

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

@@ -857,6 +857,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 +3564,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 +4006,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 +4019,7 @@ a.action-btn {
 }
 
 .results-table th:hover {
-  background: var(--planner-bg-hover, #f1f5f9);
+  background: #f1f5f9;
 }
 
 .results-table th.sorted {
@@ -4051,3 +4108,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

@@ -41,9 +41,8 @@ describe('<Root />', () => {
       expect(document.title).toEqual('DataJunction');
     });
 
-    // Check navigation links exist
-    expect(screen.getByText('Explore')).toBeInTheDocument();
-    expect(screen.getByText('Query Planner')).toBeInTheDocument();
+    // Check navigation links exist (two "Explore" links: catalog browser + planner)
+    expect(screen.getAllByText('Explore')).toHaveLength(2);
   });
 
   it('renders Docs dropdown', async () => {

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

@@ -61,7 +61,7 @@ export function Root() {
               </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,
@@ -865,6 +868,11 @@ export const DataJunctionAPI = {
         upstreamNodes(nodeNames: $nodeNames) {
           name
           type
+          current {
+            parents {
+              name
+            }
+          }
         }
       }
     `;
@@ -886,6 +894,11 @@ export const DataJunctionAPI = {
         downstreamNodes(nodeNames: $nodeNames) {
           name
           type
+          current {
+            parents {
+              name
+            }
+          }
         }
       }
     `;
@@ -900,6 +913,39 @@ export const DataJunctionAPI = {
     return results.data?.downstreamNodes || [];
   },
 
+  // Batch-fetch cubes by name, returning each cube's name and its metric node names.
+  // Used to build the Sankey data flow graph without N individual cube fetches.
+  findCubesWithMetrics: async function (cubeNames) {
+    if (!cubeNames || cubeNames.length === 0) return [];
+    const query = `
+      query FindCubesWithMetrics($names: [String!]) {
+        findNodes(names: $names, nodeTypes: [CUBE]) {
+          name
+          current {
+            displayName
+            cubeMetrics {
+              name
+            }
+          }
+        }
+      }
+    `;
+    const results = await (
+      await fetch(DJ_GQL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ query, variables: { names: cubeNames } }),
+      })
+    ).json();
+    return (results.data?.findNodes || []).map(n => ({
+      name: n.name,
+      display_name: n.current?.displayName || n.name,
+      type: 'cube',
+      parents: (n.current?.cubeMetrics || []).map(m => ({ name: m.name })),
+    }));
+  },
+
   node_dag: async function (name) {
     return await (
       await fetch(`${DJ_URL}/nodes/${name}/dag/`, {
@@ -1097,9 +1143,10 @@ export const DataJunctionAPI = {
     ).json();
   },
 
-  nodesWithDimension: async function (name) {
+  nodesWithDimension: async function (name, nodeType = null) {
+    const params = nodeType ? `?node_type=${nodeType}` : '';
     return await (
-      await fetch(`${DJ_URL}/dimensions/${name}/nodes/`, {
+      await fetch(`${DJ_URL}/dimensions/${name}/nodes/${params}`, {
         credentials: 'include',
       })
     ).json();
@@ -1173,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));
@@ -1207,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) {
@@ -1444,6 +1531,13 @@ export const DataJunctionAPI = {
       })
     ).json();
   },
+  dimensionDag: async function (nodeName) {
+    return await (
+      await fetch(`${DJ_URL}/nodes/${nodeName}/dimension-dag/`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
   linkDimension: async function (nodeName, columnName, dimensionName) {
     const response = await fetch(
       `${DJ_URL}/nodes/${nodeName}/columns/${columnName}?dimension=${dimensionName}`,
@@ -1928,11 +2022,18 @@ export const DataJunctionAPI = {
 
   // ===== My Workspace GraphQL Queries =====
 
-  getWorkspaceRecentlyEdited: async function (username, limit = 10) {
+  getWorkspaceRecentlyEdited: async function (
+    username,
+    limit = 10,
+    nodeType = null,
+  ) {
     // Nodes the user has edited, ordered by last updated (excluding source nodes)
     const query = `
       query RecentlyEdited($editedBy: String!, $limit: Int!, $nodeTypes: [NodeType!]) {
         findNodesPaginated(editedBy: $editedBy, limit: $limit, nodeTypes: $nodeTypes, orderBy: UPDATED_AT, ascending: false) {
+          pageInfo {
+            hasNextPage
+          }
           edges {
             node {
               name
@@ -1957,6 +2058,7 @@ export const DataJunctionAPI = {
         }
       }
     `;
+    const allTypes = ['TRANSFORM', 'METRIC', 'DIMENSION', 'CUBE'];
     return await (
       await fetch(DJ_GQL, {
         method: 'POST',
@@ -1967,18 +2069,25 @@ export const DataJunctionAPI = {
           variables: {
             editedBy: username,
             limit,
-            nodeTypes: ['TRANSFORM', 'METRIC', 'DIMENSION', 'CUBE'],
+            nodeTypes: nodeType ? [nodeType] : allTypes,
           },
         }),
       })
     ).json();
   },
 
-  getWorkspaceOwnedNodes: async function (username, limit = 10) {
+  getWorkspaceOwnedNodes: async function (
+    username,
+    limit = 10,
+    nodeType = null,
+  ) {
     // Owned nodes ordered by UPDATED_AT (excluding source nodes)
     const query = `
       query OwnedNodes($ownedBy: String!, $limit: Int!, $nodeTypes: [NodeType!]) {
         findNodesPaginated(ownedBy: $ownedBy, limit: $limit, nodeTypes: $nodeTypes, orderBy: UPDATED_AT, ascending: false) {
+          pageInfo {
+            hasNextPage
+          }
           edges {
             node {
               name
@@ -2003,6 +2112,7 @@ export const DataJunctionAPI = {
         }
       }
     `;
+    const allTypes = ['TRANSFORM', 'METRIC', 'DIMENSION', 'CUBE'];
     return await (
       await fetch(DJ_GQL, {
         method: 'POST',
@@ -2013,7 +2123,7 @@ export const DataJunctionAPI = {
           variables: {
             ownedBy: username,
             limit,
-            nodeTypes: ['TRANSFORM', 'METRIC', 'DIMENSION', 'CUBE'],
+            nodeTypes: nodeType ? [nodeType] : allTypes,
           },
         }),
       })