litestack 0.2.2 → 0.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb0952d46398aae021145cdfbadbcd7293da4d0eab2be6008c1d4d027b26d18d
-  data.tar.gz: 59bd635a7fe85b0d9604eb6e4a781bf0cda462f257e1a43418eb527a965240e0
+  metadata.gz: d6db833e61264ea2036338102d0ed1d3e9eb0a5d94a235db5a8f8d4cf390c65f
+  data.tar.gz: 5a48dd08c18ab39f2a19462025e351da8f3e2eedf55f779019cef3ed277e12bc
 SHA512:
-  metadata.gz: 97e5bf71f98f30ba2c4b46ede2d472fbde3676b38fc2eaa5fda2d0edcb6eb048b05712a227b1b9a1b34183ec34154d7e472f9fe5eec7fb27be5102828a2c9a78
-  data.tar.gz: '041950f5996b88e5c60a7800172150199d273ab071c906cc608acb0bb2947b2c3c95ca018ea9862c07395ad4c6da730b1439450dc04112b5e70432fcd122101f'
+  metadata.gz: a6dd503c63cb0ca49092f9f612a6c087d07b13eefa083ca930931b956e5cf81357f130932e2514b340d2e240b73df377bf3f5a55516b7bf444bbe4149c60656c
+  data.tar.gz: a1749b7eba0f8d155fc5e18b7a2da8d26df25ee4bf954e8c15724b8cb8164fb9f23aeab9387793420714e27fd2e13d357a91ece891dfca49afb7dbf6f8a91564

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 ## [Unreleased]
 
+## [0.2.6] - 2023-07-16
+
+- Much improved database location setting (thanks Brad Gessler)
+- A Rails generator for better Rails Litestack defaults (thanks Brad Gessler)
+- Revamped Litemetric, now much faster and more accurate (still experimental)
+- Introduced Liteboard, a dashboard for viewing Litemetric data
+
+## [0.2.3] - 2023-05-20
+
+- Cut back on options defined in the Litejob Rails adapter
+
+## [0.2.2] - 2023-05-18
+
+- Fix default queue location in Litejob
+
+
 ## [0.2.1] - 2023-05-08
 
 - Fix a race condition in Litecable

data/Gemfile

@@ -6,3 +6,5 @@ source "https://rubygems.org"
 gemspec
 
 
+
+gem "rack", "~> 3.0"

data/README.md

@@ -31,19 +31,13 @@ Litestack is still pretty young and under heavy development, but you are welcome
 
 ## Installation
 
-Add this line to your application's Gemfile:
+Add the `litestack` gem line to your application's Gemfile:
 
-```ruby
-gem 'litestack'
-```
-
-And then execute:
-
-    $ bundle install
+    $ bundle add litestack
 
-Or install it yourself as:
+To configure a Rails application to run the full litestack, run:
 
-    $ gem install litestack
+    $ rails generate litestack:install
 
 ## Usage
 

data/bench/bench_jobs_rails.rb

@@ -29,7 +29,7 @@ if env == "a" # threaded
 end
 
 require_relative '../lib/active_job/queue_adapters/litejob_adapter'
-puts Litesupport.environment
+puts Litesupport.scheduler
 
 RailsJob.queue_adapter = :litejob
 t = Time.now.to_f

data/bench/bench_jobs_raw.rb

@@ -28,7 +28,7 @@ end
 
 require './uljob.rb'
 
-STDERR.puts "litejob started in #{Litesupport.environment} environmnet"
+STDERR.puts "litejob started in #{Litesupport.scheduler} environmnet"
 
 t = Process.clock_gettime(Process::CLOCK_MONOTONIC)
 bench("enqueuing litejobs", count) do |i|

data/bin/liteboard

