@xuda.io/runtime-bundle 1.0.1155 → 1.0.1156

package/js/xuda-runtime-slim.min.es.js

@@ -7751,7 +7751,1249 @@ func.utils.get_last_datasource_no = function (SESSION_ID) {
     return filtered?.at?.(-1)?.dsSession;
   }
 };
-  func.UI.screen = {};
+ func.UI.utils = {};
+
+func.UI.utils.indicator = {};
+func.UI.utils.indicator.worker = {};
+func.UI.utils.indicator.worker.busy = function () {
+  $('.progressLoader').addClass('progress_busy');
+};
+func.UI.utils.indicator.worker.normal = function () {
+  $('.progressLoader').removeClass('progress_busy');
+};
+func.UI.utils.indicator.server = {};
+func.UI.utils.indicator.server.busy = function () {
+  func.UI.utils.indicator.worker.busy();
+};
+func.UI.utils.indicator.server.normal = function () {
+  func.UI.utils.indicator.worker.normal();
+};
+
+func.UI.utils.indicator.screen = {};
+func.UI.utils.indicator.screen.busy = function () {
+  $('.progressLoader').addClass('progress_busy2');
+};
+func.UI.utils.indicator.screen.normal = function () {
+  $('.progressLoader').removeClass('progress_busy2');
+};
+
+func.UI.utils.save = function (SESSION_ID, stateP) {
+  if (stateP) func.UI.utils.indicator.worker.busy();
+  else func.UI.utils.indicator.worker.normal();
+};
+
+func.UI.utils.screen_blocker = function (onP, idP, dsP) {
+  if (!idP) {
+    func.utils.debug_report('', 'Worker', 'Missing reference id', 'E');
+    return;
+  }
+  window.oncontextmenu = function () {
+    if (onP) return false;
+    else return true;
+  };
+  if (!onP) {
+    delete SCREEN_BLOCKER_OBJ[idP];
+
+    return;
+  }
+
+  if (idP !== 'Worker') {
+    SCREEN_BLOCKER_OBJ[idP] = Date.now();
+  }
+};
+
+func.UI.utils.get_node_elm = function (SESSION_ID, dsSessionP, ui_idP, $container, is_app_panel, ui_type, functionP) {
+  if (!$container) {
+    $container = $('body');
+  }
+  var $elm = func.UI.utils.find_in_element_data(is_app_panel ? 'xuPanelData' : 'xuData', $container, 'ui_id', ui_idP);
+  const _session = SESSION_OBJ[SESSION_ID];
+  var _ds = _session.DS_GLB[dsSessionP];
+
+  if (_ds.tree_obj.renderType === 'form') {
+    return $elm;
+  }
+  var $grid_elm;
+  $.each($elm, function (key, val) {
+    if ($(val.data().xuData.recordid) === _ds.currentRecordId) {
+      $grid_elm = $(val);
+      return false;
+    }
+  });
+  return $grid_elm;
+
+  return $elm;
+};
+func.UI.utils.get_nodeId = function (SESSION_ID, dsSessionP, ui_idP, $container, is_app_panel) {
+  var $elm = func.UI.utils.get_node_elm(SESSION_ID, dsSessionP, ui_idP, $container, is_app_panel, null, null);
+
+  if (is_app_panel) {
+    return $elm.data().xuData.panel_info.prop.id;
+  } else {
+    return $elm.attr('nodeId');
+  }
+};
+// func.UI.utils.get_element_info = function (SESSION_ID, dsSessionP, ui_idP, $container, is_app_panel, ui_type, functionP) {
+//   var $elm = func.UI.utils.get_node_elm(SESSION_ID, dsSessionP, ui_idP, $container, is_app_panel, ui_type, functionP);
+//   var ret = {};
+//   if ($elm?.length) {
+//     //length added 20210209
+//     // if (is_app_panel) {
+//     //   if ($elm?.data()?.xuData.panel_info) {
+//     //     ret.nodeId = $elm.data().xuData.panel_info.prop.id;
+//     //   } else {
+//     //     ret.nodeId = $elm.data().xuData.properties.id;
+//     //   }
+//     // } else {
+//     // ret.nodeId = $elm.data().xuData.nodeId;
+//     ret.nodeId = $elm.data().xuData.xu_id;
+
+//     // ret.nodeId = $elm.attr('xu-ui-id');
+//     // }
+//   }
+//   ret.$elm = $elm;
+//   return ret;
+// };
+func.UI.utils.get_ui_id_count = function (SESSION_ID, dsSessionP, ui_idP, $container) {
+  return func.UI.utils.get_node_elm(SESSION_ID, dsSessionP, ui_idP, $container, null, null).length;
+};
+// func.UI.utils.get_ui_info_tree_scope = function (SESSION_ID, dsP, ui_id, is_app_panel, ui_type, $container, functionP) {
+//   var drill_parent = function () {
+//     if (SESSION_OBJ[SESSION_ID].DS_GLB[dsP].parentDataSourceNo) {
+//       return func.UI.utils.get_ui_info_tree_scope(SESSION_ID, SESSION_OBJ[SESSION_ID].DS_GLB[dsP].parentDataSourceNo, ui_id, is_app_panel, ui_type);
+//     } else if (ui_type === 'xu-app-page') {
+//       if (elm_info.$elm.length) {
+//         return {
+//           ds: dsP,
+//           id: id,
+//           $elm: elm_info.$elm,
+//         };
+//       }
+//     }
+//   };
+//   if (!SESSION_OBJ[SESSION_ID].DS_GLB[dsP]) return;
+
+//   var elm_info = func.UI.utils.get_element_info(SESSION_ID, dsP, ui_id, $container, is_app_panel, ui_type, functionP);
+//   var id = elm_info.nodeId;
+
+//   if (!id) {
+//     return drill_parent();
+//   } else {
+//     if (is_app_panel) {
+//       return {
+//         ds: func.UI.utils.get_node_elm(SESSION_ID, dsP, ui_id, $container, is_app_panel).data().xuData.paramsP.dsSessionP,
+//         id: id,
+//         $elm: elm_info.$elm,
+//       };
+//     } else {
+//       return {
+//         ds: dsP,
+//         id: id,
+//         $elm: elm_info.$elm,
+//       };
+//     }
+//   }
+// };
+
+func.UI.utils.clean_node_busy = function (node) {
+  var run_node = function (node) {
+    node.busy = false;
+    $.each(node.children, function (key, val) {
+      run_node(val);
+    });
+  };
+  run_node(node);
+  return node;
+};
+
+// func.UI.utils.get_ui_info_tree_scope_sync = function (SESSION_ID, dsP, ui_id, ui_type, callback, $container, functionP) {
+//   var ret;
+//   var is_app_panel = false;
+//   if (ui_type === 'xu-panel') {
+//     is_app_panel = true;
+//   }
+
+//   ret = func.UI.utils.get_ui_info_tree_scope(SESSION_ID, dsP, ui_id, is_app_panel, ui_type, $container, functionP);
+
+//   if (!ret) {
+//     var attempts = 0;
+//     const run = function () {
+//       ret = func.UI.utils.get_ui_info_tree_scope(SESSION_ID, dsP, ui_id, is_app_panel, ui_type, $container, functionP);
+//       if (ret || attempts > 10) {
+//         callback(ret);
+//       } else {
+//         attempts++;
+//         console.log(attempts, dsP, ui_id, is_app_panel);
+//         setTimeout(function () {
+//           run();
+//         }, 100);
+//       }
+//     };
+//     run();
+//   } else {
+//     callback(ret);
+//   }
+// };
+
+func.UI.utils.live_preview_element_inspect_on = function (SESSION_ID, service) {
+  $.each($('[xu-ui-id]'), function (key, val) {
+    $(val).on('mouseenter.live_preview_element_inspector', function () {
+      $('body').find('.preview_mark').removeClass('preview_mark').off('click.live_preview_element_inspector');
+      $(this).addClass('preview_mark');
+      $(this).on('click.live_preview_element_inspector', function (e) {
+        const _session = SESSION_OBJ[SESSION_ID];
+        console.log($(this).data());
+        const data = $(this).data();
+        const obj = {
+          service: service + '_result',
+          id: STUDIO_WEBSOCKET_CONNECTION_ID,
+          uid: _session.USR_OBJ._id,
+          source: 'runtime',
+          app_id: _session.app_id,
+          gtp_token: _session.gtp_token,
+          session_id: SESSION_ID,
+          app_token: _session.app_token,
+        };
+
+        switch (service) {
+          case 'live_preview_element_reference':
+            obj.data = { prog_id: data.xuData.prog_id, node: data.xuData.node };
+            break;
+          case 'live_preview_element_info':
+            obj.data = {
+              element_info: data.debug_info,
+              datasource: _session.DS_GLB[data.paramsP.dsSessionP],
+            };
+            break;
+          case 'live_preview_element_dnd':
+            // code block
+            break;
+          default:
+          // code block
+        }
+
+        STUDIO_PEER_CONN_SEND_METHOD(obj);
+        // STUDIO_WEBSOCKET.emit("message", obj);
+
+        func.UI.utils.live_preview_element_inspect_off();
+
+        if (typeof LIVE_PREVIEW_APP_ACTIVE !== 'undefined') {
+          $(`#live_preview_element_reference_btn`).css('color', 'unset');
+          $(`#live_preview_element_info_btn`).css('color', 'unset');
+        }
+      });
+    });
+
+    $(val).on('mouseleave.live_preview_element_inspector', function () {
+      $(this).removeClass('preview_mark');
+      $(this).off('click.live_preview_element_inspector');
+    });
+  });
+};
+
+func.UI.utils.live_preview_element_inspect_off = function () {
+  $.each($('[xu-ui-id]'), function (key, val) {
+    $(val).off('mouseenter.live_preview_element_inspector mouseleave.live_preview_element_inspector');
+  });
+  $('body').find('.preview_mark').removeClass('preview_mark').off('click.live_preview_element_inspector');
+};
+
+func.UI.utils.live_preview_show_selected_element = function (nodeid) {
+  $('body').find('.preview_mark').removeClass('preview_mark');
+  $(`[nodeid="${nodeid}"]`).addClass('preview_mark');
+};
+
+func.UI.utils.get_url_attribute = function (SESSION_ID, key) {
+  var ret = glb.URL_PARAMS.get(key);
+
+  const _session = SESSION_OBJ[SESSION_ID];
+  return glb.URL_PARAMS.get(key) || $(_session.root_element).attr(key) || _session.opt?.params?.[key] || _session.opt[key] || $.cookie(key) || window.localStorage.getItem(key);
+};
+
+func.UI.utils.get_root_element_attributes = function (SESSION_ID) {
+  // test2345
+  var ret = {};
+  $(SESSION_OBJ[SESSION_ID].root_element).each(function () {
+    $.each(this.attributes, function () {
+      // this.attributes is not a plain object, but an array
+      // of attribute nodes, which contain both the name and value
+      if (this.specified) {
+        ret[this.name] = this.value;
+      }
+    });
+  });
+
+  return ret;
+};
+
+func.UI.utils.prompt_confirm_window = async function (SESSION_ID, messageP, picP, confirmYesFuncP, confirmNoFuncP, confirmCancelFuncP, title, colorP) {
+  if (confirmNoFuncP) {
+    buttons.push({
+      text: 'Disagree',
+      role: 'no',
+      cssClass: 'secondary',
+      handler: () => {
+        confirmNoFuncP();
+      },
+    });
+  }
+  if (confirmYesFuncP) {
+    buttons.push({
+      text: 'Agree',
+      role: 'yes',
+      cssClass: 'secondary',
+      handler: () => {
+        confirmYesFuncP();
+      },
+    });
+  }
+
+  if (confirmCancelFuncP) {
+    buttons.push({
+      text: 'Dismiss',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        confirmCancelFuncP();
+      },
+    });
+  }
+
+  UI_FRAMEWORK_PLUGIN.modal(title, messageP, buttons);
+};
+
+func.UI.utils.alert = function (msg) {
+  console.error(msg);
+};
+
+func.UI.utils.progressScreen = {};
+func.UI.utils.progressScreen.show = function (SESSION_ID, textP, show_bytesP, error, progress_off, logo_off) {
+  if (glb.IS_WORKER) {
+    return;
+  }
+  const app_obj = APP_OBJ?.[SESSION_OBJ?.[SESSION_ID]?.app_id];
+
+  var background_color = '';
+  var icon = app_obj?._conf?.logo_url || 'https://xuda.io/dist/images/xuda_logo.png';
+  if (app_obj?.app_pic) {
+    icon = app_obj.app_pic;
+  }
+
+  if (app_obj && app_obj.app_icon_prop) {
+    if (app_obj.app_icon_prop.app_icon_background_color) {
+      background_color = app_obj.app_icon_prop.app_icon_background_color;
+    }
+    // if (app_obj.app_type === "master_team" && app_obj.app_pic) {
+    //   let app_id = APP_OBJ[SESSION_OBJ[SESSION_ID].app_id];
+    //   if (app_obj.app_replicate) {
+    //     app_id = app_obj.app_replicate;
+    //   }
+    // }
+  }
+
+  IS_PROGRESS_SCREEN_OPEN = true;
+  var $progressScreen = $('#progressScreen2').empty();
+  $('.loader').hide();
+  $progressScreen = $('#progressScreen2').css({});
+
+  if (background_color) {
+    $progressScreen.css({
+      color: func.common.getContrast_color(background_color),
+      'background-color': background_color,
+    });
+  }
+
+  setTimeout(function () {
+    if (IS_PROGRESS_SCREEN_OPEN) {
+      var error_msg = `<h4>${textP}</h4>`;
+
+      // $("#progressScreen2_text").fadeIn(500, function () {
+      //   if (!logo_off) {
+      //     $(this).prepend(`<img class='progressScreen_logo' src='${icon}'>`);
+      //   }
+      //   $(this).append(
+      //     error
+      //       ? error_msg
+      //       : typeof textP === "object"
+      //       ? textP
+      //       : `<p>${textP}</p>`
+      //   );
+      // });
+
+      $('#progressScreen2_text').show(500, function () {
+        if (!logo_off) {
+          $(this).prepend(`<img class='progressScreen_logo' src='${icon}'>`);
+        }
+        $(this).append(error ? error_msg : typeof textP === 'object' ? textP : `<p>${textP}</p>`);
+      });
+    }
+  }, 500);
+
+  $('#progressScreen2').show();
+  $('<div>').attr('id', 'progressScreen2_text').hide().appendTo($progressScreen);
+  // .hide()
+  // .fadeIn("slow"); //.append(textP)
+};
+func.UI.utils.progressScreen.hide = function () {
+  if (glb.IS_WORKER) {
+    return;
+  }
+  IS_PROGRESS_SCREEN_OPEN = false;
+  // window.clearInterval(PROGRESS_INTERVAL);
+  //   setTimeout(function () {
+  $('#progressScreen2').hide(); //fadeOut('fast');
+  $('#progressScreen2_text').empty(); //.fadeOut('fast').empty();
+  // $("#progressScreen2").css({
+  //   height: "0px",
+  //   top: "-100px",
+  //   "background-image": "none"
+  // });
+};
+
+func.UI.utils.find_in_element_data = function (folder, $elm, key, val) {
+  return $elm.find('*').filter(function () {
+    if (typeof val === 'undefined') {
+      return $(this).data()?.[folder]?.[key];
+    }
+
+    return $(this).data()?.[folder]?.[key] == val;
+  });
+};
+
+func.UI.utils.init_ui_framework = async function (SESSION_ID, prog_id) {
+  if (typeof glb.SLIM_BUNDLE !== 'undefined' || glb.SLIM_BUNDLE) return;
+
+  var _session = SESSION_OBJ[SESSION_ID];
+  var tree_obj = await func.utils.TREE_OBJ.get(SESSION_ID, prog_id);
+  if (_.isEmpty(tree_obj)) {
+    return console.error('Error: prog ' + prog_id + ' not found.');
+  }
+  const report_error = function (descP, warn) {
+    func.utils.debug.log(SESSION_ID, prog_id, {
+      module: 'component',
+      action: 'Init',
+      source: 'install ui framework',
+      prop: descP,
+      details: descP,
+      result: null,
+      error: warn ? false : true,
+      fields: null,
+      type: 'component',
+      prog_id: prog_id,
+    });
+  };
+  const plugin_name = tree_obj.uiFramework;
+
+  if (!plugin_name) {
+    return report_error('no frameworks plugin defined', true);
+  }
+
+  if (plugin_name === UI_FRAMEWORK_INSTALLED) return;
+
+  const _plugin = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[plugin_name];
+
+  if (!_plugin?.installed) {
+    return report_error(`plugin ${plugin_name} not installed`);
+  }
+
+  const get_path = function (plugin_name, resource) {
+    var path = `https://${_session.domain}/plugins/${plugin_name}${resource ? '/' + resource : ''}?app_id=${_session.app_id}`;
+
+    return path;
+  };
+
+  var _ui_framework_index;
+  try {
+    const runtime_mjs = `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`;
+
+    _ui_framework_index = await import(get_path(plugin_name, runtime_mjs));
+  } catch (error) {
+    return report_error(`plugin ${plugin_name} not found`);
+  }
+
+  if (!_ui_framework_index) {
+    return report_error(`plugin ${plugin_name} is empty`);
+  }
+
+  if (!_ui_framework_index.core) {
+    return report_error(`plugin core not found in ${plugin_name} `);
+  }
+
+  // if (!_ui_framework_index.resources) {
+  //   return report_error(`plugin resources not found in ${plugin_name} `);
+  // }
+  var _ui_framework_dashboard_setup;
+  var _ui_framework_dashboard_setup_data_ret;
+  const ui_framework_core = new _ui_framework_index.core();
+  if (ui_framework_core.init) {
+    try {
+      const setup_mjs = `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`;
+      _ui_framework_dashboard_setup = await import(get_path(plugin_name, setup_mjs));
+      if (_ui_framework_dashboard_setup) {
+        _ui_framework_dashboard_setup_data_ret = await func.utils.get_plugin_setup(SESSION_ID, plugin_name);
+      }
+    } catch (error) {}
+  }
+
+  if (plugin_name !== UI_FRAMEWORK_INSTALLED) {
+    UI_FRAMEWORK_INSTALLED = plugin_name;
+    const _plugin_INSTALLED = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[UI_FRAMEWORK_INSTALLED];
+    UI_FRAMEWORK_PLUGIN = _ui_framework_index;
+    if (UI_FRAMEWORK_INSTALLED) {
+      var _current_ui_framework_runtime;
+      try {
+        const _runtime_mjs = `${_plugin_INSTALLED.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`;
+        _current_ui_framework_runtime = await import(get_path(UI_FRAMEWORK_INSTALLED, _runtime_mjs));
+      } catch (error) {
+        return report_error(`plugin ${UI_FRAMEWORK_INSTALLED} not found`);
+      }
+
+      // remove
+      if (UI_FRAMEWORK_PLUGIN.core.discard && UI_FRAMEWORK_PLUGIN.init_id) {
+        UI_FRAMEWORK_PLUGIN.core.discard(UI_FRAMEWORK_PLUGIN.init_id);
+      }
+      if (_ui_framework_index.resources) {
+        $.each(_current_ui_framework_runtime.resources, function (key, val) {
+          func.utils.remove_js_css_file(val.url, val.type);
+        });
+      }
+    }
+
+    // install
+    var init_id;
+    if (_ui_framework_index.resources) {
+      for await (var val of _ui_framework_index.resources) {
+        var ret = undefined;
+
+        var url = val.url;
+        switch (val.type) {
+          case 'module':
+            try {
+              // ret = await load_module(url);
+              ret = await func.utils.load_js_on_demand(url, 'module');
+            } catch (error) {
+              debugger;
+            }
+
+            break;
+          case 'css':
+            ret = func.utils.load_css_on_demand(url);
+            break;
+          case 'js':
+            ret = await func.utils.load_js_on_demand(url);
+            break;
+
+          default:
+            break;
+        }
+        if (val.callback) {
+          val.callback(ret);
+        }
+      }
+    }
+    if (ui_framework_core.init) {
+      init_id = await ui_framework_core.init(_ui_framework_dashboard_setup_data_ret?.code > -1 && _ui_framework_dashboard_setup_data_ret.data);
+      UI_FRAMEWORK_PLUGIN.init_id = init_id;
+    }
+  }
+};
+// old
+// func.UI.utils.get_panels_from_dom = function (SESSION_ID, ignore_disableAutoRefresh) {
+//   const $elm = func.UI.utils.find_in_element_data('xuPanelData', $(SESSION_OBJ[SESSION_ID].root_element), 'parent_element_ui_id');
+//   var panels_obj = {};
+
+//   // set panels_obj
+//   for (const [elem_key, elem_val] of Object.entries($elm)) {
+//     if (elem_key === 'length') break;
+//     var $div = $(elem_val);
+//     let xuData = $div.data().xuData;
+
+//     if (!$div.data().xuPanelData) continue;
+
+//     let dsSession = xuData.paramsP.dsSessionP;
+//     var _session = SESSION_OBJ[SESSION_ID];
+//     let _ds = _session?.DS_GLB[dsSession];
+//     if (!_ds) continue;
+
+//     if (!ignore_disableAutoRefresh && _ds.tree_obj.disableAutoRefresh) {
+//       continue;
+//     }
+
+//     const parent_element_ui_id = $div.data().xuPanelData.parent_element_ui_id;
+//     if (!panels_obj[parent_element_ui_id]) {
+//       panels_obj[parent_element_ui_id] = {
+//         _ds,
+//         $div,
+//         ids: [],
+//       };
+//     }
+//     panels_obj[parent_element_ui_id].ids.push($div.attr('xu-ui-id'));
+//   }
+
+//   return panels_obj;
+// };
+
+func.UI.utils.get_panels_wrapper_from_dom = async function (SESSION_ID, $xu_embed_container, ignore_disableAutoRefresh) {
+  const $elm = func.UI.utils.find_in_element_data('xuPanelWrapper', $(SESSION_OBJ[SESSION_ID].root_element), 'isWrapper');
+  var panels_obj = {};
+
+  // set panels_obj
+  for (const [elem_key, elem_val] of Object.entries($elm)) {
+    if (elem_key === 'length') break;
+    var $panel_div = $(elem_val);
+
+    const panelXuAttributes = $panel_div?.data().xuPanelWrapper?.panelXuAttributes;
+    const panelDivData = $panel_div?.data().xuPanelWrapper?.panelDivData;
+
+    if (!panelXuAttributes) continue; // skip if no longer in dom
+
+    const xu_ui_id = $panel_div.attr('xu-ui-id');
+
+    if (!panels_obj[xu_ui_id]) {
+      var _session = SESSION_OBJ[SESSION_ID];
+      let _ds = _session?.DS_GLB[panelDivData.xuData.paramsP.dsSessionP];
+
+      if (!_ds) continue;
+
+      let prog_doc = await func.utils.DOCS_OBJ.get(SESSION_ID, _ds.prog_id);
+      if (!ignore_disableAutoRefresh && prog_doc.properties.disableAutoRefresh) {
+        continue;
+      }
+
+      let ids = [];
+
+      $.each($panel_div.children(), function (key, val) {
+        if ($(val).data().xuPanelData) {
+          ids.push($(val).attr('xu-ui-id'));
+        }
+      });
+
+      panels_obj[xu_ui_id] = {
+        // prog_id,
+        panelXuAttributes,
+        progUi: prog_doc.progUi,
+        prog_doc,
+        $panel_div,
+        _ds,
+        ids,
+      };
+    }
+  }
+
+  return panels_obj;
+};
+
+func.UI.worker = {};
+func.UI.worker.ID = null;
+func.UI.worker.init = async function (SESSION_ID) {
+  $.fn.isInViewport = function () {
+    var elementTop = $(this).offset().top;
+    var elementBottom = elementTop + $(this).outerHeight();
+
+    var viewportTop = $(window).scrollTop();
+    var viewportBottom = viewportTop + $(window).height();
+
+    return elementBottom > viewportTop && elementTop < viewportBottom;
+  };
+
+  let last_job_in_queue = 0;
+  // let run_stat;
+  const job_iterator2 = async function () {
+    let from_job_num_to_run = last_job_in_queue;
+    last_job_in_queue = UI_WORKER_OBJ.num - from_job_num_to_run;
+
+    if (typeof UI_WORKER_OBJ.stat === 'undefined' || UI_WORKER_OBJ.stat === 'undefined' || UI_WORKER_OBJ.stat === null) {
+      // idle
+      this.attempt = 0;
+      if (UI_WORKER_OBJ.jobs.length) {
+        // clearInterval(this._interval);
+        for await (const [key, val] of Object.entries(UI_WORKER_OBJ.jobs)) {
+          // if (val.job_num < from_job_num_to_run) continue;
+          try {
+            if (val.stat) {
+              break;
+            }
+
+            await func.UI.worker.execute(val.SESSION_ID, val);
+            // break;
+          } catch (err) {
+            console.error(err);
+          }
+        }
+      }
+    } else {
+      //busy
+
+      this.attempt++;
+    }
+  };
+
+  const job_iterator = async function () {
+    let from_job_num_to_run = last_job_in_queue;
+    last_job_in_queue = UI_WORKER_OBJ.num - from_job_num_to_run;
+
+    // if (typeof UI_WORKER_OBJ.stat === 'undefined' || UI_WORKER_OBJ.stat === 'undefined' || UI_WORKER_OBJ.stat === null) {
+    // idle
+    this.attempt = 0;
+    if (UI_WORKER_OBJ.jobs.length) {
+      let running_job_children_elements = [];
+      let active_job_children_elements = [];
+      for await (const [key, val] of Object.entries(UI_WORKER_OBJ.jobs)) {
+        try {
+          if (val.stat === 'busy') continue;
+
+          if (!val.elementP) {
+            await func.UI.worker.execute(val.SESSION_ID, val);
+            continue;
+          }
+
+          const active_xu_ui_id = val.elementP.attr('xu-ui-id');
+          if (!active_xu_ui_id) continue;
+
+          const running_job_obj = UI_WORKER_OBJ.jobs[0];
+          if (running_job_obj.job_num !== val.job_num) {
+            const running_xu_ui_id = running_job_obj?.elementP?.attr('xu-ui-id');
+            if (!running_xu_ui_id) continue;
+
+            $.each(running_job_obj.elementP.find('*'), function (key, val) {
+              const xu_ui_id = $(val).attr('xu-ui-id');
+              if (!xu_ui_id) return true;
+              running_job_children_elements.push(xu_ui_id);
+            });
+
+            $.each(val.elementP.find('*'), function (key, val) {
+              const xu_ui_id = $(val).attr('xu-ui-id');
+              if (!xu_ui_id) return true;
+              active_job_children_elements.push(xu_ui_id);
+            });
+
+            // skip - if job element exist in the active job ui as child element
+            if (running_job_children_elements.includes(active_xu_ui_id)) {
+              continue;
+            }
+
+            // abort - if active job element exist in the current job ui (parent element changed)
+            if (active_job_children_elements.includes(running_xu_ui_id)) {
+              if (val.functionP === 'execute_xu_render_attributes') {
+                $.each(active_job_children_elements, function (key, val) {
+                  const $elm = $(`[xu-ui-id=${val}]`);
+                  if (!$elm.length) return true;
+                  if (!$elm.data().xuData) return true;
+                  $elm.data().xuData.pending_to_delete = true;
+                });
+                await func.UI.worker.delete_job(SESSION_ID, running_job_obj.job_num);
+                break;
+              }
+            }
+          }
+
+          // execute - if active job element not exist the current job ui and not detected as parent element
+          await func.UI.worker.execute(val.SESSION_ID, val);
+          continue;
+
+          // active_job_children_elements = [];
+          // if (val.elementP) {
+          //   // get active_job children elements only if job handle ui job (not update)
+          //   $.each(val.elementP.find('*'), function (key, val) {
+          //     const xu_ui_id = val.elementP.attr('xu-ui-id');
+          //     if (!xu_ui_id) return true;
+          //     active_job_children_elements.push(xu_ui_id);
+          //   });
+          //   func.UI.worker.execute(val.SESSION_ID, val);
+          //   continue;
+          // } else {
+          //   // non ui job
+          //   await func.UI.worker.execute(val.SESSION_ID, val);
+          //   break;
+          // }
+
+          // if (UI_WORKER_OBJ.jobs.length > 1 && val.elementP) {
+          //   const xu_ui_id = val.elementP.attr('xu-ui-id');
+          //   if (!xu_ui_id) continue;
+          //   // skip - if job element exist in the active job ui as child element
+          //   if (active_job_children_elements.includes(xu_ui_id)) {
+          //     continue;
+          //   }
+          //   // abort - if active job element exist in the current job ui (parent element changed)
+          //   $.each(val.elementP.find('*'), function (key, val) {
+          //     const xu_ui_id = val.elementP.attr('xu-ui-id');
+          //     if (!xu_ui_id) return true;
+          //     active_job_children_elements.push(xu_ui_id);
+          //   });
+          //   // execute - if active job element not exist the current job ui and not detected as parent element
+          //   const active_job = UI_WORKER_OBJ.jobs[0];
+          // }
+
+          // break;
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    }
+    // } else {
+    //   //busy
+
+    //   this.attempt++;
+    // }
+  };
+
+  this._interval = setInterval(job_iterator, 1);
+
+  setInterval(async function () {
+    func.UI.ds_garbage_collector();
+  }, 10000);
+
+  setInterval(async function () {
+    func.UI.refs_garbage_collector();
+    func.UI.teleport_garbage_collector();
+  }, 1000);
+};
+func.UI.worker.add_to_queue = async function (SESSION_ID, source, functionP, paramsP, calling_job, elementP, dsSession, calling_trigger_prop) {
+  var obj = {
+    SESSION_ID,
+    source,
+    functionP,
+    paramsP,
+    calling_job,
+    elementP,
+    dsSession,
+    calling_trigger_prop,
+    job_num: UI_WORKER_OBJ.num,
+  };
+
+  if (functionP === 'execute_xu_all_attributes') {
+    const queue_key = source + '_' + functionP + '_' + (elementP?.attr('xu-ui-id') || '') + '_' + (paramsP?.fields_arr?.toString() || '');
+
+    obj.queue_key = queue_key;
+
+    let exist_job = UI_WORKER_OBJ.jobs.find((e) => {
+      if (e.queue_key === queue_key) {
+        return e;
+      }
+    });
+
+    if (exist_job) {
+      // func.UI.worker.delete_job(SESSION_ID, exist_job.job_num);
+      // exist_job = obj;
+      exist_job.paramsP = paramsP;
+      exist_job.calling_trigger_prop = calling_trigger_prop;
+
+      return;
+    }
+  }
+
+  // if (calling_job) {
+  //   var job_index = func.UI.worker.find_job_index(SESSION_ID, calling_job);
+
+  //   if (job_index === null || typeof job_index === 'undefined') return;
+
+  //   try {
+  //     if (!UI_WORKER_OBJ.jobs[job_index].splice_count) {
+  //       UI_WORKER_OBJ.jobs[job_index].splice_count = 0;
+  //     }
+  //     UI_WORKER_OBJ.jobs[job_index].splice_count++;
+  //     UI_WORKER_OBJ.jobs.splice(job_index + UI_WORKER_OBJ.jobs[job_index].splice_count, 0, obj);
+  //     // }
+  //   } catch (e) {
+  //     console.error('bug');
+  //     // UI_WORKER_OBJ.jobs.splice(0, 0, obj);
+  //   }
+  // } else {
+  //   // check case of xu-render if queue has child node of the element then delete job
+  //   // check case of execute attributes that queue not contain the element then add to parallel queue
+
+  //   UI_WORKER_OBJ.jobs.push(obj);
+  // }
+
+  UI_WORKER_OBJ.jobs.push(obj);
+
+  UI_WORKER_OBJ.num++;
+  return UI_WORKER_OBJ.num - 1;
+};
+func.UI.worker.delete_job = async function (SESSION_ID, jobNoP) {
+  // func.UI.worker.ID.postMessage({
+  //   method: "delete_job",
+  //   params: {
+  //     job_num: jobNoP,
+  //   },
+  // });
+
+  // return;
+
+  var _session = SESSION_OBJ[SESSION_ID];
+  var job_index = func.UI.worker.find_job_index(SESSION_ID, jobNoP);
+
+  if (!UI_WORKER_OBJ.jobs[job_index]) {
+    // UI_WORKER_OBJ.stat = null;
+    return;
+  }
+
+  var dsSession = UI_WORKER_OBJ.jobs[job_index].dsSession;
+  let ds_obj = _session?.DS_GLB[dsSession];
+  if (ds_obj) {
+    delete SCREEN_BLOCKER_OBJ[ds_obj.screenId + (ds_obj.callingScreenId ? '_' + ds_obj.callingScreenId : '')];
+  }
+  if (dsSession && ds_obj?.loops_limit && ds_obj?.loops_count < ds_obj?.loops_limit - 1) {
+    return;
+  }
+  // UI_WORKER_OBJ.stat = null;
+
+  UI_WORKER_OBJ.jobs.splice(job_index, 1);
+};
+func.UI.worker.execute = async function (SESSION_ID, queue_obj) {
+  var job_index = func.UI.worker.find_job_index(SESSION_ID, queue_obj.job_num);
+  // if (UI_WORKER_OBJ.jobs?.[job_index]?.stat === 'busy') {
+  //   if (queue_obj.jobNoP) UI_WORKER_OBJ.stat = job_index;
+  //   return;
+  // }
+  // if (queue_obj.jobNoP && !UI_WORKER_OBJ.jobs[job_index]) {
+  //   UI_WORKER_OBJ.stat = null;
+  //   return;
+  // }
+
+  if (queue_obj.jobNoP) UI_WORKER_OBJ.stat = job_index;
+  if (UI_WORKER_OBJ.jobs[job_index]) {
+    UI_WORKER_OBJ.jobs[job_index].stat = 'busy';
+  }
+
+  const fx = {
+    update_datasource: async function () {
+      if (queue_obj?.paramsP) {
+        var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[queue_obj.dsSession];
+        _ds.currentRecordId = queue_obj.paramsP.currentRecordId;
+
+        var datasource_changes = {
+          [_ds.dsSession]: { [_ds.currentRecordId]: 'set' },
+        };
+        await func.datasource.update(SESSION_ID, datasource_changes);
+
+        if (queue_obj.paramsP.field_id) {
+          datasource_changes = {
+            [_ds.dsSession]: {
+              [_ds.currentRecordId]: {
+                [queue_obj.paramsP.field_id]: queue_obj.paramsP.field_value,
+              },
+            },
+          };
+          await func.datasource.update(SESSION_ID, datasource_changes);
+        }
+      }
+      return func.UI.worker.delete_job(SESSION_ID, queue_obj.job_num);
+    },
+    execute_xu_render_attributes: async function () {
+      const _data = queue_obj.paramsP.elem_val.$elm.data();
+      if (_data?.xuData?.paramsP) {
+        await func.UI.screen.execute_xu_functions(
+          SESSION_ID,
+          null,
+          _data.xuData.$root_container,
+          _data.xuData.node,
+          $(`[xu-ui-id="${_data.xuData.parent_element_ui_id}"`),
+          _data.xuData.paramsP,
+          {},
+          queue_obj.jobNoP,
+          _data.xuData.key,
+          _data.xuData.parent_node,
+          'xu-render',
+          queue_obj.paramsP.elem_val.$elm,
+          {
+            key: 'xu-render',
+            value: queue_obj.paramsP.attr_value, //? "Y" : "N",
+            fields_arr: queue_obj.paramsP.fields_arr,
+            jobNoP: queue_obj.jobNoP,
+          },
+        );
+      }
+
+      return func.UI.worker.delete_job(SESSION_ID, queue_obj.job_num);
+    },
+    execute_xu_all_attributes: async function () {
+      const done = function () {
+        return func.UI.worker.delete_job(SESSION_ID, queue_obj.job_num);
+      };
+
+      // var $elm = func.UI.utils.find_in_element_data('xuData', $(SESSION_OBJ[SESSION_ID].root_element), 'xu_id', queue_obj.paramsP.elem_key);
+      var $elm = $(`[xu-ui-id="${queue_obj.paramsP.elem_key}"]`);
+
+      // if (glb.new_xu_render) {
+      //   $elm = $(`[xu-ui-id="${queue_obj.paramsP.elem_key}"]`);
+      // }
+
+      if (!$elm.length) {
+        return done();
+      }
+      for await (const [key, attr] of Object.entries(queue_obj.paramsP.elem_val.attributes)) {
+        if (attr === 'xu-exp:xu-render' || attr === 'xu-exp:xu-for' || attr === 'xu-for' || attr === 'xu-exp:xu-bind') {
+          // if (attr === 'xu-exp:xu-for' || attr === 'xu-for' || attr === 'xu-exp:xu-bind') {
+          continue;
+        }
+
+        var res = {
+          result: queue_obj.paramsP.elem_val.$elm.data().xuAttributes[attr],
+        };
+        if (attr !== 'xu-class' && attr !== 'xu-ui-plugin') {
+          res = await func.expression.get(
+            queue_obj.paramsP.SESSION_ID,
+            queue_obj.paramsP.elem_val.$elm.data().xuAttributes[attr],
+            queue_obj.paramsP.elem_val.$elm.data().xuData.paramsP.dsSessionP,
+            'UI Property EXP',
+            queue_obj.paramsP.elem_val.$elm.data().xuData.recordid,
+            null,
+            null,
+            null,
+            null,
+            null,
+            queue_obj.paramsP.elem_val.$elm.data().xuData.iterate_info,
+          );
+          // console.log(res);
+        }
+
+        const attr_new = attr.split('xu-exp:')[1];
+        // REGULAR ATTRIBUTE
+        if (attr_new && attr_new.substr(0, 2) !== 'xu' && queue_obj.paramsP.ui_type !== 'xu-widget') {
+          queue_obj.paramsP.elem_val.$elm.attr(attr_new !== 'viewBox' ? attr_new.toLowerCase() : attr_new, res.result);
+        } else {
+          try {
+            // XU ATTRIBUTE
+            let _data = queue_obj.paramsP.elem_val.$elm.data();
+            if (!_data || _.isEmpty(_data)) {
+              continue;
+            }
+            await func.UI.screen.execute_xu_functions(SESSION_ID, null, _data.xuData.$root_container, _data.xuData.node, _data.xuData.$container, _data.xuData.paramsP, {}, queue_obj.jobNoP, null, null, attr_new || attr, queue_obj.paramsP.elem_val.$elm, {
+              key: attr_new || attr,
+              value: res.result,
+            });
+          } catch (error) {
+            debugger;
+          }
+        }
+      }
+
+      return done();
+    },
+    execute_xu_for: async function () {
+      try {
+        var $elm = queue_obj?.paramsP?.elem_val?.$elm; // $(SESSION_OBJ[SESSION_ID].root_element).find(`[xu-ui-id=${queue_obj.paramsP.elem_key}]`)
+
+        if (!$elm?.length) {
+          return func.UI.worker.delete_job(SESSION_ID, queue_obj.job_num);
+        }
+
+        // $elm.empty();
+
+        $.each($elm.children(), (key, val) => {
+          if (!$(val)?.data()?.xuData) return true;
+
+          if ($(val).data().xuData.nodeid === queue_obj?.paramsP?.xu_for_item_id) {
+            $(val).remove();
+          }
+        });
+
+        let _data = queue_obj.paramsP.elem_val.$elm.data();
+        const node_to_render = _data.xuData.node_org.children?.find((e) => e.id === queue_obj?.paramsP?.xu_for_item_id);
+        await func.UI.screen.render_ui_tree(queue_obj.paramsP.SESSION_ID, queue_obj.paramsP.elem_val.$elm, node_to_render, null, _data.xuData.paramsP, queue_obj.jobNoP, null, _data.xuData.key, null, _data.xuData.parent_node, null, _data.xuData.$root_container);
+      } catch (error) {}
+      return func.UI.worker.delete_job(SESSION_ID, queue_obj.job_num);
+    },
+    render_viewport: async function () {
+      const { nodeP, $div, parent_infoP, $root_container, jobNoP, is_skeleton, paramsP, $container } = queue_obj?.paramsP || {};
+      if (nodeP?.children?.length && !$div.children().length) {
+        $div.removeClass('skeleton');
+        for await (const [key, val] of Object.entries(nodeP.children)) {
+          const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $div, nodeP.children[key], parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, nodeP, null, $root_container);
+        }
+        $div[0].style.removeProperty('height');
+        $div.data().xuData.viewport_height = $div.height();
+
+        // set initial default height for all children
+        const parent_id = $div.parent().attr('xu-ui-id');
+        if (!UI_WORKER_OBJ.viewport_height_set_ids.includes(parent_id)) {
+          UI_WORKER_OBJ.viewport_height_set_ids.push(parent_id);
+          func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'set_viewport_height', { $div, height: $div.height() }, null, null, paramsP.dsSessionP);
+        }
+      }
+
+      return func.UI.worker.delete_job(SESSION_ID, queue_obj.job_num);
+    },
+    set_viewport_height: async function () {
+      const { $div, height } = queue_obj?.paramsP || {};
+
+      $.each($div.parent().children(), function (key, elm) {
+        if (!$(elm)[0].style.height && !$(elm).children().length) {
+          $(elm).css('height', height);
+        }
+      });
+
+      return func.UI.worker.delete_job(SESSION_ID, queue_obj.job_num);
+    },
+  };
+
+  return await fx[queue_obj.functionP]();
+};
+func.UI.worker.find_job_index = function (SESSION_ID, jobNoP) {
+  var ret = null;
+  if (!UI_WORKER_OBJ) return ret;
+  for (let [key, val] of Object.entries(UI_WORKER_OBJ.jobs)) {
+    if (val && val.job_num == jobNoP) {
+      ret = Number(key);
+      break;
+    }
+  }
+  return ret;
+};
+
+func.UI.ds_garbage_collector = function (SESSION_ID = Object.keys(SESSION_OBJ)[0], re_check) {
+  let _session = SESSION_OBJ[SESSION_ID];
+
+  const _data_system = _session?.DS_GLB?.[0]?.data_system;
+  if (_data_system?.SYS_GLOBAL_BOL_AJAX_BUSY) return;
+  if (!_data_system?.SYS_GLOBAL_BOL_IDLE) return;
+
+  let abort;
+
+  for (const [dsP, _ds] of Object.entries(_session.DS_GLB)) {
+    if (_ds.stat === 'busy') {
+      abort = true;
+      break;
+    }
+  }
+
+  if (abort) {
+    return;
+  }
+
+  let ds_pending_to_delete = [],
+    ds_approve_to_delete = [];
+  const $elm = $('body').find('*');
+  for (const [dsP, _ds] of Object.entries(_session.DS_GLB)) {
+    if (!_ds.screen_params) continue;
+    let found;
+    $.each($elm, (key, val) => {
+      const _xuData = $(val).data().xuData;
+      if (!_xuData || !_xuData.paramsP) return true;
+      if (_xuData.paramsP.dsSessionP == dsP) {
+        found = true;
+        return false;
+      }
+    });
+    if (!found) {
+      ds_pending_to_delete.push(dsP);
+    }
+  }
+  // console.log(ds_pending_to_delete);
+
+  const sortedKeys = Object.keys(_session.DS_GLB).sort((a, b) => b.localeCompare(a));
+  sortedKeys.forEach((key) => {
+    const val = _session.DS_GLB[key];
+    if (!ds_pending_to_delete.includes(key) && typeof val.parentDataSourceNo !== 'undefined' && ds_pending_to_delete.includes(val.parentDataSourceNo.toString())) {
+      ds_pending_to_delete = ds_pending_to_delete.filter((item) => item !== val.parentDataSourceNo.toString());
+    }
+  });
+
+  // console.log(ds_pending_to_delete);
+  for (const val of ds_pending_to_delete) {
+    func.datasource.del(SESSION_ID, val);
+  }
+};
+func.UI.refs_garbage_collector = function (SESSION_ID = Object.keys(SESSION_OBJ)[0]) {
+  if (!_.isEmpty(SCREEN_BLOCKER_OBJ)) {
+    // let dom  to finish build
+    return;
+  }
+
+  let _session = SESSION_OBJ[SESSION_ID];
+  const _data_system = _session?.DS_GLB?.[0]?.data_system;
+
+  for (const [key, val] of Object.entries(_data_system?.SYS_GLOBAL_OBJ_REFS || {})) {
+    if (!$(`[xu-ui-id='${val.xu_ui_id}`)?.length && !$(`[xu-panel-wrapper-id='${val.xu_ui_id}`)?.length) {
+      delete _data_system.SYS_GLOBAL_OBJ_REFS[key];
+    }
+  }
+};
+
+func.UI.teleport_garbage_collector = function (SESSION_ID = Object.keys(SESSION_OBJ)[0]) {
+  if (!_.isEmpty(SCREEN_BLOCKER_OBJ)) {
+    // let dom  to finish build
+    return;
+  }
+
+  const $teleport_elements = $(`[xu-teleport-parent-id^='node-`);
+
+  $.each($teleport_elements, (key, val) => {
+    const xu_teleport_parent_id = $(val).attr('xu-teleport-parent-id');
+    if (!$(`[xu-ui-id='${xu_teleport_parent_id}`)?.length) {
+      $(val).remove();
+    }
+  });
+};
+
+func.UI.update_xu_ref = function (SESSION_ID, dsSessionP, ref_field_id, $elm) {
+  let ret;
+  const _session = SESSION_OBJ[SESSION_ID];
+  let _ds_0 = _session.DS_GLB[0];
+
+  const _ds = func.utils.clean_returned_datasource(SESSION_ID, dsSessionP);
+
+  let obj = { ds: _ds, data: {}, props: _ds.in_parameters || {} };
+  try {
+    const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
+    obj.data = _ds?.data_feed?.rows?.[row_idx];
+  } catch (error) {
+    // error normal if find_ROWID_idx fail
+  }
+  let SYS_GLOBAL_OBJ_REFS = _ds_0.data_system['SYS_GLOBAL_OBJ_REFS'];
+
+  if ($elm) {
+    const attributes = $elm?.data()?.xuData?.xuPanelProps || $elm?.data()?.xuData?.debug_info?.attribute_stat || {};
+    obj.attributes = attributes;
+    obj.xu_ui_id = $elm.attr('xu-ui-id');
+  }
+
+  if (!_.isEqual(SYS_GLOBAL_OBJ_REFS?.[ref_field_id] || {}, obj)) {
+    if (!SYS_GLOBAL_OBJ_REFS[ref_field_id]) {
+      SYS_GLOBAL_OBJ_REFS[ref_field_id] = {};
+    }
+    SYS_GLOBAL_OBJ_REFS[ref_field_id] = obj;
+    ret = true;
+  }
+
+  return ret;
+};
+
+func.UI.find_field_in_progUi_attributes = function (progUi, field_id, prop, tag_name) {
+  let elm_nodes = [];
+  const iterate_progUi = function (node) {
+    for (let item of node) {
+      if (!tag_name || item.tagName === tag_name) {
+        if (prop) {
+          if (!_.isEmpty(item.attributes)) {
+            for (const [attr, val] of Object.entries(item.attributes)) {
+              if (attr === `xu-exp:${prop}` || attr === prop) {
+                // found = val.includes('@' + field_id);
+                if (val.includes('@' + field_id)) {
+                  elm_nodes.push(item);
+                  break;
+                }
+              }
+            }
+          }
+        } else {
+          if (tag_name) {
+            elm_nodes.push(item);
+          }
+        }
+      }
+      // if (elm_node) break;
+
+      if (item.children) {
+        iterate_progUi(item.children);
+      }
+    }
+  };
+  iterate_progUi(progUi);
+  return elm_nodes;
+};
+ func.UI.screen = {};
 func.UI.screen.init = async function (SESSION_ID, prog_id, sourceScreenP, callingDataSource_objP, $callingContainerP, triggerIdP, rowIdP, jobNoP, is_panelP, parameters_obj_inP, source_functionP, call_screen_propertiesP, refreshed_ds, parameters_raw_obj) {
   if (!prog_id) return console.error('program is empty');
   let screen_ret = await func.utils.get_screen_obj(SESSION_ID, prog_id);