1 files changed, 193 insertions, 0 deletions

diff --git a/subprojects/frontend/src/ModelWorkArea.tsx b/subprojects/frontend/src/ModelWorkArea.tsx
new file mode 100644
index 00000000..16e16a97
--- /dev/null
+++ b/subprojects/frontend/src/ModelWorkArea.tsx
@@ -0,0 +1,193 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * 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 (
+    <DirectionalSplitPane
+      primary={<GraphPane graph={graph} />}
+      secondary={<TablePane graph={graph} />}
+      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 <SplitGraphPane graph={graph} themeStore={themeStore} />;
+  }
+
+  return (
+    <Stack
+      direction="column"
+      alignItems="center"
+      justifyContent="center"
+      height="100%"
+      width="100%"
+      overflow="hidden"
+      my={2}
+    >
+      <Stack
+        direction="column"
+        alignItems="center"
+        flexGrow={1}
+        flexShrink={1}
+        flexBasis={0}
+        sx={(theme) => ({
+          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 ? (
+          <SentimentVeryDissatisfiedIcon
+            className="VisibilityDialog-emptyIcon"
+            fontSize="inherit"
+          />
+        ) : (
+          <CircularProgress color="inherit" />
+        )}
+      </Stack>
+      <GenerationStatus error={error}>{message}</GenerationStatus>
+    </Stack>
+  );
+});
+
+function ModelWorkArea(): JSX.Element {
+  const { editorStore, themeStore } = useRootStore();
+
+  if (editorStore === undefined) {
+    return <Loading />;
+  }
+
+  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(
+      <Tab
+        label={value.title}
+        key={key}
+        onAuxClick={(event) => {
+          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 (
+    <Stack direction="column" height="100%" width="100%" overflow="hidden">
+      <Stack
+        direction="row"
+        sx={(theme) => ({
+          display: generatedModelNames.length === 0 ? 'none' : 'flex',
+          alignItems: 'center',
+          borderBottom: `1px solid ${theme.palette.outer.border}`,
+        })}
+      >
+        <Tabs
+          value={selectedIndex}
+          onChange={(_event, value) => {
+            if (value === 0) {
+              editorStore.selectGeneratedModel(undefined);
+            } else if (typeof value === 'number') {
+              editorStore.selectGeneratedModel(generatedModelNames[value - 1]);
+            }
+          }}
+          variant="scrollable"
+          scrollButtons="auto"
+          sx={{ flexGrow: 1 }}
+        >
+          <Tab label="Initial model" />
+          {generatedModelTabs}
+        </Tabs>
+        <IconButton
+          aria-label="Close generated model"
+          onClick={() =>
+            editorStore.deleteGeneratedModel(selectedGeneratedModel)
+          }
+          disabled={selectedIndex === 0}
+          sx={{ mx: 1 }}
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </Stack>
+      {generatedModel === undefined ? (
+        <SplitGraphPane graph={graph} themeStore={themeStore} />
+      ) : (
+        <GeneratedModelPane
+          generatedModel={generatedModel}
+          themeStore={themeStore}
+        />
+      )}
+    </Stack>
+  );
+}
+
+export default observer(ModelWorkArea);