datajunction-ui 0.0.144 → 0.0.146

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

@@ -1,75 +1,288 @@
 /**
  * A select component for picking metrics.
+ * Uses async search to efficiently handle large numbers of metrics.
+ * Results are grouped by namespace for easier navigation.
  */
-import { useField, useFormikContext } from 'formik';
-import Select from 'react-select';
-import React, { useContext, useEffect, useState } from 'react';
+import AsyncSelect, { components } from 'react-select/async';
+import React, { useContext, useEffect, useState, useCallback } from 'react';
 import DJClientContext from '../../providers/djclient';
 
-export const MetricsSelect = ({ cube }) => {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const { values } = useFormikContext();
+// Debounce helper
+const debounce = (fn, ms) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    return new Promise(resolve => {
+      timer = setTimeout(() => resolve(fn(...args)), ms);
+    });
+  };
+};
 
-  // eslint-disable-next-line no-unused-vars
-  const [field, _, helpers] = useField('metrics');
-  const { setValue } = helpers;
+/**
+ * Extract namespace from a fully qualified metric name.
+ * e.g., "finance.total_revenue" -> "finance"
+ */
+const getNamespace = metricName => {
+  if (!metricName) return 'default';
+  const parts = metricName.split('.');
+  return parts.slice(0, -1).join('.') || 'default';
+};
 
-  // All metrics options
-  const [metrics, setMetrics] = useState([]);
+/**
+ * Git branch icon SVG component
+ */
+const GitBranchIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="6" y1="3" x2="6" y2="15" />
+    <circle cx="18" cy="6" r="3" />
+    <circle cx="6" cy="18" r="3" />
+    <path d="M18 9a9 9 0 0 1-9 9" />
+  </svg>
+);
 
-  // The existing cube's metrics, if editing a cube
-  const [defaultMetrics, setDefaultMetrics] = useState([]);
+/**
+ * Custom Group heading component matching Explorer styling.
+ */
+const GroupHeading = props => {
+  const { data } = props;
+  const { namespace, gitInfo, count } = data;
 
-  // Get metrics
-  useEffect(() => {
-    const fetchData = async () => {
-      if (cube) {
-        const cubeMetrics = cube?.current.cubeMetrics.map(metric => {
-          return {
-            value: metric.name,
-            label: metric.name,
-          };
-        });
-        setDefaultMetrics(cubeMetrics);
-        await setValue(cubeMetrics.map(m => m.value));
-      }
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '8px 12px',
+        backgroundColor: '#fafafa',
+        borderBottom: '1px solid #eee',
+      }}
+    >
+      <span style={{ fontWeight: 500, color: '#333' }}>{namespace}</span>
+      {gitInfo?.branch && (
+        <span
+          title={`Branch: ${gitInfo.branch}`}
+          style={{
+            marginLeft: '8px',
+            fontSize: '11px',
+            padding: '2px 6px',
+            borderRadius: '3px',
+            backgroundColor: gitInfo.isDefaultBranch ? '#d4edda' : '#fff3cd',
+            color: gitInfo.isDefaultBranch ? '#155724' : '#856404',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '4px',
+          }}
+        >
+          <GitBranchIcon />
+          {gitInfo.branch}
+        </span>
+      )}
+      <span style={{ marginLeft: '8px', color: '#999', fontSize: '12px' }}>
+        ({count})
+      </span>
+    </div>
+  );
+};
+
+/**
+ * Group flat metrics array into react-select grouped format.
+ * Includes branch info for styled group headers.
+ */
+const groupMetricsByNamespace = metrics => {
+  const grouped = {};
+  const gitInfoByNamespace = {};
 
-      const metrics = await djClient.metrics();
-      setMetrics(metrics.map(m => ({ value: m, label: m })));
-    };
-    fetchData().catch(console.error);
-  }, [djClient, djClient.metrics, cube]);
-
-  const getValue = options => {
-    if (options) {
-      return options.map(option => option.value);
-    } else {
-      return [];
+  metrics.forEach(metric => {
+    const namespace = getNamespace(metric.value);
+    if (!grouped[namespace]) {
+      grouped[namespace] = [];
+      gitInfoByNamespace[namespace] = metric.gitInfo;
     }
-  };
+    grouped[namespace].push(metric);
+  });
+
+  // Sort namespaces alphabetically and build grouped options
+  return Object.keys(grouped)
+    .sort()
+    .map(namespace => {
+      const gitInfo = gitInfoByNamespace[namespace];
+      const count = grouped[namespace].length;
+
+      return {
+        label: namespace,
+        namespace,
+        gitInfo,
+        count,
+        options: grouped[namespace],
+      };
+    });
+};
 
