datajunction-ui 0.0.98 → 0.0.99

package/src/app/pages/QueryPlannerPage/__tests__/SelectionPanel.test.jsx

@@ -15,22 +15,22 @@ const mockDimensions = [
   {
     name: 'default.date_dim.dateint',
     type: 'timestamp',
-    path: ['default.orders', 'default.date_dim.dateint'],
+    path: ['default.date_dim'],
   },
   {
     name: 'default.date_dim.month',
     type: 'int',
-    path: ['default.orders', 'default.date_dim.month'],
+    path: ['default.date_dim'],
   },
   {
     name: 'default.date_dim.year',
     type: 'int',
-    path: ['default.orders', 'default.date_dim.year'],
+    path: ['default.date_dim'],
   },
   {
     name: 'default.customer.country',
     type: 'string',
-    path: ['default.orders', 'default.customer.country'],
+    path: ['default.customer'],
   },
 ];
 
@@ -313,8 +313,8 @@ describe('SelectionPanel', () => {
 
     it('deduplicates dimensions with same name', () => {
       const duplicateDimensions = [
-        { name: 'default.date_dim.month', path: ['path1', 'path2', 'path3'] },
-        { name: 'default.date_dim.month', path: ['short', 'path'] },
+        { name: 'default.date_dim.month', path: ['path1'] },
+        { name: 'default.date_dim.month', path: ['short'] },
       ];
       render(
         <SelectionPanel
@@ -702,7 +702,7 @@ describe('SelectionPanel', () => {
         {
           name: 'default.date_dim.dateint',
           type: 'timestamp',
-          path: ['default.orders', 'default.date_dim.dateint'],
+          path: ['default.date_dim.dateint'],
         },
       ];
 
@@ -714,9 +714,9 @@ describe('SelectionPanel', () => {
         />,
       );
 
-      // Full name appears in both the dimension-full-name span and the path span
+      // Display name (last 2 segments) appears in the dimension item
       expect(
-        screen.getAllByText('default.date_dim.dateint').length,
+        screen.getAllByText('date_dim.dateint').length,
       ).toBeGreaterThanOrEqual(1);
     });
   });

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

@@ -55,6 +55,7 @@ jest.mock('../MetricFlowGraph', () => ({
 const mockDjClient = {
   metrics: jest.fn(),
   commonDimensions: jest.fn(),
+  commonMetrics: jest.fn(),
   measuresV3: jest.fn(),
   metricsV3: jest.fn(),
   listCubesForPreset: jest.fn(),
@@ -89,7 +90,7 @@ const mockCommonDimensions = [
     node_name: 'default.date_dim',
     node_display_name: 'Date',
     properties: [],
-    path: ['default.repair_orders', 'default.date_dim.dateint'],
+    path: ['default.date_dim'],
   },
   {
     name: 'default.date_dim.month',
@@ -97,7 +98,7 @@ const mockCommonDimensions = [
     node_name: 'default.date_dim',
     node_display_name: 'Date',
     properties: [],
-    path: ['default.repair_orders', 'default.date_dim.month'],
+    path: ['default.date_dim'],
   },
   {
     name: 'default.hard_hat.country',
@@ -105,7 +106,7 @@ const mockCommonDimensions = [
     node_name: 'default.hard_hat',
     node_display_name: 'Hard Hat',
     properties: [],
-    path: ['default.repair_orders', 'default.hard_hat.country'],
+    path: ['default.hard_hat'],
   },
 ];
 
@@ -192,6 +193,7 @@ describe('QueryPlannerPage', () => {
   beforeEach(() => {
     mockDjClient.metrics.mockResolvedValue(mockMetrics);
     mockDjClient.commonDimensions.mockResolvedValue(mockCommonDimensions);
+    mockDjClient.commonMetrics.mockResolvedValue([]);
     mockDjClient.measuresV3.mockResolvedValue(mockMeasuresResult);
     mockDjClient.metricsV3.mockResolvedValue(mockMetricsResult);
     mockDjClient.listCubesForPreset.mockResolvedValue(mockCubes);

package/src/app/pages/QueryPlannerPage/index.jsx

@@ -53,6 +53,9 @@ export function QueryPlannerPage() {
   const pendingDimensionsFromUrl = useRef([]);
   const pendingCubeFromUrl = useRef(null);
 
+  // Compatible metrics when dimensions are selected (phase 1: dimension-first flow)
+  const [compatibleMetrics, setCompatibleMetrics] = useState(null); // null = no filter active
+
   // Results state
   const [measuresResult, setMeasuresResult] = useState(null);
   const [metricsResult, setMetricsResult] = useState(null);
@@ -259,6 +262,33 @@ export function QueryPlannerPage() {
     }
   }, [commonDimensions, selectedDimensions]);
 
+  // Phase 1: When dimensions are selected, reactively find compatible metrics
+  useEffect(() => {
+    if (selectedDimensions.length === 0) {
+      setCompatibleMetrics(null);
+      return;
+    }
+    let cancelled = false;
+    djClient
+      .commonMetrics(selectedDimensions)
+      .then(result => {
+        if (cancelled) return;
+        // API returns array of node names (strings) or objects with a name field
+        if (Array.isArray(result)) {
+          const names = result.map(r => (typeof r === 'string' ? r : r.name));
+          setCompatibleMetrics(new Set(names));
+        } else {
+          setCompatibleMetrics(null);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setCompatibleMetrics(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedDimensions, djClient]);
+
   // Fetch V3 measures and metrics SQL when selection, filters, or engine changes
   useEffect(() => {
     const fetchData = async () => {
@@ -1194,14 +1224,9 @@ export function QueryPlannerPage() {
 
   return (
     <div className="planner-page">
-      {/* Header */}
-      <header className="planner-header">
-        <div className="planner-header-content">
-          <h1>Explore</h1>
-          {/* <p>Explore metrics and dimensions and plan materializations</p> */}
-        </div>
-        {error && <div className="header-error">{error}</div>}
-      </header>
+      {error && (
+        <div className="header-error planner-error-banner">{error}</div>
+      )}
 
       {/* Three-column layout */}
       <div className="planner-layout">
@@ -1228,6 +1253,7 @@ export function QueryPlannerPage() {
               selectedMetrics.length > 0 && selectedDimensions.length > 0
             }
             queryLoading={queryLoading}
+            compatibleMetrics={compatibleMetrics}
           />
         </aside>
 

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

@@ -45,13 +45,14 @@
 
 /* Full page layout */
 .planner-page {
-  height: 100vh;
+  height: calc(100vh - 90px);
   display: flex;
   flex-direction: column;
   background: var(--planner-bg);
   color: var(--planner-text);
   font-family: var(--font-body);
   overflow: hidden;
+  border-top: 1px solid #eee;
 }
 
 /* Header */
@@ -89,6 +90,14 @@
   font-size: 13px;
 }
 
+.planner-error-banner {
+  flex-shrink: 0;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+}
+
 /* Materialization Error Banner */
 .materialization-error {
   display: flex;
@@ -374,6 +383,7 @@
 .planner-layout {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
 }
 
@@ -381,9 +391,10 @@
 .planner-selection {
   width: 20%;
   /* min-width: 280px; */
+  min-height: 0;
   background: var(--planner-surface);
   border-right: 1px solid var(--planner-border);
-  overflow: visible; /* Allow cube dropdown to overflow */
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
@@ -480,8 +491,17 @@
 .selection-panel {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  overflow: visible; /* Allow cube dropdown to overflow */
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.resizable-sections {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 /* Cube Preset Section */
@@ -850,6 +870,20 @@
   accent-color: var(--accent-primary);
 }
 
+/* Incompatible metric (dims selected, this metric doesn't support them) */
+.selection-item.metric-incompatible {
+  opacity: 0.35;
+}
+
+/* Compatible badge shown next to metrics that match selected dims */
+.metric-compatible-badge {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--accent-success);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
 .item-name {
   font-size: 13px;
   color: var(--planner-text);
@@ -879,6 +913,115 @@
   font-family: var(--font-display);
 }
 
+/* Dimension group (node-level header + items) */
+.dim-group {
+  margin-bottom: 4px;
+}
+
+.dim-group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+
+.dim-group-header:hover {
+  background: var(--planner-surface-hover);
+}
+
+.dim-group-name {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--planner-text);
+  font-family: var(--font-display);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dim-group-meta {
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--planner-text-muted);
+  background: var(--planner-bg-subtle, rgba(0, 0, 0, 0.06));
+  padding: 1px 5px;
+  border-radius: 8px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.dim-group-count {
+  font-size: 11px;
+  color: var(--planner-text-dim);
+  flex-shrink: 0;
+}
+
+.dim-group-item {
+  padding-left: 28px;
+}
+
+/* Role path sub-group (second level) */
+.dim-role-group {
+  padding-left: 20px;
+}
+
+.dim-role-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+
+.dim-role-header:hover {
+  background: var(--planner-surface-hover);
+}
+
+.dim-role-label {
+  flex: 1;
+  font-size: 11px;
+  color: var(--planner-text-muted);
+  font-family: var(--font-display);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dim-role-item {
+  padding-left: 22px;
+}
+
+.dim-filter-btn {
+  opacity: 0;
+  pointer-events: none;
+  margin-left: auto;
+  align-self: center;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--planner-text-dim);
+  font-size: 10px;
+  font-family: var(--font-display);
+  padding: 0 2px;
+  cursor: pointer;
+  transition: opacity 0.1s, color 0.1s;
+}
+
+.dim-role-item:hover .dim-filter-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.dim-filter-btn:hover {
+  color: var(--accent-dimension);
+}
+
 /* Search result items (flat list) */
 .search-result-item {
   padding: 8px 12px;
@@ -903,6 +1046,19 @@
   flex-shrink: 0;
 }
 
+.section-divider.draggable-divider {
+  height: 5px;
+  cursor: row-resize;
+  background: var(--planner-border);
+  transition: background 0.15s;
+  position: relative;
+}
+
+.section-divider.draggable-divider:hover,
+.section-divider.draggable-divider:active {
+  background: var(--accent-primary);
+}
+
 .empty-list {
   padding: 24px 16px;
   text-align: center;
@@ -3406,6 +3562,13 @@ a.action-btn {
   font-family: var(--font-display);
   transition: all 0.12s ease;
   white-space: nowrap;
+  max-width: 260px;
+}
+
+.selected-chip .chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Metrics: Pink (matches node_type__metric background #fad7dd) */
@@ -3469,9 +3632,8 @@ a.action-btn {
    ================================= */
 
 .filters-section {
-  flex: 0 0 auto !important;
-  min-height: auto !important;
-  overflow: visible !important;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .filter-chips-container {
@@ -3577,6 +3739,14 @@ a.action-btn {
    Engine Selection
    ================================= */
 
+.engine-run-section {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  flex-shrink: 0;
+}
+
 .engine-section {
   display: flex;
   align-items: center;
@@ -3628,7 +3798,6 @@ a.action-btn {
 
 .run-query-section {
   padding: 16px 12px;
-  border-top: 1px solid var(--planner-border);
   background: var(--planner-bg);
   flex-shrink: 0;
 }

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

@@ -43,7 +43,7 @@ describe('<Root />', () => {
 
     // Check navigation links exist
     expect(screen.getAllByText('Catalog')).toHaveLength(1);
-    expect(screen.getAllByText('Explore')).toHaveLength(1);
+    expect(screen.getAllByText('Explorer')).toHaveLength(1);
   });
 
   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">Explore</a>
+                  <a href="/planner">Explorer</a>
                 </span>
               </span>
               <span className="menu-link">

package/src/app/services/DJService.js

@@ -1053,6 +1053,33 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  commonMetrics: async function (dimensions) {
+    // Dimension names are "node.attribute[role]" — strip role path and attribute to get node name
+    const stripped = [
+      ...new Set(
+        dimensions
+          .map(d =>
+            d
+              .replace(/\[[^\]]*\]$/, '')
+              .split('.')
+              .slice(0, -1)
+              .join('.'),
+          )
+          .filter(Boolean),
+      ),
+    ];
+    if (stripped.length === 0) return [];
+    const dimsQuery =
+      '?' +
+      stripped.map(d => `dimension=${encodeURIComponent(d)}`).join('&') +
+      '&node_type=metric';
+    return await (
+      await fetch(`${DJ_URL}/dimensions/common/${dimsQuery}`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
   history: async function (type, name, offset, limit) {
     return await (
       await fetch(