fixed pcp

cachedir/joblib/run/GridSearchForModels/34dd4fa44cf8d83f42cfacc70a3fdd71/metadata.json

@@ -1 +1 @@
-{"duration": 277.43560791015625, "input_args": {"XData": "     sepal_l  sepal_w  petal_l  petal_w\n0        6.3      3.3      6.0      2.5\n1        7.1      3.0      5.9      2.1\n2        5.8      2.7      5.1      1.9\n3        6.3      2.9      5.6      1.8\n4        7.6      3.0      6.6      2.1\n..       ...      ...      ...      ...\n145      5.1      3.8      1.6      0.2\n146      5.0      3.5      1.6      0.6\n147      5.1      3.4      1.5      0.2\n148      4.6      3.2      1.4      0.2\n149      4.8      3.0      1.4      0.3\n\n[150 rows x 4 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "KNeighborsClassifier(algorithm='ball_tree', leaf_size=30, metric='minkowski',\n                     metric_params=None, n_jobs=None, n_neighbors=24, p=2,\n                     weights='distance')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], 'weights': ['uniform', 'distance'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski']}", "eachAlgor": "'KNN'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "0"}}
+{"duration": 291.49311804771423, "input_args": {"XData": "     sepal_l  sepal_w  petal_l  petal_w\n0        6.3      3.3      6.0      2.5\n1        7.1      3.0      5.9      2.1\n2        5.8      2.7      5.1      1.9\n3        6.3      2.9      5.6      1.8\n4        7.6      3.0      6.6      2.1\n..       ...      ...      ...      ...\n145      5.1      3.8      1.6      0.2\n146      5.0      3.5      1.6      0.6\n147      5.1      3.4      1.5      0.2\n148      4.6      3.2      1.4      0.2\n149      4.8      3.0      1.4      0.3\n\n[150 rows x 4 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "KNeighborsClassifier(algorithm='ball_tree', leaf_size=30, metric='minkowski',\n                     metric_params=None, n_jobs=None, n_neighbors=24, p=2,\n                     weights='distance')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], 'weights': ['uniform', 'distance'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski']}", "eachAlgor": "'KNN'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "0"}}

cachedir/joblib/run/GridSearchForModels/3e589fe0fa65fac056ce8e152ff3ecba/metadata.json

@@ -1 +1 @@
-{"duration": 359.44206166267395, "input_args": {"XData": "     sepal_l  sepal_w  petal_l  petal_w\n0        6.3      3.3      6.0      2.5\n1        7.1      3.0      5.9      2.1\n2        5.8      2.7      5.1      1.9\n3        6.3      2.9      5.6      1.8\n4        7.6      3.0      6.6      2.1\n..       ...      ...      ...      ...\n145      5.1      3.8      1.6      0.2\n146      5.0      3.5      1.6      0.6\n147      5.1      3.4      1.5      0.2\n148      4.6      3.2      1.4      0.2\n149      4.8      3.0      1.4      0.3\n\n[150 rows x 4 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "RandomForestClassifier(bootstrap=True, class_weight=None, criterion='entropy',\n                       max_depth=None, max_features='auto', max_leaf_nodes=None,\n                       min_impurity_decrease=0.0, min_impurity_split=None,\n                       min_samples_leaf=1, min_samples_split=2,\n                       min_weight_fraction_leaf=0.0, n_estimators=119,\n                       n_jobs=None, oob_score=False, random_state=None,\n                       verbose=0, warm_start=False)", "params": "{'n_estimators': [40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119], 'criterion': ['gini', 'entropy']}", "eachAlgor": "'RF'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "576"}}
+{"duration": 335.52157711982727, "input_args": {"XData": "     sepal_l  sepal_w  petal_l  petal_w\n0        6.3      3.3      6.0      2.5\n1        7.1      3.0      5.9      2.1\n2        5.8      2.7      5.1      1.9\n3        6.3      2.9      5.6      1.8\n4        7.6      3.0      6.6      2.1\n..       ...      ...      ...      ...\n145      5.1      3.8      1.6      0.2\n146      5.0      3.5      1.6      0.6\n147      5.1      3.4      1.5      0.2\n148      4.6      3.2      1.4      0.2\n149      4.8      3.0      1.4      0.3\n\n[150 rows x 4 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]", "clf": "RandomForestClassifier(bootstrap=True, class_weight=None, criterion='entropy',\n                       max_depth=None, max_features='auto', max_leaf_nodes=None,\n                       min_impurity_decrease=0.0, min_impurity_split=None,\n                       min_samples_leaf=1, min_samples_split=2,\n                       min_weight_fraction_leaf=0.0, n_estimators=119,\n                       n_jobs=None, oob_score=False, random_state=None,\n                       verbose=0, warm_start=False)", "params": "{'n_estimators': [40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119], 'criterion': ['gini', 'entropy']}", "eachAlgor": "'RF'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "576"}}

cachedir/joblib/run/GridSearchForModels/d3ffb9c0e5d4e64abbb8f8a71e13e521/metadata.json

@@ -1 +0,0 @@
-{"duration": 2426.6991608142853, "input_args": {"XData": "     Pregnan  Glucose  BloodPress  SkinThick  Insulin   BMI    DPF  Age\n0          8      183          64          0        0  23.3  0.672   32\n1          2      197          70         45      543  30.5  0.158   53\n2          8      125          96          0        0   0.0  0.232   54\n3         10      168          74          0        0  38.0  0.537   34\n4          1      189          60         23      846  30.1  0.398   59\n..       ...      ...         ...        ...      ...   ...    ...  ...\n763        9       89          62          0        0  22.5  0.142   33\n764        2      122          70         27        0  36.8  0.340   27\n765       10      101          76         48      180  32.9  0.171   63\n766        5      121          72         23      112  26.2  0.245   30\n767        1       93          70         31        0  30.4  0.315   23\n\n[768 rows x 8 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "KNeighborsClassifier(algorithm='ball_tree', leaf_size=30, metric='minkowski',\n                     metric_params=None, n_jobs=None, n_neighbors=24, p=2,\n                     weights='distance')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], 'weights': ['uniform', 'distance'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski']}", "eachAlgor": "'KNN'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "0"}}

cachedir/joblib/run/GridSearchForModels/fa486d0ef10b213eeae65d5db1f9232b/metadata.json

@@ -1 +0,0 @@
-{"duration": 923.801488161087, "input_args": {"XData": "     Pregnan  Glucose  BloodPress  SkinThick  Insulin   BMI    DPF  Age\n0          8      183          64          0        0  23.3  0.672   32\n1          2      197          70         45      543  30.5  0.158   53\n2          8      125          96          0        0   0.0  0.232   54\n3         10      168          74          0        0  38.0  0.537   34\n4          1      189          60         23      846  30.1  0.398   59\n..       ...      ...         ...        ...      ...   ...    ...  ...\n763        9       89          62          0        0  22.5  0.142   33\n764        2      122          70         27        0  36.8  0.340   27\n765       10      101          76         48      180  32.9  0.171   63\n766        5      121          72         23      112  26.2  0.245   30\n767        1       93          70         31        0  30.4  0.315   23\n\n[768 rows x 8 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "RandomForestClassifier(bootstrap=True, class_weight=None, criterion='entropy',\n                       max_depth=None, max_features='auto', max_leaf_nodes=None,\n                       min_impurity_decrease=0.0, min_impurity_split=None,\n                       min_samples_leaf=1, min_samples_split=2,\n                       min_weight_fraction_leaf=0.0, n_estimators=119,\n                       n_jobs=None, oob_score=False, random_state=None,\n                       verbose=0, warm_start=False)", "params": "{'n_estimators': [40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119], 'criterion': ['gini', 'entropy']}", "eachAlgor": "'RF'", "factors": "[1, 1, 1, 1, 1]", "AlgorithmsIDsEnd": "576"}}

cachedir/joblib/run/GridSearchForModels/func_code.py

@@ -1,4 +1,4 @@
-# first line: 463
+# first line: 465
 @memory.cache
 def GridSearchForModels(XData, yData, clf, params, eachAlgor, factors, AlgorithmsIDsEnd):
 
@@ -51,7 +51,7 @@ def GridSearchForModels(XData, yData, clf, params, eachAlgor, factors, Algorithm
     sumperModel = []
     for index, row in metrics.iterrows():
         rowSum = 0
-        lengthFactors = NumberofscoringMetrics
+        lengthFactors = len(scoring)
         for loop,elements in enumerate(row):
             lengthFactors = lengthFactors -  1 + factors[loop]
             rowSum = elements*factors[loop] + rowSum

frontend/src/components/AlgorithmHyperParam.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="PCP" class="parcoords" style="height:200px"></div>
+  <div id="PCP" class="parcoords" style="min-height: 307px;"></div>
 </template>
 
 <script>
@@ -19,6 +19,7 @@ export default {
       ModelsPerformance: 0,
       selAlgorithm: 0,
       pc: 0,
+      factors: [1,1,1,1,1],
       KNNModels: 576 //KNN models
     }
   },
@@ -32,6 +33,29 @@ export default {
         var colors = ['#8dd3c7','#8da0cb']
         var colorGiv = 0
         
+        var factorsLocal = this.factors
+        var divide = 0
+
+        factorsLocal.forEach(element => {
+          divide = element + divide
+        });
+
+        var Mc1 = []
+        const performanceAlg1 = JSON.parse(this.ModelsPerformance[6])
+        for (let j = 0; j < Object.values(performanceAlg1['mean_test_accuracy']).length; j++) {
+          let sum
+          sum = (factorsLocal[0] * Object.values(performanceAlg1['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlg1['mean_test_f1_macro'])[j]) + (factorsLocal[2] * Object.values(performanceAlg1['mean_test_precision'])[j]) + (factorsLocal[3] * Object.values(performanceAlg1['mean_test_recall'])[j]) + (factorsLocal[4] * Object.values(performanceAlg1['mean_test_jaccard'])[j])
+          Mc1.push((sum/divide)*100)
+        }
+
+        var Mc2 = []
+        const performanceAlg2 = JSON.parse(this.ModelsPerformance[14])
+        for (let j = 0; j < Object.values(performanceAlg2['mean_test_accuracy']).length; j++) {
+          let sum2
+          sum2 = (factorsLocal[0] * Object.values(performanceAlg2['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlg2['mean_test_f1_macro'])[j]) + (factorsLocal[2] * Object.values(performanceAlg2['mean_test_precision'])[j]) + (factorsLocal[3] * Object.values(performanceAlg2['mean_test_recall'])[j]) + (factorsLocal[4] * Object.values(performanceAlg2['mean_test_jaccard'])[j])
+          Mc2.push((sum2/divide)*100)
+        }
+
         var Combined = 0
         if (this.selAlgorithm == 'KNN') {    
           Combined = JSON.parse(this.ModelsPerformance[1])
@@ -49,10 +73,10 @@ export default {
         for (var i = 0; i < valuesPerf.length; i++) {
           if (this.selAlgorithm === 'KNN') {
             // There is a problem here!
-            newObjectsParams.push({model: i,'perf_metrics': valuesPerf[i],'n_neighbors':ObjectsParams[i].n_neighbors,'metric':ObjectsParams[i].metric,'algorithm':ObjectsParams[i].algorithm,'weights':ObjectsParams[i].weights})
+            newObjectsParams.push({model: i,'perf_metrics': Mc1[i],'n_neighbors':ObjectsParams[i].n_neighbors,'metric':ObjectsParams[i].metric,'algorithm':ObjectsParams[i].algorithm,'weights':ObjectsParams[i].weights})
             ArrayCombined[i] = newObjectsParams[i]
           } else {
-            newObjectsParams2.push({model: this.KNNModels + i,'perf_metrics': valuesPerf[i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion})
+            newObjectsParams2.push({model: this.KNNModels + i,'perf_metrics': Mc2[i],'n_estimators':ObjectsParams[i].n_estimators,'criterion':ObjectsParams[i].criterion})
             ArrayCombined[i] = newObjectsParams2[i]
           }
         }
@@ -91,6 +115,9 @@ export default {
     EventBus.$on('ResponsiveandChange', this.PCPView)
     EventBus.$on('emittedEventCallingModelClear', this.clear)
 
+    EventBus.$on('CallFactorsView', data => { this.factors = data })
+    EventBus.$on('CallFactorsView', this.PCPView)
+
     // reset view
     EventBus.$on('resetViews', this.reset)
     EventBus.$on('clearPCP', this.reset)

frontend/src/components/Algorithms.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="exploding_boxplot" class="exploding_boxplot"></div>
+    <div id="exploding_boxplot" class="exploding_boxplot" style="min-height: 430px;"></div>
   </div>
 </template>
 
@@ -28,6 +28,7 @@ export default {
       parameters: [],
       algorithm1: [],
       algorithm2: [],
+      factors: [1,1,1,1,1],
       chart: '',
       flagEmpty: 0,
       ActiveModels: [],
@@ -45,6 +46,29 @@ export default {
       const Algor1IDs = this.PerformanceAllModels[0]
       const Algor2IDs = this.PerformanceAllModels[8]
 
+      var factorsLocal = this.factors
+      var divide = 0
+
+      factorsLocal.forEach(element => {
+        divide = element + divide
+      });
+
+      var Mc1 = []
+      const performanceAlg1 = JSON.parse(this.PerformanceAllModels[6])
+      for (let j = 0; j < Object.values(performanceAlg1['mean_test_accuracy']).length; j++) {
+        let sum
+        sum = (factorsLocal[0] * Object.values(performanceAlg1['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlg1['mean_test_f1_macro'])[j]) + (factorsLocal[2] * Object.values(performanceAlg1['mean_test_precision'])[j]) + (factorsLocal[3] * Object.values(performanceAlg1['mean_test_recall'])[j]) + (factorsLocal[4] * Object.values(performanceAlg1['mean_test_jaccard'])[j])
+        Mc1.push((sum/divide)*100)
+      }
+
+      var Mc2 = []
+      const performanceAlg2 = JSON.parse(this.PerformanceAllModels[14])
+      for (let j = 0; j < Object.values(performanceAlg2['mean_test_accuracy']).length; j++) {
+        let sum2
+        sum2 = (factorsLocal[0] * Object.values(performanceAlg2['mean_test_accuracy'])[j]) + (factorsLocal[1] * Object.values(performanceAlg2['mean_test_f1_macro'])[j]) + (factorsLocal[2] * Object.values(performanceAlg2['mean_test_precision'])[j]) + (factorsLocal[3] * Object.values(performanceAlg2['mean_test_recall'])[j]) + (factorsLocal[4] * Object.values(performanceAlg2['mean_test_jaccard'])[j])
+        Mc2.push((sum2/divide)*100)
+      }
+      
       // retrieve the results like performance
       const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[1])
       const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[9])
@@ -55,11 +79,11 @@ export default {
       this.parameters = []
       
       for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) {
-        this.algorithm1.push({'Performance Metrics': Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + Algor1IDs[i] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance Metrics ',ModelID:Algor1IDs[i]})
+        this.algorithm1.push({'Performance Metrics': Mc1[i],Algorithm:'KNN',Model:'Model ' + Algor1IDs[i] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance Metrics ',ModelID:Algor1IDs[i]})
         this.parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i]))
       }
       for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) {
-        this.algorithm2.push({'Performance Metrics': Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + Algor2IDs[j] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance Metrics ',ModelID:Algor2IDs[j]})
+        this.algorithm2.push({'Performance Metrics': Mc2[j],Algorithm:'RF',Model:'Model ' + Algor2IDs[j] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance Metrics ',ModelID:Algor2IDs[j]})
         this.parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j]))
       }
 
@@ -75,7 +99,7 @@ export default {
       // label : displayed text in toolbox
       this.chart = exploding_boxplot(data, {y:'Performance Metrics',group:'Algorithm',color:'Algorithm',label:'Model'})
       this.chart.width(this.WH[0]*3) // interactive visualization
-      this.chart.height(this.WH[1]) // interactive visualization
+      this.chart.height(this.WH[1]*0.9) // interactive visualization
       //call chart on a div
       this.chart('#exploding_boxplot')
 
@@ -350,6 +374,9 @@ export default {
       this.selectedAlgorithm = data})
     EventBus.$on('brusheAllOn', this.brushActivationAll)
 
+    EventBus.$on('CallFactorsView', data => { this.factors = data })
+    EventBus.$on('CallFactorsView', this.boxplot)
+
     // reset the views
     EventBus.$on('resetViews', this.reset)
   }

frontend/src/components/BalancePredictions.vue

@@ -32,8 +32,8 @@
             svg.selectAll("*").remove();
 
             // responsive visualizations
-            var widthInitial = this.responsiveWidthHeight[0]*3 
-            var heightInitial = this.responsiveWidthHeight[1]/1.6
+            var widthInitial = this.responsiveWidthHeight[0]*6.5
+            var heightInitial = this.responsiveWidthHeight[1]*0.5
 
             var performancePerModel = JSON.parse(this.resultsfromOverview[0])
             var performancePerModelSelection = []
@@ -186,12 +186,12 @@
                   
 
             // Handmade legend
-            var heightforText = 175
-            svg.append("circle").attr("cx",30).attr("cy",heightforText).attr("r", 6).style("fill", "#000")
-            svg.append("circle").attr("cx",350).attr("cy",heightforText).attr("r", 6).style("fill", "#D3D3D3")
-            svg.append("text").attr("x", 50).attr("y", heightforText).text("Entire distribution").style("font-size", "15px").attr("alignment-baseline","middle")
-            svg.append("text").attr("x", 210).attr("y", heightforText).text("Performance").style("font-size", "15px").attr("alignment-baseline","top")
-            svg.append("text").attr("x", 370).attr("y", heightforText).text("Selected points").style("font-size", "15px").attr("alignment-baseline","middle")
+            var heightforText = 215
+            svg.append("circle").attr("cx", 215).attr("cy", heightforText-1.5).attr("r", 6).style("fill", "#000")
+            svg.append("circle").attr("cx", 785).attr("cy", heightforText-1.5).attr("r", 6).style("fill", "#D3D3D3")
+            svg.append("text").attr("x", 230).attr("y", heightforText).text("Entire distribution").style("font-size", "15px").attr("alignment-baseline","middle")
+            svg.append("text").attr("x", 515).attr("y", heightforText-10).text("Performance").style("font-size", "15px").attr("alignment-baseline","top")
+            svg.append("text").attr("x", 800).attr("y", heightforText).text("Selected points").style("font-size", "15px").attr("alignment-baseline","middle")
 
             // Function to compute density
             function kernelDensityEstimator(kernel, X) {

frontend/src/components/BarChart.vue

@@ -1,7 +1,7 @@
 <template>
 <b-row>
     <b-col cols="12">
-        <div id="barChart" class="barChart"></div>
+        <div id="barChart" class="barChart" style="min-height: 307px;"></div>
     </b-col>
 </b-row>
 </template>
@@ -18,6 +18,7 @@ export default {
       ClassNamesOverview: '',
       algorithmsinBar: [],
       modelsSelectedinBar: [],
+      factors: [1,1,1,1,1],
       KNNModels: 576, //KNN models,
       colorsValues: ['#6a3d9a','#b15928','#e31a1c'],
       WH: []
@@ -31,6 +32,10 @@ export default {
       var KNNModels = []
       var RFModels = []
       
+            
+      var factorsLocal = this.factors
+      var divide = factorsLocal[1] + factorsLocal[2] + factorsLocal[3]
+
       if (this.modelsSelectedinBar.length != 0){
           for (let i=0; i<this.algorithmsinBar.length;i++) {
               if (this.algorithmsinBar[i] === "KNN") {
@@ -51,12 +56,12 @@ export default {
           temp = 0
           temp2 = 0
           for (var j=0;j<Object.keys(PerClassMetrics[target_names[i]]).length;j++){
-              temp = temp + (Object.values(PerClassMetrics)[i][j]['f1-score']+Object.values(PerClassMetrics)[i][j]['precision']+Object.values(PerClassMetrics)[i][j]['recall'])/3
+              temp = temp + ((Object.values(PerClassMetrics)[i][j]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics)[i][j]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics)[i][j]['recall']*factorsLocal[3]))/divide
           }
           temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length
           sum.push(temp)
           for (var k=0;k<Object.keys(PerClassMetrics2[target_names[i]]).length;k++){
-              temp2 = temp2 + (Object.values(PerClassMetrics2)[i][k]['f1-score']+Object.values(PerClassMetrics2)[i][k]['precision']+Object.values(PerClassMetrics2)[i][k]['recall'])/3
+            temp2 = temp2 + ((Object.values(PerClassMetrics2)[i][k]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics2)[i][k]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics2)[i][k]['recall']*factorsLocal[3]))/divide
           }
           temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length
           sum.push(temp2)
@@ -71,12 +76,12 @@ export default {
 
           if (KNNModels.length == 0) {
               for (var j=0;j<Object.keys(PerClassMetrics[target_names[i]]).length;j++){
-                  temp = temp + (Object.values(PerClassMetrics)[i][j]['f1-score']+Object.values(PerClassMetrics)[i][j]['precision']+Object.values(PerClassMetrics)[i][j]['recall'])/3
+                temp = temp + ((Object.values(PerClassMetrics)[i][j]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics)[i][j]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics)[i][j]['recall']*factorsLocal[3]))/divide
               }
               temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length
           } else {
               for (var j=0;j<KNNModels.length;j++){
-                  temp = temp + (Object.values(PerClassMetrics)[i][KNNModels[j]]['f1-score']+Object.values(PerClassMetrics)[i][KNNModels[j]]['precision']+Object.values(PerClassMetrics)[i][KNNModels[j]]['recall'])/3
+                  temp = temp + ((Object.values(PerClassMetrics)[i][j]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics)[i][j]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics)[i][j]['recall']*factorsLocal[3]))/divide
               }
               temp = temp/KNNModels.length
           }
@@ -84,12 +89,12 @@ export default {
 
           if (RFModels.length == 0) {
               for (var k=0;k<Object.keys(PerClassMetrics2[target_names[i]]).length;k++){
-                  temp2 = temp2 + (Object.values(PerClassMetrics2)[i][k]['f1-score']+Object.values(PerClassMetrics2)[i][k]['precision']+Object.values(PerClassMetrics2)[i][k]['recall'])/3
+                  temp2 = temp2 + ((Object.values(PerClassMetrics2)[i][k]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics2)[i][k]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics2)[i][k]['recall']*factorsLocal[3]))/divide
               }
               temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length
           } else {
               for (var k=0;k<RFModels.length;k++){
-                  temp2 = temp2 + (Object.values(PerClassMetrics2)[i][RFModels[k]]['f1-score']+Object.values(PerClassMetrics2)[i][RFModels[k]]['precision']+Object.values(PerClassMetrics2)[i][RFModels[k]]['recall'])/3
+                  temp2 = temp2 + ((Object.values(PerClassMetrics2)[i][k]['f1-score']*factorsLocal[1])+(Object.values(PerClassMetrics2)[i][k]['precision']*factorsLocal[2])+(Object.values(PerClassMetrics2)[i][k]['recall']*factorsLocal[3]))/divide
               }
               temp2 = temp2/RFModels.length
           }
@@ -101,7 +106,7 @@ export default {
       autosize: true,
       barmode: 'group',
       width: this.WH[0]*3,
-      height: this.WH[1],
+      height: this.WH[1]*0.635,
           xaxis: {
               title: 'Algorithm',
               type:"category",
@@ -111,12 +116,7 @@ export default {
               showexponent: 'all'
           },
           yaxis: {
-              title: 'Per Class Performance Metrics',
-              titlefont: {
-              family: 'Arial, sans-serif',
-              size: 18,
-              color: 'grey'
-              }
+              title: 'Performance Metrics',
           },
           xaxis2: {
               overlaying: 'x',
@@ -127,10 +127,10 @@ export default {
               showexponent: 'all'
           },
       margin: {
-          l: 40,
+          l: 50,
           r: 0,
-          b: 40,
-          t: 25,
+          b: 30,
+          t: 30,
           pad: 0
           }
       }
@@ -183,11 +183,15 @@ export default {
       EventBus.$on('emittedEventCallingBarChart', this.BarChartView)
       EventBus.$on('emittedEventCallingUpdateBarChart', data => { this.ModelsChosen = data })
       EventBus.$on('emittedEventCallingUpdateBarChart', this.BarChartView)
+
       EventBus.$on('Responsive', data => {
           this.WH = data})
       EventBus.$on('ResponsiveandChange', data => {
           this.WH = data})
 
+      EventBus.$on('CallFactorsView', data => { this.factors = data })
+      EventBus.$on('CallFactorsView', this.BarChartView)
+
       // reset view
       EventBus.$on('resetViews', this.reset)
     }

frontend/src/components/Controller.vue

@@ -1,12 +1,10 @@
 <template>
-    <div>
-        <button
+  <button style="floatfloat: right;"
   id="Execute"
   v-on:click="execute">
   <font-awesome-icon icon="play" />
   {{ valueExecute }}
   </button>
-  </div>
 </template>
 
 <script>

frontend/src/components/DataSpace.vue

@@ -100,8 +100,8 @@ export default {
       Plotly.purge('OverviewDataPlotly')
 
       // responsive visualization
-      let width = this.responsiveWidthHeight[0]*3 
-      let height = this.responsiveWidthHeight[1]*2.1
+      let width = this.responsiveWidthHeight[0]*6.5
+      let height = this.responsiveWidthHeight[1]*1.1
 
       var target_names = JSON.parse(this.dataPoints[0])
       const XandYCoordinatesMDS = JSON.parse(this.dataPoints[1])

frontend/src/components/FinalResultsLinePlot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="LinePlot" class="LinePlot"></div>
+  <div id="LinePlot" style="min-height: 307px;"></div>
 </template>
 
 <script>
@@ -93,8 +93,7 @@ export default {
       var xaxisReversed = []
       xaxisReversed = this.xaxis.slice().reverse()
       xaxisReversed = this.xaxis.concat(xaxisReversed)
-      var width = this.WH[0]*3 // interactive visualization
-      var height = this.WH[1]*1.5 // interactive visualization
+
       // fill in 'text' array for hover
       var text = this.scoresSTD.map (function(value, i) {
           return `STD: +/-${value}`
@@ -255,8 +254,11 @@ export default {
       }
 
       const DataforLinePlot = [trace1, trace2, trace7, trace8, trace3, trace4, trace9, trace10, trace5, trace6, trace11, trace12]
-      const layout = {
-        title: 'Stack Ensemble Learning Score',
+
+      var width = this.WH[0]*3 // interactive visualization
+      var height = this.WH[1]*0.6 // interactive visualization
+
+      var layout = {
         paper_bgcolor: "rgb(255,255,255)", 
         plot_bgcolor: "rgb(229,229,229)", 
         xaxis: {
@@ -281,9 +283,16 @@ export default {
             ticks: "outside", 
             zeroline: false
         },
-        autosize: true,
+        autosize: false,
         width: width,
         height: height,
+        margin: {
+          l: 60,
+          r: 40,
+          b: 40,
+          t: 40,
+          pad: 0
+        },
       }
       Plotly.newPlot('LinePlot', DataforLinePlot, layout, {showSendToCloud: true, responsive: true})
     }
@@ -293,6 +302,11 @@ export default {
       this.FinalResultsforLinePlot = data})
     EventBus.$on('emittedEventCallingLinePlot', this.LinePlotView)
 
+    EventBus.$on('Responsive', data => {
+    this.WH = data})
+    EventBus.$on('ResponsiveandChange', data => {
+    this.WH = data})
+
     // reset the views
     EventBus.$on('resetViews', this.reset)
   }

frontend/src/components/Heatmap.vue

@@ -23,7 +23,8 @@ export default {
       classesNumber: 10,
       cellSize: 20,
       ModelsIDHeatStack: [],
-      highlighted: []
+      highlighted: [],
+      responsiveWidthHeight: []
     }
   },
   methods: {
@@ -177,8 +178,8 @@ export default {
                             svg.attr('transform', d3.event.transform) // updated for d3 v4
                         })
     //==================================================
-    var viewerWidth = $(document).width()/2.2;
-    var viewerHeight = $(document).height()/5.5;
+    var viewerWidth = this.responsiveWidthHeight[0]*6.5
+    var viewerHeight = this.responsiveWidthHeight[1]*1.1
     var viewerPosTop = 125;
     var viewerPosLeft = 100;
 
@@ -388,7 +389,7 @@ export default {
 
       var legend = svg.append("g")
           .attr("class", "legend")
-          .attr("transform", "translate(0,-240)")
+          .attr("transform", "translate(0,0)")
           .selectAll(".legendElement")
           .data([0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9])
           .enter().append("g")
@@ -582,6 +583,11 @@ export default {
       EventBus.$on('SendSelectedPointsToBrushHeatmap', data => { this.highlighted = data; })
       EventBus.$on('SendSelectedPointsToBrushHeatmap', this.brush)
 
+    EventBus.$on('Responsive', data => {
+    this.responsiveWidthHeight = data})
+    EventBus.$on('ResponsiveandChange', data => {
+    this.responsiveWidthHeight = data})
+
       // reset the views
       EventBus.$on('resetViews', this.reset)
     }

frontend/src/components/Main.vue

@@ -6,114 +6,138 @@
       <b-row class="md-3">
         <b-col cols="3">
           <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center">Data and Performance Metrics Selection</mdb-card-header>
+            <mdb-card-header color="primary-color" tag="h5" class="text-center">Data Set and Validation Metrics Manager</mdb-card-header>
               <mdb-card-body>
-              <mdb-card-text class="text-center" >
+                <mdb-card-text class="text-left">
                   <DataSetExecController/>
                   <SlidersController/>
                 </mdb-card-text>
               </mdb-card-body>
           </mdb-card>
-        <mdb-card style="margin-top: 15px">
-          <mdb-card-header color="primary-color" tag="h5" class="text-center">HyperParameters Space Exploration Overview</mdb-card-header>
+        </b-col>
+        <b-col cols="6">
+          <mdb-card>
+            <mdb-card-header color="primary-color" tag="h5" class="text-center">Current Stacking Ensemble</mdb-card-header>
             <mdb-card-body>
-              <Parameters/>
+                <Provenance/>
             </mdb-card-body>
           </mdb-card>
         </b-col>
         <b-col cols="3">
             <mdb-card>
-             <mdb-card-header color="primary-color" tag="h5" class="text-center">Models Space Visualization
-              [Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
-              </mdb-card-header>
+              <mdb-card-header color="primary-color" tag="h5" class="text-center">Meta-Model Performance</mdb-card-header>
               <mdb-card-body>
-                <ScatterPlot/>
-                <PerMetricBarChart/>
+                <FinalResultsLinePlot/>
               </mdb-card-body>
             </mdb-card>
         </b-col>
+      </b-row>
+      <ul class="nav nav-tabs" id="myTab" role="tablist" style="margin-top: 15px">
+      <li class="nav-item">
+        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Algorithms</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Data</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Models</a>
+      </li>
+      </ul>
+      <div class="tab-content" id="myTabContent">
+        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+          <b-row class="md-3">
             <b-col cols="3">
-          <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions Space Visualization</mdb-card-header>
-            <mdb-card-body>
-              <mdb-card-text class="text-center">
-                <PredictionsSpace/>
-                <BalancePredictions/>
-              </mdb-card-text>
+              <mdb-card style="margin-top: 15px">
+                <mdb-card-header color="primary-color" tag="h5" class="text-center">Overview of the Algorithms Space</mdb-card-header>
+                <mdb-card-body class="text-center">
+                  <Parameters/>
                 </mdb-card-body>
               </mdb-card>
             </b-col>
-        <b-col cols="3">
-           <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space Visualization</mdb-card-header>
+            <b-col cols="9">
+              <mdb-card style="margin-top: 15px;">
+                <mdb-card-header color="primary-color" tag="h5" class="text-center">Performance of the Algorithms [Sel.:{{valueSel}}/All:{{valueAll}}]<small class="float-right"><Controller/></small></mdb-card-header>
                   <mdb-card-body>
-              <mdb-card-text class="text-center">
-                <DataSpace/>
-                <PCPData/>
-              </mdb-card-text>
+                      <Algorithms :width="width" :height="height"/>
                   </mdb-card-body>
               </mdb-card>
             </b-col>
           </b-row>
-      <b-row class="mb-3 mt-3">
+          <b-row class="md-3">
             <b-col cols="3">
-          <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center">Best Algorithms and HyperParameters Search [Sel.:{{valueSel}}/All:{{valueAll}}]</mdb-card-header>
+              <mdb-card style="margin-top: 15px">
+                <mdb-card-header color="primary-color" tag="h5" class="text-center">Parameters Manipulation for Each Algorithm</mdb-card-header>
                 <mdb-card-body>
-                  <Algorithms :width="width" :height="height"/>
                   <AlgorithmHyperParam/>
-                  <mdb-card-text class="text-center" >
-                    <Controller/>
-                  </mdb-card-text>
                 </mdb-card-body>
               </mdb-card>
             </b-col>
-        <b-col cols="6">
-          <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center">Models Feature Selection</mdb-card-header>
-            <b-row>
-            <b-col cols="12">  
+            <b-col cols="9">
+              <mdb-card style="margin-top: 15px;">
+                <mdb-card-header color="primary-color" tag="h5" class="text-center">Performance of the Algorithms for Each Class</mdb-card-header>
                 <mdb-card-body>
-                <Heatmap/>
+                    <BarChart/>
                 </mdb-card-body>
+              </mdb-card>
             </b-col>
           </b-row>
-            <mdb-card-text>
+        </div>
+        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+          <b-row class="md-3">
+              <b-col cols="6">
+                <mdb-card style="margin-top: 15px;">
+                  <mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space</mdb-card-header>
                   <mdb-card-body>
-                <ToggleSelection/>
-              </mdb-card-body>
+                    <mdb-card-text class="text-center" style="min-height: 825px">
+                      <DataSpace/>
+                      <PCPData/>
                     </mdb-card-text>
+                  </mdb-card-body>
                 </mdb-card>
               </b-col>
-        <b-col cols="3">
-          <mdb-card >
-            <mdb-card>
-              <mdb-card-header color="primary-color" tag="h5" class="text-center">Meta-Model Performance</mdb-card-header>
+              <b-col cols="6">
+                <mdb-card style="margin-top: 15px;">
+                  <mdb-card-header color="primary-color" tag="h5" class="text-center">Features Selection for Each Model</mdb-card-header>
                     <mdb-card-body>
-                <FinalResultsLinePlot/>
+                      <mdb-card-text class="text-center" style="min-height: 845px">
+                        <ToggleSelection/>
+                        <Heatmap/>
+                      </mdb-card-text>
                     </mdb-card-body>
                 </mdb-card>    
-          </mdb-card>
+
               </b-col>
             </b-row>
-      <b-row>
-          <b-col cols="3">
-            <mdb-card>
-              <mdb-card-header color="primary-color" tag="h5" class="text-center">Diverse Algorithms Exploration</mdb-card-header>
+        </div>
+        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
+          <b-row class="md-3">
+              <b-col cols="6">
+                <mdb-card style="margin-top: 15px;">
+                  <mdb-card-header color="primary-color" tag="h5" class="text-center">Models Space
+                    [Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
+                    </mdb-card-header>
                     <mdb-card-body>
-                  <BarChart/>
+                      <mdb-card-text class="text-center"  style="min-height: 845px">
+                        <ScatterPlot/>
+                        <PerMetricBarChart/>
+                      </mdb-card-text>
                     </mdb-card-body>
                 </mdb-card>
               </b-col>
-          <b-col cols="9">
-            <mdb-card>
-              <mdb-card-header color="primary-color" tag="h5" class="text-center">Current Stacking Ensemble and Provenance Visualization</mdb-card-header>
+              <b-col cols="6">
+                <mdb-card style="margin-top: 15px;">
+                  <mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions Space</mdb-card-header>
                   <mdb-card-body>
-                  <Provenance/>
+                    <mdb-card-text class="text-center"  style="min-height: 845px">
+                      <PredictionsSpace/>
+                      <BalancePredictions/>
+                    </mdb-card-text>
                   </mdb-card-body>
                 </mdb-card>
               </b-col>
             </b-row>
+        </div>
+      </div>
     </b-container>
   </div>
 </template>
@@ -548,8 +572,8 @@ export default Vue.extend({
       axios.get(path, axiosConfig)
         .then(response => {
           this.preDataResults = response.data.preDataResults
-          EventBus.$emit('emittedEventCallingDataSpacePlotView', this.preDataResults)
           EventBus.$emit('emittedEventCallingDataPCP', this.preDataResults)
+          EventBus.$emit('emittedEventCallingDataSpacePlotView', this.preDataResults)
         })
         .catch(error => {
           console.log(error)

frontend/src/components/PCPData.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="PCPDataView" class="parcoords" style="width: 300px; height:200px"></div>
+  <div id="PCPDataView" class="parcoords" style="width: 1200px; height:280px"></div>
 </template>
 
 <script>
@@ -54,3 +54,9 @@ export default {
   }
 }
 </script>
+
+<style>
+  .parcoords svg {
+    position: relative !important;
+  }
+</style>

frontend/src/components/Parameters.vue

@@ -36,6 +36,337 @@ export default {
         svg.selectAll("*").remove();
       }, 50);
     },
+    /////////////////////////////////////////////////////////
+/////////////// The Radar Chart Function ////////////////
+/////////////// Written by Nadieh Bremer ////////////////
+////////////////// VisualCinnamon.com ///////////////////
+/////////// Inspired by the code of alangrafu ///////////
+/////////////////////////////////////////////////////////
+	
+ RadarChart(id, data, options) {
+	var cfg = {
+	 w: 600,				//Width of the circle
+	 h: 600,				//Height of the circle
+	 margin: {top: 20, right: 20, bottom: 20, left: 20}, //The margins of the SVG
+	 levels: 3,				//How many levels or inner circles should there be drawn
+	 maxValue: 0, 			//What is the value that the biggest circle will represent
+	 labelFactor: 1.25, 	//How much farther than the radius of the outer circle should the labels be placed
+	 wrapWidth: 60, 		//The number of pixels after which a label needs to be given a new line
+	 opacityArea: 0.35, 	//The opacity of the area of the blob
+	 dotRadius: 4, 			//The size of the colored circles of each blog
+	 opacityCircles: 0.1, 	//The opacity of the circles of each blob
+	 strokeWidth: 2, 		//The width of the stroke around each blob
+	 roundStrokes: false,	//If true the area and stroke will follow a round path (cardinal-closed)
+	 color: d3.scale.category10()	//Color function
+	};
+	
+	//Put all of the options into a variable called cfg
+	if('undefined' !== typeof options){
+	  for(var i in options){
+		if('undefined' !== typeof options[i]){ cfg[i] = options[i]; }
+	  }//for i
+	}//if
+	
+	//If the supplied maxValue is smaller than the actual one, replace by the max in the data
+	var maxValue = Math.max(cfg.maxValue, d3.max(data, function(i){return d3.max(i.map(function(o){return o.value;}))}));
+		
+	var allAxis = (data[0].map(function(i, j){return i.axis})),	//Names of each axis
+		total = allAxis.length,					//The number of different axes
+		radius = Math.min(cfg.w/2, cfg.h/2), 	//Radius of the outermost circle
+		Format = d3.format('%'),			 	//Percentage formatting
+		angleSlice = Math.PI * 2 / total;		//The width in radians of each "slice"
+	
+	//Scale for the radius
+	var rScale = d3.scale.linear()
+		.range([0, radius])
+		.domain([0, maxValue]);
+		
+	/////////////////////////////////////////////////////////
+	//////////// Create the container SVG and g /////////////
+	/////////////////////////////////////////////////////////
+
+	//Remove whatever chart with the same id/class was present before
+	d3.select(id).select("svg").remove();
+	
+	//Initiate the radar chart SVG
+	var svg = d3.select(id).append("svg")
+			.attr("width",  cfg.w + cfg.margin.left + cfg.margin.right)
+			.attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom)
+			.attr("class", "radar"+id);
+	//Append a g element		
+	var g = svg.append("g")
+			.attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")");
+	
+	/////////////////////////////////////////////////////////
+	////////// Glow filter for some extra pizzazz ///////////
+	/////////////////////////////////////////////////////////
+	
+	//Filter for the outside glow
+	var filter = g.append('defs').append('filter').attr('id','glow'),
+		feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation','2.5').attr('result','coloredBlur'),
+		feMerge = filter.append('feMerge'),
+		feMergeNode_1 = feMerge.append('feMergeNode').attr('in','coloredBlur'),
+		feMergeNode_2 = feMerge.append('feMergeNode').attr('in','SourceGraphic');
+
+	/////////////////////////////////////////////////////////
+	/////////////// Draw the Circular grid //////////////////
+	/////////////////////////////////////////////////////////
+	
+	//Wrapper for the grid & axes
+	var axisGrid = g.append("g").attr("class", "axisWrapper");
+	
+	//Draw the background circles
+	axisGrid.selectAll(".levels")
+	   .data(d3.range(1,(cfg.levels+1)).reverse())
+	   .enter()
+		.append("circle")
+		.attr("class", "gridCircle")
+		.attr("r", function(d, i){return radius/cfg.levels*d;})
+		.style("fill", "#CDCDCD")
+		.style("stroke", "#CDCDCD")
+		.style("fill-opacity", cfg.opacityCircles)
+		.style("filter" , "url(#glow)");
+
+	//Text indicating at what % each level is
+	axisGrid.selectAll(".axisLabel")
+	   .data(d3.range(1,(cfg.levels+1)).reverse())
+	   .enter().append("text")
+	   .attr("class", "axisLabel")
+	   .attr("x", 4)
+	   .attr("y", function(d){return -d*radius/cfg.levels;})
+	   .attr("dy", "0.4em")
+	   .style("font-size", "10px")
+	   .attr("fill", "#737373")
+	   .text(function(d,i) { return Format(maxValue * d/cfg.levels); });
+
+	/////////////////////////////////////////////////////////
+	//////////////////// Draw the axes //////////////////////
+	/////////////////////////////////////////////////////////
+	
+	//Create the straight lines radiating outward from the center
+	var axis = axisGrid.selectAll(".axis")
+		.data(allAxis)
+		.enter()
+		.append("g")
+		.attr("class", "axis");
+	//Append the lines
+	axis.append("line")
+		.attr("x1", 0)
+		.attr("y1", 0)
+		.attr("x2", function(d, i){ return rScale(maxValue*1.1) * Math.cos(angleSlice*i - Math.PI/2); })
+		.attr("y2", function(d, i){ return rScale(maxValue*1.1) * Math.sin(angleSlice*i - Math.PI/2); })
+		.attr("class", "line")
+		.style("stroke", "white")
+		.style("stroke-width", "2px");
+
+	//Append the labels at each axis
+	axis.append("text")
+		.attr("class", "legend")
+		.style("font-size", "11px")
+		.attr("text-anchor", "middle")
+		.attr("dy", "0.35em")
+		.attr("x", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2); })
+		.attr("y", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2); })
+		.text(function(d){return d})
+		.call(wrap, cfg.wrapWidth);
+
+	/////////////////////////////////////////////////////////
+	///////////// Draw the radar chart blobs ////////////////
+	/////////////////////////////////////////////////////////
+	
+	//The radial line function
+	var radarLine = d3.svg.line.radial()
+		.interpolate("linear-closed")
+		.radius(function(d) { return rScale(d.value); })
+		.angle(function(d,i) {	return i*angleSlice; });
+		
+	if(cfg.roundStrokes) {
+		radarLine.interpolate("cardinal-closed");
+	}
+				
+	//Create a wrapper for the blobs	
+	var blobWrapper = g.selectAll(".radarWrapper")
+		.data(data)
+		.enter().append("g")
+		.attr("class", "radarWrapper");
+			
+	//Append the backgrounds	
+	blobWrapper
+		.append("path")
+		.attr("class", "radarArea")
+		.attr("d", function(d,i) { return radarLine(d); })
+		.style("fill", function(d,i) { return cfg.color(i); })
+		.style("fill-opacity", cfg.opacityArea)
+		.on('mouseover', function (d,i){
+			//Dim all blobs
+			d3.selectAll(".radarArea")
+				.transition().duration(200)
+				.style("fill-opacity", 0.1); 
+			//Bring back the hovered over blob
+			d3.select(this)
+				.transition().duration(200)
+				.style("fill-opacity", 0.7);	
+		})
+		.on('mouseout', function(){
+			//Bring back all blobs
+			d3.selectAll(".radarArea")
+				.transition().duration(200)
+				.style("fill-opacity", cfg.opacityArea);
+		});
+		
+	//Create the outlines	
+	blobWrapper.append("path")
+		.attr("class", "radarStroke")
+		.attr("d", function(d,i) { return radarLine(d); })
+		.style("stroke-width", cfg.strokeWidth + "px")
+		.style("stroke", function(d,i) { return cfg.color(i); })
+		.style("fill", "none")
+		.style("filter" , "url(#glow)");		
+	
+	//Append the circles
+	blobWrapper.selectAll(".radarCircle")
+		.data(function(d,i) { return d; })
+		.enter().append("circle")
+		.attr("class", "radarCircle")
+		.attr("r", cfg.dotRadius)
+		.attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); })
+		.attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); })
+		.style("fill", function(d,i,j) { return cfg.color(j); })
+		.style("fill-opacity", 0.8);
+
+	/////////////////////////////////////////////////////////
+	//////// Append invisible circles for tooltip ///////////
+	/////////////////////////////////////////////////////////
+	
+	//Wrapper for the invisible circles on top
+	var blobCircleWrapper = g.selectAll(".radarCircleWrapper")
+		.data(data)
+		.enter().append("g")
+		.attr("class", "radarCircleWrapper");
+		
+	//Append a set of invisible circles on top for the mouseover pop-up
+	blobCircleWrapper.selectAll(".radarInvisibleCircle")
+		.data(function(d,i) { return d; })
+		.enter().append("circle")
+		.attr("class", "radarInvisibleCircle")
+		.attr("r", cfg.dotRadius*1.5)
+		.attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); })
+		.attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); })
+		.style("fill", "none")
+		.style("pointer-events", "all")
+		.on("mouseover", function(d,i) {
+			newX =  parseFloat(d3.select(this).attr('cx')) - 10;
+			newY =  parseFloat(d3.select(this).attr('cy')) - 10;
+					
+			tooltip
+				.attr('x', newX)
+				.attr('y', newY)
+				.text(Format(d.value))
+				.transition().duration(200)
+				.style('opacity', 1);
+		})
+		.on("mouseout", function(){
+			tooltip.transition().duration(200)
+				.style("opacity", 0);
+		});
+		
+	//Set up the small tooltip for when you hover over a circle
+	var tooltip = g.append("text")
+		.attr("class", "tooltip")
+		.style("opacity", 0);
+	
+	/////////////////////////////////////////////////////////
+	/////////////////// Helper Function /////////////////////
+	/////////////////////////////////////////////////////////
+
+	//Taken from http://bl.ocks.org/mbostock/7555321
+	//Wraps SVG text	
+	function wrap(text, width) {
+	  text.each(function() {
+		var text = d3.select(this),
+			words = text.text().split(/\s+/).reverse(),
+			word,
+			line = [],
+			lineNumber = 0,
+			lineHeight = 1.4, // ems
+			y = text.attr("y"),
+			x = text.attr("x"),
+			dy = parseFloat(text.attr("dy")),
+			tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em");
+			
+		while (word = words.pop()) {
+		  line.push(word);
+		  tspan.text(line.join(" "));
+		  if (tspan.node().getComputedTextLength() > width) {
+			line.pop();
+			tspan.text(line.join(" "));
+			line = [word];
+			tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
+		  }
+		}
+	  });
+	}//wrap	
+	
+},
+    overview() {
+       /* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */
+      
+			////////////////////////////////////////////////////////////// 
+			//////////////////////// Set-Up ////////////////////////////// 
+			////////////////////////////////////////////////////////////// 
+
+			var margin = {top: 50, right: 50, bottom: 50, left: 50},
+				width = Math.min(420, window.innerWidth - 10) - margin.left - margin.right,
+				height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
+					
+			////////////////////////////////////////////////////////////// 
+			////////////////////////// Data ////////////////////////////// 
+			////////////////////////////////////////////////////////////// 
+
+			var data = [
+					  [
+						{axis:"KNN",value:1},
+            {axis:"RF",value:0.30},
+            {axis:"Alg3",value:0.55},
+            {axis:"Alg4",value:0.68},
+            {axis:"Alg5",value:0.22},
+            {axis:"Alg6",value:0.28},
+            {axis:"Alg7",value:0.55},
+            {axis:"Alg9",value:0.68},
+            {axis:"Alg9",value:0.22},
+            {axis:"Alg10",value:0.28},
+            ],[
+						{axis:"KNN",value:0.05},
+            {axis:"RF",value:0.18},
+            {axis:"Alg3",value:0.25},
+            {axis:"Alg4",value:0.28},
+            {axis:"Alg5",value:0.22},
+            {axis:"Alg6",value:0.18},
+            {axis:"Alg7",value:0.45},
+            {axis:"Alg9",value:0.18},
+            {axis:"Alg9",value:0.22},
+            {axis:"Alg10",value:0.18},
+					  ],
+					];
+			////////////////////////////////////////////////////////////// 
+			//////////////////// Draw the Chart ////////////////////////// 
+			////////////////////////////////////////////////////////////// 
+
+			var color = d3.scale.ordinal()
+				.range(["#EDC951","#CC333F","#00A0B0"]);
+				
+			var radarChartOptions = {
+			  w: width,
+			  h: height,
+			  margin: margin,
+			  maxValue: 0.5,
+			  levels: 5,
+			  roundStrokes: true,
+			  color: color
+			};
+			//Call function to draw the Radar chart
+			this.RadarChart("#overview", data, radarChartOptions);
+    },
     draw () {
       // Clear Heatmap first
       var svg = d3.select("#overview");
@@ -47,7 +378,6 @@ export default {
         width = widthinter,
         height = heightinter,
         maxBarHeight = height / 2 - (margin + 70);
-
       var innerRadius = 0.1 * maxBarHeight; // innermost circle
 
       var svg = d3.select('#overview')
@@ -595,11 +925,11 @@ export default {
   mounted () {
     EventBus.$on('updateFlagKNN', data => { this.FlagKNN = data })
     EventBus.$on('updateFlagRF', data => { this.FlagRF = data })
-    EventBus.$on('updateFlagKNN', this.draw)
-    EventBus.$on('updateFlagRF', this.draw)
+    EventBus.$on('updateFlagKNN', this.overview)
+    EventBus.$on('updateFlagRF', this.overview)
     EventBus.$on('sendParameters', data => { this.storeParameters = data })
     EventBus.$on('updateActiveModels', data => { this.storeActiveModels = data })
-    EventBus.$on('updateActiveModels', this.draw)
+    EventBus.$on('updateActiveModels', this.overview)
     //EventBus.$on('updateActiveModels', this.drawEncodings)
 
     EventBus.$on('Responsive', data => {
@@ -611,7 +941,7 @@ export default {
     EventBus.$on('resetViews', this.reset)
 
     EventBus.$on('alternateFlagLock', this.updateFlags)
-    EventBus.$on('alternateFlagLock', this.draw)
+    EventBus.$on('alternateFlagLock', this.overview)
   }
 
 }
@@ -688,4 +1018,8 @@ export default {
 .filled {
   fill: url(#mainGradient);
 }
+
+#overview {
+  min-height: 430px;
+}
 </style>

frontend/src/components/PerMetricBarChart.vue

@@ -26,8 +26,8 @@ export default {
       } else {
         metricsPerModelSel = this.SelBarChartMetrics
       }
-      var width = this.WH[0]*3 // interactive visualization
-      var height = this.WH[1]/2 // interactive visualization
+      var width = this.WH[0]*6.5 // interactive visualization
+      var height = this.WH[1]*0.5 // interactive visualization
           var trace1 = {
           x: ['Acc','F1s','Pre','Rec','Jac'], 
           y: metricsPerModel, 

frontend/src/components/PredictionsSpace.vue

@@ -1,4 +1,7 @@
 <template>
+<div>
+  <b-row class="md-3">
+    <b-col cols="12">
       <div>Projection Selection: <select id="selectBarChartPred" @change="selectVisualRepresentationPred()">
         <option value="mds" selected>MDS Projection</option>
         <option value="tsne">t-SNE Projection</option>
@@ -6,6 +9,9 @@
       </select>
       <div id="OverviewPredPlotly" class="OverviewPredPlotly"></div>
       </div>
+    </b-col>
+  </b-row>
+</div>
 </template>
 
 <script>
@@ -21,7 +27,7 @@ export default {
       representationDef: 'mds',
       representationSelection: 'mds',
       colorsValues: ['#6a3d9a','#b15928','#e31a1c'],
-      responsiveWidthHeight: []
+      WH: []
     }
   },
   methods: {
@@ -37,8 +43,8 @@ export default {
        Plotly.purge('OverviewPredPlotly')
 
       // responsive visualization
-      var width = this.responsiveWidthHeight[0]*3
-      var height = this.responsiveWidthHeight[1]*1.48 
+      var width = this.WH[0]*6.5 // interactive visualization
+      var height = this.WH[1]*1.22 // interactive visualization
 
       var target_names = JSON.parse(this.PredictionsData[4])
       const XandYCoordinatesMDS = JSON.parse(this.PredictionsData[8])
@@ -124,7 +130,7 @@ export default {
           IDs.push(i)
         }
         result.ID = IDs
-        console.log(result)
+
         var traces = []
 
         for (let i = 0; i < target_names.length; i++) {

frontend/src/components/Provenance.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="squares-container">
+        <div class="squares-container" style="min-height: 307px;">
             <canvas id="main-canvas" ></canvas>
         </div>
     </div>
@@ -42,7 +42,7 @@ export default {
     provenance () {
       var canvas = document.getElementById("main-canvas");
       var width = this.WH[0]*9 // interactive visualization
-      var height = this.WH[1]*0.95 // interactive visualization
+      var height = this.WH[1]*0.5 // interactive visualization
 
       var flagKNN = 0
       var flagRF = 0

frontend/src/components/ScatterPlot.vue

@@ -151,8 +151,8 @@ export default {
           }
         
         }]
-        var width = this.WH[0]*3 // interactive visualization
-        var height = this.WH[1]*1.5 // interactive visualization
+        var width = this.WH[0]*6.5 // interactive visualization
+        var height = this.WH[1]*1.22 // interactive visualization
         layout = {
           title: 'Models Performance (MDS)',
           xaxis: {
@@ -250,8 +250,8 @@ export default {
           }
         
         }]
-        var width = this.WH[0]*3 // interactive visualization
-        var height = this.WH[1]*1.5 // interactive visualization
+        var width = this.WH[0]*6.5 // interactive visualization
+        var height = this.WH[1]*1 // interactive visualization
         layout = {
           title: 'Models Performance (UMAP)',
           xaxis: {

frontend/src/components/SlidersController.vue

@@ -1,10 +1,15 @@
 <template>
     <div id="WrapSliders">
-                <p>Acc<b-form-slider ref="basic1" v-model="basicValue1" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue1 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met6<b-form-slider ref="basic1" v-model="basicValue6" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue6 }}%</p>
-                <p>F1s<b-form-slider ref="basic2" v-model="basicValue2" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider >{{ basicValue2 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met7<b-form-slider ref="basic1" v-model="basicValue7" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue7 }}%</p>
-                <p>Pre<b-form-slider ref="basic3" v-model="basicValue3" :min="0" :max="100" trigger-change-event @slide-start="slideStart"  @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue3 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met8<b-form-slider ref="basic1" v-model="basicValue8" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue8 }}%</p>
-                <p>Rec<b-form-slider ref="basic4" v-model="basicValue4" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue4 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met9<b-form-slider ref="basic1" v-model="basicValue9" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue9 }}%</p>
-                <p>Jac<b-form-slider ref="basic5" v-model="basicValue5" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue5 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Me10<b-form-slider ref="basic1" v-model="basicValue10" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue10 }}%</p>
+                <p>(1) Accuracy<b-form-slider ref="basic1" v-model="basicValue1" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue1 }}%</p>
+                <p>(2) F1-Score<b-form-slider ref="basic2" v-model="basicValue2" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider >{{ basicValue2 }}%</p>
+                <p>(3) Precision<b-form-slider ref="basic3" v-model="basicValue3" :min="0" :max="100" trigger-change-event @slide-start="slideStart"  @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue3 }}%</p>
+                <p>(4) Recall<b-form-slider ref="basic4" v-model="basicValue4" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue4 }}%</p>
+                <p>(5) Jaccard Similarity<b-form-slider ref="basic5" v-model="basicValue5" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue5 }}%</p>
+                <p>(6) Metric 6<b-form-slider ref="basic1" v-model="basicValue6" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue6 }}%</p>
+                <p>(7) Metric 7<b-form-slider ref="basic1" v-model="basicValue7" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue7 }}%</p>
+                <p>(8) Metric 8<b-form-slider ref="basic1" v-model="basicValue8" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue8 }}%</p>
+                <p>(9) Metric 9<b-form-slider ref="basic1" v-model="basicValue9" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue9 }}%</p>
+                <p>(10) Metric 10<b-form-slider ref="basic1" v-model="basicValue10" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue10 }}%</p>
     </div>
 </template>
 
