@gooddata/sdk-ui-metric-component 0.0.0-stage → 11.65.0-alpha.11

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorField.events.d.ts

@@ -0,0 +1,11 @@
+import { type IEvent } from "../../../shared/eventing/EventContext.js";
+declare function metricDefinitionCreatedEvent(): IEvent;
+declare function editorClickSuggestionDetailLinkEvent(): IEvent;
+declare function editorToggleSuggestionDetailsEvent(): IEvent;
+export declare const events: {
+    metricDefinitionCreatedEvent: typeof metricDefinitionCreatedEvent;
+    editorClickSuggestionDetailLinkEvent: typeof editorClickSuggestionDetailLinkEvent;
+    editorToggleSuggestionDetailsEvent: typeof editorToggleSuggestionDetailsEvent;
+};
+export {};
+//# sourceMappingURL=MaqlEditorField.events.d.ts.map

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorField.events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaqlEditorField.events.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlEditorField/MaqlEditorField.events.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAGvE,iBAAS,4BAA4B,IAAI,MAAM,CAK9C;AAED,iBAAS,oCAAoC,IAAI,MAAM,CAKtD;AAED,iBAAS,kCAAkC,IAAI,MAAM,CAKpD;AAED,eAAO,MAAM,MAAM;;;;CAIlB,CAAC"}

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorField.events.js

@@ -0,0 +1,25 @@
+// (C) 2021-2026 GoodData Corporation
+import { EventCategories, Events } from "../../../shared/eventing/events.js";
+function metricDefinitionCreatedEvent() {
+    return {
+        action: Events.metricDefinitionCreated,
+        category: EventCategories.metricComponent,
+    };
+}
+function editorClickSuggestionDetailLinkEvent() {
+    return {
+        action: Events.editorSuggestionDetailLinkClick,
+        category: EventCategories.metricComponent,
+    };
+}
+function editorToggleSuggestionDetailsEvent() {
+    return {
+        action: Events.editorToggleSuggestionDetails,
+        category: EventCategories.metricComponent,
+    };
+}
+export const events = {
+    metricDefinitionCreatedEvent,
+    editorClickSuggestionDetailLinkEvent,
+    editorToggleSuggestionDetailsEvent,
+};

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorField.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useCallback, useRef, useState } from "react";
+import { defineMessages } from "react-intl";
+import { useToastMessage } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { FormField } from "../data.js";
+import { useMetricFormField } from "../hooks/useMetricFormField.js";
+import { getMaqlValue } from "../maqlFieldFunctions.js";
+import { MaqlEditorEditor } from "./MaqlEditorEditor.js";
+import { HeaderAction, MaqlEditorHeader } from "./MaqlEditorHeader.js";
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        background: theme.globals.colors.editorBackground,
+    },
+    headerHolder: {
+        flex: "0 0 auto",
+        display: "flex",
+        height: 36,
+    },
+    contentHolder: {
+        flex: "1 1 auto",
+        display: "flex",
+        position: "relative",
+    },
+}));
+const messages = defineMessages({
+    runSuccess: {
+        id: "metricComponent.editMetric.run.success",
+    },
+});
+export function MaqlEditorField({ isSQL, onSQL, onRun, onMetricOpen }) {
+    const { classes, cx } = useStyles();
+    const { value } = useMetricFormField(FormField.expression);
+    const api = useRef(null);
+    const [titles, setTitles] = useState(true);
+    const { addSuccess } = useToastMessage();
+    const onRunWithAck = useCallback(() => {
+        addSuccess(messages.runSuccess);
+        if (onRun) {
+            onRun();
+        }
+    }, [onRun, addSuccess]);
+    return (_jsxs("div", { className: cx(classes.root), children: [_jsx("div", { className: cx(classes.headerHolder), children: _jsx(MaqlEditorHeader, { areTitles: titles, isSQL: isSQL, isMaqlDefined: !!getMaqlValue(value), onAction: (action) => {
+                        switch (action) {
+                            case HeaderAction.Format:
+                                api.current?.autoformat();
+                                break;
+                            case HeaderAction.Titles:
+                                setTitles(!titles);
+                                break;
+                            case HeaderAction.SQL:
+                                if (onSQL) {
+                                    onSQL();
+                                }
+                                break;
+                            case HeaderAction.Run:
+                                if (onRun) {
+                                    onRun();
+                                }
+                                break;
+                        }
+                    } }) }), _jsx("div", { className: cx(classes.contentHolder), children: _jsx(MaqlEditorEditor, { ref: api, titles: titles, onMetricOpen: onMetricOpen, onRun: onRunWithAck }) })] }));
+}

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorHeader.d.ts

