@bygd/nc-report-ui 0.1.42 → 0.1.44

package/dist/default/cjs/index.cjs

@@ -20,6 +20,7 @@ var reactIntersectionObserver = require('react-intersection-observer');
 var material = require('@mui/material');
 var CheckBoxOutlineBlankIcon = require('@mui/icons-material/CheckBoxOutlineBlank');
 var CheckBoxIcon = require('@mui/icons-material/CheckBox');
+var CheckCircleIcon = require('@mui/icons-material/CheckCircle');
 var EventEmitter = require('eventemitter3');
 var Grid = require('@mui/material/Grid');
 var IconButton = require('@mui/material/IconButton');
@@ -105,6 +106,7 @@ var Select__default = /*#__PURE__*/_interopDefault(Select);
 var MenuItem__default = /*#__PURE__*/_interopDefault(MenuItem);
 var CheckBoxOutlineBlankIcon__default = /*#__PURE__*/_interopDefault(CheckBoxOutlineBlankIcon);
 var CheckBoxIcon__default = /*#__PURE__*/_interopDefault(CheckBoxIcon);
+var CheckCircleIcon__default = /*#__PURE__*/_interopDefault(CheckCircleIcon);
 var EventEmitter__default = /*#__PURE__*/_interopDefault(EventEmitter);
 var Grid__default = /*#__PURE__*/_interopDefault(Grid);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
@@ -1135,7 +1137,8 @@ function SingleSelect({
       key,
       value,
       disabled,
-      icon
+      icon,
+      alreadySelected
     } = itm;
     return /*#__PURE__*/React__namespace.default.createElement(MenuItem__default.default, {
       key: key,
@@ -1146,7 +1149,12 @@ function SingleSelect({
         minHeight: "36px",
         display: "flex",
         alignItems: "center",
-        gap: "6px"
+        gap: "6px",
+        ...(alreadySelected && {
+          color: "rgb(70, 134, 128)",
+          backgroundColor: "rgba(70, 134, 128, 0.08)",
+          fontWeight: 600
+        })
       }
     }, icon && /*#__PURE__*/React__namespace.default.createElement(Box__default.default, {
       component: "span",
@@ -1154,7 +1162,13 @@ function SingleSelect({
         display: "inline-flex",
         alignItems: "center"
       }
-    }, icon), formatLabel(value));
+    }, icon), alreadySelected && /*#__PURE__*/React__namespace.default.createElement(CheckCircleIcon__default.default, {
+      fontSize: "small",
+      sx: {
+        color: "rgb(70, 134, 128)",
+        fontSize: "16px"
+      }
+    }), formatLabel(value));
   }))));
 }
 
@@ -2743,6 +2757,29 @@ const MoveButtons = ({
   fontSize: "small"
 })));
 
+// Builds an identity string for a saved dimension/metric instance. Deliberate
+// duplicates (the same field added more than once) are allowed - the first
+// occurrence keeps the plain fullPath (so existing saved reports and their
+// title-override keys stay backward compatible), later occurrences get a
+// `#n` suffix.
+const makeInstanceId = (fullPath, occurrenceIndex) => occurrenceIndex === 0 ? fullPath : `${fullPath}#${occurrenceIndex}`;
+
+// Picks the next free instance id for a newly-added fullPath, given the
+// items already saved. Scans occurrence numbers from 0 rather than just
+// counting existing instances with this fullPath, because counting alone
+// can collide: e.g. add "ft.currency" twice (ids "ft.currency",
+// "ft.currency#1"), remove the first, then add "ft.currency" again - a
+// plain count of 1 would regenerate "ft.currency#1", clashing with the
+// surviving duplicate.
+const nextInstanceId = (fullPath, existingItems) => {
+  const existingIds = new Set(existingItems.map(item => item.id));
+  let occurrenceIndex = 0;
+  while (existingIds.has(makeInstanceId(fullPath, occurrenceIndex))) {
+    occurrenceIndex += 1;
+  }
+  return makeInstanceId(fullPath, occurrenceIndex);
+};
+
 // Replace {{key}} placeholders in a title with values from the report
 // parameters (e.g. "Balance ({{base_currency}})" -> "Balance (EUR)").
 // Unknown keys are left as-is so missing parameters remain visible.