@@ -50,9 +55,11 @@ p {
     margin: 0 !important;
     padding: 0 !important;
 }
-.slider.slider-horizontal {
-    width: 150px !important;
-}
+
+/*.slider.slider-horizontal {
+    width: 300px !important;
+}*/
+
 .slider-handle {
     background: black;
 }

frontend/src/components/ToggleSelection.vue

@@ -1,11 +1,9 @@
 <template>
-    <div>
     <div id="toggles" style="visibility:hidden">
         Univariate Selection:<input type="checkbox" id="toggle-uni" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
         Permutation Importance:<input type="checkbox" id="toggle-per" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
         Feature Accuracy Importance:<input type="checkbox" id="toggle-fi" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
     </div>
-    </div>
 </template>
 
 <script>

run.py

@@ -189,9 +189,6 @@ def RetrieveFileName():
     scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}
     #scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted', 'neg_log_loss': 'neg_log_loss', 'r2': 'r2', 'neg_mean_absolute_error': 'neg_mean_absolute_error', 'neg_mean_absolute_error': 'neg_mean_absolute_error'}
 
-    global NumberofscoringMetrics
-    NumberofscoringMetrics = len(scoring)
-
     global loopFeatures
     loopFeatures = 2
 
@@ -517,7 +514,7 @@ def GridSearchForModels(XData, yData, clf, params, eachAlgor, factors, Algorithm
     sumperModel = []
     for index, row in metrics.iterrows():
         rowSum = 0
-        lengthFactors = NumberofscoringMetrics
+        lengthFactors = len(scoring)
         for loop,elements in enumerate(row):
             lengthFactors = lengthFactors -  1 + factors[loop]
             rowSum = elements*factors[loop] + rowSum