@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/compose/trace/flow.component.ts

@@ -0,0 +1,669 @@
+import { Component, Input, ElementRef, OnDestroy, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
+import { NodeModel, ConnectorModel, LayoutModel, DiagramTools, Diagram, DiagramConstraints, ComplexHierarchicalTree, PortVisibility, ComplexHierarchicalTreeService, ConnectorBridging, BpmnDiagrams, DataBinding, ScrollSettingsModel, SnapSettingsModel, Segments, LineRouting, TreeInfo, IMouseEventArgs, LineDistribution, ConnectionPointOrigin, SnapConstraints, LayoutAnimation } from '@syncfusion/ej2-angular-diagrams';
+import { Observable, forkJoin, of, interval } from 'rxjs';
+import { tap, takeUntil, map } from 'rxjs/operators';
+const moment = require('moment');
+import { DocumentModel, Recipient, NodeInfo, Gender, FlowNode, UserInfo, State } from "../../core/models";
+import { getWarn } from '../../core/functions';
+import { TraceBase, START_NODE } from './trace.base';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+import { TranslateService } from '../../core/translate.service';
+import { HubService } from '../../core/hub.service';
+import { MatTooltip } from '@angular/material/tooltip';
+
+//Object.defineProperty(TooltipComponent.prototype, 'message', {
+//  set(v: any) {
+//    const el = document.querySelectorAll('.mat-tooltip');
+
+//    if (el) {
+//      el[el.length - 1].innerHTML = v;
+//    }
+//  },
+//});
+
+Diagram.Inject(ComplexHierarchicalTree, ConnectorBridging, BpmnDiagrams, DataBinding, LineRouting, LineDistribution, LayoutAnimation);
+
+const PENDING_PATH = 'M18,22l-0.01-6L14,12l3.99-4.01L18,2H6v6l4,4l-4,3.99V22H18z M8,7.5V4h8v3.5l-4,4L8,7.5z',
+  FYI_PATH = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+  //ESCALATED_PATH = 'M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z',
+  WARNNING_PATH = 'M 13.763735,1.8433735 H 6.3037349 l -5.27,5.27 v 7.4599995 l 5.27,5.27 h 7.4600001 l 5.27,-5.27 V 7.1133735 Z m -3.73,14.2999995 c -0.7200001,0 -1.3000001,-0.58 -1.3000001,-1.3 0,-0.72 0.58,-1.3 1.3000001,-1.3 0.72,0 1.3,0.58 1.3,1.3 0,0.72 -0.58,1.3 -1.3,1.3 z m 1,-4.3 H 9.0337349 V 5.8433735 h 2.0000001 z';
+
+const PORTS = [
+  { id: 'port1', offset: { x: 1, y: 0.25 }, visibility: PortVisibility.Hidden },
+  { id: 'port2', offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Hidden },
+  { id: 'port3', offset: { x: 1, y: 0.75 }, visibility: PortVisibility.Hidden },
+  { id: 'port4', offset: { x: .25, y: 1 }, visibility: PortVisibility.Hidden },
+  { id: 'port5', offset: { x: .5, y: 1 }, visibility: PortVisibility.Hidden },
+  { id: 'port6', offset: { x: .75, y: 1 }, visibility: PortVisibility.Hidden },
+  { id: 'port7', offset: { x: .25, y: 0 }, visibility: PortVisibility.Hidden },
+  { id: 'port8', offset: { x: .5, y: 0 }, visibility: PortVisibility.Hidden },
+  { id: 'port9', offset: { x: .75, y: 0 }, visibility: PortVisibility.Hidden },
+  { id: 'port10', offset: { x: 0, y: 0.25 }, visibility: PortVisibility.Hidden },
+  { id: 'port11', offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Hidden },
+  { id: 'port12', offset: { x: 0, y: 0.75 }, visibility: PortVisibility.Hidden }
+];
+@Component({
+  selector: 'bizdoc-flow',
+  templateUrl: './flow.component.html',
+  styleUrls: ['./flow.component.scss'],
+  viewProviders: [ComplexHierarchicalTreeService],
+  host: {
+    dir: 'ltr'
+  }
+})
+/** flow-view component*/
+export class FlowViewComponent extends TraceBase implements OnChanges, OnDestroy {
+  @Input() model: DocumentModel<any>;
+  @Input() connectorType: Segments = 'Bezier';
+  @ViewChild(MatTooltip) tooltip: MatTooltip;
+  @ViewChild('diagram', { static: true }) elementRef: ElementRef<HTMLDivElement>;
+  tooltipText: string;
+  diagram: Diagram;
+  readonly tool: DiagramTools = DiagramTools.ZoomPan;
+  readonly diagramConstraints: DiagramConstraints =
+    DiagramConstraints.Default |
+    DiagramConstraints.Pan |
+    DiagramConstraints.LineRouting |
+    DiagramConstraints.Bridging;
+  public readonly layout = {
+    type: 'ComplexHierarchicalTree',
+    connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
+    horizontalSpacing: 50,
+    verticalSpacing: 50,
+    verticalAlignment: 'Top',
+    connectionDirection: 'Orientation',
+    //connectorSegments: 'Layout',
+    getLayoutInfo: (node: Node, options: TreeInfo) => {
+      if (!options.hasSubTree) {
+        options.type = 'Center';
+        options.orientation = 'Vertical';
+      }
+    },
+    layoutInfo: {
+      //type: 'Left',
+      enableRouting: true,
+      orientation: 'Horizontal'
+    },
+    orientation: this._session.inverse ? 'RightToLeft' : 'LeftToRight',
+    margin: { left: 10, right: 10, top: 10, bottom: 10 }
+  } as LayoutModel;
+
+  private readonly scrollSettings = {
+    minZoom: .5,
+    canAutoScroll: true,
+    currentZoom: 1.2,
+    padding: { top: 0, bottom: 0 },
+    autoScrollBorder: { top: 0, bottom: 0 },
+    maxZoom: 2.5
+  } as ScrollSettingsModel;
+
+  private readonly snapSettings = {
+    constraints: SnapConstraints.None,
+    gridType: 'Dots'
+  } as SnapSettingsModel;
+  private readonly _configuration: { [name: string]: FlowNode } = {};
+  private _submitted: Date;
+  private _accentColor = this._session.getAccent();
+  /** workflow-view ctor */
+  constructor(private _accounts: AccountService, private _session: SessionService, private _translate: TranslateService,
+    hub: HubService) {
+    super(hub);
+    this._session.profile.nodes.forEach(n =>
+      this._configuration[n.name] = n);
+    _session.themeChange.pipe(takeUntil(this._destroy)).
+      subscribe(() => {
+        this._accentColor = this._session.getAccent();
+        this.refresh();
+      });
+  }
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.diagram && this.diagram.destroy();
+    this._prepare().then(r => {
+      const { connectors, nodes, indicators } = r;
+      const diagram = this.diagram = new Diagram({
+        width: '100%',
+        height: 380,
+        nodes,
+        connectors,
+        layout: this.layout,
+        tool: this.tool,
+        scrollSettings: this.scrollSettings,
+        snapSettings: this.snapSettings,
+        constraints: this.diagramConstraints,
+        getConnectorDefaults: this.connDefaults.bind(this),
+        getNodeDefaults: this.nodeDefaults.bind(this),
+        mouseOver: this.mouseMove.bind(this)
+      }, this.elementRef.nativeElement);
+      diagram.doLayout();
+      this._addIndicators(indicators);
+      diagram.fitToPage();
+    });
+    this._refresh();
+  }
+  private _refresh() {
+    interval(60000).pipe(takeUntil(this._destroy)).subscribe(() => {
+      super.resetEstimateTime();
+      this.diagram.dataBind();
+    });
+  }
+  mouseMove(e: IMouseEventArgs) {
+    if ((e.actualObject as NodeModel).addInfo) {
+      const { estimate, node, tooltip } = (e.actualObject as NodeModel).addInfo as NodeInfoModel;
+      if (tooltip) {
+        if (estimate && tooltip.estimatedTime) {
+          tooltip.estimatedTime = this._timeEstimate(node);
+        }
+        this.tooltip.message = this._tooltip(tooltip);
+        this.tooltip.show();
+      }
+      else
+        this.tooltip.hide();
+    }
+  }
+  public refresh() {
+    this.ngOnChanges(null);
+  }
+  /**
+   * 
+   * @param nodes
+   */
+  private _addIndicators(nodes: NodeModel[]) {
+    nodes.forEach((n, i) => {
+      const parent = this.diagram.getNodeObject((n.addInfo as NodeInfoModel).parentId);
+      n.offsetX = parent.offsetX + (this._session.inverse ? -25 : 25);
+      n.offsetY = parent.offsetY + 25;
+      n.zIndex = 1000 + i;
+      this.diagram.add(n);
+    });
+  }
+  /**
+   * 
+   * @param obj
+   */
+  public nodeDefaults(obj: NodeModel): NodeModel {
+    const { estimate, pending, indicator } = obj.addInfo as NodeInfoModel;
+
+    if (indicator) {
+      obj.width = obj.height = 15;
+      obj.style.strokeWidth = 0;
+    }
+    else {
+      obj.ports = PORTS;
+      obj.width = obj.height = 50;
+
+      if (estimate) {
+        obj.style.strokeDashArray = '2 2';
+        obj.style.strokeWidth = 1;
+      }
+      else {
+        obj.style.strokeColor = this._accentColor;
+        obj.style.strokeWidth = 2;
+        if (pending)
+          obj.style.fill = this._session.getAccent(400);
+      }
+    }
+    return obj;
+  }
+  /**
+   * 
+   * @param connector
+   */
+  public connDefaults(connector: ConnectorModel): void {
+    connector.type = this.connectorType;
+    connector.cornerRadius = 6;
+    connector.targetDecorator.height = 7;
+    connector.targetDecorator.width = 7;
+    if (connector.type === 'Orthogonal')
+      connector.sourcePadding = connector.targetPadding = 1;
+    if ((connector.addInfo as ConnectorInfoModel).estimate) {
+      connector.style.strokeDashArray = '2 2';
+      connector.style.strokeWidth = 1;
+    }
+    else {
+      connector.style.strokeColor = connector.targetDecorator.style.strokeColor = connector.targetDecorator.style.fill = this._accentColor;
+      connector.style.strokeWidth = 2;
+    }
+  };
+  /** */
+  private _prepare(): Promise<{ nodes: NodeModel[]; connectors: ConnectorModel[]; indicators: NodeModel[] }> {
+    const promises: Promise<any>[] = [], indicators: NodeModel[] = [];
+    this._submitted = this.model.issued || this.model.log.filter(l => l.type === 'Submit').reverse()[0].time;
+    const connectors: ConnectorModel[] = this.model.workflow.connectors.map(c => {
+      return {
+        sourceID: c.sourceId,
+        targetID: c.targetId,
+        addInfo: {
+          estimate: c.estimate
+        } as ConnectorInfoModel
+      } as ConnectorModel
+    }),
+      nodes: NodeModel[] = [];
+    let zIndex = 500;
+    this.model.workflow.nodes.forEach(n => {
+      const recipients = this.model.recipients.filter(r => r.nodeId === n.id && r.received >= this._submitted);
+      if (recipients.length) recipients.sort(a => a.replied ? -1 : 1).forEach((r, i) => {
+        const promise = this._note(n, r).then(e => {
+          const node = {
+            id: n.id,
+            shape: this._configuration[n.type].shape,
+            zIndex: zIndex++,
+            addInfo: {
+              estimate: n.estimate,
+              pending: r.pending,
+              standardTime: n.standardTime,
+              type: n.type,
+              tooltip: e.tooltip,
+              node: n
+            } as NodeInfoModel,
+            annotations: [{
+              content: e.annotation,
+              margin: { top: 2 },
+              offset: {
+                y: 1,
+                x: this._session.inverse ? 1 : .5
+              },
+              verticalAlignment: 'Top'
+            }]
+          } as NodeModel;
+          if (i > 0) {
+            node.id += i.toString();
+            this.model.workflow.connectors.filter(c => c.targetId === n.id).forEach(c =>
+              connectors.push({
+                sourceID: c.sourceId,
+                targetID: node.id,
+                addInfo: {
+                  estimate: c.estimate
+                }
+              }));
+            if (r.pending || r.estimate) this.model.workflow.connectors.filter(c => c.sourceId === n.id).forEach(c =>
+              connectors.push({
+                sourceID: node.id,
+                targetID: c.targetId,
+                addInfo: {
+                  estimate: c.estimate
+                }
+              }));
+          }
+          nodes.push(node);
+          if (r.action) {
+            const action = this._session.profile.actions.find(a => a.name === r.action);
+            if (action && action.shape) {
+              const actionIndicator = {
+                id: node.id + 'action',
+                shape: {
+                  type: 'Path',
+                  data: action.shape,
+                  align: this._session.inverse ? 'XMinYMax' : 'XMaxYMax',
+                },
+                style: {
+                  fill: action.color || 'black'
+                },
+                addInfo: {
+                  pending: r.pending,
+                  indicator: true,
+                  parentId: node.id,
+                  node: n
+                } as NodeInfoModel
+              } as NodeModel;
+              indicators.push(actionIndicator);
+            }
+          }
+          if (r.pending && !r.estimate) {
+            const pendingIndicator = {
+              id: node.id + 'pending',
+              shape: {
+                type: 'Path',
+                data: PENDING_PATH,
+                align: this._session.inverse ? 'XMaxYMax' : 'XMinYMax'
+              },
+              style: {
+                fill: this._session.getAccent(900)
+              },
+              addInfo: {
+                indicator: true,
+                parentId: node.id
+              }
+            } as NodeModel;
+            indicators.push(pendingIndicator);
+          }
+          if (n.fyi) {
+            indicators.push({
+              id: node.id + 'fyi',
+              shape: {
+                type: 'Path',
+                data: FYI_PATH,
+                align: this._session.inverse ? 'XMinYMax' : 'XMaxYMax'
+              },
+              style: {
+              },
+              addInfo: {
+                indicator: true,
+                parentId: node.id
+              }
+            } as NodeModel
+            );
+          }
+        });
+        promises.push(promise);
+      });
+      else {
+        const promise = this._shapeNote(n).then(e => {
+          const path = this._configuration[n.type].shape.type === 'Path';
+          nodes.push({
+            id: n.id,
+            shape: this._configuration[n.type].shape,
+            zIndex: zIndex++,
+            addInfo: {
+              estimate: n.estimate,
+              standardTime: n.standardTime,
+              type: n.type,
+              tooltip: e.tooltip,
+              node: n
+            } as NodeInfoModel,
+            annotations: [{
+              content: e.annotation,
+              offset: path ? {
+                y: 1
+              } : { x: this._session.inverse ? 1 : .5 },
+              verticalAlignment: path ? 'Top' : 'Center'
+            }]
+          });
+          if (e.state && e.state.shape && !n.estimate)
+            indicators.push({
+              id: n.id + 'state',
+              shape: {
+                type: 'Path',
+                data: e.state.shape,
+                align: this._session.inverse ? 'XMaxYMax' : 'XMinYMax'
+              },
+              style: {
+                fill: e.state.color || 'black'
+              },
+              addInfo: {
+                indicator: true,
+                parentId: n.id,
+                node: n
+              } as NodeInfoModel
+            });
+          if (e.error) {
+            const warnningIndicator = {
+              id: n.id + 'exception',
+              shape: {
+                type: 'Path',
+                data: WARNNING_PATH,
+                align: this._session.inverse ? 'XMaxYMax' : 'XMinYMax'
+              },
+              style: {
+                fill: getWarn(800)
+              },
+              tooltip: {
+                //content: e.error,
+                position: 'BottomCenter',
+                relativeMode: 'Mouse'
+              },
+              addInfo: {
+                indicator: true,
+                parentId: n.id
+              }
+            } as NodeModel;
+            indicators.push(warnningIndicator);
+          }
+        });
+        promises.push(promise);
+      }
+    });
+    //nodes.forEach(n => (n.parentId) = connectors.filter(c => c.targetID === n.id).map(c => c.sourceID))
+    return promises.length ? Promise.all(promises).then(() => { return { connectors, nodes, indicators } }) :
+      Promise.resolve({ connectors, nodes, indicators });
+  }
+
+  resize() {
+    if (this.diagram) this.diagram.width = 'auto';
+  }
+  private _timeEstimate(node: NodeInfo): string {
+    const { min, max } = super._estimateTime(node);
+    if (max)
+      return !min || min === max ?
+        this._translate.get('EstimateTime', this._duration(max)) :
+        this._translate.get('EstimateTimeRange', this._duration(min), this._duration(max));
+  }
+  private _tooltip(obj: NodeTooltipModel) {
+    const { note, role, substituting, duration, standardTime, estimatedTime, error } = obj
+    const rows = [error, note, role, substituting, duration, standardTime, estimatedTime].filter(v => v);
+    if (rows.length) {
+      return rows.join(' ')
+    }
+  }
+  private _shapeNote(node: NodeInfo): Promise<{ annotation: string; tooltip: NodeTooltipModel; state?: State; error?: boolean }> {
+    let observe: Observable<any>;
+    const log = this.model.log.filter(l => l.nodeId === node.id && l.time >= this._submitted);
+    const tooltip = { error: node.error } as NodeTooltipModel;
+    let annotation: string, state: State;
+    const stateLog = log.find(l => l.type === 'StateChange');
+    if (stateLog) {
+      state = this._session.profile.states.find(s => s.name === stateLog.state);
+
+      annotation = state ? ((node.estimate ? state.future : state.past) || state.title) : stateLog.state;
+    }
+    if (node.type === START_NODE && !node.estimate) {
+      observe = this._startNode().pipe(tap(e => {
+        tooltip.note = e.note;
+        tooltip.role = e.role;
+      }));
+    }
+    if (node.estimate)
+      tooltip.estimatedTime = this._timeEstimate(node);
+
+    return (observe ? observe.toPromise() : Promise.resolve()).then(() => {
+      return { annotation, state, tooltip, error: node.error !== undefined }
+    });
+  }
+  private _startNode(): Observable<{
+    note: string, role: string;
+  }> {
+    let who: Observable<UserInfo | 'you'>, by: Observable<UserInfo | 'you'>;
+    if (this.model.ownerId === this._session.profile.userId && !this._session.isImpersonating)
+      who = of('you');
+
+    else
+      who = this._accounts.get(this.model.ownerId);
+    if (this.model.ownerById) {
+      if (this.model.ownerById === this._session.userId)
+        by = of('you');
+
+      else
+        by = this._accounts.get(this.model.ownerById);
+    }
+    const profiles = [who];
+    if (by)
+      profiles.push(by);
+    const observe = forkJoin(profiles).pipe(map(us => {
+      let note: string, role: string;
+      const [who, by] = us;
+      if (by) {
+        if (by === 'you')
+          note =
+            this._translate.get('SubmittedNoteByYou',
+              who === 'you' ? this._translate.get('You') : (who as UserInfo).name,
+              this._fromNow(this.model.issued));
+
+        else
+          note =
+            this._translate.get('SubmittedNoteBy',
+              who === 'you' ? this._translate.get('You') : (who as UserInfo).name,
+              (by as UserInfo).name,
+              this._fromNow(this.model.issued));
+      }
+
+      else if (who === 'you')
+        note = this._translate.get('YouSubmittedNote', this._fromNow(this.model.issued));
+
+      else
+        note = this._translate.get('SubmittedNote', (who as UserInfo).name, this._fromNow(this.model.issued));
+      if (who !== 'you' && who.role)
+        role = `- ${who.role}`;
+      return { note, role };
+    }));
+    return observe;
+  }
+
+  private _note(node: NodeInfo, recipient: Recipient): Promise<{ annotation: string; tooltip: NodeTooltipModel }> {
+    const observables: Observable<any>[] = [];
+    const tooltip: NodeTooltipModel = {};
+    let annotation: string;
+
+    const escalations = this.model.log.filter(l => l.time > this.model.issued && l.type === 'Escalation' && l.recipientId === recipient.id);
+
+    if (recipient.userId === this._session.profile.userId) {
+      annotation = this._session.isImpersonating ? this._session.profile.name : this._translate.get('You');
+      if (recipient.byId) {
+        const observe = this._accounts.get(recipient.byId).pipe(tap(u => {
+          const past = this._actionName(recipient.action, u.gender), time = this._fromNow(recipient.replied);
+          tooltip.note = this._translate.get('YouTakenActionBy', u.name, past, time);
+        }));
+        observables.push(observe);
+      }
+      else if (recipient.replied) {
+        const time = this._fromNow(recipient.replied);
+        if (this._session.profile.byId) {
+          const past = this._actionName(recipient.action, this._session.profile.gender);
+          tooltip.note = this._translate.get('ActionTaken', this._session.profile.name, past, time);
+        }
+        else {
+          const past = this._actionName(recipient.action, 'you');
+          tooltip.note = this._translate.get('YouTakenAction', past, time);
+        }
+      }
+      else if (escalations.length) {
+        const observe = this._accounts.getAll(this.model.recipients.filter(r => r.originId === recipient.id).map(e => e.userId)).pipe(tap(us => {
+          const duration = this._duration(moment(escalations[0].time).diff(recipient.received, 's'));
+          tooltip.substituting = this._translate.get('EscalatedTo',
+            this._translate.join(us.map(u =>
+              u.name)), duration);
+        }));
+        observables.push(observe);
+      }
+      else if (!node.estimate) {
+        const time = this._fromNow(recipient.received);
+        if (this._session.profile.byId)
+          tooltip.note = this._translate.personalize('ReceivedBy', this._session.profile.gender, this._session.profile.name, time);
+        else
+          tooltip.note = this._translate.get('YouReceived', time);
+      }
+    }
+    else {
+      const who = this._accounts.get(recipient.userId);
+
+      const profiles = [who];
+
+      if (recipient.byId) {
+        const by = this._accounts.get(recipient.byId);
+        profiles.push(by);
+      }
+      else if (escalations.length)
+        this.model.recipients.filter(r => r.originId === recipient.id).
+          forEach(e => profiles.push(this._accounts.get(e.userId)));
+
+      const observe = forkJoin(profiles).pipe(tap(us => {
+        const [who, by] = us;
+        annotation = who.name;
+        if (who.role) tooltip.role = `- ${who.role}`;
+        if (escalations.length) {
+          const duration = this._duration(moment(escalations[0].time).diff(recipient.received, 's'));
+          tooltip.substituting = this._translate.get('EscalatedTo', this._translate.join(us.slice(1).map(u => u.name)), duration);
+        }
+        else if (recipient.replied) {
+          if (by) {
+            const past = this._actionName(recipient.action, by.gender),
+              time = this._fromNow(recipient.replied);
+            tooltip.note = this._translate.get('ActionTakenBy', by.name, past, time);
+          }
+          else {
+            const past = this._actionName(recipient.action, who.gender),
+              time = this._fromNow(recipient.replied);
+            tooltip.note = this._translate.get('ActionTaken', who.name, past, time);
+          }
+        }
+        else if (recipient.pending && !recipient.estimate) {
+          const time = this._fromNow(recipient.received);
+          tooltip.note = this._translate.personalize('ReceivedTime', who.gender, time);
+        }
+      }));
+      observables.push(observe);
+    }
+    if (recipient.substitutingId && recipient.estimate) {
+      if (recipient.substitutingId === this._session.profile.byId)
+        tooltip.substituting = this._translate.personalize('SubstitutingYou', this._session.profile.gender);
+      else {
+        const observe = this._accounts.get(recipient.substitutingId).pipe(tap(u =>
+          tooltip.substituting = this._translate.personalize('SubstitutingFor', u.gender, u.name)
+        ));
+        observables.push(observe);
+      }
+    }
+    if (recipient.replied) {
+      const duration = moment(recipient.replied).diff(recipient.received, 's');
+      tooltip.duration = this._translate.get('DurationTime', this._duration(duration));
+    }
+    else if (recipient.pending && !recipient.estimate)
+      tooltip.estimatedTime = this._timeEstimate(node);
+    else if (node.standardTime)
+      tooltip.standardTime = this._translate.get('NodeStandardTime', this._duration(node.standardTime));
+    return (observables.length ? forkJoin(observables) : of([])).toPromise().then(() => {
+      if (!tooltip.role && recipient.role) {
+        const crole = this._session.profile.roles.find(o => o.name === recipient.role);
+        tooltip.role = `- ${crole ? crole.title : recipient.role}`;
+      }
+      return { annotation, tooltip };
+    });
+  }
+  private _actionName(name: string, gender?: Gender | 'you') {
+    const action = this._session.profile.actions.find(a => a.name === name);
+    if (!action) return name;
+    if (gender === 'you') {
+      const gender = this._session.profile.byGender || this._session.profile.gender;
+      return (gender === 'Male' ? (action.youMale || action.you) :
+        gender === 'Female' ? (action.youFemale || action.you) :
+          action.you) ||
+        action.past ||
+        action.title;
+    }
+    const past = ((gender === 'Male' ? (action.pastMale || action.past) : gender === 'Female' ? (action.pastFemale || action.past) : action.past) || action.title).toLowerCase();
+    return past;
+  }
+
+  private _fromNow(date: Date) {
+    return moment(date).fromNow();
+  }
+
+  private _duration(time: number) {
+    return moment.duration(time, 's').humanize();
+  }
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+    this.diagram && this.diagram.destroy();
+  }
+}
+interface ConnectorInfoModel {
+  estimate: boolean;
+}
+interface NodeInfoModel {
+  estimate: boolean;
+  pending: boolean;
+  standardTime: number;
+  type: string;
+  tooltip: NodeTooltipModel;
+  node: NodeInfo;
+  indicator?: boolean;
+  parentId?: string;
+}
+interface NodeTooltipModel {
+  error?: string;
+  note?: string;
+  role?: string;
+  substituting?: string;
+  standardTime?: string;
+  duration?: string;
+  estimatedTime?: string;
+}

