sf-i-events 1.0.769 → 1.0.771

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sf-i-events",
   "private": false,
-  "version": "1.0.769",
+  "version": "1.0.771",
   "description": "Superflows Navigation Component",
   "main": "sf-i-events.js",
   "module": "sf-i-events.js",

package/sf-i-events.d.ts

@@ -455,7 +455,7 @@ export declare class SfIEvents extends LitElement {
     getComplianceStatus: (completeness: string, timeliness: string) => "scheduled" | "not-complied" | "partially-complied" | "complied";
     numcalled: number;
     updateStats: (event: any, partStatus: string, lateStatus: string, complianceStatus: string) => void;
-    renderCalendarGraphs: (showGraph: boolean, parametersTitle: string) => string;
+    renderCalendarGraphs: (showGraph: boolean, parametersTitle: string, showBackgroundButton: boolean) => string;
     renderCalendarStatisticsGraphs: (showGraph: boolean, parametersTitle: string) => string;
     renderCalendarContainerDivStart: (index: number) => string;
     renderCalendarContainerDivEnd: () => string;
@@ -478,14 +478,14 @@ export declare class SfIEvents extends LitElement {
     renderStatusString: (partStatus: string, lateStatus: string, complianceStatus: string) => string;
     getGraphParam: (event: any) => string;
     renderCalendarAnnotations: (event: any, mmdd: string, j: number) => string;
-    renderEvents: (_firstDay: any, _endDay: any, iInit: number, iLast: number, showGraph: boolean, index: number, month: number, period: string, firstDate: any, parametersTitle: string) => string;
+    renderEvents: (_firstDay: any, _endDay: any, iInit: number, iLast: number, showGraph: boolean, index: number, month: number, period: string, firstDate: any, parametersTitle: string, showBackgroundButton: boolean) => string;
     renderStatistics: (_firstDay: any, _endDay: any, iInit: number, iLast: number, showGraph: boolean, index: number, month: number, period: string, firstDate: any, parametersTitle: string) => string;
     renderReporting: (event: any, mmddyyyy: any) => string;
     renderListReporting: (listReportingContainer: HTMLDivElement, event: any, mmddyyyy: any, eventsContainer: HTMLDivElement) => void;
     attachListReportingListeners: (eventsContainer: HTMLDivElement) => void;
-    renderStreamEvents: (index: number, month: number, year: number, showGraph?: boolean) => string;
-    renderThisEvents: (index: number, startDate: Date, showGraph?: boolean) => string;
-    renderRangeEvents: (firstDate: Date, count: number, eventsContainer: HTMLDivElement) => void;
+    renderStreamEvents: (index: number, month: number, year: number, showGraph?: boolean, showBackgroundButton?: boolean) => string;
+    renderThisEvents: (index: number, startDate: Date, showGraph?: boolean, showBackgroundButton?: boolean) => string;
+    renderRangeEvents: (firstDate: Date, count: number, eventsContainer: HTMLDivElement, showBackgroundButton?: boolean) => void;
     renderRangeStatistics: (firstDate: Date, count: number, eventsContainer: HTMLDivElement) => void;
     renderStatisticsFilters: (eventsContainer: HTMLDivElement) => void;
     renderSelectAllButtons: () => string;
@@ -560,9 +560,9 @@ export declare class SfIEvents extends LitElement {
     renderFind: () => void;
     renderCustom: () => void;
     renderCustomViewer: () => void;
-    renderThis: (index?: number, showGraph?: boolean) => void;
+    renderThis: (index: number | undefined, showGraph: boolean | undefined, showBackgroundButton: boolean) => void;
     renderButtonRefresh: (eventsContainer: HTMLDivElement) => void;
-    renderStream: (index?: number, showGraph?: boolean) => void;
+    renderStream: (index: number | undefined, showGraph: boolean | undefined, showBackgroundButton: boolean) => void;
     attachTimelineFilterHandlers: (divContainer: HTMLDivElement) => void;
     getCurrentYear: (mm: string) => string;
     clearButtonSelection: () => void;
@@ -787,7 +787,7 @@ export declare class SfIEvents extends LitElement {
     fetchDetail: (value: any) => Promise<void>;
     fetchGetMappedCalendar: (year: string) => Promise<any>;
     sleepFunction: (ms: number) => Promise<unknown>;
-    renderAppropriateStream: (startDate: string, endDate: string, showGraph?: boolean) => void;
+    renderAppropriateStream: (startDate: string, endDate: string, showGraph?: boolean, showBackgroundButton?: boolean) => void;
     fetchRegisters: (searchString?: string) => Promise<any>;
     renderWithFeatures: (startDate?: string, endDate?: string, searchString?: string, list?: string, month?: string) => Promise<void>;
     fetchAndYearlyRenderUserCalendar_2: (startDate?: string, endDate?: string, searchString?: string, list?: string, month?: string) => Promise<void>;

package/sf-i-events.js

@@ -2141,7 +2141,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.updateSubcategoryStats(event['subcategory'], partStatus, lateStatus, complianceStatus);
             }
         };
-        this.renderCalendarGraphs = (showGraph, parametersTitle) => {
+        this.renderCalendarGraphs = (showGraph, parametersTitle, showBackgroundButton) => {
             //console.log('flowGraph', this.flowGraph);
             var html = '';
             html += '<div class="mb-20 stream-event-list" part="stream-event-list-charts">';
@@ -2159,7 +2159,10 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
                 html += '</div></div>';
             }
-            html += '<button id="button-refresh" part="button-duration-title" class="align-center d-flex justify-center"><h4 part="duration-title">' + parametersTitle + '</h4><span part="duration-title-icon" class="material-icons ml-10">refresh</span></button></div>';
+            html += '<button id="button-refresh" part="button-duration-title" class="align-center d-flex justify-center"><h4 part="duration-title">' + parametersTitle + '</h4><span part="duration-title-icon" class="material-icons ml-10">refresh</span></div>';
+            if (showBackgroundButton) {
+                html += '</button><button id="button-background-process" part="button-background-process" class="align-center d-flex justify-center"><h4 part="processing-title" class="mr-10">background processing</h4><div class="lds-dual-ring1"></div></button>';
+            }
             html += '<div class="align-center d-flex flex-wrap align-center mb-10 w-100-m-0" part="last-update-title-container"><h6 part="last-update-title" class="align-center d-flex"><span class="material-symbols-outlined">update</span>&nbsp;&nbsp;Last Updated on ' + this.lastupdated + '</h6></div>';
             if (showGraph) {
                 html += '<div part="stream-event-chart-selection" class="mb-20">';
@@ -2470,7 +2473,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 html += '<button id="button-unmapped-expand-' + mmdd.replace('/', '-') + '-' + j + '-' + (((_a = event.isnotice) !== null && _a !== void 0 ? _a : false) ? 'isnotice' : 'isevent') + '" part="button-icon-small" class="material-icons button-expand mr-10">open_in_new</button>';
             }
             else {
-                html += '<div class="lds-dual-ring1"></div>';
+                html += '<div class="lds-dual-ring1 bulk-loader"></div>';
             }
             html += '</td>';
             html += '<td part="td-body">';
@@ -2619,7 +2622,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<div class="d-flex align-center event-user-labels-container"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + '<button id="button-list-reporting-' + mmdd.replace('/', '-') + '-' + j + '" part="button-list-reporting" class="material-icons ml-10 mb-20 button-list-reporting">edit_note</button></div>';
             return html;
         };
-        this.renderEvents = (_firstDay, _endDay, iInit, iLast, showGraph, index, month, period, firstDate = null, parametersTitle) => {
+        this.renderEvents = (_firstDay, _endDay, iInit, iLast, showGraph, index, month, period, firstDate = null, parametersTitle, showBackgroundButton) => {
             var total = 0, notStarted = 0, approved = 0, pendingApproval = 0, rejected = 0, inTime = 0, pastDueDate = 0, lateExecuted = 0, lateApproved = 0, lateReported = 0, scheduled = 0, partiallyComplied = 0, notComplied = 0, complied = 0;
             var html = '';
             this.selectedItemIds = [];
@@ -2633,7 +2636,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             this.clearGraphData();
             this.clearSelectedGraphParam();
             this.clearSelectedLegend();
-            html += this.renderCalendarGraphs(showGraph, parametersTitle);
+            html += this.renderCalendarGraphs(showGraph, parametersTitle, showBackgroundButton);
             html += this.renderCalendarContainerDivStart(index);
             html += this.renderCalendarEventSummary();
             // csvCols += 'Period,Status,Id,ObligationTitle,Obligation,Duedate' 
@@ -3659,16 +3662,16 @@ let SfIEvents = class SfIEvents extends LitElement {
                 });
             }
         };
-        this.renderStreamEvents = (index, month, year, showGraph = true) => {
+        this.renderStreamEvents = (index, month, year, showGraph = true, showBackgroundButton = false) => {
             //console.log('flowgraph renderStreamEvents', this.flowGraph);
             const lastDay = this.getLastDayOfMonth(month, year);
             let firstDay = new Date(year, month, 1);
             let endDay = new Date(year, month, 1);
             endDay === null || endDay === void 0 ? void 0 : endDay.setDate(endDay.getDate() + lastDay + 1);
             var period = ("0" + (month + 1)).slice(-2) + "/" + ("0" + 1).slice(-2) + '/' + new Date().getFullYear() + ' - ' + ("0" + (month + 1)).slice(-2) + "/" + ("0" + lastDay).slice(-2) + '/' + new Date().getFullYear();
-            return this.renderEvents(firstDay, endDay, 1, lastDay, showGraph, index, month, period, null, this.monthNames[month] + " " + year);
+            return this.renderEvents(firstDay, endDay, 1, lastDay, showGraph, index, month, period, null, this.monthNames[month] + " " + year, showBackgroundButton);
         };
-        this.renderThisEvents = (index, startDate, showGraph = true) => {
+        this.renderThisEvents = (index, startDate, showGraph = true, showBackgroundButton = false) => {
             var firstDate = new Date();
             var count = 7;
             //console.log('this start date', startDate);
@@ -3687,9 +3690,9 @@ let SfIEvents = class SfIEvents extends LitElement {
             let endDay = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate());
             endDay === null || endDay === void 0 ? void 0 : endDay.setDate(endDay.getDate() + lastDay + 1);
             var period = ("0" + (firstDate.getMonth() + 1)).slice(-2) + "/" + ("0" + 1).slice(-2) + '/' + firstDate.getFullYear() + ' - ' + ("0" + (firstDate.getMonth() + 1)).slice(-2) + "/" + ("0" + count).slice(-2) + '/' + firstDate.getFullYear();
-            return this.renderEvents(firstDay, endDay, 1, lastDay, showGraph, index, (firstDate.getMonth()), period, null, "This " + (index === 0 ? "Week" : "Month"));
+            return this.renderEvents(firstDay, endDay, 1, lastDay, showGraph, index, (firstDate.getMonth()), period, null, "This " + (index === 0 ? "Week" : "Month"), showBackgroundButton);
         };
-        this.renderRangeEvents = (firstDate, count, eventsContainer) => {
+        this.renderRangeEvents = (firstDate, count, eventsContainer, showBackgroundButton = false) => {
             var lastDate = new Date(firstDate.getTime());
             lastDate.setDate(lastDate.getDate() + count - 1);
             const lastDay = count;
@@ -3698,13 +3701,25 @@ let SfIEvents = class SfIEvents extends LitElement {
             endDay === null || endDay === void 0 ? void 0 : endDay.setDate(endDay.getDate() + lastDay + 1);
             var period = ("0" + (firstDate.getMonth() + 1)).slice(-2) + "/" + ("0" + firstDate.getDate()).slice(-2) + '/' + firstDate.getFullYear() + ' - ' + ("0" + (lastDate.getMonth() + 1)).slice(-2) + "/" + ("0" + lastDate.getDate()).slice(-2) + '/' + lastDate.getFullYear();
             //console.log('rangeperiod', period)
-            var html = this.renderEvents(firstDay, endDay, 1, lastDay, true, 0, (firstDate.getMonth()), period, firstDate, "From " + firstDay.toLocaleDateString('en-IN') + " To " + endDay.toLocaleDateString('en-IN'));
+            var html = this.renderEvents(firstDay, endDay, 1, lastDay, true, 0, (firstDate.getMonth()), period, firstDate, "From " + firstDay.toLocaleDateString('en-IN') + " To " + endDay.toLocaleDateString('en-IN'), showBackgroundButton);
             eventsContainer.querySelector('.calendar-right-data').innerHTML = html;
             if (eventsContainer.innerHTML.indexOf('button-select-all') < 0) {
                 eventsContainer.insertAdjacentHTML('beforeend', this.renderSelectAllButtons());
             }
             this.renderButtonRefresh(eventsContainer);
             this.attachTimelineFilterHandlers(eventsContainer);
+            let backgroundProcessButton = eventsContainer.querySelector('#button-background-process');
+            if (showBackgroundButton) {
+                backgroundProcessButton.style.display = showBackgroundButton ? 'flex' : 'none';
+                console.log('backgroundprocessbutton', backgroundProcessButton.style.display);
+                if (showBackgroundButton) {
+                    backgroundProcessButton.addEventListener('click', () => {
+                        console.log('bulk-progress clicked');
+                        let bulkLoader = this._SfIEventsC.querySelector('.bulk-loader');
+                        bulkLoader.scrollIntoView();
+                    });
+                }
+            }
             const filterButton = eventsContainer.querySelector('#filter-button');
             filterButton === null || filterButton === void 0 ? void 0 : filterButton.addEventListener('click', () => {
                 const filterList = eventsContainer.querySelector('#filter-list-container');
@@ -6785,7 +6800,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             inputLabelFilterMobile.style.display = 'none';
             this._SfCustomContainer.querySelector('#button-year-to-date').click();
         };
-        this.renderThis = (index = 1, showGraph = true) => {
+        this.renderThis = (index = 1, showGraph = true, showBackgroundButton) => {
             var _a, _b;
             this.clearGraphData();
             this.clearSelectedGraphParam();
@@ -6832,13 +6847,25 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<div class="calendar-right-data flex-grow">';
             // var startDate = new Date(this.calendarStartMM + '/' + this.calendarStartDD + '/' + this.calendarStartYYYY);
             var startDate = new Date();
-            html += this.renderThisEvents(index, startDate, showGraph);
+            html += this.renderThisEvents(index, startDate, showGraph, showBackgroundButton);
             startDate.setDate(startDate.getDate() + 1);
             html += '</div>';
             html += this.renderSelectAllButtons();
             html += '</div>';
             this._SfThisContainer.innerHTML = html;
             this.renderButtonRefresh(this._SfThisContainer);
+            let backgroundProcessButton = this._SfThisContainer.querySelector('#button-background-process');
+            if (backgroundProcessButton != null) {
+                backgroundProcessButton.style.display = showBackgroundButton ? 'flex' : 'none';
+                console.log('backgroundprocessbutton', backgroundProcessButton.style.display);
+                if (showBackgroundButton) {
+                    backgroundProcessButton.addEventListener('click', () => {
+                        console.log('bulk-progress clicked');
+                        let bulkLoader = this._SfIEventsC.querySelector('.bulk-loader');
+                        bulkLoader.scrollIntoView();
+                    });
+                }
+            }
             const filterButton = this._SfThisContainer.querySelector('#filter-button');
             filterButton === null || filterButton === void 0 ? void 0 : filterButton.addEventListener('click', () => {
                 const filterList = this._SfThisContainer.querySelector('#filter-list-container');
@@ -6854,7 +6881,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                         await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
                     }
                     this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                    this.renderStream(index);
+                    this.renderStream(index, showGraph, showBackgroundButton);
                 });
                 // const selectFeatureAll = filterList.querySelector('.input-select-feature-all') as HTMLInputElement
                 // selectFeatureAll.addEventListener('click',async(ev: any) => {
@@ -6923,19 +6950,19 @@ let SfIEvents = class SfIEvents extends LitElement {
             const radioCompleteness = this._SfThisContainer.querySelector('#radio-completeness');
             radioCompleteness === null || radioCompleteness === void 0 ? void 0 : radioCompleteness.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderCompletenessGraph(this._SfThisContainer);
             });
             const radioTimeliness = this._SfThisContainer.querySelector('#radio-timeliness');
             radioTimeliness === null || radioTimeliness === void 0 ? void 0 : radioTimeliness.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_TIMELINESS;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderTimelinessGraph(this._SfThisContainer);
             });
             const radioCompliance = this._SfThisContainer.querySelector('#radio-compliance');
             radioCompliance === null || radioCompliance === void 0 ? void 0 : radioCompliance.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_COMPLIANCE;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderComplianceGraph(this._SfThisContainer);
             });
             // const radioCompliance = (this._SfThisContainer as HTMLDivElement).querySelector('#radio-compliance') as HTMLButtonElement;
@@ -6947,49 +6974,49 @@ let SfIEvents = class SfIEvents extends LitElement {
             const radioRisk = this._SfThisContainer.querySelector('#radio-risk');
             radioRisk === null || radioRisk === void 0 ? void 0 : radioRisk.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_RISKAREAS;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderRiskGraph(this._SfThisContainer);
             });
             const radioFunction = this._SfThisContainer.querySelector('#radio-function');
             radioFunction === null || radioFunction === void 0 ? void 0 : radioFunction.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_FUNCTION;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderFunctionGraph(this._SfThisContainer);
             });
             const radioRiskSeverity = this._SfThisContainer.querySelector('#radio-riskseverity');
             radioRiskSeverity === null || radioRiskSeverity === void 0 ? void 0 : radioRiskSeverity.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_RISKSEVERITY;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderRiskSeverityGraph(this._SfThisContainer);
             });
             const radioObligationType = this._SfThisContainer.querySelector('#radio-obligationtype');
             radioObligationType === null || radioObligationType === void 0 ? void 0 : radioObligationType.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_OBLIGATIONTYPE;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderObligationTypeGraph(this._SfThisContainer);
             });
             const radioJurisdiction = this._SfThisContainer.querySelector('#radio-jurisdiction');
             radioJurisdiction === null || radioJurisdiction === void 0 ? void 0 : radioJurisdiction.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_JURISDICTION;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderJurisdictionGraph(this._SfThisContainer);
             });
             const radioFrequency = this._SfThisContainer.querySelector('#radio-frequency');
             radioFrequency === null || radioFrequency === void 0 ? void 0 : radioFrequency.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_FREQUENCY;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderFrequencyGraph(this._SfThisContainer);
             });
             const radioSubcategory = this._SfThisContainer.querySelector('#radio-subcategory');
             radioSubcategory === null || radioSubcategory === void 0 ? void 0 : radioSubcategory.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_SUBCATEGORY;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderSubcategoryGraph(this._SfThisContainer);
             });
             const radioLocation = this._SfThisContainer.querySelector('#radio-location');
             radioLocation === null || radioLocation === void 0 ? void 0 : radioLocation.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_LOCATION;
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
                 this.renderLocationGraph(this._SfThisContainer);
             });
             // const buttonStatusMore = (this._SfThisContainer as HTMLDivElement).querySelector('#button-status-more');
