Add popovers to config

app/main.py

@@ -56,9 +56,28 @@ def set_benchmark(benchmark_id):
 @main.route("/config")
 @login_required
 def config():
+    explanations = {
+        "score": "Deafult score if none is provided",
+        "platform": "Name of the platform running benchmarks",
+        "n_folds": "# of folds to split train & test samples",
+        "model": "Default model used if none is provided",
+        "stratified": "Wether or not to split data in a stratified way",
+        "source_data": "Type of datasets",
+        "discretize": "Discretize of not datasets before training",
+        "fit_features": "Wheter or not to include features names in fit",
+        "seeds": "Seeds used to train/test models",
+        "nodes": "Label for nodes in report",
+        "leaves": "Label for leaves in report",
+        "depth": "Label for depth in report",
+        "margin": "Margin to add to ZeroR classifier in binary classes "
+        "datasets",
+        "framework": "HTML Framework default used in be_flask command",
+    }
     os.chdir(current_user.benchmark.folder)
     env = dotenv.dotenv_values(".env")
-    return render_template("config.html", config_env=env)
+    return render_template(
+        "config.html", config_env=env, explanations=explanations
+    )
 
 
 @main.route("/login", methods=["GET", "POST"])

app/static/css/main.css

@@ -48,4 +48,8 @@ body {
   color:yellow;
 }
 
-
+.custom-popover {
+  --bs-popover-border-color: var(--bs-primary);
+  --bs-popover-header-bg: var(--bs-primary);
+  --bs-popover-header-color: var(--bs-white);
+}

app/templates/config.html

@@ -13,7 +13,16 @@
             <tbody>
                 {% for item, value in config_env.items() %}
                     <tr>
-                        <td>{{ item }}</td>
+                        <td>
+                            {{ item }}
+                            <i tabindex="{{ loop.index }}"
+                               class="mdi mdi-help-circle-outline"
+                               data-bs-toggle="popover"
+                               data-bs-custom-class="custom-popover"
+                               data-bs-trigger="focus"
+                               title="{{ item }}"
+                               data-bs-content="{{ explanations[item] }}"></i>
+                        </td>
                         <td>{{ value }}</td>
                     </tr>
                 {% endfor %}
@@ -21,3 +30,10 @@
         </table>
     </div>
 {% endblock content %}
+{% block jscript %}
+    {{ super() }}
+    <script>
+        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
+    </script>
+{% endblock jscript %}