cpee 2.1.125 → 2.1.126

data/cockpit/js/llm.js

@@ -2,44 +2,45 @@ var last_generated_model = undefined;
 var last_model_before_generation =undefined;
 var default_llm = "gemini-2.5-flash-lite";
 
-function clean_llm_ui(status_id) {
-  status_div = $(`#${status_id}`);
-  status_div.empty();
-  status_div.removeClass('error').removeClass('success');
-  status_div.removeClass('error').removeClass('error');
-  status_div.removeClass('error').removeClass('loading');
-}
+function clean_llm_ui(status) { //{{{
+  status.empty();
+  status.removeClass('error').removeClass('success');
+  status.removeClass('error').removeClass('error');
+  status.removeClass('error').removeClass('loading');
+} //}}}
 
-function querying_llm_ui(status_id,llm_id='xxxx') {
-  status_div = $(`#${status_id}`);
-  let myllm = $(`#${llm_id}`).find(":selected").val();
+function querying_llm_ui(status,llm,what) { //{{{
+  let myllm = llm.find(":selected").val();
   if (myllm === undefined){ myllm = default_llm; }
-  status_div.addClass('loading');
-  status_div.text('Workflow Modelling Agent Thinks (' + myllm + ')');
-}
+  status.addClass('loading');
+  status.text('Agent ' + what + ' (' + myllm + ')');
+} //}}}
 
-function add_prompt(prompt_id,content) {
-  let input = $(`#${prompt_id}`);
+function add_prompt(input,content) { //{{{
   const range = document.createRange();
   const selection = window.getSelection();
   range.selectNodeContents(input[0]);
   selection.removeAllRanges();
   selection.addRange(range);
   document.execCommand('insertText', false, content);
-}
+} //}}}
 
