Factor html js, Databench v0.5 (#6)

* databench 0.5 rewrite

* update localcrawl

* update to java8

* upgrade ci system

* update

* validate angular attributes ok

* run crawl on different port

* give tests time to build

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+    "extends": "airbnb",
+    "installedESLint": true,
+    "plugins": [
+        "react",
+        "jsx-a11y",
+        "import"
+    ],
+    "rules": {
+        "no-param-reassign": 0
+    }
+}

.gitignore

@@ -1,3 +1,5 @@
+_crawled/
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]
@@ -57,3 +59,5 @@ venv3/
 .DS_Store
 .elasticbeanstalk/
 analyses/node_modules
+node_modules/
+.vscode/

.travis.yml

@@ -5,9 +5,21 @@ python:
  - "3.4"
  - "3.5"
 install:
+ # install Node 6
+ - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install 6
+ - node -v
+ # Java 8 for html5validator
+ - sudo apt-get install oracle-java8-installer
+ - sudo update-java-alternatives -s java-8-oracle
+ # upgrade Python
  - pip install --upgrade pip
+ # actual install
  - pip install -r requirements.txt
  - pip install -r tests/requirements.txt
+ - npm install
 script:
  - flake8
+ - npm run lint
+ - localcrawl --start http://localhost:5001 --run-delay 10.0 --run databench --log DEBUG --port 5001
+ - html5validator --root _crawled/ --ignore-re 'Attribute "ng-[a-z-]+" not allowed'
  - nosetests tests

analyses/angular/analysis.css

@@ -0,0 +1,18 @@
+.nav {
+    display: block;
+    width: 100%;
+    float: left;
+}
+.nav-pills li {
+    display: block;
+    padding: 5px 20px;
+    border: 1px solid #55a;
+    border-bottom: 0;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    float: left;
+    margin-left: 5px;
+}
+.nav-pills li.active {
+    border-top: 3px solid #55a;
+}

analyses/angular/analysis.js

@@ -0,0 +1,26 @@
+/* global Databench */
+/* global angular */
+
+const databench = new Databench.Connection();
+Databench.ui.wire(databench);
+
+angular.module('angularApp', [])
+  .controller('navCtrl', ['$scope', '$location', ($scope, $location) => {
+    $scope.navCheck = (page) => {
+      const currentRoute = $location.path().substring(1) || 'home';
+      return page === currentRoute;
+    };
+  }])
+  .controller('testingAngular', ['$scope', ($scope) => {
+    $scope.chapter = 'modify me';
+  }])
+  .controller('simplepi', ['$scope', ($scope) => {
+    $scope.pi = '0.0 ± 1.0';
+
+    databench.on({ data: 'pi' }, (pi) => {
+      $scope.pi = `${pi.estimate.toFixed(3)} ± ${pi.uncertainty.toFixed(3)}`;
+      $scope.$apply();
+    });
+  }]);
+
+databench.connect();

analyses/angular/index.html

@@ -2,27 +2,9 @@
 
 
 {% block head %}
+<link rel="stylesheet" href="/_static/databench.css?v={{ databench_version }}">
 <link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">
-<style>
-.nav {
-    display: block;
-    width: 100%;
-    float: left;
-}
-.nav-pills li {
-    display: block;
-    padding: 5px 20px;
-    border: 1px solid #55a;
-    border-bottom: 0;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    float: left;
-    margin-left: 5px;
-}
-.nav-pills li.active {
-    border-top: 3px solid #55a;
-}
-</style>
+<link rel="stylesheet" href="/angular/static/analysis.css?v={{ version }}">
 {% end %}
 
 
@@ -32,7 +14,6 @@
     <ul class="nav nav-pills">
         <li ng-class="{active: navCheck('home')}"><a href='#/home'>Home</a></li>
         <li ng-class="{active: navCheck('simplepi')}"><a href='#/simplepi'>Simple π</a></li>
-        <li ng-class="{active: navCheck('logmessages')}"><a href='#/logmessages'>Log Messages</a></li>
     </ul>
 
     <div ng-show="navCheck('home')" ng-controller="testingAngular">
@@ -74,44 +55,15 @@ <h1>
         inside the first quadrant of the unit circle.</p>
     </div>
 
-    <div ng-show="navCheck('logmessages')">
-        <h1>Log Messages</h1>
-        <pre id="log"></pre>
-    </div>
-
 </div>
 </div>
 {% end %}
 
 
 {% block footer %}
+<script src="/_static/databench.js?v={{ databench_version }}"></script>
 <script src="/angular/static/angular_1.2.15.min.js"></script>
-<script>
-    var databench = new Databench.Connection();
-    Databench.ui.wire(databench);
-
-    angular.module('angularApp', [])
-    .controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
-        $scope.navCheck = function (page) {
-            var currentRoute = $location.path().substring(1) || 'home';
-            return page === currentRoute;
-        };
-    }])
-    .controller('testingAngular', ['$scope', function($scope) {
-        $scope.chapter = 'modify me';
-    }])
-    .controller('simplepi', ['$scope', function($scope) {
-        $scope.pi = '0.0 ± 1.0';
-
-
-        databench.on({data: 'pi'}, function(pi) {
-            $scope.pi = pi.estimate.toFixed(3)+' ± '+pi.uncertainty.toFixed(3);
-            $scope.$apply();
-        });
-    }]);
-
-    databench.connect();
-</script>
+<script src="/angular/static/analysis.js"></script>
 {% end %}
 
 

analyses/bagofcharsd3/analysis.css

@@ -0,0 +1,25 @@
+#viz {
+  height: 300px;
+  width: 100%;
+}
+
+path.slice {
+  stroke-width: 2px;
+}
+polyline {
+  opacity: .3;
+  stroke: black;
+  stroke-width: 2px;
+  fill: none;
+}
+input[type=text] {
+  box-sizing: border-box;
+  font-size: 110%;
+  color: #555;
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  line-height: 1.4;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}

analyses/bagofcharsd3/analysis.js

@@ -0,0 +1,21 @@
+/* global Databench */
+/* global d3charcount */
+/* global document */
+
+const databench = new Databench.Connection();
+Databench.ui.wire(databench);
+document.getElementById('sentence').databenchUI.triggerOnKeyUp();
+
+
+const d3visualizaton = d3charcount('viz');
+
+databench.on({ data: 'counts' }, (counts) => {
+  const reformattedData = Object.keys(counts)
+    .map(letter => ({ label: letter, value: counts[letter] }));
+
+  if (reformattedData.length > 0) d3visualizaton(reformattedData);
+});
+
+
+databench.connect();
+databench.emit('sentence', 'type a phrase');