dbviewer 0.4.8 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03dfb13567e8cf7a2eaf2977e421fec7a2117ff12a6462515399a4b7cfb056d1
-  data.tar.gz: 77ae23ada80eabbc1a5744376a96c0d5df4f20f0cb3723be4c0f9c9967994716
+  metadata.gz: 628884438be23468b7910e2a13c14b2aa00cc6361f01cb09b53ecdcf1d8a0b78
+  data.tar.gz: e9952d0c11ae3669b2604ac208f1a4ae224c37eb4d5f2b1074c4f284bb0bc24a
 SHA512:
-  metadata.gz: 35d69706133dc764c081a6bc172dc0d99f39c2eaa7d62db9c17664c5a1fe05b78255932bd14a3f9a9542e99cb74020cb2926d69c9d21d9a339776fc4023098e9
-  data.tar.gz: b3a4e2029d81da79e922fb5ee0e889fc9e1f66e66129136333f6820d66dbc1dd7648da63a4ab99d3ed822e8cc64c77e9815a1c1bd34b4d0a11b208118d2eb72c
+  metadata.gz: 369f106d728156712416e6d1f65c51e156ec1357e717c5cc4f95e9fe16dbe696e3a06b8c70a2ef2fd6ae559dd0e7ad7b73fc6a5b2e0ccc396a756633d733c2dd
+  data.tar.gz: 273df74ea6e69b327b01faecb4b3572983fbd461ee042c41ba2402729482ead2b9ebaed117c95158ff01def2e1a1373aaf0fed75d8268d8546b0f3e38d2ff2ae

data/README.md

@@ -5,7 +5,8 @@
 DBViewer is a powerful Rails engine that provides a comprehensive interface to view and explore database tables, records, and schema.
 It's designed for development, debugging, and database analysis, offering a clean and intuitive way to interact with your application's database.
 
-<img width="1470" alt="image" src="https://github.com/user-attachments/assets/c946a286-e80a-4cca-afa0-654052e4ef2c" />
+<img width="1470" alt="image" src="https://github.com/user-attachments/assets/0d2719ad-f5b4-4818-891d-5bff7be6c5c3" />
+
 
 ## ✨ Features
 
@@ -45,27 +46,10 @@ It's designed for development, debugging, and database analysis, offering a clea
 
 <details>
   <summary>Click to see more screenshots</summary>
-  
-#### Dashboard Overview
-
-  <img width="1470" alt="image" src="https://github.com/user-attachments/assets/4e803d51-9a5b-4c80-bb4c-a761dba15a40" />
-
-#### Table Details
-
-  <img width="1470" alt="image" src="https://github.com/user-attachments/assets/fe425ab4-5b22-4839-87bc-050b80ad4cf0" />
-
-#### Query Editor
-
-  <img width="1470" alt="image" src="https://github.com/user-attachments/assets/392c73c7-0724-4a39-8ffa-8ff5115c5d5f" />
-
-#### Query Logs
-
-  <img width="1470" alt="image" src="https://github.com/user-attachments/assets/7fcf3355-be3c-4d6a-9ab0-811333be5bbc" />
 
-#### ERD
+  <img width="1470" alt="image" src="https://github.com/user-attachments/assets/7d708c14-5f78-42c4-b769-2167546b3aad" />
+  <img width="1470" alt="image" src="https://github.com/user-attachments/assets/f6d9a39a-a571-4328-908a-d96b3148f707" />
 
-  <img width="1470" alt="image" src="https://github.com/user-attachments/assets/0a2f838f-4ca6-4592-b939-7c7f8ac40f48" />
-  
 </details>
 
 ## 📥 Installation

data/app/controllers/concerns/dbviewer/database_operations.rb

@@ -50,7 +50,6 @@ module Dbviewer
       database_manager.tables.map do |table_name|
         table_stats = {
           name: table_name
-          # columns_count: database_manager.column_count(table_name)
         }
 
         # Only fetch record counts if explicitly requested
@@ -72,36 +71,8 @@ module Dbviewer
         largest_tables: tables.sort_by { |t| -t[:record_count] }.first(10),
         empty_tables: tables.select { |t| t[:record_count] == 0 }
       }
-
-      # Calculate total foreign key relationships
-      begin
-        total_relationships = 0
-        tables.each do |table|
-          metadata = fetch_table_metadata(table[:name])
-          total_relationships += metadata[:foreign_keys].size if metadata && metadata[:foreign_keys]
-        end
-        analytics[:total_relationships] = total_relationships
-      rescue => e
-        Rails.logger.error("Error calculating relationship count: #{e.message}")
-        analytics[:total_relationships] = 0
-      end
-
       # Calculate schema size if possible
