cluster-plots.html

<!--

Note that unlike rm's, tac's, and waveforms, cluster plots cannot be toggled off, which makes life a little simpler.

-->


<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="worker-builder.html">
<link rel="import" href="managed-canvas.html">
<link rel="import" href="utils.html">
<link rel="import" href="palettes.html">
<link rel="import" href="bower_components/iron-a11y-keys/iron-a11y-keys.html">

<dom-module id="paint-tool">
<style>
:host{
display: inline-block;
opacity: 0.4;
}
</style>
<template>
    <canvas id="canv" width="[[width]]" height="[[height]]" style$="height:{{_use_css_height(css_height)}};"></canvas>
</template>

<script>
"use strict";

Polymer({
    is: 'paint-tool',
    properties: {
        width: {
            type: Number,
            notify: true
        },
        height: {
            type: Number,
            notify: true
        },
        negative: {
            type: Boolean
        },
        r: {
            type: Number,
            notify: true
        },
        active: {
            type: Boolean,
            notify: true,
            value: false
        },
        color: {
            type: String,
            value: '#003300'
        },
        css_height: {
            type: Number,
            notify: true,
            observer: '_use_css_height'
        }
    }, observers: [
        '_set_state(active, negative, color, width, height)'
    ], _use_css_height: function(h){
        let str = h ? h + 'px' : '';
        this.style.height = str;
        return str;
    }, _set_state : function(active, negative, color, width, height){
        this._ctx = this.$.canv.getContext('2d');
        if(active){
            (!this._bound) && this.listen(document, 'mousemove', '_mousemove');
            this._bound = true;

            this._old_x = null;
            this._old_y = null;

            if(this.negative){
                this._ctx.fillStyle = color;
                this._ctx.globalCompositeOperation = "source-over";  
                this._ctx.fillRect(0, 0, width, height);
                this._ctx.globalCompositeOperation = "destination-out";
            } else {
                this._ctx.globalCompositeOperation = "source-over";         
                this._ctx.clearRect(0, 0, width, height);
            }
        } else {
            this._bound && this.unlisten(document, 'mousemove', '_mousemove');
            this._bound = false;
            this._ctx.clearRect(0, 0, width, height);
        }
    }, _mousemove: function(e){
        let rect = this.getBoundingClientRect();
        let scale = this.width/rect.width;
        let x = (e.clientX - rect.left) * scale;
        let y = (e.clientY - rect.top) * scale;
        if(this._old_x === null){
            this._old_x = x-0.0001;
            this._old_y = y;
        }

        this._ctx.beginPath();
        this._ctx.lineWidth = this.r*2*scale;
        this._ctx.strokeStyle = this.color;
        this._ctx.lineCap = 'round';
        this._ctx.moveTo(this._old_x, this._old_y);
        this._ctx.lineTo(x, y);
        this._ctx.stroke();
        this._ctx.closePath();

        this._old_x = x;
        this._old_y = y;
    }, get_data: function(){
        return this._ctx && this._ctx.getImageData(0, 0, this.width, this.height); // object with width, height and data 
    }
});


</script>
</dom-module>

<dom-module id="cluster-plots">

<script is='worker-builder' id="worker" title="cluster-plots" type='javascript/worker'>
"use strict";


var palette_flag;

var set_palettes = function(arrays){
    palette_flag = arrays.flag;
}

var n_spikes;
var chan_is_ok;
var amps;
var plot_names;
var timer = 0;

var pkey_generation = 0;
var pkey_to_array = new Map();
var pkey_to_desired_options = new Map();
var pkeys_pending_render = [];
var highlighted_pkey = null;

var n_c = 4; // TODO: probably shouldn't hard code this here..see parsed-data
var s = 256; // currently there is a 1-to-1 from amp values to pixels

// note that we initalize arrays for the maximum number of plots and never delte them
var plots = (function(){
    let p = [];
    for(let ii=0; ii<n_c*(n_c-1)/2; ii++){
        p.push(new Uint32Array(s*s));
    }
    return p;
})();


