Initial commit

lib/assets/javascripts/builder/editor/style/style-form/none-form-message.tpl

@@ -0,0 +1,3 @@
+<h2 class="CDB-Text CDB-Size-huge is-light u-secondaryTextColor">
+  <%- _t('editor.style.messages.none') %>
+</h2>

lib/assets/javascripts/builder/editor/style/style-form/style-aggregation-form/style-aggregation-form-view.js

@@ -0,0 +1,69 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+require('builder/components/form-components/index');
+var StyleShapeFormModel = require('./style-aggregation-properties-form-model');
+var template = require('./style-aggregation-form.tpl');
+
+module.exports = CoreView.extend({
+  module: 'editor/style/style-form/style-aggregation-form/style-aggregation-form-view',
+
+  initialize: function (opts) {
+    if (!opts.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!opts.queryGeometryModel) throw new Error('queryGeometryModel is required');
+    if (!opts.styleModel) throw new Error('styleModel is required');
+    if (!opts.modals) throw new Error('modals is required');
+    if (!opts.configModel) throw new Error('configModel is required');
+    if (!opts.userModel) throw new Error('userModel is required');
+
+    this._queryGeometryModel = opts.queryGeometryModel;
+    this._querySchemaModel = opts.querySchemaModel;
+    this._styleModel = opts.styleModel;
+    this._configModel = opts.configModel;
+    this._userModel = opts.userModel;
+    this._modals = opts.modals;
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this._removeFormView();
+    this.$el.html(template());
+    this._initViews();
+    return this;
+  },
+
+  _initViews: function () {
+    this._aggrFormModel = new StyleShapeFormModel(
+      this._styleModel.get('aggregation'),
+      {
+        queryGeometryModel: this._queryGeometryModel,
+        querySchemaModel: this._querySchemaModel,
+        styleModel: this._styleModel,
+        configModel: this._configModel,
+        userModel: this._userModel,
+        modals: this._modals
+      }
+    );
+
+    this._aggrFormView = new Backbone.Form({
+      model: this._aggrFormModel
+    });
+
+    this._aggrFormView.bind('change', function () {
+      this.commit();
+    });
+
+    this.$('.js-aggregationForm').append(this._aggrFormView.render().el);
+  },
+
+  _removeFormView: function () {
+    if (this._aggrFormView) {
+      this._aggrFormView.remove();
+    }
+  },
+
+  clean: function () {
+    this._removeFormView();
+    CoreView.prototype.clean.call(this);
+  }
+
+});

lib/assets/javascripts/builder/editor/style/style-form/style-aggregation-form/style-aggregation-form.tpl

@@ -0,0 +1,10 @@
+<div class="Editor-HeaderInfo js-aggregationOptions">
+  <div class="Editor-HeaderNumeration CDB-Text is-semibold u-rSpace--m">2</div>
+  <div class="Editor-HeaderInfo-inner CDB-Text js-selector">
+    <div class="Editor-HeaderInfo-title u-bSpace--m">
+      <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large"><%- _t('editor.style.style-form.aggregation.title-label') %></h2>
+    </div>
+    <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m js-highlight"><%- _t('editor.style.style-form.aggregation.desc') %></p>
+    <div class="js-aggregationForm"></div>
+  </div>
+</div>

lib/assets/javascripts/builder/editor/style/style-form/style-aggregation-form/style-aggregation-properties-form-model.js

@@ -0,0 +1,12 @@
+var _ = require('underscore');
+var StyleFormDefaultModel = require('builder/editor/style/style-form/style-form-default-model');
+
+module.exports = StyleFormDefaultModel.extend({
+
+  _FORM_NAME: 'aggregation',
+
+  _onChange: function () {
+    this._styleModel.set('aggregation', _.clone(this.attributes));
+  }
+
+});

lib/assets/javascripts/builder/editor/style/style-form/style-form-components-dictionary.js

