import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { useEffect } from 'react';
import { Dialog, ResizablePanelGroup, ResizablePanelSplitter, ResizablePanel, ResizablePanelSplitterLine, clsx, TreeView, ChevronDownIcon, ChevronRightIcon, MenuContentItem, MenuContent, ControlledDropdownMenu, BlankPanelContent, PanelContent, ModalHeader, Modal, ModalBody, ModalFooter, PanelSideBarHeader, ModalFooterButton, PanelHeader, Panel, PanelDivider, Button, } from '@finos/legend-art';
import { isNonNullable, prettyCONSTName } from '@finos/legend-shared';
import { ExecutionNodeTreeNodeData, ExecutionPlanViewTreeNodeData, EXECUTION_PLAN_VIEW_MODE, generateExecutionNodeTreeNodeData, PLAN_TABS, } from '../../stores/execution-plan/ExecutionPlanState.js';
import { observer } from 'mobx-react-lite';
import { ExecutionPlan, ExecutionNode, SQLExecutionNode, RelationalTDSInstantiationExecutionNode, FunctionParametersValidationNode, AllocationExecutionNode, ConstantExecutionNode, SequenceExecutionNode, StoreMappingGlobalGraphFetchExecutionNode, PureExpressionPlatformExecutionNode, RelationalClassQueryTempTableGraphFetchExecutionNode, RelationalRootQueryTempTableGraphFetchExecutionNode, RelationalCrossRootQueryTempTableGraphFetchExecutionNode, RelationalGraphFetchExecutionNode, JavaPlatformImplementation, RootGraphFetchTree, PropertyGraphFetchTree, LocalGraphFetchExecutionNode, } from '@finos/legend-graph';
import { SQLExecutionNodeViewer } from './SQLExecutionNodeViewer.js';
import { StoreMappingGlobalGraphFetchExecutionNodeViewer } from './StoreMappingGlobalGraphFetchExecutionNodeViewer.js';
import { FunctionParametersValidationNodeViewer } from './FunctionParametersValidationNodeViewer.js';
import { AllocationExecutionNodeViewer } from './AllocationExecutionNodeViewer.js';
import { ConstantExecutionNodeViewer } from './ConstantExecutionNodeViewer.js';
import { SequenceExecutionNodeViewer } from './SequenceExecutionNodeViewer.js';
import { RelationalTDSInstantiationExecutionNodeViewer } from './RelationalTDSInstantiationExecutionNodeViewer.js';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
import { RelationalRootQueryTempTableGraphFetchExecutionNodeViewer } from './RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.js';
import { RelationalClassQueryTempTableGraphFetchExecutionNodeViewer } from './RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.js';
import { RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer } from './RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.js';
const EXECUTION_PLAN = 'Execution Plan';
const generateExecutionNodePrefixLabel = (node) => {
    if (node instanceof StoreMappingGlobalGraphFetchExecutionNode ||
        node instanceof LocalGraphFetchExecutionNode) {
        if (node.graphFetchTree instanceof RootGraphFetchTree) {
            return node.graphFetchTree.class.value.name;
        }
        if (node.graphFetchTree instanceof PropertyGraphFetchTree) {
            return node.graphFetchTree.property.value.name;
        }
    }
    return '';
};
/**
 * @modularize
 * See https://github.com/finos/legend-studio/issues/65
 */
