Data Type Icons

Gruntfile.js

@@ -420,6 +420,7 @@ module.exports = function (grunt) {
 
     grunt.task.run([
       'clean:server',
+      'copyvl',
       'wiredep',
       'concurrent:server',
       'autoprefixer',

app/scripts/directives/fielddefeditor.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('vleApp')
-  .directive('fieldDefEditor', function () {
+  .directive('fieldDefEditor', function (Dataset) {
     return {
       templateUrl: 'templates/fielddefeditor.html',
       restrict: 'E',
@@ -14,6 +14,7 @@ angular.module('vleApp')
         scope.propsExpanded = false;
         scope.funcsExpanded = false;
         scope.field = null;
+        scope.typeNames = Dataset.typeNames;
 
         scope.togglePropsExpand = function(){
           scope.propsExpanded = !scope.propsExpanded;

app/scripts/directives/functionselect.js

@@ -57,6 +57,16 @@ angular.module('vleApp')
 
           var functions = [{name: ""}];
 
+          if(schema.fn && (!schema.fn.supportedTypes || schema.fn.supportedTypes[type])){
+            var fns = schema.fn.enum;
+            fns.forEach(function(fn){
+              functions.push({
+                'name': fn,
+                'group': "Function"
+              });
+            });
+          }
+
           // set aggregation functions
           if (schema.aggr && (!schema.aggr.supportedTypes || schema.aggr.supportedTypes[type])) {
             var aggFunctions = schema.aggr.supportedEnums ? schema.aggr.supportedEnums[type] : schema.aggr.enum;
@@ -73,6 +83,7 @@ angular.module('vleApp')
             });
           }
 
+
           // add binning function
           if (schema.bin && schema.bin.supportedTypes[type]) {
             var bin = {

app/scripts/directives/schemalist.js

@@ -15,13 +15,14 @@ angular.module('vleApp')
 
       },
       controller: function ($scope) {
-        $scope.schema = null;
+        $scope.dataschema = null;
         $scope.stats = null;
+        $scope.typeNames = Dataset.typeNames;
 
         $scope.$watch(
-          function(){ return Dataset.schema; },
+          function(){ return Dataset.dataschema; },
           function(newSchema) {
-            $scope.schema = newSchema;
+            $scope.dataschema = newSchema;
             $scope.stats = Dataset.stats;
           }
         );

app/scripts/services/dataset.js

@@ -1,7 +1,6 @@
 'use strict';
 
-var datasets = [
-{
+var datasets = [{
   name: 'Barley',
   url: 'data/barley.json',
   table: 'barley_json'
@@ -37,19 +36,25 @@ var datasets = [
   name: 'Birdstrikes',
   url: 'data/birdstrikes.json',
   table: 'birdstrikes_json'
-}
-];
+}];
 
 angular.module('vleApp')
   .factory('Dataset', function ($http, Config, _, Papa) {
     var Dataset = {};
 
     Dataset.datasets = datasets;
-
     Dataset.dataset = datasets[7]; //Movies
-    Dataset.schema = null;
+    Dataset.dataschema = [];
     Dataset.stats = null;
 
+    // TODO move these to constant to a universal vlui constant file
+    Dataset.typeNames = {
+      O: "text",
+      Q: "number",
+      T: "time",
+      G: "geo"
+    };
+
     function setSchemaAndStats(dataset) {
       if (Config.useVegaServer) {
         var url = Config.serverUrl + '/stats/?name=' + dataset.table;
@@ -61,15 +66,19 @@ angular.module('vleApp')
             field.min = +row.min;
             field.max = +row.max;
             field.cardinality = +row.cardinality;
-            field.type = row.type === 'integer' || row.type === 'real' ? "Q" : "O";
             stats[name] = field;
+
+            // TODO add "geo" and "time"
+            var type = row.type === 'integer' || row.type === 'real' ? "Q" : "O";
+
+            Dataset.dataschema.push({name: name, type: type});
           });
-          Dataset.schema = _.keys(stats);
+          Dataset.dataschema = _.keys(stats);
           Dataset.stats = stats;
         });
       } else {
         return $http.get(dataset.url, {cache: true}).then(function(response) {
-          Dataset.schema = _.keys(response.data[0]);
+          Dataset.dataschema = vl.data.getSchema(response.data);
           Dataset.stats = vl.data.getStats(response.data);
         });
       }

app/styles/vlui-common.scss

@@ -148,6 +148,35 @@ h4 {
   user-select: none;
 }
 
+/** ICONS FOR DATA TYPES */
+
+.icon-type{
+  @extend .inline-block;
+  width: 22px;
+  height: 15px;
+  color: transparent;
+}
+
+.icon-type-location{
+  @extend .icon-type;
+  background: url("../images/field_geo.png") no-repeat;
+}
+
+.icon-type-text{
+  @extend .icon-type;
+  background: url("../images/field_text.png") no-repeat;
+}
+
+.icon-type-number{
+  @extend .icon-type;
+  background: url("../images/field_number.png") no-repeat;
+}
+
+.icon-type-time{
+  @extend .icon-type;
+  background: url("../images/field_time.png") no-repeat;
+}
+
 /**** FIELD & FIELD-PILLS ****/
 
 .field {

app/templates/fielddefeditor.html

@@ -59,7 +59,7 @@ <h4>Functions</h4>
     <function-select field-def="fieldDef" field-def-schema="schema"></function-select>
     <h4>Types</h4>
     <select class="type-select" ng-model="fieldDef.type"
-            ng-options="type for type in schema.properties.type.enum track by type">
+            ng-options="type as typeNames[type] for type in schema.properties.type.enum track by type">
     </select>
 
   </div>

app/templates/schemalist.html

@@ -1,16 +1,16 @@
 <div class="schema">
   <div class="field"
-       ng-repeat="field in schema"
-       ng-init="fieldType = stats[field].type; fieldDef = {name:field, type: fieldType};">
-    <div class="type">
-      {{fieldType}}
+       ng-repeat="field in dataschema"
+       ng-init="fieldDef = {name:field.name, type: field.type};">
+    <div class="type icon-type-{{typeNames[field.type]}}" title="{{typeNames[field.type]}}">
+      {{field.type}}
     </div>
     <div class="field-pill draggable"
          ng-model="fieldDef"
          data-drag="true"
          jqyoui-draggable="{placeholder: 'keep', onStart: 'fieldDragStart'}"
          data-jqyoui-options="{revert: 'invalid', helper: 'clone'}">
-      <span class="field-name">{{ field }}</span>
+      <span class="field-name">{{ field.name }}</span>
     </div>
   </div>
 </div>