@@ -182,6 +182,13 @@ section {
     visibility: visible;
 }
 
+.module_wrapper .name {
+    position: absolute;
+    padding: 4px;
+    font-size: 14px;
+    background: rgb(44, 44, 44);
+}
+
 .module_wrapper .wrapper {
     padding: 16px;
     box-sizing: border-box;
 
@@ -1,12 +1,19 @@
-var Tracer = function (module) {
+function Tracer(module) {
     this.module = module || Tracer;
     this.capsule = tm.allocate(this);
-
     $.extend(this, this.capsule);
-    return this.new;
-};
+    if (this.new) {
+        Tracer.prototype.init.call(this);
+        return true;
+    }
+    return false;
+}
 
 Tracer.prototype = {
+    constructor: Tracer,
+    init: function () {
+        this.$container.append($('<span class="name">').text(this.name));
+    },
     _setData: function () {
         tm.pushStep(this.capsule, {type: 'setData', arguments: arguments});
     },
 
@@ -15,6 +15,7 @@ TracerManager.prototype = {
             module: tracer.module,
             tracer: tracer,
             allocated: true,
+            name: null,
             $container: $container,
             new: true
         };
@@ -23,18 +24,25 @@ TracerManager.prototype = {
     },
     allocate: function (newTracer) {
         var selectedCapsule = null;
+        var count = 0;
         $.each(this.capsules, function (i, capsule) {
-            if (!capsule.allocated && capsule.module == newTracer.module) {
-                capsule.tracer = newTracer;
-                capsule.allocated = true;
-                capsule.new = false;
-                selectedCapsule = capsule;
-                return false;
+            if (capsule.module == newTracer.module) {
+                count++;
+                if (!capsule.allocated) {
+                    capsule.tracer = newTracer;
+                    capsule.allocated = true;
+                    capsule.new = false;
+                    selectedCapsule = capsule;
+                    return false;
+                }
             }
         });
         if (selectedCapsule == null) {
+            count++;
             selectedCapsule = this.add(newTracer);
         }
+        console.log(newTracer);
+        selectedCapsule.name = newTracer.constructor.name + count;
         return selectedCapsule;
     },
     deallocateAll: function () {
@@ -58,13 +66,13 @@ TracerManager.prototype = {
     place: function () {
         var capsules = this.capsules;
         $.each(capsules, function (i, capsule) {
-            var width = $module_container.width();
-            var height = $module_container.height() / capsules.length;
+            var width = 100;
+            var height = (100 / capsules.length);
             var top = height * i;
             capsule.$container.css({
-                top: top,
-                width: width,
-                height: height
+                top: top + '%',
+                width: width + '%',
+                height: height + '%'
             });
             capsule.tracer.resize();
         });
 
@@ -263,7 +263,6 @@ $(window).resize(function () {
 var dividers = [
     ['v', $('.sidemenu'), $('.workspace')],
     ['v', $('.viewer_container'), $('.editor_container')],
-    ['h', $('.module_container'), $('.tab_container')],
     ['h', $('.data_container'), $('.code_container')]
 ];
 for (var i = 0; i < dividers.length; i++) {