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

package/project/client/templates/template-icons/template-icon-connecting.js

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import TemplateBackground from './svgs/template-background';
+import TemplateCircleSmall from './svgs/template-circle-small';
+
+
+class TemplateIconConnecting {
+  static template = [];
+  
+  static exit() {
+    TemplateIconConnecting.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const connectingTemplate = template.appendChild(TemplateCircleSmall.create());
+      connectingTemplate.setAttribute('fill', stackStyle.protocolColor);
+      TemplateIconConnecting.template[stackStyle.index] = template;
+    });
+    return TemplateIconConnecting.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconConnecting.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconConnecting;

package/project/client/templates/template-icons/template-icon-detached.js

@@ -0,0 +1,61 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateBackground from './svgs/template-background';
+import TemplateTriangleBig from './svgs/template-triangle-big';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateIconDetached {
+  static template = [];
+    
+  static exit() {
+    TemplateIconDetached.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const startedTemplate = template.appendChild(TemplateTriangleBig.create());
+      startedTemplate.setAttribute('fill', stackStyle.protocolColor);
+      const hex = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'polygon'));
+      const arrowWidth = 4;
+      const cx = Const.ICON_X - 8;
+      const cy = Const.ICON_Y;
+      const r = arrowWidth;
+      const sqrt3 = Math.sqrt(3);
+      const hexPoints = [
+        `${cx + r},${cy}`,
+        `${cx + (r >> 1)},${cy + (sqrt3 * r >> 1)}`,
+        `${cx - (r >> 1)},${cy + (sqrt3 * r >> 1)}`,
+        `${cx - r},${cy}`,
+        `${cx - (r >> 1)},${cy - (sqrt3 * r >> 1)}`,
+        `${cx + (r >> 1)},${cy - (sqrt3 * r >> 1)}`
+       ].join(' ');
+      hex.setAttribute('points', hexPoints);
+      hex.setAttribute('stroke', 'black');
+      hex.setAttribute('stroke-width', 1);
+      hex.setAttribute('fill', stackStyle.protocolColor);
+      
+      const lineHorizontal = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+      lineHorizontal.setAttribute('y1', Const.ICON_Y);
+      lineHorizontal.setAttribute('y2', Const.ICON_Y);
+      lineHorizontal.setAttribute('x1', Const.ICON_X - 6.5);
+      lineHorizontal.setAttribute('x2', Const.ICON_X - 9.5);
+      lineHorizontal.setAttribute('stroke', 'black');
+      lineHorizontal.setAttribute('stroke-width', 0.5);
+            
+      TemplateIconDetached.template[stackStyle.index] = template;
+    });
+    return TemplateIconDetached.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconDetached.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconDetached;

package/project/client/templates/template-icons/template-icon-not-connected.js

@@ -0,0 +1,37 @@
+
+'use strict';
+
+import TemplateBackground from './svgs/template-background';
+import TemplateCircleBig from './svgs/template-circle-big';
+import TemplateCirclesmall from './svgs/template-circle-small';
+
+
+class TemplateIconNotConnected {
+  static template = [];
+  
+  static exit() {
+    TemplateIconNotConnected.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const connectedTemplate = template.appendChild(TemplateCircleBig.create());
+      connectedTemplate.setAttribute('fill', 'red');
+      connectedTemplate.setAttribute('stroke-width', 0.5);
+      const smallCircle = template.appendChild(TemplateCirclesmall.create());
+      smallCircle.setAttribute('fill', stackStyle.protocolColor);
+      smallCircle.setAttribute('stroke', 'white');
+      TemplateIconNotConnected.template[stackStyle.index] = template;
+    });
+    return TemplateIconNotConnected.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconNotConnected.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconNotConnected;

package/project/client/templates/template-icons/template-icon-not-started.js

