Metrics per Job Bubble Chart

Gemfile

@@ -3,7 +3,7 @@
 source "https://rubygems.org"
 
 gem "glimmer-dsl-libui", "= 0.11.8"
-gem "glimmer-libui-cc-graphs_and_charts", "= 0.2.3"
+gem "glimmer-libui-cc-graphs_and_charts", "= 0.3.0"
 gem "sidekiq"
 
 group :test do

Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    array_include_methods (1.4.0)
+    array_include_methods (1.5.1)
     ast (2.4.2)
     awesome_print (1.9.2)
     chunky_png (1.4.0)
@@ -10,8 +10,8 @@ GEM
     connection_pool (2.4.1)
     equalizer (0.0.11)
     facets (3.1.0)
-    glimmer (2.7.4)
-      array_include_methods (~> 1.4.0)
+    glimmer (2.7.7)
+      array_include_methods (>= 1.4.0, < 1.6.0)
       facets (>= 3.1.0, < 4.0.0)
     glimmer-dsl-libui (0.11.8)
       chunky_png (~> 1.4.0)
@@ -27,7 +27,7 @@ GEM
       rouge (>= 3.26.0, < 4.0.0)
       super_module (~> 1.4.1)
       text-table (>= 1.2.4, < 2.0.0)
-    glimmer-libui-cc-graphs_and_charts (0.2.3)
+    glimmer-libui-cc-graphs_and_charts (0.3.0)
       glimmer-dsl-libui (>= 0.11.8, < 2.0.0)
     json (2.7.1)
     language_server-protocol (3.17.0.3)
@@ -119,7 +119,7 @@ PLATFORMS
 
 DEPENDENCIES
   glimmer-dsl-libui (= 0.11.8)
-  glimmer-libui-cc-graphs_and_charts (= 0.2.3)
+  glimmer-libui-cc-graphs_and_charts (= 0.3.0)
   minitest
   rake
   sidekiq

lib/kuiq/model/job_manager.rb

@@ -93,14 +93,18 @@ def metrics_for_job(job_worker_name)
           query = Sidekiq::Metrics::Query.new
           # TODO support different values for :minutes option through a combobox dropdown
           query_result = query.for_job(job_worker_name, minutes: 60)
+          query_result.marks.map { |m| [m.bucket, m.label] }
           job_results = query_result.job_results[job_worker_name]
+          ends_at = query_result.ends_at
           hist_totals = job_results.hist.values.first.zip(*job_results.hist.values[1..]).map(&:sum).reverse
           bucket_labels = Sidekiq::Metrics::Histogram::LABELS
           bucket_intervals = Sidekiq::Metrics::Histogram::BUCKET_INTERVALS
           @metrics_for_job[job_worker_name] = {
             hist_totals: hist_totals,
             bucket_labels: bucket_labels,
             bucket_intervals: bucket_intervals,
+            job_results: job_results,
+            ends_at: ends_at,
           }
         end
         @metrics_for_job[job_worker_name]

lib/kuiq/model/metrics_graph_presenter.rb

@@ -37,6 +37,32 @@ def report_metrics_for_selected_job
         the_metrics = job_manager.metrics_for_selected_job
         the_metrics[:bucket_labels].zip(the_metrics[:hist_totals]).to_h
       end
+
+      def report_metrics_3d_for_selected_job
+        the_metrics = job_manager.metrics_for_selected_job
+        start_x = the_metrics[:ends_at]
+        n = -60
+        y_values = the_metrics[:bucket_intervals][1, 10]
+        metrics_3d = the_metrics[:job_results].hist.map do |x_value_string, z_values_raw|
+          x_value = start_x + (n += 60)
+          z_values = z_values_raw[-11..-2].reverse
+          [x_value, (y_values.zip(z_values).to_h)]
+        end.to_h
+        all_z_values = metrics_3d.values.map(&:values).flatten
+        max_z_value = all_z_values.max
+        min_z_value = all_z_values.reject { |z_value| z_value == 0 }.min || 0.0
+        z_value_range = max_z_value - min_z_value
+        max_bubble_radius = graph_width / 160.0
+        z_normalizer_multiplier = max_bubble_radius / z_value_range.to_f
+        normalized_metrics_3d = metrics_3d.map do |x_value, y_z_values|
+          normalized_y_z_values = y_z_values.map do |y_value, z_value|
+            normalized_z_value = (z_value * z_normalizer_multiplier.to_f) + 1.5
+            [y_value, normalized_z_value]
+          end.to_h
+          [x_value, normalized_y_z_values]
+        end.to_h
+        normalized_metrics_3d
+      end
     end
   end
 end

lib/kuiq/view/metrics.rb

@@ -1,5 +1,6 @@
 require "glimmer/view/line_graph"
 require "glimmer/view/bar_chart"
+require "glimmer/view/bubble_chart"
 
 require "kuiq/model/metrics_graph_presenter"
 
@@ -20,8 +21,13 @@ class Metrics
       after_body do
         body_root.window_proxy.content {
           on_content_size_changed do
-            @metrics_for_job_bar_chart.width = @metrics_line_graph.width = @presenter.graph_width = graph_width
-            @metrics_for_job_bar_chart.height = @metrics_line_graph.height = @presenter.graph_height = graph_height
+            new_width = @metrics_line_graph.width = @presenter.graph_width = graph_width
+            new_height = @metrics_line_graph.height = @presenter.graph_height = graph_height
+            @metrics_for_job_bar_chart.width = new_width
+            @metrics_for_job_bar_chart.height = new_height
+            @metrics_for_job_bubble_chart.width = new_width
+            @metrics_for_job_bubble_chart.height = new_height
+            @metrics_for_job_bubble_chart.values = @metrics_for_job_bubble_chart.values = @presenter.report_metrics_3d_for_selected_job
           end
         }
 
@@ -33,6 +39,7 @@ class Metrics
 
         observe(job_manager, :selected_job_for_metrics) do
           @metrics_for_job_bar_chart.values = @presenter.report_metrics_for_selected_job
+          @metrics_for_job_bubble_chart.values = @presenter.report_metrics_3d_for_selected_job
         end
       end
 
@@ -96,11 +103,16 @@ class Metrics
                     height: @presenter.graph_height,
                     x_axis_label: "Execution Time",
                     y_axis_label: "Jobs",
+                    chart_color_bar: [92, 122, 190],
                     values: @presenter.report_metrics_for_selected_job,
                   )
 
-                  # filler to be replaced by bubble chart in the future
-                  area
+                  @metrics_for_job_bubble_chart = bubble_chart(
+                    width: @presenter.graph_width,
+                    height: @presenter.graph_height,
+                    chart_color_bubble: [92, 122, 190],
+                    values: @presenter.report_metrics_3d_for_selected_job,
+                  )
                 }
               }
             }