@finos/legend-application-studio
Version:
Legend Studio application core
150 lines • 12.9 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 { useEditorStore, withEditorStore, } from '../editor/EditorStoreProvider.js';
import { useShowcaseViewerStore, withShowcaseViewerStore, } from './ShowcaseViewerStoreProvider.js';
import { useParams } from '@finos/legend-application/browser';
import { isNonNullable } from '@finos/legend-shared';
import { Fragment, useEffect } from 'react';
import { getCollapsiblePanelGroupProps, useResizeDetector, ResizablePanel, ResizablePanelSplitter, ResizablePanelGroup, FileTrayIcon, clsx, HackerIcon, AssistantIcon, ReadMeIcon, FireIcon, HammerIcon, TerminalIcon, TrashIcon, ResizablePanelSplitterLine, } from '@finos/legend-art';
import { useApplicationStore, useCommands } from '@finos/legend-application';
import { flowResult } from 'mobx';
import { EditorGroup } from '../editor/editor-group/EditorGroup.js';
import { GrammarTextEditor } from '../editor/editor-group/GrammarTextEditor.js';
import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
import { EmbeddedQueryBuilder } from '../editor/EmbeddedQueryBuilder.js';
import { ACTIVITY_MODE, GRAPH_EDITOR_MODE, } from '../../stores/editor/EditorConfig.js';
import { ActivityBarMenu } from '../editor/ActivityBar.js';
import { useLegendStudioApplicationStore } from '../LegendStudioFrameworkProvider.js';
import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
import { Explorer } from '../editor/side-bar/Explorer.js';
import { PanelGroup } from '../editor/panel-group/PanelGroup.js';
import { QueryDataCubeViewer } from '@finos/legend-query-builder';
const ShowcaseViewerStatusBar = observer(() => {
const editorStore = useEditorStore();
const showcaseStore = useShowcaseViewerStore();
const showcase = showcaseStore._showcase;
const applicationStore = useLegendStudioApplicationStore();
const handleTextModeClick = applicationStore.guardUnhandledError(() => flowResult(editorStore.toggleTextMode()));
const editable = editorStore.graphManagerState.graphBuildState.hasCompleted &&
editorStore.isInitialized;
const togglePanel = () => editorStore.panelGroupDisplayState.toggle();
const compile = applicationStore.guardUnhandledError(() => flowResult(editorStore.graphEditorMode.globalCompile()));
const generate = applicationStore.guardUnhandledError(() => flowResult(editorStore.graphState.graphGenerationState.globalGenerate()));
const emptyGenerationEntities = applicationStore.guardUnhandledError(() => flowResult(editorStore.graphState.graphGenerationState.clearGenerations()));
const toggleAssistant = () => applicationStore.assistantService.toggleAssistant();
return (_jsxs("div", { "data-testid": LEGEND_STUDIO_TEST_ID.STATUS_BAR, className: "editor__status-bar project-view__status-bar", children: [_jsx("div", { className: "editor__status-bar__left", children: showcase && (_jsxs("div", { className: "editor__status-bar__workspace", children: [_jsx("div", { className: "editor__status-bar__workspace__icon", children: _jsx(ReadMeIcon, {}) }), _jsx("div", { className: "editor__status-bar__workspace__project", children: _jsx("button", { className: "editor__status-bar__workspace__project", tabIndex: -1, children: `Showcase : ${showcase.title}` }) })] })) }), _jsxs("div", { className: "editor__status-bar__right", children: [_jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__generate-btn', {
'editor__status-bar__generate-btn--wiggling': editorStore.graphState.graphGenerationState
.isRunningGlobalGenerate,
}), disabled: editorStore.graphState.isApplicationUpdateOperationIsRunning, onClick: generate, tabIndex: -1, title: "Generate (F10)", children: _jsx(FireIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__clear__generation-btn', {
'editor__status-bar__action editor__status-bar__clear__generation-btn--wiggling': editorStore.graphState.graphGenerationState
.clearingGenerationEntitiesState.isInProgress,
}), disabled: editorStore.graphState.isApplicationUpdateOperationIsRunning ||
!editable, onClick: emptyGenerationEntities, tabIndex: -1, title: "Clear generation entities", children: _jsx(TrashIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__compile-btn', {
'editor__status-bar__compile-btn--wiggling': editorStore.graphState.isRunningGlobalCompile,
}), disabled: editorStore.graphState.isApplicationUpdateOperationIsRunning ||
!editable, onClick: compile, tabIndex: -1, title: "Compile (F9)", children: _jsx(HammerIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__action__toggler', {
'editor__status-bar__action__toggler--active': editorStore.panelGroupDisplayState.isOpen,
}), onClick: togglePanel, tabIndex: -1, title: "Toggle panel (Ctrl + `)", children: _jsx(TerminalIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__action__toggler', {
'editor__status-bar__action__toggler--active': editorStore.graphEditorMode.mode ===
GRAPH_EDITOR_MODE.GRAMMAR_TEXT,
}), onClick: handleTextModeClick, tabIndex: -1, title: "Toggle text mode (F8)", children: _jsx(HackerIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__action__toggler', {
'editor__status-bar__action__toggler--active': !applicationStore.assistantService.isHidden,
}), onClick: toggleAssistant, tabIndex: -1, title: "Toggle assistant", children: _jsx(AssistantIcon, {}) })] })] }));
});
const ShowcaseViewerActivityBar = observer(() => {
const editorStore = useEditorStore();
const changeActivity = (activity) => () => editorStore.setActiveActivity(activity);
// tabs
const activities = [
{
mode: ACTIVITY_MODE.EXPLORER,
title: 'Explorer (Ctrl + Shift + X)',
icon: _jsx(FileTrayIcon, {}),
},
].filter((activity) => Boolean(activity));
return (_jsxs("div", { className: "activity-bar", children: [_jsx(ActivityBarMenu, {}), _jsx("div", { className: "activity-bar__items", children: activities.map((activity) => (_jsx("button", { className: clsx('activity-bar__item', {
'activity-bar__item--active': editorStore.sideBarDisplayState.isOpen &&
editorStore.activeActivity === activity.mode,
}), onClick: changeActivity(activity.mode), tabIndex: -1, title: activity.title, children: activity.icon }, activity.mode))) })] }));
});
const ShowcaseViewerSideBar = observer(() => {
const editorStore = useEditorStore();
const renderSideBar = () => {
switch (editorStore.activeActivity) {
case ACTIVITY_MODE.EXPLORER:
return _jsx(Explorer, {});
default:
return null;
}
};
return (_jsx("div", { className: "side-bar", children: _jsx("div", { className: "side-bar__view", children: renderSideBar() }) }));
});
export const ShowcaseViewer = withEditorStore(withShowcaseViewerStore(observer(() => {
const params = useParams();
const showcaseStore = useShowcaseViewerStore();
const applicationStore = useApplicationStore();
const editorStore = useEditorStore();
// Extensions
const extraEditorExtensionComponents = editorStore.pluginManager
.getApplicationPlugins()
.flatMap((plugin) => plugin.getExtraEditorExtensionComponentRendererConfigurations?.() ??
[])
.filter(isNonNullable)
.map((config) => (_jsx(Fragment, { children: config.renderer(editorStore) }, config.key)));
// layout
const resizeSideBar = (handleProps) => editorStore.sideBarDisplayState.setSize(handleProps.domElement.getBoundingClientRect()
.width);
const sideBarCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(editorStore.sideBarDisplayState.size === 0, {
onStopResize: resizeSideBar,
size: editorStore.sideBarDisplayState.size,
});
const resizePanel = (handleProps) => editorStore.panelGroupDisplayState.setSize(handleProps.domElement.getBoundingClientRect()
.height);
const collapsiblePanelGroupProps = getCollapsiblePanelGroupProps(editorStore.panelGroupDisplayState.size === 0, {
onStopResize: resizePanel,
size: editorStore.panelGroupDisplayState.size,
});
const collapsibleSideBarGroupProps = getCollapsiblePanelGroupProps(editorStore.sideBarDisplayState.size === 0, {
onStopResize: resizeSideBar,
size: editorStore.sideBarDisplayState.size,
});
const maximizedCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(editorStore.panelGroupDisplayState.isMaximized);
const { ref, width, height } = useResizeDetector();
useEffect(() => {
if (ref.current) {
editorStore.panelGroupDisplayState.setMaxSize(ref.current.offsetHeight);
}
}, [ref, editorStore, width, height]);
// initialize
useEffect(() => {
flowResult(showcaseStore.initialize(params)).catch(applicationStore.alertUnhandledError);
}, [applicationStore, showcaseStore, params]);
useCommands(editorStore);
return (_jsx("div", { className: "app__page", children: _jsxs("div", { className: "editor viewer", children: [_jsxs("div", { className: "editor__body", children: [_jsx(ShowcaseViewerActivityBar, {}), _jsx("div", { ref: ref, className: "editor__content-container", children: _jsx("div", { className: "editor__content", children: _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { ...sideBarCollapsiblePanelGroupProps.collapsiblePanel, direction: 1, children: _jsx(ShowcaseViewerSideBar, {}) }), _jsx(ResizablePanelSplitter, {}), _jsx(ResizablePanel, { ...collapsibleSideBarGroupProps.remainingPanel, minSize: 300, children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsxs(ResizablePanel, { ...maximizedCollapsiblePanelGroupProps.collapsiblePanel, ...(editorStore.panelGroupDisplayState.size === 0
? collapsiblePanelGroupProps.remainingPanel
: {}), children: [editorStore.graphEditorMode.mode ===
GRAPH_EDITOR_MODE.FORM && _jsx(EditorGroup, {}), editorStore.graphEditorMode.mode ===
GRAPH_EDITOR_MODE.GRAMMAR_TEXT && (_jsx(GrammarTextEditor, {}))] }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: editorStore.panelGroupDisplayState.isMaximized
? 'transparent'
: 'var(--color-dark-grey-250)' }) }), _jsx(ResizablePanel, { ...collapsiblePanelGroupProps.collapsiblePanel, ...(editorStore.panelGroupDisplayState.isMaximized
? maximizedCollapsiblePanelGroupProps.remainingPanel
: {}), direction: -1, children: _jsx(PanelGroup, {}) })] }) })] }) }) })] }), editorStore.graphManagerState.graphBuildState.hasSucceeded && (_jsx(ProjectSearchCommand, {})), _jsx(ShowcaseViewerStatusBar, {}), _jsx(EmbeddedQueryBuilder, {}), editorStore.embeddedDataCubeViewerState && (_jsx(QueryDataCubeViewer, { state: editorStore.embeddedDataCubeViewerState, close: () => editorStore.setEmbeddedDataCubeViewerState(undefined), options: {
fullScreen: true,
} })), extraEditorExtensionComponents] }) }));
})));
//# sourceMappingURL=ShowcaseViewer.js.map