fixed reset

cachedir/joblib/run/GridSearchForModels/0630790fa81d5b91e3195bd86de458e2/metadata.json

@@ -0,0 +1 @@
+{"duration": 270.6007800102234, "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": "[0, 1, 0, 1, 1]", "AlgorithmsIDsEnd": "0"}}

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

@@ -1 +1 @@
-{"duration": 307.1607220172882, "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": 270.70482993125916, "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/3cc262c077a39d0c54e4037251751202/metadata.json

@@ -0,0 +1 @@
+{"duration": 367.6226439476013, "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": "[0.46, 1, 0.3, 1, 1]", "AlgorithmsIDsEnd": "576"}}

cachedir/joblib/run/GridSearchForModels/7cd0b89df0e27ae606b59399cc748534/metadata.json

@@ -0,0 +1 @@
+{"duration": 279.6587002277374, "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": "[0.46, 1, 0.3, 1, 1]", "AlgorithmsIDsEnd": "0"}}

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

@@ -1 +0,0 @@
-{"duration": 393.25071001052856, "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/cce4a92f4cbd0e736018f002fd195967/metadata.json

@@ -0,0 +1 @@
+{"duration": 372.7683711051941, "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": "[0, 1, 0, 1, 1]", "AlgorithmsIDsEnd": "576"}}

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

@@ -0,0 +1 @@
+{"duration": 367.4382128715515, "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/func_code.py

@@ -1,4 +1,4 @@
-# first line: 454
+# first line: 464
 @memory.cache
 def GridSearchForModels(XData, yData, clf, params, eachAlgor, factors, AlgorithmsIDsEnd):
 

frontend/src/components/AlgorithmHyperParam.vue

@@ -23,6 +23,9 @@ export default {
     }
   },
   methods: {
+    reset () {
+      d3.selectAll("#PCP > *").remove(); 
+    },
     PCPView () {
       d3.selectAll("#PCP > *").remove(); 
       if (this.selAlgorithm != '') {
@@ -87,6 +90,9 @@ export default {
     EventBus.$on('emittedEventCallingModel', this.PCPView)
     EventBus.$on('ResponsiveandChange', this.PCPView)
     EventBus.$on('emittedEventCallingModelClear', this.clear)
+
+    // reset view
+    EventBus.$on('resetViews', this.reset)
   }
 }
 </script>

frontend/src/components/Algorithms.vue

@@ -31,13 +31,16 @@ export default {
       algorithm2: [],
       chart: '',
       flagEmpty: 0,
-      ActiveModels: []
+      ActiveModels: [],
     }
   },
   methods: {
+    reset () {
+      d3.selectAll("#exploding_boxplot > *").remove()
+    },
     boxplot () {
       // reset the boxplot
-      d3.selectAll("#exploding_boxplot > *").remove(); 
+      d3.selectAll("#exploding_boxplot > *").remove()
 
       // retrieve models ID
       const Algor1IDs = this.PerformanceAllModels[0]
@@ -81,6 +84,7 @@ export default {
       const previousColor = ['#8dd3c7','#8da0cb']
       // check for brushing
       var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent')
+      var overall = document.getElementsByClassName('overall')
       this.brushStatus = document.getElementsByClassName('extent')
       // on clicks
       
@@ -93,7 +97,7 @@ export default {
           allPoints[i].style.fill = previousColor[0]
           allPoints[i].style.opacity = '1.0'
         } 
-      
+
         if (flagEmptyKNN == 0) {
           flagEmptyKNN = 1
         } else {
@@ -116,11 +120,18 @@ export default {
         } else {
           flagEmptyRF = 0
         }
-
+      
         EventBus.$emit('updateFlagRF', flagEmptyRF)
         EventBus.$emit('PCPCall', 'RF')
         EventBus.$emit('updateBarChart', [])
       }
+
+      overall[0].ondblclick = function () {
+        flagEmptyKNN = 0
+        flagEmptyRF = 0
+        EventBus.$emit('alternateFlagLock', flagEmptyKNN)
+      }
+
       // check if brushed through all boxplots and not only one at a time
       const myObserver = new ResizeObserver(entries => {
         EventBus.$emit('brusheAllOn')
@@ -337,6 +348,9 @@ export default {
     EventBus.$on('emittedEventCallingSelectedALgorithm', data => {
       this.selectedAlgorithm = data})
     EventBus.$on('brusheAllOn', this.brushActivationAll)
+
+    // reset the views
+    EventBus.$on('resetViews', this.reset)
   }
 }
 </script>

frontend/src/components/BalancePredictions.vue

@@ -22,7 +22,11 @@
             }
         },
         methods: {
-            Balance () {
+          reset () {
+            var svg = d3.select("#my_dataviz");
+            svg.selectAll("*").remove();
+          },
+          Balance () {
             // erase histogram
             var svg = d3.select("#my_dataviz");
             svg.selectAll("*").remove();
@@ -191,28 +195,31 @@
 
             // Function to compute density
             function kernelDensityEstimator(kernel, X) {
-            return function(V) {
+              return function(V) {
                 return X.map(function(x) {
-                return [x, d3.mean(V, function(v) { return kernel(x - v); })];
+                  return [x, d3.mean(V, function(v) { return kernel(x - v); })];
                 });
-            };
+              };
             }
             function kernelEpanechnikov(k) {
-            return function(v) {
+              return function(v) {
-                return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
+                  return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
-            };
+              };
-            }
             }
+          }
         },
         mounted () {
-            EventBus.$on('emittedEventCallingBalanceView', data => { this.resultsfromOverview = data} )
+          EventBus.$on('emittedEventCallingBalanceView', data => { this.resultsfromOverview = data} )
-            EventBus.$on('emittedEventCallingBalanceView', this.Balance)
+          EventBus.$on('emittedEventCallingBalanceView', this.Balance)
-            EventBus.$on('UpdateBalanceView', data => { this.newResultsFromSelection = data} )
+          EventBus.$on('UpdateBalanceView', data => { this.newResultsFromSelection = data} )
-            EventBus.$on('UpdateBalanceView', this.Balance)
+          EventBus.$on('UpdateBalanceView', this.Balance)
-            EventBus.$on('Responsive', data => {
+          EventBus.$on('Responsive', data => {
-            this.responsiveWidthHeight = data})
+          this.responsiveWidthHeight = data})
-            EventBus.$on('ResponsiveandChange', data => {
+          EventBus.$on('ResponsiveandChange', data => {
-            this.responsiveWidthHeight = data})
+          this.responsiveWidthHeight = data})
+
+          // reset view
+          EventBus.$on('resetViews', this.reset)
         }
     }
 </script>

frontend/src/components/BarChart.vue

@@ -25,167 +25,171 @@ export default {
   },
   methods: {
     BarChartView () {
-        const PerClassMetrics = JSON.parse(this.PerformanceResults[2])
+      const PerClassMetrics = JSON.parse(this.PerformanceResults[2])
-        const PerClassMetrics2 = JSON.parse(this.PerformanceResults[10])
+      const PerClassMetrics2 = JSON.parse(this.PerformanceResults[10])
 
-        var KNNModels = []
+      var KNNModels = []
-        var RFModels = []
+      var RFModels = []
-        
+      
-        if (this.modelsSelectedinBar.length != 0){
+      if (this.modelsSelectedinBar.length != 0){
-            for (let i=0; i<this.algorithmsinBar.length;i++) {
+          for (let i=0; i<this.algorithmsinBar.length;i++) {
-                if (this.algorithmsinBar[i] === "KNN") {
+              if (this.algorithmsinBar[i] === "KNN") {
-                    KNNModels.push(JSON.parse(this.modelsSelectedinBar[i]))
+                  KNNModels.push(JSON.parse(this.modelsSelectedinBar[i]))
-                } else {
+              } else {
-                    RFModels.push(JSON.parse(this.modelsSelectedinBar[i]) - this.KNNModels)
+                  RFModels.push(JSON.parse(this.modelsSelectedinBar[i]) - this.KNNModels)
-                }
+              }
-            }
+          }
-        }
+      }
-        
+      
-        var target_names
+      var target_names
-        target_names = Object.keys(PerClassMetrics)
+      target_names = Object.keys(PerClassMetrics)
 
-        var sum = []
+      var sum = []
-        var temp = 0
+      var temp = 0
-        var temp2 = 0
+      var temp2 = 0
-        for (var i=0;i<target_names.length;i++) {
+      for (var i=0;i<target_names.length;i++) {
-            temp = 0
+          temp = 0
-            temp2 = 0
+          temp2 = 0
-            for (var j=0;j<Object.keys(PerClassMetrics[target_names[i]]).length;j++){
+          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']+Object.values(PerClassMetrics)[i][j]['precision']+Object.values(PerClassMetrics)[i][j]['recall'])/3
-            }
+          }
-            temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length
+          temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length
-            sum.push(temp)
+          sum.push(temp)
-            for (var k=0;k<Object.keys(PerClassMetrics2[target_names[i]]).length;k++){
+          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']+Object.values(PerClassMetrics2)[i][k]['precision']+Object.values(PerClassMetrics2)[i][k]['recall'])/3
-            }
+          }
-            temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length
+          temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length
-            sum.push(temp2)
+          sum.push(temp2)
-        }
+      }
 
-        var sumLine = []
+      var sumLine = []
-        var temp = 0
+      var temp = 0
-        var temp2 = 0
+      var temp2 = 0
-        for (var i=0;i<target_names.length;i++) {
+      for (var i=0;i<target_names.length;i++) {
-            temp = 0
+          temp = 0
-            temp2 = 0
+          temp2 = 0
 
-            if (KNNModels.length == 0) {
+          if (KNNModels.length == 0) {
-                for (var j=0;j<Object.keys(PerClassMetrics[target_names[i]]).length;j++){
+              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']+Object.values(PerClassMetrics)[i][j]['precision']+Object.values(PerClassMetrics)[i][j]['recall'])/3
-                }
+              }
-                temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length
+              temp = temp/Object.keys(PerClassMetrics[target_names[i]]).length
-            } else {
+          } else {
-                for (var j=0;j<KNNModels.length;j++){
+              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][KNNModels[j]]['f1-score']+Object.values(PerClassMetrics)[i][KNNModels[j]]['precision']+Object.values(PerClassMetrics)[i][KNNModels[j]]['recall'])/3
-                }
+              }
-                temp = temp/KNNModels.length
+              temp = temp/KNNModels.length
-            }
+          }
-            sumLine.push(temp)
+          sumLine.push(temp)
 
