merged SelectSystemPinIssue and

added some code manually as not merged automatically.

merged SelectSystemPinIssue and
added some code manually as not merged automatically.
Amrita Vishnoi
2 parents 1461deb2 6782af94
Showing 4 changed files with 167 additions and 230 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
400-SOURCECODE/AIAHTML5.Web/app/services/ModuleService.js
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
@@ -22,7 +22,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.AllBodySystem = [];
     $scope.AllOrientation = [];
     $scope.AllImageType = [];
-    $rootScope.Globe1 = [];
+    $rootScope.speechBubbleDimaensions = [];
     $scope.query = {
         selectedbodyregion: '',
@@ -210,11 +210,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
           .then(
             function (result) {
                 $scope.aaPinData = result.data.Root.Item;
-                angular.forEach($scope.aaPinData, function (value, key) {
+                if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
-                    $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
-                })
+                    angular.forEach($scope.aaPinData, function (value, key) {
+                        $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
+                    })
+                }
             },
              function (error) {
@@ -425,53 +427,59 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.showSelectedSystemPins = function (event) {
-        //1.Remove all the pins first
-        $scope.ClearAllPins();
+        $scope.removeSpeechBubble();
+        if (event.currentTarget.id == "0") {
-        var selectedSystemName = event.currentTarget.title;
-        //2. get pinData
-        var promise = ModuleService.getPinDataForImage($rootScope.imageName)
+           
+            $scope.showAllPins();
-          .then(
-            function (result) {
-                $scope.aaPinData = result.data.Root.Item;
+        }
+        else {
-                //3. get termText info
-                var promise = ModuleService.getTermTextForPin($scope.moduleName)
-               .then(
-                function (response) {
+            var selectedSystemName = event.currentTarget.title;
-                    $scope.TermInfo = response.data.Terms.Term;
+           
+                    // get termText info
+                    var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
+                   .then(
+                    function (response) {
-                    //on gettng all required data, draw pins
-                    var selectedSystemPinData = new jinqJs()
-                             .from($scope.aaPinData)
-                             .where("_BodySystemName == " + selectedSystemName)
-                             .select();
-                    angular.forEach(selectedSystemPinData, function (value, key) {
+                        $scope.TermInfo = response.data.Terms.Term;
-                      
-                        $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
+                        //on gettng all required data, draw pins
+                        if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
-                    })
-                    //show annotation on first pin of the sysyem
-                    $scope.showAnnotation(selectedSystemPinData, false, false);
-                },
-               function (error) {
-                   // handle errors here
-                   console.log(' error: ' + error.statusText);
-               }
-              )
+                            var selectedSystemPinData = new jinqJs()
+                                     .from($scope.aaPinData)
+                                     .where("_BodySystemName == " + selectedSystemName)
+                                     .select();
+                            //remove other system pins
+                            if (selectedSystemPinData != null && selectedSystemPinData.length > 0) {
+                                angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
+                                    if (aaPinDataValue._BodySystemName != selectedSystemName)
+                                        $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
+                                })
-                console.log(JSON.stringify(result, null, 4));
-            },
-             function (error) {
-                 // handle errors here
-                 console.log(' error: ' + error.statusText);
-             }
-            )
+                                angular.forEach(selectedSystemPinData, function (value, key) {
+
+
+                                    $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
+
+                                })
+                                //show annotation on first pin of the sysyem
+                                $scope.showAnnotation(selectedSystemPinData, false, false);
+                            }
+                        }
+                    },
+                   function (error) {
+                       // handle errors here
+                       console.log(' error: ' + error.statusText);
+                   }
+                  )
+
+       }
     }
     $scope.showAnnotation = function (selectedSystemPinData, isCtrlPressed, isPinClicked) {
@@ -482,103 +490,110 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         var pinTermNumber = selectedSystemPinData[0]._TermId;
         //check if other pin have same termNumber
-        var pinDataWithFirstTermNumber = new jinqJs()
-                                         .from($scope.aaPinData)
-                                         .where("_TermId == " + pinTermNumber)
-                                         .select();
+        if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
+            var pinDataWithFirstTermNumber = new jinqJs()
+                                             .from($scope.aaPinData)
+                                             .where("_TermId == " + pinTermNumber)
+                                             .select();
-        //3. get termText info
-        var promise = ModuleService.getTermTextForPin($scope.moduleName)
-       .then(
-        function (response) {
-            $scope.TermInfo = response.data.Terms.Term;
+            // get termText info
+            var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
+           .then(
+            function (response) {
+                $scope.TermInfo = response.data.Terms.Term;
-            var termTextdata = new jinqJs()
-                               .from($scope.TermInfo)
-                               .where("__ActualTermNumber == " + pinTermNumber)
-                               .select();
+                if ($scope.TermInfo != null && $scope.TermInfo.length > 0) {
-            var termText = termTextdata[0].__TermText;
-            $scope.MultiLanguageAnnationArray = [];
-            $scope.MultiLanguageAnnationArray.push(termText);
+                    var termTextdata = new jinqJs()
+                                       .from($scope.TermInfo)
+                                       .where("__ActualTermNumber == " + pinTermNumber)
+                                       .select();
-            if (isCtrlPressed) {
+                    var termText = termTextdata[0].__TermText;
+                    $scope.MultiLanguageAnnationArray = [];
+                    $scope.MultiLanguageAnnationArray.push(termText);
-            }
-            else {
-                if (isPinClicked) {
-                    var existingSpeechBubble = $("div[id*='sppeachBubble']");
-                    for (var i = 0; i < existingSpeechBubble.length; i++) {
-                        existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
-
-                        //make all pin heads grey
-                        var radial = $('#aaDetailViewCanvas').createGradient({
-                            x1: 50, y1: 50,
-                            x2: 50, y2: 50,
-                            r1: 10, r2: 30,
-                            c1: 'rgba(100, 50, 0,0)',
-                            c2: 'rgb(216, 216, 216)'
-                        });
-
-
-                        $('#aaDetailViewCanvas').setLayers({
-                            fillStyle: radial,
-                        }).drawLayers();
-                    }
+                    if (isCtrlPressed) {
-                    var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
-                    for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
-                        existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
                     }
-                    var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
-                    for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
-                        speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
+                    else {
+                        if (isPinClicked) {
+                            var existingSpeechBubble = $("div[id*='speechBubble']");
+                            for (var i = 0; i < existingSpeechBubble.length; i++) {
+                                existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
+
+                                //make all pin heads grey
+                                var radial = $('#aaDetailViewCanvas').createGradient({
+                                    x1: 50, y1: 50,
+                                    x2: 50, y2: 50,
+                                    r1: 10, r2: 30,
+                                    c1: 'rgba(100, 50, 0,0)',
+                                    c2: 'rgb(216, 216, 216)'
+                                });
+
+
+                                $('#aaDetailViewCanvas').setLayers({
+                                    fillStyle: radial,
+                                }).drawLayers();
+                            }
+
+                            var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
+                            for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
+                                existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
+                            }
+                            var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
+                            for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
+                                speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
+                            }
+                        }
+                    }
+                    if (pinDataWithFirstTermNumber.length > 1) {
+                        isSameTermWithMultiPin = true;
                     }
-                }
-            }
-            if (pinDataWithFirstTermNumber.length > 1) {
-                isSameTermWithMultiPin = true;
-            }
-            angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
-                $scope.selectedPin.push(value._PinId);
-                var headX = (parseInt(value._HeadX));
-                var headY = (parseInt(value._HeadY));
-                $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
-            })
+                    angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
+                        $scope.selectedPin.push(value._PinId);
+                        var headX = (parseInt(value._HeadX));
+                        var headY = (parseInt(value._HeadY));
+                        $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
+                    })
+                }
+                },
-        },
-        function (error) { })
+            function (error) { })
+        }
     }
