@aj-shadow/z-abs-complayer-visualizationsequencediagram-client 0.0.0-aj-beta.221

package/project/client/templates/template-seq-dia-server-started.js

@@ -0,0 +1,49 @@
+
+'use strict';
+
+import Const from '../logic/const';
+import DataSeqDiaServerStarted from '../data/data-seq-dia-server-started';
+import FilterSize from '../logic/filter-size';
+import TemplateSeqDiaProtocolBase from './template-seq-dia-protocol-base';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateSeqDiaServerStarted extends TemplateSeqDiaProtocolBase {
+  constructor() {
+    super(DataSeqDiaServerStarted, 'seq_dia_server_started', Const.STATE_EVENT_HEIGHT);
+    this.fragment = null;
+  }
+  
+  onExit() {
+    this.fragment = null;
+  }
+  
+  onInit(filter, pooledBuffers, stackStyles) {
+    const startArrow = document.createElementNS(InnerConst.SVG_NS, 'polygon');
+    startArrow.classList.add('seq_dia_arrow');
+    const arrowWidth = 4;
+    const startArrowX1 = FilterSize.eventWidthHalf - arrowWidth;
+    const startArrowX2 = FilterSize.eventWidthHalf + arrowWidth;
+    const startArrowY1 = Const.STATE_EVENT_HALF_HEIGHT - arrowWidth;
+    const startArrowY2 = Const.STATE_EVENT_HALF_HEIGHT;
+    const startArrowY3 = Const.STATE_EVENT_HALF_HEIGHT + arrowWidth;
+    startArrow.setAttribute('points', `${startArrowX1},${startArrowY1} ${startArrowX1},${startArrowY3} ${startArrowX2},${startArrowY2}`);
+    
+    this.fragment = document.createElementNS(InnerConst.SVG_NS, 'g');
+    this.fragment.appendChild(startArrow);
+  }
+  
+  onInitSvgFragment(protocolKey) {
+    const fragment = this.fragment.cloneNode(true);
+    fragment.lastChild.classList.add(`seq_dia_protocol_${protocolKey}_small`);
+    return [null, null, fragment, null, null];
+  }
+    
+  calculateHeight(bufferData) {
+    const phaseId = DataSeqDiaServerStarted.restoreHeightData(bufferData);
+    return this.filter.getServerEvents(phaseId) ? this.height : 0;
+  }
+}
+
+
+module.exports = TemplateSeqDiaServerStarted;

package/project/client/templates/template-seq-dia-server-starting.js

@@ -0,0 +1,49 @@
+
+'use strict';
+
+import Const from '../logic/const';
+import DataSeqDiaServerStarting from '../data/data-seq-dia-server-starting';
+import FilterSize from '../logic/filter-size';
+import TemplateSeqDiaProtocolBase from './template-seq-dia-protocol-base';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateSeqDiaServerStarting extends TemplateSeqDiaProtocolBase {
+  constructor() {
+    super(DataSeqDiaServerStarting, 'seq_dia_server_starting', Const.STATE_EVENT_HEIGHT);
+    this.fragment = null;
+  }
+  
+  onExit() {
+    this.fragment = null;
+  }
+  
+  onInit(filter, pooledBuffers, stackStyles) {
+    const startArrow = document.createElementNS(InnerConst.SVG_NS, 'polygon');
+    startArrow.classList.add('seq_dia_arrow');
+    const arrowWidth = 3;
+    const startArrowX1 = FilterSize.eventWidthHalf - arrowWidth;
+    const startArrowX2 = FilterSize.eventWidthHalf + arrowWidth;
+    const startArrowY1 = Const.STATE_EVENT_HALF_HEIGHT - arrowWidth;
+    const startArrowY2 = Const.STATE_EVENT_HALF_HEIGHT;
+    const startArrowY3 = Const.STATE_EVENT_HALF_HEIGHT + arrowWidth;
+    startArrow.setAttribute('points', `${startArrowX1},${startArrowY1} ${startArrowX1},${startArrowY3} ${startArrowX2},${startArrowY2}`);
+    
+    this.fragment = document.createElementNS(InnerConst.SVG_NS, 'g');
+    this.fragment.appendChild(startArrow);
+  }
+  
+  onInitSvgFragment(protocolKey) {
+    const fragment = this.fragment.cloneNode(true);
+    fragment.lastChild.classList.add(`seq_dia_protocol_${protocolKey}_small`);
+    return [null, null, fragment, null, null];
+  }
+    
+  calculateHeight(bufferData) {
+    const phaseId = DataSeqDiaServerStarting.restoreHeightData(bufferData);
+    return this.filter.getServerEvents(phaseId) ? this.height : 0;
+  }
+}
+
+
+module.exports = TemplateSeqDiaServerStarting;