@@ -0,0 +1,121 @@
+var StyleFormAggregationDataset = require('builder/editor/style/style-form/style-form-dictionary/aggregation-dataset');
+var StyleFormAggregationSize = require('builder/editor/style/style-form/style-form-dictionary/aggregation-size');
+var StyleFormAggregationValue = require('builder/editor/style/style-form/style-form-dictionary/aggregation-value');
+
+var StyleFormAnimatedAttribute = require('builder/editor/style/style-form/style-form-dictionary/animated-attribute');
+var StyleFormAnimatedDuration = require('builder/editor/style/style-form/style-form-dictionary/animated-duration');
+var StyleFormAnimatedOverlap = require('builder/editor/style/style-form/style-form-dictionary/animated-overlap');
+var StyleFormAnimatedResolution = require('builder/editor/style/style-form/style-form-dictionary/animated-resolution');
+var StyleFormAnimatedSteps = require('builder/editor/style/style-form/style-form-dictionary/animated-steps');
+var StyleFormAnimatedTrails = require('builder/editor/style/style-form/style-form-dictionary/animated-trails');
+
+var StyleFormBlending = require('builder/editor/style/style-form/style-form-dictionary/blending');
+
+var StyleFormFillColor = require('builder/editor/style/style-form/style-form-dictionary/fill-color');
+var StyleFormFillSize = require('builder/editor/style/style-form/style-form-dictionary/fill-size');
+
+var StyleFormLabelsAttribute = require('builder/editor/style/style-form/style-form-dictionary/labels-attribute');
+var StyleFormLabelsFillSize = require('builder/editor/style/style-form/style-form-dictionary/labels-fill-size');
+var StyleFormLabelsFillColor = require('builder/editor/style/style-form/style-form-dictionary/labels-fill-color');
+var StyleFormLabelsFont = require('builder/editor/style/style-form/style-form-dictionary/labels-font');
+var StyleFormLabelsHaloSize = require('builder/editor/style/style-form/style-form-dictionary/labels-halo-size');
+var StyleFormLabelsHaloColor = require('builder/editor/style/style-form/style-form-dictionary/labels-halo-color');
+var StyleFormLabelsOffset = require('builder/editor/style/style-form/style-form-dictionary/labels-offset');
+var StyleFormLabelsOverlap = require('builder/editor/style/style-form/style-form-dictionary/labels-overlap');
+var StyleFormLabelsPlacement = require('builder/editor/style/style-form/style-form-dictionary/labels-placement');
+
+var StyleFormStrokeSize = require('builder/editor/style/style-form/style-form-dictionary/stroke-size');
+var StyleFormStrokeColor = require('builder/editor/style/style-form/style-form-dictionary/stroke-color');
+
+var StyleFormStyle = require('builder/editor/style/style-form/style-form-dictionary/style');
+var StyleFormHidden = require('builder/editor/style/style-form/style-form-dictionary/hidden');
+
+/*
+ *  Dictionary that contains all the necessary components
+ *  for the styles form
+ */
+
+module.exports = {
+  'aggregation-dataset': function (params) {
+    return StyleFormAggregationDataset.generate(params);
+  },
+  'aggregation-size': function (params) {
+    return StyleFormAggregationSize.generate(params);
+  },
+  'aggregation-value': function (params) {
+    return StyleFormAggregationValue.generate(params);
+  },
+  'animated-attribute': function (params) {
+    return StyleFormAnimatedAttribute.generate(params);
+  },
+  'animated-enabled': function (params) {
+    return StyleFormHidden.generate(params);
+  },
+  'animated-duration': function (params) {
+    return StyleFormAnimatedDuration.generate(params);
+  },
+  'animated-overlap': function (params) {
+    return StyleFormAnimatedOverlap.generate(params);
+  },
+  'animated-resolution': function (params) {
+    return StyleFormAnimatedResolution.generate(params);
+  },
+  'animated-steps': function (params) {
+    return StyleFormAnimatedSteps.generate(params);
+  },
+  'animated-trails': function (params) {
+    return StyleFormAnimatedTrails.generate(params);
+  },
+
+  'blending': function (params) {
+    return StyleFormBlending.generate(params);
+  },
+
+  'fillSize': function (params) {
+    return StyleFormFillSize.generate(params);
+  },
+  'fillColor': function (params) {
+    return StyleFormFillColor.generate(params);
+  },
+
+  'labels-enabled': function (params) {
+    return StyleFormHidden.generate(params);
+  },
+  'labels-attribute': function (params) {
+    return StyleFormLabelsAttribute.generate(params);
+  },
+  'labels-fillSize': function (params) {
+    return StyleFormLabelsFillSize.generate(params);
+  },
+  'labels-fillColor': function (params) {
+    return StyleFormLabelsFillColor.generate(params);
+  },
+  'labels-font': function (params) {
+    return StyleFormLabelsFont.generate(params);
+  },
+  'labels-haloSize': function (params) {
+    return StyleFormLabelsHaloSize.generate(params);
+  },
+  'labels-haloColor': function (params) {
+    return StyleFormLabelsHaloColor.generate(params);
+  },
+  'labels-offset': function (params) {
+    return StyleFormLabelsOffset.generate(params);
+  },
+  'labels-overlap': function (params) {
+    return StyleFormLabelsOverlap.generate(params);
+  },
+  'labels-placement': function (params) {
+    return StyleFormLabelsPlacement.generate(params);
+  },
+
+  'strokeSize': function (params) {
+    return StyleFormStrokeSize.generate(params);
+  },
+  'strokeColor': function (params) {
+    return StyleFormStrokeColor.generate(params);
+  },
+  'style': function (params) {
+    return StyleFormStyle.generate(params);
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-default-model.js

@@ -0,0 +1,73 @@
+var _ = require('underscore');
+var Backbone = require('backbone');
+var StyleFormComponents = require('./style-form-components-dictionary');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+var DEBOUNCE_TIME = 350;
+
+module.exports = Backbone.Model.extend({
+
+  _FORM_NAME: '',
+
+  initialize: function (attrs, opts) {
+    if (!opts.styleModel) throw new Error('Style model is required');
+    if (!opts.modals) throw new Error('modals is required');
+    this._styleModel = opts.styleModel;
+    this._querySchemaModel = opts.querySchemaModel;
+    this._queryGeometryModel = opts.queryGeometryModel;
+    this._configModel = opts.configModel;
+    this._userModel = opts.userModel;
+    this._modals = opts.modals;
+    this.schema = this._generateSchema();
+    this._initBinds();
+  },
+
+  _initBinds: function () {
+    this.bind('change', _.debounce(this._onChange.bind(this), DEBOUNCE_TIME), this);
+  },
+
+  _onChange: function () {
+    throw new Error('_onChange should be defined');
+  },
+
+  _isTorqueCategory: function () {
+    var fill = this._styleModel.get('fill');
+    var color = fill && fill.color || {};
+
+    return this._styleModel.get('style') !== StyleConstants.Type.HEATMAP
+      ? !color.fixed
+      : false;
+  },
+
+  _generateSchema: function () {
+    var querySchemaModel = this._querySchemaModel;
+    var queryGeometryModel = this._queryGeometryModel;
+    var configModel = this._configModel;
+    var userModel = this._userModel;
+    var modals = this._modals;
+    var styleType = this._styleModel.get('type');
+    var isAutoStyleApplied = this._styleModel.has('autoStyle');
+    var animationType = this._styleModel.get('style');
+    var formName = this._FORM_NAME ? this._FORM_NAME + '-' : '';
+
+    return _.reduce(this.attributes, function (attribute, value, key) {
+      var formComponent = StyleFormComponents[formName + key];
+
+      if (formComponent) {
+        attribute[key] = formComponent({
+          styleType: styleType,
+          isAutoStyleApplied: isAutoStyleApplied,
+          animationType: animationType,
+          querySchemaModel: querySchemaModel,
+          queryGeometryModel: queryGeometryModel,
+          modals: modals,
+          userModel: userModel,
+          configModel: configModel,
+          isTorqueCategory: this._isTorqueCategory()
+        });
+      }
+
+      return attribute;
+    }, {}, this);
+  }
+
+});

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/aggregation-dataset.js

@@ -0,0 +1,21 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Select',
+      title: _t('editor.style.components.aggregation-dataset.label'),
+      dialogMode: DialogConstants.Mode.FLOAT,
+      options: [
+        {
+          val: 'countries'
+        }, {
+          val: 'provinces'
+        }
+      ],
+      editorAttrs: {
+        help: _t('editor.style.components.aggregation-dataset.help')
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/aggregation-size.js

@@ -0,0 +1,17 @@
+module.exports = {
+  generate: function (params) {
+    return {
+      type: 'Number',
+      title: _t('editor.style.components.aggregation-size.label'),
+      help: _t('editor.style.components.aggregation-size.label-help'),
+      validators: ['required', {
+        type: 'interval',
+        min: 10,
+        max: 100
+      }],
+      editorAttrs: {
+        help: _t('editor.style.components.aggregation-size.help', { type: _t('editor.style.tooltips.' + params.styleType) })
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/aggregation-value.js

@@ -0,0 +1,16 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var StyleFormDictionaryHelpers = require('builder/editor/style/style-form/style-form-helpers');
+
+module.exports = {
+  generate: function (params) {
+    return {
+      type: 'Operators',
+      title: _t('editor.style.components.aggregation-value.label'),
+      options: StyleFormDictionaryHelpers.getSchemaColumns(params.querySchemaModel),
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        help: _t('editor.style.components.aggregation-value.help')
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/animated-attribute.js

@@ -0,0 +1,26 @@
+var StyleFormDictionaryHelpers = require('builder/editor/style/style-form/style-form-helpers');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+
+module.exports = {
+  generate: function (params) {
+    var filterFunction = function (item) {
+      var columnType = item.get('type');
+      return columnType && (columnType === 'number' || columnType === 'date');
+    };
+
+    if (params.styleType === StyleConstants.Type.HEATMAP) {
+      return StyleFormDictionaryHelpers.generateSelectWithSchemaColumns({
+        componentName: 'animated-attribute',
+        querySchemaModel: params.querySchemaModel,
+        filterFunction: filterFunction
+      });
+    }
+
+    return StyleFormDictionaryHelpers.generateSelectByStyleType({
+      componentName: 'animated-attribute',
+      querySchemaModel: params.querySchemaModel,
+      filterFunction: filterFunction,
+      styleType: params.styleType
+    });
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/animated-duration.js

@@ -0,0 +1,16 @@
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Number',
+      title: _t('editor.style.components.animated-duration.label'),
+      validators: ['required', {
+        type: 'interval',
+        min: 0,
+        max: 60
+      }],
+      editorAttrs: {
+        help: _t('editor.style.components.animated-duration.help')
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/animated-overlap.js

@@ -0,0 +1,23 @@
+module.exports = {
+  generate: function (params) {
+    if (params.isTorqueCategory) {
+      return {
+        type: 'Hidden'
+      };
+    }
+
+    return {
+      type: 'Radio',
+      title: _t('editor.style.components.animated-overlap.label'),
+      options: [
+        {
+          val: 'false',
+          label: _t('editor.style.components.animated-overlap.options.false')
+        }, {
+          val: 'true',
+          label: _t('editor.style.components.animated-overlap.options.true')
+        }
+      ]
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/animated-resolution.js

@@ -0,0 +1,16 @@
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Number',
+      title: _t('editor.style.components.animated-resolution.label'),
+      validators: ['required', {
+        type: 'interval',
+        min: 1,
+        max: 16
+      }],
+      editorAttrs: {
+        help: _t('editor.style.components.animated-resolution.help')
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/animated-steps.js

@@ -0,0 +1,17 @@
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Number',
+      title: _t('editor.style.components.animated-steps.label'),
+      validators: ['required', {
+        type: 'interval',
+        min: 1,
+        max: 1024,
+        step: 4
+      }],
+      editorAttrs: {
+        help: _t('editor.style.components.animated-steps.help')
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/animated-trails.js

@@ -0,0 +1,16 @@
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Number',
+      title: _t('editor.style.components.animated-trails.label'),
+      validators: ['required', {
+        type: 'interval',
+        min: 0,
+        max: 30
+      }],
+      editorAttrs: {
+        help: _t('editor.style.components.animated-trails.help')
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/blending.js

@@ -0,0 +1,37 @@
+var _ = require('underscore');
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+
+module.exports = {
+  generate: function (params) {
+    var blendingOptions = this._getBlendingOptions(params);
+    var options = this._generateBlendingOptions(blendingOptions);
+
+    return {
+      type: 'Select',
+      title: _t('editor.style.components.blending.label'),
+      options: options,
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        help: _t('editor.style.tooltips.blending')
+      }
+    };
+  },
+
+  _generateBlendingOptions: function (options) {
+    return _.reduce(options, function (values, option) {
+      values.push({
+        val: option,
+        label: _t('editor.style.components.blending.options.' + option)
+      });
+
+      return values;
+    }, []);
+  },
+
+  _getBlendingOptions: function (params) {
+    return params.styleType === StyleConstants.Type.ANIMATION
+      ? StyleConstants.Blending.ANIMATION
+      : StyleConstants.Blending.SIMPLE;
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/fill-color.js

@@ -0,0 +1,115 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var StyleFormDictionaryHelpers = require('builder/editor/style/style-form/style-form-helpers');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+
+var NO_PANES_CLASS = 'Editor-formInner--NoTabs';
+
+module.exports = {
+  generate: function (params) {
+    var editorAttrs = {
+      help: {
+        color: null,
+        image: null
+      },
+      hidePanes: [],
+      hideTabs: [],
+      imageEnabled: false,
+      hideNumericColumns: false,
+      removeByValueCategory: false,
+      categorizeColumns: false,
+      geometryName: params.queryGeometryModel.get('simple_geom')
+    };
+
+    var options = StyleFormDictionaryHelpers.getOptionsByStyleType({
+      querySchemaModel: params.querySchemaModel,
+      styleType: params.styleType,
+      animationType: params.animationType
+    });
+
+    var styleType = this._getStyleType(params);
+
+    if (styleType === StyleConstants.Type.REGIONS ||
+      styleType === StyleConstants.Type.HEXABINS ||
+      styleType === StyleConstants.Type.SQUARES) {
+      editorAttrs.geometryName = 'polygon';
+      editorAttrs.removeByValueCategory = true;
+    }
+
+    this._setColor(editorAttrs, styleType);
+    this._setEditorAttributesForHeatmaps(params, editorAttrs, styleType);
+    this._setEditorAttributesForPoints(params, editorAttrs, styleType);
+    this._setEditorAttributesForAnimation(params, editorAttrs, styleType);
+
+    return {
+      type: 'FillColor',
+      title: this._getTitle(params),
+      options: options,
+      fieldClass: editorAttrs.hidePanes.length >= 1 ? NO_PANES_CLASS : '',
+      query: params.querySchemaModel.get('query'),
+      configModel: params.configModel,
+      userModel: params.userModel,
+      validators: ['required'],
+      editorAttrs: editorAttrs,
+      modals: params.modals,
+      dialogMode: DialogConstants.Mode.FLOAT
+    };
+  },
+
+  _getStyleType: function (params) {
+    return params.queryGeometryModel.get('simple_geom') === StyleConstants.Type.POLYGON
+      ? StyleConstants.Type.POLYGON
+      : params.styleType;
+  },
+
+  _getTitle: function (params) {
+    var geom = params.queryGeometryModel.get('simple_geom');
+    return _t('editor.style.components.fillColor.' + geom) +
+      ' ' +
+      _t('editor.style.components.fillColor.label');
+  },
+
+  _setEditorAttributesForHeatmaps: function (params, editorAttrs, styleType) {
+    if (styleType === StyleConstants.Type.HEATMAP) {
+      editorAttrs.hidePanes = [FillConstants.Panes.FIXED];
+      editorAttrs.help.color = _t('editor.style.tooltips.fill.color-heatmap');
+    }
+  },
+
+  _setEditorAttributesForPoints: function (params, editorAttrs, styleType) {
+    if (styleType === StyleConstants.Type.SIMPLE && StyleFormDictionaryHelpers.hasGeometryOf(params, 'point')) {
+      if (!params.isAutoStyleApplied) {
+        this._setImage(editorAttrs, styleType);
+      }
+    }
+  },
+
+  _setEditorAttributesForAnimation: function (params, editorAttrs, styleType) {
+    if (styleType === StyleConstants.Type.ANIMATION) {
+      editorAttrs.hideTabs = [FillConstants.Tabs.BINS, FillConstants.Tabs.QUANTIFICATION];
+      editorAttrs.hideNumericColumns = true;
+
+      if (params.animationType === 'simple') {
+        editorAttrs.categorizeColumns = true;
+      } else {
+        editorAttrs.hidePanes = [FillConstants.Panes.FIXED];
+        editorAttrs.help.color = _t('editor.style.tooltips.fill.color-heatmap');
+      }
+    }
+  },
+
+  _setColor: function (editorAttrs, styleType) {
+    var tooltipColor = _t('editor.style.tooltips.fill.color', {
+      type: _t('editor.style.tooltips.' + styleType)
+    });
+
+    editorAttrs.help.color = tooltipColor;
+  },
+
+  _setImage: function (editorAttrs, styleType) {
+    editorAttrs.imageEnabled = true;
+    editorAttrs.help.image = _t('editor.style.tooltips.fill.image', {
+      type: _t('editor.style.tooltips.' + styleType)
+    });
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/fill-size.js

@@ -0,0 +1,72 @@
+var _ = require('underscore');
+var StyleFormDictionaryHelpers = require('builder/editor/style/style-form/style-form-helpers');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+
+var NO_PANES_CLASS = 'Editor-formInner--NoTabs';
+
+module.exports = {
+  generate: function (params) {
+    this._checkForParams(params);
+
+    var optionsForStyle = StyleFormDictionaryHelpers.getOptionsByStyleType({
+      querySchemaModel: params.querySchemaModel,
+      styleType: params.styleType,
+      animationType: params.animationType
+    });
+
+    var size = this._buildFillSize(params, optionsForStyle);
+    return size;
+  },
+
+  _buildFillSize: function (params, optionsForStyle) {
+    var self = this;
+    var size = this._buildSize(params, {
+      options: optionsForStyle,
+      title: _t('editor.style.components.point-size.label'),
+      editorAttrs: self._buildFillSizeAttrs(params)
+    });
+
+    this._hideByValuePaneIfNeeded(params, size);
+    return size;
+  },
+
+  _buildFillSizeAttrs: function (params) {
+    var sizeAttrs = _.extend(FillConstants.Size.DEFAULT, {
+      help: 'editor.style.tooltips.fill.size',
+      geometryName: params.queryGeometryModel.get('simple_geom')
+    });
+    this._setDefaultRangeIfNeeded(params, sizeAttrs);
+    return sizeAttrs;
+  },
+
+  _buildSize: function (params, customOptions) {
+    var size = {
+      type: 'Size',
+      dialogMode: DialogConstants.Mode.FLOAT,
+      validators: ['required']
+    };
+    return _.extend(size, customOptions);
+  },
+
+  _checkForParams: function (params) {
+    if (!params.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!params.styleType) throw new Error('styleType is required');
+  },
+
+  _setDefaultRangeIfNeeded: function (params, sizeAttrs) {
+    if (params.styleType === StyleConstants.Type.SIMPLE && StyleFormDictionaryHelpers.hasGeometryOf(params, 'point')) {
+      sizeAttrs.defaultRange = [5, 20];
+    }
+  },
+
+  _hideByValuePaneIfNeeded: function (params, size) {
+    if (_.contains([StyleConstants.Type.HEATMAP, StyleConstants.Type.ANIMATION], params.styleType)) {
+      size.editorAttrs.hidePanes = [FillConstants.Panes.BY_VALUE];
+      size.fieldClass = NO_PANES_CLASS;
+    } else {
+      size.editorAttrs.hidePanes = [];
+    }
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/fill.js

@@ -0,0 +1,81 @@
+var _ = require('underscore');
+var StyleFormDictionaryHelpers = require('builder/editor/style/style-form/style-form-helpers');
+var StylesFactory = require('builder/editor/style/styles-factory');
+
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+
+module.exports = {
+  generate: function (params) {
+    var editorAttrs = {};
+
+    var options = StyleFormDictionaryHelpers.getOptionsByStyleType({
+      querySchemaModel: params.querySchemaModel,
+      styleType: params.styleType,
+      animationType: params.animationType
+    });
+
+    var styleType = params.queryGeometryModel.get('simple_geom') === StyleConstants.Type.POLYGON
+      ? StyleConstants.Type.POLYGON
+      : params.styleType;
+
+    var color = {
+      help: _t('editor.style.tooltips.fill.color', { type: _t('editor.style.tooltips.' + styleType) })
+    };
+
+    var size = _.extend(FillConstants.Size.DEFAULT, {
+      help: _t('editor.style.tooltips.fill.size', { type: _t('editor.style.tooltips.' + styleType) })
+    });
+
+    var fillLabel = _t('editor.style.components.fill');
+
+    if (params.styleType === StyleConstants.Type.HEATMAP) {
+      size.hidePanes = [FillConstants.Panes.BY_VALUE];
+      color.hidePanes = [FillConstants.Panes.FIXED];
+    }
+
+    if (params.styleType === StyleConstants.Type.SIMPLE && StyleFormDictionaryHelpers.hasGeometryOf(params, 'point')) {
+      size.defaultRange = FillConstants.Size.DEFAULT_RANGE;
+
+      if (!params.isAutoStyleApplied) {
+        color.imageEnabled = true;
+      }
+    }
+
+    if (params.styleType === StyleConstants.Type.ANIMATION) {
+      size.hidePanes = [FillConstants.Panes.BY_VALUE];
+      color.hideTabs = [
+        FillConstants.Tabs.BINS,
+        FillConstants.Tabs.QUANTIFICATION
+      ];
+
+      if (params.animationType === 'simple') {
+        color.categorizeColumns = true;
+      } else {
+        color.hidePanes = [FillConstants.Panes.FIXED];
+      }
+    }
+
+    if (_.contains(StylesFactory.getAggregationTypes(), params.styleType) ||
+      StyleFormDictionaryHelpers.hasGeometryOf(params, 'polygon')) {
+      fillLabel = _t('editor.style.components.color');
+    }
+
+    editorAttrs.color = color;
+    editorAttrs.size = size;
+
+    return {
+      type: 'Fill',
+      title: fillLabel,
+      options: options,
+      query: params.querySchemaModel.get('query'),
+      configModel: params.configModel,
+      userModel: params.userModel,
+      validators: ['required'],
+      editorAttrs: editorAttrs,
+      modals: params.modals,
+      dialogMode: DialogConstants.Mode.FLOAT
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/hidden.js

@@ -0,0 +1,7 @@
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Hidden'
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-attribute.js

@@ -0,0 +1,18 @@
+var StyleFormDictionaryHelpers = require('builder/editor/style/style-form/style-form-helpers');
+
+module.exports = {
+  generate: function (params) {
+    var filterFunction = function (item) {
+      var columnName = item.get('name');
+      var columnType = item.get('type');
+      return columnName !== 'the_geom' && columnName !== 'the_geom_webmercator' && columnType !== 'date';
+    };
+
+    return StyleFormDictionaryHelpers.generateSelectByStyleType({
+      componentName: 'labels-attribute',
+      querySchemaModel: params.querySchemaModel,
+      styleType: params.styleType,
+      filterFunction: filterFunction
+    });
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-enabled.js

@@ -0,0 +1,5 @@
+module.exports = {
+  generate: function () {
+
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-fill-color.js

@@ -0,0 +1,21 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+
+var NO_PANES_CLASS = 'Editor-formInner--NoTabs';
+
+module.exports = {
+  generate: function () {
+    return {
+      type: 'FillColor',
+      title: _t('editor.style.components.labels-fill-color'),
+      fieldClass: NO_PANES_CLASS,
+      options: [],
+      validators: ['required'],
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        imageEnabled: false,
+        hidePanes: [FillConstants.Panes.BY_VALUE]
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-fill-size.js

@@ -0,0 +1,20 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Size',
+      title: _t('editor.style.components.labels-fill-size'),
+      options: [],
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        min: 6,
+        max: 24,
+        hidePanes: [FillConstants.Panes.BY_VALUE]
+      },
+      validators: ['required'],
+      fieldClass: 'Editor-formInner--NoTabs'
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-fill.js

@@ -0,0 +1,23 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Fill',
+      title: _t('editor.style.components.labels-fill'),
+      options: [],
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        size: {
+          min: 6,
+          max: 24,
+          hidePanes: ['value']
+        },
+        color: {
+          hidePanes: ['value']
+        }
+      },
+      validators: ['required']
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-font.js

@@ -0,0 +1,19 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+
+var FONTS_LIST = [
+    'Source Han Sans CN Regular',
+    'Source Han Serif CN Regular',
+  'DejaVu Sans Book',
+  'Unifont Medium',
+  'Open Sans Regular',
+];
+
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Select',
+      dialogMode: DialogConstants.Mode.FLOAT,
+      options: FONTS_LIST
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-halo-color.js

@@ -0,0 +1,20 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+
+var NO_PANES_CLASS = 'Editor-formInner--NoTabs';
+
+module.exports = {
+  generate: function () {
+    return {
+      type: 'FillColor',
+      title: _t('editor.style.components.labels-halo-color'),
+      fieldClass: NO_PANES_CLASS,
+      options: [],
+      validators: ['required'],
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        hidePanes: [FillConstants.Panes.BY_VALUE]
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-halo-size.js

@@ -0,0 +1,18 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Size',
+      title: _t('editor.style.components.labels-halo-size'),
+      options: [],
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        hidePanes: [FillConstants.Panes.BY_VALUE]
+      },
+      validators: ['required'],
+      fieldClass: 'Editor-formInner--NoTabs'
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-halo.js

@@ -0,0 +1,21 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Fill',
+      title: _t('editor.style.components.labels-halo'),
+      options: [],
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        size: {
+          hidePanes: ['value']
+        },
+        color: {
+          hidePanes: ['value']
+        }
+      },
+      validators: ['required']
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-offset.js

@@ -0,0 +1,13 @@
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Number',
+      title: _t('editor.style.components.labels-offset'),
+      validators: ['required', {
+        type: 'interval',
+        min: -15,
+        max: 15
+      }]
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-overlap.js

@@ -0,0 +1,17 @@
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Radio',
+      title: _t('editor.style.components.labels-overlap.label'),
+      options: [
+        {
+          val: 'true',
+          label: _t('editor.style.components.labels-overlap.options.true')
+        }, {
+          val: 'false',
+          label: _t('editor.style.components.labels-overlap.options.false')
+        }
+      ]
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/labels-placement.js

@@ -0,0 +1,25 @@
+var _ = require('underscore');
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+
+module.exports = {
+  generate: function () {
+    var PLACEMENTS = ['point', 'line', 'vertex', 'interior'];
+
+    return {
+      type: 'Select',
+      title: _t('editor.style.components.labels-placement.label'),
+      dialogMode: DialogConstants.Mode.FLOAT,
+      options: _.reduce(PLACEMENTS, function (values, type) {
+        values.push({
+          val: type,
+          label: _t('editor.style.components.labels-placement.options.' + type)
+        });
+
+        return values;
+      }, []),
+      editorAttrs: {
+        showSearch: false
+      }
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/stroke-color.js

@@ -0,0 +1,87 @@
+var StyleFormDictionaryHelpers = require('builder/editor/style/style-form/style-form-helpers');
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+
+var NO_PANES_CLASS = 'Editor-formInner--NoTabs';
+
+module.exports = {
+  generate: function (params) {
+    var strokeParams = {
+      querySchemaModel: params.querySchemaModel,
+      queryGeometryModel: params.queryGeometryModel,
+      styleType: params.styleType,
+      configModel: params.configModel,
+      userModel: params.userModel,
+      modals: params.modals
+    };
+
+    return params.queryGeometryModel.get('simple_geom') === 'line'
+      ? this._generateLineStrokeColor(strokeParams)
+      : this._generateSimpleStrokeColor(strokeParams, params.queryGeometryModel.get('simple_geom'));
+  },
+
+  _generateLineStrokeColor: function (params) {
+    if (!params.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!params.queryGeometryModel) throw new Error('queryGeometryModel is required');
+    if (!params.configModel) throw new Error('configModel is required');
+    if (!params.styleType) throw new Error('styleType is required');
+    if (!params.userModel) throw new Error('userModel is required');
+    if (!params.modals) throw new Error('modals is required');
+
+    var queryStatus = params.querySchemaModel.get('status');
+    var isDisabled = queryStatus !== 'fetched';
+    var helpMessage = _t('editor.style.components.stroke.' + queryStatus);
+
+    return {
+      type: 'FillColor',
+      title: _t('editor.style.components.stroke-color.label'),
+      options: StyleFormDictionaryHelpers.getOptionsByStyleType({
+        querySchemaModel: params.querySchemaModel,
+        styleType: params.styleType
+      }),
+      query: params.querySchemaModel.get('query'),
+      configModel: params.configModel,
+      userModel: params.userModel,
+      modals: params.modals,
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        imageEnabled: false,
+        hidePanes: [],
+        disabled: isDisabled,
+        help: isDisabled ? helpMessage : _t('editor.style.tooltips.stroke.color', { type: _t('editor.style.tooltips.line') }),
+        geometryName: params.queryGeometryModel.get('simple_geom')
+      },
+      validators: ['required']
+    };
+  },
+
+  _generateSimpleStrokeColor: function (params, type) {
+    if (!params.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!params.configModel) throw new Error('configModel is required');
+    if (!params.styleType) throw new Error('styleType is required');
+    if (!params.userModel) throw new Error('userModel is required');
+    if (!params.modals) throw new Error('modals is required');
+
+    var styleType = type === StyleConstants.Type.POLYGON
+      ? StyleConstants.Type.POLYGON
+      : params.styleType;
+
+    return {
+      type: 'FillColor',
+      title: _t('editor.style.components.stroke-color.label'),
+      fieldClass: NO_PANES_CLASS,
+      options: [],
+      query: params.querySchemaModel.get('query'),
+      configModel: params.configModel,
+      userModel: params.userModel,
+      modals: params.modals,
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        imageEnabled: false,
+        hidePanes: ['value'],
+        help: _t('editor.style.tooltips.stroke.color', { type: _t('editor.style.tooltips.' + styleType) })
+      },
+      validators: ['required']
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/stroke-size.js

@@ -0,0 +1,88 @@
+var _ = require('underscore');
+var StyleFormDictionaryHelpers = require('builder/editor/style/style-form/style-form-helpers');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+
+var NO_PANES_CLASS = 'Editor-formInner--NoTabs';
+
+module.exports = {
+  generate: function (params) {
+    this._checkForParams(params);
+
+    if (params.queryGeometryModel.get('simple_geom') === 'line') {
+      return this._buildLineStrokeSize(params);
+    }
+    return this._buildSimpleStrokeSize(params);
+  },
+
+  _buildLineStrokeSize: function (params) {
+    var options = StyleFormDictionaryHelpers.getOptionsByStyleType({
+      querySchemaModel: params.querySchemaModel,
+      styleType: params.styleType
+    });
+
+    var self = this;
+    var size = this._buildSize(params, {
+      options: options,
+      title: _t('editor.style.components.stroke-size.label'),
+      editorAttrs: self._buildLineStrokeSizeAttrs(params)
+    });
+
+    return size;
+  },
+
+  _buildSimpleStrokeSize: function (params) {
+    var self = this;
+    var size = this._buildSize(params, {
+      options: [],
+      title: _t('editor.style.components.stroke-size.label'),
+      editorAttrs: self._buildSimpleStrokeSizeAttrs(params)
+    });
+    size.fieldClass = NO_PANES_CLASS;
+
+    return size;
+  },
+
+  _buildLineStrokeSizeAttrs: function (params) {
+    var queryStatus = params.querySchemaModel.get('status');
+    var isDisabled = queryStatus !== 'fetched';
+
+    var sizeAttrs = {
+      min: 0,
+      max: 50,
+      disabled: isDisabled,
+      defaultRange: [1, 5],
+      help: '',
+      geometryName: params.queryGeometryModel.get('simple_geom')
+    };
+
+    return sizeAttrs;
+  },
+
+  _buildSimpleStrokeSizeAttrs: function (params) {
+    var sizeAttrs = {
+      min: 0,
+      max: 10,
+      step: 0.5,
+      hidePanes: [FillConstants.Panes.BY_VALUE],
+      help: 'editor.style.tooltips.stroke.size',
+      geometryName: params.queryGeometryModel.get('simple_geom')
+    };
+    return sizeAttrs;
+  },
+
+  _buildSize: function (params, customOptions) {
+    var size = {
+      type: 'Size',
+      dialogMode: DialogConstants.Mode.FLOAT,
+      validators: ['required']
+    };
+    return _.extend(size, customOptions);
+  },
+
+  _checkForParams: function (params) {
+    if (!params.queryGeometryModel) throw new Error('queryGeometryModel is required');
+    if (!params.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!params.styleType) throw new Error('styleType is required');
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/stroke.js

@@ -0,0 +1,19 @@
+var StyleFormDictionaryHelpers = require('builder/editor/style/style-form/style-form-helpers');
+
+module.exports = {
+  generate: function (params) {
+    var strokeParams = {
+      querySchemaModel: params.querySchemaModel,
+      styleType: params.styleType,
+      configModel: params.configModel,
+      userModel: params.userModel,
+      modals: params.modals
+    };
+
+    if (params.queryGeometryModel.get('simple_geom') === 'line') {
+      return StyleFormDictionaryHelpers.generateLineStroke(strokeParams);
+    }
+
+    return StyleFormDictionaryHelpers.generateSimpleStroke(strokeParams, params.queryGeometryModel.get('simple_geom'));
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-dictionary/style.js

@@ -0,0 +1,17 @@
+module.exports = {
+  generate: function () {
+    return {
+      type: 'Radio',
+      title: _t('editor.style.components.type.label'),
+      options: [
+        {
+          val: 'simple',
+          label: _t('editor.style.components.type.options.points')
+        }, {
+          val: 'heatmap',
+          label: _t('editor.style.components.type.options.heatmap')
+        }
+      ]
+    };
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-helpers.js

@@ -0,0 +1,180 @@
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+
+module.exports = {
+  getSchemaColumns: function (querySchemaModel, filterFunction) {
+    if (!querySchemaModel) throw new Error('querySchemaModel is required');
+
+    var columnsCollection = querySchemaModel.columnsCollection;
+    if (filterFunction) {
+      columnsCollection = columnsCollection.filter(filterFunction);
+    }
+    return columnsCollection.map(function (model) {
+      var columnName = model.get('name');
+      return {
+        val: columnName,
+        label: columnName,
+        type: model.get('type')
+      };
+    });
+  },
+
+  getOptionsByStyleType: function (params) {
+    if (!params.querySchemaModel) throw new Error('querySchemaModel is required');
+    var optionsArray = this.getSchemaColumns(params.querySchemaModel, params.filterFunction);
+
+    var CARTODB_ID = { val: 'cartodb_id', label: 'cartodb_id', type: 'number' };
+    var AGG_VALUE = { val: 'agg_value', label: 'agg_value', type: 'number' };
+    var AGG_VALUE_DENSITY = { val: 'agg_value_density', label: 'agg_value_density', type: 'number' };
+
+    switch (params.styleType) {
+      case StyleConstants.Type.HEATMAP:
+        optionsArray = [CARTODB_ID];
+        break;
+      case StyleConstants.Type.REGIONS:
+        optionsArray = [AGG_VALUE, AGG_VALUE_DENSITY];
+        break;
+      case StyleConstants.Type.HEXABINS:
+      case StyleConstants.Type.SQUARES:
+        optionsArray = [AGG_VALUE];
+        break;
+      case StyleConstants.Type.ANIMATION:
+        if (params.animationType === 'heatmap') {
+          optionsArray = [CARTODB_ID];
+        }
+        break;
+      default:
+        // Nothing
+    }
+
+    return optionsArray;
+  },
+
+  generateSelectByStyleType: function (params) {
+    if (!params.componentName) throw new Error('componentName is required');
+    if (!params.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!params.styleType) throw new Error('styleType is required');
+
+    var queryStatus = params.querySchemaModel.get('status');
+    var isDisabled = queryStatus !== 'fetched';
+    var helpMessage = _t('editor.style.components.' + params.componentName + '.' + queryStatus);
+
+    return {
+      type: 'Select',
+      title: _t('editor.style.components.' + params.componentName + '.label'),
+      placeholder: _t('editor.style.components.' + params.componentName + '.placeholder'),
+      help: isDisabled ? helpMessage : '',
+      options: this.getOptionsByStyleType({
+        querySchemaModel: params.querySchemaModel,
+        filterFunction: params.filterFunction,
+        styleType: params.styleType
+      }),
+      dialogMode: DialogConstants.Mode.FLOAT,
+      validators: ['required'],
+      editorAttrs: {
+        disabled: isDisabled,
+        help: _t('editor.style.components.' + params.componentName + '.help')
+      }
+    };
+  },
+
+  generateSelectWithSchemaColumns: function (componentName, querySchemaModel, filterFunction) {
+    var queryStatus = querySchemaModel.get('status');
+    var isDisabled = queryStatus !== 'fetched';
+    var helpMessage = _t('editor.style.components.' + componentName + '.' + queryStatus);
+
+    return {
+      type: 'Select',
+      title: _t('editor.style.components.' + componentName + '.label'),
+      help: isDisabled ? helpMessage : '',
+      options: this.getSchemaColumns(querySchemaModel, filterFunction),
+      dialogMode: DialogConstants.Mode.FLOAT,
+      validators: ['required'],
+      editorAttrs: {
+        disabled: isDisabled,
+        help: _t('editor.style.components.' + componentName + '.help')
+      }
+    };
+  },
+
+  generateSimpleStroke: function (params, type) {
+    if (!params.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!params.configModel) throw new Error('configModel is required');
+    if (!params.styleType) throw new Error('styleType is required');
+    if (!params.userModel) throw new Error('userModel is required');
+    if (!params.modals) throw new Error('modals is required');
+
+    var styleType = type === StyleConstants.Type.POLYGON
+      ? StyleConstants.Type.POLYGON
+      : params.styleType;
+
+    return {
+      type: 'Fill',
+      title: _t('editor.style.components.stroke.label'),
+      options: [],
+      query: params.querySchemaModel.get('query'),
+      configModel: params.configModel,
+      userModel: params.userModel,
+      modals: params.modals,
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        size: {
+          min: 0,
+          max: 10,
+          step: 0.5,
+          hidePanes: ['value'],
+          help: _t('editor.style.tooltips.stroke.size', {type: _t('editor.style.tooltips.' + styleType)})
+        },
+        color: {
+          hidePanes: ['value'],
+          help: _t('editor.style.tooltips.stroke.color', {type: _t('editor.style.tooltips.' + styleType)})
+        }
+      },
+      validators: ['required']
+    };
+  },
+
+  generateLineStroke: function (params) {
+    if (!params.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!params.configModel) throw new Error('configModel is required');
+    if (!params.styleType) throw new Error('styleType is required');
+    if (!params.userModel) throw new Error('userModel is required');
+    if (!params.modals) throw new Error('modals is required');
+
+    var queryStatus = params.querySchemaModel.get('status');
+    var isDisabled = queryStatus !== 'fetched';
+    var helpMessage = _t('editor.style.components.stroke.' + queryStatus);
+
+    return {
+      type: 'Fill',
+      title: _t('editor.style.components.stroke.label'),
+      help: isDisabled ? helpMessage : '',
+      options: this.getOptionsByStyleType({
+        querySchemaModel: params.querySchemaModel,
+        styleType: params.styleType
+      }),
+      query: params.querySchemaModel.get('query'),
+      configModel: params.configModel,
+      userModel: params.userModel,
+      modals: params.modals,
+      dialogMode: DialogConstants.Mode.FLOAT,
+      editorAttrs: {
+        min: 0,
+        max: 50,
+        disabled: isDisabled,
+        size: {
+          defaultRange: [1, 5],
+          help: _t('editor.style.tooltips.stroke.size', {type: _t('editor.style.tooltips.line')})
+        },
+        color: {
+          help: _t('editor.style.tooltips.stroke.color', {type: _t('editor.style.tooltips.line')})
+        }
+      },
+      validators: ['required']
+    };
+  },
+
+  hasGeometryOf: function (params, type) {
+    return params.queryGeometryModel && params.queryGeometryModel.get('simple_geom') === type;
+  }
+};

lib/assets/javascripts/builder/editor/style/style-form/style-form-view.js

@@ -0,0 +1,82 @@
+var CoreView = require('backbone/core-view');
+var StylePropertiesFormView = require('./style-properties-form/style-properties-form-view');
+var StyleAggregationFormView = require('./style-aggregation-form/style-aggregation-form-view');
+var noneFormMessage = require('./none-form-message.tpl');
+
+module.exports = CoreView.extend({
+  module: 'editor/style/style-form/style-form-view',
+
+  className: 'Editor-formView',
+
+  initialize: function (opts) {
+    if (!opts.layerDefinitionsCollection) throw new Error('layerDefinitionsCollection is required');
+    if (!opts.layerDefinitionModel) throw new Error('layerDefinitionModel is required');
+    if (!opts.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!opts.queryGeometryModel) throw new Error('queryGeometryModel is required');
+    if (!opts.configModel) throw new Error('configModel is required');
+    if (!opts.userModel) throw new Error('userModel is required');
+    if (!opts.styleModel) throw new Error('styleModel is required');
+    if (!opts.modals) throw new Error('modals is required');
+
+    this._querySchemaModel = opts.querySchemaModel;
+    this._queryGeometryModel = opts.queryGeometryModel;
+    this._configModel = opts.configModel;
+    this._userModel = opts.userModel;
+    this._layerDefinitionsCollection = opts.layerDefinitionsCollection;
+    this._layerDefinitionModel = opts.layerDefinitionModel;
+    this._styleModel = opts.styleModel;
+    this._modals = opts.modals;
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+    if (this._styleModel.get('type') === 'none') {
+      this._renderNoneMessage();
+    } else {
+      this._initFormViews();
+    }
+    return this;
+  },
+
+  _initBinds: function () {
+    this._styleModel.bind('change:type', this.render, this);
+    this.add_related_model(this._styleModel);
+  },
+
+  _renderNoneMessage: function () {
+    this.$el.append(noneFormMessage());
+  },
+
+  _initFormViews: function () {
+    if (this._styleModel.isAggregatedType()) {
+      var aggregationFormView = new StyleAggregationFormView({
+        styleModel: this._styleModel,
+        queryGeometryModel: this._queryGeometryModel,
+        querySchemaModel: this._querySchemaModel,
+        configModel: this._configModel,
+        userModel: this._userModel,
+        modals: this._modals
+      });
+
+      this.addView(aggregationFormView);
+      this.$el.append(aggregationFormView.render().el);
+    }
+
+    var propertiesFormView = new StylePropertiesFormView({
+      styleModel: this._styleModel,
+      layerDefinitionsCollection: this._layerDefinitionsCollection,
+      configModel: this._configModel,
+      userModel: this._userModel,
+      layerDefinitionModel: this._layerDefinitionModel,
+      queryGeometryModel: this._queryGeometryModel,
+      querySchemaModel: this._querySchemaModel,
+      modals: this._modals
+    });
+
+    this.addView(propertiesFormView);
+    this.$el.append(propertiesFormView.render().el);
+  }
+});

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-animated-properties-form-model.js

@@ -0,0 +1,72 @@
+var _ = require('underscore');
+var StyleFormDefaultModel = require('builder/editor/style/style-form/style-form-default-model');
+var StyleFormComponents = require('builder/editor/style/style-form/style-form-components-dictionary');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+
+module.exports = StyleFormDefaultModel.extend({
+
+  _FORM_NAME: 'animated',
+
+  parse: function (r, opts) {
+    var columnAnimatable = opts.querySchemaModel.columnsCollection.findWhere(function (colModel) {
+      return colModel.get('type') === 'number' || colModel.get('type') === 'date';
+    });
+
+    return _.extend(
+      r,
+      {
+        attribute: r.attribute || (columnAnimatable && columnAnimatable.get('name')),
+        overlap: r.overlap && r.overlap.toString()
+      }
+    );
+  },
+
+  initialize: function (attrs, opts) {
+    StyleFormDefaultModel.prototype.initialize.apply(this, arguments);
+
+    this.listenTo(this._styleModel, 'change', this._onStyleChanged);
+  },
+
+  _setSchema: function () {
+    this.schema = this._generateSchema();
+    this.trigger('changeSchema', this);
+  },
+
+  _onStyleChanged: function () {
+    this._replaceAttrs();
+    this._setSchema();
+  },
+
+  _replaceAttrs: function () {
+    this.set('overlap', this._isTorqueCategory() ? 'false' : this.get('overlap'));
+  },
+
+  _onChange: function () {
+    var animatedData = _.extend(
+      {},
+      this.attributes,
+      {
+        overlap: this.get('overlap') === 'true'
+      }
+    );
+
+    // Don't update style model if there is no attribute selected
+    if (!animatedData.attribute) {
+      return false;
+    }
+
+    this._styleModel.set('animated', animatedData);
+  },
+
+  _generateSchema: function () {
+    var styleType = this._styleModel.get('type');
+
+    if (styleType === StyleConstants.Type.HEATMAP) {
+      return {
+        resolution: StyleFormComponents['animated-resolution']()
+      };
+    } else {
+      return StyleFormDefaultModel.prototype._generateSchema.call(this);
+    }
+  }
+});

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-animated-properties-form-view.js

@@ -0,0 +1,73 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+require('builder/components/form-components/index');
+var StyleAnimatedFormModel = require('./style-animated-properties-form-model');
+
+module.exports = CoreView.extend({
+  module: 'editor/style/style-form/style-properties-form/style-animated-properties-form-view',
+
+  initialize: function (opts) {
+    if (!opts.layerDefinitionsCollection) throw new Error('layerDefinitionsCollection is required');
+    if (!opts.layerDefinitionModel) throw new Error('layerDefinitionModel is required');
+    if (!opts.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!opts.queryGeometryModel) throw new Error('queryGeometryModel is required');
+    if (!opts.styleModel) throw new Error('styleModel is required');
+    if (!opts.userModel) throw new Error('userModel is required');
+    if (!opts.modals) throw new Error('modals is required');
+
+    this._userModel = opts.userModel;
+    this._modals = opts.modals;
+
+    this._querySchemaModel = opts.querySchemaModel;
+    this._queryGeometryModel = opts.queryGeometryModel;
+    this._layerDefinitionsCollection = opts.layerDefinitionsCollection;
+    this._layerDefinitionModel = opts.layerDefinitionModel;
+    this._styleModel = opts.styleModel;
+
+    this._animatedFormModel = new StyleAnimatedFormModel(
+      this._styleModel.get('animated'),
+      {
+        parse: true,
+        querySchemaModel: this._querySchemaModel,
+        queryGeometryModel: this._queryGeometryModel,
+        styleModel: this._styleModel,
+        userModel: this._userModel,
+        modals: this._modals
+      }
+    );
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    this._genAnimatedFormView();
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this._animatedFormModel.on('changeSchema', this.render, this);
+  },
+
+  _genAnimatedFormView: function () {
+    this._animatedFormView = new Backbone.Form({
+      model: this._animatedFormModel
+    });
+
+    this._animatedFormView.bind('change', function () {
+      this.commit();
+    });
+
+    this.$el.append(this._animatedFormView.render().el);
+  },
+
+  clearSubViews: function () {
+    if (this._animatedFormView) {
+      this._animatedFormView.remove(); // the Backbone.Form equivalent to 'view.clean()'
+    }
+
+    return CoreView.prototype.clearSubViews.apply(this, arguments);
+  }
+});

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-labels-properties-form-model.js

@@ -0,0 +1,61 @@
+var _ = require('underscore');
+var StyleFormDefaultModel = require('builder/editor/style/style-form/style-form-default-model');
+
+var FILL_PROPERTIES = [
+  { source: 'size', value: 'fillSize' },
+  { source: 'color', value: 'fillColor' }
+];
+
+var HALO_PROPERTIES = [
+  { source: 'size', value: 'haloSize' },
+  { source: 'color', value: 'haloColor' }
+];
+
+module.exports = StyleFormDefaultModel.extend({
+
+  _FORM_NAME: 'labels',
+
+  parse: function (response) {
+    return {
+      enabled: response.enabled,
+      attribute: response.attribute,
+      font: response.font,
+      fillSize: response.fill.size,
+      fillColor: response.fill.color,
+      haloSize: response.halo.size,
+      haloColor: response.halo.color,
+      offset: response.offset,
+      overlap: response.overlap,
+      placement: response.placement
+    };
+  },
+
+  _onChange: function () {
+    var attrs = _.clone(this.attributes);
+
+    if (attrs.enabled && !attrs.attribute) {
+      return false;
+    }
+
+    this._updatePartialProperties(attrs);
+
+    this._styleModel.set('labels', attrs);
+  },
+
+  _updatePartialProperties: function (attrs) {
+    this._setProperties(FILL_PROPERTIES, 'fill', attrs);
+    this._setProperties(HALO_PROPERTIES, 'halo', attrs);
+
+    return attrs;
+  },
+
+  _setProperties: function (properties, propertyName, attrs) {
+    attrs[propertyName] = _.extend(this._styleModel.get('labels')[propertyName]);
+
+    properties.forEach(function (property) {
+      if (attrs[property.value]) {
+        attrs[propertyName][property.source] = attrs[property.value];
+      }
+    });
+  }
+});

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-labels-properties-form-view.js

@@ -0,0 +1,120 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var StyleLabelsFormModel = require('./style-labels-properties-form-model');
+
+require('builder/components/form-components/index');
+
+module.exports = CoreView.extend({
+
+  className: 'u-tSpace-xl',
+
+  initialize: function (opts) {
+    if (!opts.queryGeometryModel) throw new Error('queryGeometryModel is required');
+    if (!opts.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!opts.styleModel) throw new Error('styleModel is required');
+    if (!opts.modals) throw new Error('modals is required');
+    if (!opts.configModel) throw new Error('configModel is required');
+    if (!opts.userModel) throw new Error('userModel is required');
+
+    this._queryGeometryModel = opts.queryGeometryModel;
+    this._querySchemaModel = opts.querySchemaModel;
+    this._styleModel = opts.styleModel;
+    this._configModel = opts.configModel;
+    this._userModel = opts.userModel;
+    this._modals = opts.modals;
+
+    var attributes = this._styleModel.get('labels');
+
+    this._labelsFormModel = new StyleLabelsFormModel(
+      attributes,
+      {
+        parse: true,
+        queryGeometryModel: this._queryGeometryModel,
+        querySchemaModel: this._querySchemaModel,
+        styleModel: this._styleModel,
+        configModel: this._configModel,
+        userModel: this._userModel,
+        modals: this._modals
+      }
+    );
+
+    this._enablerModel = new Backbone.Model({
+      enabler: this._styleModel.get('labels').enabled
+    });
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.$el.empty();
+    this._initLabelsEnablerView();
+    return this;
+  },
+
+  _initBinds: function () {
+    this._styleModel.bind('change:type', function () {
+      var isAnimatedEnabled = this._styleModel.get('type') === 'animation';
+      if (isAnimatedEnabled) {
+        this._enablerView.setValue(false);
+      }
+    }, this);
+    this.add_related_model(this._styleModel);
+  },
+
+  _initLabelsEnablerView: function () {
+    var helpMessage = _t('editor.style.components.labels-enabled.not-with-animated');
+    var isAnimatedVisible = this._queryGeometryModel.get('simple_geom') === 'point';
+
+    this._enablerView = new Backbone.Form.editors.Enabler({
+      model: this._enablerModel,
+      title: _t('editor.style.components.labels-enabled.label'),
+      help: isAnimatedVisible ? helpMessage : '',
+      key: 'enabler'
+    });
+
+    this._enablerModel.bind('change', this._setLabelsFormView, this);
+    this.add_related_model(this._enablerModel);
+    this.$el.append(this._enablerView.render().el);
+
+    this._setLabelsFormView();
+  },
+
+  _setLabelsFormView: function () {
+    var isEnabled = this._enablerModel.get('enabler');
+    this._updateFormModel();
+    if (isEnabled) {
+      this._genLabelsFormView();
+    } else {
+      this._removeLabelsFormView();
+    }
+  },
+
+  _updateFormModel: function () {
+    this._labelsFormModel.set('enabled', this._enablerModel.get('enabler'));
+  },
+
+  _genLabelsFormView: function () {
+    this._labelsFormView = new Backbone.Form({
+      className: 'Editor-formInner--nested',
+      model: this._labelsFormModel
+    });
+
+    this._labelsFormView.bind('change', function () {
+      this.commit();
+    });
+
+    this.$el.append(this._labelsFormView.render().el);
+  },
+
+  _removeLabelsFormView: function () {
+    if (this._labelsFormView) {
+      this._labelsFormView.remove();
+      this._labelsFormView.$el.empty();
+    }
+  },
+
+  clean: function () {
+    this._removeLabelsFormView();
+    CoreView.prototype.clean.call(this);
+  }
+});

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-properties-form-view.js

@@ -0,0 +1,112 @@
+var CoreView = require('backbone/core-view');
+var StyleLabelsPropertiesFormView = require('./style-labels-properties-form-view');
+var StyleAnimatedPropertiesFormView = require('./style-animated-properties-form-view');
+var StyleShapePropertiesFormView = require('./style-shape-properties-form-view');
+var StyleNotAnimatableView = require('./style-unanimatable-view');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+var template = require('./style-properties-form.tpl');
+
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var REQUIRED_OPTS = [
+  'layerDefinitionsCollection',
+  'querySchemaModel',
+  'queryGeometryModel',
+  'styleModel',
+  'configModel',
+  'userModel',
+  'userModel',
+  'layerDefinitionModel',
+  'modals'
+];
+
+module.exports = CoreView.extend({
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    var stepNumber = this._styleModel.isAggregatedType() ? 3 : 2;
+    var simpleGeometry = this._queryGeometryModel.get('simple_geom');
+
+    if (simpleGeometry !== 'point') {
+      stepNumber--;
+    }
+
+    this.$el.html(
+      template({
+        stepNumber: stepNumber,
+        simpleGeometry: simpleGeometry
+      })
+    );
+    this._initViews();
+    return this;
+  },
+
+  _initViews: function () {
+    var styleType = this._styleModel.get('type');
+    var animatedFormView;
+    var shapeFormView;
+    var labelsFormView;
+
+    if (this._isUnanimatable()) {
+      shapeFormView = new StyleNotAnimatableView({
+        layerDefinitionModel: this._layerDefinitionModel,
+        userModel: this._userModel,
+        configModel: this._configModel,
+        modals: this._modals
+      });
+      this.addView(shapeFormView);
+      this.$('.js-propertiesForm').append(shapeFormView.render().el);
+    } else {
+      shapeFormView = new StyleShapePropertiesFormView({
+        styleModel: this._styleModel,
+        queryGeometryModel: this._queryGeometryModel,
+        querySchemaModel: this._querySchemaModel,
+        configModel: this._configModel,
+        userModel: this._userModel,
+        modals: this._modals
+      });
+      this.addView(shapeFormView);
+      this.$('.js-propertiesForm').append(shapeFormView.render().el);
+
+      if (styleType !== StyleConstants.Type.HEATMAP && styleType !== StyleConstants.Type.ANIMATION) {
+        labelsFormView = new StyleLabelsPropertiesFormView({
+          styleModel: this._styleModel,
+          queryGeometryModel: this._queryGeometryModel,
+          querySchemaModel: this._querySchemaModel,
+          configModel: this._configModel,
+          userModel: this._userModel,
+          modals: this._modals
+        });
+        this.addView(labelsFormView);
+        this.$('.js-propertiesForm').append(labelsFormView.render().el);
+      }
+
+      if (this._queryGeometryModel.get('simple_geom') === 'point' &&
+         (styleType === StyleConstants.Type.ANIMATION || styleType === StyleConstants.Type.HEATMAP)) {
+        animatedFormView = new StyleAnimatedPropertiesFormView({
+          layerDefinitionsCollection: this._layerDefinitionsCollection,
+          layerDefinitionModel: this._layerDefinitionModel,
+          styleModel: this._styleModel,
+          queryGeometryModel: this._queryGeometryModel,
+          querySchemaModel: this._querySchemaModel,
+          userModel: this._userModel,
+          configModel: this._configModel,
+          modals: this._modals
+        });
+
+        this.addView(animatedFormView);
+        this.$('.js-propertiesForm').append(animatedFormView.render().el);
+      }
+    }
+  },
+
+  _isUnanimatable: function () {
+    return this._querySchemaModel.columnsCollection.filter(function (colModel) {
+      return colModel.get('type') === 'number' || colModel.get('type') === 'date';
+    }).length === 0 && this._styleModel.get('type') === 'animated';
+  }
+});

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-properties-form.tpl

@@ -0,0 +1,12 @@
+<div class="Editor-HeaderInfo js-styleProperties">
+  <div class="Editor-HeaderNumeration CDB-Text is-semibold u-rSpace--m"><%- stepNumber %></div>
+  <div class="Editor-HeaderInfo-inner CDB-Text js-selector">
+    <div class="Editor-HeaderInfo-title u-bSpace--m">
+      <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large">
+        <%- _t('editor.style.style-form.properties.title-label-' + simpleGeometry) %>
+      </h2>
+    </div>
+    <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m js-highlight"><%- _t('editor.style.style-form.properties.desc') %></p>
+    <div class="js-propertiesForm"></div>
+  </div>
+</div>

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-shape-properties-form-model.js

@@ -0,0 +1,80 @@
+var _ = require('underscore');
+var StylesFactory = require('builder/editor/style/styles-factory');
+var StyleFormDefaultModel = require('builder/editor/style/style-form/style-form-default-model');
+var StyleConstants = require('builder/components/form-components/_constants/_style');
+var MetricsTracker = require('builder/components/metrics/metrics-tracker');
+var MetricsTypes = require('builder/components/metrics/metrics-types');
+
+var FILL_PROPERTIES = [
+  { source: 'size', value: 'fillSize' },
+  { source: 'color', value: 'fillColor' }
+];
+
+var STROKE_PROPERTIES = [
+  { source: 'size', value: 'strokeSize' },
+  { source: 'color', value: 'strokeColor' }
+];
+
+module.exports = StyleFormDefaultModel.extend({
+
+  parse: function (response) {
+    var geom = response.geom;
+
+    var fields = {
+      style: response.style,
+      fillSize: response.fill && response.fill.size,
+      fillColor: response.fill && response.fill.color,
+      strokeSize: response.stroke && response.stroke.size,
+      strokeColor: response.stroke && response.stroke.color,
+      blending: response.blending
+    };
+
+    var isAggregatedType = _.contains(StylesFactory.getAggregationTypes(), response.type);
+    if (isAggregatedType || geom === 'polygon') {
+      fields = _.omit(fields, 'fillSize');
+    }
+
+    if (geom === 'line') {
+      fields = _.omit(fields, 'fillSize');
+      fields = _.omit(fields, 'fillColor');
+    }
+
+    if (response.type === StyleConstants.Type.HEATMAP || response.type === StyleConstants.Type.ANIMATION && response.style === StyleConstants.Type.HEATMAP) {
+      fields = _.omit(fields, 'strokeSize', 'strokeColor', 'blending');
+    }
+
+    if (response.type !== StyleConstants.Type.ANIMATION) {
+      fields = _.omit(fields, 'style');
+    }
+
+    return fields;
+  },
+
+  _onChange: function () {
+    var attrs = this._getUpdatedPartialProperties();
+
+    this._styleModel.set(attrs);
+
+    MetricsTracker.track(MetricsTypes.CHANGED_DEFAULT_GEOMETRY);
+  },
+
+  _getUpdatedPartialProperties: function () {
+    var attrs = _.clone(this.attributes);
+
+    this._setProperties(FILL_PROPERTIES, 'fill', attrs);
+    this._setProperties(STROKE_PROPERTIES, 'stroke', attrs);
+
+    return attrs;
+  },
+
+  _setProperties: function (properties, propertyName, attrs) {
+    attrs[propertyName] = _.extend(this._styleModel.get(propertyName));
+    properties.forEach(function (property) {
+      if (attrs[property.value]) {
+        attrs[propertyName][property.source] = attrs[property.value];
+      }
+    });
+
+    return attrs;
+  }
+});

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-shape-properties-form-view.js

@@ -0,0 +1,87 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+require('builder/components/form-components/index');
+var StyleShapeFormModel = require('./style-shape-properties-form-model');
+
+module.exports = CoreView.extend({
+
+  className: 'u-tSpace--m',
+
+  initialize: function (opts) {
+    if (!opts.queryGeometryModel) throw new Error('queryGeometryModel is required');
+    if (!opts.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!opts.styleModel) throw new Error('styleModel is required');
+    if (!opts.configModel) throw new Error('configModel is required');
+    if (!opts.userModel) throw new Error('userModel is required');
+    if (!opts.modals) throw new Error('modals is required');
+
+    this._queryGeometryModel = opts.queryGeometryModel;
+    this._querySchemaModel = opts.querySchemaModel;
+    this._styleModel = opts.styleModel;
+    this._configModel = opts.configModel;
+    this._userModel = opts.userModel;
+    this._modals = opts.modals;
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this._removeFormView();
+    this.$el.empty();
+    this._initViews();
+    return this;
+  },
+
+  _initBinds: function () {
+    this._styleModel.bind('change:style', function () {
+      var style = this._styleModel.get('style');
+      this._styleModel.setFill(style);
+      this.render();
+    }, this);
+
+    this.add_related_model(this._styleModel);
+  },
+
+  _initViews: function () {
+    this._shapeFormModel = new StyleShapeFormModel(
+      {
+        type: this._styleModel.get('type'),
+        geom: this._queryGeometryModel.get('simple_geom'),
+        style: this._styleModel.get('style'),
+        fill: this._styleModel.get('fill'),
+        stroke: this._styleModel.get('stroke'),
+        blending: this._styleModel.get('blending')
+      },
+      {
+        parse: true,
+        queryGeometryModel: this._queryGeometryModel,
+        querySchemaModel: this._querySchemaModel,
+        configModel: this._configModel,
+        userModel: this._userModel,
+        modals: this._modals,
+        styleModel: this._styleModel
+      }
+    );
+
+    this._shapeFormView = new Backbone.Form({
+      model: this._shapeFormModel
+    });
+
+    this._shapeFormView.bind('change', function () {
+      this.commit();
+    });
+
+    this.$el.append(this._shapeFormView.render().el);
+  },
+
+  _removeFormView: function () {
+    if (this._shapeFormView) {
+      this._shapeFormView.remove();
+    }
+  },
+
+  clean: function () {
+    this._removeFormView();
+    CoreView.prototype.clean.call(this);
+  }
+});

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-unanimatable-view.js

@@ -0,0 +1,84 @@
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+var template = require('./style-unanimatable.tpl');
+var VisTableModel = require('builder/data/visualization-table-model');
+var linkTemplate = _.template('<a href="<%- url %>" target="_blank" title="<%- tableName %>"><%- label %></a>');
+
+var REQUIRED_OPTS = [
+  'layerDefinitionModel',
+  'configModel'
+];
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    var tableName;
+
+    _.each(REQUIRED_OPTS, function (item) {
+      if (!opts[item]) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+
+    this._sourceNode = this._getSourceNode();
+
+    if (this._sourceNode) {
+      tableName = this._sourceNode.get('table_name');
+      this._visTableModel = new VisTableModel({
+        id: tableName,
+        table: {
+          name: tableName
+        }
+      }, {
+        configModel: this._configModel
+      });
+    }
+  },
+
+  render: function () {
+    var desc = this._getDescTemplate();
+
+    this.clearSubViews();
+    this.$el.html(template({
+      title: _t('editor.style.style-form.unanimatable.desc'),
+      desc: desc
+    }));
+    return this;
+  },
+
+  _getDescTemplate: function () {
+    var tableName = '';
+    var url = '';
+    var tableModel;
+
+    if (this._visTableModel) {
+      tableModel = this._visTableModel.getTableModel();
+      tableName = tableModel.getUnquotedName();
+      url = this._visTableModel && this._visTableModel.datasetURL();
+    }
+
+    var linkHTML = linkTemplate({
+      url: url,
+      tableName: tableName,
+      label: _t('editor.style.style-form.unanimatable.label')
+    });
+
+    return _t('editor.style.style-form.unanimatable.body', {
+      link: linkHTML
+    });
+  },
+
+  _getSourceNode: function () {
+    var node = this._layerDefinitionModel.getAnalysisDefinitionNodeModel();
+    var source;
+    var primarySource;
+    if (node.get('type') === 'source') {
+      source = node;
+    } else {
+      primarySource = node.getPrimarySource();
+      if (primarySource && primarySource.get('type') === 'source') {
+        source = primarySource;
+      }
+    }
+
+    return source;
+  }
+});

lib/assets/javascripts/builder/editor/style/style-form/style-properties-form/style-unanimatable.tpl

@@ -0,0 +1,2 @@
+<h2 class="CDB-Text CDB-Size-huge is-light u-secondaryTextColor"><%- title %></h2>
+<p class="CDB-Text u-tSpace--m CDB-Size-medium u-altTextColor"><%= desc %></p>