@xuda.io/runtime-bundle 1.0.1250 → 1.0.1252

package/js/xuda-runtime-bundle.js

@@ -24676,27 +24676,40 @@ func.common.get_data_from_websocket = async function (SESSION_ID, serviceP, data
   });
 };
 
-func.common.sha256 = async function (inputString) {
-  // 1. Create a hash buffer from the input string using SHA-256.
-  // This part remains the same as it provides a strong, unique cryptographic starting point.
-  const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(inputString));
-
-  // 2. Interpret the first 8 bytes (64 bits) of the hash as one big number.
-  const view = new DataView(buffer);
-  const bigInt = view.getBigUint64(0, false); // `false` for big-endian
-
-  // 3. Convert the BigInt to a Base36 string.
-  // The .toString(36) method handles the conversion to an alphanumeric representation (0-9, a-z).
-  const base36Hash = bigInt.toString(36);
-
-  // 4. Take the first 10 characters. If it's shorter, it will just return the whole string.
-  // For a 64-bit integer, the Base36 representation will be about 13 characters long,
-  // so slicing is a reliable way to get a fixed length.
-  const shortHash = base36Hash.slice(0, 10);
-
-  // 5. Pad the start in the unlikely case the hash is shorter than 10 characters.
-  // This ensures the output is always exactly 10 characters long.
-  return shortHash.padStart(10, '0');
+// func.common.sha256 = async function (inputString) {
+//   // 1. Create a hash buffer from the input string using SHA-256.
+//   // This part remains the same as it provides a strong, unique cryptographic starting point.
+//   const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(inputString));
+
+//   // 2. Interpret the first 8 bytes (64 bits) of the hash as one big number.
+//   const view = new DataView(buffer);
+//   const bigInt = view.getBigUint64(0, false); // `false` for big-endian
+
+//   // 3. Convert the BigInt to a Base36 string.
+//   // The .toString(36) method handles the conversion to an alphanumeric representation (0-9, a-z).
+//   const base36Hash = bigInt.toString(36);
+
+//   // 4. Take the first 10 characters. If it's shorter, it will just return the whole string.
+//   // For a 64-bit integer, the Base36 representation will be about 13 characters long,
+//   // so slicing is a reliable way to get a fixed length.
+//   const shortHash = base36Hash.slice(0, 10);
+
+//   // 5. Pad the start in the unlikely case the hash is shorter than 10 characters.
+//   // This ensures the output is always exactly 10 characters long.
+//   return shortHash.padStart(10, '0');
+// };
+
+func.common.fastHash = function (inputString) {
+  let hash = 0x811c9dc5; // FNV offset basis
+
+  for (let i = 0; i < inputString.length; i++) {
+    hash ^= inputString.charCodeAt(i);
+    // FNV prime multiplication with 32-bit overflow
+    hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+  }
+
+  // Convert to base36 and pad to 10 characters
+  return ((hash >>> 0).toString(36) + '0000000000').slice(0, 10);
 };
 
 glb.new_xu_render = false;
@@ -34964,353 +34977,1451 @@ 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;
-  }
+// 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;
+//   ///////////
+//   var is_mobile = glb.MOBILE_ARR.includes(paramsP.screenInfo.properties?.menuType) ? true : false;
 
-  const get_element_info = function () {
-    var ret = {};
-    let currentRecordId = _ds?.currentRecordId || '';
+//   const get_element_info = function () {
+//     var ret = {};
+//     let currentRecordId = _ds?.currentRecordId || '';
 
-    let $div = func.UI.utils.find_in_element_data('xuData', $container.parent(), 'nodeid', nodeP.id);
+//     let $div = func.UI.utils.find_in_element_data('xuData', $container.parent(), 'nodeid', nodeP.id);
 
-    $.each($div, function (key, val) {
-      if ($(val)?.data().xuData?.recordid === currentRecordId && $(val)?.data().xuData?.key === keyP && $(val)?.prop('tagName') !== 'XURENDER') {
-        ret = {
-          div: $div,
-        };
-      }
-    });
+//     $.each($div, function (key, val) {
+//       if ($(val)?.data().xuData?.recordid === currentRecordId && $(val)?.data().xuData?.key === keyP && $(val)?.prop('tagName') !== 'XURENDER') {
+//         ret = {
+//           div: $div,
+//         };
+//       }
+//     });
 
-    return ret;
-  };
+//     return ret;
+//   };
 