@@ -0,0 +1,14 @@
+export declare enum HeaderAction {
+    Run = "run",
+    SQL = "sql",
+    Format = "format",
+    Titles = "titles"
+}
+export interface IMaqlEditorHeader {
+    isSQL?: boolean;
+    areTitles?: boolean;
+    isMaqlDefined?: boolean;
+    onAction?: (action: HeaderAction) => void;
+}
+export declare function MaqlEditorHeader({ areTitles, isMaqlDefined, isSQL, onAction }: IMaqlEditorHeader): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MaqlEditorHeader.d.ts.map

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaqlEditorHeader.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlEditorField/MaqlEditorHeader.tsx"],"names":[],"mappings":"AAWA,oBAAY,YAAY;IACpB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;CACpB;AAED,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC7C;AAmDD,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAuDhG"}

package/esm/MetricComponent/Form/MaqlEditorField/MaqlEditorHeader.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { FormattedMessage, defineMessages, useIntl } from "react-intl";
+import { IconRun } from "@gooddata/sdk-ui-kit";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { useFeaturesAndSettings } from "../../FeaturesAndSettings/index.js";
+import { PartHeader } from "../PartHeader/PartHeader.js";
+import { PartHeaderButton } from "../PartHeader/PartHeaderButton.js";
+export var HeaderAction;
+(function (HeaderAction) {
+    HeaderAction["Run"] = "run";
+    HeaderAction["SQL"] = "sql";
+    HeaderAction["Format"] = "format";
+    HeaderAction["Titles"] = "titles";
+})(HeaderAction || (HeaderAction = {}));
+const useStyles = makeStyles()((theme) => {
+    return {
+        run: {
+            "&.disabled svg path": {
+                fill: theme.globals.colors.defaultBorderDarker,
+            },
+        },
+    };
+});
+const messages = defineMessages({
+    autoFormat: {
+        id: "metricComponent.editMetric.autoFormat",
+    },
+    autoFormatBubble: {
+        id: "metricComponent.editMetric.autoFormatBubble",
+    },
+    autoFormatBubbleMac: {
+        id: "metricComponent.editMetric.autoFormatBubbleMac",
+    },
+    run: {
+        id: "metricComponent.editMetric.run",
+    },
+    runBubble: {
+        id: "metricComponent.editMetric.runBubble",
+    },
+    runBubbleMac: {
+        id: "metricComponent.editMetric.runBubbleMac",
+    },
+    runBubbleDisabled: {
+        id: "metricComponent.editMetric.runBubble.disabled",
+    },
+    sql: {
+        id: "metricComponent.editMetric.sql",
+    },
+    sqlBubbleDisabled: {
+        id: "metricComponent.editMetric.sql.disabled",
+    },
+    decoratorsShow: {
+        id: "metricComponent.editMetric.decoratorsShow",
+    },
+    decoratorsHide: {
+        id: "metricComponent.editMetric.decoratorsHide",
+    },
+});
+export function MaqlEditorHeader({ areTitles, isMaqlDefined, isSQL, onAction }) {
+    const intl = useIntl();
+    const { classes } = useStyles();
+    const { canShowResults, canShowSql } = useFeaturesAndSettings();
+    return (_jsx(PartHeader, { className: "s-maql_definition_header", TitleContent: _jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.definition" }), TitleTooltip: _jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.definition.tooltip" }), buttons: [
+            canShowResults && (_jsx(PartHeaderButton, { disabledTooltip: intl.formatMessage(messages.runBubbleDisabled), tooltip: intl.formatMessage(messages.runBubble), tooltipMac: intl.formatMessage(messages.runBubbleMac), value: intl.formatMessage(messages.run), elementIconLeft: _jsx(IconRun, {}), disabled: !isMaqlDefined, onClick: () => onAction?.(HeaderAction.Run), sClassName: "s-run-button", className: classes.run }, 0)),
+            canShowSql && !isSQL && (_jsx(PartHeaderButton, { disabledTooltip: intl.formatMessage(messages.sqlBubbleDisabled), value: intl.formatMessage(messages.sql), disabled: !isMaqlDefined, onClick: () => onAction?.(HeaderAction.SQL), sClassName: "s-show-sql-button" }, 1)),
+        ], dropdown: [
+            {
+                type: "link",
+                title: intl.formatMessage(messages.autoFormat),
+                tooltip: intl.formatMessage(messages.autoFormatBubble),
+                tooltipMac: intl.formatMessage(messages.autoFormatBubbleMac),
+                onClick: () => onAction?.(HeaderAction.Format),
+            },
+            { type: "separator" },
+            {
+                type: "link",
+                title: areTitles
+                    ? intl.formatMessage(messages.decoratorsHide)
+                    : intl.formatMessage(messages.decoratorsShow),
+                onClick: () => onAction?.(HeaderAction.Titles),
+            },
+        ] }));
+}

