/*
* SPDX-FileCopyrightText: 2021-2023 The Refinery Authors
*
* SPDX-License-Identifier: EPL-2.0
*/
import CloseIcon from '@mui/icons-material/Close';
import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
import CircularProgress from '@mui/material/CircularProgress';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import { styled } from '@mui/material/styles';
import { observer } from 'mobx-react-lite';
import DirectionalSplitPane from './DirectionalSplitPane';
import Loading from './Loading';
import { useRootStore } from './RootStoreProvider';
import type GeneratedModelStore from './editor/GeneratedModelStore';
import GraphPane from './graph/GraphPane';
import type GraphStore from './graph/GraphStore';
import TablePane from './table/TablePane';
import type ThemeStore from './theme/ThemeStore';
const SplitGraphPane = observer(function SplitGraphPane({
graph,
themeStore,
}: {
graph: GraphStore;
themeStore: ThemeStore;
}): JSX.Element {
return (
}
secondary={}
primaryOnly={!themeStore.showTable}
secondaryOnly={!themeStore.showGraph}
/>
);
});
const GenerationStatus = styled('div', {
name: 'ModelWorkArea-GenerationStatus',
shouldForwardProp: (prop) => prop !== 'error',
})<{ error: boolean }>(({ error, theme }) => ({
color: error ? theme.palette.error.main : theme.palette.text.primary,
}));
const GeneratedModelPane = observer(function GeneratedModelPane({
generatedModel,
themeStore,
}: {
generatedModel: GeneratedModelStore;
themeStore: ThemeStore;
}): JSX.Element {
const { message, error, graph } = generatedModel;
if (graph !== undefined) {
return ;
}
return (
({
maxHeight: '6rem',
height: 'calc(100% - 8rem)',
marginBottom: theme.spacing(1),
padding: error ? 0 : theme.spacing(1),
color: theme.palette.text.secondary,
'.MuiCircularProgress-root, .MuiCircularProgress-svg, .MuiSvgIcon-root':
{
height: '100% !important',
width: '100% !important',
},
})}
>
{error ? (
) : (
)}
{message}
);
});
function ModelWorkArea(): JSX.Element {
const { editorStore, themeStore } = useRootStore();
if (editorStore === undefined) {
return ;
}
const { graph, generatedModels, selectedGeneratedModel } = editorStore;
const generatedModelNames: string[] = [];
const generatedModelTabs: JSX.Element[] = [];
generatedModels.forEach((value, key) => {
generatedModelNames.push(key);
/* eslint-disable react/no-array-index-key -- Key is a string here, not the array index. */
generatedModelTabs.push(
{
if (event.button === 1) {
editorStore.deleteGeneratedModel(key);
event.preventDefault();
event.stopPropagation();
}
}}
/>,
);
/* eslint-enable react/no-array-index-key */
});
const generatedModel =
selectedGeneratedModel === undefined
? undefined
: generatedModels.get(selectedGeneratedModel);
const selectedIndex =
selectedGeneratedModel === undefined
? 0
: generatedModelNames.indexOf(selectedGeneratedModel) + 1;
return (
({
display: generatedModelNames.length === 0 ? 'none' : 'flex',
alignItems: 'center',
borderBottom: `1px solid ${theme.palette.outer.border}`,
})}
>
{
if (value === 0) {
editorStore.selectGeneratedModel(undefined);
} else if (typeof value === 'number') {
editorStore.selectGeneratedModel(generatedModelNames[value - 1]);
}
}}
variant="scrollable"
scrollButtons="auto"
sx={{ flexGrow: 1 }}
>
{generatedModelTabs}
editorStore.deleteGeneratedModel(selectedGeneratedModel)
}
disabled={selectedIndex === 0}
sx={{ mx: 1 }}
>
{generatedModel === undefined ? (
) : (
)}
);
}
export default observer(ModelWorkArea);