-  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,
-    });
-  };
+//   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,
+//     });
+//   };
 
-  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 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');
+//     }
 
-    var controller_params = $(xu_modal_controller).data('xuControllerParams');
+//     var controller_params = $(xu_modal_controller).data('xuControllerParams');
 
-    if (!controller_params) {
-      controller_params = {};
-    }
+//     if (!controller_params) {
+//       controller_params = {};
+//     }
 
-    var params = {
-      menuTitle: paramsP.screenInfo.properties?.menuTitle,
-      screenId: paramsP.screenId,
-      $dialogDiv: $div.children(),
-      $container: $container,
-      dsSession: paramsP.dsSessionP,
-    };
+//     var params = {
+//       menuTitle: paramsP.screenInfo.properties?.menuTitle,
+//       screenId: paramsP.screenId,
+//       $dialogDiv: $div.children(),
+//       $container: $container,
+//       dsSession: paramsP.dsSessionP,
+//     };
 
-    controller_params[modal_id] = params;
+//     controller_params[modal_id] = params;
 
-    $(xu_modal_controller).data('xuControllerParams', controller_params);
-    const modalController = await new UI_FRAMEWORK_PLUGIN.modal();
+//     $(xu_modal_controller).data('xuControllerParams', controller_params);
+//     const modalController = await new UI_FRAMEWORK_PLUGIN.modal();
 
-    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);
+//     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);
 
-    return $div;
-  };
+//     return $div;
+//   };
 
-  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 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 close_all_modals = function () {
-    $.each(APP_MODAL_OBJ, function (key, val) {
-      if (val) {
-        // close_modal(key);
-        UI_FRAMEWORK_PLUGIN.modal.close(key);
-      }
-    });
-  };
+//   const close_all_modals = function () {
+//     $.each(APP_MODAL_OBJ, function (key, val) {
+//       if (val) {
+//         // close_modal(key);
+//         UI_FRAMEWORK_PLUGIN.modal.close(key);
+//       }
+//     });
+//   };
 
-  const open_popover = async function ($div) {
-    const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
+//   const open_popover = async function ($div) {
+//     const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
 
-    $(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;
+//     $(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;
 
-    return;
-    popoverController
-      .create({
-        component: 'xu-popover-content-' + SESSION_ID,
-        event: ELEMENT_CLICK_EVENT,
-        translucent: true,
-      })
-      .then((modal) => {
-        modal.present().then(() => {
-          CURRENT_APP_POPOVER = modal;
+//           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 (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);
+//     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 $divP;
-    };
-    if (!nodeP || !nodeP.children) {
-      return await done($divP);
-    }
+//   //   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 (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);
+//   //     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);
+//   // };
 
-            resolve();
-          }),
-        );
-      }
-      await Promise.all(node_promises);
-    }
-    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}"]`);
 
-  //   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 ($el.length > 1) {
+//         console.warn('Multiple elements for xu-ui-id: ' + id, $el);
+//       }
 
-  //   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 $($el[0]);
+//     } catch (e) {
+//       console.error(e);
+//     }
+//   };
 
-  const _$ = function ($elm) {
-    try {
-      const id = $elm.attr('xu-ui-id');
-      if (!id || !glb.DEBUG_MODE) return $elm;
-      const $el = $(`[xu-ui-id="${id}"]`);
+//   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 ($el.length > 1) {
-        console.warn('Multiple elements for xu-ui-id: ' + id, $el);
-      }
+//     _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);
+//         }
+//       }
 
-      return $($el[0]);
-    } catch (e) {
-      console.error(e);
-    }
-  };
+//       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);
+//         }
+//       }
+//     }
 
-  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 ($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);
+//     }
 
-    _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 set_value = function (field_id, value) {
+//       var currentRecordId = _$($div).data().xuData.currentRecordId;
 
-      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);
-        }
-      }
-    }
+//       func.UI.worker.add_to_queue(
+//         SESSION_ID,
+//         'gui event',
+//         'update_datasource',
+//         {
+//           currentRecordId,
+//           field_id,
+//           field_value: value,
+//         },
+//         null,
+//         null,
+//         paramsP.dsSessionP,
+//       );
+//     };
 
-    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);
-    }
+//     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;
 
-    const set_value = function (field_id, value) {
-      var currentRecordId = _$($div).data().xuData.currentRecordId;
+//     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);
+//         }
+//       }
+//     };
 
-      func.UI.worker.add_to_queue(
-        SESSION_ID,
-        'gui event',
-        'update_datasource',
-        {
-          currentRecordId,
-          field_id,
-          field_value: value,
-        },
-        null,
-        null,
-        paramsP.dsSessionP,
-      );
-    };
+//     var $div_content = $div.children();
 
