소스 검색

[spark] Migrated from Chosen to Select2 and filtered out chart columns

Enrico Berti 10 년 전
부모
커밋
cef42a5
2개의 변경된 파일47개의 추가작업 그리고 23개의 파일을 삭제
  1. 15 23
      apps/spark/src/spark/templates/editor.mako
  2. 32 0
      apps/spark/static/js/spark.ko.js

+ 15 - 23
apps/spark/src/spark/templates/editor.mako

@@ -39,6 +39,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
 <link rel="stylesheet" href="/static/ext/css/leaflet.css">
 <link rel="stylesheet" href="/static/ext/css/nv.d3.min.css">
 <link rel="stylesheet" href="/static/css/nv.d3.css">
+<link rel="stylesheet" href="/static/ext/select2/select2.css">
 
 
 <script src="/static/ext/js/codemirror-3.11.js"></script>
@@ -96,6 +97,9 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
 
 <script src="/static/js/ko.charts.js" type="text/javascript" charset="utf-8"></script>
 
+<script src="/static/ext/select2/select2.min.js" type="text/javascript" charset="utf-8"></script>
+
+
 
 
 <div class="search-bar">
@@ -196,7 +200,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
           <li class="nav-header">${_('database')}</li>
         </ul>
         <!-- ko if: $root.assistContent && $root.assistContent().mainObjects().length > 0 -->
-          <select data-bind="options: $root.assistContent().mainObjects, chosen: {isAssist: true}" class="input-medium" data-placeholder="${_('Choose a database...')}"></select>
+          <select data-bind="options: $root.assistContent().mainObjects, select2: { width: '100%', placeholder: '${ _("Choose a database...") }', update: $root.assistSelectedMainObject}" class="input-medium" data-placeholder="${_('Choose a database...')}"></select>
           <input type="text" placeholder="${ _('Table name...') }" style="width:90%; margin-top: 20px"/>
           <div data-bind="visible: Object.keys($root.assistContent().firstLevelObjects()).length == 0">${_('The selected database has no tables.')}</div>
           <ul data-bind="visible: Object.keys($root.assistContent().firstLevelObjects()).length > 0, foreach: Object.keys($root.assistContent().firstLevelObjects())" class="unstyled assist-main">
@@ -454,7 +458,7 @@ ${_('Example: SELECT * FROM tablename, or press CTRL + space')}
                 <li data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.MAP" class="nav-header">${_('latitude')}</li>
               </ul>
               <div data-bind="visible: chartType() != ''">
-                <select data-bind="options: result.cleanedMeta, value: chartX, optionsText: 'name', optionsValue: 'name', optionsCaption: '${_('Choose a column...')}', chosen: {}" class="input-medium"></select>
+                <select data-bind="options: (chartType() == ko.HUE_CHARTS.TYPES.BARCHART || chartType() == ko.HUE_CHARTS.TYPES.PIECHART) ? result.cleanedMeta : result.cleanedNumericMeta, value: chartX, optionsText: 'name', optionsValue: 'name', optionsCaption: '${_('Choose a column...')}', select2: { width: '100%', placeholder: '${ _("Choose a column...") }', update: chartX}" class="input-medium"></select>
               </div>
 
               <ul class="nav nav-list" style="border: none; background-color: #FFF" data-bind="visible: chartType() != ''">
@@ -463,19 +467,19 @@ ${_('Example: SELECT * FROM tablename, or press CTRL + space')}
               </ul>
 
               <div style="overflow-y: scroll; max-height: 220px" data-bind="visible: chartType() != '' && (chartType() == ko.HUE_CHARTS.TYPES.BARCHART || chartType() == ko.HUE_CHARTS.TYPES.LINECHART)">
-                <ul class="unstyled" data-bind="foreach: result.cleanedMeta">
+                <ul class="unstyled" data-bind="foreach: result.cleanedNumericMeta">
                   <li><input type="checkbox" data-bind="checkedValue: name, checked: $parent.chartYMulti" /> <span data-bind="text: $data.name"></span></li>
                 </ul>
               </div>
               <div data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.PIECHART || chartType() == ko.HUE_CHARTS.TYPES.MAP">
-                <select data-bind="options: result.cleanedMeta, value: chartYSingle, optionsText: 'name', optionsValue: 'name', optionsCaption: '${_('Choose a column...')}', chosen: {}" class="input-medium"></select>
+                <select data-bind="options: result.cleanedNumericMeta, value: chartYSingle, optionsText: 'name', optionsValue: 'name', optionsCaption: '${_('Choose a column...')}', select2: { width: '100%', placeholder: '${ _("Choose a column...") }', update: chartYSingle}" class="input-medium"></select>
               </div>
 
               <ul class="nav nav-list" style="border: none; background-color: #FFF" data-bind="visible: chartType() != '' && chartType() == ko.HUE_CHARTS.TYPES.MAP">
                 <li class="nav-header">${_('label')}</li>
               </ul>
               <div data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.MAP">
