@evergis/react 3.1.124 → 3.1.126-alpha.0

package/dist/index.js

@@ -4264,11 +4264,11 @@ const getDataSource = (dataSourceName, dataSources) => dataSources?.find(({ name
 const getDataSourceFilterValue = ({ filterName, filterProp, attributeAlias, dataSource, selectedFilters, }) => {
     if (lodash.isNil(selectedFilters[filterName]))
         return null;
-    const feature = dataSource?.features?.find(({ attributes }) => attributes[attributeAlias] ===
+    const feature = dataSource?.features?.find(({ properties }) => properties[attributeAlias] ===
         (Array.isArray(selectedFilters[filterName].value)
             ? selectedFilters[filterName].value[0]
             : selectedFilters[filterName].value));
-    return feature?.attributes?.[filterProp];
+    return feature?.properties?.[filterProp];
 };
 
 const getSelectedFilterValue = (filterName, selectedFilters, defaultValue) => {
@@ -4386,9 +4386,12 @@ const createConfigPage = (props) => {
 };
 
 const getAttributesConfiguration = (layer) => {
-    const configuration = layer?.configuration ?? {};
+    const configuration = layer?.configuration ??
+        {};
     const emptyAttributesConfiguration = {
-        geometryAttribute: layer?.geometryType === api.GeometryType.Unknown ? undefined : GEOMETRY_ATTRIBUTE,
+        geometryAttribute: layer?.geometryType === api.OgcGeometryType.Unknown
+            ? undefined
+            : GEOMETRY_ATTRIBUTE,
         idAttribute: DEFAULT_ID_ATTRIBUTE_NAME,
         tableName: "",
     };
@@ -4397,7 +4400,8 @@ const getAttributesConfiguration = (layer) => {
     }
     return {
         ...emptyAttributesConfiguration,
-        ...(configuration.attributesConfiguration || {}),
+        ...(configuration
+            .attributesConfiguration || {}),
     };
 };
 
@@ -4407,7 +4411,7 @@ const getLayerDefinition = (layer) => {
         attributes: {},
         geometryAttribute,
         idAttribute,
-        geometryType: api.GeometryType.Unknown,
+        geometryType: api.OgcGeometryType.Unknown,
         titleAttribute: "",
     };
     if (!isLayerService(layer) || !("layerDefinition" in layer)) {
@@ -5185,73 +5189,6 @@ const useRedrawLayer = () => {
     }, [map]);
 };
 
-const findAttributeInExpression = (expression) => {
-    if (Array.isArray(expression) && expression.length === 2 && expression[0] === "get") {
-        return [expression[1]];
-    }
-    return expression.reduce((acc, curr) => {
-        if (!Array.isArray(curr)) {
-            return acc;
-        }
-        if (curr[0] === "get") {
-            return [...new Set([...acc, curr[1]])];
-        }
-        return [...new Set([...acc, ...findAttributeInExpression(curr)])];
-    }, []);
-};
-
-const getActualExtrusionHeight = (paint) => {
-    return Array.isArray(paint?.["fill-extrusion-height"]) && paint?.["fill-extrusion-height"][0] === "+"
-        ? paint?.["fill-extrusion-height"][1]
-        : paint?.["fill-extrusion-height"];
-};
-
-const extractAttributesFromObject = (obj) => {
-    if (!obj || lodash.isEmpty(obj)) {
-        return [];
-    }
-    return Object.entries(obj).reduce((acc, [, value]) => {
-        if (!Array.isArray(value)) {
-            return acc;
-        }
-        return [...new Set([...acc, ...findAttributeInExpression(value)])];
-    }, []);
-};
-const parseClientStyle = (style) => {
-    if (!style) {
-        return [];
-    }
-    return style?.items?.reduce((acc, curr) => {
-        const paintAttributes = extractAttributesFromObject(curr.paint);
-        const layoutAttributes = extractAttributesFromObject(curr.layout);
-        const filterAttributes = curr.filter
-            ? findAttributeInExpression(curr.filter)
-            : [];
-        return [...new Set([...acc, ...paintAttributes, ...layoutAttributes, ...filterAttributes])];
-    }, []);
-};
-
-const convertSpToTurfFeature = (geometry) => {
-    if (!geometry) {
-        return;
-    }
-    switch (geometry.type) {
-        case api.GeometryType.Point:
-            return turf.point(geometry.coordinates);
-        case api.GeometryType.Multipoint:
-            return turf.multiPoint(geometry.coordinates);
-        case api.GeometryType.Polyline:
-            return turf.multiLineString(geometry.coordinates);
-        case api.GeometryType.Polygon:
-        case api.GeometryType.Envelope:
-            return turf.polygon(geometry.coordinates);
-        case api.GeometryType.MultiPolygon:
-            return turf.multiPolygon(geometry.coordinates);
-        case api.GeometryType.GeometryCollection:
-            return turf.geometryCollection(geometry.geometries);
-    }
-};
-
 const useZoomToFeatures = () => {
     const { map } = useMapContext();
     return React.useCallback((features, padding) => {
@@ -5260,7 +5197,7 @@ const useZoomToFeatures = () => {
         }
         const currentFeatureCenter = turf.bbox({
             type: "FeatureCollection",
-            features: features.map(feature => convertSpToTurfFeature(feature.geometry)),
+            features: features,
         });
         map.current.fitBounds(currentFeatureCenter, { padding: padding ?? 150 });
     }, [map]);
@@ -5918,9 +5855,9 @@ function getValueIndex(items, attributes) {
 const getChartMarkers = (items, markers, dataSources) => {
     if (typeof markers === "string") {
         const dataSource = getDataSource(markers, dataSources);
-        return dataSource?.features?.map(({ attributes }) => ({
-            ...attributes,
-            value: getValueIndex(items, attributes),
+        return dataSource?.features?.map(({ properties }) => ({
+            ...properties,
+            value: getValueIndex(items, properties),
         })) || [];
     }
     return (markers?.map(marker => ({
@@ -6087,8 +6024,8 @@ const useRenderContainerItem = (type, renderElement) => {
     return React.useCallback((elementConfig, attribute) => {
         const { id, options, style, children } = elementConfig || {};
         const { hideEmpty, innerTemplateStyle } = options || {};
-        const hasUnits = children?.some(({ id }) => id === "units");
-        const iconIndex = children?.findIndex(({ id }) => id === "icon");
+        const hasUnits = children?.some(item => item.id === "units");
+        const iconIndex = children?.findIndex(item => item.id === "icon");
         const icon = children?.[iconIndex];
         const hasIcon = !!icon;
         const elementChildren = elementConfig?.children?.map(child => ({
@@ -6357,19 +6294,19 @@ const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, i
     const totalUnits = React.useMemo(() => unitsElement?.type === "attributeUnits"
         ? attributes?.find(({ attributeName }) => attributeName === unitsElement.attributeName)?.stringFormat
             ?.unitsLabel
-        : dataSource?.features?.[0]?.attributes[unitsElement?.attributeName], [attributes, dataSource?.features, unitsElement?.attributeName, unitsElement?.type]);
+        : dataSource?.features?.[0]?.properties[unitsElement?.attributeName], [attributes, dataSource?.features, unitsElement?.attributeName, unitsElement?.type]);
     const totalValue = React.useMemo(() => {
         const attribute = attributes?.find(({ attributeName }) => attributeName === valueElement?.attributeName);
         const { type: attributeType, stringFormat } = attribute || {};
-        const result = dataSource?.features?.reduce((total, feature) => total + feature.attributes[valueElement?.attributeName], 0);
+        const result = dataSource?.features?.reduce((total, feature) => total + feature.properties[valueElement?.attributeName], 0);
         return formatAttributeValue({ t, type: attributeType, value: result, stringFormat, noUnits: !!unitsElement?.type });
     }, [attributes, dataSource?.features, unitsElement?.type, valueElement?.attributeName]);
     const currentMaxValue = React.useMemo(() => {
         if (typeof maxValue === "string") {
-            return dataSource?.features?.[0]?.attributes[maxValue];
+            return dataSource?.features?.[0]?.properties[maxValue];
         }
         return (maxValue ||
-            dataSource?.features?.reduce((result, item) => Math.max(result, item.attributes[valueElement?.attributeName]), 0));
+            dataSource?.features?.reduce((result, item) => Math.max(result, item.properties[valueElement?.attributeName]), 0));
     }, [dataSource?.features, maxValue, valueElement?.attributeName]);
     if (!relatedDataSource)
         return null;
@@ -7391,24 +7328,28 @@ const EditContainer = ({ type, elementConfig, renderElement }) => {
 const getControlTemplateName = (type) => {
     switch (type) {
         case "dropdown":
-        default: return exports.ContainerTemplate.EditDropdown;
+        default:
+            return exports.ContainerTemplate.EditDropdown;
     }
 };
 
 const EditGroupContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { config, attributes, layerInfo, expandedContainers } = useWidgetContext(type);
     const getRenderContainerItem = useRenderContainerItem(type, renderElement);
-    const { id, options } = elementConfig || {};
-    const { editAttributes } = options || {};
+    const { options } = elementConfig || {};
+    const { controls } = options || {};
     const renderContainer = React.useCallback((attribute) => {
-        const editAttribute = editAttributes?.find(({ name }) => name === attribute);
+        const control = controls?.find(({ targetAttributeName }) => targetAttributeName === attribute);
         const itemAttribute = attributes.find(({ name }) => name === attribute);
-        const templateName = editAttribute?.type
-            ? getControlTemplateName(editAttribute.type)
+        const templateName = control?.type
+            ? getControlTemplateName(control.type)
             : getTemplateNameFromAttribute(itemAttribute);
         const itemConfig = {
             ...elementConfig,
-            children: elementConfig.children.map(child => ({ ...child, attributeName: attribute })),
+            children: elementConfig.children.map(child => ({
+                ...child,
+                attributeName: attribute,
+            })),
             templateName,
         };
         const { expandable, expanded } = elementConfig.options;
@@ -7418,72 +7359,84 @@ const EditGroupContainer = React.memo(({ type, elementConfig, renderElement }) =
             return null;
         }
         return (jsxRuntime.jsx(ContainerTemplateValue, { id: attribute, type: type, config: config, elementConfig: itemConfig, layerInfo: layerInfo, attributes: attributes, innerComponent: getContainerComponent(templateName), isVisible: isVisibleContainer(id, expandable, expanded, expandedContainers), renderElement: render }, attribute));
-    }, [id, attributes, elementConfig, expandedContainers, editAttributes]);
-    return editAttributes?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: editAttributes.map(attribute => renderContainer(attribute.name)) })) : (renderContainer());
+    }, [
+        controls,
+        attributes,
+        elementConfig,
+        getRenderContainerItem,
+        type,
+        config,
+        layerInfo,
+        expandedContainers,
+    ]);
+    return controls?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: controls.map(({ targetAttributeName }) => renderContainer(targetAttributeName)) })) : (renderContainer());
 });
 
-const useEditAttribute = (type, elementConfig) => {
+const useEditControl = (type, elementConfig) => {
     const { attributes, controls, dataSources } = useWidgetContext(type);
     const { children, options } = elementConfig || {};
-    const { editAttributes } = options || {};
-    const attributeName = React.useMemo(() => {
-        const valueElement = children.find(({ id }) => id === "value");
-        return valueElement?.attributeName;
-    }, [children]);
-    const editAttribute = React.useMemo(() => editAttributes?.find(({ name }) => name === attributeName), [editAttributes, attributeName]);
-    const attributeValue = React.useMemo(() => {
-        const value = controls[attributeName] === undefined
-            ? attributes.find(({ name }) => name === attributeName)?.value
-            : controls[attributeName];
-        return value ?? editAttribute.defaultValue;
-    }, [controls, attributeName, attributes, editAttribute.defaultValue]);
-    const dataSource = React.useMemo(() => dataSources?.find(({ name }) => name === editAttribute.relatedDataSource), [editAttributes, attributeName, dataSources]);
-    return React.useMemo(() => ({ editAttribute, attributeValue, dataSource }), [editAttribute, attributeValue, dataSource]);
+    const { controls: controlsOption } = options || {};
+    const valueElement = React.useMemo(() => children.find(({ id }) => id === "value"), [children]);
+    const control = React.useMemo(() => controlsOption?.find(item => item.targetAttributeName === valueElement.attributeName), [controlsOption, valueElement.attributeName]);
+    const value = React.useMemo(() => {
+        const currentValue = controls[control?.targetAttributeName] === undefined
+            ? attributes.find(({ name }) => name === control.targetAttributeName)
+                ?.value
+            : controls[control?.targetAttributeName];
+        return currentValue ?? control?.defaultValue;
+    }, [
+        controls,
+        control.targetAttributeName,
+        control?.defaultValue,
+        attributes,
+    ]);
+    const dataSource = React.useMemo(() => dataSources?.find(({ name }) => name === control.relatedDataSource), [control.relatedDataSource, dataSources]);
+    return React.useMemo(() => ({ control, value, dataSource }), [control, value, dataSource]);
 };
 
 const BASE_STYLE$2 = {
     marginBottom: "1rem",
 };
-const EditBooleanContainer = ({ type, elementConfig, renderElement }) => {
+const EditBooleanContainer = ({ type, elementConfig, renderElement, }) => {
     const { changeControls } = useWidgetContext(type);
-    const { editAttribute, attributeValue } = useEditAttribute(type, elementConfig);
+    const { control, value } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE$2, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { children: [jsxRuntime.jsx(uilibGl.Checkbox, { label: "\u0414\u0430", checked: !!attributeValue, onChange: () => {
-                            changeControls({ [editAttribute.name]: true });
-                        } }), jsxRuntime.jsx(uilibGl.Checkbox, { label: "\u041D\u0435\u0442", checked: !attributeValue, onChange: () => {
-                            changeControls({ [editAttribute.name]: false });
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE$2, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { children: [jsxRuntime.jsx(uilibGl.Checkbox, { label: "\u0414\u0430", checked: !!value, onChange: () => {
+                            changeControls({ [control.targetAttributeName]: true });
+                        } }), jsxRuntime.jsx(uilibGl.Checkbox, { label: "\u041D\u0435\u0442", checked: !value, onChange: () => {
+                            changeControls({ [control.targetAttributeName]: false });
                         } })] })] }));
 };
 
 const BASE_STYLE$1 = {
     marginBottom: "1rem",
 };
-const EditStringContainer = ({ type, elementConfig, renderElement }) => {
+const EditStringContainer = ({ type, elementConfig, renderElement, }) => {
     const { changeControls } = useWidgetContext(type);
-    const { editAttribute, attributeValue } = useEditAttribute(type, elementConfig);
+    const { control, value } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
     const onChange = React.useCallback((e) => {
-        changeControls({ [editAttribute.name]: e.target.value });
-    }, [changeControls, editAttribute.name]);
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE$1, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { children: jsxRuntime.jsx(uilibGl.Input, { value: attributeValue, width: "100%", onChange: onChange }) })] }));
+        changeControls({ [control?.targetAttributeName]: e.target.value });
+    }, [changeControls, control?.targetAttributeName]);
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE$1, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { children: jsxRuntime.jsx(uilibGl.Input, { value: value, width: "100%", onChange: onChange }) })] }));
 };
 
 const BASE_STYLE = {
     marginBottom: "1rem",
 };
