datajunction-ui 0.0.26 → 0.0.27

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) {

package/src/app/pages/NodePage/WatchNodeButton.jsx

@@ -7,10 +7,7 @@ import CollapsedIcon from '../../icons/CollapsedIcon';
 const EVENT_TYPES = ['delete', 'update'];
 
 export default function WatchButton({ node }) {
-  if (!node || !node.name || !node.type) {
-    return null;
-  }
-
+  // All hooks must be called before any early returns
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [selectedEvents, setSelectedEvents] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -19,6 +16,10 @@ export default function WatchButton({ node }) {
 
   // Load existing preferences
   useEffect(() => {
+    if (!node || !node.name || !node.type) {
+      return;
+    }
+
     const loadPreferences = async () => {
       try {
         const preferences = await djClient.getNotificationPreferences({
@@ -38,7 +39,7 @@ export default function WatchButton({ node }) {
     };
 
     loadPreferences();
-  }, [djClient, node.name, node.type]);
+  }, [djClient, node?.name, node?.type]);
 
   // Close dropdown on outside click
   useEffect(() => {
@@ -51,6 +52,12 @@ export default function WatchButton({ node }) {
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
+
+  // Early return after all hooks are called
+  if (!node || !node.name || !node.type) {
+    return null;
+  }
+
   const toggleEvent = async event => {
     const isSelected = selectedEvents.includes(event);
 

package/src/app/pages/QueryPlannerPage/MetricFlowGraph.jsx

@@ -60,8 +60,32 @@ function MetricNode({ data, selected }) {
   );
 }
 
+/**
+ * Component node - shows metric building blocks (e.g., SUM, COUNT)
+ */
+function ComponentNode({ data, selected }) {
+  return (
+    <div
+      className={`compact-node compact-node-component ${
+        selected ? 'selected' : ''
+      }`}
+    >
+      <Handle type="target" position={Position.Left} />
+      <div className="compact-node-icon">●</div>
+      <div className="compact-node-content">
+        <div className="compact-node-name">{data.shortName}</div>
+        <div className="compact-node-meta">
+          <span className="meta-item">{data.aggregation || 'RAW'}</span>
+        </div>
+      </div>
+      <Handle type="source" position={Position.Right} />
+    </div>
+  );
+}
+
 const nodeTypes = {
   preagg: PreAggNode,
+  component: ComponentNode,
   metric: MetricNode,
 };
 
@@ -132,6 +156,7 @@ export function MetricFlowGraph({
 
     // Track mappings
     const preAggNodesMap = new Map();
+    const componentNodeIds = new Map();
     const componentToPreAgg = new Map();
 
     let nodeId = 0;
@@ -167,6 +192,37 @@ export function MetricFlowGraph({
       });
     });
 
+    // Create component nodes (building blocks for metrics)
+    grainGroups.forEach((gg, ggIdx) => {
+      gg.components?.forEach(comp => {
+        if (!componentNodeIds.has(comp.name)) {
+          const id = getNextId();
+          componentNodeIds.set(comp.name, id);
+          // Shorten name for display (e.g., "unit_price_sum" -> "price_sum")
+          const shortName =
+            comp.name.length > 40
+              ? '...' + comp.name.split('_').slice(-2).join('_')
+              : comp.name;
+
+          rawNodes.push({
+            id,
+            type: 'component',
+            position: { x: 0, y: 0 },
+            data: {
+              name: comp.name,
+              shortName,
+              aggregation: comp.aggregation,
+              merge: comp.merge,
+              grainGroupIndex: ggIdx,
+            },
+            selected:
+              selectedNode?.type === 'component' &&
+              selectedNode?.name === comp.name,
+          });
+        }
+      });
+    });
+
     // Create metric nodes
     const metricNodeIds = new Map();
 
@@ -191,26 +247,38 @@ export function MetricFlowGraph({
       });
     });
 
-    // Create edges
-    metricFormulas.forEach(metric => {
-      const metricId = metricNodeIds.get(metric.name);
-      const connectedPreAggs = new Set();
-
-      metric.components?.forEach(compName => {
-        const preAggIdx = componentToPreAgg.get(compName);
-        if (preAggIdx !== undefined) {
-          connectedPreAggs.add(preAggIdx);
+    // Create edges: PreAgg -> Component
+    grainGroups.forEach((gg, ggIdx) => {
+      const preAggId = preAggNodesMap.get(ggIdx);
+      gg.components?.forEach(comp => {
+        const compId = componentNodeIds.get(comp.name);
+        if (preAggId && compId) {
+          rawEdges.push({
+            id: `edge-preagg-${preAggId}-${compId}`,
+            source: preAggId,
+            target: compId,
+            style: { stroke: '#64748b', strokeWidth: 2 },
+            markerEnd: {
+              type: MarkerType.ArrowClosed,
+              color: '#64748b',
+              width: 16,
+              height: 16,
+            },
+          });
         }
       });
+    });
 
-      connectedPreAggs.forEach(preAggIdx => {
-        const preAggId = preAggNodesMap.get(preAggIdx);
-        if (preAggId && metricId) {
+    // Create edges: Component -> Metric
+    metricFormulas.forEach(metric => {
+      const metricId = metricNodeIds.get(metric.name);
+      metric.components?.forEach(compName => {
+        const compId = componentNodeIds.get(compName);
+        if (compId && metricId) {
           rawEdges.push({
-            id: `edge-${preAggId}-${metricId}`,
-            source: preAggId,
+            id: `edge-comp-${compId}-${metricId}`,
+            source: compId,
             target: metricId,
-            type: 'default', // Straight/bezier edges
             style: { stroke: '#64748b', strokeWidth: 2 },
             markerEnd: {
               type: MarkerType.ArrowClosed,
@@ -244,6 +312,12 @@ export function MetricFlowGraph({
           index: node.data.grainGroupIndex,
           data: grainGroups[node.data.grainGroupIndex],
         });
+      } else if (node.type === 'component') {
+        onNodeSelect?.({
+          type: 'component',
+          name: node.data.name,
+          data: node.data,
+        });
       } else if (node.type === 'metric') {
         onNodeSelect?.({
           type: 'metric',
@@ -295,6 +369,10 @@ export function MetricFlowGraph({
           <span className="legend-dot preagg"></span>
           <span>Pre-agg</span>
         </div>
+        <div className="legend-item">
+          <span className="legend-dot component"></span>
+          <span>Component</span>
+        </div>
         <div className="legend-item">
           <span className="legend-dot metric"></span>
           <span>Metric</span>