issues with adding custom subgroups

[joeolu14]

@partridgejiang, I followed these steps, I was able to copy the JSON and also created a button with an onclick event to call

Kekule.Editor.RepositoryData.subGroups.push({"inputTexts":["OTMS"],"dataFormat":"Kekule-JSON"...../ The JSON string generated above/ }); But when I checked the Subgroups, I do not see the Subgroup Abbr among the list.

After I click on the "Save Subgroup" button, and then check the Subgroup, I do not see the new subgroup I created

Any thing I am missing here?

[partridgejiang]

Hi @joeolu14 , the abbr property of subgroup should be stored at the tail of the JSON data, after the connection table.

The composer widget load all subgroups information at its intialization stage, so appending new one to Kekule.Editor.RepositoryData.subGroups will not affect the existed instances of composer. You may need to recreate the composer widget to take it into effect.

[joeolu14]

@partridgejiang, To test this, I added this to the init function()

 function init()
    {
           const bb = {
    inputTexts: ["JOS", "JOS"],
    dataFormat: "Kekule-JSON",
    structData:
      '{"coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0,"y":0,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":-1.039230484541326,"y":-0.19999999999999574,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"Cl"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":-0.34641016151377535,"y":0.20000000000000284,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"F"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0.34641016151377535,"y":-0.19999999999999574,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":1.0392304845413243,"y":0.20000000000000284,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"D","massNumber":2,"isotopeAlias":"D"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,1]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[1,2]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[2,3]}],"__type__":"Kekule.StructureConnectionTable"},"abbr":"JOS","__type__":"Kekule.SubGroup"}',
  };
  Kekule.Editor.RepositoryData.subGroups.push(bb);
      fillStructTypes();
      Kekule.Widget.getWidgetById('btnGetData').on('execute', function(e){
        saveRepItemData();
      });
      Kekule.Widget.getWidgetById('btnSetAnchor').on('execute', function(e){
        setAnchorNodes();
      });

    }

It still did not work, If you look at the tail of the JSON, the abbr is there already. and I expect this to load the custom subgroup on load of the widget

[joeolu14]

@partridgejiang I also tried this

  useEffect(() => {
    if (Kekule.VERSION) { 
      setTimeout(async () => {
        await Kekule.Editor.RepositoryData.subGroups.push({
          inputTexts: ["B2C2"],
          dataFormat: "Kekule-JSON",
          name: "tayol",
          structData:
            '{"coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0,"y":0,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0,"y":0.20000000000000284,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0.6928203230275507,"y":0.6000000000000014,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"S"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":-0.6928203230275507,"y":0.6000000000000014,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"O"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0,"y":-0.5999999999999943,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"Cl"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,1]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,2]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,3]}],"__type__":"Kekule.StructureConnectionTable"},"abbr":"B2C2","__type__":"Kekule.SubGroup"}',
        });
        console.log("sub group updated");
        var composer = new Kekule.Editor.Composer(document);
        composer.setDimension("600px", "400px");
        composer.appendToElem(document.getElementById("parent"));
      }, 2000);
    }
  }, [Kekule.VERSION]);

still no work, the new composer did not have the custom subgroup

[partridgejiang]

Sorry I have missed a procedure, the subgroup should also be registered in Kekule.Editor.RepositoryItemManager before using it in editor:

let subgroupData = {
          inputTexts: ["B2C2"],
          dataFormat: "Kekule-JSON",
          name: "tayol",
          structData:
            '{"coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0,"y":0,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0,"y":0.20000000000000284,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0.6928203230275507,"y":0.6000000000000014,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"S"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":-0.6928203230275507,"y":0.6000000000000014,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"O"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0,"y":-0.5999999999999943,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"Cl"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,1]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,2]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,3]}],"__type__":"Kekule.StructureConnectionTable"},"abbr":"B2C2","__type__":"Kekule.SubGroup"}',
        };

// need to be registered here
let repItem = new Kekule.Editor.StoredSubgroupRepositoryItem2D(subgroupData.structData, subgroupData.dataFormat, subgroupData.scale);
repItem.setInputTexts(subgroupData.inputTexts).setName(subgroupData.name || subgroupData.inputTexts[0]);
Kekule.Editor.RepositoryItemManager.register(repItem);

// then it can be used in composer
let composer = new Kekule.Editor.Composer(document);
composer.setDimension("600px", "400px");
composer.appendToElem(document.getElementById("parent"));

A related demo page is attached also here. composerWithNewRepoSetter.zip

[joeolu14]

@partridgejiang thanks, it works now