datajunction-ui 0.0.98 → 0.0.100

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

@@ -710,5 +710,156 @@ describe('ResultsView', () => {
       expect(link).toBeInTheDocument();
       expect(link).toHaveAttribute('href', 'https://example.com/query/123');
     });
+
+    // ── Pivoted chart paths (buildPivotedData + ChartView branches) ──────────
+
+    it('renders pivoted line chart for time + 1 categorical + 1 metric (groupByCol path)', () => {
+      // detectChartConfig line 84-90: timeCols + nonTimeCatCols.length === 1
+      // buildPivotedData lines 131-178, useMemo lines 505-512, ChartView line 353
+      const pivotedLineResults = {
+        results: [
+          {
+            columns: [
+              { name: 'date', type: 'DATE' },
+              { name: 'country', type: 'STRING' },
+              { name: 'revenue', type: 'FLOAT' },
+            ],
+            rows: [
+              ['2024-01-01', 'US', 1000],
+              ['2024-01-01', 'UK', 500],
+              ['2024-01-02', 'US', 1200],
+              ['2024-01-02', null, 300], // null group value → '(null)'
+            ],
+          },
+        ],
+      };
+
+      render(<ResultsView {...defaultProps} results={pivotedLineResults} />);
+      fireEvent.click(screen.getByText('Chart'));
+
+      expect(screen.getByTestId('LineChart')).toBeInTheDocument();
+    });
+
+    it('renders pivoted multi-metric small multiples (time + 1 cat + 2 metrics)', () => {
+      // ChartView lines 331-334: pivotedByMetric.length > 1
+      const pivotedMultiMetricResults = {
+        results: [
+          {
+            columns: [
+              { name: 'date', type: 'DATE' },
+              { name: 'country', type: 'STRING' },
+              { name: 'revenue', type: 'FLOAT' },
+              { name: 'orders', type: 'FLOAT' },
+            ],
+            rows: [
+              ['2024-01-01', 'US', 1000, 10],
+              ['2024-01-01', 'UK', 500, 5],
+              ['2024-01-02', 'US', 1200, 12],
+            ],
+          },
+        ],
+      };
+
+      render(
+        <ResultsView {...defaultProps} results={pivotedMultiMetricResults} />,
+      );
+      fireEvent.click(screen.getByText('Chart'));
+
+      // pivotedByMetric.length === 2 → small-multiples wrapper
+      expect(document.querySelector('.small-multiples')).toBeInTheDocument();
+      const labels = document.querySelectorAll('.small-multiple-label');
+      expect(labels.length).toBe(2);
+      expect(labels[0]).toHaveTextContent('revenue');
+      expect(labels[1]).toHaveTextContent('orders');
+    });
+
+    it('renders grouped bar chart for 2 categorical columns (lines 101-107)', () => {
+      // detectChartConfig: nonTimeCatCols.length === 2 → bar with groupByCol
+      const groupedBarResults = {
+        results: [
+          {
+            columns: [
+              { name: 'region', type: 'STRING' },
+              { name: 'category', type: 'STRING' },
+              { name: 'revenue', type: 'FLOAT' },
+            ],
+            rows: [
+              ['North', 'A', 1000],
+              ['South', 'A', 800],
+              ['North', 'B', 600],
+              ['South', null, 400], // null group value
+            ],
+          },
+        ],
+      };
+
+      render(<ResultsView {...defaultProps} results={groupedBarResults} />);
+      fireEvent.click(screen.getByText('Chart'));
+
+      expect(screen.getByTestId('BarChart')).toBeInTheDocument();
+    });
+
+    it('renders bar chart for 3+ categorical columns falling back to first as x-axis (lines 108-110)', () => {
+      const threeCatResults = {
+        results: [
+          {
+            columns: [
+              { name: 'a', type: 'STRING' },
+              { name: 'b', type: 'STRING' },
+              { name: 'c', type: 'STRING' },
+              { name: 'metric', type: 'FLOAT' },
+            ],
+            rows: [
+              ['x1', 'y1', 'z1', 100],
+              ['x2', 'y2', 'z2', 200],
+            ],
+          },
+        ],
+      };
+
+      render(<ResultsView {...defaultProps} results={threeCatResults} />);
+      fireEvent.click(screen.getByText('Chart'));
+
+      expect(screen.getByTestId('BarChart')).toBeInTheDocument();
+    });
+  });
+
+  describe('Pane Resize', () => {
+    it('handles SQL pane drag resize via horizontal-resizer', () => {
+      render(<ResultsView {...defaultProps} />);
+
+      const resizer = document.querySelector('.horizontal-resizer');
+      expect(resizer).toBeInTheDocument();
+
+      // Mousedown starts the drag
+      fireEvent.mouseDown(resizer, { clientY: 300 });
+
+      // Mousemove updates height (in jsdom offsetHeight is 0, so newHeight clamps to min 80)
+      fireEvent.mouseMove(document, { clientY: 350 });
+
+      // Inline style should be applied to sql-pane
+      const sqlPane = document.querySelector('.sql-pane');
+      expect(sqlPane.style.maxHeight).toBeTruthy();
+
+      // Mouseup removes event listeners
+      fireEvent.mouseUp(document);
+
+      // Further moves should not update (listeners removed)
+      const heightAfterUp = sqlPane.style.maxHeight;
+      fireEvent.mouseMove(document, { clientY: 500 });
+      expect(sqlPane.style.maxHeight).toBe(heightAfterUp);
+    });
+
+    it('does not update height when no resultsPanesRef container', () => {
+      // Renders and immediately fires mousedown on resizer
+      render(<ResultsView {...defaultProps} />);
+      const resizer = document.querySelector('.horizontal-resizer');
+      // Should not throw even if container measures are 0
+      expect(() => {
+        fireEvent.mouseDown(resizer, { clientY: 100 });
+        fireEvent.mouseMove(document, { clientY: 200 });
+        fireEvent.mouseUp(document);
+      }).not.toThrow();
+    });
   });
 });

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);
@@ -1425,4 +1427,100 @@ describe('QueryPlannerPage', () => {
       ).toBeInTheDocument();
     });
   });
