ahoy_captain 0.10.1 → 0.11.1

data/app/components/ahoy_captain/combobox_component.html.erb

@@ -10,7 +10,7 @@
 >
   <div data-action="click->combobox#toggleOpen" data-combobox-target="box"
        class="
-        bg-gray-900 ring-0  focus-within:ring-0 focus-within:ring-0 focus:ring-0 focus:outline-none w-full rounded-md px-4 py-2 text-sm
+        bg-gray-900 ring-0  focus-within:ring-0 focus-within:ring-0 focus:ring-0 focus:outline-none w-full rounded-md py-2 text-sm
         w-full"
        data-combobox-box-open-class="border-secondary-500 ring-1 ring-secondary-500">
     <select data-combobox-target="select" style="display:none;"
@@ -19,7 +19,7 @@
             id="<%= @select_html[:id] || "filter_#{@name}" %>"
             <% @select_html.each do |k,v| %><%=k %>="<%=v %>"<% end %>
     ><% @value.each do |value| %><option value="<%= value %>" selected><%= value %></option><% end %></select>
-    <div data-combobox-target="selected" class="" style="display:none;"></div>
+    <div data-combobox-target="selected" class="px-2" style="display:none;"></div>
     <input data-combobox-target="input"
            data-action="input->combobox#onInput"
            class="input input-sm input-ghost w-full inline-block rounded-md focus:outline-none focus:ring-0 focus:bg-gray-900"

data/app/components/ahoy_captain/combobox_component.rb

@@ -5,7 +5,7 @@ module AhoyCaptain
       @multiple = multiple
       @column = column
       @url = url
-      @value = value
+      @value = Array(value)
       @select_html = select_html
       @disabled = disabled
     end

data/app/components/ahoy_captain/comparison_link_component.html.erb

@@ -0,0 +1,17 @@
+<div class="dropdown dropdown-end" data-controller='dropdown-label'>
+  <label
+    tabindex="0"
+    class="cursor-pointer flex <%= classes %>"
+    data-action='click->dropdown-label#removeHidden'
+    >
+    <span data-dropdown-label-target="label"><%= title %></span>
+
+  </label>
+  <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52" data-dropdown-label-target="close">
+    <% links.each do |link| %>
+      <li data-action="click->dropdown-label#setLabel">
+        <%= link %>
+      <li>
+    <% end %>
+  </ul>
+</div>

data/app/components/ahoy_captain/comparison_link_component.rb

@@ -1,17 +1,21 @@
 # frozen_string_literal: true
 
-class AhoyCaptain::ComparisonLinkComponent < AhoyCaptain::DropdownLinkComponent
+class AhoyCaptain::ComparisonLinkComponent < ViewComponent::Base
   include ::AhoyCaptain::CompareMode
   include ::AhoyCaptain::RangeOptions
   include ::AhoyCaptain::Rangeable
 
+  renders_many :links
+  renders_one :header
+
+  attr_reader :title, :classes
   def initialize(title: "", classes: "btn btn-sm btn-base-100 no-underline hover:bg-base-100")
     @classes = classes
   end
 
   # cheating
   def title
-    self.with_option_content(options_for_option)
+    self.with_link_content(options_for_option)
 
     comparison_mode.label
   end
@@ -22,12 +26,12 @@ class AhoyCaptain::ComparisonLinkComponent < AhoyCaptain::DropdownLinkComponent
 
   def options_for_option
     [
-      (link_to "Disable Comparison", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: false))),
-      (link_to "Previous period", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :previous)), class: selected(:previous, :true)),
-      (link_to "Year-over-year", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :year)), class: selected(:year)),
       (link_to "Custom period", "javascript:customComparisonModal.showModal()", class: selected(:custom)),
+      (link_to "Year-over-year", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :year)), class: selected(:year)),
+      (link_to "Previous period", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :previous)), class: selected(:previous, :true)),
+      (link_to "Disable Comparison", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: false))),
 
-    ].join.html_safe
+    ].reverse.join.html_safe
   end
 
   private

data/app/components/ahoy_captain/dropdown_link_component.html.erb

