@xuda.io/runtime-bundle 1.0.1258 → 1.0.1259

package/js/xuda-runtime-bundle.js

@@ -34529,150 +34529,150 @@ const generate_xu_ui_id = async function (SESSION_ID, nodeP, $container, paramsP
   return await func.common.fastHash(ui_id);
 };
 
-// func.UI.screen.create_container = async function (SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, classP, elem_propP, div_typeP, $appendToP, attr_str, is_placeholder) {
-//   // const _paramsP = _.cloneDeep(paramsP);
-//   const _paramsP = klona.klona(paramsP);
-//   var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
-//   var $appendTo = $container;
-//   if ($appendToP) $appendTo = $appendToP;
-//   if (!$appendTo || !$appendTo.length) return null; // screen closed or not exist abort build
-//   var div = 'div';
-//   if (div_typeP) div = div_typeP;
-//   var items = [];
-//   if (nodeP.children)
-//     items = nodeP.children.map(function (val) {
-//       return val.xu_tree_id || val.id;
-//     });
-//   var currentRecordId = $container?.data?.()?.xuData?.recordid || (_ds ? _ds.currentRecordId : '');
-//   // var xu_id = (glb.screen_num++).toString();
-//   // xu_id = xu_id += '_' + currentRecordId;
+func.UI.screen.create_container = async function (SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, classP, elem_propP, div_typeP, $appendToP, attr_str, is_placeholder) {
+  // const _paramsP = _.cloneDeep(paramsP);
+  const _paramsP = klona.klona(paramsP);
+  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
+  var $appendTo = $container;
+  if ($appendToP) $appendTo = $appendToP;
+  if (!$appendTo || !$appendTo.length) return null; // screen closed or not exist abort build
+  var div = 'div';
+  if (div_typeP) div = div_typeP;
+  var items = [];
+  if (nodeP.children)
+    items = nodeP.children.map(function (val) {
+      return val.xu_tree_id || val.id;
+    });
+  var currentRecordId = $container?.data?.()?.xuData?.recordid || (_ds ? _ds.currentRecordId : '');
+  // var xu_id = (glb.screen_num++).toString();
+  // xu_id = xu_id += '_' + currentRecordId;
 
-//   try {
-//     const key_path = `${$container?.data()?.xuData?.key_path || '0'}-${keyP || '0'}`;
-//     const elem_key = `${nodeP.xu_tree_id || nodeP.id}-${key_path}-${currentRecordId}`;
-//     // let ui_id = `${nodeP.id}-${elem_key}-${_paramsP?.dsSessionP?.toString() || ''}`; //nodeP.xu_tree_id ||
-
-//     /////////////////////////////////
-
-//     var $div;
-
-//     if (div === 'svg') {
-//       const draw_svg = function (element) {
-//         const get_tag_str = function (element, prop, val) {
-//           let class_str = '';
-//           let attr_str = '';
-//           for (const [key, val] of Object.entries(prop)) {
-//             if (key.substr(0, 2) !== 'xu') {
-//               attr_str += ` ${key}="${val}" `;
-//             }
-//           }
-//           if (element === 'svg') {
-//             return `<${element}  ${attr_str} > `;
-//           }
-//           let ret = '';
-//           if (val?.children?.length) {
-//             ret = iterate_svg(val);
-//           }
+  try {
+    const key_path = `${$container?.data()?.xuData?.key_path || '0'}-${keyP || '0'}`;
+    const elem_key = `${nodeP.xu_tree_id || nodeP.id}-${key_path}-${currentRecordId}`;
+    // let ui_id = `${nodeP.id}-${elem_key}-${_paramsP?.dsSessionP?.toString() || ''}`; //nodeP.xu_tree_id ||
 
-//           return `<${element} ${class_str} ${attr_str} > ${ret} </${element}>`;
-//         };
-//         let svg_str = get_tag_str(element, prop);
-//         let inner_str = '';
-//         const iterate_svg = function (node) {
-//           let ret = '';
-//           if (node.children) {
-//             for (let val of node.children) {
-//               let prop = val.attributes;
-//               ret += get_tag_str(val.tagName, prop, val);
-//             }
-//           }
-//           return ret;
-//         };
-//         inner_str = iterate_svg(nodeP);
+    /////////////////////////////////
 
-//         $div = $(svg_str + inner_str + '</svg>').appendTo($appendTo);
-//       };
+    var $div;
 
-//       draw_svg(div_typeP);
-//     } else {
-//       $div = $(`<${div} ${attr_str ? attr_str : ''}>`);
-//     }
+    if (div === 'svg') {
+      const draw_svg = function (element) {
+        const get_tag_str = function (element, prop, val) {
+          let class_str = '';
+          let attr_str = '';
+          for (const [key, val] of Object.entries(prop)) {
+            if (key.substr(0, 2) !== 'xu') {
+              attr_str += ` ${key}="${val}" `;
+            }
+          }
+          if (element === 'svg') {
+            return `<${element}  ${attr_str} > `;
+          }
+          let ret = '';
+          if (val?.children?.length) {
+            ret = iterate_svg(val);
+          }
 
-//     // // Returns a 32-bit unsigned integer hash of a string (FNV-1a)
-//     // function hash32(str) {
-//     //   let h = 0x811c9dc5; // FNV offset basis
-//     //   for (let i = 0; i < str.length; i++) {
-//     //     h ^= str.charCodeAt(i);
-//     //     // multiply by FNV prime (2^24 + 2^8 + 0x93) with 32-bit overflow
-//     //     h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
-//     //   }
-//     //   // Convert to unsigned 32-bit
-//     //   return h >>> 0;
-//     // }
+          return `<${element} ${class_str} ${attr_str} > ${ret} </${element}>`;
+        };
+        let svg_str = get_tag_str(element, prop);
+        let inner_str = '';
+        const iterate_svg = function (node) {
+          let ret = '';
+          if (node.children) {
+            for (let val of node.children) {
+              let prop = val.attributes;
+              ret += get_tag_str(val.tagName, prop, val);
+            }
+          }
+          return ret;
+        };
+        inner_str = iterate_svg(nodeP);
 
-//     // function hash32hex(str) {
-//     //   return (hash32(str) >>> 0).toString(16).padStart(8, '0');
-//     // }
+        $div = $(svg_str + inner_str + '</svg>').appendTo($appendTo);
+      };
 
-//     // const new_ui_id = hash32hex(ui_id);
-//     // const new_ui_id = await func.common.sha256(ui_id);
-//     const new_ui_id = await generate_xu_ui_id(SESSION_ID, nodeP, $container, paramsP, keyP);
-
-//     $div
-//       .attr('xu-ui-id', new_ui_id)
-//       // .attr('xu-node-id', nodeP.id)
-//       .data({
-//         xuData: {
-//           prog_id: _paramsP.prog_id,
-//           nodeid: nodeP.id,
-//           ui_type: nodeP.tagName,
-//           // xu_id,
-//           recordid: currentRecordId,
-//           paramsP: _paramsP,
-//           key: keyP,
-//           key_path, //:($container?.data()?.xuData?.key || "0") + "-" + (keyP || "0"),
-//           screenId: _paramsP.screenId,
-//           parent_container: $container?.attr('id'),
-//           elem_key,
-//           properties: prop,
-//           node: nodeP,
-//           node_org: _.cloneDeep(nodeP),
-//           is_panelP: _paramsP.is_panelP,
-//           ui_id: new_ui_id,
-//           elem_prop: elem_propP,
-//           debug_info: {
-//             id: nodeP.id,
-//             parent_id: $container?.data()?.xuData?.ui_id,
-//             items: items,
-//           },
-//           parent_node: parent_nodeP,
-//           currentRecordId: currentRecordId,
-//           $root_container: $root_container,
-//           parent_element_ui_id: $container?.data()?.xuData?.ui_id,
-//         },
-//         xuAttributes: {},
-//       });
-//     if (is_placeholder) {
-//       $div.addClass('display_none');
-//     }
+      draw_svg(div_typeP);
+    } else {
+      $div = $(`<${div} ${attr_str ? attr_str : ''}>`);
+    }
 
-//     if (div_typeP !== 'svg') {
-//       $div.appendTo($appendTo);
-//     }
-//   } catch (e) {
-//     console.error(e);
-//   }
+    // // Returns a 32-bit unsigned integer hash of a string (FNV-1a)
+    // function hash32(str) {
+    //   let h = 0x811c9dc5; // FNV offset basis
+    //   for (let i = 0; i < str.length; i++) {
+    //     h ^= str.charCodeAt(i);
+    //     // multiply by FNV prime (2^24 + 2^8 + 0x93) with 32-bit overflow
+    //     h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
+    //   }
+    //   // Convert to unsigned 32-bit
+    //   return h >>> 0;
+    // }
 
-//   if (parent_infoP?.iterate_info) {
-//     $div.data().xuData.iterate_info = parent_infoP.iterate_info;
-//   }
+    // function hash32hex(str) {
+    //   return (hash32(str) >>> 0).toString(16).padStart(8, '0');
+    // }
 
-//   if (classP) $div.addClass(classP);
+    // const new_ui_id = hash32hex(ui_id);
+    // const new_ui_id = await func.common.sha256(ui_id);
+    const new_ui_id = await generate_xu_ui_id(SESSION_ID, nodeP, $container, paramsP, keyP);
 
-//   return $div;
-// };
+    $div
+      .attr('xu-ui-id', new_ui_id)
+      // .attr('xu-node-id', nodeP.id)
+      .data({
+        xuData: {
+          prog_id: _paramsP.prog_id,
+          nodeid: nodeP.id,
+          ui_type: nodeP.tagName,
+          // xu_id,
+          recordid: currentRecordId,
+          paramsP: _paramsP,
+          key: keyP,
+          key_path, //:($container?.data()?.xuData?.key || "0") + "-" + (keyP || "0"),
+          screenId: _paramsP.screenId,
+          parent_container: $container?.attr('id'),
+          elem_key,
+          properties: prop,
+          node: nodeP,
+          node_org: _.cloneDeep(nodeP),
+          is_panelP: _paramsP.is_panelP,
+          ui_id: new_ui_id,
+          elem_prop: elem_propP,
+          debug_info: {
+            id: nodeP.id,
+            parent_id: $container?.data()?.xuData?.ui_id,
+            items: items,
+          },
+          parent_node: parent_nodeP,
+          currentRecordId: currentRecordId,
+          $root_container: $root_container,
+          parent_element_ui_id: $container?.data()?.xuData?.ui_id,
+        },
+        xuAttributes: {},
+      });
+    if (is_placeholder) {
+      $div.addClass('display_none');
+    }
 
-func.UI.screen.create_container = async function (SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, classP, elem_propP, div_typeP, $appendToP, attr_str, is_placeholder) {
+    if (div_typeP !== 'svg') {
+      $div.appendTo($appendTo);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+
+  if (parent_infoP?.iterate_info) {
+    $div.data().xuData.iterate_info = parent_infoP.iterate_info;
+  }
+
+  if (classP) $div.addClass(classP);
+
+  return $div;
+};
+
+func.UI.screen.create_container_bad = async function (SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, classP, elem_propP, div_typeP, $appendToP, attr_str, is_placeholder) {
   const _paramsP = klona.klona(paramsP);
   const _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
   const $appendTo = $appendToP || $container;
@@ -34979,1171 +34979,1171 @@ func.UI.screen.screen_loading_done = async function (SESSION_ID, paramsP, $div,
   return $div;
 };
 
-// func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $root_container) {
-//   if (!is_skeleton) {
-//     var _session = SESSION_OBJ[SESSION_ID];
-//     var _ds = _session.DS_GLB[paramsP.dsSessionP];
-//   }
-//   var prop;
-//   try {
-//     prop = nodeP.attributes;
-//   } catch (error) {
-//     // debugger;
-//   }
-
-//   ///////////
-//   var is_mobile = glb.MOBILE_ARR.includes(paramsP.screenInfo.properties?.menuType) ? true : false;
+func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $root_container) {
+  if (!is_skeleton) {
+    var _session = SESSION_OBJ[SESSION_ID];
+    var _ds = _session.DS_GLB[paramsP.dsSessionP];
+  }
+  var prop;
+  try {
+    prop = nodeP.attributes;
+  } catch (error) {
+    // debugger;
+  }
 
-//   const get_element_info = function () {
-//     var ret = {};
-//     let currentRecordId = _ds?.currentRecordId || '';
+  ///////////
+  var is_mobile = glb.MOBILE_ARR.includes(paramsP.screenInfo.properties?.menuType) ? true : false;
 
-//     let $div = func.UI.utils.find_in_element_data('xuData', $container.parent(), 'nodeid', nodeP.id);
+  const get_element_info = function () {
+    var ret = {};
+    let currentRecordId = _ds?.currentRecordId || '';
 
-//     $.each($div, function (key, val) {
-//       if ($(val)?.data().xuData?.recordid === currentRecordId && $(val)?.data().xuData?.key === keyP && $(val)?.prop('tagName') !== 'XURENDER') {
-//         ret = {
-//           div: $div,
-//         };
-//       }
-//     });
+    let $div = func.UI.utils.find_in_element_data('xuData', $container.parent(), 'nodeid', nodeP.id);
 
-//     return ret;
-//   };
+    $.each($div, function (key, val) {
+      if ($(val)?.data().xuData?.recordid === currentRecordId && $(val)?.data().xuData?.key === keyP && $(val)?.prop('tagName') !== 'XURENDER') {
+        ret = {
+          div: $div,
+        };
+      }
+    });
 
-//   const init = async function () {
-//     var ret = true;
-//     if (!nodeP) ret = false;
-//     return ret;
-//   };
-//   const debug = function (is_errorP, error_descP) {
-//     func.utils.debug.log(SESSION_ID, paramsP.prog_id + '_' + nodeP.id_org + '_ui_prop', {
-//       module: 'gui',
-//       action: 'init',
-//       prop: nodeP.id,
-//       details: error_descP,
-//       result: null,
-//       error: is_errorP,
-//       source: _ds?.tree_obj?.menuName || '',
-//       fields: null,
-//       type: null,
-//       prog_id: paramsP.prog_id,
-//       dsSession: null,
-//     });
-//   };
+    return ret;
+  };
 
-//   const open_modal = async function ($div) {
-//     const modal_id = 'app_modal-' + paramsP.dsSessionP.toString();
-//     var xu_modal_controller = document.querySelector('xu-modal-controller');
-//     if (!xu_modal_controller) {
-//       func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
-//       xu_modal_controller = document.querySelector('xu-modal-controller');
-//     }
+  const init = async function () {
+    var ret = true;
+    if (!nodeP) ret = false;
+    return ret;
+  };
+  const debug = function (is_errorP, error_descP) {
+    func.utils.debug.log(SESSION_ID, paramsP.prog_id + '_' + nodeP.id_org + '_ui_prop', {
+      module: 'gui',
+      action: 'init',
+      prop: nodeP.id,
+      details: error_descP,
+      result: null,
+      error: is_errorP,
+      source: _ds?.tree_obj?.menuName || '',
+      fields: null,
+      type: null,
+      prog_id: paramsP.prog_id,
+      dsSession: null,
+    });
+  };
 
-//     var controller_params = $(xu_modal_controller).data('xuControllerParams');
+  const open_modal = async function ($div) {
+    const modal_id = 'app_modal-' + paramsP.dsSessionP.toString();
+    var xu_modal_controller = document.querySelector('xu-modal-controller');
+    if (!xu_modal_controller) {
+      func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
+      xu_modal_controller = document.querySelector('xu-modal-controller');
+    }
 
-//     if (!controller_params) {
-//       controller_params = {};
-//     }
+    var controller_params = $(xu_modal_controller).data('xuControllerParams');
 
-//     var params = {
-//       menuTitle: paramsP.screenInfo.properties?.menuTitle,
-//       screenId: paramsP.screenId,
-//       $dialogDiv: $div.children(),
-//       $container: $container,
-//       dsSession: paramsP.dsSessionP,
-//     };
+    if (!controller_params) {
+      controller_params = {};
+    }
 
-//     controller_params[modal_id] = params;
+    var params = {
+      menuTitle: paramsP.screenInfo.properties?.menuTitle,
+      screenId: paramsP.screenId,
+      $dialogDiv: $div.children(),
+      $container: $container,
+      dsSession: paramsP.dsSessionP,
+    };
 
-//     $(xu_modal_controller).data('xuControllerParams', controller_params);
-//     const modalController = await new UI_FRAMEWORK_PLUGIN.modal();
+    controller_params[modal_id] = params;
 
-//     if (!APP_MODAL_OBJ[modal_id]) {
-//       const modal = await modalController.create(SESSION_ID, modal_id, paramsP.screenInfo, close_modal);
-//       APP_MODAL_OBJ[modal_id] = modal;
-//     } else {
-//       $(modal_id).empty();
-//     }
-//     await modalController.init(SESSION_ID, modal_id);
+    $(xu_modal_controller).data('xuControllerParams', controller_params);
+    const modalController = await new UI_FRAMEWORK_PLUGIN.modal();
 
-//     return $div;
-//   };
+    if (!APP_MODAL_OBJ[modal_id]) {
+      const modal = await modalController.create(SESSION_ID, modal_id, paramsP.screenInfo, close_modal);
+      APP_MODAL_OBJ[modal_id] = modal;
+    } else {
+      $(modal_id).empty();
+    }
+    await modalController.init(SESSION_ID, modal_id);
 
-//   const close_modal = async function (modal_id) {
-//     delete APP_MODAL_OBJ[modal_id];
-//     const xu_modal_controller = document.querySelector('xu-modal-controller');
-//     var params = $(xu_modal_controller).data().xuControllerParams[modal_id];
-//     if (params && params.$container) {
-//       await func.UI.screen.validate_exit_events(SESSION_ID, params.$container.data().xuData.paramsP, null);
-//       func.datasource.clean_all(SESSION_ID, params.dsSession);
-//     }
-//   };
+    return $div;
+  };
 
-//   const close_all_modals = function () {
-//     $.each(APP_MODAL_OBJ, function (key, val) {
-//       if (val) {
-//         // close_modal(key);
-//         UI_FRAMEWORK_PLUGIN.modal.close(key);
-//       }
-//     });
-//   };
+  const close_modal = async function (modal_id) {
+    delete APP_MODAL_OBJ[modal_id];
+    const xu_modal_controller = document.querySelector('xu-modal-controller');
+    var params = $(xu_modal_controller).data().xuControllerParams[modal_id];
+    if (params && params.$container) {
+      await func.UI.screen.validate_exit_events(SESSION_ID, params.$container.data().xuData.paramsP, null);
+      func.datasource.clean_all(SESSION_ID, params.dsSession);
+    }
+  };
 
-//   const open_popover = async function ($div) {
-//     const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
+  const close_all_modals = function () {
+    $.each(APP_MODAL_OBJ, function (key, val) {
+      if (val) {
+        // close_modal(key);
+        UI_FRAMEWORK_PLUGIN.modal.close(key);
+      }
+    });
+  };
 
-//     $(xu_popover_controller).data('xuControllerParams', {
-//       menuTitle: paramsP.screenInfo.properties?.menuTitle,
-//       screenId: paramsP.screenId,
-//       $dialogDiv: $div.children(),
-//       $container: $container,
-//     });
-//     const popover = new UI_FRAMEWORK_PLUGIN.popover(
-//       SESSION_ID,
-//       // ELEMENT_CLICK_EVENT,
-//       // props
-//     );
-//     await popover.open(SESSION_ID);
-//     CURRENT_APP_POPOVER = popover;
-
-//     return;
-//     popoverController
-//       .create({
-//         component: 'xu-popover-content-' + SESSION_ID,
-//         event: ELEMENT_CLICK_EVENT,
-//         translucent: true,
-//       })
-//       .then((modal) => {
-//         modal.present().then(() => {
-//           CURRENT_APP_POPOVER = modal;
+  const open_popover = async function ($div) {
+    const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
 
-//           if (callbackP) callbackP($div);
-//         });
-//       });
-//   };
-//   const iterate_child = async function ($divP, nodeP, parent_infoP, $root_container, before_record_function) {
-//     if (!is_mobile && nodeP.busy) return;
-//     nodeP.busy = true;
-//     const done = async function ($divP) {
-//       setTimeout(function () {
-//         nodeP.busy = false;
-//       }, 1000);
-
-//       return $divP;
-//     };
-//     if (!nodeP || !nodeP.children) {
-//       return await done($divP);
-//     }
+    $(xu_popover_controller).data('xuControllerParams', {
+      menuTitle: paramsP.screenInfo.properties?.menuTitle,
+      screenId: paramsP.screenId,
+      $dialogDiv: $div.children(),
+      $container: $container,
+    });
+    const popover = new UI_FRAMEWORK_PLUGIN.popover(
+      SESSION_ID,
+      // ELEMENT_CLICK_EVENT,
+      // props
+    );
+    await popover.open(SESSION_ID);
+    CURRENT_APP_POPOVER = popover;
 
-//     if (before_record_function) {
-//       await before_record_function();
-//     }
-//     if (nodeP?.children?.length) {
-//       let node_promises = [];
-//       for (const [key, val] of Object.entries(nodeP.children)) {
-//         node_promises.push(
-//           new Promise(async (resolve, reject) => {
-//             const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $divP, nodeP.children[key], parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, nodeP, null, $root_container);
-
-//             resolve();
-//           }),
-//         );
-//       }
-//       await Promise.all(node_promises);
-//     }
-//     return await done($divP);
-//   };
+    return;
+    popoverController
+      .create({
+        component: 'xu-popover-content-' + SESSION_ID,
+        event: ELEMENT_CLICK_EVENT,
+        translucent: true,
+      })
+      .then((modal) => {
+        modal.present().then(() => {
+          CURRENT_APP_POPOVER = modal;
 
-//   //   const iterate_child = async function ($divP, nodeP, parent_infoP, $root_container, before_record_function) {
-//   //   if (!is_mobile && nodeP.busy) return;
-//   //   nodeP.busy = true;
-//   //   const done = async function ($divP) {
-//   //     setTimeout(function () {
-//   //       nodeP.busy = false;
-//   //     }, 1000);
+          if (callbackP) callbackP($div);
+        });
+      });
+  };
+  const iterate_child = async function ($divP, nodeP, parent_infoP, $root_container, before_record_function) {
+    if (!is_mobile && nodeP.busy) return;
+    nodeP.busy = true;
+    const done = async function ($divP) {
+      setTimeout(function () {
+        nodeP.busy = false;
+      }, 1000);
 
-//   //     return $divP;
-//   //   };
-//   //   if (!nodeP || !nodeP.children) {
-//   //     return await done($divP);
-//   //   }
-
-//   //   if (before_record_function) {
-//   //     await before_record_function();
-//   //   }
-//   //   if (nodeP?.children?.length) {
-//   //     for await (const [key, val] of Object.entries(nodeP.children)) {
-//   //       const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $divP, nodeP.children[key], parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, nodeP, null, $root_container);
-//   //     }
-//   //   }
-//   //   return await done($divP);
-//   // };
+      return $divP;
+    };
+    if (!nodeP || !nodeP.children) {
+      return await done($divP);
+    }
 
-//   const _$ = function ($elm) {
-//     try {
-//       const id = $elm.attr('xu-ui-id');
-//       if (!id || !glb.DEBUG_MODE) return $elm;
-//       const $el = $(`[xu-ui-id="${id}"]`);
+    if (before_record_function) {
+      await before_record_function();
+    }
+    if (nodeP?.children?.length) {
+      let node_promises = [];
+      for (const [key, val] of Object.entries(nodeP.children)) {
+        node_promises.push(
+          new Promise(async (resolve, reject) => {
+            const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $divP, nodeP.children[key], parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, nodeP, null, $root_container);
 
-//       if ($el.length > 1) {
-//         console.warn('Multiple elements for xu-ui-id: ' + id, $el);
-//       }
+            resolve();
+          }),
+        );
+      }
+      await Promise.all(node_promises);
+    }
+    return await done($divP);
+  };
 
-//       return $($el[0]);
-//     } catch (e) {
-//       console.error(e);
-//     }
-//   };
+  //   const iterate_child = async function ($divP, nodeP, parent_infoP, $root_container, before_record_function) {
+  //   if (!is_mobile && nodeP.busy) return;
+  //   nodeP.busy = true;
+  //   const done = async function ($divP) {
+  //     setTimeout(function () {
+  //       nodeP.busy = false;
+  //     }, 1000);
+
+  //     return $divP;
+  //   };
+  //   if (!nodeP || !nodeP.children) {
+  //     return await done($divP);
+  //   }
 
-//   const hover_in = function ($div, e) {
-//     if (is_skeleton || (e && (EXP_BUSY || UI_WORKER_OBJ.jobs.length))) return;
-//     CLIENT_ACTIVITY_TS = Date.now();
-//     if (_$($container)?.data()?.xuData?.debug_info) _$($container).data().xuData.debug_info.hover_item = $div.attr('xu-ui-id');
-//     if (!_ds) return;
-//     ///////// SET Attributes///////////
-//     let attributes = {};
-//     $.each($div[0].attributes, function (index, attr) {
-//       attributes[attr.name] = attr.value;
-//     });
+  //   if (before_record_function) {
+  //     await before_record_function();
+  //   }
+  //   if (nodeP?.children?.length) {
+  //     for await (const [key, val] of Object.entries(nodeP.children)) {
+  //       const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $divP, nodeP.children[key], parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, nodeP, null, $root_container);
+  //     }
+  //   }
+  //   return await done($divP);
+  // };
 
-//     _session.DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = attributes;
-//     //////////////////////////////////
-//     if (!$div.data()?.xuData) return;
-//     const _iterate_info = $div.data().xuData.iterate_info;
-//     if (_iterate_info) {
-//       if (_iterate_info.is_key_dynamic_field) {
-//         _ds.dynamic_fields[_iterate_info.iterator_key].value = _iterate_info._key;
-//       } else {
-//         try {
-//           const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
-//           _ds.data_feed.rows[row_idx][_iterate_info.iterator_key] = _iterate_info._key;
-//         } catch (err) {
-//           console.error(err);
-//         }
-//       }
+  const _$ = function ($elm) {
+    try {
+      const id = $elm.attr('xu-ui-id');
+      if (!id || !glb.DEBUG_MODE) return $elm;
+      const $el = $(`[xu-ui-id="${id}"]`);
 
-//       if (_iterate_info.is_val_dynamic_field) {
-//         _ds.dynamic_fields[_iterate_info.iterator_val].value = _iterate_info._val;
-//       } else {
-//         try {
-//           const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
-//           _ds.data_feed.rows[row_idx][_iterate_info.iterator_val] = _iterate_info._val;
-//         } catch (err) {
-//           console.error(err);
-//         }
-//       }
-//     }
+      if ($el.length > 1) {
+        console.warn('Multiple elements for xu-ui-id: ' + id, $el);
+      }
 
-//     if ($div && _$($div) && _ds && paramsP.renderType === 'grid') {
-//       func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'update_datasource', { currentRecordId: _$($div).data().xuData.currentRecordId }, null, null, paramsP.dsSessionP);
-//     }
+      return $($el[0]);
+    } catch (e) {
+      console.error(e);
+    }
+  };
 
-//     const set_value = function (field_id, value) {
-//       var currentRecordId = _$($div).data().xuData.currentRecordId;
+  const hover_in = function ($div, e) {
+    if (is_skeleton || (e && (EXP_BUSY || UI_WORKER_OBJ.jobs.length))) return;
+    CLIENT_ACTIVITY_TS = Date.now();
+    if (_$($container)?.data()?.xuData?.debug_info) _$($container).data().xuData.debug_info.hover_item = $div.attr('xu-ui-id');
+    if (!_ds) return;
+    ///////// SET Attributes///////////
+    let attributes = {};
+    $.each($div[0].attributes, function (index, attr) {
+      attributes[attr.name] = attr.value;
+    });
 
-//       func.UI.worker.add_to_queue(
-//         SESSION_ID,
-//         'gui event',
-//         'update_datasource',
-//         {
-//           currentRecordId,
-//           field_id,
-//           field_value: value,
-//         },
-//         null,
-//         null,
-//         paramsP.dsSessionP,
-//       );
-//     };
+    _session.DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = attributes;
+    //////////////////////////////////
+    if (!$div.data()?.xuData) return;
+    const _iterate_info = $div.data().xuData.iterate_info;
+    if (_iterate_info) {
+      if (_iterate_info.is_key_dynamic_field) {
+        _ds.dynamic_fields[_iterate_info.iterator_key].value = _iterate_info._key;
+      } else {
+        try {
+          const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
+          _ds.data_feed.rows[row_idx][_iterate_info.iterator_key] = _iterate_info._key;
+        } catch (err) {
+          console.error(err);
+        }
+      }
 
-//     if ($div?.data()?.iterate_info) {
-//       var data = $div.data().xuData.iterate_info;
-//       if (data.iterator_key) {
-//         set_value(data.iterator_key, data._key);
-//       }
-//       if (data.iterator_val) {
-//         set_value(data.iterator_val, data._val);
-//       }
-//     }
-//   };
-//   const hover_out = function () {
-//     if (is_skeleton) return;
+      if (_iterate_info.is_val_dynamic_field) {
+        _ds.dynamic_fields[_iterate_info.iterator_val].value = _iterate_info._val;
+      } else {
+        try {
+          const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
+          _ds.data_feed.rows[row_idx][_iterate_info.iterator_val] = _iterate_info._val;
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    }
 
-//     CLIENT_ACTIVITY_TS = Date.now();
-//     if (_$($container)?.data()?.xuData?.debug_info) {
-//       _$($container).data().xuData.debug_info.hover_item = null;
-//     }
-//     if (_ds?.data_system) {
-//       SESSION_OBJ[SESSION_ID].DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = {};
-//     }
-//   };
-//   const render_screen_type = async function ($div) {
-//     const set_call_screen_properties_values = async function (ui_framework) {
-//       params.properties = {};
-//       const get_values = async function (property) {
-//         var property_value = paramsP?.screenInfo?.properties?.[property] || paramsP?.screenInfo?.properties?.frameworkProperties?.[property];
-//         if (paramsP?.call_screen_propertiesP) {
-//           if (paramsP.call_screen_propertiesP?.[property]) {
-//             property_value = paramsP.call_screen_propertiesP[property];
-//           }
-//           if (paramsP.call_screen_propertiesP[`xu-exp:${property}`]) {
-//             property_value = (await func.expression.get(SESSION_ID, paramsP.call_screen_propertiesP[`xu-exp:${property}`], paramsP.dsSessionP, property)).result;
-//           }
-//         }
-//         return property_value;
-//       };
-//       params.properties['name'] = await get_values('menuTitle');
-//       if (await ui_framework?.properties()) {
-//         for await (const [key, val] of Object.entries(await ui_framework.properties())) {
-//           params.properties[key] = await get_values(key);
-//         }
-//       }
-//     };
+    if ($div && _$($div) && _ds && paramsP.renderType === 'grid') {
+      func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'update_datasource', { currentRecordId: _$($div).data().xuData.currentRecordId }, null, null, paramsP.dsSessionP);
+    }
 
-//     var $div_content = $div.children();
+    const set_value = function (field_id, value) {
+      var currentRecordId = _$($div).data().xuData.currentRecordId;
 
-//     $.each($div_content, function (key, val) {
-//       if (!$(val)?.data()?.xuData?.parent_container) {
-//         return true;
-//       }
-//       $(val).data().xuData.parent_container = $div.data().xuData.parent_container;
-//     });
+      func.UI.worker.add_to_queue(
+        SESSION_ID,
+        'gui event',
+        'update_datasource',
+        {
+          currentRecordId,
+          field_id,
+          field_value: value,
+        },
+        null,
+        null,
+        paramsP.dsSessionP,
+      );
+    };
 
-//     let $ret = $div;
-//     var $nav = $(SESSION_OBJ[SESSION_ID].root_element).find('xu-nav');
-//     var params;
-//     switch (paramsP.screen_type) {
-//       case 'modal':
-//         const modal_id = 'app_modal-' + paramsP.dsSessionP.toString();
-//         var xu_modal_controller = document.querySelector('xu-modal-controller');
-//         if (!xu_modal_controller) {
-//           func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
-//           xu_modal_controller = document.querySelector('xu-modal-controller');
-//         }
+    if ($div?.data()?.iterate_info) {
+      var data = $div.data().xuData.iterate_info;
+      if (data.iterator_key) {
+        set_value(data.iterator_key, data._key);
+      }
+      if (data.iterator_val) {
+        set_value(data.iterator_val, data._val);
+      }
+    }
+  };
+  const hover_out = function () {
+    if (is_skeleton) return;
 
-//         var controller_params = $(xu_modal_controller).data('xuControllerParams');
+    CLIENT_ACTIVITY_TS = Date.now();
+    if (_$($container)?.data()?.xuData?.debug_info) {
+      _$($container).data().xuData.debug_info.hover_item = null;
+    }
+    if (_ds?.data_system) {
+      SESSION_OBJ[SESSION_ID].DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = {};
+    }
+  };
+  const render_screen_type = async function ($div) {
+    const set_call_screen_properties_values = async function (ui_framework) {
+      params.properties = {};
+      const get_values = async function (property) {
+        var property_value = paramsP?.screenInfo?.properties?.[property] || paramsP?.screenInfo?.properties?.frameworkProperties?.[property];
+        if (paramsP?.call_screen_propertiesP) {
+          if (paramsP.call_screen_propertiesP?.[property]) {
+            property_value = paramsP.call_screen_propertiesP[property];
+          }
+          if (paramsP.call_screen_propertiesP[`xu-exp:${property}`]) {
+            property_value = (await func.expression.get(SESSION_ID, paramsP.call_screen_propertiesP[`xu-exp:${property}`], paramsP.dsSessionP, property)).result;
+          }
+        }
+        return property_value;
+      };
+      params.properties['name'] = await get_values('menuTitle');
+      if (await ui_framework?.properties()) {
+        for await (const [key, val] of Object.entries(await ui_framework.properties())) {
+          params.properties[key] = await get_values(key);
+        }
+      }
+    };
 
-//         if (!controller_params) {
-//           controller_params = {};
-//         }
+    var $div_content = $div.children();
 
-//         params = {
-//           screenId: paramsP.screenId,
-//           $dialogDiv: $div.children(),
-//           $container: $container,
-//           dsSession: paramsP.dsSessionP,
-//           modal_id,
-//           screenInfo: paramsP.screenInfo,
-//           close_callback: close_modal,
-//           paramsP,
-//         };
+    $.each($div_content, function (key, val) {
+      if (!$(val)?.data()?.xuData?.parent_container) {
+        return true;
+      }
+      $(val).data().xuData.parent_container = $div.data().xuData.parent_container;
+    });
 
-//         controller_params[modal_id] = params;
+    let $ret = $div;
+    var $nav = $(SESSION_OBJ[SESSION_ID].root_element).find('xu-nav');
+    var params;
+    switch (paramsP.screen_type) {
+      case 'modal':
+        const modal_id = 'app_modal-' + paramsP.dsSessionP.toString();
+        var xu_modal_controller = document.querySelector('xu-modal-controller');
+        if (!xu_modal_controller) {
+          func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
+          xu_modal_controller = document.querySelector('xu-modal-controller');
+        }
 
-//         $(xu_modal_controller).data('xuControllerParams', controller_params);
-//         const modalController = await new UI_FRAMEWORK_PLUGIN.modal();
-//         await set_call_screen_properties_values(modalController);
-//         if (!APP_MODAL_OBJ[modal_id]) {
-//           const modal = await modalController.create(params);
+        var controller_params = $(xu_modal_controller).data('xuControllerParams');
 
-//           APP_MODAL_OBJ[modal_id] = modal;
-//         } else {
-//           $(modal_id).empty();
-//         }
+        if (!controller_params) {
+          controller_params = {};
+        }
 
-//         await modalController.init(params);
+        params = {
+          screenId: paramsP.screenId,
+          $dialogDiv: $div.children(),
+          $container: $container,
+          dsSession: paramsP.dsSessionP,
+          modal_id,
+          screenInfo: paramsP.screenInfo,
+          close_callback: close_modal,
+          paramsP,
+        };
 
-//         break;
+        controller_params[modal_id] = params;
 
-//       case 'popover':
-//         // open_popover($div);
+        $(xu_modal_controller).data('xuControllerParams', controller_params);
+        const modalController = await new UI_FRAMEWORK_PLUGIN.modal();
+        await set_call_screen_properties_values(modalController);
+        if (!APP_MODAL_OBJ[modal_id]) {
+          const modal = await modalController.create(params);
 
-//         const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
-//         params = {
-//           menuTitle: paramsP.screenInfo.properties?.menuTitle,
-//           screenId: paramsP.screenId,
-//           $dialogDiv: $div.children(),
-//           $container: $container,
-//         };
+          APP_MODAL_OBJ[modal_id] = modal;
+        } else {
+          $(modal_id).empty();
+        }
 
-//         $(xu_popover_controller).data('xuControllerParams', params);
-//         const popover = new UI_FRAMEWORK_PLUGIN.popover(SESSION_ID);
-//         await set_call_screen_properties_values(popover);
-//         await popover.open(params);
-//         CURRENT_APP_POPOVER = popover;
+        await modalController.init(params);
 
-//         func.UI.utils.screen_blocker(false, paramsP.prog_id + '_' + paramsP.sourceScreenP);
-//         break;
+        break;
 
-//       case 'page':
-//         const nav = $nav[0];
+      case 'popover':
+        // open_popover($div);
 
-//         params = {
-//           div: $div_content,
-//           name: paramsP.screenInfo.properties?.menuTitle,
-//           screenId: paramsP.screenId,
-//           $container: $container,
-//           dsSession: paramsP.dsSessionP,
-//           SESSION_ID,
-//           nav,
-//           paramsP,
-//         };
+        const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
+        params = {
+          menuTitle: paramsP.screenInfo.properties?.menuTitle,
+          screenId: paramsP.screenId,
+          $dialogDiv: $div.children(),
+          $container: $container,
+        };
 
-//         var component_name = 'xu-page-component-' + paramsP.dsSessionP;
-//         if (!$(nav).data().xuData.nav_params) {
-//           $(nav).data().xuData.nav_params = {};
-//         }
+        $(xu_popover_controller).data('xuControllerParams', params);
+        const popover = new UI_FRAMEWORK_PLUGIN.popover(SESSION_ID);
+        await set_call_screen_properties_values(popover);
+        await popover.open(params);
+        CURRENT_APP_POPOVER = popover;
 
-//         //restore validate
-//         if ($(nav)?.data()?.xuData?.params?.[paramsP.dsSessionP]) {
-//           params.$container.data().xuData.validate_screen_ready = $(nav).data().xuData.params[paramsP.dsSessionP].$container.data().xuData.validate_screen_ready;
-//         }
+        func.UI.utils.screen_blocker(false, paramsP.prog_id + '_' + paramsP.sourceScreenP);
+        break;
 
-//         if (!$(nav)?.data()?.xuData) return;
-//         $(nav).data().xuData.nav_params[paramsP.dsSessionP] = params;
-//         if (!$(component_name).length) {
-//           await func.UI.component.create_app_page_component(SESSION_ID, paramsP.dsSessionP);
-//           const page = new UI_FRAMEWORK_PLUGIN.page();
-//           await set_call_screen_properties_values(page);
-//           await page.create(params);
-//           await page.init(params);
-//           nav.push(component_name, { params });
-//         } else {
-//           debugger;
-//           $(component_name).empty();
-
-//           await UI_FRAMEWORK_PLUGIN.page(SESSION_ID, paramsP.dsSessionP);
-//         }
-//         $div.data().xuData.paramsP = $container.data().xuData.paramsP;
-//         break;
-
-//       case 'panel':
-//         $container.append($div_content);
-//         $ret = $container;
-//         break;
-
-//       default: // set data to nav to use in the component
-//         if ($nav && $nav.length) {
-//           // refresh made
-//         } else {
-//           $nav = $('<xu-nav>'); //.attr('xu-ui-id', SESSION_ID);
-//           $container.append($nav);
-//           func.UI.component.init_xu_nav($container, $nav);
-//         }
+      case 'page':
+        const nav = $nav[0];
 
-//         $nav.data().xuData.$div = $div_content;
+        params = {
+          div: $div_content,
+          name: paramsP.screenInfo.properties?.menuTitle,
+          screenId: paramsP.screenId,
+          $container: $container,
+          dsSession: paramsP.dsSessionP,
+          SESSION_ID,
+          nav,
+          paramsP,
+        };
 
-//         await $nav[0].setRoot('xu-root-component-' + SESSION_ID);
-//         $ret = $container;
-//         break;
-//     }
-//     return $ret;
-//   };
+        var component_name = 'xu-page-component-' + paramsP.dsSessionP;
+        if (!$(nav).data().xuData.nav_params) {
+          $(nav).data().xuData.nav_params = {};
+        }
 
-//   if (!(await init())) return;
-//   debug();
-//   const fx = {
-//     widget: async function () {
-//       var _session = SESSION_OBJ[SESSION_ID];
-
-//       var exist_elm_obj = get_element_info();
-//       var $div = exist_elm_obj.div;
-//       if (!exist_elm_obj.div) {
-//         $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, 'widget_wrapper', null, null, null, null);
-
-//         //////////////////////////
-
-//         let plugin_name = prop['xu-widget'],
-//           method = prop['xu-method'],
-//           dsP = paramsP.dsSessionP,
-//           propsP = prop,
-//           sourceP = 'widgets';
-
-//         // const set_SYS_GLOBAL_OBJ_WIDGET_INFO = async function (docP) {
-//         //   var obj = _.clone(docP);
-//         //   obj.date = await func.utils.get_dateTime(
-//         //     SESSION_ID,
-//         //     "SYS_DATE",
-//         //     docP.date
-//         //   );
-//         //   obj.time = await func.utils.get_dateTime(
-//         //     SESSION_ID,
-//         //     "SYS_TIME",
-//         //     docP.date
-//         //   );
-
-//         //   var datasource_changes = {
-//         //     [0]: {
-//         //       ["data_system"]: {
-//         //         ["SYS_GLOBAL_OBJ_WIDGET_INFO"]: obj,
-//         //       },
-//         //     },
-//         //   };
-//         //   await func.datasource.update(SESSION_ID, datasource_changes);
-//         // };
-//         const call_plugin_api = async function (plugin_nameP, dataP) {
-//           return await func.utils.call_plugin_api(SESSION_ID, plugin_nameP, dataP);
-//         };
-//         const report_error = function (descP, warn) {
-//           func.utils.debug.log(SESSION_ID, _session.DS_GLB[dsP].prog_id + '_' + _session.DS_GLB[dsP].callingMenuId, {
-//             module: 'widgets',
-//             action: 'Init',
-//             source: sourceP,
-//             prop: descP,
-//             details: descP,
-//             result: null,
-//             error: warn ? false : true,
-//             fields: null,
-//             type: 'widgets',
-//             prog_id: _session.DS_GLB[dsP].prog_id,
-//           });
-//         };
-//         const get_fields_data = async function (fields, props) {
-//           const report_error = function (descP, warn) {
-//             func.utils.debug.log(SESSION_ID, _session.DS_GLB[dsP].prog_id + '_' + _session.DS_GLB[dsP].callingMenuId, {
-//               module: 'widgets',
-//               action: 'Init',
-//               source: sourceP,
-//               prop: descP,
-//               details: descP,
-//               result: null,
-//               error: warn ? false : true,
-//               fields: null,
-//               type: 'widgets',
-//               prog_id: _session.DS_GLB[dsP].prog_id,
-//             });
-//           };
-//           const get_property_value = async function (fieldIdP, val) {
-//             if (!val) return;
-//             var value = fieldIdP in props ? props[fieldIdP] : typeof val.defaultValue === 'function' ? val?.defaultValue?.() : val?.defaultValue;
-//             if (val.render === 'eventId') {
-//               value = props?.[fieldIdP]?.event;
-//             }
+        //restore validate
+        if ($(nav)?.data()?.xuData?.params?.[paramsP.dsSessionP]) {
+          params.$container.data().xuData.validate_screen_ready = $(nav).data().xuData.params[paramsP.dsSessionP].$container.data().xuData.validate_screen_ready;
+        }
 
-//             if (props[`xu-exp:${fieldIdP}`]) {
-//               value = (await func.expression.get(SESSION_ID, props[`xu-exp:${fieldIdP}`], dsP, 'widget property')).result;
-//             }
+        if (!$(nav)?.data()?.xuData) return;
+        $(nav).data().xuData.nav_params[paramsP.dsSessionP] = params;
+        if (!$(component_name).length) {
+          await func.UI.component.create_app_page_component(SESSION_ID, paramsP.dsSessionP);
+          const page = new UI_FRAMEWORK_PLUGIN.page();
+          await set_call_screen_properties_values(page);
+          await page.create(params);
+          await page.init(params);
+          nav.push(component_name, { params });
+        } else {
+          debugger;
+          $(component_name).empty();
 
-//             return func.common.get_cast_val(
-//               SESSION_ID,
-//               'widgets',
-//               fieldIdP,
-//               val.type, //val.type !== "string" || val.type !== "number" ? "string" : val.type,
-//               value,
-//               null,
-//             );
-//           };
-//           var data_obj = {};
-//           var return_code = 1;
-//           // $.each(fields, function (key, val) {
-//           for await (const [key, val] of Object.entries(fields)) {
-//             data_obj[key] = await get_property_value(key, val);
-//             if (!data_obj[key] && val.mandatory) {
-//               return_code = -1;
-//               report_error(`${key} is a mandatory field.`);
-//               break;
-//             }
-//             // console.log(val);
-//           }
-//           for await (const key of ['xu-bind']) {
-//             data_obj[key] = await get_property_value(key, props[key]);
-//           }
+          await UI_FRAMEWORK_PLUGIN.page(SESSION_ID, paramsP.dsSessionP);
+        }
+        $div.data().xuData.paramsP = $container.data().xuData.paramsP;
+        break;
 
-//           return { code: return_code, data: data_obj };
-//         };
+      case 'panel':
+        $container.append($div_content);
+        $ret = $container;
+        break;
 
-//         const load_css_style = function () {
-//           const get_css_path = function (resource) {
-//             if (_session.worker_type === 'Dev') {
-//               return `../../plugins/${plugin_name}/${resource}`;
-//             }
-//             return `https://${_session.domain}/plugins/${plugin_name}/${APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest[resource].dist ? 'dist/' : ''}${resource}?gtp_token=${_session.gtp_token}&app_id=${_session.app_id}`;
-//           };
-//           let path = get_css_path('style.css');
-//           func.utils.load_css_on_demand(path);
-//         };
+      default: // set data to nav to use in the component
+        if ($nav && $nav.length) {
+          // refresh made
+        } else {
+          $nav = $('<xu-nav>'); //.attr('xu-ui-id', SESSION_ID);
+          $container.append($nav);
+          func.UI.component.init_xu_nav($container, $nav);
+        }
 
-//         const _plugin = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[plugin_name];
-//         const index = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`);
-//         const methods = index.methods;
-//         if (methods && !methods[method]) {
-//           return report_error('method not found');
-//         }
+        $nav.data().xuData.$div = $div_content;
 
-//         const fields_ret = await get_fields_data(methods[method].fields, propsP);
-//         if (fields_ret.code < 0) {
-//           return report_error(fields_ret.data);
-//         }
-//         const fields = fields_ret.data;
+        await $nav[0].setRoot('xu-root-component-' + SESSION_ID);
+        $ret = $container;
+        break;
+    }
+    return $ret;
+  };
 
-//         let exclude_attributes = [];
-//         for await (const [key, val] of Object.entries(propsP)) {
-//           if (typeof fields[key] !== 'undefined' || typeof fields[`xu-exp:${key}`] !== 'undefined') {
-//             exclude_attributes.push(key);
-//           }
-//         }
+  if (!(await init())) return;
+  debug();
+  const fx = {
+    widget: async function () {
+      var _session = SESSION_OBJ[SESSION_ID];
 
-//         let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true, exclude_attributes);
+      var exist_elm_obj = get_element_info();
+      var $div = exist_elm_obj.div;
+      if (!exist_elm_obj.div) {
+        $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, 'widget_wrapper', null, null, null, null);
 
-//         $div.addClass('widget_wrapper'); // class get override in set_attributes_new
+        //////////////////////////
+
+        let plugin_name = prop['xu-widget'],
+          method = prop['xu-method'],
+          dsP = paramsP.dsSessionP,
+          propsP = prop,
+          sourceP = 'widgets';
+
+        // const set_SYS_GLOBAL_OBJ_WIDGET_INFO = async function (docP) {
+        //   var obj = _.clone(docP);
+        //   obj.date = await func.utils.get_dateTime(
+        //     SESSION_ID,
+        //     "SYS_DATE",
+        //     docP.date
+        //   );
+        //   obj.time = await func.utils.get_dateTime(
+        //     SESSION_ID,
+        //     "SYS_TIME",
+        //     docP.date
+        //   );
+
+        //   var datasource_changes = {
+        //     [0]: {
+        //       ["data_system"]: {
+        //         ["SYS_GLOBAL_OBJ_WIDGET_INFO"]: obj,
+        //       },
+        //     },
+        //   };
+        //   await func.datasource.update(SESSION_ID, datasource_changes);
+        // };
+        const call_plugin_api = async function (plugin_nameP, dataP) {
+          return await func.utils.call_plugin_api(SESSION_ID, plugin_nameP, dataP);
+        };
+        const report_error = function (descP, warn) {
+          func.utils.debug.log(SESSION_ID, _session.DS_GLB[dsP].prog_id + '_' + _session.DS_GLB[dsP].callingMenuId, {
+            module: 'widgets',
+            action: 'Init',
+            source: sourceP,
+            prop: descP,
+            details: descP,
+            result: null,
+            error: warn ? false : true,
+            fields: null,
+            type: 'widgets',
+            prog_id: _session.DS_GLB[dsP].prog_id,
+          });
+        };
+        const get_fields_data = async function (fields, props) {
+          const report_error = function (descP, warn) {
+            func.utils.debug.log(SESSION_ID, _session.DS_GLB[dsP].prog_id + '_' + _session.DS_GLB[dsP].callingMenuId, {
+              module: 'widgets',
+              action: 'Init',
+              source: sourceP,
+              prop: descP,
+              details: descP,
+              result: null,
+              error: warn ? false : true,
+              fields: null,
+              type: 'widgets',
+              prog_id: _session.DS_GLB[dsP].prog_id,
+            });
+          };
+          const get_property_value = async function (fieldIdP, val) {
+            if (!val) return;
+            var value = fieldIdP in props ? props[fieldIdP] : typeof val.defaultValue === 'function' ? val?.defaultValue?.() : val?.defaultValue;
+            if (val.render === 'eventId') {
+              value = props?.[fieldIdP]?.event;
+            }
 
-//         if (!APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name]) {
-//           return report_error(`plugin ${plugin_name} not found`);
-//         }
+            if (props[`xu-exp:${fieldIdP}`]) {
+              value = (await func.expression.get(SESSION_ID, props[`xu-exp:${fieldIdP}`], dsP, 'widget property')).result;
+            }
 
-//         if (APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest['style.css'].exist) {
-//           load_css_style();
-//         }
+            return func.common.get_cast_val(
+              SESSION_ID,
+              'widgets',
+              fieldIdP,
+              val.type, //val.type !== "string" || val.type !== "number" ? "string" : val.type,
+              value,
+              null,
+            );
+          };
+          var data_obj = {};
+          var return_code = 1;
+          // $.each(fields, function (key, val) {
+          for await (const [key, val] of Object.entries(fields)) {
+            data_obj[key] = await get_property_value(key, val);
+            if (!data_obj[key] && val.mandatory) {
+              return_code = -1;
+              report_error(`${key} is a mandatory field.`);
+              break;
+            }
+            // console.log(val);
+          }
+          for await (const key of ['xu-bind']) {
+            data_obj[key] = await get_property_value(key, props[key]);
+          }
 
-//         const plugin_setup_ret = await func.utils.get_plugin_setup(SESSION_ID, plugin_name);
-//         if (plugin_setup_ret.code < 0) {
-//           return report_error(plugin_setup_ret);
-//         }
+          return { code: return_code, data: data_obj };
+        };
 
-//         const api_utils = await func.common.get_module(SESSION_ID, 'xuda-api-library.mjs', {
-//           func,
-//           glb,
-//           SESSION_OBJ,
-//           SESSION_ID,
-//           APP_OBJ,
-//           dsSession: paramsP.dsSessionP,
-//           job_id: jobNoP,
-//         });
+        const load_css_style = function () {
+          const get_css_path = function (resource) {
+            if (_session.worker_type === 'Dev') {
+              return `../../plugins/${plugin_name}/${resource}`;
+            }
+            return `https://${_session.domain}/plugins/${plugin_name}/${APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest[resource].dist ? 'dist/' : ''}${resource}?gtp_token=${_session.gtp_token}&app_id=${_session.app_id}`;
+          };
+          let path = get_css_path('style.css');
+          func.utils.load_css_on_demand(path);
+        };
 
-//         const params = {
-//           SESSION_ID,
-//           method,
-//           _session,
-//           dsP,
-//           sourceP,
-//           propsP,
-//           plugin_name,
-//           $containerP: $div,
-//           plugin_setup: plugin_setup_ret.data,
-
-//           report_error,
-//           call_plugin_api,
-//           // set_SYS_GLOBAL_OBJ_WIDGET_INFO,
-//           api_utils,
-//         };
+        const _plugin = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[plugin_name];
+        const index = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`);
+        const methods = index.methods;
+        if (methods && !methods[method]) {
+          return report_error('method not found');
+        }
 
-//         const fx = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
+        const fields_ret = await get_fields_data(methods[method].fields, propsP);
+        if (fields_ret.code < 0) {
+          return report_error(fields_ret.data);
+        }
+        const fields = fields_ret.data;
 
-//         if (_plugin?.manifest?.['runtime.mjs'].dist && _plugin?.manifest?.['runtime.mjs']?.css) {
-//           const plugin_runtime_css_url = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, 'dist/runtime.css');
-//           func.utils.load_css_on_demand(plugin_runtime_css_url);
-//         }
+        let exclude_attributes = [];
+        for await (const [key, val] of Object.entries(propsP)) {
+          if (typeof fields[key] !== 'undefined' || typeof fields[`xu-exp:${key}`] !== 'undefined') {
+            exclude_attributes.push(key);
+          }
+        }
 
-//         if (!fx[method]) {
-//           throw `Method: ${method} does not exist`;
-//         }
-//         try {
-//           await fx[method](fields, params);
-//         } catch (err) {
-//           func.utils.debug_report(SESSION_ID, `${plugin_name} widget`, err.message, 'E');
-//         }
-//       }
-//       return $div;
-//     },
-//     [`xu-single-view`]: async function () {
-//       var exist_elm_obj = get_element_info();
-//       var $div = exist_elm_obj.div;
+        let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true, exclude_attributes);
 
-//       if (!exist_elm_obj.div) {
-//         var $wrapper = $('<div>');
-//         $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, 'div', $wrapper, '');
+        $div.addClass('widget_wrapper'); // class get override in set_attributes_new
 
-//         if (!$div) return;
+        if (!APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name]) {
+          return report_error(`plugin ${plugin_name} not found`);
+        }
 
-//         if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
-//           close_all_modals();
-//         }
+        if (APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest['style.css'].exist) {
+          load_css_style();
+        }
 
-//         $div.hover(
-//           function (e) {
-//             hover_in();
-//             // func.UI.screen.hover_in(SESSION_ID, null, $container, paramsP, is_skeleton);
-//           },
-//           function (e) {
-//             // func.UI.screen.hover_out(SESSION_ID, $container, is_skeleton, paramsP);
-//             hover_out();
-//           },
-//         );
-//       }
+        const plugin_setup_ret = await func.utils.get_plugin_setup(SESSION_ID, plugin_name);
+        if (plugin_setup_ret.code < 0) {
+          return report_error(plugin_setup_ret);
+        }
 
-//       const ret = await iterate_child($div, nodeP, null, $div);
-//       if (_.isEmpty($container.data().xuAttributes)) {
-//         await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
-//       }
+        const api_utils = await func.common.get_module(SESSION_ID, 'xuda-api-library.mjs', {
+          func,
+          glb,
+          SESSION_OBJ,
+          SESSION_ID,
+          APP_OBJ,
+          dsSession: paramsP.dsSessionP,
+          job_id: jobNoP,
+        });
 
-//       $.each($div.data().xuData, function (key, val) {
-//         $container.data().xuData[key] = _.cloneDeep(val);
-//       });
-//       $.each($div.data().xuAttributes, function (key, val) {
-//         // $container.data().xuAttributes[key] = _.cloneDeep(val);
-//         $container.data().xuAttributes[key] = klona.klona(val);
-//       });
+        const params = {
+          SESSION_ID,
+          method,
+          _session,
+          dsP,
+          sourceP,
+          propsP,
+          plugin_name,
+          $containerP: $div,
+          plugin_setup: plugin_setup_ret.data,
 
-//       return await render_screen_type($div);
-//     },
-//     [`xu-multi-view`]: async function () {
-//       var $div = $container;
+          report_error,
+          call_plugin_api,
+          // set_SYS_GLOBAL_OBJ_WIDGET_INFO,
+          api_utils,
+        };
 
-//       if (!$div.data().xuData.node || !$div.data().xuData.node.children) {
-//         $div.data().xuData.node = nodeP;
-//       }
+        const fx = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
 
-//       if (!$div.data().xuData.debug_info) {
-//         $div.data().xuData.debug_info = {
-//           id: nodeP.id,
-//           parent_id: $container.data().xuData.ui_id,
-//         };
-//       }
+        if (_plugin?.manifest?.['runtime.mjs'].dist && _plugin?.manifest?.['runtime.mjs']?.css) {
+          const plugin_runtime_css_url = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, 'dist/runtime.css');
+          func.utils.load_css_on_demand(plugin_runtime_css_url);
+        }
 
-//       const done = async function (continuous_idx) {
-//         // const do_callback = async function ($div) {
-//         //   // if ($root_container.data().xuData.progress_bar_circle) {
-//         //   //   setTimeout(function () {
-//         //   //     $.each(
-//         //   //       $root_container.data().xuData.progress_bar_circle,
-//         //   //       function (key, val) {
-//         //   //         val.bar.set(parseFloat(val.value)); // Number from 0.0 to 1.0
-//         //   //       }
-//         //   //     );
-//         //   //   }, 2000);
-//         //   // }
-
-//         //   if (paramsP.screenInfo.properties?.rtl) {
-//         //     $div_content.attr('dir', 'rtl');
-//         //   }
-
-//         //   return $div;
-//         // };
-//         await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
-
-//         return await render_screen_type($div);
-//       };
+        if (!fx[method]) {
+          throw `Method: ${method} does not exist`;
+        }
+        try {
+          await fx[method](fields, params);
+        } catch (err) {
+          func.utils.debug_report(SESSION_ID, `${plugin_name} widget`, err.message, 'E');
+        }
+      }
+      return $div;
+    },
+    [`xu-single-view`]: async function () {
+      var exist_elm_obj = get_element_info();
+      var $div = exist_elm_obj.div;
 
-//       if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
-//         close_all_modals();
-//       }
+      if (!exist_elm_obj.div) {
+        var $wrapper = $('<div>');
+        $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, 'div', $wrapper, '');
 
-//       const empty_result = async function () {
-//         // var content = prop.empty_result_content || '';
-
-//         // var res = await func.expression.get(
-//         //   SESSION_ID,
-//         //   content, // prop["xu-exp:empty_result_content"],
-//         //   paramsP.dsSessionP,
-//         //   'empty_result_content_EXP',
-//         //   _ds.currentRecordId,
-//         // );
-//         // content = res.result;
-
-//         // let empty_result_node = {
-//         //   type: 'element',
-//         //   id: crypto.randomUUID(),
-//         //   content,
-//         //   // :  content || (typeof content === "undefined" && "Empty results"),
-//         //   tagName: 'div',
-//         //   attributes: {},
-//         //   children: [],
-//         // };
-
-//         // const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $container, empty_result_node, parent_infoP, paramsP, jobNoP, null, 0, null, nodeP, null, $root_container);
-//         await func.events.validate(SESSION_ID, 'record_not_found', paramsP.dsSessionP);
-//         return await done(null);
-//       };
-//       var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
+        if (!$div) return;
 
-//       var continuous_idx = null;
+        if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
+          close_all_modals();
+        }
 
-//       if (!_ds.data_feed || _.isEmpty(_ds.data_feed.rows)) {
-//         return await empty_result();
-//       }
+        $div.hover(
+          function (e) {
+            hover_in();
+            // func.UI.screen.hover_in(SESSION_ID, null, $container, paramsP, is_skeleton);
+          },
+          function (e) {
+            // func.UI.screen.hover_out(SESSION_ID, $container, is_skeleton, paramsP);
+            hover_out();
+          },
+        );
+      }
 
-//       var i = 0;
-//       for await (const [key, val] of Object.entries(_ds.data_feed.rows)) {
-//         var node = JSON.parse(JSON.stringify(nodeP));
+      const ret = await iterate_child($div, nodeP, null, $div);
+      if (_.isEmpty($container.data().xuAttributes)) {
+        await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
+      }
 
-//         _ds.currentRecordId = val._ROWID;
-//         const ret = await iterate_child($div, node, { continuous_idx }, $root_container);
+      $.each($div.data().xuData, function (key, val) {
+        $container.data().xuData[key] = _.cloneDeep(val);
+      });
+      $.each($div.data().xuAttributes, function (key, val) {
+        // $container.data().xuAttributes[key] = _.cloneDeep(val);
+        $container.data().xuAttributes[key] = klona.klona(val);
+      });
 
-//         if (_.isEmpty($container.data().xuAttributes)) {
-//           await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
-//         }
-//       }
+      return await render_screen_type($div);
+    },
+    [`xu-multi-view`]: async function () {
+      var $div = $container;
 
-//       return await done(continuous_idx);
-//     },
-//     [`xu-panel`]: async function () {
-//       const done = async function ($new_div) {
-//         if (!$container.data()?.xuData?.paramsP) {
-//           return $container;
-//         }
-//         var $div_items = $div.data().xuData.node.children;
+      if (!$div.data().xuData.node || !$div.data().xuData.node.children) {
+        $div.data().xuData.node = nodeP;
+      }
 
-//         await func.UI.screen.panel_post_render_handler(SESSION_ID, $container, $new_div, nodeP, $div, jobNoP);
+      if (!$div.data().xuData.debug_info) {
+        $div.data().xuData.debug_info = {
+          id: nodeP.id,
+          parent_id: $container.data().xuData.ui_id,
+        };
+      }
 
-//         // TO FIX should be timeout
-//         $container.data().xuData.node.children = $div_items;
+      const done = async function (continuous_idx) {
+        // const do_callback = async function ($div) {
+        //   // if ($root_container.data().xuData.progress_bar_circle) {
+        //   //   setTimeout(function () {
+        //   //     $.each(
+        //   //       $root_container.data().xuData.progress_bar_circle,
+        //   //       function (key, val) {
+        //   //         val.bar.set(parseFloat(val.value)); // Number from 0.0 to 1.0
+        //   //       }
+        //   //     );
+        //   //   }, 2000);
+        //   // }
+
+        //   if (paramsP.screenInfo.properties?.rtl) {
+        //     $div_content.attr('dir', 'rtl');
+        //   }
 
-//         return $container;
-//       };
+        //   return $div;
+        // };
+        await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
 
-//       var $wrapper = $('<div>');
-//       $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, null, $wrapper, '');
+        return await render_screen_type($div);
+      };
 
-//       let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div.clone(true), true, undefined, refreshed_ds);
-//       if (ret.abort) {
-//         // render N
-//         return (ret.$new_div = $('<template>').append($div));
-//       }
+      if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
+        close_all_modals();
+      }
 
-//       let $ret_panel_div = ret.$new_div;
+      const empty_result = async function () {
+        // var content = prop.empty_result_content || '';
+
+        // var res = await func.expression.get(
+        //   SESSION_ID,
+        //   content, // prop["xu-exp:empty_result_content"],
+        //   paramsP.dsSessionP,
+        //   'empty_result_content_EXP',
+        //   _ds.currentRecordId,
+        // );
+        // content = res.result;
+
+        // let empty_result_node = {
+        //   type: 'element',
+        //   id: crypto.randomUUID(),
+        //   content,
+        //   // :  content || (typeof content === "undefined" && "Empty results"),
+        //   tagName: 'div',
+        //   attributes: {},
+        //   children: [],
+        // };
 
-//       if (!$ret_panel_div?.children()?.length) {
-//         ////// render default children tree
-//         if (nodeP.children.length) {
-//           $ret_panel_div = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP.children[0], parent_infoP, paramsP, jobNoP, null, 0, null, nodeP, null, $root_container);
-//         }
-//       }
+        // const ret = await func.UI.screen.render_ui_tree(SESSION_ID, $container, empty_result_node, parent_infoP, paramsP, jobNoP, null, 0, null, nodeP, null, $root_container);
+        await func.events.validate(SESSION_ID, 'record_not_found', paramsP.dsSessionP);
+        return await done(null);
+      };
+      var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
 
-//       let ret_done = await done($ret_panel_div);
+      var continuous_idx = null;
 
-//       return ret_done;
-//     },
-//   };
+      if (!_ds.data_feed || _.isEmpty(_ds.data_feed.rows)) {
+        return await empty_result();
+      }
 
-//   const draw_html_element_org = async function (element) {
-//     const done = async function (ret = {}) {
-//       return $div;
-//     };
-//     if (!element || element === 'script') return await done();
-//     let str = '';
+      var i = 0;
+      for await (const [key, val] of Object.entries(_ds.data_feed.rows)) {
+        var node = JSON.parse(JSON.stringify(nodeP));
 
-//     var $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str);
+        _ds.currentRecordId = val._ROWID;
+        const ret = await iterate_child($div, node, { continuous_idx }, $root_container);
 
-//     $div.hover(
-//       function (e) {
-//         hover_in($div, e);
-//       },
-//       function (e) {
-//         hover_out();
-//       },
-//     );
-//     if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
-//       $div.on('click contextmenu', function (e) {
-//         hover_in($div, e);
-//       });
-//     }
+        if (_.isEmpty($container.data().xuAttributes)) {
+          await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
+        }
+      }
 
-//     // let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $container, nodeP, $div, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
-//     let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
-//     if (ret.abort || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
-//       return await done(ret);
-//     }
-//     // check if iterator made to prevent children render
-
-//     if (nodeP?.attributes?.['xu-viewport'] == 'true') {
-//       // const xu_viewport = async function () {
-//       //   const data = { $div: $div.clone(true), nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
-//       //   const container_id = $container.attr('xu-ui-id');
-//       //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
-//       //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
-//       //     await iterate_child($div, nodeP, parent_infoP, $root_container);
-//       //   } else {
-//       //     $div.remove();
-//       //   }
-//       //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
-
-//       //   // if (!$div.children().length) {
-//       //   //   // render the first element to determine height
-//       //   //   await iterate_child($div, nodeP, parent_infoP, $root_container);
-//       //   //   // hover_in($div);
-//       //   //   // func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', data, null, null, paramsP.dsSessionP);
-//       //   // } else {
-//       //   // }
-//       // };
-//       const xu_viewport = function () {
-//         const observer_inViewport = new IntersectionObserver(
-//           function (entries) {
-//             entries.forEach((entry) => {
-//               if (entry.isIntersecting) {
-//                 $(entry.target).trigger('inViewport');
-
-//                 // Optional: stop observing once triggered
-//                 observer_inViewport.unobserve(entry.target);
-//               }
-//             });
-//           },
-//           {
-//             threshold: 0.1, // Trigger when 10% of element is visible
-//           },
-//         );
+      return await done(continuous_idx);
+    },
+    [`xu-panel`]: async function () {
+      const done = async function ($new_div) {
+        if (!$container.data()?.xuData?.paramsP) {
+          return $container;
+        }
+        var $div_items = $div.data().xuData.node.children;
 
-//         const observer_outViewport = new IntersectionObserver(
-//           function (entries) {
-//             entries.forEach((entry) => {
-//               if (!entry.isIntersecting) {
-//                 // Element is OUT of viewport - trigger custom event
-//                 $(entry.target).trigger('outViewport');
+        await func.UI.screen.panel_post_render_handler(SESSION_ID, $container, $new_div, nodeP, $div, jobNoP);
 
-//                 // Optional: stop observing once triggered
-//                 // observer_outViewport.unobserve(entry.target);
-//               }
-//             });
-//           },
-//           {
-//             threshold: 0, // Trigger when element is completely out of view
-//           },
-//         );
+        // TO FIX should be timeout
+        $container.data().xuData.node.children = $div_items;
 
-//         let ui_job_id;
-//         $div.on('inViewport', function () {
-//           if ($div.children().length) {
-//             $div.removeClass('skeleton');
-//             return;
-//           }
+        return $container;
+      };
 
-//           // if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
-//           //   $div[0].style.removeProperty('height');
-//           //   $div.removeClass('skeleton');
-//           //   $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
-//           // } else {
-//           hover_in($div);
-//           ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container }, null, null, paramsP.dsSessionP);
-//           // }
-//           observer_outViewport.observe($div[0]);
-//         });
+      var $wrapper = $('<div>');
+      $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, null, $wrapper, '');
 
-//         $div.on('outViewport', function () {
-//           func.UI.worker.delete_job(SESSION_ID, ui_job_id);
+      let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div.clone(true), true, undefined, refreshed_ds);
+      if (ret.abort) {
+        // render N
+        return (ret.$new_div = $('<template>').append($div));
+      }
 
-//           if ($div.children().length) {
-//             // UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
-//             $div.empty();
-//             const height = $div?.data()?.xuData?.viewport_height || 10;
-//             if (typeof height !== 'undefined') {
-//               $div.css('height', height);
-//             }
-//           }
-//           // $div.addClass('skeleton');
-//           observer_inViewport.observe($div[0]);
-//         });
-//         $div.addClass('skeleton');
-//         observer_inViewport.observe($div[0]);
-//       };
-//       xu_viewport();
-//     } else {
-//       await iterate_child($div, nodeP, parent_infoP, $root_container);
-//     }
+      let $ret_panel_div = ret.$new_div;
 
-//     // const ret_iterate_child = await iterate_child($div, nodeP, parent_infoP, null, $root_container);
-//     return await done(ret);
-//   };
+      if (!$ret_panel_div?.children()?.length) {
+        ////// render default children tree
+        if (nodeP.children.length) {
+          $ret_panel_div = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP.children[0], parent_infoP, paramsP, jobNoP, null, 0, null, nodeP, null, $root_container);
+        }
+      }
 
-//   const draw_html_element = async function (element) {
-//     const done = async function (ret = {}) {
-//       const xu_ui_id = $div.attr('xu-ui-id');
-//       $div.removeClass('display_none');
-//       if (ret.has_xu_exp_render_attribute) {
-//         // $div.css('display', 'unset');
-
-//         const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($div.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
-//         const _$div = $div.clone(true);
-//         UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { $div: _$div, paramsP, data: _$div.data() };
-//         nodeP.xu_render_xu_ui_id = xu_ui_id;
-//         nodeP.xu_render_cache_id = xu_render_cache_id;
-
-//         if (ret.xu_render_background_processing) {
-//           temp_$div.remove();
-//           // $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
-//           return $div;
-//         } else {
-//           // $div.css('display', 'unset');
-//           temp_$div.replaceWith($div);
-//           return $div;
-//         }
-//       } else {
-//         if (ret.has_xu_render_attribute) {
-//           temp_$div.remove();
-//           return $div;
-//         }
-//         // $div.css('display', 'unset');
-//         temp_$div.replaceWith($div);
-//         return $div;
-//       }
-//     };
-//     if (!element || element === 'script') return await done();
-//     let str = '';
+      let ret_done = await done($ret_panel_div);
 
-//     var temp_$div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str, true);
+      return ret_done;
+    },
+  };
 
-//     let temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
-//     let $div = temp_$div.clone(true);
+  const draw_html_element_org = async function (element) {
+    const done = async function (ret = {}) {
+      return $div;
+    };
+    if (!element || element === 'script') return await done();
+    let str = '';
 
-//     // $div.css('display', 'none');
+    var $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str);
 
-//     $div.hover(
-//       function (e) {
-//         hover_in($div, e);
-//       },
-//       function (e) {
-//         hover_out();
-//       },
-//     );
-//     if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
-//       $div.on('click contextmenu', function (e) {
-//         hover_in($div, e);
-//       });
-//     }
+    $div.hover(
+      function (e) {
+        hover_in($div, e);
+      },
+      function (e) {
+        hover_out();
+      },
+    );
+    if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
+      $div.on('click contextmenu', function (e) {
+        hover_in($div, e);
+      });
+    }
 
-//     let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, temp_$container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
-//     if (ret.abort || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
-//       return await done(ret);
-//     }
-//     // check if iterator made to prevent children render
-
-//     if (nodeP?.attributes?.['xu-viewport'] == 'true') {
-//       // const xu_viewport = async function () {
-//       //   const data = { $div: $div.clone(true), nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
-//       //   const container_id = $container.attr('xu-ui-id');
-//       //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
-//       //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
-//       //     await iterate_child($div, nodeP, parent_infoP, $root_container);
-//       //   } else {
-//       //     $div.remove();
-//       //   }
-//       //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
-
-//       //   // if (!$div.children().length) {
-//       //   //   // render the first element to determine height
-//       //   //   await iterate_child($div, nodeP, parent_infoP, $root_container);
-//       //   //   // hover_in($div);
-//       //   //   // func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', data, null, null, paramsP.dsSessionP);
-//       //   // } else {
-//       //   // }
-//       // };
-//       const xu_viewport = function () {
-//         const observer_inViewport = new IntersectionObserver(
-//           function (entries) {
-//             entries.forEach((entry) => {
-//               if (entry.isIntersecting) {
-//                 $(entry.target).trigger('inViewport');
-
-//                 // Optional: stop observing once triggered
-//                 observer_inViewport.unobserve(entry.target);
-//               }
-//             });
-//           },
-//           {
-//             threshold: 0.1, // Trigger when 10% of element is visible
-//           },
-//         );
+    // let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $container, nodeP, $div, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+    if (ret.abort || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
+      return await done(ret);
+    }
+    // check if iterator made to prevent children render
+
+    if (nodeP?.attributes?.['xu-viewport'] == 'true') {
+      // const xu_viewport = async function () {
+      //   const data = { $div: $div.clone(true), nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
+      //   const container_id = $container.attr('xu-ui-id');
+      //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
+      //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
+      //     await iterate_child($div, nodeP, parent_infoP, $root_container);
+      //   } else {
+      //     $div.remove();
+      //   }
+      //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
+
+      //   // if (!$div.children().length) {
+      //   //   // render the first element to determine height
+      //   //   await iterate_child($div, nodeP, parent_infoP, $root_container);
+      //   //   // hover_in($div);
+      //   //   // func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', data, null, null, paramsP.dsSessionP);
+      //   // } else {
+      //   // }
+      // };
+      const xu_viewport = function () {
+        const observer_inViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                $(entry.target).trigger('inViewport');
 
-//         const observer_outViewport = new IntersectionObserver(
-//           function (entries) {
-//             entries.forEach((entry) => {
-//               if (!entry.isIntersecting) {
-//                 // Element is OUT of viewport - trigger custom event
-//                 $(entry.target).trigger('outViewport');
+                // Optional: stop observing once triggered
+                observer_inViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0.1, // Trigger when 10% of element is visible
+          },
+        );
 
-//                 // Optional: stop observing once triggered
-//                 // observer_outViewport.unobserve(entry.target);
-//               }
-//             });
-//           },
-//           {
-//             threshold: 0, // Trigger when element is completely out of view
-//           },
-//         );
+        const observer_outViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (!entry.isIntersecting) {
+                // Element is OUT of viewport - trigger custom event
+                $(entry.target).trigger('outViewport');
 
-//         let ui_job_id;
-//         $div.on('inViewport', function () {
-//           if ($div.children().length) {
-//             $div.removeClass('skeleton');
-//             return;
-//           }
+                // Optional: stop observing once triggered
+                // observer_outViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0, // Trigger when element is completely out of view
+          },
+        );
 
-//           // if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
-//           //   $div[0].style.removeProperty('height');
-//           //   $div.removeClass('skeleton');
-//           //   $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
-//           // } else {
-//           hover_in($div);
-//           ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, temp_$container }, null, null, paramsP.dsSessionP);
-//           // }
-//           observer_outViewport.observe($div[0]);
-//         });
+        let ui_job_id;
+        $div.on('inViewport', function () {
+          if ($div.children().length) {
+            $div.removeClass('skeleton');
+            return;
+          }
 
-//         $div.on('outViewport', function () {
-//           func.UI.worker.delete_job(SESSION_ID, ui_job_id);
+          // if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
+          //   $div[0].style.removeProperty('height');
+          //   $div.removeClass('skeleton');
+          //   $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
+          // } else {
+          hover_in($div);
+          ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container }, null, null, paramsP.dsSessionP);
+          // }
+          observer_outViewport.observe($div[0]);
+        });
 
-//           if ($div.children().length) {
-//             // UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
-//             $div.empty();
-//             const height = $div?.data()?.xuData?.viewport_height || 10;
-//             if (typeof height !== 'undefined') {
-//               $div.css('height', height);
-//             }
-//           }
-//           // $div.addClass('skeleton');
-//           observer_inViewport.observe($div[0]);
-//         });
-//         $div.addClass('skeleton');
-//         observer_inViewport.observe($div[0]);
-//       };
-//       xu_viewport();
-//     } else {
-//       // if (ret.xu_render_background_processing) {
-//       //   // let temp_$div = $div.clone(true);
-//       //   iterate_child($div, nodeP, parent_infoP, $root_container);
-//       // } else {
-//       //   await iterate_child($div, nodeP, parent_infoP, $root_container);
-//       // }
-//       if (!ret.xu_render_background_processing) {
-//         iterate_child($div, nodeP, parent_infoP, $root_container);
-//       }
-//     }
+        $div.on('outViewport', function () {
+          func.UI.worker.delete_job(SESSION_ID, ui_job_id);
 
-//     // const ret_iterate_child = await iterate_child($div, nodeP, parent_infoP, null, $root_container);
-//     return await done(ret);
-//   };
+          if ($div.children().length) {
+            // UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
+            $div.empty();
+            const height = $div?.data()?.xuData?.viewport_height || 10;
+            if (typeof height !== 'undefined') {
+              $div.css('height', height);
+            }
+          }
+          // $div.addClass('skeleton');
+          observer_inViewport.observe($div[0]);
+        });
+        $div.addClass('skeleton');
+        observer_inViewport.observe($div[0]);
+      };
+      xu_viewport();
+    } else {
+      await iterate_child($div, nodeP, parent_infoP, $root_container);
+    }
 
-//   if (nodeP.content && nodeP.attributes) {
-//     nodeP.attributes['xu-content'] = nodeP.content;
-//   }
+    // const ret_iterate_child = await iterate_child($div, nodeP, parent_infoP, null, $root_container);
+    return await done(ret);
+  };
 
-//   if (nodeP.tagName === 'xu-widget') {
-//     if (is_skeleton) return;
-//     return await fx['widget']();
-//   }
-//   if (fx[nodeP.tagName]) {
-//     return await fx[nodeP.tagName]();
-//   }
-//   // const xu_viewport = async function () {
-//   //   const data = { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
-//   //   const container_id = $container.attr('xu-ui-id');
-//   //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
-//   //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
-//   //     await iterate_child($div, nodeP, parent_infoP, $root_container);
-//   //   }
-//   //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
-//   // };
+  const draw_html_element = async function (element) {
+    const done = async function (ret = {}) {
+      const xu_ui_id = $div.attr('xu-ui-id');
+      $div.removeClass('display_none');
+      if (ret.has_xu_exp_render_attribute) {
+        // $div.css('display', 'unset');
 
-//   // if (nodeP?.attributes?.['xu-viewport'] == 'true') {
-//   //   return await xu_viewport();
-//   // } else {
-//   if (!glb.new_xu_render) {
-//     return await draw_html_element_org(nodeP.tagName);
-//   }
-//   return await draw_html_element(nodeP.tagName);
+        const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($div.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
+        const _$div = $div.clone(true);
+        UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { $div: _$div, paramsP, data: _$div.data() };
+        nodeP.xu_render_xu_ui_id = xu_ui_id;
+        nodeP.xu_render_cache_id = xu_render_cache_id;
 
-//   // }
-// };
+        if (ret.xu_render_background_processing) {
+          temp_$div.remove();
+          // $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
+          return $div;
+        } else {
+          // $div.css('display', 'unset');
+          temp_$div.replaceWith($div);
+          return $div;
+        }
+      } else {
+        if (ret.has_xu_render_attribute) {
+          temp_$div.remove();
+          return $div;
+        }
+        // $div.css('display', 'unset');
+        temp_$div.replaceWith($div);
+        return $div;
+      }
+    };
+    if (!element || element === 'script') return await done();
+    let str = '';
 
-func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $root_container) {
+    var temp_$div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str, true);
+
+    let temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
+    let $div = temp_$div.clone(true);
+
+    // $div.css('display', 'none');
+
+    $div.hover(
+      function (e) {
+        hover_in($div, e);
+      },
+      function (e) {
+        hover_out();
+      },
+    );
+    if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
+      $div.on('click contextmenu', function (e) {
+        hover_in($div, e);
+      });
+    }
+
+    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, temp_$container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+    if (ret.abort || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
+      return await done(ret);
+    }
+    // check if iterator made to prevent children render
+
+    if (nodeP?.attributes?.['xu-viewport'] == 'true') {
+      // const xu_viewport = async function () {
+      //   const data = { $div: $div.clone(true), nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
+      //   const container_id = $container.attr('xu-ui-id');
+      //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
+      //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
+      //     await iterate_child($div, nodeP, parent_infoP, $root_container);
+      //   } else {
+      //     $div.remove();
+      //   }
+      //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
+
+      //   // if (!$div.children().length) {
+      //   //   // render the first element to determine height
+      //   //   await iterate_child($div, nodeP, parent_infoP, $root_container);
+      //   //   // hover_in($div);
+      //   //   // func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', data, null, null, paramsP.dsSessionP);
+      //   // } else {
+      //   // }
+      // };
+      const xu_viewport = function () {
+        const observer_inViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                $(entry.target).trigger('inViewport');
+
+                // Optional: stop observing once triggered
+                observer_inViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0.1, // Trigger when 10% of element is visible
+          },
+        );
+
+        const observer_outViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (!entry.isIntersecting) {
+                // Element is OUT of viewport - trigger custom event
+                $(entry.target).trigger('outViewport');
+
+                // Optional: stop observing once triggered
+                // observer_outViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0, // Trigger when element is completely out of view
+          },
+        );
+
+        let ui_job_id;
+        $div.on('inViewport', function () {
+          if ($div.children().length) {
+            $div.removeClass('skeleton');
+            return;
+          }
+
+          // if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
+          //   $div[0].style.removeProperty('height');
+          //   $div.removeClass('skeleton');
+          //   $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
+          // } else {
+          hover_in($div);
+          ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, temp_$container }, null, null, paramsP.dsSessionP);
+          // }
+          observer_outViewport.observe($div[0]);
+        });
+
+        $div.on('outViewport', function () {
+          func.UI.worker.delete_job(SESSION_ID, ui_job_id);
+
+          if ($div.children().length) {
+            // UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
+            $div.empty();
+            const height = $div?.data()?.xuData?.viewport_height || 10;
+            if (typeof height !== 'undefined') {
+              $div.css('height', height);
+            }
+          }
+          // $div.addClass('skeleton');
+          observer_inViewport.observe($div[0]);
+        });
+        $div.addClass('skeleton');
+        observer_inViewport.observe($div[0]);
+      };
+      xu_viewport();
+    } else {
+      // if (ret.xu_render_background_processing) {
+      //   // let temp_$div = $div.clone(true);
+      //   iterate_child($div, nodeP, parent_infoP, $root_container);
+      // } else {
+      //   await iterate_child($div, nodeP, parent_infoP, $root_container);
+      // }
+      if (!ret.xu_render_background_processing) {
+        iterate_child($div, nodeP, parent_infoP, $root_container);
+      }
+    }
+
+    // const ret_iterate_child = await iterate_child($div, nodeP, parent_infoP, null, $root_container);
+    return await done(ret);
+  };
+
+  if (nodeP.content && nodeP.attributes) {
+    nodeP.attributes['xu-content'] = nodeP.content;
+  }
+
+  if (nodeP.tagName === 'xu-widget') {
+    if (is_skeleton) return;
+    return await fx['widget']();
+  }
+  if (fx[nodeP.tagName]) {
+    return await fx[nodeP.tagName]();
+  }
+  // const xu_viewport = async function () {
+  //   const data = { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
+  //   const container_id = $container.attr('xu-ui-id');
+  //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
+  //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
+  //     await iterate_child($div, nodeP, parent_infoP, $root_container);
+  //   }
+  //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
+  // };
+
+  // if (nodeP?.attributes?.['xu-viewport'] == 'true') {
+  //   return await xu_viewport();
+  // } else {
+  if (!glb.new_xu_render) {
+    return await draw_html_element_org(nodeP.tagName);
+  }
+  return await draw_html_element(nodeP.tagName);
+
+  // }
+};
+
+func.UI.screen.render_ui_tree_bad = async function (SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $root_container) {
   // Early cache session and datasource
   let _session, _ds;
   if (!is_skeleton) {