@bizdoc/core 1.14.9 → 1.14.10

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

@@ -1,747 +0,0 @@
-import { Component, Input, ElementRef, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
-import { NodeModel, ConnectorModel, LayoutModel, DiagramTools, Diagram, DiagramConstraints, ComplexHierarchicalTree, ComplexHierarchicalTreeService, ConnectorBridging, BpmnDiagrams, DataBinding, ScrollSettingsModel, SnapSettingsModel, Segments, LineRouting, TreeInfo, IMouseEventArgs, LineDistribution, ConnectionPointOrigin, SnapConstraints, NodeConstraints, ChildArrangement } from '@syncfusion/ej2-angular-diagrams';
-import { interval } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import dayjs from 'dayjs';
-import { DocumentModel, Recipient, NodeInfo, Gender, FlowNode, UserInfo, State } from "../../core/models";
-import { getWarn } from '../../core/functions';
-import { TraceBase, You, 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 { DurationFormatPipe } from '../../core/pipes/duration-format.pipe';
-
-const
-  //ELLIPSIS = 'M 650, 150 a 75,150 0 1,0 1,0 z',
-  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';
-
-@Component({
-  selector: 'bizdoc-flow',
-  template: '',
-  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 = 'Orthogonal';
-  diagram: Diagram;
-  readonly tool: DiagramTools = DiagramTools.ZoomPan;
-  readonly diagramConstraints: DiagramConstraints =
-    DiagramConstraints.Default |
-    DiagramConstraints.Pan |
-    DiagramConstraints.LineRouting |
-    DiagramConstraints.Zoom;
-  public readonly layout = {
-    type: 'ComplexHierarchicalTree',
-    connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
-    horizontalSpacing: 50,
-    enableRouting: true,
-    verticalSpacing: 50,
-    //connectionDirection: 'Orientation',
-    orientation: this._session.inverse ? 'RightToLeft' : 'LeftToRight',
-  } as LayoutModel;
-
-  readonly scrollSettings = {
-    minZoom: .5,
-    scrollLimit: 'Diagram',
-    canAutoScroll: true,
-    currentZoom: 1.2,
-    padding: { top: 0, bottom: 0 },
-    autoScrollBorder: { top: 0, bottom: 0 },
-    maxZoom: 2.5
-  } as ScrollSettingsModel;
-
-  readonly snapSettings = {
-    constraints: SnapConstraints.None,
-    gridType: 'Dots'
-  } as SnapSettingsModel;
-  private readonly _configuration: { [name: string]: FlowNode } = {};
-  private _accentColor = this._session.getAccent();
-  /** workflow-view ctor */
-  constructor(private _accounts: AccountService, private _session: SessionService, private _translate: TranslateService,
-    private _duration: DurationFormatPipe,
-    private _elementRef: ElementRef<HTMLDivElement>,
-    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._initialize();
-  }
-  private async _initialize() {
-    const { connectors, nodes, indicators } = await this._prepare();
-    this.diagram && this.diagram.destroy();
-    this.diagram = new Diagram({
-      width: '100%',
-      height: 380,
-      nodes,
-      connectors,
-      layout: this.layout,
-      tool: this.tool,
-      backgroundColor: 'transparent',
-      scrollSettings: this.scrollSettings,
-      snapSettings: this.snapSettings,
-      constraints: this.diagramConstraints,
-      getConnectorDefaults: this.connDefaults.bind(this),
-      getNodeDefaults: this.nodeDefaults.bind(this),
-    }, this._elementRef.nativeElement);
-    this.diagram.doLayout();
-    indicators.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);
-    });
-    this.diagram.fitToPage();
-    interval(60000).pipe(takeUntil(this._destroy)).subscribe(
-      this._refresh.bind(this)
-    );
-  }
-  private _refresh() {
-    super.resetEstimateTime();
-    this.diagram.nodes.forEach(n => {
-      const { node, recipient } = n.addInfo as NodeInfoModel;
-      if (recipient) {
-        if (!recipient.replied && recipient.pending) {
-          if (recipient.estimate) (n.addInfo as NodeInfoModel).tooltip.estimatedTime = this._timeEstimate(node);
-          else if (node.standardTime) {
-            const diff = node.standardTime - dayjs().diff(node.time, 's');
-            if (diff > 0)
-              (n.addInfo as NodeInfoModel).tooltip.estimatedTime = this._translate.get('EstimateTime', this._duration.transform(diff));
-          }
-          n.tooltip.content = this._tooltip((n.addInfo as NodeInfoModel).tooltip);
-        }
-      }
-      else
-        if (node && node.estimate)
-          (n.addInfo as NodeInfoModel).tooltip.estimatedTime = this._timeEstimate(node),
-            n.tooltip.content = this._tooltip((n.addInfo as NodeInfoModel).tooltip);
-    });
-  }
-  /**
-   * 
-   * @param obj
-   */
-  public nodeDefaults(obj: NodeModel): NodeModel {
-    const { recipient, node, indicator } = obj.addInfo as NodeInfoModel;
-
-    if (indicator) {
-      obj.width = obj.height = 15;
-      obj.style.strokeWidth = 0;
-    }
-    else {
-      obj.width = obj.height = 50;
-      if (obj.annotations && obj.annotations.length) obj.annotations[0].style.color = this._session.theme.dark ? 'white' : 'black';
-      if (node && node.estimate) {
-        obj.style.strokeColor = this._session.theme.dark ? 'white' : 'black';
-        obj.style.opacity = obj.annotations[0].style.opacity = .6;
-        obj.style.fill = 'transparent';
-      }
-      else {
-        obj.style.strokeColor = this._accentColor;
-        obj.style.fill = recipient && recipient.pending ?
-          this._session.getAccent(recipient.userId === this._session.userId ? 500 : 400) : 'transparent';
-      }
-      obj.style.strokeWidth = 2;
-    }
-    return obj;
-  }
-  /**
-   * 
-   * @param connector
-   */
-  public connDefaults(connector: ConnectorModel) {
-    connector.type = this.connectorType;
-    connector.cornerRadius = 6;
-    connector.targetDecorator.height = 7;
-    connector.targetDecorator.width = 7;
-    if ((connector.addInfo as ConnectorInfoModel).estimate) {
-      connector.style.strokeDashArray = '2 2';
-      connector.style.strokeColor =
-        connector.targetDecorator.style.fill =
-        connector.targetDecorator.style.strokeColor =
-        this._session.theme.dark ? 'white' : 'black';
-      connector.style.strokeWidth = 1;
-    }
-    else {
-      connector.style.strokeColor = connector.targetDecorator.style.strokeColor = connector.targetDecorator.style.fill = this._accentColor;
-      connector.style.strokeWidth = 2;
-    }
-    connector.targetDecorator.shape = 'None';
-  }
-  /** */
-  private async _prepare(): Promise<{ nodes: NodeModel[]; connectors: ConnectorModel[]; indicators: NodeModel[] }> {
-    const { connectors: dconnectors, nodes: dnodes } = this.model.workflow;
-    const indicators: NodeModel[] = [], connectors: ConnectorModel[] = [], nodes: NodeModel[] = [];
-    let zIndex = 500;
-    for (let node of dnodes) {
-      if (nodes.find(n => n.id == node.id)) continue;
-      let configuration = this._configuration[node.type];
-      let recipients = this.model.recipients.
-        filter(r => r.nodeId === node.id &&
-          (!this.model.issued || r.received >= this.model.issued))
-        .sort((r0, r1) =>
-          r0.received > r1.received ? 1 : -1);
-      if (recipients.length) {
-        let r = 0;
-        do {
-          var recipient = recipients[r];
-          let exists = false;
-          // remove duplicate user recipient on same node
-          let j = 0;
-          while (j < r && !exists) {
-            if (recipients[j].userId === recipient.userId) exists = true;
-            else j++;
-          }
-          if (exists)
-            recipients.splice(recipient.estimate ? r : j, 1);
-          else r++;
-        } while (r < recipients.length);
-
-        for (r = 0; r < recipients.length; r++) {
-          let recipient = recipients[r];
-          const { annotation, tooltip } = await this._note(node, recipient);
-          const content = this._tooltip(tooltip);
-          const nod = {
-            id: r === 0 ? node.id : node.id + r.toString(),
-            shape: this._configuration[node.type].shape,
-            zIndex: zIndex++,
-            tooltip: {
-              content,
-              position: 'TopCenter'
-            },
-            constraints: content ?
-              NodeConstraints.Default | NodeConstraints.Tooltip :
-              NodeConstraints.Default,
-            addInfo: {
-              tooltip,
-              recipient,
-              node
-            } as NodeInfoModel,
-            annotations: [{
-              content: annotation,
-              margin: { top: 4 },
-              verticalAlignment: 'Top',
-              offset: {
-                y: 1,
-                x: .5
-              }
-            }]
-          } as NodeModel;
-          nodes.push(nod);
-          // add action indicator
-          if (recipient.action) {
-            const action = this._session.profile.actions.find(a => a.name === recipient.action);
-            if (action.shape && !recipient.pending) {
-              const actionIndicator = {
-                id: nod.id + 'action',
-                shape: {
-                  type: 'Path',
-                  data: action.shape,
-                  align: this._session.inverse ? 'XMinYMax' : 'XMaxYMax',
-                },
-                style: {
-                  fill: action.color || this._session.getAccent(900)
-                },
-                addInfo: {
-                  indicator: true,
-                  parentId: nod.id
-                } as NodeInfoModel
-              } as NodeModel;
-              indicators.push(actionIndicator);
-            }
-          }
-          // fyi indicator
-          if (recipient.fyi)
-            indicators.push({
-              id: nod.id + 'fyi',
-              shape: {
-                type: 'Path',
-                data: FYI_PATH,
-                align: this._session.inverse ? 'XMinYMax' : 'XMaxYMax'
-              },
-              style: {
-                fill: '#1976d2'
-              },
-              addInfo: {
-                indicator: true,
-                parentId: nod.id
-              } as NodeInfoModel
-            } as NodeModel
-            );
-          // escalate indicator
-          if (recipient.escalated) {
-            const escalateIndicator = {
-              id: nod.id + 'escalate',
-              shape: {
-                type: 'Path',
-                data: ESCALATED_PATH,
-                align: this._session.inverse ? 'XMinYMax' : 'XMaxYMax'
-              },
-              style: {
-                fill: this._session.getAccent(900)
-              },
-              addInfo: {
-                indicator: true,
-                parentId: nod.id
-              } as NodeInfoModel
-            } as NodeModel;
-            indicators.push(escalateIndicator);
-          }
-        }
-      }
-      else {
-        const { state, annotation, tooltip } = await this._shape(node);
-        const { shape } = configuration;
-        const content = this._tooltip(tooltip);
-        nodes.push({
-          id: node.id,
-          shape,//: {type: 'Path', data: ELLIPSIS },
-          zIndex: zIndex++,
-          tooltip: {
-            content,
-            position: 'TopCenter'
-          },
-          constraints: content ?
-            NodeConstraints.Default | NodeConstraints.Tooltip :
-            NodeConstraints.Default,
-          addInfo: {
-            tooltip,
-            node
-          } as NodeInfoModel,
-          annotations: [{
-            content: annotation,
-            offset: shape.type === 'Path' ? {
-              y: 1
-            } : { x: .5 },
-            style: {
-            },
-            verticalAlignment: shape.type === 'Path' ? 'Top' : 'Center'
-          }]
-        });
-        if (state && state.shape && !node.estimate)
-          indicators.push({
-            id: node.id + 'state',
-            shape: {
-              type: 'Path',
-              data: state.shape,
-              align: this._session.inverse ? 'XMaxYMax' : 'XMinYMax'
-            },
-            style: {
-              fill: state.color || 'black'
-            },
-            addInfo: {
-              indicator: true,
-              parentId: node.id,
-              node: node
-            } as NodeInfoModel
-          });
-        if (node.error) {
-          const warnningIndicator = {
-            id: node.id + 'exception',
-            shape: {
-              type: 'Path',
-              data: WARNNING_PATH,
-              align: this._session.inverse ? 'XMinYMax' : 'XMaxYMax'
-            },
-            style: {
-              fill: getWarn(800)
-            },
-            addInfo: {
-              indicator: true,
-              parentId: node.id
-            } as NodeInfoModel
-          } as NodeModel;
-          indicators.push(warnningIndicator);
-        }
-      }
-    }
-    // TODO
-    // longest path, remove short path connectors
-    function deepen(nodeId: string, depth = 0) {
-      nodes.filter(n => (n.addInfo as NodeInfoModel).node.id === nodeId).
-        forEach(n => {
-          const { depth: nodeDepth } = n.addInfo as NodeInfoModel;
-          if (nodeDepth) {
-            if (nodeDepth < depth) {
-              dconnectors.filter(c => c.targetId === nodeId &&
-                nodes.filter(n => (n.addInfo as NodeInfoModel).node.id === c.sourceId &&
-                  (n.addInfo as NodeInfoModel).depth === nodeDepth - 1).length).
-                forEach(c =>
-                  dconnectors.remove(c)
-                );
-              (n.addInfo as NodeInfoModel).depth = depth;
-            } else if (nodeDepth > depth)
-              dconnectors.filter(c => c.sourceId === nodeId).forEach(c => dconnectors.remove(c));
-          } else {
-            (n.addInfo as NodeInfoModel).depth = depth;
-            dconnectors.filter(c => c.sourceId === nodeId).forEach(c => 
-              deepen(c.targetId, depth + 1)
-            );
-          }
-        });
-    }
-    for (let connector of dconnectors) {
-      let sources = nodes.filter(n => (n.addInfo as NodeInfoModel).node.id === connector.sourceId),
-        targets = nodes.filter(n => (n.addInfo as NodeInfoModel).node.id === connector.targetId);
-      for (let source of sources)
-        for (let target of targets) {
-          connectors.push({
-            sourceID: source.id,
-            targetID: target.id,
-            addInfo: {
-              estimate: connector.estimate,
-              time: connector.time
-            } as ConnectorInfoModel
-          } as ConnectorModel);
-        }
-    }
-    return { connectors, nodes, indicators };
-  }
-  /**
-   * 
-   * @param node
-   */
-  private async _shape(node: NodeInfo): Promise<{ state: State; annotation: string; tooltip: NodeTooltipModel; }> {
-    const tooltip = {} as NodeTooltipModel;
-    if (node.error) tooltip.error = node.error;
-    let annotation: string, state: State;
-    const log = this.model.log.filter(l => l.nodeId === node.id && (!this.model.issued || l.time >= this.model.issued));
-    const stateLog = log.find(l => l.type === 'StateChange');
-    if (stateLog) {
-      state = this._session.profile.states.find(s => s.name === stateLog.state);
-
-      if (stateLog.duration) {
-        const duration = dayjs.duration(stateLog.duration, 's');
-        tooltip.duration = this._translate.get('DurationTime', this._duration.transform(duration));
-      }
-      annotation = (node.estimate ? state.future : state.past) || state.title;
-    }
-    if (node.type === START_NODE) {
-      if (!node.estimate) {
-        const { note, role } = await this._startNode();
-        tooltip.note = note,
-          tooltip.role = role;
-      }
-    }
-    else {
-      if (node.note)
-        annotation = node.note;
-      if (node.estimate)
-        tooltip.estimatedTime = this._timeEstimate(node);
-    }
-    return { state, tooltip, annotation };
-  }
-  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', dayjs.duration(max, 's').humanize()) :
-        this._translate.get('EstimateTimeRange', dayjs.duration(min, 's').humanize(), dayjs.duration(max, 's').humanize());
-  }
-  private _tooltip(obj: NodeTooltipModel) {
-    const { note, role, substituting, escalation, duration, standardTime, estimatedTime, error, fyi } = obj
-    const rows = [note, substituting, escalation, duration, fyi, role, error, standardTime, estimatedTime];
-    let div: HTMLDivElement;
-    rows.forEach(r => {
-      if (!r) return;
-      if (!div) div = document.createElement('div');
-      const span = document.createElement('span');
-      span.innerText = r;
-      div.append(span);
-      const br = document.createElement('br');
-      div.append(br);
-    });
-    return div;
-  }
-  private async _startNode(): Promise<{ note: string, role: string; }> {
-    let note: string, role: string;
-    const time = this._fromNow(this.model.issued);
-
-    if (this.model.ownerById) {
-      if (this.model.ownerById === this._session.userId) {
-        if (this.model.ownerId === this._session.profile.userId)
-          note = this._translate.personalize('YouSubmittedNoteBy',
-            this._session.profile.byGender,
-            this._session.profile.name, time);
-        else {
-          const who = await this._accounts.get(this.model.ownerId).toPromise();
-          note = this._translate.personalize('YouSubmittedNoteBy',
-            this._session.profile.byGender,
-            who.name, time);
-        }
-      }
-      else {
-        const by = await this._accounts.get(this.model.ownerById).toPromise();
-        if (this.model.ownerId === this._session.userId)
-          note = this._translate.personalize('SubmittedNoteYouBy', by.gender,
-            by.name,
-            time);
-        else if (this.model.ownerId === this._session.profile.userId) {
-          note = this._translate.personalize('SubmittedNoteBy', by.gender,
-            by.name,
-            this._session.profile.name,
-            time);
-        }
-        else {
-          const who = await this._accounts.get(this.model.ownerId).toPromise();
-          note =
-            this._translate.personalize('SubmittedNoteBy',
-              by.gender,
-              by.name,
-              who.name,
-              time);
-        }
-        if (by.role)
-          role = `- ${by.role}`;
-      }
-    }
-    else {
-      if (this.model.ownerId === this._session.userId) {
-        if (this._session.isImpersonating)
-          note = this._translate.personalize('SubmittedNote', this._session.profile.gender, this._session.profile.name, time);
-        else
-          note = this._translate.get('YouSubmittedNote', time);
-      }
-      else {
-        const who = await this._accounts.get(this.model.ownerId).toPromise();
-        note = this._translate.personalize('SubmittedNote', who.gender, who.name, time);
-        if (who.role)
-          role = `- ${who.role}`;
-      }
-    }
-
-    return { note, role };
-  }
-
-  private async _note(node: NodeInfo, recipient: Recipient): Promise<{ annotation: string; tooltip: NodeTooltipModel }> {
-    const tooltip: NodeTooltipModel = {};
-
-    let annotation: string;
-
-    // you
-    if (recipient.userId === this._session.userId) {
-      if (this._session.isImpersonating)
-        annotation = this._session.profile.name;
-      else
-        annotation = this._translate.get('You');
-      if (recipient.role) {
-        const role = this._session.profile.roles.find(o => o.name === recipient.role);
-        if (role) tooltip.role = `- ${role.title}`;
-      }
-    }
-    else
-    // someone else
-    {
-      const who = await this._accounts.get(recipient.userId).toPromise();
-      annotation = who.name;
-      if (who.role) tooltip.role = `- ${who.role}`;
-      else if (recipient.role) {
-        const role = this._session.profile.roles.find(o => o.name === recipient.role);
-        if (role) tooltip.role = `- ${role.title}`;
-      }
-    }
-    if (recipient.replied) {
-      const time = this._fromNow(recipient.replied);
-      const targets = this.model.recipients.filter(r => r.originId === recipient.id), to = [] as string[];
-      if (targets.length) for (let sibling of targets) {
-        const who = await this._accounts.get(sibling.userId).toPromise();
-        to.push(who.name);
-      }
-      if (recipient.byId) {
-        if (recipient.byId === this._session.profile.byId) {
-          const action = this._action(recipient.action, this._session.profile.byGender);
-          if (to.length) {
-            if (recipient.userId === this._session.profile.userId)
-              tooltip.note = this._translate.get('ActionTakenByYouTo', action,
-                this._translate.join(to), this._session.profile.name, time);
-            else {
-              const who = await this._accounts.get(recipient.userId).toPromise();
-              tooltip.note = this._translate.get('ActionTakenByYouTo', action,
-                this._translate.join(to), who.name, time);
-            }
-          }
-          else if (recipient.userId === this._session.profile.userId)
-            tooltip.note = this._translate.get('ActionTakenByYou', action, this._session.profile.name, time);
-          else {
-            const who = await this._accounts.get(recipient.userId).toPromise();
-            tooltip.note = this._translate.get('ActionTakenByYou', action, who.name, time);
-          }
-        }
-        else {
-          const by = await this._accounts.get(recipient.byId).toPromise()
-          const action = this._action(recipient.action, by.gender);
-          if (recipient.userId === this._session.profile.userId) {
-            if (to.length) {
-              tooltip.note = this._translate.get('YouTakenActionByTo', by.name, action, this._translate.join(to), time);
-            }
-            else
-              tooltip.note = this._translate.get('YouTakenActionBy', by.name, action, time);
-          }
-          else {
-            const who = await this._accounts.get(recipient.userId).toPromise();
-            if (to.length) {
-              tooltip.note = this._translate.get('ActionTakenByTo', by.name, action, this._translate.join(to), who.name, time);
-            }
-            else
-              tooltip.note = this._translate.get('ActionTakenBy', by.name, action, who.name, time);
-          }
-        }
-      }
-      else if (to.length) {
-        if (recipient.userId === this._session.profile.userId) {
-          const action = this._action(recipient.action, this._session.profile.gender);
-          if (this._session.isImpersonating)
-            tooltip.note = this._translate.get('ActionTakenTo', this._session.profile.name, action, this._translate.join(to), time);
-          else
-            tooltip.note = this._translate.get('YouTakenActionTo', action, this._translate.join(to), time);
-        }
-        else {
-          const who = await this._accounts.get(recipient.userId).toPromise();
-          const action = this._action(recipient.action, who.gender);
-          tooltip.note = this._translate.get('ActionTakenTo', who.name, action, this._translate.join(to));
-        }
-      }
-      else if (this._session.isImpersonating) {
-        const action = this._action(recipient.action, this._session.profile.gender);
-        tooltip.note = this._translate.get('ActionTaken', this._session.profile.name, action, time);
-      }
-      else if (recipient.userId === this._session.profile.userId) {
-        const action = this._action(recipient.action, You);
-        tooltip.note = this._translate.get('YouTakenAction', action, time);
-      }
-      else {
-        const who = await this._accounts.get(recipient.userId).toPromise();
-        const action = this._action(recipient.action, who.gender);
-        tooltip.note = this._translate.get('ActionTaken', who.name, action, time);
-      }
-    }
-    else if (!recipient.estimate) {
-      const time = this._fromNow(recipient.received);
-      if (recipient.userId === this._session.userId) {
-        if (this._session.isImpersonating)
-          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 = await this._accounts.get(recipient.userId).toPromise();
-        tooltip.note = this._translate.personalize('ReceivedTime', who.gender, time);
-      }
-    }
-    if (recipient.substituteId) {
-      if (recipient.substituteId === this._session.userId)
-        tooltip.substituting = this._translate.personalize('SubstitutingYou', this._session.gender);
-      else {
-        const substituting = await this._accounts.get(recipient.substituteId).toPromise();
-        tooltip.substituting = this._translate.personalize('SubstitutingFor', substituting.gender, substituting.name);
-      }
-    }
-    if (recipient.originId && !recipient.replied) {
-      const origin = this.model.recipients.find(r => r.id === recipient.originId);
-      const action = this._session.profile.actions.find(a => a.name === origin.action),
-        adjective = action.adjective || action.past || action.title;
-      if ((origin.byId || origin.userId) === this._session.userId)
-        tooltip.substituting = this._translate.get('ActionByYou', adjective);
-      else if (origin.byId) {
-        const who = await this._accounts.get(origin.userId).toPromise();
-        const by = await this._accounts.get(origin.byId).toPromise();
-        tooltip.substituting = this._translate.get('ActionByBy', adjective, by.name, who.name);
-      }
-      else {
-        const who = await this._accounts.get(origin.userId).toPromise();
-        tooltip.substituting = this._translate.get('ActionBy', adjective, who.name);
-      }
-    }
-    if (recipient.escalated) {
-      const escalation = this.model.log.find(l => l.type === 'Escalation' && l.recipientId === recipient.originId);
-      const who = await this._accounts.get(escalation.userId).toPromise();
-      const duration = this._duration.transform(dayjs.duration(escalation.duration, 's'));
-      tooltip.escalation = this._translate.get('EscalatedFrom', who.name, duration);
-    }
-    if (recipient.replied) {
-      const duration = dayjs(recipient.replied).diff(recipient.received, 's');
-      tooltip.duration = this._translate.get('DurationTime', this._duration.transform(duration));
-    }
-    else if (recipient.pending) {
-      if (recipient.estimate) tooltip.estimatedTime = this._timeEstimate(node);
-      else if (node.standardTime) {
-        const diff = node.standardTime - dayjs().diff(node.time, 's');
-        if (diff > 0)
-          tooltip.estimatedTime = this._translate.get('EstimateTime', this._duration.transform(diff));
-      }
-    }
-    else if (node.standardTime)
-      tooltip.standardTime = this._translate.get('NodeStandardTime', this._duration.transform(node.standardTime));
-    if (recipient.fyi)
-      tooltip.fyi = this._translate.get('FYI');
-    return { annotation, tooltip };
-  }
-  private _action(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.gender, personal =
-        (gender === 'Male' ? (action.youMale || action.you) :
-          gender === 'Female' ? (action.youFemale || action.you) :
-            action.you);
-      return (personal ||
-        action.past ||
-        action.title).toLowerCase();
-    }
-    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 dayjs(date).fromNow();
-  }
-  ngOnDestroy(): void {
-    super.ngOnDestroy();
-    this.diagram && this.diagram.destroy();
-  }
-}
-interface ConnectorInfoModel {
-  estimate?: boolean;
-  parentId: string;
-  time: Date
-}
-interface NodeInfoModel {
-  tooltip: NodeTooltipModel;
-  node: NodeInfo;
-  depth?: number;
-  recipient: Recipient
-  indicator?: boolean;
-  parentId?: string;
-}
-interface NodeTooltipModel {
-  fyi?: string;
-  error?: string;
-  note?: string;
-  role?: string;
-  from?: string;
-  substituting?: string;
-  escalation?: string;
-  standardTime?: string;
-  duration?: string;
-  estimatedTime?: string;
-}