package/esm/MetricComponent/Form/MaqlEditorField/suggestionDetailsFunctions.d.ts

@@ -0,0 +1,3 @@
+export declare function useDocumentationLinkProcessing(): (event: MouseEvent) => void;
+export declare function useDocumentationLinkContextMenuProcessing(): (event: MouseEvent) => void;
+//# sourceMappingURL=suggestionDetailsFunctions.d.ts.map

package/esm/MetricComponent/Form/MaqlEditorField/suggestionDetailsFunctions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestionDetailsFunctions.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlEditorField/suggestionDetailsFunctions.ts"],"names":[],"mappings":"AAiDA,wBAAgB,8BAA8B,IAAI,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAiB5E;AAED,wBAAgB,yCAAyC,IAAI,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CASvF"}

package/esm/MetricComponent/Form/MaqlEditorField/suggestionDetailsFunctions.js

@@ -0,0 +1,57 @@
+// (C) 2021-2026 GoodData Corporation
+import { useCallback } from "react";
+import { useEvents } from "../../../shared/eventing/useEvents.js";
+import { events } from "./MaqlEditorField.events.js";
+function shouldModifyHref(href) {
+    return !href || href === "#" || href === `${location.origin}${location.pathname}#`;
+}
+/**
+ *  monaco suggestion details links are processed with href=#, we need to change link to correct value, which is in data-href attribute
+ *  https://github.com/microsoft/vscode/blob/1eaf52cfd50c05b93e73eb6e96046c23257018ad/src/vs/base/browser/markdownRenderer.ts#L159
+ * @param element -
+ */
+function fixMonacoMarkdownAnchorHref(element) {
+    if (shouldModifyHref(element.href) && element.dataset["href"]) {
+        const href = element.dataset["href"];
+        element.setAttribute("href", href);
+        element.href = href;
+    }
+    return element;
+}
+function eventTargetsToClassArray(eventTargets) {
+    return eventTargets
+        .map((element) => element.classList)
+        .map((list) => (list ? Array.from(list.values()) : []))
+        .map((classArray) => classArray.join(" "));
+}
+function containsClasses(pathClasses, ...classNames) {
+    return classNames.every((className) => pathClasses.some((pathClass) => pathClass.includes(className)));
+}
+function isAnchorClickInSuggestDetails(event) {
+    if (event.target?.tagName.toLowerCase() !== "a") {
+        return false;
+    }
+    const pathClasses = eventTargetsToClassArray(event.composedPath());
+    return containsClasses(pathClasses, "maql-editor", "suggest-details");
+}
+export function useDocumentationLinkProcessing() {
+    const { editorClickSuggestionDetailLinkEvent } = useEvents(events);
+    return useCallback((event) => {
+        if (!isAnchorClickInSuggestDetails(event)) {
+            return;
+        }
+        if (event.ctrlKey || event.metaKey) {
+            fixMonacoMarkdownAnchorHref(event.target);
+        }
+        editorClickSuggestionDetailLinkEvent();
+    }, [editorClickSuggestionDetailLinkEvent]);
+}
+export function useDocumentationLinkContextMenuProcessing() {
+    return useCallback((event) => {
+        if (!isAnchorClickInSuggestDetails(event)) {
+            return;
+        }
+        const links = document.querySelectorAll(`a[data-href][href="#"]`);
+        Array.from(links).forEach(fixMonacoMarkdownAnchorHref);
+    }, []);
+}

