Highlighting Group on Item Selection in Vis-Timeline

Question

Is it possible to highlight the group on selection of timeline item of which it is a part of?

Example:

From attached example, if I am selecting item (item 17), Group 'Alston' should somehow gets highlighted (or somehow I change its CSS, so that a person can understand which group item is selected)

Answer 1

This can be achieved using the select event which fires whenever an item is selected / unselected. Details on this event can be found in the vis-timeline documentation here.

When the select event fires you would need to determine the group for the selected item, or items if using the multiselect option. Then update the className for each group with a class which highlights it. You must also clear the className on any groups which shouldn't be highlighted. These updates must then be updated in the groups DataSet, once updated they'll be applied to the timeline.

An example is incorporated into this answer below and also at https://jsfiddle.net/hzevcgod/.

var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;

// create a data set with groups
var names = ["John", "Alston", "Lee", "Grant"];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
  groups.add({ id: g, content: names[g], 
    // The below can be uncommented to test a group already having a class
    // className: 'default-class' 
  });
}

// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
  var start = now.clone().add(Math.random() * 200, "hours");
  var group = Math.floor(Math.random() * groupCount);
  items.add({
    id: i,
    group: group,
    content:
      "item " +
      i +
      ' <span style="color:#97B0F8;">(' +
      names[group] +
      ")</span>",
    start: start,
    type: "box",
  });
}

// create visualization
var container = document.getElementById("visualization");
var options = {
  groupOrder: "content", // groupOrder can be a property name or a sorting function
  //multiselect: true
};

var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);


// Define the class to be used to highlight groups
const groupHighlightClass = ' group-highlight ';

timeline.on("select", function (properties) { 
  // Define an array to store updated groups
  // This allows all groups to be updated in one go at the end improving performance
  // on large timelines
  const groupsToUpdate = [];

  // Loop selected items
  // Note: Multiple items can be selected by CTRL + Clicking if the option 'multiselect'
  // is set to true. This is set to false by default.
  properties.items.forEach(itemId => {
    // Get the group id of the item
    const groupId = items.get(itemId).group;
    
    // If group is not already in update array
    // This just prevents duplication in the update array
    if(!groupsToUpdate.some(x => x.id === groupId)){
    
      // Retrieve the groups existing className
      let className = groups.get(groupId).className;
    
      if(!className){
        // The group has no className, set to the highlight class
        className = groupHighlightClass;
      } else if(!className.includes(groupHighlightClass)){
        // The group already has another class, append the highlight class
        className = className += groupHighlightClass;
      }
    
      // Push to array to update at the end
      groupsToUpdate.push({id: groupId, className: className});
    }
  });
  
  
  // Clear any other groups which may have been previously highlighted
  // Loop all groups
  groups.forEach(group => {
    // If group is not already in update array, if it is then no need to clear
    if(!groupsToUpdate.some(x => x.id === group.id)){
      // If the group has a className definied which contains the highlight class
      if(group.className && group.className.includes(groupHighlightClass)){
        // Remove the class from the group, maintaining any other classes
        let className = group.className.replace(groupHighlightClass, '');
      
        // If this results in an empty string place a single space as the className
        // Vis timeline throws an error when changing className to an empty string
        if(className === ''){
          className = ' ';
        }
      
        // Push to array to update at the end
        groupsToUpdate.push({id: group.id, className: className});  
      }
    }
  });
  
  // Update the groups
  groups.update(groupsToUpdate);
});

body,
html {
  font-family: arial, sans-serif;
  font-size: 11pt;
}

#visualization {
  box-sizing: border-box;
  width: 100%;
  height: 300px;
}

.group-highlight {
  /* Note: !important is only necessary if you have other classes changing the same properties on the group */
  background-color: black !important;
}

/* The below class was used to test already having a class on a group */
/* .default-class {
  background-color: grey;
} */

<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>

<div id="visualization"></div>