@@ -1,13 +1,11 @@
-<div class="dropdown dropdown-end " data-controller='dropdown-label'>
+<div class="dropdown dropdown-end" data-controller='dropdown-label'>
   <label
     tabindex="0"
     class="cursor-pointer flex <%= classes %>"
     data-action='click->dropdown-label#removeHidden'
     >
     <span data-dropdown-label-target="label"><%= title %></span>
-    <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path fill="currentColor" d="M16.53 8.97a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 1 1 1.06-1.06L12 12.44l3.47-3.47a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
-    </svg>
+
   </label>
   <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52" data-dropdown-label-target="close">
     <% options.each do |option| %>

data/app/components/ahoy_captain/dropdown_link_component.rb

@@ -9,6 +9,10 @@ class AhoyCaptain::DropdownLinkComponent < ViewComponent::Base
     @classes = classes
   end
 
+  def link_to(name, url, **options)
+    self.with_option_content view_context.link_to name, url, options
+  end
+
   private
 
   attr_reader :title, :classes

data/app/components/ahoy_captain/previous_next_component.html.erb

@@ -0,0 +1,8 @@
+<div class="rounded shadow bg-white cursor-pointer dark:bg-gray-800 flex h-8">
+  <button class="flex items-center px-1 sm:px-2 border-r border-gray-300 rounded-l dark:border-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-900" type="button">
+    <svg class="feather h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+  </button>
+  <button class="flex items-center px-1 sm:px-2 rounded-r dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-900" type="button">
+    <svg class="feather h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+  </button>
+</div>

data/app/components/ahoy_captain/previous_next_component.rb

@@ -0,0 +1,11 @@
+module AhoyCaptain
+  class PreviousNextComponent < ViewComponent::Base
+    def initialize(range)
+      @range = range
+    end
+
+    def render?
+      false
+    end
+  end
+end

data/app/components/ahoy_captain/stats/comparable_container_component.html.erb

@@ -1,4 +1,4 @@
-<a href="<%= @url %>" class="relative px-4 md:px-6 w-1/2 my-4 w-auto group cursor-pointer"  data-turbo-frame="chart">
+<a href="<%= @url %>" class="relative px-4 md:px-6 w-1/2 my-4 w-auto group cursor-pointer" data-controller="frame-link" data-turbo-frame="chart">
   <div>
     <h5 class="text-sm font-bold uppercase whitespace-nowrap flex w-content border-transparent tooltip tooltip-bottom	"
         data-active-links-target="link" data-tip="<%= tooltip %>">

data/app/components/ahoy_captain/stats/container_component.html.erb

@@ -1,4 +1,4 @@
-<a href="<%= @url %>" class="relative px-4 md:px-6 w-1/2 my-4 lg:w-auto group cursor-pointer"  data-turbo-frame="chart">
+<a href="<%= @url %>" class="relative px-4 md:px-6 w-1/2 my-4 lg:w-auto group cursor-pointer" data-controller="frame-link" data-turbo-frame="chart">
   <div>
     <h5 class="text-sm font-bold uppercase whitespace-nowrap flex w-content border-transparent tooltip tooltip-bottom	"
         data-active-links-target="link">

data/app/components/ahoy_captain/sticky_nav_component.html.erb

@@ -1,28 +1,32 @@
-<div class="max-w-6xl flex justify-between sticky top-0 min-h-sm z-[99999] py-4 bg-base-100">
-  <div class="flex items-center">
-    <a href="/">
-      <img src="<%= image_path "ahoy_captain/logo.png" %>" alt="AhoyCaptainLogo" class='max-h-20 md:h-16 rounded-full'>
-    </a>
-    <% if tag_list_hidden? %>
-      <%= render AhoyCaptain::Filter::TagContainerComponent.new %>
-    <% else %>
-      <%= realtime_update %>
-    <% end %>
-  </div>
-  <div class="flex flex-row-reverse col-span-2 items-center gap-3">
-    <%= render AhoyCaptain::ComparisonLinkComponent.new %>
+<div class=" sticky top-0 min-h-sm z-[99999] py-4 bg-base-100 pb-4">
+  <div class="max-w-6xl mx-auto max-w-6xl flex justify-between ">
+    <div class="flex items-center">
+      <a href="/">
+        <img src="<%= image_path "ahoy_captain/logo.png" %>" alt="AhoyCaptainLogo" class='max-h-20 md:h-16 rounded-full'>
+      </a>
+      <% if tag_list_hidden? %>
+        <%= render AhoyCaptain::Filter::TagContainerComponent.new %>
+      <% else %>
+        <%= realtime_update %>
+      <% end %>
+    </div>
+    <div class="flex flex-row-reverse col-span-2 items-center gap-3">
+      <%= render AhoyCaptain::ComparisonLinkComponent.new %>
+      <%= render AhoyCaptain::PreviousNextComponent.new(range) %>
 
