@bygd/nc-report-ui 0.1.28 → 0.1.30

package/dist/default/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useEffect, useMemo, useState, useRef, createContext, useContext } from 'react';
+import React__default, { useEffect, useMemo, useState, useRef, useContext, createContext } from 'react';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
 import { CircularProgress } from '@material-ui/core';
@@ -43,6 +43,9 @@ import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+import StorageIcon from '@mui/icons-material/Storage';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import BoltIcon from '@mui/icons-material/Bolt';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -606,6 +609,7 @@ function Internal(name, props) {
  * - inputValue?: string (controlled input)
  * - defaultInputValue?: string (uncontrolled input)
  * - onInputChange?: (text: string) => void (debounced by debounceMs)
+ * - onInputChangeImmediate?: (text: string) => void (called immediately without debounce)
  * - debounceMs?: number (default 300)
  * - label?, placeholder?, loading?, disabled?, size? = 'small', error?, helperText?,
  *   limitTags? = 3, disableClearable?, id?, textFieldProps?
@@ -640,6 +644,7 @@ function CheckboxMultiAutocomplete({
   inputValue,
   defaultInputValue,
   onInputChange,
+  onInputChangeImmediate,
   debounceMs = 300,
   label,
   placeholder,
@@ -703,6 +708,14 @@ function CheckboxMultiAutocomplete({
     },
     onInputChange: (event, newInput, reason) => {
       if (!isInputControlled) setInnerInput(newInput ?? "");
+
+      // Call immediate handler if provided
+      if (reason === "input" || reason === "clear") {
+        const text = reason === "clear" ? "" : newInput ?? "";
+        onInputChangeImmediate && onInputChangeImmediate(text);
+      }
+
+      // Call debounced handler
       if (reason === "input") {
         debouncedInput(newInput ?? "");
       } else if (reason === "clear") {
@@ -866,7 +879,8 @@ function SingleSelect({
     const {
       key,
       value,
-      disabled
+      disabled,
+      icon
     } = itm;
     return /*#__PURE__*/React__default.createElement(MenuItem, {
       key: key,
@@ -874,9 +888,18 @@ function SingleSelect({
       disabled: disabled,
       sx: {
         fontFamily: "system-ui",
-        minHeight: "36px"
+        minHeight: "36px",
+        display: "flex",
+        alignItems: "center",
+        gap: "6px"
       }
-    }, formatLabel(value));
+    }, icon && /*#__PURE__*/React__default.createElement(Box, {
+      component: "span",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center"
+      }
+    }, icon), formatLabel(value));
   }))));
 }
 
@@ -2878,6 +2901,51 @@ const Dimensions = ({
   })))))));
 };
 
+const MetricSourceIcon = ({
+  source
+}) => {
+  const iconSx = {
+    fontSize: '15px'
+  };
+  if (source === 'kpi') {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "KPI Metric",
+      arrow: true,
+      placement: "top"
+    }, /*#__PURE__*/React__default.createElement(TrendingUpIcon, {
+      sx: {
+        ...iconSx,
+        color: 'rgb(70, 134, 128)'
+      }
+    }));
+  }
+  if (source === 'dynamic') {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Dynamic Metric",
+      arrow: true,
+      placement: "top"
+    }, /*#__PURE__*/React__default.createElement(BoltIcon, {
+      sx: {
+        ...iconSx,
+        color: '#e65100'
+      }
+    }));
+  }
+  if (source === 'provider') {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Provider Metric",
+      arrow: true,
+      placement: "top"
+    }, /*#__PURE__*/React__default.createElement(StorageIcon, {
+      sx: {
+        ...iconSx,
+        color: '#546e7a'
+      }
+    }));
+  }
+  return null;
+};
+
 // Sortable Chip Component
 const SortableChip = ({
   id,
@@ -2892,7 +2960,8 @@ const SortableChip = ({
   defaultTitle,
   customTitle,
   onUpdateTitle,
-  onResetTitle
+  onResetTitle,
+  source
 }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState('');
@@ -3005,7 +3074,15 @@ const SortableChip = ({
       cursor: "grab",
       color: "rgba(110, 110, 110, 0.62)"
     }
-  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
+  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, source && /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      flexShrink: 0
+    }
+  }, /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
+    source: source
+  })), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       minWidth: 0
     }
