datajunction-ui 0.0.99 → 0.0.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.99",
+  "version": "0.0.101",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect, memo } from 'react';
+import { useState, useCallback, useMemo, useEffect, useRef, memo } from 'react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
@@ -417,6 +417,38 @@ export function ResultsView({
   const [sortDirection, setSortDirection] = useState('asc');
   const [activeTab, setActiveTab] = useState('table');
 
+  // Resizable SQL pane height (px); null = use CSS default
+  const [sqlPaneHeight, setSqlPaneHeight] = useState(null);
+  const resultsPanesRef = useRef(null);
+
+  const handleSqlResizerMouseDown = useCallback(
+    e => {
+      e.preventDefault();
+      const container = resultsPanesRef.current;
+      if (!container) return;
+      const startY = e.clientY;
+      const startHeight = sqlPaneHeight ?? container.offsetHeight * 0.333;
+
+      const onMouseMove = moveEvent => {
+        const delta = moveEvent.clientY - startY;
+        const newHeight = Math.max(
+          80,
+          Math.min(container.offsetHeight * 0.8, startHeight + delta),
+        );
+        setSqlPaneHeight(newHeight);
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      };
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    },
+    [sqlPaneHeight],
+  );
+
   const handleCopySql = useCallback(() => {
     if (sqlQuery) {
       navigator.clipboard.writeText(sqlQuery);
@@ -524,9 +556,16 @@ export function ResultsView({
       </div>
 
       {/* Two-pane layout: SQL (top) + Results (bottom) */}
-      <div className="results-panes">
+      <div className="results-panes" ref={resultsPanesRef}>
         {/* SQL Pane */}
-        <div className="sql-pane">
+        <div
+          className="sql-pane"
+          style={
+            sqlPaneHeight != null
+              ? { flex: `0 0 ${sqlPaneHeight}px`, maxHeight: sqlPaneHeight }
+              : undefined
+          }
+        >
           <div className="sql-pane-header">
             <span className="sql-pane-title">SQL Query</span>
             {cubeName && (
@@ -589,6 +628,13 @@ export function ResultsView({
           </div>
         </div>
 
+        {/* Horizontal resizer between SQL and results panes */}
+        <div
+          className="horizontal-resizer"
+          onMouseDown={handleSqlResizerMouseDown}
+          title="Drag to resize"
+        />
+
         {/* Results Pane */}
         <div className="results-pane">
           {loading ? (

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__/index.test.jsx

@@ -1427,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

@@ -84,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({});
 
@@ -1229,9 +1290,12 @@ export function QueryPlannerPage() {
       )}
 
       {/* 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}
@@ -1257,6 +1321,13 @@ export function QueryPlannerPage() {
           />
         </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
@@ -1321,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

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

@@ -390,10 +390,9 @@
 /* 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: hidden;
   display: flex;
   flex-direction: column;
@@ -475,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;
 }
 
@@ -3941,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;