Sort leaderboards by context columns

web-common/src/components/data-types/FormattedDataType.svelte

@@ -21,11 +21,7 @@
 
   let dataType;
   $: {
-    if (type === "RILL_PERCENTAGE_CHANGE") {
-      dataType = PercentageChange;
-    } else if (type === "RILL_CHANGE") {
-      dataType = MeasureChange;
-    } else if (NUMERICS.has(type)) {
+    if (NUMERICS.has(type)) {
       dataType = Number;
     } else if (TIMESTAMPS.has(type)) {
       dataType = Timestamp;
@@ -38,12 +34,24 @@
   }
 </script>
 
-<svelte:component
-  this={dataType}
-  isNull={isNull || value === null}
-  {inTable}
-  {customStyle}
-  {dark}
-  {type}
-  {value}
-/>
+<!--
+NOTE:
+PercentageChange  and MeasureChange don't take a `type` prop,
+so instantiating these directly clears a ton of warnings
+about unknown props.
+-->
+{#if type === "RILL_PERCENTAGE_CHANGE"}
+  <PercentageChange {value} {isNull} {inTable} {customStyle} {dark} />
+{:else if type === "RILL_CHANGE"}
+  <MeasureChange {value} {isNull} {inTable} {customStyle} {dark} />
+{:else}
+  <svelte:component
+    this={dataType}
+    isNull={isNull || value === null}
+    {inTable}
+    {customStyle}
+    {dark}
+    {type}
+    {value}
+  />
+{/if}

web-common/src/components/data-types/PercentageChange.svelte

@@ -1,15 +1,49 @@
-<script>
+<script lang="ts">
   import Base from "./Base.svelte";
   import { PERC_DIFF } from "./type-utils";
+  import type { NumberParts } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
   export let isNull = false;
   export let inTable = false;
   export let dark = false;
   export let customStyle = "";
-  export let value;
+  export let value: undefined | NumberParts | PERC_DIFF;
   export let tabularNumber = true;
 
-  $: diffIsNegative = value?.neg === "-";
-  $: intValue = value?.int ? value?.int : value?.int === 0 ? 0 : "";
+  let diffIsNegative = false;
+  let intValue: string;
+  let negSign = "";
+  let approxSign = "";
+  let suffix = "";
+
+  $: isNoData = Object.values(PERC_DIFF).includes(value) || value === undefined;
+
+  $: if (!isNoData) {
+    // in this case, we have a NumberParts object.
+    // We have a couple cases to consider:
+    // * If the NumberParts object has approxZero===true,
+    // we want to show e.g. "~0%" WITHOUT a negative sign
+    // * However, in this case we show the number in red to indicate a
+    // small negative change.
+    //
+    // Otherwise, we format the number as usual.
+
+    intValue = value?.int;
+    diffIsNegative = value?.neg === "-";
+    negSign = diffIsNegative && !value?.approxZero ? "-" : "";
+    approxSign = value?.approxZero ? "~" : "";
+    suffix = value?.suffix ?? "";
+
+    // This formatter should only ever recieve a NumberParts object
+    // with a value.percent === "%" field. If that invariant fails,
+    // we don't want to crash, but we'll emit a warning.
+    if (value?.percent !== "%") {
+      console.warn(
+        `PercentageChange component expects a NumberParts object with a percent sign, received ${JSON.stringify(
+          value
+        )} instead.`
+      );
+    }
+  }
 </script>
 
 <Base
@@ -20,13 +54,11 @@
   {dark}
 >
   <slot name="value">
-    {#if value === PERC_DIFF.PREV_VALUE_NO_DATA || value === PERC_DIFF.PREV_VALUE_NULL}
+    {#if isNoData}
       <span class="opacity-50 italic" style:font-size=".925em">no data</span>
     {:else if value !== undefined}
       <span class:text-red-500={diffIsNegative}>
-        {value?.neg || ""}{intValue}<span class="opacity-50"
-          >{value?.percent || ""}</span
-        >
+        {approxSign}{negSign}{intValue}{suffix}<span class="opacity-50">%</span>
       </span>
     {/if}
   </slot>

web-common/src/features/dashboards/dashboard-stores.ts

@@ -382,12 +382,26 @@ const metricViewReducers = {
     });
   },
 
-  toggleSortDirection(name: string) {
+  toggleSort(name: string, sortType?: SortType) {
     updateMetricsExplorerByName(name, (metricsExplorer) => {
-      metricsExplorer.sortDirection =
-        metricsExplorer.sortDirection === SortDirection.ASCENDING
-          ? SortDirection.DESCENDING
-          : SortDirection.ASCENDING;
+      // if sortType is not provided,  or if it is provided
+      // and is the same as the current sort type,
+      // then just toggle the current sort direction
+      if (
+        sortType === undefined ||
+        metricsExplorer.dashboardSortType === sortType
+      ) {
+        metricsExplorer.sortDirection =
+          metricsExplorer.sortDirection === SortDirection.ASCENDING
+            ? SortDirection.DESCENDING
+            : SortDirection.ASCENDING;
+      } else {
+        // if the sortType is different from the current sort type,
+        //  then update the sort type and set the sort direction
+        // to descending
+        metricsExplorer.dashboardSortType = sortType;
+        metricsExplorer.sortDirection = SortDirection.DESCENDING;
+      }
     });
   },
 
@@ -492,16 +506,30 @@ const metricViewReducers = {
 
   setContextColumn(name: string, contextColumn: LeaderboardContextColumn) {
     updateMetricsExplorerByName(name, (metricsExplorer) => {
+      const initialSort = sortTypeForContextColumnType(
+        metricsExplorer.leaderboardContextColumn
+      );
       switch (contextColumn) {
         case LeaderboardContextColumn.DELTA_ABSOLUTE:
         case LeaderboardContextColumn.DELTA_PERCENT: {
+          // if there is no time comparison, then we can't show
+          // these context columns, so return with no change
           if (metricsExplorer.showComparison === false) return;
+
           metricsExplorer.leaderboardContextColumn = contextColumn;
-          return;
+          break;
         }
         default:
           metricsExplorer.leaderboardContextColumn = contextColumn;
-          return;
+      }
+
+      // if we have changed the context column, and the leaderboard is
+      // sorted by the context column from before we made the change,
+      // then we also need to change
+      // the sort type to match the new context column
+      if (metricsExplorer.dashboardSortType === initialSort) {
+        metricsExplorer.dashboardSortType =
+          sortTypeForContextColumnType(contextColumn);
       }
     });
   },
@@ -655,6 +683,26 @@ function setDisplayComparison(
   }
 }
 
+function sortTypeForContextColumnType(
+  contextCol: LeaderboardContextColumn
+): SortType {
+  const sortType = {
+    [LeaderboardContextColumn.DELTA_PERCENT]: SortType.DELTA_PERCENT,
+    [LeaderboardContextColumn.DELTA_ABSOLUTE]: SortType.DELTA_ABSOLUTE,
+    [LeaderboardContextColumn.PERCENT]: SortType.PERCENT,
+    [LeaderboardContextColumn.HIDDEN]: SortType.VALUE,
+  }[contextCol];
+
+  // Note: the above map needs to be EXHAUSTIVE over
+  // LeaderboardContextColumn variants. If we ever add a new
+  // context column type, we need to add it to the map above.
+  // Otherwise, we will throw an error here.
+  if (!sortType) {
+    throw new Error(`Invalid context column type: ${contextCol}`);
+  }
+  return sortType;
+}
+
 function setSelectedScrubRange(
   metricsExplorer: MetricsExplorerEntity,
   scrubRange: ScrubRange

web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte

@@ -293,7 +293,7 @@
     if (!measureNames.includes(columnName)) return;
 
     if (columnName === leaderboardMeasureName) {
-      metricsExplorerStore.toggleSortDirection(metricViewName);
+      metricsExplorerStore.toggleSort(metricViewName);
     } else {
       metricsExplorerStore.setLeaderboardMeasureName(
         metricViewName,

web-common/src/features/dashboards/dimension-table/dimension-table-utils.spec.ts

@@ -119,9 +119,11 @@ const expectedData = [
     measure_0: 25,
     measure_0_delta: 0,
     measure_0_delta_perc: {
-      int: 0,
-      neg: "",
+      dot: "",
+      frac: "",
+      int: "0",
       percent: "%",
+      suffix: "",
     },
   },
   {

web-common/src/features/dashboards/humanize-numbers.ts

@@ -6,6 +6,7 @@ import { humanizedFormatterFactory } from "@rilldata/web-common/lib/number-forma
 import {
   FormatterFactoryOptions,
   NumberKind,
+  NumberParts,
 } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
 import {
   formatMsInterval,
@@ -167,17 +168,82 @@ function humanizeGroupValuesUtil2(values: number[], type: FormatPreset) {
   });
 }
 
-/** formatter for the comparison percentage differences */
-export function formatMeasurePercentageDifference(
-  value,
-  method = "partsFormat"
-) {
-  if (Math.abs(value * 100) < 1 && value !== 0) {
-    return method === "partsFormat"
-      ? { percent: "%", neg: "", int: "<1" }
-      : "<1%";
+/**
+ * Formatter for the comparison percentage differences.
+ * Input values are given as proportions, not percentages
+ * (not yet multiplied by 100). However, inputs may be
+ * any real number, not just a proper fraction, so negative
+ * values and values of arbitrarily large magnitudes must be
+ * supported.
+ */
+export function formatMeasurePercentageDifference(value): NumberParts {
+  if (value === 0) {
+    return { percent: "%", int: "0", dot: "", frac: "", suffix: "" };
+  } else if (value < 0.005 && value > 0) {
+    return {
+      percent: "%",
+      int: "0",
+      dot: "",
+      frac: "",
+      suffix: "",
+      approxZero: true,
+    };
+  } else if (value > -0.005 && value < 0) {
+    return {
+      percent: "%",
+      neg: "-",
+      int: "0",
+      dot: "",
+      frac: "",
+      suffix: "",
+      approxZero: true,
+    };
+  }
+
+  const factory = new PerRangeFormatter([], {
+    strategy: "perRange",
+    rangeSpecs: [
+      {
+        minMag: -2,
+        supMag: 3,
+        maxDigitsRight: 1,
+        baseMagnitude: 0,
+        padWithInsignificantZeros: false,
+      },
+    ],
+    defaultMaxDigitsRight: 0,
+    numberKind: NumberKind.PERCENT,
+  });
+
+  return factory["partsFormat"](value);
+}
+
+/**
+ * This function is used to format proper fractions, which
+ * must be between 0 and 1, as percentages. It is used in
+ * formatting the percentage of total column, as well as
+ * other contexts where the input number is guaranteed to
+ * be a proper fraction.
+ *
+ * If the input number is not a proper fraction, this function
+ * will `console.warn` (since this is not worth crashing over)
+ * and use formatMeasurePercentageDifference
+ * instead, though that will likely result in a badly formatted
+ * output, since formatting of proper fractions may make
+ * assumptions that are violated by improper fractions.
+ */
+export function formatProperFractionAsPercent(value): NumberParts {
+  if (value < 0 || value > 1) {
+    console.warn(
+      `formatProperFractionAsPercent received invalid input: ${value}. Value must be between 0 and 1.`
+    );
+    return formatMeasurePercentageDifference(value);
+  }
+
+  if (value < 0.01 && value !== 0) {
+    return { percent: "%", int: "<1", dot: "", frac: "", suffix: "" };
   } else if (value === 0) {
-    return method === "partsFormat" ? { percent: "%", neg: "", int: 0 } : "0%";
+    return { percent: "%", int: "0", dot: "", frac: "", suffix: "" };
   }
   const factory = new PerRangeFormatter([], {
     strategy: "perRange",
@@ -194,5 +260,5 @@ export function formatMeasurePercentageDifference(
     numberKind: NumberKind.PERCENT,
   });
 
-  return factory[method](value);
+  return factory["partsFormat"](value);
 }

web-common/src/features/dashboards/leaderboard/ContextColumnValue.svelte

@@ -2,20 +2,43 @@
   import { LeaderboardContextColumn } from "@rilldata/web-common/features/dashboards/leaderboard-context-column";
   import PercentageChange from "../../../components/data-types/PercentageChange.svelte";
   import { FormattedDataType } from "@rilldata/web-common/components/data-types";
+  import { contextColumnWidth } from "./leaderboard-utils";
+  import type { NumberParts } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
+  import type { PERC_DIFF } from "@rilldata/web-common/components/data-types/type-utils";
 
-  export let formattedValue: string;
-  export let showContext: LeaderboardContextColumn;
-  $: neg = formattedValue[0] === "-";
-  $: noData = formattedValue === "" || !formattedValue;
-  $: customStyle = neg ? "text-red-500" : noData ? "opacity-50 italic" : "";
+  export let formattedValue:
+    | string
+    | NumberParts
+    | PERC_DIFF.PREV_VALUE_NO_DATA;
+  export let contextColumn: LeaderboardContextColumn;
+
+  let neg: boolean;
+  let noData: boolean;
+  let customStyle: string;
+  $: if (typeof formattedValue === "string") {
+    neg = formattedValue[0] === "-";
+    noData = formattedValue === "" || !formattedValue;
+    customStyle = neg ? "text-red-500" : noData ? "opacity-50 italic" : "";
+  }
+  $: width = contextColumnWidth(contextColumn);
+
+  $: if (
+    (contextColumn === LeaderboardContextColumn.DELTA_PERCENT ||
+      contextColumn === LeaderboardContextColumn.PERCENT) &&
+    typeof formattedValue === "string"
+  ) {
+    console.warn(
+      "PercentageChange component expects a NumberParts object, not a string."
+    );
+  }
 </script>
 
-{#if showContext === LeaderboardContextColumn.DELTA_PERCENT || showContext === LeaderboardContextColumn.PERCENT}
-  <div style:width="44px">
+{#if contextColumn === LeaderboardContextColumn.DELTA_PERCENT || contextColumn === LeaderboardContextColumn.PERCENT}
+  <div style:width>
     <PercentageChange value={formattedValue} />
   </div>
-{:else if showContext === LeaderboardContextColumn.DELTA_ABSOLUTE}
-  <div style:width="54px">
+{:else if contextColumn === LeaderboardContextColumn.DELTA_ABSOLUTE}
+  <div style:width>
     {#if noData}
       <span class="opacity-50 italic" style:font-size=".925em">no data</span>
     {:else}