rubyneat_dashboard 0.4.0.alpha.4

data/app/css/vendor/normalize.css

@@ -0,0 +1,423 @@
+/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8+, and Opera
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

data/app/js/dashboard/controllers/critters_controller.coffee

@@ -0,0 +1 @@
+@CrittersController = ($scope) ->

data/app/js/dashboard/controllers/dashboard_controller.coffee

@@ -0,0 +1,2 @@
+@DashboardController = ($scope) ->
+

data/app/js/dashboard/controllers/home_controller.coffee

@@ -0,0 +1 @@
+@HomeController = ($scope) ->

data/app/js/dashboard/controllers/overview_controller.coffee

@@ -0,0 +1,2 @@
+@OverviewController = ($scope) ->
+

data/app/js/dashboard/controllers/population_controller.coffee

@@ -0,0 +1,14 @@
+@PopulationController = ($scope, populationService) ->
+  $scope.init = ->
+    $scope.entry = {}
+    $scope.entries = []
+    populationService.getMessages (message) ->
+        $scope.$apply ->
+          p = message.payload
+          $scope.entry = {
+            generation: p.generation
+            best: p.fitness.best
+            overall: p.fitness.overall
+            worst: p.fitness.worst
+          }
+          $scope.entries.push $scope.entry

data/app/js/dashboard/directives/critter_genotype_topology.coffee

@@ -0,0 +1,6 @@
+@DashboardApp.directive 'critter-genotype-topology', ->
+  link = (scope, element, attr) ->
+
+    # put D3 code here
+  link: link
+  restrict: "E"

data/app/js/dashboard/directives/critter_phenotype_topology.coffee

@@ -0,0 +1,6 @@
+@DashboardApp.directive 'critter-phenotype-topology', ->
+  link = (scope, element, attr) ->
+
+    # put D3 code here
+  link: link
+  restrict: "E"

data/app/js/dashboard/directives/pie.coffee

@@ -0,0 +1,39 @@
+# This is a test for D3, which we may actually use later.
+# The pie is really a doughnut chart. Pie is shorter to type. Haha.
+@DashboardApp.directive 'pie', ->
+  link = (scope, el, attr) ->
+    console.log('Pie data=' + scope.data +
+      ' width=' + scope.width +
+      ' height=' + scope.height)
+    color = d3.scale.category10()
+    data = scope.data
+    width = scope.width || 300
+    height = scope.height || 300
+    min = Math.min(width, height)
+    svg = d3.select(el[0]).append('svg')
+    pie = d3.layout.pie().sort(null)
+    arc = d3.svg.arc()
+    .outerRadius(min / 2 * 0.9)
+    .innerRadius(min / 2 * 0.5)
+    svg.attr(
+      width: width
+      height: height
+    )
+    g = svg.append('g').attr('transform', "translate(#{width/2}, #{height/2})")
+    arcs = g.selectAll('path').data(pie(data))
+      .enter().append('path')
+      .style('stroke', 'white')
+      .attr('fill',
+        (d,i) ->
+          color(i)
+        )
+    scope.$watch('data',
+    ->
+      arcs.data(pie(data)).attr('d', arc)
+    , true)
+  link: link
+  restrict: 'E'
+  scope:
+    data:   '='
+    width:  '='
+    height: '='

data/app/js/dashboard/directives/population_progress_chart.coffee

