Molecule Input Instantiation Failure

Issues
1

When trying to create a molecule input element from the “ui” class, the following exception is raised: "Cannot access ‘canvas’ before initialization” (see the code below). Is this a bug, or the instantiation statement should be called from a different function than onTableAttached() ? Other input elements seem not to have this issue.

class SomeViewer extends DG.JsViewer {

onTableAttached() {

let inputMol = null;
try {inputMol = ui.moleculeInput(“Molecule”, “CN1CCC(O)(CC1)c2ccccc2”);}
catch (e)
{
let msg = e.message;//Cannot access ‘canvas’ before initialization
}
}
}

2

Trying to reproduce it, apparently it’s not easy, the following script works just fine:

grok.shell
    .newView('demo: inputs')
    .append(ui.inputs([ui.moleculeInput('Molecule', 'CN1CCC(O)(CC1)c2ccccc2')]));
3

The best way to reproduce this issue would be to create a new package, to register a function to open the custom viewer from the original message, and then from the main DataGrok menu select Add->JavaScript Viewers-> *MolInput Demo. This should trigger a call to the onTableAttached() function in the viewer’s class.

class SomePackage extends DG.Package {

//name: MolInput Demo
//description: Reproduces the problem with the input element
//tags: viewer
//output: viewer result
openCustomViewer() {
return new SomeViewer();
}

}

//tags: app
//name: App to demonstrate Molecule Input Failure
startApp() {

let view = grok.shell.addTableView(grok.data.testData(‘demog’, 5000));

}

}

4

I’ve done exactly that, and the viewer works as expected. Are you sure that you are not accessing the “canvas” variable somewhere before it is initialized, like the message suggests? Just for the reference, I’m attaching the code I was using (I’ve modified it to add the actual input to the viewer) along with the screenshot.

class MolInputPackage extends DG.Package {

    //tags: test
    test() {
        alert(this.webRoot);
    }

    //name: MolInput Demo
    //description: Reproduces the problem with the input element
    //tags: viewer
    //output: viewer result
    openCustomViewer() {
        return new SomeViewer();
    }

    //tags: app
    //name: App to demonstrate Molecule Input Failure
    startApp() {
        let view = grok.shell.addTableView(grok.data.testData('demog', 5000));
    }
}


class SomeViewer extends DG.JsViewer {

    onTableAttached() {
      let inputMol = null;
      try {
        inputMol = ui.moleculeInput('Molecule', 'CN1CCC(O)(CC1)c2ccccc2');
        this.root.append(inputMol.input);
      }
      catch (e)
      {
          let msg = e.message;//Cannot access ‘canvas’ before initialization
      }
    }
}

image