From 1270a7c8239e4edfb99402cd6443a99f912ac6e5 Mon Sep 17 00:00:00 2001
From: Cody Rogers <croge32@gmail.com>
Date: Thu, 4 Jun 2026 17:14:09 -0500
Subject: [PATCH 1/3] Add <g> tags to several components to aid with testing
 and DOM organization

---
 lib/plox.ex | 250 +++++++++++++++++++++++++++-------------------------
 1 file changed, 131 insertions(+), 119 deletions(-)

diff --git a/lib/plox.ex b/lib/plox.ex
index dcdf889..2afce2a 100644
--- a/lib/plox.ex
+++ b/lib/plox.ex
@@ -211,25 +211,29 @@ defmodule Plox do
 
   def line_plot(%{type: :line} = assigns) do
     ~H"""
-    <polyline
-      points={@dataset |> GraphDataset.to_graph_points(@x, @y) |> polyline_points()}
-      fill="none"
-      stroke={@color}
-      stroke-width={@width}
-      stroke-dasharray={stroke_dasharray(@line_style)}
-    />
+    <g id={"dataset-#{@dataset.id}-line"}>
+      <polyline
+        points={@dataset |> GraphDataset.to_graph_points(@x, @y) |> polyline_points()}
+        fill="none"
+        stroke={@color}
+        stroke-width={@width}
+        stroke-dasharray={stroke_dasharray(@line_style)}
+      />
+    </g>
     """
   end
 
   def line_plot(%{type: :step_line} = assigns) do
     ~H"""
-    <polyline
-      points={@dataset |> step_points(@x, @y) |> polyline_points()}
-      fill="none"
-      stroke={@color}
-      stroke-width={@width}
-      stroke-dasharray={stroke_dasharray(@line_style)}
-    />
+    <g id={"dataset-#{@dataset.id}-step_line"}>
+      <polyline
+        points={@dataset |> step_points(@x, @y) |> polyline_points()}
+        fill="none"
+        stroke={@color}
+        stroke-width={@width}
+        stroke-dasharray={stroke_dasharray(@line_style)}
+      />
+    </g>
     """
   end
 
@@ -262,27 +266,29 @@ defmodule Plox do
 
   def points_plot(assigns) do
     ~H"""
-    <circle
-      :for={point <- GraphDataset.to_graph_points(@dataset, @x, @y)}
-      phx-click={
-        if assigns[:"phx-click"],
-          do:
-            JS.push(assigns[:"phx-click"],
-              value: %{
-                id: point.data_point.id,
-                dataset_id: @dataset.id,
-                x_pixel: point.x,
-                y_pixel: point.y
-              }
-            )
-      }
-      phx-target={assigns[:"phx-target"]}
-      style={if assigns[:"phx-click"], do: "cursor: pointer;"}
-      fill={GraphDataset.to_color(@dataset, @color, point.data_point)}
-      cx={point.x}
-      cy={point.y}
-      r={@radius}
-    />
+    <g id={"dataset-#{@dataset.id}-points"}>
+      <circle
+        :for={point <- GraphDataset.to_graph_points(@dataset, @x, @y)}
+        phx-click={
+          if assigns[:"phx-click"],
+            do:
+              JS.push(assigns[:"phx-click"],
+                value: %{
+                  id: point.data_point.id,
+                  dataset_id: @dataset.id,
+                  x_pixel: point.x,
+                  y_pixel: point.y
+                }
+              )
+        }
+        phx-target={assigns[:"phx-target"]}
+        style={if assigns[:"phx-click"], do: "cursor: pointer;"}
+        fill={GraphDataset.to_color(@dataset, @color, point.data_point)}
+        cx={point.x}
+        cy={point.y}
+        r={@radius}
+      />
+    </g>
     """
   end
 
@@ -308,34 +314,36 @@ defmodule Plox do
 
   def bar_plot(assigns) do
     ~H"""
-    <%= for point <- GraphDataset.to_graph_points(@dataset, @x, @y) do %>
-      <line
-        phx-click={
-          if assigns[:"phx-click"],
-            do:
-              JS.push(assigns[:"phx-click"],
-                value: %{
-                  id: point.data_point.id,
-                  dataset_id: @dataset.id,
-                  x_pixel: point.x,
-                  y_pixel: point.y
-                }
-              )
-        }
-        phx-target={assigns[:"phx-target"]}
-        style={if assigns[:"phx-click"], do: "cursor: pointer;"}
-        x1={point.x}
-        y1={point.y}
-        x2={point.x}
-        y2={
-          @dataset.dimensions.height - @dataset.dimensions.margin.bottom -
-            @dataset.dimensions.padding.bottom
-        }
-        stroke={GraphDataset.to_color(@dataset, @color, point.data_point)}
-        stroke-width={@width}
-        stroke-linecap={bar_style(@bar_style)}
-      />
-    <% end %>
+    <g id={"dataset-#{@dataset.id}-bar"}>
+      <%= for point <- GraphDataset.to_graph_points(@dataset, @x, @y) do %>
+        <line
+          phx-click={
+            if assigns[:"phx-click"],
+              do:
+                JS.push(assigns[:"phx-click"],
+                  value: %{
+                    id: point.data_point.id,
+                    dataset_id: @dataset.id,
+                    x_pixel: point.x,
+                    y_pixel: point.y
+                  }
+                )
+          }
+          phx-target={assigns[:"phx-target"]}
+          style={if assigns[:"phx-click"], do: "cursor: pointer;"}
+          x1={point.x}
+          y1={point.y}
+          x2={point.x}
+          y2={
+            @dataset.dimensions.height - @dataset.dimensions.margin.bottom -
+              @dataset.dimensions.padding.bottom
+          }
+          stroke={GraphDataset.to_color(@dataset, @color, point.data_point)}
+          stroke-width={@width}
+          stroke-linecap={bar_style(@bar_style)}
+        />
+      <% end %>
+    </g>
     """
   end
 