-                <select data-bind="options: result.cleanedMeta, value: chartMapLabel, optionsText: 'name', optionsValue: 'name', optionsCaption: '${_('Choose a column...')}', chosen: {}" class="input-medium"></select>
+                <select data-bind="options: result.cleanedMeta, value: chartMapLabel, optionsText: 'name', optionsValue: 'name', optionsCaption: '${_('Choose a column...')}', select2: { width: '100%', placeholder: '${ _("Choose a column...") }', update: chartMapLabel}" class="input-medium"></select>
               </div>
 
               <ul class="nav nav-list" style="border: none; background-color: #FFF" data-bind="visible: chartType() != '' && chartType() != ko.HUE_CHARTS.TYPES.MAP">
@@ -589,24 +593,6 @@ ${_('Example: SELECT * FROM tablename, or press CTRL + space')}
     }
   };
 
-  ko.bindingHandlers.chosen = {
-    init: function (element, valueAccessor) {
-      $(element).chosen({
-        disable_search_threshold: 5,
-        width: "100%"
-      }).change(function (e, obj) {
-        if (typeof valueAccessor().isAssist != "undefined" && valueAccessor().isAssist) {
-          viewModel.assistContent().selectedMainObject(obj.selected);
-          loadAssistFirstLevel();
-        }
-      });
-    },
-    update: function (element, valueAccessor, allBindings) {
-      $(element).trigger('chosen:updated');
-    }
-  };
-
-
   ko.bindingHandlers.codemirror = {
     init: function (element, valueAccessor, allBindingsAccessor, snippet) {
 
@@ -966,6 +952,11 @@ ${_('Example: SELECT * FROM tablename, or press CTRL + space')}
   ko.applyBindings(viewModel);
   viewModel.init();
 
+  viewModel.assistSelectedMainObject.subscribe(function(newVal) {
+    viewModel.assistContent().selectedMainObject(newVal);
+    loadAssistFirstLevel();
+  });
+
   function loadAssistSecondLevel(first) {
     if (!viewModel.assistContent().firstLevelObjects()[first].loaded()) {
       viewModel.assistContent().isLoading(true);
@@ -1007,6 +998,7 @@ ${_('Example: SELECT * FROM tablename, or press CTRL + space')}
         viewModel.assistContent().mainObjects(data.databases);
         if (viewModel.assistContent().mainObjects().length > 0 && !viewModel.assistContent().selectedMainObject()) {
           viewModel.assistContent().selectedMainObject(viewModel.assistContent().mainObjects()[0]);
+          viewModel.assistSelectedMainObject(viewModel.assistContent().selectedMainObject());
           loadAssistFirstLevel();
         }
       }

+ 32 - 0
apps/spark/static/js/spark.ko.js

@@ -29,6 +29,37 @@ var Result = function (snippet, result) {
       return item.name != ''
     });
   });
+
+  function isNumericColumn(type) {
+    return $.inArray(type, ['TINYINT_TYPE', 'SMALLINT_TYPE', 'INT_TYPE', 'BIGINT_TYPE', 'FLOAT_TYPE', 'DOUBLE_TYPE', 'DECIMAL_TYPE', 'TIMESTAMP_TYPE', 'DATE_TYPE']) > -1;
+  }
+
+  function isDateTimeColumn(type) {
+    return $.inArray(type, ['TIMESTAMP_TYPE', 'DATE_TYPE']) > -1;
+  }
+
+  function isStringColumn(type) {
+    return !isNumericColumn(type) && !isDateTimeColumn(type);
+  }
+
+  self.cleanedNumericMeta = ko.computed(function(){
+    return ko.utils.arrayFilter(self.meta(), function(item) {
+      return item.name != '' && isNumericColumn(item.type)
+    });
+  });
+
+  self.cleanedStringMeta = ko.computed(function(){
+    return ko.utils.arrayFilter(self.meta(), function(item) {
+      return item.name != '' && isStringColumn(item.type)
+    });
+  });
+
+  self.cleanedDateTimeMeta = ko.computed(function(){
+    return ko.utils.arrayFilter(self.meta(), function(item) {
+      return item.name != '' && isDateTimeColumn(item.type)
+    });
+  });
+
   self.data = ko.observableArray(typeof result.data != "undefined" && result.data != null ? result.data : []);
   self.data.extend({ rateLimit: 50 });
   self.logs = ko.observable('');
@@ -519,6 +550,7 @@ function EditorViewModel(notebooks, options) {
   };
 
   self.assistContent = ko.observable();
+  self.assistSelectedMainObject = ko.observable();
 
   self.availableSnippets = ko.mapping.fromJS(options.languages);