-    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;
+//     $.each($div_content, function (key, val) {
+//       if (!$(val)?.data()?.xuData?.parent_container) {
+//         return true;
+//       }
+//       $(val).data().xuData.parent_container = $div.data().xuData.parent_container;
+//     });
 
-    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;
+//     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');
+//         }
+
+//         var controller_params = $(xu_modal_controller).data('xuControllerParams');
+
+//         if (!controller_params) {
+//           controller_params = {};
+//         }
+
+//         params = {
+//           screenId: paramsP.screenId,
+//           $dialogDiv: $div.children(),
+//           $container: $container,
+//           dsSession: paramsP.dsSessionP,
+//           modal_id,
+//           screenInfo: paramsP.screenInfo,
+//           close_callback: close_modal,
+//           paramsP,
+//         };
+
+//         controller_params[modal_id] = params;
+
+//         $(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);
+
+//           APP_MODAL_OBJ[modal_id] = modal;
+//         } else {
+//           $(modal_id).empty();
+//         }
+
+//         await modalController.init(params);
+
+//         break;
+
+//       case 'popover':
+//         // open_popover($div);
+
+//         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,
+//         };
+
+//         $(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;
+
+//         func.UI.utils.screen_blocker(false, paramsP.prog_id + '_' + paramsP.sourceScreenP);
+//         break;
+
+//       case 'page':
+//         const nav = $nav[0];
+
+//         params = {
+//           div: $div_content,
+//           name: paramsP.screenInfo.properties?.menuTitle,
+//           screenId: paramsP.screenId,
+//           $container: $container,
+//           dsSession: paramsP.dsSessionP,
+//           SESSION_ID,
+//           nav,
+//           paramsP,
+//         };
+
+//         var component_name = 'xu-page-component-' + paramsP.dsSessionP;
+//         if (!$(nav).data().xuData.nav_params) {
+//           $(nav).data().xuData.nav_params = {};
+//         }
+
+//         //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 (!$(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);
+//         }
+
+//         $nav.data().xuData.$div = $div_content;
+
+//         await $nav[0].setRoot('xu-root-component-' + SESSION_ID);
+//         $ret = $container;
+//         break;
+//     }
+//     return $ret;
+//   };
+
+//   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;
+//             }
+
+//             if (props[`xu-exp:${fieldIdP}`]) {
+//               value = (await func.expression.get(SESSION_ID, props[`xu-exp:${fieldIdP}`], dsP, 'widget property')).result;
+//             }
+
+//             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]);
+//           }
+
+//           return { code: return_code, data: data_obj };
+//         };
+
+//         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 _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 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;
+
+//         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);
+//           }
+//         }
+
+//         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);
+
+//         $div.addClass('widget_wrapper'); // class get override in set_attributes_new
+
+//         if (!APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name]) {
+//           return report_error(`plugin ${plugin_name} not found`);
+//         }
+
+//         if (APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest['style.css'].exist) {
+//           load_css_style();
+//         }
+
+//         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 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 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 fx = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
+
+//         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);
+//         }
+
+//         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 (!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, '');
+
+//         if (!$div) return;
+
+//         if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
+//           close_all_modals();
+//         }
+
+//         $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 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);
+//       }
+
+//       $.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);
+//       });
+
+//       return await render_screen_type($div);
+//     },
+//     [`xu-multi-view`]: async function () {
+//       var $div = $container;
+
+//       if (!$div.data().xuData.node || !$div.data().xuData.node.children) {
+//         $div.data().xuData.node = nodeP;
+//       }
+
+//       if (!$div.data().xuData.debug_info) {
+//         $div.data().xuData.debug_info = {
+//           id: nodeP.id,
+//           parent_id: $container.data().xuData.ui_id,
+//         };
+//       }
+
+//       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 (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
+//         close_all_modals();
+//       }
+
+//       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];
+
+//       var continuous_idx = null;
+
+//       if (!_ds.data_feed || _.isEmpty(_ds.data_feed.rows)) {
+//         return await empty_result();
+//       }
+
+//       var i = 0;
+//       for await (const [key, val] of Object.entries(_ds.data_feed.rows)) {
+//         var node = JSON.parse(JSON.stringify(nodeP));
+
+//         _ds.currentRecordId = val._ROWID;
+//         const ret = await iterate_child($div, node, { continuous_idx }, $root_container);
+
+//         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 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;
+
+//         await func.UI.screen.panel_post_render_handler(SESSION_ID, $container, $new_div, nodeP, $div, jobNoP);
+
+//         // TO FIX should be timeout
+//         $container.data().xuData.node.children = $div_items;
+
+//         return $container;
+//       };
+
+//       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, '');
+
+//       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));
+//       }
+
+//       let $ret_panel_div = ret.$new_div;
+
+//       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);
+//         }
+//       }
+
+//       let ret_done = await done($ret_panel_div);
+
+//       return ret_done;
+//     },
+//   };
+
+//   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 $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);
+//       });
+//     }
+
+//     // 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
+//           },
+//         );
+
+//         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, $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 {
+//       await 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);
+//   };
+
+//   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 = '';
+
+//     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 = 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) {
+    _session = SESSION_OBJ[SESSION_ID];
+    _ds = _session.DS_GLB[paramsP.dsSessionP];
+  }
+
+  const prop = nodeP.attributes;
+  const is_mobile = glb.MOBILE_ARR.includes(paramsP.screenInfo.properties?.menuType);
+  const nodeTag = nodeP.tagName;
+
+  // Optimized element finder with caching
+  const get_element_info = function () {
+    if (!_ds) return {};
+
+    const currentRecordId = _ds.currentRecordId || '';
+    const $div = func.UI.utils.find_in_element_data('xuData', $container.parent(), 'nodeid', nodeP.id);
+
+    for (let i = 0; i < $div.length; i++) {
+      const $el = $($div[i]);
+      const xuData = $el.data().xuData;
+      if (xuData?.recordid === currentRecordId && xuData?.key === keyP && $el.prop('tagName') !== 'XURENDER') {
+        return { div: $div };
+      }
+    }
+    return {};
+  };
+
+  const init = async function () {
+    return !!nodeP;
+  };
+
+  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,
+    });
+  };
+
+  const close_modal = async function (modal_id) {
+    delete APP_MODAL_OBJ[modal_id];
+    const xu_modal_controller = document.querySelector('xu-modal-controller');
+    const params = $(xu_modal_controller).data().xuControllerParams?.[modal_id];
+    if (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 close_all_modals = function () {
+    Object.entries(APP_MODAL_OBJ).forEach(([key, val]) => {
+      if (val) {
+        UI_FRAMEWORK_PLUGIN.modal.close(key);
+      }
+    });
+  };
+
+  const open_modal = async function ($div) {
+    const modal_id = `app_modal-${paramsP.dsSessionP}`;
+    let 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');
+    }
+
+    let controller_params = $(xu_modal_controller).data('xuControllerParams') || {};
+
+    controller_params[modal_id] = {
+      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 = new UI_FRAMEWORK_PLUGIN.modal();
+
+    if (!APP_MODAL_OBJ[modal_id]) {
+      APP_MODAL_OBJ[modal_id] = await modalController.create(SESSION_ID, modal_id, paramsP.screenInfo, close_modal);
+    } else {
+      $(modal_id).empty();
+    }
+
+    await modalController.init(SESSION_ID, modal_id);
+    return $div;
+  };
+
+  const open_popover = async function ($div) {
+    const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
+
+    $(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);
+    await popover.open(SESSION_ID);
+    CURRENT_APP_POPOVER = popover;
+  };
+
+  // OPTIMIZED: Parallel child iteration with improved logic
+  const iterate_child = async function ($divP, nodeP, parent_infoP, $root_container, before_record_function) {
+    if (!is_mobile && nodeP.busy) return $divP;
+
+    nodeP.busy = true;
+
+    const done = function ($divP) {
+      setTimeout(() => {
+        nodeP.busy = false;
+      }, 1000);
+      return $divP;
+    };
+
+    if (!nodeP?.children?.length) {
+      return done($divP);
+    }
+
+    if (before_record_function) {
+      await before_record_function();
+    }
+
+    // Parallel rendering for better performance
+    await Promise.all(nodeP.children.map((child, key) => func.UI.screen.render_ui_tree(SESSION_ID, $divP, child, parent_infoP, paramsP, jobNoP, is_skeleton, key, null, nodeP, null, $root_container)));
+
+    return 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 ($el.length > 1) {
+        console.warn(`Multiple elements for xu-ui-id: ${id}`, $el);
+      }
+      return $($el[0]);
+    } catch (e) {
+      console.error(e);
+      return $elm;
+    }
+  };
+
+  const hover_in = function ($div, e) {
+    if (is_skeleton || (e && (EXP_BUSY || UI_WORKER_OBJ.jobs.length))) return;
+
+    CLIENT_ACTIVITY_TS = Date.now();
+
+    const containerXuData = _$($container)?.data()?.xuData;
+    if (containerXuData?.debug_info) {
+      containerXuData.debug_info.hover_item = $div.attr('xu-ui-id');
+    }
+
+    if (!_ds) return;
+
+    // Set attributes
+    const attributes = {};
+    Array.from($div[0].attributes).forEach((attr) => {
+      attributes[attr.name] = attr.value;
+    });
+    _session.DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = attributes;
+
+    const divXuData = $div.data()?.xuData;
+    if (!divXuData) return;
+
+    const _iterate_info = divXuData.iterate_info;
+    if (_iterate_info) {
+      const set_field_value = (field_id, value, is_dynamic) => {
+        if (is_dynamic) {
+          _ds.dynamic_fields[field_id].value = value;
+        } else {
+          try {
+            const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
+            _ds.data_feed.rows[row_idx][field_id] = value;
+          } catch (err) {
+            console.error(err);
+          }
+        }
+      };
+
+      set_field_value(_iterate_info.iterator_key, _iterate_info._key, _iterate_info.is_key_dynamic_field);
+      set_field_value(_iterate_info.iterator_val, _iterate_info._val, _iterate_info.is_val_dynamic_field);
+    }
+
+    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);
+    }
+
+    const iterate_data = $div?.data()?.xuData?.iterate_info;
+    if (iterate_data) {
+      const set_value = (field_id, value) => {
+        func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'update_datasource', { currentRecordId: _$($div).data().xuData.currentRecordId, field_id, field_value: value }, null, null, paramsP.dsSessionP);
+      };
+
+      if (iterate_data.iterator_key) set_value(iterate_data.iterator_key, iterate_data._key);
+      if (iterate_data.iterator_val) set_value(iterate_data.iterator_val, iterate_data._val);
+    }
+  };
+
+  const hover_out = function () {
+    if (is_skeleton) return;
+
+    CLIENT_ACTIVITY_TS = Date.now();
+
+    const containerXuData = _$($container)?.data()?.xuData;
+    if (containerXuData?.debug_info) {
+      containerXuData.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) {
+        let 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];
+          }
+          const expKey = `xu-exp:${property}`;
+          if (paramsP.call_screen_propertiesP[expKey]) {
+            property_value = (await func.expression.get(SESSION_ID, paramsP.call_screen_propertiesP[expKey], 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())) {
+      const uiProps = await ui_framework?.properties?.();
+      if (uiProps) {
+        for (const [key, val] of Object.entries(uiProps)) {
           params.properties[key] = await get_values(key);
         }
       }
     };
 
-    var $div_content = $div.children();
+    const $div_content = $div.children();
 
-    $.each($div_content, function (key, val) {
-      if (!$(val)?.data()?.xuData?.parent_container) {
-        return true;
+    // Update parent container for children
+    $div_content.each((key, val) => {
+      const xuData = $(val)?.data()?.xuData;
+      if (xuData && !xuData.parent_container) {
+        xuData.parent_container = $div.data().xuData.parent_container;
       }
-      $(val).data().xuData.parent_container = $div.data().xuData.parent_container;
     });
 
     let $ret = $div;
-    var $nav = $(SESSION_OBJ[SESSION_ID].root_element).find('xu-nav');
-    var params;
+    const $nav = $(SESSION_OBJ[SESSION_ID].root_element).find('xu-nav');
+    let params;
+
     switch (paramsP.screen_type) {
       case 'modal':
-        const modal_id = 'app_modal-' + paramsP.dsSessionP.toString();
-        var xu_modal_controller = document.querySelector('xu-modal-controller');
+        const modal_id = `app_modal-${paramsP.dsSessionP}`;
+        let 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');
         }
 
-        var controller_params = $(xu_modal_controller).data('xuControllerParams');
-
-        if (!controller_params) {
-          controller_params = {};
-        }
+        let controller_params = $(xu_modal_controller).data('xuControllerParams') || {};
 
         params = {
           screenId: paramsP.screenId,
@@ -35324,25 +36435,20 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
         };
 
         controller_params[modal_id] = params;
-
         $(xu_modal_controller).data('xuControllerParams', controller_params);
-        const modalController = await new UI_FRAMEWORK_PLUGIN.modal();
+
+        const modalController = new UI_FRAMEWORK_PLUGIN.modal();
         await set_call_screen_properties_values(modalController);
-        if (!APP_MODAL_OBJ[modal_id]) {
-          const modal = await modalController.create(params);
 
-          APP_MODAL_OBJ[modal_id] = modal;
+        if (!APP_MODAL_OBJ[modal_id]) {
+          APP_MODAL_OBJ[modal_id] = await modalController.create(params);
         } else {
           $(modal_id).empty();
         }
-
         await modalController.init(params);
-
         break;
 
       case 'popover':
-        // open_popover($div);
-
         const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
         params = {
           menuTitle: paramsP.screenInfo.properties?.menuTitle,
@@ -35356,13 +36462,11 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
         await set_call_screen_properties_values(popover);
         await popover.open(params);
         CURRENT_APP_POPOVER = popover;
-
-        func.UI.utils.screen_blocker(false, paramsP.prog_id + '_' + paramsP.sourceScreenP);
+        func.UI.utils.screen_blocker(false, `${paramsP.prog_id}_${paramsP.sourceScreenP}`);
         break;
 
       case 'page':
         const nav = $nav[0];
-
         params = {
           div: $div_content,
           name: paramsP.screenInfo.properties?.menuTitle,
@@ -35374,18 +36478,21 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
           paramsP,
         };
 
-        var component_name = 'xu-page-component-' + paramsP.dsSessionP;
-        if (!$(nav).data().xuData.nav_params) {
-          $(nav).data().xuData.nav_params = {};
+        const component_name = `xu-page-component-${paramsP.dsSessionP}`;
+        const navXuData = $(nav).data().xuData;
+
+        if (!navXuData.nav_params) {
+          navXuData.nav_params = {};
         }
 
-        //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;
+        // Restore validate
+        if (navXuData.params?.[paramsP.dsSessionP]) {
+          params.$container.data().xuData.validate_screen_ready = navXuData.params[paramsP.dsSessionP].$container.data().xuData.validate_screen_ready;
         }
 
-        if (!$(nav)?.data()?.xuData) return;
-        $(nav).data().xuData.nav_params[paramsP.dsSessionP] = params;
+        if (!navXuData) return;
+        navXuData.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();
@@ -35394,9 +36501,7 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
           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;
@@ -35407,18 +36512,15 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
         $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);
+      default:
+        if (!$nav?.length) {
+          $nav = $('<xu-nav>');
           $container.append($nav);
           func.UI.component.init_xu_nav($container, $nav);
         }
 
         $nav.data().xuData.$div = $div_content;
-
-        await $nav[0].setRoot('xu-root-component-' + SESSION_ID);
+        await $nav[0].setRoot(`xu-root-component-${SESSION_ID}`);
         $ret = $container;
         break;
     }
@@ -35427,130 +36529,92 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
 
   if (!(await init())) return;
   debug();
+
   const fx = {
     widget: async function () {
-      var _session = SESSION_OBJ[SESSION_ID];
+      const exist_elm_obj = get_element_info();
+      let $div = exist_elm_obj.div;
 
-      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) {
+        const plugin_name = prop['xu-widget'];
+        const method = prop['xu-method'];
+        const dsP = paramsP.dsSessionP;
+        const propsP = prop;
+        const sourceP = 'widgets';
+
+        const call_plugin_api = async (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, {
+
+        const report_error = (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,
+            error: !warn,
             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) {
+
+        const get_fields_data = async (fields, props) => {
+          const get_property_value = async (fieldIdP, val) => {
             if (!val) return;
-            var value = fieldIdP in props ? props[fieldIdP] : typeof val.defaultValue === 'function' ? val?.defaultValue?.() : val?.defaultValue;
+
+            let value = fieldIdP in props ? props[fieldIdP] : typeof val.defaultValue === 'function' ? val.defaultValue() : val.defaultValue;
+
             if (val.render === 'eventId') {
               value = props?.[fieldIdP]?.event;
             }
 
-            if (props[`xu-exp:${fieldIdP}`]) {
-              value = (await func.expression.get(SESSION_ID, props[`xu-exp:${fieldIdP}`], dsP, 'widget property')).result;
+            const expKey = `xu-exp:${fieldIdP}`;
+            if (props[expKey]) {
+              value = (await func.expression.get(SESSION_ID, props[expKey], dsP, 'widget property')).result;
             }
 
-            return func.common.get_cast_val(
-              SESSION_ID,
-              'widgets',
-              fieldIdP,
-              val.type, //val.type !== "string" || val.type !== "number" ? "string" : val.type,
-              value,
-              null,
-            );
+            return func.common.get_cast_val(SESSION_ID, 'widgets', fieldIdP, 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)) {
+
+          const data_obj = {};
+          let return_code = 1;
+
+          for (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]);
           }
 
+          data_obj['xu-bind'] = await get_property_value('xu-bind', props['xu-bind']);
+
           return { code: return_code, data: data_obj };
         };
 
-        const load_css_style = function () {
-          const get_css_path = function (resource) {
+        const load_css_style = () => {
+          const get_css_path = (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}`;
+            const manifest = APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest[resource];
+            const dist = manifest.dist ? 'dist/' : '';
+            return `https://${_session.domain}/plugins/${plugin_name}/${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);
+          func.utils.load_css_on_demand(get_css_path('style.css'));
         };
 
         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 indexDist = _plugin.manifest['index.mjs'].dist ? 'dist/' : '';
+        const index = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${indexDist}index.mjs`);
         const methods = index.methods;
+
         if (methods && !methods[method]) {
           return report_error('method not found');
         }
@@ -35559,18 +36623,13 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
         if (fields_ret.code < 0) {
           return report_error(fields_ret.data);
         }
-        const fields = fields_ret.data;
 
-        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);
-          }
-        }
+        const fields = fields_ret.data;
+        const exclude_attributes = Object.keys(propsP).filter((key) => fields[key] !== undefined || fields[`xu-exp:${key}`] !== undefined);
 
-        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);
+        const 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);
 
-        $div.addClass('widget_wrapper'); // class get override in set_attributes_new
+        $div.addClass('widget_wrapper');
 
         if (!APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name]) {
           return report_error(`plugin ${plugin_name} not found`);
@@ -35605,23 +36664,23 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
           plugin_name,
           $containerP: $div,
           plugin_setup: plugin_setup_ret.data,
-
           report_error,
           call_plugin_api,
-          // set_SYS_GLOBAL_OBJ_WIDGET_INFO,
           api_utils,
         };
 
-        const fx = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
+        const runtimeDist = _plugin.manifest['runtime.mjs'].dist ? 'dist/' : '';
+        const fx = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${runtimeDist}runtime.mjs`);
 
         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 css_url = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, 'dist/runtime.css');
+          func.utils.load_css_on_demand(css_url);
         }
 
         if (!fx[method]) {
           throw `Method: ${method} does not exist`;
         }
+
         try {
           await fx[method](fields, params);
         } catch (err) {
@@ -35630,12 +36689,13 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
       }
       return $div;
     },
-    [`xu-single-view`]: async function () {
-      var exist_elm_obj = get_element_info();
-      var $div = exist_elm_obj.div;
+
+    'xu-single-view': async function () {
+      const exist_elm_obj = get_element_info();
+      let $div = exist_elm_obj.div;
 
       if (!exist_elm_obj.div) {
-        var $wrapper = $('<div>');
+        const $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, '');
 
         if (!$div) return;
@@ -35645,67 +36705,41 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
         }
 
         $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();
-          },
+          (e) => hover_in(),
+          (e) => hover_out(),
         );
       }
 
-      const ret = await iterate_child($div, nodeP, null, $div);
+      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);
       }
 
-      $.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);
-      });
+      // Copy xuData and xuAttributes
+      Object.assign($container.data().xuData, _.cloneDeep($div.data().xuData));
+      Object.assign($container.data().xuAttributes, klona.klona($div.data().xuAttributes));
 
       return await render_screen_type($div);
     },
