6 files changed, 323 insertions, 0 deletions

diff --git a/subprojects/frontend/src/table/RelationGrid.tsx b/subprojects/frontend/src/table/RelationGrid.tsx
new file mode 100644
index 00000000..004982c9
--- /dev/null
+++ b/subprojects/frontend/src/table/RelationGrid.tsx
@@ -0,0 +1,109 @@
+/*
+ * 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/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
new file mode 100644
index 00000000..cf37b96a
--- /dev/null
+++ b/subprojects/frontend/src/table/TableArea.tsx
@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+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
new file mode 100644
index 00000000..01442c3a
--- /dev/null
+++ b/subprojects/frontend/src/table/TablePane.tsx
@@ -0,0 +1,22 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import Stack from '@mui/material/Stack';
+import { Suspense, lazy } from 'react';
+
+import Loading from '../Loading';
+
+const TableArea = lazy(() => import('./TableArea'));
+
+export default function TablePane(): JSX.Element {
+  return (
+    <Stack direction="column" height="100%" overflow="auto" alignItems="center">
+      <Suspense fallback={<Loading />}>
+        <TableArea />
+      </Suspense>
+    </Stack>
+  );
+}
diff --git a/subprojects/frontend/src/table/TableToolbar.tsx b/subprojects/frontend/src/table/TableToolbar.tsx
new file mode 100644
index 00000000..b14e73c5
--- /dev/null
+++ b/subprojects/frontend/src/table/TableToolbar.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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,
+  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 />
+        <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;
+  }
+}