-      begin
-        analytics[:schema_size] = calculate_schema_size
-      rescue => e
-        Rails.logger.error("Error calculating schema size: #{e.message}")
-        analytics[:schema_size] = nil
-      end
-
-      # Calculate average rows per table
-      if tables.any?
-        analytics[:avg_records_per_table] = (analytics[:total_records].to_f / tables.size).round(1)
-        analytics[:avg_columns_per_table] = (analytics[:total_columns].to_f / tables.size).round(1)
-      else
-        analytics[:avg_records_per_table] = 0
-        analytics[:avg_columns_per_table] = 0
-      end
+      analytics[:schema_size] = calculate_schema_size
 
       analytics
     end

data/app/controllers/dbviewer/api/base_controller.rb

@@ -0,0 +1,19 @@
+module Dbviewer
+  module Api
+    class BaseController < ApplicationController
+      # Skip setting the tables instance variable for API endpoints since we don't need it
+      skip_before_action :set_tables
+
+      # Common API response handling for errors
+      def render_error(error_message, status = :internal_server_error)
+        Rails.logger.error(error_message)
+        render json: { error: error_message }, status: status
+      end
+
+      # Common API response handling for success
+      def render_success(data)
+        render json: data
+      end
+    end
+  end
+end

data/app/controllers/dbviewer/api/database_controller.rb

@@ -0,0 +1,14 @@
+module Dbviewer
+  module Api
+    class DatabaseController < BaseController
+      def size
+        begin
+          size = calculate_schema_size
+          render_success(schema_size: size)
+        rescue => e
+          render_error("Error calculating schema size: #{e.message}")
+        end
+      end
+    end
+  end
+end

data/app/controllers/dbviewer/api/queries_controller.rb

@@ -0,0 +1,18 @@
+module Dbviewer
+  module Api
+    class QueriesController < BaseController
+      def recent
+        @recent_queries = if Dbviewer.configuration.enable_query_logging
+          Dbviewer::Logger.instance.recent_queries(limit: 10)
+        else
+          []
+        end
+
+        render_success({
+          enabled: Dbviewer.configuration.enable_query_logging,
+          queries: @recent_queries
+        })
+      end
+    end
+  end
+end

data/app/controllers/dbviewer/api/tables_controller.rb

@@ -0,0 +1,39 @@
+module Dbviewer
+  module Api
+    class TablesController < BaseController
+      def index
+        tables = fetch_tables_with_stats(include_record_counts: false)
+        render_success(total_tables: tables.size)
+      end
+
+      def records
+        tables = fetch_tables_with_stats(include_record_counts: true)
+
+        records_data = {
+          total_records: tables.sum { |t| t[:record_count] },
+          largest_tables: tables.sort_by { |t| -t[:record_count] }.first(10),
+          empty_tables: tables.select { |t| t[:record_count] == 0 },
+          avg_records_per_table: tables.any? ? (tables.sum { |t| t[:record_count] }.to_f / tables.size).round(1) : 0
+        }
+
+        render_success(records_data)
+      end
+
+      def relationships_count
+        begin
+          tables = fetch_tables_with_stats(include_record_counts: false)
+          total_relationships = 0
+
+          tables.each do |table|
+            metadata = fetch_table_metadata(table[:name])
+            total_relationships += metadata[:foreign_keys].size if metadata && metadata[:foreign_keys]
+          end
+
+          render_success(total_relationships: total_relationships)
+        rescue => e
+          render_error("Error calculating relationship count: #{e.message}")
+        end
+      end
+    end
+  end
+end

data/app/controllers/dbviewer/home_controller.rb

@@ -1,98 +1,6 @@
 module Dbviewer
   class HomeController < ApplicationController
     def index