package/project/client/templates/template-seq-dia-server-stopped.js

@@ -0,0 +1,45 @@
+
+'use strict';
+
+import Const from '../logic/const';
+import DataSeqDiaServerStopped from '../data/data-seq-dia-server-stopped';
+import FilterSize from '../logic/filter-size';
+import TemplateSeqDiaProtocolBase from './template-seq-dia-protocol-base';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateSeqDiaServerStopped extends TemplateSeqDiaProtocolBase {
+  constructor() {
+    super(DataSeqDiaServerStopped, 'seq_dia_server_stopped', Const.STATE_EVENT_HEIGHT);
+    this.fragment = null;
+  }
+  
+  onExit() {
+    this.fragment = null;
+  }
+    
+  onInit(filter, pooledBuffers, stackStyles) {
+    const startRect = document.createElementNS(InnerConst.SVG_NS, 'rect');
+    startRect.setAttribute('y', Const.STATE_EVENT_HALF_HEIGHT - 4);
+    startRect.setAttribute('height', 8);
+    startRect.setAttribute('x', FilterSize.eventWidthHalf - 4);
+    startRect.setAttribute('width', 8);
+    
+    this.fragment = document.createElementNS(InnerConst.SVG_NS, 'g');
+    this.fragment.appendChild(startRect);
+  }
+  
+  onInitSvgFragment(protocolKey) {
+    const fragment = this.fragment.cloneNode(true);
+    fragment.lastChild.classList.add(`seq_dia_protocol_${protocolKey}_small`);
+    return [null, null, fragment, null, null];
+  }
+    
+  calculateHeight(bufferData) {
+    const phaseId = DataSeqDiaServerStopped.restoreHeightData(bufferData);
+    return this.filter.getServerEvents(phaseId) ? this.height : 0;
+  }
+}
+
+
+module.exports = TemplateSeqDiaServerStopped;

package/project/client/templates/template-seq-dia-server-stopping.js

@@ -0,0 +1,45 @@
+
+'use strict';
+
+import Const from '../logic/const';
+import DataSeqDiaServerStopping from '../data/data-seq-dia-server-stopping';
+import FilterSize from '../logic/filter-size';
+import TemplateSeqDiaProtocolBase from './template-seq-dia-protocol-base';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateSeqDiaServerStopping extends TemplateSeqDiaProtocolBase {
+  constructor() {
+    super(DataSeqDiaServerStopping, 'seq_dia_server_stopping', Const.STATE_EVENT_HEIGHT);
+    this.fragment = null;
+  }
+  
+  onExit() {
+    this.fragment = null;
+  }
+  
+  onInit(filter, pooledBuffers, stackStyles) {
+    const startRect = document.createElementNS(InnerConst.SVG_NS, 'rect');
+    startRect.setAttribute('y', Const.STATE_EVENT_HALF_HEIGHT - 3);
+    startRect.setAttribute('height', 6);
+    startRect.setAttribute('x', FilterSize.eventWidthHalf - 3);
+    startRect.setAttribute('width', 6);
+    
+    this.fragment = document.createElementNS(InnerConst.SVG_NS, 'g');
+    this.fragment.appendChild(startRect);
+  }
+  
+  onInitSvgFragment(protocolKey) {
+    const fragment = this.fragment.cloneNode(true);
+    fragment.lastChild.classList.add(`seq_dia_protocol_${protocolKey}_small`);
+    return [null, null, fragment, null, null];
+  }
+    
+  calculateHeight(bufferData) {
+    const phaseId = DataSeqDiaServerStopping.restoreHeightData(bufferData);
+    return this.filter.getServerEvents(phaseId) ? this.height : 0;
+  }
+}
+
+
+module.exports = TemplateSeqDiaServerStopping;

package/project/client/templates/template-seq-dia-stack.js