var update_pkeys = function(changes, options, arrays){

    if(changes){
        highlighted_pkey = null;
        if(changes.generation_remove !== pkey_generation){
            changes.remove = [];
            pkey_to_array.clear();
            pkey_to_desired_options.clear();
            pkeys_pending_render = [];
            console.log("tac-plots worker: key generation mismatch");
        }

        // note we don't both to remove keys from the pending list
        // unless we change key generation, in which case we drop 
        // everything that's pending. This is ensures that when we
        // attempt a render we can be sure that if we do find the
        // array for the given key we know it's for the relevant 
        // generation and that it's still wanted.

        var remove_pkeys = changes.remove || [];
        for(let pkey of remove_pkeys){
            pkey_to_array.delete(pkey);
            pkey_to_desired_options.delete(pkey);
        }

        if(changes.generation_add !== changes.generation_remove){
            pkeys_pending_render = [];
            pkey_generation = changes.generation_add;
        }

        let add_pkeys = changes.add || [];
        for(let pkey of add_pkeys){
            pkey_to_array.set(pkey, arrays[pkey]);
        }

    }


    for(let item of options){
        pkey_to_desired_options.set(item.pkey, item);
        pkeys_pending_render.push(item.pkey);
    }
    touch_timer();
}

var highlight_pkey = function(pkey){
    pkeys_pending_render = Array.from(pkey_to_desired_options.keys()).filter(x => x!=pkey);
    pkeys_pending_render.push(pkey);
    highlighted_pkey = pkey;
    for(let ii=0; ii<plots.length; ii++){
        fill_0(plots[ii])
    }
    touch_timer();
}

var fill_0 = function(x){
    // TypedArray.fill is apparently unoptimized

    for(let ii=0; ii<x.length; ii++){
        x[ii] = 0;
    }
}

var set_amps = function(n_spikes_, chan_is_ok_, arrays){
    n_spikes = n_spikes_;
    chan_is_ok = chan_is_ok_;
    amps = arrays && arrays.data; 
    for(let ii=0; ii<plots.length; ii++){
        fill_0(plots[ii])
    }
    plot_names = [];
    if(chan_is_ok){
        for(let c1=0, p=0; c1<n_c; c1++)if(chan_is_ok[c1]){
            for(let c2=c1+1; c2<n_c; c2++, p++)if(chan_is_ok[c2]){
                let name = (c1+1) + 'Ax' + (c2+1) + 'A';
                plot_names.push(name);
            }
        }        
    }
    touch_timer();
}

var touch_timer = function(){
    // turns timer on if there's work to be done, otherwise stops it (if it was running)
    // note it's not actually a timer, because the interval is zero!
    // the point of using this is that it enables messages from main thread to interupt
    // between ticks, we can thus cancel work as an when needed.
    if(amps && pkeys_pending_render.length){
        timer = timer || setImmediate(timer_tick);
    } else{
        clearImmediate(timer);
        timer = 0;
    }
}

var perform_render_sub = function(group_inds, color){
    for(let c1=0, p=0; c1<n_c; c1++)if(chan_is_ok[c1]){
        for(let c2=c1+1; c2<n_c; c2++)if(chan_is_ok[c2]){
            let im = plots[p++];
            for(let ii=0; ii<group_inds.length; ii++){
                let a1 = amps[group_inds[ii]*n_c +c1];
                let a2 = amps[group_inds[ii]*n_c +c2];
                im[(s-1-a1)*s + a2] = color;
            }
        }
    }
}

var perform_render_sub_large = function(group_inds, color){
    let a = new Uint8ClampedArray(2);
    for(let c1=0, p=0; c1<n_c; c1++)if(chan_is_ok[c1]){
        for(let c2=c1+1; c2<n_c; c2++)if(chan_is_ok[c2]){
            let im = plots[p++];
            for(let ii=0; ii<group_inds.length; ii++){
                a = [amps[group_inds[ii]*n_c +c1], amps[group_inds[ii]*n_c +c2]];
                im[(s-1-a[0])*s + a[1]] = color;
                a[0] += 1;
                im[(s-1-a[0])*s + a[1]] = color;
                a[0] -= 1;                
                a[1] += 1;
                im[(s-1-a[0])*s + a[1]] = color;
                a[1] -=1;
                a[0] -=1;
                im[(s-1-a[0])*s + a[1]] = color;
                a[0] += 1;
                a[1] -= 1;
                im[(s-1-a[0])*s + a[1]] = color;
            }
        }
    }
}