-      # Load page immediately without heavy data
-      # Data will be loaded asynchronously via AJAX
-    end
-
-    def analytics
-      # This method is deprecated but kept for backward compatibility
-      analytics_data = fetch_database_analytics
-      # Remove record data which will be served by the records endpoint
-      analytics_data.delete(:total_records)
-      analytics_data.delete(:largest_tables)
-      analytics_data.delete(:empty_tables)
-      analytics_data.delete(:avg_records_per_table)
-
-      respond_to do |format|
-        format.json { render json: analytics_data }
-      end
-    end
-
-    def tables_count
-      tables = fetch_tables_with_stats(include_record_counts: false)
-
-      respond_to do |format|
-        format.json { render json: { total_tables: tables.size } }
-      end
-    end
-
-    def relationships_count
-      begin
-        tables = fetch_tables_with_stats(include_record_counts: false)
-        total_relationships = 0
-
-        tables.each do |table|
-          metadata = fetch_table_metadata(table[:name])
-          total_relationships += metadata[:foreign_keys].size if metadata && metadata[:foreign_keys]
-        end
-
-        respond_to do |format|
-          format.json { render json: { total_relationships: total_relationships } }
-        end
-      rescue => e
-        Rails.logger.error("Error calculating relationship count: #{e.message}")
-        respond_to do |format|
-          format.json { render json: { total_relationships: 0, error: e.message }, status: :internal_server_error }
-        end
-      end
-    end
-
-    def database_size
-      begin
-        size = calculate_schema_size
-
-        respond_to do |format|
-          format.json { render json: { schema_size: size } }
-        end
-      rescue => e
-        Rails.logger.error("Error calculating schema size: #{e.message}")
-        respond_to do |format|
-          format.json { render json: { schema_size: nil, error: e.message }, status: :internal_server_error }
-        end
-      end
-    end
-
-    def records
-      tables = fetch_tables_with_stats(include_record_counts: true)
-
-      records_data = {
-        total_records: tables.sum { |t| t[:record_count] },
-        largest_tables: tables.sort_by { |t| -t[:record_count] }.first(10),
-        empty_tables: tables.select { |t| t[:record_count] == 0 },
-        avg_records_per_table: tables.any? ? (tables.sum { |t| t[:record_count] }.to_f / tables.size).round(1) : 0
-      }
-
-      respond_to do |format|
-        format.json { render json: records_data }
-      end
-    end
-
-    def recent_queries
-      @recent_queries = if Dbviewer.configuration.enable_query_logging
-        Dbviewer::Logger.instance.recent_queries(limit: 10)
-      else
-        []
-      end
-
-      respond_to do |format|
-        format.json do
-          render json: {
-            enabled: Dbviewer.configuration.enable_query_logging,
-            queries: @recent_queries
-          }
-        end
-      end
     end
 
     private

data/app/views/dbviewer/home/index.html.erb

@@ -8,7 +8,7 @@
     </div>
   </div>
 
-  <div class="row g-3 mb-4" id="analytics-cards">
+  <div class="row g-3 mb-4 dashboard-analytics-cards">
     <div class="col-md-4">
       <div class="card h-100 border-0 shadow-sm <%= stat_card_bg_class %>">
         <div class="card-body d-flex align-items-center">
