From 43f42fa7e19840af2b9da23d77803ad08e9d413d Mon Sep 17 00:00:00 2001
From: Charan Girijala <82193104+charangirijala@users.noreply.github.com>
Date: Tue, 14 Jan 2025 15:27:46 +0530
Subject: [PATCH] =?UTF-8?q?UnitView=20implemented=20with=20reset=20button?=
 =?UTF-8?q?=20functionality=20=F0=9F=94=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/main/logViewer/logViewer.html     |  11 +-
 src/modules/main/logViewer/logViewer.js       | 203 ++++++++++++++----
 src/modules/my/appHome/appHome.js             |   2 +-
 src/modules/ui/search/search.js               |   4 +-
 src/modules/ui/utilityPanel/utilityPanel.css  |  19 ++
 src/modules/ui/utilityPanel/utilityPanel.html |   9 +-
 src/modules/ui/utilityPanel/utilityPanel.js   |  15 ++
 7 files changed, 210 insertions(+), 53 deletions(-)

diff --git a/src/modules/main/logViewer/logViewer.html b/src/modules/main/logViewer/logViewer.html
index 896f629..b4920ff 100644
--- a/src/modules/main/logViewer/logViewer.html
+++ b/src/modules/main/logViewer/logViewer.html
@@ -28,11 +28,12 @@
                                                     class="slds-page-header__name-title"
                                                 >
                                                     <h1>
-                                                        <span>Log Viewer</span
+                                                        <span
+                                                            >{lvTitleHead}</span
                                                         ><span
                                                             class="slds-page-header__title slds-truncate"
-                                                            title={fileMetadata.fileName}
-                                                            >{fileMetadata.fileName}</span
+                                                            title={lvTitle}
+                                                            >{lvTitle}</span
                                                         >
                                                     </h1>
                                                 </div>
@@ -167,6 +168,7 @@ <h1>
                                                                     <button
                                                                         class="slds-button slds-button_icon-border action-bar-action-refreshReport reportAction report-action-refreshReport filtersButton"
                                                                         type="button"
+                                                                        onclick={resetViewer}
                                                                     >
                                                                         <svg
                                                                             aria-hidden="true"
@@ -554,7 +556,7 @@ <h1>
                                                                                         >
                                                                                             <ui-search
                                                                                                 onclosesearch={handleSearch}
-                                                                                                logtobe-filtered={fileData}
+                                                                                                logtobe-filtered={dataInUse}
                                                                                                 onmatchchange={goToMatch}
                                                                                                 onsearchres={processSearchRes}
                                                                                                 onnores={processNoSearchRes}
@@ -842,6 +844,7 @@ <h1>
                 <ui-utility-panel
                     panel-toggle={callStackToggle}
                     onclosepanel={closeCallStack}
+                    onunitview={openUnitView}
                     data={result}
                 ></ui-utility-panel>
             </template>
