@evergis/react 4.0.74 → 4.0.78

package/dist/index.js

@@ -4677,33 +4677,6 @@ const createConfigPage = (props) => {
     };
 };
 
-const getAttributesConfiguration = (layer) => {
-    const layerAttributeConfiguration = layer?.configuration?.attributesConfiguration ?? {};
-    const { geometryAttribute, idAttribute } = layerAttributeConfiguration;
-    const emptyLayerDefinition = {
-        attributes: [],
-        geometryAttribute: geometryAttribute ?? GEOMETRY_ATTRIBUTE,
-        idAttribute: idAttribute ?? DEFAULT_ID_ATTRIBUTE_NAME,
-        titleAttribute: "",
-    };
-    if (!isLayerService(layer)) {
-        return emptyLayerDefinition;
-    }
-    return {
-        ...emptyLayerDefinition,
-        ...layerAttributeConfiguration,
-        attributes: layerAttributeConfiguration?.attributes ||
-            emptyLayerDefinition.attributes,
-    };
-};
-
-const formatChartRelatedValue = (t, value, layerInfo, relatedAttributes) => {
-    const layerDefinition = getAttributesConfiguration(layerInfo);
-    const relatedAxis = relatedAttributes.find(({ chartAxis }) => chartAxis === "y");
-    const attribute = layerDefinition.attributes[relatedAxis.attributeName];
-    return attribute ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat }) : value;
-};
-
 const isEmptyValue = (value) => value === "" || value === null || value === undefined;
 
 const checkIsDateFormat = (value) => value.startsWith("#'") && value.endsWith("'");
