Implement minimal logic for filter application UI

assets/js/liveview/dashboard_root.js

@@ -12,7 +12,8 @@ const MODAL_ROUTES = {
   '/exit-pages': '#exit-pages-breakdown-details-modal',
   '/sources': '#sources-breakdown-details-modal',
   '/channels': '#channels-breakdown-details-modal',
-  '/utm_medium': '#utm-mediums-breakdown-details-modal'
+  '/utm_medium': '#utm-mediums-breakdown-details-modal',
+  '/filter/page': '#page-filter-modal'
 }
 
 function routeModal(uri) {

lib/plausible_web/live/dashboard.ex

@@ -79,16 +79,6 @@ defmodule PlausibleWeb.Live.Dashboard do
     {:noreply, socket}
   end
 
-  def handle_info(:refresh_realtime_stats, socket) do
-    now = System.monotonic_time(:second)
-
-    new_timer_ref =
-      Process.send_after(self(), :refresh_realtime_stats, @realtime_refresh_interval)
-
-    socket = assign(socket, last_realtime_update: now, realtime_timer_ref: new_timer_ref)
-    {:noreply, socket}
-  end
-
   def render(assigns) do
     ~H"""
     <div
@@ -97,7 +87,14 @@ defmodule PlausibleWeb.Live.Dashboard do
       class="group/dashboard container print:max-w-full pt-6 mb-16 grid grid-cols-1 md:grid-cols-2 gap-5"
     >
       <div class="col-span-full flex items-center justify-end">
-        <div :if={@connected?} class="flex shrink-0">
+        <div :if={@connected?} class="flex shrink-0 gap-x-4">
+          <.live_component
+            module={PlausibleWeb.Live.Dashboard.Filters}
+            id="filters-component"
+            site={@site}
+            connected?={@connected?}
+            params={@params}
+          />
           <.live_component
             module={PlausibleWeb.Live.Dashboard.DatePicker}
             id="datepicker-component"
@@ -207,10 +204,35 @@ defmodule PlausibleWeb.Live.Dashboard do
         params={@params}
         open?={@initial_path == ["utm_medium"]}
       />
+      <.live_component
+        module={PlausibleWeb.Live.Dashboard.PageFilterModal}
+        id="page-filter-component"
+        site={@site}
+        connected?={@connected?}
+        params={@params}
+        open?={@initial_path == ["page", "filter"]}
+        on_apply={fn params -> send(self(), {:navigate, params, ""}) end}
+      />
     </div>
     """
   end
 
+  def handle_info(:refresh_realtime_stats, socket) do
+    now = System.monotonic_time(:second)
+
+    new_timer_ref =
+      Process.send_after(self(), :refresh_realtime_stats, @realtime_refresh_interval)
+
+    socket = assign(socket, last_realtime_update: now, realtime_timer_ref: new_timer_ref)
+    {:noreply, socket}
+  end
+
+  def handle_info({:navigate, params, path}, socket) do
+    new_route = Utils.dashboard_route(socket.assigns.site, params, path: path)
+    socket = push_patch(socket, to: new_route)
+    {:noreply, socket}
+  end
+
   def handle_event("close_modal", _params, socket) do
     close_url = Utils.dashboard_route(socket.assigns.site, socket.assigns.params)
     socket = push_patch(socket, to: close_url)
@@ -235,7 +257,8 @@ defmodule PlausibleWeb.Live.Dashboard do
     ["exit-pages"] => "exit-pages-breakdown-details-modal",
     ["sources"] => "sources-breakdown-details-modal",
     ["channels"] => "channels-breakdown-details-modal",
-    ["utm_medium"] => "utm-mediums-breakdown-details-modal"
+    ["utm_medium"] => "utm-mediums-breakdown-details-modal",
+    ["filter", "page"] => "page-filter-modal"
   }
 
   defp maybe_close_modal(socket, old_path) do

lib/plausible_web/live/dashboard/filters.ex