package/esm/MetricComponent/Form/MaqlEditorUtils/Placeholder.d.ts

@@ -0,0 +1,8 @@
+interface IPlaceholderProps {
+    visible: boolean;
+    selector: string;
+    readonly?: boolean;
+}
+export declare function Placeholder({ visible, readonly, selector }: IPlaceholderProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=Placeholder.d.ts.map

package/esm/MetricComponent/Form/MaqlEditorUtils/Placeholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlEditorUtils/Placeholder.tsx"],"names":[],"mappings":"AA0BA,UAAU,iBAAiB;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,iBAAiB,kDAoC7E"}

package/esm/MetricComponent/Form/MaqlEditorUtils/Placeholder.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useEffect, useRef, useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { isMac } from "../../../shared/platform.js";
+import { makeStyles } from "../../../shared/theme/index.js";
+const useStyles = makeStyles()((theme) => ({
+    placeHolder: {
+        background: "transparent",
+        position: "absolute",
+        zIndex: 5001,
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: theme.globals.colors.placeholder,
+        fontFamily: theme.fonts.placeholder,
+        pointerEvents: "none",
+        ".metricComponent-editMetric-placeholder": {
+            color: theme.globals.colors.maqlKeyword,
+        },
+    },
+}));
+export function Placeholder({ visible, readonly, selector }) {
+    const element = useRef(null);
+    const { classes, cx } = useStyles();
+    const selected = useSelectedElement(element, selector, visible);
+    const style = useSelectorPosition(element, selected);
+    if (!visible) {
+        return null;
+    }
+    return (_jsx("div", { className: cx(classes.placeHolder, "s-editor-placeholder"), ref: element, style: style, children: readonly ? (_jsx(FormattedMessage, { id: "metricComponent.editMetric.placeholder.readOnly" })) : isMac() ? (_jsx(FormattedMessage, { id: "metricComponent.editMetric.placeholderMac", values: {
+                placeholder: (chunk) => (_jsx("span", { className: "metricComponent-editMetric-placeholder", children: chunk })),
+            } })) : (_jsx(FormattedMessage, { id: "metricComponent.editMetric.placeholder", values: {
+                placeholder: (chunk) => (_jsx("span", { className: "metricComponent-editMetric-placeholder", children: chunk })),
+            } })) }));
+}
+function useSelectedElement(ref, selector, visible) {
+    const element = ref.current;
+    const parent = element?.parentElement;
+    const [selected, setSelected] = useState(null);
+    useEffect(() => {
+        if (!visible || !parent) {
+            setSelected(null);
+            return;
+        }
+        if (selected) {
+            return;
+        }
+        const timer = window.setTimeout(() => setSelected(parent && parent.querySelector(selector)), 10);
+        return () => window.clearTimeout(timer);
+    }, [parent, selected, selector, visible]);
+    return selected;
+}
+function useSelectorPosition(ref, selected) {
+    const [style, setStyle] = useState({ display: "none" });
+    const element = ref.current;
+    const parent = element?.parentElement;
+    useEffect(() => {
+        if (!parent || !selected) {
+            setStyle({ display: "none" });
+            return;
+        }
+        const parentBounding = parent.getBoundingClientRect();
+        const boundedBounding = selected.getBoundingClientRect();
+        const top = boundedBounding.top - parentBounding.top;
+        const left = boundedBounding.left - parentBounding.left;
+        setStyle({
+            top,
+            left,
+        });
+    }, [parent, selected]);
+    return style;
+}

package/esm/MetricComponent/Form/MaqlResult/MaqlResult.d.ts

@@ -0,0 +1,19 @@
+import { type ICatalogAttribute } from "@gooddata/sdk-model";
+import { type IMeasureSetting } from "../../metric/metricHelpers.js";
+import { type useExecute } from "../hooks/useExecute.js";
+export declare const MaqlResultTableArea = "maql_result_table";
+export interface IMaqlResultProps {
+    execute: ReturnType<typeof useExecute>;
+    attributes?: Array<ICatalogAttribute>;
+    catalog?: {
+        available: ICatalogAttribute[];
+        all: ICatalogAttribute[];
+    };
+    catalogLoading?: boolean;
+    onContext?: (attrs: Array<ICatalogAttribute>) => void;
+    onContextOpen?: () => void;
+    display?: IMeasureSetting["display"];
+    onDisplay?: (display: IMeasureSetting["display"]) => void;
+}
+export declare function MaqlResult({ attributes, execute, catalog, catalogLoading, onContextOpen, onContext, display, onDisplay, }: IMaqlResultProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MaqlResult.d.ts.map

package/esm/MetricComponent/Form/MaqlResult/MaqlResult.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaqlResult.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlResult/MaqlResult.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAO7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIzD,eAAO,MAAM,mBAAmB,sBAAsB,CAAC;AA+GvD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE;QAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;QAAC,GAAG,EAAE,iBAAiB,EAAE,CAAA;KAAE,CAAC;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,wBAAgB,UAAU,CAAC,EACvB,UAAe,EACf,OAAO,EACP,OAAO,EACP,cAAc,EACd,aAAa,EACb,SAAS,EACT,OAAO,EACP,SAAS,GACZ,EAAE,gBAAgB,2CA8FlB"}

package/esm/MetricComponent/Form/MaqlResult/MaqlResult.js

@@ -0,0 +1,144 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { useIntl } from "react-intl";
+import { ErrorComponent } from "@gooddata/sdk-ui";
+import { Headline } from "@gooddata/sdk-ui-charts";
+import { LoadingSpinner } from "@gooddata/sdk-ui-kit";
+import { PivotTable } from "@gooddata/sdk-ui-pivot";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { HeaderAction, MaqlResultHeader } from "./MaqlResultHeader.js";
+export const MaqlResultTableArea = "maql_result_table";
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+    },
+    headerHolder: {
+        flex: "0 0 auto",
+        display: "flex",
+        height: 36,
+    },
+    contentHolder: {
+        flex: "1 1 auto",
+        display: "flex",
+        position: "relative",
+        minHeight: 40,
+    },
+    loading: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginLeft: "-16px",
+        marginTop: "-16px",
+    },
+    computing: {
+        height: "100%",
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        marginLeft: 60,
+        fontSize: "14px",
+        color: theme.globals.colors.defaultStateBlank,
+        ".gd-loading-spinner": {
+            position: "absolute",
+            left: -40,
+            top: 0,
+            bottom: 0,
+            scale: "0.75",
+        },
+    },
+    error: {
+        height: "100%",
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        marginLeft: 60,
+        fontSize: "14px",
+        color: theme.globals.colors.defaultStateBlank,
+        "div.icon": {
+            position: "absolute",
+            top: 0,
+            left: "-40px",
+            bottom: 0,
+            fontSize: "32px",
+            lineHeight: "32px",
+        },
+    },
+    //pivot table
+    table: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        minHeight: 200,
+        ".gd-table-component .ag-root-wrapper": {
+            backgroundColor: "transparent",
+        },
+        ".gd-table-component .ag-row": {
+            backgroundColor: "transparent",
+        },
+        ".gd-table-component .ag-header": {
+            backgroundColor: "transparent",
+        },
+        ".gd-table-component .gd-table-loading": {
+            backgroundColor: "transparent",
+        },
+        ".gd-table-component .gd-table .gd-column-index-0, .gd-table-component .gd-table .gd-column-group-header--first": {
+            paddingLeft: 20,
+        },
+        ".gd-table-component .gd-table .ag-header-row .ag-header-cell:last-child, .gd-table-component .gd-table .ag-row .ag-cell:last-child": {
+            paddingRight: 20,
+        },
+    },
+    //headline
+    headline: {
+        display: "flex",
+        alignItems: "center",
+        ".headline": {
+            display: "flex",
+            gap: 5,
+            margin: "-10px 20px 0 20px",
+            lineHeight: "14px",
+        },
+        ".headline:before": {
+            content: '" = "',
+        },
+    },
+}));
+export function MaqlResult({ attributes = [], execute, catalog, catalogLoading, onContextOpen, onContext, display, onDisplay, }) {
+    const { classes, cx } = useStyles();
+    const intl = useIntl();
+    return (_jsxs("div", { className: cx(classes.root), children: [_jsx("div", { className: cx(classes.headerHolder), children: _jsx(MaqlResultHeader, { catalog: catalog, catalogLoading: catalogLoading, display: display, attributes: attributes, onAction: (action, { selected, limit, ranking }) => {
+                        switch (action) {
+                            case HeaderAction.Context:
+                                if (onContext) {
+                                    onContext(selected || []);
+                                }
+                                break;
+                            case HeaderAction.OpenContext:
+                                if (onContextOpen) {
+                                    onContextOpen();
+                                }
+                                break;
+                            case HeaderAction.Display:
+                                if (onDisplay) {
+                                    onDisplay({ limit: limit || 10, ranking: ranking || "top" });
+                                }
+                                break;
+                        }
+                    } }) }), _jsx("div", { className: cx(classes.contentHolder), children: execute && (_jsxs(_Fragment, { children: [attributes.length > 0 && (_jsx("div", { className: cx(classes.table), "data-area": MaqlResultTableArea, children: _jsx(PivotTable, { ...execute, config: {
+                                    columnSizing: {
+                                        defaultWidth: "viewport",
+                                        growToFit: true,
+                                    },
+                                }, LoadingComponent: () => (_jsx(LoadingSpinner, { className: cx(classes.loading, "large") })), ErrorComponent: () => (_jsx(ErrorComponent, { message: intl.formatMessage({
+                                        id: "metricComponent.editMetric.metric.result.error.title",
+                                    }), description: intl.formatMessage({
+                                        id: "metricComponent.editMetric.metric.result.error",
+                                    }) })) }) })), attributes.length === 0 && (_jsx("div", { className: cx(classes.headline), children: _jsx(Headline, { primaryMeasure: execute.measures[0], LoadingComponent: () => (_jsxs("div", { className: cx(classes.computing), children: [_jsx(LoadingSpinner, { className: "large" }), _jsx("div", { children: intl.formatMessage({
+                                                id: "metricComponent.editMetric.metric.result.computing",
+                                            }) })] })), ErrorComponent: () => (_jsxs("div", { className: cx(classes.error), children: [_jsx("div", { className: "icon gd-icon-warning" }), _jsx("div", { children: intl.formatMessage({
+                                                id: "metricComponent.editMetric.metric.result.error",
+                                            }) })] })) }) }))] })) })] }));
+}