@@ -0,0 +1,67 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateBackground from './svgs/template-background';
+import TemplateTriangleBig from './svgs/template-triangle-big';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateIconNotStarted {
+  static template = [];
+    
+  static exit() {
+    TemplateIconNotStarted.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      
+      const length = 4.5;
+      const closingLine1 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+      closingLine1.setAttribute('y1', Const.ICON_Y - length);
+      closingLine1.setAttribute('y2', Const.ICON_Y + length);
+      closingLine1.setAttribute('x1', Const.ICON_X - length - 3);
+      closingLine1.setAttribute('x2', Const.ICON_X + length);
+      closingLine1.setAttribute('stroke', 'black');
+      closingLine1.setAttribute('stroke-width', 1.5);
+        
+      const closingLine2 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+      closingLine2.setAttribute('y1', Const.ICON_Y + length);
+      closingLine2.setAttribute('y2', Const.ICON_Y - length);
+      closingLine2.setAttribute('x1', Const.ICON_X - length - 3);
+      closingLine2.setAttribute('x2', Const.ICON_X + length);
+      closingLine2.setAttribute('stroke', 'black');
+      closingLine2.setAttribute('stroke-width', 1.5);
+      
+      const startedTemplate = template.appendChild(TemplateTriangleBig.create());
+      startedTemplate.setAttribute('fill', 'red');
+      startedTemplate.setAttribute('stroke-width', 0.5);
+      
+      const startArrowInner = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'polygon'));
+      startArrowInner.classList.add('seq_dia_arrow');
+      const arrowInnerWidth = 2.6;
+      const startArrowInnerX1 = Const.ICON_X - arrowInnerWidth - 0.5;
+      const startArrowInnerX2 = Const.ICON_X + arrowInnerWidth - 1.1;
+      const startArrowInnerY1 = Const.ICON_Y - arrowInnerWidth + 0.2;
+      const startArrowInnerY2 = Const.ICON_Y;
+      const startArrowInnerY3 = Const.ICON_Y + arrowInnerWidth - 0.2;
+      startArrowInner.setAttribute('points', `${startArrowInnerX1},${startArrowInnerY1} ${startArrowInnerX1},${startArrowInnerY3} ${startArrowInnerX2},${startArrowInnerY2}`);
+      startArrowInner.setAttribute('stroke', stackStyle.protocolColor);
+      startArrowInner.setAttribute('stroke-width', 0.5);
+      startArrowInner.setAttribute('fill', stackStyle.protocolColor);
+      
+      TemplateIconNotStarted.template[stackStyle.index] = template;
+    });
+    return TemplateIconNotStarted.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconNotStarted.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconNotStarted;

package/project/client/templates/template-icons/template-icon-receive.js

@@ -0,0 +1,37 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateArrowHead from './svgs/template-arrow-head';
+import TemplateArrowLine from './svgs/template-arrow-line';
+import TemplateBackground from './svgs/template-background';
+import TemplateEnvelope from './svgs/template-envelope';
+
+
+class TemplateIconReceive {
+  static template = [];
+    
+  static exit() {
+    TemplateIconReceive.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const arrowLine = template.appendChild(TemplateArrowLine.create(Const.RECEIVE));
+      arrowLine.setAttribute('stroke', stackStyle.protocolColor);
+      template.appendChild(TemplateArrowHead.create(Const.RECEIVE));
+      template.appendChild(TemplateEnvelope.create());
+      TemplateIconReceive.template[stackStyle.index] = template;
+    });
+    return TemplateIconReceive.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconReceive.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconReceive;

package/project/client/templates/template-icons/template-icon-send.js

@@ -0,0 +1,37 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateArrowHead from './svgs/template-arrow-head';
+import TemplateArrowLine from './svgs/template-arrow-line';
+import TemplateBackground from './svgs/template-background';
+import TemplateEnvelope from './svgs/template-envelope';
+
+
+class TemplateIconSend {
+  static template = [];
+    
+  static exit() {
+    TemplateIconSend.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const arrowLine = template.appendChild(TemplateArrowLine.create(Const.SEND));
+      arrowLine.setAttribute('stroke', stackStyle.protocolColor);
+      template.appendChild(TemplateArrowHead.create(Const.SEND));
+      template.appendChild(TemplateEnvelope.create());
+      TemplateIconSend.template[stackStyle.index] = template;
+    });
+    return TemplateIconSend.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconSend.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconSend;

