fix: OPTIC-341: CSS inconsistencies which cause conflicts in MonoRepo builds monorepo

label_studio/frontend/dist/lsf/js/main.js.LICENSE.txt

@@ -24,6 +24,13 @@ License: MIT
  * Licensed under the MIT license.
  */
 
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
 /*!
  * wavesurfer.js 6.0.4 (2022-03-08)
  * https://wavesurfer-js.org

label_studio/frontend/dist/lsf/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-89: Fix rendering of relation arrow in MIG case",
-  "commit": "bb1c54895433bd58affd79d0fbaf32b3c865f2b2",
+  "message": "fix: OPTIC-341: CSS inconsistencies which cause conflicts in MonoRepo builds",
+  "commit": "b4d9eef85ceca6bfc02327e2d3192b8229908fd4",
   "branch": "master",
-  "date": "2023-12-05T16:41:20Z"
+  "date": "2023-12-08T11:54:24Z"
 }

web/libs/editor/src/components/BottomBar/Controls.styl

@@ -98,7 +98,7 @@
     &__footer
       display flex
       flex-direction row
-      justify-content end
+      justify-content flex-end
 
 .submit-option
   padding 12px 24px
@@ -129,4 +129,4 @@
     border-radius 4px
     opacity 0.08
     background rgb(9 109 217)
-    pointer-events none
+    pointer-events none

web/libs/editor/src/components/Comments/CommentForm.styl

@@ -16,7 +16,7 @@
         width 100%
         display flex
         justify-content center
-        align-items start
+        align-items flex-start
         flex-shrink 0
         flex-grow 0
 

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

@@ -5,7 +5,7 @@ import { RelationShape } from './RelationShape';
 import { createPropertyWatcher, DOMWatcher } from './watchers';
 
 const parentImagePropsWatch = {
-  parent: ['zoomScale', 'zoomingPositionX', 'zoomingPositionY', 'rotation'],
+  parent: ['zoomScale', 'zoomingPositionX', 'zoomingPositionY', 'rotation', 'currentImage'],
 };
 
 const obtainWatcher = node => {

web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.styl

@@ -1,5 +1,5 @@
 .tabs-panel
-  --header-height: 24px
+  --header-height 24px
   --header-border-radius 0
   --header-background #e1e0e2
   --icon-color #898098
@@ -19,10 +19,10 @@
   &__header-right,
   &__header-left
     display flex
-    alignItems center 
+    align-items center
 
   &__header-left
-    pointerEvents: none
+    pointer-events none
 
   &_alignment
     &_left
@@ -40,7 +40,7 @@
     left 0
     position absolute
     border 1px solid rgba(137, 128, 152, 0.16)
-    box-shadow: 0px 6px 10px 4px rgba(38, 38, 38, 0.15), 0px 2px 3px rgba(38, 38, 38, 0.3);
+    box-shadow 0px 6px 10px 4px rgba(38, 38, 38, 0.15), 0px 2px 3px rgba(38, 38, 38, 0.3);
 
   &_hidden
     top 0

web/libs/editor/src/components/TopBar/Controls.styl

@@ -48,4 +48,4 @@
     &__footer
       display flex
       flex-direction row
-      justify-content end
+      justify-content flex-end

web/libs/editor/src/regions/BrushRegion.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Group, Image, Layer, Shape } from 'react-konva';
 import { observer } from 'mobx-react';
-import { getParent, getRoot, hasParent, isAlive, types } from 'mobx-state-tree';
+import { getParent, getRoot, getType, hasParent, isAlive, types } from 'mobx-state-tree';
 
 import Registry from '../core/Registry';
 import NormalizationMixin from '../mixins/Normalization';
@@ -18,7 +18,7 @@ import IsReadyMixin from '../mixins/IsReadyMixin';
 import { KonvaRegionMixin } from '../mixins/KonvaRegion';
 import { ImageModel } from '../tags/object/Image';
 import { colorToRGBAArray, rgbArrayToHex } from '../utils/colors';
-import { FF_DEV_3793, FF_DEV_4081, isFF } from '../utils/feature-flags';
+import { FF_DEV_3793, FF_DEV_4081, FF_ZOOM_OPTIM, isFF } from '../utils/feature-flags';
 import { AliveRegion } from './AliveRegion';
 import { RegionWrapper } from './RegionWrapper';
 
@@ -271,6 +271,16 @@ const Model = types
         const ctx = layer.canvas.context;
 
         ctx.save();
+        if (isFF(FF_ZOOM_OPTIM)) {
+          ctx.beginPath();
+          ctx.rect(
+            self.parent.alignmentOffset.x,
+            self.parent.alignmentOffset.y,
+            self.parent.stageWidth * self.parent.stageScale,
+            self.parent.stageHeight * self.parent.stageScale,
+          );
+          ctx.clip();
+        }
         ctx.beginPath();
         if (cachedPoints.length / 2 > 3) {
           ctx.moveTo(...self.prepareCoords([lastPointX, lastPointY]));
@@ -535,7 +545,11 @@ const HtxBrushView = ({ item, setShapeRef }) => {
       if (image) {
         if (!imageData) {
           context.drawImage(image, 0, 0, item.parent.stageWidth, item.parent.stageHeight);
-          imageData = context.getImageData(0, 0, item.parent.stageWidth, item.parent.stageHeight);
+          if (isFF(FF_ZOOM_OPTIM)) {
+            imageData = context.getImageData(item.parent.alignmentOffset.x, item.parent.alignmentOffset.y, item.parent.stageWidth, item.parent.stageHeight);
+          } else {
+            imageData = context.getImageData(0, 0, item.parent.stageWidth, item.parent.stageHeight);
+          }
           const colorParts = colorToRGBAArray(shape.colorKey);
 
           for (let i = imageData.data.length / 4 - 1; i >= 0; i--) {
@@ -613,6 +627,27 @@ const HtxBrushView = ({ item, setShapeRef }) => {
   if (!item.parent) return null;
 
   const stage = item.parent?.stageRef;
+  const highlightProps = isFF(FF_ZOOM_OPTIM) ? {
+    scaleX: 1 / item.parent.zoomScale,
+    scaleY: 1 / item.parent.zoomScale,
+    x: -(item.parent.zoomingPositionX + item.parent.alignmentOffset.x) / item.parent.zoomScale,
+    y: -(item.parent.zoomingPositionY + item.parent.alignmentOffset.y) / item.parent.zoomScale,
+    width: item.containerWidth,
+    height: item.containerHeight,
+  } : {
+    scaleX: 1 / item.parent.stageScale,
+    scaleY: 1 / item.parent.stageScale,
+    x: -item.parent.zoomingPositionX / item.parent.stageScale,
+    y: -item.parent.zoomingPositionY / item.parent.stageScale,
+    width: item.parent.canvasSize.width,
+    height: item.parent.canvasSize.height,
+  };
+  const clip = isFF(FF_ZOOM_OPTIM) ? {
+    x: 0,
+    y: 0,
+    width: item.parent.stageWidth,
+    height: item.parent.stageHeight,
+  } : null;
 
   return (
     <RegionWrapper item={item}>
@@ -627,6 +662,7 @@ const HtxBrushView = ({ item, setShapeRef }) => {
         }}
         clearBeforeDraw={!item.isDrawing}
         visible={!item.hidden}
+        clip={clip}
       >
         <Group
           attrMy={item.needsUpdate}
@@ -664,6 +700,13 @@ const HtxBrushView = ({ item, setShapeRef }) => {
               return;
             }
 
+            if (!isFF(FF_ZOOM_OPTIM)) {
+              const tool = item.parent.getToolsManager().findSelectedTool();
+              const isMoveTool = tool && getType(tool).name === 'MoveTool';
+
+              if (tool && !isMoveTool) return;
+            }
+
             if (store.annotationStore.selected.relationMode) {
               stage.container().style.cursor = 'default';
             }
@@ -693,12 +736,7 @@ const HtxBrushView = ({ item, setShapeRef }) => {
             sceneFunc={highlightedRef.current.highlighted ? null : () => { }}
             hitFunc={() => { }}
             {...highlightedRef.current.highlight}
-            scaleX={1 / item.parent.stageScale}
-            scaleY={1 / item.parent.stageScale}
-            x={-item.parent.zoomingPositionX / item.parent.stageScale}
-            y={-item.parent.zoomingPositionY / item.parent.stageScale}
-            width={item.parent.stageWidth}
-            height={item.parent.stageHeight}
+            {...highlightProps}
             listening={false}
           />
         </Group>

web/libs/editor/src/regions/PolygonRegion.js

@@ -469,11 +469,9 @@ const Poly = memo(observer(({ item, colors, dragProps, draggable }) => {
 /**
  * Line between 2 points
  */
