diff --git a/plm/models/mrp_bom_line.py b/plm/models/mrp_bom_line.py
index 4cda7838..634918de 100755
--- a/plm/models/mrp_bom_line.py
+++ b/plm/models/mrp_bom_line.py
@@ -217,6 +217,8 @@ def _related_doc_ids(self):
          ('server', 'Server')],
         _('Cutted Compute Type'),
         default='none')
+    
+    product_tag_ids = fields.Many2many(related='product_tmpl_id.product_tag_ids')
 
     product_tag_ids = fields.Many2many(related='product_tmpl_id.product_tag_ids')
     
diff --git a/plm/models/product_product.py b/plm/models/product_product.py
index c1eb1048..120ec013 100755
--- a/plm/models/product_product.py
+++ b/plm/models/product_product.py
@@ -1800,17 +1800,13 @@ def name_get(self):
 
     @api.model
     def _name_search(self, name, domain=None, operator='ilike', limit=None, order=None):
-        if not domain:
-            domain=[('engineering_code', 'ilike', name)]
-        else:
-            domain = expression.OR([domain,
-                                   [('engineering_code', 'ilike', name)]])
+        engineering_code_products = self.search([('engineering_code', 'ilike', name)])
         product_ids = list(super(ProductProduct, self)._name_search(name,
                                                                     domain,
                                                                     operator,
                                                                     limit,
                                                                     order=None))
-        return list(set(product_ids))
+        return list(set(product_ids + engineering_code_products.ids))
     
     @api.model
     def getExpodedBom(self, ids):
diff --git a/plm/views/ir_attachment_view.xml b/plm/views/ir_attachment_view.xml
index 71b75a03..0d098143 100755
--- a/plm/views/ir_attachment_view.xml
+++ b/plm/views/ir_attachment_view.xml
@@ -107,7 +107,7 @@
 								icon="fa-bars"/>
 						<button name="open_related_document_revisions"
 						        type="object"
-						        string="BOM Rev."
+						        string="N.Rev."
 						        class="oe_stat_button"
 						        icon="fa-tasks"
 						        invisible="engineering_revision_count &lt;=1">
diff --git a/plm/views/mrp_extension.xml b/plm/views/mrp_extension.xml
index 78da2577..e9f96617 100755
--- a/plm/views/mrp_extension.xml
+++ b/plm/views/mrp_extension.xml
@@ -52,6 +52,7 @@
                 <field name="engineering_revision" readonly="True"/>
                 <field name="engineering_state"/>
                 <field name="description" select="True"/>
+                <field name="product_tag_ids" widget="many2many_tags" options="{'color_field': 'color'}" />
                 <field name="source_id" string="Source Relation" widget="many2one"
                 	   context="{'kanban_view_ref':'plm.document_kanban_view',
         						 'tree_view_ref':'plm.ir_attachment_tree',
@@ -290,6 +291,7 @@
                 <field name="product_id" string="Component Name"/>
                 <field name="engineering_revision" string="Revision"/>
                 <field name="description"/>
+                <field string="Tags" name="product_tag_ids"/>
                 <field name="source_id" string="Source Relation" widget="many2one"
                 	   context="{'kanban_view_ref':'plm.document_kanban_view',
         						 'tree_view_ref':'plm.ir_attachment_tree',
