fix: LSDV-4864: LEAP-148: Magic Wand doesn't work with MIG

label_studio/frontend/dist/dm/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "feat: DIA-474: [FE] add new column for DE",
-  "commit": "a8e6e5e6cd6601d765a7f0abd4efa87cec1a3fe5",
-  "branch": "master",
-  "date": "2024-01-03T07:13:20Z"
+  "message": "fix: LSDV-4864: Magic Wand doesn't work with MIG ",
+  "commit": "4126a8a0172aa63fde1c862de07bc1ee5d6d95c6",
+  "branch": "fb-lsdv-4864/magic-wand-mig",
+  "date": "2023/05/04 15:53:02"
 }

label_studio/frontend/dist/lsf/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-344: View all annotation tab is not loading",
-  "commit": "eb1194c1e8ad5f9c0e725b2955dbc202f169649b",
-  "branch": "master",
-  "date": "2024-01-08T09:48:32Z"
+  "message": "fix: LSDV-4864: Magic Wand doesn't work with MIG ",
+  "commit": "4303de2231adda6e9536df686b31edd1d1d5b5e6",
+  "branch": "fb-lsdv-4864/magic-wand-mig",
+  "date": "2024-01-10T15:24:48Z"
 }

web/libs/editor/src/components/AnnotationTab/AnnotationTab.js