-            if (RFModels.length == 0) {
+          if (RFModels.length == 0) {
-                for (var k=0;k<Object.keys(PerClassMetrics2[target_names[i]]).length;k++){
+              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']+Object.values(PerClassMetrics2)[i][k]['precision']+Object.values(PerClassMetrics2)[i][k]['recall'])/3
-                }
+              }
-                temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length
+              temp2 = temp2/Object.keys(PerClassMetrics2[target_names[i]]).length
-            } else {
+          } else {
-                for (var k=0;k<RFModels.length;k++){
+              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][RFModels[k]]['f1-score']+Object.values(PerClassMetrics2)[i][RFModels[k]]['precision']+Object.values(PerClassMetrics2)[i][RFModels[k]]['recall'])/3
-                }
+              }
-                temp2 = temp2/RFModels.length
+              temp2 = temp2/RFModels.length
-            }
+          }
-            sumLine.push(temp2)
+          sumLine.push(temp2)
-        }
+      }
-        Plotly.purge('barChart')
+      Plotly.purge('barChart')
-        
+      
-        var layout = {
+      var layout = {
-        autosize: true,
+      autosize: true,
-        barmode: 'group',
+      barmode: 'group',
-        width: this.WH[0]*3,
+      width: this.WH[0]*3,
-        height: this.WH[1],
+      height: this.WH[1],
-            xaxis: {
+          xaxis: {
-                title: 'Algorithm',
+              title: 'Algorithm',
-                type:"category",
+              type:"category",
-                showticklabels: true,
+              showticklabels: true,
-                tickangle: 'auto',
+              tickangle: 'auto',
-                exponentformat: 'e',
+              exponentformat: 'e',
-                showexponent: 'all'
+              showexponent: 'all'
-            },
+          },
-            yaxis: {
+          yaxis: {
-                title: 'Per Class Performance Metrics',
+              title: 'Per Class Performance Metrics',
-                titlefont: {
+              titlefont: {
-                family: 'Arial, sans-serif',
+              family: 'Arial, sans-serif',
-                size: 18,
+              size: 18,
-                color: 'grey'
+              color: 'grey'
-                }
+              }
-            },
+          },
-            xaxis2: {
+          xaxis2: {
-                overlaying: 'x',
+              overlaying: 'x',
-                type:"category",
+              type:"category",
-                showticklabels: true,
+              showticklabels: true,
-                tickangle: 'auto',
+              tickangle: 'auto',
-                exponentformat: 'e',
+              exponentformat: 'e',
-                showexponent: 'all'
+              showexponent: 'all'
-            },
+          },
-        margin: {
+      margin: {
-            l: 40,
+          l: 40,
-            r: 0,
+          r: 0,
-            b: 40,
+          b: 40,
-            t: 25,
+          t: 25,
-            pad: 0
+          pad: 0
-            }
+          }
-        }
+      }
-            var traces = []
+          var traces = []
-            var tracesSel = []
+          var tracesSel = []
-            var data = []
+          var data = []
-           
+          
-            for (var i = 0; i < target_names.length; i++) {
+          for (var i = 0; i < target_names.length; i++) {
-                traces[i] = {
+              traces[i] = {
-                    x: ['KNN', 'RF'],
+                  x: ['KNN', 'RF'],
-                    y: [sum[i+i],sum[i+i+1]],
+                  y: [sum[i+i],sum[i+i+1]],
-                    name: target_names[i],
+                  name: target_names[i],
-                    opacity: 0.5,
+                  opacity: 0.5,
-                    marker: {
+                  marker: {
-                        opacity: 0.5,
+                      opacity: 0.5,
-                        color: this.colorsValues[i]
+                      color: this.colorsValues[i]
-                    },
+                  },
-                    type: 'bar'
+                  type: 'bar'
-                    };
+                  };
-                tracesSel[i] = {
+              tracesSel[i] = {
-                    type: 'bar',
+                  type: 'bar',
-                    x: ['KNN', 'RF'],
+                  x: ['KNN', 'RF'],
-                    y: [sumLine[i+i],sumLine[i+i+1]],
+                  y: [sumLine[i+i],sumLine[i+i+1]],
-                    name: target_names[i]+' (Sel)',
+                  name: target_names[i]+' (Sel)',
-                    xaxis: 'x2',
+                  xaxis: 'x2',
-                    mode: 'markers',
+                  mode: 'markers',
-                    marker: {
+                  marker: {
-                        opacity: 1.0,
+                      opacity: 1.0,
-                        color: this.colorsValues[i],
+                      color: this.colorsValues[i],
-                    },
+                  },
-                    width: [0.1, 0.1]
+                  width: [0.1, 0.1]
-                    };
+                  };
-                    data.push(traces[i])
+                  data.push(traces[i])
-                    data.push(tracesSel[i])
+                  data.push(tracesSel[i])
-            }
+          }
-            Plotly.newPlot('barChart', data, layout)
+          Plotly.newPlot('barChart', data, layout)
-        },
+      },
-        reset () 
+      reset () 
-        {
+      {
-            Plotly.purge('barChart')
+        setTimeout(() => {
-        }
+          Plotly.purge('barChart')
+        }, 50);
+      }
     },
     mounted() {
-        EventBus.$on('updateBarChartAlgorithm', data => { this.algorithmsinBar = data })
+      EventBus.$on('updateBarChartAlgorithm', data => { this.algorithmsinBar = data })
-        EventBus.$on('updateBarChart', data => { this.modelsSelectedinBar = data })
+      EventBus.$on('updateBarChart', data => { this.modelsSelectedinBar = data })
-        EventBus.$on('updateBarChart', this.BarChartView)
+      EventBus.$on('updateBarChart', this.BarChartView)
-        EventBus.$on('emittedEventCallingBarChart', data => { this.PerformanceResults = data })
+      EventBus.$on('emittedEventCallingBarChart', data => { this.PerformanceResults = data })
-        EventBus.$on('emittedEventCallingBarChart', this.BarChartView)
+      EventBus.$on('emittedEventCallingBarChart', this.BarChartView)
-        EventBus.$on('emittedEventCallingUpdateBarChart', data => { this.ModelsChosen = data })
+      EventBus.$on('emittedEventCallingUpdateBarChart', data => { this.ModelsChosen = data })
-        EventBus.$on('emittedEventCallingUpdateBarChart', this.BarChartView)
+      EventBus.$on('emittedEventCallingUpdateBarChart', this.BarChartView)
-        EventBus.$on('resetViews', this.reset)
+      EventBus.$on('Responsive', data => {
-        EventBus.$on('Responsive', data => {
+          this.WH = data})
-            this.WH = data})
+      EventBus.$on('ResponsiveandChange', data => {
-        EventBus.$on('ResponsiveandChange', data => {
+          this.WH = data})
-            this.WH = data})
+
+      // reset view
+      EventBus.$on('resetViews', this.reset)
     }
 }
 </script>

