diff options
Diffstat (limited to 'subprojects/frontend/src/graph/GraphPane.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/GraphPane.tsx | 28 |
1 files changed, 28 insertions, 0 deletions
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 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | ||
3 | * | ||
4 | * SPDX-License-Identifier: EPL-2.0 | ||
5 | */ | ||
6 | |||
7 | import Stack from '@mui/material/Stack'; | ||
8 | import { styled } from '@mui/material/styles'; | ||
9 | import stringify from 'json-stringify-pretty-compact'; | ||
10 | import { observer } from 'mobx-react-lite'; | ||
11 | |||
12 | import { useRootStore } from '../RootStoreProvider'; | ||
13 | |||
14 | const StyledCode = styled('code')(({ theme }) => ({ | ||
15 | ...theme.typography.editor, | ||
16 | fontWeight: theme.typography.fontWeightEditorNormal, | ||
17 | margin: theme.spacing(2), | ||
18 | whiteSpace: 'pre', | ||
19 | })); | ||
20 | |||
21 | export default observer(function GraphPane(): JSX.Element { | ||
22 | const { editorStore } = useRootStore(); | ||
23 | return ( | ||
24 | <Stack direction="column" height="100%" overflow="auto"> | ||
25 | <StyledCode>{stringify(editorStore?.semantics ?? {})}</StyledCode> | ||
26 | </Stack> | ||
27 | ); | ||
28 | }); | ||