export const generateExecutionNodeLabel = (type) => {
    if (type instanceof SQLExecutionNode) {
        return `SQL Execution Node`;
    }
    else if (type instanceof RelationalTDSInstantiationExecutionNode) {
        return `Relational TDS Instantiation Execution Node`;
    }
    else if (type instanceof FunctionParametersValidationNode) {
        return `Function Parameters Validation Node`;
    }
    else if (type instanceof AllocationExecutionNode) {
        return `Allocation Execution Node (${type.varName})`;
    }
    else if (type instanceof ConstantExecutionNode) {
        return `Constant Execution Node`;
    }
    else if (type instanceof SequenceExecutionNode) {
        return `Sequence Execution Node`;
    }
    else if (type instanceof StoreMappingGlobalGraphFetchExecutionNode) {
        return `Store Mapping Global Graph Fetch Execution Node`;
    }
    else if (type instanceof RelationalRootQueryTempTableGraphFetchExecutionNode) {
        return `Relational Root Query TempTable Graph Fetch Execution Node`;
    }
    else if (type instanceof RelationalCrossRootQueryTempTableGraphFetchExecutionNode) {
        return `Relational Cross Root Query TempTable Graph Fetch Execution Node`;
    }
    else if (type instanceof RelationalClassQueryTempTableGraphFetchExecutionNode) {
        return `Relational Class Query TempTable Graph Fetch Execution Node`;
    }
    else if (type instanceof PureExpressionPlatformExecutionNode) {
        return `Pure Expression Platform Execution Node`;
    }
    else {
        return 'Other';
    }
};
export const ExecutionPlanViewerPanelContent = observer((props) => {
    const { executionPlanState } = props;
    const globalImplementationSupport = executionPlanState.plan?.globalImplementationSupport;
    const templateFunctions = executionPlanState.plan?.processingTemplateFunctions ?? [];
    const isDarkMode = !executionPlanState.applicationStore.layoutService
        .TEMPORARY__isLightColorThemeEnabled;
    if (globalImplementationSupport &&
        globalImplementationSupport instanceof JavaPlatformImplementation) {
        globalImplementationSupport.classes.sort((a, b) => (a.package + a.name).toLowerCase() > (b.package + b.name).toLowerCase()
            ? 1
            : -1);
        if (globalImplementationSupport.classes.length > 0 &&
            globalImplementationSupport.classes[0] &&
            executionPlanState.globalImplementationSupportState.selectedJavaClass ===
                undefined) {
            executionPlanState.globalImplementationSupportState.setSelectedJavaClass(`${globalImplementationSupport.classes[0]?.package}.${globalImplementationSupport.classes[0]?.name}`);
        }
    }
    return (_jsx("div", { className: "query-builder__execution-plan-form--editor", children: _jsxs("div", { className: "panel", children: [_jsx("div", { className: "panel__header query-builder__execution-plan-form--editor__header--with-tabs", children: _jsx("div", { className: "uml-element-editor__tabs", children: Object.values(PLAN_TABS).map((tab) => (_jsx("div", { onClick: () => executionPlanState.globalImplementationSupportState.setSelectedTab(tab), className: clsx('query-builder__execution-plan-form--editor__tab', {
                                'query-builder__execution-plan-form--editor__tab--active': tab ===
                                    executionPlanState.globalImplementationSupportState
                                        .selectedTab,
                            }), children: prettyCONSTName(tab) }, tab))) }) }), executionPlanState.globalImplementationSupportState.selectedTab ===
                    PLAN_TABS.GLOBAL_IMPLEMENTATION_SUPPORT &&
                    globalImplementationSupport &&
                    globalImplementationSupport instanceof JavaPlatformImplementation && (_jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { minSize: 30, size: 400, children: _jsx(PanelContent, { darkMode: isDarkMode, className: "query-builder__java__container__panel", children: _jsx("div", { className: "query-builder__java__container", children: _jsxs("div", { children: [globalImplementationSupport.classes.map((cl) => (_jsx("div", { className: clsx('query-builder__java__container__item', {
                                                    'query-builder__java__container__item--active': `${cl.package}.${cl.name}` ===
                                                        executionPlanState
                                                            .globalImplementationSupportState
                                                            .selectedJavaClass,
                                                }), children: _jsx("button", { className: "query-builder__java__container__item__btn", onClick: () => executionPlanState.globalImplementationSupportState.setSelectedJavaClass(`${cl.package}.${cl.name}`), tabIndex: -1, title: `Go to ${cl.package}.${cl.name}`, children: `${cl.package}.${cl.name}` }) }, cl.package + cl.name))), _jsx(PanelDivider, {})] }) }) }) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsx(ResizablePanel, { children: executionPlanState.globalImplementationSupportState
                                .selectedJavaClass && (_jsx(CodeEditor, { inputValue: globalImplementationSupport.classes.reduce((value, cl) => {
                                    if (executionPlanState.globalImplementationSupportState
                                        .selectedJavaClass === `${cl.package}.${cl.name}`) {
                                        return cl.source;
                                    }
                                    return value;
                                }, ''), isReadOnly: true, language: CODE_EDITOR_LANGUAGE.JAVA, hideMinimap: true })) })] })), executionPlanState.globalImplementationSupportState.selectedTab ===
                    PLAN_TABS.GENERAL &&
                    templateFunctions.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "query-builder__template--function--editor__header", children: `AuthDependent: ${executionPlanState.plan?.authDependent.toString()}` }), _jsx("div", { className: "query-builder__template--function--editor__title", children: "Template Functions" }), _jsx("div", { className: "query-builder__template--function--editor__code", children: _jsx(CodeEditor, { inputValue: templateFunctions.reduce((total, func) => `${total}${func}\n`, ''), isReadOnly: true, language: CODE_EDITOR_LANGUAGE.XML, hideMinimap: true, hideActionBar: true }) }), _jsx("div", { className: "query-builder__template--function--editor__json", children: _jsx(Button, { className: "btn--dark execution-node-viewer__unsupported-view__to-text-mode__btn", onClick: () => executionPlanState.setViewMode(EXECUTION_PLAN_VIEW_MODE.JSON), text: "View JSON" }) })] }))] }) }));
});
const ExecutionNodeElementTreeNodeContainer = observer((props) => {
    const { node, level, stepPaddingInRem, onNodeSelect } = props;
    const isExpandable = Boolean(node.childrenIds?.length);
    const selectNode = () => onNodeSelect?.(node);
    const nodeExpandIcon = isExpandable ? (node.isOpen ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx("div", {}));
    let details = '';
    let prefixLabel = '';
    const STORE_MAPPING_LABEL = `Store Mapping Global Graph Fetch Execution Node`;
    if (node instanceof ExecutionNodeTreeNodeData) {
        if (node.parentNodeId === STORE_MAPPING_LABEL) {
            if (node.executionNode instanceof
                StoreMappingGlobalGraphFetchExecutionNode) {
                details = 'Cross';
            }
            else if (node.executionNode instanceof LocalGraphFetchExecutionNode) {
                details = 'Local';
            }
        }
        prefixLabel = generateExecutionNodePrefixLabel(node.executionNode);
    }
    return (_jsxs("div", { className: clsx('tree-view__node__container execution-plan-viewer__explorer-tree__node__container', {
            'menu__trigger--on-menu-open': !node.isSelected,
        }, {
            'execution-plan-viewer__explorer-tree__node__container--selected': node.isSelected,
        }), style: {
            paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
        }, onClick: selectNode, children: [_jsx("div", { className: "tree-view__node__icon", children: _jsx("div", { className: "tree-view__node__expand-icon", children: nodeExpandIcon }) }), details !== '' && (_jsx("div", { className: "execution-plan-viewer__node__sub-type", children: _jsx("div", { className: "execution-plan-viewer__node__sub-type__label", children: details }) })), prefixLabel !== '' && (_jsx("div", { className: "execution-plan-viewer__node__type", children: _jsx("div", { className: "execution-plan-viewer__node__type__label", children: prefixLabel }) })), _jsx("button", { className: "tree-view__node__label execution-plan-viewer__explorer-tree__node__label", tabIndex: -1, title: node.id, children: node.label })] }));
});
export const ExecutionPlanTree = observer((props) => {
    const { executionPlanState } = props;
    const onNodeExpand = (node) => {
        if (node.childrenIds?.length) {
            node.setIsOpen(!node.isOpen);
            if (node instanceof ExecutionPlanViewTreeNodeData) {
                const rootNode = node.executionPlan.rootExecutionNode;
                const rootNodeTreeNode = generateExecutionNodeTreeNodeData(rootNode, generateExecutionNodeLabel(rootNode), node);
                executionPlanState.setTreeNode(rootNodeTreeNode.id, rootNodeTreeNode);
            }
            else if (node instanceof ExecutionNodeTreeNodeData) {
                if (node.executionNode.executionNodes.length > 0) {
                    node.executionNode.executionNodes.forEach((exen) => {
                        const executionNodeTreeNode = generateExecutionNodeTreeNodeData(exen, generateExecutionNodeLabel(exen), node);
                        executionPlanState.setTreeNode(executionNodeTreeNode.id, executionNodeTreeNode);
                    });
                }
                if (node.executionNode instanceof
                    StoreMappingGlobalGraphFetchExecutionNode) {
                    const localNode = node.executionNode.localGraphFetchExecutionNode;
                    const localNodeTreeData = generateExecutionNodeTreeNodeData(localNode, generateExecutionNodeLabel(localNode), node);
                    executionPlanState.setTreeNode(localNodeTreeData.id, localNodeTreeData);
                    node.executionNode.children.forEach((childExecutionNode) => {
                        const executionNodeTreeNode = generateExecutionNodeTreeNodeData(childExecutionNode, generateExecutionNodeLabel(childExecutionNode), node);
                        executionPlanState.setTreeNode(executionNodeTreeNode.id, executionNodeTreeNode);
                    });
                }
                if (node.executionNode instanceof RelationalGraphFetchExecutionNode) {
                    node.executionNode.children.forEach((childExecutionNode) => {
                        const executionNodeTreeNode = generateExecutionNodeTreeNodeData(childExecutionNode, generateExecutionNodeLabel(childExecutionNode), node);
                        executionPlanState.setTreeNode(executionNodeTreeNode.id, executionNodeTreeNode);
                    });
                }
            }
        }
        executionPlanState.refreshTreeData();
    };
    const onNodeSelect = (node) => {
        if (node instanceof ExecutionPlanViewTreeNodeData) {
            executionPlanState.transformMetadataToProtocolJson(node.executionPlan);
        }
        else if (node instanceof ExecutionNodeTreeNodeData) {
            executionPlanState.transformMetadataToProtocolJson(node.executionNode);
        }
        if (!(node.isOpen === true && node.isSelected === false)) {
            onNodeExpand(node);
        }
        executionPlanState.setSelectedNode(node);
    };
    const getChildNodes = (node) => {
        if (!node.childrenIds || node.childrenIds.length === 0) {
            return [];
        }
        const childrenNodes = node.childrenIds
            .map((id) => executionPlanState.nonNullableTreeData.nodes.get(id))
            .filter(isNonNullable);
        return childrenNodes;
    };
    return (_jsx(TreeView, { components: {
            TreeNodeContainer: ExecutionNodeElementTreeNodeContainer,
        }, treeData: executionPlanState.nonNullableTreeData, getChildNodes: getChildNodes, onNodeSelect: onNodeSelect, innerProps: {
            onNodeExpand,
        } }));
});
export const ExecutionNodeViewer = observer((props) => {
    const { executionNode, executionPlanState, viewJson } = props;
    if (executionNode instanceof SQLExecutionNode) {
        return (_jsx(SQLExecutionNodeViewer, { query: executionNode.sqlQuery, resultColumns: executionNode.resultColumns, resultType: executionNode.resultType, executionPlanState: executionPlanState, viewJson: viewJson }));
    }
    if (executionNode instanceof RelationalTDSInstantiationExecutionNode) {
        return (_jsx(RelationalTDSInstantiationExecutionNodeViewer, { node: executionNode, executionPlanState: executionPlanState }));
    }
    if (executionNode instanceof FunctionParametersValidationNode) {
        return (_jsx(FunctionParametersValidationNodeViewer, { functionParameters: executionNode.functionParameters, parameterValidationContext: executionNode.parameterValidationContext, executionPlanState: executionPlanState, resultType: executionNode.resultType }));
    }
    if (executionNode instanceof AllocationExecutionNode) {
        return (_jsx(AllocationExecutionNodeViewer, { node: executionNode, executionPlanState: executionPlanState }));
    }
    if (executionNode instanceof ConstantExecutionNode) {
        return (_jsx(ConstantExecutionNodeViewer, { cnode: executionNode, executionPlanState: executionPlanState }));
    }
    if (executionNode instanceof SequenceExecutionNode) {
        return (_jsx(SequenceExecutionNodeViewer, { node: executionNode, executionPlanState: executionPlanState, viewJson: viewJson }));
    }
    if (executionNode instanceof StoreMappingGlobalGraphFetchExecutionNode) {
        return (_jsx(StoreMappingGlobalGraphFetchExecutionNodeViewer, { storeMappingNode: executionNode, executionPlanState: executionPlanState }));
    }
    if (executionNode instanceof
        RelationalCrossRootQueryTempTableGraphFetchExecutionNode) {
        return (_jsx(RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer, { node: executionNode, executionPlanState: executionPlanState }));
    }
    if (executionNode instanceof
        RelationalRootQueryTempTableGraphFetchExecutionNode) {
        return (_jsx(RelationalRootQueryTempTableGraphFetchExecutionNodeViewer, { node: executionNode, executionPlanState: executionPlanState }));
    }
    if (executionNode instanceof
        RelationalClassQueryTempTableGraphFetchExecutionNode) {
        return (_jsx(RelationalClassQueryTempTableGraphFetchExecutionNodeViewer, { node: executionNode, executionPlanState: executionPlanState }));
    }
    return (_jsx(BlankPanelContent, { children: _jsxs("div", { className: "execution-node-viewer__unsupported-view", children: [_jsx("div", { className: "execution-node-viewer__unsupported-view__summary", children: `Can't display execution node` }), _jsx("button", { className: "btn--dark execution-node-viewer__unsupported-view__to-text-mode__btn", onClick: () => executionPlanState.setViewMode(EXECUTION_PLAN_VIEW_MODE.JSON), children: "View JSON" })] }) }));
});
const ExecutionPlanViewPanel = observer((props) => {
    const { displayData, executionPlanState } = props;
    let currentElement;
    if (executionPlanState.selectedNode !== undefined) {
        if (executionPlanState.selectedNode instanceof ExecutionPlanViewTreeNodeData) {
            currentElement = executionPlanState.selectedNode.executionPlan;
        }
        else if (executionPlanState.selectedNode instanceof ExecutionNodeTreeNodeData) {
            currentElement = executionPlanState.selectedNode.executionNode;
        }
    }
    useEffect(() => {
        if (executionPlanState.selectedNode === undefined) {
            const firstNode = executionPlanState.treeData?.nodes.get(EXECUTION_PLAN);
            if (firstNode instanceof ExecutionPlanViewTreeNodeData) {
                executionPlanState.transformMetadataToProtocolJson(firstNode.executionPlan);
                executionPlanState.setSelectedNode(firstNode);
            }
        }
    }, [executionPlanState]);
    const nativeViewModes = Object.values(EXECUTION_PLAN_VIEW_MODE);
    return (_jsx("div", { className: "execution-plan-viewer__panel", children: executionPlanState.selectedNode !== undefined && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "panel__header execution-plan-viewer__panel__header", children: [_jsx("div", { className: "execution-plan-viewer__panel__header__tabs", children: _jsx("button", { className: "execution-plan-viewer__panel__header__tab execution-plan-viewer__panel__header__tab--active", children: executionPlanState.selectedNode.label }) }), _jsx(ControlledDropdownMenu, { className: "execution-plan-viewer__panel__view-mode__type", title: "View as...", content: _jsx(MenuContent, { className: "execution-plan-viewer__panel__view-mode__options execution-plan-viewer__panel__view-mode__options--with-group", children: _jsxs("div", { className: "execution-plan-viewer__panel__view-mode__option__group execution-plan-viewer__panel__view-mode__option__group--native", children: [_jsx("div", { className: "execution-plan-viewer__panel__view-mode__option__group__name", children: "native" }), _jsx("div", { className: "execution-plan-viewer__panel__view-mode__option__group__options", children: nativeViewModes.map((mode) => (_jsx(MenuContentItem, { className: "execution-plan-viewer__panel__view-mode__option", onClick: () => executionPlanState.setViewMode(mode), children: mode }, mode))) })] }) }), menuProps: {
                                anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
                                transformOrigin: { vertical: 'top', horizontal: 'right' },
                            }, children: _jsx("div", { className: "execution-plan-viewer__panel__view-mode__type__label", children: executionPlanState.viewMode }) })] }), _jsxs("div", { className: "panel__content execution-plan-viewer__panel__content", children: [executionPlanState.viewMode === EXECUTION_PLAN_VIEW_MODE.JSON &&
                            Boolean(displayData) && (_jsx(CodeEditor, { inputValue: displayData, isReadOnly: true, language: CODE_EDITOR_LANGUAGE.JSON, hideMinimap: true })), executionPlanState.viewMode ===
                            EXECUTION_PLAN_VIEW_MODE.FORM && (_jsxs(_Fragment, { children: [currentElement instanceof ExecutionNode && (_jsx(ExecutionNodeViewer, { executionNode: currentElement, executionPlanState: executionPlanState, viewJson: true })), currentElement instanceof ExecutionPlan && (_jsx(ExecutionPlanViewerPanelContent, { executionPlanState: executionPlanState }))] }))] })] })) }));
});
const ExecutionPlanViewerContent = observer((props) => {
    const { executionPlanState, rawPlan } = props;
    const plan = executionPlanState.plan;
    const isDarkMode = !executionPlanState.applicationStore.layoutService
        .TEMPORARY__isLightColorThemeEnabled;
    return (_jsx("div", { className: "execution-plan-viewer__content", children: plan ? (_jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { size: 300, minSize: 300, children: _jsxs("div", { className: "panel execution-plan-viewer__explorer", children: [_jsx(PanelSideBarHeader, { darkMode: isDarkMode, title: "execution plan explorer" }), _jsx("div", { className: "panel__content execution-plan-viewer__explorer__content__container", children: _jsx(ExecutionPlanTree, { executionPlanState: executionPlanState, executionPlan: plan }) })] }) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: isDarkMode
                            ? 'var(--color-dark-grey-200)'
                            : 'var(--color-legacylight-light-grey-300)' }) }), _jsx(ResizablePanel, { children: _jsx(ExecutionPlanViewPanel, { displayData: executionPlanState.displayData, executionPlanState: executionPlanState }) })] })) : (_jsx(CodeEditor, { inputValue: JSON.stringify(rawPlan, undefined, DEFAULT_TAB_SIZE), isReadOnly: true, language: CODE_EDITOR_LANGUAGE.JSON })) }));
});
export const ExecutionPlanViewer = observer((props) => {
    const { executionPlanState } = props;
    const closePlanViewer = () => {
        executionPlanState.setRawPlan(undefined);
        executionPlanState.initialize(undefined);
        executionPlanState.setExecutionPlanDisplayData('');
        executionPlanState.setSelectedNode(undefined);
        executionPlanState.setDebugText(undefined);
        executionPlanState.globalImplementationSupportState.setSelectedTab(PLAN_TABS.GENERAL);
        executionPlanState.globalImplementationSupportState.setSelectedJavaClass(undefined);
    };
    const rawPlan = executionPlanState.rawPlan;
    const isDarkMode = !executionPlanState.applicationStore.layoutService
        .TEMPORARY__isLightColorThemeEnabled;
    if (!rawPlan) {
        return null;
    }
    return (_jsx(Dialog, { open: Boolean(executionPlanState.rawPlan), onClose: closePlanViewer, classes: {
            root: 'editor-modal__root-container',
            container: 'editor-modal__container',
            paper: 'editor-modal__content',
        }, children: _jsxs(Modal, { className: "editor-modal", darkMode: isDarkMode, children: [_jsx(ModalHeader, { title: "Execution Plan" }), _jsx(ModalBody, { children: executionPlanState.debugText ? (_jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { minSize: 100, children: _jsx(ExecutionPlanViewerContent, { executionPlanState: executionPlanState, rawPlan: rawPlan }) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: isDarkMode
                                        ? 'var(--color-dark-grey-200)'
                                        : 'var(--color-legacylight-light-grey-300)' }) }), _jsx(ResizablePanel, { size: 200, minSize: 28, children: _jsxs(Panel, { className: "panel execution-plan-viewer__debug-panel", children: [_jsx(PanelHeader, { title: "DEBUG LOG", keepTitleFormat: true, darkMode: isDarkMode }), _jsx(PanelContent, { children: _jsx(CodeEditor, { inputValue: executionPlanState.debugText, isReadOnly: true, language: CODE_EDITOR_LANGUAGE.TEXT }) })] }) })] })) : (_jsx(ExecutionPlanViewerContent, { executionPlanState: executionPlanState, rawPlan: rawPlan })) }), _jsx(ModalFooter, { children: _jsx(ModalFooterButton, { onClick: closePlanViewer, text: "Close", type: "secondary" }) })] }) }));
});
//# sourceMappingURL=ExecutionPlanViewer.js.map