fix!: Use orderby not order, allow highlight to auto-assign orderby.

dev/yaml/highlight-cube.yaml

@@ -10,7 +10,6 @@ vconcat:
       data: { from: athletes, filterBy: $query }
       x: { count: }
       y: nationality
-      order: nationality
       sort: {
         y: '-x',
         limit: 10
@@ -30,7 +29,6 @@ vconcat:
       data: { from: athletes, filterBy: $query }
       x: { count: }
       y: sport
-      order: sport
       sort: {
         y: '-x',
         limit: 10

dev/yaml/weather.yaml

@@ -28,6 +28,7 @@ vconcat:
     colorRange: $colors
     rDomain: Fixed
     rRange: [2, 10]
+    marginLeft: 45
     width: 800
 - plot:
   - mark: barX
@@ -40,7 +41,6 @@ vconcat:
     x: { count: }
     y: weather
     fill: weather
-    order: weather
   - select: toggleY
     as: $click
   - select: highlight
@@ -50,4 +50,5 @@ vconcat:
   yLabel: null
   colorDomain: $domain
   colorRange: $colors
+  marginLeft: 45
   width: 800

docs/public/specs/esm/weather.js

@@ -36,7 +36,7 @@ export default vg.vconcat(
     ),
     vg.barX(
       vg.from("weather", { filterBy: $range }),
-      { x: vg.count(), y: "weather", fill: "weather", order: "weather" }
+      { x: vg.count(), y: "weather", fill: "weather" }
     ),
     vg.toggleY({ as: $click }),
     vg.highlight({ by: $click }),

docs/public/specs/json/weather.json

@@ -105,8 +105,7 @@
             "count": null
           },
           "y": "weather",
-          "fill": "weather",
-          "order": "weather"
+          "fill": "weather"
         },
         {
           "select": "toggleY",

docs/public/specs/yaml/weather.yaml

@@ -50,7 +50,6 @@ vconcat:
     x: { count: }
     y: weather
     fill: weather
-    order: weather
   - select: toggleY
     as: $click
   - select: highlight

packages/vgplot/src/interactors/Highlight.js

@@ -2,12 +2,43 @@ import { coordinator, throttle } from '@uwdata/mosaic-core';
 import { and } from '@uwdata/mosaic-sql';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
+function configureMark(mark) {
+  const { channels } = mark;
+  const dims = new Set;
+  let ordered = false;
+  let aggregate = false;
+
+  for (const c of channels) {
+    const { channel, field, as } = c;
+    if (channel === 'orderby') {
+      ordered = true;
+    } else if (field) {
+      if (field.aggregate) {
+        aggregate = true;
+      } else {
+        if (dims.has(as)) continue;
+        dims.add(as);
+      }
+    }
+  }
+
+  // if orderby is defined, we're ok: nothing to do
+  // or, if there is no groupby aggregation, we're ok: nothing to do
+  // grouping may result in optimizations that change result order
+  // so we orderby the grouping dimensions to ensure stable indices
+  if (!ordered && aggregate && dims.size) {
+    mark.channels.push(({ channel: 'orderby', value: Array.from(dims) }));
+  }
+
+  return mark;
+}
+
 export class Highlight {
   constructor(mark, {
     selection,
     channels = {}
   }) {
-    this.mark = mark;
+    this.mark = configureMark(mark);
     this.selection = selection;
     const c = Object.entries(sanitizeStyles(channels));
     this.channels = c.length ? c : [['opacity', 0.2]];

packages/vgplot/src/marks/HexbinMark.js

@@ -40,7 +40,7 @@ export class HexbinMark extends Mark {
     const aggr = new Set;
     const cols = {};
     for (const c of channels) {
-      if (c.channel === 'order') {
+      if (c.channel === 'orderby') {
         q.orderby(c.value); // TODO revisit once groupby is added
       } else if (c.channel === 'x') {
         x = c;

packages/vgplot/src/marks/Mark.js

@@ -174,7 +174,7 @@ export function markQuery(channels, table, skip = []) {
     const { channel, field, as } = c;
     if (skip.includes(channel)) continue;
 
-    if (channel === 'order') {
+    if (channel === 'orderby') {
       q.orderby(c.value);
     } else if (field) {
       if (field.aggregate) {