public render()

in src/UXClient/Components/ScatterPlot/ScatterPlot.ts [61:196]
100 lines of code
14 McCabe index (conditional complexity)

    public render(data: any, options: any, aggregateExpressionOptions?: any, fromSlider: boolean = false) {
        super.render(data, options, aggregateExpressionOptions);
        // If measure options not set, or less than 2, return
        if(this.chartOptions["spMeasures"] == null || (this.chartOptions["spMeasures"] != null && this.chartOptions["spMeasures"].length < 2)){
            let invalidMessage = "spMeasures not correctly specified or has length < 2: " + this.chartOptions["spMeasures"] + 
            "\n\nPlease add the following chartOption: {spMeasures: ['example_x_axis_measure', 'example_y_axis_measure', 'example_radius_measure']} " +
            "where the measures correspond to the data key names."
            console.log(invalidMessage);
            return;
        }

        this.chartMargins.top = (this.chartOptions.legend === 'compact') ? 84 : 40;
        if(!this.chartOptions.hideChartControlPanel)
            this.chartMargins.top += 20;
        this.chartMargins.left = (this.chartOptions.spAxisLabels != null && this.chartOptions.spAxisLabels.length >= 2) ? 120 : 70;

        this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.chartOptions.timestamp, this.aggregateExpressionOptions);
        this.chartComponentData.setExtents(this.chartOptions.spMeasures, !fromSlider);
        
        // Check measure validity
        if(!this.checkExtentValidity()) return;

        this.controlsOffset = (this.chartOptions.legend == "shown" ? this.CONTROLSWIDTH : 0)
        this.setWidthAndHeight();

        /******** STATIC INITIALIZATION ********/   
        if (this.svgSelection == null) {
            // Initialize extents
            //this.chartComponentData.setExtents(this.chartOptions.spMeasures);
            this.targetElement = d3.select(this.renderTarget)
                .classed("tsi-scatterPlot", true);
           
            this.svgSelection = this.targetElement.append("svg")
                .attr("class", "tsi-scatterPlotSVG tsi-chartSVG")
                .attr('title', this.getString('Scatter plot'))
                .attr("height", this.height)

            this.g = this.svgSelection.append("g")
                .classed("tsi-svgGroup", true)

            this.lineWrapper = this.g.append("g")
                .classed("tsi-lineWrapper", true);

            this.pointWrapper = this.g.append("g")
                .classed("tsi-pointWrapper", true);

            // Create temporal slider div
            this.sliderWrapper = d3.select(this.renderTarget).append('div').classed('tsi-sliderWrapper', true);
                
            this.tooltip = new Tooltip(d3.select(this.renderTarget));

            // Initialize voronoi
            this.voronoiGroup = this.g.append("rect")
                .attr("class", "tsi-voronoiWrap")
                .attr("fill", "transparent");

            // Initialize focus crosshair lines
            this.focus = this.pointWrapper.append("g")
                .attr("transform", "translate(-100,-100)")
                .attr("class", "tsi-focus")
                .style("display", "none");
            
            this.focus.append("line")
                .attr("class", "tsi-focusLine tsi-vLine")
                .attr("x1", 0)
                .attr("x2", 0)
                .attr("y1", this.chartOptions.aggTopMargin)
                .attr("y2", this.chartHeight);

            this.focus.append("line")
                .attr("class", "tsi-focusLine tsi-hLine")
                .attr("x1", 0)
                .attr("x2", this.chartWidth)
                .attr("y1", 0)
                .attr("y2", 0);
            
            // Initialize focus axis data boxes
            let hHoverG: any = this.focus.append("g")
                .attr("class", 'hHoverG')
                .style("pointer-events", "none")
                .attr("transform", "translate(0," + (this.chartHeight + this.chartOptions.aggTopMargin) + ")");
            hHoverG.append("rect")
                .style("pointer-events", "none")
                .attr("class", 'hHoverBox')
                .attr("x", 0)
                .attr("y", 4)
                .attr("width", 0)
                .attr("height", 0);
            hHoverG.append("text")
                .style("pointer-events", "none")
                .attr("class", "hHoverText")
                .attr("dy", ".71em")
                .attr("transform", "translate(0,9)")
                .text((d: string) => d);

            let vHoverG: any = this.focus.append("g")
                .attr("class", 'vHoverG')
                .attr("transform", "translate(0," + (this.chartHeight + this.chartOptions.aggTopMargin) + ")");
            vHoverG.append("rect")
                .attr("class", 'vHoverBox')
                .attr("x", -5)
                .attr("y", 0)
                .attr("width", 0)
                .attr("height", 0)
            vHoverG.append("text")
                .attr("class", "vHoverText")
                .attr("dy", ".32em")
                .attr("x", -10)
                .text((d: string) => d);

            // Add Window Resize Listener
            window.addEventListener("resize", () => {
                if (!this.chartOptions.suppressResizeListener) {
                    this.draw();
                }
            });

            // Temporal slider
            this.slider = new Slider(<any>d3.select(this.renderTarget).select('.tsi-sliderWrapper').node());

            // Legend
            this.legendObject = new Legend(this.draw.bind(this), this.renderTarget, this.CONTROLSWIDTH);
        }

        // Draw scatter plot
        this.draw();
        this.gatedShowGrid();
        
        d3.select("html").on("click." + Utils.guid(), () => {
            if (this.ellipsisContainer && d3.event.target != this.ellipsisContainer.select(".tsi-ellipsisButton").node()) {
                this.ellipsisMenu.setMenuVisibility(false);
            }
        });
        
        this.legendPostRenderProcess(this.chartOptions.legend, this.svgSelection, false);
    }