@@ -299,7 +299,7 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   // Load tables count data
-  fetch('<%= api_tables_path %>', {
+  fetch('<%= dbviewer.api_tables_path %>', {
     headers: {
       'Accept': 'application/json',
       'X-Requested-With': 'XMLHttpRequest'
@@ -324,7 +324,7 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   // Load database size data
-  fetch('<%= api_database_size_path %>', {
+  fetch('<%= dbviewer.size_api_database_path %>', {
     headers: {
       'Accept': 'application/json',
       'X-Requested-With': 'XMLHttpRequest'
@@ -349,7 +349,7 @@ document.addEventListener('DOMContentLoaded', function() {
   });
   
   // Load records data separately
-  fetch('<%= api_records_path %>', {
+  fetch('<%= dbviewer.records_api_tables_path %>', {
     headers: {
       'Accept': 'application/json',
       'X-Requested-With': 'XMLHttpRequest'
@@ -377,7 +377,7 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   // Load recent queries data
-  fetch('<%= api_recent_queries_path %>', {
+  fetch('<%= dbviewer.recent_api_queries_path %>', {
     headers: {
       'Accept': 'application/json',
       'X-Requested-With': 'XMLHttpRequest'

data/app/views/dbviewer/tables/show.html.erb

@@ -314,7 +314,7 @@
 <% content_for :sidebar_active do %>active<% end %>
 
 <div class="d-flex justify-content-between align-items-center mb-4">
-  <div>
+  <div class="d-flex justify-content-between align-items-center">
     <h1>Table: <%= @table_name %></h1>
   </div>
   <div class="d-flex gap-2">
@@ -393,7 +393,7 @@
 </div>
 
 <!-- Records Section -->
-<div class="dbviewer-card card mb-4">
+<div class="dbviewer-card card mb-4" id="table-section">
   <div class="card-header d-flex justify-content-between align-items-center">
     <h5 class="mb-0">
       <select id="per-page-select" class="form-select form-select-sm" onchange="window.location.href='<%= table_path(@table_name) %>?<%= per_page_url_params(@table_name) %>'">
@@ -414,6 +414,9 @@
       <% if active_filters > 0 %>
         <span class="badge bg-info ms-2" title="Active filters"><i class="bi bi-funnel-fill me-1"></i><%= active_filters %></span>
       <% end %>
+      <button type="button" class="btn btn-outline-secondary btn-sm ms-2" id="fullscreen-toggle" title="Toggle fullscreen">
+        <i class="bi bi-fullscreen" id="fullscreen-icon"></i>
+      </button>
     </div>
   </div>
     <div class="card-body p-0">
@@ -1311,6 +1314,71 @@
   [data-bs-theme="dark"] .record-detail-table .code-block {
     background-color: var(--bs-dark);
   }
+
+  /* Fullscreen table styles */
+  .table-fullscreen {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    z-index: 9999 !important;
+    background: var(--bs-body-bg) !important;
+    margin: 0 !important;
+    border-radius: 0 !important;
+    overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
+  }
+
+  .table-fullscreen .card-body {
+    flex: 1 !important;
+    overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
+  }
+
+  .table-fullscreen .table-responsive {
+    flex: 1 !important;
+    overflow: auto !important;
+  }
+
+  .table-fullscreen .card-header {
+    flex-shrink: 0 !important;
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 10000 !important;
+    background: var(--bs-body-bg) !important;
+    border-bottom: 1px solid var(--bs-border-color) !important;
+  }
+
+  /* Hide pagination in fullscreen mode */
+  .table-fullscreen .pagination-container {
+    display: none !important;
+  }
+
+  /* Adjust table header in fullscreen */
+  .table-fullscreen .dbviewer-table-header {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 100 !important;
+  }
+
+  /* Ensure body doesn't scroll when table is fullscreen */
+  body.table-fullscreen-active {
+    overflow: hidden !important;
+  }
+
+  /* Fullscreen button hover effect */
+  #fullscreen-toggle:hover {
+    background-color: var(--bs-secondary-bg) !important;
+    border-color: var(--bs-secondary-border-subtle) !important;
+  }
+
+  /* Smooth transitions */
+  #table-section {
+    transition: all 0.3s ease-in-out;
+  }
 </style>
 
 <% if @timestamp_data.present? %>
@@ -1516,5 +1584,70 @@
     
     return section;
   }
+
+  // Table fullscreen functionality
+  document.addEventListener('DOMContentLoaded', function() {
+    const fullscreenToggle = document.getElementById('fullscreen-toggle');
+    const fullscreenIcon = document.getElementById('fullscreen-icon');
+    const tableSection = document.getElementById('table-section');
+    
+    if (fullscreenToggle && tableSection) {
+      // Key for storing fullscreen state in localStorage
+      const fullscreenStateKey = 'dbviewer-table-fullscreen-<%= @table_name %>';
+      
+      // Function to apply fullscreen state
+      function applyFullscreenState(isFullscreen) {
+        if (isFullscreen) {
+          // Enter fullscreen
+          tableSection.classList.add('table-fullscreen');
+          document.body.classList.add('table-fullscreen-active');
+          fullscreenIcon.classList.remove('bi-fullscreen');
+          fullscreenIcon.classList.add('bi-fullscreen-exit');
+          fullscreenToggle.setAttribute('title', 'Exit fullscreen');
+        } else {
+          // Exit fullscreen
+          tableSection.classList.remove('table-fullscreen');
+          document.body.classList.remove('table-fullscreen-active');
+          fullscreenIcon.classList.remove('bi-fullscreen-exit');
+          fullscreenIcon.classList.add('bi-fullscreen');
+          fullscreenToggle.setAttribute('title', 'Toggle fullscreen');
+        }
+      }
+      
+      // Restore fullscreen state from localStorage on page load
+      try {
+        const savedState = localStorage.getItem(fullscreenStateKey);
+        if (savedState === 'true') {
+          applyFullscreenState(true);
+        }
+      } catch (e) {
+        // Handle localStorage not available (private browsing, etc.)
+        console.warn('Could not restore fullscreen state:', e);
+      }
+      
+      fullscreenToggle.addEventListener('click', function() {
+        const isFullscreen = tableSection.classList.contains('table-fullscreen');
+        const newState = !isFullscreen;
+        
+        // Apply the new state
+        applyFullscreenState(newState);
+        
+        // Save state to localStorage
+        try {
+          localStorage.setItem(fullscreenStateKey, newState.toString());
+        } catch (e) {
+          // Handle localStorage not available (private browsing, etc.)
+          console.warn('Could not save fullscreen state:', e);
+        }
+      });
+      
+      // Exit fullscreen with Escape key
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && tableSection.classList.contains('table-fullscreen')) {
+          fullscreenToggle.click();
+        }
+      });
+    }
+  });
 </script>
 <% end %>

data/app/views/layouts/dbviewer/application.html.erb

@@ -32,9 +32,11 @@
     /* Base styles and typography */
     body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      font-size: 0.95rem;
+      font-size: 0.875rem;
       line-height: 1.5;
       letter-spacing: -0.01em;
+      color: #464c54; /* More subdued text color for light theme */
+      background-color: #f5f6f9; /* Subtle gray background */
     }
 
     h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -43,11 +45,11 @@
       line-height: 1.25;
     }
     
-    /* Core layout styles */
+    /* Core layout styles - Grafana-like compact layout */
     .dbviewer-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
-    .dbviewer-navbar { height: 60px; }
-    .dbviewer-navbar-spacer { height: 60px; } /* Creates space for the fixed navbar */
-    .dbviewer-content { display: flex; flex: 1; min-height: calc(100vh - 60px); padding-top: 0; }
+    .dbviewer-navbar { height: 48px; } /* Reduced height for more compact header */
+    .dbviewer-navbar-spacer { height: 48px; } /* Creates space for the fixed navbar */
+    .dbviewer-content { display: flex; flex: 1; min-height: calc(100vh - 48px); padding-top: 0; }
     
     /* Smooth theme transitions */
     html {
@@ -67,19 +69,19 @@
       transition: color 0.2s ease, background-color 0.2s ease;
     }
 
-    /* Sidebar styles - enhanced for elegance */
+    /* Sidebar styles - enhanced for elegance with Grafana-like compact design */
     .dbviewer-sidebar {
-      width: 260px;
-      height: calc(100vh - 60px);
+      width: 240px; /* More compact sidebar width */
+      height: calc(100vh - 48px);
       position: fixed;
-      top: 60px; /* Positioned right below the fixed navbar */
+      top: 48px; /* Positioned right below the fixed navbar */
       left: 0;
       z-index: 1000;
       display: flex;
       flex-direction: column;
       transition: transform 0.3s ease-in-out, background-color 0.2s ease, border-color 0.2s ease;
-      overflow: hidden; /* Changed from overflow-y: auto */
-      box-shadow: 3px 0 20px rgba(0, 0, 0, 0.05);
+      overflow: hidden;
+      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.04); /* Subtler shadow */
     }
 
     /* Dark mode overrides */
@@ -94,7 +96,7 @@
     }
     
     .dbviewer-sidebar-header {
-      padding: 1.2rem 1.25rem;
+      padding: 0.8rem 1rem; /* Reduced padding for more compact header */
       font-weight: 600;
       align-items: center;
       justify-content: space-between;
@@ -157,7 +159,7 @@
     .dbviewer-sidebar-content {
       flex: 1;
       overflow-y: auto;
-      padding: 0.5rem 0;
+      padding: 0.25rem 0; /* Reduced padding */
       height: 100%;
       /* Improved scrollbar */
       scrollbar-width: thin;
@@ -183,9 +185,9 @@
     
     .dbviewer-main {
       flex: 1;
-      margin-left: 260px;
-      padding: 2rem 2.5rem;
-      padding-top: 1.5rem; /* Adjusted for fixed header */
+      margin-left: 240px; /* Reduced sidebar width */
+      padding: 1.2rem 1.5rem; /* Reduced padding for more compact look */
+      padding-top: 0.8rem; /* Adjusted for fixed header */
       min-width: 0;
       animation: fadeIn 0.5s ease-in-out;
       transition: all 0.3s ease;
@@ -281,19 +283,20 @@
       }
     }
     
-    /* Extra small screens */
+    /* Extra small screens - more compact for small devices */
     @media (max-width: 575.98px) {
-      .dbviewer-main { padding: 0.75rem; }
+      .dbviewer-main { padding: 0.6rem; }
       h1, .h1 { font-size: 1.6rem; }
       h2, .h2 { font-size: 1.4rem; }
       h3, .h3 { font-size: 1.2rem; }
       
       .btn-sm {
-        font-size: 0.8rem;
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
       }
       
       .card-body {
-        padding: 1rem;
+        padding: 0.75rem;
       }
     }
     
@@ -343,30 +346,31 @@
       border-color: rgba(134, 183, 254, 0.7);
     }
     
-    /* Table structure and visualization components */
+    /* Table structure and visualization components - Grafana-inspired */
     .dbviewer-card { 
-      border-radius: 0.5rem;
+      border-radius: 3px; /* Smaller border radius for Grafana look */
       transition: all 0.2s ease;
       overflow: hidden;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.08); 
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); /* Subtler shadow */
       height: 100%;
     }
     
     .dbviewer-card:hover {
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 1px 6px rgba(0, 0, 0, 0.1);
-      transform: translateY(-2px);
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06);
+      transform: translateY(-1px); /* Subtler hover effect */
     }
     
-    /* Improved card headers */
+    /* Improved card headers - more compact */
     .dbviewer-card .card-header {
       font-weight: 600;
-      padding: 1rem 1.25rem;
+      padding: 0.7rem 1rem; /* Reduced padding */
       border-bottom-width: 1px;
+      font-size: 0.95rem; /* Slightly smaller font */
     }
     
-    /* Card body padding */
+    /* Card body padding - more compact */
     .dbviewer-card .card-body {
-      padding: 1.25rem;
+      padding: 0.9rem 1rem; /* Reduced padding */
     }
     
     [data-bs-theme="light"] .dbviewer-card {
@@ -483,7 +487,7 @@
     /* List group styling for dark mode */
     [data-bs-theme="dark"] .list-group-item {
       background-color: var(--bs-dark);
-      border-color: rgba(255, 255, 255, 0.15);
+      border-color: rgba(255, 255, 255, 0.08); /* Subtler border */
       color: var(--bs-light);
     }
     
@@ -494,10 +498,10 @@
       z-index: 1;
     }
     
-    /* Equal height for timeline and structure cards */
+    /* Equal height for timeline and structure cards - Grafana-inspired compact layout */
     .two-column-layout .card { height: 100%; display: flex; flex-direction: column; }
-    .two-column-layout .card-body { flex: 1; display: flex; flex-direction: column; }
-    .two-column-layout .chart-container { flex: 1; min-height: 250px; }
+    .two-column-layout .card-body { flex: 1; display: flex; flex-direction: column; padding: 0.75rem; } /* Reduced padding */
+    .two-column-layout .chart-container { flex: 1; min-height: 220px; } /* Reduced min-height */
     .two-column-layout .structure-container { padding: 0; }
     .two-column-layout .tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
     .two-column-layout .tab-pane { flex: 1; overflow: hidden; }
@@ -560,24 +564,28 @@
       font-size: 1.2rem;
     }
     
-    /* Header styles for a more professional look */
+    /* Header styles for a more professional Grafana-like look */
     .navbar {
       transition: all 0.3s ease;
-      padding: 0.5rem 1rem;
-      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
+      padding: 0 0.75rem; /* Reduced horizontal padding */
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); /* Subtler shadow */
+      min-height: 48px; /* Fixed height */
     }
     
     .navbar-brand {
       font-weight: 600;
       letter-spacing: -0.01em;
+      font-size: 1.1rem; /* Smaller brand */
+      padding: 0.1rem 0; /* Reduced padding */
     }
     
     .nav-link {
       font-weight: 500;
-      padding: 0.5rem 0.8rem !important;
-      border-radius: 4px;
+      padding: 0.35rem 0.65rem !important; /* Reduced padding */
+      border-radius: 2px; /* Smaller radius for Grafana look */
       transition: all 0.2s ease;
-      margin: 0 2px;
+      margin: 0 1px; /* Reduced margin */
+      font-size: 0.9rem; /* Smaller font */
     }
     
     .nav-link.active {
@@ -602,11 +610,11 @@
       border-radius: 0;
       border-left: 0;
       border-right: 0;
-      padding: 0.75rem 1.25rem;
+      padding: 0.5rem 0.85rem; /* Reduced padding for compact look */
       transition: all 0.15s ease-in-out;
       position: relative;
       font-weight: 500;
-      font-size: 0.9rem;
+      font-size: 0.85rem; /* Smaller font for Grafana-like appearance */
     }
     
     .list-group-item:first-child {
@@ -679,23 +687,23 @@
       color: #adb5bd;
     }
     
-    /* Enhanced button styling */
+    /* Enhanced button styling - Grafana-inspired */
     .btn {
       font-weight: 500;
-      padding: 0.5rem 1rem;
-      border-radius: 0.375rem;
+      padding: 0.4rem 0.85rem; /* Reduced padding */
+      border-radius: 2px; /* Smaller radius for Grafana look */
       transition: all 0.2s ease;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
     }
     
     .btn-sm {
-      padding: 0.35rem 0.75rem;
-      font-size: 0.85rem;
+      padding: 0.25rem 0.6rem; /* Reduced padding */
+      font-size: 0.8rem; /* Smaller font size */
     }
     
     .btn-lg {
-      padding: 0.65rem 1.2rem;
-      font-size: 1.05rem;
+      padding: 0.5rem 1rem; /* Reduced padding */
+      font-size: 0.95rem; /* Smaller font size */
     }
     
     .btn:active {
@@ -760,23 +768,23 @@
       text-decoration: underline;
     }
     
-    /* Enhanced code blocks and SQL query styling */
+    /* Enhanced code blocks and SQL query styling - Grafana-inspired */
     pre, code {
       font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-      border-radius: 4px;
+      border-radius: 2px; /* Smaller radius */
       transition: all 0.2s ease;
     }
     
     pre {
-      padding: 1rem;
-      margin-bottom: 1rem;
-      border-radius: 0.5rem;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+      padding: 0.75rem; /* Reduced padding */
+      margin-bottom: 0.75rem; /* Reduced margin */
+      border-radius: 2px; /* Smaller radius */
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
     }
     
     code {
-      font-size: 0.875em;
-      padding: 0.2em 0.4em;
+      font-size: 0.825em; /* Smaller font */
+      padding: 0.15em 0.3em; /* Reduced padding */
     }
     
     /* SQL query code in tables */
@@ -868,7 +876,7 @@
       color: #ffffff;
     }
     
-    /* Enhanced table styling */
+    /* Enhanced table styling - Grafana-like compact design */
     .table {
       margin-bottom: 0;
       width: 100%;
@@ -881,12 +889,12 @@
     }
     
     .table thead th {
-      padding: 1rem;
+      padding: 0.65rem 0.75rem; /* Reduced padding */
       font-weight: 600;
       border-top: 0;
       vertical-align: middle;
       letter-spacing: 0.01em;
-      font-size: 0.88rem;
+      font-size: 0.78rem; /* Smaller font */
       text-transform: uppercase;
       position: sticky;
       top: 0;
@@ -895,10 +903,10 @@
     }
     
     .table tbody td {
-      padding: 0.85rem 1rem;
+      padding: 0.5rem 0.75rem; /* Reduced padding */
       vertical-align: middle;
       border-color: var(--bs-border-color);
-      font-size: 0.92rem;
+      font-size: 0.85rem; /* Smaller font */
     }
     
     .table tbody tr:hover {
@@ -960,14 +968,21 @@
       color: #000 !important;
     }
     
-    /* Enhanced alert styling */
+    /* Badge styling - More Grafana-like */
+    .badge {
+      padding: 0.3em 0.5em;
+      font-size: 0.75em;
+      border-radius: 2px;
+    }
+    
+    /* Enhanced alert styling - Grafana-inspired */
     .alert {
-      border-radius: 0.5rem;
+      border-radius: 2px; /* Smaller radius for Grafana look */
       border-width: 0;
-      padding: 1rem 1.25rem;
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+      padding: 0.7rem 1rem; /* Reduced padding */
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
       position: relative;
-      border-left: 4px solid transparent;
+      border-left: 3px solid transparent; /* Thinner border */
     }
     
     .alert-info {
@@ -1091,40 +1106,40 @@
       background-color: var(--bs-light);
     }
     
-    /* Enhanced stat cards and metric icons */
+    /* Enhanced stat cards and metric icons - Grafana-inspired */
     .stat-card-bg {
       background: #ffffff;
-      border-radius: 0.75rem;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+      border-radius: 3px; /* Smaller radius for Grafana look */
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
       transition: all 0.3s ease;
       border: none;
     }
     
     .stat-card-bg:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+      transform: translateY(-1px); /* Subtler hover */
+      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
     }
     
     [data-bs-theme="dark"] .stat-card-bg {
       background-color: #212529;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
     }
     
-    /* Enhanced metric icon styling */
+    /* Enhanced metric icon styling - Grafana-inspired */
     .metric-icon {
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 14px;
-      width: 65px;
-      height: 65px;
-      min-width: 65px;
+      border-radius: 3px; /* Smaller radius */
+      width: 50px; /* Smaller icon */
+      height: 50px; /* Smaller icon */
+      min-width: 50px; /* Smaller icon */
       text-align: center;
-      background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.2) 0%, rgba(var(--bs-primary-rgb), 0.1) 100%);
+      background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.15) 0%, rgba(var(--bs-primary-rgb), 0.08) 100%);
       color: var(--bs-primary);
