From 881d641cc3b3243eb4057640f0bebc49834bb35b Mon Sep 17 00:00:00 2001
From: Eduardo Filho <edugomfilho@gmail.com>
Date: Mon, 7 Oct 2024 11:45:11 -0400
Subject: [PATCH] feature: Build Ids on Distribution Comparison View

---
 .../DistributionComparisonModal.svelte        | 33 ++++++++++---------
 .../explore/BuildIdFormattedToDate.svelte     | 23 +++++++++++++
 src/components/explore/ToplineRow.svelte      | 23 ++-----------
 3 files changed, 43 insertions(+), 36 deletions(-)
 create mode 100644 src/components/explore/BuildIdFormattedToDate.svelte

diff --git a/src/components/DistributionComparisonModal.svelte b/src/components/DistributionComparisonModal.svelte
index 244a6129d..26770af71 100644
--- a/src/components/DistributionComparisonModal.svelte
+++ b/src/components/DistributionComparisonModal.svelte
@@ -6,6 +6,8 @@
   import { store } from '../state/store';
   import routes from '../config/routes';
   import { convertValueToPercentage } from '../utils/probe-utils';
+  import { formatToBuildID } from '../utils/formatters';
+  import BuildIdFormattedToDate from './explore/BuildIdFormattedToDate.svelte';
 
   export let densityMetricType;
   export let topChartData;
@@ -119,8 +121,7 @@
   <Modal>
     <div slot="trigger" let:open>
       <button on:click={open} id={distViewButtonId} hidden
-        >Distribution comparison</button
-      >
+        >Distribution comparison</button>
     </div>
     <div slot="title">Distribution comparison - {$store.probe.name}</div>
     <div class="outer-flex">
@@ -130,12 +131,14 @@
             <SliderSwitch
               bind:checked={cumulative}
               label="Cumulative mode: "
-              design="slider"
-            />
+              design="slider" />
           {/if}
         </div>
         <div class="chart-fixed">
-          <p>Reference</p>
+          <p>
+            Reference - <BuildIdFormattedToDate
+              buildIdHour={topChartData.build_id} />
+          </p>
           {#key cumulative}
             {#key innerHeight}
               {#key innerWidth}
@@ -145,8 +148,7 @@
                   density={topChartDensity}
                   {topTick}
                   {tickIncrement}
-                  {activeCategoricalProbeLabels}
-                >
+                  {activeCategoricalProbeLabels}>
                   <g slot="glam-body">
                     {#if bottomChartData}
                       <DistributionChart
@@ -157,8 +159,7 @@
                         {tickIncrement}
                         sampleCount={topChartSampleCount}
                         tooltipLocation="bottom"
-                        {activeCategoricalProbeLabels}
-                      />
+                        {activeCategoricalProbeLabels} />
                     {/if}
                   </g>
                 </DistributionComparisonGraph>
@@ -167,7 +168,10 @@
           {/key}
         </div>
         <div class="chart-fixed">
-          <p>Hovered</p>
+          <p>
+            Hovered - <BuildIdFormattedToDate
+              buildIdHour={bottomChartData.build_id} />
+          </p>
           {#key cumulative}
             {#key innerHeight}
               {#key innerWidth}
@@ -177,8 +181,7 @@
                   density={bottomChartDensity}
                   {topTick}
                   {tickIncrement}
-                  {activeCategoricalProbeLabels}
-                >
+                  {activeCategoricalProbeLabels}>
                   <g slot="glam-body">
                     {#if bottomChartData}
                       <DistributionChart
@@ -188,8 +191,7 @@
                         {topTick}
                         sampleCount={bottomChartSampleCount}
                         tooltipLocation="top"
-                        {activeCategoricalProbeLabels}
-                      />
+                        {activeCategoricalProbeLabels} />
                     {/if}
                   </g>
                 </DistributionComparisonGraph>
@@ -204,8 +206,7 @@
             <h3 style="align-self: center;">{$store.probe.name}</h3>
             <svelte:component
               this={routes[$store.product].details}
-              showLinks={false}
-            />
+              showLinks={false} />
           </div>
         </div>
         <div><hr /></div>
diff --git a/src/components/explore/BuildIdFormattedToDate.svelte b/src/components/explore/BuildIdFormattedToDate.svelte
new file mode 100644
index 000000000..3336a716d
--- /dev/null
+++ b/src/components/explore/BuildIdFormattedToDate.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let buildIdHour;
+</script>
+
+<style>
+  .big-label__value__date {
+    font-weight: bold;
+    color: var(--cool-gray-700);
+  }
+
+  .big-label__value__time {
+    color: var(--cool-gray-600);
+  }
+</style>
+
+<span class="big-label__value__date">
+  {buildIdHour.slice(0, 4)}-{buildIdHour.slice(4, 6)}-{buildIdHour.slice(
+    6,
+    8
+  )}</span>
+<span class="big-label__value__time">{buildIdHour.slice(8, 10)}:</span><span
+  class="big-label__value__time">{buildIdHour.slice(10, 12)}:</span
+><span class="big-label__value__time">{buildIdHour.slice(12, 14)}</span>
diff --git a/src/components/explore/ToplineRow.svelte b/src/components/explore/ToplineRow.svelte
index 20571fa7a..e623d968e 100644
--- a/src/components/explore/ToplineRow.svelte
+++ b/src/components/explore/ToplineRow.svelte
@@ -3,6 +3,7 @@
   import { Help } from '@graph-paper/icons';
   import { tooltip as tooltipAction } from '@graph-paper/core/actions';
   import { formatToBuildID } from '../../utils/formatters';
+  import BuildIdFormattedToDate from './BuildIdFormattedToDate.svelte';
 
   export let value;
   export let compare;
@@ -66,15 +67,6 @@
     width: var(--space-32x);
   }
 
-  .big-label__value__date {
-    font-weight: bold;
-    color: var(--cool-gray-700);
-  }
-
-  .big-label__value__time {
-    color: var(--cool-gray-600);
-  }
-
   .big-label__value__compare {
     color: var(--cool-gray-600);
   }
@@ -92,22 +84,13 @@
 <div class="big-label__label">
   <slot name="label" /><span
     use:tooltipAction={{ text: description, location: 'top' }}
-    class="data-graphic__element-title__icon"><Help size={14} /></span
-  >
+    class="data-graphic__element-title__icon"><Help size={14} /></span>
 </div>
 <div class="big-label__value">
   {#if value}
     <div>
       {#if aggregationLevel === 'build_id'}
-        <span class="big-label__value__date">
-          {parsedLabel.slice(0, 4)}-{parsedLabel.slice(
-            4,
-            6
-          )}-{parsedLabel.slice(6, 8)}</span
-        >
-        <span class="big-label__value__time">{parsedLabel.slice(8, 10)}:</span
-        ><span class="big-label__value__time">{parsedLabel.slice(10, 12)}:</span
-        ><span class="big-label__value__time">{parsedLabel.slice(12, 14)}</span>
+        <BuildIdFormattedToDate buildIdHour={parsedLabel} />
       {:else}{value}{/if}
     </div>
   {/if}