@@ -3237,7 +3314,10 @@ const Metrics = ({
         value: metric.title || metric.name,
         metricName: metric.name,
         metric: metric,
-        disabled: isAlreadySelected
+        disabled: isAlreadySelected,
+        icon: metric.source ? /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
+          source: metric.source
+        }) : undefined
       };
     });
     return items;
@@ -3546,7 +3626,8 @@ const Metrics = ({
     defaultTitle: metric.metricTitle,
     customTitle: titleOverrides[metric.fullPath],
     onUpdateTitle: onUpdateTitle,
-    onResetTitle: onResetTitle
+    onResetTitle: onResetTitle,
+    source: metric.metric?.source
   })))))));
 };
 
@@ -3573,6 +3654,7 @@ const Filters = ({
   const [selectedFilterValues, setSelectedFilterValues] = useState([]);
   const [loadingFilterValues, setLoadingFilterValues] = useState(false);
   const [editingFilterPath, setEditingFilterPath] = useState(null); // Track which filter is being edited
+  const [filterSearchText, setFilterSearchText] = useState(''); // Track search text for server-side filtering
 
   // Date range state for date/timestamp filters
   const [dateRangeFrom, setDateRangeFrom] = useState(null);
@@ -3590,6 +3672,7 @@ const Filters = ({
     setSelectedFilterValues([]);
     setDateRangeFrom(null);
     setDateRangeTo(null);
+    setFilterSearchText('');
   }, [dimensionSelectionChain]);
 
   // Get the current provider based on selection chain
@@ -3667,6 +3750,7 @@ const Filters = ({
     setSelectedFilterValues([]);
     setDateRangeFrom(null);
     setDateRangeTo(null);
+    setFilterSearchText('');
     setEditingFilterPath(null); // Close any editing
   };
   const handleEditFilter = async (fullPath, filter) => {
@@ -3744,6 +3828,7 @@ const Filters = ({
     setSelectedFilterValues([]);
     setDateRangeFrom(null);
     setDateRangeTo(null);
+    setFilterSearchText('');
   };
 
   // Title editing handlers
@@ -3780,7 +3865,7 @@ const Filters = ({
   };
 
   // Fetch distinct values for the selected dimension
-  const fetchFilterValues = async fullPath => {
+  const fetchFilterValues = async (fullPath, searchText = '') => {
     setLoadingFilterValues(true);
     try {
       // Get parameters from context if available, otherwise use default
@@ -3788,17 +3873,31 @@ const Filters = ({
         base_currency: "EUR"
       };
 
+      // Build query object
+      const queryObj = {
+        dimensions: [fullPath],
+        metrics: [],
+        order_by: [{
+          "name": fullPath
+        }]
+      };
+
+      // Add filter if search text is provided
+      if (searchText && searchText.trim() !== '') {
+        queryObj.filter = {
+          and: [{
+            [fullPath]: {
+              "ilike": `${searchText.trim()}%`
+            }
+          }]
+        };
+      }
+
       // Build a temporary report to fetch distinct values
       const reportPayload = {
         provider: rootProvider,
         doc: {
-          query: {
-            dimensions: [fullPath],
-            metrics: [],
-            order_by: [{
-              "name": fullPath
-            }]
-          }
+          query: queryObj
         },
         parameters
       };
@@ -3835,8 +3934,31 @@ const Filters = ({
           value: String(value)
         };
       });
+
+      // 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 => ({
+        key: String(key),
+        value: String(key)
+      }));
+
+      // Create a map to avoid duplicates
+      const valueMap = new Map();
+
+      // Add selected values first (they should appear at the top or be preserved)
+      selectedValueItems.forEach(item => {
+        valueMap.set(item.key, item);
+      });
+
+      // Add fetched values
+      distinctValues.forEach(item => {
+        valueMap.set(item.key, item);
+      });
+      const mergedValues = Array.from(valueMap.values());
       console.log('Transformed distinct values:', distinctValues);
-      setAvailableFilterValues(distinctValues);
+      console.log('Merged with selected values:', mergedValues);
+      setAvailableFilterValues(mergedValues);
     } catch (error) {
       console.error('Error fetching filter values:', error);
       setAvailableFilterValues([]);
@@ -4026,6 +4148,8 @@ const Filters = ({
     setSelectedFilterValues([]);
     setDateRangeFrom(null);
     setDateRangeTo(null);
+    setFilterSearchText(''); // Reset search text when changing dimension
+
     if (fullPath) {
       // Find the dimension data from existingDimensions
       const dimensionData = existingDimensions.find(dim => dim.fullPath === fullPath);
@@ -4042,6 +4166,56 @@ const Filters = ({
       setAvailableFilterValues([]);
     }
   };
+
+  // Handler for search text input in filter values dropdown (debounced - triggers API call)
+  const handleFilterSearchChange = searchText => {
+    // Determine the fullPath based on current mode
+    let fullPath = null;
+    if (isAddingFromDimension && selectedExistingDimension) {
+      // Mode: Adding filter from existing dimension
+      fullPath = selectedExistingDimension;
+    } else if (isAdding && selectedDimension) {
+      // Mode: Adding new filter with provider selection
+      const dimensionItems = getDimensionItems();
+      const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
+      if (selectedItem) {
+        // Build the complete relation objects array
+        const relations = [];
+        let currentProviderKey = rootProvider;
+        dimensionSelectionChain.forEach(selection => {
+          const provider = providersData[currentProviderKey];
+          if (provider && provider.relations) {
+            const relationObj = provider.relations.find(rel => rel.name === selection.relationName);
+            if (relationObj) {
+              relations.push(relationObj);
+            }
+          }
+          currentProviderKey = selection.targetKey;
+        });
+
+        // Build the alias path
+        const rootProviderData = providersData[rootProvider];
+        const aliasPath = [rootProviderData.default_alias];
+        relations.forEach(rel => {
+          aliasPath.push(rel.alias);
+        });
+        fullPath = `${aliasPath.join('_')}.${selectedItem.dimensionKey}`;
+      }
+    } else if (editingFilterPath) {
+      // Mode: Editing existing filter
+      fullPath = editingFilterPath;
+    }
+
+    // Fetch filter values with search text if we have a fullPath
+    if (fullPath) {
+      fetchFilterValues(fullPath, searchText);
+    }
+  };
+
+  // Immediate handler for input changes (not debounced - updates state immediately)
+  const handleFilterSearchInputChange = searchText => {
+    setFilterSearchText(searchText);
+  };
   const formatProviderPath = filter => {
     // Build path using root provider + relation names
     const pathParts = [rootProvider];
@@ -4201,10 +4375,14 @@ const Filters = ({
       items: availableFilterValues,
       selectedKeys: selectedFilterValues,
       onChange: keys => setSelectedFilterValues(keys),
+      inputValue: filterSearchText,
+      onInputChange: handleFilterSearchChange,
+      onInputChangeImmediate: handleFilterSearchInputChange,
       label: "Choose Values",
-      placeholder: "Select one or more values...",
+      placeholder: "Type to search...",
       loading: loadingFilterValues,
-      helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value'
+      helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
+      debounceMs: 1000
     })));
   })(), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
@@ -4343,10 +4521,14 @@ const Filters = ({
       items: availableFilterValues,
       selectedKeys: selectedFilterValues,
       onChange: keys => setSelectedFilterValues(keys),
+      inputValue: filterSearchText,
+      onInputChange: handleFilterSearchChange,
+      onInputChangeImmediate: handleFilterSearchInputChange,
       label: "Choose Values",
-      placeholder: "Select one or more values...",
+      placeholder: "Type to search...",
       loading: loadingFilterValues,
-      helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value'
+      helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
+      debounceMs: 1000
     })));
   })(), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
@@ -4626,10 +4808,14 @@ const Filters = ({
       items: availableFilterValues,
       selectedKeys: selectedFilterValues,
       onChange: keys => setSelectedFilterValues(keys),
+      inputValue: filterSearchText,
+      onInputChange: handleFilterSearchChange,
+      onInputChangeImmediate: handleFilterSearchInputChange,
       label: "Choose Values",
-      placeholder: "Select one or more values...",
+      placeholder: "Type to search...",
       loading: loadingFilterValues,
-      helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value'
+      helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
+      debounceMs: 1000
     })), /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         display: 'flex',
@@ -4723,31 +4909,39 @@ const ReportDataGrid = ({
     });
 
     // Add metric columns
-    // Metric field naming logic:
-    // - If from base provider: baseAlias.metric -> metric (no prefix at all)
-    // - If from nested provider: baseAlias_rel1_rel2.metric -> rel1_rel2_metric (drops base alias)
+    // The API returns metric keys in two different forms depending on the path depth:
+    //
+    //  • 2-part path  "mc.record_count"              → API key: "record_count"
+    //  • 2-part path  "mc_fa.total_amount"  (nested) → API key: "fa_total_amount"
+    //  • 3+-part path "mc.dkpi.activeAgreementsCount"→ API key: "mc.dkpi.activeAgreementsCount" (dots)
+    //
+    // For 3+-part paths the API key contains dots. MUI DataGrid interprets dots
+    // in field names as nested-object accessors, so the rows useMemo normalises
+    // those keys (dots → underscores). The column field must match that normalised key.
     metrics.forEach(metric => {
       const metricDef = metric.metric;
       let fieldName;
       let headerName;
-
-      // Check if there are relations (nested providers)
-      if (metric.relations && metric.relations.length > 0) {
-        // From nested provider: drop the base provider alias
-        // Example: ft_fa.total_amount -> fa_total_amount
+      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, '_');
+      } 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"
         const parts = metric.fullPath.split('.');
-        const pathWithoutField = parts[0]; // e.g., "ft_fa"
+        const pathWithoutField = parts[0]; // e.g., "mc_fa"
         const field = parts[1]; // e.g., "total_amount"
 
-        // Remove the base provider alias (first part before first underscore)
         const pathParts = pathWithoutField.split('_');
-        pathParts.shift(); // Remove base provider alias
-        const pathWithoutBase = pathParts.join('_'); // e.g., "fa"
-
+        pathParts.shift(); // remove base provider alias
+        const pathWithoutBase = pathParts.join('_');
         fieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
       } else {
-        // From base provider: no prefix at all, just the metric name
-        // Example: fo.total_amount -> total_amount
+        // 2-part path from the base provider: API returns just the metric name.
+        // Example: "mc.record_count" -> "record_count"
         fieldName = metric.metricName;
       }
 
@@ -4759,6 +4953,15 @@ const ReportDataGrid = ({
         flex: 1,
         minWidth: 150,
         type: metricDef?.type === 'integer' || metricDef?.type === 'currency' ? 'number' : 'string',
+        renderHeader: () => /*#__PURE__*/React__default.createElement(Box$1, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5
+          }
+        }, /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
+          source: metricDef?.source
+        }), /*#__PURE__*/React__default.createElement("span", null, headerName)),
         valueFormatter: value => {
           if (value == null) return '';
 
@@ -4777,14 +4980,22 @@ const ReportDataGrid = ({
     return cols;
   }, [dimensions, metrics, titleOverrides]);
 
-  // Transform report data to rows with unique IDs
+  // Transform report data to rows with unique IDs.
+  // Keys are normalised by replacing dots with underscores so that MUI DataGrid
+  // does not misinterpret dotted keys (e.g. "mc.dkpi.exposure") as nested
+  // object paths. Dimension keys returned by the API are already underscore-
+  // based, so normalisation is a no-op for them.
   const rows = React__default.useMemo(() => {
     if (!reportData || !Array.isArray(reportData)) return [];
-    return reportData.map((row, index) => ({
-      id: index,
-      // DataGrid requires unique id for each row
-      ...row
-    }));
+    return reportData.map((row, index) => {
+      const normalizedRow = {
+        id: index
+      };
+      Object.entries(row).forEach(([key, value]) => {
+        normalizedRow[key.replace(/\./g, '_')] = value;
+      });
+      return normalizedRow;
+    });
   }, [reportData]);
 
   // Handle pagination change

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bygd/nc-report-ui",
-	"version": "0.1.28",
+	"version": "0.1.30",
 	"files": [
 		"dist/*",
 		"fnet/input.yaml",