frontend/src/components/DataSetExecController.vue

@@ -78,6 +78,7 @@ export default {
     },
     reset () {
       EventBus.$emit('reset')
+      EventBus.$emit('alternateFlagLock')
     },
     confirm () {
       EventBus.$emit('ConfirmDataSet')

frontend/src/components/DataSpace.vue

@@ -61,6 +61,9 @@ export default {
     }
   },
   methods: {
+    reset () {
+      Plotly.purge('OverviewDataPlotly')
+    },
     selectAppliedFilter () {
       var representationSelectionDocum = document.getElementById('selectFilterID')
       this.userSelectedFilter = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value
@@ -82,107 +85,106 @@ export default {
       EventBus.$emit('SendProvenance', 'restore')
     },
     scatterPlotDataView () {
-        
+      Plotly.purge('OverviewDataPlotly')
-        Plotly.purge('OverviewDataPlotly')
-
-        // responsive visualization
-        let width = this.responsiveWidthHeight[0]*3 
-        let height = this.responsiveWidthHeight[1]*2.1
-
-        var target_names = JSON.parse(this.dataPoints[0])
-        const XandYCoordinates = JSON.parse(this.dataPoints[1])
-        const DataSet = JSON.parse(this.dataPoints[2])
-        const DataSetY = JSON.parse(this.dataPoints[3])
-        const originalDataLabels = JSON.parse(this.dataPoints[4])
-        var DataSetParse = JSON.parse(DataSet)
-
-        let intData = []
-        if (this.highlightedPoints.length > 0){
-          let removedPuncData = this.highlightedPoints.map(function(x){return x.replace(';', '');})
-          intData = removedPuncData.map(Number)
-        } else {
-          intData = []
-        }
 
-        var result = XandYCoordinates.reduce(function(r, a) {
+      // responsive visualization
-            var id = 0
+      let width = this.responsiveWidthHeight[0]*3 
-            a.forEach(function(s, i) {
+      let height = this.responsiveWidthHeight[1]*2.1
-                var key = i === 0 ? 'Xax' : 'Yax'
 
-                r[key] || (r[key] = []) // if key not found on result object, add the key with empty array as the value
+      var target_names = JSON.parse(this.dataPoints[0])
+      const XandYCoordinates = JSON.parse(this.dataPoints[1])
+      const DataSet = JSON.parse(this.dataPoints[2])
+      const DataSetY = JSON.parse(this.dataPoints[3])
+      const originalDataLabels = JSON.parse(this.dataPoints[4])
+      var DataSetParse = JSON.parse(DataSet)
 
-                r[key].push(s)
+      let intData = []
+      if (this.highlightedPoints.length > 0){
+        let removedPuncData = this.highlightedPoints.map(function(x){return x.replace(';', '');})
+        intData = removedPuncData.map(Number)
+      } else {
+        intData = []
+      }
 
-            })
+      var result = XandYCoordinates.reduce(function(r, a) {
+          var id = 0
+          a.forEach(function(s, i) {
+              var key = i === 0 ? 'Xax' : 'Yax'
 
-            return r
+              r[key] || (r[key] = []) // if key not found on result object, add the key with empty array as the value
-        }, {})
 
-        var IDs = [];
+              r[key].push(s)
 
-        for (let i = 0; i < result.Xax.length; i++) {
-          IDs.push(i)
-        }
-        result.ID = IDs
-        
-        var traces = []
-
-        for (let i = 0; i < target_names.length; i++) {
-
-          const aux_X = result.Xax.filter((item, index) => originalDataLabels[index] == target_names[i]);
-          const aux_Y = result.Yax.filter((item, index) => originalDataLabels[index] == target_names[i]);
-          const aux_ID = result.ID.filter((item, index) => originalDataLabels[index] == target_names[i]);
-
-          var Text = aux_ID.map((item, index) => {
-            let popup = 'Data Point ID: ' + item + '; Details: ' + JSON.stringify(DataSetParse[item])
-            return popup;
-          });
-
-          var Opacity = aux_ID.map((item, index) => {
-            let opac
-            if (intData.length == 0) {
-              opac = 1
-            } else if (intData.indexOf(item) > -1) {
-              opac = 1
-            } else {
-              opac = 0.5
-            }
-            return opac;
-          });
-
-          traces.push({
-            x: aux_X,
-            y: aux_Y,
-            mode: 'markers',
-            name: target_names[i],
-            marker: { color: this.colorsValues[i], line: { color: 'rgb(0, 0, 0)', width: 2 }, opacity: Opacity, size: 12 },
-            hovertemplate: 
-                    "<b>%{text}</b><br><br>" +
-                    "<extra></extra>",
-            text: Text,
           })
-        }
 
-        const layout = {
+          return r
-        title: 'Data Space Projection (t-SNE)',
+      }, {})
-        xaxis: {
+
-            visible: false
+      var IDs = [];
-        },
+
-        yaxis: {
+      for (let i = 0; i < result.Xax.length; i++) {
-            visible: false
+        IDs.push(i)
-        },
+      }
-        dragmode: 'lasso',
+      result.ID = IDs
-        hovermode: "closest",
+      
-        autosize: true,
+      var traces = []
-        width: width,
-        height: height,
-        }
 
-        var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true}
+      for (let i = 0; i < target_names.length; i++) {
 
-        Plotly.newPlot('OverviewDataPlotly', traces, layout, config)
+        const aux_X = result.Xax.filter((item, index) => originalDataLabels[index] == target_names[i]);
+        const aux_Y = result.Yax.filter((item, index) => originalDataLabels[index] == target_names[i]);
+        const aux_ID = result.ID.filter((item, index) => originalDataLabels[index] == target_names[i]);
 
-         this.selectedDataPoints()
+        var Text = aux_ID.map((item, index) => {
+          let popup = 'Data Point ID: ' + item + '; Details: ' + JSON.stringify(DataSetParse[item])
+          return popup;
+        });
+
+        var Opacity = aux_ID.map((item, index) => {
+          let opac
+          if (intData.length == 0) {
+            opac = 1
+          } else if (intData.indexOf(item) > -1) {
+            opac = 1
+          } else {
+            opac = 0.5
+          }
+          return opac;
+        });
+
+        traces.push({
+          x: aux_X,
+          y: aux_Y,
+          mode: 'markers',
+          name: target_names[i],
+          marker: { color: this.colorsValues[i], line: { color: 'rgb(0, 0, 0)', width: 2 }, opacity: Opacity, size: 12 },
+          hovertemplate: 
+                  "<b>%{text}</b><br><br>" +
+                  "<extra></extra>",
+          text: Text,
+        })
+      }
+
+      const layout = {
+      title: 'Data Space Projection (t-SNE)',
+      xaxis: {
+          visible: false
+      },
+      yaxis: {
+          visible: false
+      },
+      dragmode: 'lasso',
+      hovermode: "closest",
+      autosize: true,
+      width: width,
+      height: height,
+      }
+
+      var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true}
+
+      Plotly.newPlot('OverviewDataPlotly', traces, layout, config)
+
+      this.selectedDataPoints()
     },
     selectedDataPoints () {
       const OverviewDataPlotly = document.getElementById('OverviewDataPlotly')
@@ -227,6 +229,9 @@ export default {
       this.responsiveWidthHeight = data})
     EventBus.$on('ResponsiveandChange', data => {
       this.responsiveWidthHeight = data})
+    
+    // reset view
+    EventBus.$on('resetViews', this.reset)
   }
 }
 </script>

frontend/src/components/FinalResultsLinePlot.vue