@@ -54,6 +54,7 @@ export const AnnotationTab = observer(({ store }) => {
 
           <Elem name="content">
             <Comments
+              annotationStore={as}
               commentStore={store.commentStore}
               cacheKey={`task.${store.task.id}`}
             />

web/libs/editor/src/components/App/App.js

@@ -264,7 +264,7 @@ class App extends Component {
                   panelsHidden={viewingAll}
                   currentEntity={as.selectedHistory ?? as.selected}
                   regions={as.selected.regionStore}
-                  showComments={!store.hasInterface('annotations:comments')}
+                  showComments={store.hasInterface('annotations:comments')}
                   focusTab={store.commentStore.tooltipMessage ? 'comments' : null}
                 >
                   {mainContent}

web/libs/editor/src/components/Debug.js

@@ -3,9 +3,9 @@ import { Button, Form } from 'antd';
 
 import { observer } from 'mobx-react';
 
-const toJSON = (annotation) => {
+const toJSON = async (annotation) => {
   const id = annotation.pk || annotation.id;
-  const result = annotation.serializeAnnotation();
+  const result = await annotation.serializeAnnotation();
   const draft = annotation.versions.draft;
   const json = { id, result };
 
@@ -32,22 +32,22 @@ const DebugComponent = ({ store }) => {
     if (cs.annotations.length) cs.selectAnnotation(cs.annotations[0].id);
   }, []);
 
-  const serializeCurrent = useCallback(() => {
+  const serializeCurrent = useCallback(async () => {
     const input = refAnnotations.current;
 
     if (!input) return;
     const annotation = store.annotationStore.selected;
-    const json = [toJSON(annotation)];
+    const json = await toJSON(annotation);
 
     input.value = JSON.stringify(json, null, 2);
   }, []);
 
-  const serializeAll = useCallback(() => {
+  const serializeAll = useCallback(async () => {
     const input = refAnnotations.current;
 
     if (!input) return;
     const { annotations, predictions } = store.annotationStore;
-    const json = [...annotations, ...predictions].map(toJSON);
+    const json = await Promise.all([...annotations, ...predictions].map(toJSON));
 
     input.value = JSON.stringify(json, null, 2);
   }, []);

web/libs/editor/src/components/ImageView/Image.js

@@ -30,6 +30,7 @@ export const Image = observer(forwardRef(({
   updateImageSize,
   usedValue,
   size,
+  overlay,
 }, ref) => {
   const imageSize = useMemo(() => {
     return {
@@ -45,6 +46,7 @@ export const Image = observer(forwardRef(({
 
   return (
     <Block name="image" style={imageSize}>
+      {overlay}
       <ImageProgress
         downloading={imageEntity.downloading}
         progress={imageEntity.progress}
@@ -76,7 +78,7 @@ const ImageProgress = observer(({
   return downloading ? (
     <Block name="image-progress">
       <Elem name="message">Downloading image</Elem>
-      <Elem tag="progress" name="bar" value={progress} min="0" max={1} step={0.0001}/>
+      <Elem tag="progress" name="bar" value={progress} min="0" max={1} step={0.0001} />
     </Block>
   ) : error ? (
     <ImageLoadingError src={src} value={usedValue} />
@@ -121,6 +123,6 @@ const ImageLoadingError = ({ src, value }) => {
   }, [src]);
 
   return (
-    <ErrorMessage error={error}/>
+    <ErrorMessage error={error} />
   );
 };

web/libs/editor/src/components/ImageView/ImageView.js

@@ -403,7 +403,7 @@ const Selection = observer(({ item, ...triggeredOnResize }) => {
 
   return (
     <>
-      { isFF(FF_DBLCLICK_DELAY)
+      {isFF(FF_DBLCLICK_DELAY)
         ? <Layer name="selection-regions-layer" />
         : <SelectedRegions item={item} selectedRegions={item.selectedRegions} {...triggeredOnResize} />
       }
@@ -490,6 +490,22 @@ const Crosshair = memo(forwardRef(({ width, height }, ref) => {
   );
 }));
 
+/**
+ * Component that creates an overlay on top
+ * of the image to support Magic Wand tool
+ */
+const CanvasOverlay = observer(({ item }) => {
+  return isFF(FF_DEV_4081) ? (
+    <canvas
+      className={styles.overlay}
+      ref={ref => {
+        item.setOverlayRef(ref);
+      }}
+      style={item.imageTransform}
+    />
+  ) : null;
+});
+
 export default observer(
   class ImageView extends Component {
     // stored position of canvas before creating region
@@ -1001,6 +1017,7 @@ export default observer(
                 imageTransform={item.imageTransform}
                 updateImageSize={item.updateImageSize}
                 size={item.canvasSize}
+                overlay={<CanvasOverlay item={item} />}
               />
             ) : (
               <div
@@ -1026,15 +1043,7 @@ export default observer(
                   crossOrigin={item.imageCrossOrigin}
                   alt="LS"
                 />
-                {isFF(FF_DEV_4081) ? (
-                  <canvas
-                    className={styles.overlay}
-                    ref={ref => {
-                      item.setOverlayRef(ref);
-                    }}
-                    style={item.imageTransform}
-                  />
-                ) : null}
+                <CanvasOverlay item={item} />
               </div>
             )}
             {/* @todo this is dirty hack; rewrite to proper async waiting for data to load */}
@@ -1141,12 +1150,8 @@ const EntireStage = observer(({
 
   return (
     <Stage
-      ref={ref => {
-        item.setStageRef(ref);
-      }}
-      className={[styles['image-element'],
-        ...imagePositionClassnames,
-      ].join(' ')}
+      ref={ref => { item.setStageRef(ref); }}
+      className={[styles['image-element'], ...imagePositionClassnames].join(' ')}
       width={size.width}
       height={size.height}
       scaleX={item.zoomScale}

web/libs/editor/src/components/RelationsOverlay/RelationsOverlay.js

@@ -171,6 +171,7 @@ const RelationItemObserver = observer(({ relation, startNode, endNode, visible,
       endNode={endNode}
       direction={relation.direction}
       visible={visibility}
+      labels={relation.selectedValues}
       {...rest}
     />
   ) : null;
@@ -229,7 +230,6 @@ class RelationsOverlay extends PureComponent {
           rootRef={this.rootNode}
           startNode={relation.node1}
           endNode={relation.node2}
-          labels={relation.relations?.selectedValues()}
           dimm={hasHighlight && !highlighted}
           highlight={highlighted}
           visible={highlighted || visible}

web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.styl

@@ -31,6 +31,7 @@
 
   &__icon
     width 24px
+    min-height 24px
     display flex
     flex none
     position relative

web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx

@@ -56,9 +56,9 @@ const RelationItem: FC<{relation: any}> = observer(({ relation }) => {
     const { direction } = relation;
 
     switch (direction) {
-      case 'left': return <IconRelationLeft/>;
-      case 'right': return <IconRelationRight/>;
-      case 'bi': return <IconRelationBi/>;
+      case 'left': return <IconRelationLeft data-direction={relation.direction}/>;
+      case 'right': return <IconRelationRight data-direction={relation.direction}/>;
+      case 'bi': return <IconRelationBi data-direction={relation.direction}/>;
       default: return null;
     }
   }, [relation.direction]);
@@ -92,6 +92,7 @@ const RelationItem: FC<{relation: any}> = observer(({ relation }) => {
             {(hovered || relation.showMeta) && relation.hasRelations && (
               <Button
                 primary={relation.showMeta}
+                aria-label={`${relation.showMeta ? 'Hide' : 'Show'} Relation Labels`}
                 type={relation.showMeta ? undefined : 'text'}
                 onClick={relation.toggleMeta}
                 style={{ padding: 0 }}
@@ -102,14 +103,14 @@ const RelationItem: FC<{relation: any}> = observer(({ relation }) => {
           </Elem>
           <Elem name="action">
             {(hovered || !relation.visible) && (
-              <Button type="text" onClick={relation.toggleVisibility}>
+              <Button type="text" onClick={relation.toggleVisibility} aria-label={`${relation.visible ? 'Hide' : 'Show'} Relation`}>
                 {relation.visible ? <IconEyeOpened/> : <IconEyeClosed />}
               </Button>
             )}
           </Elem>
           <Elem name="action">
             {hovered && (
-              <Button type="text" danger onClick={() => {
+              <Button type="text" danger aria-label="Delete Relation" onClick={() => {
                 relation.node1.setHighlight(false);
                 relation.node2.setHighlight(false);
                 relation.parent.deleteRelation(relation);
@@ -127,10 +128,9 @@ const RelationItem: FC<{relation: any}> = observer(({ relation }) => {
   );
 });
 
-const RelationMeta: FC<any> = ({ relation }) => {
-  const { relations } = relation;
-  const { children, choice } = relations;
-  const selected = relations.getSelected().map((v: any) => v.value);
+const RelationMeta: FC<any> = observer(({ relation }) => {
+  const { selectedValues, control } = relation;
+  const { children, choice } = control;
 
   const selectionMode = useMemo(() => {
     return choice === 'multiple' ? 'multiple' : undefined;
@@ -139,17 +139,16 @@ const RelationMeta: FC<any> = ({ relation }) => {
   const onChange = useCallback((val: any) => {
     const values: any[] = wrapArray(val);
 
-    relations.unselectAll();
-    values.forEach(v => relations.findRelation(v).setSelected(true));
-  }, []);
+    relation.setRelations(values);
+  }, [relation]);
 
   return (
     <Block name="relation-meta">
       <Select
         mode={selectionMode}
         style={{ width: '100%' }}
         placeholder="Select labels"
-        defaultValue={selected}
+        value={selectedValues}
         onChange={onChange}
       >
         {children.map((c: any) => (
@@ -160,6 +159,6 @@ const RelationMeta: FC<any> = ({ relation }) => {
       </Select>
     </Block>
   );
-};
+});
 
 export const Relations = observer(RealtionsComponent);

web/libs/editor/src/components/SidePanels/TabPanels/SideTabsPanels.tsx

@@ -21,7 +21,6 @@ const SideTabsPanelsComponent: FC<SidePanelsProps> = ({
   showComments,
   focusTab,
 }) => {
-
   const snapThreshold = 5;
   const regions = currentEntity.regionStore;
   const viewportSize = useRef<ViewportSize>({ width: 0, height: 0 });
@@ -33,8 +32,9 @@ const SideTabsPanelsComponent: FC<SidePanelsProps> = ({
   const [initialized, setInitialized] = useState(false);
   const rootRef = useRef<HTMLDivElement>();
   const [snap, setSnap] = useState<DropSide | Side | undefined>();
-  const [panelData, setPanelData] = useState<Record<string, PanelBBox>>(restorePanel(showComments).panelData);
-  const [collapsedSide, setCollapsedSide] = useState(restorePanel(showComments).collapsedSide);
+  const initialState = useMemo(() => restorePanel(showComments), [showComments]);
+  const [panelData, setPanelData] = useState<Record<string, PanelBBox>>(initialState.panelData);
+  const [collapsedSide, setCollapsedSide] = useState(initialState.collapsedSide);
   const [breakPointActiveTab, setBreakPointActiveTab] = useState(0);
   const localSnap = useRef(snap);
   const collapsedSideRef = useRef(collapsedSide);

web/libs/editor/src/components/SidePanels/TabPanels/types.ts

@@ -103,8 +103,13 @@ export type CommonProps = EventHandlers & {
   currentEntity: any,
 }
 
-interface PanelsCollapsed { [Side.left]: boolean, [Side.right]: boolean }
-
+export interface PanelsCollapsed { [Side.left]: boolean, [Side.right]: boolean }
+
+export type StoredPanelState = {
+  panelData: Record<string, PanelBBox>,
+  collapsedSide: PanelsCollapsed,
+}
+
 export type BaseProps = PanelBBox & CommonProps & {
   name: string,
   top: number,
@@ -125,13 +130,13 @@ export type BaseProps = PanelBBox & CommonProps & {
   dragBottom: boolean,
   lockPanelContents: boolean,
 }
-    
+
 export type Result = {
   detached: BaseProps[],
   left:BaseProps[],
   right:BaseProps[],
 }
-    
+
 export const emptyPanel: PanelBBox = {
   order: 0,
   top: 0,