@@ -0,0 +1,83 @@
+defmodule PlausibleWeb.Live.Dashboard.Filters do
+  @moduledoc """
+  Filters and segments component.
+  """
+
+  use PlausibleWeb, :live_component
+
+  import Plausible.Stats.Dashboard.Utils
+
+  alias PlausibleWeb.Components.Dashboard.Base
+  alias PlausibleWeb.Components.PrimaDropdown
+
+  def update(assigns, socket) do
+    socket =
+      assign(socket, site: assigns.site, params: assigns.params, connected?: assigns.connected?)
+
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <PrimaDropdown.dropdown id="datepicker-prima-dropdown">
+        <PrimaDropdown.dropdown_trigger as={&trigger_button/1}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            aria-hidden="true"
+            data-slot="icon"
+            class="block h-4 w-4"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+            >
+            </path>
+          </svg>
+          <span class="truncate block font-medium">Filter</span>
+        </PrimaDropdown.dropdown_trigger>
+
+        <PrimaDropdown.dropdown_menu class="relative z-[9999] flex flex-col gap-0.5 p-1 focus:outline-hidden rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black/5 font-medium text-gray-800 dark:text-gray-200">
+          <PrimaDropdown.dropdown_item as={&filter_option/1}>
+            <Base.dashboard_link
+              class="mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150"
+              to={dashboard_route(@site, @params, path: "/filter/page")}
+            >
+              Page
+            </Base.dashboard_link>
+          </PrimaDropdown.dropdown_item>
+        </PrimaDropdown.dropdown_menu>
+      </PrimaDropdown.dropdown>
+    </div>
+    """
+  end
+
+  attr :args, :map, required: true
+  attr :rest, :global
+  slot :inner_block, required: true
+
+  defp filter_option(assigns) do
+    ~H"""
+    {render_slot(@inner_block)}
+    """
+  end
+
+  attr :rest, :global
+  slot :inner_block, required: true
+
+  defp trigger_button(assigns) do
+    ~H"""
+    <button
+      class="flex items-center rounded text-sm leading-tight h-9 transition-all duration-150 text-gray-700 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-900 justify-center gap-1 px-3"
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </button>
+    """
+  end
+end

lib/plausible_web/live/dashboard/page_filter_modal.ex

@@ -0,0 +1,156 @@
+defmodule PlausibleWeb.Live.Dashboard.PageFilterModal do
+  @moduledoc """
+  Live component for page filter modal.
+  """
+
+  use PlausibleWeb, :live_component
+
+  import PlausibleWeb.Components.Dashboard.Base
+
+  alias Plausible.Stats.ParsedQueryParams
+
+  defmodule PageForm do
+    use Ecto.Schema
+
+    import Ecto.Changeset
+
+    embedded_schema do
+      field :operator, Ecto.Enum, values: [:is, :is_not, :contains, :does_not_contain]
+      field :path, :string
+    end
+
+    def changeset(form \\ %__MODULE__{}, params) do
+      form
+      |> cast(params, [:operator, :path])
+    end
+  end
+
+  def update(assigns, socket) do
+    page_form =
+      assigns.params
+      |> load_filter("event:page")
+      |> PageForm.changeset()
+      |> to_form()
+
+    socket =
+      assign(socket,
+        site: assigns.site,
+        params: assigns.params,
+        open?: assigns.open?,
+        connected?: assigns.connected?,
+        page_form: page_form,
+        on_apply: assigns.on_apply
+      )
+
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.modal
+        id="page-filter-modal"
+        on_close={JS.push("close_modal")}
+        show={@open?}
+        ready={@connected?}
+      >
+        <.modal_title>
+          <div class="flex items-center justify-between gap-3">
+            <h1 class="text-base md:text-lg font-bold dark:text-gray-100">Filter by Page</h1>
+            <button
+              phx-click={Prima.Modal.JS.close()}
+              type="button"
+              aria-label="Close modal"
+              class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                data-slot="icon"
+                class="size-5"
+              >
+                <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z">
+                </path>
+              </svg>
+            </button>
+          </div>
+
+          <div class="mt-2 md:mt-4 border-b border-gray-300 dark:border-gray-700"></div>
+        </.modal_title>
+
+        <.form
+          :let={f}
+          for={@page_form}
+          phx-submit="apply_filters"
+          phx-target={@myself}
+          class="flex flex-col pl-8 pr-8"
+        >
+          <div class="mt-6">
+            <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Page</div>
+            <div class="grid mt-1 grid-cols-11">
+              <div class="col-span-3">
+                <.input
+                  type="select"
+                  field={f[:operator]}
+                  options={[
+                    {"is", :is},
+                    {"is not", :is_not},
+                    {"contains", :contains},
+                    {"does not contain", :contains_not}
+                  ]}
+                />
+              </div>
+              <div class="col-span-8 ml-2">
+                <.input
+                  type="text"
+                  field={f[:path]}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-6 mb-3 flex gap-x-4 items-center justify-start">
+            <button type="submit" class="button !px-3">Apply filter</button>
+            <button
+              type="button"
+              class="flex items-center py-1 text-sm font-medium whitespace-nowrap text-indigo-600 dark:text-indigo-500 hover:text-indigo-700 dark:hover:text-indigo-600"
+            >
+              Remove filters
+            </button>
+          </div>
+        </.form>
+      </.modal>
+    </div>
+    """
+  end
+
+  def handle_event("apply_filters", params, socket) do
+    page_filter =
+      params["page_form"]
+      |> PageForm.changeset()
+      |> Ecto.Changeset.apply_changes()
+
+    new_params =
+      ParsedQueryParams.add_or_replace_filter(socket.assigns.params, [
+        page_filter.operator,
+        "event:page",
+        [page_filter.path]
+      ])
+
+    socket.assigns.on_apply.(new_params)
+
+    {:noreply, socket}
+  end
+
+  defp load_filter(params, field) do
+    [operator, _, [value]] =
+      Enum.find(params.filters, [:is, field, [""]], fn
+        [_operator, ^field, [_value]] -> true
+        _ -> false
+      end)
+
+    %{operator: operator, path: value}
+  end
+end