[Question] How to update attribute/properties dynamically from Component Script?

We have a use case where we want to insert charts dynamically using Highcharts Editor. I have created a component, which on drag and drop, opens a modal based and based on user’s selection, returns a SVG image. I am wondering how can I add it to the model’s body. Right now I am using innerHTML to insert but the getHTML does not have the SVG image as part of div. Code for component:

domc.addType('charts-component', {
    model: {
      defaults: {
        tagName: 'div',
        script,
        js: '',
        svg: '',
        attributes: {
          class: 'highcharts',
        },
        'script-props': ['js', 'svg'],
      },
      init() {
        this.on('change:js', this.handleJSChange);
        this.on('change:svg', this.handleSVGChange);
        this.on('change:attributes', this.handleAttrChange);
      },
      handleJSChange() {
        console.log('JS Changed');
        this.addAttributes({ js: this.props().js });
      },
      handleSVGChange() {},
      handleAttrChange() {
        console.log(this.getAttributes());
      },
    },
    view: {},
  });

Also I want to set the JS output of highcharts editor as attribute to the div(or, is there a way, I can add it to component but not render it, but be able to retrieve it by getHTML), is there a way I can dynamically add it? Tried listening to the properties on change event but looks like it is not getting triggered if I change it from inside script.

My script method to call Highcharts:

const script = function (properties) {
    try {
      var modal = highed.ModalEditor(
        function (chart) {
          var html = chart.export.svg();
          var elements = document.getElementsByClassName('highcharts');
          elements[0].innerHTML = html;// I understand I have to do things a tad bit differently if I want to add multiple charts.
          elements[0].setAttribute('js', chart.export.js());
          properties.js = chart.export.js();
        }
      );
      modal.show();
    } catch (err) {
      console.log(err);
    }
  };

[artf]

You don’t need components with JS in this case (in your final code you don’t execute any JS), is enough for you something like this:

domc.addType('charts-component', {
    view: {
      events: {
        dblclick: 'onActive', // in order to reopen the modal on double click
      },
      onActive() {
         const { model } = this; // model is the component
         const modal = highed.ModalEditor(({ export }) => {
          // use `content` for static stuff, the editor will render it without transforming the HTML/SVG in components
          model.set({ content: export.svg(), js: export.js()  });
         }).show();
         // I don't know the API but I guess you should recall the previous data somehow
         // eg. .show({ data: model.get('js') })
      }
    },
  });

[harsh201]

Sorry for spamming. I was not able to upload usecase video from my work laptop.

https://user-images.githubusercontent.com/2502711/106098322-d39c7b80-615e-11eb-8569-cf76ffc7fcc7.mov