feat: connect model generator to UI

3 files changed, 102 insertions, 121 deletions

diff --git a/subprojects/frontend/src/table/RelationGrid.tsx b/subprojects/frontend/src/table/RelationGrid.tsx
deleted file mode 100644
index 004982c9..00000000
--- a/subprojects/frontend/src/table/RelationGrid.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-
-import Box from '@mui/material/Box';
-import {
-  DataGrid,
-  type GridRenderCellParams,
-  type GridColDef,
-} from '@mui/x-data-grid';
-import { observer } from 'mobx-react-lite';
-import { useMemo } from 'react';
-
-import type GraphStore from '../graph/GraphStore';
-
-import TableToolbar from './TableToolbar';
-import ValueRenderer from './ValueRenderer';
-
-interface Row {
-  nodes: string[];
-  value: string;
-}
-
-function RelationGrid({ graph }: { graph: GraphStore }): JSX.Element {
-  const {
-    selectedSymbol,
-    semantics: { nodes, partialInterpretation },
-  } = graph;
-  const symbolName = selectedSymbol?.name;
-  const arity = selectedSymbol?.arity ?? 0;
-
-  const columns = useMemo<GridColDef<Row>[]>(() => {
-    const defs: GridColDef<Row>[] = [];
-    for (let i = 0; i < arity; i += 1) {
-      defs.push({
-        field: `n${i}`,
-        headerName: String(i + 1),
-        valueGetter: (row) => row.row.nodes[i] ?? '',
-        flex: 1,
-      });
-    }
-    defs.push({
-      field: 'value',
-      headerName: 'Value',
-      flex: 1,
-      renderCell: ({ value }: GridRenderCellParams<Row, string>) => (
-        <ValueRenderer value={value} />
-      ),
-    });
-    return defs;
-  }, [arity]);
-
-  const rows = useMemo<Row[]>(() => {
-    if (symbolName === undefined) {
-      return [];
-    }
-    const interpretation = partialInterpretation[symbolName] ?? [];
-    return interpretation.map((tuple) => {
-      const nodeNames: string[] = [];
-      for (let i = 0; i < arity; i += 1) {
-        const index = tuple[i];
-        if (typeof index === 'number') {
-          const node = nodes[index];
-          if (node !== undefined) {
-            nodeNames.push(node.name);
-          }
-        }
-      }
-      return {
-        nodes: nodeNames,
-        value: String(tuple[arity]),
-      };
-    });
-  }, [arity, nodes, partialInterpretation, symbolName]);
-
-  return (
-    <Box
-      width="100%"
-      height="100%"
-      p={1}
-      sx={(theme) => ({
-        '.MuiDataGrid-withBorderColor': {
-          borderColor:
-            theme.palette.mode === 'dark'
-              ? theme.palette.divider
-              : theme.palette.outer.border,
-        },
-      })}
-    >
-      <DataGrid
-        slots={{ toolbar: TableToolbar }}
-        slotProps={{
-          toolbar: {
-            graph,
-          },
-        }}
-        density="compact"
-        rowSelection={false}
-        columns={columns}
-        rows={rows}
-        getRowId={(row) => row.nodes.join(',')}
-      />
-    </Box>
-  );
-}
-
-export default observer(RelationGrid);
diff --git a/subprojects/frontend/src/table/TableArea.tsx b/subprojects/frontend/src/table/TableArea.tsx
index cf37b96a..166b8adf 100644
--- a/subprojects/frontend/src/table/TableArea.tsx
+++ b/subprojects/frontend/src/table/TableArea.tsx
@@ -4,21 +4,106 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
+import Box from '@mui/material/Box';
+import {
+  DataGrid,
+  type GridRenderCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
 import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
 
-import Loading from '../Loading';
-import { useRootStore } from '../RootStoreProvider';
+import type GraphStore from '../graph/GraphStore';
 
-import RelationGrid from './RelationGrid';
+import TableToolbar from './TableToolbar';
+import ValueRenderer from './ValueRenderer';
 
-function TablePane(): JSX.Element {
-  const { editorStore } = useRootStore();
+interface Row {
+  nodes: string[];
+  value: string;
+}
+
+function TableArea({ graph }: { graph: GraphStore }): JSX.Element {
+  const {
+    selectedSymbol,
+    semantics: { nodes, partialInterpretation },
+  } = graph;
+  const symbolName = selectedSymbol?.name;
+  const arity = selectedSymbol?.arity ?? 0;
+
+  const columns = useMemo<GridColDef<Row>[]>(() => {
+    const defs: GridColDef<Row>[] = [];
+    for (let i = 0; i < arity; i += 1) {
+      defs.push({
+        field: `n${i}`,
+        headerName: String(i + 1),
+        valueGetter: (row) => row.row.nodes[i] ?? '',
+        flex: 1,
+      });
+    }
+    defs.push({
+      field: 'value',
+      headerName: 'Value',
+      flex: 1,
+      renderCell: ({ value }: GridRenderCellParams<Row, string>) => (
+        <ValueRenderer value={value} />
+      ),
+    });
+    return defs;
+  }, [arity]);
 
-  if (editorStore === undefined) {
-    return <Loading />;
-  }
+  const rows = useMemo<Row[]>(() => {
+    if (symbolName === undefined) {
+      return [];
+    }
+    const interpretation = partialInterpretation[symbolName] ?? [];
+    return interpretation.map((tuple) => {
+      const nodeNames: string[] = [];
+      for (let i = 0; i < arity; i += 1) {
+        const index = tuple[i];
+        if (typeof index === 'number') {
+          const node = nodes[index];
+          if (node !== undefined) {
+            nodeNames.push(node.name);
+          }
+        }
+      }
+      return {
+        nodes: nodeNames,
+        value: String(tuple[arity]),
+      };
+    });
+  }, [arity, nodes, partialInterpretation, symbolName]);
 
-  return <RelationGrid graph={editorStore.graph} />;
+  return (
+    <Box
+      width="100%"
+      height="100%"
+      p={1}
+      sx={(theme) => ({
+        '.MuiDataGrid-withBorderColor': {
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? theme.palette.divider
+              : theme.palette.outer.border,
+        },
+      })}
+    >
+      <DataGrid
+        slots={{ toolbar: TableToolbar }}
+        slotProps={{
+          toolbar: {
+            graph,
+          },
+        }}
+        density="compact"
+        rowSelection={false}
+        columns={columns}
+        rows={rows}
+        getRowId={(row) => row.nodes.join(',')}
+      />
+    </Box>
+  );
 }
 
-export default observer(TablePane);
+export default observer(TableArea);
diff --git a/subprojects/frontend/src/table/TablePane.tsx b/subprojects/frontend/src/table/TablePane.tsx
index 01442c3a..8b640217 100644
--- a/subprojects/frontend/src/table/TablePane.tsx
+++ b/subprojects/frontend/src/table/TablePane.tsx
@@ -8,14 +8,19 @@ import Stack from '@mui/material/Stack';
 import { Suspense, lazy } from 'react';
 
 import Loading from '../Loading';
+import type GraphStore from '../graph/GraphStore';
 
 const TableArea = lazy(() => import('./TableArea'));
 
-export default function TablePane(): JSX.Element {
+export default function TablePane({
+  graph,
+}: {
+  graph: GraphStore;
+}): JSX.Element {
   return (
     <Stack direction="column" height="100%" overflow="auto" alignItems="center">
       <Suspense fallback={<Loading />}>
-        <TableArea />
+        <TableArea graph={graph} />
       </Suspense>
     </Stack>
   );