sf-i-events 1.0.754 → 1.0.756

package/package.json

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

package/sf-i-events.js

@@ -2140,12 +2140,14 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<div class="align-center d-flex flex-wrap align-start justify-between mb-10 w-100-m-0" part="duration-title-container"><h4 part="duration-title" class="m-0">' + parametersTitle + '</h4>';
             if (this.getFeatures().length > 1) {
                 html += '<div class="filter-button-container"><button part="button-icon" id="filter-button" class="material-icons">filter_list</button>';
-                html += '<div id="filter-list-container" class="filter-list-container hide flex-col justify-center align-start p-10" part="filter-list-container" anchor="filter-button">';
-                html += `<div class="filter-input-container d-flex"><input class="input-select-feature-all" type="checkbox" ${this.selectedFeatures.length >= (this.getFeatures().length) ? 'checked' : ''} id="input-select-feature-all"  part="input-select-feature" name="all"></input><label for="input-select-feature-all" class="input-select-feature-label"  part="input-select-feature-label">all</label></div>`;
+                html += '<div id="filter-list-container" class="filter-list-container hide flex-col justify-between align-start p-10" part="filter-list-container" anchor="filter-button">';
+                html += '<div id="filter-label-container" class="filter-label-container d-flex justify-between align-center" part="filter-label-container"><label class="filter-label"  part="filter-label">Filters</label><button id="button-submit-features" part="button-icon-small" class="material-icons button-expand invisible">check</button></div>';
+                html += `<div class="filter-input-container d-flex"><input class="input-select-feature-all" type="checkbox" ${this.selectedFeatures.length >= (this.getFeatures().length) ? 'checked' : ''} id="input-select-feature-all"  part="input-select-feature" name="all"></input><label for="input-select-feature-all" class="input-select-feature-label-all" id="input-select-feature-label-all"
+         part="input-select-feature-label">all</label></div>`;
                 // html += `<div class="filter-input-container d-flex"><input class="input-select-feature-compliances" type="checkbox" ${this.selectedFeatures.indexOf('compliances') >= 0 ? 'checked' : ''} id="input-select-feature-compliances"  part="input-select-feature" name="compliances"></input><label for="input-select-feature-compliances" class="input-select-feature-label"  part="input-select-feature-label">compliances</label></div>`
                 for (let [index, feature] of this.getFeatures().entries()) {
                     console.log('rendering features', feature, this.selectedFeatures);
-                    html += `<div class="filter-input-container d-flex"><input class="input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" class="input-select-feature-label"  part="input-select-feature-label">${feature}</label></div>`;
+                    html += `<div class="filter-input-container d-flex"><input class="input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" id="input-select-feature-label-${index}" class="input-select-feature-label"  part="input-select-feature-label">${feature}</label></div>`;
                 }
                 html += '</div></div>';
             }
