Improve Explorer page: dimension grouping, compatible metric highlighting, resizable panes (#1896)

* Set up grouping of dimensions by node and paths

* Fix a few small issues

* Add support for highlighting metrics that are compatible with the selected dimensions

* Fix transparency of tooltip

* Clean up styling

* Rename Explore to Explorer

Author: shangyian

datajunction-ui/src/app/pages/QueryPlannerPage/ResultsView.jsx

@@ -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}