more work on visualise page

src/app/d3Bindings/d3.js

@@ -4,8 +4,6 @@ angular.module("bawApp.d3", [
     "bawApp.d3.dotView",
     "bawApp.d3.terrainView",
     "bawApp.d3.timelineView",
-    "bawApp.d3.eventDistribution.distributionOverview",
-    "bawApp.d3.eventDistribution.distributionDetail",
-    "bawApp.d3.eventDistribution.distributionController",
+    "bawApp.d3.eventDistribution",
     "bawApp.d3.widgets"
 ]);

src/app/d3Bindings/eventDistribution/_eventDistribution.scss

@@ -66,3 +66,38 @@ event-distribution-detail {
   }
 }
 
+event-distribution-visualisation {
+    text-align: center;
+
+    .metaTrack {
+    }
+
+    .imageTrack {
+
+      .tiles {
+        background-color: paleturquoise;
+        position: relative;
+        height: 256px;
+
+        .tile {
+          width: 60px;
+          border: grey solid 1px;
+          border-left: deeppink solid 1px;
+          border-right: blue solid 1px;
+          height: 256px;
+          display: inline-block;
+          position: absolute;
+
+        }
+      }
+
+      .dayImageContainer {
+        position: relative;
+        display: inline-block;
+
+        margin: 1em 1em 2em 1em;
+
+      }
+    }
+
+}

src/app/d3Bindings/eventDistribution/distributionDetail.js

@@ -18,7 +18,8 @@ angular
                     container = d3.select(target),
                     chart,
                     main,
-                    mainClip,
+                    mainClipRect,
+                    clipId = "distributionDetail_" + uniqueId,
                     xAxis,
                     xScale,
                     yScale,
@@ -80,16 +81,7 @@ angular
 
 
                     createChart();
-                    chart
-                        .attr("height", 0)
-                        .append("defs")
-                        .append("clipPath")
-                        .attr("id", "clip")
-                        .append("rect")
-                        .attr({
-                                  width: 500,
-                                  height: 200
-                              });
+
 
                     updateDimensions();
 
@@ -105,18 +97,24 @@ angular
                         .attr("width", mainWidth)
                         .attr("height", mainHeight);
 
-
+                    mainClipRect = chart.append("defs")
+                        .append("clipPath")
+                        .attr("id", clipId)
+                        .append("rect")
+                        .attr({
+                                  width: mainWidth,
+                                  height: mainHeight
+                              });
                 }
 
                 function updateDimensions() {
                     mainWidth = calculateMainWidth();
                     mainHeight = Math.max(getLaneLength() * laneHeight, laneHeight);
 
-
-                    //mainClip.attr({
-                    //    width: mainWidth,
-                    //    height: mainHeight
-                    //});
+                    mainClipRect.attr({
+                        width: mainWidth,
+                        height: mainHeight
+                    });
 
                     chart.style("height", svgHeight() + "px");
                 }
@@ -137,7 +135,7 @@ angular
 
                     // group for rects painted in lanes
                     mainItemsGroup = main.append("g")
-                        .clipPath("url(#clip)")
+                        .clipPath("url(#" + clipId + ")")
                         .classed("mainItemsGroup", true);
 
                     xAxis = new TimeAxis(main, xScale, {position: [0, mainHeight]})

src/app/d3Bindings/eventDistribution/distributionOverview.js

@@ -20,9 +20,9 @@ angular
                     xAxis,
                     xScale,
                     yScale,
-                    // this default value will be overwritten almost immediately
+                // this default value will be overwritten almost immediately
                     miniWidth = 1000,