@@ -434,67 +442,71 @@ defmodule Plox do
 
   def area_plot(%{orientation: :horizontal} = assigns) do
     ~H"""
-    <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
-      <rect
-        :if={!is_nil(rect_color)}
-        fill={rect_color}
-        height={
-          @dataset.dimensions.height - @dataset.dimensions.margin.top -
-            @dataset.dimensions.margin.bottom
-        }
-        width={scalar2.value - scalar1.value}
-        x={scalar1.value}
-        y={@dataset.dimensions.margin.top}
-        phx-click={
-          if assigns[:"phx-click"],
-            do:
-              JS.push(assigns[:"phx-click"],
-                value: %{
-                  start_area_point_id: scalar1.data_point.id,
-                  end_area_point_id: scalar2.data_point.id,
-                  dataset_id: @dataset.id,
-                  x_pixel: scalar1.value + (scalar2.value - scalar1.value) / 2,
-                  y_pixel: @dataset.dimensions.margin.top + @dataset.dimensions.height / 2
-                }
-              )
-        }
-        style={if assigns[:"phx-click"], do: "cursor: pointer;"}
-        phx-target={assigns[:"phx-target"]}
-      />
-    <% end %>
+    <g id={"dataset-#{@dataset.id}-area"}>
+      <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
+        <rect
+          :if={!is_nil(rect_color)}
+          fill={rect_color}
+          height={
+            @dataset.dimensions.height - @dataset.dimensions.margin.top -
+              @dataset.dimensions.margin.bottom
+          }
+          width={scalar2.value - scalar1.value}
+          x={scalar1.value}
+          y={@dataset.dimensions.margin.top}
+          phx-click={
+            if assigns[:"phx-click"],
+              do:
+                JS.push(assigns[:"phx-click"],
+                  value: %{
+                    start_area_point_id: scalar1.data_point.id,
+                    end_area_point_id: scalar2.data_point.id,
+                    dataset_id: @dataset.id,
+                    x_pixel: scalar1.value + (scalar2.value - scalar1.value) / 2,
+                    y_pixel: @dataset.dimensions.margin.top + @dataset.dimensions.height / 2
+                  }
+                )
+          }
+          style={if assigns[:"phx-click"], do: "cursor: pointer;"}
+          phx-target={assigns[:"phx-target"]}
+        />
+      <% end %>
+    </g>
     """
   end
 
   def area_plot(%{orientation: :vertical} = assigns) do
     ~H"""
-    <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
-      <rect
-        :if={!is_nil(rect_color)}
-        fill={rect_color}
-        height={scalar1.value - scalar2.value}
-        width={
-          @dataset.dimensions.width - @dataset.dimensions.margin.left -
-            @dataset.dimensions.margin.right
-        }
-        x={@dataset.dimensions.margin.left}
-        y={scalar1.value - (scalar1.value - scalar2.value)}
-        phx-click={
-          if assigns[:"phx-click"],
-            do:
-              JS.push(assigns[:"phx-click"],
-                value: %{
-                  start_area_point_id: scalar1.data_point.id,
-                  end_area_point_id: scalar2.data_point.id,
-                  dataset_id: @dataset.id,
-                  x_pixel: @dataset.dimensions.margin.left + @dataset.dimensions.width / 2,
-                  y_pixel: scalar2.value + (scalar1.value - scalar2.value) / 2
-                }
-              )
-        }
-        style={if assigns[:"phx-click"], do: "cursor: pointer;"}
-        phx-target={assigns[:"phx-target"]}
-      />
-    <% end %>
+    <g id={"dataset-#{@dataset.id}-area"}>
+      <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
+        <rect
+          :if={!is_nil(rect_color)}
+          fill={rect_color}
+          height={scalar1.value - scalar2.value}
+          width={
+            @dataset.dimensions.width - @dataset.dimensions.margin.left -
+              @dataset.dimensions.margin.right
+          }
+          x={@dataset.dimensions.margin.left}
+          y={scalar1.value - (scalar1.value - scalar2.value)}
+          phx-click={
+            if assigns[:"phx-click"],
+              do:
+                JS.push(assigns[:"phx-click"],
+                  value: %{
+                    start_area_point_id: scalar1.data_point.id,
+                    end_area_point_id: scalar2.data_point.id,
+                    dataset_id: @dataset.id,
+                    x_pixel: @dataset.dimensions.margin.left + @dataset.dimensions.width / 2,
+                    y_pixel: scalar2.value + (scalar1.value - scalar2.value) / 2
+                  }
+                )
+          }
+          style={if assigns[:"phx-click"], do: "cursor: pointer;"}
+          phx-target={assigns[:"phx-target"]}
+        />
+      <% end %>
+    </g>
     """
   end
 

