completion-kit 0.28.2 → 0.28.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d0c33e552c40afdb63f16e277e560089aba5d5805160579b40aeb37d83150ad7
-  data.tar.gz: 1e1582e056c438a931b2444bf2dd1e0f6816c58de5d15140ffb345ed3f316109
+  metadata.gz: cf603335970a8ec820f2d5a40adbc2fc4d0606e59123e9ef7c2241c52e35f607
+  data.tar.gz: 6cb5a2156aaf7108fb9fd4ceac400199c0f93774b38c5e8b8be7e746dabb9c36
 SHA512:
-  metadata.gz: 46eea8e7ec849b1ecf4580378951e2a2508895cfb2be0bd18109530258da74f0d4a2ff8488c4f2ee8f5b2768a4abe302a4f5817bc2950de5f71a439c987b8b74
-  data.tar.gz: 2a632272fef9d7d1f1acf10c12ecd62ff174b0e0389736d91d3be6a639830337edcc3008b959b8657dcb61392cf41d6a5d5f5fa3b6f7a27b68cbbeb40e933c29
+  metadata.gz: c1977cdf2958e1facd7886830386cec116ab5a498337101f87d2d7f93842384e1370790b59d1eead00bff3f804a4990e3cfc36b8a8f20400e7e817632627b5e1
+  data.tar.gz: 38e6624b6190e40d4537f07971b2eed96754f95545872709e0788c31a784ad1430977833b0266cac2300ff551471d0dee9d422df547e727f0298afa549979a10

data/app/assets/stylesheets/completion_kit/application.css