@@ -3675,8 +3677,41 @@ let SfIEvents = class SfIEvents extends LitElement {
             filterButton === null || filterButton === void 0 ? void 0 : filterButton.addEventListener('click', () => {
                 const filterList = eventsContainer.querySelector('#filter-list-container');
                 filterList.style.display = (filterList.style.display != 'block' ? 'block' : 'none');
+                filterButton.innerHTML = (filterList.style.display != 'block' ? 'filter_list' : 'close');
+                const filterSubmitButton = filterList.querySelector('#button-submit-features');
+                filterSubmitButton.addEventListener('click', () => {
+                    this.processDateSelection(eventsContainer);
+                });
+                const selectFeatureAll = filterList.querySelector('.input-select-feature-all');
+                selectFeatureAll.addEventListener('click', async (ev) => {
+                    let target = ev.target;
+                    if (target.checked) {
+                        for (let feature of this.getFeatures()) {
+                            if (this.selectedFeatures.indexOf(feature) < 0) {
+                                this.selectedFeatures.push(feature);
+                            }
+                        }
+                    }
+                    else {
+                        this.selectedFeatures = [];
+                    }
+                    const selectFeatures = filterList.querySelectorAll('.input-select-feature');
+                    for (let selectFeature of selectFeatures) {
+                        let id = selectFeature.id;
+                        let i = id.split('-')[3];
+                        let selectedFeature = this.getFeatures()[parseInt(i)];
+                        selectFeature.checked = this.selectedFeatures.indexOf(selectedFeature) >= 0;
+                    }
+                    filterSubmitButton.style.visibility = 'visible';
+                });
+                const selectFeatureAllLabel = filterList.querySelector('#input-select-feature-label-all');
+                selectFeatureAllLabel.addEventListener('click', () => {
+                    selectFeatureAll.checked = !selectFeatureAll.checked;
+                    selectFeatureAll.click();
+                });
                 const selectFeatures = filterList.querySelectorAll('.input-select-feature');
-                for (let selectFeature of selectFeatures) {
+                const selectFeatureLabels = filterList.querySelectorAll('.input-select-feature-label');
+                for (let [i, selectFeature] of selectFeatures.entries()) {
                     selectFeature.addEventListener('click', (ev) => {
                         let target = ev.target;
                         let id = target.id;
@@ -3692,29 +3727,14 @@ let SfIEvents = class SfIEvents extends LitElement {
                                 this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature), 1);
                             }
                         }
-                        this.processDateSelection(eventsContainer);
+                        filterSubmitButton.style.visibility = 'visible';
+                    });
+                    selectFeatureLabels[i].addEventListener('click', () => {
+                        selectFeature.checked = !selectFeature.checked;
+                        selectFeature.click();
                     });
                 }
             });