-    <%= render AhoyCaptain::DropdownLinkComponent.new(title: params[:start_date] ? "Custom Range" : (AhoyCaptain.config.ranges.find(params[:period] || AhoyCaptain.config.ranges.default).try(:label) || "Period"), classes: 'btn btn-sm btn-base-100 no-underline hover:bg-base-100') do |dropdown| %>
-      <% dropdown.with_option do %>
-        <% AhoyCaptain.config.ranges.each do |param, range| %>
-          <a class='link no-underline' href="<%= request.path %>?<%= request.query_parameters.except("start_date", "end_date", "date", "compare_to_start_date", "compare_to_end_date").merge("period" => param).to_query %>"><%= range.label %></a>
-        <% end %>
+      <%= render AhoyCaptain::DropdownLinkComponent.new(title: params[:start_date] ? custom_range_label : (AhoyCaptain.config.ranges.find(params[:period] || AhoyCaptain.config.ranges.default).try(:label) || "Period"), classes: 'btn btn-sm btn-base-100 no-underline hover:bg-base-100') do |dropdown| %>
+        <% dropdown.with_option do %>
+          <% AhoyCaptain.config.ranges.each do |param, range| %>
+            <a class='link no-underline' href="<%= request.path %>?<%= request.query_parameters.except("start_date", "end_date", "date", "compare_to_start_date", "compare_to_end_date").merge("period" => param).to_query %>"><%= range.label %></a>
+          <% end %>
 
-        <a class='link no-underline ' href='#' onclick="event.preventDefault(); customRangeModal.showModal()">Custom range</a>
-        <a class='link no-underline ' href='<%= AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: !compare_mode?)) %>'><%= compare_mode? ? "Disable Comparison" : "Compare" %></a>
+          <a class='link no-underline ' href='#' onclick="event.preventDefault(); customRangeModal.showModal()">Custom Range</a>
+          <a class='link no-underline ' href='<%= AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: !compare_mode?)) %>'><%= compare_mode? ? "Disable Comparison" : "Compare" %></a>
+        <% end %>
       <% end %>
-    <% end %>
 
-    <%= render AhoyCaptain::Filter::DropdownComponent.new(filters: filters) %>
+      <%= render AhoyCaptain::Filter::DropdownComponent.new(filters: filters) %>
+    </div>
   </div>
+
 </div>

data/app/components/ahoy_captain/sticky_nav_component.rb

@@ -10,6 +10,14 @@ class AhoyCaptain::StickyNavComponent < ViewComponent::Base
     @filters ||= ::AhoyCaptain::FilterParser.parse(request)
   end
 
+  def custom_range_label
+    if range.custom?
+      [range.starts_at, range.ends_at].map { |date| date.strftime('%b %d, %Y') }.join("-")
+    else
+      "Custom Range"
+    end
+  end
+
   def tag_list_hidden?
     filters.values.map(&:values).flatten.size < ::AhoyCaptain::FilterParser::FILTER_MENU_MAX_SIZE
   end

data/app/components/ahoy_captain/tile_component.rb

@@ -11,6 +11,13 @@ class AhoyCaptain::TileComponent < ViewComponent::Base
     @wide = wide
   end
 
+  def link_to(name, url, **options)
+    options[:class] = "inline-block h-5 font-semibold"
+    options[:data] ||= {}
+    options[:data].merge!(controller: "frame-link")
+    view_context.link_to name, url, **options
+  end
+
   private
 
   attr_reader :title, :wide

