datajunction-ui 0.0.98 → 0.0.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.98",
+  "version": "0.0.100",
   "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';
@@ -125,7 +125,7 @@ function detectChartConfig(columns, rows) {
   return null;
 }
 
-const MAX_GROUP_VALUES = 7;
+const MAX_GROUP_VALUES = 50;
 
 function buildPivotedData(rows, columns, xCol, groupByCol, metricCols) {
   const xIdx = xCol.idx;
@@ -234,6 +234,7 @@ function KpiCards({ rows, metricCols }) {
 const CHART_MARGIN = { top: 8, right: 24, left: 8, bottom: 40 };
 const AXIS_TICK = { fontSize: 11, fill: '#64748b' };
 const TOOLTIP_STYLE = { fontSize: 12, border: '1px solid #e2e8f0' };
+const TOOLTIP_WRAPPER_STYLE = { zIndex: 9999 };
 
 const Chart = memo(function Chart({
   type,
@@ -262,7 +263,10 @@ const Chart = memo(function Chart({
             interval={xInterval}
           />
           <YAxis tickFormatter={formatYAxis} tick={AXIS_TICK} width={60} />
-          <Tooltip contentStyle={TOOLTIP_STYLE} />
+          <Tooltip
+            contentStyle={TOOLTIP_STYLE}
+            wrapperStyle={TOOLTIP_WRAPPER_STYLE}
+          />
           {keys.map((key, i) => (
             <Line
               key={key}
@@ -413,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);
@@ -520,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 && (
@@ -585,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 ? (