datajunction-ui 0.0.26-alpha.0 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.26-alpha.0",
+  "version": "0.0.27",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -167,7 +167,7 @@
     "coverageThreshold": {
       "global": {
         "statements": 80,
-        "branches": 70,
+        "branches": 69,
         "lines": 80,
         "functions": 80
       }

package/src/app/components/Search.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'react';
+import { useState, useCallback, useContext, useRef } from 'react';
 import DJClientContext from '../providers/djclient';
 import Fuse from 'fuse.js';
 
@@ -8,6 +8,8 @@ export default function Search() {
   const [fuse, setFuse] = useState();
   const [searchValue, setSearchValue] = useState('');
   const [searchResults, setSearchResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const hasLoadedRef = useRef(false);
 
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
@@ -18,35 +20,40 @@ export default function Search() {
     return str.length > 100 ? str.substring(0, 90) + '...' : str;
   };
 
-  useEffect(() => {
-    const fetchNodes = async () => {
-      try {
-        const [data, tags] = await Promise.all([
-          djClient.nodeDetails(),
-          djClient.listTags(),
-        ]);
-        const allEntities = data.concat(
-          (tags || []).map(tag => {
-            tag.type = 'tag';
-            return tag;
-          }),
-        );
-        const fuse = new Fuse(allEntities || [], {
-          keys: [
-            'name', // will be assigned a `weight` of 1
-            { name: 'description', weight: 2 },
-            { name: 'display_name', weight: 3 },
-            { name: 'type', weight: 4 },
-            { name: 'tag_type', weight: 5 },
-          ],
-        });
-        setFuse(fuse);
-      } catch (error) {
-        console.error('Error fetching nodes or tags:', error);
-      }
-    };
-    fetchNodes();
-  }, []);
+  // Lazy load search data only when user focuses on search input
+  const loadSearchData = useCallback(async () => {
+    if (hasLoadedRef.current || isLoading) return;
+    hasLoadedRef.current = true;
+    setIsLoading(true);
+
+    try {
+      const [data, tags] = await Promise.all([
+        djClient.nodeDetails(),
+        djClient.listTags(),
+      ]);
+      const allEntities = data.concat(
+        (tags || []).map(tag => {
+          tag.type = 'tag';
+          return tag;
+        }),
+      );
+      const fuseInstance = new Fuse(allEntities || [], {
+        keys: [
+          'name', // will be assigned a `weight` of 1
+          { name: 'description', weight: 2 },
+          { name: 'display_name', weight: 3 },
+          { name: 'type', weight: 4 },
+          { name: 'tag_type', weight: 5 },
+        ],
+      });
+      setFuse(fuseInstance);
+    } catch (error) {
+      console.error('Error fetching nodes or tags:', error);
+      hasLoadedRef.current = false; // Allow retry on error
+    } finally {
+      setIsLoading(false);
+    }
+  }, [djClient, isLoading]);
 
   const handleChange = e => {
     setSearchValue(e.target.value);
@@ -65,10 +72,11 @@ export default function Search() {
       >
         <input
           type="text"
-          placeholder="Search"
+          placeholder={isLoading ? 'Loading...' : 'Search'}
           name="search"
           value={searchValue}
           onChange={handleChange}
+          onFocus={loadSearchData}
         />
       </form>
       <div className="search-results">
@@ -76,8 +84,8 @@ export default function Search() {
           const itemUrl =
             item.type !== 'tag' ? `/nodes/${item.name}` : `/tags/${item.name}`;
           return (
-            <a href={itemUrl}>
-              <div key={item.name} className="search-result-item">
+            <a key={item.name} href={itemUrl}>
+              <div className="search-result-item">
                 <span className={`node_type__${item.type} badge node_type`}>
                   {item.type}
                 </span>

package/src/app/components/__tests__/Search.test.jsx

@@ -59,16 +59,23 @@ describe('<Search />', () => {
     expect(getByPlaceholderText('Search')).toBeInTheDocument();
   });
 
-  it('fetches and initializes search data on mount', async () => {
+  it('fetches and initializes search data on focus (lazy loading)', async () => {
     mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
     mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
 
-    render(
+    const { getByPlaceholderText } = render(
       <DJClientContext.Provider value={mockDjClient}>
         <Search />
       </DJClientContext.Provider>,
     );
 
+    // Data should NOT be fetched on mount
+    expect(mockDjClient.DataJunctionAPI.nodeDetails).not.toHaveBeenCalled();
+
+    // Focus on search input to trigger lazy loading
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
       expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
@@ -85,11 +92,14 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
+    const searchInput = getByPlaceholderText('Search');
+    // Focus to trigger lazy loading
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
     });
 
-    const searchInput = getByPlaceholderText('Search');
     fireEvent.change(searchInput, { target: { value: 'test' } });
 
     await waitFor(() => {
@@ -107,11 +117,14 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
+    const searchInput = getByPlaceholderText('Search');
+    // Focus to trigger lazy loading
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
     });
 
-    const searchInput = getByPlaceholderText('Search');
     fireEvent.change(searchInput, { target: { value: 'node' } });
 
     await waitFor(() => {
@@ -130,11 +143,14 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
+    const searchInput = getByPlaceholderText('Search');
+    // Focus to trigger lazy loading
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
     });
 
-    const searchInput = getByPlaceholderText('Search');
     fireEvent.change(searchInput, { target: { value: 'tag' } });
 
     await waitFor(() => {
@@ -153,11 +169,14 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
+    const searchInput = getByPlaceholderText('Search');
+    // Focus to trigger lazy loading
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
     });
 
-    const searchInput = getByPlaceholderText('Search');
     fireEvent.change(searchInput, { target: { value: 'long' } });
 
     await waitFor(() => {
@@ -175,11 +194,14 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
+    const searchInput = getByPlaceholderText('Search');
+    // Focus to trigger lazy loading
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
     });
 
-    const searchInput = getByPlaceholderText('Search');
     fireEvent.change(searchInput, { target: { value: 'another' } });
 
     await waitFor(() => {
@@ -204,11 +226,14 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
+    const searchInput = getByPlaceholderText('Search');
+    // Focus to trigger lazy loading
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
     });
 
-    const searchInput = getByPlaceholderText('Search');
     fireEvent.change(searchInput, { target: { value: 'node' } });
 
     await waitFor(() => {
@@ -224,12 +249,16 @@ describe('<Search />', () => {
     );
     mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
 
-    render(
+    const { getByPlaceholderText } = render(
       <DJClientContext.Provider value={mockDjClient}>
         <Search />
       </DJClientContext.Provider>,
     );
 
+    // Focus to trigger lazy loading
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(consoleErrorSpy).toHaveBeenCalledWith(
         'Error fetching nodes or tags:',
@@ -273,12 +302,15 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
+    const searchInput = getByPlaceholderText('Search');
+    // Focus to trigger lazy loading
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
     });
 
     // Should not throw an error
-    const searchInput = getByPlaceholderText('Search');
     expect(searchInput).toBeInTheDocument();
   });
 
@@ -292,11 +324,14 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
+    const searchInput = getByPlaceholderText('Search');
+    // Focus to trigger lazy loading
+    fireEvent.focus(searchInput);
+
     await waitFor(() => {
       expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
     });
 
-    const searchInput = getByPlaceholderText('Search');
     fireEvent.change(searchInput, { target: { value: 'test' } });
 
     await waitFor(() => {

package/src/app/index.tsx

@@ -11,7 +11,7 @@ import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { OverviewPage } from './pages/OverviewPage/Loadable';
 import { SettingsPage } from './pages/SettingsPage/Loadable';
 import { NotificationsPage } from './pages/NotificationsPage/Loadable';
-import { NodePage } from './pages/NodePage';
+import { NodePage } from './pages/NodePage/Loadable';
 import RevisionDiff from './pages/NodePage/RevisionDiff';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
 import { CubeBuilderPage } from './pages/CubeBuilderPage/Loadable';

package/src/app/pages/AddEditNodePage/MetricQueryField.jsx

@@ -1,6 +1,10 @@
 /**
  * Metric aggregate expression input field, which consists of a CodeMirror SQL
  * editor with autocompletion for node columns and syntax highlighting.
+ *
+ * Supports both:
+ * - Regular metrics: autocomplete from upstream node columns
+ * - Derived metrics: autocomplete from available metric names
  */
 import React from 'react';
 import { ErrorMessage, Field, useFormikContext } from 'formik';
@@ -8,29 +12,74 @@ import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
 
 export const MetricQueryField = ({ djClient, value }) => {
-  const [schema, setSchema] = React.useState([]);
+  const [schema, setSchema] = React.useState({});
+  const [availableMetrics, setAvailableMetrics] = React.useState([]);
   const formik = useFormikContext();
   const sqlExt = langs.sql({ schema: schema });
 
+  // Load available metrics for derived metric autocomplete
+  React.useEffect(() => {
+    async function fetchMetrics() {
+      try {
+        const metrics = await djClient.metrics();
+        setAvailableMetrics(metrics || []);
+      } catch (err) {
+        console.error('Failed to load metrics for autocomplete:', err);
+      }
+    }
+    fetchMetrics();
+  }, [djClient]);
+
   const initialAutocomplete = async context => {
-    // Based on the selected upstream, we load the upstream node's columns
-    // into the autocomplete schema
+    const newSchema = {};
     const nodeName = formik.values['upstream_node'];
-    const nodeDetails = await djClient.node(nodeName);
-    nodeDetails.columns.forEach(col => {
-      schema[col.name] = [];
+
+    // If an upstream node is selected, load its columns for regular metrics
+    if (nodeName && nodeName.trim() !== '') {
+      try {
+        const nodeDetails = await djClient.node(nodeName);
+        if (nodeDetails && nodeDetails.columns) {
+          nodeDetails.columns.forEach(col => {
+            newSchema[col.name] = [];
+          });
+        }
+      } catch (err) {
+        console.error('Failed to load upstream node columns:', err);
+      }
+    }
+
+    // Always include available metrics for derived metric expressions
+    availableMetrics.forEach(metricName => {
+      newSchema[metricName] = [];
     });
-    setSchema(schema);
+
+    setSchema(newSchema);
   };
 
   const updateFormik = val => {
     formik.setFieldValue('aggregate_expression', val);
   };
 
+  // Determine the label and help text based on whether upstream is selected
+  const upstreamNode = formik.values['upstream_node'];
+  const isDerivedMode = !upstreamNode || upstreamNode.trim() === '';
+  const labelText = isDerivedMode
+    ? 'Derived Metric Expression *'
+    : 'Aggregate Expression *';
+  const helpText = isDerivedMode
+    ? 'Reference other metrics using their full names (e.g., namespace.metric_name / namespace.other_metric)'
+    : 'Use aggregate functions on columns from the upstream node (e.g., SUM(column_name))';
+
   return (
     <div className="QueryInput MetricQueryInput NodeCreationInput">
       <ErrorMessage name="query" component="span" />
-      <label htmlFor="Query">Aggregate Expression *</label>
+      <label htmlFor="Query">{labelText}</label>
+      <p
+        className="field-help-text"
+        style={{ fontSize: '0.85em', color: '#666', marginBottom: '8px' }}
+      >
+        {helpText}
+      </p>
       <Field
         type="textarea"
         style={{ display: 'none' }}

package/src/app/pages/AddEditNodePage/UpstreamNodeField.jsx

@@ -1,5 +1,8 @@
 /**
- * Upstream node select field
+ * Upstream node select field.
+ *
+ * For regular metrics: Select a source, transform, or dimension node.
+ * For derived metrics: Leave empty and reference other metrics directly in the expression.
  */
 import { ErrorMessage } from 'formik';
 import { useContext, useEffect, useState } from 'react';
@@ -9,7 +12,7 @@ import { FormikSelect } from './FormikSelect';
 export const UpstreamNodeField = ({ defaultValue }) => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
-  // All available nodes
+  // All available nodes (sources, transforms, dimensions)
   const [availableNodes, setAvailableNodes] = useState([]);
 
   useEffect(() => {
@@ -32,16 +35,25 @@ export const UpstreamNodeField = ({ defaultValue }) => {
 
   return (
     <div className="NodeCreationInput">
-      <ErrorMessage name="mode" component="span" />
-      <label htmlFor="Mode">Upstream Node *</label>
+      <ErrorMessage name="upstream_node" component="span" />
+      <label htmlFor="upstream_node">Upstream Node</label>
+      <p
+        className="field-help-text"
+        style={{ fontSize: '0.85em', color: '#666', marginBottom: '8px' }}
+      >
+        Select a source, transform, or dimension for regular metrics. Leave
+        empty for <strong>derived metrics</strong> that reference other metrics
+        (e.g., <code>namespace.metric_a / namespace.metric_b</code>).
+      </p>
       <span data-testid="select-upstream-node">
         <FormikSelect
           className="SelectInput"
           defaultValue={defaultValue}
           selectOptions={availableNodes}
           formikFieldName="upstream_node"
-          placeholder="Select Upstream Node"
+          placeholder="Select Upstream Node (optional for derived metrics)"
           isMulti={false}
+          isClearable={true}
         />
       </span>
     </div>

package/src/app/pages/AddEditNodePage/__tests__/index.test.jsx

@@ -34,7 +34,12 @@ export const initializeMockDJClient = () => {
           },
         ];
       },
-      metrics: {},
+      metrics: jest
+        .fn()
+        .mockReturnValue([
+          'default.num_repair_orders',
+          'default.some_other_metric',
+        ]),
       getNodeForEditing: jest.fn(),
       namespaces: () => {
         return [
@@ -134,6 +139,16 @@ export const renderEditTransformNode = element => {
   );
 };
 
+export const renderEditDerivedMetricNode = element => {
+  return render(
+    <MemoryRouter initialEntries={['/nodes/default.revenue_per_order/edit']}>
+      <Routes>
+        <Route path="nodes/:name/edit" element={element} />
+      </Routes>
+    </MemoryRouter>,
+  );
+};
+
 describe('AddEditNodePage', () => {
   beforeEach(() => {
     fetchMock.resetMocks();
@@ -221,4 +236,85 @@ describe('AddEditNodePage', () => {
       ).toBeInTheDocument();
     });
   }, 60000);
+
+  it('Edit page renders correctly for derived metric (metric parent)', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(
+      mocks.mockGetDerivedMetricNode,
+    );
+
+    const element = testElement(mockDjClient);
+    renderEditDerivedMetricNode(element);
+
+    await waitFor(() => {
+      // Should be an edit node page
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+
+      // The node name should be loaded onto the page
+      expect(screen.getByText('default.revenue_per_order')).toBeInTheDocument();
+
+      // The node type should be loaded onto the page
+      expect(screen.getByText('metric')).toBeInTheDocument();
+
+      // The description should be populated
+      expect(
+        screen.getByText('Average revenue per order (derived metric)'),
+      ).toBeInTheDocument();
+
+      // For derived metrics, the upstream node select should show the placeholder
+      // (indicating no upstream node is selected - derived metrics have metric parents)
+      expect(
+        screen.getByText('Select Upstream Node (optional for derived metrics)'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('Create metric page renders correctly', async () => {
+    const mockDjClient = initializeMockDJClient();
+    const element = testElement(mockDjClient);
+    renderCreateMetric(element);
+
+    await waitFor(() => {
+      // Should be a create metric page
+      expect(screen.getByText('Create')).toBeInTheDocument();
+
+      // The metric form should show the derived metric expression label
+      // (when no upstream is selected, we're in derived metric mode)
+      expect(
+        screen.getByText('Derived Metric Expression *'),
+      ).toBeInTheDocument();
+
+      // The help text for derived metrics should be visible
+      expect(
+        screen.getByText(/Reference other metrics using their full names/),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('Metric page handles error loading metrics gracefully', async () => {
+    const mockDjClient = initializeMockDJClient();
+    // Make metrics() throw an error
+    mockDjClient.DataJunctionAPI.metrics.mockRejectedValue(
+      new Error('Network error'),
+    );
+
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    const element = testElement(mockDjClient);
+    renderCreateMetric(element);
+
+    await waitFor(() => {
+      // The page should still render despite the error
+      expect(screen.getByText('Create')).toBeInTheDocument();
+      // The error should be logged
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Failed to load metrics for autocomplete:',
+        expect.any(Error),
+      );
+    });
+
+    consoleSpy.mockRestore();
+  });
 });

package/src/app/pages/AddEditNodePage/index.jsx

@@ -120,6 +120,19 @@ export function AddEditNodePage({ extensions = {} }) {
     }
   };
 
+  /**
+   * Build the metric query based on whether an upstream node is provided.
+   * - With upstream node: `SELECT <expression> FROM <upstream_node>` (regular metric)
+   * - Without upstream node: `SELECT <expression>` (derived metric referencing other metrics)
+   */
+  const buildMetricQuery = (aggregateExpression, upstreamNode) => {
+    if (upstreamNode && upstreamNode.trim() !== '') {
+      return `SELECT ${aggregateExpression} \n FROM ${upstreamNode}`;
+    }
+    // Derived metric - no FROM clause needed, expression references other metrics directly
+    return `SELECT ${aggregateExpression}`;
+  };
+
   const createNode = async (values, setStatus) => {
     const { status, json } = await djClient.createNode(
       nodeType,
@@ -127,7 +140,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.display_name,
       values.description,
       values.type === 'metric'
-        ? `SELECT ${values.aggregate_expression} \n FROM ${values.upstream_node}`
+        ? buildMetricQuery(values.aggregate_expression, values.upstream_node)
         : values.query,
       values.mode,
       values.namespace,
@@ -162,7 +175,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.display_name,
       values.description,
       values.type === 'metric'
-        ? `SELECT ${values.aggregate_expression} \n FROM ${values.upstream_node}`
+        ? buildMetricQuery(values.aggregate_expression, values.upstream_node)
         : values.query,
       values.mode,
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
@@ -224,17 +237,46 @@ export function AddEditNodePage({ extensions = {} }) {
     };
 
     if (node.type === 'METRIC') {
-      return {
-        ...baseData,
-        metric_direction: node.current.metricMetadata?.direction?.toLowerCase(),
-        metric_unit: node.current.metricMetadata?.unit?.name?.toLowerCase(),
-        significant_digits: node.current.metricMetadata?.significantDigits,
-        required_dimensions: node.current.requiredDimensions.map(
-          dim => dim.name,
-        ),
-        upstream_node: node.current.parents[0]?.name,
-        aggregate_expression: node.current.metricMetadata?.expression,
-      };
+      // Check if this is a derived metric (parent is another metric)
+      const firstParent = node.current.parents[0];
+      const isDerivedMetric = firstParent?.type === 'METRIC';
+
+      if (isDerivedMetric) {
+        // Derived metric: no upstream node, expression is the full query projection
+        // Parse the expression from the query (format: "SELECT <expression>")
+        const query = node.current.query || '';
+        const selectMatch = query.match(/SELECT\s+(.+)/is);
+        const derivedExpression = selectMatch
+          ? selectMatch[1].trim()
+          : node.current.metricMetadata?.expression || '';
+
+        return {
+          ...baseData,
+          metric_direction:
+            node.current.metricMetadata?.direction?.toLowerCase(),
+          metric_unit: node.current.metricMetadata?.unit?.name?.toLowerCase(),
+          significant_digits: node.current.metricMetadata?.significantDigits,
+          required_dimensions: node.current.requiredDimensions.map(
+            dim => dim.name,
+          ),
+          upstream_node: '', // Derived metrics have no upstream node
+          aggregate_expression: derivedExpression,
+        };
+      } else {
+        // Regular metric: has upstream node
+        return {
+          ...baseData,
+          metric_direction:
+            node.current.metricMetadata?.direction?.toLowerCase(),
+          metric_unit: node.current.metricMetadata?.unit?.name?.toLowerCase(),
+          significant_digits: node.current.metricMetadata?.significantDigits,
+          required_dimensions: node.current.requiredDimensions.map(
+            dim => dim.name,
+          ),
+          upstream_node: firstParent?.name || '',
+          aggregate_expression: node.current.metricMetadata?.expression,
+        };
+      }
     }
     return baseData;
   };
@@ -329,12 +371,14 @@ export function AddEditNodePage({ extensions = {} }) {
         />,
       );
     }
+    // For derived metrics, upstream_node is empty - pass null to clear the select
     setSelectUpstreamNode(
       <UpstreamNodeField
-        defaultValue={{
-          value: data.upstream_node,
-          label: data.upstream_node,
-        }}
+        defaultValue={
+          data.upstream_node
+            ? { value: data.upstream_node, label: data.upstream_node }
+            : null
+        }
       />,
     );
     if (data.owners) {