private initContainer()

in src/sampleSlicer.ts [405:453]


    private initContainer() {
        const settings: Settings = this.settings,
            slicerBodyViewport: IViewport = SampleSlicer.getSlicerBodyViewport(this.currentViewport);

        // Prevents visual container from doing any other actions on keypress
        this.root.addEventListener("keyup", (event: KeyboardEvent) => {
          event.stopPropagation()
        });

        this.root.addEventListener('contextmenu', (event) => {
            const emptySelection = {
                "measures": [],
                "dataMap": {
                }
            };
            
            this.selectionManager.showContextMenu(emptySelection, {
                x: event.clientX,
                y: event.clientY
            });
            event.preventDefault();
        });

        this.root.addEventListener("keydown", (event: KeyboardEvent) =>{
            event.stopPropagation()
        });
        const outerContainer = SampleSlicer.createElement("<div class='sampleSlicer outerContainer' />");
        this.root.appendChild(outerContainer)


        // this.initClearButton(outerContainer); // Temporary unavailable 
        this.initHeader(outerContainer);
        this.initRangeSlicer(outerContainer);

        const slicerContainer: Selection<any> = d3Select(outerContainer)
            .append('div')
            .classed(SampleSlicer.ContainerSelector.className, true)
            .style('background', '#ffffff');

        this.initSearchWidget(slicerContainer.node());

        // SLICER BODY & TABLE VIEW
        this.slicerBody = slicerContainer
            .append('div')
            .classed(SampleSlicer.BodySelector.className, true)
            .style('height', `${slicerBodyViewport.height - 120}px`);

        this.initTableView();
    }