flare 0.1.1 → 1.0.0

data/app/controllers/flare/spans_controller.rb

@@ -1,101 +0,0 @@
-# frozen_string_literal: true
-
-module Flare
-  class SpansController < ApplicationController
-    around_action :untrace_request
-
-    helper_method :current_section, :page_title, :category_config
-
-    PER_PAGE = 50
-
-    CATEGORIES = {
-      "queries" => { title: "Queries", icon: "database", badge_class: "sql" },
-      "cache" => { title: "Cache", icon: "archive", badge_class: "cache" },
-      "views" => { title: "Views", icon: "layout", badge_class: "view" },
-      "http" => { title: "HTTP", icon: "globe", badge_class: "http" },
-      "mail" => { title: "Mail", icon: "mail", badge_class: "mail" },
-      "redis" => { title: "Redis", icon: "database", badge_class: "other" },
-      "exceptions" => { title: "Exceptions", icon: "alert-triangle", badge_class: "exception" }
-    }.freeze
-
-    def queries
-      list_spans("queries")
-    end
-
-    def cache
-      list_spans("cache")
-    end
-
-    def views
-      list_spans("views")
-    end
-
-    def http
-      list_spans("http")
-    end
-
-    def mail
-      list_spans("mail")
-    end
-
-    def redis
-      list_spans("redis")
-    end
-
-    def exceptions
-      list_spans("exceptions")
-    end
-
-    def show
-      @span = Flare.storage.find_span(params[:id])
-
-      if @span.blank?
-        redirect_to requests_path, alert: "Span not found"
-        return
-      end
-
-      @category = params[:category]
-    end
-
-    private
-
-    def list_spans(category)
-      @category = category
-      @offset = params[:offset].to_i
-      filter_params = { name: params[:name].presence }
-
-      spans = Flare.storage.list_spans_by_category(category, **filter_params, limit: PER_PAGE + 1, offset: @offset)
-      @total_count = Flare.storage.count_spans_by_category(category, **filter_params)
-      @has_next = spans.size > PER_PAGE
-      @spans = spans.first(PER_PAGE)
-      @has_prev = @offset > 0
-
-      # Load properties for display
-      span_ids = @spans.map { |s| s[:id] }
-      if span_ids.any?
-        all_properties = Flare.storage.load_properties_for_ids("Flare::Span", span_ids)
-        @spans.each do |span|
-          span[:properties] = all_properties[span[:id]] || {}
-        end
-      end
-
-      render :index
-    end
-
-    def untrace_request
-      Flare.untraced { yield }
-    end
-
-    def current_section
-      @category || "spans"
-    end
-
-    def page_title
-      category_config[:title]
-    end
-
-    def category_config
-      CATEGORIES[@category] || { title: "Spans", icon: "activity", badge_class: "other" }
-    end
-  end
-end

data/app/helpers/flare/application_helper.rb