-                    // this default value will be overwritten almost immediately
+                // this default value will be overwritten almost immediately
                     miniHeight = 200,
                     xAxisHeight = 30,
                     margin = {
@@ -221,16 +221,16 @@ angular
 
                     mini.select(".laneLinesGroup")
                         .selectAll()
-                        .data(that.lanes.concat("fake"))
+                        .data(that.lanes)
                         .enter()
                         .append("line")
                         .attr({
-                            x1: 0,
-                            y1: getSeparatorLineY,
-                            x2: miniWidth,
-                            y2: getSeparatorLineY,
-                            class: "laneLines"
-                        });
+                                  x1: 0,
+                                  y1: getSeparatorLineY,
+                                  x2: miniWidth,
+                                  y2: getSeparatorLineY,
+                                  class: "laneLines"
+                              });
 
                     // lane labels
                     mini.select(".laneLabelsGroup")
@@ -240,15 +240,15 @@ angular
                         .append("text")
                         .text(id)
                         .attr({
-                            x: -labelRectPadding,
-                            y: function (d, i) {
-                                // 0.5 shifts it halfway into lane
-                                return yScale(i + 0.5);
-                            },
-                            dy: ".5ex",
-                            "text-anchor": "end",
-                            class: "laneText"
-                        });
+                                  x: -labelRectPadding,
+                                  y: function (d, i) {
+                                      // 0.5 shifts it halfway into lane
+                                      return yScale(i + 0.5);
+                                  },
+                                  dy: ".5ex",
+                                  "text-anchor": "end",
+                                  class: "laneText"
+                              });
 
                     // update/redraw mini rectangles
                     var rectAttrs = {
@@ -278,9 +278,9 @@ angular
                         .call(that.brush)
                         .selectAll("rect")
                         .attr({
-                            y: 1,
-                            height: miniHeight - 2
-                        })
+                                  y: 1,
+                                  height: miniHeight - 2
+                              })
                 }
 
                 /**
@@ -321,19 +321,20 @@ angular
 ).directive(
     "eventDistributionOverview",
     [
-        "$rootScope",
-        "$timeout",
         "DistributionOverview",
-        function ($rootScope, $timeout, DistributionOverview) {
+        function (DistributionOverview) {
             // directive definition object
             return {
                 restrict: "EA",
                 scope: false,
                 controller: "distributionController",
-                require:"^^eventDistribution",
+                require: "^^eventDistribution",
                 link: function ($scope, $element, attributes, controller, transcludeFunction) {
                     var element = $element[0];
-                    controller.overview = new DistributionOverview(element, controller.data, controller.options.functions);
+                    controller.overview = new DistributionOverview(
+                        element,
+                        controller.data,
+                        controller.options.functions);
                 }
             }
         }

src/app/d3Bindings/eventDistribution/distributionVisualisation.js

@@ -0,0 +1,91 @@
+/**
+ * Created by Anthony.
+ *
+ * Intended to show the visualisation chosen by the other event distribution controls
+ * A large visual surface of html elements, still controlled by d3
+ *
+ */
+angular
+    .module("bawApp.d3.eventDistribution.distributionVisualisation", [])
+    .service(
+    "DistributionVisualisation",
+    [
+        "d3",
+        function (d3) {
+            return function DistributionVisualisation(target, data, dataFunctions) {
+                // variables
+                var that = this,
+                    container = d3.select(target),
+                    metaTrack = container.select(".metaTrack"),
+                    tiles = container.select(".imageTrack .tiles"),
+                // 86400 seconds
+                    oneDay = 60 * 60 * 24,
+                    tileSizePixels = 60,
+                    tileSizeSeconds = 60 * 60,
+                // seconds per pixel
+                    resolution = oneDay / resolution,
+                // +1 so that 0.5 tile can fall off either end
+                    tileCount = (oneDay / tileSizeSeconds) + 1;
+
+                // exports
+
+
+                // init
+                create();
+
+                // functions
+                function create() {
+                    setDimensions();
+
+                    updateAxis();
+
+
+                    createElements();
+
+                }
+
+                function setDimensions() {
+
+                }
+
+                function updateAxis() {
+
+                }
+
+                function createElements() {
+                    tiles.selectAll(".tile")
+                        .data(d3.range(tileCount))
+                        .enter()
+                        .append("div")
+                        .style("top", 0)
+                        .style("left", function (d, i) {
+                                      return (i * 60) + "px";
+                                  })
+                        .style("width", tileSizePixels + "px")
+                        .attr("class", "tile");
+                }
+
+            }
+        }
+    ]
+).directive(
+    "eventDistributionVisualisation",
+    [
+        "conf.paths",
+        "DistributionVisualisation",
+        function (paths, DistributionVisualisation) {
+            // directive definition object
+            return {
+                restrict: "EA",
+                scope: false,
+                controller: "distributionController",
+                require: "^^eventDistribution",
+                templateUrl: paths.site.files.d3Bindings.eventDistribution.distributionVisualisation,
+                link: function ($scope, $element, attributes, controller, transcludeFunction) {
+                    var element = $element[0];
+                    controller.visualisation = new DistributionVisualisation(element, [], {});
+                }
+            }
+        }
+    ]
+);

