Highlight Visual based on Document Property

 When a document property changes, it highlights a visual. This can be useful for data analysis to pay close attention to visuals that require focus

html

<pre id=docPropValues xhidden>
{ 
 "Indexed price charter":"<SpotfireControl id="5858b9bd6d344a98ba87c742af3d9f05" />", 
 "Top holders by percent held":"<SpotfireControl id="96f46c37e0ab4731a43124c827f3956f" />",
 "Historical data":"<SpotfireControl id="5302059ba4724d1f8e45c6a1b95bcfe6" />",
 "Calendar quarter estimates":"<SpotfireControl id="21331969168d4e2fb600d4ed1e0004be" />"
}
</pre>

JavaScript

//finds visuals in which title contains visualTitle (use *= for contains, ^= starts with, $= ends with or = exact match)
elements = Array.from(document.querySelectorAll(".sf-element.sf-element-visual"));
function highlighVisual(visualTitle){

//set background for those visuals found
elementWithChild = elements.filter(element => element.querySelector(
[title*='"+visualTitle+"']") !== null); //<-- change here for search operator
elementWithChild.forEach(x=>x.style.background="red")
}


element = document.querySelector('#docPropValues'); 

observer = new MutationObserver(_ => {
json = JSON.parse(element.innerText);

//reset visual backgrounds
elements.forEach(x=>{x.style.background=""})
Object.entries(json)
.filter(([key, value]) => value === "True")
.map(([key, value]) => key)
.forEach(visualTitle => {highlighVisual(visualTitle)});
});

observer.observe(element, {
    childList: true,
    characterData: true,
    subtree: true
});