@@ -2769,14 +2806,17 @@ const resolveColumnOrder = (columnOrder, orderedDimensionItems, metrics) => {
   // Normalise every candidate item to a uniform { kind, key, data } shape
   // up front, so callers (e.g. the Column Order tab) can always read
   // `.key` regardless of where the item came from.
+  // Keyed by instance id (not fullPath) so that two instances of the same
+  // dimension/metric - added deliberately as duplicates - are treated as
+  // distinct columns rather than collapsing into one.
   const normalizedDimensionItems = orderedDimensionItems.map(item => ({
     kind: item.kind,
-    key: item.kind === 'computed' ? item.data.name : item.data.fullPath,
+    key: item.kind === 'computed' ? item.data.name : item.data.id,
     data: item.data
   }));
   const normalizedMetricItems = metrics.map(m => ({
     kind: 'metric',
-    key: m.fullPath,
+    key: m.id,
     data: m
   }));
   const byKey = Object.fromEntries([...normalizedDimensionItems, ...normalizedMetricItems].map(item => [`${item.kind}:${item.key}`, item]));
@@ -2810,7 +2850,7 @@ const SortableChip$1 = ({
   isLast,
   sortOrder,
   onSortOrderChange,
-  fullPath,
+  instanceId,
   defaultTitle,
   customTitle,
   onUpdateTitle,
@@ -2893,7 +2933,7 @@ const SortableChip$1 = ({
       handleCancel();
       return;
     }
-    onUpdateTitle(fullPath, trimmedValue);
+    onUpdateTitle(instanceId, trimmedValue);
     setIsEditing(false);
   };
   const handleCancel = () => {
@@ -2901,7 +2941,7 @@ const SortableChip$1 = ({
     setEditValue("");
   };
   const handleReset = () => {
-    onResetTitle(fullPath);
+    onResetTitle(instanceId);
     setIsEditing(false);
     setEditValue("");
   };
@@ -3112,7 +3152,7 @@ const SortableComputedChip = ({
   const handleSave = () => {
     const trimmedName = editName.trim();
     const trimmedValue = editValue.trim();
-    if (!trimmedName || !trimmedValue) return;
+    if (!trimmedName) return;
     if (isNameTaken(trimmedName, name)) return;
     onUpdate(name, {
       name: trimmedName,
@@ -3132,6 +3172,16 @@ const SortableComputedChip = ({
       handleCancel();
     }
   };
+
+  // The value field is multiline, so Enter inserts a newline instead of
+  // saving; only Escape (cancel) and Cmd/Ctrl+Enter (save) are handled here.
+  const handleValueKeyDown = e => {
+    if (e.key === "Escape") {
+      handleCancel();
+    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      handleSave();
+    }
+  };
   return /*#__PURE__*/React__namespace.default.createElement("div", _extends({
     ref: setNodeRef,
     style: style
@@ -3235,10 +3285,13 @@ const SortableComputedChip = ({
   }), /*#__PURE__*/React__namespace.default.createElement(material.TextField, {
     value: editValue,
     onChange: e => setEditValue(e.target.value),
-    onKeyDown: handleKeyDown,
+    onKeyDown: handleValueKeyDown,
     size: "small",
     label: "Value",
-    helperText: " ",
+    helperText: "Cmd/Ctrl+Enter to save",
+    multiline: true,
+    minRows: 2,
+    maxRows: 10,
     sx: {
       flex: 1,
       minWidth: "200px",
@@ -3262,7 +3315,7 @@ const SortableComputedChip = ({
     onClick: handleSave,
     color: "primary",
     "aria-label": "save computed dimension",
-    disabled: !editName.trim() || !editValue.trim() || nameError
+    disabled: !editName.trim() || nameError
   }, /*#__PURE__*/React__namespace.default.createElement(CheckIcon__default.default, {
     fontSize: "small"
   })))), /*#__PURE__*/React__namespace.default.createElement(material.Tooltip, {
@@ -3311,12 +3364,14 @@ const Dimensions = ({
   // Resolve the unified dimensionOrder into the actual dimension / computed
   // dimension objects, so dimensions and computed dimensions can be shown
   // (and dragged) as a single list while staying stored in their own arrays.
-  const dimensionByFullPath = Object.fromEntries(savedDimensions.map(d => [d.fullPath, d]));
+  // Keyed by instance id rather than fullPath, so two instances of the same
+  // dimension (added deliberately as a duplicate) stay distinct entries.
+  const dimensionById = Object.fromEntries(savedDimensions.map(d => [d.id, d]));
   const computedDimensionByName = Object.fromEntries(savedComputedDimensions.map(cd => [cd.name, cd]));
   const orderedItems = dimensionOrder.map(entry => entry.type === "dimension" ? {
     kind: "dimension",
     key: entry.key,
-    data: dimensionByFullPath[entry.key]
+    data: dimensionById[entry.key]
   } : {
     kind: "computed",
     key: entry.key,
@@ -3330,9 +3385,13 @@ const Dimensions = ({
     handleMoveDown
   } = makeListReorderHandlers(dimensionOrder, onReorderDimensionItems);
 
-  // Handle sort order change (dimensions only - computed dimensions have no order_by)
-  const handleSortOrderChange = (fullPath, sortOrder) => {
-    onUpdateDimensionSortOrder(fullPath, sortOrder);
+  // Handle sort order change (dimensions only - computed dimensions have no
+  // order_by). Keyed by instance id but applied query-wide: SQL can only
+  // sort by a given column once, so toggling sort on any duplicate instance
+  // of the same field is propagated to all instances sharing its fullPath
+  // (handled in ReportBuilder's onUpdateDimensionSortOrder).
+  const handleSortOrderChange = (id, sortOrder) => {
+    onUpdateDimensionSortOrder(id, sortOrder);
   };
 
   // Computed Dimensions: { name, value } pairs independent of any provider.
@@ -3353,7 +3412,7 @@ const Dimensions = ({
   const handleSaveComputed = () => {
     const trimmedName = computedName.trim();
     const trimmedValue = computedValue.trim();
-    if (!trimmedName || !trimmedValue) return;
+    if (!trimmedName) return;
     if (isComputedNameTaken(trimmedName)) return;
     onSaveComputedDimension({
       name: trimmedName,
@@ -3395,7 +3454,10 @@ const Dimensions = ({
       currentProviderKey = selection.targetKey;
     });
 
-    // Create a Set of already selected dimension fullPaths for quick lookup
+    // Create a Set of already selected dimension fullPaths for quick lookup.
+    // Already-selected items stay selectable (so the same dimension can be
+    // added again on purpose) - they're just flagged so the dropdown can
+    // highlight them instead of blocking the click.
     const selectedFullPaths = new Set(savedDimensions.map(dim => dim.fullPath));
     const items = [];
     // Iterate through aliases (e.g., 'ba', 'pc')
@@ -3407,9 +3469,6 @@ const Dimensions = ({
 
         // Construct the fullPath for this dimension
         const fullPath = `${aliasPath.join("_")}.${dimKey}`;
-
-        // Check if this dimension is already selected
-        const isAlreadySelected = selectedFullPaths.has(fullPath);
         items.push({
           // Include provider name to ensure uniqueness across different providers
           key: `${currentProvider}_${alias}.${dimKey}`,
@@ -3417,7 +3476,7 @@ const Dimensions = ({
           dimensionKey: dimKey,
           alias: alias,
           dimension: dimension,
-          disabled: isAlreadySelected
+          alreadySelected: selectedFullPaths.has(fullPath)
         });
       });
     });
@@ -3479,7 +3538,10 @@ const Dimensions = ({
       dimensionKey: selectedItem.dimensionKey,
       dimensionTitle: selectedItem.value,
       // The constructed path for server
-      fullPath: fullPath
+      fullPath: fullPath,
+      // Unique per-instance identity, so this field can be added more than
+      // once and each occurrence stays independently orderable/removable.
+      id: nextInstanceId(fullPath, savedDimensions)
     };
     onSaveDimension(dimensionData);
     handleCancel();
@@ -3490,8 +3552,9 @@ const Dimensions = ({
   const handleAddAll = () => {
     const dimensionItems = getDimensionItems();
 
-    // Filter out already selected dimensions (disabled items)
-    const availableItems = dimensionItems.filter(item => !item.disabled);
+    // Filter out already selected dimensions - "Add all" only fills in
+    // missing ones; intentional duplicates are added one at a time above.
+    const availableItems = dimensionItems.filter(item => !item.alreadySelected);
     if (availableItems.length === 0) return;
 
     // Build the complete relation objects array (same for all dimensions in this provider)
@@ -3536,7 +3599,10 @@ const Dimensions = ({
         dimensionKey: item.dimensionKey,
         dimensionTitle: item.value,
         // The constructed path for server
-        fullPath: fullPath
+        fullPath: fullPath,
+        // "Add all" only ever adds fields that aren't already selected, so
+        // this is always the first (and only) occurrence of this fullPath.
+        id: fullPath
       };
       onSaveDimension(dimensionData);
     });
@@ -3635,6 +3701,9 @@ const Dimensions = ({
     value: computedValue,
     onChange: e => setComputedValue(e.target.value),
     size: "small",
+    multiline: true,
+    minRows: 2,
+    maxRows: 10,
     sx: {
       width: "400px",
       "& .MuiInputBase-input": {
@@ -3670,7 +3739,7 @@ const Dimensions = ({
   }, "Cancel"), /*#__PURE__*/React__namespace.default.createElement(material.Button, {
     variant: "contained",
     onClick: handleSaveComputed,
-    disabled: !computedName.trim() || !computedValue.trim() || computedNameError,
+    disabled: !computedName.trim() || computedNameError,
     sx: {
       height: "40px",
       fontFamily: "system-ui",
@@ -3746,7 +3815,7 @@ const Dimensions = ({
     placement: "top"
   }, /*#__PURE__*/React__namespace.default.createElement("span", null, /*#__PURE__*/React__namespace.default.createElement(material.IconButton, {
     onClick: handleAddAll,
-    disabled: getDimensionItems().filter(item => !item.disabled).length === 0,
+    disabled: getDimensionItems().filter(item => !item.alreadySelected).length === 0,
     "aria-label": "add all dimensions",
     sx: {
       color: "rgb(70, 134, 128)",
@@ -3837,9 +3906,9 @@ const Dimensions = ({
     isLast: index === orderedItems.length - 1,
     sortOrder: item.data.sortOrder || null,
     onSortOrderChange: sortOrder => handleSortOrderChange(item.key, sortOrder),
-    fullPath: item.data.fullPath,
+    instanceId: item.data.id,
     defaultTitle: item.data.dimensionTitle,
-    customTitle: titleOverrides[item.data.fullPath],
+    customTitle: titleOverrides[item.data.id],
     onUpdateTitle: onUpdateTitle,
     onResetTitle: onResetTitle
   }) : /*#__PURE__*/React__namespace.default.createElement(SortableComputedChip, {
@@ -3912,7 +3981,7 @@ const SortableChip = ({
   onMoveDown,
   isFirst,
   isLast,
-  fullPath,
+  instanceId,
   defaultTitle,
   customTitle,
   onUpdateTitle,
@@ -3965,7 +4034,7 @@ const SortableChip = ({
       handleCancel();
       return;
     }
-    onUpdateTitle(fullPath, trimmedValue);
+    onUpdateTitle(instanceId, trimmedValue);
     setIsEditing(false);
   };
   const handleCancel = () => {
@@ -3973,7 +4042,7 @@ const SortableChip = ({
     setEditValue('');
   };
   const handleReset = () => {
-    onResetTitle(fullPath);
+    onResetTitle(instanceId);
     setIsEditing(false);
     setEditValue('');
   };
@@ -4194,7 +4263,10 @@ const Metrics = ({
       currentProviderKey = selection.targetKey;
     });
 
-    // Create a Set of already selected metric fullPaths for quick lookup
+    // Create a Set of already selected metric fullPaths for quick lookup.
+    // Already-selected items stay selectable (so the same metric can be
+    // added again on purpose) - they're just flagged so the dropdown can
+    // highlight them instead of blocking the click.
     const selectedFullPaths = new Set(savedMetrics.map(metric => metric.fullPath));
 
     // Metrics are a direct array, not nested by alias
@@ -4202,15 +4274,12 @@ const Metrics = ({
     const items = provider.metrics.map((metric, index) => {
       // Construct the fullPath for this metric
       const fullPath = `${aliasPath.join('_')}.${metric.name}`;
-
-      // Check if this metric is already selected
-      const isAlreadySelected = selectedFullPaths.has(fullPath);
       return {
         key: `${currentProvider}_${metric.name}_${index}`,
         value: metric.title || metric.name,
         metricName: metric.name,
         metric: metric,
-        disabled: isAlreadySelected,
+        alreadySelected: selectedFullPaths.has(fullPath),
         icon: metric.source ? /*#__PURE__*/React__namespace.default.createElement(MetricSourceIcon, {
           source: metric.source
         }) : undefined
@@ -4273,7 +4342,11 @@ const Metrics = ({
       metricName: selectedItem.metricName,
       metricTitle: selectedItem.value,
       // The constructed path for server
-      fullPath: fullPath
+      fullPath: fullPath,
+      // Unique per-instance identity, so this field can be added more
+      // than once and each occurrence stays independently
+      // orderable/removable/titleable.
+      id: nextInstanceId(fullPath, savedMetrics)
     };
     onSaveMetric(metricData);
     handleCancel();
@@ -4284,8 +4357,9 @@ const Metrics = ({
   const handleAddAll = () => {
     const metricItems = getMetricItems();
 
-    // Filter out already selected metrics (disabled items)
-    const availableItems = metricItems.filter(item => !item.disabled);
+    // Filter out already selected metrics - "Add all" only fills in
+    // missing ones; intentional duplicates are added one at a time above.
+    const availableItems = metricItems.filter(item => !item.alreadySelected);
     if (availableItems.length === 0) return;
 
     // Build the complete relation objects array (same for all metrics in this provider)
@@ -4330,7 +4404,10 @@ const Metrics = ({
         metricName: item.metricName,
         metricTitle: item.value,
         // The constructed path for server
-        fullPath: fullPath
+        fullPath: fullPath,
+        // "Add all" only ever adds fields that aren't already
+        // selected, so this is always the first occurrence.
+        id: fullPath
       };
       onSaveMetric(metricData);
     });
@@ -4429,7 +4506,7 @@ const Metrics = ({
     placement: "top"
   }, /*#__PURE__*/React__namespace.default.createElement("span", null, /*#__PURE__*/React__namespace.default.createElement(material.IconButton, {
     onClick: handleAddAll,
-    disabled: getMetricItems().filter(item => !item.disabled).length === 0,
+    disabled: getMetricItems().filter(item => !item.alreadySelected).length === 0,
     "aria-label": "add all metrics",
     sx: {
       color: "rgb(70, 134, 128)",
@@ -4507,20 +4584,64 @@ const Metrics = ({
     id: index,
     label: metric.metricTitle,
     fullLabel: `${formatProviderPath(metric)} → ${metric.metricTitle} (${metric.fullPath})`,
-    onDelete: () => onRemoveMetric(index),
+    onDelete: () => onRemoveMetric(metric.id),
     onMoveUp: () => handleMoveUp(index),
     onMoveDown: () => handleMoveDown(index),
     isFirst: index === 0,
     isLast: index === savedMetrics.length - 1,
-    fullPath: metric.fullPath,
+    instanceId: metric.id,
     defaultTitle: metric.metricTitle,
-    customTitle: titleOverrides[metric.fullPath],
+    customTitle: titleOverrides[metric.id],
     onUpdateTitle: onUpdateTitle,
     onResetTitle: onResetTitle,
     source: metric.metric?.source
   })))));
 };
 
+// Small text input + button for adding a filter value that isn't present in
+// the "Select Filter Values" dropdown (e.g. because no existing row has that
+// value). Kept as an uncontrolled local field so it clears itself after add.
+const CustomFilterValueInput = ({
+  onAdd
+}) => {
+  const [value, setValue] = React.useState('');
+  const handleAdd = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onAdd(trimmed);
+    setValue('');
+  };
+  return /*#__PURE__*/React__namespace.default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      gap: 1,
+      mt: 1
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(material.TextField, {
+    size: "small",
+    fullWidth: true,
+    placeholder: "Add a value not in the list above",
+    value: value,
+    onChange: e => setValue(e.target.value),
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleAdd();
+      }
+    }
+  }), /*#__PURE__*/React__namespace.default.createElement(material.Button, {
+    variant: "outlined",
+    size: "small",
+    onClick: handleAdd,
+    disabled: !value.trim(),
+    sx: {
+      textTransform: 'none',
+      whiteSpace: 'nowrap',
+      borderColor: "rgb(70, 134, 128)",
+      color: "rgb(70, 134, 128)"
+    }
+  }, "Add"));
+};
 const Filters = ({
   providersData,
   rootProvider,
@@ -4660,8 +4781,9 @@ const Filters = ({
       }
     } else {
       // For regular filters, set selected values and fetch available values
-      setSelectedFilterValues(filter.values || []);
-      await fetchFilterValues(fullPath);
+      const currentValues = filter.values || [];
+      setSelectedFilterValues(currentValues);
+      await fetchFilterValues(fullPath, '', currentValues);
     }
   };
   const handleSaveEditedFilter = fullPath => {
@@ -4756,7 +4878,11 @@ const Filters = ({
   };
 
   // Fetch distinct values for the selected dimension
-  const fetchFilterValues = async (fullPath, searchText = '') => {
+  // preserveValues lets a caller pass the values that must survive the merge
+  // explicitly, instead of relying on the selectedFilterValues closure - a
+  // setSelectedFilterValues() call right before fetchFilterValues() hasn't
+  // committed yet by the time this function reads that state.
+  const fetchFilterValues = async (fullPath, searchText = '', preserveValues = null) => {
     setLoadingFilterValues(true);
     try {
       // Get parameters from context if available, otherwise use default
@@ -4829,7 +4955,8 @@ const Filters = ({
       // Merge with currently selected values to ensure they're always available
       // This is important when editing filters with search text - we don't want to lose
       // previously selected values that don't match the current search
-      const selectedValueItems = selectedFilterValues.map(key => ({
+      const valuesToPreserve = preserveValues !== null ? preserveValues : selectedFilterValues;
+      const selectedValueItems = valuesToPreserve.map(key => ({
         key: String(key),
         value: String(key)
       }));
@@ -5058,6 +5185,21 @@ const Filters = ({
     }
   };
 
+  // Add a value typed in the "custom value" box directly into the selected
+  // filter values, and inject it into availableFilterValues too, since
+  // CheckboxMultiAutocomplete only renders a chip for keys it can resolve
+  // against its items list.
+  const handleAddCustomFilterValue = rawValue => {
+    const value = rawValue.trim();
+    if (!value) return;
+    if (selectedFilterValues.includes(value)) return;
+    setAvailableFilterValues(prev => prev.some(item => item.key === value) ? prev : [{
+      key: value,
+      value
+    }, ...prev]);
+    setSelectedFilterValues(prev => [...prev, value]);
+  };
+
   // Handler for search text input in filter values dropdown (debounced - triggers API call)
   const handleFilterSearchChange = searchText => {
     // Determine the fullPath based on current mode
@@ -5277,6 +5419,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/React__namespace.default.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })));
   })(), /*#__PURE__*/React__namespace.default.createElement(material.Box, {
     sx: {
@@ -5351,7 +5495,12 @@ const Filters = ({
       mb: 3
     }
   }, /*#__PURE__*/React__namespace.default.createElement(SingleSelect, {
-    items: existingDimensions.map(dim => ({
+    items: Array.from(
+    // Dimensions can now be added more than once (same fullPath,
+    // different instance), but a filter targets the underlying
+    // field regardless of how many columns display it - so this
+    // list is deduped by fullPath to avoid showing it twice.
+    new Map(existingDimensions.map(dim => [dim.fullPath, dim])).values()).map(dim => ({
       key: dim.fullPath,
       value: interpolateTitle(dimensionTitleOverrides[dim.fullPath] || dim.dimensionTitle, parameters)
     })).sort((a, b) => a.value.localeCompare(b.value)),
@@ -5423,6 +5572,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/React__namespace.default.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })));
   })(), /*#__PURE__*/React__namespace.default.createElement(material.Box, {
     sx: {
@@ -5712,6 +5863,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/React__namespace.default.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })), /*#__PURE__*/React__namespace.default.createElement(material.Box, {
       sx: {
         display: 'flex',
@@ -5934,7 +6087,7 @@ const ColumnOrder = ({
     key: `${item.kind}-${item.key}`,
     id: index,
     label: labelFor(item),
-    fullPath: item.kind === "computed" ? item.data.value : item.key,
+    fullPath: item.kind === "computed" ? item.data.value : item.data.fullPath,
     kind: item.kind,
     source: item.kind === "metric" ? item.data.metric?.source : undefined,
     onMoveUp: () => handleMoveUp(index),
@@ -5960,11 +6113,17 @@ const formatValue = (value, def) => {
 const isNumericType = type => type === 'integer' || type === 'currency';
 
 // Builds a single DataGrid column definition for one resolved column item
-// (a dimension, computed dimension, or metric). Field naming logic:
+// (a dimension, computed dimension, or metric). The DataGrid `field` is the
+// item's instance id (so two duplicate instances of the same underlying
+// dimension/metric still get distinct columns); the actual cell value is
+// read via `valueGetter` from `dataFieldName`, the key the API response
+// actually uses - shared by every duplicate instance, since the backend
+// only ever returns one value per fullPath. dataFieldName rules:
 // - Dimensions from base provider: baseAlias.field -> baseAlias_field
 // - Dimensions from nested provider: baseAlias_rel1_rel2.field -> rel1_rel2_field (drops base alias)
 // - Computed dimensions have no provider/relations chain, so the API returns
-//   each row keyed by the computed dimension's own `name`.
+//   each row keyed by the computed dimension's own `name` (and can't be
+//   duplicated - names must be unique - so field/dataFieldName coincide).
 // - Metrics: API returns metric keys in different forms depending on path depth
 //   (see comment inline below), normalised to match the row-key normalisation
 //   done when building `rows`.
@@ -5982,13 +6141,13 @@ const buildColumn = (item, titleOverrides, parameters) => {
   if (item.kind === 'metric') {
     const metric = item.data;
     const metricDef = metric.metric;
-    let fieldName;
+    let dataFieldName;
     const dotCount = (metric.fullPath.match(/\./g) || []).length;
     if (dotCount >= 2) {
       // 3+-part namespaced path: API returns the full dotted path as the key.
       // Normalise dots to underscores to match the row key normalisation below.
       // Example: "mc.dkpi.activeAgreementsCount" -> "mc_dkpi_activeAgreementsCount"
-      fieldName = metric.fullPath.replace(/\./g, '_');
+      dataFieldName = metric.fullPath.replace(/\./g, '_');
     } else if (metric.relations && metric.relations.length > 0) {
       // 2-part path from a nested provider: API drops the base provider alias.
       // Example: "mc_fa.total_amount" -> "fa_total_amount"
@@ -5999,19 +6158,24 @@ const buildColumn = (item, titleOverrides, parameters) => {
       const pathParts = pathWithoutField.split('_');
       pathParts.shift(); // remove base provider alias
       const pathWithoutBase = pathParts.join('_');
-      fieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
+      dataFieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
     } else {
       // 2-part path from the base provider: API returns just the metric name.
       // Example: "mc.record_count" -> "record_count"
-      fieldName = metric.metricName;
+      dataFieldName = metric.metricName;
     }
-    const headerName = interpolateTitle(titleOverrides.metrics[metric.fullPath] || metric.metricTitle || fieldName, parameters);
+    const headerName = interpolateTitle(titleOverrides.metrics[metric.id] || metric.metricTitle || dataFieldName, parameters);
     return {
-      field: fieldName,
+      // `field` is the instance id (unique even for duplicate columns
+      // pointing at the same underlying metric); the actual value is
+      // read from the row via valueGetter using dataFieldName, which is
+      // the key the API response actually uses (shared across duplicates).
+      field: metric.id.replace(/[.#]/g, '_'),
       headerName: headerName,
       flex: 1,
       minWidth: 150,
       type: isNumericType(metricDef?.type) ? 'number' : 'string',
+      valueGetter: (_value, row) => row[dataFieldName],
       renderHeader: () => /*#__PURE__*/React__namespace.default.createElement(material.Box, {
         sx: {
           display: 'flex',
@@ -6027,7 +6191,7 @@ const buildColumn = (item, titleOverrides, parameters) => {
 
   // Dimension
   const dim = item.data;
-  let fieldName;
+  let dataFieldName;
   if (dim.relations && dim.relations.length > 0) {
     // From nested provider: drop the base provider alias
     // Example: ft_fa_db.currency -> fa_db_currency
@@ -6039,20 +6203,24 @@ const buildColumn = (item, titleOverrides, parameters) => {
     pathParts.shift(); // Remove base provider alias
     const pathWithoutBase = pathParts.join('_'); // e.g., "fa_db"
 
-    fieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
+    dataFieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
   } else {
     // From base provider: keep the full path with underscore
     // Example: ba.created_at -> ba_created_at
-    fieldName = dim.fullPath.replace('.', '_');
+    dataFieldName = dim.fullPath.replace('.', '_');
   }
-  const headerName = interpolateTitle(titleOverrides.dimensions[dim.fullPath] || dim.dimensionTitle || fieldName, parameters);
+  const headerName = interpolateTitle(titleOverrides.dimensions[dim.id] || dim.dimensionTitle || dataFieldName, parameters);
   const dimDef = dim.dimension;
   return {
-    field: fieldName,
+    // Same rationale as the metric branch above: `field` must be unique
+    // per instance, while the value always comes from the one real
+    // underlying row key (dataFieldName), shared by every duplicate.
+    field: dim.id.replace(/[.#]/g, '_'),
     headerName: headerName,
     flex: 1,
     minWidth: 150,
     type: isNumericType(dimDef?.type) ? 'number' : 'string',
+    valueGetter: (_value, row) => row[dataFieldName],
     valueFormatter: value => formatValue(value, dimDef)
   };
 };
@@ -6378,6 +6546,72 @@ const ReportBuilder = ({
     }
   };
 
+  // Reconstructs saved dimensions as independent, individually-identified
+  // instances so that deliberate duplicates (the same field added more than
+  // once) survive a save/reload round trip. Prefers `ordered_dimensions`
+  // (one ref per instance - the nth duplicate of a path is suffixed
+  // `#n`) when present; falls back to one instance per entry in the
+  // (necessarily duplicate-free) `dimensions` path list for reports saved
+  // before this field existed.
+  const reconstructDimensions = (reportDef, providersData) => {
+    const orderByMap = {};
+    if (reportDef.definition?.doc?.query?.order_by) {
+      for (const orderItem of reportDef.definition.doc.query.order_by) {
+        orderByMap[orderItem.name] = orderItem.desc === true ? "desc" : "asc";
+      }
+    }
+    const reconstructed = [];
+    const orderedRefs = (reportDef.definition?.doc?.query?.ordered_dimensions || []).filter(entry => entry.type === "dimension").map(entry => entry.ref);
+    if (orderedRefs.length > 0) {
+      orderedRefs.forEach(ref => {
+        const fullPath = ref.split("#")[0];
+        const dim = reconstructDimensionFromPath(fullPath, providersData, reportDef.provider);
+        if (dim) {
+          dim.id = ref;
+          dim.sortOrder = orderByMap[fullPath] || null;
+          reconstructed.push(dim);
+        }
+      });
+    } else if (reportDef.definition?.doc?.query?.dimensions) {
+      for (const dimPath of reportDef.definition.doc.query.dimensions) {
+        const dim = reconstructDimensionFromPath(dimPath, providersData, reportDef.provider);
+        if (dim) {
+          dim.id = dimPath;
+          dim.sortOrder = orderByMap[dimPath] || null;
+          reconstructed.push(dim);
+        }
+      }
+    }
+    return reconstructed;
+  };
+
+  // Mirrors reconstructDimensions for metrics, using the analogous
+  // `ordered_metrics` field (metrics have no other unified-order concept to
+  // fall back on, so this is always written whenever there are metrics).
+  const reconstructMetrics = (reportDef, providersData) => {
+    const reconstructed = [];
+    const orderedRefs = reportDef.definition?.doc?.query?.ordered_metrics || [];
+    if (orderedRefs.length > 0) {
+      orderedRefs.forEach(ref => {
+        const fullPath = ref.split("#")[0];
+        const metric = reconstructMetricFromPath(fullPath, providersData, reportDef.provider);
+        if (metric) {
+          metric.id = ref;
+          reconstructed.push(metric);
+        }
+      });
+    } else if (reportDef.definition?.doc?.query?.metrics) {
+      for (const metricPath of reportDef.definition.doc.query.metrics) {
+        const metric = reconstructMetricFromPath(metricPath, providersData, reportDef.provider);
+        if (metric) {
+          metric.id = metricPath;
+          reconstructed.push(metric);
+        }
+      }
+    }
+    return reconstructed;
+  };
+
   // Build the unified display/execution order for dimensions + computed
   // dimensions. Prefers the persisted `ordered_dimensions` field; falls back
   // to "dimensions first, then computed dimensions" for report definitions
@@ -6388,7 +6622,7 @@ const ReportBuilder = ({
     const seenComputedKeys = new Set();
     if (Array.isArray(rawOrderedDimensions)) {
       rawOrderedDimensions.forEach(entry => {
-        if (entry.type === "dimension" && dimensions.some(d => d.fullPath === entry.ref)) {
+        if (entry.type === "dimension" && dimensions.some(d => d.id === entry.ref)) {
           dimensionOrder.push({
             type: "dimension",
             key: entry.ref
@@ -6406,10 +6640,10 @@ const ReportBuilder = ({
 
     // Append anything not covered by ordered_dimensions (older reports, or drift)
     dimensions.forEach(d => {
-      if (!seenDimensionKeys.has(d.fullPath)) {
+      if (!seenDimensionKeys.has(d.id)) {
         dimensionOrder.push({
           type: "dimension",
-          key: d.fullPath
+          key: d.id
         });
       }
     });
@@ -6432,12 +6666,12 @@ const ReportBuilder = ({
   // "fall back to the default order".
   const buildColumnOrder = (rawOrderedColumns, dimensions, computedDimensions, metrics) => {
     if (!Array.isArray(rawOrderedColumns)) return [];
-    const dimensionPaths = new Set(dimensions.map(d => d.fullPath));
+    const dimensionIds = new Set(dimensions.map(d => d.id));
     const computedNames = new Set(computedDimensions.map(cd => cd.name));
-    const metricPaths = new Set(metrics.map(m => m.fullPath));
+    const metricIds = new Set(metrics.map(m => m.id));
     const columnOrder = [];
     rawOrderedColumns.forEach(entry => {
-      if (entry.type === "dimension" && dimensionPaths.has(entry.ref)) {
+      if (entry.type === "dimension" && dimensionIds.has(entry.ref)) {
         columnOrder.push({
           type: "dimension",
           key: entry.ref
@@ -6447,7 +6681,7 @@ const ReportBuilder = ({
           type: "computed",
           key: entry.ref
         });
-      } else if (entry.type === "metric" && metricPaths.has(entry.ref)) {
+      } else if (entry.type === "metric" && metricIds.has(entry.ref)) {
         columnOrder.push({
           type: "metric",
           key: entry.ref
@@ -6477,43 +6711,10 @@ const ReportBuilder = ({
       // Set the title
       setReportTitle(reportDef.title || "");
 
-      // Reconstruct dimensions
-      const reconstructedDimensions = [];
-      const orderByMap = {}; // Map to store sort order from order_by array
-
-      // First, build a map of fullPath -> sortOrder from order_by
-      if (reportDef.definition?.doc?.query?.order_by) {
-        for (const orderItem of reportDef.definition.doc.query.order_by) {
-          if (orderItem.desc === true) {
-            orderByMap[orderItem.name] = "desc";
-          } else {
-            orderByMap[orderItem.name] = "asc";
-          }
-        }
-      }
-
-      // Now reconstruct dimensions and add sortOrder from the map
-      if (reportDef.definition?.doc?.query?.dimensions) {
-        for (const dimPath of reportDef.definition.doc.query.dimensions) {
-          const dim = reconstructDimensionFromPath(dimPath, providersData, reportDef.provider);
-          if (dim) {
-            // Add sortOrder from order_by if it exists
-            dim.sortOrder = orderByMap[dimPath] || null;
-            reconstructedDimensions.push(dim);
-          }
-        }
-      }
-
-      // Reconstruct metrics
-      const reconstructedMetrics = [];
-      if (reportDef.definition?.doc?.query?.metrics) {
-        for (const metricPath of reportDef.definition.doc.query.metrics) {
-          const metric = reconstructMetricFromPath(metricPath, providersData, reportDef.provider);
-          if (metric) {
-            reconstructedMetrics.push(metric);
-          }
-        }
-      }
+      // Reconstruct dimensions and metrics as independent instances
+      // (preserving deliberate duplicates - see reconstructDimensions/Metrics)
+      const reconstructedDimensions = reconstructDimensions(reportDef, providersData);
+      const reconstructedMetrics = reconstructMetrics(reportDef, providersData);
 
       // Load title overrides if they exist
       const loadedTitleOverrides = {
@@ -6597,43 +6798,10 @@ const ReportBuilder = ({
       // Set the title (already modified with " (Copy)" suffix)
       setReportTitle(reportDef.title || "");
 
-      // Reconstruct dimensions
-      const reconstructedDimensions = [];
-      const orderByMap = {}; // Map to store sort order from order_by array
-
-      // First, build a map of fullPath -> sortOrder from order_by
-      if (reportDef.definition?.doc?.query?.order_by) {
-        for (const orderItem of reportDef.definition.doc.query.order_by) {
-          if (orderItem.desc === true) {
-            orderByMap[orderItem.name] = "desc";
-          } else {
-            orderByMap[orderItem.name] = "asc";
-          }
-        }
-      }
-
-      // Now reconstruct dimensions and add sortOrder from the map
-      if (reportDef.definition?.doc?.query?.dimensions) {
-        for (const dimPath of reportDef.definition.doc.query.dimensions) {
-          const dim = reconstructDimensionFromPath(dimPath, providersData, reportDef.provider);
-          if (dim) {
-            // Add sortOrder from order_by if it exists
-            dim.sortOrder = orderByMap[dimPath] || null;
-            reconstructedDimensions.push(dim);
-          }
-        }
-      }
-
-      // Reconstruct metrics
-      const reconstructedMetrics = [];
-      if (reportDef.definition?.doc?.query?.metrics) {
-        for (const metricPath of reportDef.definition.doc.query.metrics) {
-          const metric = reconstructMetricFromPath(metricPath, providersData, reportDef.provider);
-          if (metric) {
-            reconstructedMetrics.push(metric);
-          }
-        }
-      }
+      // Reconstruct dimensions and metrics as independent instances
+      // (preserving deliberate duplicates - see reconstructDimensions/Metrics)
+      const reconstructedDimensions = reconstructDimensions(reportDef, providersData);
+      const reconstructedMetrics = reconstructMetrics(reportDef, providersData);
 
       // Load title overrides if they exist
       const loadedTitleOverrides = {
@@ -6732,42 +6900,45 @@ const ReportBuilder = ({
     });
     console.log("Selected root provider:", event.target.value);
   };
-  const handleUpdateDimensionTitle = (fullPath, customTitle) => {
+
+  // Keyed by instance id, so two instances of the same dimension can carry
+  // independent custom titles.
+  const handleUpdateDimensionTitle = (id, customTitle) => {
     setTitleOverrides(prev => ({
       ...prev,
       dimensions: {
         ...prev.dimensions,
-        [fullPath]: customTitle
+        [id]: customTitle
       }
     }));
   };
-  const handleResetDimensionTitle = fullPath => {
+  const handleResetDimensionTitle = id => {
     setTitleOverrides(prev => {
       const newDimensions = {
         ...prev.dimensions
       };
-      delete newDimensions[fullPath];
+      delete newDimensions[id];
       return {
         ...prev,
         dimensions: newDimensions
       };
     });
   };
-  const handleUpdateMetricTitle = (fullPath, customTitle) => {
+  const handleUpdateMetricTitle = (id, customTitle) => {
     setTitleOverrides(prev => ({
       ...prev,
       metrics: {
         ...prev.metrics,
-        [fullPath]: customTitle
+        [id]: customTitle
       }
     }));
   };
-  const handleResetMetricTitle = fullPath => {
+  const handleResetMetricTitle = id => {
     setTitleOverrides(prev => {
       const newMetrics = {
         ...prev.metrics
       };
-      delete newMetrics[fullPath];
+      delete newMetrics[id];
       return {
         ...prev,
         metrics: newMetrics
@@ -6802,11 +6973,11 @@ const ReportBuilder = ({
         dimensions: [...prev.dimensions, dimensionData],
         dimensionOrder: [...prev.dimensionOrder, {
           type: "dimension",
-          key: dimensionData.fullPath
+          key: dimensionData.id
         }],
         columnOrder: appendToColumnOrder(prev.columnOrder, {
           type: "dimension",
-          key: dimensionData.fullPath
+          key: dimensionData.id
         })
       };
       console.log("Dimension saved:", dimensionData);
@@ -6814,22 +6985,30 @@ const ReportBuilder = ({
       return newReport;
     });
   };
-  const handleRemoveDimension = fullPath => {
+  const handleRemoveDimension = id => {
     setReport(prev => ({
       ...prev,
-      dimensions: prev.dimensions.filter(d => d.fullPath !== fullPath),
-      dimensionOrder: prev.dimensionOrder.filter(entry => !(entry.type === "dimension" && entry.key === fullPath)),
-      columnOrder: prev.columnOrder.filter(entry => !(entry.type === "dimension" && entry.key === fullPath))
+      dimensions: prev.dimensions.filter(d => d.id !== id),
+      dimensionOrder: prev.dimensionOrder.filter(entry => !(entry.type === "dimension" && entry.key === id)),
+      columnOrder: prev.columnOrder.filter(entry => !(entry.type === "dimension" && entry.key === id))
     }));
   };
-  const handleUpdateDimensionSortOrder = (fullPath, sortOrder) => {
-    setReport(prev => ({
-      ...prev,
-      dimensions: prev.dimensions.map(d => d.fullPath === fullPath ? {
-        ...d,
-        sortOrder
-      } : d)
-    }));
+
+  // sortOrder is fundamentally a per-field (query-level) setting - SQL can
+  // only sort by a given column once - so toggling it on any instance of a
+  // duplicated dimension applies to every instance sharing that fullPath.
+  const handleUpdateDimensionSortOrder = (id, sortOrder) => {
+    setReport(prev => {
+      const target = prev.dimensions.find(d => d.id === id);
+      if (!target) return prev;
+      return {
+        ...prev,
+        dimensions: prev.dimensions.map(d => d.fullPath === target.fullPath ? {
+          ...d,
+          sortOrder
+        } : d)
+      };
+    });
   };
 
   // Reorders the single unified dimensions + computed-dimensions list;
@@ -6884,7 +7063,7 @@ const ReportBuilder = ({
         metrics: [...prev.metrics, metricData],
         columnOrder: appendToColumnOrder(prev.columnOrder, {
           type: "metric",
-          key: metricData.fullPath
+          key: metricData.id
         })
       };
       console.log("Metric saved:", metricData);
@@ -6892,15 +7071,12 @@ const ReportBuilder = ({
       return newReport;
     });
   };
-  const handleRemoveMetric = index => {
-    setReport(prev => {
-      const fullPath = prev.metrics[index]?.fullPath;
-      return {
-        ...prev,
-        metrics: prev.metrics.filter((_, i) => i !== index),
-        columnOrder: prev.columnOrder.filter(entry => !(entry.type === "metric" && entry.key === fullPath))
-      };
-    });
+  const handleRemoveMetric = id => {
+    setReport(prev => ({
+      ...prev,
+      metrics: prev.metrics.filter(m => m.id !== id),
+      columnOrder: prev.columnOrder.filter(entry => !(entry.type === "metric" && entry.key === id))
+    }));
   };
   const handleReorderMetrics = newOrder => {
     setReport(prev => ({
@@ -6955,13 +7131,30 @@ const ReportBuilder = ({
   // persisted `ordered_dimensions` field all stay consistent with whatever
   // order the user arranged on screen.
   const buildQueryObject = () => {
-    const dimensionByPath = Object.fromEntries(report.dimensions.map(d => [d.fullPath, d]));
+    const dimensionById = Object.fromEntries(report.dimensions.map(d => [d.id, d]));
     const computedByName = Object.fromEntries(report.computedDimensions.map(cd => [cd.name, cd]));
-    const orderedDimensionsOnly = report.dimensionOrder.filter(entry => entry.type === "dimension").map(entry => dimensionByPath[entry.key]).filter(Boolean);
+
+    // May contain more than one instance of the same fullPath (deliberate
+    // duplicates), kept in dimensionOrder's display order.
+    const orderedDimensionsOnly = report.dimensionOrder.filter(entry => entry.type === "dimension").map(entry => dimensionById[entry.key]).filter(Boolean);
     const orderedComputedOnly = report.dimensionOrder.filter(entry => entry.type === "computed").map(entry => computedByName[entry.key]).filter(Boolean);
 
+    // The API keys each result row by fullPath, so duplicate instances of
+    // the same field can only ever carry one value/one sort direction at
+    // the query level - dedupe by fullPath (keeping first-occurrence order)
+    // before sending. The builder still shows/orders/titles each instance
+    // independently; they just read from the same underlying query column.
+    const uniqueDimensionsByPath = [];
+    const seenDimensionPaths = new Set();
+    orderedDimensionsOnly.forEach(dim => {
+      if (!seenDimensionPaths.has(dim.fullPath)) {
+        seenDimensionPaths.add(dim.fullPath);
+        uniqueDimensionsByPath.push(dim);
+      }
+    });
+
     // Build order_by array - include all dimensions, add desc property only when needed
-    const orderBy = orderedDimensionsOnly.map(dim => {
+    const orderBy = uniqueDimensionsByPath.map(dim => {
       const orderItem = {
         name: dim.fullPath
       };
@@ -7016,9 +7209,20 @@ const ReportBuilder = ({
     if (Object.keys(titleOverrides.filters).length > 0) {
       titles.filters = titleOverrides.filters;
     }
+
+    // Same dedupe rationale as dimensions above: the query only needs each
+    // metric fullPath once, however many display instances reference it.
+    const uniqueMetricPaths = [];
+    const seenMetricPaths = new Set();
+    report.metrics.forEach(metric => {
+      if (!seenMetricPaths.has(metric.fullPath)) {
+        seenMetricPaths.add(metric.fullPath);
+        uniqueMetricPaths.push(metric.fullPath);
+      }
+    });
     const queryObj = {
-      dimensions: orderedDimensionsOnly.map(dim => dim.fullPath),
-      metrics: report.metrics.map(metric => metric.fullPath),
+      dimensions: uniqueDimensionsByPath.map(dim => dim.fullPath),
+      metrics: uniqueMetricPaths,
       order_by: orderBy
     };
 
@@ -7032,7 +7236,9 @@ const ReportBuilder = ({
 
     // Persist the unified dimension + computed-dimension order so it can be
     // reconstructed on reload and so executed reports render columns in the
-    // same order they were arranged in the builder.
+    // same order they were arranged in the builder. Entries use each
+    // dimension's instance id as `ref`, so deliberate duplicates (the nth
+    // occurrence of a fullPath is suffixed `#n`) round-trip correctly.
     if (report.dimensionOrder.length > 0) {
       queryObj.ordered_dimensions = report.dimensionOrder.map(entry => ({
         type: entry.type,
@@ -7040,14 +7246,30 @@ const ReportBuilder = ({
       }));
     }
 
-    // Persist the optional unified column order (Column Order tab) so the
-    // results grid can reproduce it on reload. Absent when no custom order
-    // has been defined, so old/untouched reports keep their current
-    // dimensions-then-metrics column order unchanged.
-    if (report.columnOrder.length > 0) {
-      queryObj.ordered_columns = report.columnOrder.map(entry => ({
-        type: entry.type,
-        ref: entry.key
+    // Persist metric instance order/identity the same way (metrics have no
+    // other unified-order field to piggyback on).
+    if (report.metrics.length > 0) {
+      queryObj.ordered_metrics = report.metrics.map(metric => metric.id);
+    }
+
+    // Persist the full resolved column order - the explicit Column Order tab
+    // arrangement when defined, otherwise dimensions/computed (in their own
+    // order) followed by metrics (in their own order), same as what the
+    // results grid renders. Always emitted (not just when a custom order
+    // exists) so the API/results grid get an explicit order even for
+    // untouched reports, rather than having to fall back to guessing it.
+    const orderedDimensionItems = report.dimensionOrder.map(entry => entry.type === "dimension" ? {
+      kind: "dimension",
+      data: dimensionById[entry.key]
+    } : {
+      kind: "computed",
+      data: computedByName[entry.key]
+    }).filter(item => item.data);
+    const resolvedColumnItems = resolveColumnOrder(report.columnOrder, orderedDimensionItems, report.metrics);
+    if (resolvedColumnItems.length > 0) {
+      queryObj.ordered_columns = resolvedColumnItems.map(item => ({
+        type: item.kind,
+        ref: item.key
       }));
     }
 
@@ -7209,11 +7431,11 @@ const ReportBuilder = ({
 
   // Resolve the unified dimensionOrder into actual dimension/computed-dimension
   // objects so the results grid can render columns in that same order.
-  const dimensionByFullPath = Object.fromEntries(report.dimensions.map(d => [d.fullPath, d]));
+  const dimensionById = Object.fromEntries(report.dimensions.map(d => [d.id, d]));
   const computedDimensionByName = Object.fromEntries(report.computedDimensions.map(cd => [cd.name, cd]));
   const orderedDimensionItems = report.dimensionOrder.map(entry => entry.type === "dimension" ? {
     kind: "dimension",
-    data: dimensionByFullPath[entry.key]
+    data: dimensionById[entry.key]
   } : {
     kind: "computed",
     data: computedDimensionByName[entry.key]