Fixed arrow character in columns descriptions tab (#7)

Fixed arrows and other minor changes to descriptions tab

Readme.md

@@ -70,6 +70,13 @@ In order to display information related to any external ETLs there are some addi
 - providing a custom jinja template named `extra.html` in `dashboard/blueprints/extra/templates`. An example of such template is available [here](examples/extra.html),
 - providing custom logic for data processing in `dashboard/blueprints/extra/extra.py` method `extra_etl` to process and enrich the data.
 
+
+#### Table descriptions
+
+The table descriptions tab displays table and column descriptions (comments). This can be useful for stakeholders to better understand your data structure and search for particular information. The default implementation takes them from AWS glue which stores comments added during table creation. Since not all tables have to have comments provided, this tab is fully optional.
+
+It's possible to set a custom data provider which reads the table descriptions from a different source than AWS glue. This is controlled by the TABLE_DESCRIPTION_SERVICE setting. 
+
 ## Running locally
 
 See: https://hub.docker.com/r/fandom/discreetly/

dashboard/blueprints/page/templates/descriptions.html

@@ -23,14 +23,16 @@
 
 <div id="table-container">
     <div class="row mt-3 table-header">
-        <div class="col-3"><a href="#" id="all_toggle">&#x2B9F</a> Database | Table name</div>
+        <div class="col-3"><a href="#" id="all_toggle" class="toggle"><span class="cui-chevron-bottom" aria-hidden="true"></span></a>
+            Database | Table name
+        </div>
         <div class="col-9">Table description<br />Column | Type | Description</div>
     </div>
 {% for table_name, details in tables.items() %}
 <div id="{{ table_name }}" class="row mt-3 table-data">
   <div class="col-3">
     <p class="table-name">
-        <a href="#" id="toggle_{{ table_name }}">&#x2B9F</a>
+        <a href="#" id="toggle_{{ table_name }}" class="toggle row-toggle"><span class="cui-chevron-bottom" aria-hidden="true"></span></a>
         {{ table_name }}
     </p>
   </div>
@@ -70,44 +72,44 @@
     <script src="{{ url_for('static', filename='js/highlight.js') }}"></script>
     <script src="{{ url_for('static', filename='js/render_vis.js') }}"></script>
     <script>
-        collapsed_char = '\u2B9E';
-        expanded_char = '\u2B9F';
+        const collapsed_char = '<span class="cui-chevron-right" aria-hidden="true"></span>';
+        const expanded_char = '<span class="cui-chevron-bottom" aria-hidden="true"></span>';
 
 
         expand_all = function() {
-            $("div[id^=columns_]").css("display", "block");
-            $("a[id^=toggle_]").text(expanded_char);
-            $("a[id=all_toggle]").text(expanded_char);
+            $(".column-data-section").css("display", "block");
+            $(".row-toggle").html(expanded_char);
+            $("a[id=all_toggle]").html(expanded_char);
         };
 
         collapse_all = function() {
-            $("div[id^=columns_]").css("display", "none");
-            $("a[id^=toggle_]").text(collapsed_char);
-            $("a[id=all_toggle]").text(collapsed_char);
+            $(".column-data-section").css("display", "none");
+            $(".row-toggle").html(collapsed_char);
+            $("a[id=all_toggle]").html(collapsed_char);
         };
 
-        let search = new SearchProvider('.table-data');
+        const search = new SearchProvider('.table-data');
         search.onSearchPhraseChanged = expand_all;
         search.main();
 
         window.onload = checkHighlight;
 
         //toggle visibility of a single row
-        $("a[id^=toggle_]").click(function(event) {
+        $(".row-toggle").click(function(event) {
             id = ("#columns_" + $(this).attr('id').substr('toggle_'.length)).replace(".", "\\.")
-            if ($(this).text() === collapsed_char) {
+            if ($(this).html() === collapsed_char) {
                 $(id).css("display", "block");
-                $(this).text(expanded_char)
+                $(this).html(expanded_char)
             } else {
                 $(id).css("display", "none");
-                $(this).text(collapsed_char)
+                $(this).html(collapsed_char)
             }
             event.preventDefault();
         });
 
         //toggle visibility of all rows
         $("a[id=all_toggle]").click(function(event) {
-            if ($(this).text() === collapsed_char) {
+            if ($(this).html() === collapsed_char) {
                 expand_all();
             } else {
                 collapse_all();

dashboard/static/css/descriptions.css

@@ -23,3 +23,7 @@
 .column-data-section {
 	display: block;
 }
+
+a.toggle:hover {
+   text-decoration: none;
+}