got terrainView working

src/app/d3Bindings/d3TestPage.js

@@ -1,37 +1,71 @@
 var bawD3 = bawD3 || angular.module("bawApp.d3", []);
-bawD3.controller('D3TestPageCtrl', ['$scope', 'conf.paths', '$http', function ($scope, paths, $http) {
+bawD3.controller('D3TestPageCtrl', ['$scope', 'conf.paths', '$http', '$routeParams', 'Site', '$location',
+    function ($scope, paths, $http, $routeParams, Site, $location) {
 
-    // use the REST API in here
+        // use the REST API in here
+        // assign the resulting data to scope (not great but it will do for now)
 
-    // assign the resulting data to scope (not great but it will do for now)
-    $scope.basicData = [0, 1, 2, 3, 4, 5];
+        // get the site id (from route params or a default)
+        $scope.siteId = $routeParams.siteId ? $routeParams.siteId : 398;
 
-    $scope.siteId = 643;
-
-    var request_filter = {
-        "filter": {
-            "site_id":{
-                "eq":$scope.siteId
+        // set up the $scope.siteId watcher after getting query string, so the location isn't changed.
+        // subsequent changes will change the url
+        $scope.$watch(function () {
+            return $scope.currentSiteInfo;
+        }, function (newValue, oldValue) {
+            if(newValue && oldValue && newValue.id != oldValue.id){
+                //console.log(newValue, oldValue);
+                window.location = '/d3Test?siteId='+newValue.id;
             }
-        },
-        "projection": {
-            "include": ["id", "recorded_date", "duration_seconds", "site_id"]
-        }//,
-        //"paging":{
-        //    "page":2,
-        //    "items":30
-        //}
-    };
-
-    $http.post(paths.api.routes.audioRecording.filterAbsolute, request_filter)
-        .success(function (data, status, headers, config) {
-
-            $scope.filteredAudioRecordings = data;
-        })
-        .error(function (data, status, headers, config) {
-            $scope.filteredAudioRecordings = data;
-            console.warn('Filtered audio recordings failed.', data, status, headers, config);
         });
 
+        // populate select with options
+        Site.getAllSites().then(function(result){
+            $scope.sites = result.data.data;
+            console.log('success', arguments);
+        }, function(error){
+            console.log('error', arguments);
+        }, function(){
+            console.log('notify', arguments);
+        });
+
+        //  get the selected site details
+        Site.get({siteId: $scope.siteId}, {}, function getSiteSuccess(value) {
+
+            value.links = value.projectIds.map(function (id) {
+                return paths.api.routes.site.nestedAbsolute.format({"siteId": value.id, "projectId": id});
+            });
+
+            $scope.currentSiteInfo = value;
+        }, function getSiteError() {
+            console.log("retrieval of site json failed");
+        });
+
+        // get audio recording info for the current site
+        var request_filter = {
+            "filter": {
+                "site_id": {
+                    "eq": $scope.siteId
+                }
+            },
+            "projection": {
+                "include": ["id", "recorded_date", "duration_seconds", "site_id"]
+            }//,
+            //"paging":{
+            //    "page":2,
+            //    "items":30
+            //}
+        };
+
+
+        $http.post(paths.api.routes.audioRecording.filterAbsolute, request_filter)
+            .success(function (data, status, headers, config) {
+
+                $scope.filteredAudioRecordings = data;
+            })
+            .error(function (data, status, headers, config) {
+                $scope.filteredAudioRecordings = data;
+                console.warn('Filtered audio recordings failed.', data, status, headers, config);
+            });
 
-}]);
+    }]);

src/app/d3Bindings/d3TestPage.tpl.html

@@ -1,5 +1,16 @@
 <div id="content">
-    <h1>D3 Play area</h1>
+    <h1>Site recordings visualisation options
+        <small>
+            current site is <a data-ng-href="{{currentSiteInfo.links[0]}}">{{currentSiteInfo.name}}</a>
+        </small>
+    </h1>
+
+    <form class="form-inline" role="form">
+        <div class="form-group">
+            <label for="siteSelector">Sites</label>
+            <select id="siteSelector" class="form-control" ng-model="currentSiteInfo" ng-options="site.name for site in sites track by site.id"></select>
+        </div>
+    </form>
 
     <h2>Calendar view</h2>
     <div>
@@ -15,6 +26,6 @@ <h2>Dot view <small>Shows audio recordings per hour in a day for each year</smal
     </div>
     <h2>Terrain view <small>Zoomable with mouse wheel and pannable by dragging</small></h2>
     <div>
-        <baw-terrain-view data="filteredAudioRecordings"></baw-terrain-view>
+        <baw-terrain-view  class="reset-box-sizing" data="filteredAudioRecordings"></baw-terrain-view>
     </div>
 </div>

src/app/d3Bindings/terrainView/_terrainView.scss

@@ -1,3 +1,12 @@
+.reset-box-sizing,
+.reset-box-sizing *,
+.reset-box-sizing *:before,
+.reset-box-sizing *:after {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
 #audioRecordingTerrain svg {
   font-size: 10px;
 }
@@ -6,7 +15,7 @@
   shape-rendering: crispEdges;
 }
 
-#audioRecordingTerrain .axis path, #audioRecordingTerrain  .axis line {
+#audioRecordingTerrain .axis path, #audioRecordingTerrain .axis line {
   fill: none;
   stroke-width: .5px;
 }