-function Edge({ name, item, idx, p1, p2, closed, regionStyles }) {
+const Edge = observer(({ name, item, idx, p1, p2, closed, regionStyles }) => {
   const insertIdx = idx + 1; // idx1 + 1 or idx2
-  const flattenedPoints = useMemo(() => {
-    return getFlattenedPoints([p1, p2]);
-  }, [p1, p2]);
+  const flattenedPoints = [p1.canvasX, p1.canvasY, p2.canvasX, p2.canvasY];
 
   const lineProps = closed ? {
     stroke: 'transparent',
@@ -509,7 +507,7 @@ function Edge({ name, item, idx, p1, p2, closed, regionStyles }) {
       />
     </Group>
   );
-}
+});
 
 const Edges = memo(observer(({ item, regionStyles }) => {
   const { points,closed } = item;

web/libs/editor/src/tags/control/Taxonomy/Taxonomy.js

@@ -55,7 +55,6 @@ import { errorBuilder } from '../../../core/DataValidator/ConfigValidator';
  * Use with the following data types: audio, image, HTML, paragraphs, text, time series, video.
  *
  * [^FF_LSDV_4583]: `fflag_feat_front_lsdv_4583_multi_image_segmentation_short` should be enabled for `perItem` functionality
- * [^FF_TAXONOMY_ASYNC]: `fflag_feat_front_lsdv_5451_async_taxonomy_110823_short` should be enabled to load items from `apiUrl` asynchronously
  *
  * @example
  * <!--Labeling configuration for providing a taxonomy of choices in response to a passage of text -->
@@ -78,7 +77,7 @@ import { errorBuilder } from '../../../core/DataValidator/ConfigValidator';
  * @meta_description Customize Label Studio with the Taxonomy tag and use hierarchical labels for machine learning and data science projects.
  * @param {string} name                   - Name of the element
  * @param {string} toName                 - Name of the element that you want to classify
- * @param {string} [apiUrl]               - Retrieve the taxonomy from a remote source. This can be a JSON-formatted file or a hierarchical data source read as an API.[^FF_TAXONOMY_ASYNC] For more information, see the [Taxonomy template page](/templates/taxonomy)
+ * @param {string} [apiUrl]               - **Beta** -- Retrieve the taxonomy from a remote source. This can be a JSON-formatted file or a hierarchical data source read as an API. For more information, see the [Taxonomy template page](/templates/taxonomy)
  * @param {boolean} [leafsOnly=false]     - Allow annotators to select only leaf nodes of taxonomy
  * @param {boolean} [showFullPath=false]  - Whether to show the full path of selected items
  * @param {string} [pathSeparator= / ]    - Separator to show in the full path (default is " / "). To avoid errors, ensure that your data does not include this separator
@@ -90,7 +89,7 @@ import { errorBuilder } from '../../../core/DataValidator/ConfigValidator';
  * @param {string} [placeholder=]         - What to display as prompt on the input
  * @param {boolean} [perRegion]           - Use this tag to classify specific regions instead of the whole object
  * @param {boolean} [perItem]             - Use this tag to classify specific items inside the object instead of the whole object[^FF_LSDV_4583]
- * @param {boolean} [legacy]              - Use this tag to enable the legacy version of the Taxonomy tag. When true, the `apiUrl` parameter is not useable[^FF_TAXONOMY_ASYNC]
+ * @param {boolean} [legacy]              - Use this tag to enable the legacy version of the Taxonomy tag. When true, the `apiUrl` parameter is not usable. 
  */
 const TagAttrs = types.model({
   toname: types.maybeNull(types.string),

web/libs/editor/src/tags/object/Image/Image.js

@@ -648,11 +648,25 @@ const Model = types.model({
     return {
       views: {
         getSkipInteractions() {
-          const manager = self.getToolsManager();
+          if (isFF(FF_ZOOM_OPTIM)) {
+            if (skipInteractions) return true;
 
-          const isPanning = manager.findSelectedTool()?.toolName === 'ZoomPanTool';
+            const relationMode = self.annotation.relationMode;
 
-          return skipInteractions || isPanning;
+            if (relationMode) return false;
+
+            const manager = self.getToolsManager();
+            const tool = manager.findSelectedTool();
+            const canInteractWithRegions = tool?.canInteractWithRegions;
+
+            return !canInteractWithRegions;
+          } else {
+            const manager = self.getToolsManager();
+
+            const isPanning = manager.findSelectedTool()?.toolName === 'ZoomPanTool';
+
+            return skipInteractions || isPanning;
+          }
         },
       },
       actions: {

web/libs/editor/src/tags/object/RichText/model.js

@@ -220,7 +220,7 @@ const Model = types
 
         // clean up the html — remove scripts and iframes
         // nodes count better be the same, so replace them with stubs
-        self._value = sanitizeHtml(String(val), { useStub: true, useHeadStub: true });
+        self._value = sanitizeHtml(String(val));
 
         self._regionsCache.forEach(({ region, annotation }) => {
           region.setText(self._value.substring(region.startOffset, region.endOffset));

web/libs/editor/src/tools/Base.js

@@ -30,6 +30,7 @@ const BaseTool = types
   .volatile(() => ({
     dynamic: false,
     index: 1,
+    canInteractWithRegions: true,
   }))
   .views(self => {
     return {

web/libs/editor/src/tools/Brush.js

@@ -55,6 +55,9 @@ const _Tool = types
     smart: true,
     unselectRegionOnToolChange: isFF(FF_DEV_4081) ? false : true,
   })
+  .volatile(() => ({
+    canInteractWithRegions: false,
+  }))
   .views(self => ({
     get viewClass() {
       return () => <ToolView item={self} />;

web/libs/editor/src/tools/Erase.js

@@ -55,6 +55,7 @@ const _Tool = types
   })
   .volatile(() => ({
     index: 9999,
+    canInteractWithRegions: false,
   }))
   .views(self => ({
     get viewClass() {

web/libs/editor/src/tools/MagicWand.js

@@ -92,6 +92,8 @@ const _Tool = types
     unselectRegionOnToolChange: false,
   })
   .volatile(() => ({
+    canInteractWithRegions: false,
+
     currentThreshold: null,
     mask: null,
 

web/libs/editor/src/tools/Zoom.js

@@ -69,6 +69,9 @@ const _Tool = types
     // image: types.late(() => types.safeReference(Registry.getModelByTag("image")))
     group: 'control',
   })
+  .volatile(() => ({
+    canInteractWithRegions: false,
+  }))
   .views(self => ({
     get viewClass() {
       return () => <ToolView item={self} />;