#2693 Improves Distribution Comparison for categorical probes (#2779)

* Multiple fixes on Dist Comp for categorical probes * Don't show unselected categories on Dist Comp chart * lint + prettier
mozilla · Apr 2, 2024 · 3c6e684 · 3c6e684
1 parent d916bca
commit 3c6e684
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 15 deletions.
diff --git a/src/components/DistributionComparisonModal.svelte b/src/components/DistributionComparisonModal.svelte
@@ -13,7 +13,15 @@
   export let distViewButtonId;
 
   let normalized = $store.productDimensions.normalizationType === 'normalized';
+  let probeType = $store.probe.type;
+  let probeKind = $store.probe.details.kind;
   let cumulative = false;
+  let activeCategoricalProbeLabels =
+    probeKind === 'categorical'
+      ? $store.probe.details.labels.filter((l) =>
+          $store.activeBuckets.includes(l)
+        )
+      : [];
 
   let valueSelector = 'value';
   // Change this value to adjust the minimum tick increment on the chart
@@ -49,9 +57,16 @@
   };
 
   const buildDensity = function (chartData) {
-    let density = normalized
-      ? chartData[densityMetricType]
-      : convertValueToPercentage(chartData[densityMetricType]);
+    let density = chartData[densityMetricType];
+    if (probeKind === 'categorical') {
+      let categoricalProbeLabels = $store.probe.details.labels;
+      density = density.filter((v, i) =>
+        $store.activeBuckets.includes(categoricalProbeLabels[i])
+      );
+    }
+    if (probeType === 'scalar' || !normalized) {
+      density = convertValueToPercentage(chartData[densityMetricType]);
+    }
     return cumulative ? makeCumulative(density) : density;
   };
 </script>
@@ -111,11 +126,13 @@
     <div class="outer-flex">
       <div class="charts">
         <div style="display: flex; padding: 1em;">
-          <SliderSwitch
-            bind:checked={cumulative}
-            label="Cumulative mode: "
-            design="slider"
-          />
+          {#if probeKind !== 'categorical'}
+            <SliderSwitch
+              bind:checked={cumulative}
+              label="Cumulative mode: "
+              design="slider"
+            />
+          {/if}
         </div>
         <div class="chart-fixed">
           <p>Reference</p>
@@ -128,6 +145,7 @@
                   density={topChartDensity}
                   {topTick}
                   {tickIncrement}
+                  {activeCategoricalProbeLabels}
                 >
                   <g slot="glam-body">
                     {#if bottomChartData}
@@ -139,6 +157,7 @@
                         {tickIncrement}
                         sampleCount={topChartSampleCount}
                         tooltipLocation="bottom"
+                        {activeCategoricalProbeLabels}
                       />
                     {/if}
                   </g>
@@ -158,6 +177,7 @@
                   density={bottomChartDensity}
                   {topTick}
                   {tickIncrement}
+                  {activeCategoricalProbeLabels}
                 >
                   <g slot="glam-body">
                     {#if bottomChartData}
@@ -168,6 +188,7 @@
                         {topTick}
                         sampleCount={bottomChartSampleCount}
                         tooltipLocation="top"
+                        {activeCategoricalProbeLabels}
                       />
                     {/if}
                   </g>

diff --git a/src/components/explore/DistributionChart.svelte b/src/components/explore/DistributionChart.svelte
@@ -3,13 +3,15 @@
   import { tooltip as tooltipAction } from '@graph-paper/core/actions';
   import { distributionComparisonGraph } from '../../utils/constants';
   import { formatCompact } from '../../utils/formatters';
+  import { store } from '../../state/store';
 
   export let innerHeight;
   export let innerWidth;
   export let density;
   export let topTick;
   export let sampleCount;
   export let tooltipLocation;
+  export let activeCategoricalProbeLabels;
 
   let height = (innerHeight * distributionComparisonGraph.heightMult) / 2;
   let color = 'var(--digital-blue-350)';
@@ -21,6 +23,7 @@
     distributionComparisonGraph.left;
   let maxHeight = height - distributionComparisonGraph.top;
   let minHeight = distributionComparisonGraph.bottom;
+  let probeKind = $store.probe.details.kind;
   let formatPercent = (t) =>
     Intl.NumberFormat('en-US', {
       style: 'percent',
@@ -33,6 +36,15 @@
   const spaceBetweenBars = bucketWidth / 10;
   const barOffsetX = spaceBetweenBars / 2;
   const barWidth = bucketWidth - spaceBetweenBars;
+
+  const buildBucketTxt = (index, bin) => {
+    if (probeKind === 'categorical') {
+      return activeCategoricalProbeLabels[index];
+    }
+    return index === density.length - 1
+      ? `sample value ≥ ${bin}`
+      : `${bin} ≤ sample value ≤ ${density[index + 1][binSelector]}`;
+  };
 </script>
 
 <style>
@@ -60,10 +72,7 @@
 
 <g style="fill: {'#fafafa'};">
   {#each density as { bin, value }, i}
-    {@const bucketTxt =
-      i === density.length - 1
-        ? `sample value ≥ ${bin}`
-        : `${bin} ≤ sample value ≤ ${density[i + 1][binSelector]}`}
+    {@const bucketTxt = buildBucketTxt(i, bin)}
     {@const valTxt = `  |  ${formatPercent(value)} of samples (${formatCompact(
       sampleCount * value
     )})`}

diff --git a/src/components/explore/DistributionComparisonGraph.svelte b/src/components/explore/DistributionComparisonGraph.svelte
@@ -3,24 +3,33 @@
   import { quantile } from 'd3-array';
   import DataGraphic from '../datagraphic/DataGraphic.svelte';
   import { distributionComparisonGraph } from '../../utils/constants';
+  import { store } from '../../state/store';
 
   export let innerHeight;
   export let innerWidth;
   export let topTick;
   export let tickIncrement;
   export let key = Math.random().toString(36).substring(7);
+  export let activeCategoricalProbeLabels;
 
   export let density = [];
+
+  let probeKind = $store.probe.details.kind;
+  let bins =
+    probeKind === 'categorical'
+      ? activeCategoricalProbeLabels
+      : density.map((d) => d.bin);
+
   export let xTickFormatter = (t) =>
-    Intl.NumberFormat('en', { notation: 'compact' }).format(t);
+    probeKind !== 'categorical'
+      ? Intl.NumberFormat('en', { notation: 'compact' }).format(t)
+      : t;
   export let yTickFormatter = (t) =>
     Intl.NumberFormat('en-US', {
       style: 'percent',
       maximumFractionDigits: 2,
     }).format(t);
 
-  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

diff --git a/src/components/explore/ProbeExplorer.svelte b/src/components/explore/ProbeExplorer.svelte
@@ -333,6 +333,7 @@
       topChartData={distViewTopChartData}
       bottomChartData={distViewBottomChartData}
       {distViewButtonId}
+      keySet={activeBins}
     >
       <div slot="comparisonSummary" class="dist-comp-percentile-tbl">
         <ComparisonSummary