-    $scope.ClearAllPins = function () {
-
-        //var canvasHeight = document.getElementById('aaDetailViewCanvas').height;
-        //var canvasWidth = document.getElementById('aaDetailViewCanvas').width;
-
-        //$scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
-
-        $('#aaDetailViewCanvas').clearCanvas();
+    $scope.removeSpeechBubble = function () {
+       
         //clear speech bubbles
-        var speechBubbles = $("div[id*='sppeachBubble']");
+        var speechBubbles = $("div[id*='speechBubble']");
         if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
             for (var j = 0; j < speechBubbles.length; j++) {
                 speechBubbles[j].parentNode.removeChild(speechBubbles[j]);
             }
         }
-        var speechBubbleLines = $("div[id*='sppeachBubbleLine']");
+        var speechBubbleLines = $("div[id*='speechBubbleLine']");
         if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
             for (var j = 0; j < speechBubbleLines.length; j++) {
                 speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]);
             }
         }
+
+        var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']");
+        if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) {
+            for (var j = 0; j < speechBubbleDraggedLines.length; j++) {
+
+                speechBubbleDraggedLines[j].parentNode.removeChild(speechBubbleDraggedLines[j]);
+            }
+        }
     };
@@ -589,7 +604,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);
-        $('#sppeachBubble').draggable(
+        $('#speechBubble').draggable(
         {
             drag: function (evt) {
                 $("#dot").css("visibility", "hidden");
@@ -601,88 +616,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
-    $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) {
-
-        var Annotation;
-        $scope.ActualTermNo = actualTermNo;
-        for (var j = 0; j <= $rootScope.vocabTermDataArray.length - 1; j++) {
-
-            if ($rootScope.vocabTermDataArray[j].language == language) {
-
-                if ($rootScope.vocabTermDataArray[j].VocabTermData != null || $rootScope.vocabTermDataArray[j].VocabTermData != undefined) {
-                    $scope.matchedActualTermData = new jinqJs()
-                                                   .from($rootScope.vocabTermDataArray[j].VocabTermData.VocabTerms.Term)
-                                                   .where('_ActualTermNumber == ' + actualTermNo)
-                                                   .select();
-
-                    if ($scope.matchedActualTermData != null || $scope.matchedActualTermData != undefined) {
-                        for (var z = 0; z <= $scope.matchedActualTermData.length; z++) {
-                            //send actual term no to get the term text.
-                            Annotation = $scope.matchedActualTermData[0]._TermText;
-                            //  alert("Annotation : " + Annotation);
-                            break;
-                        };
-                    }
-                    return Annotation;
-                }
-
-                else {
-                    return null;
-                }
-
-            }
-        }
-
-    }
-
-    $scope.GetAnnotationText = function (termNumber) {
-        $rootScope.annotationText = [];
-        var annotationText;
-        var annotation = [];
-        //0
-        var figLeafTermNo = 5868; // to do declare constant for this
-
-        if (parseInt(termNumber) != parseInt(figLeafTermNo)) {
-            $scope.TermNumber = termNumber;
-            for (var j = 0; j <= $rootScope.lexiconLanguageArray.length - 1; j++) {
-                if ($rootScope.TermNumberData != null || $rootScope.TermNumberData != undefined) {
-                    $scope.matchedTermNoData = new jinqJs()
-                                               .from($rootScope.TermNumberData.TermData.Term)
-                                               .where('_TermNumber == ' + termNumber)
-                                               .select();
-
-                    if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
-                        //1.
-                        var actualTermNo = 0;
-                        for (var z = 0; z < $scope.matchedTermNoData.length; z++) {
-                            //send actual term no to get the term text.
-                            actualTermNo = $scope.matchedTermNoData[0]._ActualTermNumber;
-                            annotationText = $scope.GetAnnotationBasedOnActualTermNo(actualTermNo, $rootScope.lexiconLanguageArray[j].language);
-                            annotation.push(annotationText);
-                            $rootScope.annotationText.push(annotationText);
-                            $rootScope.actualTermNumber = actualTermNo;
-                            break;
-                        };
-
-                        //2.
-
-                    }
-                    else {
-                        // send term no to vocab json data to get the text 
-                    }
-                }
-            }
-        }
-
-        return annotation;
-    }
-
-
-
     $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
         var speechBubbleHTML = '<div id="speechBubbleLine' + PinId + '" style="position:absolute;height:15px;width:35px;display:none;z-index:10000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
-                  + '<div id="sppeachBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:10000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
+                  + '<div id="speechBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:10000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
                   + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
                   + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
@@ -702,7 +639,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             if ($scope.MultiLanguageAnnationArray.length > 0) {
                 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
                     var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
-                    $("#sppeachBubble" + PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
+                    $("#speechBubble" + PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
                 }
             }
             else {
@@ -712,7 +649,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 if ($scope.longestAnnotation.length <= 10) {
-                    $("#sppeachBubble").css("width", "100px");
+                    $("#speechBubble").css("width", "100px");
                 }
@@ -720,82 +657,80 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
-                    $("#sppeachBubble").css("width", "140px");
+                    $("#speechBubble").css("width", "140px");
                 }
                 else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
-                    $("#sppeachBubble").css("width", "195px");
+                    $("#speechBubble").css("width", "195px");
                 }
                 else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
-                    $("#sppeachBubble").css("width", "248px");
+                    $("#speechBubble").css("width", "248px");
                 }
                 else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
-                    $("#sppeachBubble").css("width", "300px");
+                    $("#speechBubble").css("width", "300px");
                 }
                 else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