@@ -0,0 +1,81 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require 'optparse'
+require_relative '../lib/litestack/liteboard/liteboard'
+DEFAULTS = {
+  config_path: Litemetric::DEFAULT_OPTIONS[:config_path],
+  path: Litemetric::DEFAULT_OPTIONS[:path]
+}
+
+options = { 
+  config_path: nil,
+  path: nil,
+  deamonize: false,
+  Port: 9292,
+  Host: 'localhost',
+  environment: 'production',
+  quiet: false
+}
+
+OptionParser.new do |parser|
+  parser.banner = "Usage: liteboard [options]"
+  parser.on("-d", "--database PATH", "path to SQLite file  (default: #{DEFAULTS[:path]})") { |v| options[:path] = v }
+  parser.on("-c", "--config PATH", "path to a litemetric config file (default: #{DEFAULTS[:config_path]}) ") { |v| options[:config_path] = v }
+  parser.on("-s", "--server SERVER", "use SERVER (e.g. puma/falcon/iodine)") { |v| options[:port] = v }
+  parser.on("-H", "--host HOST", "listen on HOST (default: #{options[:Host]})") { |v| options[:Host] = v }
+  parser.on("-p", "--port PORT", "use PORT (default: #{options[:Port]})") { |v| options[:Port] = v.to_i rescue options[:Port] }
+  parser.on("-D", "--deamonize", "run in the background") { |v| options[:deamonize] = true }  
+  parser.on("-E", "--env ENVIRONMENT", "which environment to use (default: #{options[:environment]})") { |v| options[:environment] = v }  
+  parser.on("-q", "--quiet", "turn off logging") { |v| options[:quiet] = true }  
+  parser.on("-h", "--help", "print this message") do
+    puts parser
+    exit
+  end
+end.parse!
+
+def check_database(path)
+  unless File.exist?(path) 
+    puts "liteboard: missing database file, please ensure the db path is correct"
+    puts "liteboard: exiting"
+    exit
+  end
+end
+
+check_database(options[:path]) if options[:path] 
+
+# if there is a config file then we need to check it
+config = nil
+if options[:config_path]
+  begin
+    config = Yaml.load_file(options[:config_path]) 
+  rescue
+    puts "liteboard: missing or bad config file, please ensure the config file path is correct"
+    puts "liteboard: exiting"
+    exit
+  end 
+else # no config path! use the default
+  config = Yaml.load_file(DEFAULTS[:config_path]) rescue nil 
+end
+
+if config
+  if options[:path].nil?
+    path = config['path'] || config[options[:environment]]['path']
+    options[:path] = path
+  end  
+end
+
+# if still no path we assume a default db path
+options[:path] = DEFAULTS[:path] if options[:path].nil?
+
+
+# check the validity of the path before starting the server
+check_database(options[:path])
+Litemetric.options = options
+litemetric = Litemetric.instance
+options[:app] = Liteboard.app
+
+require_relative '../lib/litestack'
+puts "Starting Liteboard version #{Litestack::VERSION}"
+
+Rack::Server.start(options)

data/lib/active_job/queue_adapters/litejob_adapter.rb

@@ -33,11 +33,7 @@ module ActiveJob
         
         DEFAULT_OPTIONS = {
           config_path: "./config/litejob.yml",
-          path: "./queue.db",
-          queues: [["default", 1]],
           logger: nil, # Rails performs its logging already
-          retries: 5, # It is recommended to stop retries at the Rails level
-          workers: 5
         }      
 
         include ::Litejob

data/lib/generators/litestack/install/USAGE

@@ -0,0 +1,11 @@
+Description:
+    Installs litestack gem and configures the project to use litestack
+    in development, test, and production environments.
+
+Example:
+    bin/rails generate litestack:install
+
+    This will modify:
+        config/environments/production.rb
+        config/database.yml
+        config/cable.yml

data/lib/generators/litestack/install/install_generator.rb

@@ -0,0 +1,35 @@
+class Litestack::InstallGenerator < Rails::Generators::Base
+  source_root File.expand_path("templates", __dir__)
+
+  # Force copy configuratioon files so Rails installs don't ask questions
+  # that less experienced people might not understand. The more Sr folks.
+  # will know to check git to look at what changed.
+  def modify_database_adapater
+    copy_file "database.yml", "config/database.yml", force: true
+  end
+
+  def modify_action_cable_adapter
+    copy_file "cable.yml", "config/cable.yml", force: true
+  end
+
+  def modify_cache_store_adapter
+    gsub_file "config/environments/production.rb",
+      "# config.cache_store = :mem_cache_store",
+      "config.cache_store = :litecache"
+  end
+
+  def modify_active_job_adapter
+    gsub_file "config/environments/production.rb",
+      "# config.active_job.queue_adapter     = :resque",
+      "config.active_job.queue_adapter = :litejob"
+  end
+
+  def modify_gitignore
+    append_file ".gitignore", <<~TEXT
+
+    # Ignore default Litestack SQLite databases.
+    /db/**/*.sqlite3
+    /db/**/*.sqlite3-*
+    TEXT
+  end
+end

