Display shortcuts correctly in attribute annotation mode (#8415)

cvat-ai · Sep 8, 2024 · 632c4ce · 632c4ce
1 parent e4c443f
commit 632c4ce
Showing 1 changed file with 42 additions and 22 deletions.
diff --git a/...ion-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx b/...ion-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx
@@ -32,8 +32,10 @@ interface InputElementParameters {
 
 const componentShortcuts: Record<string, KeyMapItem> = {};
 
+const makeKey = (index: number) => `AAM_SET_ATTR_VALUE_${index}`;
+
 for (const idx of Array.from({ length: 10 }, (_, i) => i)) {
-    componentShortcuts[`SET_${idx}_VALUE`] = {
+    componentShortcuts[makeKey(idx)] = {
         name: `Set ${idx + 1} value to the current attribute`,
         description: `Change current value for the attribute to the ${idx + 1} value in the list`,
         sequences: [`${idx}`],
@@ -209,7 +211,10 @@ interface ListProps {
 
 function AttrValuesList(props: ListProps): JSX.Element | null {
     const { inputType, values, onChange } = props;
+
     const { keyMap } = useSelector((state: CombinedState) => state.shortcuts);
+    const { normalizedKeyMap } = useSelector((state: CombinedState) => state.shortcuts);
+
     const sortedValues = ['true', 'false'];
     const filteredValues = values.filter((value: string): boolean => value !== config.UNDEFINED_ATTRIBUTE_VALUE);
     const prevValuesRef = useRef<string[] | null>(null);
@@ -225,22 +230,24 @@ function AttrValuesList(props: ListProps): JSX.Element | null {
                 };
                 return acc;
             }, {});
-            let processedValues = sortedValues;
+
+            let valuesWithShortcuts = sortedValues;
             if (inputType === 'checkbox' && values[0].toLowerCase() !== 'true') {
-                processedValues = [...sortedValues].reverse();
+                valuesWithShortcuts = [...sortedValues].reverse();
             } else if (inputType === 'radio' || inputType === 'select') {
-                processedValues = filteredValues.slice(0, 10);
+                valuesWithShortcuts = filteredValues.slice(0, 10);
             }
 
-            processedValues.forEach((value: string, index: number): void => {
-                const key = `SET_${index}_VALUE`;
+            valuesWithShortcuts.forEach((value: string, index: number): void => {
+                const key = makeKey(index);
                 updatedComponentShortcuts[key] = {
                     ...updatedComponentShortcuts[key],
                     nonActive: false,
                     name: `Assign attribute value ${value}`,
                     description: `Change current value for the attribute to ${value}`,
                 };
             });
+
             registerComponentShortcuts({ ...updatedComponentShortcuts });
             prevValuesRef.current = values;
         }
@@ -252,7 +259,7 @@ function AttrValuesList(props: ListProps): JSX.Element | null {
         } = {};
 
         sortedValues.forEach((value: string, index: number): void => {
-            const key = `SET_${index}_VALUE`;
+            const key = makeKey(index);
             handlers[key] = (event: KeyboardEvent | undefined) => {
                 if (event) {
                     event.preventDefault();
@@ -262,17 +269,23 @@ function AttrValuesList(props: ListProps): JSX.Element | null {
             };
         });
 
+        const key0 = makeKey(0);
+        const key1 = makeKey(1);
         return (
             <div className='attribute-annotation-sidebar-attr-list-wrapper'>
                 <GlobalHotKeys keyMap={subKeyMap(componentShortcuts, keyMap)} handlers={handlers} />
-                <div>
-                    <Text strong>0:</Text>
-                    <Text>{` ${sortedValues[0]}`}</Text>
-                </div>
-                <div>
-                    <Text strong>1:</Text>
-                    <Text>{` ${sortedValues[1]}`}</Text>
-                </div>
+                {keyMap[key0]?.sequences?.length > 0 && (
+                    <div>
+                        <Text strong>{`${normalizedKeyMap[key0]}: `}</Text>
+                        <Text>{` ${sortedValues[0]}`}</Text>
+                    </div>
+                )}
+                {keyMap[key1]?.sequences?.length > 0 && (
+                    <div>
+                        <Text strong>{`${normalizedKeyMap[key1]}: `}</Text>
+                        <Text>{` ${sortedValues[1]}`}</Text>
+                    </div>
+                )}
             </div>
         );
     }
@@ -283,7 +296,7 @@ function AttrValuesList(props: ListProps): JSX.Element | null {
         } = {};
 
         filteredValues.slice(0, 10).forEach((value: string, index: number): void => {
-            const key = `SET_${index}_VALUE`;
+            const key = makeKey(index);
             handlers[key] = (event: KeyboardEvent | undefined) => {
                 if (event) {
                     event.preventDefault();
@@ -297,12 +310,19 @@ function AttrValuesList(props: ListProps): JSX.Element | null {
             <div className='attribute-annotation-sidebar-attr-list-wrapper'>
                 <GlobalHotKeys keyMap={subKeyMap(componentShortcuts, keyMap)} handlers={handlers} />
                 {filteredValues.map(
-                    (value: string, index: number): JSX.Element => (
-                        <div key={value}>
-                            <Text strong>{`${index}:`}</Text>
-                            <Text>{` ${value}`}</Text>
-                        </div>
-                    ),
+                    (value: string, index: number): JSX.Element | null => {
+                        const key = makeKey(index);
+                        if (keyMap[key]?.sequences?.length) {
+                            return (
+                                <div key={value}>
+                                    <Text strong>{`${normalizedKeyMap[key]}: `}</Text>
+                                    <Text>{` ${value}`}</Text>
+                                </div>
+                            );
+                        }
+
+                        return null;
+                    },
                 )}
             </div>
         );