-            // const selectFeatures = eventsContainer.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
-            // for(let selectFeature of selectFeatures){
-            //   selectFeature.addEventListener('click',(ev: any) => {
-            //     let target = ev.target;
-            //     let id = target.id;
-            //     let index = id.split('-')[3];
-            //     let selectedFeature = this.getFeatures()[index]
-            //     if(target.checked){
-            //       if(this.selectedFeatures.indexOf(selectedFeature) < 0){
-            //         this.selectedFeatures.push(selectedFeature)
-            //       }
-            //     }else{
-            //       if(this.selectedFeatures.indexOf(selectedFeature) >= 0){
-            //         this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
-            //       }
-            //     }
-            //     this.processDateSelection(eventsContainer)
-            //   })
-            // }
             const radioExpander = eventsContainer.querySelector('#graph-radios-expander');
             radioExpander === null || radioExpander === void 0 ? void 0 : radioExpander.addEventListener('click', (e) => {
                 const button = e.currentTarget;
@@ -6717,6 +6737,19 @@ let SfIEvents = class SfIEvents extends LitElement {
             filterButton === null || filterButton === void 0 ? void 0 : filterButton.addEventListener('click', () => {
                 const filterList = this._SfThisContainer.querySelector('#filter-list-container');
                 filterList.style.display = (filterList.style.display != 'block' ? 'block' : 'none');
+                filterButton.innerHTML = (filterList.style.display != 'block' ? 'filter_list' : 'close');
+                const filterSubmitButton = filterList.querySelector('#button-submit-features');
+                filterSubmitButton.addEventListener('click', async () => {
+                    const dateResult = this.calculateStartAndEndDateOfStream(index);
+                    console.log('dateresult', dateResult, index);
+                    console.log('selectedfeatures', this.selectedFeatures);
+                    this.currentColumnIndex = index + "";
+                    if (dateResult != null) {
+                        await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
+                    }
+                    this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+                    this.renderStream(index);
+                });
                 const selectFeatureAll = filterList.querySelector('.input-select-feature-all');
                 selectFeatureAll.addEventListener('click', async (ev) => {
                     let target = ev.target;
@@ -6737,18 +6770,16 @@ let SfIEvents = class SfIEvents extends LitElement {
                         let selectedFeature = this.getFeatures()[parseInt(i)];
                         selectFeature.checked = this.selectedFeatures.indexOf(selectedFeature) >= 0;
                     }
-                    const dateResult = this.calculateStartAndEndDateOfStream(index);
-                    console.log('dateresult', dateResult, index);
-                    console.log('selectedfeatures', this.selectedFeatures);
-                    this.currentColumnIndex = index + "";
-                    if (dateResult != null) {
-                        await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
-                    }
-                    this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                    this.renderStream(index);
+                    filterSubmitButton.style.visibility = 'visible';
+                });
+                const selectFeatureAllLabel = filterList.querySelector('#input-select-feature-label-all');
+                selectFeatureAllLabel.addEventListener('click', () => {
+                    selectFeatureAll.checked = !selectFeatureAll.checked;
+                    selectFeatureAll.click();
                 });
                 const selectFeatures = filterList.querySelectorAll('.input-select-feature');
-                for (let selectFeature of selectFeatures) {
+                const selectFeatureLabels = filterList.querySelectorAll('.input-select-feature-label');
+                for (let [i, selectFeature] of selectFeatures.entries()) {
                     selectFeature.addEventListener('click', async (ev) => {
                         let target = ev.target;
                         let id = target.id;
@@ -6764,13 +6795,11 @@ let SfIEvents = class SfIEvents extends LitElement {
                                 this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature), 1);
                             }
                         }
-                        const dateResult = this.calculateStartAndEndDateOfStream(index);
-                        this.currentColumnIndex = index + "";
-                        if (dateResult != null) {
-                            await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
-                        }
-                        this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                        this.renderStream(index);
+                        filterSubmitButton.style.visibility = 'visible';
+                    });
+                    selectFeatureLabels[i].addEventListener('click', () => {
+                        selectFeature.checked = !selectFeature.checked;
+                        selectFeature.click();
                     });
                 }
             });
@@ -7122,6 +7151,21 @@ let SfIEvents = class SfIEvents extends LitElement {
             filterButton === null || filterButton === void 0 ? void 0 : filterButton.addEventListener('click', () => {
                 const filterList = this._SfStreamContainer.querySelector('#filter-list-container');
                 filterList.style.display = (filterList.style.display != 'block' ? 'block' : 'none');
+                filterButton.innerHTML = (filterList.style.display != 'block' ? 'filter_list' : 'close');
+                const filterSubmitButton = filterList.querySelector('#button-submit-features');
+                filterSubmitButton.addEventListener('click', async () => {
+                    const dateResult = this.calculateStartAndEndDateOfStream(index);
+                    const monthResult = this.calculateMonthFromIndex(index);
+                    console.log('monthResult', monthResult);
+                    console.log('dateresult', dateResult, index);
+                    console.log('selectedfeatures', this.selectedFeatures);
+                    this.currentColumnIndex = index + "";
+                    if (dateResult != null) {
+                        await this.renderWithFeatures(dateResult.startDate, dateResult.endDate, "", "no", ("0" + monthResult).slice(-2));
+                    }
+                    this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+                    this.renderStream(index);
+                });
                 const selectFeatureAll = filterList.querySelector('.input-select-feature-all');
                 selectFeatureAll.addEventListener('click', async (ev) => {
                     let target = ev.target;
@@ -7142,20 +7186,16 @@ let SfIEvents = class SfIEvents extends LitElement {
                         let selectedFeature = this.getFeatures()[parseInt(i)];
                         selectFeature.checked = this.selectedFeatures.indexOf(selectedFeature) >= 0;
                     }
-                    const dateResult = this.calculateStartAndEndDateOfStream(index);
-                    const monthResult = this.calculateMonthFromIndex(index);
-                    console.log('monthResult', monthResult);
-                    console.log('dateresult', dateResult, index);
-                    console.log('selectedfeatures', this.selectedFeatures);
-                    this.currentColumnIndex = index + "";
-                    if (dateResult != null) {
-                        await this.renderWithFeatures(dateResult.startDate, dateResult.endDate, "", "no", ("0" + monthResult).slice(-2));
-                    }
-                    this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                    this.renderStream(index);
+                    filterSubmitButton.style.visibility = 'visible';
+                });
+                const selectFeatureAllLabel = filterList.querySelector('#input-select-feature-label-all');
+                selectFeatureAllLabel.addEventListener('click', () => {
+                    selectFeatureAll.checked = !selectFeatureAll.checked;
+                    selectFeatureAll.click();
                 });
                 const selectFeatures = filterList.querySelectorAll('.input-select-feature');
-                for (let selectFeature of selectFeatures) {
+                const selectFeatureLabels = filterList.querySelectorAll('.input-select-feature-label');
+                for (let [i, selectFeature] of selectFeatures.entries()) {
                     selectFeature.addEventListener('click', async (ev) => {
                         let target = ev.target;
                         let id = target.id;
@@ -7171,15 +7211,11 @@ let SfIEvents = class SfIEvents extends LitElement {
                                 this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature), 1);
                             }
                         }
-                        const dateResult = this.calculateStartAndEndDateOfStream(index);
-                        const monthResult = this.calculateMonthFromIndex(index);
-                        this.currentColumnIndex = index + "";
-                        console.log('rendering feature', monthResult, dateResult);
-                        if (dateResult != null) {
-                            await this.renderWithFeatures(dateResult.startDate, dateResult.endDate, "", "no", ("0" + monthResult).slice(-2));
-                        }
-                        this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-                        this.renderStream(index);
+                        filterSubmitButton.style.visibility = 'visible';
+                    });
+                    selectFeatureLabels[i].addEventListener('click', () => {
+                        selectFeature.checked = !selectFeature.checked;
+                        selectFeature.click();
                     });
                 }
             });