@@ -7008,7 +7035,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
                     this.currentColumnIndex = target + "";
                     await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
-                    this.renderThis(target);
+                    this.renderThis(target, showGraph, showBackgroundButton);
                 });
                 (_b = this._SfThisContainer.querySelector('#stream-month-' + i + '-mobile')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', async (ev) => {
                     const target = parseInt(ev.target.id.split('-')[2]);
@@ -7017,7 +7044,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     this.currentColumnIndex = target + "";
                     const dateResult = this.calculateStartAndEndDateOfThis(target);
                     await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
-                    this.renderThis(target);
+                    this.renderThis(target, showGraph, showBackgroundButton);
                 });
             }
             const buttonRefresh = this._SfThisContainer.querySelector('#button-refresh');
@@ -7027,7 +7054,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 const dateResult = this.calculateStartAndEndDateOfThis(index);
                 // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
                 await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
-                this.renderThis(index);
+                this.renderThis(index, showGraph, showBackgroundButton);
             });
             this.attachListReportingListeners(this._SfThisContainer);
             const buttonArr = this._SfThisContainer.querySelectorAll('.button-expand');
@@ -7204,7 +7231,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             });
         };
-        this.renderStream = (index = 0, showGraph = true) => {
+        this.renderStream = (index = 0, showGraph = true, showBackgroundButton) => {
             //console.log('flowgraph renderStream', this.flowGraph);
             var _a, _b;
             this.streamIndex = index;
@@ -7246,7 +7273,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             for (i = 0; i < 12; i++) {
                 if (i === index) {
                     //console.log(i, index)
-                    html += this.renderStreamEvents(i, startDate.getMonth(), startDate.getFullYear(), showGraph);
+                    html += this.renderStreamEvents(i, startDate.getMonth(), startDate.getFullYear(), showGraph, showBackgroundButton);
                 }
                 startDate.setMonth(startDate.getMonth() + 1);
             }
@@ -7273,7 +7300,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                         await this.renderWithFeatures(dateResult.startDate, dateResult.endDate, "", "no", ("0" + monthResult).slice(-2));
                     }
                     this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                    this.renderStream(index);
+                    this.renderStream(index, showGraph, showBackgroundButton);
                 });
                 // const selectFeatureAll = filterList.querySelector('.input-select-feature-all') as HTMLInputElement
                 // selectFeatureAll?.addEventListener('click',async(ev: any) => {
