Initial commit

skills/model-explainability-tool/assets/visualization_styles.css

@@ -0,0 +1,118 @@
+/*
+  visualization_styles.css - CSS file for styling visualizations of feature importance and model predictions.
+
+  This file provides the styling for visualizations generated by the model-explainability-tool plugin.
+  It includes styles for feature importance charts, prediction breakdowns, and other interpretability
+  visualizations.
+
+  Feel free to customize these styles to match your application's design.
+
+  Table of Contents:
+  1. General Styles
+  2. Feature Importance Chart Styles
+  3. Prediction Breakdown Styles
+  4. [Add more sections as needed]
+*/
+
+/* 1. General Styles */
+
+body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.visualization-container {
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.visualization-title {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.visualization-description {
+  font-size: 1em;
+  color: #555;
+  margin-bottom: 20px;
+}
+
+/* 2. Feature Importance Chart Styles */
+
+.feature-importance-chart {
+  /* Styles for the chart container */
+  width: 100%;
+  height: 400px; /* Adjust as needed */
+}
+
+.feature-importance-bar {
+  /* Styles for individual bars in the chart */
+  background-color: #4CAF50; /* Green */
+  color: white;
+  padding: 5px;
+  margin-bottom: 2px;
+  text-align: right;
+}
+
+.feature-name {
+  /* Styles for feature names displayed in the chart */
+  float: left;
+}
+
+.feature-importance-value {
+  /* Styles for feature importance values */
+  float: right;
+}
+
+/* 3. Prediction Breakdown Styles */
+
+.prediction-breakdown {
+  /* Styles for the overall prediction breakdown container */
+}
+
+.prediction-breakdown-item {
+  /* Styles for individual items in the breakdown */
+  margin-bottom: 5px;
+}
+
+.prediction-breakdown-label {
+  /* Styles for labels in the breakdown */
+  font-weight: bold;
+}
+
+.prediction-breakdown-value {
+  /* Styles for values in the breakdown */
+  color: #007bff; /* Blue */
+}
+
+/* 4.  [Add more sections as needed. Example: Styles for specific model types] */
+/* Example: Styles for tree-based models */
+
+.tree-node {
+    /* Styles for nodes in a decision tree visualization */
+    border: 1px solid #ddd;
+    padding: 5px;
+    margin: 2px;
+    border-radius: 3px;
+}
+
+/* Placeholders for future customization */
+
+/* Example: Add styles for different color palettes */
+/* .color-palette-1 { ... } */
+
+/* Add responsive styles for different screen sizes */
+@media (max-width: 768px) {
+  .visualization-container {
+    margin: 10px;
+    padding: 10px;
+  }
+
+  .feature-importance-chart {
+    height: 300px; /* Adjust height for smaller screens */
+  }
+}