feat: LSDV-3023: Annotation Tab Carousel (#1188)

* feat: dev-3879: Control bar

* lint clean up

* visual tweaks

* control bar visual improvements

* cleanup

* visual tweak for view all button

* visual tweak for auto annotation

* feat: DEV-3879: Control bar (#1075)

* applying changes based on feedback

* adding reset button

* feat: LSDV-3023: Annotation Tab Carousel

* prepping button for usage

* tweaking the icons

* more icon tweaks

* no using mobx observer

* now using mobx observer

* adding some icons + clean up

* annotation state icons added and working on carousel

* carousel working 🎉

* we can now update button capability when window is resized

* resolving an error picked up in e2e

* minor tweak for icon when dropdown is open

* have a working test for AnnotationCarousel and AnnotationButton

* making sure bottombar height is correct when FF is off

* check for pk value before ground truth button display

* cannot duplicate drafts

* sort buttons by pk

* viewall vertical alignment

* side-pannels do not pad when hidden in view all

* tab bar recalculates carosel on add/remove entity

* update use effect with entities.length

* space after set and unset

* check history for that action type and entity for can undo states

* create new button added to top bar

* remove avatar icons

* removing unused icon imports

---------

Co-authored-by: yyassi-heartex <yyassi-heartex@users.noreply.github.com>
Co-authored-by: Travis1282 <travisjosephclark@gmail.com>
Co-authored-by: bmartel <brandonmartel@gmail.com>

Author: 3 people

jest.config.js

@@ -65,6 +65,7 @@ module.exports = {
     '/node_modules/',
     '/e2e/',
   ],
+  'testRegex': '__tests__/.*.test.[tj]sx?',
   'transformIgnorePatterns': [
     'node_modules/?!(nanoid|konva)',
   ],

src/assets/icons/annotation/draft_created2.svg

@@ -2,8 +2,11 @@ export { ReactComponent as IconAnnotationAccepted } from './thumbs_up.svg';
 export { ReactComponent as IconAnnotationRejected } from './thumbs_down.svg';
 export { ReactComponent as IconAnnotationSubmitted } from './entity_created.svg';
 export { ReactComponent as IconDraftCreated } from './draft_created.svg';
+export { ReactComponent as IconDraftCreated2 } from './draft_created2.svg';
 export { ReactComponent as IconAnnotationPrediction } from './prediction.svg';
 export { ReactComponent as IconAnnotationSkipped } from './skipped.svg';
 export { ReactComponent as IconAnnotationImported } from './imported.svg';
 export { ReactComponent as IconAnnotationReviewRemoved } from './removed.svg';
 export { ReactComponent as IconAnnotationPropagated } from './propagated.svg';
+export { ReactComponent as IconAnnotationGroundTruth } from './ground_truth.svg';
+export { ReactComponent as IconAnnotationSkipped2 } from './skipped2.svg';

src/assets/icons/annotation/ground_truth.svg

@@ -10,7 +10,9 @@ export { ReactComponent as LsParentLink } from './parent_link.svg';
 export { ReactComponent as LsAnnotation } from './annotation.svg';
 export { ReactComponent as LsGrid } from './grid.svg';
 export { ReactComponent as LsSettings } from './settings.svg';
+export { ReactComponent as LsSettingsAlt } from './settings-alt.svg';
 export { ReactComponent as LsStar } from './star.svg';
+export { ReactComponent as LsStarOutline } from './star-outline.svg';
 export { ReactComponent as IconBan } from './ban.svg';
 export { ReactComponent as LsVisible } from './visible.svg';
 export { ReactComponent as LsInvisible } from './invisible.svg';
@@ -21,11 +23,14 @@ export { ReactComponent as LsDate } from './date.svg';
 export { ReactComponent as IconPlusCircle } from './plus_circle.svg';
 export { ReactComponent as IconSlow } from './slow.svg';
 export { ReactComponent as IconFast } from './fast.svg';
+export { ReactComponent as IconDuplicate } from './duplicate.svg';
 export { ReactComponent as IconEllipsis } from './ellipsis.svg';
 export { ReactComponent as IconWarning } from './warning.svg';
 
 export { ReactComponent as IconCheck } from './check.svg';
+export { ReactComponent as IconCheckBold } from './check-bold.svg';
 export { ReactComponent as IconCross } from './cross.svg';
+export { ReactComponent as IconCrossBold } from './cross-bold.svg';
 
 export { ReactComponent as IconPlayerPause } from './player/pause.svg';
 export { ReactComponent as IconPlayerPlay } from './player/play.svg';
@@ -60,13 +65,15 @@ export { ReactComponent as IconExpand } from './tools/expand-tool.svg';
 export { ReactComponent as IconMoveTool } from './tools/move-tool.svg';
 export { ReactComponent as IconRotateLeftTool } from './tools/rotate-left-tool.svg';
 export { ReactComponent as IconRotateRightTool } from './tools/rotate-right-tool.svg';
+export { ReactComponent as IconInfoOutline } from './info-outline.svg';
 export { ReactComponent as IconInfo } from './info.svg';
 export { ReactComponent as IconCopy } from './copy.svg';
 export { ReactComponent as IconText } from './text.svg';
 export { ReactComponent as IconViewAll } from './view_all.svg';
 export { ReactComponent as IconLink } from './link.svg';
 export { ReactComponent as IconPlusAlt } from './plus-alt.svg';
 export { ReactComponent as IconTrash } from './trash.svg';
+export { ReactComponent as IconTrashRect } from './trash-rect.svg';
 export { ReactComponent as IconMenu } from './menu.svg';
 export { ReactComponent as IconHamburger } from './hamburger.svg';
 export { ReactComponent as IconDetails } from './details.svg';