@@ -7342,69 +7369,81 @@ let SfIEvents = class SfIEvents extends LitElement {
             const radioCompleteness = this._SfStreamContainer.querySelector('#radio-completeness');
             radioCompleteness === null || radioCompleteness === void 0 ? void 0 : radioCompleteness.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderCompletenessGraph(this._SfStreamContainer);
             });
             const radioTimeliness = this._SfStreamContainer.querySelector('#radio-timeliness');
             radioTimeliness === null || radioTimeliness === void 0 ? void 0 : radioTimeliness.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_TIMELINESS;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderTimelinessGraph(this._SfStreamContainer);
             });
             const radioCompliance = this._SfStreamContainer.querySelector('#radio-compliance');
             radioCompliance === null || radioCompliance === void 0 ? void 0 : radioCompliance.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_COMPLIANCE;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderComplianceGraph(this._SfStreamContainer);
             });
             const radioRisk = this._SfStreamContainer.querySelector('#radio-risk');
             radioRisk === null || radioRisk === void 0 ? void 0 : radioRisk.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_RISKAREAS;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderRiskGraph(this._SfStreamContainer);
             });
             const radioRiskSeverity = this._SfStreamContainer.querySelector('#radio-riskseverity');
             radioRiskSeverity === null || radioRiskSeverity === void 0 ? void 0 : radioRiskSeverity.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_RISKSEVERITY;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderRiskSeverityGraph(this._SfStreamContainer);
             });
             const radioFunction = this._SfStreamContainer.querySelector('#radio-function');
             radioFunction === null || radioFunction === void 0 ? void 0 : radioFunction.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_FUNCTION;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderFunctionGraph(this._SfStreamContainer);
             });
             const radioObligationType = this._SfStreamContainer.querySelector('#radio-obligationtype');
             radioObligationType === null || radioObligationType === void 0 ? void 0 : radioObligationType.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_OBLIGATIONTYPE;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderObligationTypeGraph(this._SfStreamContainer);
             });
             const radioJurisdiction = this._SfStreamContainer.querySelector('#radio-jurisdiction');
             radioJurisdiction === null || radioJurisdiction === void 0 ? void 0 : radioJurisdiction.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_JURISDICTION;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderJurisdictionGraph(this._SfStreamContainer);
             });
             const radioFrequency = this._SfStreamContainer.querySelector('#radio-frequency');
             radioFrequency === null || radioFrequency === void 0 ? void 0 : radioFrequency.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_FREQUENCY;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderFrequencyGraph(this._SfStreamContainer);
             });
             const radioSubcategory = this._SfStreamContainer.querySelector('#radio-subcategory');
             radioSubcategory === null || radioSubcategory === void 0 ? void 0 : radioSubcategory.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_SUBCATEGORY;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderSubcategoryGraph(this._SfStreamContainer);
             });
             const radioLocation = this._SfStreamContainer.querySelector('#radio-location');
             radioLocation === null || radioLocation === void 0 ? void 0 : radioLocation.addEventListener('click', () => {
                 this.flowGraph = this.FLOW_GRAPH_LOCATION;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
                 this.renderLocationGraph(this._SfStreamContainer);
             });
