fix: LSDV-4600: Lead time for TextArea

e2e/examples/classification.js

@@ -54,6 +54,9 @@ const result = [
         'World',
       ],
     },
+    'meta': {
+      'lead_time': 0
+    },
     'id': '0yMHFegGSK',
     'from_name': 'txt',
     'to_name': 'text',

e2e/fragments/AtTextAreaView.js

@@ -0,0 +1,11 @@
+/* global inject */
+const { I } = inject();
+
+module.exports = {
+  _inputSelector: '.ant-form-horizontal .ant-form-item .ant-form-item-control .ant-form-item-control-input .ant-form-item-control-input-content input',
+
+  addNewTextTag(value) {
+    I.fillField(this._inputSelector, value);
+    I.pressKeyDown('Enter');
+  },
+};

e2e/tests/readonly-tests/readonly-annotations/classification-annotation-readonly.test.js

@@ -9,6 +9,10 @@ Data(imageExamples).Scenario('Classification Readonly Annotations', async ({
   current,
   LabelStudio,
 }) => {
+  LabelStudio.setFeatureFlags({
+    'fflag_fix_front_lsdv_4600_lead_time_27072023_short': true,
+  });
+
   I.amOnPage('/');
   const { config, result, data } = current.example;
 

e2e/tests/text-area.test.js

@@ -0,0 +1,39 @@
+
+/* global Feature, Scenario */
+
+const assert = require('assert');
+const { serialize } = require('./helpers');
+
+Feature('Text Area');
+
+const config = `
+<View> 
+  <Text name="text" size="10" value="$text"/> 
+  <TextArea name="ta" toName="text"></TextArea> 
+</View>
+`;
+
+const data = {
+  text: 'To have faith is to trust yourself to the water',
+};
+
+const params = { annotations: [{ id: 'test', result: [] }], config, data };
+
+Scenario('Check if text area is saving lead_time', async function({ I, LabelStudio, AtTextAreaView }) {
+  I.amOnPage('/');
+  LabelStudio.setFeatureFlags({
+    fflag_fix_front_lsdv_4600_lead_time_27072023_short: true,
+  });
+
+  LabelStudio.init(params);
+
+  AtTextAreaView.addNewTextTag('abcabc');
+
+  AtTextAreaView.addNewTextTag('abc abc abc abc');
+
+  AtTextAreaView.addNewTextTag('cba cba cba');
+
+  const result = await I.executeScript(serialize);
+
+  assert.notEqual(result[0]?.meta?.lead_time ?? 0, 0, 'Lead time is not saved');
+});

examples/classification_mixed/config.xml

@@ -1,9 +1,17 @@
 <View>
-  <Text name="text" value="Hello"></Text>
+  <Labels name="label" toName="text">
+    <Label value="Simple" />
+    <Label value="Complex" />
+  </Labels>
+  <Text name="text" value="Just some random text to label"></Text>
 
   <Number name="num" toName="text" min="1" max="10"/>
   <DateTime name="dt" toName="text" showDate="true" showTime="true"/>
   <TextArea name="txt" toName="text" editable="true"/>
+  <View visibleWhen="region-selected">
+    <Header size="3">per-region TextArea</Header>
+    <TextArea name="txt2" toName="text" editable="true" perRegion="true"/>
+  </View>
 
   <Choices name="choices" toName="text">
     <Choice value="Choice 1" background="#5b5"/>

examples/classification_mixed/index.js

@@ -2,4 +2,4 @@ import config from './config.xml';
 import tasks from './tasks.json';
 import annotation from './annotations/1.json';
 
-export const ImageBbox = { config, tasks, annotation };
+export const ClassificationMixed = { config, tasks, annotation };

src/components/Entity/Entity.js

@@ -147,7 +147,7 @@ export default observer(({ store, annotation }) => {
               type="delete"
               style={{ cursor: 'pointer' }}
               onClick={() => {
-                node.deleteMetaInfo();
+                node.deleteMetaText();
               }}
             />
           </Text>
@@ -205,7 +205,7 @@ export default observer(({ store, annotation }) => {
         <Form
           style={{ marginTop: '0.5em', marginBottom: '0.5em' }}
           onFinish={() => {
-            node.setMetaInfo(node.normInput);
+            node.setMetaText(node.normInput);
             setEditMode(false);
           }}
         >

src/components/SidePanels/DetailsPanel/RegionDetails.tsx

@@ -124,7 +124,7 @@ export const RegionDetailsMeta: FC<RegionDetailsMetaProps> = observer(({
   const input = useRef<HTMLTextAreaElement | null>();
 
   const saveMeta = (value: string) => {
-    region.setMetaInfo(value);
+    region.setMetaText(value);
     region.setNormInput(value);
   };
 
@@ -185,7 +185,7 @@ export const RegionDetailsMeta: FC<RegionDetailsMetaProps> = observer(({
   //           type="delete"
   //           style={{ cursor: "pointer" }}
   //           onClick={() => {
-  //             region.deleteMetaInfo();
+  //             region.deleteMetaText();
   //           }}
   //         />
   //       </Elem>

src/components/SidePanels/OutlinerPanel/ViewControls.tsx

@@ -50,25 +50,25 @@ export const ViewControls: FC<ViewControlsProps> = observer(({
   const grouping = regions.group;
   const context = useContext(SidePanelsContext);
   const getGroupingLabels = useCallback((value: GroupingOptions): LabelInfo => {
-    switch(value) {
+    switch (value) {
       case 'manual': return {
         label: 'Group Manually',
-        selectedLabel: isFF(FF_DEV_3873) ? 'Manual': 'Manual Grouping',
+        selectedLabel: isFF(FF_DEV_3873) ? 'Manual' : 'Manual Grouping',
         icon: <IconList/>,
         tooltip: 'Manually Grouped',
       };
       case 'label': return {
         label: 'Group by Label',
         selectedLabel: isFF(FF_DEV_3873) ?
-          (isFF(FF_LSDV_4992) ? 'By Label' :'Label')
+          (isFF(FF_LSDV_4992) ? 'By Label' : 'Label')
           : 'Grouped by Label',
         icon: <IconTagAlt/>,
         tooltip: 'Grouped by Label',
       };
       case 'type': return {
         label: 'Group by Tool',
-        selectedLabel:  isFF(FF_DEV_3873) ?
-          (isFF(FF_LSDV_4992) ? 'By Tool' :'Tool')
+        selectedLabel: isFF(FF_DEV_3873) ?
+          (isFF(FF_LSDV_4992) ? 'By Tool' : 'Tool')
           : 'Grouped by Tool',
         icon: <IconCursor/>,
         tooltip: 'Grouped by Tool',
@@ -77,7 +77,7 @@ export const ViewControls: FC<ViewControlsProps> = observer(({
   }, []);
 
   const getOrderingLabels = useCallback((value: OrderingOptions): LabelInfo => {
-    switch(value) {
+    switch (value) {
       case 'date': return {
         label: 'Order by Time',
         selectedLabel: 'By Time',

src/env/development.js

@@ -76,7 +76,7 @@ import { ClassificationMixed } from '../examples/classification_mixed';
  */
 // import { AllTypes } from "../examples/all_types";
 
-const data = Buckets;
+const data = ClassificationMixed;
 
 function getData(task) {
   if (task && task.data) {

src/mixins/LeadTime.ts

@@ -0,0 +1,93 @@
+import { types } from 'mobx-state-tree';
+
+// both approaches are valid, so code is ready for both,
+// but currently we use instant logic hardcoded
+enum LEAD_TIME_LOGIC_OPTIONS {
+  'inertial', // every action counted, minus overlaps
+  'instant', // close events are recorded from first to last with no extra time
+}
+
+// stored length of interactions in ms, also works as a debounce time
+const LEAD_TIME_INTERACTION = 500;
+
+/**
+ * Calculate lead time just by calling `countTime()` on every interaction.
+ * Result stored in `leadTime`.
+ *
+ * Explanation of how we count time + difference between inertial and instant logic:
+ *
+ * INERTIAL                                       2nd event out of
+ *               3 events                         debounce frame
+ *  debounce     with overlaps       1 event      counted separately
+ *   frame       |          |        |   |        |   ||      |
+ * --|---|-------*--*---*------------*------------*----*--*------> events on timeline
+ *               |      |            |   |        |   ||   |
+ *               last event          same         same   2 events inside
+ *               stops counting,     counting            debounce frame
+ * INSTANT       no extra time                           no extra time
+ */
+const LeadTimeMixin = types
+  .model({
+    leadTime: 0,
+  })
+  .volatile(() => ({
+    leadTimeLogic: LEAD_TIME_LOGIC_OPTIONS.inertial,
+    // when did the last event happen, used only for instant logic
+    lastRecordedTime: 0,
+    // time of the end of the current debounce frame
+    debouncedTime: 0,
+  }))
+  .actions(self => ({
+    _countTimeInertial() {
+      const now = Date.now();
+
+      // new sequence of events
+      if (self.debouncedTime < now) {
+        self.leadTime += LEAD_TIME_INTERACTION;
+      } else {
+        // debounced call
+        // substracting overlapped time
+        self.leadTime += LEAD_TIME_INTERACTION - (self.debouncedTime - now);
+      }
+
+      self.debouncedTime = now + LEAD_TIME_INTERACTION;
+    },
+    _countTimeInstant() {
+      const now = Date.now();
+
+      // new sequence of events
+      if (self.debouncedTime < now) {
+        self.leadTime += LEAD_TIME_INTERACTION;
+        self.lastRecordedTime = now + LEAD_TIME_INTERACTION;
+      } else {
+        // debounced call.
+        // if event happened inside of initial debounced frame, it won't be counted.
+        // if it happened after some events, we store the time passed after the last one.
+        // debounced frame will be increased by LEAD_TIME_INTERACTION in both cases.
+        if (now > self.lastRecordedTime) {
+          self.leadTime += now - self.lastRecordedTime;
+          self.lastRecordedTime = now;
+        }
+      }
+
+      self.debouncedTime = now + LEAD_TIME_INTERACTION;
+    },
+  }))
+  .actions(self => ({
+    /**
+     * Calculate leadTime; call it on every interaction.
+     */
+    countTime() {
+      if (self.leadTimeLogic === LEAD_TIME_LOGIC_OPTIONS.inertial) {
+        self._countTimeInertial();
+      } else if (self.leadTimeLogic === LEAD_TIME_LOGIC_OPTIONS.instant) {
+        self._countTimeInstant();
+      }
+    },
+    resetLeadTimeCounters() {
+      self.lastRecordedTime = 0;
+      self.debouncedTime = 0;
+    },
+  }));
+
+export default LeadTimeMixin;

src/mixins/Normalization.js → src/mixins/Normalization.ts

@@ -2,12 +2,14 @@ import { types } from 'mobx-state-tree';
 
 /**
  * @todo rework this into MetaMixin for all the meta data
+ * @todo it's used by too much files, so that's for later
  * Meta Information
- * For normalize many labels to one value
+ * Additional information for regions and their results, like text and lead_time
  */
 const NormalizationMixin = types
   .model({
-    meta: types.frozen({}),
+    meta: types.frozen<{ text?: string[] }>({}),
+    // @todo do we really need it? it's used to store current value from input
     normInput: types.maybeNull(types.string),
   })
   .preProcessSnapshot((sn) => {
@@ -18,13 +20,17 @@ const NormalizationMixin = types
     };
   })
   .actions(self => ({
+    setMetaValue(key: string, value: any) {
+      self.meta = { ...self.meta, [key]: value };
+    },
+
     /**
      * Set meta text
-     * @param {*} val
+     * @param {*} text
      */
-    setMetaInfo(val) {
-      if (val) {
-        self.meta = { ...self.meta, text: [val] };
+    setMetaText(text: string) {
+      if (text) {
+        self.meta = { ...self.meta, text: [text] };
       } else {
         const adjusted = { ...self.meta };
 
@@ -33,15 +39,16 @@ const NormalizationMixin = types
       }
     },
 
+    setNormInput(val: string) {
+      self.normInput = val;
+    },
+  }))
+  .actions(self => ({
     /**
      * Delete meta text
      */
-    deleteMetaInfo() {
-      self.setMetaInfo('');
-    },
-
-    setNormInput(val) {
-      self.normInput = val;
+    deleteMetaText() {
+      self.setMetaText('');
     },
   }));
 

src/regions/Area.js

@@ -1,10 +1,11 @@
 import { types } from 'mobx-state-tree';
 import Registry from '../core/Registry';
 import Tree from '../core/Tree';
+import { AreaMixin } from '../mixins/AreaMixin';
+import NormalizationMixin from '../mixins/Normalization';
 import RegionsMixin from '../mixins/Regions';
 import { RectRegionModel } from './RectRegion';
 import { KeyPointRegionModel } from './KeyPointRegion';
-import { AreaMixin } from '../mixins/AreaMixin';
 import { AudioRegionModel } from './AudioRegion';
 import { PolygonRegionModel } from './PolygonRegion';
 import { EllipseRegionModel } from './EllipseRegion';
@@ -18,6 +19,7 @@ import { VideoRectangleRegionModel } from './VideoRectangleRegion';
 const ClassificationArea = types.compose(
   'ClassificationArea',
   RegionsMixin,
+  NormalizationMixin,
   AreaMixin,
   types
     .model({

src/regions/Result.js

@@ -84,7 +84,7 @@ const Result = types
       sequence: types.frozen(),
     }),
     // info about object and region
-    // meta: types.frozen(),
+    meta: types.frozen(),
   })
   .views(self => ({
     get perRegionStates() {
@@ -258,13 +258,18 @@ const Result = types
       self.parentID = id;
     },
 
+    setMetaValue(key, value) {
+      self.meta = { ...self.meta, [key]: value };
+    },
+
     // update region appearence based on it's current states, for
     // example bbox needs to update its colors when you change the
     // label, becuase it takes color from the label
     updateAppearenceFromState() { },
 
     serialize(options) {
-      const { type, score, value, ...sn } = getSnapshot(self);
+      const sn = getSnapshot(self);
+      const { type, score, value, meta } = sn;
       const { valueType } = self.from_name;
       const data = self.area ? self.area.serialize(options) : {};
       // cut off annotation id
@@ -294,6 +299,10 @@ const Result = types
         data.meta = { ...data.meta, ...areaMeta };
       }
 
+      if (meta) {
+        data.meta = { ...data.meta, ...meta };
+      }
+
       if (self.area.parentID) {
         data.parentID = self.area.parentID.replace(/#.*/, '');
       }