diff options
Diffstat (limited to 'subprojects/frontend/src/graph/GraphPane.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/GraphPane.tsx | 30 |
1 files changed, 15 insertions, 15 deletions
diff --git a/subprojects/frontend/src/graph/GraphPane.tsx b/subprojects/frontend/src/graph/GraphPane.tsx index f69f52a6..f04b9931 100644 --- a/subprojects/frontend/src/graph/GraphPane.tsx +++ b/subprojects/frontend/src/graph/GraphPane.tsx | |||
@@ -5,24 +5,24 @@ | |||
5 | */ | 5 | */ |
6 | 6 | ||
7 | import Stack from '@mui/material/Stack'; | 7 | import Stack from '@mui/material/Stack'; |
8 | import { styled } from '@mui/material/styles'; | 8 | import { Suspense, lazy } from 'react'; |
9 | import stringify from 'json-stringify-pretty-compact'; | ||
10 | import { observer } from 'mobx-react-lite'; | ||
11 | 9 | ||
12 | import { useRootStore } from '../RootStoreProvider'; | 10 | import Loading from '../Loading'; |
13 | 11 | ||
14 | const StyledCode = styled('code')(({ theme }) => ({ | 12 | const GraphArea = lazy(() => import('./GraphArea')); |
15 | ...theme.typography.editor, | ||
16 | fontWeight: theme.typography.fontWeightEditorNormal, | ||
17 | margin: theme.spacing(2), | ||
18 | whiteSpace: 'pre', | ||
19 | })); | ||
20 | 13 | ||
21 | export default observer(function GraphPane(): JSX.Element { | 14 | export default function GraphPane(): JSX.Element { |
22 | const { editorStore } = useRootStore(); | ||
23 | return ( | 15 | return ( |
24 | <Stack direction="column" height="100%" overflow="auto"> | 16 | <Stack |
25 | <StyledCode>{stringify(editorStore?.semantics ?? {})}</StyledCode> | 17 | direction="column" |
18 | height="100%" | ||
19 | overflow="auto" | ||
20 | alignItems="center" | ||
21 | justifyContent="center" | ||
22 | > | ||
23 | <Suspense fallback={<Loading />}> | ||
24 | <GraphArea /> | ||
25 | </Suspense> | ||
26 | </Stack> | 26 | </Stack> |
27 | ); | 27 | ); |
28 | }); | 28 | } |