@@ -41,6 +41,9 @@ export default {
     }
   },
   methods: {
+    reset () {
+      Plotly.purge('LinePlot')
+    },
     LinePlotView () {
       this.NumberofExecutions ++ 
       this.xaxis.push(this.NumberofExecutions)
@@ -289,6 +292,9 @@ export default {
     EventBus.$on('emittedEventCallingLinePlot', data => {
       this.FinalResultsforLinePlot = data})
     EventBus.$on('emittedEventCallingLinePlot', this.LinePlotView)
+
+    // reset the views
+    EventBus.$on('resetViews', this.reset)
   }
 }
 </script>

frontend/src/components/Heatmap.vue

@@ -30,58 +30,61 @@ export default {
     Refresh () {
       EventBus.$emit('SendSelectedFeaturesEvent', '')
     },
+    reset () {
+      var svg = d3.select("#Heatmap");
+      svg.selectAll("*").remove();
+    },
     Heatmap () {
+      // Clear Heatmap first
+      var svg = d3.select("#Heatmap");
+      svg.selectAll("*").remove();
+    
+      var FeaturesAccuracy = JSON.parse(this.GetResultsAll[5])
+      var Features = JSON.parse(this.GetResultsAll[6])
+      var PermImpEli = JSON.parse(this.GetResultsAll[10])
+      var featureUni = JSON.parse(this.GetResultsAll[11])
+      var modelIds = JSON.parse(this.GetResultsAll[13])
+
+      var len2 = modelIds.length
+
+      var maxUni = Math.max.apply(Math, featureUni.map(function(o) { return o.Score; }))
+      var minUni = Math.min.apply(Math, featureUni.map(function(o) { return o.Score; }))
+      let len = Features.length
+      let indicesYAxis = new Array(len)
+      for (let i = 0; i < len; i++) {
+          indicesYAxis[i] = [Features[i]]
+      } 
+      let indicesXAxis = new Array(len)
+      var temp = []
+      for (let i = 0; i < len2; i++) {
+        temp = []
+        temp.push("R")
+        temp.push("Model "+modelIds[i].toString())
+        indicesXAxis[i] = temp
+      }
 
-        // Clear Heatmap first
+      if (this.ModelsIDHeatStack.length != 0) {
-        var svg = d3.select("#Heatmap");
-        svg.selectAll("*").remove();
-      
-        var FeaturesAccuracy = JSON.parse(this.GetResultsAll[5])
-        var Features = JSON.parse(this.GetResultsAll[6])
-        var PermImpEli = JSON.parse(this.GetResultsAll[10])
-        var featureUni = JSON.parse(this.GetResultsAll[11])
-        var modelIds = JSON.parse(this.GetResultsAll[13])
-
-        var len2 = modelIds.length
-
-        var maxUni = Math.max.apply(Math, featureUni.map(function(o) { return o.Score; }))
-        var minUni = Math.min.apply(Math, featureUni.map(function(o) { return o.Score; }))
-        let len = Features.length
-        let indicesYAxis = new Array(len)
-        for (let i = 0; i < len; i++) {
-            indicesYAxis[i] = [Features[i]]
-        } 
-        let indicesXAxis = new Array(len)
-        var temp = []
-        for (let i = 0; i < len2; i++) {
-          temp = []
-          temp.push("R")
-          temp.push("Model "+modelIds[i].toString())
-          indicesXAxis[i] = temp
-        }
-
-        if (this.ModelsIDHeatStack.length != 0) {
 
-            var FeaturesAccuracyNew = []
+          var FeaturesAccuracyNew = []
-            var PermImpEliNew = []
+          var PermImpEliNew = []
-            indicesXAxis = new Array(len)
+          indicesXAxis = new Array(len)
 
-            for (let i = 0; i < modelIds.length; i++) {
+          for (let i = 0; i < modelIds.length; i++) {
-                if (this.ModelsIDHeatStack.includes(modelIds[i])) {
+              if (this.ModelsIDHeatStack.includes(modelIds[i])) {
-                } else {
+              } else {
-                    FeaturesAccuracyNew.push(FeaturesAccuracy[i])
+                  FeaturesAccuracyNew.push(FeaturesAccuracy[i])
-                    PermImpEliNew.push(PermImpEli[i])
+                  PermImpEliNew.push(PermImpEli[i])
-                }
+              }
-            }
+          }
-            FeaturesAccuracy = FeaturesAccuracyNew
+          FeaturesAccuracy = FeaturesAccuracyNew
-            PermImpEli = PermImpEliNew
+          PermImpEli = PermImpEliNew
-            len2 = this.ModelsIDHeatStack.length
+          len2 = this.ModelsIDHeatStack.length
-            for (let i = 0; i < len2; i++) {
+          for (let i = 0; i < len2; i++) {
-                temp = []
+              temp = []
-                temp.push("R")
+              temp.push("R")
-                temp.push("Model "+this.ModelsIDHeatStack[i].toString())
+              temp.push("Model "+this.ModelsIDHeatStack[i].toString())
-                indicesXAxis[i] = temp
+              indicesXAxis[i] = temp
-            }
+          }
         }
 
         temp = []
@@ -139,409 +142,409 @@ export default {
 
     },
     heatmap_display(data, heatmapId) {
-        var cellSize = this.cellSize
+    var cellSize = this.cellSize
-        //##########################################################################
+    //##########################################################################
-        // Patrick.Brockmann@lsce.ipsl.fr
+    // Patrick.Brockmann@lsce.ipsl.fr
-        //##########################################################################
+    //##########################################################################
-        
+    
-        //==================================================
+    //==================================================
-        // References
+    // References
-        // http://bl.ocks.org/Soylent/bbff6cc507dca2f48792
+    // http://bl.ocks.org/Soylent/bbff6cc507dca2f48792
-        // http://bost.ocks.org/mike/selection/
+    // http://bost.ocks.org/mike/selection/
-        // http://bost.ocks.org/mike/join/
+    // http://bost.ocks.org/mike/join/
-        // http://stackoverflow.com/questions/9481497/understanding-how-d3-js-binds-data-to-nodes
+    // http://stackoverflow.com/questions/9481497/understanding-how-d3-js-binds-data-to-nodes
-        // http://bost.ocks.org/mike/miserables/
+    // http://bost.ocks.org/mike/miserables/
-        // http://bl.ocks.org/ianyfchang/8119685
+    // http://bl.ocks.org/ianyfchang/8119685
-
+
-        //==================================================
+    //==================================================
-        var tooltip = d3.select(heatmapId)
+    var tooltip = d3.select(heatmapId)
-            .append("div")
+        .append("div")
-            .style("position", "absolute")
+        .style("position", "absolute")
-            .style("visibility", "hidden");
+        .style("visibility", "hidden");
-
+
-        //==================================================
+    //==================================================
-        // http://bl.ocks.org/mbostock/3680958
+    // http://bl.ocks.org/mbostock/3680958
-       /* function zoom() {
+    /* function zoom() {
-          console.log(d3.event.translate)
+      console.log(d3.event.translate)
-          console.log(d3.event.scale)
+      console.log(d3.event.scale)
-          svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
-        }*/
+    }*/
-
+
-        // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
+    // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
-        const zoom = d3.zoom()
+    const zoom = d3.zoom()
-                            .scaleExtent([0.1, 3]) //zoom limit
+                        .scaleExtent([0.1, 3]) //zoom limit
-                            .on('zoom', () => {
+                        .on('zoom', () => {
-                                svg.attr('transform', d3.event.transform) // updated for d3 v4
+                            svg.attr('transform', d3.event.transform) // updated for d3 v4
-                            })
+                        })
-        //==================================================
+    //==================================================
-        var viewerWidth = $(document).width()/2.2;
+    var viewerWidth = $(document).width()/2.2;
-        var viewerHeight = $(document).height()/5.5;
+    var viewerHeight = $(document).height()/5.5;
-        var viewerPosTop = 125;
+    var viewerPosTop = 125;
-        var viewerPosLeft = 100;
+    var viewerPosLeft = 100;
-
+
-        var legendElementWidth = cellSize * 2;
+    var legendElementWidth = cellSize * 2;
-
+
-        // http://bl.ocks.org/mbostock/5577023
+    // http://bl.ocks.org/mbostock/5577023
-        var colors = colorbrewer.RdYlGn[this.classesNumber];
+    var colors = colorbrewer.RdYlGn[this.classesNumber];
-
+
-        // http://bl.ocks.org/mbostock/3680999
+    // http://bl.ocks.org/mbostock/3680999
-        var svg;
+    var svg;
-
+
-        //==================================================
+    //==================================================
-          var arr = data.data;
+      var arr = data.data;
-          var row_number = arr.length;
+      var row_number = arr.length;
-          var col_number = arr[0].length;
+      var col_number = arr[0].length;
-
+
-          var colorScale = d3.scaleQuantize()
+      var colorScale = d3.scaleQuantize()
-              .domain([0.0, 1.0])
+          .domain([0.0, 1.0])
-              .range(colors);
+          .range(colors);
-
+
-          svg = d3.select(heatmapId).append("svg")
+      svg = d3.select(heatmapId).append("svg")
-              .attr("width", viewerWidth)
+          .attr("width", viewerWidth)
-              .attr("height", viewerHeight)
+          .attr("height", viewerHeight)
-              .call(zoom)
+          .call(zoom)
-                //.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size
+            //.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size
-                .append('svg:g')
+            .append('svg:g')
-                .attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTop + ")");
+            .attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTop + ")");
-
+
-          svg.append('defs')
+      svg.append('defs')
-              .append('pattern')
+          .append('pattern')
-              .attr('id', 'diagonalHatch')
+          .attr('id', 'diagonalHatch')
-              .attr('patternUnits', 'userSpaceOnUse')
+          .attr('patternUnits', 'userSpaceOnUse')
-              .attr('width', 4)
+          .attr('width', 4)
-              .attr('height', 4)
+          .attr('height', 4)
-              .append('path')
+          .append('path')
-              .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
+          .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
-              .attr('stroke', '#000000')
+          .attr('stroke', '#000000')
-              .attr('stroke-width', 1);
+          .attr('stroke-width', 1);
-
+
-          var rowSortOrder = false;
+      var rowSortOrder = false;
-          var colSortOrder = false;
+      var colSortOrder = false;
-
+
-          var rowLabels = svg.append("g")
+      var rowLabels = svg.append("g")
-              .attr("class", "rowLabels")
+          .attr("class", "rowLabels")
-              .selectAll(".rowLabel")
+          .selectAll(".rowLabel")
-              .data(data.index)
+          .data(data.index)
-              .enter().append("text")
+          .enter().append("text")
-              .text(function(d) {
+          .text(function(d) {
-                  return d.count > 1 ? d.join("/") : d;
+              return d.count > 1 ? d.join("/") : d;
-              })
+          })
-              .attr("x", 0)
+          .attr("x", 0)
-              .attr("y", function(d, i) {
+          .attr("y", function(d, i) {
-                  return (i * cellSize);
+              return (i * cellSize);
-              })
+          })
-              .style("text-anchor", "end")
+          .style("text-anchor", "end")
-              .attr("transform", function(d, i) {
+          .attr("transform", function(d, i) {
-                  return "translate(-3," + cellSize / 1.5 + ")";
+              return "translate(-3," + cellSize / 1.5 + ")";
-              })
+          })
-              .attr("class", "rowLabel mono")
+          .attr("class", "rowLabel mono")
-              .attr("id", function(d, i) {
+          .attr("id", function(d, i) {
-                  return "rowLabel_" + i;
+              return "rowLabel_" + i;
-              })
+          })
-              .on('mouseover', function(d, i) {
+          .on('mouseover', function(d, i) {
-                  d3.select('#rowLabel_' + i).classed("hover", true);
+              d3.select('#rowLabel_' + i).classed("hover", true);
-              })
+          })
-              .on('mouseout', function(d, i) {
+          .on('mouseout', function(d, i) {
-                  d3.select('#rowLabel_' + i).classed("hover", false);
+              d3.select('#rowLabel_' + i).classed("hover", false);
-              })
+          })
-              .on("click", function(d, i) {
+          .on("click", function(d, i) {
-                  rowSortOrder = !rowSortOrder;
+              rowSortOrder = !rowSortOrder;
-                  sortByValues("r", i, rowSortOrder);
+              sortByValues("r", i, rowSortOrder);
-                  d3.select("#order").property("selectedIndex", 0);
+              d3.select("#order").property("selectedIndex", 0);
-                  //$("#order").jqxComboBox({selectedIndex: 0});
+              //$("#order").jqxComboBox({selectedIndex: 0});
-              });
+          });
 
-          var colLabels = svg.append("g")
+      var colLabels = svg.append("g")
-              .attr("class", "colLabels")
+          .attr("class", "colLabels")
-              .selectAll(".colLabel")
+          .selectAll(".colLabel")
-              .data(data.columns)
+          .data(data.columns)
-              .enter().append("text")
+          .enter().append("text")
-              .text(function(d) {
+          .text(function(d) {
-                  d.shift();
+              d.shift();
-                  return d.count > 1 ? d.reverse().join("/") : d.reverse();
+              return d.count > 1 ? d.reverse().join("/") : d.reverse();
-              })
+          })
-              .attr("x", 0)
+          .attr("x", 0)
-              .attr("y", function(d, i) {
+          .attr("y", function(d, i) {
-                  return (i * cellSize);
+              return (i * cellSize);
-              })
+          })
-              .style("text-anchor", "left")
+          .style("text-anchor", "left")
-              .style('font-weight',function(d,i){
+          .style('font-weight',function(d,i){
-                  /*if (d[0] === "Average") {
+              /*if (d[0] === "Average") {
-                    return "bold"
+                return "bold"
-                  }*/
+              }*/
-              })
+          })
-              .attr("transform", function(d, i) {
+          .attr("transform", function(d, i) {
-                  return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
+              return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
-              })
+          })
-              .attr("class", "colLabel mono")
+          .attr("class", "colLabel mono")
-              .attr("id", function(d, i) {
+          .attr("id", function(d, i) {
-                  return "colLabel_" + i;
+              return "colLabel_" + i;
-              })
+          })
-              .on('mouseover', function(d, i) {
+          .on('mouseover', function(d, i) {
-                  d3.select('#colLabel_' + i).classed("hover", true);
+              d3.select('#colLabel_' + i).classed("hover", true);
-              })
+          })
-              .on('mouseout', function(d, i) {
+          .on('mouseout', function(d, i) {
-                  d3.select('#colLabel_' + i).classed("hover", false);
+              d3.select('#colLabel_' + i).classed("hover", false);
-              })
+          })
-              .on("click", function(d, i) {
+          .on("click", function(d, i) {
-                  colSortOrder = !colSortOrder;
+              colSortOrder = !colSortOrder;
-                  sortByValues("c", i, colSortOrder);
+              sortByValues("c", i, colSortOrder);
-                  d3.select("#order").property("selectedIndex", 0);
+              d3.select("#order").property("selectedIndex", 0);
-              });
+          });
 
-          var row = svg.selectAll(".row")
+      var row = svg.selectAll(".row")
-              .data(data.data)
+          .data(data.data)
-              .enter().append("g")
+          .enter().append("g")
-              .attr("id", function(d) {
+          .attr("id", function(d) {
-                return d.idx;
+            return d.idx;
-              })
+          })
-              .attr("class", "row");
+          .attr("class", "row");
-          var heatMap = row.selectAll(".cell")
+      var heatMap = row.selectAll(".cell")
-              .data(function(d) {
+          .data(function(d) {
-                  return d;
+              return d;
-              })
+          })
-              .enter().append("svg:rect")
+          .enter().append("svg:rect")
-              .attr("id", function(d, i, j){
+          .attr("id", function(d, i, j){
-                  var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
-                  return k.toString()+i.toString();
+              return k.toString()+i.toString();
-              })
+          })
-              .attr("x", function(d, i) {
+          .attr("x", function(d, i) {
-                  return i * cellSize;
+              return i * cellSize;
-              })
+          })
-              .attr("y", function(d, i, j) {
+          .attr("y", function(d, i, j) {
-                var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+            var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
-                  return k * cellSize;
+              return k * cellSize;
-              })
+          })
-              .attr("rx", 4)
+          .attr("rx", 4)
-              .attr("ry", 4)
+          .attr("ry", 4)
-              .attr("class", function(d, i, j) {
+          .attr("class", function(d, i, j) {
-                  var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
-                  return "cell bordered cr" + k + " cc" + i;
+              return "cell bordered cr" + k + " cc" + i;
-              })
+          })
-              .attr("row", function(d, i, j) {
+          .attr("row", function(d, i, j) {
-                  var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
-                  return k;
+              return k;
-              })
+          })
-              .attr("col", function(d, i, j) {
+          .attr("col", function(d, i, j) {
-                  return i;
+              return i;
-              })
+          })
-              .attr("width", cellSize)
+          .attr("width", cellSize)
-              .attr("height", cellSize)
+          .attr("height", cellSize)
-              .style("fill", function(d) {
+          .style("fill", function(d) {
-                  if (d != null) return colorScale(d);
+              if (d != null) return colorScale(d);
-                  else return "url(#diagonalHatch)";
+              else return "url(#diagonalHatch)";
-              })
+          })
-              .on('mouseover', function(d, i, j) {
+          .on('mouseover', function(d, i, j) {
-                  var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
-                  d3.select('#colLabel_' + i).classed("hover", true);
+              d3.select('#colLabel_' + i).classed("hover", true);
-                  d3.select('#rowLabel_' + k).classed("hover", true);
+              d3.select('#rowLabel_' + k).classed("hover", true);
-                  if (d != null) {
+              if (d != null) {
-                      tooltip.style("visibility", "visible");
+                  tooltip.style("visibility", "visible");
-                      tooltip.html('<div class="heatmap_tooltip">' + d.toFixed(3) + '</div>');
+                  tooltip.html('<div class="heatmap_tooltip">' + d.toFixed(3) + '</div>');
-                  } else
+              } else
-                      tooltip.style("visibility", "hidden");
-              })
-              .on('mouseout', function(d, i, j) {
-                  var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
-                  d3.select('#colLabel_' + i).classed("hover", false);
-                  d3.select('#rowLabel_' + k).classed("hover", false);
                   tooltip.style("visibility", "hidden");
-              })
+          })
-              .on("mousemove", function(d, i) {
+          .on('mouseout', function(d, i, j) {
-                  tooltip.style("top", (d3.mouse(this)[1]+75) + "px").style("left", (d3.mouse(this)[0]+87) + "px");
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
-              })
+              d3.select('#colLabel_' + i).classed("hover", false);
-              .on('click', function(d, i, j) {
+              d3.select('#rowLabel_' + k).classed("hover", false);
-                var rowsExtracted = svg.selectAll(".row")._groups[0]
+              tooltip.style("visibility", "hidden");
-                var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+          })
-                d3.select(this).style("fill", function(d) {
+          .on("mousemove", function(d, i) {
-                if (d3.select(this).style("fill") === "url(\"#diagonalHatch\")"){
+              tooltip.style("top", (d3.mouse(this)[1]+75) + "px").style("left", (d3.mouse(this)[0]+87) + "px");
-                    return colorScale(d)
+          })
+          .on('click', function(d, i, j) {
+            var rowsExtracted = svg.selectAll(".row")._groups[0]
+            var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+            d3.select(this).style("fill", function(d) {
+            if (d3.select(this).style("fill") === "url(\"#diagonalHatch\")"){
+                return colorScale(d)
+            } else {
+                return "url(#diagonalHatch)"
+            }
+            })
+            if (i+1 === j.length) {
+                if(d3.select(this).style("fill") === "url(\"#diagonalHatch\")") {
+                    row.selectAll(".cr"+k).style("fill", "url(#diagonalHatch)")
                 } else {
-                    return "url(#diagonalHatch)"
+                    row.selectAll(".cr"+k).style("fill", function(d) {
+                        return colorScale(d)
+                    })
                 }
-                })
+            }
-                if (i+1 === j.length) {
+            var finalresults = []
-                    if(d3.select(this).style("fill") === "url(\"#diagonalHatch\")") {
+            for (let i = 0; i < rowsExtracted[0].childNodes.length - 1; i++) {
-                        row.selectAll(".cr"+k).style("fill", "url(#diagonalHatch)")
+                var results = []
+                for (let j = 0; j < rowsExtracted.length; j++) {
+                    if (rowsExtracted[j].childNodes[i].style.fill === "url(\"#diagonalHatch\")") {
                     } else {
-                        row.selectAll(".cr"+k).style("fill", function(d) {
+                        results.push(j)
-                            return colorScale(d)
-                        })
-                    }
-                }
-                var finalresults = []
-                for (let i = 0; i < rowsExtracted[0].childNodes.length - 1; i++) {
-                    var results = []
-                    for (let j = 0; j < rowsExtracted.length; j++) {
-                        if (rowsExtracted[j].childNodes[i].style.fill === "url(\"#diagonalHatch\")") {
-                        } else {
-                            results.push(j)
-                        }
                     }
-                    finalresults.push(results)
                 }
-                EventBus.$emit('SendSelectedFeaturesEvent', finalresults)
+                finalresults.push(results)
-              });
+            }
-
+            EventBus.$emit('SendSelectedFeaturesEvent', finalresults)
-          var legend = svg.append("g")
+          });
-              .attr("class", "legend")
-              .attr("transform", "translate(0,-240)")
-              .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")
-              .attr("class", "legendElement");
-
-          legend.append("svg:rect")
-              .attr("x", function(d, i) {
-                  return legendElementWidth * i;
-              })
-              .attr("y", viewerPosTop)
-              .attr("class", "cellLegend bordered")
-              .attr("width", legendElementWidth)
-              .attr("height", cellSize / 2)
-              .style("fill", function(d, i) {
-                  return colors[i];
-              });
 
-          legend.append("text")
+      var legend = svg.append("g")
-              .attr("class", "mono legendElement")
+          .attr("class", "legend")
-              .text(function(d) {
+          .attr("transform", "translate(0,-240)")
-                  return "≥" + Math.round(d * 100) / 100;
+          .selectAll(".legendElement")
-              })
+          .data([0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9])
-              .attr("x", function(d, i) {
+          .enter().append("g")
-                  return legendElementWidth * i;
+          .attr("class", "legendElement");
-              })
+
-              .attr("y", viewerPosTop + cellSize);
+      legend.append("svg:rect")
+          .attr("x", function(d, i) {
+              return legendElementWidth * i;
+          })
+          .attr("y", viewerPosTop)
+          .attr("class", "cellLegend bordered")
+          .attr("width", legendElementWidth)
+          .attr("height", cellSize / 2)
+          .style("fill", function(d, i) {
+              return colors[i];
+          });
 
-          //==================================================
+      legend.append("text")
-          // Change ordering of cells
+          .attr("class", "mono legendElement")
-          function sortByValues(rORc, i, sortOrder) {
+          .text(function(d) {
-              var t = svg.transition().duration(1000);
+              return "≥" + Math.round(d * 100) / 100;
-              var values = [];
+          })
-              var sorted;
+          .attr("x", function(d, i) {
-              d3.selectAll(".c" + rORc + i)
+              return legendElementWidth * i;
-                  .filter(function(d) {
+          })
-                      if (d != null) values.push(d);
+          .attr("y", viewerPosTop + cellSize);
-                      else values.push(-999); // to handle NaN
+
+      //==================================================
+      // Change ordering of cells
+      function sortByValues(rORc, i, sortOrder) {
+          var t = svg.transition().duration(1000);
+          var values = [];
+          var sorted;
+          d3.selectAll(".c" + rORc + i)
+              .filter(function(d) {
+                  if (d != null) values.push(d);
+                  else values.push(-999); // to handle NaN
+              });
+          //console.log(values);		
+          if (rORc == "r") { // sort on cols
+              sorted = d3.range(col_number).sort(function(a, b) {
+                  if (sortOrder) {
+                      return values[b] - values[a];
+                  } else {
+                      return values[a] - values[b];
+                  }
+              });
+              t.selectAll(".cell")
+                  .attr("x", function(d) {
+                      var col = parseInt(d3.select(this).attr("col"));
+                      return sorted.indexOf(col) * cellSize;
                   });
-              //console.log(values);		
+              t.selectAll(".colLabel")
-              if (rORc == "r") { // sort on cols
+                  .attr("y", function(d, i) {
-                  sorted = d3.range(col_number).sort(function(a, b) {
+                      return sorted.indexOf(i) * cellSize;
-                      if (sortOrder) {
+                  })
-                          return values[b] - values[a];
+                  .attr("transform", function(d, i) {
-                      } else {
+                      return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (sorted.indexOf(i) * cellSize) + ")";
-                          return values[a] - values[b];
-                      }
                   });
-                  t.selectAll(".cell")
+          } else { // sort on rows
-                      .attr("x", function(d) {
+              sorted = d3.range(row_number).sort(function(a, b) {
-                          var col = parseInt(d3.select(this).attr("col"));
+                  if (sortOrder) {
-                          return sorted.indexOf(col) * cellSize;
+                      return values[b] - values[a];
-                      });
+                  } else {
-                  t.selectAll(".colLabel")
+                      return values[a] - values[b];
-                      .attr("y", function(d, i) {
+                  }
-                          return sorted.indexOf(i) * cellSize;
+              });
-                      })
+              t.selectAll(".cell")
-                      .attr("transform", function(d, i) {
+                  .attr("y", function(d) {
-                          return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (sorted.indexOf(i) * cellSize) + ")";
+                      var row = parseInt(d3.select(this).attr("row"));
-                      });
+                      return sorted.indexOf(row) * cellSize;
-              } else { // sort on rows
+                  });
-                  sorted = d3.range(row_number).sort(function(a, b) {
+              t.selectAll(".rowLabel")
-                      if (sortOrder) {
+                  .attr("y", function(d, i) {
-                          return values[b] - values[a];
+                      return sorted.indexOf(i) * cellSize;
-                      } else {
+                  })
-                          return values[a] - values[b];
+                  .attr("transform", function(d, i) {
-                      }
+                      return "translate(-3," + cellSize / 1.5 + ")";
                   });
-                  t.selectAll(".cell")
-                      .attr("y", function(d) {
-                          var row = parseInt(d3.select(this).attr("row"));
-                          return sorted.indexOf(row) * cellSize;
-                      });
-                  t.selectAll(".rowLabel")
-                      .attr("y", function(d, i) {
-                          return sorted.indexOf(i) * cellSize;
-                      })
-                      .attr("transform", function(d, i) {
-                          return "translate(-3," + cellSize / 1.5 + ")";
-                      });
               }
           }
 
           //==================================================
           d3.select("#order").on("change", function() {
-        var newOrder = d3.select("#order").property("value");	
+            var newOrder = d3.select("#order").property("value");	
-              this.changeOrder(newOrder, heatmapId);
+            this.changeOrder(newOrder, heatmapId);
           });
 
           //==================================================
           d3.select("#palette")
-              .on("keyup", function() {
+            .on("keyup", function() {
-      var newPalette = d3.select("#palette").property("value");
+              var newPalette = d3.select("#palette").property("value");
-      if (newPalette != null)						// when interfaced with jQwidget, the ComboBox handles keyup event but value is then not available ?
+              if (newPalette != null)						// when interfaced with jQwidget, the ComboBox handles keyup event but value is then not available ?
-                    this.changePalette(newPalette, heatmapId);
+                this.changePalette(newPalette, heatmapId);
-              })
+            })
-              .on("change", function() {
+            .on("change", function() {
-      var newPalette = d3.select("#palette").property("value");
+            var newPalette = d3.select("#palette").property("value");
-                  this.changePalette(newPalette, heatmapId);
+              this.changePalette(newPalette, heatmapId);
-              });
+            });
 
         //==================================================
     },
     changeOrder(newOrder, heatmapId) {
-        var svg = d3.select(heatmapId);
+  var svg = d3.select(heatmapId);
-        var cellSize = this.cellSize
+  var cellSize = this.cellSize
-        var t = svg.transition().duration(1000);
+  var t = svg.transition().duration(1000);
-        if (newOrder == "sortinit_col") { // initial sort on cols (alphabetically if produced like this)
+  if (newOrder == "sortinit_col") { // initial sort on cols (alphabetically if produced like this)
-            t.selectAll(".cell")
+      t.selectAll(".cell")
-                .attr("x", function(d) {
+          .attr("x", function(d) {
-                    var col = parseInt(d3.select(this).attr("col"));
+              var col = parseInt(d3.select(this).attr("col"));
-                    return col * cellSize;
+              return col * cellSize;
-                });
+          });
-            t.selectAll(".colLabel")
+      t.selectAll(".colLabel")
-                .attr("y", function(d, i) {
+          .attr("y", function(d, i) {
-                    return i * cellSize;
+              return i * cellSize;
-                })
+          })
-                .attr("transform", function(d, i) {
+          .attr("transform", function(d, i) {
-                    return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
+              return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
-                });
+          });
-        } else if (newOrder == "sortinit_row") { // initial sort on rows (alphabetically if produced like this)
+  } else if (newOrder == "sortinit_row") { // initial sort on rows (alphabetically if produced like this)
-            t.selectAll(".cell")
+      t.selectAll(".cell")
-                .attr("y", function(d) {
+          .attr("y", function(d) {
-                    var row = parseInt(d3.select(this).attr("row"));
+              var row = parseInt(d3.select(this).attr("row"));
-                    return row * cellSize;
+              return row * cellSize;
-                });
+          });
-            t.selectAll(".rowLabel")
+      t.selectAll(".rowLabel")
-                .attr("y", function(d, i) {
+          .attr("y", function(d, i) {
-                    return i * cellSize;
+              return i * cellSize;
-                })
+          })
-                .attr("transform", function(d, i) {
+          .attr("transform", function(d, i) {
-                    return "translate(-3," + cellSize / 1.5 + ")";
+              return "translate(-3," + cellSize / 1.5 + ")";
-                });
+          });
-        } else if (newOrder == "sortinit_col_row") { // initial sort on rows and cols (alphabetically if produced like this)
+  } else if (newOrder == "sortinit_col_row") { // initial sort on rows and cols (alphabetically if produced like this)
-            t.selectAll(".cell")
+      t.selectAll(".cell")
-                .attr("x", function(d) {
+          .attr("x", function(d) {
-                    var col = parseInt(d3.select(this).attr("col"));
+              var col = parseInt(d3.select(this).attr("col"));
-                    return col * cellSize;
+              return col * cellSize;
-                })
+          })
-                .attr("y", function(d) {
+          .attr("y", function(d) {
-                    var row = parseInt(d3.select(this).attr("row"));
+              var row = parseInt(d3.select(this).attr("row"));
-                    return row * cellSize;
+              return row * cellSize;
-                });
+          });
-            t.selectAll(".colLabel")
+      t.selectAll(".colLabel")
-                .attr("y", function(d, i) {
+          .attr("y", function(d, i) {
-                    return i * cellSize;
+              return i * cellSize;
-                })
+          })
-                .attr("transform", function(d, i) {
+          .attr("transform", function(d, i) {
-                    return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
+              return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
-                });
+          });
-            t.selectAll(".rowLabel")
+      t.selectAll(".rowLabel")
-                .attr("y", function(d, i) {
+          .attr("y", function(d, i) {
-                    return i * cellSize;
+              return i * cellSize;
-                })
+          })
-                .attr("transform", function(d, i) {
+          .attr("transform", function(d, i) {
-                    return "translate(-3," + cellSize / 1.5 + ")";
+              return "translate(-3," + cellSize / 1.5 + ")";
-                });
+          });
         }
     },
     reset () {
@@ -578,6 +581,9 @@ export default {
       EventBus.$on('resetViews', this.reset)
       EventBus.$on('SendSelectedPointsToBrushHeatmap', data => { this.highlighted = data; })
       EventBus.$on('SendSelectedPointsToBrushHeatmap', this.brush)
+
+      // reset the views
+      EventBus.$on('resetViews', this.reset)
     }
 }
 </script>

frontend/src/components/Main.vue

@@ -696,6 +696,7 @@ export default Vue.extend({
         .then(response => {
           console.log('The server side was reset! Done.')
           this.reset = false
+          EventBus.$emit('resetViews')
         })
         .catch(error => {
           console.log(error)
@@ -733,7 +734,10 @@ export default Vue.extend({
       axios.post(path, postData, axiosConfig)
         .then(response => {
           console.log('The client send the new factors! Done.')
-          this.RetrieveNewColors()
+          // this is if we need to change the factors even before models are there
+          //if (this.OverviewResults != 0) {
+            this.RetrieveNewColors()
+         // }
         })
         .catch(error => {
           console.log(error)

frontend/src/components/PCPData.vue

@@ -21,13 +21,15 @@ export default {
     }
   },
   methods: {
+    reset () {
+      d3.selectAll("#PCPDataView > *").remove();
+    },
     PCPView () {
       d3.selectAll("#PCPDataView > *").remove();
       const DataSetNew = JSON.parse(this.PCPDataReceived[2])
       var DataSetParse = JSON.parse(DataSetNew)
       const target_names = JSON.parse(this.PCPDataReceived[3])
       var colors = this.colorsValues
-      console.log(target_names)
 
       this.pc = ParCoords()("#PCPDataView")
           .data(DataSetParse)
@@ -46,6 +48,9 @@ export default {
     EventBus.$on('emittedEventCallingDataPCP', data => { this.PCPDataReceived = data })
     EventBus.$on('emittedEventCallingDataPCP', this.PCPView)
     EventBus.$on('ResponsiveandChange', this.PCPView)
+
+    // reset the views
+    EventBus.$on('resetViews', this.reset)
   }
 }
 </script>

frontend/src/components/PerMetricBarChart.vue

@@ -16,76 +16,80 @@ export default {
     }
   },
   methods: {
-        LineBar () {
+    LineBar () {
+      Plotly.purge('PerMetricBar')
 
-        Plotly.purge('PerMetricBar')
+      var metricsPerModel = JSON.parse(this.barchartmetrics[9])
-
+      var metricsPerModelSel = []
-        var metricsPerModel = JSON.parse(this.barchartmetrics[9])
+      if (this.SelBarChartMetrics.length == 0) {
-        var metricsPerModelSel = []
+        metricsPerModelSel = metricsPerModel
-        if (this.SelBarChartMetrics.length == 0) {
+      } else {
-          metricsPerModelSel = metricsPerModel
+        metricsPerModelSel = this.SelBarChartMetrics
-        } 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]*3 // interactive visualization
+          var trace1 = {
-        var height = this.WH[1]/2 // interactive visualization
+          x: ['Acc','F1s','Pre','Rec','Jac'], 
-            var trace1 = {
+          y: metricsPerModel, 
-            x: ['Acc','F1s','Pre','Rec','Jac'], 
+          name: 'Projection average', 
-            y: metricsPerModel, 
+          type: 'bar',
-            name: 'Projection average', 
+          marker: {
-            type: 'bar',
+              color: 'rgb(0,0,0)'
-            marker: {
+          }
-                color: 'rgb(0,0,0)'
+          };
-            }
+          var trace2 = {
-            };
+          x: ['Acc','F1s','Pre','Rec','Jac'], 
-            var trace2 = {
+          y: metricsPerModelSel, 
-            x: ['Acc','F1s','Pre','Rec','Jac'], 
+          name: 'Selected points', 
-            y: metricsPerModelSel, 
+          type: 'bar',
-            name: 'Selected points', 
+          marker: {
-            type: 'bar',
+              color: 'rgb(211,211,211)'
-            marker: {
+          }
-                color: 'rgb(211,211,211)'
+          };
-            }
+          var data = [trace1, trace2];
-            };
+          var layout = {
-            var data = [trace1, trace2];
+          barmode: 'group',autosize: false,
-            var layout = {
+          width:  width,
-            barmode: 'group',autosize: false,
+          height: height,
-            width:  width,
+          margin: {
-            height: height,
+              l: 50,
-            margin: {
+              r: 30,
-                l: 50,
+              b: 30,
-                r: 30,
+              t: 5,
-                b: 30,
+              pad: 4
-                t: 5,
+          },
-                pad: 4
+          xaxis: {
-            },
+              title: 'Performance Metrics',
-            xaxis: {
+              titlefont: {
-                title: 'Performance Metrics',
+              size: 12,
-                titlefont: {
+              color: 'black'
-                size: 12,
+              }},
-                color: 'black'
+          yaxis: {
-                }},
+              title: 'Performance',
-            yaxis: {
+              titlefont: {
-                title: 'Performance',
+              size: 12,
-                titlefont: {
+              color: 'black'
-                size: 12,
+              }}};
-                color: 'black'
-                }}};
 
         Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true});
-        //}
+      },
-        }
+      reset () {
+        Plotly.purge('PerMetricBar')
+      }
     },
     mounted () {
-        EventBus.$on('InitializeMetricsBarChart', data => {this.barchartmetrics = data;})
+      EventBus.$on('InitializeMetricsBarChart', data => {this.barchartmetrics = data;})
-        EventBus.$on('InitializeMetricsBarChart', this.LineBar)
+      EventBus.$on('InitializeMetricsBarChart', this.LineBar)
-        EventBus.$on('Responsive', data => {
+      EventBus.$on('Responsive', data => {
-        this.WH = data})
+      this.WH = data})
-        EventBus.$on('ResponsiveandChange', data => {
+      EventBus.$on('ResponsiveandChange', data => {
-        this.WH = data})
+      this.WH = data})
-        EventBus.$on('UpdateBarChartperMetric', data => {
+      EventBus.$on('UpdateBarChartperMetric', data => {
-        this.SelBarChartMetrics = data})
+      this.SelBarChartMetrics = data})
-        EventBus.$on('UpdateBarChartperMetric', this.LineBar)
+      EventBus.$on('UpdateBarChartperMetric', this.LineBar)
+
+      // reset view
+      EventBus.$on('resetViews', this.reset)
     }
 }
 </script>

frontend/src/components/PredictionsSpace.vue

@@ -17,6 +17,9 @@ export default {
     }
   },
   methods: {
+    reset () {
+      Plotly.purge('OverviewPredPlotly')
+    },
     ScatterPlotDataView () {
        Plotly.purge('OverviewPredPlotly')
 
@@ -26,7 +29,6 @@ export default {
 
       var target_names = JSON.parse(this.PredictionsData[4])
       const XandYCoordinates = JSON.parse(this.PredictionsData[8])
-      console.log(XandYCoordinates)
       const DataSet = JSON.parse(this.PredictionsData[14])
       const DataSetY = JSON.parse(this.PredictionsData[15])
       const originalDataLabels = JSON.parse(this.PredictionsData[16])
@@ -148,6 +150,9 @@ export default {
     this.WH = data})
     EventBus.$on('ResponsiveandChange', data => {
     this.WH = data})
+
+    // reset the views
+    EventBus.$on('resetViews', this.reset)
   }
 }
 </script>

frontend/src/components/Provenance.vue

@@ -28,10 +28,17 @@ export default {
         typeCounter: [],
         typeColumnCounter: [],
         KNNModels: 576, //KNN models
-
+        platform: ''
     }
   },
   methods: {
+    reset () {
+      if (this.platform == '') {
+
+      } else {
+        this.platform.clear();
+      }
+    },
     provenance () {
       var canvas = document.getElementById("main-canvas");
       var width = this.WH[0]*9 // interactive visualization
@@ -41,7 +48,7 @@ export default {
       var flagRF = 0
       var StackInfo = JSON.parse(this.stackInformation[1])
       // Create a WebGL 2D platform on the canvas:
-      var platform = Stardust.platform("webgl-2d", canvas, width, height);
+      this.platform = Stardust.platform("webgl-2d", canvas, width, height);
     
       for (let i = 0; i < StackInfo.length; i++) {
         if (StackInfo[i] < this.KNNModels){
@@ -64,18 +71,18 @@ export default {
       }
       this.typeColumnCounter.push(0)
       
-  this.data.forEach(d => {
+      this.data.forEach(d => {
-    if (d.column == this.counter) {
+        if (d.column == this.counter) {
-      d.typeIndex = this.typeCounter[d.type]++;
+          d.typeIndex = this.typeCounter[d.type]++;
-      d.typeColumnIndex = this.typeColumnCounter[d.column]++;
+          d.typeColumnIndex = this.typeColumnCounter[d.column]++;
-    }
+        }
-  });
+      });
 
       // Convert the SVG file to Stardust mark spec.
       let isotype = new Stardust.mark.circle();
 
       // Create the mark object.
-      let isotypes = Stardust.mark.create(isotype, platform);
+      let isotypes = Stardust.mark.create(isotype, this.platform);
 
       let isotypeHeight = 18;
       let colors = [[141,211,199], [141,160,203]];
@@ -123,6 +130,9 @@ export default {
     this.WH = data})
     EventBus.$on('ResponsiveandChange', data => {
     this.WH = data})
+
+    // reset the views
+    EventBus.$on('resetViews', this.reset)
   }
 
 }

frontend/src/components/ScatterPlot.vue

@@ -45,6 +45,9 @@ export default {
     }
   },
   methods: {
+    reset () {
+      Plotly.purge('OverviewPlotly')
+    },
     selectVisualRepresentation () {
       const representationSelectionDocum = document.getElementById('selectBarChart')
       this.representationSelection = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value
@@ -280,6 +283,9 @@ export default {
     EventBus.$on('RepresentationSelection', this.ScatterPlotView)
     EventBus.$on('UpdateModelsScatterplot', data => {this.DataPointsSelUpdate = data})
     EventBus.$on('UpdateModelsScatterplot', this.animate)
+
+    // reset view
+    EventBus.$on('resetViews', this.reset)
   }
 }
 </script>

run.py

@@ -131,7 +131,6 @@ def Reset():
 @cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
 @app.route('/data/ServerRequest', methods=["GET", "POST"])
 def RetrieveFileName():
-
     fileName = request.get_data().decode('utf8').replace("'", '"')
 
     #global featureSelection 
@@ -195,9 +194,6 @@ def RetrieveFileName():
     global loopFeatures
     loopFeatures = 2
 
-    global factors
-    factors = [1,1,1,1,1]
-
     # models
     global KNNModels
     KNNModels = []
@@ -438,6 +434,7 @@ def RetrieveModel():
     global algorithms
     algorithms = RetrievedModel['Algorithms']
 
+    global factors
     global XData
     global yData
 
@@ -653,10 +650,16 @@ def RetrieveModelsParam():
 @cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
 @app.route('/data/factors', methods=["GET", "POST"])
 def RetrieveFactors():
+    global factors
+    global allParametersPerformancePerModel
     Factors = request.get_data().decode('utf8').replace("'", '"')
     FactorsInt = json.loads(Factors)
     factors = FactorsInt['Factors']
 
+    # this is if we want to change the factors before running the search
+    #if (len(allParametersPerformancePerModel) == 0):
+    #    pass
+    #else:
     global sumPerClassifierSel
     global ModelSpaceMDSNew
     global ModelSpaceTSNENew
@@ -1459,7 +1462,7 @@ def RetrieveAction():
 
     filterActionFinal = filterActionCleared['action']
 
-    if (filterActionFinal == 'merge'): # fix merge
+    if (filterActionFinal == 'merge'):
         if (filterDataFinal == 'mean' or filterDataFinal == ''):
             mean = XData.iloc[dataSpacePointsIDs, :].mean()
             XData.loc[len(XData)]= mean