-  const render = () => {
-    if (
-      metrics.length > 0 ||
-      (cube !== undefined && defaultMetrics.length > 0 && metrics.length > 0)
-    ) {
-      return (
-        <Select
-          defaultValue={defaultMetrics}
-          options={metrics}
-          name="metrics"
-          placeholder={`${metrics.length} Available Metrics`}
-          onBlur={field.onBlur}
-          onChange={selected => {
-            setValue(getValue(selected));
+/**
+ * Custom option component that shows display name and full node name.
+ */
+const formatOptionLabel = (option, { context }) => {
+  if (context === 'menu') {
+    const displayName = option.label;
+    const nodeName = option.value;
+    const isDifferent = displayName !== nodeName;
+
+    return (
+      <div>
+        <div>{displayName}</div>
+        {isDifferent && (
+          <div style={{ fontSize: '12px', color: '#999', marginTop: '2px' }}>
+            {nodeName}
+          </div>
+        )}
+      </div>
+    );
+  }
+  // For selected chips: show display name with tooltip and optional branch badge
+  const displayName = option.label || option.value;
+  const gitInfo = option.gitInfo;
+  const showBranch = gitInfo?.branch && !gitInfo?.isDefaultBranch;
+
+  return (
+    <span
+      title={option.value}
+      style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+    >
+      <span>{displayName}</span>
+      {showBranch && (
+        <span
+          style={{
+            fontSize: '9px',
+            padding: '1px 4px',
+            borderRadius: '2px',
+            backgroundColor: 'rgba(255, 255, 255, 0.6)',
+            color: '#a2283e',
+            border: '1px solid rgba(162, 40, 62, 0.2)',
+            fontWeight: 500,
+            letterSpacing: '0.2px',
           }}
-          noOptionsMessage={() => 'No metrics found.'}
-          isMulti
-          isClearable
-          closeMenuOnSelect={false}
-        />
-      );
+        >
+          ⎇ {gitInfo.branch}
+        </span>
+      )}
+    </span>
+  );
+};
+
+export const MetricsSelect = React.memo(function MetricsSelect({
+  cube,
+  onChange,
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Currently selected metrics (for controlled component)
+  const [selectedMetrics, setSelectedMetrics] = useState([]);
+
+  // Load existing cube metrics when editing
+  useEffect(() => {
+    if (cube?.current?.cubeMetrics) {
+      const cubeMetrics = cube.current.cubeMetrics.map(metric => ({
+        value: metric.name,
+        label: metric.displayName || metric.name,
+      }));
+      setSelectedMetrics(cubeMetrics);
+      onChange(cubeMetrics.map(m => m.value));
+
+      // Fetch gitInfo for existing metrics so we can display branch badges
+      const names = cubeMetrics.map(m => m.value);
+      djClient.getMetricsInfo(names).then(enriched => {
+        if (enriched.length > 0) {
+          const infoByName = Object.fromEntries(
+            enriched.map(e => [e.value, e]),
+          );
+          setSelectedMetrics(prev =>
+            prev.map(m => (infoByName[m.value] ? infoByName[m.value] : m)),
+          );
+        }
+      });
     }
+  }, [cube, onChange, djClient]);
+
+  // Async load options - searches metrics via GraphQL, grouped by namespace
+  const loadOptions = useCallback(
+    debounce(async inputValue => {
+      if (!inputValue || inputValue.length < 2) {
+        return [];
+      }
+      try {
+        const results = await djClient.searchMetrics(inputValue, 50);
+        return groupMetricsByNamespace(results);
+      } catch (error) {
+        console.error('Error searching metrics:', error);
+        return [];
+      }
+    }, 300),
+    [djClient],
+  );
+
+  const handleChange = selected => {
+    setSelectedMetrics(selected || []);
+    onChange((selected || []).map(option => option.value));
   };
-  return render();
-};
+
+  // Custom styles to color-code metric tags (matching Query Planner exactly)
+  const metricStyles = {
+    multiValue: base => ({
+      ...base,
+      backgroundColor: '#fad7dd',
+      border: '1px solid rgba(162, 40, 62, 0.3)',
+      borderRadius: '3px',
+      margin: '2px',
+    }),
+    multiValueLabel: base => ({
+      ...base,
+      color: '#a2283e',
+      fontSize: '10px',
+      fontWeight: 500,
+      padding: '2px 4px 2px 6px',
+    }),
+    multiValueRemove: base => ({
+      ...base,
+      color: '#a2283e',
+      padding: '0 4px',
+      ':hover': {
+        backgroundColor: '#f5c4cd',
+        color: '#a2283e',
+      },
+    }),
+  };
+
+  return (
+    <AsyncSelect
+      value={selectedMetrics}
+      loadOptions={loadOptions}
+      onChange={handleChange}
+      name="metrics"
+      placeholder="Type to search metrics..."
+      noOptionsMessage={({ inputValue }) =>
+        inputValue.length < 2
+          ? 'Type at least 2 characters to search'
+          : 'No metrics found'
+      }
+      loadingMessage={() => 'Searching...'}
+      formatOptionLabel={formatOptionLabel}
+      components={{ GroupHeading }}
+      styles={metricStyles}
+      isMulti
+      isClearable
+      closeMenuOnSelect={false}
+      cacheOptions
+      defaultOptions={false}
+    />
+  );
+});

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

@@ -0,0 +1,108 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { CubePreviewPanel } from '../CubePreviewPanel';
+import DJClientContext from '../../../providers/djclient';
+import React from 'react';
+
+const renderPanel = ({ djClient, initialValues }) =>
+  render(
+    <DJClientContext.Provider value={{ DataJunctionAPI: djClient }}>
+      <CubePreviewPanel
+        metrics={initialValues.metrics}
+        dimensions={initialValues.dimensions}
+      />
+    </DJClientContext.Provider>,
+  );
+
+describe('CubePreviewPanel', () => {
+  it('shows the empty state when no metrics or dimensions are selected', () => {
+    const djClient = { metricsV3: jest.fn() };
+    renderPanel({ djClient, initialValues: { metrics: [], dimensions: [] } });
+
+    expect(
+      screen.getByText('Select metrics and dimensions to preview SQL'),
+    ).toBeInTheDocument();
+    // No SQL fetch should be issued for an empty selection.
+    expect(djClient.metricsV3).not.toHaveBeenCalled();
+  });
+
+  it('renders the generated SQL once metricsV3 resolves', async () => {
+    const djClient = {
+      metricsV3: jest.fn().mockResolvedValue({ sql: 'SELECT 1', errors: [] }),
+    };
+    renderPanel({
+      djClient,
+      initialValues: {
+        metrics: ['default.revenue'],
+        dimensions: ['default.date'],
+      },
+    });
+
+    // The fetch is debounced 500ms — wait for it via real time.
+    await waitFor(
+      () =>
+        expect(djClient.metricsV3).toHaveBeenCalledWith(
+          ['default.revenue'],
+          ['default.date'],
+          '',
+        ),
+      { timeout: 1500 },
+    );
+    // Once SQL arrives, the empty / loading / error states all disappear.
+    await waitFor(
+      () =>
+        expect(
+          screen.queryByText('Select metrics and dimensions to preview SQL'),
+        ).not.toBeInTheDocument(),
+      { timeout: 1500 },
+    );
+    expect(screen.queryByText('Generating SQL...')).not.toBeInTheDocument();
+  });
+
+  it('surfaces API errors returned alongside a 200 response', async () => {
+    const djClient = {
+      metricsV3: jest.fn().mockResolvedValue({ errors: ['boom'] }),
+    };
+    renderPanel({
+      djClient,
+      initialValues: {
+        metrics: ['default.revenue'],
+        dimensions: ['default.date'],
+      },
+    });
+    expect(
+      await screen.findByText('boom', {}, { timeout: 1500 }),
+    ).toBeInTheDocument();
+  });
+
+  it('surfaces the message field when the API returns it instead of sql', async () => {
+    const djClient = {
+      metricsV3: jest.fn().mockResolvedValue({ message: 'no metrics' }),
+    };
+    renderPanel({
+      djClient,
+      initialValues: {
+        metrics: ['default.revenue'],
+        dimensions: ['default.date'],
+      },
+    });
+    expect(
+      await screen.findByText('no metrics', {}, { timeout: 1500 }),
+    ).toBeInTheDocument();
+  });
+
+  it('surfaces thrown errors from metricsV3', async () => {
+    const djClient = {
+      metricsV3: jest.fn().mockRejectedValue(new Error('network down')),
+    };
+    renderPanel({
+      djClient,
+      initialValues: {
+        metrics: ['default.revenue'],
+        dimensions: ['default.date'],
+      },
+    });
+    expect(
+      await screen.findByText('network down', {}, { timeout: 1500 }),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,229 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { DimensionsSelect } from '../DimensionsSelect';
+import DJClientContext from '../../../providers/djclient';
+import React from 'react';
+
+const renderInForm = ({
+  djClient,
+  cube,
+  initialValues = { metrics: [], dimensions: [] },
+  onChange = () => {},
+}) =>
+  render(
+    <DJClientContext.Provider value={{ DataJunctionAPI: djClient }}>
+      <DimensionsSelect
+        cube={cube}
+        metrics={initialValues.metrics}
+        onChange={onChange}
+      />
+    </DJClientContext.Provider>,
+  );
+
+describe('DimensionsSelect', () => {
+  it('renders nothing when no metrics are selected', () => {
+    const djClient = { commonDimensions: jest.fn() };
+    const { container } = renderInForm({ djClient });
+    expect(container.firstChild).toBeNull();
+    expect(djClient.commonDimensions).not.toHaveBeenCalled();
+  });
+
+  it('groups dimensions by hop distance', async () => {
+    const djClient = {
+      commonDimensions: jest.fn().mockResolvedValue([
+        // Direct dimension (path length 0)
+        {
+          name: 'default.event.event_type',
+          node_name: 'default.event',
+          node_display_name: 'Event',
+          attribute: 'event_type',
+          properties: [],
+          path: [],
+        },
+        // 2-hop dimension
+        {
+          name: 'default.user.country',
+          node_name: 'default.user',
+          node_display_name: 'User',
+          attribute: 'country',
+          properties: [],
+          path: ['default.event.user_id', 'default.user.id'],
+        },
+      ]),
+    };
+
+    renderInForm({
+      djClient,
+      initialValues: {
+        metrics: ['default.events'],
+        dimensions: [],
+      },
+    });
+
+    // Hop labels render once the fetch resolves.
+    expect(await screen.findByText('Direct Dimensions')).toBeInTheDocument();
+    expect(await screen.findByText('2 Hops Away')).toBeInTheDocument();
+
+    await waitFor(() =>
+      expect(djClient.commonDimensions).toHaveBeenCalledWith([
+        'default.events',
+      ]),
+    );
+  });
+
+  it('uses singular "1 Hop Away" label for path length 1', async () => {
+    const djClient = {
+      commonDimensions: jest.fn().mockResolvedValue([
+        {
+          name: 'default.user.country',
+          node_name: 'default.user',
+          node_display_name: 'User',
+          attribute: 'country',
+          properties: [],
+          path: ['default.event.user_id'],
+        },
+      ]),
+    };
+
+    renderInForm({
+      djClient,
+      initialValues: { metrics: ['default.events'], dimensions: [] },
+    });
+
+    expect(await screen.findByText('1 Hop Away')).toBeInTheDocument();
+  });
+
+  it('pre-fills selected dimensions when editing an existing cube', async () => {
+    const djClient = {
+      commonDimensions: jest.fn().mockResolvedValue([
+        {
+          name: 'default.event.event_type',
+          node_name: 'default.event',
+          node_display_name: 'Event',
+          attribute: 'event_type',
+          properties: ['primary_key'],
+          path: [],
+        },
+      ]),
+    };
+    const cube = {
+      current: {
+        cubeDimensions: [
+          {
+            name: 'default.event.event_type',
+            attribute: 'event_type',
+            properties: ['primary_key'],
+          },
+        ],
+      },
+    };
+
+    renderInForm({
+      djClient,
+      cube,
+      initialValues: { metrics: ['default.events'], dimensions: [] },
+    });
+
+    // The PK suffix is appended to the chip label.
+    expect(
+      await screen.findByText(content => content.includes('(PK)')),
+    ).toBeInTheDocument();
+  });
+
+  it('shows the role suffix on chip labels for role-aliased cube dimensions', async () => {
+    const djClient = {
+      commonDimensions: jest.fn().mockResolvedValue([
+        {
+          name: 'default.user_dim.country_code[birth_country]',
+          node_name: 'default.user_dim',
+          node_display_name: 'User Dim',
+          attribute: 'country_code',
+          properties: [],
+          path: [],
+        },
+      ]),
+    };
+    const cube = {
+      current: {
+        cubeDimensions: [
+          {
+            name: 'default.user_dim.country_code[birth_country]',
+            attribute: 'country_code',
+            role: 'birth_country',
+            properties: [],
+          },
+        ],
+      },
+    };
+
+    renderInForm({
+      djClient,
+      cube,
+      initialValues: { metrics: ['default.users'], dimensions: [] },
+    });
+
+    // Role surfaces as a "[birth_country]" suffix on the labelized attribute.
+    expect(
+      await screen.findByText(content =>
+        content.includes('Country Code [birth_country]'),
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the role suffix on the chip even for selected role-aliased options', async () => {
+    // Two role-aliased instances of the same attribute show as two distinct
+    // chips, distinguishable by the role suffix in the label.
+    const djClient = {
+      commonDimensions: jest.fn().mockResolvedValue([
+        {
+          name: 'default.user_dim.country_code[birth_country]',
+          node_name: 'default.user_dim',
+          node_display_name: 'User Dim',
+          attribute: 'country_code',
+          properties: [],
+          path: [],
+        },
+        {
+          name: 'default.user_dim.country_code[residence_country]',
+          node_name: 'default.user_dim',
+          node_display_name: 'User Dim',
+          attribute: 'country_code',
+          properties: [],
+          path: [],
+        },
+      ]),
+    };
+    const cube = {
+      current: {
+        cubeDimensions: [
+          {
+            name: 'default.user_dim.country_code[birth_country]',
+            attribute: 'country_code',
+            role: 'birth_country',
+            properties: [],
+          },
+          {
+            name: 'default.user_dim.country_code[residence_country]',
+            attribute: 'country_code',
+            role: 'residence_country',
+            properties: [],
+          },
+        ],
+      },
+    };
+
+    renderInForm({
+      djClient,
+      cube,
+      initialValues: { metrics: ['default.users'], dimensions: [] },
+    });
+
+    expect(
+      await screen.findByText(c => c.includes('Country Code [birth_country]')),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(c =>
+        c.includes('Country Code [residence_country]'),
+      ),
+    ).toBeInTheDocument();
+  });
+});