Dissociation of Side Effects and Behavioural Actions

In this section, we will get an understanding of how we can break the association between behaviours and their sideeffects. This is especially useful when we need to create our own custom interactions or prevent a particular interaction from occurring.

Let's try and understand how this works with the simple cars.json data.

Dissociating a particular behaviour-sideeffect mapping

We can dissociate any of the behavioural and side effect maps. By dissociating, we mean that if a particular behaviour has a side effect mapped to it, this dissociation will break the mapping and thus, this way the behavioural actions wont cause the side effects to occur. To dissociate a mapping, we have to use the Action Model with the particular canvases where the dissociation is to be applied

ActionModel
.for(canvas)
.dissociateSideEffect([sideeffect, behaviour])

For instance, the code below breaks the mapping between the sideeffect tooltip with the behaviour highlight.

ActionModel
.for(canvas)
.dissociateSideEffect(['tooltip', 'highlight])

Thus every time the highlight behaviour changes, the tooltip will not be drawn. However, if there are any other side effects attached to this change in behaviour, those will be triggered.

main
run-button
run-button
reset-button
loadData('/static/cars.json').then((res) => {    
  let node = document.getElementById('chart-container');
  const env = muze();    
  const canvas = env.canvas();    
  const DataModel = muze.DataModel; 
  const ActionModel = muze.ActionModel;
  loadData('/static/cars-schema.json').then((schema) => {
    const dataModelInstance = new DataModel(res, schema);
          canvas
          	.width(500)
          	.height(400)
			.rows(['Horsepower'])
			.columns(['Cylinders'])
    		.color('Origin')
			.data(dataModelInstance)
    		.mount(node)
    
    	ActionModel
        	  .for(canvas)
    		  .dissociateSideEffect(['tooltip', 'highlight'])
    });
})

Dissociating multiple behaviour-sideeffect mappings

We can even dissociate multiple such behaviour side-effect mappings by providing multiple arguments to the same function:

ActionModel
.for(canvas)
.dissociateSideEffect([sideeffect1, behaviour1], [sideeffect2, behaviour2])

For instance, in addition to the previous dissociation, we will dissociate the selectionBox sideeffect on the brush behaviour:

ActionModel
.for(canvas)
.dissociateSideEffect(['tooltip', 'highlight],  ['selectionBox', 'brush'])
main
run-button
run-button
reset-button
loadData('/static/cars.json').then((res) => {    
  let node = document.getElementById('chart-container');
  const env = muze();    
  const canvas = env.canvas();    
  const DataModel = muze.DataModel; 
  const ActionModel = muze.ActionModel;
  loadData('/static/cars-schema.json').then((schema) => {
    const dataModelInstance = new DataModel(res, schema);
          canvas
          	.width(500)
          	.height(400)
			.rows(['Horsepower'])
			.columns(['Cylinders'])
    		.color('Origin')
			.data(dataModelInstance)
    		.mount(node)
    
    	ActionModel
        	  .for(canvas)
    		  .dissociateSideEffect(['tooltip', 'highlight'],  ['selectionBox', 'brush'])
    });
})

As we can see, we do not get the tooltip while hovering and also there are no selection boxes getting created when we drag our mouse.

Wrapping Up

We now have a fair understanding of how we can prevent a particular side effect to be applied when a behaviour changes. We can also do this for multiple such behaviour-side effect combinations.