@@ -0,0 +1,172 @@
+@DashboardApp.directive 'populationProgressChart', ->
+  link = (scope, el, attr) ->
+    color  = scope.color || d3.scale.category10()
+    width  = scope.width || 500
+    height = scope.height || 300
+    labels = scope.labels || ['alpha']
+    basis  = scope.basis || 'generation'
+    xname  = scope.xaxisName || '**Generations**'
+    yname  = scope.yaxisName || '**Fitness**'
+
+    margin =
+      top: 20
+      right: 80
+      bottom: 30
+      left: 50
+
+    svg = d3.select(el[0]).append('svg')
+      .attr('width', width).attr('height', height).append('g')
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+
+    width  -= margin.left + margin.right
+    height -= margin.top + margin.bottom
+
+    svg.append("defs").append("clipPath")
+      .attr("id", "clip")
+      .append("rect")
+      .attr("width", width)
+      .attr("height", height);
+
+    datamessage = (data) ->
+      x = d3.scale.linear().range([ 0, width ])
+      y = d3.scale.linear().range([ height, 0 ])
+
+      xAxis = d3.svg.axis().scale(x).orient("bottom")
+      yAxis = d3.svg.axis().scale(y).orient("left")
+
+      line = d3.svg.line().interpolate("linear").x((d) ->
+          x d.gen
+        ).y((d) ->
+          y d.fitness
+        )
+
+      color.domain labels
+      gxAxix = svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + height + ")")
+      gyAxis = svg.append("g")
+        .attr("class", "y axis")
+
+      update_fitness = (tick = null) ->
+        unless tick
+          scope.fitness = color.domain().map (name) ->
+            name: name
+            values: data.map (d) ->
+              gen: d[basis]
+              fitness: +d[name]
+          scope.fitness = scope.fitness.toDict('name')
+        else
+          labels.map (name) ->
+            scope.fitness[name].values.push {
+              gen: tick.generation
+              fitness: tick[name]
+            }
+        scope.fitness
+
+      update_domains = (fitness) ->
+        x.domain d3.extent data, (d) ->
+          d[basis]
+
+        y.domain [ d3.min(labels, (c) ->
+          d3.min fitness[c].values, (v) ->
+            v.fitness
+        ), d3.max(labels, (c) ->
+          d3.max fitness[c].values, (v) ->
+            v.fitness
+        ) ]
+
+      update_axes = ->
+        gxAxix.call(xAxis)
+          .append("text").attr("transform", "translate(" + width / 2 + "," + 30 + ")")
+          .attr("x", 6).attr("dx", ".9em")
+          .style("text-anchor", "end").text xname
+
+        gyAxis.call(yAxis)
+          .append("text").attr("transform", "rotate(-90)")
+          .attr("y", 6).attr("dy", ".9em")
+          .style("text-anchor", "end").text yname
+
+      render_all = (data) ->
+        fitness = update_fitness()
+        update_domains(fitness)
+        update_axes()
+
+        scope.paths = svg.selectAll(".fit")
+          .data(labels)
+            .enter().append("g").attr("class", "fit")
+            .attr("name", (name) ->
+                name
+              )
+
+        scope.paths.append("path")
+          .attr("class", "line")
+          .attr("name", (d) ->
+              d.name
+            )
+          .attr("d", (name) ->
+              line fitness[name].values
+            )
+          .style "stroke", (name) ->
+              color name
+
+        scope.paths.append("text")
+          .datum((name) ->
+              d = fitness[name]
+              name: name
+              value:  if d.values.length > 0
+                        d.values[d.values.length - 1]
+                      else
+                        0
+            )
+          .attr("transform", (d) ->
+              "translate(" + x(d.value.gen) + "," + y(d.value.fitness) + ")"
+            ).attr("x", 3).attr("dy", ".35em")
+          .text (name) ->
+            name
+
+      update_paths = (fitness) ->
+        p = scope.paths.selectAll("path")
+        p.attr("d", (name) ->
+            line fitness[name].values
+          ).style "stroke", (name) ->
+            color name
+
+        t = scope.paths.selectAll("text")
+        t.datum((last) ->
+            d = fitness[last.name]
+            name: d.name
+            value: d.values[d.values.length - 1]
+          ).attr("transform", (d) ->
+            "translate(" + x(d.value.gen) + "," + y(d.value.fitness) + ")"
+          ).attr("x", 3).attr("dy", ".35em").text (d) ->
+            d.name
+
+
+
+      render_all data
+
+      render_tick = (tick) ->
+        fitness = update_fitness(tick)
+        update_domains(fitness)
+        update_axes()
+        update_paths(fitness)
+
+      scope.$watch 'tickSource', (tick) ->
+        render_tick(tick) if tick.generation
+      , true
+
+    datamessage scope.data
+
+  link: link
+  restrict: 'E'
+  template: '<div></div>'
+  scope:
+    width:      '='
+    height:     '='
+    data:       '='
+    tickSource: '='
+    color:      '='
+    labels:     '='
+    basis:      '='
+    xaxisName:  '@'
+    yaxisName:  '@'

data/app/js/dashboard/services/population_service.coffee

@@ -0,0 +1,5 @@
+@DashboardApp.factory 'populationService', () ->
+  source = new EventSource('/population')
+  getMessages: (receiver) ->
+    source.onmessage = (event) ->
+        receiver(JSON.parse(event.data))