From a3b8e9c3c6472f1806a0743cd346d8d440228711 Mon Sep 17 00:00:00 2001
From: Cristhian Garcia <crisgarta8@gmail.com>
Date: Tue, 19 Mar 2024 11:50:39 -0500
Subject: [PATCH] feat: improve CSS of dashboards

---
 .../static/css/superset.css                   | 51 ++++++++++++++++++-
 .../static/html/superset.html                 | 39 +++++++-------
 .../static/js/embed_dashboard.js              |  1 -
 .../instructor_dashboard/aspects.html         |  2 +-
 4 files changed, 72 insertions(+), 21 deletions(-)

diff --git a/platform_plugin_aspects/static/css/superset.css b/platform_plugin_aspects/static/css/superset.css
index e549ea4..371643a 100644
--- a/platform_plugin_aspects/static/css/superset.css
+++ b/platform_plugin_aspects/static/css/superset.css
@@ -1,5 +1,52 @@
-.superset-embedded-container > iframe {
-    height: 720px;
+.superset-embedded-container>iframe {
+    height: 920px;
     width: 100%;
     display: block;
+    border: none;
 }
+
+.aspects-tabs {
+    position: relative;
+    min-height: 920px;
+    /* This part sucks */
+    clear: both;
+    margin: 25px 0;
+}
+
+.aspects-tab {
+    float: left;
+}
+
+.aspects-tab label {
+    background: #eee;
+    padding: 10px;
+    border: 1px solid #ccc;
+    margin-left: -1px;
+    position: relative;
+    left: 1px;
+}
+
+.aspects-tab [type=radio] {
+    display: none;
+}
+
+.aspects-content {
+    position: absolute;
+    top: 28px;
+    left: 0;
+    background: white;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    border: 1px solid #ccc;
+}
+
+[type=radio]:checked~label {
+    background: white;
+    border-bottom: 1px solid white;
+    z-index: 2;
+}
+
+[type=radio]:checked~label~.aspects-content {
+    z-index: 1;
+}
\ No newline at end of file
diff --git a/platform_plugin_aspects/static/html/superset.html b/platform_plugin_aspects/static/html/superset.html
index c8ec9fe..14191bd 100644
--- a/platform_plugin_aspects/static/html/superset.html
+++ b/platform_plugin_aspects/static/html/superset.html
@@ -2,29 +2,34 @@
 
 <script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>
 
-<div class="aspects-wrapper" width="parent">
+<div class="aspects-wrapper" width="fit-content">
     <h2>{{display_name}}</h2>
 
     {% if exception %}
     <p>{% trans 'Superset is not configured properly. Please contact your system administrator.'%}</p>
-    <p>
-        {{exception}}
-    </p>
+    <p>{{exception}}</p>
     {% elif not dashboard_uuid and not superset_dashboards %}
-    <p>
-        Dashboard UUID is not set. Please set the dashboard UUID in the Studio. {{dashboard_uuid}}
-    </p>
-    {% elif superset_url and superset_token %}
-        {% if xblock_id %}
-        <div class="superset-embedded-container" id="superset-embedded-container-{{xblock_id}}"></div>
-        {% else %}
-            {% for dashboard in superset_dashboards %}
-                <div>
-                    <h3>{{dashboard.name}}</h3>
-                </div>
+    <p>Dashboard UUID is not set. Please set the dashboard UUID in the Studio. {{dashboard_uuid}}</p>
+    {% elif superset_url and superset_token %} {% if xblock_id %}
+    <div class="superset-embedded-container" id="superset-embedded-container-{{xblock_id}}"></div>
+    {% else %}
+    <div class="aspects-tabs">
+        {% for dashboard in superset_dashboards %}
+        <div class="aspects-tab">
+            {% if forloop.counter == 1 %}
+            <input type="radio" id="tab-{{forloop.counter}}" name="tab-group-1" checked="checked" />
+            {% else %}
+            <input type="radio" id="tab-{{forloop.counter}}" name="tab-group-1" />
+            {% endif %}
+            <label for="tab-{{forloop.counter}}">{{dashboard.name}}</label>
+            <div class="aspects-content">
                 <div class="superset-embedded-container" id="superset-embedded-container-{{dashboard.uuid}}"></div>
-            {% endfor %}
-        {% endif %}
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% endif %}
+
     <script type="text/javascript">
         window.superset_dashboards = {{superset_dashboards | safe }};
         window.superset_url = "{{superset_url}}";
diff --git a/platform_plugin_aspects/static/js/embed_dashboard.js b/platform_plugin_aspects/static/js/embed_dashboard.js
index 35b7735..1013001 100644
--- a/platform_plugin_aspects/static/js/embed_dashboard.js
+++ b/platform_plugin_aspects/static/js/embed_dashboard.js
@@ -28,7 +28,6 @@ function embedDashboard(dashboard_uuid, superset_url, superset_token, xblock_id)
 
 if (window.superset_dashboards !== undefined) {
   window.superset_dashboards.forEach(function(dashboard) {
-    console.log(dashboard)
     embedDashboard(dashboard.uuid, window.superset_url, window.superset_token, dashboard.uuid);
   });
 }
diff --git a/platform_plugin_aspects/templates/instructor_dashboard/aspects.html b/platform_plugin_aspects/templates/instructor_dashboard/aspects.html
index 50da207..cddeb41 100644
--- a/platform_plugin_aspects/templates/instructor_dashboard/aspects.html
+++ b/platform_plugin_aspects/templates/instructor_dashboard/aspects.html
@@ -14,7 +14,7 @@
 <section class="superset">
     % if superset_url:
     <div class="superset-link">
-      <a href="${superset_url}">${_("Go to Superset")}</a>
+      <a href="${superset_url}login/openedxsso">${_("Go to Superset to create new or further customize the reports below.")}</a>
     </div>
     % endif
     ${HTML(section_data['fragment'].body_html())}