+
+  describe('Pane Resize Handlers', () => {
+    it('resizes selection panel when dragging left vertical-resizer', async () => {
+      renderPage();
+      await waitFor(() => expect(mockDjClient.metrics).toHaveBeenCalled());
+
+      const resizers = document.querySelectorAll('.vertical-resizer');
+      // First resizer is between selection panel and main content
+      const selectionResizer = resizers[0];
+      expect(selectionResizer).toBeInTheDocument();
+
+      // Mousedown begins drag
+      fireEvent.mouseDown(selectionResizer, { clientX: 200 });
+
+      // Move right → wider selection panel
+      fireEvent.mouseMove(document, { clientX: 280 });
+
+      const selectionPane = document.querySelector('.planner-selection');
+      // Inline width should be applied (clamped to min 200)
+      expect(selectionPane.style.width).toBeTruthy();
+
+      // Mouseup ends drag
+      fireEvent.mouseUp(document);
+
+      // Further moves should not update
+      const widthAfterUp = selectionPane.style.width;
+      fireEvent.mouseMove(document, { clientX: 600 });
+      expect(selectionPane.style.width).toBe(widthAfterUp);
+    });
+
+    it('resizes details panel when dragging right vertical-resizer', async () => {
+      renderPage();
+      await waitFor(() => expect(mockDjClient.metrics).toHaveBeenCalled());
+
+      const resizers = document.querySelectorAll('.vertical-resizer');
+      // Second resizer is between graph and details panel (visible in non-results state)
+      expect(resizers.length).toBeGreaterThanOrEqual(2);
+      const detailsResizer = resizers[1];
+
+      // Mousedown begins drag
+      fireEvent.mouseDown(detailsResizer, { clientX: 800 });
+
+      // Move left → wider details panel
+      fireEvent.mouseMove(document, { clientX: 700 });
+
+      const detailsPane = document.querySelector('.planner-details');
+      expect(detailsPane.style.width).toBeTruthy();
+
+      // Mouseup ends drag
+      fireEvent.mouseUp(document);
+
+      const widthAfterUp = detailsPane.style.width;
+      fireEvent.mouseMove(document, { clientX: 400 });
+      expect(detailsPane.style.width).toBe(widthAfterUp);
+    });
+  });
+
+  describe('URL Init Edge Cases', () => {
+    it('handles invalid cube data returned from cubeForPlanner (missing cube_node_metrics)', async () => {
+      // cubeForPlanner returns data without cube_node_metrics array
+      mockDjClient.cubeForPlanner.mockResolvedValue({ name: 'bad.cube' });
+
+      renderPage(['/query-planner?cube=bad.cube']);
+
+      await waitFor(() => {
+        expect(mockDjClient.cubeForPlanner).toHaveBeenCalledWith('bad.cube');
+      });
+
+      // Page should still render without crashing (invalid cube data logged, not applied)
+      expect(screen.getByText('Load from Cube')).toBeInTheDocument();
+    });
+
+    it('handles cubeForPlanner throwing during URL init', async () => {
+      mockDjClient.cubeForPlanner.mockRejectedValue(new Error('Network error'));
+
+      renderPage(['/query-planner?cube=bad.cube']);
+
+      await waitFor(() => {
+        expect(mockDjClient.cubeForPlanner).toHaveBeenCalled();
+      });
+
+      // Page should still render gracefully
+      expect(screen.getByText('Load from Cube')).toBeInTheDocument();
+    });
+
+    it('handles metrics API failure on mount gracefully', async () => {
+      mockDjClient.metrics.mockRejectedValue(new Error('API down'));
+
+      // Should not throw
+      renderPage();
+
+      await waitFor(() => {
+        expect(mockDjClient.metrics).toHaveBeenCalled();
+      });
+    });
+  });
 });

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);
@@ -81,6 +84,67 @@ export function QueryPlannerPage() {
   // Node selection for details panel
   const [selectedNode, setSelectedNode] = useState(null);
 
+  // Resizable pane widths (px); null = use CSS default
+  const [selectionWidth, setSelectionWidth] = useState(null);
+  const [detailsWidth, setDetailsWidth] = useState(null);
+  const plannerLayoutRef = useRef(null);
+
+  const handleSelectionResizerMouseDown = useCallback(
+    e => {
+      e.preventDefault();
+      const container = plannerLayoutRef.current;
+      if (!container) return;
+      const startX = e.clientX;
+      const startWidth = selectionWidth ?? container.offsetWidth * 0.2; // match CSS default 20%
+
+      const onMouseMove = moveEvent => {
+        const delta = moveEvent.clientX - startX;
+        const newWidth = Math.max(
+          200,
+          Math.min(container.offsetWidth * 0.5, startWidth + delta),
+        );
+        setSelectionWidth(newWidth);
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      };
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    },
+    [selectionWidth],
+  );
+
+  const handleDetailsResizerMouseDown = useCallback(
+    e => {
+      e.preventDefault();
+      const container = plannerLayoutRef.current;
+      if (!container) return;
+      const startX = e.clientX;
+      const startWidth = detailsWidth ?? container.offsetWidth * 0.4; // match CSS default 40%
+
+      const onMouseMove = moveEvent => {
+        const delta = startX - moveEvent.clientX;
+        const newWidth = Math.max(
+          280,
+          Math.min(container.offsetWidth * 0.7, startWidth + delta),
+        );
+        setDetailsWidth(newWidth);
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      };
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    },
+    [detailsWidth],
+  );
+
   // Materialization state - map of grain_key -> pre-agg info
   const [plannedPreaggs, setPlannedPreaggs] = useState({});
 
@@ -259,6 +323,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,19 +1285,17 @@ 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">
+      <div className="planner-layout" ref={plannerLayoutRef}>
         {/* Left: Selection Panel */}
-        <aside className="planner-selection">
+        <aside
+          className="planner-selection"
+          style={selectionWidth != null ? { width: selectionWidth } : undefined}
+        >
           <SelectionPanel
             metrics={metrics}
             selectedMetrics={selectedMetrics}
@@ -1228,9 +1317,17 @@ export function QueryPlannerPage() {
               selectedMetrics.length > 0 && selectedDimensions.length > 0
             }
             queryLoading={queryLoading}
+            compatibleMetrics={compatibleMetrics}
           />
         </aside>
 
+        {/* Vertical resizer between selection panel and main content */}
+        <div
+          className="vertical-resizer"
+          onMouseDown={handleSelectionResizerMouseDown}
+          title="Drag to resize"
+        />
+
         {/* Main Content Area - Either Results or Graph+Details */}
         {showResults ? (
           <ResultsView
@@ -1295,8 +1392,18 @@ export function QueryPlannerPage() {
               )}
             </main>
 
+            {/* Vertical resizer between graph and details */}
+            <div
+              className="vertical-resizer"
+              onMouseDown={handleDetailsResizerMouseDown}
+              title="Drag to resize"
+            />
+
             {/* Right: Details Panel */}
-            <aside className="planner-details">
+            <aside
+              className="planner-details"
+              style={detailsWidth != null ? { width: detailsWidth } : undefined}
+            >
               {selectedNode?.type === 'preagg' ||
               selectedNode?.type === 'component' ? (
                 <PreAggDetailsPanel