-    [`xu-multi-view`]: async function () {
-      var $div = $container;
 
-      if (!$div.data().xuData.node || !$div.data().xuData.node.children) {
-        $div.data().xuData.node = nodeP;
+    'xu-multi-view': async function () {
+      let $div = $container;
+
+      const divXuData = $div.data().xuData;
+      if (!divXuData.node || !divXuData.node.children) {
+        divXuData.node = nodeP;
       }
 
-      if (!$div.data().xuData.debug_info) {
-        $div.data().xuData.debug_info = {
+      if (!divXuData.debug_info) {
+        divXuData.debug_info = {
           id: nodeP.id,
           parent_id: $container.data().xuData.ui_id,
         };
       }
 
       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);
       };
 
@@ -35714,351 +36748,150 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
       }
 
       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];
-
-      var continuous_idx = null;
 
       if (!_ds.data_feed || _.isEmpty(_ds.data_feed.rows)) {
         return await empty_result();
       }
 
-      var i = 0;
-      for await (const [key, val] of Object.entries(_ds.data_feed.rows)) {
-        var node = JSON.parse(JSON.stringify(nodeP));
-
+      for (const [key, val] of Object.entries(_ds.data_feed.rows)) {
+        const node = JSON.parse(JSON.stringify(nodeP));
         _ds.currentRecordId = val._ROWID;
-        const ret = await iterate_child($div, node, { continuous_idx }, $root_container);
+        await iterate_child($div, node, { continuous_idx: null }, $root_container);
 
         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 done(continuous_idx);
+      return await done(null);
     },
-    [`xu-panel`]: async function () {
+
+    '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 $div_items = $div.data().xuData.node.children;
         await func.UI.screen.panel_post_render_handler(SESSION_ID, $container, $new_div, nodeP, $div, jobNoP);
-
-        // TO FIX should be timeout
         $container.data().xuData.node.children = $div_items;
-
         return $container;
       };
 
-      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, '');
+      const $wrapper = $('<div>');
+      const $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, '');
+
+      const 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);
 