package/src/sf-i-events.ts

@@ -4234,12 +4234,14 @@ export class SfIEvents extends LitElement {
       html += '<div class="align-center d-flex flex-wrap align-start justify-between mb-10 w-100-m-0" part="duration-title-container"><h4 part="duration-title" class="m-0">' + parametersTitle + '</h4>'
       if(this.getFeatures().length > 1){
         html += '<div class="filter-button-container"><button part="button-icon" id="filter-button" class="material-icons">filter_list</button>'
-        html += '<div id="filter-list-container" class="filter-list-container hide flex-col justify-center align-start p-10" part="filter-list-container" anchor="filter-button">'
-        html += `<div class="filter-input-container d-flex"><input class="input-select-feature-all" type="checkbox" ${this.selectedFeatures.length >= (this.getFeatures().length) ? 'checked' : ''} id="input-select-feature-all"  part="input-select-feature" name="all"></input><label for="input-select-feature-all" class="input-select-feature-label"  part="input-select-feature-label">all</label></div>`
+        html += '<div id="filter-list-container" class="filter-list-container hide flex-col justify-between align-start p-10" part="filter-list-container" anchor="filter-button">'
+        html += '<div id="filter-label-container" class="filter-label-container d-flex justify-between align-center" part="filter-label-container"><label class="filter-label"  part="filter-label">Filters</label><button id="button-submit-features" part="button-icon-small" class="material-icons button-expand invisible">check</button></div>' 
+        html += `<div class="filter-input-container d-flex"><input class="input-select-feature-all" type="checkbox" ${this.selectedFeatures.length >= (this.getFeatures().length) ? 'checked' : ''} id="input-select-feature-all"  part="input-select-feature" name="all"></input><label for="input-select-feature-all" class="input-select-feature-label-all" id="input-select-feature-label-all"
+         part="input-select-feature-label">all</label></div>`
         // html += `<div class="filter-input-container d-flex"><input class="input-select-feature-compliances" type="checkbox" ${this.selectedFeatures.indexOf('compliances') >= 0 ? 'checked' : ''} id="input-select-feature-compliances"  part="input-select-feature" name="compliances"></input><label for="input-select-feature-compliances" class="input-select-feature-label"  part="input-select-feature-label">compliances</label></div>`
         for(let [index,feature] of this.getFeatures().entries()){
           console.log('rendering features', feature, this.selectedFeatures);
-          html += `<div class="filter-input-container d-flex"><input class="input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" class="input-select-feature-label"  part="input-select-feature-label">${feature}</label></div>`
+          html += `<div class="filter-input-container d-flex"><input class="input-select-feature" type="checkbox" ${this.selectedFeatures.indexOf(feature) >= 0 ? 'checked' : ''} id="input-select-feature-${index}"  part="input-select-feature" name="${feature}"></input><label for="input-select-feature-${index}" id="input-select-feature-label-${index}" class="input-select-feature-label"  part="input-select-feature-label">${feature}</label></div>`
         }
         html += '</div></div>'
       }
@@ -6064,8 +6066,40 @@ export class SfIEvents extends LitElement {
     filterButton?.addEventListener('click',() => {
       const filterList = eventsContainer.querySelector('#filter-list-container') as HTMLDivElement
       filterList.style.display = (filterList.style.display != 'block' ? 'block' : 'none')
+      filterButton.innerHTML = (filterList.style.display != 'block' ? 'filter_list' : 'close')
+      const filterSubmitButton = filterList.querySelector('#button-submit-features') as HTMLButtonElement
+      filterSubmitButton.addEventListener('click',() => {
+        this.processDateSelection(eventsContainer);
+      })
+      const selectFeatureAll = filterList.querySelector('.input-select-feature-all') as HTMLInputElement
+      selectFeatureAll.addEventListener('click',async(ev: any) => {
+        let target = ev.target;
+        if(target.checked){
+          for(let feature of this.getFeatures()){
+            if(this.selectedFeatures.indexOf(feature) < 0){
+              this.selectedFeatures.push(feature);
+            }
+          }
+        }else{
+          this.selectedFeatures = []
+        }
+        const selectFeatures = filterList.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
+        for(let selectFeature of selectFeatures){
+          let id = selectFeature.id;
+          let i = id.split('-')[3];
+          let selectedFeature = this.getFeatures()[parseInt(i)]
+          selectFeature.checked = this.selectedFeatures.indexOf(selectedFeature) >= 0
+        }
+        filterSubmitButton.style.visibility = 'visible'
+      })
+      const selectFeatureAllLabel = filterList.querySelector('#input-select-feature-label-all') as HTMLLabelElement
+      selectFeatureAllLabel.addEventListener('click',()=>{
+        selectFeatureAll.checked = !selectFeatureAll.checked
+        selectFeatureAll.click();
+      })
       const selectFeatures = filterList.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
-      for(let selectFeature of selectFeatures){
+      const selectFeatureLabels = filterList.querySelectorAll('.input-select-feature-label') as NodeListOf<HTMLLabelElement>
+      for(let [i,selectFeature] of selectFeatures.entries()){
         selectFeature.addEventListener('click',(ev: any) => {
           let target = ev.target;
           let id = target.id;
@@ -6080,29 +6114,14 @@ export class SfIEvents extends LitElement {
               this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
             }
           }
-          this.processDateSelection(eventsContainer)
+          filterSubmitButton.style.visibility = 'visible'
+        })
+        selectFeatureLabels[i].addEventListener('click',() => {
+          selectFeature.checked = !selectFeature.checked
+          selectFeature.click();
         })
       }
     })
-    // const selectFeatures = eventsContainer.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
-    // for(let selectFeature of selectFeatures){
-    //   selectFeature.addEventListener('click',(ev: any) => {
-    //     let target = ev.target;
-    //     let id = target.id;
-    //     let index = id.split('-')[3];
-    //     let selectedFeature = this.getFeatures()[index]
-    //     if(target.checked){
-    //       if(this.selectedFeatures.indexOf(selectedFeature) < 0){
-    //         this.selectedFeatures.push(selectedFeature)
-    //       }
-    //     }else{
-    //       if(this.selectedFeatures.indexOf(selectedFeature) >= 0){
-    //         this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
-    //       }
-    //     }
-    //     this.processDateSelection(eventsContainer)
-    //   })
-    // }
     const radioExpander = eventsContainer.querySelector('#graph-radios-expander') as HTMLButtonElement;
     radioExpander?.addEventListener('click', (e: any) => {
 
@@ -9766,6 +9785,19 @@ export class SfIEvents extends LitElement {
     filterButton?.addEventListener('click',() => {
       const filterList = (this._SfThisContainer as HTMLDivElement).querySelector('#filter-list-container') as HTMLDivElement
       filterList.style.display = (filterList.style.display != 'block' ? 'block' : 'none')
+      filterButton.innerHTML = (filterList.style.display != 'block' ? 'filter_list' : 'close')
+      const filterSubmitButton = filterList.querySelector('#button-submit-features') as HTMLButtonElement
+      filterSubmitButton.addEventListener('click',async() => {
+        const dateResult = this.calculateStartAndEndDateOfStream(index);
+        console.log('dateresult', dateResult, index);
+        console.log('selectedfeatures', this.selectedFeatures);
+        this.currentColumnIndex = index + "";
+        if(dateResult != null) {
+          await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
+        }
+        this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+        this.renderStream(index);
+      })
       const selectFeatureAll = filterList.querySelector('.input-select-feature-all') as HTMLInputElement
       selectFeatureAll.addEventListener('click',async(ev: any) => {
         let target = ev.target;
@@ -9785,18 +9817,16 @@ export class SfIEvents extends LitElement {
           let selectedFeature = this.getFeatures()[parseInt(i)]
           selectFeature.checked = this.selectedFeatures.indexOf(selectedFeature) >= 0
         }
-        const dateResult = this.calculateStartAndEndDateOfStream(index);
-        console.log('dateresult', dateResult, index);
-        console.log('selectedfeatures', this.selectedFeatures);
-        this.currentColumnIndex = index + "";
-        if(dateResult != null) {
-          await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
-        }
-        this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-        this.renderStream(index);
+        filterSubmitButton.style.visibility = 'visible'
+      })
+      const selectFeatureAllLabel = filterList.querySelector('#input-select-feature-label-all') as HTMLLabelElement
+      selectFeatureAllLabel.addEventListener('click',()=>{
+        selectFeatureAll.checked = !selectFeatureAll.checked
+        selectFeatureAll.click();
       })
       const selectFeatures = filterList.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
-      for(let selectFeature of selectFeatures){
+      const selectFeatureLabels = filterList.querySelectorAll('.input-select-feature-label') as NodeListOf<HTMLLabelElement>
+      for(let [i,selectFeature] of selectFeatures.entries()){
         selectFeature.addEventListener('click',async (ev: any) => {
           let target = ev.target;
           let id = target.id;
@@ -9811,14 +9841,11 @@ export class SfIEvents extends LitElement {
               this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
             }
           }
-          const dateResult = this.calculateStartAndEndDateOfStream(index);
-          this.currentColumnIndex = index + "";
-          if(dateResult != null) {
-            await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
-          }
-          this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-          this.renderStream(index);
-          
+          filterSubmitButton.style.visibility = 'visible'
+        })
+        selectFeatureLabels[i].addEventListener('click',() => {
+          selectFeature.checked = !selectFeature.checked
+          selectFeature.click();
         })
       }
     }) 
@@ -10267,6 +10294,21 @@ export class SfIEvents extends LitElement {
     filterButton?.addEventListener('click',() => {
       const filterList = (this._SfStreamContainer as HTMLDivElement).querySelector('#filter-list-container') as HTMLDivElement
       filterList.style.display = (filterList.style.display != 'block' ? 'block' : 'none')
+      filterButton.innerHTML = (filterList.style.display != 'block' ? 'filter_list' : 'close')
+      const filterSubmitButton = filterList.querySelector('#button-submit-features') as HTMLButtonElement
+      filterSubmitButton.addEventListener('click',async() => {
+        const dateResult = this.calculateStartAndEndDateOfStream(index);
+        const monthResult = this.calculateMonthFromIndex(index);
+        console.log('monthResult', monthResult);
+        console.log('dateresult', dateResult, index);
+        console.log('selectedfeatures', this.selectedFeatures);
+        this.currentColumnIndex = index + "";
+        if(dateResult != null) {
+          await this.renderWithFeatures(dateResult.startDate, dateResult.endDate,"","no",("0" + monthResult).slice(-2));
+        }
+        this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+        this.renderStream(index);
+      })
       const selectFeatureAll = filterList.querySelector('.input-select-feature-all') as HTMLInputElement
       selectFeatureAll.addEventListener('click',async(ev: any) => {
         let target = ev.target;
@@ -10286,20 +10328,16 @@ export class SfIEvents extends LitElement {
           let selectedFeature = this.getFeatures()[parseInt(i)]
           selectFeature.checked = this.selectedFeatures.indexOf(selectedFeature) >= 0
         }
-        const dateResult = this.calculateStartAndEndDateOfStream(index);
-        const monthResult = this.calculateMonthFromIndex(index);
-        console.log('monthResult', monthResult);
-        console.log('dateresult', dateResult, index);
-        console.log('selectedfeatures', this.selectedFeatures);
-        this.currentColumnIndex = index + "";
-        if(dateResult != null) {
-          await this.renderWithFeatures(dateResult.startDate, dateResult.endDate,"","no",("0" + monthResult).slice(-2));
-        }
-        this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-        this.renderStream(index);
+        filterSubmitButton.style.visibility = 'visible'
+      })
+      const selectFeatureAllLabel = filterList.querySelector('#input-select-feature-label-all') as HTMLLabelElement
+      selectFeatureAllLabel.addEventListener('click',()=>{
+        selectFeatureAll.checked = !selectFeatureAll.checked;
+        selectFeatureAll.click();
       })
       const selectFeatures = filterList.querySelectorAll('.input-select-feature') as NodeListOf<HTMLInputElement>
-      for(let selectFeature of selectFeatures){
+      const selectFeatureLabels = filterList.querySelectorAll('.input-select-feature-label') as NodeListOf<HTMLLabelElement>
+      for(let [i,selectFeature] of selectFeatures.entries()){
         selectFeature.addEventListener('click',async (ev: any) => {
           let target = ev.target;
           let id = target.id;
@@ -10314,17 +10352,13 @@ export class SfIEvents extends LitElement {
               this.selectedFeatures.splice(this.selectedFeatures.indexOf(selectedFeature),1);
             }
           }
-          const dateResult = this.calculateStartAndEndDateOfStream(index);
-          const monthResult = this.calculateMonthFromIndex(index);
-          this.currentColumnIndex = index + "";
-          console.log('rendering feature', monthResult, dateResult);
-          if(dateResult != null) {
-            await this.renderWithFeatures(dateResult.startDate, dateResult.endDate,"","no",("0" + monthResult).slice(-2));
-          }
-          this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
-          this.renderStream(index);
+          filterSubmitButton.style.visibility = 'visible'
           
         })
+        selectFeatureLabels[i].addEventListener('click',() => {
+          selectFeature.checked = !selectFeature.checked
+          selectFeature.click()
+        })
       }
     })