var perform_render = function(){
    // unlike tac and rm we render all pending groups in a single tick and then *copy*
    // the results back.
    while(pkeys_pending_render.length){
        let pkey = pkeys_pending_render.shift();
        let group_inds = pkey_to_array.get(pkey);
        if(group_inds){
            let pkey_opts = pkey_to_desired_options.get(pkey);
            let color = palette_flag[pkey_opts.group_num];
            pkey === highlighted_pkey ? perform_render_sub_large(group_inds, color) : perform_render_sub(group_inds, color);
        }        
    }
}


var timer_tick = function(){
    timer = 0;

    perform_render();

    // copy plots into the object to send back to main, labeling each plot
    // with its channel numbers.
    var arrays = {};
    for(let [ii, name] of plot_names.entries()){
        arrays[name] = plots[ii].slice(0);
    }
    exec_main_b('plot_clusters', {
        generation: pkey_generation,
        plots: plot_names,
        dims: [s,s]
    }, arrays);
}

var get_group_at = function(msg){
    // this is called when the user mousemoves on a canvas
    // it's hardly worth putting this on the worker thread, but maybe on day we
    // will do something more exciting here.

    let point = msg.point;
    let plot = plots[plot_names.indexOf(msg.plot)];
    if(!plot){
        return;
    }

    // we do something a bit dodgy, which is to look at the color and lookup the
    // original value in the inverse of the palette, so first build the inverse map...
    let palette_flag_inverse = {};
    for(let ii=0; ii< palette_flag.length; ii++){
        palette_flag_inverse[palette_flag[ii]] = ii;
    }

    // now we can count the occurance of each group
    let r = 4; // square ball radius, i.e. width is 2w+1
    let group_counts = new Uint32Array(256);
    for(let ii=Math.max(0, point[0]-r); ii< Math.min(s, point[0]+r+1); ii++){
        for(let jj=Math.max(0, point[1]-r); jj< Math.min(s, point[1]+r+1); jj++){
            let color = plot[ii*s + jj];
            let group_num = palette_flag_inverse[color];
            group_num >=0 && group_counts[group_num]++;
        }
    }

    // find the argmax of group_counts
    let max_group=null;
    let max_val=0;
    for(let ii=0; ii<group_counts.length; ii++) if(group_counts[ii] > max_val){
        max_group = ii;
        max_val = group_counts[ii];
    }

    exec_main('got_group_at', {
        generation: pkey_generation,
        point: point, // provide the details back to main so it can decide whether or not to use the result
        plot: msg.plot,
        group_num: max_group
    })
}

var compute_paint_masks = function(msg, arrays){
    // This is called on the mouseup of a paint event
    if(msg.mask_height !== s || msg.mask_width !== s){
        throw "paint mask must be " + s + " x " + s + ".";
    }
    
    let im = arrays.mask;
    let [c1, c2] = msg.plot.split('x');
    c1 = parseInt(c1) - 1;
    c2 = parseInt(c2) - 1;
    let pkeys = msg.pkeys;

    let arrays_out = {};
    for(let pkey of msg.pkeys){
        let inds = pkey_to_array.get(pkey);
        if(!inds || !inds.length){
            continue;
        }
        let m = new Uint8Array(inds.length);
        for(let ii=0; ii<m.length; ii++){
            let a1 = amps[inds[ii]*n_c + c1];
            let a2 = amps[inds[ii]*n_c + c2];
            m[ii] = !!im[(s-a1-1)*s + a2];
        }
        arrays_out[pkey] = m;
    }
    exec_main_b('computed_paint_masks', {
        generation: pkey_generation,
        pkeys: msg.pkeys
    }, arrays_out);
}
</script>