diff --git a/plm_web_3d/__manifest__.py b/plm_web_3d/__manifest__.py
index 756407cf..4d82a4dd 100644
--- a/plm_web_3d/__manifest__.py
+++ b/plm_web_3d/__manifest__.py
@@ -20,7 +20,7 @@
 ##############################################################################
 {
     "name": "PLM Web 3d Support",
-    "version": "17.0.0.1",
+    "version": "17.0.0.3",
     "author": "OmniaSolutions",
     "website": "https://odooplm.omniasolutions.website",
     "category": "Manufacturing/Product Lifecycle Management (PLM)",
diff --git a/plm_web_3d/controllers/main.py b/plm_web_3d/controllers/main.py
index 30d5f6d3..381cbe98 100755
--- a/plm_web_3d/controllers/main.py
+++ b/plm_web_3d/controllers/main.py
@@ -38,7 +38,7 @@ def download_treejs_model(self, document_id):
                 response = request.make_response(content_base64, headers)
                 return response
         return Response(response="Document Not Found %r " % document_id, status=500)
-
+    
     def document_extra(self, document):
         """
             this function id for customising the documents attributes
@@ -79,4 +79,15 @@ def getProductInfo(self, document_id):
                     components = self.component_extra(components)
                     out['component']=components
         return json.dumps(out)
+    
+    @route('/plm/get_3d_web_document_info', type='http', auth="user")
+    @webservice
+    def get_3d_web_document_info(self, src_name):
+        src_name = src_name.split("(")[0] # this split is needed for solidwoks file the put the configuration on the name filename(<configuration name>)description
+        out = f"""<span>{src_name}</span>"""
+        for ir_attachment in request.env['ir.attachment'].sudo().search(['|',('name','ilike', src_name),('engineering_code','ilike', src_name)]):
+            for product_product_id in ir_attachment.linkedcomponents:
+                out = f"""<span title={product_product_id.name}>{product_product_id.engineering_code} Rev. {product_product_id.engineering_revision}</span>"""
+                break
+        return out
   
\ No newline at end of file
diff --git a/plm_web_3d/models/ir_attachment.py b/plm_web_3d/models/ir_attachment.py
index ede7aa9a..01abc73d 100644
--- a/plm_web_3d/models/ir_attachment.py
+++ b/plm_web_3d/models/ir_attachment.py
@@ -24,6 +24,7 @@
 @author: mboscolo
 '''
 import os
+import json
 import logging
 import datetime
 from odoo import models
@@ -34,7 +35,7 @@
 from datetime import timedelta
 from odoo.tools import DEFAULT_SERVER_DATETIME_FORMAT
 import urllib.parse
-SUPPORTED_WEBGL_EXTENTION = ['.gltf','.glb','.fbx','.obj','.wrl','.json', '.stl','.svg', '.dxf']
+SUPPORTED_WEBGL_EXTENTION = ['.3mf','.gltf','.glb','.fbx','.obj','.wrl','.json', '.stl','.svg', '.dxf']
 #
 #
 class IrAttachment(models.Model):
@@ -77,7 +78,7 @@ def get_url_for_3dWebModel(self):
                     url_params = urllib.parse.urlencode({'document_id': rel.child_id.id,
                                                          'document_name': rel.child_id.name})
             if url_params:
-                return "%s/plm/show_treejs_model?%s" % (base_url, url_params)
+                return f"{base_url}/plm/show_treejs_model?{url_params}"
     
     def show_releted_3d(self):
         for ir_attachment in self:
@@ -88,5 +89,14 @@ def show_releted_3d(self):
                         'type': 'ir.actions.act_url',
                         'target': self,
                         'url': url
-                        }                   
-                    
\ No newline at end of file
+                        }
+
+    def get_all_relation(self, document_id, exte):
+        out={}
+        if exte in document_id.name:
+            out[document_id.id] = document_id.name
+        for child_attachment_id in self.getRelatedHiTree(document_id.id):
+            if exte in self.browse(child_attachment_id).name:
+                out[child_attachment_id.id]=child_attachment_id.name
+        return out
+        
\ No newline at end of file
diff --git a/plm_web_3d/static/src/css/OdooCADApplication.css b/plm_web_3d/static/src/css/OdooCADApplication.css
index fbf78c01..dc4edcc6 100644
--- a/plm_web_3d/static/src/css/OdooCADApplication.css
+++ b/plm_web_3d/static/src/css/OdooCADApplication.css
@@ -47,7 +47,7 @@
 	
 }
 .main_command_slide {
-  height: 20px;
+  height: 26px;
   box-shadow:2px 2px 5px 1px grey;
   width: auto;
   opacity: .5;
@@ -65,7 +65,7 @@
   transform-origin: bottom;  
 }
 .main_command_slide:hover{
-	 height: 20%;
+	 height: 210px;
 	 background-color: transparent;
 	 opacity: 1; 
 	 
@@ -138,6 +138,33 @@
      cursor: row-resize;
 }
 
+#object_explosion {
+  margin: 10px;
+  background: #997992;
+  -webkit-appearance: none;
+  background-color: white;
+  border-radius: 5px;  
+}
+
+#object_explosion::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 10px;
+  background: #997992;
+  cursor: pointer;
+}
+
+#object_explosion::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  background: #997992;
+  cursor: pointer;
+}
+#object_explosion:hover {
+  opacity: 1.0;
+}
+
 #object_transparency {
   margin: 10px;
   
@@ -146,6 +173,9 @@
   background-color: white;
   border-radius: 5px;  
 }
+
+
+
 #object_transparency::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
@@ -217,6 +247,10 @@ label{
   width: 300px;
   visibility: hidden;
   opacity:0;  
+  resize: horizontal;
+  overflow: auto;
+  direction: rtl;
+  min-width: 300px;
 }
 
 #main_div_hidden{
@@ -256,7 +290,14 @@ div.info_header{
 #click_show:hover{
   background-color:gray;
 }
-
+#tree_structure{
+  margin-left: auto;
+  margin-right: auto;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+  height: 500px;
+}
 li.attribute_info{
     text-align: left;
 }
@@ -339,4 +380,59 @@ li.attribute_info{
 
 .cube__face--bottom {
   transform: rotateX(90deg) rotateX(180deg) translateZ(-40px);
-}
\ No newline at end of file
+}
+/* Remove default bullets */
+ul, #myUL {
+  list-style-type: none;
+}
+
+/* Remove margins and padding from the parent ul */
+#myUL {
+  margin: 0;
+  padding: 0;
+}
+
+/* Style the caret/arrow */
+.caret {
+  cursor: pointer;
+  user-select: none; /* Prevent text selection */
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.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 {
+  transform: rotate(90deg);
+}
+
+/* Hide the nested list */
+.nested {
+  display: none;
+}
+
+/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
+.active {
+  display: block;
+}
+#document_tree{
+	direction: ltr;
+	text-align: left;
+}
+.document_tree_line>span:hover {
+  background-color: #eda3da;
+}
+.document_tree_line>i{
+    padding: 8px;
+}
+.document_tree_line>i:hover{
+	background-color: #eda3da;
+}
+
+
+
diff --git a/plm_web_3d/static/src/js/OdooCADApplication.js b/plm_web_3d/static/src/js/OdooCADApplication.js
index 07c256b6..0faf8dd7 100644
--- a/plm_web_3d/static/src/js/OdooCADApplication.js
+++ b/plm_web_3d/static/src/js/OdooCADApplication.js
@@ -17,6 +17,7 @@ let OdooCad;
 let cube;
 let clicked = false;
 const ODOO_COLOR = '#714B67';
+const DEBUG_SCENE=true;
 var strDownloadMime = "image/octet-stream";
 
 const measurementLabels = {};
@@ -58,7 +59,11 @@ function createSphereHelper() {
 
 function fitCameraToSelection(selection, fitOffset = 1.2 ) {
 	  const box = new THREE.Box3();
-	  for( const object of selection ) box.expandByObject( object );
+	  for( const object of Object.values(selection) ) {
+          if(object.visible){
+            box.expandByObject( object );
+          }
+      }
 	  const size = box.getSize( new THREE.Vector3() );
 	  const center = box.getCenter( new THREE.Vector3() );
 	  const maxSize = Math.max( size.x, size.y, size.z );
@@ -79,6 +84,7 @@ function fitCameraToSelection(selection, fitOffset = 1.2 ) {
 	  camera.updateProjectionMatrix();
 	  camera.position.copy( controls.target ).sub(direction);
 	  resetLight(box, maxSize);
+	  sphereHelper.scale.set(maxSize/100,maxSize/100,maxSize/100)
 	  controls.update();
 	  render();
 };
@@ -208,6 +214,27 @@ function createMarker(){
 	return new_point
 }
 
+function show_all_scene_item(){
+    var i;
+    var tree_item_visibility = document.getElementsByClassName("tree_item_visibility");
+    for (i = 0; i < tree_item_visibility.length; i++) {
+        var icon = tree_item_visibility[i]
+        icon.classList.remove('fa-eye-slash');
+        icon.classList.add('fa-eye');
+    }
+    OdooCad.show_all();                    
+}
+
+function hide_all_scene_item(){
+    var i;
+    var tree_item_visibility = document.getElementsByClassName("tree_item_visibility");
+    for (i = 0; i < tree_item_visibility.length; i++) {
+        var icon = tree_item_visibility[i]
+        icon.classList.remove('fa-eye');
+        icon.classList.add('fa-eye-slash');
+    }
+    OdooCad.hide_all();
+}
 
 function init() {
 /*
@@ -263,8 +290,28 @@ function init() {
  */
 	OdooCad = new ODOOCAD.OdooCAD(scene);
 	OdooCad.load_document(document_id, document_name);
+/*
+ * Inizialize tree view search
+ */
+  var input_document_tree = document.getElementById('input_search_document_tree');
+  input_document_tree.addEventListener("keyup", OdooCad.search_document_tree);
+/*
+ * function to hide show all components
+ */
+  var bnt_hide_all_parts = document.getElementById('hide_all_parts');
+  bnt_hide_all_parts.addEventListener("click", hide_all_scene_item);
+  
+  
+  var bnt_show_all_parts = document.getElementById('show_all_parts');
+  bnt_show_all_parts.addEventListener("click", show_all_scene_item);
+
 }
 
+
+
+
+
+
 function getCameraCSSMatrix(matrix) {
 
   var elements = matrix.elements;
@@ -299,7 +346,7 @@ function epsilon( value ) {
 function initcommand(){
 	var element = document.getElementById("fit_view");
 	element.onclick = function(event) {
-		fitCameraToSelection(OdooCad.items,
+		fitCameraToSelection(OdooCad.tree_ref_elements,
 							 1.1);
 	}
 	var selector = document.getElementById("webgl_background");
@@ -321,7 +368,10 @@ function initcommand(){
 	html_canvas.addEventListener("OdooCAD_fit_items", fitCameraToSelectionEvent, false);
 	var object_transparency = document.getElementById("object_transparency");
 	object_transparency.oninput = change_object_transparency;
-	
+    
+    var object_explosion = document.getElementById("object_explosion");
+    object_explosion.oninput = change_object_explosion;
+    	
 	var colorPicker = document.getElementById("object_color");
 	colorPicker.oninput = change_object_color;
 	/*
@@ -402,28 +452,55 @@ var change_object_color = function(event){
 	}
 }
 
+var apply_transparency = function(item, value){
+        var material = item.material;
+             
+        if(value){
+            if (value>99.9){
+                material.transparent=false;
+                material.alphaTest = false;
+            } else{
+                material.side=THREE.DoubleSide;
+                material.transparent=true;
+                material.opacity = value/100;
+                material.alphaTest = 0.1;
+            }
+        }
+        else{
+            material.transparent=true;
+            material.opacity=0;
+        }   
+}
 var change_object_transparency = function(event) {
 	var items = OdooCad.items;
+	var value = this.value;
 	for (let i = 0; i < items.length; i=i+1) {
-		var material = items[i].material;
-		if(this.value>0){
-			if (this.value>99.9){
-				material.transparent=false;	
-			} else{
-				material.transparent=true;
-				material.opacity = this.value/100;
-			}
-		}
-		else{
-			material.transparent=true;
-			material.opacity=0;
-			
-		}
+        var loop_item = items[i];
+        loop_item.traverse( function ( child_mesh ) {
+            if (child_mesh.type=="Mesh"){
+                apply_transparency(child_mesh, value);
+                }
+        });
 	}
 }
 
+var change_object_explosion = function(event){
+    var entitys_BBOX = OdooCad.active_bbox;
+    var center = new THREE.Vector3();
+    var items = OdooCad.items;
+    var value = this.value;
+    var factor= entitys_BBOX.max.length()/10000
+    for (let i = 0; i < items.length; i=i+1) {
+        var loop_item = items[i];    
+            explode(loop_item,
+                    entitys_BBOX.getCenter(center),
+                    value,
+                    factor) ;
+        }
+}
+
 var fitCameraToSelectionEvent = function(e){
-	fitCameraToSelection(OdooCad.items,1.1);	
+	fitCameraToSelection(OdooCad.tree_ref_elements,1.1);	
 }
 
 /**
@@ -581,33 +658,43 @@ function addLight(){
 	const group = new THREE.Group();
 	scene.add( group );
 
-	light1 = new THREE.DirectionalLight( 0xf7d962, 2, 45);
+	light1 = new THREE.DirectionalLight( 0xf7d962, 0.1);
 	light1.castShadow = true; // default false
 	light1.position.z = 70;
 	light1.position.y = - 70;
 	light1.position.x = - 70;
 	scene.add( light1 );
 	
-	light2 = new THREE.DirectionalLight( 0xffdddd, 2, 45 );
+	light2 = new THREE.DirectionalLight( 0xffdddd, 0.1 );
 	light2.castShadow = true; // default false
 	light2.position.z = 70;
 	light2.position.x = - 70;
 	light2.position.y = 70;
 	scene.add( light2 );
 	
-	light3 = new THREE.DirectionalLight( 0xf7d962, 2, 45 );
+	light3 = new THREE.DirectionalLight( 0xf7d962, 0.1 );
 	light3.castShadow = true; // default false
 	light3.position.z = 70;
 	light3.position.x = 70;
 	light3.position.y = - 70;
 	scene.add( light3 );
 
-   const ambientLight = new THREE.HemisphereLight('blue', // bright sky color
-                                                  'darkslategrey', // dim ground color
-                                                  1, // intensity
+    const ambientLight = new THREE.HemisphereLight('#b199ff',           // bright sky color
+                                                  'darkslategrey',  // dim ground color
+                                                  1.5,                // intensity
     );
     
     scene.add(ambientLight);
+    if (DEBUG_SCENE){
+        let i = 0;
+        const lights = [light1,light2,light3]; 
+        while (i < lights.length) {
+            var directionalLightHelper = new THREE.DirectionalLightHelper(lights[i]);
+            scene.add( directionalLightHelper );
+            i++;
+        }
+
+    }
 }
 
 function showSnapPoint(){
@@ -694,7 +781,7 @@ function tweenCamera(position){
                         offset.y,
                         offset.z);
     //controls.update();
-    fitCameraToSelection(OdooCad.items,
+    fitCameraToSelection(OdooCad.tree_ref_elements,
                         1.1);
     //render();
 }
@@ -735,6 +822,67 @@ function getElementByXpath(path, document_env) {
 	  return document_env.evaluate(path, document_env, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
 }
 
+// explode
+/**
+ * obj : the current node on the scene graph
+ * box_ct_world : a vec3 center of the bounding box
+ * Thank to https://stackoverflow.com/questions/46101726/how-to-explode-a-3d-model-group-in-threejs
+ */
+/**
+ * obj : the current node on the scene graph
+ * box_ct_world : a vec3 center of the bounding box
+ * 
+ */
+function explode(obj,
+                 box_center,
+                 speed,
+                 factor){
+    //var scene = this.el.sceneEl.object3D ; //I am using Aframe , so this is how I retrieve the whole scene .   
+    if(obj instanceof THREE.Mesh){
+        var position = obj.position ; 
+
+        position.setFromMatrixPosition(scene.matrixWorld) ; 
+    
+        var addx =0 ;
+        var addy =0 ;
+        var addz =0 ; 
+    
+        /**
+         * This is the vector from the center of the box to the node . we use that to translate every meshes away from the center
+         */
+        var addx =(position.x - box_center.x) * speed * factor; 
+        var addy =(position.y - box_center.y) * speed * factor;
+        var addz =(position.z - box_center.z) * speed * factor; 
+        var explode_vectorx=  addx;
+        var explode_vectory=  addy;
+        var explode_vectorz=  addz;
+    
+        var vector = new THREE.Vector3(explode_vectorx , explode_vectory, explode_vectorz) ; 
+        obj.position.set(vector.x , vector.y , vector.z ) ;
+    
+        if(obj.children.length != 0 ){
+          for(var i = 0 ; i < obj.children.length ; i++){
+             explode(obj.children[i],
+                     box_center,
+                     speed,
+                     factor); 
+          }
+        }
+      }
+      else{
+        if(obj.children.length != 0 ){
+            for(var i = 0 ; i < obj.children.length ; i++){
+                explode(obj.children[i],
+                        box_center,
+                        speed,
+                        factor); 
+            }            
+        }
+     }
+};
+
+
+
 document.addEventListener('DOMContentLoaded', function() {
 	init();
 	initcommand();
@@ -845,5 +993,6 @@ const defined_orientation = {
     }
     };
 
-export {camera}
-export {tweenCamera}
+
+export {camera};
+export {tweenCamera};
diff --git a/plm_web_3d/static/src/js/lib/odoocad/loaders.js b/plm_web_3d/static/src/js/lib/odoocad/loaders.js
index f8a8c6d6..13357e5d 100644
--- a/plm_web_3d/static/src/js/lib/odoocad/loaders.js
+++ b/plm_web_3d/static/src/js/lib/odoocad/loaders.js
@@ -7,6 +7,7 @@ import { OBJLoader } from '../three.js/examples/jsm/loaders/OBJLoader.js';
 import { VRMLLoader } from '../three.js/examples/jsm/loaders/VRMLLoader.js';
 import { STLLoader } from '../three.js/examples/jsm/loaders/STLLoader.js';
 import { SVGLoader } from '../three.js/examples/jsm/loaders/SVGLoader.js';
+import { ThreeMFLoader } from '../three.js/examples/jsm/loaders/3MFLoader.js';
 import { DXFLoader } from "./DXFLoader.js"
 
 
@@ -17,6 +18,7 @@ const vRMLLoader = new VRMLLoader();
 const stlLoader = new STLLoader();
 const svgloader = new SVGLoader();
 const dxfLoader = new DXFLoader();
+const threeMFLoader = new ThreeMFLoader();
 const loader = new THREE.ObjectLoader();
 
 
@@ -76,7 +78,10 @@ class Loader {
         }   
         if (['dxf'].includes(exte)){
             this.loadDxf(document_name, url);
-        }   
+        }
+        if (['3mf'].includes(exte)){
+            this.load3mf(document_name, url);
+        }
 	}
 	loadDxf(document_name, url){
         var self=this;
@@ -114,6 +119,48 @@ class Loader {
 			alert("Unable to load the " + document_name + " err: " + err);
 		});		
 	}
+	
+	load3mf(document_name, url){
+        
+        var load3emfObj = function(args){
+            if(args.type=="Group"){
+                var i;
+                var children = args.children;
+                for (i = 0; i < children.length; i++) {
+                    if(children[i].type=="Mesh"){
+                        self.odooCad.addItemToScene(args);
+                        break;
+                    } 
+                    else {
+                        load3emfObj(children[i]);
+                    }
+                }
+            }
+        }
+        
+        var self=this;
+        threeMFLoader.load( url,
+            //load
+            function ( mfArgs ) {
+                mfArgs.traverse( function ( child ) {
+                    child.castShadow = true;
+                } );
+                self.odooCad.addItemToScene(mfArgs, false);
+            },
+            //progress
+            function ( xhr ) {
+                var percentage = (xhr.loaded / xhr.total) * 100;
+                self.progress_bar.style.width = percentage + '%';
+                console.log(self.progress_bar.style.width + ' loaded')
+            },
+            //error
+            
+            function ( err ) {
+                alert("Unable to load the " + document_name + " err: " + err);
+            }
+        );     
+    }
+	
 	loadfBXLoader(document_name, url){
 	   var self=this;
 		fBXLoader.load( url, function ( gltf ) {
@@ -136,8 +183,8 @@ class Loader {
 	
 	loadoBJLoader(document_name, file_path){
 	   var self=this;
-		oBJLoader.load( file_path, function ( gltf ) {
-			var children = gltf.children; 
+		oBJLoader.load(file_path, function ( objArgs ) {
+			var children = objArgs.children; 
 			var i;
 			for (i = 0; i < children.length; i++) {
 				self.odooCad.addItemToScene(children[i]);
diff --git a/plm_web_3d/static/src/js/lib/odoocad/odoocad.js b/plm_web_3d/static/src/js/lib/odoocad/odoocad.js
index 84cc10f5..6cae3513 100644
--- a/plm_web_3d/static/src/js/lib/odoocad/odoocad.js
+++ b/plm_web_3d/static/src/js/lib/odoocad/odoocad.js
@@ -7,13 +7,19 @@ import * as THREE from '../three.js/build/three.module.js';
  */
 import * as ODOOLOADER from './loaders.js';
 
-const html_canvas =  document.getElementById('odoo_canvas');
+const html_canvas = document.getElementById('odoo_canvas');
+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={}
 		this.scene = scene;
-		this.loader = new ODOOLOADER.Loader(this);
 		this.items = [];
+		this.active_bbox=undefined;
+		this.loader = new ODOOLOADER.Loader(this);
 	}
 	/*
 	 * load document from odoo using the built in loader
@@ -21,44 +27,212 @@ class OdooCAD{
 	load_document(document_id, document_name){
 		this.loader.load_document(document_id, document_name);
 	}
-	
-	addItemToScene(object){
+    /*
+     * 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) {
+            items[i].traverse( function ( child ) {
+                if ( child instanceof THREE.Mesh ) {
+                    box.expandByObject(child)
+                        }
+                     });
+                     };
+        return box;
+    }
+    
+	addItemToScene(object, force_material=true){
+        var self=this;
 		/*
 		 * Add item to scene taking care of adding it to the geometry array
 		 */
-			object.receiveShadow=true;
-			object.castShadow=true;
-			var material = new THREE.MeshPhongMaterial( { color: 0x444444 } );
-		
-
-            object.traverse( function ( child ) {
-                if ( child instanceof THREE.Mesh ) {
-                    child.material = material;
-                    }
-                 });
-        
+            if (force_material===true){
+    			object.receiveShadow=true;
+    			object.castShadow=true;
+    			var randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
+    			var material = new THREE.MeshPhongMaterial( { color:randomColor } );
+                object.traverse( function ( child ) {
+                    if ( child instanceof THREE.Mesh ) {
+                        child.material = material;
+                        }
+                     });
+                object.material=material;
+            }
 			this.scene.add(object);
 			this.items.push(object);
+			this.create_relation_structure(object);
 			// Center the object
-/*
-			var bbox = new THREE.Box3().setFromObject(object);
-			var center = new THREE.Vector3();
-			bbox.getCenter(center);
-			var xpos = center.x;
-			xpos = xpos * -1;
-			var ypos = bbox.min.y;
-			ypos = ypos * -1;
-			var zpos = center.z;
-			zpos = zpos * -1;
-			object.position.set(xpos,
-								ypos,
-								zpos);
-*/
+            // fit item
 			progress.display = 'none';
 			var fitItem = new CustomEvent("OdooCAD_fit_items");
 			html_canvas.dispatchEvent(fitItem);
+			// recompute the bounding box
+			this.active_bbox=this.getBBox();
 		}
+		//
 		
+		///
+		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]
+            var xmlhttp = new XMLHttpRequest();
+            var url = "../plm/get_3d_web_document_info/?src_name=" + obj_3d.name;
+            xmlhttp.onreadystatechange = function() {
+                if (this.readyState == 4 && this.status == 200) {
+                    span_element.innerHTML = this.responseText;
+                }
+            };
+            xmlhttp.open("GET", url, true);
+            xmlhttp.send();
+        }
+        
+		get_li_structure(object, nested=false){
+            var self = this;
+            var found=false;
+            var out_lis='';
+            if (nested){
+                out_lis='<ul class="nested">';
+            }
+            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);
+                     var obj_name=object.children[i].name;
+                     var internal_obj_name = guid()
+                     var span_lable = "<span class='document_tree_span' webgl_ref_name='" + internal_obj_name + "'>" + obj_name + "</span>";
+                     if(children_found || object.children[i].name!=''){
+                         self.tree_ref_elements[internal_obj_name]=object.children[i]
+                         out_lis += "<li class='document_tree_line' webgl_ref_name="+ internal_obj_name +"><i class='tree_item_visibility fa fa-eye' aria-hidden='true'></i><span class='caret'>" + span_lable + "</span>" + inner_html + "</li>";
+                     }
+                     else{
+                        out_lis += "<li class='document_tree_line' webgl_ref_name="+ internal_obj_name +">" + span_lable + "</li>";
+                     }
+                     found=true;
+                  }
+            }
+            return  [out_lis + "</ul>", found];
+        }
+        //
+        show_hide_item(guid_item_name, visible){
+            var groupObj = self.tree_ref_elements[guid_item_name];
+            if (groupObj){
+                groupObj.visible=visible;
+            }  else{
+                console.log("Item " + item_name + " Not Found")
+            }
+        }
+        //
+        hide_all(){
+            for( const scene_object_element of Object.values(this.tree_ref_elements) ) {
+                scene_object_element.visible=false;
+            }
+        }
+        //
+        hide_item(guid_item_name){
+            show_hide_item(guid_item_name, false);
+        }
+        //
+        show_all(){
+          for( const scene_object_element of Object.values(this.tree_ref_elements) ) {
+              scene_object_element.visible=true;
+          }
+        }
+        //
+        show_item(guid_item_name){
+            show_hide_item(guid_item_name, true);
+        }
+        //
+        search_document_tree(element) { 
+            var input, filter, ul, li, a, i, txtValue;
+            input = document.getElementById("input_search_document_tree");
+            filter = input.value.toUpperCase();
+            ul = document.getElementById("document_tree");
+            li = ul.getElementsByTagName("li");
+            for (i = 0; i < li.length; i++) {
+                a = li[i].getElementsByTagName("span")[0];
+                txtValue = a.textContent || a.innerText;
+                if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                    li[i].style.display = "";
+                } else {
+                    li[i].style.display = "none";
+                }
+            }
+        }
+		create_relation_structure(object){
+            var self = this;
+            var html_out = "<div class='tree_structure' style='overflow-y: scroll;min-height: 1px;max-height: 400px;'>";
+            for (let i = 0; i < object.children.length; i++) {
+                  if (object.children[i].type=='Group'){
+                    const [inner_html, _children] = self.get_li_structure(object.children[i]);
+                    html_out += inner_html;          
+                  }
+            }
+            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;
+                  var groupObj = self.tree_ref_elements[webgl_name];
+                  groupObj.traverse( function ( child ) {
+                      if ( child instanceof THREE.Mesh ) {
+                          if(child.material.userData.oldColor==undefined){
+                              child.material.userData.oldColor=child.material.color;
+                          }
+                          child.material.color=odoo_hilight_color;
+                      }
+                  });
+              }
+              toggler[i].onmouseout=function(){
+                  var webgl_name = this.childNodes[0].attributes['webgl_ref_name'].value;
+                  var groupObj = self.tree_ref_elements[webgl_name];
+                  groupObj.traverse( function ( child ) {
+                      if ( child instanceof THREE.Mesh ) {
+                         if(child.material.userData.oldColor!=undefined){
+                            child.material.color=child.material.userData.oldColor;
+                         }
+                      }
+                  });
+              }
+              toggler[i].addEventListener("click", function() {
+                this.parentElement.querySelector(".nested").classList.toggle("active");
+                this.classList.toggle("caret-down");
+              });
+            }
+            //
+            var tree_item_visibility = document.getElementsByClassName("tree_item_visibility");
+            for (i = 0; i < tree_item_visibility.length; i++) {
+                tree_item_visibility[i].addEventListener("click", function() {
+                    var groupObj = self.tree_ref_elements[this.parentElement.attributes['webgl_ref_name'].value];
+                    var icon = this;
+                      if (icon.classList.contains('fa-eye')) {
+                            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])
+                }
+        }
 		
 		removeItemToSeen(object){
 			/* TODO: make the remove operation */
diff --git a/plm_web_3d/views/web_template.xml b/plm_web_3d/views/web_template.xml
index fe653a4a..8f75016e 100644
--- a/plm_web_3d/views/web_template.xml
+++ b/plm_web_3d/views/web_template.xml
@@ -59,8 +59,12 @@
                         </li>
                         <li  class="plm_web_button">
                            <label for="transparency_slider">Transparency:</label>
-            	           <input name="transparency_slider" id="object_transparency" type="range" min="0" max="100" value="50"/>
+            	           <input name="transparency_slider" id="object_transparency" type="range" min="0" max="100" value="90"/>
         	           </li>
+                        <li  class="plm_web_button">
+                           <label for="explosion_slider">Explosion:</label>
+                           <input name="explosion_slider" id="object_explosion" type="range" min="0" max="100" value="0"/>
+                       </li>
         	           <li  class="plm_web_button">
             	           <div id="color_object_grp">
             	               <label for="object_color">Color:</label>
@@ -91,6 +95,18 @@
                             <hr class="datacard_line"/>
                             <lu id="document_info">
                             </lu>
+                            <br/>
+                            <div class="info_header">
+                                <b>Document Structure</b>
+                            </div>
+                            <hr class="datacard_line"/>
+                            <div class="search_document_tree">
+                                <input type="text" id="input_search_document_tree" placeholder="Search Here !!"/>
+                                <button type="button"  id="hide_all_parts" title="Hide"    class="fa fa-moon-o"></button>
+                                <button type="button"  id="show_all_parts" title="Un-Hide" class="fa fa-lightbulb-o"></button>
+                            </div>
+                            <lu id="document_tree">
+                            </lu>
                         </div>
                     </div>
                </div>