diff --git a/base/methods.py b/base/methods.py
index 888474ddb..ff30c0dee 100755
--- a/base/methods.py
+++ b/base/methods.py
@@ -1,5 +1,3 @@
-import dice_ml.data_interfaces
-import dice_ml.data_interfaces.private_data_interface
import pandas as pd
import pickle, os
from sklearn.impute import SimpleImputer
@@ -27,7 +25,6 @@ from sklearn.metrics import classification_report
from .glacier.src.gc_latentcf_search_1dcnn_function import gc_latentcf_search_1dcnn
from .glacier.src.glacier_compute_counterfactuals import gc_compute_counterfactuals
import re
-import json
PIPELINE_PATH = os.path.join(settings.BASE_DIR, "base/pipelines/")
diff --git a/base/pipelines/breast-cancer/trained_models/dt/counterfactuals.csv b/base/pipelines/breast-cancer/trained_models/dt/counterfactuals.csv
index 12f467203..7ba304647 100644
--- a/base/pipelines/breast-cancer/trained_models/dt/counterfactuals.csv
+++ b/base/pipelines/breast-cancer/trained_models/dt/counterfactuals.csv
@@ -1,6 +1,6 @@
radius_mean,texture_mean,perimeter_mean,area_mean,smoothness_mean,compactness_mean,concavity_mean,concave_points_mean,symmetry_mean,fractal_dimension_mean,radius_se,texture_se,perimeter_se,area_se,smoothness_se,compactness_se,concavity_se,concave_points_se,symmetry_se,fractal_dimension_se,radius_worst,texture_worst,perimeter_worst,area_worst,smoothness_worst,compactness_worst,concavity_worst,concave_points_worst,symmetry_worst,fractal_dimension_worst,diagnosis
-0.3529467875473725,0.8075740878596294,0.3390351627451203,0.2085037118017206,-0.3103013382814969,-0.0140427464835854,0.2937949136813015,0.6683441135404885,-0.3454472595229295,-0.2590827127326624,-0.3330292299491402,-0.6813830684936358,-0.3915985320798616,-0.2397543699733271,0.94704542716632,-0.0580211016382968,0.444844024929645,0.9463089528401444,0.5046190282437566,-0.6252131058337952,0.0333009816827659,-1.7490432,0.0071124813116911,-0.0873386027587258,-0.2923237631011298,-0.3471099158266328,-0.8389175,0.5023829555750204,-0.5577391061772538,-0.8681340676721787,0
-0.3529467875473725,0.8075740878596294,0.3390351627451203,0.2085037118017206,-0.3103013382814969,-0.0140427464835854,0.2937949136813015,0.6683441135404885,-2.41662033,-0.2590827127326624,-0.3330292299491402,-0.6813830684936358,-0.3915985320798616,-0.2397543699733271,0.94704542716632,-0.0580211016382968,0.444844024929645,0.9463089528401444,0.5046190282437566,-0.6252131058337952,0.0333009816827659,-1.9471911,0.0071124813116911,-0.0873386027587258,-0.2923237631011298,-0.3471099158266328,0.0595445433582959,0.5023829555750204,-0.5577391061772538,-0.8681340676721787,0
-0.3529467875473725,0.8075740878596294,0.3390351627451203,-0.05076176,-0.3103013382814969,-0.0140427464835854,0.2937949136813015,0.6683441135404885,-0.3454472595229295,-0.2590827127326624,-0.3330292299491402,-0.6813830684936358,-0.3915985320798616,1.72823718,0.94704542716632,-0.0580211016382968,0.444844024929645,0.9463089528401444,0.5046190282437566,-0.6252131058337952,0.0333009816827659,0.0265071915015526,0.0071124813116911,-0.0873386027587258,-0.2923237631011298,-0.3471099158266328,0.0595445433582959,0.5023829555750204,-0.5577391061772538,-0.8681340676721787,0
-0.3529467875473725,0.8075740878596294,0.3390351627451203,-1.38071637,-0.3103013382814969,-0.0140427464835854,0.2937949136813015,0.6683441135404885,-2.66462963,-0.2590827127326624,-0.3330292299491402,-0.6813830684936358,-0.3915985320798616,-0.2397543699733271,0.94704542716632,-0.0580211016382968,0.444844024929645,0.9463089528401444,0.5046190282437566,-0.6252131058337952,0.0333009816827659,0.0265071915015526,0.0071124813116911,-0.0873386027587258,-0.2923237631011298,-0.3471099158266328,0.0595445433582959,0.5023829555750204,-0.5577391061772538,-0.8681340676721787,0
-0.3529467875473725,0.8075740878596294,0.3390351627451203,0.2085037118017206,-0.3103013382814969,-0.0140427464835854,0.2937949136813015,0.6683441135404885,-0.3454472595229295,-0.2590827127326624,-0.3330292299491402,-0.6813830684936358,-0.3915985320798616,-0.2397543699733271,0.94704542716632,-0.0580211016382968,0.444844024929645,0.9463089528401444,0.5046190282437566,-0.6252131058337952,0.0333009816827659,-2.0982248,0.0071124813116911,-0.0873386027587258,-0.2923237631011298,-0.3471099158266328,-1.1821898,0.5023829555750204,-0.5577391061772538,-0.8681340676721787,0
+3.4576794,4.0629457,0.9321740461825264,0.9590623915417054,-1.2795746576636695,-0.7992025384709373,-0.5568043784777806,-0.1841470024082316,-2.15996612839376,-1.469716577849185,0.282341078470618,-0.3099868727228095,0.1469947723342195,0.2335024043761372,-0.8906957494210652,-0.9615313961006388,-0.6752002099671629,-0.7070941683631531,-0.910788678379718,-0.9402964737998116,0.7353107583814449,-1.1817937410802366,0.5909149143764517,0.5790861060290915,-1.4793997007832118,-0.9828679485322848,-0.8030501868496844,-0.4750123305865307,-1.808283518785376,-1.398463440806945,1
+1.0573019940084711,-0.31184392,0.9321740461825264,0.9590623915417054,-1.2795746576636695,-0.7992025384709373,-0.5568043784777806,-0.1841470024082316,-2.15996612839376,-1.469716577849185,0.282341078470618,0.73329621,0.1469947723342195,0.2335024043761372,-0.8906957494210652,-0.9615313961006388,-0.6752002099671629,-0.7070941683631531,-0.910788678379718,-0.9402964737998116,0.7353107583814449,-1.1817937410802366,0.5909149143764517,0.5790861060290915,-1.4793997007832118,-0.9828679485322848,-0.8030501868496844,-0.4750123305865307,-1.808283518785376,-1.398463440806945,1
+1.0573019940084711,1.86556447,0.9321740461825264,0.9590623915417054,-1.2795746576636695,-0.7992025384709373,-0.5568043784777806,-0.1841470024082316,-2.15996612839376,-1.469716577849185,0.282341078470618,-0.3099868727228095,0.1469947723342195,0.2335024043761372,-0.8906957494210652,-0.9615313961006388,-0.6752002099671629,-0.7070941683631531,-0.910788678379718,-0.9402964737998116,1.7371015,-1.1817937410802366,0.5909149143764517,0.5790861060290915,-1.4793997007832118,-0.9828679485322848,-0.8030501868496844,-0.4750123305865307,-1.808283518785376,-1.398463440806945,1
+1.0573019940084711,-0.59685838,0.9321740461825264,0.9590623915417054,-1.2795746576636695,-0.7992025384709373,-0.5568043784777806,-0.1841470024082316,-2.15996612839376,-1.469716577849185,0.282341078470618,-0.3099868727228095,0.1469947723342195,0.2335024043761372,-0.8906957494210652,-0.9615313961006388,-0.6752002099671629,-0.7070941683631531,-0.910788678379718,-0.9402964737998116,0.7353107583814449,-1.1817937410802366,0.5909149143764517,0.5790861060290915,-1.4793997007832118,-0.9828679485322848,-0.8030501868496844,-0.4750123305865307,-1.808283518785376,-1.398463440806945,1
+1.0573019940084711,-0.94217479,0.9321740461825264,0.9590623915417054,-1.2795746576636695,-0.7992025384709373,-0.5568043784777806,-0.1841470024082316,-2.15996612839376,-1.469716577849185,0.282341078470618,-0.3099868727228095,0.1469947723342195,0.2335024043761372,-0.8906957494210652,0.09380289,-0.6752002099671629,-0.7070941683631531,-0.910788678379718,-0.9402964737998116,0.7353107583814449,-1.1817937410802366,0.5909149143764517,0.5790861060290915,-1.4793997007832118,-0.9828679485322848,-0.8030501868496844,-0.4750123305865307,-1.808283518785376,-1.398463440806945,1
diff --git a/base/pipelines/breast-cancer/trained_models/dt/tsne_cfs.sav b/base/pipelines/breast-cancer/trained_models/dt/tsne_cfs.sav
index e2f08f7ae..46d6af8d9 100644
Binary files a/base/pipelines/breast-cancer/trained_models/dt/tsne_cfs.sav and b/base/pipelines/breast-cancer/trained_models/dt/tsne_cfs.sav differ
diff --git a/base/pipelines/breast-cancer/trained_models/lr/counterfactuals.csv b/base/pipelines/breast-cancer/trained_models/lr/counterfactuals.csv
index 68437c1a4..91b6c3fcf 100644
--- a/base/pipelines/breast-cancer/trained_models/lr/counterfactuals.csv
+++ b/base/pipelines/breast-cancer/trained_models/lr/counterfactuals.csv
@@ -1,6 +1,6 @@
radius_mean,texture_mean,perimeter_mean,area_mean,smoothness_mean,compactness_mean,concavity_mean,concave_points_mean,symmetry_mean,fractal_dimension_mean,radius_se,texture_se,perimeter_se,area_se,smoothness_se,compactness_se,concavity_se,concave_points_se,symmetry_se,fractal_dimension_se,radius_worst,texture_worst,perimeter_worst,area_worst,smoothness_worst,compactness_worst,concavity_worst,concave_points_worst,symmetry_worst,fractal_dimension_worst,diagnosis
--0.7092663060673473,2.3271489214378698,-0.704312609301373,-0.6819848165294249,-0.1985715944173255,-0.3525161687595716,-0.2159369130590488,-0.7415549605217517,-0.0460699008762327,-0.161268032764232,-0.3308637039371059,2.19380770550748,-0.3544712362792588,-0.3785851577996926,0.9400451433447464,-0.0725523818906913,0.3599620462044872,-0.4186853829712703,0.509462168386181,-0.63050862462314,-0.6521421926159441,2.1385911666478887,3.39703065,-0.6201619455009771,0.3608310179720982,4.13681689,0.0964854745184819,-0.704324887208948,-0.0271070656397842,-0.6509040632115424,1
--0.7092663060673473,2.3271489214378698,-0.704312609301373,-0.6819848165294249,-0.1985715944173255,-0.3525161687595716,1.6653011,-0.7415549605217517,-0.0460699008762327,-0.161268032764232,-0.3308637039371059,2.19380770550748,-0.3544712362792588,-0.3785851577996926,0.9400451433447464,-0.0725523818906913,0.3599620462044872,-0.4186853829712703,0.509462168386181,-0.63050862462314,-0.6521421926159441,2.1385911666478887,1.40965287,-0.6201619455009771,0.3608310179720982,-0.3254811654644232,0.0964854745184819,-0.704324887208948,-0.0271070656397842,-0.6509040632115424,1
--0.7092663060673473,2.3271489214378698,-0.704312609301373,-0.6819848165294249,-0.1985715944173255,-0.3525161687595716,-0.2159369130590488,-0.7415549605217517,-0.0460699008762327,-0.161268032764232,-0.3308637039371059,2.19380770550748,-0.3544712362792588,-0.3785851577996926,0.9400451433447464,-0.0725523818906913,8.2396206,-0.4186853829712703,0.509462168386181,-0.63050862462314,-0.6521421926159441,2.1385911666478887,2.54140746,-0.6201619455009771,0.3608310179720982,-0.3254811654644232,0.0964854745184819,-0.704324887208948,-0.0271070656397842,-0.6509040632115424,1
--0.7092663060673473,2.3271489214378698,-0.704312609301373,-0.6819848165294249,-0.1985715944173255,-0.3525161687595716,-0.2159369130590488,-0.7415549605217517,-0.0460699008762327,-0.161268032764232,-0.3308637039371059,-1.16869482,-0.3544712362792588,-0.3785851577996926,0.9400451433447464,-0.0725523818906913,0.3599620462044872,-0.4186853829712703,0.509462168386181,-0.63050862462314,-0.6521421926159441,2.1385911666478887,-0.6320916112173782,-0.6201619455009771,0.3608310179720982,-0.3254811654644232,0.0964854745184819,-0.704324887208948,-0.0271070656397842,-0.6509040632115424,1
--0.7092663060673473,2.3271489214378698,-0.704312609301373,3.12509814,-0.1985715944173255,-0.3525161687595716,-0.2159369130590488,-0.7415549605217517,-0.0460699008762327,-0.161268032764232,-0.3308637039371059,2.19380770550748,-0.3544712362792588,-0.3785851577996926,0.9400451433447464,-0.0725523818906913,0.3599620462044872,-0.4186853829712703,0.509462168386181,-0.63050862462314,-0.6521421926159441,2.1385911666478887,-0.6320916112173782,-0.6201619455009771,0.3608310179720982,-0.3254811654644232,0.0964854745184819,-0.704324887208948,-0.0271070656397842,-0.6509040632115424,1
+0.2450213930089787,1.3753784667158169,0.1470888296327375,0.124887094960661,-0.1772219618318155,-1.005015604871677,-0.8138046369352923,-0.5140520363865714,-0.9003906560387567,-1.0997219188381635,2.9192299191244326,1.7619938579576184,2.5795751931897306,1.444696520040387,-0.0526617719241149,-0.8125298839741631,-0.4547060074193898,1.1961118378252398,-1.5328900296741077,7.071149839,-0.2648978615166727,-0.0777128350284131,-0.3491261462114993,-0.3195588718984534,-1.6876201846823955,-1.2910776411937703,-1.1907860383258189,-1.303643760293831,-2.1609596920694254,-1.6018394909014688,0
+0.2450213930089787,1.3753784667158169,0.1470888296327375,0.124887094960661,-0.1772219618318155,-1.005015604871677,-0.8138046369352923,-0.5140520363865714,-0.9003906560387567,-1.0997219188381635,-0.80657593,1.7619938579576184,-0.7769947,1.444696520040387,-0.0526617719241149,-0.8125298839741631,-0.4547060074193898,1.1961118378252398,-1.5328900296741077,-0.7719746265670657,-0.2648978615166727,-0.0777128350284131,-0.3491261462114993,-0.3195588718984534,-1.6876201846823955,-1.2910776411937703,-1.1907860383258189,-1.303643760293831,-2.1609596920694254,-1.6018394909014688,0
+0.2450213930089787,1.3753784667158169,0.1470888296327375,0.124887094960661,-0.1772219618318155,-1.005015604871677,-0.8138046369352923,-0.5140520363865714,-0.9003906560387567,-1.0997219188381635,2.9192299191244326,1.7619938579576184,2.5795751931897306,1.444696520040387,-0.0526617719241149,-0.8125298839741631,-0.4547060074193898,1.1961118378252398,-1.5328900296741077,4.066112583,-0.2648978615166727,-0.0777128350284131,-0.3491261462114993,-0.3195588718984534,-1.6876201846823955,-1.2910776411937703,-1.1907860383258189,-1.303643760293831,-2.1609596920694254,-1.6018394909014688,0
+0.2450213930089787,1.3753784667158169,0.1470888296327375,0.124887094960661,-0.1772219618318155,-1.005015604871677,-0.8138046369352923,-0.5140520363865714,-0.9003906560387567,-1.0997219188381635,-0.2491344,1.7619938579576184,2.5795751931897306,1.444696520040387,-0.0526617719241149,-0.8125298839741631,-0.4547060074193898,1.1961118378252398,-1.5328900296741077,-0.7719746265670657,-0.2648978615166727,-0.0777128350284131,-0.3491261462114993,-0.3195588718984534,-1.6876201846823955,-1.2910776411937703,-1.1907860383258189,-1.303643760293831,-1.49333018,-1.6018394909014688,0
+0.2450213930089787,1.3753784667158169,0.1470888296327375,0.124887094960661,-0.1772219618318155,-1.005015604871677,-0.8138046369352923,-0.5140520363865714,-0.9003906560387567,-1.0997219188381635,2.9192299191244326,1.7619938579576184,2.5795751931897306,1.444696520040387,-0.0526617719241149,2.86651033,-0.4547060074193898,1.1961118378252398,-1.5328900296741077,-0.7719746265670657,-0.2648978615166727,-0.0777128350284131,-0.3491261462114993,-0.3195588718984534,-1.6876201846823955,-1.2910776411937703,-1.1907860383258189,-1.303643760293831,-2.1609596920694254,-1.6018394909014688,0
diff --git a/base/pipelines/breast-cancer/trained_models/lr/tsne_cfs.sav b/base/pipelines/breast-cancer/trained_models/lr/tsne_cfs.sav
index 27d59e19b..7f29ef369 100644
Binary files a/base/pipelines/breast-cancer/trained_models/lr/tsne_cfs.sav and b/base/pipelines/breast-cancer/trained_models/lr/tsne_cfs.sav differ
diff --git a/base/pipelines/breast-cancer/trained_models/rf/counterfactuals.csv b/base/pipelines/breast-cancer/trained_models/rf/counterfactuals.csv
index 995ca8244..0e0c366fc 100644
--- a/base/pipelines/breast-cancer/trained_models/rf/counterfactuals.csv
+++ b/base/pipelines/breast-cancer/trained_models/rf/counterfactuals.csv
@@ -1,6 +1,6 @@
radius_mean,texture_mean,perimeter_mean,area_mean,smoothness_mean,compactness_mean,concavity_mean,concave_points_mean,symmetry_mean,fractal_dimension_mean,radius_se,texture_se,perimeter_se,area_se,smoothness_se,compactness_se,concavity_se,concave_points_se,symmetry_se,fractal_dimension_se,radius_worst,texture_worst,perimeter_worst,area_worst,smoothness_worst,compactness_worst,concavity_worst,concave_points_worst,symmetry_worst,fractal_dimension_worst,diagnosis
-2.602339221084427,-1.94802596,2.756899916757326,-1.18042017,1.262454928851104,1.9720722957629624,3.3082434752664773,2.9168055530941936,-2.4486832,-0.0719589771408823,0.5367903848846528,0.6225858904731099,0.8915208107889793,-0.25641021,0.76203792616759,1.43814186896401,-0.5208884,2.0850208051748,0.1462266577043651,0.5295882415854701,-1.4890007,-1.9742909,2.077228251617858,-0.93010617,-2.41140622,-1.17591288,2.4803749152323054,-1.5639764,0.4808760463381589,0.2036078420902447,0
-2.602339221084427,1.717457334305406,2.756899916757326,2.9297410925338823,1.262454928851104,1.9720722957629624,-0.8725703,-1.027146,-2.41723723,-0.0719589771408823,0.5367903848846528,-1.18303933,0.8915208107889793,0.9421774718701514,0.76203792616759,1.43814186896401,-0.4637714,2.0850208051748,0.1462266577043651,0.5295882415854701,1.8328481673793795,1.140358725040561,-1.42292182,-0.89899199,0.9306976054856524,1.033313269055562,-1.0342247,-1.5447016,0.4808760463381589,0.2036078420902447,0
-2.602339221084427,-2.13020495,2.756899916757326,2.9297410925338823,1.262454928851104,1.9720722957629624,3.3082434752664773,2.9168055530941936,-2.6400684,-0.0719589771408823,0.5367903848846528,0.6225858904731099,0.8915208107889793,0.9421774718701514,-1.634921511,1.43814186896401,1.9127054304619624,2.0850208051748,0.1462266577043651,0.5295882415854701,-1.6431148,-2.1360513,2.077228251617858,-1.11947204,-2.58714994,1.033313269055562,-1.2193761,-1.6812861,0.4808760463381589,0.2036078420902447,0
-2.602339221084427,-1.94802596,2.756899916757326,2.9297410925338823,1.262454928851104,1.9720722957629624,3.3082434752664773,2.9168055530941936,-2.4486832,-0.0719589771408823,0.5367903848846528,0.6225858904731099,0.8915208107889793,-0.25641021,0.76203792616759,1.43814186896401,1.9127054304619624,2.0850208051748,0.1462266577043651,0.5295882415854701,-1.4890007,-1.9742909,2.077228251617858,-0.93010617,-2.41140622,1.033313269055562,2.4803749152323054,-1.5639764,0.4808760463381589,0.2036078420902447,0
-2.602339221084427,-1.94802596,2.756899916757326,-1.18042017,1.262454928851104,1.9720722957629624,3.3082434752664773,2.9168055530941936,-2.4486832,-0.0719589771408823,0.5367903848846528,0.6225858904731099,0.8915208107889793,-0.25641021,0.76203792616759,1.43814186896401,-0.5208884,2.0850208051748,0.1462266577043651,0.5295882415854701,-1.4890007,-1.9742909,2.077228251617858,-0.93010617,-2.41140622,1.033313269055562,2.4803749152323054,-1.5639764,0.4808760463381589,0.2036078420902447,0
+2.8585626,3.37595203,-1.0115915030821407,-0.9066689230071012,0.2511939987174278,-0.3517581095831416,-0.7388514594564771,-0.952033856320286,1.4800244395422928,0.2852772453525187,-0.1810814881047307,0.5754129491441333,-0.2792265834567032,-0.3785851577996926,0.1846811843120937,-0.1837725653609411,-0.1025784238017434,-0.5161733919816872,0.793996651753603,-0.1300820990300551,3.0148121,-0.3854876008747181,3.17836465,-0.8399010343917108,-0.4589001502204771,-0.6721773109763108,-0.922652448385196,-1.2573549042425596,-0.1209383411006778,-0.4669235492295751,1
+-1.0330424896825297,8.179497808282562e-05,-1.0115915030821407,-0.9066689230071012,0.2511939987174278,-0.3517581095831416,-0.7388514594564771,-0.952033856320286,1.4800244395422928,0.2852772453525187,-0.1810814881047307,0.5754129491441333,-0.2792265834567032,-0.3785851577996926,0.1846811843120937,-0.1837725653609411,-0.1025784238017434,-0.5161733919816872,0.793996651753603,-0.1300820990300551,1.356243,1.0121176,1.4743193,2.56595339,-0.4589001502204771,-0.6721773109763108,-0.922652448385196,-1.2573549042425596,-0.1209383411006778,-0.4669235492295751,1
+2.7842845,8.179497808282562e-05,-1.0115915030821407,-0.9066689230071012,0.2511939987174278,-0.3517581095831416,-0.7388514594564771,-0.952033856320286,1.4800244395422928,0.2852772453525187,6.93543931,0.5754129491441333,-0.2792265834567032,-0.3785851577996926,0.1846811843120937,-0.1837725653609411,-0.1025784238017434,-0.5161733919816872,0.793996651753603,-0.1300820990300551,2.9427601,-0.3854876008747181,-0.9841602213615352,4.51536751,-0.4589001502204771,3.81593129,-0.922652448385196,-1.2573549042425596,-0.1209383411006778,-0.4669235492295751,1
+-1.0330424896825297,8.179497808282562e-05,-1.0115915030821407,-0.9066689230071012,0.2511939987174278,-0.3517581095831416,2.4887917,-0.952033856320286,1.4800244395422928,0.2852772453525187,-0.1810814881047307,0.5754129491441333,-0.2792265834567032,-0.3785851577996926,0.1846811843120937,-0.1837725653609411,-0.1025784238017434,-0.5161733919816872,0.793996651753603,-0.1300820990300551,2.1878898,-0.3854876008747181,2.32876898,3.5878295,-0.4589001502204771,-0.6721773109763108,-0.922652448385196,-1.2573549042425596,3.35840007,-0.4669235492295751,1
+-1.0330424896825297,8.179497808282562e-05,-1.0115915030821407,2.84443378,0.2511939987174278,-0.3517581095831416,-0.7388514594564771,-0.952033856320286,1.89065444,0.2852772453525187,-0.1810814881047307,0.5754129491441333,-0.2792265834567032,-0.3785851577996926,0.1846811843120937,-0.1837725653609411,-0.1025784238017434,-0.5161733919816872,0.793996651753603,-0.1300820990300551,2.0052774,-0.3854876008747181,2.14114955,-0.8399010343917108,-0.4589001502204771,-0.6721773109763108,-0.922652448385196,1.0958239,-0.1209383411006778,-0.4669235492295751,1
diff --git a/base/pipelines/breast-cancer/trained_models/rf/tsne_cfs.sav b/base/pipelines/breast-cancer/trained_models/rf/tsne_cfs.sav
index 0ec9f4db7..9daa82d81 100644
Binary files a/base/pipelines/breast-cancer/trained_models/rf/tsne_cfs.sav and b/base/pipelines/breast-cancer/trained_models/rf/tsne_cfs.sav differ
diff --git a/base/pipelines/breast-cancer/trained_models/svm/counterfactuals.csv b/base/pipelines/breast-cancer/trained_models/svm/counterfactuals.csv
index 5e78c0a9c..71f632c62 100644
--- a/base/pipelines/breast-cancer/trained_models/svm/counterfactuals.csv
+++ b/base/pipelines/breast-cancer/trained_models/svm/counterfactuals.csv
@@ -1,6 +1,6 @@
radius_mean,texture_mean,perimeter_mean,area_mean,smoothness_mean,compactness_mean,concavity_mean,concave_points_mean,symmetry_mean,fractal_dimension_mean,radius_se,texture_se,perimeter_se,area_se,smoothness_se,compactness_se,concavity_se,concave_points_se,symmetry_se,fractal_dimension_se,radius_worst,texture_worst,perimeter_worst,area_worst,smoothness_worst,compactness_worst,concavity_worst,concave_points_worst,symmetry_worst,fractal_dimension_worst,diagnosis
--0.5445380722982196,-0.29545573008231,-0.5626183204802149,-0.5588351733587492,-0.2882400512764691,-0.6176473657159572,-0.5634585131618296,-0.7389755622889266,-0.4257680142817985,-0.5156690471426052,-0.5503036731565858,-0.79514243085236,5.3840988,-0.4789129537566222,-0.4026759630027935,-0.6482146380432412,-0.394360225669473,-0.763867551314311,-0.1407293957342688,-0.6940548500952777,-0.4098556325164001,-0.2666116331139759,-0.3994642131441244,-0.4499959950639928,0.1942546308527515,-0.2370577448659785,2.3692635,-0.4007065353463319,0.5132316585660535,-0.5123645195504225,1
--0.5445380722982196,-0.29545573008231,-0.5626183204802149,-0.5588351733587492,-0.2882400512764691,-0.6176473657159572,-0.5634585131618296,-0.7389755622889266,-0.4257680142817985,-0.5156690471426052,-0.5503036731565858,-0.79514243085236,-0.4910996848254779,-0.4789129537566222,-0.4026759630027935,-0.6482146380432412,-0.394360225669473,-0.763867551314311,6.0115092,-0.6940548500952777,-0.4098556325164001,-0.2666116331139759,-0.3994642131441244,5.04872693,0.1942546308527515,-0.2370577448659785,-0.1481882253736594,-0.4007065353463319,0.5132316585660535,-0.5123645195504225,1
--0.5445380722982196,-0.29545573008231,-0.5626183204802149,-0.5588351733587492,-0.2882400512764691,-0.6176473657159572,2.9587792,-0.7389755622889266,-0.4257680142817985,-0.5156690471426052,6.51714009,-0.79514243085236,-0.4910996848254779,-0.4789129537566222,-0.4026759630027935,-0.6482146380432412,-0.394360225669473,-0.763867551314311,-0.1407293957342688,-0.6940548500952777,-0.4098556325164001,-0.2666116331139759,-0.3994642131441244,-0.4499959950639928,0.1942546308527515,-0.2370577448659785,-0.1481882253736594,-0.4007065353463319,0.5132316585660535,-0.5123645195504225,1
--0.5445380722982196,-0.29545573008231,-0.5626183204802149,-0.5588351733587492,-0.2882400512764691,-0.6176473657159572,-0.5634585131618296,3.846981,-0.4257680142817985,-0.5156690471426052,-0.5503036731565858,-0.79514243085236,-0.4910996848254779,10.85810528,-0.4026759630027935,-0.6482146380432412,-0.394360225669473,-0.763867551314311,-0.1407293957342688,-0.6940548500952777,-0.4098556325164001,-0.2666116331139759,-0.3994642131441244,-0.4499959950639928,0.1942546308527515,-0.2370577448659785,-0.1481882253736594,-0.4007065353463319,0.5132316585660535,-0.5123645195504225,1
--0.5445380722982196,-0.29545573008231,-0.5626183204802149,-0.5588351733587492,-0.2882400512764691,-0.6176473657159572,-0.5634585131618296,-0.7389755622889266,-0.4257680142817985,-0.5156690471426052,-0.5503036731565858,-0.79514243085236,-0.4910996848254779,-0.4789129537566222,-0.4026759630027935,-0.6482146380432412,-0.394360225669473,-0.763867551314311,-0.1407293957342688,-0.6940548500952777,-0.4098556325164001,-0.2666116331139759,-0.3994642131441244,5.14342518,0.1942546308527515,-0.2370577448659785,-0.1481882253736594,-0.4007065353463319,0.5132316585660535,-0.5123645195504225,1
+-0.3372077091060419,-0.7259631484773701,-0.3620220453177029,-0.4189053247675885,0.172912012570556,-0.3028632927034079,3.1162659,-0.6453434064373728,-0.2797302783565817,-0.1130694948087733,-0.9361282243007036,-0.5658093622376436,-0.9249940150818587,-0.6375452802586975,-1.3847157791149711,-0.7057808636584961,-0.5226779044453952,-0.7280192152222942,-0.2230627781554804,-0.6895158339901251,2.8695376,-0.4327123003961087,-0.5233733009782776,-0.5268167805401934,-0.6649288395523005,-0.3719193647715201,-0.4374788940696617,-0.467855829815446,0.6410363268662369,-0.3106509439798318,1
+-0.3372077091060419,-0.7259631484773701,-0.3620220453177029,-0.4189053247675885,0.172912012570556,-0.3028632927034079,-0.7010609964395201,-0.6453434064373728,-0.2797302783565817,-0.1130694948087733,-0.9361282243007036,-0.5658093622376436,-0.9249940150818587,-0.6375452802586975,-1.3847157791149711,-0.7057808636584961,-0.5226779044453952,-0.7280192152222942,-0.2230627781554804,-0.6895158339901251,3.5986072,-0.4327123003961087,-0.5233733009782776,-0.5268167805401934,-0.6649288395523005,-0.3719193647715201,4.1893019,-0.467855829815446,0.6410363268662369,-0.3106509439798318,1
+-0.3372077091060419,-0.7259631484773701,-0.3620220453177029,-0.4189053247675885,0.172912012570556,-0.3028632927034079,-0.7010609964395201,-0.6453434064373728,-0.2797302783565817,-0.1130694948087733,-0.9361282243007036,-0.5658093622376436,-0.9249940150818587,8.39763152,-1.3847157791149711,-0.7057808636584961,-0.5226779044453952,4.7274332,-0.2230627781554804,-0.6895158339901251,-0.4989011204162324,-0.4327123003961087,-0.5233733009782776,-0.5268167805401934,-0.6649288395523005,-0.3719193647715201,-0.4374788940696617,-0.467855829815446,0.6410363268662369,-0.3106509439798318,1
+-0.3372077091060419,-0.7259631484773701,-0.3620220453177029,-0.4189053247675885,0.172912012570556,-0.3028632927034079,-0.7010609964395201,-0.6453434064373728,-0.2797302783565817,-0.1130694948087733,-0.9361282243007036,-0.5658093622376436,-0.9249940150818587,8.39763152,-1.3847157791149711,-0.7057808636584961,-0.5226779044453952,-0.7280192152222942,-0.2230627781554804,-0.6895158339901251,-0.4989011204162324,-0.4327123003961087,-0.5233733009782776,-0.5268167805401934,-0.6649288395523005,-0.3719193647715201,-0.4374788940696617,-0.467855829815446,0.6410363268662369,-0.3106509439798318,1
+-0.3372077091060419,-0.7259631484773701,-0.3620220453177029,-0.4189053247675885,0.172912012570556,-0.3028632927034079,-0.7010609964395201,-0.6453434064373728,-0.2797302783565817,-0.1130694948087733,-0.9361282243007036,-0.5658093622376436,-0.9249940150818587,8.8814441,-1.3847157791149711,-0.7057808636584961,-0.5226779044453952,-0.7280192152222942,-0.2230627781554804,-0.6895158339901251,-0.4989011204162324,-0.4327123003961087,-0.5233733009782776,-0.5268167805401934,-0.6649288395523005,-0.3719193647715201,-0.4374788940696617,-0.467855829815446,0.6410363268662369,-0.3106509439798318,1
diff --git a/base/pipelines/breast-cancer/trained_models/svm/tsne_cfs.sav b/base/pipelines/breast-cancer/trained_models/svm/tsne_cfs.sav
index 9a869703b..5fe9642ca 100644
Binary files a/base/pipelines/breast-cancer/trained_models/svm/tsne_cfs.sav and b/base/pipelines/breast-cancer/trained_models/svm/tsne_cfs.sav differ
diff --git a/base/pipelines/stroke/trained_models/rf/counterfactuals.csv b/base/pipelines/stroke/trained_models/rf/counterfactuals.csv
index fbe9ea050..808ac1259 100644
--- a/base/pipelines/stroke/trained_models/rf/counterfactuals.csv
+++ b/base/pipelines/stroke/trained_models/rf/counterfactuals.csv
@@ -1,6 +1,6 @@
age,hypertension,heart_disease,avg_glucose_level,bmi,gender_Female,gender_Male,ever_married_No,ever_married_Yes,work_type_Govt_job,work_type_Private,work_type_Self-employed,work_type_children,Residence_type_Rural,Residence_type_Urban,smoking_status_Unknown,smoking_status_formerly smoked,smoking_status_never smoked,smoking_status_smokes,stroke
-1.2171031013550249,0,1,-0.5365677081178482,-2.040763282,0.0,1.0,0.0,1.0,0.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0,0
-1.2171031013550249,0,1,-0.5365677081178482,1.706765138,0.0,1.0,0.0,1.0,0.0,1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0,0
--0.423726,0,1,-0.5365677081178482,0.0591811261414355,0.0,1.0,0.0,1.0,0.0,1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0,0
-1.2171031013550249,0,1,-0.5365677081178482,-2.02948689,0.0,1.0,0.0,1.0,0.0,1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0,0
-1.2171031013550249,0,0,-0.5365677081178482,0.0591811261414355,0.0,1.0,1.0,1.0,0.0,1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0,0
+1.578287,0,1,3.51339416,0.1328211934186013,0.0,1.0,0.0,1.0,0.0,0.0,0.0,1.0,0.0,1.0,0.0,0.0,0.0,0.0,1
+1.569576,0,1,3.50181362,0.1328211934186013,0.0,1.0,0.0,0.0,0.0,0.0,0.0,1.0,0.0,1.0,0.0,1.0,0.0,0.0,1
+1.520042,1,1,-0.9552418822265982,0.1328211934186013,0.0,0.0,1.0,0.0,0.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,0.0,0
+1.520042,1,1,-0.9552418822265982,0.1328211934186013,0.0,0.0,1.0,0.0,0.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,0.0,0
+1.370902,1,0,-0.9552418822265982,2.533263493,1.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0,0.0,1.0,1.0,0.0,1.0,0.0,1
diff --git a/base/pipelines/stroke/trained_models/rf/tsne_cfs.sav b/base/pipelines/stroke/trained_models/rf/tsne_cfs.sav
index d7534e83d..21f9201d1 100644
Binary files a/base/pipelines/stroke/trained_models/rf/tsne_cfs.sav and b/base/pipelines/stroke/trained_models/rf/tsne_cfs.sav differ
diff --git a/base/static/css/sb-admin-2.css b/base/static/css/sb-admin-2.css
index 8ff44fd68..5ffc79b91 100644
--- a/base/static/css/sb-admin-2.css
+++ b/base/static/css/sb-admin-2.css
@@ -9275,15 +9275,15 @@ body {
animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
}
-/* Existing Loader Spinner */
+/* Enhanced Loader Spinner */
.loader {
display: inline-block;
- width: 1.5rem;
- height: 1.5rem;
- border: 2px solid rgba(0, 0, 0, 0.1);
+ width: var(--loader-size, 2rem); /* Dynamic size */
+ height: var(--loader-size, 2rem); /* Dynamic size */
+ border: var(--loader-border-width, 3px) solid rgba(0, 0, 0, 0.1); /* Customizable border width */
border-radius: 50%;
- border-top-color: #007bff;
- animation: spin 0.6s linear infinite;
+ border-top-color: var(--loader-color, #007bff); /* Customizable color */
+ animation: spin 0.8s ease-in-out infinite; /* Smooth animation */
margin-left: 8px;
}
@@ -9293,6 +9293,11 @@ body {
transform: rotate(360deg);
}
}
+/* Accessibility */
+.loader[aria-hidden=true] {
+ display: none;
+}
+
.loader i {
font-size: 1.2em;
color: #007bff;
@@ -9770,78 +9775,128 @@ body {
color: #4a90e2;
}
-.table-responsive {
- max-height: 500px;
- overflow-y: auto;
+:root {
+ --table-max-height: 500px;
+ --border-color: #ddd;
+ --header-bg-color: #f1f1f1;
+ --header-text-color: #555;
+ --row-hover-color: #e8e5f9;
+ --even-row-color: #f3f3f3;
+ --scrollbar-width: 6px;
+ --scrollbar-thumb-color: #bbb;
+ --scrollbar-thumb-hover-color: #888;
+ --scrollbar-track-color: #f4f4f4;
+ --font-family: Arial, sans-serif;
+ --font-size: 0.9rem;
+ --cell-padding: 12px 15px;
+ --border-radius: 5px;
+ --table-bg-color: #f8f9fa;
}
-.table-bordered {
- border: 1px solid #ddd;
+.table-responsive {
+ max-height: var(--table-max-height);
+ overflow: auto;
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ background-color: var(--table-bg-color);
+ padding: 10px;
+}
+
+.sticky-top-table {
+ position: relative;
+}
+
+.sticky-top-table table {
+ border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
}
.sticky-top-table table thead tr {
position: sticky;
top: 0;
- background-color: #f1f1f1;
- color: #555;
+ background-color: var(--header-bg-color);
+ color: var(--header-text-color);
font-weight: bold;
z-index: 10;
}
.dataframe {
- font-family: Arial, sans-serif;
- font-size: 0.9em;
+ font-family: var(--font-family);
+ font-size: var(--font-size);
}
+
.dataframe thead tr {
text-align: left;
- font-weight: bold;
}
+
.dataframe th,
.dataframe td {
- padding: 12px 15px;
- border-bottom: 1px solid #ddd;
+ padding: var(--cell-padding);
+ border-bottom: 1px solid var(--border-color);
}
+
.dataframe tbody tr:nth-of-type(even) {
- background-color: #f3f3f3;
-}
-.dataframe tbody tr:hover {
- background-color: #e8e5f9;
-}
-
-.scrollit {
- overflow-y: auto;
- overflow-x: auto;
- max-height: max-content;
- border-radius: 5px;
- border: 1px solid #ddd;
- background-color: #f8f9fa;
- padding: 10px;
-}
-
-.scrollit::-webkit-scrollbar {
- width: 6px; /* Thinner scrollbar for a minimalist look */
- height: 6px; /* Thinner horizontal scrollbar */
-}
-
-.scrollit::-webkit-scrollbar-thumb {
- background-color: #bbb; /* Neutral color for the scrollbar thumb */
- border-radius: 4px; /* Rounded edges for a smoother feel */
- transition: background-color 0.3s; /* Smooth transition effect */
-}
-
-.scrollit::-webkit-scrollbar-thumb:hover {
- background-color: #888; /* Darker color when hovered for better UX */
-}
-
-.scrollit::-webkit-scrollbar-track {
- background: #f4f4f4; /* Light background for the scrollbar track */
- border-radius: 4px; /* Matching rounded edges */
+ background-color: var(--even-row-color);
}
+.dataframe tbody tr:hover,
.table tbody tr:hover {
- background-color: #e8e5f9;
+ background-color: var(--row-hover-color);
}
+/* Scrollbar styles */
+.table-responsive {
+ scrollbar-width: thin;
+ scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+}
+
+.table-responsive::-webkit-scrollbar {
+ width: var(--scrollbar-width);
+ height: var(--scrollbar-width);
+}
+
+.table-responsive::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-thumb-color);
+ border-radius: calc(var(--scrollbar-width) / 2);
+ transition: background-color 0.3s ease;
+}
+
+.table-responsive::-webkit-scrollbar-thumb:hover {
+ background-color: var(--scrollbar-thumb-hover-color);
+}
+
+.table-responsive::-webkit-scrollbar-track {
+ background: var(--scrollbar-track-color);
+ border-radius: calc(var(--scrollbar-width) / 2);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .table-responsive {
+ font-size: calc(var(--font-size) * 0.9);
+ }
+ .dataframe th,
+ .dataframe td {
+ padding: 8px 10px;
+ }
+}
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+ .table-responsive::-webkit-scrollbar-thumb {
+ transition: none;
+ }
+}
+/* Print styles */
+@media print {
+ .table-responsive {
+ overflow: visible;
+ max-height: none;
+ }
+ .sticky-top-table table thead tr {
+ position: static;
+ }
+}
.text-xs {
font-size: 0.7rem;
}
@@ -11022,67 +11077,67 @@ form.user .btn-user {
@keyframes noise-anim {
0% {
- clip: rect(23px, 9999px, 58px, 0);
+ clip: rect(4px, 9999px, 76px, 0);
}
5% {
- clip: rect(32px, 9999px, 63px, 0);
+ clip: rect(77px, 9999px, 83px, 0);
}
10% {
- clip: rect(77px, 9999px, 97px, 0);
+ clip: rect(5px, 9999px, 17px, 0);
}
15% {
- clip: rect(50px, 9999px, 39px, 0);
+ clip: rect(40px, 9999px, 61px, 0);
}
20% {
- clip: rect(54px, 9999px, 93px, 0);
+ clip: rect(69px, 9999px, 49px, 0);
}
25% {
- clip: rect(25px, 9999px, 51px, 0);
+ clip: rect(13px, 9999px, 35px, 0);
}
30% {
- clip: rect(11px, 9999px, 71px, 0);
+ clip: rect(57px, 9999px, 43px, 0);
}
35% {
- clip: rect(61px, 9999px, 16px, 0);
+ clip: rect(29px, 9999px, 64px, 0);
}
40% {
- clip: rect(28px, 9999px, 48px, 0);
+ clip: rect(44px, 9999px, 44px, 0);
}
45% {
- clip: rect(88px, 9999px, 96px, 0);
+ clip: rect(20px, 9999px, 10px, 0);
}
50% {
- clip: rect(55px, 9999px, 59px, 0);
+ clip: rect(22px, 9999px, 75px, 0);
}
55% {
- clip: rect(58px, 9999px, 23px, 0);
+ clip: rect(25px, 9999px, 15px, 0);
}
60% {
- clip: rect(97px, 9999px, 45px, 0);
+ clip: rect(83px, 9999px, 18px, 0);
}
65% {
- clip: rect(15px, 9999px, 55px, 0);
+ clip: rect(84px, 9999px, 45px, 0);
}
70% {
- clip: rect(77px, 9999px, 36px, 0);
+ clip: rect(44px, 9999px, 69px, 0);
}
75% {
- clip: rect(60px, 9999px, 77px, 0);
+ clip: rect(24px, 9999px, 66px, 0);
}
80% {
- clip: rect(52px, 9999px, 71px, 0);
+ clip: rect(62px, 9999px, 70px, 0);
}
85% {
- clip: rect(4px, 9999px, 31px, 0);
+ clip: rect(61px, 9999px, 72px, 0);
}
90% {
- clip: rect(59px, 9999px, 53px, 0);
+ clip: rect(94px, 9999px, 33px, 0);
}
95% {
- clip: rect(73px, 9999px, 79px, 0);
+ clip: rect(18px, 9999px, 6px, 0);
}
100% {
- clip: rect(11px, 9999px, 39px, 0);
+ clip: rect(6px, 9999px, 56px, 0);
}
}
.error:after {
@@ -11100,67 +11155,67 @@ form.user .btn-user {
@keyframes noise-anim-2 {
0% {
- clip: rect(89px, 9999px, 11px, 0);
+ clip: rect(54px, 9999px, 40px, 0);
}
5% {
- clip: rect(67px, 9999px, 4px, 0);
+ clip: rect(78px, 9999px, 16px, 0);
}
10% {
- clip: rect(61px, 9999px, 21px, 0);
+ clip: rect(25px, 9999px, 74px, 0);
}
15% {
- clip: rect(78px, 9999px, 69px, 0);
+ clip: rect(95px, 9999px, 88px, 0);
}
20% {
- clip: rect(100px, 9999px, 89px, 0);
+ clip: rect(53px, 9999px, 99px, 0);
}
25% {
- clip: rect(51px, 9999px, 99px, 0);
+ clip: rect(21px, 9999px, 50px, 0);
}
30% {
- clip: rect(3px, 9999px, 85px, 0);
+ clip: rect(59px, 9999px, 80px, 0);
}
35% {
- clip: rect(24px, 9999px, 42px, 0);
+ clip: rect(57px, 9999px, 98px, 0);
}
40% {
- clip: rect(70px, 9999px, 3px, 0);
+ clip: rect(2px, 9999px, 72px, 0);
}
45% {
- clip: rect(33px, 9999px, 55px, 0);
+ clip: rect(19px, 9999px, 55px, 0);
}
50% {
- clip: rect(92px, 9999px, 31px, 0);
+ clip: rect(38px, 9999px, 17px, 0);
}
55% {
- clip: rect(86px, 9999px, 36px, 0);
+ clip: rect(63px, 9999px, 13px, 0);
}
60% {
- clip: rect(78px, 9999px, 71px, 0);
+ clip: rect(41px, 9999px, 3px, 0);
}
65% {
- clip: rect(80px, 9999px, 2px, 0);
+ clip: rect(82px, 9999px, 38px, 0);
}
70% {
- clip: rect(8px, 9999px, 50px, 0);
+ clip: rect(69px, 9999px, 3px, 0);
}
75% {
- clip: rect(43px, 9999px, 81px, 0);
+ clip: rect(28px, 9999px, 91px, 0);
}
80% {
- clip: rect(73px, 9999px, 91px, 0);
+ clip: rect(18px, 9999px, 63px, 0);
}
85% {
- clip: rect(60px, 9999px, 31px, 0);
+ clip: rect(14px, 9999px, 71px, 0);
}
90% {
- clip: rect(84px, 9999px, 12px, 0);
+ clip: rect(85px, 9999px, 44px, 0);
}
95% {
- clip: rect(45px, 9999px, 87px, 0);
+ clip: rect(87px, 9999px, 5px, 0);
}
100% {
- clip: rect(82px, 9999px, 5px, 0);
+ clip: rect(63px, 9999px, 97px, 0);
}
}
.error:before {
diff --git a/base/static/js/alert.js b/base/static/js/alert.js
new file mode 100644
index 000000000..c96a54805
--- /dev/null
+++ b/base/static/js/alert.js
@@ -0,0 +1,33 @@
+
+// Show an alert
+function showAlert(id, message) {
+ const alertElement = document.getElementById(id);
+
+ if (alertElement) {
+ const alertText = alertElement.querySelector("span");
+
+ // Update the alert message if provided
+ if (message) {
+ alertText.textContent = message;
+ }
+
+ // Show the alert
+ alertElement.style.display = "flex"; // Use flex for proper alignment
+ alertElement.classList.add("show"); // Add Bootstrap's fade-in class
+
+ // Auto-hide after 5 seconds
+ setTimeout(() => {
+ closeAlert(id);
+ }, 5000);
+ }
+}
+
+// Close an alert
+function closeAlert(id) {
+ const alertElement = document.getElementById(id);
+
+ if (alertElement) {
+ alertElement.style.display = "none"; // Hide the alert
+ alertElement.classList.remove("show"); // Remove Bootstrap's fade-in class
+ }
+}
\ No newline at end of file
diff --git a/base/static/js/counterfactuals.js b/base/static/js/counterfactuals.js
index 4b4dfc2ba..3f4ecab2c 100755
--- a/base/static/js/counterfactuals.js
+++ b/base/static/js/counterfactuals.js
@@ -1,5 +1,6 @@
import { create_selection, create_dataframe, create_div, transpose_table } from './methods.js'
+
// Add event listeners to both buttons
if (document.getElementById("new_x")) {
document.getElementById("new_x").addEventListener('click', function () {
@@ -56,7 +57,6 @@ $(document).ready(function () {
$('.plot_sample').click(function (event) {
$("#cfbtn_check").hide()
- document.getElementById("success-message").style.display = "none";
let isValid = true;
var errorMessage = "";
if (!$("input:radio[name=class_label]:checked").val()) {
@@ -72,8 +72,7 @@ $(document).ready(function () {
if (!isValid) {
event.preventDefault();
- document.getElementById('error_message_new_x_2').style.display = 'block';
- document.getElementById('error_message_new_x_2').textContent = errorMessage;
+ showAlert("error_message_new_x_2", errorMessage)
} else {
document.getElementById('error_message_new_x_2').style.display = 'none';
var class_label = $("input:radio[name=class_label]:checked").val();
@@ -95,6 +94,8 @@ $(document).ready(function () {
$("#cf_ecg_container").hide();
}
+
+ $("#cfbtn_3").hide()
$("#class_label_loader").show();
$.ajax({
method: 'POST',
@@ -103,6 +104,7 @@ $(document).ready(function () {
data: { 'action': "class_label_selection", 'class_label': class_label, 'cfrow_id': cfrow_id, "model_name": model_name },
success: function (ret) {
$("#class_label_loader").hide();
+ $("#cfbtn_3").show()
var ret = JSON.parse(ret)
var fig = ret["fig"]
@@ -247,11 +249,13 @@ $(document).ready(function () {
// #class_label
// #entries
+ $("#cf_results").hide();
+ $("#cfbtn_check").hide();
+
let isValid = true;
let errorMessage = '';
if (!($("#class_label_container").css("display") === "none")) {
- console.log(!$('input[name="class_label"]:checked').val())
if (!$('input[name="class_label"]:checked')) {
isValid = false;
errorMessage += 'Please select a class label and then an example entry.\n';
@@ -283,10 +287,8 @@ $(document).ready(function () {
// If not valid, show error message
if (!isValid) {
event.preventDefault();
- document.getElementById('error-message').style.display = 'block';
- document.getElementById('error-message').textContent = errorMessage;
+ showAlert("error-message", errorMessage);
} else {
- document.getElementById('error-message').style.display = 'hide';
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
var data_to_pass = {}
var constraint = ""
@@ -306,11 +308,11 @@ $(document).ready(function () {
});
data_to_pass = { 'action': "cf", "features_to_vary": JSON.stringify(features_to_vary), "model_name": model_name }
}
-
+
// hide button and original point row
// replace with loader
- $("#cfbtn_loader").show()
- $("#cfbtn").hide()
+ $("#cfbtn").hide();
+ $("#cfbtn_loader").show();
$.ajax({
method: 'POST',
url: '',
@@ -398,10 +400,6 @@ $(document).ready(function () {
if (document.getElementById("clicked_point")) {
$("#clicked_point").remove();
}
- // $("#original_data").append(cp_tb)
- // $("#counterfactual").append(cf_tb);
-
-
}
else if (dataset_type == "timeseries") {
// ecg
@@ -421,7 +419,7 @@ $(document).ready(function () {
}
$("#cfbtn_check").show()
- document.getElementById("success-message").style.display = "block";
+ showAlert("success-message", "Your operation completed successfully!");
}
},
error: function (row) {
@@ -513,6 +511,8 @@ $(document).ready(function () {
}
});
-document.getElementById("learnMoreBtn").addEventListener("click", function () {
- $('#glacierInfoModal').modal('show');
-});
\ No newline at end of file
+if (document.getElementById("learnMoreBtn")) {
+ document.getElementById("learnMoreBtn").addEventListener("click", function () {
+ $('#glacierInfoModal').modal('show');
+ });
+}
\ No newline at end of file
diff --git a/base/static/js/features_to_vary.js b/base/static/js/features_to_vary.js
index 9be8d3bf7..541f8680b 100644
--- a/base/static/js/features_to_vary.js
+++ b/base/static/js/features_to_vary.js
@@ -35,4 +35,5 @@ function sortByImportance() {
// Append sorted elements back to the list
features.forEach(feature => featureList.appendChild(feature));
-}
\ No newline at end of file
+}
+
diff --git a/base/static/js/home.js b/base/static/js/home.js
index 3133e3182..b2d9fbf29 100755
--- a/base/static/js/home.js
+++ b/base/static/js/home.js
@@ -22,6 +22,12 @@ $(document).ready(function () {
});
};
+
+ const $newOrLoad = $('#new_or_load');
+ const $viewPreTrainedButton = $('#viewPreTrainedButton');
+ const $datasetButtons = $('.btn-dataset');
+ const $timeseriesDatasets = $('#timeseries-datasets input[type="radio"]');
+
window.addEventListener('scroll', () => {
handleFadeAnimation();
});
@@ -61,6 +67,7 @@ $(document).ready(function () {
} else if (datasetType === "timeseries") {
setupTimeseriesDataset(ret);
}
+ localStorage.setItem("selectedDatasetType", datasetType)
}
function setupTabularDataset(ret) {
@@ -91,113 +98,168 @@ $(document).ready(function () {
$("#ts_confidence_div").append(figDiv1);
}
- $('.btn-dataset').click(function (e) {
- const df_name = $(this).is('#upload') ? "upload" : $(this).attr('id');
+ function handleDatasetClick(elementId) {
+ const df_name = elementId === "upload" ? "upload" : elementId;
$("#new_or_load_cached").hide();
resetContainers();
$("#upload_col").toggle(df_name === "upload");
$("#timeseries-datasets").toggle(df_name === "timeseries");
- $(this).toggleClass("active").siblings().removeClass("active");
- $(this).addClass("active");
+ $(`#${elementId}`).toggleClass("active").siblings().removeClass("active");
+ $(`#${elementId}`).addClass("active");
const timeseries_dataset = df_name === "timeseries" ? $("input:radio[name=timeseries_dataset]:checked").val() : "";
if (timeseries_dataset || (df_name !== "timeseries")) {
fetchDatasetData(timeseries_dataset || df_name);
+ localStorage.setItem('datasetSelected', 'true');
+ } else {
+ hideViewModelsButton();
+ localStorage.setItem('datasetSelected', 'false');
}
+ }
+
+ $('.btn-dataset').click(function () {
+ const elementId = $(this).attr('id');
+ handleDatasetClick(elementId);
+ });
+
+ // Bind click event to #timeseries-datasets
+ $('#timeseries-datasets').click(function () {
+ handleDatasetClick('timeseries');
+ });
+
+ const savedDataset = localStorage.getItem('selectedDatasetType');
+ if (savedDataset) {
+ if (savedDataset === 'tabular') {
+ $("#df").show();
+ $("#df_stats").show();
+ } else if (savedDataset === 'timeseries') {
+ $("#ts_confidence").show();
+ $("#ts_stats").show();
+ }
+ }
+
+ // Function to show the "View Pre-trained Models" button
+ function showViewModelsButton() {
+ $newOrLoad.show();
+ }
+
+ // Function to hide the "View Pre-trained Models" button
+ function hideViewModelsButton() {
+ $newOrLoad.hide();
+ }
+
+ // Function to check if a dataset is selected
+ function isDatasetSelected() {
+ return $datasetButtons.hasClass('active') || $timeseriesDatasets.is(':checked');
+ }
+
+ // Check localStorage on page load
+ if (localStorage.getItem('datasetSelected') === 'true') {
+ showViewModelsButton();
+ } else {
+ hideViewModelsButton();
+ }
+
+ // Handle "View Pre-trained Models" button click
+ $viewPreTrainedButton.on('click', function () {
+ // Add your logic here to navigate to the pre-trained models page
+ window.location.href = '/charts.html'; // Replace with your actual URL
});
});
-if (document.getElementById("viewModelsButton")) {
- document.getElementById("viewModelsButton").addEventListener("click", function () {
- // Prompt or redirect the user to the pre-trained models section
- window.location.href = "/charts.html"; // Replace with the actual URL
- });
-}
+// if (document.getElementById("viewModelsButton")) {
+// document.getElementById("viewModelsButton").addEventListener("click", function () {
+// // Prompt or redirect the user to the pre-trained models section
+// window.location.href = "/charts.html"; // Replace with the actual URL
+// });
+// }
+// $(document).ready(function () {
+// $('#timeseries-datasets').change(function () {
+// if ($("input[name=timeseries_dataset]:checked").length > 0) {
-$(document).ready(function () {
- $('#timeseries-datasets').change(function () {
- if ($("input[name=timeseries_dataset]:checked").length > 0) {
+// var timeseries_dataset = $("input:radio[name=timeseries_dataset]:checked").val();
- var timeseries_dataset = $("input:radio[name=timeseries_dataset]:checked").val();
+// $("#df").hide();
+// $("#df_stats").hide();
- $("#df_container").hide();
- $("#stats_container").hide();
- $("#figs").hide();
+// $("#df_container").hide();
+// $("#stats_container").hide();
+// $("#figs").hide();
- $("#ts_confidence_cached").hide()
- $("#ts_stats_cached").hide()
+// $("#ts_confidence_cached").hide()
+// $("#ts_stats_cached").hide()
- $("#ts_confidence").hide()
- $("#ts_stats").hide()
- var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
+// $("#ts_confidence").hide()
+// $("#ts_stats").hide()
+// var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
- $("#loader_ds").show();
- $("#loader_stats").show();
+// $("#loader_ds").show();
+// $("#loader_stats").show();
- $("#new_or_load").hide();
- $("#new_or_load_cached").hide();
+// $("#new_or_load").hide();
+// $("#new_or_load_cached").hide();
- $.ajax({
- method: 'POST',
- url: '',
- headers: { 'X-CSRFToken': csrftoken, },
- data: { 'action': "timeseries-dataset", 'timeseries_dataset': timeseries_dataset },
- success: function (values) {
- $("#loader_ds").hide();
- $("#loader_stats").hide();
- // fetch data
- // remove data if already displayed
- if (document.getElementById("df_container")) {
- $("#pretrained_radio").remove();
- $("#df_container").remove();
- $("#stats_container").remove();
- $("#feature1").remove();
- $("#feature2").remove();
- $("#label").remove();
- }
+// $.ajax({
+// method: 'POST',
+// url: '',
+// headers: { 'X-CSRFToken': csrftoken, },
+// data: { 'action': "timeseries-dataset", 'timeseries_dataset': timeseries_dataset },
+// success: function (values) {
+// $("#loader_ds").hide();
+// $("#loader_stats").hide();
+// // fetch data
+// // remove data if already displayed
+// if (document.getElementById("df_container")) {
+// $("#pretrained_radio").remove();
+// $("#df_container").remove();
+// $("#stats_container").remove();
+// $("#feature1").remove();
+// $("#feature2").remove();
+// $("#label").remove();
+// }
- $("#new_or_load").show();
+// $("#new_or_load").show();
- if (document.getElementById("ts_confidence_container")) {
- $("#ts_confidence_container").remove();
- $("#ts_stats_container").remove();
- }
+// if (document.getElementById("ts_confidence_container")) {
+// $("#ts_confidence_container").remove();
+// $("#ts_stats_container").remove();
+// }
- var ret = JSON.parse(values)
- var dataset_type = ret["dataset_type"]
+// var ret = JSON.parse(values)
+// var dataset_type = ret["dataset_type"]
- if (values) {
- // timeseries
- // var feature = ret["feature"]
- var fig = ret["fig"]
- var fig1 = ret["fig1"]
+// if (values) {
+// // timeseries
+// // var feature = ret["feature"]
+// var fig = ret["fig"]
+// var fig1 = ret["fig1"]
- var iDiv = document.createElement('div');
- iDiv.id = 'ts_confidence_container';
- iDiv.innerHTML = fig;
- iDiv.setAttribute("class", "plotly_fig")
+// var iDiv = document.createElement('div');
+// iDiv.id = 'ts_confidence_container';
+// iDiv.innerHTML = fig;
+// iDiv.setAttribute("class", "plotly_fig")
- var iDiv1 = document.createElement('div');
- iDiv1.id = 'ts_stats_container';
- iDiv1.innerHTML = fig1;
- iDiv1.setAttribute("class", "plotly_fig")
+// var iDiv1 = document.createElement('div');
+// iDiv1.id = 'ts_stats_container';
+// iDiv1.innerHTML = fig1;
+// iDiv1.setAttribute("class", "plotly_fig")
- $("#ts_stats").show();
- $("#ts_confidence").show();
+// $("#ts_stats").show();
+// $("#ts_confidence").show();
- $("#ts_stats_div").append(iDiv);
- $("#ts_confidence_div").append(iDiv1);
- }
- },
- error: function (ret) {
- console.log("All bad")
- }
+// $("#ts_stats_div").append(iDiv);
+// $("#ts_confidence_div").append(iDiv1);
+// }
+// },
+// error: function (ret) {
+// console.log("All bad")
+// }
- });
- }
- })
-});
+// });
+// }
+// })
+// });
// $(document).ready(function () {
// $('#radio_buttons').change(function () {
diff --git a/base/static/js/methods.js b/base/static/js/methods.js
index 557bc1c16..1f26bddf6 100755
--- a/base/static/js/methods.js
+++ b/base/static/js/methods.js
@@ -191,7 +191,7 @@ function clearPreviousContent(ids = [
"#feature2",
"#label",
"#ts_confidence_container",
- "#ts_stats_container"
+ "#ts_stats_container",
]) {
ids.forEach(id => {
const element = document.querySelector(id);
diff --git a/base/static/js/radio_model.js b/base/static/js/radio_model.js
index 3306b7427..6e450de98 100755
--- a/base/static/js/radio_model.js
+++ b/base/static/js/radio_model.js
@@ -114,76 +114,78 @@ $(document).ready(function () {
}
});
- document.getElementById('confirmDeleteButton').addEventListener('click', function () {
- const fileNameValue = this.getAttribute('data-file-value');
- const fileName = this.getAttribute('data-file');
- const csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
- const uploadedDataset = $("input:radio[name=radio_buttons]:checked").val();
- // AJAX request to delete file
- $.ajax({
- type: 'POST',
- url: '', // Add the URL where this request should go
- data: {
- action: 'delete_pre_trained',
- model_name: fileNameValue,
- csrfmiddlewaretoken: csrftoken // Django CSRF token
- },
- success: function () {
- // Remove the file entry from the UI
- const fileElement = $(`[data-file="${fileName}"]`).closest('.form-check');
- fileElement.remove();
-
- // Check if there are any remaining .form-check elements
- if ($('#radio_buttons .form-check').length === 0) {
- // Replace the #radio_buttons content with the fallback message
- const radioButtonsContainer = document.querySelector('#radio_buttons');
- radioButtonsContainer.innerHTML = `
+ if (document.getElementById('confirmDeleteButton')) {
+ document.getElementById('confirmDeleteButton').addEventListener('click', function () {
+ const fileNameValue = this.getAttribute('data-file-value');
+ const fileName = this.getAttribute('data-file');
+ const csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
+ const uploadedDataset = $("input:radio[name=radio_buttons]:checked").val();
+ // AJAX request to delete file
+ $.ajax({
+ type: 'POST',
+ url: '', // Add the URL where this request should go
+ data: {
+ action: 'delete_pre_trained',
+ model_name: fileNameValue,
+ csrfmiddlewaretoken: csrftoken // Django CSRF token
+ },
+ success: function () {
+ // Remove the file entry from the UI
+ const fileElement = $(`[data-file="${fileName}"]`).closest('.form-check');
+ fileElement.remove();
+
+ // Check if there are any remaining .form-check elements
+ if ($('#radio_buttons .form-check').length === 0) {
+ // Replace the #radio_buttons content with the fallback message
+ const radioButtonsContainer = document.querySelector('#radio_buttons');
+ radioButtonsContainer.innerHTML = `
<p class="text-danger">
There are no available pre-trained models.
Please <a href="/train.html" class="text-primary">train a model</a>.
</p>
`;
- }
-
- // Attach a success message to the modal
- const modalBody = document.querySelector('#deleteFileModal .modal-body');
- modalBody.innerHTML = `
+ }
+
+ // Attach a success message to the modal
+ const modalBody = document.querySelector('#deleteFileModal .modal-body');
+ modalBody.innerHTML = `
<div class="alert alert-success mb-3" role="alert">
<i class="fas fa-check-circle mr-2"></i>
The file <strong>${fileName}</strong> has been successfully deleted.
</div>
`;
-
- // Optionally hide the modal after a delay
- setTimeout(() => {
- $('#deleteFileModal').modal('hide');
- modalBody.innerHTML = ''; // Clear the message after hiding
- }, 2000);
-
- // Reset containers if the deleted file is the uploaded dataset
- if (fileName === uploadedDataset) {
- resetContainers();
- }
- },
-
- error: function () {
- // Attach an error message to the modal
- const modalBody = document.querySelector('#deleteFileModal .modal-body');
- modalBody.innerHTML = `
+
+ // Optionally hide the modal after a delay
+ setTimeout(() => {
+ $('#deleteFileModal').modal('hide');
+ modalBody.innerHTML = ''; // Clear the message after hiding
+ }, 2000);
+
+ // Reset containers if the deleted file is the uploaded dataset
+ if (fileName === uploadedDataset) {
+ resetContainers();
+ }
+ },
+
+ error: function () {
+ // Attach an error message to the modal
+ const modalBody = document.querySelector('#deleteFileModal .modal-body');
+ modalBody.innerHTML = `
<div class="alert alert-danger mb-3" role="alert">
<i class="fas fa-times-circle mr-2"></i>
An error occurred while deleting the file. Please try again.
</div>
`;
-
- // Optionally reset the modal content after a delay
- setTimeout(() => {
- modalBody.innerHTML = `
+
+ // Optionally reset the modal content after a delay
+ setTimeout(() => {
+ modalBody.innerHTML = `
<p class="mb-1">Delete <span id="fileToDeleteName" class="font-weight-bold"></span> pre-trained classifier on <span class="font-weight-bold"> {{ df_name }} </span> dataset?</p>
<small class="text-muted">This action is permanent.</small>
`;
- }, 3000);
- }
+ }, 3000);
+ }
+ });
});
- });
+ }
});
diff --git a/base/static/scss/utilities/_animation.scss b/base/static/scss/utilities/_animation.scss
index 895759b40..563595f60 100755
--- a/base/static/scss/utilities/_animation.scss
+++ b/base/static/scss/utilities/_animation.scss
@@ -36,15 +36,15 @@
animation-duration: 200ms;
animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
}
-/* Existing Loader Spinner */
+/* Enhanced Loader Spinner */
.loader {
display: inline-block;
- width: 1.5rem;
- height: 1.5rem;
- border: 2px solid rgba(0, 0, 0, 0.1);
+ width: var(--loader-size, 2rem); /* Dynamic size */
+ height: var(--loader-size, 2rem); /* Dynamic size */
+ border: var(--loader-border-width, 3px) solid rgba(0, 0, 0, 0.1); /* Customizable border width */
border-radius: 50%;
- border-top-color: #007bff;
- animation: spin 0.6s linear infinite;
+ border-top-color: var(--loader-color, #007bff); /* Customizable color */
+ animation: spin 0.8s ease-in-out infinite; /* Smooth animation */
margin-left: 8px;
}
@@ -55,6 +55,11 @@
}
}
+/* Accessibility */
+.loader[aria-hidden="true"] {
+ display: none;
+}
+
.loader i {
font-size: 1.2em;
diff --git a/base/static/scss/utilities/_tables.scss b/base/static/scss/utilities/_tables.scss
index a0bdba5fa..fc6788bf9 100644
--- a/base/static/scss/utilities/_tables.scss
+++ b/base/static/scss/utilities/_tables.scss
@@ -1,85 +1,126 @@
-.table-responsive {
- max-height: 500px;
- overflow-y: auto;
+:root {
+ --table-max-height: 500px;
+ --border-color: #ddd;
+ --header-bg-color: #f1f1f1;
+ --header-text-color: #555;
+ --row-hover-color: #e8e5f9;
+ --even-row-color: #f3f3f3;
+ --scrollbar-width: 6px;
+ --scrollbar-thumb-color: #bbb;
+ --scrollbar-thumb-hover-color: #888;
+ --scrollbar-track-color: #f4f4f4;
+ --font-family: Arial, sans-serif;
+ --font-size: 0.9rem;
+ --cell-padding: 12px 15px;
+ --border-radius: 5px;
+ --table-bg-color: #f8f9fa;
}
-.table-bordered {
- border: 1px solid #ddd;
+.table-responsive {
+ max-height: var(--table-max-height);
+ overflow: auto;
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ background-color: var(--table-bg-color);
+ padding: 10px;
+}
+
+.sticky-top-table {
+ position: relative;
+}
+
+.sticky-top-table table {
+ border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
}
.sticky-top-table table thead tr {
position: sticky;
top: 0;
- background-color: #f1f1f1;
- color: #555;
+ background-color: var(--header-bg-color);
+ color: var(--header-text-color);
font-weight: bold;
z-index: 10;
}
.dataframe {
- font-family: Arial, sans-serif;
- font-size: 0.9em;
-
- thead tr {
- text-align: left;
- font-weight: bold;
- }
-
- th,
- td {
- padding: 12px 15px;
- border-bottom: 1px solid #ddd;
- }
-
- tbody tr:nth-of-type(even) {
- background-color: #f3f3f3;
- }
-
- tbody tr:hover {
- background-color: #e8e5f9;
- }
+ font-family: var(--font-family);
+ font-size: var(--font-size);
}
-.scrollit {
- overflow-y: auto;
-
- overflow-x: auto;
-
- max-height: max-content;
-
- border-radius: 5px;
-
- border: 1px solid #ddd;
-
- background-color: #f8f9fa;
-
- padding: 10px;
+.dataframe thead tr {
+ text-align: left;
}
-.scrollit::-webkit-scrollbar {
- width: 6px; /* Thinner scrollbar for a minimalist look */
-
- height: 6px; /* Thinner horizontal scrollbar */
+.dataframe th,
+.dataframe td {
+ padding: var(--cell-padding);
+ border-bottom: 1px solid var(--border-color);
}
-.scrollit::-webkit-scrollbar-thumb {
- background-color: #bbb; /* Neutral color for the scrollbar thumb */
-
- border-radius: 4px; /* Rounded edges for a smoother feel */
-
- transition: background-color 0.3s; /* Smooth transition effect */
-}
-
-.scrollit::-webkit-scrollbar-thumb:hover {
- background-color: #888; /* Darker color when hovered for better UX */
-}
-
-.scrollit::-webkit-scrollbar-track {
- background: #f4f4f4; /* Light background for the scrollbar track */
-
- border-radius: 4px; /* Matching rounded edges */
+.dataframe tbody tr:nth-of-type(even) {
+ background-color: var(--even-row-color);
}
+.dataframe tbody tr:hover,
.table tbody tr:hover {
- background-color: #e8e5f9;
+ background-color: var(--row-hover-color);
}
+
+/* Scrollbar styles */
+.table-responsive {
+ scrollbar-width: thin;
+ scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+}
+
+.table-responsive::-webkit-scrollbar {
+ width: var(--scrollbar-width);
+ height: var(--scrollbar-width);
+}
+
+.table-responsive::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-thumb-color);
+ border-radius: calc(var(--scrollbar-width) / 2);
+ transition: background-color 0.3s ease;
+}
+
+.table-responsive::-webkit-scrollbar-thumb:hover {
+ background-color: var(--scrollbar-thumb-hover-color);
+}
+
+.table-responsive::-webkit-scrollbar-track {
+ background: var(--scrollbar-track-color);
+ border-radius: calc(var(--scrollbar-width) / 2);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .table-responsive {
+ font-size: calc(var(--font-size) * 0.9);
+ }
+
+ .dataframe th,
+ .dataframe td {
+ padding: 8px 10px;
+ }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+ .table-responsive::-webkit-scrollbar-thumb {
+ transition: none;
+ }
+}
+
+/* Print styles */
+@media print {
+ .table-responsive {
+ overflow: visible;
+ max-height: none;
+ }
+
+ .sticky-top-table table thead tr {
+ position: static;
+ }
+}
\ No newline at end of file
diff --git a/base/templates/base/charts.html b/base/templates/base/charts.html
index 157251bd1..742007d2b 100755
--- a/base/templates/base/charts.html
+++ b/base/templates/base/charts.html
@@ -169,29 +169,29 @@
</div>
</div>
</div>
-
- <div class="row mt-3" id="new_or_load">
- <div class="col d-flex justify-content-center">
- <div class="text-center mt-4 d-flex justify-content-center">
- <!-- Back to Dataset Selection Button -->
- <button id="backToDatasetButton" class="btn btn-view-models mr-3">
- <i class="fas fa-arrow-left mr-2"></i> Back to Dataset Selection
- </button>
-
- <!-- View Counterfactuals Button -->
- <button id="viewCounterfactualsButton" class="btn btn-view-models">
- View Counterfactuals <i class="fas fa-arrow-right ml-2"></i>
- </button>
- </div>
- </div>
- </div>
<!-- Details and PCA Container -->
<div class="row" id="details_cr_container"></div>
<div class="row" id="pca_fi_container"></div>
+ <div class="container-fluid py-4" id="new_or_load">
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <!-- Back to Dataset Selection Button -->
+ <button id="backToDatasetButton" class="btn btn-outline-primary mr-3">
+ <i class="fas fa-arrow-left mr-2"></i> Back to Dataset Selection
+ </button>
+
+ <!-- View Counterfactuals Button -->
+ <button id="viewCounterfactualsButton" class="btn btn-outline-primary">
+ View Counterfactuals <i class="fas fa-arrow-right ml-2"></i>
+ </button>
+ </div>
+ </div>
+ </div>
</div>
<!-- /.container-fluid -->
+
</div>
<script type="module" src="{% static 'js/radio_model.js' %}"></script>
diff --git a/base/templates/base/counterfactuals.html b/base/templates/base/counterfactuals.html
index d90f6eb4f..3aa7388b4 100755
--- a/base/templates/base/counterfactuals.html
+++ b/base/templates/base/counterfactuals.html
@@ -122,7 +122,7 @@
<!-- Step Title Header -->
<div class="row mb-3">
<div class="col-12">
- <h5 class="text-left font-weight-bold" style="padding-top: 10px;">Step 1: Pick a Pre-trained Model/Classifier</h5>
+ <h5 class="text-left" style="padding-top: 10px;">Step 1: Pick a Pre-trained Model/Classifier</h5>
</div>
</div>
@@ -175,7 +175,7 @@
<!-- Step Title Header -->
<div class="row mb-3">
<div class="col-12">
- <h5 class="text-left font-weight-bold" style="padding-top: 10px;">Step 2: Select a Constraint/Experiment</h5>
+ <h5 class="text-left" style="padding-top: 10px;">Step 2: Select a Constraint/Experiment</h5>
</div>
</div>
<div class="card border-0 shadow-sm h-100 animate-card">
@@ -384,7 +384,7 @@
<div class="row" id="class_label_container" style="display: none; padding-top: 70px;">
<!-- Step Title Header -->
<div class="col-12 mb-4">
- <h5 class="text-left font-weight-bold">Step 2: Pick a Sample Data</h5>
+ <h5 class="text-left">Step 3: Pick a Sample Data</h5>
</div>
<!-- Left Column: Data Samples for Experiment -->
@@ -425,15 +425,89 @@
</div>
</div>
- <!-- Right Column: Selected Data Sample -->
- <div class="col-xl-8 col-lg-8 mb-4" id="ecg_data_container" style="display: none;">
- <div class="card border-0 shadow-sm h-100 animate-card">
+ <div class="col-lg-8 mb-4" id="ecg_data_container" style="display: none;">
+ <div class="card border-0 shadow-sm h-100">
<div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
- <h6 class="m-0 font-weight-bold">Selected Data Sample</h6>
+ <h5 class="m-0 font-weight-bold">Selected Data Sample</h5>
<i class="fas fa-wave-square text-muted"></i>
</div>
- <div class="card-body d-flex justify-content-center align-items-center" id="ecg_data">
- <!-- Original Timeseries data visualization will go here -->
+ <div class="card-body d-flex flex-column">
+ <div class="bg-light p-3 rounded flex-grow-1 mb-4" style="min-height: 200px;">
+ <div id="ecg_data" class="d-flex justify-content-center align-items-center h-100">
+ <!-- Original Timeseries data visualization will go here -->
+ </div>
+ </div>
+
+ <div class="d-flex flex-column flex-md-row justify-content-center align-items-center mb-3">
+ <button
+ class="btn btn-primary btn-lg mb-2 mb-md-0 mr-md-2 run_counterfactual"
+ id="cfbtn"
+ name="cf"
+ title="Click to start counterfactual generation"
+ >
+ <i class="fas fa-play mr-2"></i> Run Counterfactuals
+ </button>
+
+ <div
+ class="loader text-primary ml-2 mb-2 mb-md-0"
+ id="cfbtn_loader"
+ style="display: none;"
+ role="status"
+ >
+ <span class="sr-only">Loading...</span>
+ </div>
+
+ <button
+ class="btn btn-outline-success btn-lg"
+ id="cfbtn_check"
+ style="display: none;"
+ title="View the generated results"
+ >
+ <i class="fas fa-chart-line mr-2"></i> View Results
+ </button>
+ </div>
+
+ <div id="message-container">
+ <div
+ id="error-message"
+ class="alert alert-danger alert-dismissible fade"
+ role="alert"
+ style="display: none"
+ >
+ <div class="d-flex align-items-center">
+ <i class="fas fa-exclamation-triangle mr-2"></i>
+ <span>Please fill out all required fields.</span>
+ </div>
+ <button
+ type="button"
+ class="close"
+ aria-label="Close"
+ onclick="closeAlert('error-message')"
+ >
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+
+ <div
+ id="success-message"
+ class="alert alert-success alert-dismissible fade"
+ role="alert"
+ style="display: none"
+ >
+ <div class="d-flex align-items-center">
+ <i class="fas fa-check-circle mr-2"></i>
+ <span>Counterfactuals were generated successfully.</span>
+ </div>
+ <button
+ type="button"
+ class="close"
+ aria-label="Close"
+ onclick="closeAlert('success-message')"
+ >
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -441,10 +515,22 @@
{% endif %}
<div class="d-flex justify-content-center mt-4">
- <div id="error_message_new_x_2" class="alert alert-danger alert-dismissible text-center" style="display: none; width: 100%; max-width: 400px;" role="alert">
- <i class="fas fa-exclamation-triangle"></i>
- <span>Please correct errors before proceeding.</span>
- <button type="button" class="close" aria-label="Close" onclick="$('#error_message_new_x_2').hide();">
+ <div
+ id="error_message_new_x_2"
+ class="alert alert-danger alert-dismissible fade"
+ role="alert"
+ style="display: none;"
+ >
+ <div class="d-flex align-items-center">
+ <i class="fas fa-exclamation-triangle mr-2"></i>
+ <span>Please fill out all required fields.</span>
+ </div>
+ <button
+ type="button"
+ class="close"
+ aria-label="Close"
+ onclick="closeAlert('error_message_new_x_2')"
+ >
<span aria-hidden="true">×</span>
</button>
</div>
@@ -485,58 +571,168 @@
</div>
</div>
</div>
-
-
- <div class="row justify-content-start" id="features_to_vary" style="display: none;">
- <!-- Features to Vary Card -->
- <div class="col-12 mb-3" style="padding-top: 70px;">
- <h5 class="text-left font-weight-bold" style="padding-top: 10px;">Step 3: Select the features to vary and execute</h5>
- </div>
-
- <div class="col-xl-12 col-lg-12">
- <div class="card shadow-sm border-1 animate-card">
- <!-- Card Header -->
- <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
- <h6 class="m-0">Features to Vary</h6>
- <i id="toggle-btn" class="arrow fas fa-chevron-circle-up"></i>
- </div>
- <div id="dropdown-div" class="card-body" style="display: block;"> <!-- Initially expanded -->
- <!-- Feature Selection Container with Scroll -->
- <div id="features_to_vary_container" style="max-height: 300px; overflow: auto; padding: 20px 20px;">
- <!-- Search Box -->
- <input type="text" id="searchInput" class="form-control mb-3" placeholder="Search features...">
-
- <!-- Buttons -->
- <div class="d-flex flex-wrap justify-content-between mb-2">
- <button class="btn btn-outline-primary mb-2 flex-fill mr-2" onclick="selectAll(true)">Select All</button>
- <button class="btn btn-outline-danger mb-2 flex-fill mr-2" onclick="selectAll(false)">Deselect All</button>
- <button class="btn btn-outline-secondary mb-2 flex-fill" onclick="sortByImportance()">Sort by Importance</button>
- </div>
- </div>
- </div>
+
+ <div class="container-fluid py-4" id="features_to_vary" style="display: none;">
+ <!-- Header -->
+ <h5 class="mb-4 text-center">Select Features to Vary</h5>
+
+ <!-- Features Card -->
+ <div class="bg-white rounded shadow-sm">
+ <!-- Card Header -->
+ <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
+ <h6 class="mb-0">Available Features</h6>
+ <button
+ id="toggle-btn"
+ class="btn btn-light p-0 border-0"
+ aria-expanded="true"
+ aria-controls="dropdown-div"
+ title="Toggle visibility"
+ >
+ <i class="fas fa-chevron-up"></i>
+ </button>
</div>
+
+ <!-- Card Content -->
+ <div id="dropdown-div" class="container-fluid py-4">
+ <div class="row">
+ <div class="col-12">
+ <!-- Search Area with Secondary Buttons -->
+ <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
+ <!-- Search Input -->
+ <div class="flex-grow-1 mr-3 mb-2 mb-md-0">
+ <input
+ type="text"
+ id="searchInput"
+ class="form-control"
+ placeholder="Search features..."
+ >
+ </div>
+
+ <!-- Secondary Actions -->
+ <div class="btn-group">
+ <button
+ class="btn btn-outline-secondary btn-sm"
+ onclick="selectAll(true)"
+ title="Select all features"
+ >
+ <i class="fas fa-check-square mr-1"></i> Select All
+ </button>
+ <button
+ class="btn btn-outline-secondary btn-sm"
+ onclick="selectAll(false)"
+ title="Deselect all features"
+ >
+ <i class="fas fa-square mr-1"></i> Deselect All
+ </button>
+ <button
+ class="btn btn-outline-secondary btn-sm"
+ onclick="sortByImportance()"
+ title="Sort features by importance"
+ >
+ <i class="fas fa-sort-amount-down mr-1"></i> Sort
+ </button>
+ </div>
+ </div>
+
+ <!-- Feature List -->
+ <div
+ id="features_to_vary_container"
+ class="border rounded p-3 mb-4"
+ style="max-height: 300px; overflow-y: auto; background-color: #f9f9f9;"
+ >
+ <!-- Features will be dynamically added here -->
+ </div>
+
+ <!-- Primary Actions and Messages -->
+ <div class="row align-items-start">
+ <!-- Messages Section -->
+ <div class="col-12 col-md-6 mb-3 mb-md-0">
+ <div id="message-container">
+ <!-- Error Message -->
+ <div
+ id="error-message"
+ class="alert alert-danger alert-dismissible fade"
+ role="alert"
+ style="display: none;"
+ >
+ <div class="d-flex align-items-center">
+ <i class="fas fa-exclamation-triangle mr-2"></i>
+ <span>Please fill out all required fields.</span>
+ </div>
+ <button
+ type="button"
+ class="close"
+ aria-label="Close"
+ onclick="closeAlert('error-message')"
+ >
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+
+ <!-- Success Message -->
+ <div
+ id="success-message"
+ class="alert alert-success alert-dismissible fade"
+ role="alert"
+ style="display: none;"
+ >
+ <div class="d-flex align-items-center">
+ <i class="fas fa-check-circle mr-2"></i>
+ <span>Counterfactuals were generated successfully.</span>
+ </div>
+ <button
+ type="button"
+ class="close"
+ aria-label="Close"
+ onclick="closeAlert('success-message')"
+ >
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
+ </div>
+ <!-- Buttons Section -->
+ <div class="col-12 col-md-6">
+ <div class="d-flex flex-wrap justify-content-md-end align-items-center">
+ <!-- Run Counterfactuals Button -->
+ <button
+ class="btn btn-primary px-4 py-2 align-items-center run_counterfactual mb-2 mb-md-0 mr-md-2"
+ id="cfbtn"
+ name="cf"
+ title="Click to start counterfactual generation"
+ >
+ <i class="fas fa-play mr-2"></i> Run Counterfactuals
+ </button>
+
+ <!-- Loading Spinner -->
+ <div
+ class="loader text-primary ml-2 mb-2 mb-md-0"
+ id="cfbtn_loader"
+ style="display: none;"
+ role="status"
+ >
+ <span class="sr-only">Loading...</span>
+ </div>
+
+ <!-- View Results Button -->
+ <button
+ class="btn btn-outline-success px-4 py-2 mb-2 mb-md-0"
+ id="cfbtn_check"
+ style="display: none;"
+ title="View the generated results"
+ >
+ <i class="fas fa-chart-line mr-2"></i> View Results
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
{% endif %}
- <!-- cfbtn_container Section -->
- <div class="row" id="cfbtn_container" style="display: none; padding-top: 20px; padding-bottom: 20px;">
- <div class="col-sm d-flex justify-content- flex-column align-items-center">
- <div id="error-message" class="alert alert-danger align-items-center" style="display: none; width: 100%; max-width: 400px;" role="alert">
- <i class="fas fa-exclamation-triangle"></i> Please fill out all required fields.
- </div>
-
- <div id="success-message" class="alert alert-success align-items-center" style="display: none; width: 100%; max-width: 400px;" role="alert">
- <i class="fas fa-check-circle"></i> Counterfactuals were generated succefully.
- </div>
- <span class="loader" id="cfbtn_loader" style="display: none;"></span>
-
- <button class="btn btn-outline-primary mb-2 flex-fill mr-2 run_counterfactual" id="cfbtn" role="button" name="cf">Run Counterfactuals!</button>
- <button class="btn btn-outline-primary mb-2 flex-fill mr-2" id="cfbtn_check" role="button" style="display: none;">View Counterfactuals</button>
-
- </div>
- </div>
-
{% if dataset_type == "tabular" %}
<div class="row" id="cf_results" style="display: none; padding-top: 200px;">
<!-- Step 4 Title -->
@@ -597,22 +793,19 @@
{% endif %}
- <div class="row mt-3" id="new_or_load">
- <div class="col d-flex justify-content-center">
- <div class="text-center mt-4 d-flex justify-content-center">
- <!-- Back to Dataset Selection Button -->
- <button id="backToDatasetButton" class="btn btn-view-models mr-3">
- <i class="fas fa-arrow-left mr-2"></i> Try another dataset
+ <!-- Navigation -->
+ <div class="container-fluid py-4" id="new_or_load">
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <button id="viewPreTrainedButton" class="btn btn-outline-primary">
+ <i class="fas fa-arrow-left ml-1"></i> View Another Model
</button>
-
- <!-- View Counterfactuals Button -->
- <button id="viewPreTrainedButton" class="btn btn-view-models">
- View another pre trained model <i class="fas fa-arrow-right ml-2"></i>
+ <button id="backToDatasetButton" class="btn btn-outline-secondary mr-2">
+ Try Another Dataset <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
-
</div>
</div>
@@ -621,5 +814,6 @@
<script type="module" src="{% static 'js/counterfactuals.js' %}"></script>
<script type="module" src="{% static 'js/radio_model.js' %}"></script>
<script src="{% static 'js/features_to_vary.js' %}"></script>
+<script src="{% static 'js/alert.js' %}"></script>
{% endblock content %}
diff --git a/base/templates/base/home.html b/base/templates/base/home.html
index af2a1165c..858262b98 100755
--- a/base/templates/base/home.html
+++ b/base/templates/base/home.html
@@ -439,7 +439,13 @@
<h6 class="m-0 font-weight-semibold text-dark">Data</h6>
</div>
<div class="card-body">
- <div class="scrollit table-responsive sticky-top-table" id="df_div"></div>
+ <div class="scrollit table-responsive table table-bordered sticky-top-table" id="df_div">
+ {% if data_to_display %}
+ <div id="df_container">
+ {{ data_to_display|safe }}
+ </div>
+ {% endif %}
+ </div>
</div>
</div>
</div>
@@ -450,9 +456,28 @@
<div class="card-header bg-light py-3 border-bottom">
<h6 class="m-0 font-weight-semibold text-dark">Stats</h6>
</div>
- <div class="card-body" id="stats_div">
- <div class="d-flex justify-content-center mb-3" id="selection">
-
+ <div class="card-body" >
+ <div class="d-flex flex-column align-items-stretch" id="stats_div">
+ {% if data_to_display %}
+ <div class="d-flex mb-3 " id="selection">
+ <select class="custom-select mr-2" id="feature1">
+ {% for feature in features %}
+ <option value="{{ feature }}" {% if feature == feature1 %}selected{% endif %}>{{ feature }}</option>
+ {% endfor %}
+ </select>
+ <select class="custom-select mr-2" id="feature2">
+ {% for feature in features %}
+ <option value="{{ feature }}" {% if feature == feature2 %}selected{% endif %}>{{ feature }}</option>
+ {% endfor %}
+ </select>
+ <select class="custom-select" id="label">
+ {% for label in labels %}
+ <option value="{{ label }}" {% if label == curlabel %}selected{% endif %}>{{ label }}</option>
+ {% endfor %}
+ </select>
+ </div>
+ <div class="plotly_fig" id="stats_container">{{ fig|safe }}</div>
+ {% endif %}
</div>
<div class="d-flex justify-content-center">
<span class="loader" id="loader_stats" style="display: none;"></span>
@@ -468,7 +493,11 @@
<h6 class="m-0 font-weight-semibold text-dark">Confidence</h6>
</div>
<div class="card-body">
- <div id="ts_confidence_div"></div>
+ <div id="ts_confidence_div">
+ {% if fig1 %}
+ <div class="plotly_fig" id="ts_confidence_container">{{ fig1|safe }}</div>
+ {% endif %}
+ </div>
</div>
</div>
</div>
@@ -484,7 +513,11 @@
<div class="d-flex justify-content-center">
<span class="loader" id="loader_stats" style="display: none;"></span>
</div>
- <div id="ts_stats_div"></div>
+ <div id="ts_stats_div">
+ {% if fig %}
+ <div class="plotly_fig" id="ts_stats_container">{{ fig|safe }}</div>
+ {% endif %}
+ </div>
</div>
</div>
</div>
@@ -499,37 +532,37 @@
<h5 class="modal-title" id="labelSelectionModalLabel">Assign Positive and Negative Labels</h5>
</div>
<!-- Modal Body -->
- <div class="modal-body">
- {% csrf_token %}
- <p class="text-muted">Please assign one label as <strong>Positive</strong> and another as <strong>Negative</strong>.</p>
- <!-- Positive Label Dropdown -->
- <div class="form-group">
- <label for="positive-label" class="font-weight-semibold">Positive Label</label>
- <select id="positive-label" class="form-control">
- <option value="" disabled selected>Select a positive label</option>
- <!-- Options populated dynamically -->
- </select>
- </div>
- <!-- Negative Label Dropdown -->
- <div class="form-group mt-3">
- <label for="negative-label" class="font-weight-semibold">Negative Label</label>
- <select id="negative-label" class="form-control">
- <option value="" disabled selected>Select a negative label</option>
- <!-- Options populated dynamically -->
- </select>
- </div>
- <!-- Error Message -->
- <div id="selection-error" class="alert alert-danger d-none mt-3">
- <i class="fas fa-exclamation-triangle"></i> Labels must be different. Please select one positive and one negative label.
- </div>
- <!-- Loader -->
- <div id="loader" class="d-none text-center mt-3">
- <div class="spinner-border text-primary" role="status">
- <span class="sr-only">Loading...</span>
- </div>
- <p>Saving your choices...</p>
- </div>
+ <div class="modal-body">
+ {% csrf_token %}
+ <p class="text-muted">Please assign one label as <strong>Positive</strong> and another as <strong>Negative</strong>.</p>
+ <!-- Positive Label Dropdown -->
+ <div class="form-group">
+ <label for="positive-label" class="font-weight-semibold">Positive Label</label>
+ <select id="positive-label" class="form-control">
+ <option value="" disabled selected>Select a positive label</option>
+ <!-- Options populated dynamically -->
+ </select>
</div>
+ <!-- Negative Label Dropdown -->
+ <div class="form-group mt-3">
+ <label for="negative-label" class="font-weight-semibold">Negative Label</label>
+ <select id="negative-label" class="form-control">
+ <option value="" disabled selected>Select a negative label</option>
+ <!-- Options populated dynamically -->
+ </select>
+ </div>
+ <!-- Error Message -->
+ <div id="selection-error" class="alert alert-danger d-none mt-3">
+ <i class="fas fa-exclamation-triangle"></i> Labels must be different. Please select one positive and one negative label.
+ </div>
+ <!-- Loader -->
+ <div id="loader" class="d-none text-center mt-3">
+ <div class="spinner-border text-primary" role="status">
+ <span class="sr-only">Loading...</span>
+ </div>
+ <p>Saving your choices...</p>
+ </div>
+ </div>
<!-- Modal Footer -->
<div class="modal-footer">
@@ -539,11 +572,9 @@
</div>
</div>
-
-{% if dataset_type == "tabular" and df_name and data_to_display %}
+<!-- {% if dataset_type == "tabular" and df_name and data_to_display %}
<div class="row mb-4">
- <!-- Data Card with Original ID -->
<div class="col-lg-6" id="df_cached">
<div class="card border-0 shadow-sm h-100 animate-card">
<div class="card-header bg-light py-3 border-bottom">
@@ -555,7 +586,6 @@
</div>
</div>
- <!-- Stats Card with Original ID -->
<div class="col-lg-6" id="df_stats_cached">
<div class="card border-0 shadow-sm h-100 animate-card">
<div class="card-header bg-light py-3 border-bottom">
@@ -595,7 +625,7 @@
<div class="text-center mt-4">
<button id="viewModelsButton" class="btn btn-view-models">
View Pre-trained Models
- <i class="fas fa-arrow-right ml-2"></i> <!-- Font Awesome icon for added appeal -->
+ <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
@@ -604,7 +634,6 @@
{% elif dataset_type == "timeseries" %}
<div class="row mb-4">
- <!-- Confidence Interval Card with Original ID -->
<div class="col-lg-6" id="ts_confidence_cached">
<div class="card border-0 shadow-sm h-100 animate-card">
<div class="card-header bg-light py-3 border-bottom">
@@ -616,7 +645,6 @@
</div>
</div>
- <!-- Sample Analysis Card with Original ID -->
<div class="col-lg-6" id="ts_stats_cached">
<div class="card border-0 shadow-sm h-100 animate-card">
<div class="card-header bg-light py-3 border-bottom">
@@ -634,23 +662,25 @@
<div class="text-center mt-4">
<button id="viewPreTrainedButton" class="btn btn-view-models">
View Pre-trained Models
- <i class="fas fa-arrow-right ml-2"></i> <!-- Font Awesome icon for added appeal -->
+ <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</div>
-{% endif %}
+{% endif %} -->
+
<!-- Loader -->
<div class="d-flex justify-content-center">
<span class="loader" id="loader_ds" style="display: none;"></span>
</div>
-<div class="row mt-3" id="new_or_load" style="display:none;">
- <div class="col d-flex justify-content-center">
- <div class="text-center mt-4">
- <button id="viewPreTrainedButton" class="btn btn-view-models">
+
+<div class="container-fluid py-4" id="new_or_load">
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <button id="viewPreTrainedButton" class="btn btn-outline-primary">
View Pre-trained Models
- <i class="fas fa-arrow-right ml-2"></i> <!-- Font Awesome icon for added appeal -->
+ <i class="fas fa-arrow-right mr-1"></i> <!-- Font Awesome icon for added appeal -->
</button>
</div>
</div>
diff --git a/base/templates/base/home_template.html b/base/templates/base/home_template.html
new file mode 100644
index 000000000..72ff3b008
--- /dev/null
+++ b/base/templates/base/home_template.html
@@ -0,0 +1,662 @@
+{% extends 'main.html' %}
+{% block content %}
+{% load static %}
+
+
+<!-- Main Content -->
+<div id="content">
+
+ <!-- Intro Section -->
+ <div id="home_intro" class="intro-section py-5 text-center position-relative">
+ <div class="container">
+ <!-- Animated Background Graphics -->
+ <div class="background-shape shape-1"></div>
+ <div class="background-shape shape-2"></div>
+
+ <!-- Main Heading -->
+ <div class="intro-content position-relative">
+ <div class="logos d-flex justify-content-center align-items-center mb-4 fade-in">
+ <img src="{% static 'img/su_logo.png' %}" alt="Stockholm University Logo" class="logo su-logo mx-3">
+ <img src="{% static 'img/digital_features.png' %}" alt="Digital Features Logo" class="logo df-logo mx-3">
+ </div>
+ <h1 class="display-4 text-dark mb-4 fade-in">
+ Welcome to the <a href="https://datascience.dsv.su.se/projects/extremum.html" target="_blank" class="text-primary">Extremum Dashboard</a>
+ </h1>
+ <p class="lead text-muted fade-in mx-auto" style="max-width: 800px;">
+ Your gateway to exploring health informatics and time-series datasets with ease.
+ </p>
+ </div>
+ </div>
+</div>
+
+
+
+ <div class="about-project-section py-5 position-relative">
+ <div class="container" style="padding-top:250px;">
+ <!-- Main Section with Split Layout -->
+ <div class="about-dashboard-section py-5 bg-light position-relative">
+ <div class="container">
+ <div class="row align-items-center">
+ <!-- Left Column: Image -->
+ <div class="col-md-6 text-center">
+ <img src="https://datascience.dsv.su.se/img/logo/dsgroup.png"
+ alt="Extremum Dashboard Visualization"
+ class="img-fluid rounded shadow-lg fade-in"
+ style="max-height: 300px;"
+ loading="lazy">
+ </div>
+
+ <!-- Right Column: Text Content -->
+ <div class="col-md-6">
+ <div class="content-box px-4">
+ <h2 class="h4 text-primary mb-3 fade-in">The Extremum Dashboard</h2>
+ <p class="text-muted fade-in">
+ The <strong>Extremum Dashboard</strong>, developed by <strong>Stockholm University</strong>, is a cornerstone of the
+ <a href="https://datascience.dsv.su.se/projects/extremum.html"
+ target="_blank"
+ class="text-primary">EXTREMUM project</a>. This interactive platform merges cutting-edge AI and ethical considerations to drive transformative insights in healthcare.
+ </p>
+
+ <ul class="list-unstyled mt-4 fade-in">
+ <li class="mb-3 d-flex align-items-start">
+ <i class="fas fa-layer-group text-primary fa-lg mr-3"></i>
+ <div>
+ <strong>Unified Data Representation:</strong>
+ Integrates diverse medical datasets for seamless analysis.
+ </div>
+ </li>
+ <li class="mb-3 d-flex align-items-start">
+ <i class="fas fa-brain text-success fa-lg mr-3"></i>
+ <div>
+ <strong>Explainable Predictive Models:</strong>
+ Builds interpretable and reliable AI solutions.
+ </div>
+ </li>
+ <li class="d-flex align-items-start">
+ <i class="fas fa-balance-scale text-warning fa-lg mr-3"></i>
+ <div>
+ <strong>Ethical Compliance:</strong>
+ Ensures AI development aligns with legal and moral standards.
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="row align-items-center">
+ <div class="col-md-6">
+ <div class="content-box px-4">
+ <h2 class="h4 text-primary mb-3 fade-in">The EXTREMUM Project</h2>
+ <p class="text-muted fade-in">
+ The <strong>EXTREMUM Project</strong> focuses on developing explainable machine learning platforms for healthcare. It targets two primary applications:
+ </p>
+
+ <ul class="list-unstyled mt-4 fade-in">
+ <li class="mb-3 d-flex align-items-start">
+ <i class="fas fa-heartbeat text-danger fa-lg mr-3"></i>
+ <div>
+ <strong>Adverse Drug Event Detection:</strong>
+ Advanced techniques to identify and analyze drug-related adverse events.
+ </div>
+ </li>
+ <li class="d-flex align-items-start">
+ <i class="fas fa-stethoscope text-info fa-lg mr-3"></i>
+ <div>
+ <strong>Cardiovascular Disease Detection:</strong>
+ Tools to improve early detection and treatment outcomes.
+ </div>
+ </li>
+ </ul>
+
+ <p class="text-muted fade-in">
+ By integrating data sources, building interpretable models, and adhering to ethical principles, the project drives advancements in AI-driven healthcare solutions.
+ </p>
+
+ <div class="mt-4 text-center">
+ <a href="https://datascience.dsv.su.se/projects/extremum.html" target="_blank" class="btn btn-outline-primary rounded-pill px-4 fade-in">
+ Learn More <i class="fas fa-chevron-right ml-2"></i>
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-md-6 text-center">
+ <img src="{% static 'img/heart.jpg' %}" alt="Digital Features Logo" style="max-height: 300px;" class="logo df-logo mx-3 img-fluid rounded shadow-lg fade-in" >
+
+ </div>
+ </div>
+ </div>
+
+ <!-- Feature Carousel Section -->
+ <div class="feature-carousel py-5 bg-light mt-5 fade-in">
+ <div class="container">
+ <h3 class="h4 text-dark text-center mb-4">Key Innovations in Extremum Dashboard</h3>
+ <p class="text-muted text-center mx-auto mb-5" style="max-width: 700px;">
+ Discover the powerful tools and methodologies developed under the EXTREMUM project, designed to revolutionize explainable AI for healthcare applications.
+ </p>
+ <div id="carouselFeatures" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
+ <ol class="carousel-indicators">
+ <li data-target="#carouselFeatures" data-slide-to="0" class="active" tabindex="0" aria-label="Feature 1"></li>
+ <li data-target="#carouselFeatures" data-slide-to="1" tabindex="0" aria-label="Feature 2"></li>
+ </ol>
+
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <div class="feature-card p-5 shadow rounded text-center">
+ <i class="fas fa-wave-square text-info fa-3x mb-4"></i>
+ <h5 class="text-dark">Wildboar</h5>
+ <p class="text-muted">
+ Created by <strong>Isak Samsten</strong>, Wildboar is a Python library for temporal machine learning, offering tools for classification, regression, and explainability.
+ </p>
+ <a href="https://github.com/wildboar-foundation/wildboar" target="_blank" class="btn btn-primary rounded-pill px-4 py-2 mt-3">
+ Learn More <i class="fas fa-external-link-alt ml-2"></i>
+ </a>
+ </div>
+ </div>
+
+ <div class="carousel-item">
+ <div class="feature-card p-5 shadow rounded text-center">
+ <i class="fas fa-snowflake text-primary fa-3x mb-4"></i>
+ <h5 class="text-dark">Glacier</h5>
+ <p class="text-muted">
+ Developed by <strong>Zhendong Wang</strong>, Glacier generates counterfactual explanations for time series classification, ensuring realistic and interpretable results.
+ </p>
+ <a href="https://github.com/zhendong3wang/learning-time-series-counterfactuals" target="_blank" class="btn btn-primary rounded-pill px-4 py-2 mt-3">
+ Learn More <i class="fas fa-external-link-alt ml-2"></i>
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <a class="carousel-control-prev" href="#carouselFeatures" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselFeatures" role="button" data-slide="next">
+ <span class="carousel-control-next-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Call to Action Section -->
+ <div class="separator-section py-5 text-center bg-light">
+ <div class="container">
+ <h3 class="h5 text-dark mb-4 fade-in">Ready to start your journey?</h3>
+ <button class="btn btn-outline-primary fade-in" onclick="document.getElementById('dataset_selection').scrollIntoView({behavior: 'smooth'})">
+ Explore Datasets <i class="fas fa-arrow-down ml-2"></i>
+ </button>
+ </div>
+ </div>
+
+<!-- Combined Heading and Button Group for Dataset Selection -->
+<style>
+ /* Section Styling */
+ .dataset-section {
+ padding: 100px 20px;
+ background-color: #f8f9fa;
+ text-align: center;
+ }
+
+ .dataset-section h2 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 1rem;
+ }
+
+ .dataset-section p {
+ font-size: 0.95rem;
+ color: #666;
+ margin-bottom: 2rem;
+ max-width: 600px;
+ margin: 0 auto;
+ line-height: 1.5;
+ }
+
+ /* Button Styling */
+ .btn-dataset {
+ font-size: 1rem;
+ font-weight: 500;
+ border: 1px solid #ccc;
+ color: #333;
+ background-color: white;
+ border-radius: 5px;
+ padding: 12px 20px;
+ margin: 10px;
+ transition: all 0.2s ease;
+ width: 200px;
+ }
+
+ .btn-dataset:hover {
+ border-color: #007bff;
+ color: #007bff;
+ }
+
+ .btn-dataset.active {
+ background-color: #007bff;
+ color: white;
+ border-color: #007bff;
+ }
+
+ /* Responsive Alignment */
+ .dataset-section .row {
+ justify-content: center;
+ gap: 1rem;
+ }
+
+ @media (max-width: 768px) {
+ .btn-dataset {
+ width: 180px;
+ padding: 10px 15px;
+ }
+ }
+</style>
+
+<div class="dataset-section" style="padding-top:300px;">
+ <!-- Title -->
+ <h2 id="dataset_selection">Choose Your Dataset</h2>
+ <p>
+ Select a dataset to visualize its graphs and perform advanced operations like using pre-trained models
+ or computing counterfactuals. Your choice will be used throughout the session.
+ </p>
+
+ <!-- Dataset Selection Buttons -->
+ <div class="row">
+ {% csrf_token %}
+
+ <!-- Breast Cancer Dataset -->
+ <button type="button" class="btn btn-dataset {% if df_name == 'breast-cancer' %}active{% endif %}" id="breast-cancer">
+ Breast Cancer
+ </button>
+
+ <!-- Stroke Dataset -->
+ <button type="button" class="btn btn-dataset {% if df_name == 'stroke' %}active{% endif %}" id="stroke">
+ Stroke
+ </button>
+
+ <!-- Timeseries Dataset -->
+ <button type="button" class="btn btn-dataset {% if dataset_type == 'timeseries' %}active{% endif %}" id="timeseries">
+ Timeseries
+ </button>
+
+ <!-- Upload Dataset (Optional) -->
+ <!-- Uncomment if needed
+ <button type="button" class="btn btn-dataset {% if upload == 1 %}active{% endif %}" id="upload">
+ Upload Dataset
+ </button>
+ -->
+ </div>
+</div>
+
+
+<!-- Upload Form Section -->
+<!-- <div class="row justify-content-center">
+ <div class="col-xl-5 col-lg-6" id="upload_col" {% if upload %} style="display: block;" {% else %} style="display: none;" {% endif %}>
+ <div class="card shadow-sm border-0 animate-card">
+ <div class="card-header bg-primary text-muted d-flex align-items-center">
+ <h6 class="mb-0">Upload Dataset</h6>
+ <i class="fas fa-upload ml-auto"></i>
+ </div>
+ <div class="card-body bg-light">
+ <div class="row">
+ <div class="col-md-7 mb-4">
+ <form id="csv_form" method="POST" enctype="multipart/form-data">
+ {% csrf_token %}
+
+ <fieldset class="form-group mb-4">
+ <legend class="col-form-label small text-secondary font-weight-semibold">Data Type</legend>
+ <div class="form-check">
+ <input class="form-check-input" type="radio" name="dataset_type" id="tabular" value="tabular" required>
+ <label class="form-check-label" for="tabular">Tabular</label>
+ </div>
+ <div class="form-check">
+ <input class="form-check-input" type="radio" name="dataset_type" id="timeseries" value="timeseries" required>
+ <label class="form-check-label" for="timeseries">Timeseries</label>
+ </div>
+ </fieldset>
+
+ <div class="form-group mb-4">
+ <label class="small text-secondary font-weight-semibold" for="doc">Select File</label>
+ <input class="form-control-file" type="file" id="doc" name="excel_file" required>
+ <small class="text-muted d-block mt-1">Supported format: CSV</small>
+ </div>
+
+ <div class="form-group d-flex align-items-center w-100">
+ <input class="btn btn-primary btn-sm mr-3" type="submit" value="Upload" id="upload_btn">
+
+ <div class="loader" id="cfbtn_loader" style="display: none; margin-left: 5px;">
+ <i class="fas fa-spinner fa-spin"></i>
+ </div>
+
+ <div id="success-message" class="alert alert-success custom-alert d-none ml-3 mb-0" role="alert">
+ <i class="fas fa-check-circle"></i>
+ <span class="ml-2">File uploaded successfully.</span>
+ <button type="button" class="close ml-auto p-0" aria-label="Close" onclick="hideSuccessMessage();">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
+ </form>
+ </div>
+
+ <div class="col-md-5 mb-5">
+ <fieldset class="form-group mb-4">
+ <legend class="col-form-label small text-secondary font-weight-semibold">Uploaded Files</legend>
+ {% if uploaded_files %}
+ <fieldset class="form-group" id="radio_buttons">
+ {% for uploaded_file in uploaded_files %}
+ <div class="form-check mb-2 d-flex align-items-center">
+ <input class="form-check-input mr-2" type="radio" {% if df_name == uploaded_file %} checked {% endif %} name="uploaded_file" id="element_{{ forloop.counter }}" value="{{ uploaded_file }}" required>
+ <label class="form-check-label mr-auto" for="element_{{ forloop.counter }}">{{ uploaded_file }}</label>
+ <button type="button" class="delete-file-icon p-0 ml-2 text-muted close" data-file="{{ uploaded_file }}" data-file-value="{{uploaded_file}}" aria-label="Delete {{ uploaded_file }}">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ {% endfor %}
+ </fieldset>
+ {% else %}
+ <p class="small text-muted">No files uploaded yet. Please upload a dataset to select it here.</p>
+ {% endif %}
+ </fieldset>
+ </div>
+ </div>
+ </div>
+ <div class="card-footer bg-white text-center">
+ <small class="text-muted">Manage your datasets effectively. Ensure data is accurate and up-to-date.</small>
+ </div>
+ </div>
+ </div>
+</div> -->
+
+<!-- Minimal Delete Confirmation Modal -->
+<div class="modal fade" id="deleteFileModal" tabindex="-1" role="dialog" aria-labelledby="deleteFileModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered" role="document">
+ <div class="modal-content border-0 shadow-sm">
+ <div class="modal-header border-0">
+ <h6 class="modal-title text-danger" id="deleteFileModalLabel">Confirm Deletion</h6>
+ <button type="button" class="close text-muted" data-dismiss="modal" aria-label="Close" style="font-size: 1.2rem;">
+ ×
+ </button>
+ </div>
+ <div class="modal-body text-center py-3">
+ <p class="mb-1">Delete <span id="fileToDeleteName" class="font-weight-bold"></span>?</p>
+ <small class="text-muted">This action is permanent.</small>
+ </div>
+ <div class="modal-footer justify-content-center border-0">
+ <button type="button" class="custom-btn-secondary" data-dismiss="modal">Cancel</button>
+ <button type="button" class="custom-btn-danger" id="confirmDeleteButton">Delete</button>
+ </div>
+ </div>
+ </div>
+</div>
+<!-- Timeseries Dataset Selection -->
+<div class="row justify-content-center">
+ <div class="col-lg-5" {% if dataset_type != "timeseries" %} style="display:none;" {% endif %} id="timeseries-datasets">
+ <div class="card border-0 shadow-sm mb-3 animate-card">
+ <div class="card-body">
+ {% csrf_token %}
+ <fieldset class="form-group">
+ <legend class="h6 mb-4 text-muted">Select a Timeseries Dataset</legend>
+ <div class="form-check mb-2">
+ <input class="form-check-input" type="radio" name="timeseries_dataset" id="two-lead-ecg" value="two-lead-ecg" {% if df_name == "two-lead-ecg" %} checked {% endif %}>
+ <label class="form-check-label" for="two-lead-ecg">Two lead ECG</label>
+ </div>
+ <div class="form-check mb-2">
+ <input class="form-check-input" type="radio" name="timeseries_dataset" id="gun-point" value="gun-point" {% if df_name == "gun-point" %} checked {% endif %}>
+ <label class="form-check-label" for="gun-point">Gun Point</label>
+ </div>
+ <div class="form-check mb-2">
+ <input class="form-check-input" type="radio" name="timeseries_dataset" id="ecg-five-days" value="ecg-five-days" {% if df_name == "ecg-five-days" %} checked {% endif %}>
+ <label class="form-check-label" for="ecg-five-days">ECG Five Days</label>
+ </div>
+ <div class="form-check mb-2">
+ <input class="form-check-input" type="radio" name="timeseries_dataset" id="italy-power-demand" value="italy-power-demand" {% if df_name == "italy-power-demand" %} checked {% endif %}>
+ <label class="form-check-label" for="italy-power-demand">Italy Power Demand</label>
+ </div>
+ <div class="form-check">
+ <input class="form-check-input" type="radio" name="timeseries_dataset" id="ford-a" value="ford-a" {% if df_name == "ford-a" %} checked {% endif %}>
+ <label class="form-check-label" for="ford-a">Ford-A</label>
+ </div>
+ </fieldset>
+ </div>
+ </div>
+ </div>
+</div>
+
+<!-- Data and Stats Display -->
+<div class="row mb-4">
+ <!-- Data Section -->
+ <div class="col-lg-6" id="df" style="display: none;">
+ <div class="card border-0 shadow-sm h-100 animate-card">
+ <div class="card-header bg-light py-3 border-bottom">
+ <h6 class="m-0 font-weight-semibold text-dark">Data</h6>
+ </div>
+ <div class="card-body">
+ <div class="scrollit table-responsive sticky-top-table" id="df_div"></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Stats Section -->
+ <div class="col-lg-6" id="df_stats" style="display: none;">
+ <div class="card border-0 shadow-sm h-100 animate-card-delay">
+ <div class="card-header bg-light py-3 border-bottom">
+ <h6 class="m-0 font-weight-semibold text-dark">Stats</h6>
+ </div>
+ <div class="card-body" id="stats_div">
+ <div class="d-flex justify-content-center mb-3" id="selection">
+
+ </div>
+ <div class="d-flex justify-content-center">
+ <span class="loader" id="loader_stats" style="display: none;"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Timeseries Confidence and Stats -->
+ <div class="col-lg-6" id="ts_confidence" style="display: none;">
+ <div class="card border-0 shadow-sm h-100 animate-card">
+ <div class="card-header bg-light py-3 border-bottom">
+ <h6 class="m-0 font-weight-semibold text-dark">Confidence</h6>
+ </div>
+ <div class="card-body">
+ <div id="ts_confidence_div"></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Timeseries Stats Section -->
+ <div class="col-lg-6" id="ts_stats" style="display: none;">
+ <div class="card border-0 shadow-sm h-100 animate-card-delay">
+ <div class="card-header bg-light py-3 border-bottom">
+ <h6 class="m-0 font-weight-semibold text-dark">Stats</h6>
+ </div>
+ <div class="card-body">
+ <div class="d-flex justify-content-center mb-3" id="selection"></div>
+ <div class="d-flex justify-content-center">
+ <span class="loader" id="loader_stats" style="display: none;"></span>
+ </div>
+ <div id="ts_stats_div"></div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<!-- Modal Window -->
+<div class="modal fade" id="labelSelectionModal" tabindex="-1" aria-labelledby="labelSelectionModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <!-- Modal Header -->
+ <div class="modal-header">
+ <h5 class="modal-title" id="labelSelectionModalLabel">Assign Positive and Negative Labels</h5>
+ </div>
+ <!-- Modal Body -->
+ <div class="modal-body">
+ {% csrf_token %}
+ <p class="text-muted">Please assign one label as <strong>Positive</strong> and another as <strong>Negative</strong>.</p>
+ <!-- Positive Label Dropdown -->
+ <div class="form-group">
+ <label for="positive-label" class="font-weight-semibold">Positive Label</label>
+ <select id="positive-label" class="form-control">
+ <option value="" disabled selected>Select a positive label</option>
+ <!-- Options populated dynamically -->
+ </select>
+ </div>
+ <!-- Negative Label Dropdown -->
+ <div class="form-group mt-3">
+ <label for="negative-label" class="font-weight-semibold">Negative Label</label>
+ <select id="negative-label" class="form-control">
+ <option value="" disabled selected>Select a negative label</option>
+ <!-- Options populated dynamically -->
+ </select>
+ </div>
+ <!-- Error Message -->
+ <div id="selection-error" class="alert alert-danger d-none mt-3">
+ <i class="fas fa-exclamation-triangle"></i> Labels must be different. Please select one positive and one negative label.
+ </div>
+ <!-- Loader -->
+ <div id="loader" class="d-none text-center mt-3">
+ <div class="spinner-border text-primary" role="status">
+ <span class="sr-only">Loading...</span>
+ </div>
+ <p>Saving your choices...</p>
+ </div>
+ </div>
+
+ <!-- Modal Footer -->
+ <div class="modal-footer">
+ <button type="button" class="btn btn-primary" id="save-label-choices">Save Choices</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+{% if dataset_type == "tabular" and df_name and data_to_display %}
+
+ <div class="row mb-4">
+ <!-- Data Card with Original ID -->
+ <div class="col-lg-6" id="df_cached">
+ <div class="card border-0 shadow-sm h-100 animate-card">
+ <div class="card-header bg-light py-3 border-bottom">
+ <h6 class="m-0 font-weight-semibold text-dark">Data</h6>
+ </div>
+ <div class="card-body">
+ <div class="scrollit table-responsive table table-bordered sticky-top-table" id="df_div">{{ data_to_display|safe }}</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Stats Card with Original ID -->
+ <div class="col-lg-6" id="df_stats_cached">
+ <div class="card border-0 shadow-sm h-100 animate-card">
+ <div class="card-header bg-light py-3 border-bottom">
+ <h6 class="m-0 font-weight-semibold text-dark">Stats</h6>
+ </div>
+ <div class="card-body">
+ <div class="d-flex flex-column align-items-stretch" id="stats_div_cached">
+ <div class="d-flex mb-3" id="selection_cached">
+ <select class="custom-select mr-2" id="feature1_cached">
+ {% for feature in features %}
+ <option value="{{ feature }}" {% if feature == feature1 %}selected{% endif %}>{{ feature }}</option>
+ {% endfor %}
+ </select>
+ <select class="custom-select mr-2" id="feature2_cached">
+ {% for feature in features %}
+ <option value="{{ feature }}" {% if feature == feature2 %}selected{% endif %}>{{ feature }}</option>
+ {% endfor %}
+ </select>
+ <select class="custom-select" id="label_cached">
+ {% for label in labels %}
+ <option value="{{ label }}" {% if label == curlabel %}selected{% endif %}>{{ label }}</option>
+ {% endfor %}
+ </select>
+ </div>
+ <div class="plotly_fig" id="stats_container_cached">{{ fig|safe }}</div>
+ <div class="d-flex justify-content-center mt-3">
+ <span class="loader" id="loader_stats_cached" style="display: none;"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row mt-3" id="new_or_load_cached">
+ <div class="col d-flex justify-content-center">
+ <div class="text-center mt-4">
+ <button id="viewModelsButton" class="btn btn-view-models">
+ View Pre-trained Models
+ <i class="fas fa-arrow-right ml-2"></i> <!-- Font Awesome icon for added appeal -->
+ </button>
+ </div>
+ </div>
+ </div>
+
+{% elif dataset_type == "timeseries" %}
+
+ <div class="row mb-4">
+ <!-- Confidence Interval Card with Original ID -->
+ <div class="col-lg-6" id="ts_confidence_cached">
+ <div class="card border-0 shadow-sm h-100 animate-card">
+ <div class="card-header bg-light py-3 border-bottom">
+ <h6 class="m-0 font-weight-semibold text-dark">Confidence Interval</h6>
+ </div>
+ <div class="card-body">
+ <div class="plotly_fig" id="ts_confidence_container_cached">{{ fig1|safe }}</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Sample Analysis Card with Original ID -->
+ <div class="col-lg-6" id="ts_stats_cached">
+ <div class="card border-0 shadow-sm h-100 animate-card">
+ <div class="card-header bg-light py-3 border-bottom">
+ <h6 class="m-0 font-weight-semibold text-dark">Samples</h6>
+ </div>
+ <div class="card-body">
+ <div class="plotly_fig" id="ts_stats_container_cached">{{ fig|safe }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row mt-3" id="new_or_load_cached">
+ <div class="col d-flex justify-content-center">
+ <div class="text-center mt-4">
+ <button id="viewPreTrainedButton" class="btn btn-view-models">
+ View Pre-trained Models
+ <i class="fas fa-arrow-right ml-2"></i> <!-- Font Awesome icon for added appeal -->
+ </button>
+ </div>
+ </div>
+ </div>
+
+{% endif %}
+<!-- Loader -->
+<div class="d-flex justify-content-center">
+ <span class="loader" id="loader_ds" style="display: none;"></span>
+</div>
+<div class="row mt-3" id="new_or_load" style="display:none;">
+ <div class="col d-flex justify-content-center">
+ <div class="text-center mt-4">
+ <button id="viewPreTrainedButton" class="btn btn-view-models">
+ View Pre-trained Models
+ <i class="fas fa-arrow-right ml-2"></i> <!-- Font Awesome icon for added appeal -->
+ </button>
+ </div>
+ </div>
+</div>
+
+<!-- JavaScript -->
+<script type="module" src="{% static 'js/home.js' %}"></script>
+
+{% endblock content%}
diff --git a/base/views.py b/base/views.py
index 4c9e92b56..6188b3b55 100755
--- a/base/views.py
+++ b/base/views.py
@@ -1,6 +1,5 @@
from django.shortcuts import render
import base.pipeline as pipeline
-from dict_and_html import *
from . import methods
from .methods import PIPELINE_PATH
import random
diff --git a/extremum/settings.py b/extremum/settings.py
index 143df1f79..53419c87e 100755
--- a/extremum/settings.py
+++ b/extremum/settings.py
@@ -23,9 +23,9 @@ BASE_DIR = Path(__file__).resolve().parent.parent
SECRET_KEY = os.environ.get('SECRET_KEY', "changeme")
# DEBUG setting
-DEBUG = bool(int(os.environ('DEBUG', 0)))
+DEBUG = bool(int(os.environ.get('DEBUG', 0)))
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ["127.0.0.1"]
ALLOWED_HOSTS_ENV = os.environ.get('ALLOWED_HOSTS')
if ALLOWED_HOSTS_ENV :
ALLOWED_HOSTS.extend(ALLOWED_HOSTS_ENV.split(','))
@@ -47,8 +47,6 @@ INSTALLED_APPS = [
"django.contrib.messages",
"django.contrib.staticfiles",
"base.apps.BaseConfig",
- "bootstrap5",
- "django_htmx",
]
MIDDLEWARE = [
@@ -60,7 +58,6 @@ MIDDLEWARE = [
"django.contrib.auth.middleware.AuthenticationMiddleware",
"django.contrib.messages.middleware.MessageMiddleware",
"django.middleware.clickjacking.XFrameOptionsMiddleware",
- "django_htmx.middleware.HtmxMiddleware",
]
ROOT_URLCONF = "extremum.urls"
@@ -81,7 +78,7 @@ TEMPLATES = [
},
]
-WSGI_APPLICATION = "extremum.wsgi.application"
+# WSGI_APPLICATION = "extremum.wsgi.application"
# Database
@@ -121,17 +118,22 @@ AUTH_PASSWORD_VALIDATORS = [
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/
-STATIC_URL = "/static/static"
-STATICFILES_DIRS = [BASE_DIR / "base/static"]
+# Static files (CSS, JavaScript, Images)
+STATIC_URL = "/static/"
-MEDIA_URL = "/static/media"
+# Directory for collecting all static files (for production)
+STATIC_ROOT = BASE_DIR / "staticfiles"
-STATIC_ROOT = BASE_DIR / 'vol/web/static' # Define where static files are collected
-MEDIA_ROOT = BASE_DIR / 'vol/web/media' # Define where static files are collected
+# Directories containing your static files (development)
+STATICFILES_DIRS = [
+ BASE_DIR / "base/static",
+]
-# Default primary key field type
-# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
+# Media files (user-uploaded content)
+MEDIA_URL = "/media/"
+MEDIA_ROOT = BASE_DIR / "vol/web/media"
+# Whitenoise settings (optional, for improved static file serving)
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
\ No newline at end of file
diff --git a/manage.py b/manage.py
index c454d17e5..e4e0040a5 100755
--- a/manage.py
+++ b/manage.py
@@ -6,7 +6,7 @@ import sys
def main():
"""Run administrative tasks."""
- os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'extremum_web.settings')
+ os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'extremum.settings')
try:
from django.core.management import execute_from_command_line
except ImportError as exc:
diff --git a/notes b/notes
index cd5eb2dad..8bbe42ddf 100644
--- a/notes
+++ b/notes
@@ -1,4 +1,7 @@
Notes for extremum web
1) deactivate training
-2) deactivate uploading
\ No newline at end of file
+2) deactivate uploading
+
+1/7/2025
+fixed some bags on home.js for radio buttons. Have not pushed them yet due to conflict
\ No newline at end of file
diff --git a/proxy/default.conf b/proxy/default.conf
deleted file mode 100644
index 91fe085b2..000000000
--- a/proxy/default.conf
+++ /dev/null
@@ -1,12 +0,0 @@
-server {
- listen 8080;
-
- location /static {
- alias /vol/static;
- }
-
- location / {
- uwsgi_pass app:8000;
- include /etc/nginx/uwsgi_params;
- }
-}
\ No newline at end of file
diff --git a/proxy/uwsgi_params b/proxy/uwsgi_params
deleted file mode 100644
index 4f3b520fe..000000000
--- a/proxy/uwsgi_params
+++ /dev/null
@@ -1,13 +0,0 @@
-uwsgi_param QUERY_STRING $query_string;
-uwsgi_param REQUEST_METHOD $request_method;
-uwsgi_param CONTENT_TYPE $content_type;
-uwsgi_param CONTENT_LENGTH $content_length;
-uwsgi_param REQUEST_URI $request_uri;
-uwsgi_param PATH_INFO $document_uri;
-uwsgi_param DOCUMENT_ROOT $document_root;
-uwsgi_param SERVER_PROTOCOL $server_protocol;
-uwsgi_param REMOTE_ADDR $remote_addr;
-uwsgi_param REMOTE_PORT $remote_port;
-uwsgi_param SERVER_ADDR $server_addr;
-uwsgi_param SERVER_PORT $server_port;
-uwsgi_param SERVER_NAME $server_name;
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
index 0ab28d683..5d074d0c4 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,3 @@
-<<<<<<< HEAD
dice_ml==0.11
dict_and_html==1.0.11
Django==4.2.13
@@ -15,243 +14,4 @@ scipy==1.14.1
stumpy==1.13.0
tensorflow==2.9.1
wildboar==1.2.0
-xgboost==2.1.3
-=======
-absl-py==2.1.0
-alembic==1.13.2
-anyio==4.4.0
-argon2-cffi==23.1.0
-argon2-cffi-bindings==21.2.0
-args==0.1.0
-arrow==1.3.0
-asgiref==3.8.1
-asttokens==2.4.1
-astunparse==1.6.3
-async-lru==2.0.4
-async-timeout==4.0.3
-attrs==23.2.0
-autobahn==23.6.2
-Automat==22.10.0
-autopage==0.5.2
-Babel==2.15.0
-beautifulsoup4==4.12.3
-bleach==6.1.0
-blinker==1.8.2
-cachetools==5.4.0
-certifi==2024.6.2
-cffi==1.16.0
-channels==4.1.0
-channels-redis==4.2.0
-charset-normalizer==3.3.2
-click==8.1.7
-cliff==4.7.0
-clint==0.5.1
-cmaes==0.10.0
-cmd2==2.4.3
-colorlog==6.8.2
-comm==0.2.2
-constantly==23.10.4
-contourpy==1.2.1
-coverage==7.6.1
-cryptography==42.0.8
-cycler==0.12.1
-Cython==3.0.10
-daphne==4.1.2
-dash==2.9.3
-dash-bootstrap-components==1.6.0
-dash-core-components==2.0.0
-dash-html-components==2.0.0
-dash-table==5.0.0
-debugpy==1.8.2
-decorator==5.1.1
-defusedxml==0.7.1
-dice-ml==0.11
-dict-and-html==1.0.11
-diff-match-patch==20230430
-Django==4.2.13
-django-bootstrap-v5==1.0.11
-django-htmx==1.18.0
-django-import-export==4.0.3
-django-plotly-dash==2.3.1
-django-redis==5.4.0
-dpd_components==0.1.0
-et-xmlfile==1.1.0
-exceptiongroup==1.2.1
-executing==2.0.1
-fastdtw==0.3.4
-fastjsonschema==2.20.0
-Flask==3.0.3
-flatbuffers==1.12
-fonttools==4.51.0
-fqdn==1.5.1
-gast==0.4.0
-google-auth==2.32.0
-google-auth-oauthlib==0.4.6
-google-pasta==0.2.0
-greenlet==3.0.3
-grpcio==1.65.1
-h11==0.14.0
-h5py==3.11.0
-html-and-py==1.0.14
-httpcore==1.0.5
-httpx==0.27.0
-hyperlink==21.0.0
-idna==3.7
-imbalanced-learn==0.12.3
-incremental==22.10.0
-ipykernel==6.29.5
-ipython==8.25.0
-ipywidgets==8.1.3
-isoduration==20.11.0
-itsdangerous==2.2.0
-jedi==0.19.1
-Jinja2==3.1.4
-joblib==1.4.2
-json5==0.9.25
-jsonpointer==3.0.0
-jsonschema==4.22.0
-jsonschema-specifications==2023.12.1
-jupyter==1.0.0
-jupyter_client==8.6.2
-jupyter-console==6.6.3
-jupyter_core==5.7.2
-jupyter-events==0.10.0
-jupyter-lsp==2.2.5
-jupyter_server==2.14.2
-jupyter_server_terminals==0.5.3
-jupyterlab==4.2.4
-jupyterlab_pygments==0.3.0
-jupyterlab_server==2.27.3
-jupyterlab_widgets==3.0.11
-keract==4.5.1
-keras==2.9.0
-Keras-Preprocessing==1.1.2
-kiwisolver==1.4.5
-libclang==18.1.1
-llvmlite==0.43.0
-Mako==1.3.5
-mamba==0.11.3
-Markdown==3.6
-MarkupSafe==2.1.5
-matplotlib==3.9.0
-matplotlib-inline==0.1.7
-mistune==3.0.2
-ml-dtypes==0.4.0
-mlxtend==0.23.1
-msgpack==1.0.8
-nbclient==0.10.0
-nbconvert==7.16.4
-nbeats-keras==1.8.0
-nbformat==5.10.4
-nest-asyncio==1.6.0
-ngrok==1.4.0
-notebook==7.2.1
-notebook_shim==0.2.4
-npx==0.1.6
-numba==0.60.0
-numpy==1.23.5
-nvidia-cublas-cu11==11.11.3.6
-oauthlib==3.2.2
-openpyxl==3.1.2
-opt-einsum==3.3.0
-optuna==2.10.1
-overrides==7.7.0
-packaging==24.2
-pandas==1.5.3
-pandocfilters==1.5.1
-parso==0.8.4
-patsy==0.5.6
-pbr==6.0.0
-pexpect==4.9.0
-pillow==10.3.0
-pip==24.3.1
-pipdeptree==2.24.0
-platformdirs==4.2.2
-plotly==5.22.0
-prettytable==3.10.2
-prometheus_client==0.20.0
-prompt_toolkit==3.0.47
-protobuf==3.19.6
-psutil==6.0.0
-ptyprocess==0.7.0
-pure-eval==0.2.2
-pyasn1==0.6.0
-pyasn1_modules==0.4.0
-pycparser==2.22
-Pygments==2.18.0
-pyOpenSSL==24.1.0
-pyparsing==3.1.2
-pyperclip==1.9.0
-python-dateutil==2.9.0.post0
-python-dotenv==1.0.1
-python-json-logger==2.0.7
-pytz==2024.1
-PyWavelets==1.6.0
-PyYAML==6.0.1
-pyzmq==26.0.3
-qtconsole==5.5.2
-QtPy==2.4.1
-raiutils==0.4.2
-redis==5.0.6
-referencing==0.35.1
-requests==2.32.3
-requests-oauthlib==2.0.0
-rfc3339-validator==0.1.4
-rfc3986-validator==0.1.1
-rpds-py==0.18.1
-rsa==4.9
-scikit-base==0.8.2
-scikit-learn==1.5.1
-scipy==1.13.0
-seaborn==0.13.2
-Send2Trash==1.8.3
-service-identity==24.1.0
-setuptools==65.5.0
-six==1.16.0
-sktime==0.31.0
-sniffio==1.3.1
-soupsieve==2.5
-SQLAlchemy==2.0.31
-sqlparse==0.5.0
-stack-data==0.6.3
-statsmodels==0.14.2
-stevedore==5.2.0
-stumpy==1.13.0
-tablib==3.5.0
-tenacity==8.3.0
-tensorboard==2.9.1
-tensorboard-data-server==0.6.1
-tensorboard-plugin-wit==1.8.1
-tensorflow==2.9.1
-tensorflow-estimator==2.9.0
-tensorflow-io-gcs-filesystem==0.37.1
-termcolor==2.4.0
-terminado==0.18.1
-tfts==0.0.5
-threadpoolctl==3.5.0
-tinycss2==1.3.0
-tomli==2.0.1
-tornado==6.4.1
-tqdm==4.66.4
-traitlets==5.14.3
-Twisted==24.3.0
-txaio==23.1.1
-types-python-dateutil==2.9.0.20240316
-typing_extensions==4.11.0
-uri-template==1.3.0
-urllib3==2.2.1
-uWSGI==2.0.28
-wcwidth==0.2.13
-webcolors==24.8.0
-webencodings==0.5.1
-websocket-client==1.8.0
-Werkzeug==3.0.3
-wheel==0.44.0
-whitenoise==6.8.2
-widgetsnbextension==4.0.11
-wildboar==1.2.0
-wrapt==1.16.0
-xgboost==2.0.3
-XlsxWriter==3.2.0
-zope.interface==6.4.post2
->>>>>>> bcaa0664688857b180bb908a6ea1b71080c56a45
+xgboost==2.1.3
\ No newline at end of file
diff --git a/scripts/entrypoint.sh b/scripts/entrypoint.sh
deleted file mode 100644
index c6c76f3cc..000000000
--- a/scripts/entrypoint.sh
+++ /dev/null
@@ -1,10 +0,0 @@
-#!/bin/sh
-
-set -e
-
-python manage.py collectstatic --soinput
-
-uwsgi --socket :8000 --master --enable-threads --module extremum.wsgi #TCP
-
-# Start Apache
-exec apachectl -D FOREGROUND
\ No newline at end of file