@evergis/react 4.0.44 → 4.0.46

package/dist/index.js

@@ -12,14 +12,14 @@ var turf = require('@turf/turf');
 var dateFns = require('date-fns');
 var lodash = require('lodash');
 var locale = require('date-fns/locale');
-var signalr = require('@microsoft/signalr');
 var findAnd = require('find-and');
-var jspdf = require('jspdf');
-var html2canvas = require('html2canvas');
+var signalr = require('@microsoft/signalr');
 var MapboxDraw = require('@mapbox/mapbox-gl-draw');
 var MapGL = require('react-map-gl/maplibre');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 require('mapbox-gl/dist/mapbox-gl.css');
+var jspdf = require('jspdf');
+var html2canvas = require('html2canvas');
 var react = require('swiper/react');
 var ReactMarkdown = require('react-markdown');
 var rehypeRaw = require('rehype-raw');
@@ -3961,880 +3961,461 @@ const useAutoCompleteControl = (items) => {
     };
 };
 
-const useFetchWithAuth = (url, transform, cleanup) => {
-    const [data, setData] = React.useState(null);
-    const loadingRef = React.useRef(false);
-    const transformRef = React.useRef(transform);
-    const cleanupRef = React.useRef(cleanup);
-    transformRef.current = transform;
-    cleanupRef.current = cleanup;
-    const fetchData = React.useCallback(() => {
-        if (!url || loadingRef.current)
-            return;
-        loadingRef.current = true;
-        const token = window.localStorage.getItem(api.STORAGE_TOKEN_KEY);
-        fetch(url, {
-            headers: token ? { Authorization: `Bearer ${token}` } : {},
-        })
-            .then(res => (res.ok ? transformRef.current(res) : null))
-            .then(setData)
-            .catch(() => {
-            setData(null);
-        })
-            .finally(() => {
-            loadingRef.current = false;
-        });
-    }, [url]);
-    React.useEffect(() => {
-        if (url) {
-            fetchData();
-        }
-        else {
-            setData(null);
-        }
-    }, [url]);
-    React.useEffect(() => () => {
-        if (data !== null)
-            cleanupRef.current?.(data);
-    }, [data]);
-    return data;
-};
-
-const toObjectUrl = (res) => res.blob().then(blob => URL.createObjectURL(blob));
-const useFetchImageWithAuth = (url) => useFetchWithAuth(url, toObjectUrl, URL.revokeObjectURL);
+const eqlParametersToPayload = (parameters) => Object.keys(parameters).reduce((result, paramName) => ({
+    ...result,
+    [paramName]: parameters[paramName].default,
+}), {});
 
-const DashboardContext = React.createContext({});
-const DashboardProvider = React.memo(({ children, ...props }) => {
-    return jsxRuntime.jsx(DashboardContext.Provider, { value: props, children: children });
-});
+const addDataSource = (dashboardConfiguration, pageIndex, query, additional) => {
+    const newConfig = JSON.parse(JSON.stringify(dashboardConfiguration));
+    if (!newConfig.children[0].children[pageIndex].dataSources) {
+        newConfig.children[0].children[pageIndex].dataSources = [];
+    }
+    const freeId = newConfig.children[0].children[pageIndex].dataSources.length + 1;
+    const parameters = eqlParametersToPayload(additional.parameters);
+    newConfig.children[0].children[pageIndex].dataSources.push({
+        name: `datasource_${freeId}`,
+        query,
+        parameters,
+        offset: 0,
+        limit: DEFAULT_DATA_SOURCE_LIMIT,
+    });
+    return newConfig.children;
+};
 
-const FeatureCardContext = React.createContext({});
-const FeatureCardProvider = React.memo(({ children, ...props }) => {
-    return jsxRuntime.jsx(FeatureCardContext.Provider, { value: props, children: children });
-});
+const addDataSources = (dashboardConfiguration, pageIndex, layerNames) => {
+    const newConfig = JSON.parse(JSON.stringify(dashboardConfiguration));
+    if (!newConfig.children[0].children[pageIndex].dataSources) {
+        newConfig.children[0].children[pageIndex].dataSources = [];
+    }
+    layerNames.forEach(layerName => {
+        newConfig.children[0].children[pageIndex].dataSources.push({
+            name: layerName.split(".")[1],
+            layerName,
+            query: "",
+            parameters: {},
+        });
+    });
+    return newConfig.children;
+};
 
-const GlobalContext = React.createContext({});
-const GlobalProvider = React.memo(({ children, ...props }) => {
-    return jsxRuntime.jsx(GlobalContext.Provider, { value: props, children: children });
-});
+const getConfigFilter = (filterName, configFilters) => configFilters?.find(({ name }) => name === filterName);
 
-const MapContext = React.createContext({});
+const getDataSource = (dataSourceName, dataSources) => dataSources?.find(({ name }) => name === dataSourceName);
 
