From 62ef33b35fcf310177a4a114364651f3f7b546b9 Mon Sep 17 00:00:00 2001
From: Martin Turoci <martin.turoci@h2o.ai>
Date: Thu, 3 Nov 2022 13:46:17 +0100
Subject: [PATCH] chore: Minor refactor. #1597

---
 ui/src/image_annotator.tsx | 38 +++++++++++++-------------------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/ui/src/image_annotator.tsx b/ui/src/image_annotator.tsx
index ac78e140ad..353d6fb87f 100644
--- a/ui/src/image_annotator.tsx
+++ b/ui/src/image_annotator.tsx
@@ -142,6 +142,14 @@ const
     }
     else if (shape.polygon) return { tag, shape: { polygon: { vertices: shape.polygon.vertices.map(i => ({ x: i.x * aspectRatio, y: i.y * aspectRatio })) } } }
     return { tag, shape }
+  }),
+  getFarItem = (key: S, text: S, onClick: () => void, activeShape: keyof ImageAnnotatorShape | 'select', iconName: S) => ({
+    key,
+    text,
+    onClick,
+    canCheck: true,
+    checked: activeShape === key,
+    iconProps: { iconName, styles: { root: { fontSize: 20 } } },
   })
 
 
@@ -375,31 +383,11 @@ export const XImageAnnotator = ({ model }: { model: ImageAnnotator }) => {
           },
         ]}
         farItems={[
-          {
-            key: 'select',
-            text: 'Select',
-            onClick: chooseShape,
-            canCheck: true,
-            checked: activeShape === 'select',
-            iconProps: { iconName: 'TouchPointer', styles: { root: { fontSize: 20 } } },
-          },
-          {
-            key: 'rect',
-            text: 'Rectangle',
-            onClick: chooseShape,
-            canCheck: true,
-            checked: activeShape === 'rect',
-            iconProps: { iconName: 'RectangleShape', styles: { root: { fontSize: 20 } } },
-          },
-          {
-            key: 'polygon',
-            text: 'Polygon',
-            onClick: chooseShape,
-            canCheck: true,
-            checked: activeShape === 'polygon',
-            iconProps: { iconName: 'SixPointStar', styles: { root: { fontSize: 20 } } },
-          },
-        ]} />
+          getFarItem('select', 'Select', chooseShape, activeShape, 'TouchPointer'),
+          getFarItem('rect', 'Rectangle', chooseShape, activeShape, 'RectangleShape'),
+          getFarItem('polygon', 'Polygon', chooseShape, activeShape, 'SixPointStar'),
+        ]}
+      />
       <div className={css.canvasContainer}>
         <canvas ref={imgRef} className={css.canvas} />
         <canvas ref={canvasRef} className={css.canvas} onMouseMove={onMouseMove} onMouseDown={onMouseDown} onClick={onClick} />