@@ -0,0 +1,195 @@
+
+'use strict';
+
+import Const from '../logic/const';
+import ComponentSeqDiaEventInfo from './components/component-seq-dia-event-info';
+import ComponentSeqDiaEventRow from './components/component-seq-dia-event-row';
+import DataSeqDiaStack from '../data/data-seq-dia-stack';
+import FilterSize from '../logic/filter-size';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+import LogDataStackType from 'z-abs-funclayer-engine-cs/clientServer/log/log-data-stack-type';
+
+
+class TemplateSeqDiaStack {
+  constructor() {
+    this.filter = null;
+    this.stackTemplates = null;
+    this.eventInfoIds = null;
+    this.componentSeqDiaEventInfo = new ComponentSeqDiaEventInfo();
+  }
+  
+  exit() {
+    DataSeqDiaStack.exit();
+    this.filter = null;
+    this.stackTemplates = null;
+    this.eventInfoIds = null;
+    this.componentSeqDiaEventInfo.exit();
+  }
+  
+  init(filter, pooledBuffers, stackStyles) {
+    this.componentSeqDiaEventInfo.init(stackStyles);
+    this.filter = filter;
+    DataSeqDiaStack.init(pooledBuffers);
+    
+    this.stackTemplates = new Array(5);
+    for(let i = 0; i < 5; ++i) {
+      this.stackTemplates[i] = new Array(stackStyles.size);
+    }
+    stackStyles.forEach((protocol, protocolKey) => {
+      this.stackTemplates[0][protocol.index] = this._new(protocolKey);
+      this.stackTemplates[1][protocol.index] = this._shared(protocolKey);
+      this.stackTemplates[2][protocol.index] = this._use(protocolKey);
+      this.stackTemplates[3][protocol.index] = this._store(protocolKey);
+      this.stackTemplates[4][protocol.index] = this._del(protocolKey);
+    });
+    this.eventInfoIds = new Array(LogDataStackType.results.length);
+    LogDataStackType.results.forEach((result, index) => {
+      const leftRow = this.componentSeqDiaEventInfo.createLeftRowDiv('seq_dia__data_stack');
+      this.componentSeqDiaEventInfo.createLeftInfoDiv(leftRow, 'instance', 'seq_dia__data_stack_instance', false);
+      this.componentSeqDiaEventInfo.createLeftInfoDiv(leftRow, '${prot}', 'seq_dia__data_stack_protocol', true);
+      const rightRow = this.componentSeqDiaEventInfo.createRightRowDiv('seq_dia__data_stack');
+      this.componentSeqDiaEventInfo.createRightInfoDiv(rightRow, 'instance', 'seq_dia__data_stack_instance', false);
+      this.componentSeqDiaEventInfo.createRightInfoDiv(rightRow, '${prot}', 'seq_dia__data_stack_protocol', true);
+      this.eventInfoIds[index] = this.componentSeqDiaEventInfo.createTemplate(leftRow, rightRow);
+    });
+  }
+  
+  calculateHeight(bufferData) {
+    const phaseId = DataSeqDiaStack.restoreHeightData(bufferData);
+    return this.filter.getStackEvents(phaseId) ? Const.STATE_EVENT_HEIGHT : 0;
+  }
+  
+  store(msg, sharedTemplateData) {
+    return DataSeqDiaStack.store(msg, sharedTemplateData);
+  }
+  
+  restore(bufferData) {
+    return DataSeqDiaStack.restore(bufferData);
+  }
+  
+  createElement(data) {
+    const node = ComponentSeqDiaEventRow.cloneRow('seq_dia_stack');
+    node.firstChild.appendChild(ComponentSeqDiaEventRow.cloneColumnLeft(data.phaseId));
+    for(let i = 0; i < data.nbrOfActors; ++i) {
+      const divNodeMiddle = node.firstChild.appendChild(ComponentSeqDiaEventRow.cloneColumnMiddle(i, data.phaseId));
+      if(data.actorIndex === i) {
+        const svg = divNodeMiddle.appendChild(ComponentSeqDiaEventRow.cloneSvg(Const.STATE_EVENT_HEIGHT, Const.RENDER_POSITION_NORMAL));
+        svg.appendChild(this.stackTemplates[data.type][data.protocolIndex].cloneNode(true));
+        if(data.actorIndex <= data.firstSutIndex) {
+          divNodeMiddle.appendChild(this.componentSeqDiaEventInfo.clone(this.eventInfoIds[data.type], Const.PART_LEFT, data.protocolIndex, data.renderPosition));
+        }
+        else {
+          divNodeMiddle.appendChild(this.componentSeqDiaEventInfo.clone(this.eventInfoIds[data.type], Const.PART_RIGHT, data.protocolIndex, data.renderPosition));
+        }
+      }
+    }
+    node.firstChild.appendChild(ComponentSeqDiaEventRow.cloneColumnRight(data.nbrOfActors, data.phaseId));
+    return node;
+  }
+  
+  setElementData(data, node) {
+    node.firstChild.childNodes[data.actorIndex + 1].lastChild.firstChild.firstChild.firstChild.nodeValue = data.stackData;
+  }
+  
+  removeElement(data, node) {}
+  
+  _rectBackground() {
+    const bgRect = document.createElementNS(InnerConst.SVG_NS, 'rect');
+    bgRect.classList.add('stack_seq_dia_bg');
+    bgRect.setAttribute('x', FilterSize.eventWidthHalf - 6);
+    bgRect.setAttribute('width', 12);
+    bgRect.setAttribute('y', 1);
+    bgRect.setAttribute('height', 8);
+    return bgRect;
+  }
+  
+  _rect(g, protocolKey, x) {
+    const connLeftRect = g.appendChild(document.createElementNS(InnerConst.SVG_NS, 'rect'));
+    connLeftRect.classList.add('stack_seq_dia_conn', `seq_dia_protocol_${protocolKey}_small`);
+    connLeftRect.setAttribute('x', FilterSize.eventWidthHalf + x);
+    connLeftRect.setAttribute('width', 3);
+    connLeftRect.setAttribute('y', 3.5);
+    connLeftRect.setAttribute('height', 3);
+  }
+  
+  _cross(g, protocolKey, x) {
+    const connLine1 = g.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    connLine1.classList.add('stack_seq_dia_conn');
+    connLine1.setAttribute('x1', FilterSize.eventWidthHalf + x);
+    connLine1.setAttribute('x2', FilterSize.eventWidthHalf + x + 3);
+    connLine1.setAttribute('y1', 3.5);
+    connLine1.setAttribute('y2', 6.5);
+    
+    const connLine2 = g.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    connLine2.classList.add('stack_seq_dia_conn');
+    connLine2.setAttribute('x1', FilterSize.eventWidthHalf + x);
+    connLine2.setAttribute('x2', FilterSize.eventWidthHalf + x + 3);
+    connLine2.setAttribute('y1', 6.5);
+    connLine2.setAttribute('y2', 3.5);
+    
+    const circle1 = g.appendChild(document.createElementNS(InnerConst.SVG_NS, 'circle'));
+    circle1.classList.add('stack_seq_dia_conn', `seq_dia_protocol_${protocolKey}_small`);
+    circle1.setAttribute('cx', FilterSize.eventWidthHalf + x + 1.5);
+    circle1.setAttribute('cy', 5);
+    circle1.setAttribute('r', 0.5);
+  }
+  
+  _new(protocolKey) {
+    const g = document.createElementNS(InnerConst.SVG_NS, 'g');
+    g.appendChild(this._rectBackground());
+    const connLine = g.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    connLine.classList.add('stack_seq_dia_conn');
+    connLine.setAttribute('x1', FilterSize.eventWidthHalf - 3.5);
+    connLine.setAttribute('x2', FilterSize.eventWidthHalf + 1);
+    connLine.setAttribute('y1', 5);
+    connLine.setAttribute('y2', 5);
+    this._rect(g, protocolKey, -4.5);
+    return g;
+  }
+  
+  _shared(protocolKey) {
+    const g = document.createElementNS(InnerConst.SVG_NS, 'g');
+    g.appendChild(this._rectBackground());
+    const connLine = g.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    connLine.classList.add('stack_seq_dia_conn');
+    connLine.setAttribute('x1', FilterSize.eventWidthHalf - 3.5);
+    connLine.setAttribute('x2', FilterSize.eventWidthHalf + 1);
+    connLine.setAttribute('y1', 5);
+    connLine.setAttribute('y2', 5);
+    this._rect(g, protocolKey, -4.5);
+    return g;
+  }
+  
+  _use(gTop, protocolKey) {
+    const g = document.createElementNS(InnerConst.SVG_NS, 'g');
+    g.appendChild(this._rectBackground());
+    this._rect(g, protocolKey, -4.5);
+    this._rect(g, protocolKey, 1.5);
+    return g;
+  }
+  
+  _store(protocolKey) {
+    const g = document.createElementNS(InnerConst.SVG_NS, 'g');
+    g.appendChild(this._rectBackground());
+    this._rect(g, protocolKey, -3.5);
+    this._rect(g, protocolKey, 0.5); 
+    return g;
+  }
+  
+  _del(protocolKey) {
+    const g = document.createElementNS(InnerConst.SVG_NS, 'g');
+    g.appendChild(this._rectBackground());
+    const connLine = g.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    connLine.classList.add('stack_seq_dia_conn');
+    connLine.setAttribute('x1', FilterSize.eventWidthHalf - 3.5);
+    connLine.setAttribute('x2', FilterSize.eventWidthHalf + 3.5);
+    connLine.setAttribute('y1', 5);
+    connLine.setAttribute('y2', 5);
+    this._cross(g, protocolKey, -4.5);
+    this._cross(g, protocolKey, 1.5);
+    return g;
+  }
+}
+
+
+module.exports = TemplateSeqDiaStack;

