now it looks fantastic. Nothing under!

api.go

@@ -6,6 +6,7 @@ import (
 	"errors"
 	"github.com/gorilla/mux"
 	"labix.org/v2/mgo"
+	"labix.org/v2/mgo/bson"
 	"net/http"
 	"strconv"
 )
@@ -141,6 +142,22 @@ func getDocumentByIndex(w http.ResponseWriter, request *http.Request) (interface
 	return vb.GetDocumentByIndex(index, nil)
 }
 
+func getDocumentById(w http.ResponseWriter, request *http.Request) (interface{}, error) {
+	vb, err := GetVultureBackend(request)
+	if err != nil {
+		return nil, err
+	}
+	vars := mux.Vars(request)
+	id, ok := vars["id"]
+	if !ok {
+		return nil, errors.New("id field not specified")
+	}
+	if !bson.IsObjectIdHex(id) {
+		return nil, errors.New("id field is not an object id")
+	}
+	return vb.GetDocumentByIndex(0, bson.M{"_id": bson.ObjectIdHex(id)})
+}
+
 func getDocumentByQueryAndIndex(w http.ResponseWriter, request *http.Request) (interface{}, error) {
 	vb, err := GetVultureBackend(request)
 	if err != nil {

client/coffee/controllers/documentCtrl.coffee

@@ -65,14 +65,17 @@ testmongoJsToMongoJSON()
 root.controllers.controller('documentCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
     $scope.idx = $routeParams.idx
     $scope.doc = {}
-    $scope.idx = Number($routeParams.idx)
+    $scope.idx = Number($routeParams.idx) or 1
     $scope.meta = {}
     $scope.newQuery = $routeParams.query or ""
     
     url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
     if $routeParams.query
         url = "#{url}/query/#{$routeParams.query}"
+    if $routeParams.idx
         url = "#{ url }/idx/#{$routeParams.idx - 1}"
+    else if $routeParams.id
+        url = "#{ url }/_id/#{$routeParams.id}"
 
     $http.get(url).then((res) ->
          $scope.doc = res.data.document

client/coffee/controllers/fieldCtrl.coffee

@@ -0,0 +1,28 @@
+root = this;
+
+
+root.controllers.controller('fieldCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
+    $scope.idx = $routeParams.idx
+    $scope.field = $routeParams.field
+    $scope.fields = []
+    $scope._ = _
+    $scope.value = ""
+    $scope.doc = {}
+    $scope.meta = {}
+    
+    $scope.fieldUrl = (fieldName) ->
+        rt = $routeParams
+        return "#/#{ rt.server }/#{ rt.database }/#{ rt.collection }/_id/#{rt.id}/field/#{fieldName}"
+        
+    url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
+    url = "#{ url }/_id/#{$routeParams.id}"
+
+    $http.get(url).then((res) ->
+         $scope.doc = res.data.document
+         $scope.value = $scope.doc[$scope.field]
+         $scope.fields = _.keys($scope.doc)
+         $scope.meta = res.data.meta
+    )
+    
+])
+

client/coffee/controllers/geojsonmapCtrl.coffee

@@ -1,7 +1,7 @@
 root = this;
 
 
-root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
+root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$location', '$http', ($scope, $routeParams, $location, $http) ->
     $scope.geojson = {}
     $scope.geojsonData = {}
     $scope.idx = Number($routeParams.idx)
@@ -18,7 +18,8 @@ root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$http'
         $scope.geojson = res.data.document[$routeParams.key]
         if not $scope.geojson.properties
             $scope.geojson.properties = {}
-        $scope.geojson.properties["_vulture_url_link"] = ""
+        url = "/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }/_id/#{ res.data.document._id }"
+        $scope.geojson.properties["_vulture_url_link"] = url
         $scope.meta = res.data.meta
         $scope.geojsonData =
             data: $scope.geojson
@@ -42,8 +43,7 @@ root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$http'
         $scope.idx > 1
     
     $scope.$on "leafletDirectiveMap.geojsonClick", (ev, featureSelected, leafletEvent) ->
-        a = 90
+        $location.url(featureSelected.properties._vulture_url_link);
-        b = 89
             
 ])
 

client/coffee/controllers/topBarCtrl.coffee

@@ -11,7 +11,7 @@ root.controllers.controller('topBarCtrl', ['$scope', '$location', ($scope, $loca
             $scope.path = joinArray($scope.path[0...6], $scope.path[7...-1])
         $scope.getHistoryUrl = (idx) ->
             ret = "#/" + ($scope.path[i] for i in [0...idx]).join("/")
-            if _.indexOf(["idx", "geojson", "query"], $scope.path[idx]) != -1
+            if _.indexOf(["idx", "geojson", "query", "_id", "field"], $scope.path[idx]) != -1
                 return ""
             if idx == 0
                 ret += "servers"

client/coffee/directives/key.coffee

@@ -23,8 +23,10 @@ directive = () ->
         restrict: 'E',
         scope:
             keyName: "="
+            value: "="
             indexes: "="
         controller:["$scope", "$routeParams", ($scope, $routeParams) ->
+                $scope.canMakeHistogram = _.isNumber($scope.value)
                 $scope.hasIndexDesc = hasIndexDesc($scope.keyName, $scope.indexes)
                 $scope.hasIndexAsc = hasIndexAsc($scope.keyName, $scope.indexes)
                 $scope.has2DIndex = has2dIndex($scope.keyName, $scope.indexes)

client/coffee/directives/value.coffee

@@ -7,7 +7,30 @@ directive = () ->
         restrict: 'E',
         scope:
             value: "="
-        controller:["$scope", ($scope) ->
+            docId: "="
+            key: "="
+            expended: "="
+        controller:["$scope", "$routeParams", ($scope, $routeParams) ->
+                $scope.isSmallString = (str)->
+                    if not _.isString(str)
+                        return false
+                    rgx = str.match(/\n/g) or []
+                    return str.length < 1000 and rgx.length < 20
+                
+                $scope.isSmallObject = (obj) ->
+                    return $scope.isSmallString(JSON.stringify(obj, null, 4))
+
+                $scope.getSmallPrefix = (str) ->
+                    if _.isString(str)
+                        return str.substr(0, 500) + "..."
+                    return ""
+                $scope.url = ()->
+                    rp = $routeParams
+                    s = $scope
+                    return "#/#{rp.server}/#{rp.database}/#{rp.collection}/_id/#{s.docId}/field/#{s.key}"
+                
+                $scope.valueLength = if _.isObject($scope.value) then _.keys($scope.value).length else $scope.value.length
+
                 $scope.isString = _.isString($scope.value)
                 $scope.isNumber = _.isNumber($scope.value)
                 $scope.isObject = _.isObject($scope.value)

client/coffee/filters.coffee

@@ -15,3 +15,10 @@ root.filters.filter 'niceJSON', () ->
 root.filters.filter 'replaceReturnByBreak', () ->
     return (text) ->
         return text.replace(new RegExp("\n","g"), "<br>")
+
+root.filters.filter 'onlyNthLines', () ->
+    return (text, n) ->
+        if not _.isString(text)
+            return ""
+        s = text.split("\n")
+        return s[0...n].join("\n")

client/coffee/vultureApp.coffee

@@ -14,6 +14,8 @@ config(['$routeProvider', ($routeProvider) ->
   $routeProvider.when('/about', {templateUrl: 'partials/about.html', controller: 'aboutCtrl'})
   $routeProvider.when('/:server/databases', {templateUrl: 'partials/databases.html', controller: 'databasesCtrl'})
   $routeProvider.when('/:server/:database/collections', {templateUrl: 'partials/collections.html', controller: 'collectionsCtrl'})
+  $routeProvider.when('/:server/:database/:collection/_id/:id', {templateUrl: 'partials/document.html', controller: 'documentCtrl'})
+  $routeProvider.when('/:server/:database/:collection/_id/:id/field/:field', {templateUrl: 'partials/field.html', controller: 'fieldCtrl'})
   $routeProvider.when('/:server/:database/:collection/idx/:idx', {templateUrl: 'partials/document.html', controller: 'documentCtrl'})
   $routeProvider.when('/:server/:database/:collection/idx/:idx/query/:query', {templateUrl: 'partials/document.html', controller: 'documentCtrl'})
   $routeProvider.when('/:server/:database/:collection/idx/:idx/geojson/:key', {templateUrl: 'partials/geojsonmap.html', controller: 'geojsonmapCtrl'})

client/index.html

@@ -54,6 +54,7 @@
     <script src="js/controllers/collectionsCtrl.js"></script>
     <script src="js/controllers/documentCtrl.js"></script>
     <script src="js/controllers/geojsonmapCtrl.js"></script>
+    <script src="js/controllers/fieldCtrl.js"></script>
     
     <script src="js/directives/key.js"></script>
     <script src="js/directives/value.js"></script>

client/partials/directives/key.html

@@ -3,6 +3,7 @@
     
     <span ng-style="{visibility: showTools ? 'inline': 'hidden'}">
         <!-- place to but some hoover information-->
+        <i class="fa fa-signal" ng-show="canMakeHistogram"></i> 
     </span>
     <span class="right" style="color:#008CBA;">
         <i class="fa fa-sort-numeric-asc" ng-show="hasIndexAsc"></i>

client/partials/directives/value.html

@@ -1,12 +1,19 @@
 <span>
     <span ng-show="isString">
-        <pre> {{value}} </pre>
+        <pre ng-show="isSmallString(value)"> {{value}} </pre>
+        
+        <a ng-hide="isSmallString(value)" ng-href="{{ url() }}">
+            <pre> {{ getSmallPrefix(value) }} </pre>
+        </a>
+        
     </span>
     <span ng-show="isNumber">
         {{value | number | replaceAllCommasBySpaces}}
     </span>
     <span ng-show="isObject || isArray">
-        <pre>{{value | niceJSON}}</pre>
+        <pre ng-show="isSmallObject(value)" >{{value | niceJSON}}</pre>
+        <a ng-hide="isSmallObject(value)" ng-href="{{ url() }}">
+            <pre> {{value | niceJSON | onlyNthLines:5}} </pre>
+        </a>
     </span>
-    
 </span>

client/partials/document.html

@@ -34,10 +34,10 @@
             <tbody>
               <tr ng-repeat="(key, value) in doc">
                 <td style="vertical-align: top;">
-                    <vul-key key-name="key" indexes="meta.indexes" ></vul-key>
+                    <vul-key key-name="key" value="value" indexes="meta.indexes" ></vul-key>
                 </td>
                 <td>
-                    <vul-value value="value"></vul-value>
+                    <vul-value value="value" key="key" doc-id="doc._id"></vul-value>
                 </td>
               </tr>
             </tbody>

client/partials/field.html

@@ -0,0 +1,22 @@
+<div class="row">
+    <div class="large-12 columns" >
+        <dl class="sub-nav" >
+            <dd ng-repeat="f in fields" ng-class="{active: f == field}">
+                <a ng-href="{{ fieldUrl(f) }}">{{ f }}</a>
+            </dd>
+        </dl>
+    </div>
+</div>
+
+<div class="row">
+    <div class="large-12 columns">
+        <pre ng-show="!_.isObject(value)" style="overflow: initial;">
+            {{ value }}
+        </pre>
+        
+        <pre ng-show="_.isObject(value)" style="overflow: initial;">
+            {{ value | niceJSON }}
+        </pre>
+    </div>
+</div>
+

main.go

@@ -70,6 +70,7 @@ func serveApi(router *mux.Router) {
 	router.Handle("/{server}/databases", ApiHandler(getAvailableDataBases))
 	router.Handle("/{server}/{database}/collections", ApiHandler(getAvailableCollections))
 	router.Handle("/{server}/{database}/{collection}/idx/{index:[0-9]+}", ApiHandler(getDocumentByIndex))
+	router.Handle("/{server}/{database}/{collection}/_id/{id}", ApiHandler(getDocumentById))
 	router.Handle("/{server}/{database}/{collection}/query/{query}/idx/{index:[0-9]+}", ApiHandler(getDocumentByQueryAndIndex))
 }