sf-i-events 1.0.770 → 1.0.772

package/src/sf-i-events.ts

@@ -2695,14 +2695,7 @@ export class SfIEvents extends LitElement {
       right: 10px
     }
     #button-background-process {
-      display:none;
-      position: fixed;
-      top: 10px;
-      left:0;
-      right: 0;
-      margin-left: auto;
-      margin-right: auto;
-      width: fit-content;
+      cursor: pointer
     }
     
     .small-icon {
@@ -4258,7 +4251,7 @@ export class SfIEvents extends LitElement {
 
   }
 
-  renderCalendarGraphs = (showGraph: boolean, parametersTitle: string) => {
+  renderCalendarGraphs = (showGraph: boolean, parametersTitle: string, showBackgroundButton: boolean) => {
 
     //console.log('flowGraph', this.flowGraph);
 
@@ -4279,8 +4272,12 @@ 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><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></div>';
-      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>';
+      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 += '<div class="align-center d-flex flex-wrap align-center mb-10 w-100-m-0" part="last-update-title-container" id="button-background-process"><h6 part="last-update-title" class="align-center d-flex"><div class="lds-dual-ring1"></div>&nbsp;&nbsp;&nbsp;&nbsp;background processing</h6></div>'
+      }else{
+        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">';
           html += '<div part="td-head" class="mb-5">Select Chart</div>';
@@ -4848,7 +4845,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 = [];
@@ -4865,7 +4862,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();
 
@@ -5517,6 +5514,7 @@ export class SfIEvents extends LitElement {
         buttonClick.innerHTML = "Saving..."
         const comments = (listReportingContainer.querySelector('#input-approver-comments') as HTMLInputElement).value;
         const approved = (listReportingContainer.querySelector('#input-approve-yes') as HTMLInputElement).checked;
+        let flagBulk = false;
         if(this.selectedItemIds.length == 0){
           await this.uploadReview(event.entityid, event.locationid, mmddyyyy, event["id"], comments, approved, event.isnotice != null ? "notices" : "events")
           for( var p = 0 ; p < this.events[mmdd].length; p ++){
@@ -5578,6 +5576,7 @@ export class SfIEvents extends LitElement {
               if(this.events[mmdd][p].id == eventId && this.events[mmdd][p].locationid == locationid && this.events[mmdd][p].entityid == entityid){
                 
                 this.events[mmdd][p].isbulk = true
+                flagBulk = true
               }
             }
           }
@@ -5597,7 +5596,7 @@ export class SfIEvents extends LitElement {
               await this.fetchBulkReportingData();
             }
             console.log('events', this.events);
-            this.renderAppropriateStream(this.sdate,this.edate, true);
+            this.renderAppropriateStream(this.sdate,this.edate, true, flagBulk);
           }
         }
 
@@ -5617,6 +5616,7 @@ export class SfIEvents extends LitElement {
           }, 3000);
 
         } else {
+          let flagBulk = false;
           if(this.selectedItemIds.length == 0){
             await this.uploadAudit(event.entityid, event.locationid, mmddyyyy, event["id"], comments, approved, event.isnotice != null ? "notices" : "events")
             for( var p = 0 ; p < this.events[mmdd].length; p ++){
@@ -5675,6 +5675,7 @@ export class SfIEvents extends LitElement {
                 if(this.events[mmdd][p].id == eventId && this.events[mmdd][p].locationid == locationId && this.events[mmdd][p].entityid == entityId){
                   
                   this.events[mmdd][p].isbulk = true
+                  flagBulk = true;
                 }
               }
             }
@@ -5691,7 +5692,7 @@ export class SfIEvents extends LitElement {
               if(this.selectedItemIds.length > 0) {
                 await this.fetchBulkReportingData();
               }
-              this.renderAppropriateStream(this.sdate,this.edate,true);
+              this.renderAppropriateStream(this.sdate,this.edate,true, flagBulk);
               // if(currentColumnButton != null) {
               //   currentColumnButton.click();
               // }
@@ -5777,6 +5778,7 @@ export class SfIEvents extends LitElement {
                     }, 3000);
 
                   } else {
+                    let flagBulk = false;
                     if(this.selectedItemIds.length == 0){
                       
                       await this.uploadReport(event.entityid, event.locationid, mmddyyyy, event["id"], reportercomments, reporterdoc, docs, event, reportformatvalues, reportformatschema, event.isnotice != null ? "notices" : "events")
@@ -5889,7 +5891,7 @@ export class SfIEvents extends LitElement {
                         let mmdd = mmddyyyy.split('/')[0] + '/' + mmddyyyy.split('/')[1]
                         for( var p = 0 ; p < this.events[mmdd].length; p ++){
                           if(this.events[mmdd][p].id == eventId && this.events[mmdd][p].locationid == locationId && this.events[mmdd][p].entityid == entityId){
-                            
+                            flagBulk = true;
                             this.events[mmdd][p].isbulk = true
                           }
                         }
@@ -5908,7 +5910,7 @@ export class SfIEvents extends LitElement {
                         if(this.selectedItemIds.length > 0) {
                           await this.fetchBulkReportingData();
                         }
-                        this.renderAppropriateStream(this.sdate,this.edate,true)
+                        this.renderAppropriateStream(this.sdate,this.edate,true, flagBulk)
                         // if(currentColumnButton != null) {
                         //   currentColumnButton.click();
                         // }
@@ -6050,7 +6052,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);
 
@@ -6060,11 +6062,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;
@@ -6094,11 +6096,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());
@@ -6113,7 +6115,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){
@@ -6121,6 +6123,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
@@ -9844,7 +9858,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();
@@ -9900,7 +9914,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>';
@@ -9909,6 +9923,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
@@ -9924,7 +9950,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) => {
@@ -9999,7 +10025,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));
       
     });
