Merge remote-tracking branch 'og/main' into fix-non-norm-dist-comp

src/components/ChartContextMenu.svelte

@@ -5,6 +5,7 @@
   import ZoomIn from './icons/ZoomIn.svelte';
   import Graphs from './icons/Graphs.svelte';
   import BarGraph from './icons/BarGraph.svelte';
+  import { SUPPORTED_METRICS as GLEAN_METRICS } from '../config/glean';
 
   export let data;
   export let x;
@@ -93,8 +94,10 @@
 
   const canCompareDistributions = function () {
     return (
-      $store.product === 'firefox' &&
-      ['histogram', 'scalar'].includes($store.probe.type) &&
+      ['firefox', 'fog'].includes($store.product) &&
+      ['histogram', 'scalar']
+        .concat(GLEAN_METRICS)
+        .includes($store.probe.type) &&
       !!document.getElementById(distViewButtonId)
     );
   };

src/components/explore/DistributionChart.svelte

@@ -41,7 +41,8 @@
     opacity: 0;
   }
   .hovd:hover {
-    opacity: 0.3;
+    opacity: 1;
+    fill: var(--cool-gray-100);
     z-index: 999;
   }
 </style>

src/components/explore/DistributionComparisonGraph.svelte

@@ -21,6 +21,13 @@
 
   let bins = density.map((d) => d.bin);
 
+  const getXTicks = (data) => {
+    // for probes with too many data points, we only want to get
+    // a limited amount of ticks to avoid crowding the x axis
+    if (data.length < 20) return data;
+    return data.filter((value, index) => (index + 1) % 10 === 0);
+  };
+
   let allTicks = Array.from(
     Array(Math.ceil(topTick * 100) + tickIncrement).keys()
   )
@@ -63,7 +70,7 @@
       <slot name="glam-body" {top} {bottom} {left} {right} {yScale} {xScale} />
       <Axis
         side="bottom"
-        ticks={density.map((d) => d.bin)}
+        ticks={getXTicks(bins)}
         tickFormatter={xTickFormatter}
       />
       <Axis side="left" {ticks} tickFormatter={yTickFormatter} />

src/components/explore/ProbeExplorer.svelte

@@ -339,7 +339,6 @@
   {/key}
 {/key}
 
-
 <div class="graphic-and-summary" class:no-line-chart={justOne}>
   <div>
     {#if justOne}