<style>
.sticker{
display: inline-block;
line-height: 14px;
width: 20px;
height: 17px;
border: 1px solid #000;
text-align: center;
font-size: 10px;
padding-top: 3px;
margin: 1px;
cursor: pointer;
}
.sticker_list{
line-height: 19px;
display: inline;
font-size: 0px;
}
.braket{
line-height: 19px;
font-size: 24px;
vertical-align: top;
}
:host{
--paper-tooltip-opacity: 0.96;
padding-left: 2px;
padding-right: 2px;
display: flex;
flex-direction: column;
height: 100%;
font-size: 0px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07);
}
.bottom{
flex: 2;
text-align: center;
position: relative;
cursor: none;
}
.active_stickers{
float: left;
display: inline-block;
}
.others{
text-align: right;
display: block;
}
.new_group{
background: #ffffe0;
}
.plot{
display: inline-block;
position: relative;
@apply(--cluster-plot-style);
}
.grabber{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.grabber:hover{
@apply(--grabber-hover);
}

</style>

<template>
    <iron-a11y-keys keys="enter+only" on-keys-pressed="_new_dest"  target="[[keyboard_target]]"></iron-a11y-keys>
    <iron-a11y-keys keys="e+only e+shift" on-keys-pressed="_active_to_dest"  target="[[keyboard_target]]"></iron-a11y-keys>
    <iron-a11y-keys keys="f+only f+shift" on-keys-pressed="_active_to_src"  target="[[keyboard_target]]"></iron-a11y-keys>

    <!-- TODO: replace the random unicode chars with plus and minus -->
    <iron-a11y-keys keys="m+only" on-keys-pressed="_inc_size"  target="[[keyboard_target]]"></iron-a11y-keys>
    <iron-a11y-keys keys="n+only" on-keys-pressed="_dec_size"  target="[[keyboard_target]]"></iron-a11y-keys>

    <div class="top" style$="[[_scroll_shadow(scrolled_down)]]">
        <div class="active_stickers">
            <div class="sticker_list">
                <div class="sticker" style$="{{_sticker_style(painter_state.dest, active_group_a)}}" 
                        on-mouseenter="_mouseenter_sticker_dest" on-mouseleave="_mouseleave_sticker">
                    [[painter_state.dest]] <paper-tooltip position="below">destination group [e]</paper-tooltip>
                </div>
            </div>
            <span class="braket">&#8592;</span>
            <div class="sticker_list"><span class="braket">{</span>
                <template is="dom-repeat" items="[[painter_state.srcs]]">
                   <div class="sticker" style$="{{_sticker_style(item, active_group_a)}}"
                         on-mouseup="_sticker_click" on-mouseenter="_mouseenter_sticker" on-mouseleave="_mouseleave_sticker">[[item]]</div>
                </template>
                <span class="braket">}</span>
                <paper-tooltip>source groups [e]</paper-tooltip>
            </div>
        </div>
        <div class="sticker_list others">
            <div class="sticker new_group" on-tap="_new_dest">&#10133;
                <paper-tooltip>new destination group [Enter]</paper-tooltip>
            </div>
            <template is="dom-repeat" items="[[other_groups]]">
               <div class="sticker" style$="{{_sticker_style(item, active_group_a)}}"
                    on-mouseup="_sticker_click" on-mouseenter="_mouseenter_sticker" on-mouseleave="_mouseleave_sticker">[[item]]</div>
            </template>
        </div>
    </div>

    <div class="bottom" id="bottom" on-mousedown="_start_paint" on-mousemove="_mousemove" on-mouseleave="_mouseleave">
        <div style="position: absolute; top:0; left:0; right:0; bottom: 0;overflow-y: scroll;" on-scroll="_update_scrolled_down">
            <template is="dom-repeat" items="[[cluster_plots]]">
                <div class="plot" style$="{{_show(item.is_used)}}">
                    <canvas-with-axes 
                        ckey="[[item.ckey]]"
                        x_label="[[item.x_axis]]"
                        y_label="[[item.y_axis]]" 
                        fix_height="[[canvas_size]]"
                        on-canvas-mousemove="_mousemove_canvas" 
                        on-mouseleave="_mouseleave_canvas"></canvas-with-axes>
                </div>
            </template>
        </div>
        <cross-hair style$="{{_show(mouse_x)}}" r="[[painter_r]]" show_bars="0" top="0" left="0" x="[[mouse_x]]" y="[[mouse_y]]"></cross-hair>
        <div class="grabber" hidden$="{{!grabber_mode}}" on-mouseup="_grab" on-mousedown="_stop_propagation"></div>
        </div>
    </div>

</template>
<script>
    "use strict";
    Polymer({
        is:'cluster-plots',
        properties: {
            canvas_size: {
                type: Number,
                notify: true,
                value: 128
            }, amplitudes: {
                type: Object,
                notify: true,
                value: function(){return {};}
            }, cluster_plots: {
                type: Array,
                notify: true,
                value: function(){return [];}
            }, groups: {
                type: Array,
                notify: true,
                value: function(){return [];},
                observer: '_groups_set'
            }, painter_state: {
                type: Object,
                notify: true,
                value: function(){return {
                    srcs: [0],
                    dest: 0
                }}
            }, other_groups:{
                type: Array,
                notify: true,
                value: function(){return [];},
                readOnly: true // TODO: this is really a computed-property, but I couldn't get it to work with .splices
                                // instead we use observers
            }, keyboard_target: {
                type: Object,
                value: function(){return document.querySelector('body');}
            }, want_amplitudes: {
                type: Array,
                notify: true,
                observer: '_want_amplitudes_set'
            }, active_group_a:{
                type: Object,
                value: null,
                notify: true
            }, painter_r: {
                type: Number,
                notify: true,
                observer: '_painter_r_changed'
            }, mouse_x: {
                type: Number,
                value: -1,
                notify: true,
                readOnly: true
            }, mouse_y: {
                type: Number,
                value: -1,
                notify: true,
                readOnly: true
            }, scrolled_down: {
                type: Boolean,
                value: false,
                notify: true,
                readOnly: true
            }, grabber_mode: {
                type: Boolean,
                value: false,
                notify: true
            }, tool_is_active:{
                type: Boolean
            }
        }, observers: [
            '_groups_spliced(groups.splices)',
            '_compute_unused_groups(painter_state.*)',
            '_amplitudes_modified(amplitudes)'
        ], listeners: {
            'mousewheel': '_scroll'
        }, created: function(){
            var worker_builder = Polymer.DomModule.import('cluster-plots','#worker');
            this._worker = worker_builder.create_for(this);
            this._worker.exec_b('set_palettes', {flag: Palettes.flag32.slice(0)});
            this._pkey_generation = 0;
        }, ready: function(){
            let n_c = 4; // TODO: get this from parsed-data
            let s = 256; // TODO: this too, and maybe alow scaling
            let plots = [];
            for(let ii=0; ii<n_c*(n_c-1)/2; ii++){
                plots.push({
                    ckey: null,
                    is_used: false
                });
            }
            this.set('cluster_plots', plots);
            // TODO: we might want to tie the plots to the cut for ease of grabbing
        }, _want_amplitudes_set: function(){
            this.push('want_amplitudes', 'cluster-plots');
        }, _amplitudes_modified: function(){
            if(this.amplitudes){
                var arr = Utils.typed_array_manager.get_array_clone(this.amplitudes.amps);
                this._worker.exec_b('set_amps', this.amplitudes.n, this.amplitudes.chan_is_ok, 
                                    {data: arr});
            } else {
                if(!this._worker) return;
                this._worker.exec('set_amps', {});
            }
        }, _groups_set: function(new_val, old_val){
            this._compute_unused_groups();
            this._groups_collection = Array.isArray(new_val) && Polymer.Collection.get(new_val);
            this._update_okeys(old_val || [], new_val || [], this._pkey_generation, ++this._pkey_generation); // added keys are for a new generation
        }, _groups_spliced: function(splices){
            this._compute_unused_groups();
            let parsed = Utils.parse_splices(splices);
            this._update_okeys(parsed.removed, parsed.added, this._pkey_generation, this._pkey_generation);
        }, _update_okeys: function(okeys_to_remove, okeys_to_add, generation_remove, generation_add){
            var am = Utils.typed_array_manager;
            
            var added_arrays = {};
            var pkeys_to_add = []; 
            var options = [];
            // get clones of new arrays to send to worker
            for(let okey of okeys_to_add){
                if(!okey) continue;
                pkeys_to_add.push(okey._pkey);
                added_arrays[okey._pkey] = am.get_array_clone(okey.akey);
                options.push({
                    pkey: okey._pkey,
                    group_num: okey.group_num
                });
            }

            var pkeys_to_remove = [];
            for(let okey of okeys_to_remove){
                if(!okey) continue;
                pkeys_to_remove.push(okey._pkey);
            }

            // inform worker of the new/deleted arrays
            this._worker.exec_b('update_pkeys', {
                add: pkeys_to_add,
                remove: pkeys_to_remove,
                generation_remove: generation_remove,
                generation_add: generation_add
            }, options, added_arrays);

        }, _sticker_style: function(group_num, active_group_a){
            return "background-color:" + Palettes.flag_css[group_num] + ";color:" + Palettes.flag_css_text[group_num] + ";" +
                    (active_group_a && active_group_a.group_num===group_num ? "box-shadow:0px 0px 5px 3px #fc0;" : "");
        }, _compute_unused_groups: function(){
            if(!this.groups){
                this._setOther_groups([]);
                return [];
            }
            let others = [];
            for(let okey of this.groups)if(okey){
                if(this.painter_state.srcs.indexOf(okey.group_num) === -1 &&
                    this.painter_state.dest !== okey.group_num){
                    others.push(okey.group_num)
                }
            }
            this._setOther_groups(others);
        }, _new_dest: function(){
            // finds first unused number, ignoring zero
            for(let [ii, gg] of this.groups.entries()){
                if(!gg && ii>0){
                    this.set('painter_state.dest', ii);
                    return;
                }
            }
            this.set('painter_state.dest', this.groups.length);
        }, _select_dest: function(num){
            this.set('painter_state.dest', num);
            let index_in_src = this.painter_state.srcs.indexOf(num);
            (index_in_src > -1) && this.splice('painter_state.srcs', index_in_src, 1);
        }, _select_src: function(num, shift){
            if(shift){
                let index_in_src = this.painter_state.srcs.indexOf(num);
                if(index_in_src > -1){
                    this.splice('painter_state.srcs', index_in_src, 1);
                } else {
                    this.push('painter_state.srcs', num);
                }
            }else{
                this.splice('painter_state.srcs', 0, this.painter_state.srcs.length, num); //remove all and replace with just num
            }
        }, _active_to_dest: function(e){
            (this.active_group_a !== null) && this._select_dest(this.active_group_a.group_num);
        }, _active_to_src: function(e){
             (this.active_group_a !== null) && this._select_src(this.active_group_a.group_num, e.detail.keyboardEvent.shiftKey);
        }, _sticker_click: function(e){
            let num = e.model.item;
            if(e.button === 0){
                // left button, select as dest
                this._select_dest(num);
            } else {
                // not left button, select as source, 
                // splice in/out if shift down, otherwise clear array and set to just num
                this._select_src(num, e.shiftKey);
            }
        }, plot_clusters: function(msg, arrays){
            if(msg.generation !== this._pkey_generation){
                return; // pft, get with the times
            }
            for(let [ii, label] of msg.plots.entries()){
                this.set('cluster_plots.' + ii + '.ckey', {
                    buffer: arrays[label].buffer,
                    dims: msg.dims
                });
                let axes = label.split('x');
                this.set('cluster_plots.' + ii + '.x_axis', axes[1]);
                this.set('cluster_plots.' + ii + '.y_axis', axes[0]);
                this.set('cluster_plots.' + ii + '.is_used', true);
            }
            for(let ii=msg.plots.length; ii<this.cluster_plots.length; ii++){
                this.set('cluster_plots.' + ii + '.is_used', false);
            }
        }, _inc_size: function(){
            this.set('canvas_size', Math.min(this.canvas_size+32, 512));
        }, _dec_size: function(){
            this.set('canvas_size', Math.max(this.canvas_size-32, 32));
        }, _show: function(v){
            return v ? '' : 'display: none;';
        }, _mousemove_canvas: function(e){
            let plot_name = e.model.item.y_axis + 'x' + e.model.item.x_axis;
            this._mouse_over_plot = plot_name;
            this._worker.exec('get_group_at', {
                plot: plot_name,
                point: e.detail.canvas_point
            });
        }, _mouseleave_canvas: function(){
            this._mouse_over_plot = null;
            this.set('active_group_a', null);
        }, got_group_at: function(msg){
            if(this._mouse_over_plot !== msg.plot){
                return; // TODO: we could check the msg.point to see if it's still close, but whatever
            }
            this.set('active_group_a', this._okey_from_group_num(msg.group_num));  
        }, _mouseenter_sticker: function(e){
            this.set('active_group_a', this._okey_from_group_num(e.model.item));  
        }, _mouseleave_sticker: function(){
            this.set('active_group_a', null);
        }, _mouseenter_sticker_dest: function(){
            this.set('active_group_a', this._okey_from_group_num(this.painter_state.dest));
        }, _okey_from_group_num: function(num){
            for(let okey of this.groups)if(okey && okey.group_num === num){
                return okey
            }
            return null;
        }, _start_paint: function(e){
            if(this.tool_is_active){
                return;
            }
            
            this._painter_el = document.createElement('paint-tool');
            this._painter_el.set('css_height', this.canvas_size);
            this._painter_el.set('width', 256); // this has to match the actual height used in cluster plots
            this._painter_el.set('height', 256);
            this._painter_el.set('r', this.painter_r);
            this._painter_el.style.position = 'absolute';
            this._painter_el.style.top = '1px';
            this._painter_el.style.left = '1px';
            this._painter_el.set('negative', e.button !== 0);
            this._painter_el.set('active', true);

            // work out which plot is closest (or underneath) the click location...
            let plots = Polymer.dom(this.root).querySelectorAll('.plot');
            let min_dist = Infinity;
            this._paint_ii = null;
            for(let [ii, plot] of plots.entries()){
                let rect = plot.getBoundingClientRect();
                let x_dist = e.clientX < rect.left ? 
                                 e.clientX - rect.left
                             : e.clientX > rect.left + rect.width ?
                                 e.clientX - (rect.left + rect.width)
                             : 0;
                let y_dist = e.clientY < rect.top ? 
                                 e.clientY - rect.top
                             : e.clientY > rect.top + rect.height ?
                                 e.clientY - (rect.top + rect.height)
                             : 0;
                let dist = Math.hypot(x_dist, y_dist);
                if(dist === 0){
                    this._paint_ii = ii;
                    break;
                } else if(dist< min_dist){
                    this._paint_ii = ii;
                    min_dist = dist;
                }
            }

            plots[this._paint_ii].appendChild(this._painter_el);
            this.listen(document, 'mouseup', '_end_paint');
            Polymer.dom.flush();
            this.fire('paint',{
                state: 'start'
            });
            this._painter_el._mousemove(e);
        }, _end_paint: function(){
            this.unlisten(document, 'mouseup', '_end_paint');
            let result = this._painter_el.get_data();

            this._worker.exec_b('compute_paint_masks', {
                plot: this.cluster_plots[this._paint_ii].y_axis + 'x' +
                      this.cluster_plots[this._paint_ii].x_axis,
                mask: 'mask',
                mask_width: result.width,
                mask_height: result.height,
                pkeys: this.painter_state.srcs.map(function(num){
                    return num != this.painter_state.dest && this.groups[num] && this.groups[num]._pkey
                }, this)
            }, {
                mask: new Uint32Array(result.data.buffer)
            });

            this._painter_el.set('active', false);
            this._painter_el.parentNode.removeChild(this._painter_el);
            this._painter_el = null;

        }, computed_paint_masks: function(msg, arrays){
            // convert from pkeys to group_nums, which is the reverse of what we did
            // when sending to the worker.  Note that we basically assume that nothing 
            // has changed in the interim.
            let coll =  Polymer.Collection.get(this.groups);
            let masks = {};
            for(let pkey of msg.pkeys){
                let g = coll.getItem(pkey);
                g && (masks[g.group_num] = arrays[pkey]);
            }
            this.fire('paint', {
                state: 'end',
                src_masks: masks,
                dest: this.painter_state.dest
            });
        }, _scroll: function(e){
            let inc = e.wheelDelta > 0 ? 5 : -5;
            this.set('painter_r', Math.max(Math.min(this.painter_r + inc, 80), 5));
            e.preventDefault();
        }, _mousemove: function(e){
            let rect = this.$.bottom.getBoundingClientRect();
            this._setMouse_x(e.clientX - rect.left);
            this._setMouse_y(e.clientY - rect.top);
        }, _mouseleave: function(e){
            this._setMouse_x(-1);
            this._setMouse_y(-1);
        }, _painter_r_changed: function(){
            if(this._painter_el){
                this._painter_el.set('r', this.painter_r);
            }
        }, _update_scrolled_down: function(e){
            this._setScrolled_down(e.target.scrollTop > 0);
        }, _scroll_shadow: function(v){
            return v ? 'box-shadow: 0px 3px 4px 0px #bbb;z-index: 1;' : '';
        }, _show: function(v){
            return v !== false && v>=0 ? '' : 'display: none;';
        }, highlight_group: function(group_num){
             let okey = this.groups[group_num];
             if(!okey){
                return;
             }
             this._worker.exec('highlight_pkey',okey._pkey);
        }, _grab: function(e){
            let plots = [];
            for(let pp of this.cluster_plots){
                if(pp.is_used){
                    plots.push(Object.assign({}, pp));
                }
            }
            let rect  = this.getBoundingClientRect();
            this.fire('grab', {
                plots: plots,
                src_client_x: rect.left,
                src_client_y: rect.top
            });
        }, _stop_propagation: function(e){
            e.stopPropagation();
        }
    });
</script>

  
</dom-module>