package/esm/MetricComponent/Form/MaqlResult/MaqlResultHeader.d.ts

@@ -0,0 +1,23 @@
+import { type ICatalogAttribute } from "@gooddata/sdk-model";
+import { type IMeasureSetting } from "../../metric/metricHelpers.js";
+export declare enum HeaderAction {
+    Context = "context",
+    Display = "display",
+    OpenContext = "open-context"
+}
+export interface IMaqlResultHeader {
+    catalog?: {
+        available: ICatalogAttribute[];
+        all: ICatalogAttribute[];
+    };
+    catalogLoading?: boolean;
+    attributes?: Array<ICatalogAttribute>;
+    display?: IMeasureSetting["display"];
+    onAction?: (action: HeaderAction, opts: {
+        selected?: Array<ICatalogAttribute>;
+        limit?: IMeasureSetting["display"]["limit"];
+        ranking?: IMeasureSetting["display"]["ranking"];
+    }) => void;
+}
+export declare function MaqlResultHeader({ display, catalog, catalogLoading, attributes, onAction, }: IMaqlResultHeader): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MaqlResultHeader.d.ts.map

package/esm/MetricComponent/Form/MaqlResult/MaqlResultHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaqlResultHeader.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlResult/MaqlResultHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAOrE,oBAAY,YAAY;IACpB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,WAAW,iBAAiB;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAC9B,OAAO,CAAC,EAAE;QAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;QAAC,GAAG,EAAE,iBAAiB,EAAE,CAAA;KAAE,CAAC;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,CACP,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE;QACF,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACpC,KAAK,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC;QAC5C,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;KACnD,KACA,IAAI,CAAC;CACb;AAiCD,wBAAgB,gBAAgB,CAAC,EAC7B,OAAuC,EACvC,OAAoC,EACpC,cAAc,EACd,UAAe,EACf,QAAQ,GACX,EAAE,iBAAiB,2CAyDnB"}

