@nnkogift/dhis2-form-utils-devtools 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/RuleGraphModal.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RuleGraphViewProps } from './RuleGraphView.js';
+import 'react';
+import '@xyflow/react';
+import '@nnkogift/dhis2-form-utils-hooks';
+import './buildGraph.js';
+import './createLabelLookup.js';
+import '@nnkogift/dhis2-form-utils-metadata';
+
+type RuleGraphModalProps = Omit<RuleGraphViewProps, 'className' | 'minHeightClassName' | 'headerActions'> & {
+    open: boolean;
+    onClose: () => void;
+    subtitle?: string | null;
+};
+declare function RuleGraphModal({ open, onClose, subtitle, layoutKey, ...graphProps }: RuleGraphModalProps): react_jsx_runtime.JSX.Element | null;
+
+export { RuleGraphModal, type RuleGraphModalProps };

package/dist/RuleGraphModal.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Modal, ModalTitle, ModalContent } from '@dhis2/ui';
+import { translate } from './i18n.js';
+import { RuleGraphView } from './RuleGraphView.js';
+
+function RuleGraphModal({
+  open,
+  onClose,
+  subtitle,
+  layoutKey,
+  ...graphProps
+}) {
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Modal, { large: true, fluid: true, onClose, children: [
+    /* @__PURE__ */ jsxs(ModalTitle, { children: [
+      translate("Rule dependency graph"),
+      subtitle ? /* @__PURE__ */ jsx("span", { className: "mt-dp4 block text-sm font-normal text-dhis2-grey-700", children: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsx(ModalContent, { className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "h-[min(85vh,900px)] w-full min-w-[min(1200px,92vw)]", children: /* @__PURE__ */ jsx(
+      RuleGraphView,
+      {
+        ...graphProps,
+        layoutKey: layoutKey ?? "modal",
+        className: "h-full min-h-0 rounded-none border-0",
+        minHeightClassName: "min-h-0 h-full"
+      }
+    ) }) })
+  ] });
+}
+
+export { RuleGraphModal };
+//# sourceMappingURL=RuleGraphModal.js.map
+//# sourceMappingURL=RuleGraphModal.js.map

package/dist/RuleGraphModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RuleGraphModal.tsx"],"names":[],"mappings":";;;;;AAaO,SAAS,cAAA,CAAe;AAAA,EAC3B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACP,CAAA,EAAwB;AACpB,EAAA,IAAI,CAAC,IAAA,EAAM;AACP,IAAA,OAAO,IAAA;AAAA,EACX;AAEA,EAAA,4BACK,KAAA,EAAA,EAAM,KAAA,EAAK,IAAA,EAAC,KAAA,EAAK,MAAC,OAAA,EACf,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,UAAA,EAAA,EACI,QAAA,EAAA;AAAA,MAAA,SAAA,CAAU,uBAAuB,CAAA;AAAA,MACjC,2BACG,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sDAAA,EACX,oBACL,CAAA,GACA;AAAA,KAAA,EACR,CAAA;AAAA,wBACC,YAAA,EAAA,EAAa,SAAA,EAAU,OACpB,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qDAAA,EACX,QAAA,kBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACI,GAAG,UAAA;AAAA,QACJ,WAAW,SAAA,IAAa,OAAA;AAAA,QACxB,SAAA,EAAU,sCAAA;AAAA,QACV,kBAAA,EAAmB;AAAA;AAAA,OAE3B,CAAA,EACJ;AAAA,GAAA,EACJ,CAAA;AAER","file":"RuleGraphModal.js","sourcesContent":["import { Modal, ModalContent, ModalTitle } from '@dhis2/ui';\nimport { translate } from './i18n.js';\nimport { RuleGraphView, type RuleGraphViewProps } from './RuleGraphView.js';\n\nexport type RuleGraphModalProps = Omit<\n    RuleGraphViewProps,\n    'className' | 'minHeightClassName' | 'headerActions'\n> & {\n    open: boolean;\n    onClose: () => void;\n    subtitle?: string | null;\n};\n\nexport function RuleGraphModal({\n    open,\n    onClose,\n    subtitle,\n    layoutKey,\n    ...graphProps\n}: RuleGraphModalProps) {\n    if (!open) {\n        return null;\n    }\n\n    return (\n        <Modal large fluid onClose={onClose}>\n            <ModalTitle>\n                {translate('Rule dependency graph')}\n                {subtitle ? (\n                    <span className=\"mt-dp4 block text-sm font-normal text-dhis2-grey-700\">\n                        {subtitle}\n                    </span>\n                ) : null}\n            </ModalTitle>\n            <ModalContent className=\"p-0\">\n                <div className=\"h-[min(85vh,900px)] w-full min-w-[min(1200px,92vw)]\">\n                    <RuleGraphView\n                        {...graphProps}\n                        layoutKey={layoutKey ?? 'modal'}\n                        className=\"h-full min-h-0 rounded-none border-0\"\n                        minHeightClassName=\"min-h-0 h-full\"\n                    />\n                </div>\n            </ModalContent>\n        </Modal>\n    );\n}\n"]}

package/dist/RuleGraphView.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Node, Edge } from '@xyflow/react';
+import { RuleTraceEntry, FormStore } from '@nnkogift/dhis2-form-utils-hooks';
+import { RuleDependencyGraph, GraphNode } from './buildGraph.js';
+import { DevtoolsLabelLookup } from './createLabelLookup.js';
+import '@nnkogift/dhis2-form-utils-metadata';
+
+type FieldStateMap = ReturnType<FormStore['fieldStore']['getSnapshot']>;
+type RuleNodeData = {
+    label: string;
+    kind: GraphNode['kind'];
+    graphNodeId: string;
+    value?: string;
+    highlighted: boolean;
+};
+type RuleGraphViewProps = {
+    entries: readonly RuleTraceEntry[];
+    fieldState: FieldStateMap;
+    formValues: Record<string, unknown>;
+    selectedEntryId: string | null;
+    highlightRuleId: string | null;
+    labelLookup?: DevtoolsLabelLookup;
+    className?: string;
+    layoutKey?: string | number;
+    headerActions?: ReactNode;
+    minHeightClassName?: string;
+};
+type RuleGraphEdgeData = {
+    label: string;
+    stroke: string;
+    /** When false, the label is hidden on the canvas and shown only on hover. */
+    showLabel: boolean;
+    /** Per-source fan-out distance so parallel edges don't overlap. */
+    offset: number;
+};
+declare function toFlowGraph(graph: RuleDependencyGraph, fieldState: FieldStateMap, formValues: Record<string, unknown>, highlightedKeys: Set<string> | null): {
+    nodes: Node<RuleNodeData>[];
+    edges: Edge<RuleGraphEdgeData>[];
+};
+declare function RuleGraphView({ entries, fieldState, formValues, selectedEntryId, highlightRuleId, labelLookup, className, layoutKey, headerActions, minHeightClassName, }: RuleGraphViewProps): react_jsx_runtime.JSX.Element;
+
+export { RuleGraphView, type RuleGraphViewProps, toFlowGraph };

package/dist/RuleGraphView.js

@@ -0,0 +1,401 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { memo, useState, useMemo, useEffect } from 'react';
+import { MarkerType, Handle, Position, getSmoothStepPath, BaseEdge, EdgeLabelRenderer, ReactFlowProvider, useNodesState, useEdgesState, ReactFlow, Background, Controls, useReactFlow } from '@xyflow/react';
+import { NoticeBox } from '@dhis2/ui';
+import { buildGraphFromTrace } from './buildGraph.js';
+import { prepareFlowGraph, computeGraphLayout } from './graphLayout.js';
+import { EffectLegend } from './EffectBadge.js';
+import { getEffectEdgeStroke, getEffectShortLabel, getEffectVariant } from './effectStyles.js';
+import { getGraphNodeClassName, getLegendSwatchClassName } from './graphNodeStyles.js';
+import { translate } from './i18n.js';
+import { resolveGraphTraceEntry } from './traceEntry.js';
+
+const KIND_LABELS = {
+  field: "Field",
+  rule: "Rule",
+  section: "Section",
+  feedback: "Feedback"
+};
+const READ_LABEL_EDGE_THRESHOLD = 4;
+const DEFAULT_EDGE_OPTIONS = {
+  type: "ruleGraphEdge",
+  style: { stroke: getEffectEdgeStroke("default") },
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    color: getEffectEdgeStroke("default")
+  }
+};
+function RuleGraphNode({ data }) {
+  return /* @__PURE__ */ jsxs("div", { className: getGraphNodeClassName(data.kind, data.highlighted), children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left }),
+    /* @__PURE__ */ jsx("span", { className: "mb-dp4 block text-[0.625rem] font-semibold uppercase leading-none tracking-wide text-dhis2-grey-600", children: KIND_LABELS[data.kind] }),
+    /* @__PURE__ */ jsx("div", { className: "break-words font-semibold leading-[1.3]", children: data.label }),
+    data.value !== void 0 ? /* @__PURE__ */ jsx("div", { className: "mt-dp4 border-t border-dhis2-grey-200 pt-dp4 font-mono text-[0.6875rem] break-all text-dhis2-grey-700", children: data.value }) : null,
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right })
+  ] });
+}
+const nodeTypes = {
+  ruleGraphNode: memo(RuleGraphNode)
+};
+function RuleGraphEdge({
+  id,
+  sourceX,
+  sourceY,
+  sourcePosition,
+  targetX,
+  targetY,
+  targetPosition,
+  markerEnd,
+  style,
+  data
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    offset: data?.offset ?? 20
+  });
+  const showLabel = data ? data.showLabel || hovered : false;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BaseEdge, { id, path: edgePath, markerEnd, style }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: 16,
+        onMouseEnter: () => {
+          setHovered(true);
+        },
+        onMouseLeave: () => {
+          setHovered(false);
+        }
+      }
+    ),
+    showLabel && data ? /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "nodrag nopan absolute rounded-sm px-dp4 text-[10px] font-semibold",
+        style: {
+          transform: `translate(-50%, -50%) translate(${String(labelX)}px, ${String(labelY)}px)`,
+          background: "rgba(255,255,255,0.92)",
+          color: data.stroke,
+          pointerEvents: "all"
+        },
+        onMouseEnter: () => {
+          setHovered(true);
+        },
+        onMouseLeave: () => {
+          setHovered(false);
+        },
+        children: data.label
+      }
+    ) }) : null
+  ] });
+}
+const edgeTypes = {
+  ruleGraphEdge: memo(RuleGraphEdge)
+};
+function effectNodeKey(effect) {
+  const kind = effect.type === "HIDESECTION" ? "section" : effect.type === "DISPLAYTEXT" || effect.type === "DISPLAYKEYVALUEPAIR" ? "feedback" : "field";
+  return `${kind}:${effect.targetId}`;
+}
+function entryGraphKeys(entry) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const fieldId of entry.changedFields) {
+    keys.add(`field:${fieldId}`);
+  }
+  for (const result of entry.ruleResults) {
+    keys.add(`rule:${result.ruleId}`);
+    for (const effect of result.effects) {
+      keys.add(effectNodeKey(effect));
+    }
+  }
+  return keys;
+}
+function ruleGraphKeys(entry, ruleId) {
+  const keys = /* @__PURE__ */ new Set([`rule:${ruleId}`]);
+  for (const result of entry.ruleResults) {
+    if (result.ruleId !== ruleId) {
+      continue;
+    }
+    for (const effect of result.effects) {
+      keys.add(effectNodeKey(effect));
+    }
+  }
+  return keys;
+}
+const formatDisplayValue = (value) => {
+  if (value === void 0 || value === null || value === "") {
+    return void 0;
+  }
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return JSON.stringify(value);
+};
+function toFlowGraph(graph, fieldState, formValues, highlightedKeys) {
+  const { nodes: flowNodes, edges: flowEdges } = prepareFlowGraph(graph);
+  const positions = computeGraphLayout(flowNodes, flowEdges);
+  const graphNodeIdByFlowId = new Map(flowNodes.map((node) => [node.id, node.graphNodeId]));
+  const nodes = flowNodes.map((node) => {
+    const position = positions.get(node.id) ?? { x: 0, y: 0 };
+    const rawFieldId = node.kind === "field" ? node.graphNodeId.slice("field:".length) : void 0;
+    const assignedValue = rawFieldId && rawFieldId in fieldState ? fieldState[rawFieldId].assignedValue : void 0;
+    const formValue = rawFieldId ? formValues[rawFieldId] : void 0;
+    const displayValue = formatDisplayValue(assignedValue) ?? formatDisplayValue(formValue);
+    return {
+      id: node.id,
+      type: "ruleGraphNode",
+      position,
+      data: {
+        label: node.label,
+        kind: node.kind,
+        graphNodeId: node.graphNodeId,
+        value: displayValue,
+        highlighted: highlightedKeys ? highlightedKeys.has(node.graphNodeId) : true
+      }
+    };
+  });
+  const dense = flowEdges.length > READ_LABEL_EDGE_THRESHOLD;
+  const sourceFanOut = /* @__PURE__ */ new Map();
+  const edges = flowEdges.map((edge) => {
+    const sourceGraphId = graphNodeIdByFlowId.get(edge.source) ?? edge.source;
+    const targetGraphId = graphNodeIdByFlowId.get(edge.target) ?? edge.target;
+    const isHighlighted = highlightedKeys ? highlightedKeys.has(sourceGraphId) && highlightedKeys.has(targetGraphId) : true;
+    const effectType = edge.effectType ?? "default";
+    const isRead = effectType === "read";
+    const stroke = getEffectEdgeStroke(effectType, isHighlighted);
+    const label = getEffectShortLabel(effectType);
+    const showLabel = !(isRead && dense);
+    const fanIndex = sourceFanOut.get(edge.source) ?? 0;
+    sourceFanOut.set(edge.source, fanIndex + 1);
+    const offset = 20 + fanIndex * 14;
+    return {
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: "ruleGraphEdge",
+      animated: isHighlighted && !isRead,
+      zIndex: isHighlighted ? 1 : 0,
+      style: {
+        stroke,
+        strokeWidth: isRead ? 1 : Math.min(1 + edge.fireCount, 4),
+        opacity: isHighlighted ? isRead ? 0.5 : 1 : 0.35
+      },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: stroke
+      },
+      data: {
+        label,
+        stroke,
+        showLabel,
+        offset
+      }
+    };
+  });
+  return { nodes, edges };
+}
+function GraphToolbar({
+  nodeCount,
+  edgeCount,
+  headerActions,
+  activeEffectVariants
+}) {
+  const items = [
+    { kind: "field", label: translate("Field") },
+    { kind: "rule", label: translate("Rule") },
+    { kind: "section", label: translate("Section") },
+    { kind: "feedback", label: translate("Feedback") }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b border-dhis2-grey-200 bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-dp8 px-dp12 py-dp8", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex min-w-0 flex-wrap items-center gap-x-dp12 gap-y-dp8",
+          "aria-hidden": "true",
+          children: items.map((item) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-dp8 text-xs text-dhis2-grey-800",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: getLegendSwatchClassName(item.kind) }),
+                item.label
+              ]
+            },
+            item.kind
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-dp8", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-dhis2-grey-600", children: translate("{{nodes}} nodes \xB7 {{edges}} edges", {
+          nodes: nodeCount,
+          edges: edgeCount
+        }) }),
+        headerActions
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(EffectLegend, { activeVariants: activeEffectVariants })
+  ] });
+}
+function FitViewOnChange({
+  layoutKey,
+  nodeCount,
+  edgeCount
+}) {
+  const { fitView } = useReactFlow();
+  useEffect(() => {
+    const frameId = requestAnimationFrame(() => {
+      void fitView({ padding: 0.2, duration: 150 });
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [edgeCount, fitView, layoutKey, nodeCount]);
+  return null;
+}
+function mergeNodePositions(next, current) {
+  const currentById = new Map(current.map((node) => [node.id, node]));
+  return next.map((node) => {
+    const existing = currentById.get(node.id);
+    if (existing) {
+      return { ...node, position: existing.position };
+    }
+    return node;
+  });
+}
+function RuleGraphCanvas({
+  nodes: layoutNodes,
+  edges: layoutEdges,
+  layoutKey
+}) {
+  const [nodes, setNodes, onNodesChange] = useNodesState(layoutNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(layoutEdges);
+  useEffect(() => {
+    setNodes((current) => mergeNodePositions(layoutNodes, current));
+  }, [layoutNodes, setNodes]);
+  useEffect(() => {
+    setEdges(layoutEdges);
+  }, [layoutEdges, setEdges]);
+  return /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes,
+      edgeTypes,
+      onNodesChange,
+      onEdgesChange,
+      nodesDraggable: true,
+      defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
+      elevateEdgesOnSelect: true,
+      fitView: true,
+      proOptions: { hideAttribution: true },
+      className: "h-full w-full",
+      children: [
+        /* @__PURE__ */ jsx(
+          FitViewOnChange,
+          {
+            layoutKey,
+            nodeCount: nodes.length,
+            edgeCount: edges.length
+          }
+        ),
+        /* @__PURE__ */ jsx(Background, { gap: 16, size: 1 }),
+        /* @__PURE__ */ jsx(Controls, { showInteractive: false })
+      ]
+    }
+  );
+}
+function RuleGraphView({
+  entries,
+  fieldState,
+  formValues,
+  selectedEntryId,
+  highlightRuleId,
+  labelLookup,
+  className,
+  layoutKey,
+  headerActions,
+  minHeightClassName = "min-h-[360px]"
+}) {
+  const graphEntry = useMemo(
+    () => resolveGraphTraceEntry(entries, selectedEntryId),
+    [entries, selectedEntryId]
+  );
+  const graph = useMemo(
+    () => graphEntry ? buildGraphFromTrace([graphEntry], labelLookup) : { nodes: [], edges: [] },
+    [graphEntry, labelLookup]
+  );
+  const highlightedKeys = useMemo(() => {
+    if (!graphEntry || !selectedEntryId && !highlightRuleId) {
+      return null;
+    }
+    const keys = /* @__PURE__ */ new Set();
+    if (selectedEntryId) {
+      for (const key of entryGraphKeys(graphEntry)) {
+        keys.add(key);
+      }
+    }
+    if (highlightRuleId) {
+      for (const key of ruleGraphKeys(graphEntry, highlightRuleId)) {
+        keys.add(key);
+      }
+    }
+    return keys;
+  }, [graphEntry, highlightRuleId, selectedEntryId]);
+  const { nodes, edges } = useMemo(
+    () => toFlowGraph(graph, fieldState, formValues, highlightedKeys),
+    [graph, fieldState, formValues, highlightedKeys]
+  );
+  const activeEffectVariants = useMemo(() => {
+    const variants = /* @__PURE__ */ new Set();
+    for (const edge of graph.edges) {
+      if (edge.effectType) {
+        variants.add(getEffectVariant(edge.effectType));
+      }
+    }
+    return variants;
+  }, [graph.edges]);
+  if (!graph.nodes.length) {
+    return /* @__PURE__ */ jsx("div", { className: "p-dp8", children: /* @__PURE__ */ jsx(NoticeBox, { title: translate("No rule relationships yet"), children: translate(
+      "Interact with the form to build the dependency graph. Only rules active in the latest evaluation are shown. Select a trace entry to inspect a past evaluation. Connections flow Field \u2192 Rule \u2192 Target (read / effect)."
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex h-full min-h-[480px] flex-1 flex-col overflow-hidden rounded-md border border-dhis2-grey-200 bg-white ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          GraphToolbar,
+          {
+            nodeCount: graph.nodes.length,
+            edgeCount: graph.edges.length,
+            headerActions,
+            activeEffectVariants
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${minHeightClassName} flex-1 bg-white`,
+            style: { width: "100%", height: "100%" },
+            children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(RuleGraphCanvas, { nodes, edges, layoutKey }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { RuleGraphView, toFlowGraph };
+//# sourceMappingURL=RuleGraphView.js.map
+//# sourceMappingURL=RuleGraphView.js.map

package/dist/RuleGraphView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RuleGraphView.tsx"],"names":[],"mappings":"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","file":"RuleGraphView.js","sourcesContent":["import { memo, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport {\n    Background,\n    BaseEdge,\n    Controls,\n    EdgeLabelRenderer,\n    type Edge,\n    type EdgeProps,\n    getSmoothStepPath,\n    Handle,\n    MarkerType,\n    type Node,\n    type NodeProps,\n    Position,\n    ReactFlow,\n    ReactFlowProvider,\n    useEdgesState,\n    useNodesState,\n    useReactFlow,\n} from '@xyflow/react';\nimport { NoticeBox } from '@dhis2/ui';\nimport type { RuleTraceEntry } from '@nnkogift/dhis2-form-utils-hooks';\nimport type { FormStore } from '@nnkogift/dhis2-form-utils-hooks';\nimport { buildGraphFromTrace, type GraphNode, type RuleDependencyGraph } from './buildGraph.js';\nimport { computeGraphLayout, prepareFlowGraph } from './graphLayout.js';\nimport type { DevtoolsLabelLookup } from './createLabelLookup.js';\nimport { EffectLegend } from './EffectBadge.js';\nimport {\n    getEffectEdgeStroke,\n    getEffectShortLabel,\n    getEffectVariant,\n    type EffectVisualVariant,\n} from './effectStyles.js';\nimport { getGraphNodeClassName, getLegendSwatchClassName } from './graphNodeStyles.js';\nimport { translate } from './i18n.js';\nimport { resolveGraphTraceEntry } from './traceEntry.js';\n\ntype FieldStateMap = ReturnType<FormStore['fieldStore']['getSnapshot']>;\n\ntype RuleNodeData = {\n    label: string;\n    kind: GraphNode['kind'];\n    graphNodeId: string;\n    value?: string;\n    highlighted: boolean;\n};\n\nexport type RuleGraphViewProps = {\n    entries: readonly RuleTraceEntry[];\n    fieldState: FieldStateMap;\n    formValues: Record<string, unknown>;\n    selectedEntryId: string | null;\n    highlightRuleId: string | null;\n    labelLookup?: DevtoolsLabelLookup;\n    className?: string;\n    layoutKey?: string | number;\n    headerActions?: ReactNode;\n    minHeightClassName?: string;\n};\n\nconst KIND_LABELS: Record<GraphNode['kind'], string> = {\n    field: 'Field',\n    rule: 'Rule',\n    section: 'Section',\n    feedback: 'Feedback',\n};\n\n/**\n * Above this edge count, low-signal `read` labels are dropped from the canvas\n * and shown on hover instead. They stay documented in the toolbar legend.\n */\nconst READ_LABEL_EDGE_THRESHOLD = 4;\n\nconst DEFAULT_EDGE_OPTIONS = {\n    type: 'ruleGraphEdge' as const,\n    style: { stroke: getEffectEdgeStroke('default') },\n    markerEnd: {\n        type: MarkerType.ArrowClosed,\n        color: getEffectEdgeStroke('default'),\n    },\n};\n\nfunction RuleGraphNode({ data }: NodeProps<Node<RuleNodeData>>) {\n    return (\n        <div className={getGraphNodeClassName(data.kind, data.highlighted)}>\n            <Handle type=\"target\" position={Position.Left} />\n            <span className=\"mb-dp4 block text-[0.625rem] font-semibold uppercase leading-none tracking-wide text-dhis2-grey-600\">\n                {KIND_LABELS[data.kind]}\n            </span>\n            <div className=\"break-words font-semibold leading-[1.3]\">{data.label}</div>\n            {data.value !== undefined ? (\n                <div className=\"mt-dp4 border-t border-dhis2-grey-200 pt-dp4 font-mono text-[0.6875rem] break-all text-dhis2-grey-700\">\n                    {data.value}\n                </div>\n            ) : null}\n            <Handle type=\"source\" position={Position.Right} />\n        </div>\n    );\n}\n\nconst nodeTypes = {\n    ruleGraphNode: memo(RuleGraphNode),\n};\n\ntype RuleGraphEdgeData = {\n    label: string;\n    stroke: string;\n    /** When false, the label is hidden on the canvas and shown only on hover. */\n    showLabel: boolean;\n    /** Per-source fan-out distance so parallel edges don't overlap. */\n    offset: number;\n};\n\nfunction RuleGraphEdge({\n    id,\n    sourceX,\n    sourceY,\n    sourcePosition,\n    targetX,\n    targetY,\n    targetPosition,\n    markerEnd,\n    style,\n    data,\n}: EdgeProps<Edge<RuleGraphEdgeData>>) {\n    const [hovered, setHovered] = useState(false);\n    const [edgePath, labelX, labelY] = getSmoothStepPath({\n        sourceX,\n        sourceY,\n        sourcePosition,\n        targetX,\n        targetY,\n        targetPosition,\n        offset: data?.offset ?? 20,\n    });\n\n    const showLabel = data ? data.showLabel || hovered : false;\n\n    return (\n        <>\n            <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} style={style} />\n            <path\n                d={edgePath}\n                fill=\"none\"\n                stroke=\"transparent\"\n                strokeWidth={16}\n                onMouseEnter={() => {\n                    setHovered(true);\n                }}\n                onMouseLeave={() => {\n                    setHovered(false);\n                }}\n            />\n            {showLabel && data ? (\n                <EdgeLabelRenderer>\n                    <div\n                        className=\"nodrag nopan absolute rounded-sm px-dp4 text-[10px] font-semibold\"\n                        style={{\n                            transform: `translate(-50%, -50%) translate(${String(labelX)}px, ${String(labelY)}px)`,\n                            background: 'rgba(255,255,255,0.92)',\n                            color: data.stroke,\n                            pointerEvents: 'all',\n                        }}\n                        onMouseEnter={() => {\n                            setHovered(true);\n                        }}\n                        onMouseLeave={() => {\n                            setHovered(false);\n                        }}\n                    >\n                        {data.label}\n                    </div>\n                </EdgeLabelRenderer>\n            ) : null}\n        </>\n    );\n}\n\nconst edgeTypes = {\n    ruleGraphEdge: memo(RuleGraphEdge),\n};\n\nfunction effectNodeKey(effect: RuleTraceEntry['ruleResults'][number]['effects'][number]): string {\n    const kind =\n        effect.type === 'HIDESECTION'\n            ? 'section'\n            : effect.type === 'DISPLAYTEXT' || effect.type === 'DISPLAYKEYVALUEPAIR'\n              ? 'feedback'\n              : 'field';\n    return `${kind}:${effect.targetId}`;\n}\n\nfunction entryGraphKeys(entry: RuleTraceEntry): Set<string> {\n    const keys = new Set<string>();\n\n    for (const fieldId of entry.changedFields) {\n        keys.add(`field:${fieldId}`);\n    }\n\n    for (const result of entry.ruleResults) {\n        keys.add(`rule:${result.ruleId}`);\n        for (const effect of result.effects) {\n            keys.add(effectNodeKey(effect));\n        }\n    }\n\n    return keys;\n}\n\nfunction ruleGraphKeys(entry: RuleTraceEntry, ruleId: string): Set<string> {\n    const keys = new Set<string>([`rule:${ruleId}`]);\n\n    for (const result of entry.ruleResults) {\n        if (result.ruleId !== ruleId) {\n            continue;\n        }\n        for (const effect of result.effects) {\n            keys.add(effectNodeKey(effect));\n        }\n    }\n\n    return keys;\n}\n\nconst formatDisplayValue = (value: unknown): string | undefined => {\n    if (value === undefined || value === null || value === '') {\n        return undefined;\n    }\n    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {\n        return String(value);\n    }\n    return JSON.stringify(value);\n};\n\nexport function toFlowGraph(\n    graph: RuleDependencyGraph,\n    fieldState: FieldStateMap,\n    formValues: Record<string, unknown>,\n    highlightedKeys: Set<string> | null\n): { nodes: Node<RuleNodeData>[]; edges: Edge<RuleGraphEdgeData>[] } {\n    const { nodes: flowNodes, edges: flowEdges } = prepareFlowGraph(graph);\n    const positions = computeGraphLayout(flowNodes, flowEdges);\n    const graphNodeIdByFlowId = new Map(flowNodes.map((node) => [node.id, node.graphNodeId]));\n\n    const nodes: Node<RuleNodeData>[] = flowNodes.map((node) => {\n        const position = positions.get(node.id) ?? { x: 0, y: 0 };\n        const rawFieldId =\n            node.kind === 'field' ? node.graphNodeId.slice('field:'.length) : undefined;\n        const assignedValue =\n            rawFieldId && rawFieldId in fieldState\n                ? fieldState[rawFieldId].assignedValue\n                : undefined;\n        const formValue = rawFieldId ? formValues[rawFieldId] : undefined;\n        const displayValue = formatDisplayValue(assignedValue) ?? formatDisplayValue(formValue);\n\n        return {\n            id: node.id,\n            type: 'ruleGraphNode',\n            position,\n            data: {\n                label: node.label,\n                kind: node.kind,\n                graphNodeId: node.graphNodeId,\n                value: displayValue,\n                highlighted: highlightedKeys ? highlightedKeys.has(node.graphNodeId) : true,\n            },\n        };\n    });\n\n    const dense = flowEdges.length > READ_LABEL_EDGE_THRESHOLD;\n    const sourceFanOut = new Map<string, number>();\n\n    const edges: Edge<RuleGraphEdgeData>[] = flowEdges.map((edge) => {\n        const sourceGraphId = graphNodeIdByFlowId.get(edge.source) ?? edge.source;\n        const targetGraphId = graphNodeIdByFlowId.get(edge.target) ?? edge.target;\n        const isHighlighted = highlightedKeys\n            ? highlightedKeys.has(sourceGraphId) && highlightedKeys.has(targetGraphId)\n            : true;\n        const effectType = edge.effectType ?? 'default';\n        const isRead = effectType === 'read';\n        const stroke = getEffectEdgeStroke(effectType, isHighlighted);\n        const label = getEffectShortLabel(effectType);\n        const showLabel = !(isRead && dense);\n\n        const fanIndex = sourceFanOut.get(edge.source) ?? 0;\n        sourceFanOut.set(edge.source, fanIndex + 1);\n        const offset = 20 + fanIndex * 14;\n\n        return {\n            id: edge.id,\n            source: edge.source,\n            target: edge.target,\n            type: 'ruleGraphEdge',\n            animated: isHighlighted && !isRead,\n            zIndex: isHighlighted ? 1 : 0,\n            style: {\n                stroke,\n                strokeWidth: isRead ? 1 : Math.min(1 + edge.fireCount, 4),\n                opacity: isHighlighted ? (isRead ? 0.5 : 1) : 0.35,\n            },\n            markerEnd: {\n                type: MarkerType.ArrowClosed,\n                color: stroke,\n            },\n            data: {\n                label,\n                stroke,\n                showLabel,\n                offset,\n            },\n        };\n    });\n\n    return { nodes, edges };\n}\n\ntype GraphToolbarProps = {\n    nodeCount: number;\n    edgeCount: number;\n    headerActions?: ReactNode;\n    activeEffectVariants: ReadonlySet<EffectVisualVariant>;\n};\n\nfunction GraphToolbar({\n    nodeCount,\n    edgeCount,\n    headerActions,\n    activeEffectVariants,\n}: GraphToolbarProps) {\n    const items: Array<{ kind: GraphNode['kind']; label: string }> = [\n        { kind: 'field', label: translate('Field') },\n        { kind: 'rule', label: translate('Rule') },\n        { kind: 'section', label: translate('Section') },\n        { kind: 'feedback', label: translate('Feedback') },\n    ];\n\n    return (\n        <div className=\"shrink-0 border-b border-dhis2-grey-200 bg-white\">\n            <div className=\"flex flex-wrap items-center justify-between gap-dp8 px-dp12 py-dp8\">\n                <div\n                    className=\"flex min-w-0 flex-wrap items-center gap-x-dp12 gap-y-dp8\"\n                    aria-hidden=\"true\"\n                >\n                    {items.map((item) => (\n                        <span\n                            key={item.kind}\n                            className=\"inline-flex items-center gap-dp8 text-xs text-dhis2-grey-800\"\n                        >\n                            <span className={getLegendSwatchClassName(item.kind)} />\n                            {item.label}\n                        </span>\n                    ))}\n                </div>\n                <div className=\"flex shrink-0 items-center gap-dp8\">\n                    <span className=\"text-xs tabular-nums text-dhis2-grey-600\">\n                        {translate('{{nodes}} nodes · {{edges}} edges', {\n                            nodes: nodeCount,\n                            edges: edgeCount,\n                        })}\n                    </span>\n                    {headerActions}\n                </div>\n            </div>\n            <EffectLegend activeVariants={activeEffectVariants} />\n        </div>\n    );\n}\n\ntype RuleGraphCanvasProps = {\n    nodes: Node<RuleNodeData>[];\n    edges: Edge<RuleGraphEdgeData>[];\n    layoutKey?: string | number;\n};\n\nfunction FitViewOnChange({\n    layoutKey,\n    nodeCount,\n    edgeCount,\n}: {\n    layoutKey?: string | number;\n    nodeCount: number;\n    edgeCount: number;\n}) {\n    const { fitView } = useReactFlow();\n\n    useEffect(() => {\n        const frameId = requestAnimationFrame(() => {\n            void fitView({ padding: 0.2, duration: 150 });\n        });\n        return () => {\n            cancelAnimationFrame(frameId);\n        };\n    }, [edgeCount, fitView, layoutKey, nodeCount]);\n\n    return null;\n}\n\nfunction mergeNodePositions(\n    next: Node<RuleNodeData>[],\n    current: Node<RuleNodeData>[]\n): Node<RuleNodeData>[] {\n    const currentById = new Map(current.map((node) => [node.id, node]));\n    return next.map((node) => {\n        const existing = currentById.get(node.id);\n        if (existing) {\n            return { ...node, position: existing.position };\n        }\n        return node;\n    });\n}\n\nfunction RuleGraphCanvas({\n    nodes: layoutNodes,\n    edges: layoutEdges,\n    layoutKey,\n}: RuleGraphCanvasProps) {\n    const [nodes, setNodes, onNodesChange] = useNodesState(layoutNodes);\n    const [edges, setEdges, onEdgesChange] = useEdgesState(layoutEdges);\n\n    useEffect(() => {\n        setNodes((current) => mergeNodePositions(layoutNodes, current));\n    }, [layoutNodes, setNodes]);\n\n    useEffect(() => {\n        setEdges(layoutEdges);\n    }, [layoutEdges, setEdges]);\n\n    return (\n        <ReactFlow\n            nodes={nodes}\n            edges={edges}\n            nodeTypes={nodeTypes}\n            edgeTypes={edgeTypes}\n            onNodesChange={onNodesChange}\n            onEdgesChange={onEdgesChange}\n            nodesDraggable\n            defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}\n            elevateEdgesOnSelect\n            fitView\n            proOptions={{ hideAttribution: true }}\n            className=\"h-full w-full\"\n        >\n            <FitViewOnChange\n                layoutKey={layoutKey}\n                nodeCount={nodes.length}\n                edgeCount={edges.length}\n            />\n            <Background gap={16} size={1} />\n            <Controls showInteractive={false} />\n        </ReactFlow>\n    );\n}\n\nexport function RuleGraphView({\n    entries,\n    fieldState,\n    formValues,\n    selectedEntryId,\n    highlightRuleId,\n    labelLookup,\n    className,\n    layoutKey,\n    headerActions,\n    minHeightClassName = 'min-h-[360px]',\n}: RuleGraphViewProps) {\n    const graphEntry = useMemo(\n        () => resolveGraphTraceEntry(entries, selectedEntryId),\n        [entries, selectedEntryId]\n    );\n\n    const graph = useMemo(\n        () =>\n            graphEntry ? buildGraphFromTrace([graphEntry], labelLookup) : { nodes: [], edges: [] },\n        [graphEntry, labelLookup]\n    );\n\n    const highlightedKeys = useMemo(() => {\n        if (!graphEntry || (!selectedEntryId && !highlightRuleId)) {\n            return null;\n        }\n\n        const keys = new Set<string>();\n\n        if (selectedEntryId) {\n            for (const key of entryGraphKeys(graphEntry)) {\n                keys.add(key);\n            }\n        }\n\n        if (highlightRuleId) {\n            for (const key of ruleGraphKeys(graphEntry, highlightRuleId)) {\n                keys.add(key);\n            }\n        }\n\n        return keys;\n    }, [graphEntry, highlightRuleId, selectedEntryId]);\n\n    const { nodes, edges } = useMemo(\n        () => toFlowGraph(graph, fieldState, formValues, highlightedKeys),\n        [graph, fieldState, formValues, highlightedKeys]\n    );\n\n    const activeEffectVariants = useMemo(() => {\n        const variants = new Set<EffectVisualVariant>();\n        for (const edge of graph.edges) {\n            if (edge.effectType) {\n                variants.add(getEffectVariant(edge.effectType));\n            }\n        }\n        return variants;\n    }, [graph.edges]);\n\n    if (!graph.nodes.length) {\n        return (\n            <div className=\"p-dp8\">\n                <NoticeBox title={translate('No rule relationships yet')}>\n                    {translate(\n                        'Interact with the form to build the dependency graph. Only rules active in the latest evaluation are shown. Select a trace entry to inspect a past evaluation. Connections flow Field → Rule → Target (read / effect).'\n                    )}\n                </NoticeBox>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={`flex h-full min-h-[480px] flex-1 flex-col overflow-hidden rounded-md border border-dhis2-grey-200 bg-white ${className ?? ''}`}\n        >\n            <GraphToolbar\n                nodeCount={graph.nodes.length}\n                edgeCount={graph.edges.length}\n                headerActions={headerActions}\n                activeEffectVariants={activeEffectVariants}\n            />\n            <div\n                className={`${minHeightClassName} flex-1 bg-white`}\n                style={{ width: '100%', height: '100%' }}\n            >\n                <ReactFlowProvider>\n                    <RuleGraphCanvas nodes={nodes} edges={edges} layoutKey={layoutKey} />\n                </ReactFlowProvider>\n            </div>\n        </div>\n    );\n}\n"]}

package/dist/RulesPanel.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RuleDevtoolsMetadata } from './createLabelLookup.js';
+import '@nnkogift/dhis2-form-utils-metadata';
+
+type RulesPanelProps = {
+    metadata: RuleDevtoolsMetadata;
+    /** Show each rule's raw condition expression in the Rules tab. Defaults to true. */
+    showConditions?: boolean;
+    /**
+     * The program stage currently visible in the host app, overriding the metadata-derived
+     * default. Pass `null` for a registration/enrollment view (no stage visible), or a stage
+     * UID for the stage currently being viewed. Omit to fall back to `metadata.programStageId`
+     * (event forms) or `null` (tracker forms).
+     */
+    activeProgramStageId?: string | null;
+};
+declare function RulesPanel({ metadata, showConditions, activeProgramStageId, }: RulesPanelProps): react_jsx_runtime.JSX.Element;
+
+export { RuleDevtoolsMetadata, RulesPanel, type RulesPanelProps };