@finos/legend-extension-dsl-data-space
Version:
Legend extension for Data Space DSL
179 lines • 17.7 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 { AnchorLinkIcon, BlankPanelContent, CodeIcon, CopyIcon, DataAccessIcon, LegendLogo, MoreVerticalIcon, QuestionCircleIcon, StatisticsIcon, clsx, } from '@finos/legend-art';
import {} from '../stores/DataSpaceViewerState.js';
import { useApplicationStore } from '@finos/legend-application';
import { DataSpaceExecutableTDSResult, DataSpaceServiceExecutableInfo, DataSpaceMultiExecutionServiceExecutableInfo, } from '../graph-manager/action/analytics/DataSpaceAnalysis.js';
import { DataSpaceMarkdownTextViewer } from './DataSpaceMarkdownTextViewer.js';
import { useEffect, useRef, useState } from 'react';
import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
import { DataGrid, } from '@finos/legend-lego/data-grid';
import { CODE_EDITOR_LANGUAGE, CODE_EDITOR_THEME, } from '@finos/legend-code-editor';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { DATA_SPACE_VIEWER_ACTIVITY_MODE, generateAnchorForActivity, generateAnchorForQuickStart, } from '../stores/DataSpaceViewerNavigation.js';
import { DataAccessOverview } from '@finos/legend-query-builder';
import { DataSpaceExecutableTDSResultState, } from '../stores/DataSpaceViewerExecutableState.js';
var TDS_EXECUTABLE_ACTION_TAB;
(function (TDS_EXECUTABLE_ACTION_TAB) {
TDS_EXECUTABLE_ACTION_TAB["COLUMN_SPECS"] = "COLUMN_SPECS";
TDS_EXECUTABLE_ACTION_TAB["QUERY"] = "QUERY";
TDS_EXECUTABLE_ACTION_TAB["DATA_ACCESS"] = "DATA_ACCESS";
TDS_EXECUTABLE_ACTION_TAB["USAGE_STATS"] = "USAGE_STATS";
TDS_EXECUTABLE_ACTION_TAB["QUERY_TEXT"] = "QUERY_TEXT";
})(TDS_EXECUTABLE_ACTION_TAB || (TDS_EXECUTABLE_ACTION_TAB = {}));
const TDSColumnDocumentationCellRenderer = (params) => {
const data = params.data;
if (!data) {
return null;
}
return data.documentation?.trim() ? (data.documentation) : (_jsx("div", { className: "data-space__viewer__grid__empty-cell", children: "No documentation provided" }));
};
const TDSColumnSampleValuesCellRenderer = (params) => {
const data = params.data;
if (!data) {
return null;
}
return data.sampleValues?.trim() ? (data.sampleValues) : (_jsx("div", { className: "data-space__viewer__grid__empty-cell", children: data.isLoadingSamples
? `Loading Sample Data...`
: `No sample values provided` }));
};
const DataSpaceExecutableTDSResultView = observer((props) => {
const { executableState, resultState } = props;
const executableAnalysisResult = executableState.value;
const dataSpaceViewerState = executableState.viewerState;
const applicationStore = useApplicationStore();
const [selectedTab, setSelectedTab] = useState(TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS);
const queryText = executableAnalysisResult.info?.query;
const dataAccessState = dataSpaceViewerState.quickStartState.dataAccessStateIndex.get(executableAnalysisResult);
useEffect(() => {
resultState.buildSampleValues();
}, [resultState]);
const openServiceQuery = () => {
if (executableAnalysisResult.info instanceof
DataSpaceServiceExecutableInfo ||
executableAnalysisResult.info instanceof
DataSpaceMultiExecutionServiceExecutableInfo) {
if (executableAnalysisResult.executable) {
dataSpaceViewerState.openServiceQuery(executableAnalysisResult.executable);
}
}
};
const columnSpecifications = resultState.gridData;
const extractTDSExecutableActionConfigurations = applicationStore.pluginManager
.getApplicationPlugins()
.flatMap((plugin) => plugin.getExtraDataSpaceTDSExecutableActionConfigurations?.() ?? [])
.filter((configuration) => configuration.isSupported(dataSpaceViewerState, executableAnalysisResult, resultState.value));
const currentTabExtensionConfig = extractTDSExecutableActionConfigurations.find((config) => config.key === selectedTab);
const darkMode = !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
return (_jsxs("div", { className: "data-space__viewer__quickstart__item__content", children: [_jsxs("div", { className: "data-space__viewer__quickstart__item__content__tab__header", children: [_jsxs("div", { className: "data-space__viewer__quickstart__item__content__tabs", children: [_jsx("button", { className: clsx('data-space__viewer__quickstart__item__content__tab', {
'data-space__viewer__quickstart__item__content__tab--active': selectedTab === TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS,
}), tabIndex: -1, onClick: () => setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS), children: _jsx("div", { className: "data-space__viewer__quickstart__item__content__tab__label", children: "Column Specifications" }) }), _jsxs("button", { className: clsx('data-space__viewer__quickstart__item__content__tab', {
'data-space__viewer__quickstart__item__content__tab--active': selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY,
}), tabIndex: -1, onClick: () => setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.QUERY), children: [_jsx("div", { className: "data-space__viewer__quickstart__item__content__tab__icon", children: _jsx(LegendLogo, { className: "data-space__viewer__quickstart__item__content__tab__icon--query" }) }), _jsx("div", { className: "data-space__viewer__quickstart__item__content__tab__label", children: "Query" })] }), extractTDSExecutableActionConfigurations.map((config) => (_jsxs("button", { className: clsx('data-space__viewer__quickstart__item__content__tab', {
'data-space__viewer__quickstart__item__content__tab--active': selectedTab === config.key,
}), tabIndex: -1, onClick: () => setSelectedTab(config.key), children: [config.icon !== undefined && (_jsx("div", { className: "data-space__viewer__quickstart__item__content__tab__icon", children: config.icon })), _jsx("div", { className: "data-space__viewer__quickstart__item__content__tab__label", children: config.title })] }, config.key)))] }), _jsxs("div", { className: "data-space__viewer__quickstart__item__content__action-tab-group", children: [_jsxs("button", { className: clsx('data-space__viewer__quickstart__item__content__tab', {
'data-space__viewer__quickstart__item__content__tab--active': selectedTab === TDS_EXECUTABLE_ACTION_TAB.DATA_ACCESS,
}), tabIndex: -1, title: "Data Access", onClick: () => setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.DATA_ACCESS), children: [_jsx("div", { className: "data-space__viewer__quickstart__item__content__tab__icon", children: _jsx(DataAccessIcon, {}) }), _jsx("div", { className: "data-space__viewer__quickstart__item__content__tab__label", children: "Data Access" })] }), _jsx("button", { className: clsx('data-space__viewer__quickstart__item__content__tab', {
'data-space__viewer__quickstart__item__content__tab--active': selectedTab === TDS_EXECUTABLE_ACTION_TAB.USAGE_STATS,
}), tabIndex: -1, title: "Usage Statistics", onClick: () => setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.USAGE_STATS), children: _jsx("div", { className: "data-space__viewer__quickstart__item__content__tab__icon", children: _jsx(StatisticsIcon, {}) }) }), queryText !== undefined && (_jsx("button", { className: clsx('data-space__viewer__quickstart__item__content__tab', {
'data-space__viewer__quickstart__item__content__tab--active': selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT,
}), tabIndex: -1, title: "Pure Query", onClick: () => setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT), children: _jsx("div", { className: "data-space__viewer__quickstart__item__content__tab__icon", children: _jsx(CodeIcon, { className: "data-space__viewer__quickstart__item__content__tab__icon--query" }) }) }))] })] }), _jsxs("div", { className: "data-space__viewer__quickstart__item__content__tab__content", children: [selectedTab === TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS && (_jsx("div", { className: clsx('data-space__viewer__quickstart__tds__column-specs', 'data-space__viewer__grid', {
'ag-theme-balham': !darkMode,
'ag-theme-balham-dark': darkMode,
}), children: _jsx(DataGrid, { rowData: columnSpecifications, gridOptions: {
suppressScrollOnNewData: true,
getRowId: (rowData) => rowData.data.id,
}, suppressFieldDotNotation: true, columnDefs: [
{
minWidth: 50,
sortable: true,
resizable: true,
field: 'name',
headerValueGetter: () => `Column ${columnSpecifications.length
? ` (${columnSpecifications.length})`
: ''}`,
flex: 1,
},
{
minWidth: 50,
sortable: false,
resizable: true,
cellRenderer: TDSColumnDocumentationCellRenderer,
headerName: 'Documentation',
flex: 1,
wrapText: true,
autoHeight: true,
},
{
minWidth: 50,
sortable: false,
resizable: false,
headerClass: 'data-space__viewer__grid__last-column-header',
cellRenderer: TDSColumnSampleValuesCellRenderer,
headerName: 'Sample Values',
flex: 1,
},
], onRowDataUpdated: (params) => {
params.api.refreshCells({ force: true });
} }) })), selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY && (_jsx("div", { className: "data-space__viewer__quickstart__tds__query", children: _jsxs("div", { className: "data-space__viewer__quickstart__tds__query__actions", children: [_jsx("button", { className: "data-space__viewer__quickstart__tds__query__action btn--dark", tabIndex: -1, onClick: openServiceQuery, children: "Open in Query" }), _jsx("button", { className: "data-space__viewer__quickstart__tds__query__action btn--dark", tabIndex: -1, disabled: true, children: "Open in Query with Test Data" })] }) })), selectedTab === TDS_EXECUTABLE_ACTION_TAB.DATA_ACCESS &&
(dataAccessState ? (_jsx(DataAccessOverview, { dataAccessState: dataAccessState, compact: true })) : (_jsx("div", { className: "data-space__viewer__quickstart__tds__placeholder-panel", children: _jsx(BlankPanelContent, { children: "No data access information available" }) }))), selectedTab === TDS_EXECUTABLE_ACTION_TAB.USAGE_STATS && (_jsx("div", { className: "data-space__viewer__quickstart__tds__placeholder-panel", children: _jsx(BlankPanelContent, { children: "Usage Statistics (Work in Progress)" }) })), selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT &&
queryText !== undefined && (_jsxs("div", { className: "data-space__viewer__quickstart__tds__query-text", children: [_jsx("div", { className: "data-space__viewer__quickstart__tds__query-text__content", children: _jsx(CodeEditor, { inputValue: queryText, isReadOnly: true, lightTheme: CODE_EDITOR_THEME.ONE_DARK_PRO, language: CODE_EDITOR_LANGUAGE.PURE, hideMinimap: true, hideGutter: true }) }), _jsxs("div", { className: "data-space__viewer__quickstart__tds__query-text__actions", children: [_jsx("button", { className: "data-space__viewer__quickstart__tds__query-text__action", tabIndex: -1, title: "Copy", onClick: () => {
applicationStore.clipboardService
.copyTextToClipboard(queryText)
.catch(applicationStore.alertUnhandledError);
}, children: _jsx(CopyIcon, {}) }), _jsx("button", { className: "data-space__viewer__quickstart__tds__query-text__action", tabIndex: -1, children: _jsx(MoreVerticalIcon, {}) })] })] })), currentTabExtensionConfig?.renderer(dataSpaceViewerState, executableAnalysisResult, resultState.value)] })] }));
});
const DataSpaceExecutableAnalysisResultView = observer((props) => {
const { executableState } = props;
const dataSpaceViewerState = executableState.viewerState;
const executableAnalysisResult = executableState.value;
const quickStartRef = useRef(null);
const anchor = generateAnchorForQuickStart(executableAnalysisResult);
useEffect(() => {
if (quickStartRef.current) {
dataSpaceViewerState.layoutState.setWikiPageAnchor(anchor, quickStartRef.current);
}
return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
}, [dataSpaceViewerState, anchor]);
return (_jsxs("div", { ref: quickStartRef, className: "data-space__viewer__quickstart__item", children: [_jsxs("div", { className: "data-space__viewer__quickstart__item__header", children: [_jsx("div", { className: "data-space__viewer__quickstart__item__header__title", children: executableAnalysisResult.title }), _jsx("div", { className: "data-space__viewer__quickstart__item__header__type", children: executableAnalysisResult.result instanceof
DataSpaceExecutableTDSResult
? 'TDS'
: 'UNKNOWN' }), _jsx("button", { className: "data-space__viewer__quickstart__item__header__anchor", tabIndex: -1, onClick: () => dataSpaceViewerState.changeZone(anchor, true), children: _jsx(AnchorLinkIcon, {}) })] }), executableAnalysisResult.description !== undefined && (_jsx("div", { className: "data-space__viewer__quickstart__item__description", children: _jsx(DataSpaceMarkdownTextViewer, { value: executableAnalysisResult.description }) })), executableState.resultState instanceof
DataSpaceExecutableTDSResultState && (_jsx(DataSpaceExecutableTDSResultView, { executableState: executableState, resultState: executableState.resultState }))] }));
});
export const DataSpaceQuickStart = observer((props) => {
const { dataSpaceViewerState } = props;
const applicationStore = useApplicationStore();
const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
const documentationUrl = analysisResult.supportInfo?.documentationUrl;
const sectionRef = useRef(null);
const anchor = generateAnchorForActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START);
useEffect(() => {
if (sectionRef.current) {
dataSpaceViewerState.layoutState.setWikiPageAnchor(anchor, sectionRef.current);
}
return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
}, [dataSpaceViewerState, anchor]);
const seeDocumentation = () => {
if (documentationUrl) {
applicationStore.navigationService.navigator.visitAddress(documentationUrl);
}
};
return (_jsxs("div", { ref: sectionRef, className: "data-space__viewer__wiki__section", children: [_jsxs("div", { className: "data-space__viewer__wiki__section__header", children: [_jsxs("div", { className: "data-space__viewer__wiki__section__header__label", children: ["Quick Start", _jsx("button", { className: "data-space__viewer__wiki__section__header__anchor", tabIndex: -1, onClick: () => dataSpaceViewerState.changeZone(anchor, true), children: _jsx(AnchorLinkIcon, {}) })] }), Boolean(documentationUrl) && (_jsx("button", { className: "data-space__viewer__wiki__section__header__documentation", tabIndex: -1, onClick: seeDocumentation, title: "See Documentation", children: _jsx(QuestionCircleIcon, {}) }))] }), _jsxs("div", { className: "data-space__viewer__wiki__section__content", children: [dataSpaceViewerState.executableStates.length !== 0 && (_jsx("div", { className: "data-space__viewer__quickstart", children: dataSpaceViewerState.executableStates.map((executableState) => (_jsx(DataSpaceExecutableAnalysisResultView, { executableState: executableState }, executableState.uuid))) })), analysisResult.executables.length === 0 && (_jsx(DataSpaceWikiPlaceholder, { message: "(not specified)" }))] })] }));
});
//# sourceMappingURL=DataSpaceQuickStart.js.map