Dashing: Widget not updated on load/reload until job refreshes data (CSS Transition not initilized)

Question

I have no understanding of this html/coffee/scss stuff. (ruby is ok) I'm using this hotlist widget from here: https://gist.github.com/andre-morassut/8705385 It works but when loading/reloading the page in the browser I get empty widgets until the job is run again. In general the data should be available. The "more-info" field is also set by the same job and is visible from start. I'd really appreciate some help. My job is currently scheduled every minute but I want an update every hour, only (due to the server queries which are running within the job)

I guess, that it is an issue with this transitions stuff in the scss? I don't need transitions.

Thanks in advance

My job looks like

    sendEventData(Buildbot.getBuildData(BUILDBOTCFG, 'clang'), 'clang')
    sendEventData(Buildbot.getBuildData(BUILDBOTCFG, 'gcc'), 'gcc')

    #...


    def sendEventData(myData, eventHandler)
      itemarray = [
      #{label: 'at', value: 'result'},
        {label: (myData[:current][:end] == nil) ? myData[:current][:start] : myData[:current][:end], value: myData[:current][:state]},
       {label: (myData[:previous][:end] == nil) ? myData[:previous][:start] : myData[:previous][:end], value: myData[:previous][:state]}
      ];

    case myData[:current][:state]
      when 'successful'
        heat = 1
      when 'pending'
        case myData[:previous][:state]
      when 'successful'
        heat = 1
      else
        heat =10
      end
      else
        heat = 10
      end

    datastruct = {
     items: itemarray,
     hotnessvalue:heat  
    }

    send_event(eventHandler, datastruct)
    send_event(eventHandler, {moreinfo: 'Current BuildNo ' + myData[:current][:revisions].to_s})
    end

hotlist.coffee looks like

    class Dashing.Hotlist extends Dashing.Widget
      ready: ->
        if @get('unordered')
          $(@node).find('ol').remove()
        else
          $(@node).find('ul').remove()

      onData: (data) ->
       node = $(@node)
       value = parseInt data.hotnessvalue
       cool = parseInt node.data "cool"
       warm = parseInt node.data "warm"
       level = switch
        when value <= cool then 0
        when value >= warm then 4
       else 
         bucketSize = (warm - cool) / 3 # Total # of colours in middle
         Math.ceil (value - cool) / bucketSize

      backgroundClass = "hotness#{level}"
      lastClass = @get "lastClass"
      node.toggleClass "#{lastClass} #{backgroundClass}"
      @set "lastClass", backgroundClass   

hotlist.hmtl

    <h1 class="title" data-bind="title"></h1>

    <ol>
     <li data-foreach-item="items">
      <span class="label" data-bind="item.label"></span>
      <span class="value" data-bind="item.value"></span>
     </li>
    </ol>

<ul class="list-nostyle">
  <li data-foreach-item="items">
    <span class="label" data-bind="item.label"></span>
    <span class="value" data-bind="item.value"></span>
  </li>
</ul>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

scss

    //        ----------------------------------------------------------------------------
    // Mixins
    //     ----------------------------------------------------------------------------
    @mixin transition($transition-property, $transition-time, $method) {
      -webkit-transition: $transition-property $transition-time $method;
      -moz-transition: $transition-property $transition-time $method;
      -o-transition: $transition-property $transition-time $method;
      transition: $transition-property $transition-time $method;
    }

    //    ----------------------------------------------------------------------------
    // Sass declarations
    //    ----------------------------------------------------------------------------
    $background-color:  #12b0c5;
    $value-color:       #fff;

    $title-color:       rgba(255, 255, 255, 0.9);
    $label-color:       rgba(255, 255, 255, 0.9);
    $moreinfo-color:    rgba(2, 2, 2, 0.6);

    // ----------------------------------------------------------------------------
    // Widget-list styles
    // ----------------------------------------------------------------------------
    .widget-hotlist {

       background-color: $background-color;
       vertical-align: top !important;
      @include transition(background-color, 0.5s, linear);

      .title {
        color: $title-color;
        font-weight: 800;
      }

      ol, ul {
        margin: 0 15px;
        text-align: left;
        color: $label-color;
      }

      ol {
         list-style-position: inside;
      }

      li {
        margin-bottom: 5px;
      }

      .list-nostyle {
        list-style: none;
      }

      .label {
         color: $label-color;
       }

          .value {
            float: right;
            margin-left: 12px;
            font-weight: 800;
            color: $value-color;
          }

          .updated-at {
            color: rgba(0, 0, 0, 0.3);
          }

          .more-info {
            color: $moreinfo-color;
          }

    }
    .hotness0 { background-color: #00C176; }
    .hotness1 { background-color: #88C100; }
    .hotness2 { background-color: #FABE28; }
    .hotness3 { background-color: #FF8A00; }
    .hotness4 { background-color: #FF003C; }

Answer 1

This is how Dashing works. The data to the widgets wont feed in until you run it the first time.

Why dont you stream the data first before "SCHEDULER.every ..."? That should set the widgets up first and will wait until the next scheduled refresh for the new data.