From bda650fefe8f5cd46be5f20160f34bef3dd2017d Mon Sep 17 00:00:00 2001 From: atla8167 <athanasio.lakes@dsv.su.se> Date: Thu, 9 Jan 2025 17:57:16 +0200 Subject: [PATCH] Fixed Javascript Bugs, Improved layout and enhaced styles --- base/methods.py | 3 - .../trained_models/dt/counterfactuals.csv | 10 +- .../trained_models/dt/tsne_cfs.sav | Bin 12085 -> 12085 bytes .../trained_models/lr/counterfactuals.csv | 10 +- .../trained_models/lr/tsne_cfs.sav | Bin 12085 -> 12085 bytes .../trained_models/rf/counterfactuals.csv | 10 +- .../trained_models/rf/tsne_cfs.sav | Bin 12085 -> 12085 bytes .../trained_models/svm/counterfactuals.csv | 10 +- .../trained_models/svm/tsne_cfs.sav | Bin 12085 -> 12085 bytes .../trained_models/rf/counterfactuals.csv | 10 +- .../stroke/trained_models/rf/tsne_cfs.sav | Bin 47369 -> 47545 bytes base/static/css/sb-admin-2.css | 245 ++++--- base/static/js/alert.js | 33 + base/static/js/counterfactuals.js | 36 +- base/static/js/features_to_vary.js | 3 +- base/static/js/home.js | 216 ++++-- base/static/js/methods.js | 2 +- base/static/js/radio_model.js | 108 +-- base/static/scss/utilities/_animation.scss | 17 +- base/static/scss/utilities/_tables.scss | 167 +++-- base/templates/base/charts.html | 32 +- base/templates/base/counterfactuals.html | 336 +++++++-- base/templates/base/home.html | 130 ++-- base/templates/base/home_template.html | 662 ++++++++++++++++++ base/views.py | 1 - extremum/settings.py | 28 +- manage.py | 2 +- notes | 5 +- proxy/default.conf | 12 - proxy/uwsgi_params | 13 - requirements.txt | 242 +------ scripts/entrypoint.sh | 10 - 32 files changed, 1582 insertions(+), 771 deletions(-) create mode 100644 base/static/js/alert.js create mode 100644 base/templates/base/home_template.html delete mode 100644 proxy/default.conf delete mode 100644 proxy/uwsgi_params delete mode 100644 scripts/entrypoint.sh 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 e2f08f7ae55df2b0dbc1d1b6ebfb9360e3c8d82f..46d6af8d9c6cdfbb70b977fc4f7de6b5ac9e6e4e 100644 GIT binary patch delta 96 zcmV-m0H6Q0UbSAZXcUvA6-JY-6pa%Qd<#Lu-sV7fcLG6MzTZF*THKRf79Eoi6$BVs zi9-}$b!|Z^dVWDS8gxN`xqv}@Y=l9RN)%(0>J@MWKuXLlz>{AVCj_8WKQOb37ONN< Cpd>f| delta 93 zcmV-j0HXi3UbSAZXcUu*2s4w|6%v!K6pa)oq#8jHEDJ$%3m`#`Is-w)Asa!HPZcB- z!@4g)PkJyxz`7Yhj$SB1)|E0rlS&k1lj;?41%S@!AV8B}7AFK?Sz;HniWaLF1co5m 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 27d59e19be12cac33548d5c1f898bfdf2a9abecd..7f29ef369623cff8af54c4bd697db88baa72740d 100644 GIT binary patch delta 94 zcmV-k0HOc2UbSAZXcUu*2s4w|6%v!K6pa%!0<A!Hf!jY|HmX3^oftr>g<z9T6(tnp z2b@8@fQv!ao0~y`*o{H5{E$JDN)%+1>J@DV{{R19IOqG5UKS_>Am-j7vx*k07??LI AQvd(} delta 99 zcmV-p0G$7|UbSAZXcUvA6-JY-6pa*VV8=kr_NGAe!?8f=WxYR;EM-8GUltsb5ETR% zT8Tpx?0ZT<%coF5NXlVBbQw`WL4sI8lS&k0lj;?12mJs4-^C8{lU^1m1YnasF|&#m Fs~CxTDxLrU 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 0ec9f4db76f3f488e648a2852a241ba1f4e46fc8..9daa82d811f69f8d4020491a951c4a41d7dd33d6 100644 GIT binary patch delta 97 zcmV-n0G|J~UbSAZXcUvA6-JY-6pa-BNV~zyvJ${=IN(7nP4vGYW`#kMUltsb5ETR% zT8TpxNTMFW*+ziC%fn7V(p-VSuU$AnlS&k0lj;?51Z}(}z>{AVCk4P}P94Crix#RF DIBO}J delta 92 zcmV-i0Hgo4UbSAZXcUu*2s4w|6%v!K6pa%vZka)aUlT&o#G*k5ZlFO%>zR{I6(tmD ymtw)>q$EI!CuG4KwPV4HpJKt2N)%+1>J@PWCtX26lV27m1wb;596+;+7OEKfMkLn& 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 9a869703b1fa32fed102900935735d61bd8fef92..5fe9642ca60e81fb3a7760a5c939b5bc064c0eac 100644 GIT binary patch delta 88 zcmV-e0H^=8UbSAZI~5evpa{U5)eAsU%V0kyu*N=wUdcX_PZcB-#m7HET{tU2vO=&w uc{j*E9t_AolS&jGlZps4lh_r41fcslB$HkiB?tfj0N`)t0YI~h7OEIN_aWT? delta 88 zcmV-e0H^=8UbSAZI~5e=xrIL)Mftz|B|SmUTVp{#dEvj4PZcB-nHL(tH)&hJEH_@k ul*V?!O1)IUlS&jGlZps4lh_r41Yj>^CX-$kB?$fh|DRwe|39;f7OEJ%^CnRM 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 d7534e83dddd4758148bafff7f1f326980f379cb..21f9201d1338eadcdbc6d885efde1caedc602354 100644 GIT binary patch delta 2142 zcma)7e{2&~9Pf3jT}NRdQJ8Bwqa~q#u%MgB)R1l~?UXYF&<s#<dAnZwdfayPe&9wz zibms>+<)&$fF&yt7#)le?O>h6xqtoB@P~hy;2$Q2WSY3_FQf5$*Sm68yJk%;m-l_2 z@8^Bq=Y8&V>M!r|y4QEH`KyKHZ+vgeknuv2d_Kc5P2~5P=%L`*{qccwY<xhzceIbH zbOi6iyKxupz+u+&1;sCXNl(xy%dkx_cz-G$41c%U|MBE%fB)f$K60iIBC(kSSt+!8 zahj|JIu5bk3b5ta<+hmdG$OUJ1Ft{mGaieu+lw)9=Gq=_9C>T?DFOMjuxs0AQ}Gs$ z$Fth|Zld(jwQ1%!)mu3%$x=?_RZQ`v3p9!^vmSf}U)40EZ^Kzdl`=9K?M~4%)R?92 zqPqo86Lfuz9K7BZqPidRNF7DF8d?+cZ<y)<Yd#~^L#&bP&F9{s`gTqlQzcF2keuVy z8YD>cTk}<U)k0lqOS7glMU&Hr<7?<Z+OM;J@22`Qqr8H9QtoN8e(NMd30v%pfcPAe zIZ2XJ3e}s%>=+N`xE3UOF$CyhF&uQdN`5N7`Qk9+@#y|YH|j|rNK-{P31je9IA*<v zN!MK0-a!*3o#SN@O;F)&7_zOx5qJ&8e!OD*;EXUOpU#C|f^$?jq^i7};U#Jjy7jEg zJ)fs~(1PV85y^FdngXr{ss~^3)nXK|rEn|S6v&E$2Uy9_?VX?@U`rJn2(U142zKu5 zHYiz6xi+ZTKGsxW-R%|`gmEM<jaM0+btu=f&2(dj)erWLA$g+OUt8alz+MPKyx&N% zy(LH8DA(&J^iE;$h8YDrFv6@c^nHS}Do=%?b8y=^n0Iv<Q8_=~)oz6^F_3&Y*$d&T zgiaVHKg@UJA41CoDp;6!@8MSyJr0b6T>(Dbr=k&&r(ki*2z;Mrrp&!rJ8?w1q9t)4 z5l_BGg$xV_V~^o3f}d86)s{1#zq>a`^`>0bSX{$8`S$KKGfa*y+{|xkj(Mr+tujhw zk%-2#igBN9?q%f;)cy9M8{l>KF206gEl1vUASQ{hPzU#anC|1YtSZ1sq9j{zSKym9 z1y7eY?s=QS4V@s*mR?~Vkz^_IUPGKP<TWF43SMlRBAkYIHG7X>W0S%M#*|mneG12$ z7hzO5LB20VcDRYjAEizo{ILk9$<D=4{zH>DD)0uOKVm1t-DCJ|2R#eGNyAXLhO_qS z=d12*g)(M-JdHUuxH&M&@hLuyG*LAI^Yn9hvY2Mp$?^LcW~j7${~xBM1VZ2vS|lq= n?M#{cycA|0l8vP(bBT18+nKB6VEH0*jg-s#m|w_m<vsra^zR?{ delta 2048 zcma)7U2M}<7>z?s+OD)hD*_hMY0IQ$V~EiLD(ojpN>bFIYD{P#q#@lpP8`dPgMT&{ zLIGJ_8)RuhpDP3vX<1iFyS3Yt4yA8^_A+hS!`>$$UeF$RVbWgEs(p6t%+AuPdAYjZ zJ>R+Ko_l<=@|VB#+)rO=npmy=Kp!o`(dizToO&5X%M3-spXJDo&iB9D8@v7BYV3<k zJ7XU_-y8Ff4aT5rYR?{e)ZosR`a5sr&&9Q0qVev>N8*dAbMfCFei(;Wr-KkJCm}yw zXnN3j@=XX$g*qtgIA7{-_W69%D<2J3+V4zKCpEp5;Y3L+2&}>x+~{Q^!i}YT+&EWK zRieMd<zz+7N@S!bZG2*wtD3jyZQ-uL_OGA8)0vK-rUy8dC?lj$M{8kLLz>=VuV;lu zh-a|-?v4|hzKs#{il|BqkqWF*heU}1d%Y&FR%j?KJ7-CgRVhOlwvG;^U7vfgQ`5JO zurk-1_AbNBz0;HiFYa}PQG9_&j3`QJ+0dJWT%JX9JR8D$^Fc(PnGdzOU4^Uj@4hxf z`FwgH+(UXZhcbrDCvlG6@=<#nf<NZ>bsx4+;-{=6kc$T2htpIme*}kt=+8IJ-z`<; zG&ryjd>!vmW{9G&QkE4Bo6xH#zp%Tg>1{TwAPPik2vlWswWW6PYrfiy{ApX^X0*we z6&DY(!q#uLqlOkos<43o8-thN<j!fslI@h|fU4tTT^0A;W|LtUhl}Ec8l$_8<wmwy zZnWF|Xm6fK7i<0X^>qoHjWERf%@jLFa@EapqkcH{?bHBRQE&poPnc8sGcKpF27kjn zx#^xvdb-T0ytTM*mmR)DJo!$t55u<>I(`Vm#aD_8*mBw6ZA^dPv4e?T7skadBcDzy zWLRJgw77W~zfUVu*4gZnxFWr#C2=UxpFC{vALDc&`WW9L{He8AZ94P&m%7_DeM=!{ zZmx2dV0dYg8iLiO+2Xq9SdW_CDv@-K2;@ReHs7=Ly<B?(^?-BfCisc>6xVTD&r$ST zh(*HRZh-qgOsAPmt7>6HL6mH`C-6<G%w4O@e(&EB+RzF3sd9jN1b<h;r#8g#3BMJI z0US~tGJhP$TJ|2{!N&PPbIGsjw9K&9Lm1&>FtQwO_Yy;Sxr@d>7XCOqTn-jf7H@<< zWfBI$PBOebrr%D`&meHzG}No%th4*)HTO0{8MQv1jX70(IXF^a(`<&Qf?@{dzt82? zj~VI-Q1`P`qLRD+57qn?3c*Kc2J+Qi)EtaeL(~GyRwL9X{DzehJgr`#z65UNZR%H; HSb5`Lj5zGa 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