@finos/legend-application-studio
Version:
Legend Studio application core
108 lines • 6.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } 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 { observer } from 'mobx-react-lite';
import { TreeView, PURE_DatabaseSchemaIcon, PURE_DatabaseTableIcon, CircleIcon, ChevronDownIcon, ChevronRightIcon, CheckCircleIcon, EmptyCircleIcon, KeyIcon, EyeIcon, compareLabelFn, } from '@finos/legend-art';
import { DatabaseSchemaExplorerTreeColumnNodeData, DatabaseSchemaExplorerTreeSchemaNodeData, DatabaseSchemaExplorerTreeTableNodeData, } from '../../../../stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.js';
import { useApplicationStore } from '@finos/legend-application';
import { renderColumnTypeIcon } from './DatabaseEditorHelper.js';
import { flowResult } from 'mobx';
import { stringifyDataType } from '@finos/legend-graph';
import { forwardRef } from 'react';
const getDatabaseSchemaNodeIcon = (node) => {
if (node instanceof DatabaseSchemaExplorerTreeSchemaNodeData) {
return (_jsx("div", { className: "database-schema-explorer__icon--schema", children: _jsx(PURE_DatabaseSchemaIcon, {}) }));
}
else if (node instanceof DatabaseSchemaExplorerTreeTableNodeData) {
return (_jsx("div", { className: "database-schema-explorer__icon--table", children: _jsx(PURE_DatabaseTableIcon, {}) }));
}
else if (node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
return renderColumnTypeIcon(node.column.type);
}
return null;
};
export const DatabaseSchemaExplorerTreeNodeContainer = observer(forwardRef(function DatabaseSchemaExplorerTreeNodeContainer(props, ref) {
const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
const { toggleCheckedNode, isPartiallySelected, isPreviewDataDisabled, previewData, } = innerProps;
const isExpandable = Boolean(!node.childrenIds || node.childrenIds.length) &&
!(node instanceof DatabaseSchemaExplorerTreeColumnNodeData);
const nodeExpandIcon = isExpandable ? (node.isOpen ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx("div", {}));
const nodeTypeIcon = getDatabaseSchemaNodeIcon(node);
const toggleExpandNode = () => {
onNodeSelect?.(node);
if (!isExpandable) {
toggleCheckedNode(node);
}
};
const isPrimaryKeyColumn = node instanceof DatabaseSchemaExplorerTreeColumnNodeData &&
node.owner.primaryKey.includes(node.column);
const renderCheckedIcon = (_node) => {
if (_node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
return null;
}
else if (isPartiallySelected(_node)) {
return _jsx(CircleIcon, {});
}
else if (_node.isChecked) {
return _jsx(CheckCircleIcon, {});
}
return _jsx(EmptyCircleIcon, {});
};
return (_jsxs("div", { className: "tree-view__node__container", ref: ref, style: {
paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
display: 'flex',
}, onClick: toggleExpandNode, children: [_jsxs("div", { className: "tree-view__node__icon database-schema-explorer__node__icon__group", children: [_jsx("div", { className: "database-schema-explorer__expand-icon", children: nodeExpandIcon }), _jsx("div", { className: "database-schema-explorer__checker-icon", onClick: (event) => {
event.stopPropagation();
toggleCheckedNode(node);
}, children: renderCheckedIcon(node) }), _jsx("div", { className: "database-schema-explorer__type-icon", children: nodeTypeIcon })] }), _jsxs("div", { className: "tree-view__node__label database-schema-explorer__node__label", children: [node.label, node instanceof DatabaseSchemaExplorerTreeColumnNodeData && (_jsx("div", { className: "database-schema-explorer__node__type", children: _jsx("div", { className: "database-schema-explorer__node__type__label", children: stringifyDataType(node.column.type) }) })), isPrimaryKeyColumn && (_jsx("div", { className: "database-schema-explorer__node__pk", title: "Primary Key", children: _jsx(KeyIcon, {}) })), !isPreviewDataDisabled(node) && (_jsx("button", { className: "query-builder-explorer-tree__node__action", tabIndex: -1, onClick: (event) => {
event.stopPropagation();
previewData(node);
}, title: "Preview Table Data", children: _jsx(EyeIcon, {}) }))] })] }));
}));
export const DatabaseSchemaExplorer = observer((props) => {
const { treeData, schemaExplorerState, treeNodeContainerComponent } = props;
const applicationStore = useApplicationStore();
const onNodeSelect = (node) => {
flowResult(schemaExplorerState.onNodeSelect(node, treeData)).catch(applicationStore.alertUnhandledError);
};
const getChildNodes = (node) => schemaExplorerState.getChildNodes(node, treeData)?.sort(compareLabelFn) ??
[];
const isPartiallySelected = (node) => {
if (node instanceof DatabaseSchemaExplorerTreeSchemaNodeData &&
!node.isChecked) {
return Boolean(schemaExplorerState
.getChildNodes(node, treeData)
?.find((childNode) => childNode.isChecked === true));
}
return false;
};
const toggleCheckedNode = (node) => schemaExplorerState.toggleCheckedNode(node, treeData);
const previewData = (node) => {
flowResult(schemaExplorerState.previewData(node)).catch(applicationStore.alertUnhandledError);
};
const isPreviewDataDisabled = (node) => !(node instanceof DatabaseSchemaExplorerTreeTableNodeData ||
node instanceof DatabaseSchemaExplorerTreeColumnNodeData);
return (_jsx(TreeView, { className: "database-schema-explorer", components: {
TreeNodeContainer: treeNodeContainerComponent ??
DatabaseSchemaExplorerTreeNodeContainer,
}, innerProps: {
toggleCheckedNode,
isPartiallySelected,
previewData,
isPreviewDataDisabled,
}, treeData: treeData, onNodeSelect: onNodeSelect, getChildNodes: getChildNodes }));
});
//# sourceMappingURL=DatabaseSchemaExplorer.js.map