data/app/controllers/ahoy_captain/locations/cities_controller.rb

@@ -0,0 +1,22 @@
+module AhoyCaptain
+  module Locations
+    class CitiesController < ApplicationController
+      include AhoyCaptain::Limitable
+
+      before_action do
+        if Widget.disabled?(:locations, :cities)
+          raise Widget::WidgetDisabled.new("Widget disabled", :geography)
+        end
+      end
+
+      def index
+        results = cached(:cities) do
+          CityQuery.call(params)
+                   .limit(limit)
+        end
+
+        @cities = paginate(results).map { |city| CityDecorator.new(city, self) }
+      end
+    end
+  end
+end

data/app/controllers/ahoy_captain/locations/countries_controller.rb

@@ -0,0 +1,22 @@
+module AhoyCaptain
+  module Locations
+    class CountriesController < ApplicationController
+      include Limitable
+
+      before_action do
+        if Widget.disabled?(:locations, :countries)
+          raise Widget::WidgetDisabled.new("Widget disabled", :geography)
+        end
+      end
+
+      def index
+        results = cached(:countries) do
+          CountryQuery.call(params)
+                      .limit(limit)
+        end
+
+        @countries = paginate(results).map { |country| CountryDecorator.new(country, self) }
+      end
+    end
+  end
+end

data/app/controllers/ahoy_captain/locations/maps_controller.rb

@@ -0,0 +1,24 @@
+module AhoyCaptain
+  module Locations
+    class MapsController < ApplicationController
+      include Limitable
+
+      before_action do
+        if Widget.disabled?(:locations, :map)
+          raise Widget::WidgetDisabled.new("Widget disabled", :geography)
+        end
+      end
+
+      def show
+        if request.variant.include?(:details)
+          results = CountryQuery.call(params)
+          results = results.limit(limit)
+          @countries = paginate(results).map { |country| CountryDecorator.new(country, self) }
+          render template: 'ahoy_captain/locations/countries/index'
+        else
+          @countries = visit_query.group("country").count
+        end
+      end
+    end
+  end
+end

data/app/controllers/ahoy_captain/locations/regions_controller.rb

@@ -0,0 +1,22 @@
+module AhoyCaptain
+  module Locations
+    class RegionsController < ApplicationController
+      include Limitable
+
+      before_action do
+        if Widget.disabled?(:locations, :regions)
+          raise Widget::WidgetDisabled.new("Widget disabled", :geography)
+        end
+      end
+
+      def index
+        results = cached(:regions) do
+          RegionQuery.call(params)
+                     .limit(limit)
+        end
+
+        @regions = paginate(results).map { |region| RegionDecorator.new(region, self) }
+      end
+    end
+  end
+end

data/app/helpers/ahoy_captain/application_helper.rb

@@ -56,8 +56,6 @@ module AhoyCaptain
         :period,
         :interval,
         :comparison,
-        :compare_to_start_date,
-        :compare_to_end_date
       ]
 
       # properties stuff falls into current_property_filter

data/app/models/ahoy_captain/range_from_params.rb

@@ -1,7 +1,6 @@
 module AhoyCaptain
   class RangeFromParams
     def self.from_params(params)
-
       compare = ComparisonMode.new(params)
       new(period: params[:period], start_date: params[:start_date], end_date: params[:end_date], date: params[:date], comparison: compare.enabled?(false), raw: params).tap { |instance| instance.build }
     end
@@ -53,6 +52,10 @@ module AhoyCaptain
       @range.end.nil?
     end
 
+    def custom?
+      @raw[:start_date].present? && @raw[:end_date].present?
+    end
+
     def [](value)
       if value == 0
         starts_at

data/app/views/ahoy_captain/layouts/shared/_tile_loader.html.erb

@@ -0,0 +1,12 @@
+<div class="mt-5" >
+  <div role="status" class="animate-pulse">
+    <div class="flex justify-between w-full mb-2">
+      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32"></div>
+      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
+    </div>
+    <% 10.times do |i| %>
+      <div class="h-6 bg-gray-200 dark:bg-gray-700 max-w-[<%= 100 - (i * 10) %>%] mb-2.5"></div>
+    <% end %>
+    <span class="sr-only">Loading...</span>
+  </div>
+</div>

