refactor(frontend): friendlier table view messages

2 files changed, 62 insertions, 2 deletions

diff --git a/subprojects/frontend/src/table/SymbolSelector.tsx b/subprojects/frontend/src/table/SymbolSelector.tsx
index 5272f8ed..10a9ba9d 100644
--- a/subprojects/frontend/src/table/SymbolSelector.tsx
+++ b/subprojects/frontend/src/table/SymbolSelector.tsx
@@ -33,7 +33,7 @@ function SymbolSelector({ graph }: { graph: GraphStore }): JSX.Element {
           }}
           variant="standard"
           size="medium"
-          placeholder="Symbol"
+          placeholder={`Select symbol to view\u2026`}
         />
       )}
       options={relations}
diff --git a/subprojects/frontend/src/table/TableArea.tsx b/subprojects/frontend/src/table/TableArea.tsx
index 854f3a97..dc886715 100644
--- a/subprojects/frontend/src/table/TableArea.tsx
+++ b/subprojects/frontend/src/table/TableArea.tsx
@@ -5,6 +5,7 @@
  */
 
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import {
   DataGrid,
   type GridRenderCellParams,
@@ -14,6 +15,7 @@ import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
 
 import type GraphStore from '../graph/GraphStore';
+import RelationName from '../graph/RelationName';
 
 import TableToolbar from './TableToolbar';
 import ValueRenderer from './ValueRenderer';
@@ -28,6 +30,54 @@ declare module '@mui/x-data-grid' {
   interface ToolbarPropsOverrides {
     graph: GraphStore;
   }
+
+  interface NoRowsOverlayPropsOverrides {
+    graph: GraphStore;
+  }
+
+  interface NoResultsOverlayPropsOverrides {
+    graph: GraphStore;
+  }
+}
+
+const noSymbolMessage =
+  'Please select a symbol from the list to view its interpretation';
+
+function NoRowsOverlay({
+  graph: { selectedSymbol },
+}: {
+  graph: GraphStore;
+}): JSX.Element {
+  return (
+    <Stack height="100%" alignItems="center" justifyContent="center">
+      {selectedSymbol === undefined ? (
+        noSymbolMessage
+      ) : (
+        <span>
+          Interpretation of <RelationName metadata={selectedSymbol} /> is empty
+        </span>
+      )}
+    </Stack>
+  );
+}
+
+function NoResultsOverlay({
+  graph: { selectedSymbol },
+}: {
+  graph: GraphStore;
+}): JSX.Element {
+  return (
+    <Stack height="100%" alignItems="center" justifyContent="center">
+      {selectedSymbol === undefined ? (
+        noSymbolMessage
+      ) : (
+        <span>
+          No results in the interpretation of{' '}
+          <RelationName metadata={selectedSymbol} />
+        </span>
+      )}
+    </Stack>
+  );
 }
 
 function TableArea({ graph }: { graph: GraphStore }): JSX.Element {
@@ -97,11 +147,21 @@ function TableArea({ graph }: { graph: GraphStore }): JSX.Element {
       })}
     >
       <DataGrid
-        slots={{ toolbar: TableToolbar }}
+        slots={{
+          toolbar: TableToolbar,
+          noRowsOverlay: NoRowsOverlay,
+          noResultsOverlay: NoResultsOverlay,
+        }}
         slotProps={{
           toolbar: {
             graph,
           },
+          noRowsOverlay: {
+            graph,
+          },
+          noResultsOverlay: {
+            graph,
+          },
         }}
         initialState={{ density: 'compact' }}
         rowSelection={false}