CSS adjustments

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
-1.5912486827773675,0.1234163526804517,-1.86701669,1.5674159405996164,-2.956707,1.5267125296103494,1.919663671387592,1.2505142946891306,-0.2870321651528418,0.5914797217754322,1.302664751140798,-0.7926023493961842,0.6182639136965411,-0.50564543,0.4803598390614153,1.4023725637273463,1.1971768754272345,1.2837050572355977,-0.7110091475047194,1.310299011671734,1.865981372179317,-0.0142037563617151,-1.57547826,-1.08144134,-2.551855,2.170731082221168,-1.1874393,-1.6577266,-0.2455074481780722,2.5355054409942137,0
--1.6061698,-1.74365528,1.5953362700257374,1.5674159405996164,0.7002479374326634,1.5267125296103494,-0.7367329,1.2505142946891306,-0.2870321651528418,0.5914797217754322,1.302664751140798,-0.97492677,0.6182639136965411,1.15449396989304,0.4803598390614153,1.4023725637273463,1.1971768754272345,1.2837050572355977,-0.7110091475047194,1.310299011671734,1.865981372179317,-0.0142037563617151,-1.27131065,-0.71767315,1.6934421149268728,2.170731082221168,2.766787069811929,-1.4323769,-0.2455074481780722,2.5355054409942137,0
-1.5912486827773675,-2.08760379,1.5953362700257374,1.5674159405996164,0.7002479374326634,-1.48295382,1.919663671387592,-1.1549912,-0.2870321651528418,0.5914797217754322,-0.85476191,-0.7926023493961842,0.6182639136965411,1.15449396989304,0.4803598390614153,1.4023725637273463,1.1971768754272345,-1.7371815,-0.7110091475047194,1.310299011671734,-1.6070764,-2.0982248,1.564911830765109,1.8500569961730955,-2.54605362,2.170731082221168,2.766787069811929,-1.6538542,-0.2455074481780722,2.5355054409942137,0
-1.5912486827773675,0.1234163526804517,-1.92968373,1.5674159405996164,-3.039585,-1.55331184,1.919663671387592,1.2505142946891306,-0.2870321651528418,0.5914797217754322,1.302664751140798,-1.47876036,0.6182639136965411,1.15449396989304,0.4803598390614153,-1.22965761,1.1971768754272345,1.2837050572355977,-0.7110091475047194,1.310299011671734,1.865981372179317,-0.0142037563617151,-1.63835625,-1.15664005,-2.62164425,-1.38357559,2.766787069811929,2.072245145998075,-0.2455074481780722,2.5355054409942137,0
-1.5912486827773675,0.1234163526804517,-1.86701669,1.5674159405996164,-2.956707,1.5267125296103494,1.919663671387592,1.2505142946891306,-0.2870321651528418,0.5914797217754322,1.302664751140798,-0.7926023493961842,0.6182639136965411,-0.50564543,0.4803598390614153,1.4023725637273463,1.1971768754272345,1.2837050572355977,-0.7110091475047194,1.310299011671734,1.865981372179317,-0.0142037563617151,-1.57547826,-1.08144134,-2.551855,2.170731082221168,-1.1874393,2.072245145998075,-0.2455074481780722,2.5355054409942137,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.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

base/static/css/changes.css