data/app/views/ahoy_captain/locations/maps/show.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :geography do %>
+  <canvas style="position: relative; width: 500px; height: 300px;" data-controller="map" data-map-data-value="<%= @countries.to_json %>"></canvas>
+<% end %>

data/app/views/ahoy_captain/properties/_form.html.erb

@@ -1,4 +1,4 @@
-<select class="select text-accent-content bg-accent" data-controller="properties" data-action="change->properties#handleChange">
+<select class="select text-accent select-sm w-full max-w-sm" data-controller="properties" data-action="change->properties#handleChange">
   <option></option>
   <% @options.each do |key, value| %>
     <option value="<%= property_path(id: key) %>" <%= 'selected' if local_assigns[:selected] == value %>><%= value %></option>

data/app/views/ahoy_captain/roots/show.html.erb

@@ -1,40 +1,66 @@
-<main class='min-h-screen pb-4 max-w-6xl mx-auto' data-controller="application"  data-action="combobox:init@window->application#comboboxInit">
+<main class='w-screen	overflow-hidden' data-action="combobox:init@window->application#comboboxInit">
+  <script id="tile-loader-template" type="template/html">
+    <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+  </script>
   <%= render AhoyCaptain::StickyNavComponent.new do |nav| %>
     <% nav.with_realtime_update do %>
       <%= turbo_frame_tag :realtime, src: realtime_path, data: { controller:  "realtime", "realtime-interval-value" => AhoyCaptain.config.realtime_interval.to_i }, loading: :lazy %>
     <% end %>
   <% end %>
 
-  <div class="grid grid-cols-1 lg:grid-cols-2 grid-flow-row gap-4">
+  <div class="grid grid-cols-1 lg:grid-cols-2 grid-flow-row gap-4 min-h-screen pb-4 max-w-6xl mx-auto">
     <%= render AhoyCaptain::TileComponent.new(wide: true, classes: "p-4 m-2") do |component| %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :stats, src: stats_path(search_params), loading: :lazy %>
-
+        <%= turbo_frame_tag :stats, src: stats_path(search_params), loading: :lazy, skeleton: false do %>
+          <div class="grid grid-cols-1 divide-y divide-base-200 overflow-hidden rounded-lg grid-cols-2 md:grid-cols-6 md:divide-y-0">
+            <% 6.times do %>
+              <div class="relative px-4 md:px-6 w-1/2 my-4 w-auto group cursor-pointer" >
+                <div role="status" class="max-w-sm animate-pulse">
+                  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[120px] mb-2.5"></div>
+                  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5 max-w-[60px]"></div>
+                  <span class="sr-only">Loading...</span>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
         <%= turbo_frame_tag :chart, src: stats_unique_visitors_path(search_params) do %>
+          <div role="status" class="p-4 animate-pulse md:p-6">
+            <div class="flex items-baseline mt-4 space-x-6">
+              <div class="w-full bg-gray-200 rounded-t-lg h-72 dark:bg-gray-700"></div>
+              <div class="w-full h-56 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-72 dark:bg-gray-700"></div>
+              <div class="w-full h-64 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-80 dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-72 dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-80 dark:bg-gray-700"></div>
+            </div>
+            <span class="sr-only">Loading...</span>
+          </div>
         <% end %>
       <% end %>
 
     <% end %>
 
     <%= render AhoyCaptain::TileComponent.new(title: 'Top Sources') do |component| %>