@@ -10008,7 +10034,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))
       
     });
@@ -10017,7 +10043,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))
       
     });
@@ -10035,7 +10061,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))
       
     });
@@ -10045,7 +10071,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))
       
     });
@@ -10054,7 +10080,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))
       
     });
@@ -10063,7 +10089,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))
       
     });
@@ -10072,7 +10098,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))
       
     });
@@ -10081,7 +10107,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))
       
     });
@@ -10090,7 +10116,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))
       
     });
@@ -10099,7 +10125,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))
       
     });
@@ -10123,7 +10149,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)=> {
@@ -10133,7 +10159,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
@@ -10143,7 +10169,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>;
@@ -10353,7 +10379,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;
@@ -10412,7 +10438,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);
         }
@@ -10440,7 +10466,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) => {
@@ -10516,7 +10542,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));
       
     });
@@ -10525,7 +10551,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))
       
     });
@@ -10534,7 +10560,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))
       
     });
@@ -10543,7 +10569,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))
       
     });
@@ -10552,7 +10578,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))
       
     });
@@ -10561,7 +10587,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))
       
     });
@@ -10570,7 +10596,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))
       
     });
@@ -10579,7 +10605,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))
       
     });
@@ -10588,7 +10614,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))
       
     });
@@ -10597,7 +10623,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))
       
     });
@@ -10606,11 +10632,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', () => {
@@ -10637,7 +10674,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);
 
       });
 
@@ -10652,7 +10689,7 @@ export class SfIEvents extends LitElement {
         }
         this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
         this.currentColumnIndex = target + "";
-        this.renderStream(target);
+        this.renderStream(target, showGraph, showBackgroundButton);
 
       })
     }