package/esm/MetricComponent/Form/MaqlResult/MaqlResultHeader.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2021-2026 GoodData Corporation
+import { Fragment } from "react";
+import { FormattedMessage, defineMessages, useIntl } from "react-intl";
+import { makeStyles } from "../../../shared/theme/index.js";
+import { PartDivider, PartHeader } from "../PartHeader/PartHeader.js";
+import { PartHeaderButton } from "../PartHeader/PartHeaderButton.js";
+import { AttributesSelect } from "./components/AttributesSelect.js";
+import { LimitSelect } from "./components/LimitSelect.js";
+export var HeaderAction;
+(function (HeaderAction) {
+    HeaderAction["Context"] = "context";
+    HeaderAction["Display"] = "display";
+    HeaderAction["OpenContext"] = "open-context";
+})(HeaderAction || (HeaderAction = {}));
+const useStyles = makeStyles()(() => ({
+    limit: {
+        marginRight: "-15px",
+        ".gd-button-text": {
+            fontSize: "12px",
+            textDecoration: "none !important",
+            "&:hover": {
+                textDecoration: "underline !important",
+            },
+        },
+    },
+}));
+const messages = defineMessages({
+    context: {
+        id: "metricComponent.editMetric.metric.result.context",
+    },
+    display: {
+        id: "metricComponent.editMetric.metric.result.context.display",
+    },
+    displayTop: {
+        id: "metricComponent.editMetric.metric.result.context.displayTop",
+    },
+    displayBottom: {
+        id: "metricComponent.editMetric.metric.result.context.displayBottom",
+    },
+});
+export function MaqlResultHeader({ display = { limit: 10, ranking: "top" }, catalog = { available: [], all: [] }, catalogLoading, attributes = [], onAction, }) {
+    const { classes } = useStyles();
+    const intl = useIntl();
+    return (_jsx(PartHeader, { className: "s-maql_result_header", TitleContent: _jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.result" }), TitleTooltip: _jsx(FormattedMessage, { id: "metricComponent.editMetric.metric.result.tooltip" }), buttons: [
+            _jsx(AttributesSelect, { loading: catalogLoading, all: catalog.all, attributes: catalog.available, preselected: attributes, opener: ({ openDropdown }) => (_jsx(PartHeaderButton, { value: intl.formatMessage(messages.context), iconLeft: attributes.length > 0 ? "gd-icon-pencil" : "gd-icon-add", onClick: openDropdown, sClassName: "s-context-button" }, 0)), onOpen: () => onAction?.(HeaderAction.OpenContext, {}), onApply: (selected) => onAction?.(HeaderAction.Context, { selected }) }, 0),
+            attributes?.length > 0 && (_jsxs(Fragment, { children: [_jsx(PartDivider, {}), _jsx(LimitSelect, { limit: display.limit, ranking: display.ranking, opener: ({ openDropdown, isOpen }) => (_jsx(PartHeaderButton, { iconRight: isOpen ? "gd-icon-navigateup" : "gd-icon-navigatedown", value: intl.formatMessage(messages.display, {
+                                ranking: display.ranking === "top"
+                                    ? intl.formatMessage(messages.displayTop)
+                                    : intl.formatMessage(messages.displayBottom),
+                                limit: display.limit,
+                            }), onClick: openDropdown, sClassName: "s-display-button", className: classes.limit })), onApply: (limit, ranking) => onAction?.(HeaderAction.Display, { limit, ranking }), onCancel: () => null })] }, 1)),
+        ] }));
+}

package/esm/MetricComponent/Form/MaqlResult/MaqlSql.d.ts

@@ -0,0 +1,8 @@
+import { type useExplain } from "../hooks/useExplain.js";
+export interface IMaqlSqlProps {
+    explain: ReturnType<typeof useExplain>;
+    onClose?: () => void;
+    onCopy?: (status: boolean) => void;
+}
+export declare function MaqlSql({ explain, onClose, onCopy }: IMaqlSqlProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MaqlSql.d.ts.map

package/esm/MetricComponent/Form/MaqlResult/MaqlSql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaqlSql.d.ts","sourceRoot":"","sources":["../../../../src/MetricComponent/Form/MaqlResult/MaqlSql.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAgCzD,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,aAAa,2CAuClE"}