migrate the below module.

    -> plm_web_3d

plm_web_3d/controllers/main.py

@@ -74,10 +74,11 @@ def getProductInfo(self, document_id):
                 out["document"] = document
                 for component in ir_attachment.linkedcomponents:
                     components = """
-                    <li class="attribute_info"><b>Product Name:</b> %s</li>
+                    <li class="attribute_info" id="linked_component_id" data-id=%s><b>Product Name:</b> %s</li>
                     <li class="attribute_info"><b>Product Revision:</b> %s</li>
                     <li class="attribute_info"><b>Description:</b> %s</li>
                     """ % (
+                        component.id,
                         component.engineering_code,
                         component.engineering_revision,
                         component.name,

plm_web_3d/static/src/css/OdooCADApplication.css

@@ -409,12 +409,12 @@ ul, #myUL {
 }
 
 /* Create the caret/arrow with a unicode, and style it */
-.caret::before {
+/*.caret::before {
   content: "\25B6";
   color: black;
   display: inline-block;
   margin-right: 6px;
-}
+}*/
 
 /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
 .caret-down::before {

plm_web_3d/static/src/js/OdooCADApplication.js

@@ -293,8 +293,12 @@ function init() {
 /*
  * Inizialize tree view search
  */
-  var input_document_tree = document.getElementById('input_search_document_tree');
-  //input_document_tree.addEventListener("keyup", OdooCad.search_document_tree);
+// Commented the above as there is no id in the document with
+// input_search_document_tree present.
+//  var input_document_tree = document.getElementById('input_search_document_tree');
+  var input_document_list = document.getElementById('input_search_document_list');
+  console.log(input_document_list);
+  input_document_list.addEventListener("keyup", OdooCad.search_document_tree);
 /*
  * function to hide show all components
  */

plm_web_3d/static/src/js/lib/odoocad/odoocad.js

@@ -12,7 +12,7 @@ const odoo_hilight_color= new THREE.Color("#eda3da")
 
 var guid = () => { var w = () => { return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); }
   return  `${w()}${w()}-${w()}-${w()}-${w()}-${w()}${w()}${w()}`;}
-  
+
 class OdooCAD{
 	constructor(scene){
         this.tree_ref_elements={}
@@ -31,7 +31,7 @@ class OdooCAD{
      * Get the bounding box of all the added mesh items
      */
     getBBox(){
-        
+
         const box = new THREE.Box3();
         var items = this.items;
         for (let i = 0; i < items.length; i=i+1) {
@@ -43,7 +43,7 @@ class OdooCAD{
                      };
         return box;
     }
-    
+
 	addItemToScene(object, force_material=true){
         var self=this;
 		/*
@@ -75,9 +75,7 @@ class OdooCAD{
 			this.active_bbox=this.getBBox();
 			return out_htm_structure;
 		}
-		//
-
-		///
+
 		set_str_name(span_element){
             var guid_name = span_element.parentElement.attributes['webgl_ref_name'].value;
             var obj_3d = this.tree_ref_elements[guid_name]
@@ -91,7 +89,7 @@ class OdooCAD{
             xmlhttp.open("GET", url, true);
             xmlhttp.send();
         }
-        
+
 		get_li_structure(object, nested=false){
             var self = this;
             var found=false;
@@ -102,7 +100,7 @@ class OdooCAD{
             else{
                 out_lis='<ul id="myUL">';
             }
-            
+
             for (let i = 0; i < object.children.length; i++) {
                   if (object.children[i].type=='Group' || object.children[i].name!=''){
                      const [inner_html, children_found] = self.get_li_structure(object.children[i], true);
@@ -151,9 +149,9 @@ class OdooCAD{
             show_hide_item(guid_item_name, true);
         }
         //
-        search_document_tree(element) { 
+        search_document_tree(element) {
             var input, filter, ul, li, a, i, txtValue;
-            input = document.getElementById("input_search_document_tree");
+            input = document.getElementById("input_search_document_list");
             filter = input.value.toUpperCase();
             ul = document.getElementById("document_tree");
             li = ul.getElementsByTagName("li");
@@ -173,12 +171,12 @@ class OdooCAD{
             var html_out = "<div class='tree_structure' style='overflow-y: scroll;min-height: 1px;max-height: 400px;'>";
             html_out += out_html_structure
             html_out += "</div>";
-            
+
             var li_document_tree = document.querySelectorAll('#document_tree')
             li_document_tree[0].innerHTML=html_out;
             var toggler = document.getElementsByClassName("caret");
             var i;
-            
+
             for (i = 0; i < toggler.length; i++) {
               toggler[i].onmouseover=function(){
                   var webgl_name = this.childNodes[0].attributes['webgl_ref_name'].value;
@@ -204,8 +202,17 @@ class OdooCAD{
                   });
               }
               toggler[i].addEventListener("click", function() {
-                this.parentElement.querySelector(".nested").classList.toggle("active");
-                this.classList.toggle("caret-down");
+                  let url = location.origin;
+                  let product_tag = document.getElementById('linked_component_id');
+                  if(product_tag && product_tag.length != 0){
+                    let product_id = product_tag.dataset.id
+                    if(product_id){
+                        url = url + '/odoo/product.product/' + product_id
+                        window.open(url);
+                    }
+                  }
+//                this.parentElement.querySelector(".nested").classList.toggle("active");
+//                this.classList.toggle("caret-down");
               });
             }
             //
@@ -218,15 +225,15 @@ class OdooCAD{
                             icon.classList.remove('fa-eye');
                             icon.classList.add('fa-eye-slash');
                             groupObj.visible=false;
-                      } 
+                      }
                       else {
                         icon.classList.remove('fa-eye-slash');
                         icon.classList.add('fa-eye');
                         groupObj.visible=true;
                       }
                     });
                 }
-            //
+
             var span_tree_documents = document.getElementsByClassName("document_tree_span");
             for (i = 0; i < span_tree_documents.length; i++) {
                     this.set_str_name(tree_item_visibility[i])
@@ -236,20 +243,20 @@ class OdooCAD{
 		create_relation_structure(object){
             const grp_types = ["Group", "Object3D"];
             var self = this;
-            
+
             var html_out = "";
             for (let i = 0; i < object.children.length; i++) {
                   if (grp_types.includes(object.children[i].type)){
                     const [inner_html, _children] = self.get_li_structure(object.children[i]);
-                    html_out += inner_html;          
+                    html_out += inner_html;
                   }
             }
             return html_out;
         }
-		
+
 		removeItemToSeen(object){
 			/* TODO: make the remove operation */
 		}
 }
 
-export {OdooCAD}
+export {OdooCAD}

plm_web_3d/views/web_template.xml

@@ -116,7 +116,7 @@
                                     <button type="button" id="show_all_parts" title="Un-Hide"
                                             class="fa fa-lightbulb-o"></button>
                                 </div>
-                                <lu id="document_list">
+                                <lu id="document_tree">
                                 </lu>
                             </div>
                         </div>