Improved model creation dialog

Modal parameters differs depending
on the prediction model.

Modify a model creation dialog so that
only necessary parameters are showing up
when selecting prediction model.

meteos_ui/static/dashboard/machine_learning/models/create/model-model.js

@@ -27,6 +27,7 @@
     var model = {
       newModelSpec: {},
       newCommonDataset: {},
+      newParamsSpec: {},
 
       // API methods
       init: init,
@@ -58,6 +59,23 @@
         swift_username: null,
         swift_password: null
       };
+
+      model.newParamsSpec = {
+        numIterations: null,
+        numClasses: null,
+        runs: null,
+        mode: null,
+        rank: null,
+        step: null,
+        impurity: null,
+        maxDepth: null,
+        maxBins:null,
+        learningRate: null,
+        minCount: null,
+        minSupport: null,
+        limits:null
+      };
+
     }
 
     function init() {
@@ -68,8 +86,13 @@
     function createModel() {
       var finalSpec = angular.copy(model.newModelSpec);
       var commonDataset = angular.copy(model.newCommonDataset);
+      var finalParams = angular.copy(model.newParamsSpec);
       var url = "";
 
+      cleanNullProperties(finalParams);
+
+      finalSpec.model_params = JSON.stringify(finalParams);
+
       if(commonDataset.location == 'swift'){
         url = 'swift://' +
               commonDataset.container_name + '/' +
@@ -87,6 +110,17 @@
       return meteos.createModel(finalSpec);
     }
 
+
+    function cleanNullProperties(finalParams) {
+      // Initially clean fields that don't have any value.
+      // Not only "null", blank too.
+      for (var key in finalParams) {
+        if (finalParams[key] === null || finalParams[key] === "") {
+          delete finalParams[key];
+        }
+      }
+    }
+
     return model;
   }
 })();

meteos_ui/static/dashboard/machine_learning/models/create/spec/spec.html

@@ -12,15 +12,159 @@
         </select>
       </div>
     </div>
-    </div>
+    <div class="col-xs-12"
-    <div class="col-xs-12">
+         ng-if="model.newModelSpec.model_type != 'DecisionTreeRegression'">
       <div class="form-group">
-        <label class="control-label" for="model-model-params">
+        <label class="control-label" for="model-model-numIterations">
-          <translate>Model Params</translate>
+          <translate>NumIterations</translate>
           <span class="hz-icon-required fa fa-asterisk"></span>
         </label>
-        <input name="model-model-params" type="text" class="form-control" id="model-model-params"
+        <input name="model-model-numIterations" type="text" class="form-control" id="model-model-numIterations"
-               ng-model="model.newModelSpec.model_params"
+               ng-model="model.newParamsSpec.numIterations"
+                placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'KMeans'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-numClasses">
+          <translate>NumClasses</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-numClasses" type="text" class="form-control" id="model-model-numClasses"
+               ng-model="model.newParamsSpec.numClasses"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'KMeans'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-runs">
+          <translate>Runs</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-runs" type="text" class="form-control" id="model-model-runs"
+               ng-model="model.newParamsSpec.runs"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'KMeans'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-mode">
+          <translate>Mode</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-mode" type="text" class="form-control" id="model-model-mode"
+               ng-model="model.newParamsSpec.mode"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'Recommendation'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-rank">
+          <translate>Rank</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-rank" type="text" class="form-control" id="model-model-rank"
+               ng-model="model.newParamsSpec.rank"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'LinearRegression'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-step">
+          <translate>Step</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-step" type="text" class="form-control" id="model-model-step"
+               ng-model="model.newParamsSpec.step"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'DecisionTreeRegression'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-impurity">
+          <translate>Impurity</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-impurity" type="text" class="form-control" id="model-model-impurity"
+               ng-model="model.newParamsSpec.impurity"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'DecisionTreeRegression'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-maxDepth">
+          <translate>MaxDepth</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-maxDepth" type="text" class="form-control" id="model-model-maxDepth"
+               ng-model="model.newParamsSpec.maxDepth"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'DecisionTreeRegression'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-maxBins">
+          <translate>MaxBins</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-maxBins" type="text" class="form-control" id="model-model-maxBins"
+               ng-model="model.newParamsSpec.maxBins"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'Word2Vec'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-learningRate">
+          <translate>LearningRate</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-learningRate" type="text" class="form-control" id="model-model-learningRate"
+               ng-model="model.newParamsSpec.learningRate"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'Word2Vec'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-minCount">
+          <translate>MinCount</translate>
+           <span class="hz-icon-required fa fa-asterisk"></span>
+         </label>
+        <input name="model-model-minCount" type="text" class="form-control" id="model-model-minCount"
+               ng-model="model.newParamsSpec.minCount"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'FPGrowth'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-minSupport">
+          <translate>MinSupport</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-minSupport" type="text" class="form-control" id="model-model-minSupport"
+               ng-model="model.newParamsSpec.minSupport"
+               placeholder="{$ 'Parameters when creating model.'|translate $}">
+      </div>
+    </div>
+    <div class="col-xs-12"
+         ng-if="model.newModelSpec.model_type == 'FPGrowth'">
+      <div class="form-group">
+        <label class="control-label" for="model-model-limits">
+          <translate>Limits</translate>
+          <span class="hz-icon-required fa fa-asterisk"></span>
+        </label>
+        <input name="model-model-limits" type="text" class="form-control" id="model-model-limits"
+               ng-model="model.newParamsSpec.limits"
                placeholder="{$ 'Parameters when creating model.'|translate $}">
       </div>
     </div>