package/project/client/templates/template-seq-dia-state.js

@@ -0,0 +1,118 @@
+
+'use strict';
+
+import Const from '../logic/const';
+import ComponentSeqDiaEventRow from './components/component-seq-dia-event-row';
+import DataSeqDiaState from '../data/data-seq-dia-state';
+import FilterSize from '../logic/filter-size';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+import ActorResultConst from 'z-abs-funclayer-engine-cs/clientServer/execution/actor-result-const';
+import ActorStateConst from 'z-abs-funclayer-engine-cs/clientServer/execution/actor-state-const';
+
+
+class TemplateDiaState {
+  constructor() {
+    this.filter = null;
+    this.middleTemplates = null;
+  }
+  
+  exit() {
+    DataSeqDiaState.exit();
+    this.filter = null;
+    this.middleTemplates = null;
+  }
+  
+  init(filter, pooledBuffers) {
+    this.filter = filter;
+    DataSeqDiaState.init(pooledBuffers);
+    
+    const stateLineTemplate = document.createElementNS(InnerConst.SVG_NS, 'line');
+    stateLineTemplate.setAttribute('x1', FilterSize.eventWidthHalf + 1.5);
+    stateLineTemplate.setAttribute('x2', FilterSize.eventWidthHalf + 8);
+    stateLineTemplate.setAttribute('y1', Const.STATE_EVENT_HALF_HEIGHT);
+    stateLineTemplate.setAttribute('y2', Const.STATE_EVENT_HALF_HEIGHT);
+    
+    const circleSmallTemplate = document.createElementNS(InnerConst.SVG_NS, 'circle');
+    circleSmallTemplate.setAttribute('cx', FilterSize.eventWidthHalf);
+    circleSmallTemplate.setAttribute('cy', Const.STATE_EVENT_HALF_HEIGHT);
+    circleSmallTemplate.setAttribute('r', 3);
+    
+    const stateTextTemplate = document.createElementNS(InnerConst.SVG_NS, 'text');
+    stateTextTemplate.classList.add('seq_dia_state_event_state_text');
+    stateTextTemplate.setAttribute('x', FilterSize.eventWidthHalf - 9);
+    stateTextTemplate.setAttribute('y', Const.STATE_EVENT_HALF_HEIGHT + 3.5);
+    stateTextTemplate.appendChild(document.createTextNode('[state]'));
+    
+    const resultRectNodeTemplate = document.createElementNS(InnerConst.SVG_NS, 'rect');
+    resultRectNodeTemplate.setAttribute('x', FilterSize.eventWidthHalf + 8);
+    resultRectNodeTemplate.setAttribute('width', 40);
+    resultRectNodeTemplate.setAttribute('rx', 2);
+    resultRectNodeTemplate.setAttribute('y', 0.5);
+    resultRectNodeTemplate.setAttribute('height', 9);
+    resultRectNodeTemplate.setAttribute('ry', 2);
+    
+    const resultTextNodeTemplate = document.createElementNS(InnerConst.SVG_NS, 'text');
+    resultTextNodeTemplate.classList.add('seq_dia_state_event_result_text');
+    resultTextNodeTemplate.setAttribute('x', FilterSize.eventWidthHalf + 9);
+    resultTextNodeTemplate.setAttribute('y', Const.STATE_EVENT_HALF_HEIGHT + 3.5);
+    resultTextNodeTemplate.appendChild(document.createTextNode('[result]'));
+    
+    this.middleTemplates = new Array(ActorResultConst.results.length);
+    ActorResultConst.results.forEach((result, index) => {
+      const fragment = document.createDocumentFragment();
+      const stateLine = fragment.appendChild(stateLineTemplate.cloneNode(true));
+      stateLine.classList.add(ActorResultConst.resultClasses[index]);
+      const circleSmall = fragment.appendChild(circleSmallTemplate.cloneNode(true));
+      circleSmall.classList.add(ActorResultConst.resultClasses[index]);
+      const stateText = fragment.appendChild(stateTextTemplate.cloneNode(true));
+      const resultRectNode = fragment.appendChild(resultRectNodeTemplate.cloneNode(true));
+      resultRectNode.classList.add(ActorResultConst.resultClasses[index]);
+      resultRectNode.setAttribute('width', ActorResultConst.templateWidths[index]);
+      const resultTextNode = fragment.appendChild(resultTextNodeTemplate.cloneNode(true));
+      resultTextNode.classList.add(ActorResultConst.resultClasses[index]);
+      resultTextNode.firstChild.nodeValue = result;
+      this.middleTemplates[index] = fragment;
+    });
+  }
+  
+  calculateHeight(bufferData) {
+    const data = DataSeqDiaState.restoreHeightData(bufferData);
+    if(ActorResultConst.TYPE_NOT_EXECUTED === data.stateType) {
+      return this.filter.getNotExecutedStateEvents(data.phaseId) ? Const.STATE_EVENT_HEIGHT : 0
+    }
+    else {
+      return this.filter.getStateExecutedEvents(data.phaseId) ? Const.STATE_EVENT_HEIGHT : 0
+    }
+  }
+  
+  store(msg, sharedTemplateData) {
+    const stateType = ActorResultConst.TYPES[msg.stateResultIndex];
+    return DataSeqDiaState.store(msg, sharedTemplateData, stateType);
+  }
+  
+  restore(bufferData) {
+    return DataSeqDiaState.restore(bufferData);
+  }
+  
+  createElement(data) {
+    const node = ComponentSeqDiaEventRow.cloneRow('seq_dia_state');
+    const divNodeLeft = node.firstChild.appendChild(ComponentSeqDiaEventRow.cloneColumnLeft(data.phaseId));
+    for(let i = 0; i < data.nbrOfActors; ++i) {
+      const divNodeMiddle = node.firstChild.appendChild(ComponentSeqDiaEventRow.cloneColumnMiddle(i, data.phaseId));
+      if(data.actorIndex === i) {
+        const svg = divNodeMiddle.appendChild(ComponentSeqDiaEventRow.cloneSvg(Const.STATE_EVENT_HEIGHT, Const.RENDER_POSITION_NORMAL));
+        svg.appendChild(this.middleTemplates[data.stateResultIndex].cloneNode(true));
+        svg.childNodes[2].firstChild.nodeValue = ActorStateConst.actorStateNames[data.stateIndex];
+      }
+    }
+    const divNodeRight = node.firstChild.appendChild(ComponentSeqDiaEventRow.cloneColumnRight(data.nbrOfActors, data.phaseId));
+    return node;
+  }
+  
+  setElementData(data, node) {}
+  
+  removeElement(data, node) {}
+}
+
+
+module.exports = TemplateDiaState;

