title: Bokeh Custom Extension Issues
body: <p>I am attempting to learn about implementing bokeh custom extensions to create some widgets that I would like for my data project. I was attempting to follow along with this example <a href="https://docs.bokeh.org/en/latest/docs/user_guide/extensions_gallery/tool.html#userguide-extensions-examples-tool" rel="nofollow noreferrer">here</a> but I am having trouble running the example extensions that bokeh has provided. I am currently getting back an error of </p>
  
  <blockquote>
    <p>ValueError: expected a subclass of HasProps, got class 'bokeh.models.sources.ColumnDataSource'</p>
  </blockquote>
  
  <p>which is being caused when the DrawTool class calls source = Instance(ColumnDataSource) on line 80. I am not sure exactly what I am doing wrong right now but my first thought is it has something to do with the IDE I'm using? I'm currently using spyder(python 3.6) and have the most recent bokeh update 2.1.0. </p>
  
  <p>This is my first experience with bokeh extensions so I am fairly clueless and I've been scouring the web for help but can't really find much. My current code is exactly what they have on the examples site but I will post it here for convenience,</p>
  
  <pre><code>from bokeh.core.properties import Instance
  from bokeh.io import output_file, show
  from bokeh.models import ColumnDataSource, Tool
  from bokeh.plotting import figure
  from bokeh.util.compiler import TypeScript
  
  output_file('tool.html')
  
  TS_CODE = """
  import {GestureTool, GestureToolView} from "models/tools/gestures/gesture_tool"
  import {ColumnDataSource} from "models/sources/column_data_source"
  import {PanEvent} from "core/ui_events"
  import * as p from "core/properties"
  
  export class DrawToolView extends GestureToolView {
    model: DrawTool
  
    //this is executed when the pan/drag event starts
    _pan_start(_ev: PanEvent): void {
      this.model.source.data = {x: [], y: []}
    }
  
    //this is executed on subsequent mouse/touch moves
    _pan(ev: PanEvent): void {
      const {frame} = this.plot_view
  
      const {sx, sy} = ev
      if (!frame.bbox.contains(sx, sy))
        return
  
      const x = frame.xscales.default.invert(sx)
      const y = frame.yscales.default.invert(sy)
  
      const {source} = this.model
      source.get_array("x").push(x)
      source.get_array("y").push(y)
      source.change.emit()
    }
  
    // this is executed then the pan/drag ends
    _pan_end(_ev: PanEvent): void {}
  }
  
  export namespace DrawTool {
    export type Attrs = p.AttrsOf&lt;Props&gt;
  
    export type Props = GestureTool.Props &amp; {
      source: p.Property&lt;ColumnDataSource&gt;
    }
  }
  
  export interface DrawTool extends DrawTool.Attrs {}
  
  export class DrawTool extends GestureTool {
    properties: DrawTool.Props
    __view_type__: DrawToolView
  
    constructor(attrs?: Partial&lt;DrawTool.Attrs&gt;) {
      super(attrs)
    }
  
    tool_name = "Drag Span"
    icon = "bk-tool-icon-lasso-select"
    event_type = "pan" as "pan"
    default_order = 12
  
    static init_DrawTool(): void {
      this.prototype.default_view = DrawToolView
  
      this.define&lt;DrawTool.Props&gt;({
        source: [ p.Instance ],
      })
    }
  }
  """
  
  
  class DrawTool(Tool):
      __implementation__ = TypeScript(TS_CODE)
      source = Instance(ColumnDataSource)
  
  
  source = ColumnDataSource(data=dict(x=[], y=[]))
  
  plot = figure(x_range=(0, 10), y_range=(0, 10), tools=[DrawTool(source=source)])
  plot.title.text = "Drag to draw on the plot"
  plot.line('x', 'y', source=source)
  
  show(plot)
  </code></pre>