Dynamically updating data in timetree

[bchan88]

Hi,

I have a timetree where the array passed in the content parameter will update in my application. The timetree is able to show the new bar lengths that correctly reflect the new data, however the positioning doesn't update properly and the bars are out of alignment. Is there a way I can render the timetree again such that they line up properly? I tried running rerender() and it doesn't do the trick.

Thanks

[john-kurkowski]

Do you have example code so we can see what you're seeing? Maybe an Ember Twiddle

[bchan88]

How can I add the time-tree component into an Ember Twiddle? I tried creating a new component file on the Ember Twiddle then copying time-tree.js and that doesn't seem to work.

Thanks

[john-kurkowski]

That was a naive suggestion of me. Ember Twiddle doesn't support Ember addons yet.

Do you have any snippets we can copy into an app with ember-timetree installed, to see what you're seeing?

[bchan88]

Hi

So I have some data where the end of part 1 should line up with part 2, and end of part 2 should line up with part 3. Initially the bars line up correctly in the time-tree. However if I click the action and update the contents of dummy data, the bars will no longer line up properly.

Controller:

  dummyData: [
    {
      label: "part 1",
      start: 0,
      end: 2
    },
    {
      label: "part 2",
      start: 2,
      end: 4
    },
    {
      label: "part 3",
      start: 4,
      end: 6
    }
  ],

  actions: {
    dummyAction: function(){
      this.set('dummyData', [
        {
          label: "part 1",
          start: 0,
          end: 1.9
        },
        {
          label: "part 2",
          start: 1.9,
          end: 3.7
        },
        {
          label: "part 3",
          start: 3.7,
          end: 5.5
        }
      ]);
    }
  }

Template:

  {{time-tree content=dummyData}}
  <br/>
  <a href="#" {{action 'dummyAction'}}>Change Data</a>

Thanks for your help.

[john-kurkowski]

Sorry for the late response.

I copied your snippet into the issue-19 branch, afa33ef mentioned above. It reproduces your issue.

The team unfortunately doesn't have time to seek the root cause, as we don't use this internally any more. Perhaps it's something to do with observers and properties that were built to only fire once on init, once on didInsertElement, or once lazily. A PR with a test demonstrating the fix gladly accepted. But it's not on our roadmap.

In that same branch is an ugly workaround, e13068f: rerender the view/component that contains the time-tree.

[bchan88]

Thanks for getting back to me. I will be using the workaround.