package/project/client/templates/template-icons/template-icon-stack.js

@@ -0,0 +1,110 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateBackground from './svgs/template-background';
+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 TemplateIconStack {
+  static template = [[], [], [], [], []];
+    
+  static exit() {
+    TemplateIconStack.template = [[], [], [], [], []];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      
+      const newStackTemplate = template.cloneNode(true);
+      TemplateIconStack._line(newStackTemplate);
+      TemplateIconStack._rect(newStackTemplate, key, -4.5);
+      
+      const sharedStackTemplate = template.cloneNode(true);
+      TemplateIconStack._line(sharedStackTemplate);
+      TemplateIconStack._rect(sharedStackTemplate, key, -4.5);
+      TemplateIconStack._circles(sharedStackTemplate, key, 2.5);
+      
+      const useStackTemplates = template.cloneNode(true);
+      
+      const storeStackTemplated = template.cloneNode(true);
+      
+      const delStackTemplated = template.cloneNode(true);
+      TemplateIconStack._line(delStackTemplated);
+      TemplateIconStack._cross(delStackTemplated, key, -4.5);
+      TemplateIconStack._cross(delStackTemplated, key, 4.5);
+      
+      TemplateIconStack.template[LogDataStackType.NEW][stackStyle.index] = newStackTemplate;
+      TemplateIconStack.template[LogDataStackType.SHARED][stackStyle.index] = sharedStackTemplate;
+      TemplateIconStack.template[LogDataStackType.USE][stackStyle.index] = useStackTemplates;
+      TemplateIconStack.template[LogDataStackType.STORE][stackStyle.index] = storeStackTemplated;
+      TemplateIconStack.template[LogDataStackType.DEL][stackStyle.index] = delStackTemplated;
+    });
+    return TemplateIconStack.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconStack.template[type][protocolIndex].cloneNode(true);
+    return template;
+  }
+  
+  static _line(template) {
+    const connLine = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    connLine.setAttribute('x1', Const.ICON_X - 3.5);
+    connLine.setAttribute('x2', Const.ICON_X + 3.5);
+    connLine.setAttribute('y1', Const.ICON_Y);
+    connLine.setAttribute('y2', Const.ICON_Y);
+    connLine.setAttribute('stroke', 'black');
+    connLine.setAttribute('stroke-width', 1);
+  }
+  
+  static _rect(template, protocolKey, x) {
+    const connLeftRect = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'rect'));
+    connLeftRect.classList.add('stack_seq_dia_conn', `seq_dia_protocol_${protocolKey}_small`);
+    connLeftRect.setAttribute('x', Const.ICON_X + x);
+    connLeftRect.setAttribute('width', 4);
+    connLeftRect.setAttribute('y', Const.ICON_Y - 2);
+    connLeftRect.setAttribute('height', 4);
+  }
+  
+  static _cross(template, protocolKey, x) {
+    const connLine1 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    connLine1.classList.add('stack_seq_dia_conn');
+    connLine1.setAttribute('x1', Const.ICON_X + x - 2.5);
+    connLine1.setAttribute('x2', Const.ICON_X + x + 2.5);
+    connLine1.setAttribute('y1', Const.ICON_Y - 2.5);
+    connLine1.setAttribute('y2', Const.ICON_Y + 2.5);
+    
+    const connLine2 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    connLine2.classList.add('stack_seq_dia_conn');
+    connLine2.setAttribute('x1', Const.ICON_X + x - 2.5);
+    connLine2.setAttribute('x2', Const.ICON_X + x + 2.5);
+    connLine2.setAttribute('y1', Const.ICON_Y + 2.5);
+    connLine2.setAttribute('y2', Const.ICON_Y - 2.5);
+    
+    const circle1 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'circle'));
+    circle1.classList.add('stack_seq_dia_conn', `seq_dia_protocol_${protocolKey}_small`);
+    circle1.setAttribute('cx', Const.ICON_X + x);
+    circle1.setAttribute('cy', Const.ICON_Y);
+    circle1.setAttribute('r', 1);
+  }
+  
+  static _circles(template, protocolKey, x) {
+    const circle1 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'circle'));
+    circle1.classList.add(`seq_dia_protocol_${protocolKey}_small`);
+    circle1.setAttribute('cx', Const.ICON_X + x);
+    circle1.setAttribute('cy', Const.ICON_Y - 3);
+    circle1.setAttribute('r', 1.5);
+    
+    const circle2 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'circle'));
+    circle2.classList.add(`seq_dia_protocol_${protocolKey}_small`);
+    circle2.setAttribute('cx', Const.ICON_X + x);
+    circle2.setAttribute('cy', Const.ICON_Y + 3);
+    circle2.setAttribute('r', 1.5);
+  }
+}
+
+
+module.exports = TemplateIconStack;

