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

package/project/client/templates/template-log-log.js

@@ -0,0 +1,652 @@
+
+'use strict';
+
+import Const from '../logic/const';
+import DataLogLog from '../data/data-log-log';
+import TemplateIcon from './template-icons/template-icon';
+import DataLogDynamicBuffer from 'z-abs-complayer-visualizationinner-client/client/data/data-log-dynamic-buffer';
+import LogDataAction from 'z-abs-funclayer-engine-cs/clientServer/log/log-data-action';
+import LogPartType from 'z-abs-funclayer-engine-cs/clientServer/log/log-part-type';
+import LogType from 'z-abs-funclayer-engine-cs/clientServer/log/log-type';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+import TemplateInners from 'z-abs-complayer-visualizationinner-client/client/templates/template-inners';
+import TransportTypeConst from 'z-abs-funclayer-engine-cs/clientServer/stack/transport-type-const';
+
+
+class TemplateLogLog {
+  static innersTemplate = null;
+  
+  constructor(templateInners) {
+    this.templateInners = templateInners;
+    this.defaultHeight = 20;
+    this.rowTemplate = null;
+    this.filter = null;
+    this.templateInners = null;
+    this.updateScrollList = null;
+    
+    this.templateTestCaseRows = null;
+    this.templateTestCaseColumns = null;
+    this.templateInnerImageRowOpen = null;
+    this.templateInnerImageRowClosed = null;
+    this.clickInner = this._clickInner.bind(this);
+  }
+  
+  exit() {
+    DataLogLog.exit();
+    this.rowTemplate = null;
+    this.filter = null;
+    this.templateInners = null;
+    this.updateScrollList = null;
+    
+    this.templateTestCaseRows = null;
+    this.templateTestCaseColumns = null;
+    this.templateInnerImageRowOpen = null;
+    this.templateInnerImageRowClosed = null;
+    TemplateLogLog.innersTemplate = null;
+  }
+  
+  init(filter, pooledBuffers, stackStyles, templateInners, updateScrollList) {
+    this.filter = filter;
+    DataLogLog.init(pooledBuffers, stackStyles);
+    this.templateInners = templateInners;
+    this.updateScrollList = updateScrollList;
+    
+    TemplateLogLog.innersTemplate = new Map();
+    TemplateLogLog.innersTemplate.set(LogType.IP, TemplateLogLog._createOuterTemplate(stackStyles, LogType.IP));
+    TemplateLogLog.innersTemplate.set(LogType.ERROR, TemplateLogLog._createOuterTemplate(stackStyles, LogType.ERROR));
+    this.templateTestCaseRows = [new Array(LogType.names.length), new Array(LogType.names.length), new Array(LogType.names.length)];
+    this.templateTestCaseColumns = [new Array(LogType.names.length), new Array(LogType.names.length), new Array(LogType.names.length)];
+    this.templateInnerImageRowOpen = this._createInnerImage(true);
+    this.templateInnerImageRowClosed = this._createInnerImage(false);
+    for(let i = 0; i < LogType.names.length; ++i) {
+      this.templateTestCaseColumns[InnerConst.INNER_NONE][i] = this._createTemplateColumns(i, InnerConst.INNER_NONE);
+      this.templateTestCaseColumns[InnerConst.INNER_CLOSED][i] = this._createTemplateColumns(i, InnerConst.INNER_CLOSED);
+      this.templateTestCaseColumns[InnerConst.INNER_OPEN][i] = this._createTemplateColumns(i, InnerConst.INNER_OPEN);
+      this.templateTestCaseRows[InnerConst.INNER_NONE][i] = this._createTemplateRow(i, InnerConst.INNER_NONE);
+      this.templateTestCaseRows[InnerConst.INNER_CLOSED][i] = this._createTemplateRow(i, InnerConst.INNER_CLOSED);
+      this.templateTestCaseRows[InnerConst.INNER_OPEN][i] = this._createTemplateRow(i, InnerConst.INNER_OPEN);
+    }
+  }
+  
+  _createInnerImage(open, className) {
+    const svg = document.createElementNS(InnerConst.SVG_NS, 'svg');
+    svg.classList.add('log_arrow');
+    if(undefined !== className) {
+      svg.classList.add(className); 
+    }
+    svg.setAttribute('width', 14);
+    svg.setAttribute('height', 14);
+    const group = svg.appendChild(document.createElementNS(InnerConst.SVG_NS, 'g'));
+    const arrow = group.appendChild(document.createElementNS(InnerConst.SVG_NS, 'polygon'));
+    arrow.setAttribute('points', '2,2 2,10 10,6');
+    arrow.setAttribute('stroke', 'Grey');
+    arrow.setAttribute('stroke-width', 1);
+    arrow.setAttribute('fill', 'white');
+    if(open) {
+      group.setAttribute('transform', 'rotate(45 3 7)');
+    }
+    return svg;
+  }
+  
+  _createTemplateColumns(logTypeId, innerStatus) {
+    const fragment = document.createDocumentFragment();
+    const logIdTd = fragment.appendChild(document.createElement('div'));
+    logIdTd.classList.add('comp_layer_log_column');
+    logIdTd.classList.add('comp_layer_log_column_nbr');
+    logIdTd.appendChild(document.createTextNode(''));
+    const logTypeTd = fragment.appendChild(document.createElement('div'));
+    logTypeTd.classList.add('comp_layer_log_column');
+    logTypeTd.classList.add('comp_layer_log_column_type');
+    const p = logTypeTd.appendChild(document.createElement('p'));
+    p.classList.add('comp_layer_log_column_type_ip');
+    p.appendChild(document.createTextNode(LogType.names[logTypeId]));
+    const iconNode = logTypeTd.appendChild(document.createElementNS(InnerConst.SVG_NS, 'svg'));
+    iconNode.classList.add('comp_layer_log_column_type_ip');
+    iconNode.setAttribute('width', `${Const.ICON_X_WIDTH}`);
+    iconNode.setAttribute('height', `${Const.ICON_Y_HEIGHT}`);
+    iconNode.setAttribute('viewBox', `0 0 ${Const.ICON_X_WIDTH} ${Const.ICON_Y_HEIGHT}`);
+    
+    if(LogType.hasInner[logTypeId]) {
+      if(InnerConst.INNER_CLOSED === innerStatus) {
+        logTypeTd.setAttribute("data-inner", 'closed');
+        logTypeTd.appendChild(this.templateInnerImageRowClosed.cloneNode(true));        
+      }
+      else if(InnerConst.INNER_OPEN === innerStatus) {
+        logTypeTd.setAttribute('data-inner', 'open');
+   	    logTypeTd.appendChild(this.templateInnerImageRowOpen.cloneNode(true));
+      }
+    }
+    const dateTd = fragment.appendChild(document.createElement('div'));
+    dateTd.classList.add('comp_layer_log_column');
+    dateTd.classList.add('comp_layer_log_column_date');
+    dateTd.appendChild(document.createTextNode(''));
+    
+    const actorTd = fragment.appendChild(document.createElement('div'));
+    actorTd.classList.add('comp_layer_log_column');
+    actorTd.classList.add('comp_layer_log_column_actor');
+    const actorA = actorTd.appendChild(document.createElement('a'));
+    actorA.setAttribute('target', '_blank');
+    actorA.setAttribute('rel', 'noopener noreferrer');
+    actorA.classList.add('comp_layer_log_column_actor');
+    actorA.appendChild(document.createElement('span'));
+    
+    const fileNameTd = fragment.appendChild(document.createElement('div'));
+    fileNameTd.classList.add('comp_layer_log_column');
+    fileNameTd.classList.add('comp_layer_log_column_file_name');
+    const fileNameA = fileNameTd.appendChild(document.createElement('a'));
+    fileNameA.classList.add('comp_layer_log_column_file_name');
+    fileNameA.setAttribute('target', '_blank');
+    fileNameA.setAttribute('rel', 'noopener noreferrer');
+    fileNameA.appendChild(document.createElement('span'));
+    
+    const logTd = fragment.appendChild(document.createElement('div'));
+    logTd.classList.add('comp_layer_log_column');
+    logTd.classList.add('comp_layer_log_column_log');
+    logTd.appendChild(document.createTextNode(''));
+    return fragment;
+  }
+  
+  _createTemplateRow(logTypeId, innerStatus) {
+    const row = document.createElement('div');
+    row.classList.add(`comp_layer_${LogType.csses[logTypeId]}`);
+    row.classList.add('comp_layer_log_row');
+    const columns = this.templateTestCaseColumns[innerStatus][logTypeId].cloneNode(true);
+    row.appendChild(columns);
+    return row;
+  }
+  
+  static _createInnerTemplate(stackStyles) {
+    const divInnerTemplate = new Array(stackStyles.size);
+    const divInner = document.createElement('div');
+    divInner.classList.add('log_protocol_msg_inner');
+    stackStyles.forEach((protocol, protocolKey) => {
+      const protocolDivInner = divInner.cloneNode(true);
+      divInnerTemplate[protocol.index] = protocolDivInner;
+    });
+    return divInnerTemplate;
+  }
+  
+  static _createOuterTemplate(stackStyles, logType) {
+    if(LogType.IP === logType) {
+      const divInnerTemplate = TemplateLogLog._createInnerTemplate(stackStyles);
+      const divOuterTemplate = new Array(stackStyles.size);
+      const divOuter = document.createElement('div');
+      divOuter.classList.add('log_protocol_outer');
+      const divInner = divOuter.appendChild(document.createElement('div'));
+      divInner.classList.add('log_protocol_header');
+      const pHeaderStack = divInner.appendChild(document.createElement('p'));
+      pHeaderStack.classList.add('log_protocol_header_stack');
+      const pHeaderTransport = divInner.appendChild(document.createElement('p'));
+      pHeaderTransport.classList.add('log_protocol_header_transport');
+      stackStyles.forEach((protocol, protocolKey) => {
+        const protocolDivOuter = divOuter.cloneNode(true);
+        protocolDivOuter.firstChild.classList.add(`log_protocol_${protocolKey}_inner`);
+        protocolDivOuter.firstChild.classList.add(`log_protocol_${protocolKey}_header`);
+        protocolDivOuter.firstChild.firstChild.appendChild(document.createTextNode(protocolKey));
+        divOuterTemplate[protocol.index] = protocolDivOuter;
+        protocolDivOuter.appendChild(divInnerTemplate[protocol.index].cloneNode(true));
+      });
+      return divOuterTemplate;
+    }
+    else if(LogType.ERROR === logType) {
+      const divOuter = document.createElement('div');
+      divOuter.classList.add('log_protocol_outer');
+      const divInner = divOuter.appendChild(document.createElement('div'));
+      divInner.classList.add('log_protocol_msg_inner');
+      return divOuter;
+    }
+  }
+  
+  calculateHeight(bufferData) {
+    const heightData = DataLogLog.restoreHeightData(bufferData);
+    if(this.filter.type[heightData.type]) {
+      if(heightData.innersData && heightData.innersData.isOpen) {
+        return this.defaultHeight + heightData.innersData.size;
+      }
+      else {
+        return this.defaultHeight;
+      }
+    }
+    else {
+      return 0;
+    }
+  }
+    
+  store(msg, logId) {
+    return DataLogLog.store(msg, logId);
+  }
+  
+  restore(bufferData) {
+    return DataLogLog.restore(bufferData);
+  }
+  
+  createElement(data) {
+    const extraData = data?.extraData;
+    const innerStatus = !extraData?.innersData ? InnerConst.INNER_NONE : (extraData.innersData.isOpen ? InnerConst.INNER_OPEN :  InnerConst.INNER_CLOSED);
+    const node = this.templateTestCaseRows[innerStatus][data.type].cloneNode(true);
+    if(LogType.IP === data.type) {
+      node.childNodes[1].childNodes[1].appendChild(TemplateIcon.create(data));
+    }
+    return node;
+  }
+  
+  setElementData(data, node) {
+    node.firstChild.lastChild.nodeValue = data.logId;
+    if(LogType.IP === data.type || LogType.ERROR === data.type) {
+      const extraData = data?.extraData;
+      const innerStatus = !extraData?.innersData ? InnerConst.INNER_NONE : (extraData.innersData.isOpen ? InnerConst.INNER_OPEN :  InnerConst.INNER_CLOSED);
+      if(InnerConst.INNER_NONE !== innerStatus) {
+        node.childNodes[1].childNodes[2].addEventListener('click', this.clickInner, true);
+        node.childNodes[1].setAttribute('data-key', extraData.innersData.dataKey);
+      }      
+    }
+    node.childNodes[2].lastChild.nodeValue = data.date;
+    
+    const actorElement = node.childNodes[3].firstChild;
+    actorElement.lastChild.textContent  = data.actor;
+    actorElement.setAttribute('href', data.actorPath);
+    actorElement.dataset.hover = data.actorPath;
+    
+    const fileElement = node.childNodes[4].firstChild;
+    const fName = data.fileName.lastIndexOf('/');
+    if(-1 !== fName) {
+      fileElement.lastChild.textContent = data.fileName.substring(fName + 1);
+    }
+    else {
+      fileElement.lastChild.textContent = data.fileName;
+    }
+    fileElement.dataset.hover = data.fileName;
+    fileElement.setAttribute('href', data.codePath);
+    
+    node.childNodes[5].lastChild.nodeValue = data.log;
+    if(data.extraData.innersData?.isOpen) {
+      node.appendChild(this.templateInners.createElement(data, false));
+    }
+  }
+  
+  removeElement(data, node) {
+    const extraData = data?.extraData;
+    const innerStatus = !extraData?.innersData ? InnerConst.INNER_NONE : (extraData.innersData.isOpen ? InnerConst.INNER_OPEN :  InnerConst.INNER_CLOSED);
+    if(LogType.IP === data.type || LogType.ERROR === data.type) {
+      if(InnerConst.INNER_NONE !== innerStatus) {
+        const arrowNode = node.childNodes[1].childNodes[2];
+        arrowNode.removeEventListener('click', this.clickInner, true);
+        if(InnerConst.INNER_OPEN === innerStatus) {
+          extraData.innersData.inners = null;
+        }
+      }
+    }
+  }
+  
+  static createInners(data) {
+    const template = TemplateLogLog.innersTemplate.get(data.type);
+    let outerNode = null;
+    if(LogType.IP === data.type) {
+      outerNode = template[data.extraData.protocolIndex].cloneNode(true);
+      outerNode.firstChild.lastChild.textContent = TransportTypeConst.TRANSPORT_TYPE_NAMES[data.extraData.transportType];
+    }
+    else if(LogType.ERROR === data.type) {
+      outerNode = template.cloneNode(true);
+    }
+    const innerNode = outerNode.lastChild;
+    return {
+      outerNode,
+      innerNode
+    };
+  }
+  
+  _clickInner(event) {
+    event.preventDefault();
+    const divNode = event.currentTarget.parentNode;
+    const dataKey = divNode.getAttribute('data-key');
+    const extraData = DataLogDynamicBuffer.restoreFromKey(dataKey);
+    if(divNode.dataset.inner === 'closed') {
+      let id = 0;
+      if(!extraData.inners) {
+        extraData.inners = JSON.parse(extraData.innersRaw, (key, value) => {
+          if('inners' === key && 0 !== value.length) {
+            value.forEach((inner) => {
+              if(undefined === inner.id) {
+                inner.id = ++id;
+                inner.isOpen = false;
+              }
+            });
+          }
+          return value;
+        });
+        extraData.inners.forEach((inner) => {
+          if(undefined === inner.id) {
+            inner.id = ++id;
+            inner.isOpen = false;
+          }
+        });
+      }
+      const innersRaw = JSON.stringify(extraData.inners);
+      extraData.size = this.templateInners.calculateInnersSize(extraData.inners, extraData.type);
+      DataLogDynamicBuffer.storeFromKey(dataKey, innersRaw, extraData.inners, true, extraData.size, extraData.type);
+    }
+    else {
+      extraData.size = 0;
+      DataLogDynamicBuffer.storeFromKey(dataKey, extraData.innersRaw, null, false, extraData.size, extraData.type);
+    }
+    this.updateScrollList();
+  }
+  
+  /*clone(logId, logRow, checked, open, cbResize) {
+    const scrollListNodes = [];
+    let fragment;
+    let node;
+    const inners = logRow.inners;
+    const openId = open ? 0 : 1;
+    if(inners) {
+      fragment = this.templateTestCaseRows[openId][TemplateLogLog.INNER][logRow.type].cloneNode(true);
+      node = fragment.firstChild;
+      const outerNode = new ScrollListNode(node, this, checked ? 20 : 0);
+      scrollListNodes.push(outerNode);
+      outerNode.addEventListener(`log-filter-type-event-${LogType.pureNames[logRow.type]}`, function(event) {
+        this.height = event.detail.checked ? 20 : 0;
+      });
+      const innerNode = new ScrollListNode(fragment.childNodes[1], this, 0);
+      scrollListNodes.push(innerNode);
+      let created = false;
+      const innerParentNode = fragment.childNodes[1].firstChild;
+      const target = node.childNodes[1];
+      const arrowTarget = node.childNodes[1].childNodes[1].firstChild;
+      const innerTarget = node.nextSibling;
+      node.childNodes[1].childNodes[1].addEventListener('click', (evt) => {
+       ddb.info('click 1'); 
+        innerNode.height = 35;
+        cbResize(outerNode.index);
+        if(!created) {
+          created = true;
+          if(!Array.isArray(inners)) {
+            this._createInner(inners, innerParentNode, true);
+          }
+          else {
+            inners.forEach((inner) => {
+              this._createInner(inner, innerParentNode, true);
+            });
+          }
+        }
+        this._toggleEvent(evt, target, arrowTarget, innerTarget);
+      }, false);
+      if(open) {
+        created = true;
+        if(!Array.isArray(inners)) {
+          this._createInner(inners, innerParentNode, open);
+        }
+        else {
+          inners.forEach((inner) => {
+            this._createInner(inner, innerParentNode, open);
+          });
+        }
+      }
+    }
+    else {
+      node = this.templateTestCaseRows[openId][TemplateLogLog.OUTER][logRow.type].cloneNode(true);
+      const outerNode = new ScrollListNode(node, this, checked ? 20 : 0);
+      scrollListNodes.push(outerNode);
+      outerNode.addEventListener(`log-filter-type-event-${LogType.pureNames[logRow.type]}`, function(event) {
+        this.height = event.detail.checked ? 20 : 0;
+      });
+    }
+    node.firstChild.lastChild.nodeValue = logId;
+    if(LogType.IP === logRow.type) {
+      node.childNodes[1].firstChild.textContent += LogDataAction.LOG_SIGN[logRow.data ? logRow.data.id : 0];
+    }
+    node.childNodes[2].lastChild.nodeValue = `${new Date(logRow.date.date).toUTCString()} : ${logRow.date.milliSeconds}`;
+    node.childNodes[3].firstChild.lastChild.nodeValue = logRow.actor;
+    node.childNodes[3].firstChild.setAttribute('href', `/actor-editor/${logRow.actorPath}`);
+    node.childNodes[4].lastChild.nodeValue = logRow.log;
+    node.childNodes[5].firstChild.lastChild.nodeValue = `${logRow.fileName}:${logRow.lineNumber}`;
+    if('server' === logRow.sourceType) {
+      node.childNodes[5].firstChild.setAttribute('href', `/code-editor/project/${logRow.fileName}?line=${logRow.lineNumber}&type=${logRow.type}`);
+    }
+    else if('actor' === logRow.sourceType) {
+      node.childNodes[5].firstChild.setAttribute('href', `/actor-editor/${logRow.fileName}?line=${logRow.lineNumber}&type=${logRow.type}`);
+    }
+    else if('stack' === logRow.sourceType) {
+      node.childNodes[5].firstChild.setAttribute('href', `/stack-editor/${logRow.fileName}?line=${logRow.lineNumber}&type=${logRow.type}`);
+    }
+    return scrollListNodes;
+  }*/
+  
+  /*open(nodeData) {
+    nodeData.open = true;
+    this._resize(nodeData);
+    nodeData.cbResize(nodeData.index);
+  }
+  
+  close(nodeData) {
+    nodeData.open = false;
+    this.resize(nodeData);
+    nodeData.cbResize(nodeData.index);
+  }
+  
+  _resize(nodeData) {
+    nodeData.height = nodeData.height + 20;
+  }*/
+  
+  
+    
+  /*_createTemplateRowWithInner(logTypeId, openId) {
+    const row = document.createElement('div');
+    row.classList.add(`comp_layer_${LogType.csses[logTypeId]}`);
+    row.classList.add('comp_layer_log_row');
+    const columns = this.templateTestCaseColumns[openId][logTypeId].cloneNode(true);
+    row.appendChild(columns);
+   // row.appendChild(this.templateTestCaseInnerRows[openId][logTypeId].cloneNode(true));
+    return row;
+    //const fragment = document.createDocumentFragment();
+    //fragment.appendChild(row);
+    //fragment.appendChild();
+    //return fragment;
+  }*/
+  
+  /*_innerClickHandler() {
+    
+  }*/
+  
+  /*_createInner(inner, parent, filterOpen) {
+    const inners = inner.inners;
+    if(0 !== inners.length) {
+      if(inner.open) {
+        parent.appendChild(this.templateInnerWithInnerObjectOpen.cloneNode(true));
+      }
+      else {
+        parent.appendChild(this.templateInnerWithInnerObjectClosed.cloneNode(true));
+      }
+      const div = parent.lastChild.childNodes[1].appendChild(this.templateDynamicInnerWithInner.cloneNode(true));
+      inner.logParts.forEach((innerPart) => {
+        if(LogPartType.TEXT === innerPart.type) {
+          div.appendChild(this.templateDynamicInnerText.cloneNode(true));
+          div.lastChild.firstChild.nodeValue = innerPart.text;
+        }
+        else if(LogPartType.REF === innerPart.type) {
+          div.appendChild(this.templateDynamicInnerRef.cloneNode(true));
+          div.lastChild.setAttribute('href', innerPart.ref);
+          div.lastChild.firstChild.nodeValue = innerPart.text;
+        }
+      });
+      let created = false;
+      const innerParentNode = parent.lastChild.lastChild;
+      const target = parent.lastChild;
+      const arrowTarget = target.firstChild.firstChild;
+      const innerTarget = target.lastChild;
+      parent.lastChild.firstChild.addEventListener('click', (evt) => {
+        ddb.info('click 2');
+        if(!created) {
+          created = true;
+          inners.forEach((inner) => {
+            this._createInner(inner, innerParentNode, filterOpen);
+          });
+        }
+        this._toggleEvent(evt, target, arrowTarget, innerTarget);
+      }, false);
+      if(filterOpen) {
+        created = true;
+        inners.forEach((inner) => {
+          this._createInner(inner, parent.lastChild.lastChild, filterOpen);
+        });
+      }
+    }
+    else {
+      const div = parent.appendChild(this.templateDynamicInner.cloneNode(true));
+      inner.logParts.forEach((innerPart) => {
+        if(LogPartTypeLogPartType.TEXT === innerPart.type) {
+          div.appendChild(this.templateDynamicInnerText.cloneNode(true));
+          div.lastChild.lastChild.nodeValue = innerPart.text;
+        }
+        else if(LogPartType.REF === innerPart.type) {
+          div.appendChild(this.templateDynamicInnerRef.cloneNode(true));
+          div.lastChild.setAttribute('href', innerPart.ref);
+          div.lastChild.lastChild.nodeValue = innerPart.text;
+        }
+        else if(LogPartType.ERROR === innerPart.type) {
+          const innerData = innerPart.text;
+          const errorDiv = div.appendChild(this.templateError.cloneNode(true));
+          errorDiv.firstChild.nodeValue = innerData.error;
+          innerData.rows.forEach((row) => {
+            if(row.ref) {
+              errorDiv.appendChild(this.templateErrorRowRef.cloneNode(true));
+              errorDiv.lastChild.firstChild.nodeValue = `  at ${row.func} - `;
+              errorDiv.lastChild.lastChild.lastChild.nodeValue = `${row.fileName}:${row.lineNumber}`;
+              
+              if('server' === row.sourceType) {
+                errorDiv.lastChild.lastChild.setAttribute('href', `/code-editor/project/${row.fileName}?line=${row.lineNumber}&type=${LogType.ERROR}`);
+              }
+              else if('actor' === row.sourceType) {
+                errorDiv.lastChild.lastChild.setAttribute('href', `/actor-editor/${row.fileName}?line=${row.lineNumber}&type=${LogType.ERROR}`);
+              }
+              else if('stack' === row.sourceType) {
+                errorDiv.lastChild.lastChild.setAttribute('href', `/stack-editor/${row.fileName}?line=${row.lineNumber}&type=${LogType.ERROR}`);
+              }
+            }
+            else {
+              errorDiv.appendChild(this.templateErrorRowRef.cloneNode(true));
+              errorDiv.lastChild.firstChild.nodeValue = `  at ${row.func} - ${row.fileName}`;
+            }
+          });
+        }
+        else if(LogPartType.BUFFER === innerPart.type) {
+          //ddb.error('LogPartType.BUFFER: Not Implemented for log.', innerPart);
+        }
+      });
+    }
+  }*/
+  
+  //_toggleEvent(evt, target, arrowTarget, innerTarget, cb) {
+  /*_toggleEvent(evt, target, arrowTarget, innerTarget) {
+    if('closed' === target.getAttribute('data-inner')) {
+      target.setAttribute('data-inner', 'open');
+      arrowTarget.setAttribute('transform', 'rotate(45 6 6)');
+      innerTarget.classList.remove('inner_closed');
+    //  cb && cb(true);
+    }
+    else {
+      target.setAttribute('data-inner', 'closed');
+      arrowTarget.removeAttribute('transform');
+      innerTarget.classList.add('inner_closed');
+   //   cb && cb(false);
+    }
+  }
+  
+  _createTemplateRowInner(logTypeId, open) {
+    const row = document.createElement('div');
+    row.classList.add(LogType.csses[logTypeId]);
+    row.classList.add('comp_layer_log_inner');
+    if(!open) {
+      row.classList.add('inner_closed');
+    }
+    return row;
+  }
+  
+  
+  
+  _createTemplateInner(withInner, open, text) {
+    const div = document.createElement('div');
+    div.classList.add('comp_layer_log_inner');
+    if(withInner) {
+      if(open) {
+        div.setAttribute('data-inner', 'open');
+   	    div.appendChild(this.templateInnerImageOpen.cloneNode(true));
+        div.firstChild.firstChild.setAttribute('transform', 'rotate(45 6 6)');
+      }
+      else {
+        div.setAttribute('data-inner', 'closed');
+   	    div.appendChild(this.templateInnerImageClosed.cloneNode(true));
+      }
+    }
+    if(text) {
+      const pre = div.appendChild(document.createElement('pre'));
+      pre.classList.add('comp_layer_log_inner');
+      pre.appendChild(document.createTextNode(''));
+    }
+    else {
+      const divInner = div.appendChild(document.createElement('div'));
+      divInner.classList.add('comp_layer_log_inner');
+    }
+    if(withInner) {
+      const inner = div.appendChild(document.createElement('div'));
+      inner.classList.add('comp_layer_log_inner');
+      if(!open) {
+        inner.classList.add('inner_closed');
+      }
+    }
+    return div;
+  }
+  
+  _createTemplateDynamicInner(withInner) {
+    const div = document.createElement('div');
+    if(withInner) {
+      div.classList.add('inner_dynamic_with_inner');
+    }
+    else {
+      div.classList.add('inner_dynamic');
+    }
+    return div;
+  }
+  
+  _createTemplateDynamicInnerText() {
+    const pre = document.createElement('pre');
+    pre.classList.add('comp_layer_log_inner');
+    pre.appendChild(document.createTextNode(''));
+    return pre;
+  }
+  
+  _createTemplateDynamicInnerRef() {
+    const a = document.createElement('a');
+    a.classList.add('comp_layer_log_inner');
+    a.setAttribute('href', '[[ref]]');
+    a.setAttribute('target', '_blank');
+    a.appendChild(document.createTextNode(''));
+    return a;
+  }*/
+  
+  /*_createTemplateError() {
+    const div = document.createElement('div');
+    div.appendChild(document.createTextNode(''));
+    return div;
+  }*/
+  
+  /*_createTemplateErrorRowRef() {
+    const pre = document.createElement('pre');
+    pre.appendChild(document.createTextNode(''));
+    pre.classList.add('comp_layer_log_inner');
+    const a = pre.appendChild(document.createElement('a'));
+    a.classList.add('comp_layer_log_inner');
+    a.setAttribute('href', '[[ref]]');
+    a.appendChild(document.createTextNode(''));
+    return pre;
+  }*/
+  
+  /*_createTemplateErrorRowText() {
+    const pre = document.createElement('pre');
+    pre.appendChild(document.createTextNode(''));
+    pre.classList.add('comp_layer_log_inner');
+    return pre;
+  }*/
+}
+
+
+module.exports = TemplateLogLog;