package/project/client/templates/template-seq-dia-test-case-end.js

@@ -0,0 +1,73 @@
+
+'use strict';
+
+import DataSeqDiaTestCaseEnd from '../data/data-seq-dia-test-case-end';
+import Const from '../logic/const';
+import ActorResultConst from 'z-abs-funclayer-engine-cs/clientServer/execution/actor-result-const';
+
+
+class TemplateSeqDiaTestCaseEnd {
+  constructor() {
+    this.filter = null;
+    this.testCaseEndNodes = [];
+  }
+  
+  exit() {
+    DataSeqDiaTestCaseEnd.exit();
+    this.filter = null;
+    this.testCaseEndNodes = [];
+  }
+  
+  init(filter, pooledBuffers) {
+    this.filter = filter;
+    DataSeqDiaTestCaseEnd.init(pooledBuffers);
+    
+    const testCaseEndNode = document.createElement('div');
+    testCaseEndNode.classList.add('seq_dia_test_case_end');
+    const textPNode = testCaseEndNode.appendChild(document.createElement('p'));
+    textPNode.classList.add('seq_dia_test_case_end_text');
+    textPNode.appendChild(document.createTextNode('TEST CASE END'));
+    
+    const resultNode = testCaseEndNode.appendChild(document.createElement('div'));
+    resultNode.classList.add('seq_dia_test_case_end_result');
+    const resultPNode = resultNode.appendChild(document.createElement('p'));
+    resultPNode.classList.add('seq_dia_test_case_end_result');
+    resultPNode.appendChild(document.createTextNode('[result]'));
+    
+    const durationPNode = testCaseEndNode.appendChild(document.createElement('p'));
+    durationPNode.classList.add('seq_dia_test_case_end_duration');
+    durationPNode.appendChild(document.createTextNode('[TC DATE]'));
+    
+    ActorResultConst.results.forEach((result, index) => {
+      const node = testCaseEndNode.cloneNode(true);
+      node.childNodes[1].firstChild.firstChild.nodeValue = result;
+      node.childNodes[1].classList.add(ActorResultConst.classes[index]);
+      this.testCaseEndNodes.push(node);
+    });
+  }
+    
+  calculateHeight(bufferData) {
+    return 20;
+  }
+  
+  store(msg, sharedTemplateData) {
+    return DataSeqDiaTestCaseEnd.store(msg, sharedTemplateData);
+  }
+  
+  restore(bufferData) {
+    return DataSeqDiaTestCaseEnd.restore(bufferData);
+  }
+  
+  createElement(data) {
+    return this.testCaseEndNodes[data.resultId].cloneNode(true);
+  }
+  
+  setElementData(data, node) {
+    node.childNodes[2].firstChild.nodeValue = data.duration;
+  }
+  
+  removeElement(data, node) {}
+}
+
+
+module.exports = TemplateSeqDiaTestCaseEnd;

