Adding Dot Representation to a .mrc file, changing isoLevel with representation type 'surface'

[itsBURO]

I am currently working on a project where the user will load a .mrc file and change its representation type per their choice. I would like to add the dot representation, however, using the given code below, I see no changes in the rendered model. I was logging the values of result in the console where I could see two reprList elements one for dot, and one for surface. I would like to see the representation in the dotted form as seen in nglviewer. but the same is not happening.

var stage = new NGL.Stage("viewport1")

window.addEventListener('resize', function(event){
    stage.handleResize();
}, false);

stage.loadFile('sample_file.mrc',{defaultRepresentation: true}).then((result) => {
    result.addRepresentation('dot')
}).catch((err) => {
    //log error
});;

Console.log(result.reprList):

parameters: {name: 'surface', matrix: ie, quality: 'medium', disableImpostor: false, useWorker: true, …}
parameters: {name: 'dot', matrix: ie, quality: 'medium', disableImpostor: false, useWorker: true, …}

I would also like to add a slider that changes the isoLevel of the loaded model with representation type surface.

Sorry if my terminology seems vague, I just started working on this and I cannot find sufficient documentation while using this library for .mrc files other than just 1 codepen ngl tagged pen.

Any kind of help is appreciated. Thanks.