package/project/client/templates/template-icons/template-icon-started.js

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import TemplateBackground from './svgs/template-background';
+import TemplateTriangleBig from './svgs/template-triangle-big';
+
+
+class TemplateIconStarted {
+  static template = [];
+    
+  static exit() {
+    TemplateIconStarted.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const startedTemplate = template.appendChild(TemplateTriangleBig.create());
+      startedTemplate.setAttribute('fill', stackStyle.protocolColor);
+      TemplateIconStarted.template[stackStyle.index] = template;
+    });
+    return TemplateIconStarted.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconStarted.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconStarted;

package/project/client/templates/template-icons/template-icon-starting.js

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import TemplateBackground from './svgs/template-background';
+import TemplateTriangleSmall from './svgs/template-triangle-small';
+
+
+class TemplateIconStarting {
+  static template = [];
+    
+  static exit() {
+    TemplateIconStarting.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const startingTemplate = template.appendChild(TemplateTriangleSmall.create());
+      startingTemplate.setAttribute('fill', stackStyle.protocolColor);
+      TemplateIconStarting.template[stackStyle.index] = template;
+    });
+    return TemplateIconStarting.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconStarting.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconStarting;

package/project/client/templates/template-icons/template-icon-stopped.js

@@ -0,0 +1,34 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateBackground from './svgs/template-background';
+import TemplateSquareBig from './svgs/template-square-big';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateIconStopped {
+  static template = [];
+    
+  static exit() {
+    TemplateIconStopped.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const stoppedTemplate = template.appendChild(TemplateSquareBig.create());
+      stoppedTemplate.setAttribute('fill', stackStyle.protocolColor);
+      TemplateIconStopped.template[stackStyle.index] = template;
+    });
+    return TemplateIconStopped.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconStopped.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconStopped;

package/project/client/templates/template-icons/template-icon-stopping.js

@@ -0,0 +1,34 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateBackground from './svgs/template-background';
+import TemplateSquareSmall from './svgs/template-square-small';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateIconStopping {
+  static template = [];
+    
+  static exit() {
+    TemplateIconStopping.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const stoppingTemplate = template.appendChild(TemplateSquareSmall.create());
+      stoppingTemplate.setAttribute('fill', stackStyle.protocolColor);
+      TemplateIconStopping.template[stackStyle.index] = template;
+    });
+    return TemplateIconStopping.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconStopping.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconStopping;

package/project/client/templates/template-icons/template-icon-unknown.js

