feat: LSDV-4654: Allow per-image classification (#1381)

* feat: LSDV-4654: Allow per-image classification

* test: LSDV-4654: Add tests for perItem functionality

* Check footnotes support

* Add footnotes normalization into docs generation

* Update JSDocs

* Fix ControlBase mixing order in  compose args

* Force adding new lines before footnote definitions

* Fix textarea perregion area getting

* Fix eslint problems

* Try to fix combineCoverage bug

* Update @heartexlabs/ls-test

* Update @heartexlabs/ls-test

* Fix FF_LSDV_4583 value in tests and documents

* Fix FF_DEV_2100 to work with MIG

* Update @heartexlabs/ls-test

* Update @heartexlabs/ls-test

* Update @heartexlabs/ls-test

* Update @heartexlabs/ls-test

* Add perItem with perRegion validation

* Update @heartexlabs/ls-test

* Update @heartexlabs/ls-test

* Update @heartexlabs/ls-test

Author: Gondragos

scripts/create-docs.js

@@ -95,7 +95,21 @@ fetch(currentTagsUrl)
         // move comments from examples to description
         .replace(/```html[\n\s]*<!--[\n\s]*([\w\W]*?)[\n\s]*-->[\n\s]*/g, '\n$1\n\n```html\n')
         // change example language if it looks like JSON
-        .replace(/```html[\n\s]*([[{])/g, '```json\n$1');
+        .replace(/```html[\n\s]*([[{])/g, '```json\n$1')
+        // normalize footnotes to be numbers (e.g. `[^FF_LSDV_0000]` => `[^1]`)
+        .replace(/\[\^([^\]]+)\]/g, (()=>{
+          let footnoteLastIndex = 0;
+          const footnoteIdToIdxMap = {};
+
+          return (match, footnoteId) => {
+            const footnoteIdx = footnoteIdToIdxMap[footnoteId] || ++footnoteLastIndex;
+
+            footnoteIdToIdxMap[footnoteId] = footnoteIdx;
+            return `[^${footnoteIdx}]`;
+          };
+        })())
+        // force adding new lines before footnote definitions
+        .replace(/(?<![\r\n])([\r\n])(\[\^[^\[]+\]:)/gm, '$1$1$2');
 
       if (supertags.includes(t.name)) {
         console.log(`Fetching subtags of ${t.name}`);

src/components/ImageView/ImageView.js

@@ -20,7 +20,7 @@ import ResizeObserver from '../../utils/resize-observer';
 import { debounce } from '../../utils/debounce';
 import Constants from '../../core/Constants';
 import { fixRectToFit } from '../../utils/image';
-import { FF_DEV_1285, FF_DEV_1442, FF_DEV_3077, FF_DEV_3793, FF_DEV_4081, FF_LSDV_4583, FF_LSDV_4583_6, FF_LSDV_4711, isFF } from '../../utils/feature-flags';
+import { FF_DEV_1285, FF_DEV_1442, FF_DEV_3077, FF_DEV_3793, FF_DEV_4081, FF_LSDV_4583_6, FF_LSDV_4711, isFF } from '../../utils/feature-flags';
 import { Pagination } from '../../common/Pagination/Pagination';
 import { Image } from './Image';
 
@@ -842,7 +842,7 @@ export default observer(
 
       const containerClassName = styles.container;
 
-      const paginationEnabled = isFF(FF_LSDV_4583) && item.valuelist;
+      const paginationEnabled = !!item.isMultiItem;
 
       if (getRoot(item).settings.fullscreen === false) {
         containerStyle['maxWidth'] = item.maxwidth;

src/core/DataValidator/ConfigValidator.js

@@ -247,6 +247,22 @@ const validateAttributes = (child, model, fieldsToSkip) => {
   return result;
 };
 
+/**
+ * Validate perRegion restrictions
+ * @param {Object} child
+ */
+const validatePerRegion = (child) => {
+  const validationResult = [];
+
+  // PerItem and PerRegion are incompatible but PerRegion is more prioritized mode
+  if (child.perregion && child.peritem) {
+    validationResult.push(errorBuilder.generalError('Attribute <b>perItem</b> is incompatible with attribute <b>perRegion</b>. ' +
+      'They define two different modes. However <b>perRegion</b> works fine even with multi-item mode of object tags.'));
+  }
+
+  return validationResult;
+};
+
 /**
  * Convert MST type to a human-readable string
  * @param {import("mobx-state-tree").IType} type
@@ -285,6 +301,8 @@ export class ConfigValidator {
 
         if (parentValidation !== null) validationResult.push(parentValidation);
 
+        validationResult.push(...validatePerRegion(child));
+
         validationResult.push(...validateAttributes(child, model, propertiesToSkip));
       } catch (e) {
         validationResult.push(errorBuilder.unknownTag(child.type, child.name, child.type));

src/mixins/PerItem.js

@@ -0,0 +1,32 @@
+import { types } from 'mobx-state-tree';
+
+/**
+ * This mixing defines perItem control-tag's parameter and related basic functionality
+ * It should be used right after ClassificationBase mixin
+ * @see ClassificationBase
+ */
+const PerItemMixin = types
+  .model({
+    peritem: types.optional(types.boolean, false),
+  }).extend(self => {
+    /* Validation */
+    if (self.isClassificationTag !== true) {
+      throw new Error('The PerItemMixin mixin should be used only for classification control-tags');
+    }
+    return {};
+  }).views(self => ({
+    get _perItemResult() {
+      return self.annotation.results.find(r => {
+        return r.from_name === self && r.area.item_index === self.toNameTag.currentItemIndex;
+      });
+    },
+  }))
+  .actions(self => ({
+    createPerItemResult() {
+      self.createPerObjectResult({
+        item_index: self.toNameTag.currentItemIndex,
+      });
+    },
+  }));
+
+export default PerItemMixin;

src/mixins/PerRegion.js

@@ -2,24 +2,43 @@ import { types } from 'mobx-state-tree';
 import { PER_REGION_MODES } from './PerRegionModes';
 
 
-/*
- * Per Region Mixin
+/**
+ * This mixing defines perRegion control tag's parameter and related basic functionality
+ * It should be used right after ClassificationBase mixin
+ * @see ClassificationBase
  */
 const PerRegionMixin = types
   .model({
     perregion: types.optional(types.boolean, false),
     whenlabelvalue: types.maybeNull(types.string),
     displaymode: types.optional(types.enumeration(Object.values(PER_REGION_MODES)), PER_REGION_MODES.TAG),
+  }).extend(self => {
+    /* Validation */
+    if (self.isClassificationTag !== true) {
+      throw new Error('The PerRegionMixin mixin should be used only for classification control-tags');
+    }
+    return {};
   }).volatile(() => {
     return {
       focusable: false,
     };
   },
   ).views(self => ({
+    get perRegionArea() {
+      if (!self.perregion) return null;
+      return self.annotation.highlightedNode;
+    },
+    get _perRegionResult() {
+      const area = self.perRegionArea;
+
+      if (!area) return null;
+
+      return self.annotation.results.find(r => r.from_name === self && r.area === area);
+    },
     perRegionVisible() {
       if (!self.perregion) return true;
 
-      const region = self.annotation.highlightedNode;
+      const region = self.perRegionArea;
 
       if (!region) {
         // no region is selected return hidden
@@ -35,7 +54,11 @@ const PerRegionMixin = types
       return true;
     },
   }))
-  .actions(() => ({}));
+  .actions(self => ({
+    createPerRegionResult() {
+      self.perRegionArea?.setValue(self);
+    },
+  }));
 
 export default PerRegionMixin;
 export { PER_REGION_MODES } from './PerRegionModes';

src/mixins/Required.js

@@ -1,4 +1,5 @@
 import { getParent, types } from 'mobx-state-tree';
+import { FF_LSDV_4583, isFF } from '../utils/feature-flags';
 
 const RequiredMixin = types
   .model({
@@ -13,10 +14,10 @@ const RequiredMixin = types
         // validating when choices labeling is done per region,
         // for example choice may be required to be selected for
         // every bbox
-        const objectTag = self.annotation.names.get(self.toname);
+        const objectTag = self.toNameTag;
 
         // if regions don't meet visibility conditions skip validation
-        for (const reg of objectTag.regs) {
+        for (const reg of objectTag.allRegs) {
           const s = reg.results.find(s => s.from_name === self);
 
           if (self.visiblewhen === 'region-selected') {
@@ -35,6 +36,27 @@ const RequiredMixin = types
             self.annotation.selectArea(reg);
             self.requiredModal();
 
+            return false;
+          }
+        }
+      } else if (isFF(FF_LSDV_4583) && self.peritem) {
+        // validating when choices labeling is done per item,
+        const objectTag = self.toNameTag;
+        const maxItemIndex = objectTag.maxItemIndex;
+        const existingResultsIndexes = self.annotation.regions
+          .reduce((existingResultsIndexes, reg)=>{
+            const result = reg.results.find(s => s.from_name === self);
+
+            if (result?.hasValue) {
+              existingResultsIndexes.add(reg.item_index);
+            }
+            return existingResultsIndexes;
+          }, new Set());
+
+        for (let idx = 0; idx <= maxItemIndex; idx++) {
+          if (!existingResultsIndexes.has(idx)) {
+            objectTag.setCurrentItem(idx);
+            self.requiredModal();
             return false;
           }
         }

src/stores/Annotation/Annotation.js

@@ -862,7 +862,7 @@ export const Annotation = types
       // happening locally. So to reproduce you have to test in production or environment
       const area = self?.areas?.put(areaRaw);
 
-      object?.afterResultCreated?.(area);
+      objectTag?.afterResultCreated?.(area);
 
       if (!area) return;
 
@@ -1064,12 +1064,15 @@ export const Annotation = types
 
       self.areas.forEach(a => {
         const controlName = a.results[0].from_name.name;
+        // May be null but null is also valid key in this case
+        const itemIndex = a.item_index;
 
         if (a.classification) {
-          if (classificationAreasByControlName[controlName]) {
-            duplicateAreaIds.push(classificationAreasByControlName[controlName]);
+          if (classificationAreasByControlName[controlName]?.[itemIndex]) {
+            duplicateAreaIds.push(classificationAreasByControlName[controlName][itemIndex]);
           }
-          classificationAreasByControlName[controlName] = a.id;
+          classificationAreasByControlName[controlName] = classificationAreasByControlName[controlName] || {};
+          classificationAreasByControlName[controlName][itemIndex] = a.id;
         }
       });
       duplicateAreaIds.forEach(id => self.areas.delete(id));

src/stores/Annotation/store.js

@@ -420,7 +420,7 @@ const AnnotationStoreModel = types
         const updatedItem = item ?? self.selected;
 
         Array.from(updatedItem.names.values())
-          .filter(t => t.isClassification)
+          .filter(t => t.isClassificationTag)
           .forEach(t => t.updateFromResult([]));
 
         updatedItem?.results

src/tags/TagBase.js

@@ -1,17 +1,6 @@
 import { types } from 'mobx-state-tree';
-import { isDefined } from '../utils/utilities';
 
 const BaseTag = types
-  .model('BaseTag')
-  .views((self) => ({
-    /**
-     * Identify classification type tags
-     *
-     * `perRegionVisible` is only available for classification type tags
-     */
-    get isClassification() {
-      return isDefined(self.perRegionVisible);
-    },
-  }));
+  .model('BaseTag');
 
 export { BaseTag };

src/tags/control/Base.js

@@ -31,6 +31,18 @@ const ControlBase = types.model({
   get valueType() {
     return self.type;
   },
+
+  get toNameTag() {
+    return self.annotation.names.get(self.toname);
+  },
+
+  selectedValues() {
+    throw new Error('Control tag needs to implement selectedValues method in views');
+  },
+
+  get result() {
+    return self.annotation.results.find(r => r.from_name === self);
+  },
 }));
 
 export default types.compose(ControlBase, BaseTag);