diff options
author | Kristóf Marussy <kristof@marussy.com> | 2023-09-12 21:59:50 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2023-09-12 21:59:50 +0200 |
commit | a2a4696fdbd6440269d576aeba7b25b2ea40d9bf (patch) | |
tree | 5cbdf981a51a09fbe162e7748555d213ca518ff4 /subprojects/frontend/src/graph | |
parent | fix: avoid GLOP error message on stderr (diff) | |
download | refinery-a2a4696fdbd6440269d576aeba7b25b2ea40d9bf.tar.gz refinery-a2a4696fdbd6440269d576aeba7b25b2ea40d9bf.tar.zst refinery-a2a4696fdbd6440269d576aeba7b25b2ea40d9bf.zip |
feat: connect model generator to UI
Diffstat (limited to 'subprojects/frontend/src/graph')
-rw-r--r-- | subprojects/frontend/src/graph/GraphArea.tsx | 12 | ||||
-rw-r--r-- | subprojects/frontend/src/graph/GraphPane.tsx | 10 |
2 files changed, 10 insertions, 12 deletions
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx index f8f40d22..d5801b9a 100644 --- a/subprojects/frontend/src/graph/GraphArea.tsx +++ b/subprojects/frontend/src/graph/GraphArea.tsx | |||
@@ -9,25 +9,17 @@ import { useTheme } from '@mui/material/styles'; | |||
9 | import { observer } from 'mobx-react-lite'; | 9 | import { observer } from 'mobx-react-lite'; |
10 | import { useResizeDetector } from 'react-resize-detector'; | 10 | import { useResizeDetector } from 'react-resize-detector'; |
11 | 11 | ||
12 | import Loading from '../Loading'; | ||
13 | import { useRootStore } from '../RootStoreProvider'; | ||
14 | |||
15 | import DotGraphVisualizer from './DotGraphVisualizer'; | 12 | import DotGraphVisualizer from './DotGraphVisualizer'; |
13 | import type GraphStore from './GraphStore'; | ||
16 | import VisibilityPanel from './VisibilityPanel'; | 14 | import VisibilityPanel from './VisibilityPanel'; |
17 | import ZoomCanvas from './ZoomCanvas'; | 15 | import ZoomCanvas from './ZoomCanvas'; |
18 | 16 | ||
19 | function GraphArea(): JSX.Element { | 17 | function GraphArea({ graph }: { graph: GraphStore }): JSX.Element { |
20 | const { editorStore } = useRootStore(); | ||
21 | const { breakpoints } = useTheme(); | 18 | const { breakpoints } = useTheme(); |
22 | const { ref, width, height } = useResizeDetector({ | 19 | const { ref, width, height } = useResizeDetector({ |
23 | refreshMode: 'debounce', | 20 | refreshMode: 'debounce', |
24 | }); | 21 | }); |
25 | 22 | ||
26 | if (editorStore === undefined) { | ||
27 | return <Loading />; | ||
28 | } | ||
29 | |||
30 | const { graph } = editorStore; | ||
31 | const breakpoint = breakpoints.values.sm; | 23 | const breakpoint = breakpoints.values.sm; |
32 | const dialog = | 24 | const dialog = |
33 | width === undefined || | 25 | width === undefined || |
diff --git a/subprojects/frontend/src/graph/GraphPane.tsx b/subprojects/frontend/src/graph/GraphPane.tsx index c2ef8927..67dbfcbd 100644 --- a/subprojects/frontend/src/graph/GraphPane.tsx +++ b/subprojects/frontend/src/graph/GraphPane.tsx | |||
@@ -9,9 +9,15 @@ import { Suspense, lazy } from 'react'; | |||
9 | 9 | ||
10 | import Loading from '../Loading'; | 10 | import Loading from '../Loading'; |
11 | 11 | ||
12 | import type GraphStore from './GraphStore'; | ||
13 | |||
12 | const GraphArea = lazy(() => import('./GraphArea')); | 14 | const GraphArea = lazy(() => import('./GraphArea')); |
13 | 15 | ||
14 | export default function GraphPane(): JSX.Element { | 16 | export default function GraphPane({ |
17 | graph, | ||
18 | }: { | ||
19 | graph: GraphStore; | ||
20 | }): JSX.Element { | ||
15 | return ( | 21 | return ( |
16 | <Stack | 22 | <Stack |
17 | direction="column" | 23 | direction="column" |
@@ -21,7 +27,7 @@ export default function GraphPane(): JSX.Element { | |||
21 | justifyContent="center" | 27 | justifyContent="center" |
22 | > | 28 | > |
23 | <Suspense fallback={<Loading />}> | 29 | <Suspense fallback={<Loading />}> |
24 | <GraphArea /> | 30 | <GraphArea graph={graph} /> |
25 | </Suspense> | 31 | </Suspense> |
26 | </Stack> | 32 | </Stack> |
27 | ); | 33 | ); |