+            let backgroundProcessButton = this._SfStreamContainer.querySelector('#button-background-process');
+            if (showBackgroundButton) {
+                backgroundProcessButton.style.display = showBackgroundButton ? 'flex' : 'none';
+                console.log('backgroundprocessbutton', backgroundProcessButton.style.display);
+                if (showBackgroundButton) {
+                    backgroundProcessButton.addEventListener('click', () => {
+                        console.log('bulk-progress clicked');
+                        let bulkLoader = this._SfIEventsC.querySelector('.bulk-loader');
+                        bulkLoader.scrollIntoView();
+                    });
+                }
+            }
             // const buttonStatusMore = (this._SfStreamContainer as HTMLDivElement).querySelector('#button-status-more');
             // buttonStatusMore?.addEventListener('click', () => {
             //   const divStatusList = (this._SfStreamContainer as HTMLDivElement).querySelectorAll('.late-statuses') as NodeListOf<HTMLDivElement>;
@@ -7426,7 +7465,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                         // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
                     }
                     this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                    this.renderStream(target);
+                    this.renderStream(target, showGraph, showBackgroundButton);
                 });
                 (_b = this._SfStreamContainer.querySelector('#stream-month-' + i + '-mobile')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', async (ev) => {
                     const target = parseInt(ev.target.id.split('-')[2]);
@@ -7438,7 +7477,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     }
                     this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
                     this.currentColumnIndex = target + "";
-                    this.renderStream(target);
+                    this.renderStream(target, showGraph, showBackgroundButton);
                 });
             }
             const buttonRefresh = this._SfStreamContainer.querySelector('#button-refresh');
@@ -7453,7 +7492,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
                 }
                 this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                this.renderStream(index);
+                this.renderStream(index, showGraph, showBackgroundButton);
             });
             this.attachListReportingListeners(this._SfStreamContainer);
             const buttonArr = this._SfStreamContainer.querySelectorAll('.button-expand');
@@ -10072,7 +10111,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     //console.log('render stream', id);
                     this.enableStream();
                     this.renderTabs(this.TAB_STREAM);
-                    this.renderStream(parseInt(id));
+                    this.renderStream(parseInt(id), false, false);
                 });
             }
         };
@@ -13597,13 +13636,13 @@ let SfIEvents = class SfIEvents extends LitElement {
             (_c = container.querySelector('.switch-solid')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', () => {
                 this.fill = "solid";
                 if (this.getCurrentTab() == this.TAB_STREAM) {
-                    this.renderStream();
+                    this.renderStream(0, true, false);
                 }
             });
             (_f = container.querySelector('.switch-pattern')) === null || _f === void 0 ? void 0 : _f.addEventListener('click', () => {
                 this.fill = "pattern";
                 if (this.getCurrentTab() == this.TAB_STREAM) {
-                    this.renderStream();
+                    this.renderStream(0, true, false);
                 }
             });
         };
@@ -13656,7 +13695,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 //console.log('canceled');
                 if (this.getCurrentTab() == this.TAB_STREAM) {
                     this.renderChartSettings(container, -1, -1, ctx);
-                    this.renderStream(this.streamIndex);
+                    this.renderStream(this.streamIndex, false, false);
                 }
                 // if(this.getCurrentTab() == this.TAB_UPCOMING) {
                 //   this.renderChartSettings(container, -1, ctx);
@@ -13664,7 +13703,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 // }
                 if (this.getCurrentTab() == this.TAB_THIS) {
                     this.renderChartSettings(container, -1, -1, ctx);
-                    this.renderThis(this.streamIndex);
+                    this.renderThis(this.streamIndex, false, false);
                 }
                 // if(this.getCurrentTab() == this.TAB_PAST) {
                 //   this.renderChartSettings(container, -1, ctx);
