Method _render

client/ts/vis/ExampleView.ts:48–107

(rData = this.renderData)

    }

    protected _render(rData = this.renderData): void {
        if (!rData) return;

        const that = this;
        const renderList = rData.orig.res.map(d => [d]);

        if (rData.compare) {
            rData.compare.res.map((d, i) => renderList[i].push(d));
        }

        let img_pairs = this.div_origs.selectAll('.img_pair').data(renderList);
        img_pairs.exit().remove();
        img_pairs = img_pairs.enter().append('div').attr('class', 'img_pair')
            .merge(img_pairs);

        let imgs = img_pairs.selectAll('img').data(d => d);
        imgs.exit().remove();
        imgs.enter().append('img')
            .merge(imgs)
            .attr('src', d => d.d)
            .attr('width', this._imgWidth > -1 ? this._imgWidth : null);


        img_pairs.on('click', function (d) {
            const eventDetail: ExampleViewMouseEvent = {
                caller: d3.select(this),
                images: d
            };

            that.eventHandler.trigger(
                ExampleView.events.clicked_image_pair,
                eventDetail
            )
        })

        img_pairs.on('mouseenter', function (d) {
            const eventDetail: ExampleViewMouseEvent = {
                caller: d3.select(this),
                images: d,
                hovered: true
            };

            that.eventHandler.trigger(
                ExampleView.events.hovered_image_pair,
                eventDetail
            )
        })
        img_pairs.on('mouseleave', function (d) {
            const eventDetail: ExampleViewMouseEvent = {
                caller: d3.select(this),
                images: d,
                hovered: false
            };

            that.eventHandler.trigger(
                ExampleView.events.hovered_image_pair,
                eventDetail
            )