7 files changed, 185 insertions, 4 deletions

diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 06ff9f6b..39ebd1df 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -49,6 +49,7 @@
     "ansi-styles": "^6.2.1",
     "csstype": "^3.1.2",
     "escape-string-regexp": "^5.0.0",
+    "json-stringify-pretty-compact": "^4.0.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.8.1",
     "loglevel-plugin-prefix": "^0.8.4",
@@ -59,6 +60,7 @@
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resize-detector": "^9.1.0",
     "xstate": "^4.38.2",
     "zod": "^3.22.0"
   },
diff --git a/subprojects/frontend/src/Refinery.tsx b/subprojects/frontend/src/Refinery.tsx
index b5ff94e1..099646f0 100644
--- a/subprojects/frontend/src/Refinery.tsx
+++ b/subprojects/frontend/src/Refinery.tsx
@@ -4,13 +4,151 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Box from '@mui/material/Box';
 import Grow from '@mui/material/Grow';
 import Stack from '@mui/material/Stack';
+import { alpha, useTheme } from '@mui/material/styles';
 import { SnackbarProvider } from 'notistack';
+import { memo, useRef, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
 
 import TopBar from './TopBar';
 import UpdateNotification from './UpdateNotification';
 import EditorPane from './editor/EditorPane';
+import GraphPane from './graph/GraphPane';
+
+const DirectionalSplitPane = memo(function SplitPanel({
+  horizontalSplit,
+}: {
+  horizontalSplit: boolean;
+}): JSX.Element {
+  const theme = useTheme();
+  const stackRef = useRef<HTMLDivElement>(null);
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const [resizing, setResizing] = useState(false);
+  const [fraction, setFraction] = useState(0.5);
+
+  const direction = horizontalSplit ? 'column' : 'row';
+  const axis = horizontalSplit ? 'height' : 'width';
+  const primarySize = `calc(${fraction * 100}% - 0.5px)`;
+  const secondarySize = `calc(${(1 - fraction) * 100}% - 0.5px)`;
+
+  return (
+    <Stack direction={direction} height="100%" overflow="hidden" ref={stackRef}>
+      <Box {...{ [axis]: primarySize }}>
+        <EditorPane />
+      </Box>
+      <Box
+        sx={{
+          overflow: 'visible',
+          position: 'relative',
+          [axis]: '0px',
+          display: 'flex',
+          flexDirection: direction,
+          [horizontalSplit
+            ? 'borderBottom'
+            : 'borderRight']: `1px solid ${theme.palette.outer.border}`,
+        }}
+      >
+        <Box
+          ref={sliderRef}
+          sx={{
+            display: 'flex',
+            position: 'absolute',
+            [axis]: theme.spacing(2),
+            ...(horizontalSplit
+              ? {
+                  top: theme.spacing(-1),
+                  left: 0,
+                  right: 0,
+                  transform: 'translateY(0.5px)',
+                }
+              : {
+                  left: theme.spacing(-1),
+                  top: 0,
+                  bottom: 0,
+                  transform: 'translateX(0.5px)',
+                }),
+            zIndex: 999,
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: theme.palette.text.secondary,
+            cursor: horizontalSplit ? 'ns-resize' : 'ew-resize',
+            '.MuiSvgIcon-root': {
+              opacity: resizing ? 1 : 0,
+            },
+            ...(resizing
+              ? {
+                  background: alpha(
+                    theme.palette.text.primary,
+                    theme.palette.action.activatedOpacity,
+                  ),
+                }
+              : {
+                  '&:hover': {
+                    background: alpha(
+                      theme.palette.text.primary,
+                      theme.palette.action.hoverOpacity,
+                    ),
+                    '.MuiSvgIcon-root': {
+                      opacity: 1,
+                    },
+                  },
+                }),
+          }}
+          onPointerDown={(event) => {
+            if (event.button !== 0) {
+              return;
+            }
+            sliderRef.current?.setPointerCapture(event.pointerId);
+            setResizing(true);
+          }}
+          onPointerUp={(event) => {
+            if (event.button !== 0) {
+              return;
+            }
+            sliderRef.current?.releasePointerCapture(event.pointerId);
+            setResizing(false);
+          }}
+          onPointerMove={(event) => {
+            if (!resizing) {
+              return;
+            }
+            const container = stackRef.current;
+            if (container === null) {
+              return;
+            }
+            const rect = container.getBoundingClientRect();
+            const newFraction = horizontalSplit
+              ? (event.clientY - rect.top) / rect.height
+              : (event.clientX - rect.left) / rect.width;
+            setFraction(Math.min(0.9, Math.max(0.1, newFraction)));
+          }}
+          onDoubleClick={() => setFraction(0.5)}
+        >
+          {horizontalSplit ? <MoreHorizIcon /> : <MoreVertIcon />}
+        </Box>
+      </Box>
+      <Box {...{ [axis]: secondarySize }}>
+        <GraphPane />
+      </Box>
+    </Stack>
+  );
+});
+
+function SplitPane(): JSX.Element {
+  const { ref, width, height } = useResizeDetector();
+  const horizontalSplit =
+    width !== undefined && height !== undefined && height > width;
+
+  return (
+    <Box height="100%" overflow="auto" ref={ref}>
+      <DirectionalSplitPane horizontalSplit={horizontalSplit} />
+    </Box>
+  );
+}
 
 export default function Refinery(): JSX.Element {
   return (
@@ -18,7 +156,7 @@ export default function Refinery(): JSX.Element {
       <UpdateNotification />
       <Stack direction="column" height="100%" overflow="auto">
         <TopBar />
-        <EditorPane />
+        <SplitPane />
       </Stack>
     </SnackbarProvider>
   );
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index 87f408fe..c9f86496 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -39,7 +39,7 @@ export default observer(function EditorPane(): JSX.Element {
   const { editorStore } = useRootStore();
 
   return (
-    <Stack direction="column" flexGrow={1} flexShrink={1} overflow="auto">
+    <Stack direction="column" height="100%" overflow="auto">
       <Toolbar variant="dense">
         <EditorButtons editorStore={editorStore} />
       </Toolbar>
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index b98f085e..c79f6ec1 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -58,6 +58,8 @@ export default class EditorStore {
 
   disposed = false;
 
+  semantics: unknown = {};
+
   constructor(initialValue: string, pwaStore: PWAStore) {
     this.id = nanoid();
     this.state = createEditorState(initialValue, this);
@@ -282,6 +284,10 @@ export default class EditorStore {
     return true;
   }
 
+  setSemantics(semantics: unknown) {
+    this.semantics = semantics;
+  }
+
   dispose(): void {
     this.client?.dispose();
     this.disposed = true;
diff --git a/subprojects/frontend/src/graph/GraphPane.tsx b/subprojects/frontend/src/graph/GraphPane.tsx
new file mode 100644
index 00000000..f69f52a6
--- /dev/null
+++ b/subprojects/frontend/src/graph/GraphPane.tsx
@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import Stack from '@mui/material/Stack';
+import { styled } from '@mui/material/styles';
+import stringify from 'json-stringify-pretty-compact';
+import { observer } from 'mobx-react-lite';
+
+import { useRootStore } from '../RootStoreProvider';
+
+const StyledCode = styled('code')(({ theme }) => ({
+  ...theme.typography.editor,
+  fontWeight: theme.typography.fontWeightEditorNormal,
+  margin: theme.spacing(2),
+  whiteSpace: 'pre',
+}));
+
+export default observer(function GraphPane(): JSX.Element {
+  const { editorStore } = useRootStore();
+  return (
+    <Stack direction="column" height="100%" overflow="auto">
+      <StyledCode>{stringify(editorStore?.semantics ?? {})}</StyledCode>
+    </Stack>
+  );
+});
diff --git a/subprojects/frontend/src/xtext/XtextClient.ts b/subprojects/frontend/src/xtext/XtextClient.ts
index abdf8518..d145cd30 100644
--- a/subprojects/frontend/src/xtext/XtextClient.ts
+++ b/subprojects/frontend/src/xtext/XtextClient.ts
@@ -38,7 +38,7 @@ export default class XtextClient {
   private readonly occurrencesService: OccurrencesService;
 
   constructor(
-    store: EditorStore,
+    private readonly store: EditorStore,
     private readonly pwaStore: PWAStore,
   ) {
     this.webSocketClient = new XtextWebSocketClient(
@@ -114,6 +114,9 @@ export default class XtextClient {
       case 'validate':
         this.validationService.onPush(push);
         return;
+      case 'semantics':
+        this.store.setSemantics(push);
+        return;
       default:
         throw new Error('Unknown service');
     }
diff --git a/subprojects/frontend/src/xtext/xtextMessages.ts b/subprojects/frontend/src/xtext/xtextMessages.ts
index bbbff064..971720e1 100644
--- a/subprojects/frontend/src/xtext/xtextMessages.ts
+++ b/subprojects/frontend/src/xtext/xtextMessages.ts
@@ -34,7 +34,11 @@ export const XtextWebErrorResponse = z.object({
 
 export type XtextWebErrorResponse = z.infer<typeof XtextWebErrorResponse>;
 
-export const XtextWebPushService = z.enum(['highlight', 'validate']);
+export const XtextWebPushService = z.enum([
+  'highlight',
+  'validate',
+  'semantics',
+]);
 
 export type XtextWebPushService = z.infer<typeof XtextWebPushService>;