package/src/lib/compose/trace/people.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
+import { AccountService } from "../../core/account.service";
+import { DocumentModel, RecipientModel, UserInfo } from "../../core/models";
+import { SessionService } from "../../core/session.service";
+
+/** component */
+@Component({
+  selector: 'bizdoc-people',
+  template: `<bizdoc-avatar *ngFor="let p of people" [person]="p"></bizdoc-avatar>`
+})
+export class PeopleComponent implements OnChanges {
+  @Input() model!: DocumentModel<any> | RecipientModel<any>;
+  people: UserInfo[];
+  private readonly _userIds: string[] = [];
+  private readonly _me: string;
+  constructor(
+    private _accounts: AccountService,
+    session: SessionService
+  ) {
+    this._me = session.profile.byId || session.profile.userId;
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this._push(this.model.ownerId, this.model.ownerById, (this.model as RecipientModel).senderId);
+    this.model.recipients.reverse().forEach(r =>
+      this._push(r.userId, r.byId, r.substitutingId));
+    this._accounts.getAll(this._userIds).subscribe(us =>
+      this.people = us);
+  }
+  private _push(...userId: string[]) {
+    userId.forEach(u => u && this._userIds.indexOf(u) < 0 && u !== this._me && this._userIds.push(u));
+  }
+}