data/lib/generators/litestack/install/templates/cable.yml

@@ -0,0 +1,11 @@
+development:
+  adapter: litecable
+
+test:
+  adapter: test
+
+staging:
+  adapter: litecable
+
+production:
+  adapter: litecable

data/lib/generators/litestack/install/templates/database.yml

@@ -0,0 +1,30 @@
+# SQLite. Versions 3.8.0 and up are supported.
+#   gem install sqlite3
+#
+#   Ensure the SQLite 3 gem is defined in your Gemfile
+#   gem "sqlite3"
+#
+# `Litesupport.root.join("data.sqlite3")` stores
+# application data in the path `./db/#{Rails.env}/data.sqlite3`
+default: &default
+  adapter: litedb
+  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
+  timeout: 5000
+  database: <%= Litesupport.root.join("data.sqlite3") %>
+
+development:
+  <<: *default
+
+# Warning: The database defined as "test" will be erased and
+# re-generated from your development database when you run "rake".
+# Do not set this db to the same as development or production.
+test:
+  <<: *default
+
+# Warning: Make sure your production database path is on a persistent
+# volume, otherwise your application data could be deleted between deploys.
+#
+# You may also set the Litesupport.root in production via the
+# `LITESTACK_DATA_PATH` environment variable.
+production:
+  <<: *default

data/lib/litestack/liteboard/liteboard.rb