package/project/client/templates/template-seq-dia-test-case-header.js

@@ -0,0 +1,70 @@
+
+'use strict';
+
+import Const from '../logic/const';
+import ComponentSeqDiaEventRow from './components/component-seq-dia-event-row';
+import DataSeqDiaTestCaseHeader from '../data/data-seq-dia-test-case-header';
+import FilterSize from '../logic/filter-size';
+
+
+class TemplateSeqDiaTestCaseHeader {
+  constructor() {
+    this.filter = null;
+    this.divTemplate = null;
+  }
+  
+  exit() {
+    DataSeqDiaTestCaseHeader.exit();
+    this.filter = null;
+    this.divTemplate = null;
+  }
+  
+  init(filter, pooledBuffers) {
+    this.filter = filter;
+    DataSeqDiaTestCaseHeader.init(pooledBuffers);
+    
+    this.divTemplate = document.createDocumentFragment();
+    const divText = this.divTemplate.appendChild(document.createElement('div'));
+    divText.classList.add('test_case_header_text');
+    divText.appendChild(document.createTextNode('[actor]'));
+    
+    const divActorLine = this.divTemplate.appendChild(document.createElement('div'));
+    divActorLine.classList.add('test_case_header_line');
+  }
+    
+  calculateHeight(bufferData) {
+    return Const.HEADER_Y_HEIGHT;
+  }
+    
+  store(msg, sharedTemplateData) {
+    return DataSeqDiaTestCaseHeader.store(msg, sharedTemplateData);
+  }
+  
+  restore(bufferData) {
+    return DataSeqDiaTestCaseHeader.restore(bufferData);
+  }
+  
+  createElement(data) {
+    const nbrOfActors = data.nbrOfActors;
+    const actorNames = data.actorNames;
+    const node = ComponentSeqDiaEventRow.cloneRowHeader('seq_dia_test_case_header');
+    node.firstChild.appendChild(ComponentSeqDiaEventRow.cloneColumnHeaderLeft());
+    for(let i = 0; i < nbrOfActors; ++i) {
+      const innerDivNode = node.firstChild.appendChild(ComponentSeqDiaEventRow.cloneColumnHeader(i));
+      innerDivNode.appendChild(this.divTemplate.cloneNode(true));
+    }
+    node.firstChild.appendChild(ComponentSeqDiaEventRow.cloneColumnHeaderRight(nbrOfActors));
+    return node;
+  }
+  
+  setElementData(data, node) {
+    for(let i = 0; i < data.nbrOfActors; ++i) {
+      node.firstChild.childNodes[i + 1].firstChild.firstChild.nodeValue = data.actorNames[i];
+    }
+  }
+  
+  removeElement(data, node) {}
+}
+
+
+module.exports = TemplateSeqDiaTestCaseHeader;