/*
* SPDX-FileCopyrightText: 2021-2023 The Refinery Authors
*
* 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 (
(
)}
options={relations}
getOptionLabel={(option) => option.name}
renderOption={(props, option) => (
)}
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);