diff --git a/src/modules/main/logViewer/logViewer.js b/src/modules/main/logViewer/logViewer.js
index 69b17e7..674c2e9 100644
--- a/src/modules/main/logViewer/logViewer.js
+++ b/src/modules/main/logViewer/logViewer.js
@@ -4,9 +4,16 @@ import filterData from 'services/filters';
 import { publish, subscribe } from 'services/pubsub';
 
 export default class logViewer extends LightningElement {
+    isUnitView = false;
+    unitViewBoundaries = {
+        startTime: 0,
+        endTime: 0
+    };
     errorCenterX = 0;
     errors = [];
     errorPopoverOpen = false;
+    lvTitle = '';
+    lvTitleHead = 'Log Viewer';
     filterChannelSub = null;
     goToPlaceholder = 'Go to line';
     filterHasLabel = true;
@@ -71,6 +78,10 @@ export default class logViewer extends LightningElement {
                     }
                     if (data.fileMetadata) {
                         this.fileMetadata = data.fileMetadata;
+                        this.lvTitle =
+                            this.fileMetadata.fileName !== ''
+                                ? this.fileMetadata.fileName
+                                : 'Log';
                         this.errors = data.fileMetadata.errors;
                     }
 
@@ -146,13 +157,13 @@ export default class logViewer extends LightningElement {
             if (this.LineNumMap.size > 0) {
                 if (this.LineNumMap.has(this.pageNumber)) {
                     const highEle = this.LineNumMap.get(this.pageNumber);
-                    highEle.forEach((ele) => {
+                    highEle.forEach(({ logLineNum, pageLineNum }) => {
                         const element = this.template.querySelector(
-                            `[data-logid="${ele}"]`
+                            `[data-logid="${logLineNum}"]`
                         );
 
                         if (element) {
-                            if (this.LineNumFocus !== ele) {
+                            if (this.LineNumFocus !== pageLineNum) {
                                 element.style.backgroundColor =
                                     'rgb(250, 255, 189)';
                             } else {
@@ -273,8 +284,41 @@ export default class logViewer extends LightningElement {
         });
         this.currentEditFilterIdx = null;
         this.previousFilters = JSON.parse(JSON.stringify(this.activeFilters));
-        this.dataInUse = filterData(this.activeFilters, this.fileData);
-        this.refreshPages();
+        this.filterDataHelper();
+    }
+
+    filterDataHelper() {
+        if (
+            this.activeFilters.length > 0 &&
+            this.fileData.length > 0 &&
+            this.fileData !== undefined &&
+            this.fileData !== null
+        ) {
+            if (this.isUnitView) {
+                this.dataInUse = filterData(
+                    this.activeFilters,
+                    this.fileData.slice(
+                        this.unitViewBoundaries.startTime - 1,
+                        this.unitViewBoundaries.endTime
+                    )
+                );
+            } else {
+                this.dataInUse = filterData(this.activeFilters, this.fileData);
+            }
+
+            // console.log('filtered data: ', this.dataInUse);
+            this.refreshPages();
+        } else {
+            if (this.isUnitView) {
+                this.dataInUse = this.fileData.slice(
+                    this.unitViewBoundaries.startTime - 1,
+                    this.unitViewBoundaries.endTime
+                );
+            } else {
+                this.dataInUse = this.fileData;
+            }
+            this.refreshPages();
+        }
     }
 
     addFilter() {
@@ -315,7 +359,13 @@ export default class logViewer extends LightningElement {
         this.handlePopoverClose();
         this.activeFilters = [];
         this.previousFilters = [];
-        this.dataInUse = this.fileData;
+
+        this.dataInUse = this.isUnitView
+            ? this.fileData.slice(
+                  this.unitViewBoundaries.startTime - 1,
+                  this.unitViewBoundaries.endTime
+              )
+            : this.fileData;
         this.refreshPages();
     }
 
@@ -369,19 +419,7 @@ export default class logViewer extends LightningElement {
         this.previousFilters = JSON.parse(JSON.stringify(this.activeFilters));
 
         //call filterData from filters
-        if (
-            this.activeFilters.length > 0 &&
-            this.fileData.length > 0 &&
-            this.fileData !== undefined &&
-            this.fileData !== null
-        ) {
-            this.dataInUse = filterData(this.activeFilters, this.fileData);
-            // console.log('filtered data: ', this.dataInUse);
-            this.refreshPages();
-        } else {
-            this.dataInUse = this.fileData;
-            this.refreshPages();
-        }
+        this.filterDataHelper();
     }
 
     closeFilterPopoverOnClick(event) {
@@ -536,13 +574,7 @@ export default class logViewer extends LightningElement {
 
     //################# FILTERS END ############################################################
 
-    handleCallStackChange() {
-        this.callStackToggle = !this.callStackToggle;
-    }
-    closeCallStack() {
-        this.callStackToggle = false;
-    }
-
+    //################################# SEARCH FUNCTIONALITY ##################################
     handleSearch() {
         this.isSearching = !this.isSearching;
         if (this.isSearching === false) {
@@ -557,11 +589,26 @@ export default class logViewer extends LightningElement {
         if (Array.isArray(lineNumbers)) {
             lineNumbers.forEach((l) => {
                 if (this.linesPerPage !== 0) {
-                    const pNum = Math.ceil(l / this.linesPerPage);
+                    let pageLineNum = 0;
+                    const dataIndex = this.dataInUse.findIndex(
+                        (data) => data.lineNumber === l
+                    );
+                    if (dataIndex !== -1) {
+                        pageLineNum = dataIndex + 1;
+                    }
+                    const pNum = Math.ceil(pageLineNum / this.linesPerPage);
                     if (this.LineNumMap.has(pNum)) {
-                        this.LineNumMap.get(pNum).push(l);
+                        this.LineNumMap.get(pNum).push({
+                            logLineNum: l,
+                            pageLineNum: pageLineNum
+                        });
                     } else {
-                        this.LineNumMap.set(pNum, [l]);
+                        this.LineNumMap.set(pNum, [
+                            {
+                                logLineNum: l,
+                                pageLineNum: pageLineNum
+                            }
+                        ]);
                     }
                 }
             });
@@ -569,28 +616,14 @@ export default class logViewer extends LightningElement {
         // console.log('Map: ', this.LineNumMap);
     }
 
-    goToMatch(event) {
-        const lineNumber = event.detail;
-        // console.log('lineNumber: ', lineNumber);
-        this.goToPage(lineNumber);
-    }
-
-    goToPage(lineNumber) {
-        //calculate the pagenumber
-        if (this.linesPerPage <= 0 || lineNumber <= 0) return;
-        this.LineNumFocus = lineNumber;
-        this.pageNumber = Math.ceil(lineNumber / this.linesPerPage);
-        this.calculations();
-    }
-
     processNoSearchRes() {
         this.LineNumFocus = null;
         if (this.LineNumMap.size > 0) {
             if (this.LineNumMap.has(this.pageNumber)) {
                 const highEle = this.LineNumMap.get(this.pageNumber);
-                highEle.forEach((ele) => {
+                highEle.forEach(({ logLineNum, pageLineNum }) => {
                     const element = this.template.querySelector(
-                        `[data-logid="${ele}"]`
+                        `[data-logid="${logLineNum}"]`
                     );
                     if (element) {
                         element.style.backgroundColor = 'rgba(0, 0, 0, 0)';
@@ -601,6 +634,86 @@ export default class logViewer extends LightningElement {
         this.LineNumMap = new Map();
     }
 
+    goToMatch(event) {
+        const lineNumber = event.detail;
+        let pageLineNum = 0;
+        // console.log('lineNumber: ', lineNumber);
+        const dataIndex = this.dataInUse.findIndex(
+            (data) => data.lineNumber === lineNumber
+        );
+        if (dataIndex !== -1) {
+            pageLineNum = dataIndex + 1;
+        }
+        // console.log(
+        //     'this.dataInUse: ',
+        //     this.dataInUse,
+        //     'linenumber: ',
+        //     pageLineNum
+        // );
+        this.goToPage(pageLineNum);
+    }
+
+    goToPage(lineNumber) {
+        //calculate the pagenumber
+        if (this.linesPerPage <= 0 || lineNumber <= 0) return;
+        this.LineNumFocus = lineNumber;
+        this.pageNumber = Math.ceil(lineNumber / this.linesPerPage);
+        this.calculations();
+    }
+
+    //################################# SEARCH FUNCTIONALITY END ##############################
+    openUnitView(event) {
+        // console.log('from logviewer', event.detail);
+        this.isUnitView = true;
+        const duration = event.detail.duration;
+        const name = event.detail.name;
+        const [startTimeStr, endTimeStr] = duration
+            .split('-')
+            .map((str) => str.trim());
+
+        // Convert string timestamps to numbers
+        const startTime = parseInt(startTimeStr, 10);
+        const endTime = parseInt(endTimeStr, 10);
+
+        this.unitViewBoundaries.startTime = startTime;
+        this.unitViewBoundaries.endTime = endTime;
+
+        if (isNaN(startTime) || isNaN(endTime)) {
+            console.warn(
+                'Invalid unitDuration format uniqueId and duration not generated',
+                event.detail
+            );
+            return;
+        }
+        this.lvTitle = name;
+        this.lvTitleHead = 'Now Showing';
+        this.dataInUse = this.fileData.slice(startTime - 1, endTime);
+        if (this.activeFilters.length > 0) {
+            this.dataInUse = filterData(this.activeFilters, this.dataInUse);
+        }
+        this.refreshPages();
+    }
+
+    resetViewer() {
+        this.dataInUse = this.fileData;
+        this.isUnitView = false;
+        this.unitViewBoundaries.startTime = 0;
+        this.unitViewBoundaries.endTime = 0;
+        this.refreshPages();
+        this.isFilterEditing = false;
+        this.handlePopoverClose();
+        this.activeFilters = [];
+        this.previousFilters = [];
+        this.lvTitle = this.fileMetadata.fileName;
+        this.lvTitleHead = 'Log Viewer';
+    }
+    handleCallStackChange() {
+        this.callStackToggle = !this.callStackToggle;
+    }
+    closeCallStack() {
+        this.callStackToggle = false;
+    }
+
     goToLine(event) {
         // console.log('linenumber', event.detail);
         const lNum = event.detail;
diff --git a/src/modules/my/appHome/appHome.js b/src/modules/my/appHome/appHome.js
index d24dea7..9f5a211 100644
--- a/src/modules/my/appHome/appHome.js
+++ b/src/modules/my/appHome/appHome.js
@@ -8,7 +8,7 @@ export default class AppHome extends LightningElement {
         if (!this.appChannelSub) {
             this.appChannelSub = subscribe('appChannel', (data) => {
                 this.activeApp = data.activeApp;
-                console.log('activeApp: ', this.activeApp);
+                // console.log('activeApp: ', this.activeApp);
             });
         }
     }
diff --git a/src/modules/ui/search/search.js b/src/modules/ui/search/search.js
index 6e78481..ed1b02c 100644
--- a/src/modules/ui/search/search.js
+++ b/src/modules/ui/search/search.js
@@ -21,7 +21,7 @@ export default class Search extends LightningElement {
     handleSearchInput(event) {
         clearTimeout(this.timeoutId);
         const input = event.target.value;
-        console.log('entered: ', input);
+        // console.log('entered: ', input);
         this.timeoutId = setTimeout(() => {
             this.searchLog(input);
         }, 500);
@@ -82,7 +82,7 @@ export default class Search extends LightningElement {
             const results = this.logtobeFiltered.filter((log) =>
                 log.line.includes(searchTerm)
             );
-
+            console.log('search results: ', results);
             if (results.length > 0) {
                 //  console.log('Found logs:', results);
                 this.matchedLines = results.map((log) => log.lineNumber);
diff --git a/src/modules/ui/utilityPanel/utilityPanel.css b/src/modules/ui/utilityPanel/utilityPanel.css
index b22d59c..ece9a98 100644
--- a/src/modules/ui/utilityPanel/utilityPanel.css
+++ b/src/modules/ui/utilityPanel/utilityPanel.css
@@ -41,3 +41,22 @@ th {
 .slds-utility-panel__body {
     overflow: auto;
 }
+
+.unit-name {
+    padding-top: 0px;
+    padding-bottom: 0px;
+    line-height: normal;
+}
+
+.unit-name:hover {
+    text-decoration: underline;
+}
+
+.unit-name:focus {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+}
+
+.unit-name:active {
+    border: none;
+}
diff --git a/src/modules/ui/utilityPanel/utilityPanel.html b/src/modules/ui/utilityPanel/utilityPanel.html
index 00c74a2..49c5c6d 100644
--- a/src/modules/ui/utilityPanel/utilityPanel.html
+++ b/src/modules/ui/utilityPanel/utilityPanel.html
@@ -263,7 +263,14 @@ <h2 id="panel-heading-01">Call Stack</h2>
                                                     class="slds-truncate"
                                                     title={node.name}
                                                 >
-                                                    {node.name}
+                                                    <button
+                                                        class="slds-button unit-name"
+                                                        onclick={switchToUnitView}
+                                                        data-unitduration={node.unitDuration}
+                                                        data-unitname={node.name}
+                                                    >
+                                                        {node.name}
+                                                    </button>
                                                 </div>
                                             </td>
                                             <td
diff --git a/src/modules/ui/utilityPanel/utilityPanel.js b/src/modules/ui/utilityPanel/utilityPanel.js
index 484e578..795246e 100644
--- a/src/modules/ui/utilityPanel/utilityPanel.js
+++ b/src/modules/ui/utilityPanel/utilityPanel.js
@@ -70,6 +70,21 @@ export default class UtilityPanel extends LightningElement {
         }
     }
 
+    switchToUnitView(event) {
+        const name = event.target.dataset.unitname;
+        const duration = event.target.dataset.unitduration;
+        console.log('Name: ', name, 'duration: ', duration);
+
+        this.dispatchEvent(
+            new CustomEvent('unitview', {
+                detail: {
+                    name: name,
+                    duration: duration
+                }
+            })
+        );
+    }
+
     expandNode(parentId, level, nodeMap) {
         // Find the index of parent node in the current array
         const parentIndex = this.nowShowingNodes.findIndex(