<table>

        <tr><th>effect:</th><td><edit-choice id="effect" graph="{{graph}}" uri="{{effectStr}}"></edit-choice></td></tr>

        <tr><th>colorScale:</th><td>

          <light9-color-picker color="{{colorScale}}"></light9-color-picker>

        </td></tr>

      </table>

  </template>

  <script src="inline-attrs.js"></script>

</dom-module>

                             song="{{song}}"

                             show="{{show}}"

                             zoom="{{zoomFlattened}}">

      </light9-timeline-audio>

    </div>

    <div id="rows"></div>

    <template is="dom-repeat" items="{{inlineAttrConfigs}}">

      <light9-timeline-note-inline-attrs graph="{{graph}}"

                                         project="{{project}}"

                                         selection="{{selection}}"

                                         song="{{song}}"

                                         config="{{item}}">

    graph: { type: Object, notify: true }

    project: { type: Object }

    selection: { type: Object, notify: true }

    song: { type: String, notify: true }

    viewState: { type: Object, notify: true }

    inlineAttrConfigs: { type: Array, value: [] } # only for inlineattrs that should be displayed

  @getter_observers: [

    '_onGraph(graph, setAdjuster, song, viewState, project)',

    'onZoom(viewState)',

    '_onViewState(viewState)',

  ]

  constructor: ->

    @dirty = _.debounce(@_repaint.bind(@), 10)

  ready: ->

    super.ready()

    @addEventListener('iron-resize', @_onResize.bind(@))

    Polymer.RenderStatus.afterNextRender(this, @_onResize.bind(@))

    @$.rows.appendChild(@renderer.view)

    # This works for display, but pixi hit events didn't correctly