@@ -3200,7 +3200,58 @@ select.ck-input {
 .ck-delta--negative { color: var(--ck-danger); background: var(--ck-danger-soft); }
 .ck-delta--zero { color: var(--ck-dim); }
 
-.ck-run-compare-table td { vertical-align: middle; }
+.ck-run-compare-table td { vertical-align: top; }
+
+.ck-table-scroll { overflow-x: auto; }
+
+.ck-run-compare-table th { white-space: nowrap; }
+.ck-run-compare-table th:nth-child(1) { width: 7rem; }
+.ck-run-compare-table th:nth-child(2) { width: auto; }
+.ck-run-compare-table th:nth-child(3) { width: 6rem; }
+.ck-run-compare-table th:nth-child(4) { width: 6rem; }
+.ck-run-compare-table th:nth-child(5) { width: 5rem; }
+.ck-run-compare-table th:nth-child(6) { width: 7rem; }
+.ck-run-compare-table th:nth-child(7) { width: 7rem; }
+
+.ck-run-compare-table th.ck-num,
+.ck-run-compare-table td.ck-num { text-align: right; }
+.ck-run-compare-table td.ck-num { font-variant-numeric: tabular-nums; }
+
+.ck-run-compare-table .ck-compare-metric {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ck-compare-case { white-space: nowrap; }
+.ck-compare-case__num {
+  display: block;
+  font-family: var(--ck-mono);
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ck-text);
+}
+.ck-compare-case__runs {
+  display: flex;
+  gap: 0.6rem;
+  margin-top: 0.25rem;
+}
+.ck-compare-case__run {
+  font-family: var(--ck-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+}
+.ck-compare-case__run--absent {
+  color: var(--ck-dim);
+  cursor: default;
+}
+
+.ck-run-compare-table tbody tr:hover { background: transparent; }
+.ck-run-compare-table tbody tr { border-bottom: none; }
+.ck-run-compare-table tbody:not(:first-of-type) > tr:first-child > td {
+  border-top: 1px solid var(--ck-line);
+}
+.ck-run-compare-table tbody:hover > tr > td { background: var(--ck-surface-hover); }
 
 @media (max-width: 900px) {
   .ck-grid--sidebar,
@@ -3991,10 +4042,11 @@ a.ck-metric-group-pill {
 
 .ck-responses-table th:nth-child(1), .ck-responses-table td:nth-child(1) { width: 3.5rem; white-space: nowrap; }
 .ck-responses-table th:nth-child(2), .ck-responses-table td:nth-child(2) { width: auto; }
-.ck-responses-table th:nth-child(3), .ck-responses-table td:nth-child(3) { width: 14rem; white-space: nowrap; }
+.ck-responses-table th:nth-child(3), .ck-responses-table td:nth-child(3) { width: 8rem; white-space: nowrap; }
 .ck-responses-table th:nth-child(4), .ck-responses-table td:nth-child(4) { width: 5.5rem; white-space: nowrap; }
-.ck-responses-table th:nth-child(5), .ck-responses-table td:nth-child(5) { width: 8rem; white-space: nowrap; }
+.ck-responses-table th:nth-child(5), .ck-responses-table td:nth-child(5) { width: 7rem; white-space: nowrap; }
 .ck-responses-table th:nth-child(6), .ck-responses-table td:nth-child(6) { width: 3rem; }
+.ck-responses-table .ck-metric-bar--compact { flex-wrap: wrap; row-gap: 3px; }
 
 
 table.ck-runs-table {

data/app/views/completion_kit/runs/compare.html.erb

@@ -7,7 +7,7 @@
 <section class="ck-page-header">
   <div>
     <h1 class="ck-title">Comparing runs</h1>
-    <p class="ck-meta-copy"><strong>A</strong>: <%= link_to @run.name, run_path(@run), class: "ck-link" %> &middot; <strong>B</strong>: <%= link_to @other_run.name, run_path(@other_run), class: "ck-link" %></p>
+    <p class="ck-meta-copy"><strong>A</strong>: <%= link_to @run.name, run_path(@run), class: "ck-link" %> &middot; <strong>B</strong>: <%= link_to @other_run.name, run_path(@other_run), class: "ck-link" %> &middot; <strong>Δ</strong> = B &minus; A</p>
   </div>
   <div class="ck-actions">
     <%= link_to "Pick another", compare_run_path(@run), class: ck_button_classes(:light, variant: :outline) %>
@@ -19,6 +19,7 @@
     <p>No responses to compare yet.</p>
   </div>
 <% else %>
+  <div class="ck-table-scroll">
   <table class="ck-results-table ck-run-compare-table">
     <thead>
       <tr>
@@ -26,26 +27,35 @@
         <th scope="col">Metric</th>
         <th scope="col">A score</th>
         <th scope="col">B score</th>
-        <th scope="col">Δ</th>
+        <th scope="col" class="ck-num">Δ</th>
         <th scope="col">A version</th>
         <th scope="col">B version</th>
       </tr>
     </thead>
-    <tbody>
       <% @comparison[:rows].each do |row| %>
         <% case_label = ((row[:left_response].row_index || 0) + 1).to_s %>
+        <tbody class="ck-compare-group">
         <% row[:per_metric].each_with_index do |pm, idx| %>
           <tr>
             <% if idx == 0 %>
-              <td rowspan="<%= row[:per_metric].size %>">
-                <%= link_to case_label, run_response_path(@run, row[:left_response]), class: "ck-link" %>
-                <% if row[:right_response] %>
-                  <span class="ck-meta-copy">/ <%= link_to "B", run_response_path(@other_run, row[:right_response]), class: "ck-link" %></span>
-                <% end %>
+              <td rowspan="<%= row[:per_metric].size %>" class="ck-compare-case">
+                <span class="ck-compare-case__num">Case <%= case_label %></span>
+                <span class="ck-compare-case__runs">
+                  <%= link_to "A ↗", run_response_path(@run, row[:left_response]),
+                        class: "ck-link ck-compare-case__run",
+                        title: "Open this case in run A (#{@run.name})" %>
+                  <% if row[:right_response] %>
+                    <%= link_to "B ↗", run_response_path(@other_run, row[:right_response]),
+                          class: "ck-link ck-compare-case__run",
+                          title: "Open this case in run B (#{@other_run.name})" %>
+                  <% else %>
+                    <span class="ck-compare-case__run ck-compare-case__run--absent" title="No matching response in run B">B</span>
+                  <% end %>
+                </span>
               </td>
             <% end %>
-            <td><%= pm[:metric_name] %></td>
-            <td>
+            <td class="ck-compare-metric" data-label="Metric" title="<%= pm[:metric_name] %>"><%= pm[:metric_name] %></td>
+            <td data-label="A score">
               <% if pm[:kind] == "check" %>
                 <% if pm[:left_passed].nil? %>
                   <span class="ck-meta-copy">—</span>
@@ -58,7 +68,7 @@
                 <span class="ck-meta-copy">—</span>
               <% end %>
             </td>
-            <td>
+            <td data-label="B score">
               <% if pm[:kind] == "check" %>
                 <% if pm[:right_passed].nil? %>
                   <span class="ck-meta-copy">—</span>
@@ -71,7 +81,7 @@
                 <span class="ck-meta-copy">—</span>
               <% end %>
             </td>
-            <td>
+            <td class="ck-num" data-label="Δ">
               <% if pm[:kind] == "check" %>
                 <%= ck_result_change_badge(pm[:result_change]) || content_tag(:span, "—", class: "ck-meta-copy") %>
               <% elsif pm[:delta] %>
@@ -81,19 +91,12 @@
                 <span class="ck-meta-copy">—</span>
               <% end %>
             </td>
-            <td>
-              <% if pm[:left_version_label] %>
-                <span class="ck-source-chip ck-source-chip--current"><%= pm[:left_version_label] %></span>
-              <% end %>
-            </td>
-            <td>
-              <% if pm[:right_version_label] %>
-                <span class="ck-source-chip ck-source-chip--current"><%= pm[:right_version_label] %></span>
-              <% end %>
-            </td>
+            <td data-label="A version"><% if pm[:left_version_label] %><span class="ck-source-chip ck-source-chip--current"><%= pm[:left_version_label] %></span><% end %></td>
+            <td data-label="B version"><% if pm[:right_version_label] %><span class="ck-source-chip ck-source-chip--current"><%= pm[:right_version_label] %></span><% end %></td>
           </tr>
         <% end %>
+        </tbody>
       <% end %>
-    </tbody>
   </table>
+  </div>
 <% end %>

data/lib/completion_kit/version.rb

@@ -1,3 +1,3 @@
 module CompletionKit
-  VERSION = "0.28.2"
+  VERSION = "0.28.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: completion-kit
 version: !ruby/object:Gem::Version
-  version: 0.28.2
+  version: 0.28.3
 platform: ruby
 authors:
 - Damien Bastin