diff options
Diffstat (limited to 'subprojects')
-rw-r--r-- | subprojects/frontend/src/table/SymbolSelector.tsx | 2 | ||||
-rw-r--r-- | subprojects/frontend/src/table/TableArea.tsx | 62 |
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 { | |||
33 | }} | 33 | }} |
34 | variant="standard" | 34 | variant="standard" |
35 | size="medium" | 35 | size="medium" |
36 | placeholder="Symbol" | 36 | placeholder={`Select symbol to view\u2026`} |
37 | /> | 37 | /> |
38 | )} | 38 | )} |
39 | options={relations} | 39 | 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 @@ | |||
5 | */ | 5 | */ |
6 | 6 | ||
7 | import Box from '@mui/material/Box'; | 7 | import Box from '@mui/material/Box'; |
8 | import Stack from '@mui/material/Stack'; | ||
8 | import { | 9 | import { |
9 | DataGrid, | 10 | DataGrid, |
10 | type GridRenderCellParams, | 11 | type GridRenderCellParams, |
@@ -14,6 +15,7 @@ import { observer } from 'mobx-react-lite'; | |||
14 | import { useMemo } from 'react'; | 15 | import { useMemo } from 'react'; |
15 | 16 | ||
16 | import type GraphStore from '../graph/GraphStore'; | 17 | import type GraphStore from '../graph/GraphStore'; |
18 | import RelationName from '../graph/RelationName'; | ||
17 | 19 | ||
18 | import TableToolbar from './TableToolbar'; | 20 | import TableToolbar from './TableToolbar'; |
19 | import ValueRenderer from './ValueRenderer'; | 21 | import ValueRenderer from './ValueRenderer'; |
@@ -28,6 +30,54 @@ declare module '@mui/x-data-grid' { | |||
28 | interface ToolbarPropsOverrides { | 30 | interface ToolbarPropsOverrides { |
29 | graph: GraphStore; | 31 | graph: GraphStore; |
30 | } | 32 | } |
33 | |||
34 | interface NoRowsOverlayPropsOverrides { | ||
35 | graph: GraphStore; | ||
36 | } | ||
37 | |||
38 | interface NoResultsOverlayPropsOverrides { | ||
39 | graph: GraphStore; | ||
40 | } | ||
41 | } | ||
42 | |||
43 | const noSymbolMessage = | ||
44 | 'Please select a symbol from the list to view its interpretation'; | ||
45 | |||
46 | function NoRowsOverlay({ | ||
47 | graph: { selectedSymbol }, | ||
48 | }: { | ||
49 | graph: GraphStore; | ||
50 | }): JSX.Element { | ||
51 | return ( | ||
52 | <Stack height="100%" alignItems="center" justifyContent="center"> | ||
53 | {selectedSymbol === undefined ? ( | ||
54 | noSymbolMessage | ||
55 | ) : ( | ||
56 | <span> | ||
57 | Interpretation of <RelationName metadata={selectedSymbol} /> is empty | ||
58 | </span> | ||
59 | )} | ||
60 | </Stack> | ||
61 | ); | ||
62 | } | ||
63 | |||
64 | function NoResultsOverlay({ | ||
65 | graph: { selectedSymbol }, | ||
66 | }: { | ||
67 | graph: GraphStore; | ||
68 | }): JSX.Element { | ||
69 | return ( | ||
70 | <Stack height="100%" alignItems="center" justifyContent="center"> | ||
71 | {selectedSymbol === undefined ? ( | ||
72 | noSymbolMessage | ||
73 | ) : ( | ||
74 | <span> | ||
75 | No results in the interpretation of{' '} | ||
76 | <RelationName metadata={selectedSymbol} /> | ||
77 | </span> | ||
78 | )} | ||
79 | </Stack> | ||
80 | ); | ||
31 | } | 81 | } |
32 | 82 | ||
33 | function TableArea({ graph }: { graph: GraphStore }): JSX.Element { | 83 | function TableArea({ graph }: { graph: GraphStore }): JSX.Element { |
@@ -97,11 +147,21 @@ function TableArea({ graph }: { graph: GraphStore }): JSX.Element { | |||
97 | })} | 147 | })} |
98 | > | 148 | > |
99 | <DataGrid | 149 | <DataGrid |
100 | slots={{ toolbar: TableToolbar }} | 150 | slots={{ |
151 | toolbar: TableToolbar, | ||
152 | noRowsOverlay: NoRowsOverlay, | ||
153 | noResultsOverlay: NoResultsOverlay, | ||
154 | }} | ||
101 | slotProps={{ | 155 | slotProps={{ |
102 | toolbar: { | 156 | toolbar: { |
103 | graph, | 157 | graph, |
104 | }, | 158 | }, |
159 | noRowsOverlay: { | ||
160 | graph, | ||
161 | }, | ||
162 | noResultsOverlay: { | ||
163 | graph, | ||
164 | }, | ||
105 | }} | 165 | }} |
106 | initialState={{ density: 'compact' }} | 166 | initialState={{ density: 'compact' }} |
107 | rowSelection={false} | 167 | rowSelection={false} |