Implement #7539

src/Components/SymbolProperties/SymbolForm.tsx

@@ -22,6 +22,15 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         type='string'
         value={props.symbol.id.toString()}
         isDisabled={true} />
+      <TextInputGroup
+        id='displayedText'
+        labelText={Text({ textId: '@SymbolDisplayedText' })}
+        inputKey='displayedText'
+        labelClassName=''
+        inputClassName=''
+        type='string'
+        value={props.symbol.displayedText}
+        onChange={(value) => props.onChange('displayedText', value)} />
       <TextInputGroup
         id='x'
         labelText={Text({ textId: '@SymbolX' })}

src/Components/SymbolsList/SymbolsList.tsx

@@ -16,13 +16,13 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
   const divRef = React.useRef<HTMLDivElement>(null);
   const height = useSize(divRef)[1];
   // Render
-  const containers = [...props.symbols.values()];
+  const symbols = [...props.symbols.values()];
   function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
-    const container = containers[index];
-    const key = container.id.toString();
-    const text = key;
+    const symbol = symbols[index];
+    const key = symbol.id;
+    const text = symbol.displayedText;
     const selectedClass: string = props.selectedSymbolId !== '' &&
-      props.selectedSymbolId === container.id
+      props.selectedSymbolId === symbol.id
       ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
       : 'bg-slate-300/60 hover:bg-slate-300';
 
@@ -45,7 +45,7 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
       <div ref={divRef} className='h-1/2 text-gray-800'>
         <List
           className='List divide-y divide-black'
-          itemCount={containers.length}
+          itemCount={symbols.length}
           itemSize={35}
           height={height}
           width={'100%'}