Merge branch 'master' into fb-lsdv-1476/preselected-taxonomy

HumanSignal · Oct 2, 2023 · dd77647 · dd77647
2 parents ab24ec1 + 95fb62a
commit dd77647
Show file tree

Hide file tree

Showing 110 changed files with 346 additions and 286 deletions.
diff --git a/src/assets/icons/outliner/index.ts b/src/assets/icons/outliner/index.ts
@@ -3,4 +3,4 @@ export { ReactComponent as IconOutlinerExpand } from './expand.svg';
 export { ReactComponent as IconOutlinerDrag } from './drag.svg';
 export { ReactComponent as IconInfo } from './info.svg';
 export { ReactComponent as IconOutlinerEyeOpened } from './eye_opened.svg';
-export { ReactComponent as IconOutlinerEyeClosed } from './eye_closed.svg';
+export { ReactComponent as IconOutlinerEyeClosed } from './eye_closed.svg';
diff --git a/src/common/Dropdown/DropdownTrigger.tsx b/src/common/Dropdown/DropdownTrigger.tsx
@@ -10,7 +10,7 @@ const getMinIndex = (element?: HTMLElement) => {
   if (element) {
     let parent = element.parentElement;
 
-    while(parent) {
+    while (parent) {
       const parentIndex = parseInt(getComputedStyle(parent).zIndex);
 
       if (!isNaN(parentIndex)) {
@@ -43,7 +43,7 @@ export const DropdownTrigger = forwardRef<DropdownRef, DropdownTriggerProps>(({
   closeOnClickOutside = true,
   disabled = false,
   ...props
-}, ref ) => {
+}, ref) => {
   const dropdownRef = (ref ?? useRef<DropdownRef>()) as RefObject<DropdownRef>;
   const triggerEL = Children.only(children);
   const childset = useRef(new Set<DropdownContextValue>());

diff --git a/src/common/Range/Range.tsx b/src/common/Range/Range.tsx
@@ -27,21 +27,21 @@ export interface RangeProps {
   onMaxIconClick?: (value: RangeValueType) => void;
 }
 
-const arrayReverse = <T extends any[] = any[]>(array: T, reverse=false) => {
+const arrayReverse = <T extends any[] = any[]>(array: T, reverse = false) => {
   return reverse ? [...array].reverse() : array;
 };
 
 export const Range: FC<RangeProps> = ({
   value,
   defaultValue,
-  multi=false,
-  reverse=false,
-  continuous=false,
-  min=0,
-  max=100,
-  step=1,
-  size=120,
-  align='horizontal',
+  multi = false,
+  reverse = false,
+  continuous = false,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = 120,
+  align = 'horizontal',
   resetValue,
   minIcon,
   maxIcon,

diff --git a/src/common/Select/Select.tsx b/src/common/Select/Select.tsx
@@ -124,7 +124,7 @@ export const Select: SelectComponent<SelectProps> = ({
 
   const selected = useMemo(() => {
     if (isFF(FF_DEV_2669) && multiple && renderMultipleSelected) {
-      return renderMultipleSelected(Array.isArray(currentValue) ? currentValue : [currentValue||'']);
+      return renderMultipleSelected(Array.isArray(currentValue) ? currentValue : [currentValue || '']);
     }
     if (multiple && Array.isArray(currentValue) && currentValue?.length > 1) {
       return <>Multiple values selected</>;

diff --git a/src/common/TextArea/TextArea.tsx b/src/common/TextArea/TextArea.tsx
@@ -72,7 +72,7 @@ export const TextArea: FC<TextAreaProps> = ({
 
     let newHeight: number;
 
-    if(textarea.scrollHeight > autoGrowRef.current.maxHeight){
+    if (textarea.scrollHeight > autoGrowRef.current.maxHeight) {
       textarea.style.overflowY = 'scroll';
       newHeight = autoGrowRef.current.maxHeight;
     } else {

diff --git a/src/common/TimeAgo/TimeAgo.tsx b/src/common/TimeAgo/TimeAgo.tsx
@@ -65,4 +65,4 @@ export const TimeAgo = ({ date, ...rest }: TimeAgoProps) => {
       {text}
     </time>
   );
-};
+};
diff --git a/src/common/Userpic/Userpic.tsx b/src/common/Userpic/Userpic.tsx
@@ -43,7 +43,7 @@ export const Userpic = forwardRef<any, UserpicProps>(({
   const [nameVisible, setNameVisible] = useState(true);
 
   if (isFF(FF_DEV_1507)) {
-    useEffect(()=>{
+    useEffect(() => {
       if (propsSrc !== finalSrc) {
         setFinalSrc(propsSrc);
         setImgVisible(false);

diff --git a/src/components/AnnotationsCarousel/AnnotationButton.tsx b/src/components/AnnotationsCarousel/AnnotationButton.tsx
@@ -2,7 +2,7 @@ import { Block, Elem } from '../../utils/bem';
 import { Userpic } from '../../common/Userpic/Userpic';
 import { IconAnnotationGroundTruth, IconAnnotationSkipped2, IconDraftCreated2, IconDuplicate, IconEllipsis, IconTrashRect, LsCommentResolved, LsCommentUnresolved, LsSparks, LsStar, LsStarOutline } from '../../assets/icons';
 import { userDisplayName } from '../../utils/utilities'; 
-import { TimeAgo }  from '../../common/TimeAgo/TimeAgo';
+import { TimeAgo } from '../../common/TimeAgo/TimeAgo';
 import './AnnotationButton.styl';
 import { useCallback, useEffect, useState } from 'react';
 import { Dropdown } from '../../common/Dropdown/Dropdown';
@@ -214,7 +214,7 @@ export const AnnotationButton = observer(({ entity, capabilities, annotationStor
       <Elem name='contextMenu'>
         <Dropdown.Trigger
           content={<ContextMenu entity={entity} capabilities={capabilities} annotationStore={annotationStore} />}
-          onToggle={(isVisible)=> setIsContextMenuOpen(isVisible)}
+          onToggle={(isVisible) => setIsContextMenuOpen(isVisible)}
         >
           <Elem name='ellipsisIcon'>
             <IconEllipsis width={28} height={28}/>

diff --git a/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx b/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx
@@ -81,5 +81,5 @@ export const AnnotationsCarousel = observer(({ store, annotationStore }: Annotat
         </Elem>
       )}
     </Block>
-  ): null;
+  ) : null;
 });
diff --git a/src/components/AnnotationsCarousel/__tests__/sampleData.js b/src/components/AnnotationsCarousel/__tests__/sampleData.js
@@ -2800,7 +2800,7 @@ const annotationStore = {
   'validation': null,
   'sharedStores': {},
 };
-const commentStore = { 'loading':'list','comments':[] };
+const commentStore = { 'loading': 'list','comments': [] };
 const store = {
   'config': '<View>\\n  <Image name="image" value="$image"/><RectangleLabels name="label" toName="image"><Label value="Airplane" background="green"/><Label value="Car" background="blue"/></RectangleLabels></View>',
   'task': {
@@ -6031,4 +6031,4 @@ const store = {
   'hasInterface': () => true,
 };
 
-export { annotationStore, commentStore, store };
+export { annotationStore, commentStore, store };
diff --git a/src/components/App/Annotation.js b/src/components/App/Annotation.js
@@ -11,4 +11,4 @@ export function Annotation({ annotation, root }) {
     };
   }, [annotation.pk, annotation.id]);
   return root ? Tree.renderItem(root, annotation) : null;
-}
+}
diff --git a/src/components/App/Grid.js b/src/components/App/Grid.js
@@ -24,12 +24,12 @@ class Item extends Component {
       return o.isReady
         ? Promise.resolve(o.isReady)
         : new Promise(resolve => {
-          const dispose = observe(o, 'isReady', ()=>{
+          const dispose = observe(o, 'isReady', () => {
             dispose();
             resolve();
           });
         });
-    })).then(()=>{
+    })).then(() => {
       // ~2 ticks for canvas to be rendered and resized completely
       setTimeout(this.props.onFinish, 32);
     });

diff --git a/src/components/BottomBar/Controls.js b/src/components/BottomBar/Controls.js
@@ -51,10 +51,10 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
 
     const selected = store.annotationStore?.selected;
 
-    if(addedCommentThisSession){
+    if (addedCommentThisSession) {
       selected?.submissionInProgress();
       callback();
-    } else if((currentComment ?? '').trim()) {
+    } else if ((currentComment ?? '').trim()) {
       e.preventDefault();
       selected?.submissionInProgress();
       await commentFormSubmit();
@@ -75,8 +75,8 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
   const RejectButton = useMemo(() => {
     return (
       <ButtonTooltip key="reject" title="Reject annotation: [ Ctrl+Space ]">
-        <Button aria-label="reject-annotation" disabled={disabled} onClick={async (e)=> {
-          if(store.hasInterface('comments:reject') ?? true) {
+        <Button aria-label="reject-annotation" disabled={disabled} onClick={async (e) => {
+          if (store.hasInterface('comments:reject') ?? true) {
             buttonHandler(e, () => store.rejectAnnotation({}), 'Please enter a comment before rejecting');
           } else {
             const selected = store.annotationStore?.selected;
@@ -130,8 +130,8 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
     if (store.hasInterface('skip')) {
       buttons.push(
         <ButtonTooltip key="skip" title="Cancel (skip) task: [ Ctrl+Space ]">
-          <Button aria-label="skip-task" disabled={disabled} onClick={async (e)=> {
-            if(store.hasInterface('comments:skip') ?? true) {
+          <Button aria-label="skip-task" disabled={disabled} onClick={async (e) => {
+            if (store.hasInterface('comments:skip') ?? true) {
               buttonHandler(e, () => store.skipTask({}), 'Please enter a comment before skipping');
             } else {
               const selected = store.annotationStore?.selected;
@@ -206,7 +206,7 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
                   await store.commentStore.commentFormSubmit();
                   store.submitAnnotation();
                 }}
-                icon={useExitOption &&(
+                icon={useExitOption && (
                   <Dropdown.Trigger
                     content={<SubmitOption onClickMethod={store.submitAnnotation} isUpdate={false} />}
                   >
@@ -241,7 +241,7 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
                 await store.commentStore.commentFormSubmit();
                 store.updateAnnotation();
               }}
-              icon={useExitOption &&(
+              icon={useExitOption && (
                 <Dropdown.Trigger
                   content={<SubmitOption onClickMethod={store.updateAnnotation} isUpdate={isUpdate} />}
                 >

diff --git a/src/components/Comments/CommentForm.tsx b/src/components/Comments/CommentForm.tsx
@@ -42,7 +42,7 @@ export const CommentForm: FC<CommentFormProps> = observer(({
 
       await commentStore.addComment(comment);
 
-    } catch(err) {
+    } catch (err) {
       actionRef.current.update?.(comment || '');
       console.error(err);
     }
@@ -54,7 +54,7 @@ export const CommentForm: FC<CommentFormProps> = observer(({
 
 
   useEffect(() => {
-    if(!isFF(FF_DEV_3873)){
+    if (!isFF(FF_DEV_3873)) {
       commentStore.setAddedCommentThisSession(false);
       clearTooltipMessage();
     }

diff --git a/src/components/Comments/Comments.tsx b/src/components/Comments/Comments.tsx
@@ -9,7 +9,7 @@ import { FF_DEV_3034, isFF } from '../../utils/feature-flags';
 import './Comments.styl';
 
 
-export const Comments: FC<{ commentStore: any, cacheKey?: string }>= observer(({ commentStore, cacheKey }) => {
+export const Comments: FC<{ commentStore: any, cacheKey?: string }> = observer(({ commentStore, cacheKey }) => {
   const mounted = useMounted();
 
   const loadComments = async () => {

diff --git a/src/components/CurrentEntity/AnnotationHistory.tsx b/src/components/CurrentEntity/AnnotationHistory.tsx
@@ -188,7 +188,7 @@ const HistoryItemComponent: FC<{
   const isPrediction = entity?.type === 'prediction';
 
   const reason = useMemo(() => {
-    switch(acceptedState) {
+    switch (acceptedState) {
       case 'accepted': return 'Accepted';
       case 'rejected': return 'Rejected';
       case 'fixed_and_accepted': return 'Fixed';
@@ -293,7 +293,7 @@ const HistoryComment: FC<{
 
 const HistoryIcon: FC<{type: HistoryItemType}> = ({ type }) => {
   const icon = useMemo(() => {
-    switch(type) {
+    switch (type) {
       case 'submitted': return <IconAnnotationSubmitted style={{ color: '#0099FF' }}/>;
       case 'updated': return <IconAnnotationSubmitted style={{ color: '#0099FF' }}/>;
       case 'draft_created': return <IconDraftCreated style={{ color: '#0099FF' }}/>;

diff --git a/src/components/Entities/LabelList.js b/src/components/Entities/LabelList.js
@@ -24,27 +24,27 @@ export const LabelList = observer(({ regionStore }) => {
     };
   });
 
-  if( isFF(FF_DEV_2755) ) {
-    const [collapsedPos, setCollapsedPos] = useState( localStorage.getItem( localStoreName )?.split?.(',')?.filter( pos => !!pos ) ?? [] );
+  if (isFF(FF_DEV_2755)) {
+    const [collapsedPos, setCollapsedPos] = useState(localStorage.getItem(localStoreName)?.split?.(',')?.filter(pos => !!pos) ?? []);
 
-    const updateLocalStorage = ( collapsedPos ) => {
-      localStorage.setItem( localStoreName, collapsedPos );
+    const updateLocalStorage = (collapsedPos) => {
+      localStorage.setItem(localStoreName, collapsedPos);
     };
 
-    const collapse = ( pos ) => {
+    const collapse = (pos) => {
       const newCollapsedPos = [...collapsedPos, pos];
 
-      setCollapsedPos( newCollapsedPos );
-      updateLocalStorage( newCollapsedPos );
+      setCollapsedPos(newCollapsedPos);
+      updateLocalStorage(newCollapsedPos);
     };
 
-    const expand = ( pos ) => {
-      const newCollapsedPos = collapsedPos.filter( cPos => cPos !== pos );
+    const expand = (pos) => {
+      const newCollapsedPos = collapsedPos.filter(cPos => cPos !== pos);
 
-      setCollapsedPos( newCollapsedPos );
-      updateLocalStorage( newCollapsedPos );
+      setCollapsedPos(newCollapsedPos);
+      updateLocalStorage(newCollapsedPos);
     };
-    const expandedKeys = treeData.filter( (item) => !collapsedPos.includes( item.pos ) ).map( item => item.key ) ?? [];
+    const expandedKeys = treeData.filter((item) => !collapsedPos.includes(item.pos)).map(item => item.key) ?? [];
 
     return (
       <Tree
@@ -56,7 +56,7 @@ export const LabelList = observer(({ regionStore }) => {
         autoExpandParent={true}
         expandedKeys={expandedKeys}
         switcherIcon={<LsChevron className={styles.switcherIcon} opacity="0.25" />}
-        onExpand={( internalExpandedKeys, { node } ) => {
+        onExpand={(internalExpandedKeys, { node }) => {
           const region = treeData.find(region => region.key === node.key);
           const pos = region.pos;
 

diff --git a/src/components/Entities/RegionItem.js b/src/components/Entities/RegionItem.js
@@ -27,7 +27,7 @@ const RegionItemDesc = observer(({ item, setDraggable }) => {
   const controls = item.perRegionDescControls || [];
 
   return (
-    <Elem name="desc" tag="div" mod={{ collapsed, empty: !(controls?.length > 0)  }} onMouseEnter={()=>{setDraggable?.(false);}} onMouseLeave={()=>{setDraggable?.(true);}}>
+    <Elem name="desc" tag="div" mod={{ collapsed, empty: !(controls?.length > 0) }} onMouseEnter={() => { setDraggable?.(false); }} onMouseLeave={() => { setDraggable?.(true); }}>
       <Elem name="controls">
         {controls.map((tag, idx) => {
           const View = Registry.getPerRegionView(tag.type, PER_REGION_MODES.REGION_LIST);
@@ -45,7 +45,7 @@ const RegionItemDesc = observer(({ item, setDraggable }) => {
 const RegionItemContent = observer(({ idx, item, setDraggable }) => {
   const itemElRef = useRef();
 
-  useEffect(()=>{
+  useEffect(() => {
     if (item.selected) {
       const el = itemElRef.current;
 
@@ -56,7 +56,7 @@ const RegionItemContent = observer(({ idx, item, setDraggable }) => {
     }
   }, [item.selected]);
   return (
-    <Block ref={itemElRef} name="region-item" mod={{ hidden : item.hidden }} data-testid={`regionitem:selected=${item.selected}`}>
+    <Block ref={itemElRef} name="region-item" mod={{ hidden: item.hidden }} data-testid={`regionitem:selected=${item.selected}`}>
       <Elem name="header" tag="div">
         <Elem name="counter">{isDefined(idx) ? idx + 1 : ''}</Elem>
 
@@ -106,7 +106,7 @@ const RegionItemContent = observer(({ idx, item, setDraggable }) => {
 });
 
 export const RegionItem = observer(({ item, idx, flat, setDraggable, onClick }) => {
-  const getVars = useMemo(()=>{
+  const getVars = useMemo(() => {
     let vars;
 
     return () => {
@@ -134,7 +134,7 @@ export const RegionItem = observer(({ item, idx, flat, setDraggable, onClick })
     <List.Item
       key={item.id}
       className={classnames.join(' ')}
-      onClick={(e)=>{onClick(e, item);}}
+      onClick={(e) => { onClick(e, item); }}
       onMouseOver={() => item.setHighlight(true)}
       onMouseOut={() => item.setHighlight(false)}
       style={vars}

diff --git a/src/components/Entities/RegionTree.js b/src/components/Entities/RegionTree.js
@@ -18,7 +18,7 @@ export const RegionTree = observer(({ regionStore }) => {
   }, [renderNow]);
 
   const canDrag = useRef(true);
-  const setDraggable = useCallback((isDraggable)=>{
+  const setDraggable = useCallback((isDraggable) => {
     canDrag.current = isDraggable;
   }, []);
 
@@ -40,7 +40,7 @@ export const RegionTree = observer(({ regionStore }) => {
   const classifications = regionStore.classifications.map(item => ({
     classification: true,
     key: item.id,
-    title: <RegionItem item={item} flat  setDraggable={setDraggable} />,
+    title: <RegionItem item={item} flat setDraggable={setDraggable} />,
   }));
 
   const treeData = [...classifications, ...regions];

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -124,9 +124,9 @@ export const Filter: FC<FilterInterface> = ({
           <IconFilter />
         </Elem>
         <Elem name={'text'} style={{
-          fontSize:isFF(FF_DEV_3873) && 12,
-          fontWeight:isFF(FF_DEV_3873) && 500,
-          lineHeight:isFF(FF_DEV_3873) && '24px',
+          fontSize: isFF(FF_DEV_3873) && 12,
+          fontWeight: isFF(FF_DEV_3873) && 500,
+          lineHeight: isFF(FF_DEV_3873) && '24px',
         }}>Filter</Elem>
         {filterList.length > 0 && <Elem name={'filter-length'} data-testid={'filter-length'}>{filterList.length}</Elem>}
       </Block>