-      <% component.with_display_links do %>
-        <div data-controller="active-links">
-          <a href="<%= sources_path(search_params) %>" data-turbo-frame="sources" class="" data-active-links-target="link">All</a>
-          <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Campaign") do |dropdown| %>
-            <% %w{utm_source utm_medium utm_term utm_content utm_campaign}.each do |source| %>
-              <% dropdown.with_option do %>
-                <a href="<%= public_send("campaign_#{source}_path".to_sym, **search_params) %>" class=""
-                   data-turbo-frame="sources"
-                   data-active-links-target="link">
-                  <%= source.titleize.gsub("Utm", "UTM") %>
-                </a>
+      <% component.with_display_links do  %>
+        <div class="flex text-xs font-medium text-gray-400 space-x-2">
+          <div class="relative inline-block text-left">
+            <%= component.link_to "All", sources_path(search_params), data: { turbo_frame: "sources" } %>
+            <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Campaign") do |dropdown| %>
+              <% %w{utm_source utm_medium utm_term utm_content utm_campaign}.each do |source| %>
+                <%= dropdown.link_to source.titleize.gsub("Utm", "UTM"), public_send("campaign_#{source}_path".to_sym, **search_params), data: { turbo_frame: "sources" } %>
               <% end %>
             <% end %>
-          <% end %>
+          </div>
         </div>
+
+
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :sources, src: sources_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :sources, src: sources_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+        <% end %>
       <% end %>
       <% component.with_details_cta do %>
         <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#sources" class="link no-underline ">Details</button>
@@ -44,59 +70,62 @@
     <%= render AhoyCaptain::TileComponent.new(title: 'Top Pages') do |component| %>
       <% component.with_display_links do %>
         <div class="flex text-xs font-medium text-gray-400 space-x-2">
-          <div class="relative inline-block text-left" data-controller="active-links"><div>
-            <a href="<%= top_pages_path(search_params) %>"
-               data-turbo-frame="pages"
-               class="inline-block h-5 font-semibold"
-               data-active-links-target="link"
-               data-action="click->tile#setTitle">Top Pages</a>
-            <a href="<%= entry_pages_path(search_params) %>" data-turbo-frame="pages" class="inline-block h-5 font-semibold" data-active-links-target="link" data-action="click->tile#setTitle">Entry Pages</a>
-            <a href="<%= exit_pages_path(search_params) %>" data-turbo-frame="pages" class="inline-block h-5 font-semibold" data-active-links-target="link" data-action="click->tile#setTitle">Exit Pages</a>
+          <div class="relative inline-block text-left"><div>
+            <%= component.link_to "Top Pages", top_pages_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "pages" } %>
+            <%= component.link_to "Entry Pages", entry_pages_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "pages" } %>
+            <%= component.link_to "Exit Pages", exit_pages_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "pages" } %>
           </div>
           </div>
         </div>
 
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :pages, src: top_pages_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :pages, src: top_pages_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+        <% end %>
       <% end %>
       <% component.with_details_cta do %>
         <button data-action="click->details-modal#openModal" data-controller="details-modal"  data-details-modal-target-value="#pages" class="link no-underline ">Details</button>
       <% end %>
     <% end %>
 
-    <%= render AhoyCaptain::TileComponent.new(title: 'Countries') do |component| %>
+    <%= render AhoyCaptain::TileComponent.new(title: 'Map') do |component| %>
       <% component.with_display_links do %>
         <div class="flex text-xs font-medium text-gray-400 space-x-2">
-          <div class="relative inline-block text-left" data-controller="active-links">
-
-            <a href="<%= countries_path(search_params) %>" data-turbo-frame="geography" class="inline-block h-5 font-semibold" data-active-links-target="link" data-action="click->tile#setTitle">Countries</a>
-            <a href="<%= regions_path(search_params) %>" data-turbo-frame="geography" class="inline-block h-5 font-semibold"   data-active-links-target="link" data-action="click->tile#setTitle">Regions</a>
-            <a href="<%= cities_path(search_params) %>" data-turbo-frame="geography" class="inline-block h-5 font-semibold"   data-active-links-target="link" data-action="click->tile#setTitle">Cities</a>
+          <div class="relative inline-block text-left">
+            <%= component.link_to "Map", locations_map_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "geography" } %>
+            <%= component.link_to "Countries", locations_countries_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "geography" } %>
+            <%= component.link_to "Regions", locations_regions_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "geography" } %>
+            <%= component.link_to "Cities", locations_cities_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "geography" } %>
           </div>
         </div>
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :geography, src: countries_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :geography, src: locations_map_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+
+        <% end %>
       <% end %>
       <% component.with_details_cta do %>