@@ -0,0 +1,168 @@
+# frozen_string_literal: true
+require 'hanami/router'
+require 'tilt'
+require 'erubi'
+
+# require relative so we pick the gem version that corresponds to the liteboard binary
+require_relative '../../litestack/litemetric'
+
+class Liteboard 
+
+  @@resolutions = {'minute' => [300, 12], 'hour' => [3600, 24], 'day' => [3600*24, 7], 'week' => [3600*24*7, 53], 'year' => [3600*24*365, 100] }
+  @@res_mapping = {'hour' => 'minute', 'day' => 'hour', 'week' => 'day', 'year' => 'week'}
+  @@templates = {}
+  @@app = Hanami::Router.new do
+
+    get "/", to: ->(env) do
+      Liteboard.new(env).call(:index)
+    end
+    
+    get "/topics/:topic", to: ->(env) do
+      Liteboard.new(env).call(:topic)
+    end
+    
+    get "/topics/:topic/events/:event", to: ->(env) do
+      Liteboard.new(env).call(:event)
+    end
+
+  end 
+
+
+  def initialize(env)
+    @env = env
+    @params = @env["router.params"]
+    @running = true
+    @lm = Litemetric.instance
+  end
+
+  def params(key)    
+    URI.decode_uri_component("#{@params[key]}")
+  end
+
+  def call(method)
+    before
+    res = send(method)
+    after(res)
+  end
+  
+  def render(tpl_name)
+    layout = Tilt.new("#{__dir__}/views/layout.erb")
+    tpl = Tilt.new("#{__dir__}/views/#{tpl_name.to_s}.erb")
+    res = layout.render(self){tpl.render(self)}
+  end
+
+  def after(body=nil)
+    [200, {'Cache-Control' => 'no-cache'}, [body]]    
+  end
+
+  def before
+    @res = params(:res) || 'day'
+    @resolution = @@res_mapping[@res]
+    if not @resolution
+      @res = 'day'
+      @resolution = @@res_mapping[@res]      
+    end
+    @step = @@resolutions[@resolution][0]
+    @count = @@resolutions[@resolution][1]
+    @order = params(:order) 
+    @order = nil if @order == ''
+    @dir = params(:dir) 
+    @dir = 'desc' if @dir.nil? || @dir == ''
+    @dir = @dir.downcase
+    @idir = if @dir == "asc"
+      "desc"
+    else
+      "asc"
+    end
+    @search = params(:search)
+    @search = nil if @search == ''
+  end
+  
+  def index
+    @order = 'topic' unless @order
+    topics = @lm.topics
+    @topics = @lm.topic_summaries(@resolution, @step * @count, @order, @dir, @search)
+    @topics.each do |topic|
+        data_points = @lm.topic_data_points(@step, @count, @resolution, topic[0])      
+        topic << data_points.collect{|r| [r[0],r[2]]}
+    end    
+    render :index
+  end
+  
+  def topic
+    @order = 'rcount' unless @order
+    @topic = params(:topic)
+    @events = @lm.events_summaries(@topic, @resolution, @order, @dir, @search, @step * @count)
+    @events.each do |event|
+      data_points = @lm.event_data_points(@step, @count, @resolution, @topic, event[0])
+      event << data_points.collect{|r| [r[0],r[2]]}
+      event << data_points.collect{|r| [r[0],r[3]]}
+    end
+    @snapshot = @lm.snapshot(@topic)
+    if @snapshot.empty?
+      @snapshot = []
+    else
+      @snapshot[0] = Oj.load(@snapshot[0]) unless @snapshot[0].nil?
+    end
+    render :topic
+  end
+  
+  def event
+    @order = 'rcount' unless @order
+    @topic = params(:topic)
+    @event = params(:event)
+    @keys = @lm.keys_summaries(@topic, @event, @resolution, @order, @dir, @search, @step * @count)  
+    @keys.each do |key|
+      data_points = @lm.key_data_points(@step, @count, @resolution, @topic, @event, key[0])
+      key << data_points.collect{|r| [r[0],r[2]]}
+      key << data_points.collect{|r| [r[0],r[3]]}
+    end    
+    render :event
+  end
+
+  def index_sort_url(field)
+    "/?#{compose_query(field)}"
+  end
+  
+  def topic_sort_url(field)
+    "/topics/#{encode(@topic)}?#{compose_query(field)}"
+  end
+  
+  def event_sort_url(field)
+    "/topics/#{encode(@topic)}/events/#{encode(@event)}?#{compose_query(field)}"
+  end
+  
+  def compose_query(field)
+    field.downcase!
+    "res=#{@res}&order=#{field}&dir=#{@order == field ? @idir : @dir}&search=#{@search}"
+  end
+  
+  def sorted?(field)
+    @order == field
+  end
+  
+  def dir(field)
+    if sorted?(field)
+      if @dir == 'asc'
+        return "<span class='material-icons'>arrow_drop_up</span>"  
+      else
+        return "<span class='material-icons'>arrow_drop_down</span>"
+      end
+    end
+    '&nbsp;&nbsp;'
+  end
+  
+  def encode(text)
+    URI.encode_uri_component(text)
+  end
+  
+  def self.app
+   @@app
+  end
+
+end
+
+
+
+
+#Rack::Server.start({app: Litebaord.app, daemonize: false})

data/lib/litestack/liteboard/views/event.erb

@@ -0,0 +1,32 @@
+    <h5><a href="/?res=<%=@res%>">All Topics</a> > <a href="/topics/<%=@topic%>?res=<%=@res%>"><%=@topic%></a> > <%= @event %></h5>
+    <div id="search"><form><input id="search-field" type="text" placeholder="Search keys" onkeydown="search_kd(this)" onkeyup="search_ku(this)" value="<%=@search%>"/></form></div>
+    <table class="table sortable">
+      <tr>
+        <th width="16%" class="<%='sorted' if @order == 'key'%>"><a href="<%=event_sort_url('key')%>">Key</a> <%=dir('key')%></th>
+        <th width="8%" class="<%='sorted' if @order == 'rcount'%>"><a href="<%=event_sort_url('rcount')%>">Event Count</a> <%=dir('rcount')%></th>
+        <th width="8%" class="<%='sorted' if @order == 'ravg'%>"><a href="<%=event_sort_url('ravg')%>">Avg Value</a> <%=dir('ravg')%></th>
+        <th width="8%" class="<%='sorted' if @order == 'rtotal'%>"><a href="<%=event_sort_url('rtotal')%>">Total Value</a> <%=dir('rtotal')%></th>
+        <th width="8%" class="<%='sorted' if @order == 'rmin'%>"><a href="<%=event_sort_url('rmin')%>">Min Value</a> <%=dir('rmin')%></th>
+        <th width="8%" class="<%='sorted' if @order == 'rmax'%>"><a href="<%=event_sort_url('rmax')%>">Max Value</a> <%=dir('rmax')%></th>
+        <th width="22%">Events over time</th>
+        <th width="22%">Average value over time</th>
+      </tr>
+      <% @keys.each do |key|%>
+      <tr>
+        <td title="<%=key[0]%>"><div class="label"><span><%=key[0]%></span></div></td>
+        <td><%=key[1]%></td>
+        <td><%="%0.2f" % [key[2]] if key[2]%></td>
+        <td><%="%0.2f" % [key[3]] if key[3]%></td>
+        <td><%="%0.2f" % [key[4]] if key[4]%></td>
+        <td><%="%0.2f" % [key[5]] if key[5]%></td>
+        <td class="chart"><span class="inlinecolumn hidden" data-label="Count"><%=Oj.dump(key[6]) if key[7]%></span></td>
+        <td class="chart"><span class="inlinecolumn hidden" data-label="Avg Value"><%=Oj.dump(key[7]) if key[7]%></span></td>
+      </tr>
+      <% end %>
+      <% if @keys.empty? %>
+        <tr>
+         <td class="empty" colspan="8">No data to display</td>
+        </tr>
+      <% end %>
+      </table>
+

