From 44818b908f3504dd7ebaa6fcde7293854ba37bc9 Mon Sep 17 00:00:00 2001 From: Charan Girijala <82193104+charangirijala@users.noreply.github.com> Date: Sat, 4 Jan 2025 15:12:01 +0530 Subject: [PATCH] =?UTF-8?q?Resizable=20cols=20added=20for=20call=20tree=20?= =?UTF-8?q?=F0=9F=8C=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/logFileProcessor/logFileProcessor.js | 3 + src/modules/my/appHome/appHome.html | 2 + .../my/appNavigation/appNavigation.html | 2 +- src/modules/my/appNavigation/appNavigation.js | 45 +- src/modules/ui/pasteLog/pasteLog.html | 4 + src/modules/ui/pasteLog/pasteLog.js | 5 + src/modules/ui/utilityPanel/utilityPanel.css | 7 +- src/modules/ui/utilityPanel/utilityPanel.html | 565 +++++++++--------- src/modules/ui/utilityPanel/utilityPanel.js | 223 ++++++- 9 files changed, 549 insertions(+), 307 deletions(-) diff --git a/src/modules/main/logFileProcessor/logFileProcessor.js b/src/modules/main/logFileProcessor/logFileProcessor.js index b8631d4..be211f5 100644 --- a/src/modules/main/logFileProcessor/logFileProcessor.js +++ b/src/modules/main/logFileProcessor/logFileProcessor.js @@ -220,6 +220,9 @@ export default class LogFileProcessor extends LightningElement { //publish fileData to MessageChannel this.publishFileMetadata(); // parseResultToTree(this.result); + + //navigate to log viewer + publish('appChannel', { activeApp: 'Log Viewer' }); console.log('Total stdExps: ', this.stdExpCount); console.log('Total exeAnonys: ', this.execAnonyCount); console.log('Total CodeUnits Count: ', this.codeUnitsCount); diff --git a/src/modules/my/appHome/appHome.html b/src/modules/my/appHome/appHome.html index 3add34b..0e6115c 100644 --- a/src/modules/my/appHome/appHome.html +++ b/src/modules/my/appHome/appHome.html @@ -8,5 +8,7 @@ + + diff --git a/src/modules/my/appNavigation/appNavigation.html b/src/modules/my/appNavigation/appNavigation.html index 75932c3..eebbf18 100644 --- a/src/modules/my/appNavigation/appNavigation.html +++ b/src/modules/my/appNavigation/appNavigation.html @@ -44,7 +44,7 @@ { + this.activeApp = data.activeApp; + this.navItems.map((item) => { + if (item.label === this.activeApp) { + item.classCombination = this.classCombinationActive; + } else { + item.classCombination = this.classCombinationInactive; + } + return item; + }); + }); } @track navItems = [ { label: 'Home', + id: 'home', classCombination: 'navItem slds-context-bar__item slds-shrink-none slds-is-active' }, { label: 'Log Viewer', + id: 'logViewer', classCombination: 'navItem slds-context-bar__item slds-shrink-none' } ]; @@ -34,19 +47,33 @@ export default class AppNavigation extends LightningElement { handleNavigationItemClick(event) { event.preventDefault(); // console.log(event.currentTarget.dataset.navitem); - const selectedIdx = event.currentTarget.dataset.navitem; - for (let i = 0; i < this.navItems.length; i++) { - if (i === parseInt(selectedIdx, 10)) { + const selectedNav = event.currentTarget.dataset.navitem; + // for (let i = 0; i < this.navItems.length; i++) { + // if (i === parseInt(selectedIdx, 10)) { + // const payload = { + // activeApp: this.navItems[i].label + // }; + // publish('appChannel', payload); + // this.navItems[i].classCombination = this.classCombinationActive; + // } else { + // this.navItems[i].classCombination = + // this.classCombinationInactive; + // } + // } + + this.navItems.map((item) => { + if (item.id === selectedNav) { + item.classCombination = this.classCombinationActive; const payload = { - activeApp: this.navItems[i].label + activeApp: item.label }; publish('appChannel', payload); - this.navItems[i].classCombination = this.classCombinationActive; } else { - this.navItems[i].classCombination = - this.classCombinationInactive; + item.classCombination = this.classCombinationInactive; } - } + return item; + }); + // console.log(JSON.stringify(this.navItems)); } } diff --git a/src/modules/ui/pasteLog/pasteLog.html b/src/modules/ui/pasteLog/pasteLog.html index 9cdf580..95dd235 100644 --- a/src/modules/ui/pasteLog/pasteLog.html +++ b/src/modules/ui/pasteLog/pasteLog.html @@ -39,6 +39,10 @@

diff --git a/src/modules/ui/pasteLog/pasteLog.js b/src/modules/ui/pasteLog/pasteLog.js index dec6f6c..beee789 100644 --- a/src/modules/ui/pasteLog/pasteLog.js +++ b/src/modules/ui/pasteLog/pasteLog.js @@ -20,6 +20,11 @@ export default class PasteLog extends LightningElement { const logData = this.logText.split(/\r\n|\n/); console.log('paste data length: ', logData.length); publish('logtext', logData); + + this.logText = ''; + this.template.querySelector('textarea').value = ''; + } else if (this.logText === '') { + publish('logtext', []); } } } diff --git a/src/modules/ui/utilityPanel/utilityPanel.css b/src/modules/ui/utilityPanel/utilityPanel.css index d970d85..b22d59c 100644 --- a/src/modules/ui/utilityPanel/utilityPanel.css +++ b/src/modules/ui/utilityPanel/utilityPanel.css @@ -6,6 +6,12 @@ left: 0.5rem; right: 0.5rem; bottom: 2.5rem; + height: 50%; +} + +.tableScroll { + overflow: auto; + overflow-y: hidden; } .line-length { @@ -27,7 +33,6 @@ td { .slds-th__action { padding-top: 0.1rem; padding-bottom: 0.1rem; - height: 1.5rem; } th { diff --git a/src/modules/ui/utilityPanel/utilityPanel.html b/src/modules/ui/utilityPanel/utilityPanel.html index 4c2c218..00c74a2 100644 --- a/src/modules/ui/utilityPanel/utilityPanel.html +++ b/src/modules/ui/utilityPanel/utilityPanel.html @@ -33,325 +33,304 @@

Call Stack

- - - - - - - - -
-
-
- Name -
-
-
- - - - -
- 		-
-
- Type -
-
-
- - - - -
- 		-
-
- Line Duration -
-
-
- - - - -
- 		-
-
- SOQL Count -
-
-
- - - - -
- 		-
-
- DML Count -
-
-
- - - - -
- 		-
-
+ + + + - - - - + +
- Total Time (ms) - - -
- - - - -
-
+
+
diff --git a/src/modules/ui/utilityPanel/utilityPanel.js b/src/modules/ui/utilityPanel/utilityPanel.js index f7057e5..0fddf13 100644 --- a/src/modules/ui/utilityPanel/utilityPanel.js +++ b/src/modules/ui/utilityPanel/utilityPanel.js @@ -7,6 +7,13 @@ export default class UtilityPanel extends LightningElement { isLoaded = false; appChannelSub = null; activeApp = 'Log Viewer'; + isWidthChanged = false; + nameWidth; + typeWidth; + lineDurationWidth; + SOQLcountWidth; + DMLcountWidth; + CPUtimeWidth; get isLogViewer() { return this.activeApp === 'Log Viewer'; } @@ -15,7 +22,6 @@ export default class UtilityPanel extends LightningElement { if (!this.appChannelSub) { this.appChannelSub = subscribe('appChannel', (data) => { this.activeApp = data.activeApp; - // console.log('activeApp: ', this.activeApp); }); } } @@ -30,6 +36,7 @@ export default class UtilityPanel extends LightningElement { return node.level === 1; }); } + this.setColWidths(); console.log('renderedCallback from utilitypanel'); } nodesMaster = []; @@ -59,6 +66,7 @@ export default class UtilityPanel extends LightningElement { this.collapseNode(nodeId, nodeMap); // Convert map back to array this.nowShowingNodes = Array.from(nodeMap.values()); + console.log('nowShowingNodes', this.nowShowingNodes); } } @@ -98,7 +106,216 @@ export default class UtilityPanel extends LightningElement { this.dispatchEvent(new CustomEvent('closepanel')); } - handleResize(event) { - console.log('resize', event.target); + //FOR HANDLING THE HORIZONTAL SCROLL OF TABLE MANUALLY + tableOuterDivScrolled(event) { + this._tableViewInnerDiv = + this.template.querySelector('.tableViewInnerDiv'); + if (this._tableViewInnerDiv) { + if ( + !this._tableViewInnerDivOffsetWidth || + this._tableViewInnerDivOffsetWidth === 0 + ) { + this._tableViewInnerDivOffsetWidth = + this._tableViewInnerDiv.offsetWidth; + } + this._tableViewInnerDiv.style = + 'width:' + + (event.currentTarget.scrollLeft + + this._tableViewInnerDivOffsetWidth) + + 'px;' + + this.tableBodyStyle; + } + this.tableScrolled(event); + } + + tableScrolled(event) { + if (this.enableInfiniteScrolling) { + if ( + event.target.scrollTop + event.target.offsetHeight >= + event.target.scrollHeight + ) { + this.dispatchEvent( + new CustomEvent('showmorerecords', { + bubbles: true + }) + ); + } + } + if (this.enableBatchLoading) { + if ( + event.target.scrollTop + event.target.offsetHeight >= + event.target.scrollHeight + ) { + this.dispatchEvent( + new CustomEvent('shownextbatch', { + bubbles: true + }) + ); + } + } + } + + //#region ***************** RESIZABLE COLUMNS *************************************/ + handlemouseup(e) { + this._tableThColumn = undefined; + this._tableThInnerDiv = undefined; + this._pageX = undefined; + this._tableThWidth = undefined; + } + + handlemousedown(e) { + if (!this._initWidths) { + this._initWidths = []; + let tableThs = this.template.querySelectorAll( + 'table thead .dv-dynamic-width' + ); + tableThs.forEach((th) => { + this._initWidths.push(th.style.width); + }); + } + + this._tableThColumn = e.target.parentElement; + this._tableThInnerDiv = e.target.parentElement; + while (this._tableThColumn.tagName !== 'TH') { + this._tableThColumn = this._tableThColumn.parentNode; + } + while (!this._tableThInnerDiv.className.includes('slds-cell-fixed')) { + this._tableThInnerDiv = this._tableThInnerDiv.parentNode; + } + // console.log( + // 'handlemousedown this._tableThColumn.tagName => ', + // this._tableThColumn.tagName + // ); + this._pageX = e.pageX; + + this._padding = this.paddingDiff(this._tableThColumn); + + this._tableThWidth = this._tableThColumn.offsetWidth - this._padding; + // console.log( + // 'handlemousedown this._tableThColumn.tagName => ', + // this._tableThColumn.tagName + // ); + } + + handlemousemove(e) { + // console.log('mousemove this._tableThColumn => ', this._tableThColumn); + if (this._tableThColumn && this._tableThColumn.tagName === 'TH') { + this._diffX = e.pageX - this._pageX; + + this.template.querySelector('table').style.width = + this.template.querySelector('table') - this._diffX + 'px'; + const newWidth = this._tableThWidth + this._diffX; + this._tableThColumn.style.width = newWidth + 'px'; + this._tableThInnerDiv.style.width = this._tableThColumn.style.width; + const colname = this._tableThColumn.dataset.colname; + this.setColWidthsChange(colname, newWidth); + let tableThs = this.template.querySelectorAll( + 'table thead .dv-dynamic-width' + ); + let tableBodyRows = + this.template.querySelectorAll('table tbody tr'); + let tableBodyTds = this.template.querySelectorAll( + 'table tbody .dv-dynamic-width' + ); + tableBodyRows.forEach((row) => { + let rowTds = row.querySelectorAll('.dv-dynamic-width'); + rowTds.forEach((td, ind) => { + rowTds[ind].style.width = tableThs[ind].style.width; + }); + }); + } + } + + handledblclickresizable() { + let tableThs = this.template.querySelectorAll( + 'table thead .dv-dynamic-width' + ); + let tableBodyRows = this.template.querySelectorAll('table tbody tr'); + tableThs.forEach((th, ind) => { + th.style.width = this._initWidths[ind]; + th.querySelector('.slds-cell-fixed').style.width = + this._initWidths[ind]; + }); + tableBodyRows.forEach((row) => { + let rowTds = row.querySelectorAll('.dv-dynamic-width'); + rowTds.forEach((td, ind) => { + rowTds[ind].style.width = this._initWidths[ind]; + }); + }); + } + + paddingDiff(col) { + if (this.getStyleVal(col, 'box-sizing') === 'border-box') { + return 0; + } + + this._padLeft = this.getStyleVal(col, 'padding-left'); + this._padRight = this.getStyleVal(col, 'padding-right'); + return parseInt(this._padLeft, 10) + parseInt(this._padRight, 10); + } + + getStyleVal(elm, css) { + return window.getComputedStyle(elm, null).getPropertyValue(css); + } + + setColWidths() { + const panelWidth = this.template + .querySelector('.utility-panel') + .getBoundingClientRect().width; + const namecol = this.template.querySelectorAll('.col-name'); + const typecol = this.template.querySelectorAll('.col-type'); + const lineDurationcol = + this.template.querySelectorAll('.col-lineDuration'); + const SOQLcountcol = this.template.querySelectorAll('.col-SOQLcount'); + const DMLcountcol = this.template.querySelectorAll('.col-DMLcount'); + const CPUtimecol = this.template.querySelectorAll('.col-CPUtime'); + + if (this.isWidthChanged === false) { + this.nameWidth = panelWidth * 0.48; + this.typeWidth = panelWidth * 0.1; + this.lineDurationWidth = panelWidth * 0.1; + this.SOQLcountWidth = panelWidth * 0.1; + this.DMLcountWidth = panelWidth * 0.1; + this.CPUtimeWidth = panelWidth * 0.1; + this.isWidthChanged = true; + } + + namecol.forEach((col) => { + col.style.width = this.nameWidth + 'px'; + }); + + typecol.forEach((col) => { + col.style.width = this.typeWidth + 'px'; + }); + + lineDurationcol.forEach((col) => { + col.style.width = this.lineDurationWidth + 'px'; + }); + + SOQLcountcol.forEach((col) => { + col.style.width = this.SOQLcountWidth + 'px'; + }); + DMLcountcol.forEach((col) => { + col.style.width = this.DMLcountWidth + 'px'; + }); + CPUtimecol.forEach((col) => { + col.style.width = this.CPUtimeWidth + 'px'; + }); + } + + setColWidthsChange(colname, width) { + if (colname === 'name') { + this.nameWidth = width; + } else if (colname === 'type') { + this.typeWidth = width; + } else if (colname === 'lineDuration') { + this.lineDurationWidth = width; + } else if (colname === 'SOQLcount') { + this.SOQLcountWidth = width; + } else if (colname === 'DMLcount') { + this.DMLcountWidth = width; + } else if (colname === 'CPUtime') { + this.CPUtimeWidth = width; + } } }