12 files changed, 330 insertions, 23 deletions

diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx
index 7b83171d..9cb02793 100644
--- a/subprojects/frontend/src/PaneButtons.tsx
+++ b/subprojects/frontend/src/PaneButtons.tsx
@@ -24,7 +24,7 @@ function PaneButtons({
     <ToggleButtonGroup
       size={hideLabel ? 'small' : 'medium'}
       className="rounded"
-      sx={{
+      sx={(theme) => ({
         '.MuiToggleButton-root': {
           ...(hideLabel
             ? {}
@@ -33,6 +33,10 @@ function PaneButtons({
               }),
           fontSize: '1rem',
           lineHeight: '1.5',
+          fontWeight: theme.typography.fontWeightMedium ?? 500,
+          '&:not(.Mui-selected)': {
+            color: theme.palette.text.secondary,
+          },
         },
         ...(hideLabel
           ? {}
@@ -41,7 +45,7 @@ function PaneButtons({
                 margin: '0 6px 0 -4px',
               },
             }),
-      }}
+      })}
     >
       <ToggleButton
         value="code"
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index e6350080..c22ca8b1 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -19,7 +19,6 @@ import { useEffect, useMemo, useState } from 'react';
 import PaneButtons from './PaneButtons';
 import { useRootStore } from './RootStoreProvider';
 import ToggleDarkModeButton from './ToggleDarkModeButton';
-import ConnectButton from './editor/ConnectButton';
 import GenerateButton from './editor/GenerateButton';
 
 function useWindowControlsOverlayVisible(): boolean {
@@ -102,16 +101,10 @@ export default observer(function TopBar(): JSX.Element {
           py: 0.5,
         }}
       >
-        <Typography variant="h6" component="h1">
+        <Typography variant="h6" component="h1" flexGrow={1}>
           Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>}
         </Typography>
-        <Stack direction="row" flexGrow={1} marginLeft={1} gap={1}>
-          <ConnectButton editorStore={editorStore} />
-          {medium && !large && (
-            <PaneButtons themeStore={themeStore} hideLabel />
-          )}
-        </Stack>
-        {large && (
+        {medium && (
           <Stack
             direction="row"
             alignItems="center"
@@ -124,7 +117,7 @@ export default observer(function TopBar(): JSX.Element {
               transform: 'translateX(-50%)',
             }}
           >
-            <PaneButtons themeStore={themeStore} />
+            <PaneButtons themeStore={themeStore} hideLabel={!large} />
           </Stack>
         )}
         <Stack direction="row" marginLeft={1} marginRight={1} gap={1}>
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index a7ac2f85..ca51f975 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -20,6 +20,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { observer } from 'mobx-react-lite';
 
+import ConnectButton from './ConnectButton';
 import type EditorStore from './EditorStore';
 
 // Exhastive switch as proven by TypeScript.
@@ -105,6 +106,7 @@ export default observer(function EditorButtons({
       >
         <FormatPaint fontSize="small" />
       </IconButton>
+      <ConnectButton editorStore={editorStore} />
     </Stack>
   );
 });
diff --git a/subprojects/frontend/src/graph/GraphStore.ts b/subprojects/frontend/src/graph/GraphStore.ts
index f81b4db4..50cb8c19 100644
--- a/subprojects/frontend/src/graph/GraphStore.ts
+++ b/subprojects/frontend/src/graph/GraphStore.ts
@@ -61,6 +61,8 @@ export default class GraphStore {
 
   abbreviate = true;
 
+  selectedSymbol: RelationMetadata | undefined;
+
   constructor() {
     makeAutoObservable(this, {
       semantics: observable.ref,
@@ -143,6 +145,19 @@ export default class GraphStore {
     this.abbreviate = !this.abbreviate;
   }
 
+  setSelectedSymbol(option: RelationMetadata | undefined): void {
+    if (option === undefined) {
+      this.selectedSymbol = undefined;
+      return;
+    }
+    const metadata = this.relationMetadata.get(option.name);
+    if (metadata !== undefined) {
+      this.selectedSymbol = metadata;
+    } else {
+      this.selectedSymbol = undefined;
+    }
+  }
+
   setSemantics(semantics: SemanticsSuccessResult) {
     this.semantics = semantics;
     this.relationMetadata.clear();
@@ -161,5 +176,6 @@ export default class GraphStore {
     toRemove.forEach((key) => {
       this.visibility.delete(key);
     });
+    this.setSelectedSymbol(this.selectedSymbol);
   }
 }
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index 8cbb8fbc..e14486d6 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -4,12 +4,17 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
+import { styled } from '@mui/material/styles';
 import { configure } from 'mobx';
 import { type Root, createRoot } from 'react-dom/client';
 
 import App from './App';
 import RootStore from './RootStore';
 
+// Make sure `styled` ends up in the entry chunk.
+// https://github.com/mui/material-ui/issues/32727#issuecomment-1659945548
+(window as unknown as { fixViteIssue: unknown }).fixViteIssue = styled;
+
 const initialValue = `// Metamodel
 class Person {
     contains Post[] posts opposite author
diff --git a/subprojects/frontend/src/table/RelationGrid.tsx b/subprojects/frontend/src/table/RelationGrid.tsx
new file mode 100644
index 00000000..4009a8b4
--- /dev/null
+++ b/subprojects/frontend/src/table/RelationGrid.tsx
@@ -0,0 +1,108 @@
+/*
+ * 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,
+          },
+        }}
+        rowSelection={false}
+        columns={columns}
+        rows={rows}
+        getRowId={(row) => row.nodes.join(',')}
+      />
+    </Box>
+  );
+}
+
+export default observer(RelationGrid);
diff --git a/subprojects/frontend/src/table/SymbolSelector.tsx b/subprojects/frontend/src/table/SymbolSelector.tsx
new file mode 100644
index 00000000..5272f8ed
--- /dev/null
+++ b/subprojects/frontend/src/table/SymbolSelector.tsx
@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import { observer } from 'mobx-react-lite';
+
+import type GraphStore from '../graph/GraphStore';
+import RelationName from '../graph/RelationName';
+
+function SymbolSelector({ graph }: { graph: GraphStore }): JSX.Element {
+  const {
+    selectedSymbol,
+    semantics: { relations },
+  } = graph;
+
+  return (
+    <Autocomplete
+      renderInput={(params) => (
+        <TextField
+          {...{
+            ...params,
+            InputLabelProps: {
+              ...params.InputLabelProps,
+              // Workaround for type errors.
+              className: params.InputLabelProps.className ?? '',
+              style: params.InputLabelProps.style ?? {},
+            },
+          }}
+          variant="standard"
+          size="medium"
+          placeholder="Symbol"
+        />
+      )}
+      options={relations}
+      getOptionLabel={(option) => option.name}
+      renderOption={(props, option) => (
+        <Box component="li" {...props}>
+          <RelationName metadata={option} />
+        </Box>
+      )}
+      value={selectedSymbol ?? null}
+      isOptionEqualToValue={(option, value) => option.name === value.name}
+      onChange={(_event, value) => graph.setSelectedSymbol(value ?? undefined)}
+      sx={(theme) => ({
+        flexBasis: 200,
+        maxWidth: 600,
+        flexGrow: 1,
+        flexShrink: 1,
+        '.MuiInput-underline::before': {
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? theme.palette.divider
+              : theme.palette.outer.border,
+        },
+      })}
+    />
+  );
+}
+
+export default observer(SymbolSelector);
diff --git a/subprojects/frontend/src/table/TableArea.tsx b/subprojects/frontend/src/table/TableArea.tsx
index b4c6d4ce..cf37b96a 100644
--- a/subprojects/frontend/src/table/TableArea.tsx
+++ b/subprojects/frontend/src/table/TableArea.tsx
@@ -4,6 +4,21 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-export default function TablePane(): JSX.Element {
-  return <div>Table</div>;
+import { observer } from 'mobx-react-lite';
+
+import Loading from '../Loading';
+import { useRootStore } from '../RootStoreProvider';
+
+import RelationGrid from './RelationGrid';
+
+function TablePane(): JSX.Element {
+  const { editorStore } = useRootStore();
+
+  if (editorStore === undefined) {
+    return <Loading />;
+  }
+
+  return <RelationGrid graph={editorStore.graph} />;
 }
+
+export default observer(TablePane);
diff --git a/subprojects/frontend/src/table/TablePane.tsx b/subprojects/frontend/src/table/TablePane.tsx
index 01f6ac53..01442c3a 100644
--- a/subprojects/frontend/src/table/TablePane.tsx
+++ b/subprojects/frontend/src/table/TablePane.tsx
@@ -13,13 +13,7 @@ const TableArea = lazy(() => import('./TableArea'));
 
 export default function TablePane(): JSX.Element {
   return (
-    <Stack
-      direction="column"
-      height="100%"
-      overflow="auto"
-      alignItems="center"
-      justifyContent="center"
-    >
+    <Stack direction="column" height="100%" overflow="auto" alignItems="center">
       <Suspense fallback={<Loading />}>
         <TableArea />
       </Suspense>
diff --git a/subprojects/frontend/src/table/TableToolbar.tsx b/subprojects/frontend/src/table/TableToolbar.tsx
new file mode 100644
index 00000000..7645deae
--- /dev/null
+++ b/subprojects/frontend/src/table/TableToolbar.tsx
@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import Stack from '@mui/material/Stack';
+import {
+  GridToolbarColumnsButton,
+  GridToolbarContainer,
+  GridToolbarDensitySelector,
+  GridToolbarExport,
+  GridToolbarFilterButton,
+} from '@mui/x-data-grid';
+
+import type GraphStore from '../graph/GraphStore';
+
+import SymbolSelector from './SymbolSelector';
+
+export default function TableToolbar({
+  graph,
+}: {
+  graph: GraphStore;
+}): JSX.Element {
+  return (
+    <GridToolbarContainer
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap-reverse',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Stack direction="row" flexWrap="wrap">
+        <GridToolbarColumnsButton />
+        <GridToolbarFilterButton />
+        <GridToolbarDensitySelector />
+        <GridToolbarExport />
+      </Stack>
+      <SymbolSelector graph={graph} />
+    </GridToolbarContainer>
+  );
+}
diff --git a/subprojects/frontend/src/table/ValueRenderer.tsx b/subprojects/frontend/src/table/ValueRenderer.tsx
new file mode 100644
index 00000000..ac5700e4
--- /dev/null
+++ b/subprojects/frontend/src/table/ValueRenderer.tsx
@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import LabelIcon from '@mui/icons-material/Label';
+import LabelOutlinedIcon from '@mui/icons-material/LabelOutlined';
+import { styled } from '@mui/material/styles';
+
+const Label = styled('div', {
+  name: 'ValueRenderer-Label',
+  shouldForwardProp: (prop) => prop !== 'value',
+})<{
+  value: 'TRUE' | 'UNKNOWN' | 'ERROR';
+}>(({ theme, value }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  ...(value === 'UNKNOWN'
+    ? {
+        color: theme.palette.text.secondary,
+      }
+    : {}),
+  ...(value === 'ERROR'
+    ? {
+        color: theme.palette.error.main,
+      }
+    : {}),
+  '& svg': {
+    marginRight: theme.spacing(0.5),
+  },
+}));
+
+export default function ValueRenderer({
+  value,
+}: {
+  value: string | undefined;
+}): React.ReactNode {
+  switch (value) {
+    case 'TRUE':
+      return (
+        <Label value={value}>
+          <LabelIcon fontSize="small" /> true
+        </Label>
+      );
+    case 'UNKNOWN':
+      return (
+        <Label value={value}>
+          <LabelOutlinedIcon fontSize="small" /> unknown
+        </Label>
+      );
+    case 'ERROR':
+      return (
+        <Label value={value}>
+          <CancelIcon fontSize="small" /> error
+        </Label>
+      );
+    default:
+      return value;
+  }
+}
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 90fea897..18310147 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -153,7 +153,7 @@ function createResponsiveTheme(
               }, {}),
             },
           },
-          sizeSmall: { fontSize: '0.75rem' },
+          sizeSmall: { fontSize: '0.875rem', lineHeight: '1.75' },
           sizeLarge: { fontSize: '1rem' },
           text: { '&.rounded': { padding: '6px 14px' } },
           textSizeSmall: { '&.rounded': { padding: '4px 8px' } },
@@ -289,7 +289,7 @@ const darkTheme = (() => {
           secondary: secondaryText,
           disabled: '#5c6370',
         },
-        divider: alpha(secondaryText, 0.24),
+        divider: alpha(primaryText, 0.24),
         outer: {
           background: darkBackground,
           border: '#181a1f',