data/lib/litestack/liteboard/views/index.erb

@@ -0,0 +1,22 @@
+
+    <h5>All topics</h5>
+    <div id="search"><form><input id="search-field" type="text" placeholder="Search topics" onkeydown="search_kd(this)" onkeyup="search_ku(this)" value="<%=@search%>"/></form></div>
+    <table class="sortable table">
+      <tr>
+        <th width="20%" class="<%='sorted' if @order == 'topic'%>"><a href="<%=index_sort_url('topic')%>">Topics</a>  <%=dir('topic')%></th>
+        <th width="20%" class="<%='sorted' if @order == 'rcount'%>"><a href="<%=index_sort_url('rcount')%>">Total events</a>  <%=dir('rcount')%></th>
+        <th width="40%">Events over time</th>
+      </tr>
+      <% @topics.each do |topic|%>
+        <tr>
+          <td title="<%=topic[0]%>"><div class="label"><a href="./topics/<%=encode(topic[0])%>?res=<%=@res%>"><%=topic[0]%></a></div></td>
+          <td><%=topic[3]%></td>
+          <td class="chart"><span class="inlinecolumn hidden" data-label="Count"><%=Oj.dump(topic[4]) if topic[4]%></span></td>
+        </tr>
+      <%end%>
+      <% if @topics.empty? %>
+        <tr>
+         <td class="empty" colspan="5">No data to display</td>
+        </tr>
+      <% end %>
+

data/lib/litestack/liteboard/views/layout.erb

