Merge pull request #256 from lsst/tickets/DM-41867

DM-41867: Add improvements to schema browser
lsst · Oct 18, 2024 · 7d2bb10 · 7d2bb10
2 parents f66be47 + e6f0cd0
commit 7d2bb10
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 38 deletions.
diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml
@@ -33,7 +33,7 @@ jobs:
         run: sudo apt-get install -y ruby-full build-essential zlib1g-dev
 
       - name: Install required Ruby gems
-        run: sudo gem install bundler jekyll jekyll-theme-cayman jekyll-last-modified-at
+        run: sudo gem install bundler jekyll jekyll-theme-cayman
 
       - name: Build the schema browser site
         run: jekyll build

diff --git a/Makefile b/Makefile
@@ -16,8 +16,7 @@ init:
 		echo >&2 "For more information, visit: https://jekyllrb.com/docs/installation"; \
 		exit 1; \
 	}
-	gem install -q --silent --no-verbose jekyll bundler jekyll-theme-cayman jekyll-last-modified-at
-
+	gem install -q --silent --no-verbose jekyll bundler jekyll-theme-cayman
 # Run the web server and watch for changes
 run:
 	jekyll serve --watch

diff --git a/_config.yml b/_config.yml
@@ -1,8 +1,4 @@
 theme: jekyll-theme-cayman
-plugins:
-  - jekyll-last-modified-at
-last-modified-at:
-  date-format: '%B %d, %Y'
 
 data_dir: ./yml
 layouts_dir: _layouts

diff --git a/browser/_layouts/schema.html b/browser/_layouts/schema.html
@@ -2,20 +2,52 @@
 <html lang="{{ site.lang | default: "en-US" }}">
   <head>
     {% include _header.html %}
+    <!-- DataTables setup -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
+    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
+    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
+    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
+    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
+    <script>
+    $(document).ready(function() {
+        $('table.schema-table').each(function() {
+            var table = $(this);
+            var tableName = table.closest('section').find('h2').text().trim();
+            table.DataTable({
+                "pageLength": 10, // Set the default number of entries to show
+                "order": [[5, 'asc'], [0, 'asc']], // Sort by TAP Column Index and then by Column Name
+                dom: 'Bfrtipl', // Add the buttons to the DataTable
+                buttons: [
+                    {
+                        extend: 'csvHtml5',
+                        filename: function() {
+                            return tableName;
+                        }
+                    }
+                ]
+            });
+        });
+    });
+    </script>
   </head>
   <body>
+    <p>
+    {%- assign schema_tables = site.data[page.schema].tables %}
+    </p>
     <div id="container">
       <nav id="sidebar">
         {% include _logo.html %}
         <ul>
-            <li><b>Updated:</b> {% last_modified_at %}</li>
+            <li><b>Updated:</b> {{ site.time | date: "%B %-d, %Y" }}</li>
         </ul>
         <ul>
           <li><a href=".">Schema Browser</a></li>
           <ul>
             <li><a href="">{{ page.title }}</a></li>
             <ul>
-              {%- for table in site.data[page.schema].tables %}
+              {%- for table in schema_tables %}
               <li><a href="{{ table['@id'] }}">{{ table.name }}</a></li>
               {%- endfor %}
             </ul>
@@ -29,30 +61,46 @@
         <main class="main-content">
           <h1>{{ page.title }}</h1>
           {{ content }}
-          {%- for table in site.data[page.schema].tables %}
+          {%- for table in schema_tables %}
+          <hr style="margin-top: 20px; margin-bottom: 10px" />
           <section id="{{ table['@id'] | remove:'#' }}">
             <h2>{{ table.name }}</h2>
             <p>{{ table.description }}</p>
             <table class="schema-table">
-              <tr>
-                <th>Column Name</th>
-                <th>Data Type</th>
-                <th>Unit</th>
-                <th>Description [UCD]</th>
-              </tr>
-              {%- for col in table.columns %}
-              <tr id="{{ col['@id'] | remove:'#' }}">
-                <td class="column-name">
-                    <a href="#{{ col['@id'] | remove:'#' }}">{{ col.name }}</a>
-                </td>
-                <td>{{ col.datatype }}</td>
-                <td>{{ col['ivoa:unit'] | default: col['fits:tunit'] }}</td>
-                <td>
-                    {{- col.description | escape }}
-                    {%- if col['ivoa:ucd'] %} [{{col['ivoa:ucd']}}]{% endif -%}
-                </td>
-              </tr>
-              {%- endfor %}
+              <thead>
+                <tr>
+                  <th title="Name of the column in the database">Column Name</th>
+                  <th title="Data type of the column">Data Type</th>
+                  <th title="Measurement unit of the column in IVOA units">Unit</th>
+                  <th title="Description of the column">Description</th>
+                  <th title="IVOA Unified Content Descriptor (UCD) of the column">UCD</th>
+                  <th title="Index used to recommend column ordering for clients">Index</th>
+                  <th title="When set to 1, indicates that the column is considered a core part of the content">Principal</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for col in table.columns %}
+                <tr id="{{ col['@id'] | remove:'#' }}">
+                  <td class="column-name">
+                  {{ col.name }}</a>
+                  </td>
+                  <td>{{ col.datatype }}</td>
+                  <td>{{ col['ivoa:unit'] | default: col['fits:tunit'] }}</td>
+                  <td>
+                  {{- col.description | escape }}
+                  </td>
+                  <td>
+                  {%- if col['ivoa:ucd'] %}{{col['ivoa:ucd']}}{% endif -%}
+                  </td>
+                  <td style="text-align: center;">
+                  {%- if col['tap:column_index'] %}{{col['tap:column_index']}}{% endif -%}
+                  </td>
+                  <td style="text-align: center;">
+                  {%- if col['tap:principal'] %}{{col['tap:principal']}}{% endif -%}
+                  </td>
+                </tr>
+                {%- endfor %}
+              </tbody>
             </table>
           </section>
           {%- endfor %}

diff --git a/browser/_layouts/schema_index.html b/browser/_layouts/schema_index.html
@@ -8,7 +8,7 @@
       <nav id="sidebar">
         {% include _logo.html %}
         <ul>
-            <li><b>Updated:</b> {% last_modified_at %}</li>
+            <li><b>Updated:</b> {{ site.time | date: "%B %-d, %Y" }}</li>
         </ul>
         <ul>
           <li><a href=".">Schema Browser</a></li>

diff --git a/browser/_sass/style2.scss b/browser/_sass/style2.scss
@@ -73,3 +73,8 @@ a {
 .main-content .schema-table .column-name {
 	font-family: monospace;
 }
+
+.dataTables_length {
+    margin-top: 10px;
+    margin-left: 75px;
+}
diff --git a/browser/dp01.md b/browser/dp01.md