[Inspector] Location in tree

Added a 'location' section for the inspector panel. Its
elements are clickable labels. #73.

platform/commonUI/general/bundle.json

@@ -104,6 +104,11 @@
                 "key": "SelectorController",
                 "implementation": "controllers/SelectorController.js",
                 "depends": [ "objectService", "$scope" ]
+            },
+            {
+                "key": "ObjectInspectorController",
+                "implementation": "controllers/ObjectInspectorController.js",
+                "depends": [ "$scope", "objectService" ]
             }
         ],
         "directives": [

platform/commonUI/general/res/css/theme-espresso.css

@@ -5221,19 +5221,52 @@ input[type="text"] {
       font-size: 0.9em; }
       /* line 161, ../sass/tree/_pane.scss */
       .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li {
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
         padding: 2px 0px;
         margin: 2px 0px;
         border-top: solid 1px grey; }
-        /* line 167, ../sass/tree/_pane.scss */
+        /* line 166, ../sass/tree/_pane.scss */
+        .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child {
+          border-top-width: 0px; }
+        /* line 171, ../sass/tree/_pane.scss */
         .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em {
           font-weight: bold; }
-          /* line 170, ../sass/tree/_pane.scss */
+          /* line 174, ../sass/tree/_pane.scss */
           .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after {
             content: '\A';
             white-space: pre; }
-        /* line 180, ../sass/tree/_pane.scss */
+        /* line 181, ../sass/tree/_pane.scss */
-        .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child {
+        .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location {
-          border-top-width: 0px; }
+          display: inline-block; }
+          /* line 184, ../sass/tree/_pane.scss */
+          .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label {
+            cursor: pointer;
+            display: inline-block;
+            white-space: nowrap;
+            transition: background-color 0.2s;
+            background-color: #4d4d4d;
+            border-radius: 4px;
+            padding: 3px;
+            padding-bottom: 0;
+            margin: 2px;
+            line-height: 15px; }
+            /* line 192, ../sass/tree/_pane.scss */
+            .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover {
+              background-color: #595959; }
+            /* line 203, ../sass/tree/_pane.scss */
+            .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon {
+              font-size: 14px; }
+              /* line 206, ../sass/tree/_pane.scss */
+              .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon .l-icon-link {
+                color: #49dedb;
+                font-size: 6px;
+                margin-left: -22px;
+                margin-right: 4px; }
+          /* line 217, ../sass/tree/_pane.scss */
+          .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after {
+            content: '>';
+            font-family: symbolsfont;
+            font-size: 10px;
+            margin-left: -4px; }
+          /* line 223, ../sass/tree/_pane.scss */
+          .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:last-child:after {
+            content: ''; }

platform/commonUI/general/res/sass/tree/_pane.scss

@@ -22,7 +22,7 @@
 
 // Added by shale on 08/19/2015. Styling for the collapsible tree view. 
 
-$transitionTime: 0.35s;
+$transitionTime: 0.35s; // For the left menu open/close
 
 // Set the left pane (which contains the tree) to have no width to close
 // (not display:none because we still need to have access to the create button)
@@ -159,9 +159,13 @@ $transitionTime: 0.35s;
                 font-size: 0.9em;
                 
                 li {
-                    overflow-x: hidden;
+                    // Add spacing between items
-                    text-overflow: ellipsis;
+                    padding: 2px 0px;
-                    white-space: nowrap;
+                    margin: 2px 0px;
+                    border-top: solid 1px grey;
+                    &:first-child {
+                        border-top-width: 0px;
+                    }
                     
                     // Style the titles
                     em {
@@ -173,12 +177,52 @@ $transitionTime: 0.35s;
                         }
                     }
                     
-                    // Add spacing between items
+                    // Style object labels 
-                    padding: 2px 0px;
+                    .inspector-location {
-                    margin: 2px 0px;
+                        display: inline-block;
-                    border-top: solid 1px grey;
+                        
-                    &:first-child {
+                        .label {
-                        border-top-width: 0px;
+                            cursor: pointer;
+                            display: inline-block;
+                            white-space: nowrap;
+                            
+                            // Colors
+                            transition: background-color 0.2s;
+                            background-color: lighten($colorBodyBg, 10%);
+                            &:hover {
+                                background-color: lighten($colorBodyBg, 15%);
+                            }
+                            
+                            // Sizing and spacing 
+                            border-radius: 4px;
+                            padding: 3px;
+                            padding-bottom: 0;
+                            margin: 2px;
+                            line-height: 15px;
+                            
+                            .icon.type-icon {
+                                font-size: 14px;
+                                
+                                .l-icon-link {
+                                    color: $colorIconLink;
+                                    
+                                    font-size: 6px;
+                                    margin-left: -22px;
+                                    margin-right: 4px;
+                                }
+                            }
+                        }
+                        
+                        // Add arrows to indicate tree heirarchy 
+                        &:after {
+                            content: '>';
+                            font-family: symbolsfont;
+                            font-size: 10px;
+                            margin-left: -4px;
+                        }
+                        &:last-child:after {
+                            content: '';
+                        }
                     }
                 }
             }

platform/commonUI/general/res/templates/object-inspector.html

@@ -19,22 +19,35 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+<span ng-controller="ObjectInspectorController as controller">
+    <span class="ui-symbol info-icon">
+        G
+    </span>
 
-<span class="ui-symbol info-icon">
+    <ul>
-    G
+        <li>
+            <em>Name </em>
+            {{ ngModel.selectedObject.getModel().name }}
+        </li>
+        <li ng-if='ngModel.selectedObject.getModel().modified !== undefined'>
+            <em>Last modified </em>
+            {{ ngModel.selectedObject.getModel().modified }}
+        </li>
+        <li>
+            <em>ID </em>
+            {{ ngModel.selectedObject.getId() }}
+        </li>
+        <li>
+            <em>Location </em>
+            {{ controller.getPath() }}
+            <span class="inspector-location"
+                  ng-repeat="parent in parents">
+                <mct-representation key="'label'"
+                                    mct-object="parent"
+                                    ng-model="ngModel"
+                                    ng-click="ngModel.selectedObject = parent">
+                </mct-representation>
+            </span>
+        </li>
+    </ul>
 </span>
-
-<ul>
-    <li>
-        <em>Name </em>
-        {{ ngModel.selectedObject.getModel().name }}
-    </li>
-    <li>
-        <em>Last modified </em>
-        {{ ngModel.selectedObject.getModel().modified }}
-    </li>
-    <li>
-        <em>ID </em>
-        {{ ngModel.selectedObject.getId() }}
-    </li>
-</ul>

platform/commonUI/general/src/controllers/ObjectInspectorController.js

@@ -0,0 +1,84 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * Module defining ObjectInspectorController. Created by shale on 08/21/2015.
+ */
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The ObjectInspectorController gets and formats the data for 
+         *  the inspector display
+         *
+         * @constructor
+         */
+        function ObjectInspectorController($scope, objectService) {
+            $scope.pathString = '';
+            $scope.parents = [];
+            
+            function getPath() {
+                var currentObj = $scope.ngModel.selectedObject,
+                    currentParent,
+                    parents = [],
+                    pathString = '';
+                
+                while (currentObj && currentObj.getModel().type !== 'root' && currentObj.hasCapability('context')) {
+                    // Record this object 
+                    pathString = currentObj.getModel().name + ', ' + pathString;
+                    parents.unshift(currentObj);
+                    
+                    // Get the next one up the tree 
+                    currentParent = currentObj.getCapability('context').getParent();
+                    currentObj = currentParent;
+                }
+                pathString = pathString.substring(0, pathString.length - 2);
+                
+                $scope.parents = parents;
+                $scope.pathString = pathString;
+                
+                return [pathString, parents];
+            }
+            
+            return {
+                // Sets scope variables, but does not return anything
+                getPath: function () {
+                    getPath();
+                },
+                
+                getPathString: function () {
+                    return getPath()[0];
+                },
+                
+                getParents: function () {
+                    return getPath()[1];
+                }
+            };
+
+        }
+
+        return ObjectInspectorController;
+    }
+);