datajunction-ui 0.0.143 → 0.0.145

package/package.json

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

package/src/app/pages/CubeBuilderPage/CubePreviewPanel.jsx

@@ -0,0 +1,173 @@
+/**
+ * Preview panel for cube builder showing selection summary and generated SQL.
+ * Matches Query Planner styling exactly.
+ */
+import React, {
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+} from 'react';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
+import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import DJClientContext from '../../providers/djclient';
+import {
+  formatBytes,
+  formatScanEstimate,
+} from '../QueryPlannerPage/PreAggDetailsPanel';
+
+SyntaxHighlighter.registerLanguage('sql', sql);
+
+const debounce = (fn, ms) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  };
+};
+
+export const CubePreviewPanel = React.memo(function CubePreviewPanel({
+  metrics = [],
+  dimensions = [],
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Fetch SQL when metrics/dimensions change
+  const fetchSql = useCallback(
+    debounce(async (m, d) => {
+      if (m.length === 0 || d.length === 0) {
+        setResult(null);
+        return;
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await djClient.metricsV3(m, d, '');
+        if (res.errors && res.errors.length > 0) {
+          setError(
+            res.errors
+              .map(e =>
+                typeof e === 'string' ? e : e.message || JSON.stringify(e),
+              )
+              .join(', '),
+          );
+          setResult(null);
+        } else if (res.message) {
+          setError(res.message);
+          setResult(null);
+        } else {
+          setResult(res);
+        }
+      } catch (err) {
+        setError(err.message || 'Failed to generate SQL');
+        setResult(null);
+      } finally {
+        setLoading(false);
+      }
+    }, 500),
+    [djClient],
+  );
+
+  useEffect(() => {
+    fetchSql(metrics, dimensions);
+  }, [metrics, dimensions, fetchSql]);
+
+  // Get short name from full metric/dimension name
+  const getShortName = fullName => {
+    if (!fullName) return '';
+    const parts = fullName.split('.');
+    return parts[parts.length - 1];
+  };
+
+  const scanInfo = formatScanEstimate(result?.scan_estimate);
+
+  // SyntaxHighlighter is the heaviest piece of DOM in the form — re-rendering
+  // it on every keystroke makes typing in unrelated fields feel laggy. Memo
+  // by `result?.sql` so the highlighted output is reused as long as the SQL
+  // hasn't changed.
+  const highlightedSql = useMemo(() => {
+    if (!result?.sql) return null;
+    return (
+      <SyntaxHighlighter
+        language="sql"
+        style={atomOneLight}
+        customStyle={{
+          margin: 0,
+          padding: 0,
+          fontSize: '11px',
+          background: 'transparent',
+          border: 'none',
+        }}
+      >
+        {result.sql}
+      </SyntaxHighlighter>
+    );
+  }, [result?.sql]);
+
+  return (
+    <div className="cube-preview-panel">
+      <div className="preview-section-header">
+        <span className="preview-section-icon">⌘</span>
+        <span className="preview-section-title">Generated SQL</span>
+      </div>
+
+      {/* Scan Cost Banner */}
+      {scanInfo && (
+        <div className={`scan-estimate-banner scan-estimate-${scanInfo.level}`}>
+          <span className="scan-estimate-icon">{scanInfo.icon}</span>
+          <div className="scan-estimate-content">
+            <div className="scan-estimate-header">
+              <strong>Scan Cost:</strong>{' '}
+              {scanInfo.totalBytes !== null && scanInfo.totalBytes !== undefined
+                ? (scanInfo.hasMissingData ? '≥ ' : '') +
+                  formatBytes(scanInfo.totalBytes)
+                : 'Unknown'}
+            </div>
+            <div className="scan-estimate-sources">
+              {scanInfo.sources.map((source, idx) => {
+                let displayName = source.source_name;
+                if (source.schema_ && source.table) {
+                  displayName = `${source.schema_}.${source.table}`;
+                } else if (source.table) {
+                  displayName = source.table;
+                }
+                return (
+                  <div key={idx} className="scan-source-item">
+                    <span
+                      className="scan-source-name"
+                      title={source.source_name}
+                    >
+                      {displayName}
+                    </span>
+                    <span className="scan-source-size">
+                      {source.total_bytes !== null &&
+                      source.total_bytes !== undefined
+                        ? formatBytes(source.total_bytes)
+                        : 'no size data'}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="preview-sql-container">
+        {loading && <div className="preview-loading">Generating SQL...</div>}
+        {error && <div className="preview-error">{error}</div>}
+        {!loading && !error && !result?.sql && (
+          <div className="preview-empty">
+            Select metrics and dimensions to preview SQL
+          </div>
+        )}
+        {!loading && !error && highlightedSql}
+      </div>
+    </div>
+  );
+});

package/src/app/pages/CubeBuilderPage/DimensionsSelect.jsx

@@ -1,24 +1,64 @@
 /**
- * A select component for picking dimensions
+ * A select component for picking dimensions.
+ * Dimensions are grouped by hop distance (how many joins away from the metrics).
  */
-import { useField, useFormikContext } from 'formik';
 import Select from 'react-select';
 import React, { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
 import { labelize } from '../../../utils/form';
 
-export const DimensionsSelect = ({ cube }) => {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const { values, setFieldValue } = useFormikContext();
+/**
+ * Calculate hop distance from path length.
+ * path.length represents how many joins away the dimension is.
+ */
+const getHopDistance = path => {
+  if (!path || path.length === 0) return 0;
+  return path.length;
+};
+
+/**
+ * Render role information as a label suffix when a dimension is reached
+ * via a named role (e.g. "[birth_country]"). Stored role values can be raw
+ * (e.g. "birth_country") or already bracketed; normalize either form to
+ * " [role]". Returns "" when there is no role.
+ */
+const formatRoleSuffix = role => {
+  if (!role) return '';
+  const stripped = role.replace(/^\[|\]$/g, '');
+  return stripped ? ` [${stripped}]` : '';
+};
+
+/**
+ * Parse a role suffix off the end of a dimension's full name.
+ * "default.user_dim.country_code[birth_country]" → ["default.user_dim.country_code", "birth_country"]
+ * "default.user_dim.country_code"                → ["default.user_dim.country_code", ""]
+ */
+const splitRole = fullName => {
+  if (!fullName) return [fullName, ''];
+  const match = fullName.match(/^(.+?)\[([^\]]+)\]$/);
+  return match ? [match[1], match[2]] : [fullName, ''];
+};
+
+/**
+ * Get human-readable label for hop distance.
+ */
+const getHopLabel = hopDistance => {
+  if (hopDistance === 0) return 'Direct Dimensions';
+  if (hopDistance === 1) return '1 Hop Away';
+  return `${hopDistance} Hops Away`;
+};
 
-  // eslint-disable-next-line no-unused-vars
-  const [field, _, helpers] = useField('dimensions');
-  const { setValue } = helpers;
+export const DimensionsSelect = React.memo(function DimensionsSelect({
+  cube,
+  metrics,
+  onChange,
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
 
-  // All common dimensions for the selected metrics, grouped by the dimension node and path
-  const [allDimensionsOptions, setAllDimensionsOptions] = useState([]);
+  // Dimensions grouped by hop distance, then by node+path
+  const [dimensionsByHop, setDimensionsByHop] = useState({});
 
-  // The selected dimensions, also grouped by dimension node and path
+  // The selected dimensions, grouped by dimension node and path
   const [selectedDimensionsByGroup, setSelectedDimensionsByGroup] = useState(
     {},
   );
@@ -35,52 +75,63 @@ export const DimensionsSelect = ({ cube }) => {
             value: cubeDim.name,
             label:
               labelize(cubeDim.attribute) +
+              formatRoleSuffix(cubeDim.role) +
               (cubeDim.properties?.includes('primary_key') ? ' (PK)' : ''),
           };
         });
         setDefaultDimensions(cubeDimensions);
-        setValue(cubeDimensions.map(m => m.value));
+        onChange(cubeDimensions.map(m => m.value));
       }
 
-      if (values.metrics && values.metrics.length > 0) {
+      if (metrics && metrics.length > 0) {
         // Populate the common dimensions list based on the selected metrics
-        const commonDimensions = await djClient.commonDimensions(
-          values.metrics,
-        );
-        const grouped = Object.entries(
-          commonDimensions.reduce((group, dimension) => {
-            group[dimension.node_name + dimension.path] =
-              group[dimension.node_name + dimension.path] ?? [];
-            group[dimension.node_name + dimension.path].push(dimension);
+        const commonDimensions = await djClient.commonDimensions(metrics);
+
+        // First group by node_name + path (original grouping)
+        const groupedByNodePath = commonDimensions.reduce(
+          (group, dimension) => {
+            const key = dimension.node_name + JSON.stringify(dimension.path);
+            group[key] = group[key] ?? [];
+            group[key].push(dimension);
             return group;
-          }, {}),
+          },
+          {},
         );
-        setAllDimensionsOptions(grouped);
+
+        // Then organize by hop distance
+        const byHop = {};
+        Object.values(groupedByNodePath).forEach(dimensionsInGroup => {
+          const hopDistance = getHopDistance(dimensionsInGroup[0].path);
+          byHop[hopDistance] = byHop[hopDistance] ?? [];
+          byHop[hopDistance].push(dimensionsInGroup);
+        });
+
+        setDimensionsByHop(byHop);
 
         // Set the selected cube dimensions if an existing cube is being edited
         if (cube) {
           const currentSelectedDimensionsByGroup = {};
-          grouped.forEach(grouping => {
-            const dimensionsInGroup = grouping[1];
-            currentSelectedDimensionsByGroup[dimensionsInGroup[0].node_name] =
-              getValue(
-                cubeDimensions.filter(
-                  dim =>
-                    dimensionsInGroup.filter(x => {
-                      return dim.value === x.name;
-                    }).length > 0,
-                ),
-              );
-            setSelectedDimensionsByGroup(currentSelectedDimensionsByGroup);
-            setValue(Object.values(currentSelectedDimensionsByGroup).flat(2));
+          Object.values(groupedByNodePath).forEach(dimensionsInGroup => {
+            const groupKey =
+              dimensionsInGroup[0].node_name +
+              JSON.stringify(dimensionsInGroup[0].path);
+            currentSelectedDimensionsByGroup[groupKey] = getValue(
+              cubeDimensions.filter(
+                dim =>
+                  dimensionsInGroup.filter(x => dim.value === x.name).length >
+                  0,
+              ),
+            );
           });
+          setSelectedDimensionsByGroup(currentSelectedDimensionsByGroup);
+          onChange(Object.values(currentSelectedDimensionsByGroup).flat(2));
         }
       } else {
-        setAllDimensionsOptions([]);
+        setDimensionsByHop({});
       }
     };
     fetchData().catch(console.error);
-  }, [djClient, setFieldValue, setValue, values.metrics, cube]);
+  }, [djClient, onChange, metrics, cube]);
 
   // Retrieves the selected values as a list (since it is a multi-select)
   const getValue = options => {
@@ -91,62 +142,182 @@ export const DimensionsSelect = ({ cube }) => {
     }
   };
 
-  // Builds the block of dimensions selectors, grouped by node name + path
-  return allDimensionsOptions.map(grouping => {
-    const dimensionsInGroup = grouping[1];
-    const groupHeader = (
-      <h5
-        style={{
-          fontWeight: 'normal',
-          marginBottom: '5px',
-          marginTop: '15px',
-        }}
-      >
-        <a href={`/nodes/${dimensionsInGroup[0].node_name}`}>
-          <b>{dimensionsInGroup[0].node_display_name}</b>
-        </a>{' '}
-        via{' '}
-        <span className="HighlightPath">
-          {dimensionsInGroup[0].path.join(' → ')}
-        </span>
-      </h5>
-    );
-    const dimensionGroupOptions = dimensionsInGroup.map(dim => {
-      return {
-        value: dim.name,
-        label:
-          labelize(dim.name.split('.').slice(-1)[0]) +
-          (dim.properties?.includes('primary_key') ? ' (PK)' : ''),
-      };
-    });
-    //
-    const cubeDimensions = defaultDimensions.filter(
-      dim =>
-        dimensionGroupOptions.filter(x => {
-          return dim.value === x.value;
-        }).length > 0,
-    );
-    return (
-      <>
-        {groupHeader}
-        <span data-testid={'dimensions-' + dimensionsInGroup[0].node_name}>
-          <Select
-            className=""
-            name={'dimensions-' + dimensionsInGroup[0].node_name}
-            defaultValue={cubeDimensions}
-            options={dimensionGroupOptions}
-            isMulti
-            isClearable
-            closeMenuOnSelect={false}
-            onChange={selected => {
-              selectedDimensionsByGroup[dimensionsInGroup[0].node_name] =
-                getValue(selected);
-              setSelectedDimensionsByGroup(selectedDimensionsByGroup);
-              setValue(Object.values(selectedDimensionsByGroup).flat(2));
-            }}
-          />
-        </span>
-      </>
-    );
-  });
-};
+  // Sort hop distances numerically
+  const sortedHops = Object.keys(dimensionsByHop)
+    .map(Number)
+    .sort((a, b) => a - b);
+
+  // Custom styles to color-code dimension tags (matching Query Planner exactly)
+  const dimensionStyles = {
+    multiValue: base => ({
+      ...base,
+      backgroundColor: '#ffefd0',
+      border: '1px solid rgba(169, 102, 33, 0.3)',
+      borderRadius: '3px',
+      margin: '2px',
+    }),
+    multiValueLabel: base => ({
+      ...base,
+      color: '#a96621',
+      fontSize: '10px',
+      fontWeight: 500,
+      padding: '2px 4px 2px 6px',
+    }),
+    multiValueRemove: base => ({
+      ...base,
+      color: '#a96621',
+      padding: '0 4px',
+      ':hover': {
+        backgroundColor: '#ffe4b3',
+        color: '#a96621',
+      },
+    }),
+  };
+
+  if (sortedHops.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      {sortedHops.map(hopDistance => {
+        const groupsAtHop = dimensionsByHop[hopDistance];
+        const dimensionCount = groupsAtHop.reduce(
+          (sum, g) => sum + g.length,
+          0,
+        );
+
+        return (
+          <div key={hopDistance} style={{ marginBottom: '20px' }}>
+            {/* Hop distance header */}
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '6px 0',
+                borderBottom: '1px solid #dee2e6',
+                marginBottom: '8px',
+                marginTop: hopDistance > 0 ? '24px' : '0',
+              }}
+            >
+              <span
+                style={{
+                  fontWeight: 600,
+                  color: '#212529',
+                  fontSize: '14px',
+                }}
+              >
+                {getHopLabel(hopDistance)}
+              </span>
+              <span
+                style={{
+                  marginLeft: '10px',
+                  color: '#6c757d',
+                  fontSize: '13px',
+                }}
+              >
+                ({dimensionCount} dimension{dimensionCount !== 1 ? 's' : ''})
+              </span>
+            </div>
+
+            {/* Dimension groups within this hop - indented */}
+            <div style={{ paddingLeft: '6px' }}>
+              {groupsAtHop.map(dimensionsInGroup => {
+                const groupKey =
+                  dimensionsInGroup[0].node_name +
+                  JSON.stringify(dimensionsInGroup[0].path);
+
+                // Convert path node names to display names
+                const pathDisplayNames = dimensionsInGroup[0].path.map(
+                  nodeName => {
+                    const lastSegment = nodeName.split('.').pop();
+                    return labelize(lastSegment);
+                  },
+                );
+
+                const groupHeader = (
+                  <h5
+                    style={{
+                      fontWeight: 'normal',
+                      marginBottom: '5px',
+                      marginTop: '10px',
+                      fontSize: '13px',
+                    }}
+                    title={dimensionsInGroup[0].path.join(' → ')}
+                  >
+                    <a href={`/nodes/${dimensionsInGroup[0].node_name}`}>
+                      <b>{dimensionsInGroup[0].node_display_name}</b>
+                    </a>
+                    {pathDisplayNames.length > 0 && (
+                      <>
+                        {' '}
+                        <span style={{ color: '#6c757d' }}>via</span>{' '}
+                        {pathDisplayNames.map((displayName, idx) => (
+                          <span key={idx}>
+                            {idx > 0 && ' → '}
+                            <a
+                              href={`/nodes/${dimensionsInGroup[0].path[idx]}`}
+                            >
+                              {displayName}
+                            </a>
+                          </span>
+                        ))}
+                      </>
+                    )}
+                  </h5>
+                );
+
+                const dimensionGroupOptions = dimensionsInGroup.map(dim => {
+                  const [bareName, role] = splitRole(dim.name);
+                  return {
+                    value: dim.name,
+                    label:
+                      labelize(bareName.split('.').slice(-1)[0]) +
+                      formatRoleSuffix(role) +
+                      (dim.properties?.includes('primary_key') ? ' (PK)' : ''),
+                  };
+                });
+
+                const cubeDimensions = defaultDimensions.filter(
+                  dim =>
+                    dimensionGroupOptions.filter(x => dim.value === x.value)
+                      .length > 0,
+                );
+
+                return (
+                  <div key={groupKey}>
+                    {groupHeader}
+                    <span
+                      data-testid={
+                        'dimensions-' + dimensionsInGroup[0].node_name
+                      }
+                    >
+                      <Select
+                        className=""
+                        name={'dimensions-' + groupKey}
+                        defaultValue={cubeDimensions}
+                        options={dimensionGroupOptions}
+                        styles={dimensionStyles}
+                        isMulti
+                        isClearable
+                        closeMenuOnSelect={false}
+                        onChange={selected => {
+                          const newSelected = {
+                            ...selectedDimensionsByGroup,
+                            [groupKey]: getValue(selected),
+                          };
+                          setSelectedDimensionsByGroup(newSelected);
+                          onChange(Object.values(newSelected).flat(2));
+                        }}
+                      />
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});