-      font-size: 1.6rem;
+      font-size: 1.4rem; /* Smaller icon */
       transition: all 0.3s ease;
-      box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb), 0.1);
+      box-shadow: 0 1px 5px rgba(var(--bs-primary-rgb), 0.08);
     }
     
     .stat-card-bg:hover .metric-icon {
@@ -1181,17 +1196,28 @@
       transition: all 0.2s ease;
     }
     
-    /* Improved table hover effect */
+    /* Improved table hover effect - Grafana-like */
     .table-hover > tbody > tr:hover {
       transition: all 0.15s ease;
     }
     
     [data-bs-theme="light"] .table-hover > tbody > tr:hover {
-      background-color: rgba(13, 110, 253, 0.04);
+      background-color: rgba(13, 110, 253, 0.03); /* Subtler hover */
     }
     
     [data-bs-theme="dark"] .table-hover > tbody > tr:hover {
-      background-color: rgba(13, 110, 253, 0.07);
+      background-color: rgba(13, 110, 253, 0.05); /* Subtler hover */
+    }
+    
+    /* Grafana-inspired grid layout adjustments */
+    .row {
+      margin-right: -0.5rem;
+      margin-left: -0.5rem;
+    }
+    
+    .row > [class^="col-"] {
+      padding-right: 0.5rem;
+      padding-left: 0.5rem;
     }
     
     /* Button press effect */