-                    $("#sppeachBubble").css("width", "370px");
+                    $("#speechBubble").css("width", "370px");
                 }
                 else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
-                    $("#sppeachBubble").css("width", "450px");
+                    $("#speechBubble").css("width", "450px");
                 }
                 else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
-                    $("#sppeachBubble").css("width", "510px");
+                    $("#speechBubble").css("width", "510px");
                 }
                 else {
-                    $("#sppeachBubble").css("width", ($scope.longestAnnotation.length) + "%");
+                    $("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%");
                 }
             }
         }
-        var Globe = [];
+        var speechBubbleDims = [];
-        $rootScope.Globe1.push({ "currentX": x, "currentY": y, "id": PinId });
-        Globe.push({ currentX: x, currentY: y });
+        $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
+        speechBubbleDims.push({ currentX: x, currentY: y });
         document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
-        document.getElementById('speechBubbleLine' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px';
-        document.getElementById('speechBubbleLine' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px';
-        document.getElementById('sppeachBubble' + PinId + '').style.display = 'block';
-        document.getElementById('sppeachBubble' + PinId + '').style.left = (Globe[0].currentX - 70) + 'px';
-        document.getElementById('sppeachBubble' + PinId + '').style.top = (Globe[0].currentY - 58) + 'px';
+        document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 45)) + 'px';
+        document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY) - 20) + 'px';
+        document.getElementById('speechBubble' + PinId + '').style.display = 'block';
+        document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 70) + 'px';
+        document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY - 58) + 'px';
         $('.common-drag').draggable(
         {
+           
             drag: function (evt) {
                 var verticalScrollPosition = document.getElementById('imageDiv').scrollTop;
                 var horizontlScrollPosition = document.getElementById('imageDiv').scrollLeft;
-                var a = $(this).attr("id");
+                var clickedSpeechBubbleId = $(this).attr("id");
-                var res = a.substring(13, a.length);
-                $("#speechBubbleLine" + res).css("visibility", "hidden");
+                var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length);
-              
-                console.log("res= " + res + "x= " + x + ",y= " + y + ",evt.pageY= " + evt.page + ",evt.pageX= " + evt.pageX + ",horizontlScrollPosition= " + horizontlScrollPosition + ",verticalScrollPosition= " + verticalScrollPosition);
+                $("#speechBubbleLine" + clickedPinId).css("visibility", "hidden");
-               
-                for (var i = 0; i <= $rootScope.Globe1.length - 1; i++) {
-                    if ($rootScope.Globe1[i].id == res) {
-                       
-                        $scope.angle(res, $rootScope.Globe1[i].currentX, $rootScope.Globe1[i].currentY, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
+
+                for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) {
+                    if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) {
+                        $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
                     }
                 }
             },
         });
         $('.crossDiv_temp').on('click', function (evt) {
-           
+
             var imgId = $(this).attr("id");
             var pinId = imgId.substring(8, imgId.length);
-            $('#sppeachBubble' + pinId).remove();
+            $('#speechBubble' + pinId).remove();
             $("#speechBubbleDraggedLine" + pinId).remove();
             $("#speechBubbleLine" + pinId).remove();
@@ -814,7 +749,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 fillStyle: radial,
             }).drawLayers();
         });
