The single-dropdown work well

.gitignore

@@ -2,3 +2,4 @@
 /dist
 /.tmp
 /.vscode
+webpack.statistics.*

pbiviz.json

@@ -18,10 +18,6 @@
         "icon": "assets/icon.png"
     },
     "externalJS": [
-        "node_modules/jquery/dist/jquery.min.js",
-        "src/coverJquery.js",
-        "node_modules/bootstrap/dist/js/bootstrap.min.js",
-        "node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect.min.js"
     ],
     "style": "style/visual.less",
     "capabilities": "capabilities.json",

src/managers/filterManager.ts

@@ -14,6 +14,15 @@ export class FilterManager implements IFilterManager{
     constructor(host:IVisualHost){
         this.host=host;
     }
+    public dispose():void{
+        console.debug('filterManager disposing');
+
+        if(this.target.table&&this.target.column){
+            this.clear();
+        }
+        console.debug('filterManager disposed');
+
+    }
     public clear():void{
         console.debug("clear start:");
         this.host.applyJsonFilter(null,"general","filter",powerbi.FilterAction.remove);

src/managers/layoutManager.ts

@@ -11,13 +11,22 @@ export class LayoutManager implements ILayoutManager{
     // constructor(layout:Selection<HTMLElement>){
     //     this.layout=layout;
     // }
-    header:Selection<HTMLDivElement>
+    headerContainer:Selection<HTMLDivElement>
     constructor(layout:Selection<HTMLElement>,filterManager:IFilterManager){
         this.layout=layout;
-        this.header=this.layout.append('div').attr('header',true);
+        this.headerContainer=layout.append("div").classed("header-container",true);
-        this.header.append('button').attr('clear',true).text('clear').on('click',function(){
+        this.headerContainer.append('button').attr('clear',true).text('clear').on('click',function(){
             filterManager.clear();
         });
+        this.headerContainer.style('display','none');
+    }
+    public dispose():void{
+        console.debug('layoutManager disposing');
+        
+        this.headerContainer.remove();
+        this.layout.remove();
+        console.debug('layoutManager disposed');
+
     }
     update(dataView:DataView,width:number,height:number):void{
         //this.layout.style("width",width+"px").style("height",height+"px");

src/managers/selectorManager.ts

@@ -21,6 +21,10 @@ export class SelectorManager implements ISelectorManager{
         this.selectorContainer=selectorContainer;
         this.filterManager=filterManager;
     }
+    public dispose():void{
+        this.selector.dispose();
+        this.selectorContainer.remove();
+    }
     public switchSelector<T extends ISelector>(classSelector:new ()=>T){
         let newSelector=new classSelector();
         this.selector?.dispose();
@@ -56,6 +60,30 @@ interface ISelector{
 }
 
 abstract class Selector implements ISelector{
+    protected field: powerbi.DataViewCategoryColumn;
+    protected defaultSelect: powerbi.DataViewValueColumn;
+    protected defaultStart: powerbi.DataViewValueColumn;
+    protected defaultEnd: powerbi.DataViewValueColumn;
+    protected checkFieldChange(field: powerbi.DataViewCategoryColumn):boolean{
+        //Field is not null, so first check the old field
+        if(!this.field){
+            return true;
+        }
+        if(field.source.queryName==this.field.source.queryName){
+            console.debug('checkFieldChange: false');
+            return false;
+        }else{
+            console.debug('checkFieldChange: true');
+            return true;
+        }
+    }
+    protected abstract checkDefaultSelectionChange(defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):boolean;
+    protected checkFieldAndDefaultSelectionChange(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn){
+        console.debug('checkFieldAndDefaultSelectionChange start');
+        let flag:boolean=this.checkFieldChange(field)||this.checkDefaultSelectionChange(defaultSelect,defaultStart,defaultEnd)
+        console.debug('checkFieldAndDefaultSelectionChange end, result:',flag);
+        return flag;
+    }
     constructor(manager: ISelectorManager){
         console.debug("Abstract selector:","constructor start");
         this.manager=manager;
@@ -67,59 +95,105 @@ abstract class Selector implements ISelector{
     public abstract update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):void;
 }
 class DropDownSelector extends Selector{
+    protected checkDefaultSelectionChange(defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn): boolean {
+        //The defaultSelect is nullable, so first check the new defaultSelect
+        console.debug('checkDefaultSelectionChange start');
+        let flag:boolean;
+        if(!defaultSelect||!defaultSelect.values||!defaultSelect.values[0]){
+            console.debug('new defaultSelect is null, set flag=false')
+            flag=flag||false;
+        }else{
+            if(!this.defaultSelect||!this.defaultSelect.values||!defaultSelect.values[0]){
+                console.debug('previous defaultSelect is null, set flag=true');
+                flag=flag||true;
+            }else{
+                if(defaultSelect.values[0].toString()!=this.defaultSelect.values[0].toString()){
+                    console.debug('new defaultSelect not equal to the previous, set flag=true');
+                    flag=flag||true;
+                }else{
+                    console.debug('new defaultSelect equal to the previous, set flag=false');
+                    flag=flag||false;
+                }
+            }
+        }
+        console.debug('checkDefaultSelectionChange end, result:',flag);
+        return flag;
+    }
     private dropDown:Selection<HTMLSelectElement>;
     protected createView() {
         console.debug('dropDownViewManager','createView start');
-        this.dropDown=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true).attr("multiple",true);
+        this.dropDown=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true);//.attr("multiple",false);
+        let filterManager:IFilterManager=this.manager.filterManager;
+        this.dropDown.on("input change",function(){
+            console.debug('DropDownSelector:',"input change");
+            console.debug('this',this);
+            console.debug('filterManager:',filterManager);
+            let selectedValues:string[]=[];
+            for(let i=0;i<this.selectedOptions.length;i++){
+                let option=this.selectedOptions.item(i);
+                if(option.selected){
+                    console.debug("option selected",option);
+                    console.debug('option.text:',option.text);
+                    selectedValues.push(option.text);
+                }
+            }
+            if(selectedValues.length==0){
+            }else{
+                console.debug("selection.length",selectedValues.length);
+                filterManager.filterStringField(selectedValues);
+            }
+            console.debug("this",this.selectedOptions);
+        });
         console.debug('dropDownViewManager','createView end');
+
     }
     public dispose(){
+        console.debug('dropDown-selector disposing');
         this.dropDown.remove();
+        console.debug('dropDown-selector disposed');
+
     }
     public update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
         console.debug('dropDownViewManager','update start');
-        let options=this.dropDown.selectAll("option").data(field.values,function(d){return d.toString();});//map data
+        //Check field, defaultSelect are changed or not
-        options.enter().append("option").text(function(d){return d.toString();}).attr('dropDown-option');//add
+        let needUpdateDefaultSelection:boolean=this.checkFieldAndDefaultSelectionChange(field,defaultSelect,defaultStart,defaultEnd);
+        let newDefaultSelect:string;
+        if(needUpdateDefaultSelection&&defaultSelect&&defaultSelect.values&&defaultSelect.values[0]){
+            newDefaultSelect=defaultSelect.values[0].toString();
+            console.debug('newDefaultSelect:',newDefaultSelect);
+        }
+        let options:d3.Selection<HTMLOptionElement, powerbi.PrimitiveValue, HTMLSelectElement, any>=<d3.Selection<HTMLOptionElement, powerbi.PrimitiveValue, HTMLSelectElement, any>>this.dropDown.selectAll("option").data(field.values,function(d){return d.toString();});//map data
         options.exit().remove();//delete
-        console.debug("dropDown:",this.dropDown);
-        let filterManager:IFilterManager=this.manager.filterManager;
-        // this.dropDown.on("input change",function(){
-        //     console.debug('DropDownSelector:',"input change");
-        //     console.debug('this',this);
-        //     console.debug('filterManager:',filterManager);
-        //     let selectedValues:string[]=[];
-        //     for(let i=0;i<this.selectedOptions.length;i++){
-        //         let option=this.selectedOptions.item(i);
-        //         if(option.selected){
-        //             console.debug("option selected",option);
-        //             console.debug('option.text:',option.text);
-        //             selectedValues.push(option.text);
-        //         }
-        //     }
-        //     if(selectedValues.length==0){
-        //     }else{
-        //         console.debug("selection.length",selectedValues.length);
-        //         filterManager.filterStringField(selectedValues);
-        //     }
-        //     console.debug("this",this.selectedOptions);
-        // });
         
-        $('.dropDown-selector').multiselect({
+        if(needUpdateDefaultSelection&&newDefaultSelect){
-            onChange:function(){
+            console.debug('reset defaultSelection start');
-                let selectedValues:string[]=[];
+            options=options.enter().append("option")
-                $('option:selected').map(function(a,item){
+                    .text(function(d){return d.toString();})
-                    selectedValues.push(item.textContent);
+                    .attr('label',function(d){return d.toString();})
-                    console.debug('item:',item.textContent);
+                    .classed('dropDown-option',true)
-                    filterManager.filterStringField(selectedValues);
+                    .merge(options)
-                });
+                    .property("selected",function(d){
-            },
+                        console.debug('d.toString():',d.toString());
-            maxHeight:100,
+                        console.debug('newDefaultSelect:',newDefaultSelect);
-            includeSelectAllOption:true
+                        return (d.toString()==newDefaultSelect)?'selected':null;
-        });
+                    });
+            this.dropDown.dispatch('change');
+            console.debug('reset defaultSelection end');
+        }else{
+            console.debug('defaultSelection not reset, start update options');
+            options.enter().append("option").text(function(d){return d.toString();}).attr('label',function(d){return d.toString();}).classed('dropDown-option',true);//add
+            console.debug('defaultSelection not reset, end update options');
+        }
+        console.debug("dropDown:",this.dropDown);
+        this.field=field;
+        this.defaultSelect=defaultSelect;
         console.debug('dropDownViewManager','update end');
     }
 }
 class ListSelector extends Selector{
+    protected checkDefaultSelectionChange(defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn): boolean {
+        throw new Error("Method not implemented.");
+    }
     public dispose() {
         throw new Error("Method not implemented.");
     }
@@ -132,6 +206,9 @@ class ListSelector extends Selector{
     }
 }
 class CalendarSelector extends Selector{
+    protected checkDefaultSelectionChange(defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn): boolean {
+        throw new Error("Method not implemented.");
+    }
     public dispose() {
         throw new Error("Method not implemented.");
     }

src/visual/visual.ts

@@ -54,7 +54,6 @@ export class Visual implements IVisual {
     private settings: VisualSettings;
     private layoutManager: visualInterfaces.ILayoutManager;
     private selectorManager: visualInterfaces.ISelectorManager;
-    private view:SVGElement;
     private filterManager:visualInterfaces.IFilterManager;
     private selectionManager:powerbi.extensibility.ISelectionManager;
     constructor(options: VisualConstructorOptions) {
@@ -63,6 +62,8 @@ export class Visual implements IVisual {
         if (document) {
             this.selectionManager =options.host.createSelectionManager();
             let container=d3.select(options.element).append("div").classed("container",true);
+
+            //overload context menu
             // d3.select(options.element).on('contextmenu', () => {
             //     const mouseEvent: MouseEvent = <MouseEvent>d3.event;
             //     //const eventTarget: EventTarget = mouseEvent.target;
@@ -73,12 +74,14 @@ export class Visual implements IVisual {
             //     });
             //     //mouseEvent.preventDefault();
             // });
-            let headerContainer=container.append("div").classed("header-container",true);
+
-            let selectorContainer=container.append("div").classed("selector-container",true);
             //First, create the filterManager
             this.filterManager=ManagerFactory.CreateFilterManager(FilterManager,options.host);
-            //Then, layoutManager and selectorManager
+            //Then, layoutManager and selectorManager, both use the filterManager
+            //Lagyoutmanager manage the whole div and the slicer-header
             this.layoutManager=ManagerFactory.CreateLayoutManager(LayoutManager,container,this.filterManager);
+            //SelectorManager manage selectors
+            let selectorContainer=container.append("div").classed("selector-container",true);
             this.selectorManager=ManagerFactory.CreateSelectorManager(SelectorManager,selectorContainer,this.filterManager);
         }
         console.debug('end constructor');
@@ -112,12 +115,14 @@ export class Visual implements IVisual {
         console.debug("start layoutManager updateView");
         this.layoutManager.update(dataView,width-10,height-10);
 
-        console.debug("start selectorManager updateView");
-        this.selectorManager.updateData(field,defaultSelect,defaultStart,defaultEnd);
-
         console.debug("start filterManager updateView");
         this.filterManager.update(field);
         this.events.renderingFinished(options);
+        
+        console.debug("start selectorManager updateView");
+        this.selectorManager.updateData(field,defaultSelect,defaultStart,defaultEnd);
+
+
     }
 
     private static parseSettings(dataView: DataView): VisualSettings {

src/visual/visualInterfaces.ts

@@ -14,6 +14,7 @@ Main interfaces
 export interface ILayoutManager{
     layout:Selection<HTMLElement>;
     update(dataView:DataView,width:number,height:number):void;
+    dispose():void;
 }
 export interface ILayoutManagerConstructor{
     new(container:Selection<HTMLElement>,filterManager:IFilterManager):ILayoutManager;
@@ -23,19 +24,20 @@ export interface ILayoutManagerConstructor{
 export interface ISelectorManager{
     selectorContainer:Selection<HTMLElement>;
     filterManager:IFilterManager;
-    updateData(field:powerbi.DataViewCategoryColumn,defaultSelect:powerbi.DataViewValueColumn,defaultStart:powerbi.DataViewValueColumn,defaultEnd:powerbi.DataViewValueColumn);
+    dispose():void;
+    updateData(field:powerbi.DataViewCategoryColumn,defaultSelect:powerbi.DataViewValueColumn,defaultStart:powerbi.DataViewValueColumn,defaultEnd:powerbi.DataViewValueColumn):void;
 }
 export interface ISelectorManagerConstructor{
     new(selectorContainer:Selection<HTMLElement>,filterManager:IFilterManager):ISelectorManager;
 }
 
 
-
 //IFilterManager
 export interface IFilterManager{
     update(field:powerbi.DataViewCategoryColumn):void;
     filterStringField(selection:string[]):void;
     clear():void;
+    dispose():void;
 }
 export interface IFilterManagerConstructor{
     new(host:IVisualHost):IFilterManager;

style/visual.less

@@ -1,5 +1,3 @@
-@import "/node_modules/bootstrap/dist/css/bootstrap.min.css";
-@import "/node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css";
 p {
     font-size: 20px;
     font-weight: bold;