@@ -1228,6 +1254,80 @@
     [data-bs-theme="dark"] html::-webkit-scrollbar-thumb {
       background-color: rgba(255, 255, 255, 0.2);
     }
+    
+    /* Grafana-like panel enhancements */
+    body {
+      color: #464c54; /* More subdued text color for light theme */
+      background-color: #f5f6f9; /* Subtle gray background */
+    }
+    
+    [data-bs-theme="dark"] body {
+      background-color: #161719; /* Darker background for dark theme */
+      color: #d8d9da; /* Softer text color for dark theme */
+    }
+    
+    /* Make font sizes consistently smaller for more compact look */
+    body {
+      font-size: 0.875rem;
+    }
+    
+    h1, .h1 { font-size: 1.6rem; }
+    h2, .h2 { font-size: 1.4rem; }
+    h3, .h3 { font-size: 1.2rem; }
+    h4, .h4 { font-size: 1.1rem; }
+    h5, .h5 { font-size: 1rem; }
+    
+    /* Unify panel appearance */
+    .card, .list-group {
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.06);
+      border: none;
+      border-radius: 2px;
+    }
+    
+    [data-bs-theme="dark"] .card,
+    [data-bs-theme="dark"] .list-group {
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+      background-color: #212124;
+    }
+    
+    /* Improved tab styling */
+    .nav-tabs {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    
+    .nav-tabs .nav-link {
+      border: none;
+      border-bottom: 2px solid transparent;
+      background-color: transparent;
+      padding: 0.5rem 0.75rem;
+      margin-bottom: -1px;
+      font-size: 0.9rem;
+    }
+    
+    .nav-tabs .nav-link.active {
+      border-bottom-color: var(--bs-primary);
+      color: var(--bs-primary);
+    }
+    
+    [data-bs-theme="dark"] .nav-tabs {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    /* Remove excessive margins between elements */
+    .row + .row,
+    .card + .card {
+      margin-top: 0.75rem;
+    }
+    
+    /* Elegant form controls */
+    .form-control, .form-select {
+      padding: 0.4rem 0.6rem;
+      font-size: 0.875rem;
+      height: auto;
+      border-radius: 2px;
+    }
+    
+    /* Add this right above the style closing tag */
   </style>
 </head>
 <body>

data/app/views/layouts/dbviewer/shared/_sidebar.html.erb

@@ -1,6 +1,5 @@
 <div class="dbviewer-sidebar-top">
   <div class="dbviewer-table-filter-container p-1 mb-0">
-    <i class="bi bi-search dbviewer-table-filter-icon"></i>
     <input type="text" class="form-control form-control-sm dbviewer-table-filter mb-0" 
            id="tableSearch" placeholder="Filter tables..." aria-label="Filter tables">
   </div>

data/config/routes.rb

@@ -19,13 +19,24 @@ Dbviewer::Engine.routes.draw do
   # Homepage and API endpoints
   get "dashboard", to: "home#index", as: :dashboard
 
-  # Analytics API endpoints
-  get "api/analytics", to: "home#analytics" # Legacy/combined endpoint
-  get "api/records", to: "home#records"
-  get "api/tables", to: "home#tables_count"
-  get "api/relationships", to: "home#relationships_count"
-  get "api/database_size", to: "home#database_size"
-  get "api/recent_queries", to: "home#recent_queries"
+  namespace :api do
+    resources :tables, only: [ :index ] do
+      collection do
+        get "records"
+        get "relationships_count"
+      end
+    end
+
+    resource :database, only: [], controller: "database" do
+      get "size"
+    end
+
+    resources :queries, only: [] do
+      collection do
+        get "recent"
+      end
+    end
+  end
 
   root to: "home#index"
 end

data/lib/dbviewer/version.rb

@@ -1,3 +1,3 @@
 module Dbviewer
-  VERSION = "0.4.8"
+  VERSION = "0.5.0"
 end

data/lib/generators/dbviewer/structured_api_generator.rb

@@ -0,0 +1,11 @@
+module Dbviewer
+  module Generators
+    class StructuredApiGenerator < Rails::Generators::Base
+      source_root File.expand_path("../templates", __FILE__)
+
+      def create_initializer
+        template "structured_api_initializer.rb", "config/initializers/dbviewer_structured_api.rb"
+      end
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dbviewer
 version: !ruby/object:Gem::Version
-  version: 0.4.8
+  version: 0.5.0
 platform: ruby
 authors:
 - Wailan Tirajoh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-25 00:00:00.000000000 Z
+date: 2025-05-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -55,6 +55,10 @@ files:
 - app/controllers/concerns/dbviewer/database_operations.rb
 - app/controllers/concerns/dbviewer/error_handling.rb
 - app/controllers/concerns/dbviewer/pagination_concern.rb
+- app/controllers/dbviewer/api/base_controller.rb
+- app/controllers/dbviewer/api/database_controller.rb
+- app/controllers/dbviewer/api/queries_controller.rb
+- app/controllers/dbviewer/api/tables_controller.rb
 - app/controllers/dbviewer/application_controller.rb
 - app/controllers/dbviewer/entity_relationship_diagrams_controller.rb
 - app/controllers/dbviewer/home_controller.rb
@@ -96,6 +100,7 @@ files:
 - lib/dbviewer/table_query_params.rb
 - lib/dbviewer/version.rb
 - lib/generators/dbviewer/initializer_generator.rb
+- lib/generators/dbviewer/structured_api_generator.rb
 - lib/generators/dbviewer/templates/initializer.rb
 - lib/tasks/dbviewer_tasks.rake
 homepage: https://github.com/wailantirajoh/dbviewer