-const MapProvider = ({ basemapItems, defaultBasemap, children }) => {
-    const map = React.useRef();
-    const draw = React.useRef();
-    const [loaded, setLoaded] = React.useState(false);
-    const [basemapName, setBasemapName] = React.useState(defaultBasemap);
-    return (jsxRuntime.jsx(MapContext.Provider, { value: {
-            map,
-            draw,
-            loaded,
-            setLoaded,
-            basemapItems,
-            basemapName,
-            setBasemapName,
-            defaultBasemap,
-        }, children: children }));
+const getDataSourceFilterValue = ({ filterName, filterProp, attributeAlias, dataSource, selectedFilters, }) => {
+    if (lodash.isNil(selectedFilters[filterName]))
+        return null;
+    const feature = dataSource?.features?.find(({ properties }) => properties[attributeAlias] ===
+        (Array.isArray(selectedFilters[filterName].value)
+            ? selectedFilters[filterName].value[0]
+            : selectedFilters[filterName].value));
+    return feature?.properties?.[filterProp];
 };
 
-exports.BaseMapTheme = void 0;
-(function (BaseMapTheme) {
-    BaseMapTheme["Light"] = "light";
-    BaseMapTheme["Dark"] = "dark";
-})(exports.BaseMapTheme || (exports.BaseMapTheme = {}));
-
-const ServerNotificationsContext = React.createContext({});
+const getSelectedFilterValue = (filterName, selectedFilters, defaultValue) => {
+    return ((!lodash.isNil(selectedFilters?.[filterName]?.value) &&
+        Array.isArray(defaultValue) &&
+        !Array.isArray(selectedFilters[filterName].value)
+        ? [selectedFilters[filterName].value]
+        : selectedFilters?.[filterName]?.value) ?? defaultValue);
+};
 
-const useServerNotifications = (url, initialized, apiClient) => {
-    const hubConnection = React.useRef(null);
-    const [connection, setConnection] = React.useState(null);
-    const subscribeNotifications = React.useCallback(() => {
-        if (!connection || connection.state !== "Connected") {
-            return;
+const applyQueryFilters = ({ parameters: configParameters, filters: configFilters, selectedFilters, geometry, attributes, layerInfo, dataSources, projectDataSources, }) => {
+    if (!configParameters) {
+        return {};
+    }
+    return Object.keys(configParameters).reduce((result, key) => {
+        if (typeof configParameters[key] === "string" && configParameters[key].startsWith(PROVIDER_PREFIX)) {
+            const raw = configParameters[key].slice(PROVIDER_PREFIX.length);
+            const [provider, layerName, fieldName] = raw.split(":");
+            if (provider === exports.ProviderPrefix.Card && fieldName && layerInfo.name === layerName && attributes) {
+                const attribute = attributes.find(({ attributeName }) => attributeName === fieldName);
+                const cardValue = attribute?.value ?? null;
+                if (lodash.isNil(cardValue))
+                    return result;
+                return { ...result, [key]: cardValue };
+            }
+            if (provider === exports.ProviderPrefix.Left && layerName && fieldName && projectDataSources?.length) {
+                const dataSource = projectDataSources.find(({ layerName: name }) => name === layerName);
+                const leftValue = dataSource?.features?.[0]?.properties?.[fieldName] ?? null;
+                if (lodash.isNil(leftValue))
+                    return result;
+                return { ...result, [key]: leftValue };
+            }
+            return result;
         }
-        connection
-            .invoke("SubscribeNotifications", [])
-            .then(() => console.info("Подписка `SubscribeNotifications` оформлена"))
-            .catch(err => console.info("Ошибка подписки `SubscribeNotifications`:", err));
-    }, [connection]);
-    React.useEffect(() => {
-        if (!initialized) {
-            return;
+        if (typeof configParameters[key] === "string" && configParameters[key].includes("{") && attributes?.length) {
+            const exactAttr = attributes.find(({ attributeName }) => configParameters[key] === `{${attributeName}}`);
+            if (exactAttr) {
+                return { ...result, [key]: exactAttr.value ?? "" };
+            }
+            let interpolated = configParameters[key];
+            attributes.forEach(({ attributeName, value: attrValue }) => {
+                interpolated = interpolated.replace(new RegExp(`\\{${attributeName}\\}`, "g"), attrValue?.toString() ?? "");
+            });
+            return { ...result, [key]: interpolated };
         }
-        hubConnection.current = new signalr.HubConnectionBuilder()
-            .withUrl(`${url}?clientId=${api.generateId()}`, {
-            withCredentials: true,
-            skipNegotiation: true,
-            transport: signalr.HttpTransportType.WebSockets,
-            accessTokenFactory: async () => {
-                let accessToken = window.localStorage.getItem(api.STORAGE_TOKEN_KEY) || "";
-                const { exp } = api.parseJwt(accessToken);
-                const currentTime = new Date().getTime() / 1000;
-                if (currentTime > exp) {
-                    const refreshToken = window.localStorage.getItem(api.STORAGE_REFRESH_TOKEN_KEY);
-                    if (refreshToken) {
-                        const refreshTokenResponse = await apiClient.account.refreshToken({
-                            refreshToken,
-                        });
-                        if (refreshTokenResponse) {
-                            accessToken = refreshTokenResponse.token;
-                            window.localStorage.setItem(api.STORAGE_TOKEN_KEY, refreshTokenResponse.token);
-                            window.localStorage.setItem(api.STORAGE_REFRESH_TOKEN_KEY, refreshTokenResponse.refreshToken);
-                        }
-                    }
-                    else {
-                        await apiClient.logout();
-                    }
-                }
-                return accessToken;
-            },
-        })
-            .withAutomaticReconnect()
-            .configureLogging(signalr.LogLevel.Information)
-            .build();
-        hubConnection.current
-            .start()
-            .then(() => console.info("Серверные нотификации подключены"))
-            .catch(err => console.info("Ошибка:", err))
-            .finally(() => setConnection(hubConnection.current));
-    }, [initialized]); // eslint-disable-line
-    React.useEffect(() => {
-        if (!connection || connection.state !== "Connected") {
-            return;
+        if (typeof configParameters[key] !== "string" || !configParameters[key].startsWith("%")) {
+            return {
+                ...result,
+                [key]: configParameters[key],
+            };
         }
-        connection.onreconnecting(() => console.info("Переподключение к серверным нотификациям"));
-        connection.onreconnected(subscribeNotifications);
-        subscribeNotifications();
-    }, [connection]);
-    return connection;
-};
-
-const ServerNotificationsProvider = ({ url, initialized, apiClient, children }) => {
-    const connection = useServerNotifications(url, initialized, apiClient);
-    const addSubscription = React.useCallback(async (payload) => {
-        if (!connection || connection.state !== "Connected" || !payload) {
-            return;
+        const filterFullName = configParameters[key].replace("%", "");
+        const [filterName, filterProp] = filterFullName.includes(".") ? filterFullName.split(".") : [filterFullName, null];
+        const { defaultValue, relatedDataSource, attributeAlias } = getConfigFilter(filterName, configFilters) || {};
+        if (filterName === "geometry" && geometry && !geometry.includes("()") && geometry.endsWith(")")) {
+            return {
+                ...result,
+                [key]: geometry,
+            };
         }
-        try {
-            const id = await connection.invoke("AddSubscription", payload);
-            console.info("Подписка добавлена, id:", id);
-            return id;
+        if (configParameters[key].endsWith(".max")) {
+            return {
+                ...result,
+                [key]: selectedFilters?.[filterName]?.max ?? (Array.isArray(defaultValue) ? defaultValue[1] : defaultValue),
+            };
         }
-        catch (err) {
-            console.info("Ошибка добавления подписки:", err);
-            return Promise.resolve(null);
-        }
-    }, [connection]);
-    const updateSubscription = React.useCallback(async (id, payload) => {
-        if (!connection || connection.state !== "Connected" || !id || !payload) {
-            return;
-        }
-        try {
-            await connection.invoke("UpdateSubscription", id, payload);
-        }
-        catch (err) {
-            console.info(`Ошибка обновления подписки ${id}:`, err);
-        }
-    }, [connection]);
-    const unsubscribeById = React.useCallback(async (id) => {
-        if (!connection || connection.state !== "Connected" || !id) {
-            return;
+        if (configParameters[key].endsWith(".min")) {
+            return {
+                ...result,
+                [key]: selectedFilters?.[filterName]?.min ?? (Array.isArray(defaultValue) ? defaultValue[0] : defaultValue),
+            };
         }
-        try {
-            await connection.invoke("Unsubscribe", [id]);
+        if (configParameters[key].includes(".")) {
+            return {
+                ...result,
+                [key]: getDataSourceFilterValue({
+                    filterName,
+                    filterProp,
+                    selectedFilters,
+                    attributeAlias,
+                    dataSource: getDataSource(relatedDataSource, dataSources),
+                }) ?? defaultValue,
+            };
         }
-        catch (err) {
-            console.info(`Ошибка отписки по ${id}:`, err);
+        const value = getSelectedFilterValue(filterName, selectedFilters, defaultValue);
+        if (lodash.isNil(value)) {
+            return result;
         }
-    }, [connection]);
-    return (jsxRuntime.jsx(ServerNotificationsContext.Provider, { value: {
-            connection,
-            addSubscription,
-            updateSubscription,
-            unsubscribeById,
-        }, children: children }));
+        return {
+            ...result,
+            [key]: value,
+        };
+    }, {});
 };
 
-const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
-    const { toggleLayersVisibility, visibleLayers, projectInfo, updateProject, layerInfos, geometryFilter, dashboardLayers, setDashboardLayer, components: dashboardComponents, config: dashboardConfig, containerIds, pageIndex: projectPageIndex, selectedTabId: projectSelectedTabId, setSelectedTabId: setProjectSelectedTabId, dataSources: projectDataSources, loading: projectLoading, editMode: projectEditMode, filters: projectFilters, changeFilters: projectChangeFilters, expandContainer: projectExpandContainer, expandedContainers: projectExpandedContainers, nextPage: projectNextPage, prevPage: projectPrevPage, changePage: projectChangePage, } = React.useContext(DashboardContext) || {};
-    const { layerInfo, attributes, feature, controls, changeControls, closeFeatureCard, config: featureConfig, pageIndex: featurePageIndex, selectedTabId: featureSelectedTabId, setSelectedTabId: setFeatureSelectedTabId, dataSources: featureDataSources, loading: featureLoading, editMode: featureEditMode, filters: featureFilters, changeFilters: featureChangeFilters, expandContainer: featureExpandContainer, expandedContainers: featureExpandedContainers, nextPage: featureNextPage, prevPage: featurePrevPage, changePage: featureChangePage, } = React.useContext(FeatureCardContext) || {};
+const checkEqualOrIncludes = (arrayOrSingle, value) => arrayOrSingle && Array.isArray(arrayOrSingle) ? arrayOrSingle.includes(value) : arrayOrSingle === value;
+
+const checkIsLoading = (dataSources, config, filters) => config?.children?.some(child => {
+    const filter = filters?.find(({ name }) => name === child.options?.filterName);
+    return (!!filter && !!child.options?.filterName && !dataSources?.some(({ name }) => name === filter.relatedDataSource));
+});
+
+const createConfigLayer = (layerName) => ({
+    name: layerName,
+    query: "",
+    parameters: {},
+    opacity: 1,
+    selectable: false,
+    filterZoomTo: false,
+    isVisible: true,
+});
+
+const createNewPageId = (pages) => {
+    if (!pages?.length)
+        return 1;
+    const maxPageId = pages.reduce((maxId, page) => {
+        const pageId = parseInt(page.id.replace(CONFIG_PAGE_ID, ""), 10);
+        return Math.max(maxId, pageId);
+    }, 0);
+    return maxPageId + 1;
+};
+
+const createConfigPage = (props) => {
+    const { title, defaultTitle, pages, baseMapName, position, resolution /* , srid*/ } = props || {};
+    const pageId = createNewPageId(pages);
     return {
-        toggleLayersVisibility,
-        visibleLayers,
-        projectInfo,
-        layerInfos,
-        updateProject,
-        dashboardLayers,
-        setDashboardLayer,
-        geometryFilter,
-        layerInfo,
-        attributes,
-        feature,
-        closeFeatureCard,
-        containerIds,
-        controls,
-        changeControls,
-        components: dashboardComponents,
-        config: type === exports.WidgetType.Dashboard ? dashboardConfig : featureConfig,
-        isEditing: type === exports.WidgetType.Dashboard ? projectEditMode : featureEditMode,
-        isLoading: type === exports.WidgetType.Dashboard ? projectLoading : featureLoading,
-        pageIndex: type === exports.WidgetType.Dashboard ? projectPageIndex || 1 : featurePageIndex || 1,
-        filters: type === exports.WidgetType.Dashboard ? projectFilters : featureFilters,
-        changeFilters: type === exports.WidgetType.Dashboard ? projectChangeFilters : featureChangeFilters,
-        dataSources: type === exports.WidgetType.Dashboard ? projectDataSources : featureDataSources,
-        expandContainer: type === exports.WidgetType.Dashboard ? projectExpandContainer : featureExpandContainer,
-        expandedContainers: type === exports.WidgetType.Dashboard ? projectExpandedContainers : featureExpandedContainers,
-        selectedTabId: type === exports.WidgetType.Dashboard ? projectSelectedTabId : featureSelectedTabId,
-        setSelectedTabId: type === exports.WidgetType.Dashboard ? setProjectSelectedTabId : setFeatureSelectedTabId,
-        nextPage: type === exports.WidgetType.Dashboard ? projectNextPage : featureNextPage,
-        prevPage: type === exports.WidgetType.Dashboard ? projectPrevPage : featurePrevPage,
-        changePage: type === exports.WidgetType.Dashboard ? projectChangePage : featureChangePage,
+        id: `${CONFIG_PAGE_ID}${pageId}`,
+        templateName: exports.ContainerTemplate.ContainersGroup,
+        children: [],
+        layers: [],
+        dataSources: [],
+        filters: [],
+        tasks: [],
+        style: {},
+        options: {
+            title: title || [defaultTitle, pageId].filter(Boolean).join(" "),
+            position: position || [DEFAULT_LNG, DEFAULT_LAT],
+            resolution: resolution || DEFAULT_ZOOM,
+            baseMapName: baseMapName || DEFAULT_BASE_MAP,
+            baseMapSettings: {},
+            expandedLayers: true,
+            // srid: srid || null,
+        },
     };
 };
 
-const useGlobalContext = () => {
-    const { t, language, themeName, api, ewktGeometry } = React.useContext(GlobalContext) || {};
-    const translate = React.useCallback((value, options) => {
-        if (t)
-            return t(value, options);
-        return options?.defaultValue ?? value;
-    }, [t]);
-    return React.useMemo(() => ({
-        t: translate,
-        language,
-        themeName,
-        api,
-        ewktGeometry,
-    }), [language, translate, api, ewktGeometry, themeName]);
+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 HEIGHT_OFFSET = 20;
-const FILL_OPACITY = 0.28;
-const lineGenerator = line()
-    .x(d => d[0])
-    .y(d => d[1])
-    .curve(monotoneX);
-const areaGenerator = (height) => area()
-    .defined(d => d !== null)
-    .x(d => d[0])
-    .y0(height - HEIGHT_OFFSET)
-    .y1(d => d[1])
-    .curve(monotoneX);
-function getLinePoints(numPoints, svgLine) {
-    if (!svgLine?.getTotalLength) {
-        return [];
-    }
-    const lineLength = svgLine.getTotalLength();
-    let interval;
-    if (numPoints === 1) {
-        interval = 0;
+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("'");
+const checkIfNeedQuotes = (value, attributeType) => {
+    return attributeType
+        ? !NUMERIC_ATTRIBUTE_TYPES.includes(attributeType)
+        : typeof value === "number"
+            ? false
+            : typeof value === "string" && !isNumeric(value) && !checkIsDateFormat(value);
+};
+const formatConditionValue = ({ value, attributeType, defaultValue, checkQuotes = true, isSetParams = false, }) => {
+    if (isEmptyValue(value))
+        return "";
+    const formattedValue = Array.isArray(defaultValue) && !Array.isArray(value) ? [value] : value;
+    const isArray = Array.isArray(formattedValue);
+    let stringValue = formattedValue.toString();
+    if (isArray) {
+        return formattedValue.length && !formattedValue.every(item => !item)
+            ? `[${formattedValue
+                .map(item => (checkQuotes && checkIfNeedQuotes(item, attributeType) ? `'${item}'` : item))
+                .join(",")}]`
+            : "";
     }
-    else {
-        interval = lineLength / (numPoints - 1);
+    if (isSetParams && checkIsDateFormat(stringValue)) {
+        stringValue = stringValue.slice(2, -1);
     }
-    return range(numPoints)
-        .filter(d => d * interval)
-        .map(d => {
-        const value = d * interval;
-        const { x, y } = svgLine.getPointAtLength(value);
-        return [x, y];
+    return checkQuotes && checkIfNeedQuotes(stringValue, attributeType) ? `'${stringValue}'` : stringValue;
+};
+
+const applyFiltersToCondition = ({ condition, name, defaultValue, filters, isSingle, isSetParams, }) => {
+    const hasFilter = filters[name] !== undefined && !!filters[name].value?.toString().length;
+    const min = formatConditionValue({
+        value: hasFilter ? filters[name].min : null,
+        checkQuotes: !isSingle,
+        isSetParams,
     });
-}
-function wrap() {
-    const width = 80;
-    const padding = 10;
-    const self = select(this);
-    let textLength = self.node().getComputedTextLength();
-    let text = self.text();
-    while (textLength > width - 2 * padding && text.length > 0) {
-        text = text.slice(0, -1);
-        self.text(`${text}...`);
-        textLength = self.node().getComputedTextLength();
-    }
-}
-const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, markers, showMarkers, }) => {
-    const { t } = useGlobalContext();
-    const { layerInfos } = useWidgetContext();
-    const strokeColors = relatedAttributes
-        .filter(({ chartAxis }) => chartAxis === "y")
-        .map(({ axisColor }) => axisColor);
-    const ref = React.useRef({
-        path: null,
-        area: null,
-        points: [],
+    const max = formatConditionValue({
+        value: hasFilter ? filters[name].max : null,
+        checkQuotes: !isSingle,
+        isSetParams,
     });
-    const onChange = React.useCallback((range) => {
-        const { path, area, points } = ref.current;
-        let filteredPoints = [...points];
-        if (range) {
-            const hundred = 100;
-            const x1 = +width * (range[0] / hundred);
-            const x2 = +width * (range[1] / hundred);
-            filteredPoints = points.filter(([x]) => x >= x1 && x <= x2);
+    const value = formatConditionValue({
+        value: hasFilter ? filters[name].value : filters[name] === undefined ? defaultValue : "",
+        defaultValue,
+        checkQuotes: !isSingle,
+        isSetParams,
+    });
+    const filterName = `${FILTER_PREFIX}${name}`;
+    const hasMin = min !== "" && min !== null && min !== undefined;
+    const hasMax = max !== "" && max !== null && max !== undefined;
+    let result = condition;
+    if (hasMin || hasMax) {
+        if (hasMin) {
+            result = result.replace(new RegExp(`${filterName}\\.min`), min);
+        }
+        if (hasMax) {
+            result = result.replace(new RegExp(`${filterName}\\.max`), max);
         }
-        path && path.attr("d", lineGenerator(filteredPoints));
-        area && area.attr("d", areaGenerator(height)(filteredPoints));
-    }, [height, width]);
-    const customize = React.useCallback(({ svg }) => {
-        svg.style("overflow", "visible");
-        svg
-            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} line,
-              .${charts.lineChartClassNames.lineChartYScaleGlobal} line,
-              .domain`)
-            .each((_, index, nodes) => {
-            nodes[index].remove();
-        });
-        svg
-            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} .tick`)
-            .each((_, index, nodes) => {
-            if (!index) {
-                nodes[index].style.textAnchor = "start";
-            }
-            if (index === nodes.length - 1) {
-                nodes[index].style.textAnchor = "end";
-            }
-            if (markers) {
-                nodes[index].remove();
-            }
-            if (showMarkers) {
-                if (index % showMarkers !== 0) {
-                    nodes[index].remove();
-                }
-            }
-            else {
-                if (index && index < nodes.length - 1) {
-                    nodes[index].remove();
-                }
-            }
-        });
-        svg
-            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} .tick text`)
-            .attr("y", 16);
-        svg
-            .selectAll(`.${charts.lineChartClassNames.lineChartYScaleGlobal} .tick text`)
-            .text(item => {
-            if (!item)
-                return 0;
-            const dataSource = dataSources?.find(({ name }) => name === relatedAttributes[0].dataSourceName);
-            const layerInfo = dataSource
-                ? layerInfos.find(({ name }) => name === dataSource.layerName)
-                : null;
-            const attribute = layerInfo?.configuration?.attributesConfiguration?.attributes[relatedAttributes[0].attributeName];
-            return attribute
-                ? formatAttributeValue({
-                    t,
-                    type: attribute.type,
-                    value: item,
-                    stringFormat: attribute.stringFormat,
-                    noUnits: true,
-                })
-                : item;
-        })
-            .each(wrap);
-        svg.selectAll(".tick text").attr("style", `color: ${fontColor}`);
-        const global = svg.select(`.${charts.lineChartClassNames.lineChartLinesGlobal}`);
-        const lineChartLines = svg.selectAll(`.${charts.lineChartClassNames.lineChartLine}`);
-        const defs = [];
-        lineChartLines.each((_, index, nodes) => {
-            const lineChartLine = nodes[index];
-            const gradientId = lodash.uniqueId(`${chartId}-gradient-`);
-            const color = strokeColors[index] || defaultColor;
-            const newPath = global
-                .append("path")
-                .attr("stroke", color)
-                .attr("stroke-width", "0")
-                .attr("class", charts.lineChartClassNames.lineChartLine);
-            const points = getLinePoints(+width, lineChartLine);
-            const area = global
-                .append("path")
-                .attr("fill", `url(#${gradientId})`)
-                .attr("stroke-width", "0")
-                .attr("fill-opacity", FILL_OPACITY);
-            defs.push(`
-          <linearGradient id="${gradientId}" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0" stop-color="${color}" stop-opacity="1" />
-            <stop offset="1" stop-color="${color}" stop-opacity="0" />
-          </linearGradient>
-        `);
-            ref.current = {
-                path: newPath,
-                area,
-                points,
-            };
-            onChange();
-        });
-        svg.append("defs").html(() => defs.join(""));
-    }, [
-        fontColor,
-        dataSources,
-        layerInfos,
-        relatedAttributes,
-        chartId,
-        strokeColors,
-        defaultColor,
-        width,
-        onChange,
-        showMarkers,
-        markers,
-    ]);
-    return [customize, onChange];
-};
-
-const eqlParametersToPayload = (parameters) => Object.keys(parameters).reduce((result, paramName) => ({
-    ...result,
-    [paramName]: parameters[paramName].default,
-}), {});
-
-const addDataSource = (dashboardConfiguration, pageIndex, query, additional) => {
-    const newConfig = JSON.parse(JSON.stringify(dashboardConfiguration));
-    if (!newConfig.children[0].children[pageIndex].dataSources) {
-        newConfig.children[0].children[pageIndex].dataSources = [];
     }
-    const freeId = newConfig.children[0].children[pageIndex].dataSources.length + 1;
-    const parameters = eqlParametersToPayload(additional.parameters);
-    newConfig.children[0].children[pageIndex].dataSources.push({
-        name: `datasource_${freeId}`,
-        query,
-        parameters,
-        offset: 0,
-        limit: DEFAULT_DATA_SOURCE_LIMIT,
+    else if (value) {
+        result = result.replace(new RegExp(filterName), value);
+    }
+    return isSingle && isNumeric(result) ? Number(result) : result;
+};
+const applyVarsToCondition = ({ section, configFilters, filters, attributes, layerParams, eqlParameters, geometry, isSetParams, }) => {
+    if (!section?.length)
+        return [];
+    const isSingle = typeof section === "string";
+    const result = isSingle ? [section] : [...section];
+    result.forEach((_, index) => {
+        if (geometry && !geometry.includes("()") && geometry.endsWith(")")) {
+            result[index] = result[index].replace(new RegExp("%geometry"), `'${geometry}'`);
+        }
+        if (configFilters?.length) {
+            configFilters.forEach(filter => {
+                result[index] = applyFiltersToCondition({
+                    filters,
+                    condition: result[index],
+                    name: filter.name,
+                    defaultValue: filter.defaultValue,
+                    isSetParams,
+                    isSingle: isSingle && !Array.isArray(filter.defaultValue),
+                }).toString();
+            });
+        }
+        if (attributes?.length) {
+            attributes.forEach(({ attributeName, value, type: attributeType }) => {
+                result[index] = result[index].replace(new RegExp(`{${attributeName}}`), formatConditionValue({ value: value?.toString(), attributeType, checkQuotes: !isSingle }));
+            });
+        }
+        if (eqlParameters && layerParams) {
+            Object.keys(eqlParameters).forEach(param => {
+                result[index] = result[index].replace(new RegExp(`\\$\\(${param}=`), "***");
+                result[index] = result[index].replace(new RegExp(param), formatConditionValue({ value: layerParams[param], checkQuotes: !isSingle }));
+                result[index] = result[index].replace(new RegExp("\\*\\*\\*"), `$(${param}=`);
+            });
+        }
     });
-    return newConfig.children;
+    return isSingle ? result?.[0] : result;
 };
-
-const addDataSources = (dashboardConfiguration, pageIndex, layerNames) => {
-    const newConfig = JSON.parse(JSON.stringify(dashboardConfiguration));
-    if (!newConfig.children[0].children[pageIndex].dataSources) {
-        newConfig.children[0].children[pageIndex].dataSources = [];
-    }
-    layerNames.forEach(layerName => {
-        newConfig.children[0].children[pageIndex].dataSources.push({
-            name: layerName.split(".")[1],
-            layerName,
-            query: "",
-            parameters: {},
-        });
+const formatSingleCondition = (condition, { configFilters, filters, attributes, eqlParameters, layerParams, geometry }) => {
+    const setParams = condition.match(new RegExp("\\$\\([^)]+\\)", "g"));
+    const setParamsSection = applyVarsToCondition({
+        section: setParams,
+        configFilters,
+        filters,
+        attributes,
+        eqlParameters,
+        layerParams,
+        geometry,
+        isSetParams: true,
     });
-    return newConfig.children;
+    const splitter = " AND ";
+    const setParamsLength = setParams?.join("").length || 0;
+    const conditionSection = applyVarsToCondition({
+        section: condition.substring(setParamsLength).split(splitter),
+        configFilters,
+        filters,
+        attributes,
+        eqlParameters,
+        layerParams,
+        geometry,
+    });
+    return setParamsSection?.length && conditionSection.length
+        ? [setParamsSection.join(""), conditionSection.join(splitter)].join(" ")
+        : setParamsSection?.length
+            ? setParamsSection.join("")
+            : conditionSection.join(splitter);
+};
+const formatDataSourceCondition = ({ condition, ...rest }) => {
+    if (Array.isArray(condition)) {
+        return condition.map(item => formatSingleCondition(item, rest));
+    }
+    if (!condition) {
+        return "";
+    }
+    return formatSingleCondition(condition, rest);
 };
 
-const getConfigFilter = (filterName, configFilters) => configFilters?.find(({ name }) => name === filterName);
+const DashboardChipsContainer = styled(uilibGl.Flex) `
+  flex-wrap: wrap;
+`;
+const DefaultChipColorMixin = styled.css `
+  && {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
 
-const getDataSource = (dataSourceName, dataSources) => dataSources?.find(({ name }) => name === dataSourceName);
+  && > * {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
 
-const getDataSourceFilterValue = ({ filterName, filterProp, attributeAlias, dataSource, selectedFilters, }) => {
-    if (lodash.isNil(selectedFilters[filterName]))
-        return null;
-    const feature = dataSource?.features?.find(({ properties }) => properties[attributeAlias] ===
-        (Array.isArray(selectedFilters[filterName].value)
-            ? selectedFilters[filterName].value[0]
-            : selectedFilters[filterName].value));
-    return feature?.properties?.[filterProp];
-};
+  && span[kind]:after {
+    color: ${({ theme: { palette } }) => palette.icon};
+  }
+`;
+const CustomChipColorMixin = styled.css `
+  && {
+    color: ${({ $fontColor }) => $fontColor};
+  }
 
-const getSelectedFilterValue = (filterName, selectedFilters, defaultValue) => {
-    return ((!lodash.isNil(selectedFilters?.[filterName]?.value) &&
-        Array.isArray(defaultValue) &&
-        !Array.isArray(selectedFilters[filterName].value)
-        ? [selectedFilters[filterName].value]
-        : selectedFilters?.[filterName]?.value) ?? defaultValue);
-};
+  && > * {
+    color: ${({ $fontColor }) => $fontColor};
+  }
 
-const applyQueryFilters = ({ parameters: configParameters, filters: configFilters, selectedFilters, geometry, attributes, layerInfo, dataSources, projectDataSources, }) => {
-    if (!configParameters) {
-        return {};
-    }
-    return Object.keys(configParameters).reduce((result, key) => {
-        if (typeof configParameters[key] === "string" && configParameters[key].startsWith(PROVIDER_PREFIX)) {
-            const raw = configParameters[key].slice(PROVIDER_PREFIX.length);
-            const [provider, layerName, fieldName] = raw.split(":");
-            if (provider === exports.ProviderPrefix.Card && fieldName && layerInfo.name === layerName && attributes) {
-                const attribute = attributes.find(({ attributeName }) => attributeName === fieldName);
-                const cardValue = attribute?.value ?? null;
-                if (lodash.isNil(cardValue))
-                    return result;
-                return { ...result, [key]: cardValue };
-            }
-            if (provider === exports.ProviderPrefix.Left && layerName && fieldName && projectDataSources?.length) {
-                const dataSource = projectDataSources.find(({ layerName: name }) => name === layerName);
-                const leftValue = dataSource?.features?.[0]?.properties?.[fieldName] ?? null;
-                if (lodash.isNil(leftValue))
-                    return result;
-                return { ...result, [key]: leftValue };
-            }
-            return result;
-        }
-        if (typeof configParameters[key] === "string" && configParameters[key].includes("{") && attributes?.length) {
-            const exactAttr = attributes.find(({ attributeName }) => configParameters[key] === `{${attributeName}}`);
-            if (exactAttr) {
-                return { ...result, [key]: exactAttr.value ?? "" };
-            }
-            let interpolated = configParameters[key];
-            attributes.forEach(({ attributeName, value: attrValue }) => {
-                interpolated = interpolated.replace(new RegExp(`\\{${attributeName}\\}`, "g"), attrValue?.toString() ?? "");
-            });
-            return { ...result, [key]: interpolated };
-        }
-        if (typeof configParameters[key] !== "string" || !configParameters[key].startsWith("%")) {
-            return {
-                ...result,
-                [key]: configParameters[key],
-            };
-        }
-        const filterFullName = configParameters[key].replace("%", "");
-        const [filterName, filterProp] = filterFullName.includes(".") ? filterFullName.split(".") : [filterFullName, null];
-        const { defaultValue, relatedDataSource, attributeAlias } = getConfigFilter(filterName, configFilters) || {};
-        if (filterName === "geometry" && geometry && !geometry.includes("()") && geometry.endsWith(")")) {
-            return {
-                ...result,
-                [key]: geometry,
-            };
-        }
-        if (configParameters[key].endsWith(".max")) {
-            return {
-                ...result,
-                [key]: selectedFilters?.[filterName]?.max ?? (Array.isArray(defaultValue) ? defaultValue[1] : defaultValue),
-            };
-        }
-        if (configParameters[key].endsWith(".min")) {
-            return {
-                ...result,
-                [key]: selectedFilters?.[filterName]?.min ?? (Array.isArray(defaultValue) ? defaultValue[0] : defaultValue),
-            };
-        }
-        if (configParameters[key].includes(".")) {
-            return {
-                ...result,
-                [key]: getDataSourceFilterValue({
-                    filterName,
-                    filterProp,
-                    selectedFilters,
-                    attributeAlias,
-                    dataSource: getDataSource(relatedDataSource, dataSources),
-                }) ?? defaultValue,
-            };
-        }
-        const value = getSelectedFilterValue(filterName, selectedFilters, defaultValue);
-        if (lodash.isNil(value)) {
-            return result;
-        }
-        return {
-            ...result,
-            [key]: value,
-        };
-    }, {});
-};
+  && span[kind]:after {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+`;
+const DashboardChip$1 = styled(uilibGl.Chip) `
+  margin: 0 0.25rem 0.25rem 0;
+  background: ${({ $isDefault, $bgColor, theme: { palette } }) => $isDefault ? palette.element : $bgColor || palette.primary};
+  border-radius: ${({ $radius, theme: { borderRadius } }) => $radius || borderRadius.medium};
+  white-space: nowrap;
+  font-size: ${({ $fontSize }) => $fontSize || "0.875rem"};
+  color: ${({ theme: { palette } }) => palette.iconContrast};
 
-const checkEqualOrIncludes = (arrayOrSingle, value) => arrayOrSingle && Array.isArray(arrayOrSingle) ? arrayOrSingle.includes(value) : arrayOrSingle === value;
+  > * {
+    font-size: ${({ $fontSize }) => $fontSize || "0.875rem"};
+  }
 
-const checkIsLoading = (dataSources, config, filters) => config?.children?.some(child => {
-    const filter = filters?.find(({ name }) => name === child.options?.filterName);
-    return (!!filter && !!child.options?.filterName && !dataSources?.some(({ name }) => name === filter.relatedDataSource));
-});
+  span[kind] {
+    height: 0.875rem;
 
-const createConfigLayer = (layerName) => ({
-    name: layerName,
-    query: "",
-    parameters: {},
-    opacity: 1,
-    selectable: false,
-    filterZoomTo: false,
-    isVisible: true,
-});
+    :after {
+      font-size: 0.875rem;
+    }
+  }
 
-const createNewPageId = (pages) => {
-    if (!pages?.length)
-        return 1;
-    const maxPageId = pages.reduce((maxId, page) => {
-        const pageId = parseInt(page.id.replace(CONFIG_PAGE_ID, ""), 10);
-        return Math.max(maxId, pageId);
-    }, 0);
-    return maxPageId + 1;
-};
+  button {
+    width: auto;
+    padding: 0 0.5rem;
+  }
 
-const createConfigPage = (props) => {
-    const { title, defaultTitle, pages, baseMapName, position, resolution /* , srid*/ } = props || {};
-    const pageId = createNewPageId(pages);
-    return {
-        id: `${CONFIG_PAGE_ID}${pageId}`,
-        templateName: exports.ContainerTemplate.ContainersGroup,
-        children: [],
-        layers: [],
-        dataSources: [],
-        filters: [],
-        tasks: [],
-        style: {},
-        options: {
-            title: title || [defaultTitle, pageId].filter(Boolean).join(" "),
-            position: position || [DEFAULT_LNG, DEFAULT_LAT],
-            resolution: resolution || DEFAULT_ZOOM,
-            baseMapName: baseMapName || DEFAULT_BASE_MAP,
-            baseMapSettings: {},
-            expandedLayers: true,
-            // srid: srid || null,
-        },
-    };
-};
+  ${({ $isDefault }) => $isDefault && DefaultChipColorMixin}
+  ${({ $fontColor, $isDefault }) => !!$fontColor && !$isDefault && CustomChipColorMixin}
+`;
 
-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 LayerGroupContainer = styled(uilibGl.Flex) `
+  display: flex;
+  justify-content: center;
+  position: relative;
+  flex-direction: column;
+  padding: 0 0.25rem 0 1rem;
+  box-sizing: border-box;
+  transition: opacity ${uilibGl.transition.hover}, background-color ${uilibGl.transition.hover};
+  font-family: "NunitoSans", sans-serif;
+`;
+const LayerGroupMain = styled(uilibGl.Flex) `
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 
-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;
-};
+  ${uilibGl.Icon} {
+    width: 2rem;
+    min-width: 2rem;
+    height: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0.75rem;
+  }
 
-const isEmptyValue = (value) => value === "" || value === null || value === undefined;
-
-const checkIsDateFormat = (value) => value.startsWith("#'") && value.endsWith("'");
-const checkIfNeedQuotes = (value, attributeType) => {
-    return attributeType
-        ? !NUMERIC_ATTRIBUTE_TYPES.includes(attributeType)
-        : typeof value === "number"
-            ? false
-            : typeof value === "string" && !isNumeric(value) && !checkIsDateFormat(value);
-};
-const formatConditionValue = ({ value, attributeType, defaultValue, checkQuotes = true, isSetParams = false, }) => {
-    if (isEmptyValue(value))
-        return "";
-    const formattedValue = Array.isArray(defaultValue) && !Array.isArray(value) ? [value] : value;
-    const isArray = Array.isArray(formattedValue);
-    let stringValue = formattedValue.toString();
-    if (isArray) {
-        return formattedValue.length && !formattedValue.every(item => !item)
-            ? `[${formattedValue
-                .map(item => (checkQuotes && checkIfNeedQuotes(item, attributeType) ? `'${item}'` : item))
-                .join(",")}]`
-            : "";
-    }
-    if (isSetParams && checkIsDateFormat(stringValue)) {
-        stringValue = stringValue.slice(2, -1);
-    }
-    return checkQuotes && checkIfNeedQuotes(stringValue, attributeType) ? `'${stringValue}'` : stringValue;
-};
-
-const applyFiltersToCondition = ({ condition, name, defaultValue, filters, isSingle, isSetParams, }) => {
-    const hasFilter = filters[name] !== undefined && !!filters[name].value?.toString().length;
-    const min = formatConditionValue({
-        value: hasFilter ? filters[name].min : null,
-        checkQuotes: !isSingle,
-        isSetParams,
-    });
-    const max = formatConditionValue({
-        value: hasFilter ? filters[name].max : null,
-        checkQuotes: !isSingle,
-        isSetParams,
-    });
-    const value = formatConditionValue({
-        value: hasFilter ? filters[name].value : filters[name] === undefined ? defaultValue : "",
-        defaultValue,
-        checkQuotes: !isSingle,
-        isSetParams,
-    });
-    const filterName = `${FILTER_PREFIX}${name}`;
-    const hasMin = min !== "" && min !== null && min !== undefined;
-    const hasMax = max !== "" && max !== null && max !== undefined;
-    let result = condition;
-    if (hasMin || hasMax) {
-        if (hasMin) {
-            result = result.replace(new RegExp(`${filterName}\\.min`), min);
-        }
-        if (hasMax) {
-            result = result.replace(new RegExp(`${filterName}\\.max`), max);
-        }
-    }
-    else if (value) {
-        result = result.replace(new RegExp(filterName), value);
-    }
-    return isSingle && isNumeric(result) ? Number(result) : result;
-};
-const applyVarsToCondition = ({ section, configFilters, filters, attributes, layerParams, eqlParameters, geometry, isSetParams, }) => {
-    if (!section?.length)
-        return [];
-    const isSingle = typeof section === "string";
-    const result = isSingle ? [section] : [...section];
-    result.forEach((_, index) => {
-        if (geometry && !geometry.includes("()") && geometry.endsWith(")")) {
-            result[index] = result[index].replace(new RegExp("%geometry"), `'${geometry}'`);
-        }
-        if (configFilters?.length) {
-            configFilters.forEach(filter => {
-                result[index] = applyFiltersToCondition({
-                    filters,
-                    condition: result[index],
-                    name: filter.name,
-                    defaultValue: filter.defaultValue,
-                    isSetParams,
-                    isSingle: isSingle && !Array.isArray(filter.defaultValue),
-                }).toString();
-            });
-        }
-        if (attributes?.length) {
-            attributes.forEach(({ attributeName, value, type: attributeType }) => {
-                result[index] = result[index].replace(new RegExp(`{${attributeName}}`), formatConditionValue({ value: value?.toString(), attributeType, checkQuotes: !isSingle }));
-            });
-        }
-        if (eqlParameters && layerParams) {
-            Object.keys(eqlParameters).forEach(param => {
-                result[index] = result[index].replace(new RegExp(`\\$\\(${param}=`), "***");
-                result[index] = result[index].replace(new RegExp(param), formatConditionValue({ value: layerParams[param], checkQuotes: !isSingle }));
-                result[index] = result[index].replace(new RegExp("\\*\\*\\*"), `$(${param}=`);
-            });
-        }
-    });
-    return isSingle ? result?.[0] : result;
-};
-const formatSingleCondition = (condition, { configFilters, filters, attributes, eqlParameters, layerParams, geometry }) => {
-    const setParams = condition.match(new RegExp("\\$\\([^)]+\\)", "g"));
-    const setParamsSection = applyVarsToCondition({
-        section: setParams,
-        configFilters,
-        filters,
-        attributes,
-        eqlParameters,
-        layerParams,
-        geometry,
-        isSetParams: true,
-    });
-    const splitter = " AND ";
-    const setParamsLength = setParams?.join("").length || 0;
-    const conditionSection = applyVarsToCondition({
-        section: condition.substring(setParamsLength).split(splitter),
-        configFilters,
-        filters,
-        attributes,
-        eqlParameters,
-        layerParams,
-        geometry,
-    });
-    return setParamsSection?.length && conditionSection.length
-        ? [setParamsSection.join(""), conditionSection.join(splitter)].join(" ")
-        : setParamsSection?.length
-            ? setParamsSection.join("")
-            : conditionSection.join(splitter);
-};
-const formatDataSourceCondition = ({ condition, ...rest }) => {
-    if (Array.isArray(condition)) {
-        return condition.map(item => formatSingleCondition(item, rest));
-    }
-    if (!condition) {
-        return "";
-    }
-    return formatSingleCondition(condition, rest);
-};
-
-const DashboardChipsContainer = styled(uilibGl.Flex) `
-  flex-wrap: wrap;
-`;
-const DefaultChipColorMixin = styled.css `
-  && {
-    color: ${({ theme: { palette } }) => palette.textPrimary};
-  }
-
-  && > * {
-    color: ${({ theme: { palette } }) => palette.textPrimary};
-  }
-
-  && span[kind]:after {
-    color: ${({ theme: { palette } }) => palette.icon};
-  }
-`;
-const CustomChipColorMixin = styled.css `
-  && {
-    color: ${({ $fontColor }) => $fontColor};
-  }
-
-  && > * {
-    color: ${({ $fontColor }) => $fontColor};
-  }
-
-  && span[kind]:after {
-    color: ${({ $fontColor }) => $fontColor};
-  }
-`;
-const DashboardChip$1 = styled(uilibGl.Chip) `
-  margin: 0 0.25rem 0.25rem 0;
-  background: ${({ $isDefault, $bgColor, theme: { palette } }) => $isDefault ? palette.element : $bgColor || palette.primary};
-  border-radius: ${({ $radius, theme: { borderRadius } }) => $radius || borderRadius.medium};
-  white-space: nowrap;
-  font-size: ${({ $fontSize }) => $fontSize || "0.875rem"};
-  color: ${({ theme: { palette } }) => palette.iconContrast};
-
-  > * {
-    font-size: ${({ $fontSize }) => $fontSize || "0.875rem"};
-  }
-
-  span[kind] {
-    height: 0.875rem;
-
-    :after {
-      font-size: 0.875rem;
-    }
-  }
-
-  button {
-    width: auto;
-    padding: 0 0.5rem;
-  }
-
-  ${({ $isDefault }) => $isDefault && DefaultChipColorMixin}
-  ${({ $fontColor, $isDefault }) => !!$fontColor && !$isDefault && CustomChipColorMixin}
-`;
-
-const LayerGroupContainer = styled(uilibGl.Flex) `
-  display: flex;
-  justify-content: center;
-  position: relative;
-  flex-direction: column;
-  padding: 0 0.25rem 0 1rem;
-  box-sizing: border-box;
-  transition: opacity ${uilibGl.transition.hover}, background-color ${uilibGl.transition.hover};
-  font-family: "NunitoSans", sans-serif;
-`;
-const LayerGroupMain = styled(uilibGl.Flex) `
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-
-  ${uilibGl.Icon} {
-    width: 2rem;
-    min-width: 2rem;
-    height: 2rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 0.75rem;
-  }
-
-  ${uilibGl.Description} {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    width: 100%;
-    margin-right: 0.25rem;
-    color: ${({ theme }) => theme.palette.textPrimary};
-  }
+  ${uilibGl.Description} {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    width: 100%;
+    margin-right: 0.25rem;
+    color: ${({ theme }) => theme.palette.textPrimary};
+  }
 
   button {
     width: 2.25rem;
@@ -4971,41 +4552,193 @@ const customStyles = [
     },
 ];
 
-const useMapContext = () => {
-    return React.useContext(MapContext);
-};
+const DashboardContext = React.createContext({});
+const DashboardProvider = React.memo(({ children, ...props }) => {
+    return jsxRuntime.jsx(DashboardContext.Provider, { value: props, children: children });
+});
 
-const draw = new MapboxDraw({
-    displayControlsDefault: false,
-    styles: customStyles,
-    modes: customModes,
-    defaultMode: "static",
-    controls: {
-        trash: true,
-    },
+const FeatureCardContext = React.createContext({});
+const FeatureCardProvider = React.memo(({ children, ...props }) => {
+    return jsxRuntime.jsx(FeatureCardContext.Provider, { value: props, children: children });
 });
-const useMapDraw = (triggerDeps = []) => {
-    const { map, draw: drawContext, loaded, basemapName } = useMapContext();
-    React.useEffect(() => {
-        if (!loaded || !map.current) {
-            return;
-        }
-        drawContext.current = draw;
-        map.current.addControl(drawContext.current);
-    }, [loaded]); // eslint-disable-line
-    React.useEffect(() => {
-        if (map.current && map.current.hasControl(drawContext.current)) {
-            map.current.removeControl(drawContext.current);
-            map.current.addControl(drawContext.current);
-        }
-    }, [basemapName, ...triggerDeps]); // eslint-disable-line
-};
 
-/**
- * Определяет, является ли URL ссылкой на SVG файл.
- */
-const isSvgUrl = (url) => {
-    const lowercaseUrl = url.toLowerCase();
+const GlobalContext = React.createContext({});
+const GlobalProvider = React.memo(({ children, ...props }) => {
+    return jsxRuntime.jsx(GlobalContext.Provider, { value: props, children: children });
+});
+
+const MapContext = React.createContext({});
+
+const MapProvider = ({ basemapItems, defaultBasemap, children }) => {
+    const map = React.useRef();
+    const draw = React.useRef();
+    const [loaded, setLoaded] = React.useState(false);
+    const [basemapName, setBasemapName] = React.useState(defaultBasemap);
+    return (jsxRuntime.jsx(MapContext.Provider, { value: {
+            map,
+            draw,
+            loaded,
+            setLoaded,
+            basemapItems,
+            basemapName,
+            setBasemapName,
+            defaultBasemap,
+        }, children: children }));
+};
+
+exports.BaseMapTheme = void 0;
+(function (BaseMapTheme) {
+    BaseMapTheme["Light"] = "light";
+    BaseMapTheme["Dark"] = "dark";
+})(exports.BaseMapTheme || (exports.BaseMapTheme = {}));
+
+const ServerNotificationsContext = React.createContext({});
+
+const useServerNotifications = (url, initialized, apiClient) => {
+    const hubConnection = React.useRef(null);
+    const [connection, setConnection] = React.useState(null);
+    const subscribeNotifications = React.useCallback(() => {
+        if (!connection || connection.state !== "Connected") {
+            return;
+        }
+        connection
+            .invoke("SubscribeNotifications", [])
+            .then(() => console.info("Подписка `SubscribeNotifications` оформлена"))
+            .catch(err => console.info("Ошибка подписки `SubscribeNotifications`:", err));
+    }, [connection]);
+    React.useEffect(() => {
+        if (!initialized) {
+            return;
+        }
+        hubConnection.current = new signalr.HubConnectionBuilder()
+            .withUrl(`${url}?clientId=${api.generateId()}`, {
+            withCredentials: true,
+            skipNegotiation: true,
+            transport: signalr.HttpTransportType.WebSockets,
+            accessTokenFactory: async () => {
+                let accessToken = window.localStorage.getItem(api.STORAGE_TOKEN_KEY) || "";
+                const { exp } = api.parseJwt(accessToken);
+                const currentTime = new Date().getTime() / 1000;
+                if (currentTime > exp) {
+                    const refreshToken = window.localStorage.getItem(api.STORAGE_REFRESH_TOKEN_KEY);
+                    if (refreshToken) {
+                        const refreshTokenResponse = await apiClient.account.refreshToken({
+                            refreshToken,
+                        });
+                        if (refreshTokenResponse) {
+                            accessToken = refreshTokenResponse.token;
+                            window.localStorage.setItem(api.STORAGE_TOKEN_KEY, refreshTokenResponse.token);
+                            window.localStorage.setItem(api.STORAGE_REFRESH_TOKEN_KEY, refreshTokenResponse.refreshToken);
+                        }
+                    }
+                    else {
+                        await apiClient.logout();
+                    }
+                }
+                return accessToken;
+            },
+        })
+            .withAutomaticReconnect()
+            .configureLogging(signalr.LogLevel.Information)
+            .build();
+        hubConnection.current
+            .start()
+            .then(() => console.info("Серверные нотификации подключены"))
+            .catch(err => console.info("Ошибка:", err))
+            .finally(() => setConnection(hubConnection.current));
+    }, [initialized]); // eslint-disable-line
+    React.useEffect(() => {
+        if (!connection || connection.state !== "Connected") {
+            return;
+        }
+        connection.onreconnecting(() => console.info("Переподключение к серверным нотификациям"));
+        connection.onreconnected(subscribeNotifications);
+        subscribeNotifications();
+    }, [connection]);
+    return connection;
+};
+
+const ServerNotificationsProvider = ({ url, initialized, apiClient, children }) => {
+    const connection = useServerNotifications(url, initialized, apiClient);
+    const addSubscription = React.useCallback(async (payload) => {
+        if (!connection || connection.state !== "Connected" || !payload) {
+            return;
+        }
+        try {
+            const id = await connection.invoke("AddSubscription", payload);
+            console.info("Подписка добавлена, id:", id);
+            return id;
+        }
+        catch (err) {
+            console.info("Ошибка добавления подписки:", err);
+            return Promise.resolve(null);
+        }
+    }, [connection]);
+    const updateSubscription = React.useCallback(async (id, payload) => {
+        if (!connection || connection.state !== "Connected" || !id || !payload) {
+            return;
+        }
+        try {
+            await connection.invoke("UpdateSubscription", id, payload);
+        }
+        catch (err) {
+            console.info(`Ошибка обновления подписки ${id}:`, err);
+        }
+    }, [connection]);
+    const unsubscribeById = React.useCallback(async (id) => {
+        if (!connection || connection.state !== "Connected" || !id) {
+            return;
+        }
+        try {
+            await connection.invoke("Unsubscribe", [id]);
+        }
+        catch (err) {
+            console.info(`Ошибка отписки по ${id}:`, err);
+        }
+    }, [connection]);
+    return (jsxRuntime.jsx(ServerNotificationsContext.Provider, { value: {
+            connection,
+            addSubscription,
+            updateSubscription,
+            unsubscribeById,
+        }, children: children }));
+};
+
+const useMapContext = () => {
+    return React.useContext(MapContext);
+};
+
+const draw = new MapboxDraw({
+    displayControlsDefault: false,
+    styles: customStyles,
+    modes: customModes,
+    defaultMode: "static",
+    controls: {
+        trash: true,
+    },
+});
+const useMapDraw = (triggerDeps = []) => {
+    const { map, draw: drawContext, loaded, basemapName } = useMapContext();
+    React.useEffect(() => {
+        if (!loaded || !map.current) {
+            return;
+        }
+        drawContext.current = draw;
+        map.current.addControl(drawContext.current);
+    }, [loaded]); // eslint-disable-line
+    React.useEffect(() => {
+        if (map.current && map.current.hasControl(drawContext.current)) {
+            map.current.removeControl(drawContext.current);
+            map.current.addControl(drawContext.current);
+        }
+    }, [basemapName, ...triggerDeps]); // eslint-disable-line
+};
+
+/**
+ * Определяет, является ли URL ссылкой на SVG файл.
+ */
+const isSvgUrl = (url) => {
+    const lowercaseUrl = url.toLowerCase();
     return lowercaseUrl.endsWith(".svg") || lowercaseUrl.startsWith("data:image/svg");
 };
 /**
@@ -5385,6 +5118,7 @@ const useZoomToFeatures = () => {
         map.current.fitBounds([minX, minY, maxX, maxY], {
             ...options,
             padding: options?.padding ?? 150,
+            maxZoom: options?.maxZoom ?? SINGLE_FEATURE_FALLBACK_ZOOM,
         });
     }, [map]);
 };
@@ -6338,71 +6072,12 @@ const TwoColumnContainerWrapper = styled(uilibGl.Flex) `
   }
 `;
 
-const useRenderContainerItem = (type, renderElement) => {
-    const { config, layerInfo, selectedTabId, attributes } = useWidgetContext(type);
-    return React.useCallback((elementConfig, attribute) => {
-        const { id, options, style, children } = elementConfig || {};
-        const { hideEmpty, innerTemplateStyle } = options || {};
-        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 => ({
-            type: "attributeValue",
-            ...child,
-            attributeName: attribute,
-            options: { noUnits: hasUnits, ...child.options },
-        }));
-        const attr = attribute
-            ? layerInfo?.configuration?.attributesConfiguration?.attributes?.find(({ attributeName }) => attributeName === attribute)
-            : null;
-        if (hasIcon) {
-            elementChildren[iconIndex] = {
-                ...elementChildren[iconIndex],
-                type: attr?.icon?.type?.toLowerCase(),
-                value: attr?.icon?.resourceId || attr?.icon?.url || attr?.icon?.iconName,
-                attributeName: null,
-            };
-        }
-        const render = attribute
-            ? getRenderElement({
-                config,
-                elementConfig: {
-                    ...elementConfig,
-                    children: elementChildren,
-                },
-                selectedTabId,
-                attributes,
-                layerInfo,
-                type,
-            })
-            : renderElement;
-        const value = render({ id: "value" });
-        return {
-            id,
-            value,
-            hideEmpty,
-            style: innerTemplateStyle || style,
-            hasIcon,
-            hasUnits,
-            render,
-        };
-    }, [config, layerInfo, selectedTabId, attributes, type, renderElement]);
-};
-
 const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) => {
-    const getRenderContainerItem = useRenderContainerItem(type, renderElement);
-    const { options } = elementConfig || {};
-    const { attributes: optionAttributes } = options || {};
-    const { attributes: contextAttributes } = useWidgetContext(type);
-    const attributesToRender = React.useMemo(() => {
-        if (!optionAttributes)
-            return null;
-        if (optionAttributes.length === 0) {
-            return contextAttributes?.map(({ attributeName }) => attributeName) ?? [];
-        }
-        return optionAttributes;
-    }, [optionAttributes, contextAttributes]);
+    const { getRenderContainerItem, attributesToRender } = useContainerAttributes({
+        elementConfig,
+        type,
+        renderElement,
+    });
     const renderContainer = React.useCallback((attribute) => {
         const { id, value, hideEmpty, style, hasUnits, render } = getRenderContainerItem(elementConfig, attribute);
         if (!value && hideEmpty)
@@ -6413,18 +6088,11 @@ const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) =
 });
 
 const TwoColumnContainer = React.memo(({ elementConfig, type, renderElement }) => {
-    const getRenderContainerItem = useRenderContainerItem(type, renderElement);
-    const { options } = elementConfig || {};
-    const { attributes: renderAttributes } = options || {};
-    const { attributes: contextAttributes } = useWidgetContext(type);
-    const attributesToRender = React.useMemo(() => {
-        if (!renderAttributes)
-            return null;
-        if (renderAttributes.length === 0) {
-            return contextAttributes?.map(({ attributeName }) => attributeName) ?? [];
-        }
-        return renderAttributes;
-    }, [renderAttributes, contextAttributes]);
+    const { getRenderContainerItem, attributesToRender } = useContainerAttributes({
+        elementConfig,
+        type,
+        renderElement,
+    });
     const renderContainer = React.useCallback((attribute) => {
         const { id, value, hideEmpty, style, hasIcon, hasUnits, render } = getRenderContainerItem(elementConfig, attribute);
         if (!value && hideEmpty)
@@ -7739,14 +7407,51 @@ const EditGroupContainer = React.memo(({ type, elementConfig, renderElement }) =
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: controls.map(({ targetAttributeName }) => renderContainer(targetAttributeName)) }));
 });
 
-const useEditControl = (type, elementConfig) => {
-    const { attributes, controls, dataSources, changeControls } = useWidgetContext(type);
-    const { children, options } = elementConfig || {};
-    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 attributeName = (control?.targetAttributeName ?? valueElement?.attributeName);
-    const value = React.useMemo(() => {
+const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
+    const { toggleLayersVisibility, visibleLayers, projectInfo, updateProject, layerInfos, geometryFilter, dashboardLayers, setDashboardLayer, components: dashboardComponents, config: dashboardConfig, containerIds, pageIndex: projectPageIndex, selectedTabId: projectSelectedTabId, setSelectedTabId: setProjectSelectedTabId, dataSources: projectDataSources, loading: projectLoading, editMode: projectEditMode, filters: projectFilters, changeFilters: projectChangeFilters, expandContainer: projectExpandContainer, expandedContainers: projectExpandedContainers, nextPage: projectNextPage, prevPage: projectPrevPage, changePage: projectChangePage, } = React.useContext(DashboardContext) || {};
+    const { layerInfo, attributes, feature, controls, changeControls, closeFeatureCard, config: featureConfig, pageIndex: featurePageIndex, selectedTabId: featureSelectedTabId, setSelectedTabId: setFeatureSelectedTabId, dataSources: featureDataSources, loading: featureLoading, editMode: featureEditMode, filters: featureFilters, changeFilters: featureChangeFilters, expandContainer: featureExpandContainer, expandedContainers: featureExpandedContainers, nextPage: featureNextPage, prevPage: featurePrevPage, changePage: featureChangePage, } = React.useContext(FeatureCardContext) || {};
+    return {
+        toggleLayersVisibility,
+        visibleLayers,
+        projectInfo,
+        layerInfos,
+        updateProject,
+        dashboardLayers,
+        setDashboardLayer,
+        geometryFilter,
+        layerInfo,
+        attributes,
+        feature,
+        closeFeatureCard,
+        containerIds,
+        controls,
+        changeControls,
+        components: dashboardComponents,
+        config: type === exports.WidgetType.Dashboard ? dashboardConfig : featureConfig,
+        isEditing: type === exports.WidgetType.Dashboard ? projectEditMode : featureEditMode,
+        isLoading: type === exports.WidgetType.Dashboard ? projectLoading : featureLoading,
+        pageIndex: type === exports.WidgetType.Dashboard ? projectPageIndex || 1 : featurePageIndex || 1,
+        filters: type === exports.WidgetType.Dashboard ? projectFilters : featureFilters,
+        changeFilters: type === exports.WidgetType.Dashboard ? projectChangeFilters : featureChangeFilters,
+        dataSources: type === exports.WidgetType.Dashboard ? projectDataSources : featureDataSources,
+        expandContainer: type === exports.WidgetType.Dashboard ? projectExpandContainer : featureExpandContainer,
+        expandedContainers: type === exports.WidgetType.Dashboard ? projectExpandedContainers : featureExpandedContainers,
+        selectedTabId: type === exports.WidgetType.Dashboard ? projectSelectedTabId : featureSelectedTabId,
+        setSelectedTabId: type === exports.WidgetType.Dashboard ? setProjectSelectedTabId : setFeatureSelectedTabId,
+        nextPage: type === exports.WidgetType.Dashboard ? projectNextPage : featureNextPage,
+        prevPage: type === exports.WidgetType.Dashboard ? projectPrevPage : featurePrevPage,
+        changePage: type === exports.WidgetType.Dashboard ? projectChangePage : featureChangePage,
+    };
+};
+
+const useEditControl = (type, elementConfig) => {
+    const { attributes, controls, dataSources, changeControls } = useWidgetContext(type);
+    const { children, options } = elementConfig || {};
+    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 attributeName = (control?.targetAttributeName ?? valueElement?.attributeName);
+    const value = React.useMemo(() => {
         const currentValue = controls[attributeName] === undefined
             ? attributes.find(({ attributeName: name }) => name === attributeName)?.value
             : controls[attributeName];
@@ -10773,6 +10478,307 @@ const tooltipValueFromRelatedFeatures = (t, value, relatedAttributes, layerInfo)
     return formatChartRelatedValue(t, value, layerInfo, relatedAttributes);
 };
 
+const useRenderContainerItem = (type, renderElement) => {
+    const { config, layerInfo, selectedTabId, attributes } = useWidgetContext(type);
+    return React.useCallback((elementConfig, attribute) => {
+        const { id, options, style, children } = elementConfig || {};
+        const { hideEmpty, innerTemplateStyle } = options || {};
+        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 => ({
+            type: "attributeValue",
+            ...child,
+            attributeName: attribute,
+            options: { noUnits: hasUnits, ...child.options },
+        }));
+        const attr = attribute
+            ? layerInfo?.configuration?.attributesConfiguration?.attributes?.find(({ attributeName }) => attributeName === attribute)
+            : null;
+        if (hasIcon) {
+            elementChildren[iconIndex] = {
+                ...elementChildren[iconIndex],
+                type: attr?.icon?.type?.toLowerCase(),
+                value: attr?.icon?.resourceId || attr?.icon?.url || attr?.icon?.iconName,
+                attributeName: null,
+            };
+        }
+        const render = attribute
+            ? getRenderElement({
+                config,
+                elementConfig: {
+                    ...elementConfig,
+                    children: elementChildren,
+                },
+                selectedTabId,
+                attributes,
+                layerInfo,
+                type,
+            })
+            : renderElement;
+        const value = render({ id: "value" });
+        return {
+            id,
+            value,
+            hideEmpty,
+            style: innerTemplateStyle || style,
+            hasIcon,
+            hasUnits,
+            render,
+        };
+    }, [config, layerInfo, selectedTabId, attributes, type, renderElement]);
+};
+
+const useContainerAttributes = ({ elementConfig, type, renderElement }) => {
+    const getRenderContainerItem = useRenderContainerItem(type, renderElement);
+    const { options } = elementConfig || {};
+    const { attributes: optionAttributes, useProjectHiddenAttributes } = options || {};
+    const { attributes: contextAttributes, layerInfo } = useWidgetContext(type);
+    const [hiddenAttributes] = useLayerHiddenAttributes(layerInfo?.name ?? "");
+    const attributesToRender = React.useMemo(() => {
+        if (!optionAttributes)
+            return null;
+        const baseList = optionAttributes.length === 0
+            ? contextAttributes?.map(({ attributeName }) => attributeName) ?? []
+            : optionAttributes;
+        if (!useProjectHiddenAttributes)
+            return baseList;
+        return baseList.filter(attribute => !hiddenAttributes.includes(attribute));
+    }, [optionAttributes, contextAttributes, hiddenAttributes, useProjectHiddenAttributes]);
+    return { getRenderContainerItem, attributesToRender };
+};
+
+const useFetchWithAuth = (url, transform, cleanup) => {
+    const [data, setData] = React.useState(null);
+    const loadingRef = React.useRef(false);
+    const transformRef = React.useRef(transform);
+    const cleanupRef = React.useRef(cleanup);
+    transformRef.current = transform;
+    cleanupRef.current = cleanup;
+    const fetchData = React.useCallback(() => {
+        if (!url || loadingRef.current)
+            return;
+        loadingRef.current = true;
+        const token = window.localStorage.getItem(api.STORAGE_TOKEN_KEY);
+        fetch(url, {
+            headers: token ? { Authorization: `Bearer ${token}` } : {},
+        })
+            .then(res => (res.ok ? transformRef.current(res) : null))
+            .then(setData)
+            .catch(() => {
+            setData(null);
+        })
+            .finally(() => {
+            loadingRef.current = false;
+        });
+    }, [url]);
+    React.useEffect(() => {
+        if (url) {
+            fetchData();
+        }
+        else {
+            setData(null);
+        }
+    }, [url]);
+    React.useEffect(() => () => {
+        if (data !== null)
+            cleanupRef.current?.(data);
+    }, [data]);
+    return data;
+};
+
+const toObjectUrl = (res) => res.blob().then(blob => URL.createObjectURL(blob));
+const useFetchImageWithAuth = (url) => useFetchWithAuth(url, toObjectUrl, URL.revokeObjectURL);
+
+const useGlobalContext = () => {
+    const { t, language, themeName, api, ewktGeometry } = React.useContext(GlobalContext) || {};
+    const translate = React.useCallback((value, options) => {
+        if (t)
+            return t(value, options);
+        return options?.defaultValue ?? value;
+    }, [t]);
+    return React.useMemo(() => ({
+        t: translate,
+        language,
+        themeName,
+        api,
+        ewktGeometry,
+    }), [language, translate, api, ewktGeometry, themeName]);
+};
+
+const HEIGHT_OFFSET = 20;
+const FILL_OPACITY = 0.28;
+const lineGenerator = line()
+    .x(d => d[0])
+    .y(d => d[1])
+    .curve(monotoneX);
+const areaGenerator = (height) => area()
+    .defined(d => d !== null)
+    .x(d => d[0])
+    .y0(height - HEIGHT_OFFSET)
+    .y1(d => d[1])
+    .curve(monotoneX);
+function getLinePoints(numPoints, svgLine) {
+    if (!svgLine?.getTotalLength) {
+        return [];
+    }
+    const lineLength = svgLine.getTotalLength();
+    let interval;
+    if (numPoints === 1) {
+        interval = 0;
+    }
+    else {
+        interval = lineLength / (numPoints - 1);
+    }
+    return range(numPoints)
+        .filter(d => d * interval)
+        .map(d => {
+        const value = d * interval;
+        const { x, y } = svgLine.getPointAtLength(value);
+        return [x, y];
+    });
+}
+function wrap() {
+    const width = 80;
+    const padding = 10;
+    const self = select(this);
+    let textLength = self.node().getComputedTextLength();
+    let text = self.text();
+    while (textLength > width - 2 * padding && text.length > 0) {
+        text = text.slice(0, -1);
+        self.text(`${text}...`);
+        textLength = self.node().getComputedTextLength();
+    }
+}
+const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, markers, showMarkers, }) => {
+    const { t } = useGlobalContext();
+    const { layerInfos } = useWidgetContext();
+    const strokeColors = relatedAttributes
+        .filter(({ chartAxis }) => chartAxis === "y")
+        .map(({ axisColor }) => axisColor);
+    const ref = React.useRef({
+        path: null,
+        area: null,
+        points: [],
+    });
+    const onChange = React.useCallback((range) => {
+        const { path, area, points } = ref.current;
+        let filteredPoints = [...points];
+        if (range) {
+            const hundred = 100;
+            const x1 = +width * (range[0] / hundred);
+            const x2 = +width * (range[1] / hundred);
+            filteredPoints = points.filter(([x]) => x >= x1 && x <= x2);
+        }
+        path && path.attr("d", lineGenerator(filteredPoints));
+        area && area.attr("d", areaGenerator(height)(filteredPoints));
+    }, [height, width]);
+    const customize = React.useCallback(({ svg }) => {
+        svg.style("overflow", "visible");
+        svg
+            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} line,
+              .${charts.lineChartClassNames.lineChartYScaleGlobal} line,
+              .domain`)
+            .each((_, index, nodes) => {
+            nodes[index].remove();
+        });
+        svg
+            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} .tick`)
+            .each((_, index, nodes) => {
+            if (!index) {
+                nodes[index].style.textAnchor = "start";
+            }
+            if (index === nodes.length - 1) {
+                nodes[index].style.textAnchor = "end";
+            }
+            if (markers) {
+                nodes[index].remove();
+            }
+            if (showMarkers) {
+                if (index % showMarkers !== 0) {
+                    nodes[index].remove();
+                }
+            }
+            else {
+                if (index && index < nodes.length - 1) {
+                    nodes[index].remove();
+                }
+            }
+        });
+        svg
+            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} .tick text`)
+            .attr("y", 16);
+        svg
+            .selectAll(`.${charts.lineChartClassNames.lineChartYScaleGlobal} .tick text`)
+            .text(item => {
+            if (!item)
+                return 0;
+            const dataSource = dataSources?.find(({ name }) => name === relatedAttributes[0].dataSourceName);
+            const layerInfo = dataSource
+                ? layerInfos.find(({ name }) => name === dataSource.layerName)
+                : null;
+            const attribute = layerInfo?.configuration?.attributesConfiguration?.attributes[relatedAttributes[0].attributeName];
+            return attribute
+                ? formatAttributeValue({
+                    t,
+                    type: attribute.type,
+                    value: item,
+                    stringFormat: attribute.stringFormat,
+                    noUnits: true,
+                })
+                : item;
+        })
+            .each(wrap);
+        svg.selectAll(".tick text").attr("style", `color: ${fontColor}`);
+        const global = svg.select(`.${charts.lineChartClassNames.lineChartLinesGlobal}`);
+        const lineChartLines = svg.selectAll(`.${charts.lineChartClassNames.lineChartLine}`);
+        const defs = [];
+        lineChartLines.each((_, index, nodes) => {
+            const lineChartLine = nodes[index];
+            const gradientId = lodash.uniqueId(`${chartId}-gradient-`);
+            const color = strokeColors[index] || defaultColor;
+            const newPath = global
+                .append("path")
+                .attr("stroke", color)
+                .attr("stroke-width", "0")
+                .attr("class", charts.lineChartClassNames.lineChartLine);
+            const points = getLinePoints(+width, lineChartLine);
+            const area = global
+                .append("path")
+                .attr("fill", `url(#${gradientId})`)
+                .attr("stroke-width", "0")
+                .attr("fill-opacity", FILL_OPACITY);
+            defs.push(`
+          <linearGradient id="${gradientId}" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stop-color="${color}" stop-opacity="1" />
+            <stop offset="1" stop-color="${color}" stop-opacity="0" />
+          </linearGradient>
+        `);
+            ref.current = {
+                path: newPath,
+                area,
+                points,
+            };
+            onChange();
+        });
+        svg.append("defs").html(() => defs.join(""));
+    }, [
+        fontColor,
+        dataSources,
+        layerInfos,
+        relatedAttributes,
+        chartId,
+        strokeColors,
+        defaultColor,
+        width,
+        onChange,
+        showMarkers,
+        markers,
+    ]);
+    return [customize, onChange];
+};
+
 const useWidgetConfig = (type = exports.WidgetType.Dashboard) => {
     const { config: configProp, containerIds, projectInfo, layerInfo, isEditing } = useWidgetContext(type);
     const config = React.useMemo(() => {
@@ -12741,6 +12747,7 @@ exports.useAppHeight = useAppHeight;
 exports.useAutoCompleteControl = useAutoCompleteControl;
 exports.useChartChange = useChartChange;
 exports.useChartData = useChartData;
+exports.useContainerAttributes = useContainerAttributes;
 exports.useCurrentPageLayers = useCurrentPageLayers;
 exports.useCustomFeatureSelect = useCustomFeatureSelect;
 exports.useDashboardHeader = useDashboardHeader;