src/app/d3Bindings/eventDistribution/distributionVisualisation.tpl.html

@@ -0,0 +1,16 @@
+
+<div class="metaTrack">
+    meta data tracks
+</div>
+<div class="imageTrack">
+    false color spectrogram
+    <div class="tiles">
+        <!-- there should be at most 25 tiles -->
+        <div></div>
+    </div>
+    <div class="dayImageContainer">
+        <grid-lines configuration="gridConfig"></grid-lines>
+        <img ng-src="assets/temp/eabad986-56d9-47b5-bec6-47458ffd3eae_101023-0000.ACI-ENT-EVN-trimmed-PLACEHOLDER.png"
+             src=""/>
+    </div>
+</div>

src/app/d3Bindings/eventDistribution/eventDistribution.js

@@ -0,0 +1,6 @@
+angular.module("bawApp.d3.eventDistribution", [
+    "bawApp.d3.eventDistribution.distributionOverview",
+    "bawApp.d3.eventDistribution.distributionDetail",
+    "bawApp.d3.eventDistribution.distributionVisualisation",
+    "bawApp.d3.eventDistribution.distributionController"
+]);

src/app/visualize/_visualize.scss

@@ -3,21 +3,4 @@
   @include center-block;
 }
 
-.day-visualization {
-  text-align: center;
-
-  .meta-track {
-  }
-
-  .image-track {
-
-    .day-image-container {
-      position: relative;
-      display:  inline-block;
-
-      margin:   1em 1em 2em 1em;
-
-    }
-  }
-}
 

src/app/visualize/visualize.tpl.html

@@ -26,19 +26,7 @@ <h2>Day</h2>
 
             </p>
 
-            <div class="day-visualization">
-                <div class="meta-track">
-                    meta data tracks
-                </div>
-                <div class="image-track">
-                    false color spectrogram
-                    <div class="day-image-container">
-                        <grid-lines configuration="gridConfig"></grid-lines>
-                        <img ng-src="assets/temp/eabad986-56d9-47b5-bec6-47458ffd3eae_101023-0000.ACI-ENT-EVN-trimmed-PLACEHOLDER.png"
-                             src=""/>
-                    </div>
-                </div>
-            </div>
+            <event-distribution-visualisation></event-distribution-visualisation>
         </section>
     </div>
 

src/baw.configuration.tpl.js

@@ -107,6 +107,11 @@ angular.module('bawApp.configuration', ['url'])
                         rendering: 'demo/rendering.tpl.html',
                         bdCloud2014: 'demo/BDCloud2014Demo.tpl.html'
                     },
+                    d3Bindings: {
+                        eventDistribution: {
+                            distributionVisualisation: "d3Bindings/eventDistribution/distributionVisualisation.tpl.html"
+                        }
+                    },
                     visualize: "visualize/visualize.tpl.html"
                 },
                 // routes used by angular