-      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));
       }
 
       let $ret_panel_div = ret.$new_div;
 
-      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);
-        }
+      if (!$ret_panel_div?.children()?.length && 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);
       }
 
-      let ret_done = await done($ret_panel_div);
-
-      return ret_done;
+      return await done($ret_panel_div);
     },
   };
 
-  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 $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);
-      });
-    }
-
-    // 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
-          },
-        );
-
-        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, $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 {
-      await 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);
-  };
-
   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 (ret.has_xu_exp_render_attribute) {
         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() };
+        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 (ret.has_xu_render_attribute) {
+        temp_$div.remove();
+        return $div;
+      }
+
+      temp_$div.replaceWith($div);
+      return $div;
     };
-    if (!element || element === 'script') return await done();
-    let str = '';
 
-    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);
+    if (!element || element === 'script') return await done();
 
-    let temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
-    let $div = temp_$div.clone(true);
+    const 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, '', true);
 
-    // $div.css('display', 'none');
+    const temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
+    const $div = temp_$div.clone(true);
 
     $div.hover(
-      function (e) {
-        hover_in($div, e);
-      },
-      function (e) {
-        hover_out();
-      },
+      (e) => hover_in($div, e),
+      (e) => hover_out(),
     );
+
     if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
-      $div.on('click contextmenu', function (e) {
-        hover_in($div, e);
-      });
+      $div.on('click contextmenu', (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'])) {
+    const 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 || nodeTag === '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 {
-      //   // }
-      // };
+
+    if (nodeP?.attributes?.['xu-viewport'] === 'true') {
       const xu_viewport = function () {
         const observer_inViewport = new IntersectionObserver(
-          function (entries) {
+          (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
-          },
+          { threshold: 0.1 },
         );
 
         const observer_outViewport = new IntersectionObserver(
-          function (entries) {
+          (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
-          },
+          { threshold: 0 },
         );
 
         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]);
         });
 
@@ -36066,66 +36899,49 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
           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') {
+            if (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);
   };
 
+  // Handle content attribute
   if (nodeP.content && nodeP.attributes) {
     nodeP.attributes['xu-content'] = nodeP.content;
   }
 
-  if (nodeP.tagName === 'xu-widget') {
+  // Handle xu-widget
+  if (nodeTag === 'xu-widget') {
     if (is_skeleton) return;
     return await fx['widget']();
   }
-  if (fx[nodeP.tagName]) {
-    return await fx[nodeP.tagName]();
+
+  // Handle custom tags
+  if (fx[nodeTag]) {
+    return await fx[nodeTag]();
   }
-  // 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 {
+  // Render HTML element
   if (!glb.new_xu_render) {
-    return await draw_html_element_org(nodeP.tagName);
+    return await draw_html_element_org(nodeTag);
   }
-  return await draw_html_element(nodeP.tagName);
-
-  // }
+  return await draw_html_element(nodeTag);
 };
 
 func.UI.screen.refresh_document_changes_for_realtime_update = async function (SESSION_ID, doc_change) {