How to use mscgen_js to render data generated dynamiclly?

[charon4ever]

Hello,I want to use mscgen_js to render data received from the server side on web page. I create a div element on web page. I first use the angular data binding like that:

<div class="mscgen_js"> {{data}} </div>

But failed to draw the picture,It seems that angular data binding conflicts with mscgen_js?? And then,I use angular jqlite like that:

<script> var mscEle=angular.element(document.querySelector("#mscEle")); mscEle.html($scope.data); </script>

But also fail to draw picture on the page. So,can you help me about how to solve this problem?Thanks a lot.

[sverweij]

• I assume you're using the mscgenjs-inpage.js script (judging your use of mscgen_js class in the div).
• I assume that you don't see any data at all (not even a syntax error)
• I assume you've included the mscgenjs-inpage.js script with the defer attribute so it's run when the page is loaded.

=> are these assumptions correct?

If so, there's two things I can think of:

• When the mscgenjs-inpage script runs, the div tag is not yet rendered because angular (or something else (handlebars?) ) is still busy doing that.
• A namespace conflict. That should not be possible (the script is packaged with almond - which puts it in a closure and removes the main culprit for many conflicts ('require')) - but I'm ready to be surprised.

I'm not an angular developer - but it seems the pattern to integrate stuff in NG apps would be to make a directive (NG < 1.5) or a component (NG1.5+/ NG2) for this. It should be doable with the help of mscgenjs-core.

[charon4ever]

Thank you for replying. I did use mscgenjs-inpage.js script and I included the mscgenjs-inpage.js script with the defer attribute. When I use angular jqlite(jquery in angular): <div class="mscgen_js"></div>
<script> var mscEle=angular.element(document.querySelector("#mscEle")); mscEle.html($scope.data); </script> I can see the raw data in the web page like that: msc { ........ } The data esixts in the div element,but obviously it is not rendered correctly.I can only see the text but can not see the picture. Your advice is helpful and it will take me a short time to find the cause of the problem,but at first,can you give a an example of using mscgenjs-inpage.js to render dynamic data?

[sverweij]

Probably the content of the div is set to msc{...} until after page load.

• page is drawn & contains the <div class="mscgen_js"></div>
• the mscgenjs-inpage script runs => it renders nothing (or an error message)
• a little later the data for the div is set to msc{a;b; a=>b;}
• the mscgenjs-inpage has already run, so nothing else happens

To see what happens in slow motion: https://jsfiddle.net/sm8hpfuj/

If the div is updated before page load it probably looks closer to what you'd expect: https://jsfiddle.net/e5abd2yL/

So - what to do instead?

Rule of thumb

• The content of the div is in the page before page load completed => use mscgenjs-inpage.js. i.o.w. mscgenjs-inpage.js is primarily for static scenarios (documentation, blog posts, static pages ...).
• The content of the div is in the page after page load completed/ is changed after page load completed => use mscgenjs-core to fit your specific scenario. The mscgen_js online interpreter and the atom-mscgen-preview atom package are both examples on how to accomplish this.

Some samples

I don't know enough of your specific environment (and of angular, t.b.h.) to be sure to give you an example that speaks to you.

You'll have to import the mscgenjs module somehow. There's a commonjs and a requirejs variant, both of which are in the mscgenjs npm module (repo: sverweij/mscgenjs-core).

// commonjs
var mscgenjs = require('mscgenjs');

// requirejs
require(['youe/path/to/mscgenjs/indexAMD.js'], function(mscgenjs){
    // your code here
});

When you have imported mscgenjs you can

• use its root module directly => recommended
  mscgenjs-cli and atom-mscgen-preview take that approach. See the samples below
• individually do calls to the parse and render steps => do this when you have very special needs
  This is the approach the mscgen_js and mscgenjs-inpage script take. link to where this happens in mscgen_js and where this happens in mscgenjs-inpage - I plan to migrate that last one to using the root module somewhere in the future because it's simpler and there's no specific reason to want

Here's some some samples for using the root module directly:

// renders the given script in the (already existing) element with id=yourCoolId
mscgenjs.renderMsc (
  'msc { a,b; a=>>b[label="render this"; }', 
  {
    elementId: "yourCoolId"
  }
);

If you want to do error handling, or act on the created svg: provide a callback:

mscgenjs.renderMsc (
  'msc { a,b; a=>>b[label="render this"; }', 
  {
    elementId: "yourOtherCoolId"
  },
  handleRenderMscResult
);

function handleRenderMscResult(pError, pSuccess) {
  if (Boolean(pError)){
    console.log (pError);
  } else if (Boolean(pSuccess)){
    console.log ('That worked - cool!');
   // the svg is in the pSuccess argument 
  }
  console.log('Wat! Error nor success?');
}

The second parameter in the renderMsc call takes some options that influence rendering e.g.

mscgenjs.renderMsc (
  'a=>>b:render this;', 
  {
    elementId: "yourThirdCoolId",
    inputType: "msgenny", // language to parse - default "mscgen"; other accepted languages: "xu", "msgenny" and "json" 
    mirrorEntitiesOnBottom: true, // draws entities on both top and bottom of the chart - default false
    additionalTemplate: "lazy", // use a predefined template. E.g. "lazy" or "classic". Default empty
    includeSource: false, // whether the generated svg should include the source in a desc element
  },

HTH

Thanks for this question. The answer is so long only because I can't point to easily grokkable documentation on mscgenjs-core. I'll rectify that with this answer as a starting point somewhere in the near future.

[charon4ever]

Thank you very much for your answer! I changed to use mscgen-core instead of mscgen-inpage.js and it worked！ Cause I'm not familiar with requirejs,it takes me some time to integrate requirejs into angular and luckily i succeed at last. Maybe in the future,the msngen_js could have an angular edition so that we can use this in angular much more easily.Thank you again for your kindness.

[hari-kris]

Now I am able to get the sequence diagram after page loading in angularjs.

index.html
<div id="__svg"   class="mscgen_js">

   </div>

app.js

$scope.generateChart = function () {
 $scope.queryLang = 'msc { ....}'; // 
mscgenjs.renderMsc (
      $scope.queryLang,
      {
        additionalTemplate: 'lazy',
        includeSource: false,
        elementId: '__svg',
      },
      handleRenderMscResult
    );
}

When I call the function for the first time, sequence diagram is generated when same function is called with different mscgen query language, new chart is not rendered. I went through atom live preview and online interpreter but could not follow. Am I missing anything.

There is no error in mscgen query language I checked in handleRenderMscResult function. How to get new result rendered. Can you please help me out.

[sverweij]

The first thing your function does is to change the global variable $scope.queryLang back to your initial sequence chart, so even if $scope.queryLang was changed before (e.g. when the field you bound it to changed) you'll reset it any time.

B.t.w. maybe you already found them but the README of mscgenjs/mscgenjs-core now contains better instructions for using mscgenjs-core than the original answer to this issue.