Feat: Add remove all selections option for ui.text_annotator

ui/src/text_annotator.test.tsx

@@ -38,7 +38,14 @@ describe('TextAnnotator.tsx', () => {
   it('Sets correct args on remove', () => {
     const { container } = render(<XTextAnnotator model={annotatorProps} />)
 
-    fireEvent.mouseUp(container.querySelector('i')!)
+    fireEvent.mouseUp(container.querySelector('[data-test="remove-icon"]')!)
+    expect(wave.args[name]).toMatchObject([{ text: 'Hello there! Pretty good day' }])
+  })
+
+  it('Sets correct args on remove all', () => {
+    const { getByRole } = render(<XTextAnnotator model={annotatorProps} />)
+
+    fireEvent.click(getByRole('menuitem'))
     expect(wave.args[name]).toMatchObject([{ text: 'Hello there! Pretty good day' }])
   })
 
@@ -164,7 +171,7 @@ describe('TextAnnotator.tsx', () => {
   it('Calls sync on remove if trigger specified', () => {
     const { container } = render(<XTextAnnotator model={{ ...annotatorProps, trigger: true }} />)
 
-    fireEvent.mouseUp(container.querySelector('i')!)
+    fireEvent.mouseUp(container.querySelector('[data-test="remove-icon"]')!)
     expect(pushMock).toHaveBeenCalled()
   })
 
@@ -181,13 +188,13 @@ describe('TextAnnotator.tsx', () => {
   it('Shows remove icon on hover', () => {
     const { container, getByText } = render(<XTextAnnotator model={annotatorProps} />)
 
-    expect(container.querySelector('i')).not.toBeVisible()
+    expect(container.querySelector('[data-test="remove-icon"]')!).not.toBeVisible()
     fireEvent.mouseOver(getByText('g'))
-    expect(container.querySelector('i')).toBeVisible()
+    expect(container.querySelector('[data-test="remove-icon"]')!).toBeVisible()
     fireEvent.mouseOut(getByText('g'))
-    expect(container.querySelector('i')).not.toBeVisible()
+    expect(container.querySelector('[data-test="remove-icon"]')!).not.toBeVisible()
     fireEvent.mouseOver(getByText('P'))
-    expect(container.querySelector('i')).toBeVisible()
+    expect(container.querySelector('[data-test="remove-icon"]')!).toBeVisible()
   })
 
   describe('readonly', () => {
@@ -200,9 +207,9 @@ describe('TextAnnotator.tsx', () => {
 
   describe('smart selection off', () => {
     it('Sets correct args on annotate from left to right', () => {
-      const { getByText, getByRole } = render(<XTextAnnotator model={annotatorProps} />)
+      const { getByText } = render(<XTextAnnotator model={annotatorProps} />)
 
-      fireEvent.click(getByRole('switch'))
+      fireEvent.click(getByText('Smart selection'))
       fireEvent.click(getByText('Tag 1'))
       fireEvent.mouseDown(getByText('H'))
       fireEvent.mouseUp(getByText('h'))
@@ -216,9 +223,9 @@ describe('TextAnnotator.tsx', () => {
     })
 
     it('Sets correct args on annotate from right to left', () => {
-      const { getByText, getByRole } = render(<XTextAnnotator model={annotatorProps} />)
+      const { getByText } = render(<XTextAnnotator model={annotatorProps} />)
 
-      fireEvent.click(getByRole('switch'))
+      fireEvent.click(getByText('Smart selection'))
       fireEvent.click(getByText('Tag 1'))
       fireEvent.mouseDown(getByText('h'))
       fireEvent.mouseUp(getByText('H'))
@@ -232,10 +239,10 @@ describe('TextAnnotator.tsx', () => {
     })
 
     it('Sets correct args on annotate when replacing selection', () => {
-      const { getByText, getByRole } = render(<XTextAnnotator model={annotatorProps} />)
+      const { getByText } = render(<XTextAnnotator model={annotatorProps} />)
 
       fireEvent.click(getByText('Tag 2'))
-      fireEvent.click(getByRole('switch'))
+      fireEvent.click(getByText('Smart selection'))
       fireEvent.mouseDown(getByText('P'))
       fireEvent.mouseUp(getByText('g'))
 

ui/src/text_annotator.tsx

@@ -113,7 +113,15 @@ const
       top: -3,
       background: cssVar('$card'),
     },
-    readonly: { pointerEvents: 'none' }
+    readonly: { pointerEvents: 'none' },
+    checkbox: {
+      $nest: {
+        '&:hover': {
+          backgroundColor: cssVar('$neutralLighter'),
+          color: cssVar('$neutralDark')
+        }
+      }
+    }
   }),
   annotateNumbersAroundToken = (tokenIdx: U, tokens: TokenProps[], activeTag?: S) => {
     let charRightIdx = tokenIdx + 1, charLeftIdx = tokenIdx - 1
@@ -202,6 +210,11 @@ export
         setTokens([...tokens])
         submitWaveArgs()
       },
+      removeAllAnnotations = () => {
+        for (let idx = 0; idx < tokens.length; idx++) tokens[idx].tag = undefined
+        setTokens([...tokens])
+        submitWaveArgs()
+      },
       annotate = (endElProps: TokenMouseEventProps) => {
         if (!startElPropsRef.current) return
         const
@@ -263,7 +276,7 @@ export
             className={clas(css.mark, isFirst ? css.firstMark : '', isLast ? css.lastMark : '')}
             style={{ backgroundColor: cssVar(color), color: getContrast(color) }}>
             {text}
-            <Fluent.Icon iconName='CircleAdditionSolid' styles={{ root: removeIconStyle }} className={clas(css.removeIcon, 'wave-w6')} onMouseUp={removeAnnotation(idx)} />
+            <Fluent.Icon iconName='CircleAdditionSolid' data-test={'remove-icon'} styles={{ root: removeIconStyle }} className={clas(css.removeIcon, 'wave-w6')} onMouseUp={removeAnnotation(idx)} />
             {/* HACK: Put color underlay under remove icon because its glyph is transparent and doesn't look good on tags. */}
             <span style={removeIconStyle as React.CSSProperties} className={css.iconUnderlay}></span>
           </mark>
@@ -283,15 +296,25 @@ export
       <div data-test={name} className={readonly ? css.readonly : ''}>
         <div className={clas('wave-s16 wave-w6', css.title)}>{title}</div>
         <AnnotatorTags tags={tags} activateTag={activateTag} activeTag={activeTag} />
-        <Fluent.Toggle
-          data-test='smart-selection'
-          label='Smart selection'
-          defaultChecked={smartSelection}
-          onChange={() => setSmartSelection(prevSelection => !prevSelection)}
-          onText="On"
-          offText="Off"
-          inlineLabel
-        />
+        <div style={{ display: 'flex' }}>
+          <Fluent.Checkbox
+            label='Smart selection'
+            checked={smartSelection}
+            onChange={() => setSmartSelection(prevSelection => !prevSelection)}
+            className={css.checkbox}
+            styles={{ root: { alignItems: 'center', paddingLeft: 8, paddingRight: 8 } }}
+          />
+          <Fluent.CommandBar styles={{ root: { padding: 0 } }} items={[
+            {
+              key: 'remove-all',
+              text: 'Remove all selections',
+              onClick: removeAllAnnotations,
+              disabled: !tokens.find(token => token.tag),
+              iconProps: { iconName: 'DependencyRemove', styles: { root: { fontSize: 20 } } },
+            },
+          ]}
+          />
+        </div>
         <div className={clas(css.content, 'wave-s16 wave-t7 wave-w3')}>{
           tokens.map(({ start, end, text, tag }, idx) => {
             const activeColor = activeTag ? tagColorMap.get(activeTag) : undefined