-function call_llm_service(status_id,prompt_id,llm_id) {
-  let input = $(`#${prompt_id}`);
-  let text = input[0].innerText;
-  let myllm = $(`#${llm_id}`).find(":selected").val();
-  if (myllm === undefined){ myllm = default_llm; }
+function call_llm_service_model(dslx,input,llm,prompt_type) { //{{{
   const formData = new FormData();
-  const blob1 = new Blob([save['dslx']], { type: "text/xml" });
+  const blob1 = new Blob([dslx], { type: "text/xml" });
   formData.append("rpst_xml", blob1);
-  const blob2 = new Blob([text], { type: "text/plain" });
+  const blob2 = new Blob([input], { type: "text/plain" });
   formData.append("user_input", blob2);
-  const blob3 = new Blob([myllm], { type: "text/plain" });
+  const blob3 = new Blob([llm], { type: "text/plain" });
   formData.append("llm", blob3);
+  const blob4 = new Blob([prompt_type], { type: "text/plain" });
+  formData.append("prompt_type", blob4);
+  if (prompt_type == 'adapt_endpoints') {
+    const blob5 = new Blob([save['endpoints'].save_text()], { type: "text/xml" });
+    formData.append("endpoints", blob5);
+  }
+
+  let def = new $.Deferred();
 
   jQuery.ajax({
     url: $('body').attr('current-llm-service'),
@@ -49,28 +50,70 @@ function call_llm_service(status_id,prompt_id,llm_id) {
     processData: false,
     method: 'POST',
     success: function(data){
-      last_model_before_generation = save['dslx'];
-      last_generated_model = data.output_cpee;
-      let send = $X(data.output_cpee);
-      $('label',send).each((_,ele)=>{
-        if ($(ele).text() == "Start Fermenter") {
-          $(ele).parent().parent().attr('endpoint','fermenter');
-        }
-      });
-      set_cpee_model(send.serializePrettyXML(),["<!-- Input CPEE-Tree -->\n"+data.input_cpee,"# User Input:\n"+data.user_input,"# Used LLM:\n"+data.used_llm,"%% Input Intermediate\n"+data.input_intermediate,"%% Output Intermediate\n"+data.output_intermediate,"<!-- Output CPEE-Tree -->\n"+data.output_cpee]);
-      set_success(status_id,data.status);
+      def.resolve(data);
     },
     error:  function(xhr, status, data) {
-      console.log(xhr);
-      set_error(status_id,xhr.responseJSON.error);
+      def.reject(xhr);
     }
   });
 
-  input.empty();
-}
+  return def.promise();
+} //}}}
+function call_llm_service_dataflow(model,llm) { //{{{
+  const formData = new FormData();
+  const blob1 = new Blob([model], { type: "text/xml" });
+  formData.append("rpst_xml", blob1);
+  const blob2 = new Blob([llm], { type: "text/plain" });
+  formData.append("llm", blob2);
+
+  let def = new $.Deferred();
+
+  jQuery.ajax({
+    url: $('body').attr('current-llm-service') + '/dataflow/',
+    data: formData,
+    cache: false,
+    contentType: false,
+    processData: false,
+    method: 'POST',
+    success: function(data){
+      def.resolve(data);
+    },
+    error:  function(xhr, status, data) {
+      def.reject(xhr);
+    }
+  });
+
+  return def.promise();
+} //}}}
+function call_llm_service_validation(model,llm) { //{{{
+  const formData = new FormData();
+  const blob1 = new Blob([model], { type: "text/xml" });
+  formData.append("rpst_xml", blob1);
+  const blob2 = new Blob([llm], { type: "text/plain" });
+  formData.append("llm", blob2);
+
+  let def = new $.Deferred();
+
+  jQuery.ajax({
+    url: $('body').attr('current-llm-service') + '/validate/xml/',
+    data: formData,
+    cache: false,
+    contentType: false,
+    processData: false,
+    method: 'POST',
+    success: function(data){
+      def.resolve(data);
+    },
+    error:  function(xhr, status, data) {
+      def.reject(xhr);
+    }
+  });
+
+  return def.promise();
+} //}}}
 
-function call_llm_text_service(status_id,prompt_id,llm_id,action) {
-  let myllm = $(`#${llm_id}`).find(":selected").val();
+function call_llm_text_service(status,prompt,llms,action) { //{{{
+  let myllm = llms.find(":selected").val();
   if (myllm === undefined){ myllm = default_llm; }
   const info = save.attributes_raw.info;
   const formData = new FormData();
@@ -88,7 +131,7 @@ function call_llm_text_service(status_id,prompt_id,llm_id,action) {
     method: 'POST',
     success: function(data){
       if (action=="show"){
-        add_prompt(prompt_id,data["output_text"]);
+        add_prompt(prompt,data["output_text"]);
       } else if (action=="file") {
         $('#savetext').attr('download', info + '.txt');
         const encodedText = encodeURIComponent(data["output_text"]);
@@ -98,15 +141,15 @@ function call_llm_text_service(status_id,prompt_id,llm_id,action) {
         link.click();
       };
       last_model_before_generation = save['dslx'];
-      set_success(status_id,data.status);
+      set_success(status,data.status);
     },
-    error:  function(xhr, status, data) {
-      set_error(status_id,xhr.responseJSON.error);
+    error:  function(xhr, stat, data) {
+      set_error(status,xhr.responseJSON.error);
     }
   });
-}
+} //}}}
 
-function set_cpee_model(cpee_xml,expositions=[]) {
+function set_cpee_model(cpee_xml,expositions=[]) { //{{{
   const form_data = new FormData();
   const blob = new Blob([cpee_xml], { type: "text/xml" });
   form_data.append("dslx", blob);
@@ -123,87 +166,212 @@ function set_cpee_model(cpee_xml,expositions=[]) {
     processData: false,
     data: form_data
   });
-}
+} //}}}
 
-function set_success(status_id,success_text) {
-  $(`#${status_id}`).text(success_text);
-  $(`#${status_id}`).addClass('success');
-  $(`#${status_id}`).removeClass('loading');
-  $(`#${status_id}`).removeClass('error');
-}
+function set_success(status,success_text) { //{{{
+  status.text(success_text);
+  status.addClass('success');
+  status.removeClass('loading');
+  status.removeClass('error');
+} //}}}
 
-function set_error(status_id,error_text) {
-  $(`#${status_id}`).text(error_text);
-  $(`#${status_id}`).addClass('error');
-  $(`#${status_id}`).removeClass('success');
-  $(`#${status_id}`).removeClass('loading');
-}
+function set_error(status,error_text) { //{{{
+  status.text(error_text);
+  status.addClass('error');
+  status.removeClass('success');
+  status.removeClass('loading');
+} //}}}
 
-function empty_model(){
+function empty_model(){ //{{{
   set_cpee_model('<description xmlns="http://cpee.org/ns/description/1.0" xmlns:a="http://cpee.org/ns/annotation/1.0"/>',["Reset Context!"]);
   $('#dat_details').empty();
-}
-function load_last_generated_model() {
+} //}}}
+function load_last_generated_model() { //{{{
   set_cpee_model(last_generated_model === undefined ? save['dslx'] : last_generated_model);
-}
-function load_last_generated_model() {
+} //}}}
+function load_last_generated_model() { //{{{
   set_cpee_model(last_generated_model === undefined ? save['dslx'] : last_generated_model);
-}
+} //}}}
 
-function load_last_model_before_generation() {
+function load_last_model_before_generation() { //{{{
   set_cpee_model(last_model_before_generation === undefined ? save['dslx'] : last_model_before_generation);
-}
+} //}}}
 
-function load_file_content(files) {
+function load_file_content(files) { //{{{
   if (typeof window.FileReader !== 'function') {
     console.log('FileReader not yet supported');
     return;
   }
   var reader = new FileReader();
   reader.onload = function(){
-    clean_llm_ui('status');
+    clean_llm_ui($('#status'));
     add_prompt('prompt',reader.result);
   }
   reader.onerror = function(){ console.log("reader error"); }
   reader.onabort = function(){ console.log("reader abort"); }
   reader.readAsText(files[0]);
+} //}}}
+
+function create(status,prompt,llms,generation,mode) {
+  clean_llm_ui(status);
+
+  // Imagine I want to implement a smart home system to control the lights in
+  // the dining room.  Depending on the current lighting conditions, the
+  // system would automatically adjust the brightness—either increasing or
+  // reducing it as needed—and turn the lights off completely at night.
+
+  let input = prompt.text(); prompt.empty();
+  let myllm = llms.find(":selected").val();
+  let prompt_type = mode.find(":selected").val();
+  let gen = generation.find(":selected").val();
+  if (myllm === undefined){ myllm = default_llm; }
+
+  if ($X(save['dslx']).get(0).childElementCount == 0) {
+    prompt_type = 'generate_' + prompt_type;
+  } else {
+    prompt_type = 'adapt_' + prompt_type;
+    // always use adapt_endpoints when in dataflow mode
+    if (gen == 'dataflow') { prompt_type = 'adapt_endpoints'; }
+  }
+
+  querying_llm_ui(status,llms,'creates model');
+  call_llm_service_model(save['dslx'],input,myllm,prompt_type).done((data) => {
+    let expositions = ["<!-- Input CPEE-Tree -->\n"+data.input_cpee,"# User Input:\n"+data.user_input,"# Used LLM:\n"+data.used_llm,"%% Input Intermediate\n"+data.input_intermediate,"%% Output Intermediate\n"+data.output_intermediate,"<!-- Output CPEE-Tree -->\n"+data.output_cpee];
+    if (prompt_type == 'adapt_endpoints') {
+      let testset = $X(data.output_cpee);
+      let model = $('> dslx > description',testset);
+      let endpoints = $('> endpoints',testset);
+      $.ajax({
+        type: "PATCH",
+        url: url + "/properties/endpoints/",
+        contentType: 'text/xml',
+        headers: {
+          'Content-ID': 'endpoints',
+          'CPEE-Event-Source': myid
+        },
+        data: endpoints.serializePrettyXML()
+      });
+
+      last_model_before_generation = save['dslx'];
+      last_generated_model = model.serializePrettyXML();
+      set_cpee_model(model.serializePrettyXML(),expositions);
+      set_success(status,data.status);
+    } else {
+      if (gen == "dataflow") {
+        querying_llm_ui(status,llms,'selects endpoints and calculates dataflow');
+        call_llm_service_dataflow($X(data.output_cpee).serializePrettyXML(),myllm).done((data) => {
+          let url = $('body').attr('current-instance');
+          $.ajax({
+            type: "PATCH",
+            url: url + "/properties/endpoints/",
+            contentType: 'text/xml',
+            headers: {
+              'Content-ID': 'endpoints',
+              'CPEE-Event-Source': myid
+            },
+            data: data.endpoints
+          });
+
+          querying_llm_ui(status,llms,'validates dataflow');
+          expositions.push("# Dataflow:\n"+data.dataflow);
+          call_llm_service_validation($X(data.output_cpee).serializePrettyXML(),myllm).done((data) => {
+            // for undo button
+            last_model_before_generation = save['dslx'];
+            last_generated_model = data.output_cpee;
+            set_cpee_model($X(data.output_cpee).serializePrettyXML(),expositions);
+            set_success(status,data.status);
+          });
+
+        })
+        .fail((xhr) => {
+          set_error(status,xhr.responseJSON.error);
+        });
+      } else if (gen == "model") {
+        last_model_before_generation = save['dslx'];
+        last_generated_model = data.output_cpee;
+        set_cpee_model(data.output_cpee,expositions);
+        set_success(status,data.status);
+      } else {
+        set_success(status,"Successfully done nothing");
+      }
+    }
+  })
+  .fail((xhr) => {
+    set_error(status,xhr.responseJSON.error);
+  });
 }
 
-$(document).ready(function() {
+$(document).ready(async function() { //{{{
+  let llm_inactive = await $.get('css/llm_inactive.svg', 'xml').then(function(data) { return $(data.documentElement); });
+  let llm_active = await $.get('css/llm_active.svg', 'xml').then(function(data) { return $(data.documentElement); });
+
+  let mode_inactive = await $.get('css/mode_inactive.svg', 'xml').then(function(data) { return $(data.documentElement); });
+  let mode_active = await $.get('css/mode_active.svg', 'xml').then(function(data) { return $(data.documentElement); });
+
   $(document).on('keydown','#prompt',function(e){
-    clean_llm_ui('status');
+    clean_llm_ui($('#status'));
     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-      querying_llm_ui('status','llms');
-      call_llm_service('status',this.id,'llms');
+      create($('#status'),$('#prompt'),$('#llms'),$('#generation'),$('#mode'));
     }
   });
   $(document).on('click','#prompt_submit_button',function(e){
-    clean_llm_ui('status');
-    querying_llm_ui('status','llms');
-    call_llm_service('status','prompt','llms');
+    create($('#status'),$('#prompt'),$('#llms'),$('#generation'),$('#mode'));
   });
   $(document).on('click','#prompt_reset_button',function(e){
-    clean_llm_ui('status');
+    clean_llm_ui($('#status'));
     empty_model();
   });
   $(document).on('click','#generate_itext_button',function(e){
-    clean_llm_ui('status');
-    querying_llm_ui('status','llms');
-    call_llm_text_service('status','prompt','llms','file');
+    clean_llm_ui($('#status'));
+    querying_llm_ui($('#status'),$('#llms'),'thinks');
+    call_llm_text_service($('#status'),'prompt','#llms','file');
   });
   $(document).on('click','#generate_text_button',function(e){
-    clean_llm_ui('status');
-    querying_llm_ui('status','llms');
-    call_llm_text_service('status','prompt','llms','show');
+    clean_llm_ui($('#status'));
+    querying_llm_ui($('#status'),$('#llms'),'thinks');
+    call_llm_text_service($('#status'),$('#prompt'),$('#llms'),'show');
   });
   $(document).on('click','#prompt_undo_button',function(e){
-    clean_llm_ui('status');
-    querying_llm_ui('status','llms');
+    clean_llm_ui($('#status'));
+    querying_llm_ui($('#status'),$('#llms'),'thinks');
     load_last_model_before_generation();
   });
   $(document).on('click','#prompt_attach_button',function(e){
     document.getElementById('loadtxt').click();
   });
+  $(document).on('click','#prompt_prop_button',function(e){
+    var menu = new CustomMenu(e);
+
+    var mode_entries = [];
+    $('#mode option').each(function(){
+      mode_entries.push({
+        label: $(this).text(),
+        menu_icon: $(this).is(':selected') ? mode_active : mode_inactive,
+        function_call: function(val){
+          $('#mode').val(val);
+          $('#mode option').removeAttr('selected');
+          $('#mode option[value="' + val + '"]').attr('selected', 'selected');
+        },
+        params: [$(this).val()]
+      });
+    });
+
+    var llm_entries = [];
+    $('#llms option').each(function(){
+      llm_entries.push({
+        label: $(this).text(),
+        menu_icon: $(this).is(':selected') ? llm_active : llm_inactive,
+        function_call: function(val){
+          $('#llms').val(val);
+          $('#llms option').removeAttr('selected');
+          $('#llms option[value="' + val + '"]').attr('selected', 'selected');
+        },
+        params: [$(this).val()]
+      });
+    });
+
+    menu.contextmenu({ 'Models': mode_entries, 'LLMs': llm_entries });
+  });
   $("#loadtxt").change(function(e){
     let files = document.getElementById('loadtxt').files;
     load_file_content(files);
@@ -213,4 +381,4 @@ $(document).ready(function() {
     e.stopPropagation();
     load_file_content(e.originalEvent.dataTransfer.files);
   });
-});
+}); //}}}

data/cockpit/js/parameters.js

@@ -1,4 +1,7 @@
 var parameters_changed = new Event("parameters:changed", {"bubbles":true, "cancelable":false});
+var attributes_changed = new Event("attributes:changed", {"bubbles":true, "cancelable":false});
+var endpoints_changed = new Event("endpoints:changed", {"bubbles":true, "cancelable":false});
+var dataelements_changed = new Event("dataelements:changed", {"bubbles":true, "cancelable":false});
 
 $(document).ready(function() {
   // hook up dataelements with relaxngui //{{{
@@ -63,19 +66,23 @@ $(document).ready(function() {
 function do_parameters_save(event) { //{{{
   var visid = $('ui-tabbar ui-tab',$(event.target).parents('ui-tabbed')).not('.switch').not('.inactive').attr('data-tab');
   if (save[visid].has_changed()) {
-    var url = $('body').attr('current-instance');
     save[visid].set_checkpoint();
-    var send = save[visid].save_text();
+    var url = $('body').attr('current-instance');
     document.dispatchEvent(parameters_changed);
-    $.ajax({
-      type: "PUT",
-      url: url + "/properties/" + visid + "/",
-      contentType: 'text/xml',
-      headers: {
-        'Content-ID': visid,
-        'CPEE-Event-Source': myid
-      },
-      data: send
-    });
+    document.dispatchEvent(eval(visid + '_changed'));
+    do_parameters_save_part(visid,save[visid].save_text());
   }
 } //}}}
+
+function do_parameters_save_part(visid,send) { //{{{
+  $.ajax({
+    type: "PUT",
+    url: url + "/properties/" + visid + "/",
+    contentType: 'text/xml',
+    headers: {
+      'Content-ID': visid,
+      'CPEE-Event-Source': myid
+    },
+    data: send
+  });
+} //}}}

data/cockpit/js/wfadaptor.js

@@ -278,17 +278,11 @@ function WfIllustrator(wf_adaptor) { // View  {{{
         self.svg.defs[element] = sym;
       }
   } // }}}
-  this.set_svg_direct = function(svg) { // {{{
-    self.svg.container.append(svg);
-    let bb = svg[0].getBBox();
-    self.svg.container.attr('height', bb.y + bb.height + self.height_shift); // small border on the bottom
-    self.svg.container.attr('width',  bb.x + bb.width + self.width_shift);  // small border on the right
-  } // }}}
   this.set_svg = function(graph) { // {{{
     self.svg.container.append(graph.svg);
     let bb = graph.svg[0].getBBox();
 
-    let w = self.dim.get_x_plus(0,graph.max.row,graph.max.col);
+    let w = self.dim.get_x_max(0,graph.max.row,graph.max.col,'start');
     if (w == 0) { w = bb.x + bb.width + self.width_shift; }
     // the alternative is bb.x + bb.width + self.width_shift, but this is bad when clipped elements
 
@@ -444,7 +438,7 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     return mlen;
   } //}}}
   var get_x_plus = this.dim.get_x_plus = function(rowf,rowt,col,deb='') { //{{{
-    if (rowf<0) { row = 0 };
+    if (rowf<0) { rowf = 0 };
 
     mlen = 0;
     for (let i=rowf; i<=rowt; i++) {
@@ -455,6 +449,20 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     // console.log(deb,rowf,rowt,col,'--> ' + mlen,debug_dim());
     return mlen;
   } //}}}
+  var get_x_max = this.dim.get_x_max = function(rowf,rowt,colt,deb='') { //{{{
+    if (rowf<0) { rowf = 0 };
+
+    mlen = 0;
+    for (let i=rowf; i<=rowt; i++) {
+      for (let j=0; j<=colt; j++) {
+        if (self.dim.symbols[i] && self.dim.symbols[i][j] && mlen < self.dim.symbols[i][j].x + self.dim.symbols[i][j].width) {
+          mlen = self.dim.symbols[i][j].x + self.dim.symbols[i][j].width;
+        }
+      }
+    }
+    // console.log(deb,rowf,rowt,colt,'--> ' + mlen,debug_dim());
+    return mlen;
+  } //}}}
   var get_x_width = this.dim.get_x_width = function(maxcol) { //{{{
     let cwidth = 0;
     for (let i=0; i < self.dim.symbols.length; i++) {
@@ -849,7 +857,9 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   var self = this;
   var adaptor;
   var illustrator;
+  var used_id_list = [];
   var description;
+  var orig_description;
   var id_counter = {};
   var update_illustrator = true;
   var labels = [];
@@ -875,6 +885,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       alert("WfDescription: unknown description type:\nConstructor-Name: " + desc.constructor + " / TypeOf: " + (typeof desc));
       description = null;
     }
+    orig_description = $($X(description.serializeXML()).get(0).ownerDocument);
     id_counter = {};
     labels = [];
     let start = performance.now();
@@ -910,6 +921,11 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   var context_eval = this.context_eval = function(what) { // {{{
     return eval(what);
   } // }}}
+
+  var reset_used_id_list = this.reset_used_id_list = function() { // {{{
+    console.log('bbbbb');
+    used_id_list = [];
+  } // }}}
   var get_free_id = this.get_free_id = function(prefix,aname,other) { // {{{
     var existing = new Array();
     if (other) {
@@ -925,6 +941,10 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     while ($.inArray(prefix + id,existing) != -1) {
       id += 1;
     }
+    while ($.inArray(prefix + id,used_id_list) != -1) {
+      id += 1;
+    }
+    used_id_list.push(prefix + id);
     return prefix + id;
   } // }}}
   var refresh = this.refresh = function(doit) {
@@ -932,7 +952,8 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     labels = [];
     let start = performance.now();
     illustrator.clear();
-    var graph = parse(description.children('description').get(0), {'row':0,'col':0});
+    clean_description();
+    var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false});
     illustrator.set_svg(graph);
     self.set_labels(graph);
     illustrator.set_duration(start);
@@ -940,9 +961,10 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   }
   var redraw = this.redraw = function(){
     id_counter = {};
-    labels = [];
     let start = performance.now();
+    labels = [];
     illustrator.clear();
+    clean_description();
     var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false});
     illustrator.set_svg(graph);
     self.set_labels(graph);
@@ -954,7 +976,8 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       let start = performance.now();
       labels = [];
       illustrator.clear();
-      var graph = parse(description.children('description').get(0), {'row':0,'col':0});
+      clean_description();
+      var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false});
       illustrator.set_svg(graph);
       self.set_labels(graph);
       illustrator.set_duration(start);
@@ -1033,6 +1056,20 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   // }}}
   // }}}
   // Helper Functions {{{
+  var clean_description = function() { // private {{{
+    $('*[svg-id]',description).each(function(){
+      $(this).removeAttr('svg-id');
+    });
+    $('*[svg-type]',description).each(function(){
+      $(this).removeAttr('svg-type');
+    });
+    $('*[svg-subtype]',description).each(function(){
+      $(this).removeAttr('svg-subtype');
+    });
+    $('*[svg-label]',description).each(function(){
+      $(this).removeAttr('svg-label');
+    });
+  } //}}}
   var parse = function(root, parent_pos)  { // private {{{
     var pos = JSON.parse(JSON.stringify(parent_pos));
     var max = {'row': 0,'col': 0};
@@ -1298,7 +1335,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     // }}}
 
     ///////// show graph step by step
-    // illustrator.set_svg_direct(block.svg);
+    // illustrator.set_svg(block);
     // debugger;
 
     return [g, endnodes];