@@ -10668,7 +10705,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>;
@@ -11987,7 +12024,7 @@ export class SfIEvents extends LitElement {
         ((this._SfDetailContainer as HTMLDivElement).querySelector('#button-detail-close') as HTMLButtonElement)!.dispatchEvent(clickEvent);
         
         // await this.uploadReview(entityId, locationId, mmddyyyy, event["id"], comments, approved)
-
+        let flagBulk = false;
         if(this.selectedItemIds.length === 0) {
           console.log('mmddyyyy', mmddyyyy)
           await this.uploadReview(entityId, locationId, mmddyyyy, listEvent["id"], comments, approved, listEvent.isnotice != null ? "notices" : "events")
@@ -12048,6 +12085,7 @@ export class SfIEvents extends LitElement {
               if(this.events[mmdd][p].id == eventId && this.events[mmdd][p].locationid == locationId && this.events[mmdd][p].entityid == entityId){
                 
                 this.events[mmdd][p].isbulk = true
+                flagBulk = true;
               }
             }
           }
@@ -12067,7 +12105,7 @@ export class SfIEvents extends LitElement {
             if(this.selectedItemIds.length > 0) {  
               await this.fetchBulkReportingData();
             }
-            this.renderAppropriateStream(this.sdate,this.edate, true);
+            this.renderAppropriateStream(this.sdate,this.edate, true, flagBulk);
             var clickEvent = new MouseEvent("click", {
               "view": window,
               "bubbles": true,
@@ -12097,7 +12135,7 @@ export class SfIEvents extends LitElement {
           }, 3000);
 
         } else {
-
+          let flagBulk = false;
           if(this.selectedItemIds.length === 0) {
 
             await this.uploadAudit(entityId, locationId, mmddyyyy, listEvent["id"], comments, approved, listEvent.isnotice != null ? "notices" : "events")
@@ -12155,6 +12193,7 @@ export class SfIEvents extends LitElement {
                 if(this.events[mmdd][p].id == eventId && this.events[mmdd][p].locationid == locationId && this.events[mmdd][p].entityid == entityId){
                   
                   this.events[mmdd][p].isbulk = true
+                  flagBulk = true;
                 }
               }
             }
@@ -12181,7 +12220,7 @@ export class SfIEvents extends LitElement {
               if(this.selectedItemIds.length > 0) {
                 await this.fetchBulkReportingData();
               }
-              this.renderAppropriateStream(this.sdate,this.edate,true);
+              this.renderAppropriateStream(this.sdate,this.edate,true, flagBulk);
               // if(currentColumnButton != null) {
               //   currentColumnButton.click();
               // }
@@ -12276,7 +12315,7 @@ export class SfIEvents extends LitElement {
                     });
 
                     ((this._SfDetailContainer as HTMLDivElement).querySelector('#button-detail-close') as HTMLButtonElement)!.dispatchEvent(clickEvent);
-
+                    let flagBulk = false;
                     if(this.selectedItemIds.length === 0) {
 
                       await this.uploadReport(entityId, locationId, mmddyyyy, listEvent["id"], reportercomments, reporterdoc, docs, event, reportformatvalues, reportformatschema, "notices")
@@ -12395,6 +12434,7 @@ export class SfIEvents extends LitElement {
                           if(this.events[mmdd][p].id == eventId && this.events[mmdd][p].locationid == locationId && this.events[mmdd][p].entityid == entityId){
                             
                             this.events[mmdd][p].isbulk = true
+                            flagBulk = true;
                           }
                         }
                       }
@@ -12413,7 +12453,7 @@ export class SfIEvents extends LitElement {
                         if(this.selectedItemIds.length > 0) {
                           await this.fetchBulkReportingData();
                         }
-                        this.renderAppropriateStream(this.sdate,this.edate,true)
+                        this.renderAppropriateStream(this.sdate,this.edate,true, flagBulk)
                         // if(currentColumnButton != null) {
                         //   currentColumnButton.click();
                         // }
@@ -13264,7 +13304,7 @@ export class SfIEvents extends LitElement {
         ((this._SfDetailContainer as HTMLDivElement).querySelector('#button-detail-close') as HTMLButtonElement)!.dispatchEvent(clickEvent);
         
         // await this.uploadReview(entityId, locationId, mmddyyyy, event["id"], comments, approved)
-
+        let flagBulk = false;
         if(this.selectedItemIds.length === 0) {
           // console.log('mmddyyyy', mmddyyyy)
           await this.uploadReview(entityId, locationId, mmddyyyy, event["id"], comments, approved, event.isnotice != null ? "notices" : "events")
@@ -13324,6 +13364,7 @@ export class SfIEvents extends LitElement {
               if(this.events[mmdd][p].id == eventId && this.events[mmdd][p].locationid == locationId && this.events[mmdd][p].entityid == entityId){
                 
                 this.events[mmdd][p].isbulk = true
+                flagBulk = true;
               }
             }
           }
@@ -13342,7 +13383,7 @@ export class SfIEvents extends LitElement {
             if(this.selectedItemIds.length > 0) {  
               await this.fetchBulkReportingData();
             }
-            this.renderAppropriateStream(this.sdate,this.edate, true);
+            this.renderAppropriateStream(this.sdate,this.edate, true, flagBulk);
             var clickEvent = new MouseEvent("click", {
               "view": window,
               "bubbles": true,
@@ -13372,7 +13413,7 @@ export class SfIEvents extends LitElement {
           }, 3000);
 
         } else {
-
+          let flagBulk = false;
           if(this.selectedItemIds.length === 0) {
 
             await this.uploadAudit(entityId, locationId, mmddyyyy, event["id"], comments, approved, event.isnotice != null ? "notices" : "events")
@@ -13429,6 +13470,7 @@ export class SfIEvents extends LitElement {
                 if(this.events[mmdd][p].id == eventId && this.events[mmdd][p].locationid == locationId && this.events[mmdd][p].entityid == entityId){
                   
                   this.events[mmdd][p].isbulk = true
+                  flagBulk = true;
                 }
               }
             }
@@ -13453,7 +13495,7 @@ export class SfIEvents extends LitElement {
               if(this.selectedItemIds.length > 0) {
                 await this.fetchBulkReportingData();
               }
-              this.renderAppropriateStream(this.sdate,this.edate,true);
+              this.renderAppropriateStream(this.sdate,this.edate,true, flagBulk);
               // if(currentColumnButton != null) {
               //   currentColumnButton.click();
               // }
@@ -13548,7 +13590,7 @@ export class SfIEvents extends LitElement {
                     });
 
                     ((this._SfDetailContainer as HTMLDivElement).querySelector('#button-detail-close') as HTMLButtonElement)!.dispatchEvent(clickEvent);
-
+                    let flagBulk = false;
                     if(this.selectedItemIds.length === 0) {
 
                       //console.log('makerscheckers', makercheckers, reportercomments);
@@ -13682,6 +13724,7 @@ export class SfIEvents extends LitElement {
                           if(this.events[mmdd][p].id == eventId && this.events[mmdd][p].locationid == locationId && this.events[mmdd][p].entityid == entityId){
                             
                             this.events[mmdd][p].isbulk = true
+                            flagBulk = true;
                           }
                         }
                       }
@@ -13700,7 +13743,7 @@ export class SfIEvents extends LitElement {
                         if(this.selectedItemIds.length > 0) {
                           await this.fetchBulkReportingData();
                         }
-                        this.renderAppropriateStream(this.sdate,this.edate,true)
+                        this.renderAppropriateStream(this.sdate,this.edate,true, flagBulk)
                         // if(currentColumnButton != null) {
                         //   currentColumnButton.click();
                         // }
@@ -13861,7 +13904,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);
 
       })
 
@@ -18522,7 +18565,7 @@ export class SfIEvents extends LitElement {
 
       this.fill = "solid";
       if(this.getCurrentTab() == this.TAB_STREAM) {
-        this.renderStream();
+        this.renderStream(0, true, false);
       }
       
     });
@@ -18531,7 +18574,7 @@ export class SfIEvents extends LitElement {
 
       this.fill = "pattern";
       if(this.getCurrentTab() == this.TAB_STREAM) {
-        this.renderStream();
+        this.renderStream(0, true, false);
       }
       
     });
@@ -18596,7 +18639,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);
@@ -18604,7 +18647,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);
@@ -20582,7 +20625,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 () => {
@@ -20612,7 +20655,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 () => {
@@ -23505,17 +23548,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);
@@ -23865,11 +23908,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);
+      const jsonResponse = JSON.parse(xhr.responseText);
+      console.log('bulk reports jsonResponse', jsonResponse);
       let flagBulk = false;
-      if(jsonRespose.result == true){
-        for(let sortid of Object.keys(jsonRespose.data)){
+      if(jsonResponse.result == true){
+        for(let sortid of Object.keys(jsonResponse.data)){
           let sortidArr = sortid.split(';')
           let mmddyyyy = sortidArr[0]
           let entityid = sortidArr[1]
@@ -23887,19 +23930,20 @@ export class SfIEvents extends LitElement {
             }
           }
         }
-        let backgroundProcessButton = (this._SfIEventsC as HTMLDivElement).querySelector('#button-background-process') as HTMLButtonElement
         
         if(flagBulk){
-          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)
+          // 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.style.display = 'none'
+          // backgroundProcessButton.classList.add('hide')
+          // backgroundProcessButton.style.display = 'none'
         }
       }
     }