@@ -1,168 +0,0 @@
-# frozen_string_literal: true
-
-module Flare
-  module ApplicationHelper
-    def span_category(span)
-      name = span[:name].to_s.downcase
-      case name
-      when /sql\.active_record/, /mysql/, /postgres/, /sqlite/
-        "sql"
-      when /cache/
-        "cache"
-      when /render/, /view/
-        "view"
-      when /http/, /net_http/, /faraday/
-        "http"
-      when /mail/
-        "mailer"
-      when /job/, /active_job/
-        "job"
-      when /action_controller/, /process_action/
-        "controller"
-      else
-        "other"
-      end
-    end
-
-    def span_display_info(span, category)
-      props = span[:properties] || {}
-      case category
-      when "queries"
-        stmt = props["db.statement"]&.to_s
-        name = props["name"]&.to_s
-        db_name = props["db.name"]&.to_s
-        source_loc = if props["code.filepath"] && props["code.lineno"]
-          "#{props["code.filepath"]}:#{props["code.lineno"]}"
-        end
-        secondary = [name.presence, db_name.presence, source_loc].compact.join(" \u00b7 ").presence
-        if stmt.present?
-          { primary: stmt, secondary: secondary }
-        elsif name.present?
-          { primary: name, secondary: [db_name.presence, source_loc].compact.join(" \u00b7 ").presence }
-        else
-          { primary: span[:name], secondary: [db_name.presence, source_loc].compact.join(" \u00b7 ").presence }
-        end
-      when "cache"
-        key = props["key"]&.to_s
-        op = span[:name].to_s.sub(".active_support", "").sub("cache_", "")
-        store = props["store"]&.to_s&.sub(/^ActiveSupport::Cache::/, "")
-        { primary: key.presence || span[:name], secondary: store, cache_op: op }
-      when "views"
-        identifier = props["identifier"] || props["code.filepath"]
-        primary = identifier ? identifier.to_s.sub(/^.*\/app\/views\//, "") : span[:name]
-        { primary: primary, secondary: nil }
-      when "http"
-        full_url = props["http.url"] || ""
-        target = props["http.target"] || ""
-        host = props["http.host"] || props["net.peer.name"] || props["peer.service"]
-        uri = URI.parse(full_url) rescue nil
-        if uri && uri.host
-          domain = uri.host
-          path = uri.path.presence || "/"
-          path = "#{path}?#{uri.query}" if uri.query.present?
-        else
-          domain = host
-          path = target.presence || full_url
-        end
-        method = props["http.method"]
-        status = props["http.status_code"]
-        { primary: path.to_s.truncate(100), secondary: domain, http_method: method, http_status: status }
-      when "mail"
-        mailer = props["mailer"]
-        action = props["action"]
-        subject = props["subject"]
-        if mailer && action
-          { primary: "#{mailer}##{action}", secondary: subject }
-        else
-          { primary: span[:name], secondary: nil }
-        end
-      when "redis"
-        cmd = props["db.statement"]&.to_s
-        { primary: cmd.presence || span[:name], secondary: nil }
-      when "exceptions"
-        exc_type = span[:exception_type]
-        exc_message = span[:exception_message]
-        primary = if exc_type.present? && exc_message.present?
-          "#{exc_type}: #{exc_message}"
-        elsif exc_message.present?
-          exc_message
-        elsif exc_type.present?
-          exc_type
-        else
-          span[:name]
-        end
-        stacktrace = span[:exception_stacktrace].to_s
-        first_app_line = stacktrace.split("\n").find { |line| line.include?("/app/") } || stacktrace.split("\n").first
-        secondary = first_app_line&.strip.to_s.truncate(200)
-        { primary: primary, secondary: secondary }
-      else
-        { primary: span[:name], secondary: nil }
-      end
-    end
-
-    def format_duration(ms)
-      return "-" if ms.nil?
-
-      if ms >= 1000
-        "#{(ms / 1000.0).round(1)}s"
-      else
-        "#{ms.round(1)}ms"
-      end
-    end
-
-    def format_content(data, indent = 0)
-      return "" if data.nil?
-
-      lines = []
-      prefix = "  " * indent
-
-      case data
-      when Hash
-        data.each do |key, value|
-          if value.is_a?(Hash) || value.is_a?(Array)
-            lines << "#{prefix}#{key}:"
-            lines << format_content(value, indent + 1)
-          else
-            formatted_value = format_value(value)
-            if formatted_value.include?("\n")
-              lines << "#{prefix}#{key}:"
-              formatted_value.each_line do |line|
-                lines << "#{prefix}  #{line.rstrip}"
-              end
-            else
-              lines << "#{prefix}#{key}: #{formatted_value}"
-            end
-          end
-        end
-      when Array
-        data.each do |item|
-          if item.is_a?(Hash) || item.is_a?(Array)
-            lines << "#{prefix}-"
-            lines << format_content(item, indent + 1)
-          else
-            lines << "#{prefix}- #{format_value(item)}"
-          end
-        end
-      else
-        lines << "#{prefix}#{format_value(data)}"
-      end
-
-      lines.join("\n")
-    end
-
-    private
-
-    def format_value(value)
-      case value
-      when nil
-        "null"
-      when true, false
-        value.to_s
-      when Numeric
-        value.to_s
-      else
-        value.to_s
-      end
-    end
-  end
-end

data/app/views/flare/jobs/index.html.erb

@@ -1,69 +0,0 @@
-<div class="page-header">
-  <h1 class="page-title"><%= page_title %></h1>
-  <div class="filters">
-    <%= form_tag(jobs_path, method: :get, id: "filter-form") do %>
-      <%= text_field_tag :name, params[:name], placeholder: "Search...", class: "filter-select", style: "min-width: 200px;", onchange: "this.form.submit()" %>
-    <% end %>
-  </div>
-</div>
-
-<div class="page-body">
-  <div class="card">
-    <div class="card-body">
-      <% if @jobs.blank? %>
-        <div class="empty-state">
-          <div class="empty-state-icon">
-            <i class="bi bi-briefcase" style="font-size: 1.5rem;"></i>
-          </div>
-          <h3>No jobs found</h3>
-          <p>Data will appear here as your application processes background jobs.</p>
-        </div>
-      <% else %>
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>Job</th>
-              <th style="width: 100px; text-align: right;">Duration</th>
-              <th style="width: 120px; text-align: right;">Happened</th>
-            </tr>
-          </thead>
-          <tbody>
-            <% @jobs.each do |job| %>
-              <% started_at = Time.at(job[:start_timestamp] / 1_000_000_000.0) rescue nil %>
-              <%
-                display_name = job[:job_class] || job[:name].to_s.sub(/ (process|publish)$/, '')
-              %>
-              <tr onclick="navigateIfNotSelecting('<%= job_path(job[:trace_id]) %>')" style="cursor: pointer;">
-                <td class="path-cell">
-                  <span class="job-name path-text" title="<%= display_name %>"><%= display_name %></span>
-                  <% queue = job[:queue_name] || "default" %>
-                  <span class="path-subtext" title="<%= queue %>"><%= queue %></span>
-                </td>
-                <td class="duration" style="text-align: right;"><%= format_duration(job[:duration_ms]) %></td>
-                <td class="timestamp" style="text-align: right;"><%= started_at ? time_ago_in_words(started_at) : "-" %></td>
-              </tr>
-            <% end %>
-          </tbody>
-        </table>
-
-        <% if @total_count > 0 %>
-          <div class="pagination">
-            <div class="pagination-side">
-              <% if @has_prev %>
-                <%= link_to "Previous", jobs_path(request.query_parameters.merge(offset: [@offset - 50, 0].max)), class: "pagination-link" %>
-              <% end %>
-            </div>
-            <div class="pagination-info">
-              <%= number_with_delimiter(@offset + 1) %> - <%= number_with_delimiter([@offset + @jobs.size, @total_count].min) %> of <%= number_with_delimiter(@total_count) %>
-            </div>
-            <div class="pagination-side" style="text-align: right;">
-              <% if @has_next %>
-                <%= link_to "Next", jobs_path(request.query_parameters.merge(offset: @offset + 50)), class: "pagination-link" %>
-              <% end %>
-            </div>
-          </div>
-        <% end %>
-      <% end %>
-    </div>
-  </div>
-</div>

data/app/views/flare/jobs/show.html.erb

@@ -1,323 +0,0 @@
-<%
-  # Get root span properties
-  root_props = @root_span ? @root_span[:properties] : {}
-  job_class = root_props["code.namespace"]
-  queue_name = root_props["messaging.destination"]
-  job_id = root_props["messaging.message.id"] || root_props["messaging.message_id"]
-
-  # Calculate total duration from root span
-  total_duration_ms = @root_span ? @root_span[:duration_ms] : 1
-  root_start = @root_span ? @root_span[:start_timestamp] : 0
-  started_at = @root_span ? Time.at(@root_span[:start_timestamp] / 1_000_000_000.0) : nil
-
-  # Extract job name from span name
-  job_display_name = job_class || @job[:name].to_s.sub(/ (process|publish)$/, '')
-
-  # Count span categories
-  span_counts = @child_spans.each_with_object(Hash.new(0)) do |span, counts|
-    counts[span_category(span)] += 1
-  end
-%>
-
-<div class="page-header">
-  <div class="detail-header">
-    <div class="detail-header-left">
-      <div class="detail-title">
-        <span class="badge badge-job">Job</span>
-        <h1><%= job_display_name %></h1>
-      </div>
-      <div class="detail-meta">
-        <div class="meta-item">
-          <span class="meta-label">Duration</span>
-          <span class="meta-value mono"><%= format_duration(total_duration_ms) %></span>
-        </div>
-        <div class="meta-item">
-          <span class="meta-label">Time</span>
-          <span class="meta-value"><%= started_at&.strftime("%b %d, %Y %H:%M:%S") %></span>
-        </div>
-        <% if queue_name %>
-          <div class="meta-item">
-            <span class="meta-label">Queue</span>
-            <span class="meta-value"><%= queue_name %></span>
-          </div>
-        <% end %>
-        <% if job_id %>
-          <div class="meta-item">
-            <span class="meta-label">Job ID</span>
-            <span class="meta-value mono"><%= job_id %></span>
-          </div>
-        <% end %>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="page-body">
-  <div class="card">
-    <div class="tabs">
-      <a class="tab active" onclick="showTab('timeline')">Timeline (<%= @child_spans.size %>)</a>
-      <a class="tab" onclick="showTab('details')">Details</a>
-    </div>
-
-    <div id="tab-details" class="tab-content">
-      <%
-        shown_keys = %w[code.namespace messaging.destination messaging.message.id messaging.message_id]
-        other_props = root_props.reject { |k, v| shown_keys.include?(k) || v.is_a?(Hash) || v.is_a?(Array) }
-      %>
-      <div class="details-sections">
-        <!-- Job Section -->
-        <div class="details-section">
-          <div class="section-header">
-            <div class="section-icon job">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
-                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
-              </svg>
-            </div>
-            <span class="section-title">Job</span>
-          </div>
-          <div class="section-grid">
-            <div class="detail-item">
-              <span class="detail-label">Duration</span>
-              <span class="detail-value prominent"><%= format_duration(total_duration_ms) %></span>
-            </div>
-            <div class="detail-item">
-              <span class="detail-label">Time</span>
-              <span class="detail-value"><%= started_at&.strftime("%b %d, %Y at %H:%M:%S") %></span>
-            </div>
-            <% if job_class %>
-              <div class="detail-item">
-                <span class="detail-label">Job Class</span>
-                <span class="detail-value mono"><%= job_class %></span>
-              </div>
-            <% end %>
-            <% if job_id %>
-              <div class="detail-item full-width">
-                <span class="detail-label">Job ID</span>
-                <span class="detail-value mono secondary"><%= job_id %></span>
-              </div>
-            <% end %>
-          </div>
-        </div>
-
-        <!-- Queue Section -->
-        <% if queue_name %>
-          <div class="details-section">
-            <div class="section-header">
-              <div class="section-icon queue">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <line x1="8" y1="6" x2="21" y2="6"></line>
-                  <line x1="8" y1="12" x2="21" y2="12"></line>
-                  <line x1="8" y1="18" x2="21" y2="18"></line>
-                  <line x1="3" y1="6" x2="3.01" y2="6"></line>
-                  <line x1="3" y1="12" x2="3.01" y2="12"></line>
-                  <line x1="3" y1="18" x2="3.01" y2="18"></line>
-                </svg>
-              </div>
-              <span class="section-title">Queue</span>
-            </div>
-            <div class="section-grid">
-              <div class="detail-item">
-                <span class="detail-label">Queue Name</span>
-                <span class="detail-value mono"><%= queue_name %></span>
-              </div>
-            </div>
-          </div>
-        <% end %>
-
-        <!-- Other Properties Section -->
-        <% if other_props.any? %>
-          <div class="details-section">
-            <div class="section-header">
-              <div class="section-icon other">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <circle cx="12" cy="12" r="1"></circle>
-                  <circle cx="19" cy="12" r="1"></circle>
-                  <circle cx="5" cy="12" r="1"></circle>
-                </svg>
-              </div>
-              <span class="section-title">Additional Properties</span>
-            </div>
-            <div class="section-grid">
-              <% other_props.each do |key, value| %>
-                <div class="detail-item">
-                  <span class="detail-label"><%= key.to_s.split(".").last.titleize %></span>
-                  <span class="detail-value mono truncate" title="<%= value %>"><%= value %></span>
-                </div>
-              <% end %>
-            </div>
-          </div>
-        <% end %>
-
-        <% if root_props.blank? %>
-          <div class="details-section">
-            <div class="empty-clues" style="padding: 1.25rem;">
-              <p>No details recorded.</p>
-            </div>
-          </div>
-        <% end %>
-      </div>
-    </div>
-
-    <div id="tab-timeline" class="tab-content active">
-      <% if @child_spans.blank? %>
-        <div class="empty-clues">
-          <i class="bi bi-clock-history" style="font-size: 2rem; color: var(--cb-warm-gray-light);"></i>
-          <p>No timeline events recorded for this job.</p>
-        </div>
-      <% else %>
-        <div class="legend">
-          <div class="legend-item clickable active" data-filter="all" onclick="filterSpans('all')"><div class="legend-color all"></div> All (<%= @child_spans.size %>)</div>
-          <% if span_counts["sql"] > 0 %><div class="legend-item clickable" data-filter="sql" onclick="filterSpans('sql')"><div class="legend-color sql"></div> SQL (<%= span_counts["sql"] %>)</div><% end %>
-          <% if span_counts["cache"] > 0 %><div class="legend-item clickable" data-filter="cache" onclick="filterSpans('cache')"><div class="legend-color cache"></div> Cache (<%= span_counts["cache"] %>)</div><% end %>
-          <% if span_counts["view"] > 0 %><div class="legend-item clickable" data-filter="view" onclick="filterSpans('view')"><div class="legend-color view"></div> View (<%= span_counts["view"] %>)</div><% end %>
-          <% if span_counts["http"] > 0 %><div class="legend-item clickable" data-filter="http" onclick="filterSpans('http')"><div class="legend-color http"></div> HTTP (<%= span_counts["http"] %>)</div><% end %>
-          <% if span_counts["mailer"] > 0 %><div class="legend-item clickable" data-filter="mailer" onclick="filterSpans('mailer')"><div class="legend-color mailer"></div> Mailer (<%= span_counts["mailer"] %>)</div><% end %>
-          <% if span_counts["job"] > 0 %><div class="legend-item clickable" data-filter="job" onclick="filterSpans('job')"><div class="legend-color job"></div> Job (<%= span_counts["job"] %>)</div><% end %>
-          <% if span_counts["controller"] > 0 %><div class="legend-item clickable" data-filter="controller" onclick="filterSpans('controller')"><div class="legend-color controller"></div> Controller (<%= span_counts["controller"] %>)</div><% end %>
-          <% if span_counts["other"] > 0 %><div class="legend-item clickable" data-filter="other" onclick="filterSpans('other')"><div class="legend-color other"></div> Other (<%= span_counts["other"] %>)</div><% end %>
-          <div style="margin-left: auto;">
-            <button type="button" onclick="collapseAll()" class="collapse-btn">
-              <i class="bi bi-arrows-collapse"></i>
-              Collapse All
-            </button>
-          </div>
-        </div>
-
-        <div style="padding: 0.75rem;">
-          <div class="waterfall-header">
-            <div>Event</div>
-            <div>Duration</div>
-          </div>
-
-          <div class="waterfall">
-            <% @child_spans.each_with_index do |span, index| %>
-              <%
-                offset_ns = span[:start_timestamp] - root_start
-                offset_ms = offset_ns / 1_000_000.0
-                left = (offset_ms / [total_duration_ms, 1].max * 100).clamp(0, 99.5)
-                width = (span[:duration_ms] / [total_duration_ms, 1].max * 100).clamp(0.5, [0.5, 100 - left].max)
-                category = span_category(span)
-
-                props = span[:properties] || {}
-                sql_statement = nil
-                display_name = if span[:name] == "instantiation.active_record"
-                  class_name = props["class_name"] || "Record"
-                  count = props["record_count"]
-                  count ? "#{class_name} Instantiation (#{count})" : "#{class_name} Instantiation"
-                elsif category == "sql"
-                  sql_statement = props["db.statement"]
-                  props["name"] || span[:name]
-                elsif category == "cache"
-                  key = props["key"]
-                  op = span[:name].to_s.sub(".active_support", "").sub("cache_", "")
-                  key ? "#{op}: #{key.to_s.truncate(80)}" : span[:name]
-                elsif category == "view"
-                  identifier = props["identifier"] || props["code.filepath"]
-                  if identifier
-                    identifier.to_s.sub(/^.*\/app\/views\//, "")
-                  else
-                    span[:name]
-                  end
-                elsif category == "http"
-                  url = props["http.url"] || props["http.target"]
-                  method = props["http.method"]
-                  "#{method} #{url}".strip.presence || span[:name]
-                elsif category == "controller"
-                  ns = props["code.namespace"]
-                  fn = props["code.function"]
-                  ns && fn ? "#{ns}##{fn}" : span[:name]
-                else
-                  span[:name]
-                end
-              %>
-              <div class="waterfall-row" onclick="toggleSpan(<%= index %>)" id="row-<%= index %>" data-span-type="<%= category %>" <% if sql_statement.present? %>data-sql="<%= sql_statement.truncate(500).gsub('"', "'") %>"<% end %>>
-                <div class="waterfall-bar-container">
-                  <div class="waterfall-bar <%= category %>" style="left: <%= left %>%; width: <%= width %>%;"></div>
-                  <span class="waterfall-label"><%= display_name %></span>
-                  <span class="waterfall-duration"><%= format_duration(span[:duration_ms]) %></span>
-                </div>
-              </div>
-              <div class="span-detail <%= category %>" id="span-<%= index %>">
-                <pre><code><%= format_content(span[:properties]) %></code></pre>
-              </div>
-            <% end %>
-          </div>
-        </div>
-      <% end %>
-    </div>
-  </div>
-</div>
-
-<script>
-  function showTab(tabName) {
-    document.querySelectorAll('.tab-content').forEach(function(el) { el.classList.remove('active'); });
-    document.querySelectorAll('.tab').forEach(function(el) { el.classList.remove('active'); });
-    document.getElementById('tab-' + tabName).classList.add('active');
-    event.target.classList.add('active');
-  }
-
-  function toggleSpan(index) {
-    const detail = document.getElementById('span-' + index);
-    const row = document.getElementById('row-' + index);
-    if (detail.classList.contains('visible')) {
-      detail.classList.remove('visible');
-      row.classList.remove('selected');
-    } else {
-      detail.classList.add('visible');
-      row.classList.add('selected');
-    }
-  }
-
-  function collapseAll() {
-    document.querySelectorAll('.span-detail.visible').forEach(function(el) { el.classList.remove('visible'); });
-    document.querySelectorAll('.waterfall-row.selected').forEach(function(el) { el.classList.remove('selected'); });
-  }
-
-  function filterSpans(filterType) {
-    document.querySelectorAll('.legend-item.clickable').forEach(function(el) { el.classList.remove('active'); });
-    document.querySelector('.legend-item[data-filter="' + filterType + '"]').classList.add('active');
-    document.querySelectorAll('.waterfall-row').forEach(function(row) {
-      const spanType = row.getAttribute('data-span-type');
-      if (filterType === 'all' || spanType === filterType) {
-        row.classList.remove('hidden');
-      } else {
-        row.classList.add('hidden');
-        row.classList.remove('selected');
-      }
-    });
-    document.querySelectorAll('.span-detail').forEach(function(detail) {
-      const index = detail.id.replace('span-', '');
-      const row = document.getElementById('row-' + index);
-      if (row.classList.contains('hidden')) {
-        detail.classList.add('hidden-by-filter');
-        detail.classList.remove('visible');
-      } else {
-        detail.classList.remove('hidden-by-filter');
-      }
-    });
-  }
-
-  // SQL tooltip
-  document.addEventListener('DOMContentLoaded', function() {
-    const sqlTooltip = document.getElementById('sql-tooltip');
-    let tooltipTimeout;
-    document.querySelectorAll('.waterfall-row[data-sql]').forEach(function(row) {
-      row.addEventListener('mouseenter', function() {
-        const sql = row.getAttribute('data-sql');
-        if (sql && !row.classList.contains('selected')) {
-          tooltipTimeout = setTimeout(function() {
-            sqlTooltip.textContent = sql;
-            sqlTooltip.classList.add('visible');
-          }, 200);
-        }
-      });
-      row.addEventListener('mouseleave', function() {
-        clearTimeout(tooltipTimeout);
-        sqlTooltip.classList.remove('visible');
-      });
-    });
-  });
-</script>
-
-<div id="sql-tooltip"></div>