Sitecore Content Hub. External Page component that renders styled taxonomy label on entity details page

code.js

var source   = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);

var entityLoadedSubscription = options.mediator.subscribe("entityLoaded", function (entity) {
    updateUI(entity);
    var entitySavedEvent = Utils.format("entitySaved:{id}", { id: entity.systemProperties.id() });
    options._page.mediator.subscribe(entitySavedEvent, updateUI);
});

function updateUI(entity){
    var brandname = "";
    var entityId = entity.systemProperties.id();
    //console.log(entityId); - can be used for debug

    var testLineToTestBrandRelation = "https://ibu-401.stylelabs.io/api/entities/" + entityId + "/relations/TestLineToTestBrand";
    
    var dataToModify = "";

    $.getJSON(testLineToTestBrandRelation, brandname = function(data) {
        $.getJSON(data.parent.href, function(data1) {
            brandname = data1.properties.TaxonomyLabel["en-US"];
            dataToModify = brandname;
            
            // if you want style to be different across all brands - put some logic here
            var style = "m-indicator bg-purple";
            var context = {brandname: brandname, style: style};
            var html    = template(context);
            document.getElementById("handlebars-result-container").innerHTML = html;
        });
    });
    
    //dataToModify.properties.TaxonomyLabel["en-US"] = "new label value";
    //console.log(JSON.stringify(dataToModify));

    // PUT request - for updating of existing entities
    //$.rest.put(testLineToTestBrandRelation, dataToModify);
        
    // POST request - to create a new entity
    //var newEntity = {
    //    "properties": {
    //        "TaxonomyName": "Region2",
    //        "TaxonomyLabel": {
    //            "en-US": "Region2"
    //        }
    //    },
    //    "entityDefinition":{
    //        "href": "https://lh-healthcare.stylelabs.io/api/entitydefinitions/Test.Region"
    //    }
    //};
    //var newEntityPostUrl = "https://lh-healthcare.stylelabs.io/api/entities";
    //$.rest.post(newEntityPostUrl, newEntity);
       
    // DELETE request - to delete an entity
    //$.rest.del("https://lh-healthcare.stylelabs.io/api/entities/36900", {});
}

template.html

<template class="entry" id="entry-template" type="text/x-handlebars-template">
    <div>
      <span class="{{style}}">
        <span>{{brandname}}</span>
      </span>
    </div>
  </template>
  <div id="handlebars-result-container">
  </div>

Commented out code shows examples of how to use CRUD REST API calls to modify(create and delete) entities without any extra authnetication.