@@ -1068,3 +1068,21 @@ body.dark-mode {
 .about-dashboard-section .btn-primary:hover {
   background-color: #0056b3;
 }
+
+@keyframes rotation {
+
+  0% {
+
+    transform: rotate(0deg);
+
+  }
+
+  100% {
+
+    transform: rotate(360deg);
+
+  }
+
+}
+
+

base/static/css/sb-admin-2.css

@@ -9711,6 +9711,65 @@ body {
   background-color: #fff;
 }
 
+.feature-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e0e0e0;
+}
+
+.feature-container h2 {
+  color: #4a90e2;
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 10px;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.feature-item:last-child {
+  border-bottom: none;
+}
+
+.feature-item input {
+  margin-right: 10px;
+  transform: scale(1.2);
+}
+
+.feature-item label {
+  font-size: 14px;
+  color: #333;
+}
+
+.feature-item label span {
+  font-weight: bold;
+  color: #4a90e2;
+}
+
+/* Add hover effect to make it interactive */
+.feature-item:hover {
+  background-color: #f4f8fa;
+}
+
+/* Add scrollbar styling */
+.feature-container {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.feature-item label span {
+  font-weight: bold;
+  color: #4a90e2;
+}
+
 .table-responsive {
   max-height: 500px;
   overflow-y: auto;
@@ -9749,6 +9808,40 @@ body {
   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 */
+}
+
+.table tbody tr:hover {
+  background-color: #e8e5f9;
+}
+
 .text-xs {
   font-size: 0.7rem;
 }
@@ -9926,6 +10019,14 @@ body {
     font-size: 1rem;
   }
 }
+::-webkit-scrollbar-thumb {
+  background: #4a90e2;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #357abd;
+}
+
 .dropdown .dropdown-menu {
   font-size: 0.85rem;
 }
@@ -10699,6 +10800,15 @@ button.btn-primary:hover {
   transform: translateX(5px); /* Slide the icon slightly to the right on hover */
 }
 
+/* Search Input */
+.search-box {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 15px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
 .card .card-header .dropdown {
   line-height: 1;
 }
@@ -10784,6 +10894,21 @@ button.btn-primary:hover {
   }
 }
 
+/* Thanos */
+/* plotly toolbar */
+.modebar {
+  display: none !important;
+}
+
+.plotly_fig {
+  resize: vertical;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .bg-login-image {
   background: url("https://source.unsplash.com/K4mSJ7kc0As/600x800");
   background-position: center;
@@ -10897,67 +11022,67 @@ form.user .btn-user {
 
 @keyframes noise-anim {
   0% {
-    clip: rect(87px, 9999px, 75px, 0);
+    clip: rect(23px, 9999px, 58px, 0);
   }
   5% {
-    clip: rect(46px, 9999px, 19px, 0);
+    clip: rect(32px, 9999px, 63px, 0);
   }
   10% {
-    clip: rect(9px, 9999px, 86px, 0);
+    clip: rect(77px, 9999px, 97px, 0);
   }
   15% {
-    clip: rect(78px, 9999px, 29px, 0);
+    clip: rect(50px, 9999px, 39px, 0);
   }
   20% {
-    clip: rect(20px, 9999px, 72px, 0);
+    clip: rect(54px, 9999px, 93px, 0);
   }
   25% {
-    clip: rect(91px, 9999px, 29px, 0);
+    clip: rect(25px, 9999px, 51px, 0);
   }
   30% {
-    clip: rect(57px, 9999px, 54px, 0);
+    clip: rect(11px, 9999px, 71px, 0);
   }
   35% {
-    clip: rect(91px, 9999px, 98px, 0);
+    clip: rect(61px, 9999px, 16px, 0);
   }
   40% {
-    clip: rect(6px, 9999px, 23px, 0);
+    clip: rect(28px, 9999px, 48px, 0);
   }
   45% {
-    clip: rect(100px, 9999px, 20px, 0);
+    clip: rect(88px, 9999px, 96px, 0);
   }
   50% {
-    clip: rect(92px, 9999px, 19px, 0);
+    clip: rect(55px, 9999px, 59px, 0);
   }
   55% {
-    clip: rect(71px, 9999px, 53px, 0);
+    clip: rect(58px, 9999px, 23px, 0);
   }
   60% {
-    clip: rect(33px, 9999px, 31px, 0);
+    clip: rect(97px, 9999px, 45px, 0);
   }
   65% {
-    clip: rect(78px, 9999px, 51px, 0);
+    clip: rect(15px, 9999px, 55px, 0);
   }
   70% {
-    clip: rect(77px, 9999px, 94px, 0);
+    clip: rect(77px, 9999px, 36px, 0);
   }
   75% {
-    clip: rect(89px, 9999px, 62px, 0);
+    clip: rect(60px, 9999px, 77px, 0);
   }
   80% {
-    clip: rect(68px, 9999px, 24px, 0);
+    clip: rect(52px, 9999px, 71px, 0);
   }
   85% {
-    clip: rect(23px, 9999px, 76px, 0);
+    clip: rect(4px, 9999px, 31px, 0);
   }
   90% {
-    clip: rect(33px, 9999px, 99px, 0);
+    clip: rect(59px, 9999px, 53px, 0);
   }
   95% {
-    clip: rect(32px, 9999px, 94px, 0);
+    clip: rect(73px, 9999px, 79px, 0);
   }
   100% {
-    clip: rect(88px, 9999px, 52px, 0);
+    clip: rect(11px, 9999px, 39px, 0);
   }
 }
 .error:after {
@@ -10975,67 +11100,67 @@ form.user .btn-user {
 
 @keyframes noise-anim-2 {
   0% {
-    clip: rect(98px, 9999px, 71px, 0);
+    clip: rect(89px, 9999px, 11px, 0);
   }
   5% {
-    clip: rect(97px, 9999px, 82px, 0);
+    clip: rect(67px, 9999px, 4px, 0);
   }
   10% {
-    clip: rect(6px, 9999px, 56px, 0);
+    clip: rect(61px, 9999px, 21px, 0);
   }
   15% {
-    clip: rect(61px, 9999px, 84px, 0);
+    clip: rect(78px, 9999px, 69px, 0);
   }
   20% {
-    clip: rect(87px, 9999px, 76px, 0);
+    clip: rect(100px, 9999px, 89px, 0);
   }
   25% {
-    clip: rect(100px, 9999px, 44px, 0);
+    clip: rect(51px, 9999px, 99px, 0);
   }
   30% {
-    clip: rect(93px, 9999px, 37px, 0);
+    clip: rect(3px, 9999px, 85px, 0);
   }
   35% {
-    clip: rect(33px, 9999px, 37px, 0);
+    clip: rect(24px, 9999px, 42px, 0);
   }
   40% {
-    clip: rect(8px, 9999px, 45px, 0);
+    clip: rect(70px, 9999px, 3px, 0);
   }
   45% {
-    clip: rect(82px, 9999px, 11px, 0);
+    clip: rect(33px, 9999px, 55px, 0);
   }
   50% {
-    clip: rect(85px, 9999px, 54px, 0);
+    clip: rect(92px, 9999px, 31px, 0);
   }
   55% {
-    clip: rect(94px, 9999px, 25px, 0);
+    clip: rect(86px, 9999px, 36px, 0);
   }
   60% {
-    clip: rect(27px, 9999px, 19px, 0);
+    clip: rect(78px, 9999px, 71px, 0);
   }
   65% {
-    clip: rect(12px, 9999px, 73px, 0);
+    clip: rect(80px, 9999px, 2px, 0);
   }
   70% {
-    clip: rect(17px, 9999px, 20px, 0);
+    clip: rect(8px, 9999px, 50px, 0);
   }
   75% {
-    clip: rect(13px, 9999px, 89px, 0);
+    clip: rect(43px, 9999px, 81px, 0);
   }
   80% {
-    clip: rect(82px, 9999px, 55px, 0);
+    clip: rect(73px, 9999px, 91px, 0);
   }
   85% {
-    clip: rect(47px, 9999px, 68px, 0);
+    clip: rect(60px, 9999px, 31px, 0);
   }
   90% {
-    clip: rect(31px, 9999px, 8px, 0);
+    clip: rect(84px, 9999px, 12px, 0);
   }
   95% {
-    clip: rect(53px, 9999px, 43px, 0);
+    clip: rect(45px, 9999px, 87px, 0);
   }
   100% {
-    clip: rect(46px, 9999px, 9px, 0);
+    clip: rect(82px, 9999px, 5px, 0);
   }
 }
 .error:before {

base/static/css/updates_sb-admin-2.css

@@ -4869,21 +4869,6 @@ input[type="button"].btn-block {
   padding: 1.25rem;
 }
 
-/* Thanos */
-/* plotly toolbar */
-.modebar {
-  display: none !important;
-}
-
-.plotly_fig {
-  resize: vertical;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-}
-
 @keyframes rotation {
   0% {
     transform: rotate(0deg);

base/static/scss/_buttons.scss

@@ -164,3 +164,17 @@ button.btn-primary {
     5px
   ); /* Slide the icon slightly to the right on hover */
 }
+
+/* Search Input */
+
+.search-box {
+  width: 100%;
+
+  padding: 8px;
+
+  margin-bottom: 15px;
+
+  border: 1px solid #ddd;
+
+  border-radius: 5px;
+}

base/static/scss/_charts.scss

@@ -27,3 +27,19 @@
     height: calc(20rem - 43px) !important;
   }
 }
+
+
+/* Thanos */
+/* plotly toolbar */
+.modebar {
+  display: none !important;
+}
+
+.plotly_fig {
+  resize: vertical;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}

base/static/scss/_dropdowns.scss

@@ -37,3 +37,4 @@
 .rotate-up {
   transform: rotate(0deg);
 }
+

base/static/scss/utilities/_forms.scss

@@ -58,3 +58,81 @@
     }
   }
 }
+
+.feature-container {
+  max-width: 400px;
+
+  margin: 0 auto;
+
+  padding: 20px;
+
+  background-color: white;
+
+  border-radius: 8px;
+
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+  border: 1px solid #e0e0e0;
+}
+
+.feature-container h2 {
+  color: #4a90e2;
+
+  font-size: 18px;
+
+  margin-bottom: 20px;
+}
+
+.feature-item {
+  display: flex;
+
+  align-items: center;
+
+  margin-bottom: 10px;
+
+  padding: 10px;
+
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.feature-item:last-child {
+  border-bottom: none;
+}
+
+.feature-item input {
+  margin-right: 10px;
+
+  transform: scale(1.2);
+}
+
+.feature-item label {
+  font-size: 14px;
+
+  color: #333;
+}
+
+.feature-item label span {
+  font-weight: bold;
+
+  color: #4a90e2;
+}
+
+/* Add hover effect to make it interactive */
+
+.feature-item:hover {
+  background-color: #f4f8fa;
+}
+
+/* Add scrollbar styling */
+
+.feature-container {
+  max-height: 300px;
+
+  overflow-y: auto;
+}
+
+.feature-item label span {
+  font-weight: bold;
+
+  color: #4a90e2;
+}

base/static/scss/utilities/_responsiveness.scss

@@ -115,3 +115,11 @@
     font-size: 1rem;
   }
 }
+
+::-webkit-scrollbar-thumb {
+  background: #4a90e2;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #357abd;
+}

base/static/scss/utilities/_tables.scss

@@ -39,3 +39,47 @@
     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 */
+}
+
+.table tbody tr:hover {
+  background-color: #e8e5f9;
+}