@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>liteboard</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Antonio">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    
+    <style>
+      body {background-color: #fff}
+      input, select { border-radius: 3px}
+      div#header { width: 100%; border-bottom: 1px solid #089;}
+      div.label {max-width:400px;overflow:hidden}
+      h1 { font-family: antonio }
+      #content{ padding-right: 12px; padding-left: 12px; padding-bottom: 60px;}
+      table.head { margin-top: 12px; margin-bottom:12px}
+      table.head select { color: #078; background-color: #fff; font-weight: normal }
+      .table th { color: #078; font-weight: normal; }
+      .table th.sorted { font-weight: bold }
+      .table td { color: #444; vertical-align:middle; font-size: 18px}
+      .table td:first-child { color: #444; vertical-align:middle; font-size: 15px; font-weight:normal}
+      .table td.empty { text-align:center}
+      a { color: #078; }
+      a .logo { color: #000;}
+      a:visited { color: #078; }
+      //table.summary { width: 50% }
+      span.hidden { display: none}
+      div#search {margin-bottom: 8px}
+      div#footer {position:fixed; left:0px; height: 40px; width:100%; background-color:#0891; border-top: #0893 1px solid; padding: 8px; bottom: 0; text-align: right}
+      .logo{font-family: antonio}
+      .logo-half{ color: #078 }
+      .smaller { font-size: 24px; font-weight: normal}
+      .token {background-color: #ed9}
+      svg > g > g.google-visualization-tooltip { pointer-events : none }
+      .material-icons { vertical-align: middle}
+    </style>
+  </head>
+  <body>
+    <div id="content">
+    <div id="header">
+      <h1><span class="logo"><span class="logo-half">lite</span>board | </span> <span class="logo smaller">the <span class="logo-half">lite</span>metric dashboard</span></span></h1>
+    </div>
+    <table class="head">
+      <tr>
+        <td>
+          Showing data for the last <select onchange="window.location = locationWithParam('res', this.value)">
+            <%= mapping = {'hour' => '60 minutes', 'day' => '24 hours', 'week' => '7 days', 'year' => '52 weeks'}%>
+            <% ['hour', 'day', 'week', 'year'].each do  |res| %>
+              <option value=<%=res%> <%='selected' if res == @res%>><%=mapping[res]%></option>
+            <% end %>
+          </select>
+        </td>
+        <td></td>
+      </tr>
+      <tr>
+        <td></td><td></td>
+      </tr>
+    </table>
+    <%= yield %>
+    </div>
+    <div id="footer">
+      Powered by <a href="https://www.github.com/oldmoe/litestack" target="_blank"><span class="logo"><span class="logo-half">lite</span>stack</span></a>
+    </div>
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"   crossorigin="anonymous"></script>
+  </body>
+    <script>
+      google.charts.load('current', {'packages':['corechart']});
+
+      google.charts.setOnLoadCallback(drawChart);
+
+      function drawChart() {
+        elements = document.querySelectorAll(".inlinecolumn")
+        elements.forEach(element => {
+          //console.log(element)
+          var label = element.dataset.label;
+          var mydata = eval(element.innerText)
+          //console.log(mydata)
+          if(mydata.length > 0) {        
+            var data = new google.visualization.DataTable();
+          
+            data.addColumn('string', 'Time');
+            data.addColumn('number', label);
+            mydata.forEach(row => {
+              row[1] = Number(row[1])
+              data.addRows([row])
+            })
+            //data.addRows(mydata)
+            var options = {
+              animation: {'startup': true, 'duration': 300},
+              width: 400,
+              height: 40,
+              backgroundColor: 'none',
+              curveType: 'function',
+              colors : ['#089'],
+              vAxis: {'gridlines': {'count' : 0}, 'textPosition' : 'none', 'baselineColor' : 'none', 'minValue' : 0 , 'maxValue' : 50},
+              hAxis: { 'count' : 0, 'textPosition' : 'none', 'baselineColor' : 'none'},
+              legend: {'position': 'none'}
+            }
+            var chart = new google.visualization.AreaChart(element);
+            chart.draw(data, options);   
+            element.classList.remove("hidden")      
+          }
+        })
+      }      
+      function search_kd(el){
+        //store the current value 
+        el.oldvalue = el.value
+      }
+      function search_ku(el){
+        //check if the value has changed and if so
+        // set a new timer to fire a request in 300ms
+        // removing any existing timer first
+        if(el.value == el.oldvalue){
+          return
+        }else{
+          el.oldvalue = null
+        }        
+        if(el.timeout){
+          window.clearTimeout(el.timeout)
+        }
+        el.timeout = window.setTimeout(function(){
+          el.timeout = null
+          window.location = locationWithParam('search', el.value)
+        }, 300)
+      }
+      
+      $(document).ready(function(){
+        el = $('#search-field')[0]
+        el.focus()
+        if(el.value && el.value.length > 0){
+          el.setSelectionRange(el.value.length, el.value.length)
+          var list = $("table.sortable div.label") //[0].children[0].children
+          for(var i=0; i < list.length; i++){
+            //console.log(list[i])
+            var link = list[i].children[0] //.children[0].children[0]
+            var re = new RegExp("("+el.value+")", "giu")
+            link.innerHTML = link.innerHTML.replaceAll(re, "<span class='token'>$1</span>") ;
+          }
+        }          
+      })
+      
+      function locationWithParam(param, value){
+          var query = window.location.search
+          var params = new URLSearchParams(query)
+          params.set(param, value)
+          var l = window.location
+          return l.origin + l.pathname + '?' + params.toString()
+      }
+    </script>
+</html>
+