M2-4928, M2-4929 Drawing and AbTrails streaming updates

src/entities/abTrail/lib/types/test.ts

@@ -29,12 +29,6 @@ export type OnResultLog = {
   currentIndex: number;
 };
 
-export type StreamEventPoint = {
-  x: number;
-  y: number;
-  time: number;
-};
-
 export type AbTestResult = {
   width: number;
   startTime: number;

src/entities/abTrail/ui/AbCanvas.tsx

@@ -13,17 +13,15 @@ import {
 } from '@shopify/react-native-skia';
 
 import { AbTestPayload, Point, TestNode } from '@app/abstract/lib';
-import { StreamEventLoggable } from '@shared/lib';
+import {
+  AbTestStreamEvent,
+  AbTestStreamEventErrorType,
+  StreamEventLoggable,
+} from '@shared/lib';
 import { Box, BoxProps } from '@shared/ui';
 
 import AbShapes from './AbShapes';
-import {
-  LogLine,
-  LogPoint,
-  MessageType,
-  OnResultLog,
-  StreamEventPoint,
-} from '../lib';
+import { LogLine, LogPoint, MessageType, OnResultLog } from '../lib';
 import { getDistance, transformCoordinates } from '../lib/utils';
 
 const paint = Skia.Paint();
@@ -41,7 +39,7 @@ type Props = {
   onLogResult: (data: OnResultLog) => void;
   onMessage: (message: MessageType) => void;
   onComplete: () => void;
-} & StreamEventLoggable<StreamEventPoint> &
+} & StreamEventLoggable<AbTestStreamEvent> &
   BoxProps;
 
 const AbCanvas: FC<Props> = props => {
@@ -78,7 +76,7 @@ const AbCanvas: FC<Props> = props => {
     onMessage,
     width,
     readonly,
-    onLog,
+    onLog: onAddPointToStream,
   } = props;
 
   const canvasData = useMemo(
@@ -195,24 +193,72 @@ const AbCanvas: FC<Props> = props => {
     return foundNode ?? null;
   };
 
-  const createLogPoint = (point: Point): LogPoint => {
+  const getCurrentAndNextNodeLabels = () => {
     const index = getCurrentIndex();
 
     const currentNode = findNodeByIndex(index);
     const nextNode = findNodeByIndex(index + 1);
 
+    return [currentNode.label, nextNode.label];
+  };
+
+  const createLogPoint = (point: Point): LogPoint => {
+    const [currentNodeLabel, nextNodeLabel] = getCurrentAndNextNodeLabels();
+
     const logPoint: LogPoint = {
       x: point.x,
       y: point.y,
       time: new Date().getTime(),
       valid: null,
-      start: currentNode.label,
-      end: nextNode.label,
+      start: currentNodeLabel,
+      end: nextNodeLabel,
       actual: null,
     };
     return logPoint;
   };
 
+  const createStreamEventPoint = (point: Point): AbTestStreamEvent => {
+    const [currentNodeLabel, nextNodeLabel] = getCurrentAndNextNodeLabels();
+
+    return {
+      x: (point.x * width) / 100,
+      y: (point.y * width) / 100,
+      time: Date.now(),
+      lineNumber: logLines?.length - 1,
+      error: AbTestStreamEventErrorType.NotDefined,
+      currentNodeLabel,
+      nextNodeLabel,
+    };
+  };
+
+  const addOverCorrectPointToStream = (point: Point) => {
+    const streamEventPoint = createStreamEventPoint(point);
+    streamEventPoint.error = AbTestStreamEventErrorType.OverCorrectPoint;
+
+    onAddPointToStream(streamEventPoint);
+  };
+
+  const addOverWrongPointToStream = (point: Point, wrongPointLabel: string) => {
+    const streamEventPoint = createStreamEventPoint(point);
+    streamEventPoint.error = AbTestStreamEventErrorType.OverWrongPoint;
+    streamEventPoint.wrongPointLabel = wrongPointLabel;
+
+    onAddPointToStream(streamEventPoint);
+  };
+
+  const addPointToStream = (point: Point) => {
+    const streamEventPoint = createStreamEventPoint(point);
+
+    onAddPointToStream(streamEventPoint);
+  };
+
+  const addOverUndefinedPointToStream = (point: Point) => {
+    const streamEventPoint = createStreamEventPoint(point);
+    streamEventPoint.error = AbTestStreamEventErrorType.OverUndefinedPoint;
+
+    onAddPointToStream(streamEventPoint);
+  };
+
   const addLogLine = ({ x, y }: Point): void => {
     const newLine: LogLine = {
       points: [createLogPoint({ x, y })],
@@ -274,11 +320,8 @@ const AbCanvas: FC<Props> = props => {
     reCreatePath(point);
     drawPath();
     reRender();
-    onLog({
-      x: (touchInfo.x * width) / 100,
-      y: (touchInfo.y * width) / 100,
-      time: Date.now(),
-    });
+
+    onAddPointToStream(createStreamEventPoint(point));
   };
 
   const onTouchProgress = (touchInfo: TouchInfo) => {
@@ -305,14 +348,9 @@ const AbCanvas: FC<Props> = props => {
       resetCloseToNextRerendered();
     }
 
-    onLog({
-      x: (touchInfo.x * width) / 100,
-      y: (touchInfo.y * width) / 100,
-      time: Date.now(),
-    });
-
     if (isOverNext(point) && isOverLast(point)) {
       markLastLogPoints({ valid: true });
+      addOverCorrectPointToStream(point);
       keepPathInState();
       resetCurrentPath();
       onLogResult({
@@ -321,14 +359,17 @@ const AbCanvas: FC<Props> = props => {
       });
       onMessage(MessageType.Completed);
       onComplete();
+
       return;
     }
 
     if (isOverNext(point)) {
       markLastLogPoints({ valid: true });
+      addOverCorrectPointToStream(point);
       keepPathInState();
       reCreatePath(point);
       incrementCurrentIndex();
+
       return;
     }
 
@@ -339,7 +380,12 @@ const AbCanvas: FC<Props> = props => {
       resetCurrentPath();
       setFlareGreenPointIndex({ index: getCurrentIndex() });
       onMessage(MessageType.IncorrectLine);
+
+      addOverWrongPointToStream(point, node.label);
+      return;
     }
+
+    addPointToStream(point);
   };
 
   const onTouchEnd = (touchInfo: TouchInfo) => {
@@ -357,6 +403,8 @@ const AbCanvas: FC<Props> = props => {
       setFlareGreenPointIndex({ index: getCurrentIndex() });
     }
 
+    addOverUndefinedPointToStream(point);
+
     markLastLogPoints({ valid: false, actual: node?.label ?? 'none' });
   };
 

src/entities/abTrail/ui/AbTest.tsx

@@ -3,21 +3,16 @@ import { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { AbTestPayload } from '@app/abstract/lib';
-import { colors, StreamEventLoggable } from '@shared/lib';
+import { AbTestStreamEvent, colors, StreamEventLoggable } from '@shared/lib';
 import { Box, BoxProps, Text, XStack } from '@shared/ui';
 
 import AbCanvas from './AbCanvas';
-import {
-  AbTestResult,
-  MessageType,
-  MessageTypeStrings,
-  StreamEventPoint,
-} from '../lib';
+import { AbTestResult, MessageType, MessageTypeStrings } from '../lib';
 
 type Props = {
   testData: AbTestPayload;
   onResponse?: (response: AbTestResult) => void;
-} & StreamEventLoggable<StreamEventPoint> &
+} & StreamEventLoggable<AbTestStreamEvent> &
   BoxProps;
 
 const ShapesRectPadding = 15;

src/entities/drawer/ui/DrawingBoard.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, FC, useMemo } from 'react';
 
-import { StreamEventLoggable } from '@shared/lib';
+import { DrawingStreamEvent, StreamEventLoggable } from '@shared/lib';
 import { Box, SketchCanvas, SketchCanvasRef, useOnUndo } from '@shared/ui';
 
 import { DrawLine, ResponseSerializer, DrawResult } from '../lib';
@@ -10,7 +10,7 @@ type Props = {
   value: Array<DrawLine>;
   onResult: (result: DrawResult) => void;
   width: number;
-} & StreamEventLoggable<DrawPoint>;
+} & StreamEventLoggable<DrawingStreamEvent>;
 
 const DrawingBoard: FC<Props> = props => {
   const { value, onResult, width, onLog } = props;
@@ -50,16 +50,19 @@ const DrawingBoard: FC<Props> = props => {
       startTime: Date.now(),
       points: [drawPoint],
     };
+    const logPoint = drawPoint.scale(vector) as DrawPoint;
 
-    onLog(drawPoint.scale(vector));
+    onLog({ ...logPoint, lineNumber: value?.length });
   };
 
   const onTouchProgress = (x: number, y: number) => {
     const drawPoint = new DrawPoint(x, y);
 
     drawingValueLineRef.current.points.push(drawPoint);
 
-    onLog(drawPoint.scale(vector));
+    const logPoint = drawPoint.scale(vector);
+
+    onLog({ ...logPoint, lineNumber: value?.length });
   };
 
   const onTouchEnd = () => {

src/entities/drawer/ui/DrawingTest.tsx

@@ -4,10 +4,10 @@ import { FC, useState } from 'react';
 import { CachedImage } from '@georstat/react-native-image-cache';
 
 import { Box, BoxProps, XStack } from '@app/shared/ui';
-import { StreamEventLoggable } from '@shared/lib';
+import { DrawingStreamEvent, StreamEventLoggable } from '@shared/lib';
 
 import DrawingBoard from './DrawingBoard';
-import { DrawLine, DrawPoint, DrawResult, SvgFileManager } from '../lib';
+import { DrawLine, DrawResult, SvgFileManager } from '../lib';
 
 const RectPadding = 15;
 
@@ -17,7 +17,7 @@ type Props = {
   backgroundImageUrl: string | null;
   onResult: (result: DrawResult) => void;
   toggleScroll: (isScrollEnabled: boolean) => void;
-} & StreamEventLoggable<DrawPoint> &
+} & StreamEventLoggable<DrawingStreamEvent> &
   BoxProps;
 
 const DrawingTest: FC<Props> = props => {

src/entities/stabilityTracker/ui/StabilityTrackerItem.tsx

@@ -11,8 +11,11 @@ import { orientation } from 'react-native-sensors';
 import Svg, { Circle } from 'react-native-svg';
 import { useToast } from 'react-native-toast-notifications';
 
-import { StabilityTrackerAnswerValue } from '@shared/api';
-import { useForceUpdate, StreamEventLoggable } from '@shared/lib';
+import {
+  useForceUpdate,
+  StreamEventLoggable,
+  StabilityTrackerEvent,
+} from '@shared/lib';
 import { YStack } from '@shared/ui';
 
 import ControlBar from './ControlBar';
@@ -65,7 +68,7 @@ type Props = {
   onComplete: (response: StabilityTrackerResponse) => void;
   onMaxLambdaChange: (contextKey: string, contextValue: unknown) => void;
   maxLambda?: number;
-} & StreamEventLoggable<StabilityTrackerAnswerValue>;
+} & StreamEventLoggable<StabilityTrackerEvent>;
 
 const StabilityTrackerItemScreen = (props: Props) => {
   const toast = useToast();
@@ -344,17 +347,7 @@ const StabilityTrackerItemScreen = (props: Props) => {
       lambdaSlope: lambdaSlope.current,
     };
 
-    const liveEvent: StabilityTrackerAnswerValue = {
-      timestamp: response.timestamp,
-      stimPos: response.circlePosition,
-      targetPos: response.targetPosition,
-      userPos: response.userPosition,
-      score: response.score,
-      lambda: response.lambda,
-      lambdaSlope: response.lambdaSlope,
-    };
-
-    onLog(liveEvent);
+    onLog(response);
 
     responses.current.push(response);
   };

src/features/pass-survey/ui/ActivityItem.tsx

@@ -22,7 +22,12 @@ import { useAppletStreamingStatus } from '@entities/applet/lib/hooks';
 import { DrawingTest } from '@entities/drawer';
 import { HtmlFlanker, NativeIosFlanker } from '@entities/flanker';
 import { StabilityTracker } from '@entities/stabilityTracker';
-import { IS_ANDROID, useSendEvent, wait } from '@shared/lib';
+import {
+  IS_ANDROID,
+  StreamEventActivityItemType,
+  useSendEvent,
+  wait,
+} from '@shared/lib';
 import {
   RadioActivityItem,
   SurveySlider,
@@ -67,7 +72,10 @@ function ActivityItem({
 
   const [scrollEnabled, setScrollEnabled] = useState(initialScrollEnabled);
 
-  const { sendLiveEvent } = useSendEvent(streamEnabled);
+  const { sendLiveEvent } = useSendEvent(
+    type as StreamEventActivityItemType,
+    streamEnabled,
+  );
 
   const { next } = useContext(HandlersContext);