From 81c971937dc30e5bbd5ea3a0419384987a28c86b Mon Sep 17 00:00:00 2001
From: Cody Rogers <croge32@gmail.com>
Date: Thu, 4 Jun 2026 18:18:51 -0500
Subject: [PATCH 2/3] Make 'id' into an attribute, default to 'nil'

---
 lib/plox.ex | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/lib/plox.ex b/lib/plox.ex
index 2afce2a..ba2ba8c 100644
--- a/lib/plox.ex
+++ b/lib/plox.ex
@@ -199,6 +199,7 @@ defmodule Plox do
   """
   @doc type: :component
 
+  attr :id, :string, default: nil
   attr :dataset, :any, required: true
 
   attr :x, :atom, default: :x, doc: "The dataset axis key to use for x values"
@@ -211,7 +212,7 @@ defmodule Plox do
 
   def line_plot(%{type: :line} = assigns) do
     ~H"""
-    <g id={"dataset-#{@dataset.id}-line"}>
+    <g id={@id}>
       <polyline
         points={@dataset |> GraphDataset.to_graph_points(@x, @y) |> polyline_points()}
         fill="none"
@@ -225,7 +226,7 @@ defmodule Plox do
 
   def line_plot(%{type: :step_line} = assigns) do
     ~H"""
-    <g id={"dataset-#{@dataset.id}-step_line"}>
+    <g id={@id}>
       <polyline
         points={@dataset |> step_points(@x, @y) |> polyline_points()}
         fill="none"
@@ -254,6 +255,7 @@ defmodule Plox do
   """
   @doc type: :component
 
+  attr :id, :string, default: nil
   attr :dataset, :any, required: true
 
   attr :x, :atom, default: :x, doc: "The dataset axis key to use for x values"
@@ -266,7 +268,7 @@ defmodule Plox do
 
   def points_plot(assigns) do
     ~H"""
-    <g id={"dataset-#{@dataset.id}-points"}>
+    <g id={@id}>
       <circle
         :for={point <- GraphDataset.to_graph_points(@dataset, @x, @y)}
         phx-click={
@@ -297,6 +299,7 @@ defmodule Plox do
   """
   @doc type: :component
 
+  attr :id, :string, default: nil
   attr :dataset, :any, required: true
 
   attr :x, :atom, default: :x, doc: "The dataset axis key to use for x values"
@@ -314,7 +317,7 @@ defmodule Plox do
 
   def bar_plot(assigns) do
     ~H"""
-    <g id={"dataset-#{@dataset.id}-bar"}>
+    <g id={@id}>
       <%= for point <- GraphDataset.to_graph_points(@dataset, @x, @y) do %>
         <line
           phx-click={
@@ -430,6 +433,7 @@ defmodule Plox do
   """
   @doc type: :component
 
+  attr :id, :string, default: nil
   attr :dataset, :any, required: true
 
   attr :area, :atom, required: true, doc: "The dataset axis key to use for the area plots"
@@ -442,7 +446,7 @@ defmodule Plox do
 
   def area_plot(%{orientation: :horizontal} = assigns) do
     ~H"""
-    <g id={"dataset-#{@dataset.id}-area"}>
+    <g id={@id}>
       <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
         <rect
           :if={!is_nil(rect_color)}
@@ -477,7 +481,7 @@ defmodule Plox do
 
   def area_plot(%{orientation: :vertical} = assigns) do
     ~H"""
-    <g id={"dataset-#{@dataset.id}-area"}>
+    <g id={@id}>
       <%= for [scalar1, scalar2] <- area_points(@dataset, @area, @orientation), rect_color = GraphDataset.to_color(@dataset, @color, scalar1.data_point) do %>
         <rect
           :if={!is_nil(rect_color)}

From 0b048d156845dc1a875b1919a79df55cfc66d9ec Mon Sep 17 00:00:00 2001
From: Cody Rogers <croge32@gmail.com>
Date: Fri, 5 Jun 2026 11:02:59 -0500
Subject: [PATCH 3/3] bump version to 0.3.3

---
 mix.exs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mix.exs b/mix.exs
index 189c97a..af471cc 100644
--- a/mix.exs
+++ b/mix.exs
@@ -1,7 +1,7 @@
 defmodule Plox.MixProject do
   use Mix.Project
 
-  @version "0.3.2"
+  @version "0.3.3"
   @source_url "https://github.com/gridpoint-com/plox"
 
   def project do