@@ -14086,6 +14125,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     responsive: true,
                     maintainAspectRatio: false,
                     animation: {
+                        duration: 0,
                         onComplete: () => {
                             if (this.chart4 != null) {
                                 if (type == 'bar') {
@@ -14264,6 +14304,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     responsive: true,
                     maintainAspectRatio: false,
                     animation: {
+                        duration: 0,
                         onComplete: () => {
                             if (this.chart3 != null) {
                                 if (type == 'bar') {
@@ -14442,6 +14483,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     responsive: true,
                     maintainAspectRatio: false,
                     animation: {
+                        duration: 0,
                         onComplete: () => {
                             if (this.chart2 != null) {
                                 if (type == 'bar') {
@@ -14618,6 +14660,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     responsive: true,
                     maintainAspectRatio: false,
                     animation: {
+                        duration: 0,
                         onComplete: () => {
                             if (this.chart != null) {
                                 if (type == 'bar') {
@@ -15335,7 +15378,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     await this.renderWithFeatures(dateResult.startDate, dateResult.endDate, "", "yes", ("0" + monthResult).slice(-2));
                     // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
                 }
-                this.renderStream(idx);
+                this.renderStream(idx, true, false);
             });
             // (this._SfTabContainer as HTMLDivElement).querySelector('#calendar-tab-upcoming')?.addEventListener('click', async () => {
             //   this.enableUpcoming();
@@ -15363,7 +15406,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 //console.log('dateresult', dateResult)
                 this.currentColumnIndex = 1 + "";
                 await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate, "", "yes", ("0" + monthResult).slice(-2));
-                this.renderThis();
+                this.renderThis(0, true, false);
             });
             // (this._SfTabContainer as HTMLDivElement).querySelector('#calendar-tab-past')?.addEventListener('click', async () => {
             //   this.enablePast();
@@ -17513,17 +17556,17 @@ let SfIEvents = class SfIEvents extends LitElement {
                 setTimeout(resolve, ms);
             });
         };
-        this.renderAppropriateStream = (startDate, endDate, showGraph = false) => {
+        this.renderAppropriateStream = (startDate, endDate, showGraph = false, showBackgroundButton = false) => {
             if (startDate == "" && endDate == "")
                 this.renderCalendar(); // yearly
             if (this.selectedTab == this.TAB_STREAM) {
-                this.renderStream(parseInt(this.currentColumnIndex), showGraph);
+                this.renderStream(parseInt(this.currentColumnIndex), showGraph, showBackgroundButton);
             }
             // if(this.selectedTab == this.TAB_UPCOMING) {
             //   this.renderUpcoming(parseInt(this.currentColumnIndex), false);
             // }
             if (this.selectedTab == this.TAB_THIS) {
-                this.renderThis(parseInt(this.currentColumnIndex), showGraph);
+                this.renderThis(parseInt(this.currentColumnIndex), showGraph, showBackgroundButton);
             }
             // if(this.selectedTab == this.TAB_PAST) {
             //   this.renderPast(parseInt(this.currentColumnIndex), false);
@@ -17802,10 +17845,11 @@ let SfIEvents = class SfIEvents extends LitElement {
             const xhr = (await this.prepareXhr(urlBody, url, this._SfLoader, authorization, 'Preparing'));
             this._SfLoader.innerHTML = '';
             if (xhr.status == 200) {
-                const jsonRespose = JSON.parse(xhr.responseText);
-                console.log('bulk reports jsonRespose', jsonRespose);
-                if (jsonRespose.result == true) {
-                    for (let sortid of Object.keys(jsonRespose.data)) {
+                const jsonResponse = JSON.parse(xhr.responseText);
+                console.log('bulk reports jsonResponse', jsonResponse);
+                let flagBulk = false;
+                if (jsonResponse.result == true) {
+                    for (let sortid of Object.keys(jsonResponse.data)) {
                         let sortidArr = sortid.split(';');
                         let mmddyyyy = sortidArr[0];
                         let entityid = sortidArr[1];
@@ -17817,13 +17861,26 @@ let SfIEvents = class SfIEvents extends LitElement {
                             for (let i = 0; i < this.events[mmdd].length; i++) {
                                 if (this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid) {
                                     this.events[mmdd][i].isbulk = true;
+                                    flagBulk = true;
                                     break;
                                 }
                             }
                         }
                     }
-                    if (Object.keys(jsonRespose.data).length > 0) {
-                        this.renderAppropriateStream(this.sdate, this.edate, true);
+                    if (flagBulk) {
+                        // backgroundProcessButton.classList.remove('hide');
+                        // backgroundProcessButton.style.display = 'flex'
+                        // console.log('backgroundprocessbutton', backgroundProcessButton);
+                        // backgroundProcessButton.addEventListener('click',() => {
+                        //   console.log('bulk-progress clicked')
+                        //   let bulkLoader = (this._SfIEventsC as HTMLDivElement).querySelector('.bulk-loader') as HTMLDivElement
+                        //   bulkLoader.scrollIntoView();
+                        // })
+                        this.renderAppropriateStream(this.sdate, this.edate, true, true);
+                    }
+                    else {
+                        // backgroundProcessButton.classList.add('hide')
+                        // backgroundProcessButton.style.display = 'none'
                     }
                 }
             }
@@ -20656,6 +20713,16 @@ SfIEvents.styles = css `
       bottom: 10px;
       right: 10px
     }
+    #button-background-process {
+      display:none;
+      position: fixed;
+      top: 10px;
+      left:0;
+      right: 0;
+      margin-left: auto;
+      margin-right: auto;
+      width: fit-content;
+    }
     
     .small-icon {
       font-size: 98%

package/src/sf-i-events.ts

@@ -2694,6 +2694,16 @@ export class SfIEvents extends LitElement {
       bottom: 10px;
       right: 10px
     }
+    #button-background-process {
+      display:none;
+      position: fixed;
+      top: 10px;
+      left:0;
+      right: 0;
+      margin-left: auto;
+      margin-right: auto;
+      width: fit-content;
+    }
     
     .small-icon {
       font-size: 98%
@@ -4248,7 +4258,7 @@ export class SfIEvents extends LitElement {
 
   }
 
-  renderCalendarGraphs = (showGraph: boolean, parametersTitle: string) => {
+  renderCalendarGraphs = (showGraph: boolean, parametersTitle: string, showBackgroundButton: boolean) => {
 
     //console.log('flowGraph', this.flowGraph);
 
@@ -4269,7 +4279,10 @@ export class SfIEvents extends LitElement {
         }
         html += '</div></div>'
       }
-      html += '<button id="button-refresh" part="button-duration-title" class="align-center d-flex justify-center"><h4 part="duration-title">' + parametersTitle + '</h4><span part="duration-title-icon" class="material-icons ml-10">refresh</span></button></div>';
+      html += '<button id="button-refresh" part="button-duration-title" class="align-center d-flex justify-center"><h4 part="duration-title">' + parametersTitle + '</h4><span part="duration-title-icon" class="material-icons ml-10">refresh</span></div>';
+      if(showBackgroundButton){
+        html += '</button><button id="button-background-process" part="button-background-process" class="align-center d-flex justify-center"><h4 part="processing-title" class="mr-10">background processing</h4><div class="lds-dual-ring1"></div></button>'
+      }
       html += '<div class="align-center d-flex flex-wrap align-center mb-10 w-100-m-0" part="last-update-title-container"><h6 part="last-update-title" class="align-center d-flex"><span class="material-symbols-outlined">update</span>&nbsp;&nbsp;Last Updated on ' + this.lastupdated + '</h6></div>';
       if(showGraph) {
         html += '<div part="stream-event-chart-selection" class="mb-20">';
@@ -4661,7 +4674,7 @@ export class SfIEvents extends LitElement {
     if(event.isbulk == null || !event.isbulk){
       html += '<button id="button-unmapped-expand-'+mmdd.replace('/', '-')+'-'+j+'-'+((event.isnotice ?? false)?'isnotice':'isevent')+ '" part="button-icon-small" class="material-icons button-expand mr-10">open_in_new</button>'
     }else{
-      html += '<div class="lds-dual-ring1"></div>';
+      html += '<div class="lds-dual-ring1 bulk-loader"></div>';
     }
     html += '</td>';
     html += '<td part="td-body">';
@@ -4838,7 +4851,7 @@ export class SfIEvents extends LitElement {
 
   }
 
-  renderEvents = (_firstDay: any, _endDay: any, iInit: number, iLast: number, showGraph: boolean, index: number, month: number, period: string, firstDate: any = null, parametersTitle: string) => {
+  renderEvents = (_firstDay: any, _endDay: any, iInit: number, iLast: number, showGraph: boolean, index: number, month: number, period: string, firstDate: any = null, parametersTitle: string, showBackgroundButton: boolean) => {
     var total = 0, notStarted = 0, approved = 0, pendingApproval = 0, rejected = 0, inTime = 0, pastDueDate = 0, lateExecuted = 0, lateApproved = 0, lateReported = 0, scheduled = 0, partiallyComplied = 0, notComplied = 0, complied = 0;
     var html = '';
     this.selectedItemIds = [];
@@ -4855,7 +4868,7 @@ export class SfIEvents extends LitElement {
     this.clearSelectedGraphParam();
     this.clearSelectedLegend();
   
-    html += this.renderCalendarGraphs(showGraph, parametersTitle);
+    html += this.renderCalendarGraphs(showGraph, parametersTitle, showBackgroundButton);
     html += this.renderCalendarContainerDivStart(index)
     html += this.renderCalendarEventSummary();
 
@@ -6040,7 +6053,7 @@ export class SfIEvents extends LitElement {
       })
     }
   }
-  renderStreamEvents = (index: number, month: number, year: number, showGraph: boolean = true) => {
+  renderStreamEvents = (index: number, month: number, year: number, showGraph: boolean = true, showBackgroundButton: boolean = false) => {
  
     //console.log('flowgraph renderStreamEvents', this.flowGraph);
 
@@ -6050,11 +6063,11 @@ export class SfIEvents extends LitElement {
     endDay?.setDate(endDay.getDate() + lastDay + 1);
     var period = ("0" + (month+1)).slice(-2) + "/" + ("0" + 1).slice(-2) + '/' + new Date().getFullYear() + ' - ' + ("0" + (month+1)).slice(-2) + "/" + ("0" + lastDay).slice(-2) + '/' + new Date().getFullYear()   
 
-    return this.renderEvents(firstDay, endDay, 1, lastDay, showGraph, index, month, period, null, this.monthNames[month] + " " + year);
+    return this.renderEvents(firstDay, endDay, 1, lastDay, showGraph, index, month, period, null, this.monthNames[month] + " " + year, showBackgroundButton);
 
   }
 
-  renderThisEvents = (index: number, startDate: Date, showGraph: boolean = true) => {
+  renderThisEvents = (index: number, startDate: Date, showGraph: boolean = true, showBackgroundButton: boolean = false) => {
 
     var firstDate = new Date();
     var count = 7;
@@ -6084,11 +6097,11 @@ export class SfIEvents extends LitElement {
 
     var period = ("0" + (firstDate.getMonth()+1)).slice(-2) + "/" + ("0" + 1).slice(-2) + '/' + firstDate.getFullYear() + ' - ' + ("0" + (firstDate.getMonth()+1)).slice(-2) + "/" + ("0" + count).slice(-2) + '/' + firstDate.getFullYear()   
 
-    return this.renderEvents(firstDay, endDay, 1, lastDay, showGraph, index, (firstDate.getMonth()), period, null, "This " + (index === 0 ? "Week" : "Month"));
+    return this.renderEvents(firstDay, endDay, 1, lastDay, showGraph, index, (firstDate.getMonth()), period, null, "This " + (index === 0 ? "Week" : "Month"), showBackgroundButton);
 
   }
 
-  renderRangeEvents = (firstDate: Date, count: number, eventsContainer: HTMLDivElement) => {
+  renderRangeEvents = (firstDate: Date, count: number, eventsContainer: HTMLDivElement, showBackgroundButton: boolean = false) => {
 
 
     var lastDate = new Date(firstDate.getTime());
@@ -6103,7 +6116,7 @@ export class SfIEvents extends LitElement {
 
     //console.log('rangeperiod', period)
 
-    var html = this.renderEvents(firstDay, endDay, 1, lastDay, true, 0, (firstDate.getMonth()), period, firstDate,"From " + firstDay.toLocaleDateString('en-IN') + " To " + endDay.toLocaleDateString('en-IN'));
+    var html = this.renderEvents(firstDay, endDay, 1, lastDay, true, 0, (firstDate.getMonth()), period, firstDate,"From " + firstDay.toLocaleDateString('en-IN') + " To " + endDay.toLocaleDateString('en-IN'), showBackgroundButton);
 
     eventsContainer.querySelector('.calendar-right-data')!.innerHTML = html;
     if(eventsContainer.innerHTML.indexOf('button-select-all') < 0){
@@ -6111,6 +6124,18 @@ export class SfIEvents extends LitElement {
     }
     this.renderButtonRefresh(eventsContainer);
     this.attachTimelineFilterHandlers(eventsContainer);
+    let backgroundProcessButton = eventsContainer.querySelector('#button-background-process') as HTMLButtonElement
+    if(showBackgroundButton){
+      backgroundProcessButton.style.display = showBackgroundButton ? 'flex' : 'none'
+      console.log('backgroundprocessbutton', backgroundProcessButton.style.display);
+      if(showBackgroundButton){
+        backgroundProcessButton.addEventListener('click',() => {
+          console.log('bulk-progress clicked')
+          let bulkLoader = (this._SfIEventsC as HTMLDivElement).querySelector('.bulk-loader') as HTMLDivElement
+          bulkLoader.scrollIntoView();
+        })
+      }
+    }
     const filterButton = eventsContainer.querySelector('#filter-button') as HTMLButtonElement
     filterButton?.addEventListener('click',() => {
       const filterList = eventsContainer.querySelector('#filter-list-container') as HTMLDivElement
@@ -9834,7 +9859,7 @@ export class SfIEvents extends LitElement {
     ((this._SfCustomContainer as HTMLDivElement).querySelector('#button-year-to-date') as HTMLButtonElement).click();
   }
 
-  renderThis = (index: number = 1, showGraph: boolean = true) => {
+  renderThis = (index: number = 1, showGraph: boolean = true, showBackgroundButton: boolean) => {
     
     this.clearGraphData();
     this.clearSelectedGraphParam();
@@ -9890,7 +9915,7 @@ export class SfIEvents extends LitElement {
 
       // var startDate = new Date(this.calendarStartMM + '/' + this.calendarStartDD + '/' + this.calendarStartYYYY);
       var startDate = new Date();
-      html += this.renderThisEvents(index, startDate, showGraph);
+      html += this.renderThisEvents(index, startDate, showGraph, showBackgroundButton);
       startDate.setDate(startDate.getDate() + 1);
         
       html += '</div>';
@@ -9899,6 +9924,18 @@ export class SfIEvents extends LitElement {
 
     (this._SfThisContainer as HTMLDivElement).innerHTML = html;
     this.renderButtonRefresh((this._SfThisContainer as HTMLDivElement));
+    let backgroundProcessButton = (this._SfThisContainer as HTMLDivElement).querySelector('#button-background-process') as HTMLButtonElement
+    if(backgroundProcessButton != null){
+      backgroundProcessButton.style.display = showBackgroundButton ? 'flex' : 'none'
+      console.log('backgroundprocessbutton', backgroundProcessButton.style.display);
+      if(showBackgroundButton){
+          backgroundProcessButton.addEventListener('click',() => {
+            console.log('bulk-progress clicked')
+            let bulkLoader = (this._SfIEventsC as HTMLDivElement).querySelector('.bulk-loader') as HTMLDivElement
+            bulkLoader.scrollIntoView();
+          })
+      }
+    }
     const filterButton = (this._SfThisContainer as HTMLDivElement).querySelector('#filter-button') as HTMLButtonElement
     filterButton?.addEventListener('click',() => {
       const filterList = (this._SfThisContainer as HTMLDivElement).querySelector('#filter-list-container') as HTMLDivElement
@@ -9914,7 +9951,7 @@ export class SfIEvents extends LitElement {
           await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
         }
         this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-        this.renderStream(index);
+        this.renderStream(index, showGraph, showBackgroundButton);
       })
       // const selectFeatureAll = filterList.querySelector('.input-select-feature-all') as HTMLInputElement
       // selectFeatureAll.addEventListener('click',async(ev: any) => {
@@ -9989,7 +10026,7 @@ export class SfIEvents extends LitElement {
     radioCompleteness?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderCompletenessGraph((this._SfThisContainer as HTMLDivElement));
       
     });
@@ -9998,7 +10035,7 @@ export class SfIEvents extends LitElement {
     radioTimeliness?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_TIMELINESS;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderTimelinessGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10007,7 +10044,7 @@ export class SfIEvents extends LitElement {
     radioCompliance?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_COMPLIANCE;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderComplianceGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10025,7 +10062,7 @@ export class SfIEvents extends LitElement {
     radioRisk?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_RISKAREAS;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderRiskGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10035,7 +10072,7 @@ export class SfIEvents extends LitElement {
     radioFunction?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_FUNCTION;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderFunctionGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10044,7 +10081,7 @@ export class SfIEvents extends LitElement {
     radioRiskSeverity?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_RISKSEVERITY;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderRiskSeverityGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10053,7 +10090,7 @@ export class SfIEvents extends LitElement {
     radioObligationType?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_OBLIGATIONTYPE;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderObligationTypeGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10062,7 +10099,7 @@ export class SfIEvents extends LitElement {
     radioJurisdiction?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_JURISDICTION;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderJurisdictionGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10071,7 +10108,7 @@ export class SfIEvents extends LitElement {
     radioFrequency?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_FREQUENCY;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderFrequencyGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10080,7 +10117,7 @@ export class SfIEvents extends LitElement {
     radioSubcategory?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_SUBCATEGORY;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderSubcategoryGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10089,7 +10126,7 @@ export class SfIEvents extends LitElement {
     radioLocation?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_LOCATION;
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
       this.renderLocationGraph((this._SfThisContainer as HTMLDivElement))
       
     });
@@ -10113,7 +10150,7 @@ export class SfIEvents extends LitElement {
         this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
         this.currentColumnIndex = target + "";
         await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
-        this.renderThis(target);
+        this.renderThis(target, showGraph, showBackgroundButton);
       });
 
       (this._SfThisContainer as HTMLDivElement).querySelector('#stream-month-' + i + '-mobile')?.addEventListener('click', async (ev: any)=> {
@@ -10123,7 +10160,7 @@ export class SfIEvents extends LitElement {
         this.currentColumnIndex = target + "";
         const dateResult = this.calculateStartAndEndDateOfThis(target);
         await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
-        this.renderThis(target);
+        this.renderThis(target, showGraph, showBackgroundButton);
       })
     }
     const buttonRefresh = (this._SfThisContainer as HTMLDivElement).querySelector('#button-refresh') as HTMLButtonElement
@@ -10133,7 +10170,7 @@ export class SfIEvents extends LitElement {
       const dateResult = this.calculateStartAndEndDateOfThis(index);
       // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
       await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
-      this.renderThis(index);
+      this.renderThis(index, showGraph, showBackgroundButton);
     })
     this.attachListReportingListeners(this._SfThisContainer as HTMLDivElement);
     const buttonArr = (this._SfThisContainer as HTMLDivElement).querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
@@ -10343,7 +10380,7 @@ export class SfIEvents extends LitElement {
     })
   }
 
-  renderStream = (index: number = 0, showGraph: boolean = true) => {
+  renderStream = (index: number = 0, showGraph: boolean = true, showBackgroundButton: boolean) => {
     //console.log('flowgraph renderStream', this.flowGraph);
 
     this.streamIndex = index;
@@ -10402,7 +10439,7 @@ export class SfIEvents extends LitElement {
         for(i = 0; i < 12; i++) {
           if(i === index) {
             //console.log(i, index)
-            html += this.renderStreamEvents(i, startDate.getMonth(), startDate.getFullYear(), showGraph)
+            html += this.renderStreamEvents(i, startDate.getMonth(), startDate.getFullYear(), showGraph, showBackgroundButton)
           }
           startDate.setMonth(startDate.getMonth() + 1);
         }
@@ -10430,7 +10467,7 @@ export class SfIEvents extends LitElement {
           await this.renderWithFeatures(dateResult.startDate, dateResult.endDate,"","no",("0" + monthResult).slice(-2));
         }
         this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-        this.renderStream(index);
+        this.renderStream(index, showGraph, showBackgroundButton);
       })
       // const selectFeatureAll = filterList.querySelector('.input-select-feature-all') as HTMLInputElement
       // selectFeatureAll?.addEventListener('click',async(ev: any) => {
@@ -10506,7 +10543,7 @@ export class SfIEvents extends LitElement {
     radioCompleteness?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderCompletenessGraph((this._SfStreamContainer as HTMLDivElement));
       
     });
@@ -10515,7 +10552,7 @@ export class SfIEvents extends LitElement {
     radioTimeliness?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_TIMELINESS;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderTimelinessGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
@@ -10524,7 +10561,7 @@ export class SfIEvents extends LitElement {
     radioCompliance?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_COMPLIANCE;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderComplianceGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
@@ -10533,7 +10570,7 @@ export class SfIEvents extends LitElement {
     radioRisk?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_RISKAREAS;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderRiskGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
@@ -10542,7 +10579,7 @@ export class SfIEvents extends LitElement {
     radioRiskSeverity?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_RISKSEVERITY;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderRiskSeverityGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
@@ -10551,7 +10588,7 @@ export class SfIEvents extends LitElement {
     radioFunction?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_FUNCTION;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderFunctionGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
@@ -10560,7 +10597,7 @@ export class SfIEvents extends LitElement {
     radioObligationType?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_OBLIGATIONTYPE;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderObligationTypeGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
@@ -10569,7 +10606,7 @@ export class SfIEvents extends LitElement {
     radioJurisdiction?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_JURISDICTION;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderJurisdictionGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
@@ -10578,7 +10615,7 @@ export class SfIEvents extends LitElement {
     radioFrequency?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_FREQUENCY;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderFrequencyGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
@@ -10587,7 +10624,7 @@ export class SfIEvents extends LitElement {
     radioSubcategory?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_SUBCATEGORY;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderSubcategoryGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
@@ -10596,11 +10633,22 @@ export class SfIEvents extends LitElement {
     radioLocation?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_LOCATION;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
       this.renderLocationGraph((this._SfStreamContainer as HTMLDivElement))
       
     });
-    
+    let backgroundProcessButton = (this._SfStreamContainer as HTMLDivElement).querySelector('#button-background-process') as HTMLButtonElement
+    if(showBackgroundButton){
+      backgroundProcessButton.style.display = showBackgroundButton ? 'flex' : 'none'
+      console.log('backgroundprocessbutton', backgroundProcessButton.style.display);
+      if(showBackgroundButton){
+        backgroundProcessButton.addEventListener('click',() => {
+          console.log('bulk-progress clicked')
+          let bulkLoader = (this._SfIEventsC as HTMLDivElement).querySelector('.bulk-loader') as HTMLDivElement
+          bulkLoader.scrollIntoView();
+        })
+      }
+    }
     
     // const buttonStatusMore = (this._SfStreamContainer as HTMLDivElement).querySelector('#button-status-more');
     // buttonStatusMore?.addEventListener('click', () => {
@@ -10627,7 +10675,7 @@ export class SfIEvents extends LitElement {
           // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
         }
         this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-        this.renderStream(target);
+        this.renderStream(target, showGraph, showBackgroundButton);
 
       });
 
@@ -10642,7 +10690,7 @@ export class SfIEvents extends LitElement {
         }
         this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
         this.currentColumnIndex = target + "";
-        this.renderStream(target);
+        this.renderStream(target, showGraph, showBackgroundButton);
 
       })
     }
@@ -10658,7 +10706,7 @@ export class SfIEvents extends LitElement {
         // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
       }
       this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-      this.renderStream(index);
+      this.renderStream(index, showGraph, showBackgroundButton);
     })
     this.attachListReportingListeners(this._SfStreamContainer as HTMLDivElement);
     const buttonArr = (this._SfStreamContainer as HTMLDivElement).querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
@@ -13851,7 +13899,7 @@ export class SfIEvents extends LitElement {
         //console.log('render stream', id);
         this.enableStream();
         this.renderTabs(this.TAB_STREAM);
-        this.renderStream(parseInt(id));
+        this.renderStream(parseInt(id),false, false);
 
       })
 
@@ -18512,7 +18560,7 @@ export class SfIEvents extends LitElement {
 
       this.fill = "solid";
       if(this.getCurrentTab() == this.TAB_STREAM) {
-        this.renderStream();
+        this.renderStream(0, true, false);
       }
       
     });
@@ -18521,7 +18569,7 @@ export class SfIEvents extends LitElement {
 
       this.fill = "pattern";
       if(this.getCurrentTab() == this.TAB_STREAM) {
-        this.renderStream();
+        this.renderStream(0, true, false);
       }
       
     });
@@ -18586,7 +18634,7 @@ export class SfIEvents extends LitElement {
       //console.log('canceled');
       if(this.getCurrentTab() == this.TAB_STREAM) {
         this.renderChartSettings(container, -1, -1, ctx);
-        this.renderStream(this.streamIndex);
+        this.renderStream(this.streamIndex, false, false);
       }
       // if(this.getCurrentTab() == this.TAB_UPCOMING) {
       //   this.renderChartSettings(container, -1, ctx);
@@ -18594,7 +18642,7 @@ export class SfIEvents extends LitElement {
       // }
       if(this.getCurrentTab() == this.TAB_THIS) {
         this.renderChartSettings(container, -1, -1, ctx);
-        this.renderThis(this.streamIndex);
+        this.renderThis(this.streamIndex, false, false);
       }
       // if(this.getCurrentTab() == this.TAB_PAST) {
       //   this.renderChartSettings(container, -1, ctx);
@@ -19102,6 +19150,7 @@ export class SfIEvents extends LitElement {
         responsive: true,
         maintainAspectRatio: false,
         animation: {
+          duration:0,
           onComplete: () => {
 
             if(this.chart4 != null) {
@@ -19306,6 +19355,7 @@ export class SfIEvents extends LitElement {
         responsive: true,
         maintainAspectRatio: false,
         animation: {
+          duration:0,
           onComplete: () => {
 
             if(this.chart3 != null) {
@@ -19510,6 +19560,7 @@ export class SfIEvents extends LitElement {
         responsive: true,
         maintainAspectRatio: false,
         animation: {
+          duration:0,
           onComplete: () => {
 
             if(this.chart2 != null) {
@@ -19711,6 +19762,7 @@ export class SfIEvents extends LitElement {
         responsive: true,
         maintainAspectRatio: false,
         animation: {
+          duration:0,
           onComplete: () => {
 
             if(this.chart != null) {
@@ -20568,7 +20620,7 @@ export class SfIEvents extends LitElement {
         await this.renderWithFeatures(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
         // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
       }
-      this.renderStream(idx);
+      this.renderStream(idx, true, false);
     });
 
     // (this._SfTabContainer as HTMLDivElement).querySelector('#calendar-tab-upcoming')?.addEventListener('click', async () => {
@@ -20598,7 +20650,7 @@ export class SfIEvents extends LitElement {
       //console.log('dateresult', dateResult)
       this.currentColumnIndex =  1 + ""
       await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
-      this.renderThis();
+      this.renderThis(0, true, false);
     });
 
     // (this._SfTabContainer as HTMLDivElement).querySelector('#calendar-tab-past')?.addEventListener('click', async () => {
@@ -23491,17 +23543,17 @@ export class SfIEvents extends LitElement {
     });
   }
 
-  renderAppropriateStream = (startDate: string, endDate: string, showGraph: boolean = false) => {
+  renderAppropriateStream = (startDate: string, endDate: string, showGraph: boolean = false, showBackgroundButton: boolean = false) => {
     if(startDate == "" && endDate == "") this.renderCalendar(); // yearly
 
     if(this.selectedTab == this.TAB_STREAM) {
-      this.renderStream(parseInt(this.currentColumnIndex), showGraph);
+      this.renderStream(parseInt(this.currentColumnIndex), showGraph, showBackgroundButton);
     }
     // if(this.selectedTab == this.TAB_UPCOMING) {
     //   this.renderUpcoming(parseInt(this.currentColumnIndex), false);
     // }
     if(this.selectedTab == this.TAB_THIS) {
-      this.renderThis(parseInt(this.currentColumnIndex), showGraph);
+      this.renderThis(parseInt(this.currentColumnIndex), showGraph, showBackgroundButton);
     }
     // if(this.selectedTab == this.TAB_PAST) {
     //   this.renderPast(parseInt(this.currentColumnIndex), false);
@@ -23851,10 +23903,11 @@ export class SfIEvents extends LitElement {
     this._SfLoader.innerHTML = '';
     if(xhr.status == 200) {
 
-      const jsonRespose = JSON.parse(xhr.responseText);
-      console.log('bulk reports jsonRespose', jsonRespose);
-      if(jsonRespose.result == true){
-        for(let sortid of Object.keys(jsonRespose.data)){
+      const jsonResponse = JSON.parse(xhr.responseText);
+      console.log('bulk reports jsonResponse', jsonResponse);
+      let flagBulk = false;
+      if(jsonResponse.result == true){
+        for(let sortid of Object.keys(jsonResponse.data)){
           let sortidArr = sortid.split(';')
           let mmddyyyy = sortidArr[0]
           let entityid = sortidArr[1]
@@ -23866,13 +23919,26 @@ export class SfIEvents extends LitElement {
             for (let i = 0 ; i < this.events[mmdd].length; i ++){
               if(this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid){
                 this.events[mmdd][i].isbulk = true;
+                flagBulk = true
                 break
               }
             }
           }
         }
-        if(Object.keys(jsonRespose.data).length > 0){
-          this.renderAppropriateStream(this.sdate,this.edate,true)
+        
+        if(flagBulk){
+          // backgroundProcessButton.classList.remove('hide');
+          // backgroundProcessButton.style.display = 'flex'
+          // console.log('backgroundprocessbutton', backgroundProcessButton);
+          // backgroundProcessButton.addEventListener('click',() => {
+          //   console.log('bulk-progress clicked')
+          //   let bulkLoader = (this._SfIEventsC as HTMLDivElement).querySelector('.bulk-loader') as HTMLDivElement
+          //   bulkLoader.scrollIntoView();
+          // })
+          this.renderAppropriateStream(this.sdate,this.edate,true,true)
+        }else{
+          // backgroundProcessButton.classList.add('hide')
+          // backgroundProcessButton.style.display = 'none'
         }
       }
     }