@@ -4733,7 +4706,59 @@ const formatConditionValue = ({ value, attributeType, defaultValue, checkQuotes
     return checkQuotes && checkIfNeedQuotes(stringValue, attributeType) ? `'${stringValue}'` : stringValue;
 };
 
+/**
+ * Объектное значение иерархического фильтра "tree" («уровень → массив id»),
+ * в отличие от скалярных/массивных значений остальных фильтров.
+ */
+const isTreeFilterValue = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
+/**
+ * Подставляет плейсхолдеры уровней `%name.l{N}` значениями id соответствующего уровня
+ * (формат `[id1,id2,...]` для оператора IN). Уровни, отсутствующие в значении (или пустые),
+ * не подставляются — плейсхолдер остаётся нетронутым, как и любой пустой `%`-плейсхолдер.
+ */
+const applyTreeFilterToCondition = (condition, name, value, isSingle) => {
+    const filterName = `${FILTER_PREFIX}${name}`;
+    return Object.keys(value).reduce((result, level) => {
+        const formatted = formatConditionValue({ value: value[level], checkQuotes: !isSingle });
+        if (!formatted) {
+            return result;
+        }
+        return result.replace(new RegExp(`${filterName}\\.${level}\\b`, "g"), formatted);
+    }, condition);
+};
+
+const getAttributesConfiguration = (layer) => {
+    const layerAttributeConfiguration = layer?.configuration?.attributesConfiguration ?? {};
+    const { geometryAttribute, idAttribute } = layerAttributeConfiguration;
+    const emptyLayerDefinition = {
+        attributes: [],
+        geometryAttribute: geometryAttribute ?? GEOMETRY_ATTRIBUTE,
+        idAttribute: idAttribute ?? DEFAULT_ID_ATTRIBUTE_NAME,
+        titleAttribute: "",
+    };
+    if (!isLayerService(layer)) {
+        return emptyLayerDefinition;
+    }
+    return {
+        ...emptyLayerDefinition,
+        ...layerAttributeConfiguration,
+        attributes: layerAttributeConfiguration?.attributes ||
+            emptyLayerDefinition.attributes,
+    };
+};
+
+const formatChartRelatedValue = (t, value, layerInfo, relatedAttributes) => {
+    const layerDefinition = getAttributesConfiguration(layerInfo);
+    const relatedAxis = relatedAttributes.find(({ chartAxis }) => chartAxis === "y");
+    const attribute = layerDefinition.attributes[relatedAxis.attributeName];
+    return attribute ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat }) : value;
+};
+
 const applyFiltersToCondition = ({ condition, name, defaultValue, filters, isSingle, isSetParams, }) => {
+    const rawValue = filters[name] !== undefined ? filters[name].value : defaultValue;
+    if (isTreeFilterValue(rawValue)) {
+        return applyTreeFilterToCondition(condition, name, rawValue, isSingle);
+    }
     const hasFilter = filters[name] !== undefined && !!filters[name].value?.toString().length;
     const min = formatConditionValue({
         value: hasFilter ? filters[name].min : null,
@@ -11343,7 +11368,7 @@ const ChipsFilter = ({ type, filter, elementConfig, }) => {
                 icon: chipIcon,
             };
         });
-    }, [configFilter, dataSources, colorAttribute, iconAttribute, theme]);
+    }, [variants, configFilter, dataSources, iconAttribute, colorAttribute, theme]);
     const isChipActive = React.useCallback((chipValue) => {
         const currentValue = filters?.[filterName]?.value;
         if (currentValue === undefined) {
@@ -11419,6 +11444,373 @@ function getIconFromAttribute(option, iconAttribute) {
     return getResourceUrl(iconValue);
 }
 
+const MAX_ANCESTOR_DEPTH = 50;
+const buildLevelOneCondition = (attributeLevel) => `${attributeLevel} = 1`;
+const buildChildrenCondition = (attributeParentName, parentName) => `${attributeParentName} = ${formatConditionValue({ value: parentName })}`;
+const buildSearchCondition = (attributeAlias, query) => `${attributeAlias} LIKE '%${query.replace(/'/g, "''")}%'`;
+/** Запрос пачки записей по их именам (`attributeName`) — для достройки предков. */
+const buildNamesCondition = (attributeName, names) => `${attributeName} in ${formatConditionValue({ value: names })}`;
+/** Запрос пачки записей по их значениям (`attributeValue`) — для восстановления `defaultValue`. */
+const buildValuesCondition = (attributeValue, values) => `${attributeValue} in ${formatConditionValue({ value: values })}`;
+/** Группирует выбранные id по уровню в объектное значение фильтра `{ l{N}: [ids] }`. */
+const buildFilterValue = (selected) => {
+    const result = {};
+    selected.forEach((level, id) => {
+        const key = `l${level}`;
+        if (!result[key]) {
+            result[key] = [];
+        }
+        result[key].push(id);
+    });
+    return result;
+};
+/** Разбирает объектное значение фильтра в карту `id → level`. */
+const parseFilterValue = (value) => {
+    const result = new Map();
+    if (!value) {
+        return result;
+    }
+    Object.keys(value).forEach(levelKey => {
+        const level = Number(levelKey.replace(/^l/, ""));
+        value[levelKey]?.forEach(id => result.set(id, level));
+    });
+    return result;
+};
+/** Стабильная сериализация выбора для сравнения (порядок не важен). */
+const serializeSelection = (selected) => [...selected.entries()]
+    .map(([id, level]) => `${id}:${level}`)
+    .sort()
+    .join(",");
+/**
+ * Дозапрашивает цепочку предков вверх по `parentName` уровень за уровнем (батч `attributeName in
+ * (...)`), пока не достигнет уровня 1. Связь идёт по именам (`name`/`parentName`), т.к. `node.id`
+ * хранит значение (`attributeValue`). Возвращает исходные узлы вместе с предками.
+ */
+const collectAncestors = async (nodes, loadByNames) => {
+    const byName = new Map();
+    nodes.forEach(node => byName.set(node.data.name, node));
+    let frontier = nodes;
+    for (let depth = 0; depth < MAX_ANCESTOR_DEPTH; depth++) {
+        const missingParents = new Set();
+        frontier.forEach(node => {
+            const { parentName, level } = node.data ?? {};
+            if (parentName != null && level > 1 && !byName.has(parentName)) {
+                missingParents.add(parentName);
+            }
+        });
+        if (!missingParents.size) {
+            break;
+        }
+        const parents = await loadByNames([...missingParents]);
+        if (!parents.length) {
+            break;
+        }
+        parents.forEach(parent => byName.set(parent.data.name, parent));
+        frontier = parents;
+    }
+    return [...byName.values()];
+};
+/**
+ * Собирает плоский набор узлов в дерево по связи `parentName` ↔ `name`. Узлы с подгруженными
+ * потомками раскрываются (`expanded` хранит `node.id` = значение); листья-папки без потомков
+ * получают `children = null` (ленивая подгрузка).
+ */
+const assembleTree = (nodes) => {
+    const nodesByName = new Map();
+    nodes.forEach(node => nodesByName.set(node.data.name, node));
+    const childrenMap = new Map();
+    nodesByName.forEach(node => {
+        const parentName = node.data?.parentName;
+        if (parentName != null && nodesByName.has(parentName)) {
+            const siblings = childrenMap.get(parentName) ?? [];
+            siblings.push(node);
+            childrenMap.set(parentName, siblings);
+        }
+    });
+    const roots = [];
+    const expanded = [];
+    nodesByName.forEach(node => {
+        const { name, parentName } = node.data;
+        const kids = childrenMap.get(name);
+        if (kids?.length) {
+            node.children = kids;
+            expanded.push(node.id);
+        }
+        else if (node.isLeaf) {
+            node.children = null;
+        }
+        if (parentName == null || !nodesByName.has(parentName)) {
+            roots.push(node);
+        }
+    });
+    return { roots, expanded };
+};
+
+const useTreeFilterData = (type, filterName) => {
+    const { api } = useGlobalContext();
+    const { currentPage } = useWidgetPage(type);
+    const configFilter = React.useMemo(() => getConfigFilter(filterName, currentPage?.filters), [filterName, currentPage?.filters]);
+    const { relatedDataSource, attributeName = DEFAULT_ATTRIBUTE_NAME, attributeValue, attributeAlias = DEFAULT_ATTRIBUTE_NAME, attributeParentName, attributeLevel, attributeHasChildren, limit = DEFAULT_DATA_SOURCE_LIMIT, } = configFilter ?? {};
+    const valueAttribute = attributeValue ?? attributeName;
+    const layerName = React.useMemo(() => currentPage?.dataSources?.find(({ name }) => name === relatedDataSource)?.layerName, [currentPage?.dataSources, relatedDataSource]);
+    const mapNode = React.useCallback(({ properties }) => {
+        const hasChildren = attributeHasChildren ? !!properties[attributeHasChildren] : false;
+        const data = {
+            name: properties[attributeName],
+            parentName: attributeParentName ? properties[attributeParentName] ?? null : null,
+            level: attributeLevel ? Number(properties[attributeLevel]) : 1,
+        };
+        return {
+            id: properties[valueAttribute],
+            text: String(properties[attributeAlias] ?? ""),
+            isLeaf: hasChildren,
+            children: hasChildren ? null : undefined,
+            data,
+        };
+    }, [valueAttribute, attributeName, attributeAlias, attributeParentName, attributeLevel, attributeHasChildren]);
+    const runQuery = React.useCallback(async (condition) => {
+        if (!layerName) {
+            return [];
+        }
+        const response = await api.layers.getFeatures(layerName, { withGeom: false, limit, conditions: [condition] });
+        return response.features ?? [];
+    }, [api, layerName, limit]);
+    const loadLevelOne = React.useCallback(async () => {
+        if (!attributeLevel) {
+            return [];
+        }
+        const features = await runQuery(buildLevelOneCondition(attributeLevel));
+        return features.map(mapNode);
+    }, [attributeLevel, runQuery, mapNode]);
+    const loadChildren = React.useCallback(async (item) => {
+        if (!attributeParentName) {
+            return { children: [] };
+        }
+        const features = await runQuery(buildChildrenCondition(attributeParentName, item.data.name));
+        return { children: features.map(mapNode) };
+    }, [attributeParentName, runQuery, mapNode]);
+    const searchNodes = React.useCallback(async (query) => {
+        const features = await runQuery(buildSearchCondition(attributeAlias, query));
+        return features.map(mapNode);
+    }, [attributeAlias, runQuery, mapNode]);
+    const loadByNames = React.useCallback(async (names) => {
+        if (!names.length) {
+            return [];
+        }
+        const features = await runQuery(buildNamesCondition(attributeName, names));
+        return features.map(mapNode);
+    }, [attributeName, runQuery, mapNode]);
+    const loadByValues = React.useCallback(async (values) => {
+        if (!values.length) {
+            return [];
+        }
+        const features = await runQuery(buildValuesCondition(valueAttribute, values));
+        return features.map(mapNode);
+    }, [valueAttribute, runQuery, mapNode]);
+    return { configFilter, layerName, loadLevelOne, loadChildren, searchNodes, loadByNames, loadByValues };
+};
+
+const SEARCH_MIN_LENGTH = 3;
+const SEARCH_DEBOUNCE = 300;
+const useTreeFilterSearch = ({ searchNodes, loadByNames }) => {
+    const [searchValue, setSearchValue] = React.useState("");
+    const [searchData, setSearchData] = React.useState([]);
+    const [searchExpanded, setSearchExpanded] = React.useState([]);
+    const [searching, setSearching] = React.useState(false);
+    const timer = React.useRef();
+    const requestId = React.useRef(0);
+    const isSearchActive = searchValue.trim().length >= SEARCH_MIN_LENGTH;
+    const runSearch = React.useCallback(async (query) => {
+        const id = ++requestId.current;
+        setSearching(true);
+        try {
+            const results = await searchNodes(query);
+            const withAncestors = await collectAncestors(results, loadByNames);
+            const { roots, expanded } = assembleTree(withAncestors);
+            if (id !== requestId.current) {
+                return;
+            }
+            setSearchData(roots);
+            setSearchExpanded(expanded);
+        }
+        finally {
+            if (id === requestId.current) {
+                setSearching(false);
+            }
+        }
+    }, [searchNodes, loadByNames]);
+    const clearSearchState = React.useCallback(() => {
+        requestId.current++;
+        setSearchData([]);
+        setSearchExpanded([]);
+        setSearching(false);
+    }, []);
+    const onSearchChange = React.useCallback((value) => {
+        setSearchValue(value);
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+        const query = value.trim();
+        if (query.length < SEARCH_MIN_LENGTH) {
+            clearSearchState();
+            return;
+        }
+        timer.current = setTimeout(() => runSearch(query), SEARCH_DEBOUNCE);
+    }, [runSearch, clearSearchState]);
+    const resetSearch = React.useCallback(() => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+        setSearchValue("");
+        clearSearchState();
+    }, [clearSearchState]);
+    return {
+        searchValue,
+        isSearchActive,
+        searching,
+        searchData,
+        setSearchData,
+        searchExpanded,
+        setSearchExpanded,
+        onSearchChange,
+        resetSearch,
+    };
+};
+
+const useTreeFilterSelection = (type, filterName, configFilter) => {
+    const { filters, changeFilters } = useWidgetContext(type);
+    const [selected, setSelected] = React.useState(() => parseFilterValue(configFilter?.defaultValue));
+    const [selectedLabel, setSelectedLabel] = React.useState();
+    const selectedIds = React.useMemo(() => new Set(selected.keys()), [selected]);
+    /** Уже применённый (в redux) выбор — база для `dirty`. */
+    const committed = React.useMemo(() => parseFilterValue((filters[filterName]?.value ?? configFilter?.defaultValue)), [filters, filterName, configFilter?.defaultValue]);
+    const dirty = React.useMemo(() => serializeSelection(selected) !== serializeSelection(committed), [selected, committed]);
+    const commit = React.useCallback((next) => {
+        setSelected(next);
+        changeFilters({ [filterName]: { value: buildFilterValue(next) } }, configFilter?.resetFilters);
+    }, [changeFilters, filterName, configFilter?.resetFilters]);
+    const onToggleSelect = React.useCallback((item, multiSelect) => {
+        const level = item.data?.level ?? 1;
+        const next = new Map(selected);
+        if (next.has(item.id)) {
+            next.delete(item.id);
+            if (!multiSelect) {
+                setSelectedLabel(undefined);
+            }
+        }
+        else {
+            if (!multiSelect) {
+                next.clear();
+                setSelectedLabel(item.text);
+            }
+            next.set(item.id, level);
+        }
+        // Мультивыбор не коммитит в redux — сохранение по кнопке (onSave). Single — сразу.
+        if (multiSelect) {
+            setSelected(next);
+        }
+        else {
+            commit(next);
+        }
+    }, [selected, commit]);
+    const onSave = React.useCallback(() => {
+        changeFilters({ [filterName]: { value: buildFilterValue(selected) } }, configFilter?.resetFilters);
+    }, [changeFilters, filterName, selected, configFilter?.resetFilters]);
+    const onReset = React.useCallback(() => {
+        setSelectedLabel(undefined);
+        commit(new Map());
+    }, [commit]);
+    const initRef = React.useRef(false);
+    React.useEffect(() => {
+        if (initRef.current) {
+            return;
+        }
+        initRef.current = true;
+        if (selected.size && filters[filterName] === undefined) {
+            changeFilters({ [filterName]: { value: buildFilterValue(selected) } });
+        }
+    }, [filters, filterName, changeFilters, selected]);
+    return { selected, selectedIds, selectedLabel, dirty, onToggleSelect, onReset, onSave };
+};
+
+const useTreeFilterTree = ({ selected, loadLevelOne, loadByValues, loadByNames }) => {
+    const [treeData, setTreeData] = React.useState([]);
+    const [treeExpanded, setTreeExpanded] = React.useState([]);
+    const [loading, setLoading] = React.useState(false);
+    const loadedRef = React.useRef(false);
+    const selectedRef = React.useRef(selected);
+    selectedRef.current = selected;
+    const onOpen = React.useCallback(async () => {
+        if (loadedRef.current) {
+            return;
+        }
+        loadedRef.current = true;
+        setLoading(true);
+        try {
+            const roots = await loadLevelOne();
+            const preselected = [...selectedRef.current.keys()];
+            if (!preselected.length) {
+                setTreeData(roots);
+                return;
+            }
+            const selectedNodes = await loadByValues(preselected);
+            const withAncestors = await collectAncestors([...roots, ...selectedNodes], loadByNames);
+            const { roots: assembled, expanded } = assembleTree(withAncestors);
+            setTreeData(assembled);
+            setTreeExpanded(expanded);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [loadLevelOne, loadByValues, loadByNames]);
+    return { treeData, setTreeData, treeExpanded, setTreeExpanded, loading, onOpen };
+};
+
+const useTreeFilter = (type, filter) => {
+    const { filterName, multiSelect, placeholder, width } = filter.options ?? {};
+    const { configFilter, loadLevelOne, loadChildren, searchNodes, loadByNames, loadByValues } = useTreeFilterData(type, filterName ?? "");
+    const { selected, selectedIds, selectedLabel, dirty, onToggleSelect: toggleSelect, onReset, onSave, } = useTreeFilterSelection(type, filterName ?? "", configFilter);
+    const { treeData, setTreeData, treeExpanded, setTreeExpanded, loading, onOpen } = useTreeFilterTree({
+        selected,
+        loadLevelOne,
+        loadByValues,
+        loadByNames,
+    });
+    const search = useTreeFilterSearch({ searchNodes, loadByNames });
+    const onToggleSelect = React.useCallback(item => toggleSelect(item, multiSelect), [toggleSelect, multiSelect]);
+    const onClose = React.useCallback(() => search.resetSearch(), [search]);
+    const view = React.useMemo(() => search.isSearchActive
+        ? { data: search.searchData, setData: search.setSearchData, expanded: search.searchExpanded, setExpanded: search.setSearchExpanded }
+        : { data: treeData, setData: setTreeData, expanded: treeExpanded, setExpanded: setTreeExpanded }, [search.isSearchActive, search.searchData, search.setSearchData, search.searchExpanded, search.setSearchExpanded, treeData, setTreeData, treeExpanded, setTreeExpanded]);
+    return {
+        width: width ? `${width}px` : undefined,
+        placeholder,
+        multiSelect,
+        loading: loading || search.searching,
+        data: view.data,
+        setData: view.setData,
+        expanded: view.expanded,
+        setExpanded: view.setExpanded,
+        onLoadChildren: loadChildren,
+        selectedIds,
+        selectedCount: selectedIds.size,
+        selectedLabel,
+        searchValue: search.searchValue,
+        onSearchChange: search.onSearchChange,
+        onOpen,
+        onClose,
+        onToggleSelect,
+        onReset,
+        onSave,
+        dirty,
+    };
+};
+
+const TreeFilter = ({ type, filter }) => {
+    const { width, placeholder, multiSelect, loading, data, setData, expanded, setExpanded, onLoadChildren, selectedIds, selectedCount, selectedLabel, searchValue, onSearchChange, onOpen, onClose, onToggleSelect, onReset, onSave, dirty, } = useTreeFilter(type, filter);
+    return (jsxRuntime.jsx(uilibGl.TreeDropdown, { zIndex: 100, width: width, placeholder: placeholder, multiSelect: multiSelect, loading: loading, data: data, setData: setData, expanded: expanded, setExpanded: setExpanded, onLoadChildren: onLoadChildren, selectedIds: selectedIds, selectedCount: selectedCount, selectedLabel: selectedLabel, searchValue: searchValue, onSearchChange: onSearchChange, onOpen: onOpen, onClose: onClose, onToggleSelect: onToggleSelect, onReset: onReset, onSave: onSave, dirty: dirty }));
+};
+
 const getFilterComponent = (filterType) => {
     switch (filterType) {
         case "checkbox":
@@ -11433,6 +11825,8 @@ const getFilterComponent = (filterType) => {
             return TextFilter;
         case "chips":
             return ChipsFilter;
+        case "tree":
+            return TreeFilter;
         case "dropdown":
         default:
             return DropdownFilter;
@@ -12405,11 +12799,18 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
     ]);
     const getUpdatingDataSources = React.useCallback(() => {
         const diffFilterNames = filters
-            ? Object.keys(filters).filter(key => Array.isArray(filters[key].value)
-                ? filters[key].value.length !==
-                    prevFilters.current[key]?.value?.length ||
-                    filters[key].value.some((item, index) => item !== prevFilters.current[key]?.value?.[index])
-                : filters[key].value !== prevFilters.current[key]?.value)
+            ? Object.keys(filters).filter(key => {
+                const { value } = filters[key];
+                const prevValue = prevFilters.current[key]?.value;
+                if (isTreeFilterValue(value) || isTreeFilterValue(prevValue)) {
+                    return JSON.stringify(value) !== JSON.stringify(prevValue);
+                }
+                if (Array.isArray(value)) {
+                    return (value.length !== prevValue?.length ||
+                        value.some((item, index) => item !== prevValue?.[index]));
+                }
+                return value !== prevValue;
+            })
             : [];
         if (!diffFilterNames.length)
             return;
@@ -14109,6 +14510,7 @@ exports.addDataSources = addDataSources;
 exports.adjustColor = adjustColor;
 exports.applyFiltersToCondition = applyFiltersToCondition;
 exports.applyQueryFilters = applyQueryFilters;
+exports.applyTreeFilterToCondition = applyTreeFilterToCondition;
 exports.applyVarsToCondition = applyVarsToCondition;
 exports.asAttributeName = asAttributeName;
 exports.asChartId = asChartId;
@@ -14193,6 +14595,7 @@ exports.isNotValidSelectedTab = isNotValidSelectedTab;
 exports.isNumeric = isNumeric;
 exports.isObject = isObject;
 exports.isProxyService = isProxyService;
+exports.isTreeFilterValue = isTreeFilterValue;
 exports.isVisibleContainer = isVisibleContainer;
 exports.metersPerPixel = metersPerPixel;
 exports.numberOptions = numberOptions;