-const EditDropdownContainer = ({ type, elementConfig, renderElement }) => {
+const EditDropdownContainer = ({ type, elementConfig, renderElement, }) => {
     const { changeControls } = useWidgetContext(type);
-    const { attributeValue, editAttribute, dataSource } = useEditAttribute(type, elementConfig);
+    const { value, control, dataSource } = useEditControl(type, elementConfig);
     const { id, style, options } = elementConfig || {};
     const { placeholder, label, width } = options || {};
     const optionsList = React.useMemo(() => dataSource?.features.map(item => {
-        const value = item.attributes[editAttribute?.name] || null;
-        return { text: value, value };
-    }), [dataSource?.features, editAttribute.name]);
+        const currentValue = item.properties[control?.attributeName] || null;
+        return { text: currentValue, value: currentValue };
+    }), [dataSource?.features, control?.attributeName]);
     const onChange = React.useCallback(([option]) => {
-        changeControls({ [editAttribute?.name]: option.value });
-    }, [editAttribute?.name, changeControls]);
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, label: label, placeholder: placeholder, options: optionsList, value: attributeValue ?? editAttribute.defaultValue, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, onChange: onChange }) })] }));
+        changeControls({ [control?.targetAttributeName]: option.value });
+    }, [control?.targetAttributeName, changeControls]);
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, label: label, placeholder: placeholder, options: optionsList, value: value, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, onChange: onChange }) })] }));
 };
 
 const ContainerDivider = styled(uilibGl.Divider) `
@@ -7820,12 +7773,12 @@ const LayerIcon = ({ layerInfo, error }) => {
             return (jsxRuntime.jsx(AlertIconContainer, { children: jsxRuntime.jsx(uilibGl.Icon, { kind: "warning" }) }));
         }
         switch (layerInfo.geometryType) {
-            case api.GeometryType.Polyline:
+            case api.OgcGeometryType.MultiLineString:
                 return jsxRuntime.jsx("img", { src: img$1, alt: "" });
-            case api.GeometryType.Polygon:
-            case api.GeometryType.MultiPolygon:
+            case api.OgcGeometryType.Polygon:
+            case api.OgcGeometryType.MultiPolygon:
                 return jsxRuntime.jsx("img", { src: img, alt: "" });
-            case api.GeometryType.Point:
+            case api.OgcGeometryType.Point:
             default:
                 return jsxRuntime.jsx("img", { src: img$2, alt: "" });
         }
@@ -8362,7 +8315,10 @@ const ElementControl = ({ elementConfig }) => {
     const { t } = useGlobalContext();
     const { attributes, layerInfo, dataSources, controls, changeControls } = useWidgetContext(exports.WidgetType.FeatureCard);
     const { options, attributeName, defaultValue } = elementConfig || {};
-    const { relatedDataSource, label, width, control, placeholder = t("selectValue", { ns: "dashboard", defaultValue: "Выберите значение" }) } = options || {};
+    const { relatedDataSource, label, width, control, placeholder = t("selectValue", {
+        ns: "dashboard",
+        defaultValue: "Выберите значение",
+    }), } = options || {};
     const attribute = React.useMemo(() => attributes?.find(({ name }) => name === control?.targetAttributeName), [attributes, control?.targetAttributeName]);
     const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [relatedDataSource, dataSources]);
     const items = React.useMemo(() => {
@@ -8370,14 +8326,17 @@ const ElementControl = ({ elementConfig }) => {
             return [];
         }
         return dataSource.features.map(item => ({
-            value: item.attributes?.[attributeName] || "",
-            text: item.attributes?.[control?.attributeAlias || attributeName] || "",
+            value: item.properties?.[attributeName] || "",
+            text: item.properties?.[control?.attributeName || attributeName] || "",
         }));
-    }, [control?.attributeAlias, dataSource?.features, attributeName]);
+    }, [control?.attributeName, dataSource?.features, attributeName]);
     const isDisabled = React.useMemo(() => {
         const attr = layerInfo?.configuration?.attributesConfiguration?.attributes?.find(item => item.attributeName === control?.targetAttributeName);
         return !attr?.isEditable;
-    }, [control?.targetAttributeName, layerInfo?.configuration?.attributesConfiguration?.attributes]);
+    }, [
+        control?.targetAttributeName,
+        layerInfo?.configuration?.attributesConfiguration?.attributes,
+    ]);
     const handleChange = React.useCallback(([option]) => {
         if (control?.targetAttributeName && changeControls) {
             changeControls({
@@ -8385,7 +8344,9 @@ const ElementControl = ({ elementConfig }) => {
             });
         }
     }, [changeControls, control?.targetAttributeName]);
-    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, label: label, options: items, value: controls?.[control?.targetAttributeName] ?? attribute?.value ?? defaultValue, placeholder: placeholder, disabled: isDisabled, onChange: handleChange }));
+    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, label: label, options: items, value: controls?.[control?.targetAttributeName] ??
+            attribute?.value ??
+            defaultValue, placeholder: placeholder, disabled: isDisabled, onChange: handleChange }));
 };
 
 const StyledIconFontSizeMixin = styled.css `