-        <button data-action="click->details-modal#openModal" data-controller="details-modal"  data-details-modal-target-value="#geography" class="link no-underline ">Details</button>
+        <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#geography" class="link no-underline ">Details</button>
       <% end %>
     <% end %>
 
     <%= render AhoyCaptain::TileComponent.new(title: 'Devices') do |component| %>
       <% component.with_display_links do %>
         <div class="flex text-xs font-medium text-gray-400 space-x-2">
-          <div class="relative inline-block text-left" data-controller="active-links">
-
-            <a href="<%= devices_browsers_path(search_params) %>" data-turbo-frame="devices" class=" inline-block h-5 font-semibold"   data-active-links-target="link">Browser</a>
-            <a href="<%= devices_operating_systems_path(search_params) %>" data-turbo-frame="devices" class="inline-block h-5 font-semibold"   data-active-links-target="link">OS</a>
-            <a href="<%= devices_device_types_path(search_params) %>" data-turbo-frame="devices"  class="inline-block h-5 font-semibold"  data-active-links-target="link">Size</a>
+          <div class="relative inline-block text-left">
+            <%= component.link_to "Browser", devices_browsers_path(search_params), data: { turbo_frame: "devices" } %>
+            <%= component.link_to "OS", devices_operating_systems_path(search_params), data: { turbo_frame: "devices" } %>
+            <%= component.link_to "Size", devices_device_types_path(search_params), data: { turbo_frame: "devices" } %>
           </div>
         </div>
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :devices, src: devices_browsers_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :devices, src: devices_browsers_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+
+        <% end %>
       <% end %>
       <% component.with_details_cta do %>
         <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#devices" class="link no-underline ">Details</button>
@@ -105,29 +134,32 @@
     <%= render AhoyCaptain::TileComponent.new(title: "Goals and Funnels", wide: true, classes: "p-4 m-2") do |component| %>
       <% component.with_display_links do %>
         <div>
-          <div  data-controller="active-links">
-
-            <a href="<%= goals_path(search_params) %>" data-turbo-frame="goals" class="link ">
-              Goals
-            </a>
-            <a href="<%= properties_path(search_params) %>" data-turbo-frame="goals" class="link ">
-              Properties
-            </a>
-            <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Funnels") do |dropdown| %>
-              <% AhoyCaptain.config.funnels.each do |id, funnel| %>
-                <% dropdown.with_option do %>
-                  <a href="<%= funnel_path(id, search_params) %>" data-turbo-frame="goals" class="link ">
-                    <%= funnel.title %>
-                  </a>
+          <div >
+            <div class="flex text-xs font-medium text-gray-400 space-x-2">
+              <div class="relative inline-block text-left">
+                <a href="<%= goals_path(search_params) %>" data-turbo-frame="goals" class="inline-block h-5 font-semibold" data-controller="frame-link" data-action="click->tile#setTitle">Goals</a>
+                <a href="<%= properties_path(search_params) %>" data-turbo-frame="goals" class="inline-block h-5 font-semibold" data-controller="frame-link" data-action="click->tile#setTitle">Properties</a>
+                <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Funnels") do |dropdown| %>
+                  <% AhoyCaptain.config.funnels.each do |id, funnel| %>
+                    <% dropdown.with_option do %>
+                      <a href="<%= funnel_path(id, search_params) %>" data-turbo-frame="goals" class="link " data-action="click->tile#setTitle" title="<%= funnel.title %> Funnel">
+                        <%= funnel.title %>
+                      </a>
+                    <% end %>
+                  <% end %>
                 <% end %>
-              <% end %>
-            <% end %>
+              </div>
+            </div>
+
           </div>
         </div>
       <% end %>
       <% component.with_statistic_display do %>
         <div class="p-4">
-          <%= turbo_frame_tag :goals, src: goals_path(search_params), loading: :lazy %>
+          <%= turbo_frame_tag :goals, src: goals_path(search_params), loading: :lazy do %>
+            <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+          <% end %>
+
         </div>
       <% end %>
     <% end %>