-        
+
         //make the head green
         var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
             x1: 50, y1: 50,
@@ -868,7 +803,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
-    $scope.DrawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
+    $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
         var radial = $('#' + canvasId).createGradient({
             x1: 50, y1: 50,
@@ -935,13 +870,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
-    $scope.onCloseBtnClick = function (event) {
-        alert('closed')
-    }
+    $scope.removePin = function (canvasId,pinId) {
-    $("#closeBtn").click(function () {
-        alert('closed')
-    });
+        var pinName = 'Pin_' + pinId;
+        var pinArcName = 'PinArc_' + pinId;
+        $('#' + canvasId).removeLayer(pinName).drawLayers();
+        $('#' + canvasId).removeLayer(pinArcName).drawLayers();
+
+        $scope.removeSpeechBubble();
+    }
 }]);
 function showSelectedSystemPins(event) {
@@ -92,7 +92,7 @@ AIA.service(&#39;ModuleService&#39;, function($http, DataService) {
         },
-        getTermTextForPin: function (moduleName) {
+        getTermTextDataForPin: function (moduleName) {
             var jsonPath;
             if (moduleName == ATLAS_ANATOMY) {
@@ -18,7 +18,7 @@
                 <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu221" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="../../../content/images/aa/LeftMenu/icon-highlight.png" alt="" title=""></button>
                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu221" id="bodySystemList">
-                    <li><a href="#" title="Current Structure">All</a></li>
+                    <li><a id="0" href="#" title="Current Structure" onclick="showSelectedSystemPins(event)">All</a></li>
                     <li role="separator" class="divider"></li>
                     <li class="disabled"><a id="1" href="#" title="Cardiovascular" onclick="showSelectedSystemPins(event)">Cardiovascular</a></li>
                     <li class="disabled"><a id="2" href="#" title="Digestive" onclick="showSelectedSystemPins(event)">Digestive</a></li>
@@ -1011,7 +1011,7 @@ background-size:cover;
       .tinyImg {
     display: block;
     max-width: 230px;
-    max-height: 95px;
+    /*max-height: 95px;*/
     width: auto;
-    height: auto;
+    height: 95px !important;
 }
 \ No newline at end of file