@@ -8699,7 +8660,7 @@ const ElementSlideshow = ({ elementConfig, type, renderElement }) => {
     const images = React.useMemo(() => {
         const dataSource = relatedDataSource ? dataSources?.find(({ name }) => name === relatedDataSource) : null;
         const array = dataSource
-            ? dataSource.features.map(feature => feature.attributes[attributeName])
+            ? dataSource.features.map(feature => feature.properties[attributeName])
             : getSlideshowImages({
                 element: elementConfig,
                 attribute: attributes?.find(({ name }) => name === attributeName),
@@ -8882,20 +8843,20 @@ const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSou
     }
     const { colors } = config.options;
     const layerDefinition = getLayerDefinition(layerInfo);
-    let data = JSON.parse(JSON.stringify(dataSource?.features));
+    let data = [...dataSource?.features];
     const sortAttribute = config?.options?.orderByValue
         ? relatedConfig.attributeName
         : config?.options?.orderByTitle
             ? relatedConfig.attributeTitle
             : null;
     if (sortAttribute) {
-        data.sort((a, b) => b.attributes[sortAttribute] - a.attributes[sortAttribute]);
+        data.sort((a, b) => b.properties[sortAttribute] - a.properties[sortAttribute]);
     }
     const isOtherSliced = config?.options?.otherItems && config.options.otherItems < data.length;
     const otherValue = isOtherSliced
         ? data
             .slice(config.options.otherItems)
-            .reduce((prev, { attributes }) => prev + attributes[relatedConfig.attributeName], 0)
+            .reduce((prev, { properties }) => prev + properties[relatedConfig.attributeName], 0)
         : null;
     if (isOtherSliced) {
         data = data.slice(0, config?.options?.otherItems);
@@ -8911,9 +8872,9 @@ const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSou
         if (relatedConfig?.filterName && !filter) {
             return acc;
         }
-        const attributeName = feature.attributes[relatedConfig.attributeName];
-        const attributeTitle = feature.attributes[relatedConfig.attributeTitle];
-        const attributeColor = feature.attributes[relatedConfig.attributeColor];
+        const attributeName = feature.properties[relatedConfig.attributeName];
+        const attributeTitle = feature.properties[relatedConfig.attributeTitle];
+        const attributeColor = feature.properties[relatedConfig.attributeColor];
         return [
             ...acc,
             {
@@ -8925,8 +8886,8 @@ const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSou
                 }),
                 value: attributeName === null ? null : Number(attributeName),
                 color: attributeColor || gradientArray?.[index] || FEATURE_CARD_OTHER_COLOR,
-                min: filter?.attributeMin ? feature.attributes[filter.attributeMin] : null,
-                max: filter?.attributeMin ? feature.attributes[filter.attributeMax] : null
+                min: filter?.attributeMin ? feature.properties[filter.attributeMin] : null,
+                max: filter?.attributeMin ? feature.properties[filter.attributeMax] : null
             }
         ];
     }, []);
@@ -9092,7 +9053,7 @@ function getFeatureAttributes(feature = {}, layer, dataSource) {
     if (!layerDefinition) {
         return [];
     }
-    const currentAttributes = !feature && dataSource ? dataSource.features[0].attributes : feature?.attributes;
+    const currentAttributes = !feature && dataSource ? dataSource.features[0].properties : feature?.properties;
     const { id: idValue } = feature || {};
     const { idAttribute, attributes } = layerDefinition || {};
     const layerAttributes = idAttribute
@@ -9109,7 +9070,7 @@ function getFeatureAttributes(feature = {}, layer, dataSource) {
                 readOnly: true,
             }
             : {
-                value: currentAttributes?.[attributeName] || dataSource?.features?.[0]?.attributes?.[attributeName],
+                value: currentAttributes?.[attributeName] || dataSource?.features?.[0]?.properties?.[attributeName],
                 readOnly: isCalculated || !isEditable,
             };
         const clientData = layer.layerAttributes?.find(layerAttribute => layerAttribute.attributeName === attributeName)?.clientData;
@@ -9281,10 +9242,10 @@ const getListOptions = (items, filterName, configFilters) => {
     if (!filter)
         return [];
     return (items?.map(item => ({
-        text: item.attributes[filter.attributeAlias || DEFAULT_ATTRIBUTE_NAME],
-        value: item.attributes[filter.attributeValue || DEFAULT_ATTRIBUTE_NAME],
-        min: filter.attributeMin ? item.attributes[filter.attributeMin] : null,
-        max: filter.attributeMax ? item.attributes[filter.attributeMax] : null,
+        text: item.properties[filter.attributeAlias || DEFAULT_ATTRIBUTE_NAME],
+        value: item.properties[filter.attributeValue || DEFAULT_ATTRIBUTE_NAME],
+        min: filter.attributeMin ? item.properties[filter.attributeMin] : null,
+        max: filter.attributeMax ? item.properties[filter.attributeMax] : null,
     })) || []);
 };
 
@@ -9596,8 +9557,8 @@ const RangeDateFilter = ({ type, filter }) => {
     const { filterName, label, minValue, maxValue, withTime } = filter.options;
     const configFilter = React.useMemo(() => getConfigFilter(filterName, configFilters), [configFilters, filterName]);
     const dataSource = React.useMemo(() => getDataSource(configFilter?.relatedDataSource, dataSources), [configFilter?.relatedDataSource, dataSources]);
-    const { minFromData, maxFromData } = React.useMemo(() => dataSource?.features?.reduce((prev, { attributes }) => {
-        const date = getDate(attributes[configFilter?.attributeValue]);
+    const { minFromData, maxFromData } = React.useMemo(() => dataSource?.features?.reduce((prev, { properties }) => {
+        const date = getDate(properties[configFilter?.attributeValue]);
         return {
             minFromData: !prev.minFromData ? date : date < prev.minFromData ? date : prev.minFromData,
             maxFromData: !prev.maxFromData ? date : date > prev.maxFromData ? date : prev.maxFromData
@@ -9818,7 +9779,7 @@ const ChipsFilter = ({ type, filter, elementConfig, }) => {
             return [];
         const features = dataSource.features;
         return features.map(feature => {
-            const attrs = feature.attributes;
+            const attrs = feature.properties;
             const text = attrs[configFilter.attributeAlias || DEFAULT_ATTRIBUTE_NAME];
             const value = attrs[configFilter.attributeValue || DEFAULT_ATTRIBUTE_NAME];
             const chipIcon = iconAttribute
@@ -10523,7 +10484,7 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
             const queryResponse = await api.eql.getPagedQueryResult({ saveInHistory: false }, getProps);
             const descriptionResponse = await api.eql.getQueryDescription(getProps);
             return {
-                items: queryResponse.items,
+                items: queryResponse.features,
                 attributeDefinition: descriptionResponse,
             };
         }
@@ -10571,7 +10532,7 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
                 !!currentDataSources[index].url ||
                 !!currentDataSources[index].resourceId;
             newDataSources[index].layerName = currentDataSources[index].layerName;
-            const items = response.status === "rejected" ? null : response.value?.items || response.items;
+            const items = response.status === "rejected" ? null : response.value?.features || response.items;
             newDataSources[index].features =
                 response.status === "rejected"
                     ? null
@@ -11002,7 +10963,7 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
                     const attribute = layerInfo?.layerDefinition.attributes[attributeName];
                     const dataSource = getDataSource(dataSourceName, dataSources);
                     const units = attributeUnits
-                        ? dataSource?.features?.[0]?.attributes?.[attributeUnits]
+                        ? dataSource?.features?.[0]?.properties?.[attributeUnits]
                         : attribute?.stringFormat?.unitsLabel;
                     const formatValue = attribute
                         ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat, noUnits: true })
@@ -11570,22 +11531,22 @@ const RasterLayer = ({ layer, tileUrl, visible, beforeId, filterVersion, }) => {
 
 const getClientStyleItemPrefixSuffix = (geometryType, itemType) => {
     switch (geometryType) {
-        case api.GeometryType.Point:
+        case api.OgcGeometryType.Point:
             switch (itemType) {
                 case "symbol":
                     return ["point-label-layer-", "-label"];
                 default:
                     return ["point-layer-", ""];
             }
-        case api.GeometryType.Polyline:
+        case api.OgcGeometryType.MultiLineString:
             switch (itemType) {
                 case "symbol":
                     return ["polyline-label-layer-", "-label"];
                 default:
                     return ["polyline-layer-", ""];
             }
-        case api.GeometryType.Polygon:
-        case api.GeometryType.MultiPolygon:
+        case api.OgcGeometryType.Polygon:
+        case api.OgcGeometryType.MultiPolygon:
             switch (itemType) {
                 case "line":
                     return ["polygon-stroke-layer-", "-stroke"];
@@ -11601,6 +11562,52 @@ const getClientStyleItemPrefixSuffix = (geometryType, itemType) => {
     }
 };
 
+const findAttributeInExpression = (expression) => {
+    if (Array.isArray(expression) && expression.length === 2 && expression[0] === "get") {
+        return [expression[1]];
+    }
+    return expression.reduce((acc, curr) => {
+        if (!Array.isArray(curr)) {
+            return acc;
+        }
+        if (curr[0] === "get") {
+            return [...new Set([...acc, curr[1]])];
+        }
+        return [...new Set([...acc, ...findAttributeInExpression(curr)])];
+    }, []);
+};
+
+const getActualExtrusionHeight = (paint) => {
+    return Array.isArray(paint?.["fill-extrusion-height"]) && paint?.["fill-extrusion-height"][0] === "+"
+        ? paint?.["fill-extrusion-height"][1]
+        : paint?.["fill-extrusion-height"];
+};
+
+const extractAttributesFromObject = (obj) => {
+    if (!obj || lodash.isEmpty(obj)) {
+        return [];
+    }
+    return Object.entries(obj).reduce((acc, [, value]) => {
+        if (!Array.isArray(value)) {
+            return acc;
+        }
+        return [...new Set([...acc, ...findAttributeInExpression(value)])];
+    }, []);
+};
+const parseClientStyle = (style) => {
+    if (!style) {
+        return [];
+    }
+    return style?.items?.reduce((acc, curr) => {
+        const paintAttributes = extractAttributesFromObject(curr.paint);
+        const layoutAttributes = extractAttributesFromObject(curr.layout);
+        const filterAttributes = curr.filter
+            ? findAttributeInExpression(curr.filter)
+            : [];
+        return [...new Set([...acc, ...paintAttributes, ...layoutAttributes, ...filterAttributes])];
+    }, []);
+};
+
 const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, filterVersion, }) => {
     const clientStyle = layer?.configuration?.clientStyle;
     const { idAttribute, geometryType } = layer.layerDefinition || {};
@@ -11632,7 +11639,7 @@ const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, fil
     const renderLayerByGeometryType = React.useCallback(() => {
         const visibility = visible ? "visible" : "none";
         switch (geometryType) {
-            case api.GeometryType.Point:
+            case api.OgcGeometryType.Point:
                 return (jsxRuntime.jsx(MapGL.Layer, { id: layer.name, type: "circle", "source-layer": "default", beforeId: beforeId, layout: {
                         ...getLayerTempStyle?.(layer.name, "circle")?.layout,
                         visibility,
@@ -11640,8 +11647,8 @@ const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, fil
                         ...DEFAULT_CIRCLE_PAINT,
                         ...getLayerTempStyle?.(layer.name, "circle")?.paint,
                     } }));
-            case api.GeometryType.Polygon:
-            case api.GeometryType.MultiPolygon:
+            case api.OgcGeometryType.Polygon:
+            case api.OgcGeometryType.MultiPolygon:
                 return [
                     jsxRuntime.jsx(MapGL.Layer, { id: layer.name, type: "fill", "source-layer": "default", beforeId: beforeId, layout: {
                             ...getLayerTempStyle?.(layer.name, "fill")?.layout,
@@ -11679,7 +11686,7 @@ const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, fil
                             ...getLayerTempStyle?.(layer.name, "fill-extrusion")?.paint,
                         } }, `polygon-extrusion-layer-${layer.name}`),
                 ];
-            case api.GeometryType.Polyline:
+            case api.OgcGeometryType.MultiLineString:
                 return (jsxRuntime.jsx(MapGL.Layer, { id: layer.name, type: "line", "source-layer": "default", beforeId: beforeId, layout: {
                         ...getLayerTempStyle?.(layer.name, "line")?.layout,
                         visibility,
@@ -11950,7 +11957,6 @@ exports.applyQueryFilters = applyQueryFilters;
 exports.applyVarsToCondition = applyVarsToCondition;
 exports.checkEqualOrIncludes = checkEqualOrIncludes;
 exports.checkIsLoading = checkIsLoading;
-exports.convertSpToTurfFeature = convertSpToTurfFeature;
 exports.createConfigLayer = createConfigLayer;
 exports.createConfigPage = createConfigPage;
 exports.createNewPageId = createNewPageId;