Use existing boolean transformation and fix dropdown placement (#3328)

Author: edugfilho

src/components/explore/ProportionExplorerView.svelte

@@ -131,6 +131,7 @@
     $store.productDimensions.normalizationType
   );
   $: selectAllCategories = $store.activeBuckets.length === bucketOptions.length;
+  $: showKeySelector = probeKeys && probeKeys.length > 1;
 </script>
 
 <style>
@@ -168,15 +169,15 @@
     />
   </div>
 
-  <div class="body-control-row  body-control-row--stretch">
+  <div class="body-control-row">
     <div class="body-control-set">
       <label class="body-control-set--label">Metric Type</label>
       <ProportionMetricTypeControl
         {metricType}
         on:selection={makeSelection('metricType')}
       />
     </div>
-    {#if probeKeys && probeKeys.length > 1}
+    {#if showKeySelector}
       <div class="body-control-set">
         <label class="body-control-set--label">Key</label>
         <ProbeKeySelector options={probeKeys} bind:currentKey />

src/config/glean-base.js

@@ -29,6 +29,7 @@ export const SUPPORTED_METRICS = [
   'labeled_custom_distribution',
   'labeled_timing_distribution',
   'boolean',
+  'labeled_boolean',
 ];
 
 export default {
@@ -92,6 +93,7 @@ export default {
   // Common probe view mappings for Glean metrics
   probeView: {
     boolean: 'categorical',
+    labeled_boolean: 'categorical',
     counter: 'linear',
     custom_distribution_exponential: 'log',
     custom_distribution_linear: 'linear',
@@ -194,7 +196,7 @@ export default {
         let labels = {
           ...appStore.getState().probe.labels,
         };
-        if (metricType === 'boolean') {
+        if (metricType === 'boolean' || metricType === 'labeled_boolean') {
           const dataAndLabels =
             transformBooleanHistogramToCategoricalHistogram(data);
           data = dataAndLabels.data;
@@ -254,7 +256,7 @@ export default {
     let etc = {};
 
     // filter out true/false aggregate results in boolean metrics. See: https://github.com/mozilla/glam/pull/1525#discussion_r694135079
-    if (metricType === 'boolean') {
+    if (metricType === 'boolean' || metricType === 'labeled_boolean') {
       // eslint-disable-next-line no-param-reassign
       data = data.filter((di) => di.client_agg_type === '');
     }