I have initialized a timeline and its y-axis data (props.jobRow) and event data (props.eventsForJob) are parsed from a client-side source. The first load of the timeline appears correct. The row is labeled properly and the events appear where they should.
For context, this is how I’m configuring my timeline. It’s configured within a setup function I’ve created. Again, the initialization of the timeline, which I’ve named jobViewfinder, seems to be working fine.
const jobViewfinder : Ref<SchedulerStatic> = ref(Scheduler.getSchedulerInstance())
// Some other code not relevant to this issue
function setUpJobViewfinder (jobViewfinder: SchedulerStatic) {
// Create the timeline and set time configurations
jobViewfinder.createTimelineView({
name: 'timeline',
render: 'bar',
x_unit: timeProps.value.timeUnit,
x_date: '%H:%i',
x_step: timeProps.value.cellDuration,
x_size: timeProps.value.numColumns,
x_length: timeProps.value.numColumns,
y_unit: props.jobRow,
y_property: 'job',
dy: 55,
event_dy: 'full',
section_autoheight: false,
cell_template: true,
columns: [
{label: 'Job', width: 200, template: function(rowData: {key: string, label: string}){ return rowData.label}},
],
})
// Set other timeline configurations
jobViewfinder.config.display_marked_timespans = true
jobViewfinder.config.dblclick_create = false
jobViewfinder.config.details_on_dblclick = true
jobViewfinder.config.drag_create = false
jobViewfinder.config.drag_resize = false
jobViewfinder.config.mark_now = false
// Initialize timeline in div with id 'job_viewfinder_container'
jobViewfinder.init('job_viewfinder_container', props.from, 'timeline')
// Some other, non-relevant code here. Styling and lightbox stuff
// Load event data into timeline
jobViewfinder.parse(props.eventsForJob)
}
The y-axis data and event data change in response to some user interaction on the webpage. I know my data, props.jobRow and props.eventsForJob, are updating correctly in response to user input. I have a Vue watcher defined so that when either props.jobRow or props.eventsForJob changes value, logic to update jobViewfinder executes. Below is my watch function,
*Note that below you’ll see a .value after jobViewfinder. It’s defined as a Ref earlier in the code.
watch(() => [props.jobRow, props.eventsForJob], () => {
const newEventData = _.cloneDeep(props.eventsForJob) // creates a copy. This works correctly
const currentView = jobViewfinder.value.getView('timeline')
currentView.y_unit = _.cloneDeep(props.jobRow) // Update the y-axis data
jobViewfinder.value.clearAll() // remove events that were there
jobViewfinder.value.parse(newEventData) // add the new events
console.log('get events after parse', jobViewfinder.value.getEvents()) // this is logging the correct events
jobViewfinder.value.setCurrentView() // maintains the current date-window being viewed by the user
})
The y-axis data is updating correctly. I can see the row’s label updating to a new string with each user interaction. Strangely, the event data does not update correctly. The events disappear as a result of .clearAll(), which I expected, however, the newly parsed data never appears. I know that parsing is occurring. I attached an ‘onParse’ event handler to do a console log every time jobViewfinder parses. After parsing, I even console.log the events in jobViewfinder and see the correct data. I even checked that each time this watch executes, that the key of the row matches the value of the y_property on the events to make sure there was no data/y-axis disconnect. Additionally, there are no warnings or errors in my console.
Everything in code appears to be working as intended, however, no events are showing up on the timeline.
Any advice on how to update the data on a timeline dynamically? I see lots of advice for updating the y-axis, but not a lot regarding the actual event data.