         @ctx.fillStyle = "#" + color
         @ctx.fillRect x,y,rectWidth,rectHeight
         @ctx.strokeText c,x + 3,y + 12,rectWidth
+
+      # check for selection
+      if selection.indexOf(j) >= 0
+        @ctx.lineWidth = 2
+        @ctx.fillStyle = "red"
+        @ctx.strokeRect x,y,rectWidth,rectHeight
+        @ctx.lineWidth = 1
+
       x = x + rectWidth
 
       # out of viewport - stop
       if x > @el.width
         break
+
+  _onclick: (e) ->
+    coords = mouse.getMouseCoords e
+    rectWidth = @g.zoomer.get "columnWidth"
+    rectHeight = @g.zoomer.get "rowHeight"
+    coords[0] += Math.floor(@g.zoomer.get("_alignmentScrollLeft") / rectWidth) * rectWidth
+    coords[1] += Math.floor(@g.zoomer.get("_alignmentScrollTop") / rectHeight) * rectHeight
+    x = Math.floor(coords[0] / rectWidth )
+    y = Math.floor(coords[1] / rectHeight)
+    seqId = @model.at(y).get "id"
+    @g.trigger "residue:click", {seqId:seqId, rowPos: x, evt:e}
+    console.log x,y
+    @render()
 
   render: ->
 

     paddingLeft += @g.zoomer.get "metaWidth" if @g.vis.get "metacell"
     return paddingLeft

  _adjustWidth: ->
    if @el.parentNode?
      parentWidth = @el.parentNode.offsetWidth

    @ctx.font="14px Courier New"
    #@ctx.font="14px Lucida Console"

    x = - @g.zoomer.get "_alignmentScrollLeft"
    # skip unneeded blocks at the beginning
    start = Math.max 0, - Math.ceil(x / rectWidth)
    x = 0

    selection = @_getSelection data.model
    console.log selection

    for j in [start.. seq.length - 1] by 1
      c = seq[j]
      c = c.toUpperCase()
      color = @color[c]
