[ext] Add displaying created date for annotations (#349)

* [ext] Add annotation created date displaying

* [fix] Fix created date by default

* Make TimeAgo typed, add some comments

* Run actions on sub-branches

(cherry picked from commit c1f1744)

* Restore safeUnfreeze method

(cherry picked from commit 3bcbf6d)

Co-authored-by: Nick <[email protected]>
Co-authored-by: Nick Skriabin <[email protected]>
Co-authored-by: Max Tkachenko <[email protected]>

Author: 3 people

src/common/TimeAgo/TimeAgo.tsx

@@ -0,0 +1,63 @@
+import { format, formatDistanceToNow } from "date-fns";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+const SECS = 1000;
+const MINS = 60 * SECS;
+
+// Each stage is a tuple of limit and step
+// limit is a time from base date, until which stage is active.
+// step is a time-step which we do between two adjusted ticks.
+// stages are chosen to match formatDistanceToNow function from date-fns
+const STAGES: [limit: number, step: number][] = [
+  // from 0 seconds
+  [30 * SECS, 30 * SECS], // to 30 seconds with 30 seconds step
+  [44 * MINS + 30 * SECS, MINS], // to 44 minutes 30 seconds with 1 minute step
+  [Number.MAX_SAFE_INTEGER, 30 * MINS], // to 30 seconds with 30 seconds step
+];
+
+function getNextTick(passedTime = 0) {
+  const idx = STAGES.findIndex(([timeLimit], idx) => {
+    return timeLimit > passedTime || idx === STAGES.length - 1;
+  });
+  const baseLimit = idx > 0 ? STAGES[idx - 1][0] : 0;
+  const baseStep = STAGES[idx][1];
+
+  return Math.ceil((passedTime - baseLimit + 1) / baseStep) * baseStep + baseLimit;
+}
+
+type TimeAgoProps = React.ComponentPropsWithoutRef<"time"> & {
+  date: number | string | Date
+}
+
+export const TimeAgo = ({ date, ...rest }: TimeAgoProps) => {
+  const [timestamp, forceUpdate] = useState(Date.now());
+  const fromTS = useMemo(() => {
+    return (new Date(date)).valueOf();
+  }, [date]);
+  const timeoutId = useRef<number>();
+  const scheduleNext = useCallback(() => {
+    const passedTime = Date.now() - fromTS;
+    const tickValue = getNextTick(passedTime);
+
+    timeoutId.current = window.setTimeout(() => {
+      forceUpdate(Date.now());
+    }, tickValue - passedTime);
+  }, [date]);
+
+  useEffect(() => {
+    scheduleNext();
+    return () => {
+      clearTimeout(timeoutId.current);
+    };
+  }, [date, timestamp]);
+
+  return (
+    <time
+      dateTime={format(fromTS, "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")}
+      title={format(fromTS, "PPpp")}
+      {...rest}
+    >
+      {formatDistanceToNow(fromTS, { addSuffix: true })}
+    </time>
+  );
+};

src/components/TopBar/Annotations.js

@@ -7,6 +7,7 @@ import { Block, Elem } from "../../utils/bem";
 import { isDefined, userDisplayName } from "../../utils/utilities";
 import { GroundTruth } from "../CurrentEntity/GroundTruth";
 import "./Annotations.styl";
+import { TimeAgo }  from "../../common/TimeAgo/TimeAgo";
 
 export const Annotations = observer(({ store, annotationStore }) => {
   const dropdownRef = useRef();
@@ -146,10 +147,14 @@ const Annotation = observer(({ entity, selected, onClick, extra, ...props }) =>
               <Elem tag="span" name="entity-id">#{entity.pk ?? entity.id}</Elem>
             </Elem>
 
-            {isDefined(entity.acceptedState) && (
+            {isDefined(entity.acceptedState) ? (
               <Elem name="review" mod={{ state: entity.acceptedState }}>
                 {entity.acceptedState}
               </Elem>
+            ) : (
+              <Elem name="created">
+                created, <Elem name="date" component={TimeAgo} date={entity.createdDate}/>
+              </Elem>
             )}
           </Space>
         </Space>

src/components/TopBar/Annotations.styl

@@ -57,6 +57,14 @@
       &_rejected
         color #dd0000
 
+  &__created
+    font-size 11px
+    line-height 13px
+    color rgba(0, 0, 0, 0.4)
+
+  &__date
+    color rgba(0, 0, 0, 0.4)
+
   &__counter
     font-size 11px
     line-height 13px

src/stores/AnnotationStore.js

@@ -1224,6 +1224,7 @@ export default types
       //
       const node = {
         userGenerate: false,
+        createdDate: Utils.UDate.currentISODate(),
 
         ...options,