@@ -0,0 +1,26 @@
+
+'use strict';
+
+import TemplateBackground from './svgs/template-background';
+
+
+class TemplateIconUnknown {
+  static template = null;
+    
+  static exit() {
+    TemplateIconUnknown.template = null;
+  }
+  
+  static init(stackStyles) {
+    const template = TemplateBackground.create();
+    TemplateIconUnknown.template = template;
+    return TemplateIconUnknown.create;
+  }
+  
+  static create(protocolIndex, type) {
+    return TemplateIconUnknown.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateIconUnknown;

package/project/client/templates/template-icons/template-icon.js

@@ -0,0 +1,76 @@
+
+'use strict';
+
+import TemplateIconAccepted from './template-icon-accepted';
+import TemplateIconAccepting from './template-icon-accepting';
+import TemplateIconAttached from './template-icon-attached';
+import TemplateIconClosed from './template-icon-closed';
+import TemplateIconClosing from './template-icon-closing';
+import TemplateIconConnected from './template-icon-connected';
+import TemplateIconConnecting from './template-icon-connecting';
+import TemplateIconDetached from './template-icon-detached';
+import TemplateIconNotConnected from './template-icon-not-connected';
+import TemplateIconNotStarted from './template-icon-not-started';
+import TemplateIconReceive from './template-icon-receive';
+import TemplateIconStack from './template-icon-stack';
+import TemplateIconStarting from './template-icon-starting';
+import TemplateIconStarted from './template-icon-started';
+import TemplateIconSend from './template-icon-send';
+import TemplateIconStopping from './template-icon-stopping';
+import TemplateIconStopped from './template-icon-stopped';
+import TemplateIconUnknown from './template-icon-unknown';
+import LogDataAction from 'z-abs-funclayer-engine-cs/clientServer/log/log-data-action';
+
+
+class TemplateIcon {
+  static lookup = null;
+  static protocolGradient = null;
+  
+  static exit() {
+    TemplateIcon.lookup = null;
+  }
+  
+  static init(stackStyles) {
+    TemplateIcon.lookup = new Array(LogDataAction.length);
+    TemplateIcon.lookup[LogDataAction.STARTING] = TemplateIconStarting.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.STARTED] = TemplateIconStarted.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.ATTACHED] = TemplateIconAttached.init(stackStyles); 
+    TemplateIcon.lookup[LogDataAction.STOPPING] = TemplateIconStopping.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.STOPPED] = TemplateIconStopped.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.DETACHED] = TemplateIconDetached.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.NOT_STARTED] = TemplateIconNotStarted.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.NOT_ATTACHED] = TemplateIconUnknown.init(stackStyles); // NOT_ATTACHED 
+    TemplateIcon.lookup[LogDataAction.SEND] = TemplateIconSend.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.RECEIVE] = TemplateIconReceive.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.CONNECTING] = TemplateIconConnecting.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.CONNECTED] = TemplateIconConnected.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.DNS_FAILURE] = TemplateIconUnknown.init(stackStyles);// DNS_FAILURE 
+    TemplateIcon.lookup[LogDataAction.NOT_CONNECTED] = TemplateIconNotConnected.init(stackStyles);// NOT_CONNECTED 
+    TemplateIcon.lookup[LogDataAction.UPGRADING] = TemplateIconUnknown.init(stackStyles);// UPGRADING 
+    TemplateIcon.lookup[LogDataAction.UPGRADED] = TemplateIconUnknown.init(stackStyles);// UPGRADED 
+    TemplateIcon.lookup[LogDataAction.NOT_UPGRADED] = TemplateIconUnknown.init(stackStyles);// NOT_UPGRADED 
+    TemplateIcon.lookup[LogDataAction.ACCEPTING] = TemplateIconAccepting.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.ACCEPTED] = TemplateIconAccepted.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.HALF_CLOSING] = TemplateIconAccepting.init(stackStyles);// HALF_CLOSING
+    TemplateIcon.lookup[LogDataAction.HALF_CLOSED] = TemplateIconUnknown.init(stackStyles);// HALF_CLOSED 
+    TemplateIcon.lookup[LogDataAction.CLOSED] = TemplateIconClosed.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.CLOSING] = TemplateIconClosing.init(stackStyles);
+    TemplateIcon.lookup[LogDataAction.GUI] = TemplateIconUnknown.init(stackStyles);// GUI 
+    TemplateIcon.lookup[LogDataAction.STACK] = TemplateIconStack.init(stackStyles);
+  }
+  
+  static create(data) {
+    const protocolIndex = data.extraData.protocolIndex;
+    const type = data.extraData.type;
+    const factory = TemplateIcon.lookup[data.dataId];
+    if(protocolIndex && factory) {
+      return factory(protocolIndex, type);
+    }
+    else {
+      return TemplateIconConnected.create(0, 0);
+    }
+  }
+}
+
+
+module.exports = TemplateIcon;