@finos/legend-data-cube
Version:
108 lines • 10.2 kB
JavaScript
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 { observer } from 'mobx-react-lite';
import { DataCubeExistingColumnEditorState, } from '../../../stores/view/extend/DataCubeColumnEditorState.js';
import { FormButton, FormDocumentation, FormDropdownMenu, FormDropdownMenuItem, FormDropdownMenuTrigger, FormTextInput, } from '../../core/DataCubeFormUtils.js';
import { DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
import { DataCubeColumnDataType, DataCubeColumnKind, } from '../../../stores/core/DataCubeQueryEngine.js';
import { DataCubeDocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
import { useDataCube } from '../../DataCubeProvider.js';
import { useMemo, useRef } from 'react';
import { debounce } from '@finos/legend-shared';
import { DataCubeCodeEditor } from './DataCubeCodeEditor.js';
import { DataCubeEvent } from '../../../__lib__/DataCubeEvent.js';
var DataCubeExtendedColumnKind;
(function (DataCubeExtendedColumnKind) {
DataCubeExtendedColumnKind["LEAF_LEVEL_MEASURE"] = "Leaf Level Measure";
DataCubeExtendedColumnKind["LEAF_LEVEL_DIMENSION"] = "Leaf Level Dimension";
DataCubeExtendedColumnKind["GROUP_LEVEL"] = "Group Level";
})(DataCubeExtendedColumnKind || (DataCubeExtendedColumnKind = {}));
export const DataCubeColumnCreator = observer((props) => {
const { state } = props;
const dataCube = useDataCube();
const view = state.view;
const manager = view.extend;
const nameInputRef = useRef(null);
const currentColumnKind = state.isGroupLevel
? DataCubeExtendedColumnKind.GROUP_LEVEL
: state.columnKind === DataCubeColumnKind.MEASURE
? DataCubeExtendedColumnKind.LEAF_LEVEL_MEASURE
: DataCubeExtendedColumnKind.LEAF_LEVEL_DIMENSION;
const [openKindDropdown, closeKindDropdown, kindDropdownProps, kindDropPropsOpen,] = useDropdownMenu();
const [openTypeDropdown, closeTypeDropdown, typeDropdownProps, typeDropPropsOpen,] = useDropdownMenu();
const logAddingNewColumn = () => {
view.dataCube.telemetryService.sendTelemetry(DataCubeEvent.ADD_NEW_COLUMN, view.engine.getDataFromSource(view.getInitialSource()));
};
const debouncedCheckReturnType = useMemo(() => debounce(() => {
state
.getReturnType()
.catch((error) => dataCube.alertService.alertUnhandledError(error));
}, 500), [state, dataCube]);
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-[calc(100%_-_40px)] w-full px-2 pt-2", children: _jsx("div", { className: "h-full w-full overflow-auto border border-neutral-300 bg-white", children: _jsxs("div", { className: "h-full w-full select-none p-0", children: [_jsxs("div", { className: "h-24 w-full p-2", children: [_jsxs("div", { className: "mt-1 flex h-5 w-full items-center", children: [_jsx("div", { className: "flex h-full w-24 flex-shrink-0 items-center text-sm", children: "Column Name:" }), _jsx(FormTextInput, { className: "w-32", ref: nameInputRef, disabled: state.finalizationState.isInProgress, value: state.name, onChange: (event) => {
state.setName(event.target.value);
} }), _jsx("div", { className: "ml-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center text-lg", children: state.isNameValid ? (_jsx(DataCubeIcon.CircleChecked, { className: "text-green-500" })) : (_jsx(DataCubeIcon.CircledFailed, { className: "text-red-500" })) })] }), _jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsxs("div", { className: "flex h-full w-24 flex-shrink-0 items-center text-sm", children: ["Column Kind:", _jsx(FormDocumentation, { className: "ml-1", documentationKey: DataCubeDocumentationKey.EXTENDED_COLUMN_LEVELS })] }), _jsx(FormDropdownMenuTrigger, { className: "w-32", onClick: openKindDropdown, open: kindDropPropsOpen, disabled: state.finalizationState.isInProgress, children: currentColumnKind }), _jsx(FormDropdownMenu, { className: "w-32", ...kindDropdownProps, children: [
DataCubeExtendedColumnKind.LEAF_LEVEL_MEASURE,
DataCubeExtendedColumnKind.LEAF_LEVEL_DIMENSION,
DataCubeExtendedColumnKind.GROUP_LEVEL,
].map((columnKind) => (_jsx(FormDropdownMenuItem, { onClick: () => {
switch (columnKind) {
case DataCubeExtendedColumnKind.LEAF_LEVEL_MEASURE: {
state.setColumnKind(false, DataCubeColumnKind.MEASURE);
break;
}
case DataCubeExtendedColumnKind.LEAF_LEVEL_DIMENSION: {
state.setColumnKind(false, DataCubeColumnKind.DIMENSION);
break;
}
case DataCubeExtendedColumnKind.GROUP_LEVEL: {
state.setColumnKind(true, undefined);
break;
}
default:
return;
}
state.clearError();
state.setReturnType(undefined);
debouncedCheckReturnType.cancel();
debouncedCheckReturnType();
closeKindDropdown();
}, autoFocus: columnKind === currentColumnKind, children: columnKind }, columnKind))) })] }), _jsxs("div", { className: "mt-2 flex h-5 w-full items-center", children: [_jsx("div", { className: "flex h-full w-24 flex-shrink-0 items-center text-sm", children: "Value Type:" }), _jsx(FormDropdownMenuTrigger, { className: "w-32", onClick: openTypeDropdown, open: typeDropPropsOpen, disabled: state.finalizationState.isInProgress, children: state.expectedType }), _jsx("div", { className: "ml-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center text-lg", children: state.validationState.isInProgress ? (_jsx(DataCubeIcon.Loader, { className: "animate-spin stroke-2 text-neutral-400" })) : state.returnType ? (state.isTypeValid ? (_jsx(DataCubeIcon.CircleChecked, { className: "text-green-500" })) : (_jsx(DataCubeIcon.CircledFailed, { className: "text-red-500" }))) : null }), _jsx(FormDropdownMenu, { className: "w-32", ...typeDropdownProps, children: [
DataCubeColumnDataType.TEXT,
DataCubeColumnDataType.NUMBER,
DataCubeColumnDataType.DATE,
].map((dataType) => (_jsx(FormDropdownMenuItem, { onClick: () => {
state.setExpectedType(dataType);
closeTypeDropdown();
}, autoFocus: dataType === state.expectedType, children: dataType }, dataType))) })] })] }), _jsx("div", { className: "h-[calc(100%_-_96px)] w-full p-2 pt-1", children: _jsx(DataCubeCodeEditor, { state: state }) })] }) }) }), _jsxs("div", { className: "flex h-10 items-center justify-end px-2", children: [_jsx(FormButton, { onClick: () => state.close(), children: "Cancel" }), state instanceof DataCubeExistingColumnEditorState && (_jsxs(_Fragment, { children: [_jsx(FormButton, { className: "ml-2", onClick: () => {
manager
.deleteColumn(state.initialData.name)
.catch((error) => dataCube.alertService.alertUnhandledError(error));
}, children: "Delete" }), _jsx(FormButton, { className: "ml-2", onClick: () => {
state
.reset()
.catch((error) => dataCube.alertService.alertUnhandledError(error));
}, children: "Reset" })] })), _jsx(FormButton, { className: "ml-2", disabled: !state.isNameValid ||
!state.isTypeValid ||
state.validationState.isInProgress ||
state.finalizationState.isInProgress, onClick: () => {
state
.applyChanges()
.catch((error) => dataCube.alertService.alertUnhandledError(error));
logAddingNewColumn();
}, children: "OK" })] })] }));
});
//# sourceMappingURL=DataCubeColumnEditor.js.map