datajunction-ui 0.0.98 → 0.0.100

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,16 +383,17 @@
 .planner-layout {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
 }
 
 /* Left: Selection Panel */
 .planner-selection {
   width: 20%;
-  /* min-width: 280px; */
+  min-width: 200px;
+  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;
 }
@@ -464,12 +474,37 @@
   max-width: 300px;
 }
 
+/* Vertical resizer between graph and details panels */
+.vertical-resizer {
+  width: 1px;
+  background: var(--planner-border);
+  cursor: col-resize;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  transition: background 0.15s;
+}
+
+/* Wider invisible hit area */
+.vertical-resizer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  right: -4px;
+}
+
+.vertical-resizer:hover,
+.vertical-resizer:active {
+  background: var(--accent-primary);
+}
+
 /* Right: Details Panel */
 .planner-details {
   width: 40%;
-  min-width: 380px;
+  min-width: 280px;
   background: var(--planner-surface);
-  border-left: 1px solid var(--planner-border);
   overflow-y: auto;
 }
 
@@ -480,8 +515,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 +894,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 +937,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 +1070,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 +3586,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 +3656,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 +3763,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 +3822,6 @@ a.action-btn {
 
 .run-query-section {
   padding: 16px 12px;
-  border-top: 1px solid var(--planner-border);
   background: var(--planner-bg);
   flex-shrink: 0;
 }
@@ -3772,12 +3965,37 @@ a.action-btn {
   flex: 0 0 33.333%;
   display: flex;
   flex-direction: column;
-  border-bottom: 2px solid var(--planner-border);
   background: var(--planner-surface);
-  min-height: 150px;
+  min-height: 80px;
   max-height: 33.333%;
 }
 
+/* Horizontal resizer between SQL pane and results pane */
+.horizontal-resizer {
+  height: 1px;
+  background: var(--planner-border);
+  cursor: row-resize;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  transition: background 0.15s;
+}
+
+/* Wider invisible hit area */
+.horizontal-resizer::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -4px;
+  bottom: -4px;
+}
+
+.horizontal-resizer:hover,
+.horizontal-resizer:active {
+  background: var(--accent-primary);
+}
+
 .sql-pane-header {
   display: flex;
   align-items: center;

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(