feat: support expr in mark

examples/compiled/bar_diverging_stack_population_pyramid.vg.json

@@ -124,5 +124,5 @@
       "symbolType": "square"
     }
   ],
-  "config": {"style": {"cell": {"stroke": null}}, "axis": {"grid": false}}
+  "config": {"axis": {"grid": false}, "style": {"cell": {"stroke": null}}}
 }

examples/compiled/bar_grouped.vg.json

@@ -170,7 +170,7 @@
   ],
   "legends": [{"fill": "color", "symbolType": "square", "title": "gender"}],
   "config": {
-    "style": {"cell": {"stroke": "transparent"}},
-    "axis": {"domainWidth": 1}
+    "axis": {"domainWidth": 1},
+    "style": {"cell": {"stroke": "transparent"}}
   }
 }

examples/compiled/bar_grouped_horizontal.vg.json

@@ -158,7 +158,7 @@
   ],
   "legends": [{"fill": "color", "symbolType": "square", "title": "gender"}],
   "config": {
-    "style": {"cell": {"stroke": "transparent"}},
-    "axis": {"domainWidth": 1}
+    "axis": {"domainWidth": 1},
+    "style": {"cell": {"stroke": "transparent"}}
   }
 }

examples/compiled/concat_population_pyramid.vg.json

@@ -300,5 +300,5 @@
       "paddingOuter": 0.05
     }
   ],
-  "config": {"style": {"cell": {"stroke": null}}, "axis": {"grid": false}}
+  "config": {"axis": {"grid": false}, "style": {"cell": {"stroke": null}}}
 }

examples/compiled/parallel_coordinate.vg.json

@@ -281,16 +281,16 @@
     }
   ],
   "config": {
-    "style": {
-      "label": {"baseline": "middle", "align": "right", "dx": -5},
-      "tick": {"orient": "horizontal"},
-      "cell": {"stroke": null}
-    },
     "axisX": {
       "domain": false,
       "labelAngle": 0,
       "tickColor": "#ccc",
       "title": null
+    },
+    "style": {
+      "label": {"baseline": "middle", "align": "right", "dx": -5},
+      "tick": {"orient": "horizontal"},
+      "cell": {"stroke": null}
     }
   }
 }

examples/compiled/point_angle_windvector.vg.json

@@ -102,5 +102,5 @@
       "aria": false
     }
   ],
-  "config": {"style": {"cell": {"fill": "black"}}, "aria": false}
+  "config": {"aria": false, "style": {"cell": {"fill": "black"}}}
 }

examples/compiled/rect_heatmap_weather.vg.json

@@ -123,5 +123,5 @@
   "legends": [
     {"fill": "color", "gradientLength": {"signal": "clamp(height, 64, 200)"}}
   ],
-  "config": {"style": {"cell": {"strokeWidth": 0}}, "axis": {"domain": false}}
+  "config": {"axis": {"domain": false}, "style": {"cell": {"strokeWidth": 0}}}
 }

examples/compiled/rect_mosaic_labelled.vg.json

@@ -253,7 +253,7 @@
     }
   ],
   "config": {
-    "style": {"cell": {"stroke": ""}},
-    "axis": {"domain": false, "ticks": false, "labels": false, "grid": false}
+    "axis": {"domain": false, "ticks": false, "labels": false, "grid": false},
+    "style": {"cell": {"stroke": ""}}
   }
 }

examples/compiled/rect_mosaic_labelled_with_offset.vg.json

@@ -290,7 +290,7 @@
     }
   ],
   "config": {
-    "style": {"cell": {"stroke": ""}},
-    "axis": {"domain": false, "ticks": false, "labels": false, "grid": false}
+    "axis": {"domain": false, "ticks": false, "labels": false, "grid": false},
+    "style": {"cell": {"stroke": ""}}
   }
 }

examples/compiled/wheat_wages.vg.json

@@ -362,12 +362,12 @@
     }
   ],
   "config": {
-    "style": {"cell": {"stroke": "transparent"}},
     "axis": {
       "title": null,
       "gridColor": "white",
       "gridOpacity": 0.25,
       "domain": false
-    }
+    },
+    "style": {"cell": {"stroke": "transparent"}}
   }
 }

src/channeldef.ts

@@ -56,7 +56,7 @@ import {ImputeParams} from './impute';
 import {Legend} from './legend';
 import * as log from './log';
 import {LogicalComposition} from './logical';
-import {isRectBasedMark, MarkDef} from './mark';
+import {isRectBasedMark, Mark, MarkDef} from './mark';
 import {Predicate} from './predicate';
 import {Scale, SCALE_CATEGORY_INDEX} from './scale';
 import {isSortByChannel, Sort, SortOrder} from './sort';
@@ -493,8 +493,8 @@ export function getBand({
   fieldDef: FieldDef<string> | DatumDef;
   fieldDef2?: SecondaryChannelDef<string>;
   stack: StackProperties;
-  markDef: MarkDef;
-  config: Config;
+  markDef: MarkDef<Mark, SignalRef>;
+  config: Config<SignalRef>;
 }): number {
   if (isFieldOrDatumDef(fieldDef) && fieldDef.band !== undefined) {
     return fieldDef.band;
@@ -523,8 +523,8 @@ export function hasBand(
   fieldDef: FieldDef<string>,
   fieldDef2: SecondaryChannelDef<string>,
   stack: StackProperties,
-  markDef: MarkDef,
-  config: Config
+  markDef: MarkDef<Mark, SignalRef>,
+  config: Config<SignalRef>
 ): boolean {
   if (isBinning(fieldDef.bin) || (fieldDef.timeUnit && isTypedFieldDef(fieldDef) && fieldDef.type === 'temporal')) {
     return !!getBand({channel, fieldDef, fieldDef2, stack, markDef, config});

src/compile/axis/config.ts

@@ -97,7 +97,7 @@ export function getAxisConfigStyle(axisConfigTypes: string[], config: Config) {
 }
 export function getAxisConfig(
   property: keyof AxisConfig<SignalRef>,
-  styleConfigIndex: StyleConfigIndex,
+  styleConfigIndex: StyleConfigIndex<SignalRef>,
   style: string | string[],
   axisConfigs: Partial<AxisConfigs> = {}
 ): {configFrom?: string; configValue?: any} {

src/compile/axis/properties.ts

@@ -140,7 +140,7 @@ export function getLabelAngle(
   fieldOrDatumDef: PositionFieldDef<string> | PositionDatumDef<string>,
   axis: AxisInternal,
   channel: PositionScaleChannel,
-  styleConfig: StyleConfigIndex,
+  styleConfig: StyleConfigIndex<SignalRef>,
   axisConfigs?: AxisConfigs
 ) {
   const labelAngle = axis?.labelAngle;

src/compile/common.ts

@@ -14,7 +14,7 @@ import {
 } from '../channeldef';
 import {Config, StyleConfigIndex} from '../config';
 import {isExprRef} from '../expr';
-import {MarkConfig, MarkDef} from '../mark';
+import {Mark, MarkConfig, MarkDef} from '../mark';
 import {SortFields} from '../sort';
 import {isText} from '../title';
 import {deepEqual, getFirstDefined} from '../util';
@@ -81,7 +81,7 @@ export function signalOrStringValue(v: SignalRef | any) {
   return v == null ? null : stringValue(v);
 }
 
-export function applyMarkConfig(e: VgEncodeEntry, model: UnitModel, propsList: (keyof MarkConfig)[]) {
+export function applyMarkConfig(e: VgEncodeEntry, model: UnitModel, propsList: (keyof MarkConfig<any>)[]) {
   for (const property of propsList) {
     const value = getMarkConfig(property, model.markDef, model.config);
     if (value !== undefined) {
@@ -95,15 +95,15 @@ export function getStyles(mark: MarkDef): string[] {
   return [].concat(mark.type, mark.style ?? []);
 }
 
-export function getMarkPropOrConfig<P extends keyof MarkDef>(
+export function getMarkPropOrConfig<P extends keyof MarkDef, ES extends ExprRef | SignalRef>(
   channel: P,
-  mark: MarkDef,
-  config: Config,
+  mark: MarkDef<Mark, ES>,
+  config: Config<SignalRef>,
   opt: {
     vgChannel?: VgEncodeChannel;
     ignoreVgConfig?: boolean;
   } = {}
-): MarkDef[P] {
+): MarkDef<Mark, ES>[P] {
   const {vgChannel, ignoreVgConfig} = opt;
   if (vgChannel && mark[vgChannel] !== undefined) {
     return mark[vgChannel];
@@ -120,13 +120,13 @@ export function getMarkPropOrConfig<P extends keyof MarkDef>(
  * Return property value from style or mark specific config property if exists.
  * Otherwise, return general mark specific config.
  */
-export function getMarkConfig<P extends keyof MarkDef>(
+export function getMarkConfig<P extends keyof MarkDef, ES extends ExprRef | SignalRef>(
   channel: P,
-  mark: MarkDef,
-  config: Config,
+  mark: MarkDef<Mark, ES>,
+  config: Config<SignalRef>,
   {vgChannel}: {vgChannel?: VgEncodeChannel} = {}
-): MarkDef[P] {
-  return getFirstDefined<MarkDef[P]>(
+): MarkDef<Mark, ES>[P] {
+  return getFirstDefined<MarkDef<Mark, ES>[P]>(
     // style config has highest precedence
     vgChannel ? getMarkStyleConfig(channel, mark, config.style) : undefined,
     getMarkStyleConfig(channel, mark, config.style),
@@ -141,18 +141,18 @@ export function getMarkConfig<P extends keyof MarkDef>(
   );
 }
 
-export function getMarkStyleConfig<P extends keyof MarkDef>(
+export function getMarkStyleConfig<P extends keyof MarkDef, ES extends ExprRef | SignalRef>(
   prop: P,
-  mark: MarkDef,
-  styleConfigIndex: StyleConfigIndex
+  mark: MarkDef<Mark, ES>,
+  styleConfigIndex: StyleConfigIndex<SignalRef>
 ) {
   return getStyleConfig(prop, getStyles(mark), styleConfigIndex);
 }
 
 export function getStyleConfig<P extends keyof MarkDef | keyof AxisConfig<SignalRef>>(
   p: P,
   styles: string | string[],
-  styleConfigIndex: StyleConfigIndex
+  styleConfigIndex: StyleConfigIndex<SignalRef>
 ) {
   styles = array(styles);
   let value;

src/compile/facet.ts

@@ -48,12 +48,11 @@ export class FacetModel extends ModelWithField {
     this.child = buildModel(spec.spec, this, this.getName('child'), undefined, config);
     this.children = [this.child];
 
-    this.facet = this.initFacet(spec.facet, config);
+    this.facet = this.initFacet(spec.facet);
   }
 
   private initFacet(
-    facet: FacetFieldDef<FieldName> | FacetMapping<FieldName>,
-    config: Config<SignalRef>
+    facet: FacetFieldDef<FieldName> | FacetMapping<FieldName>
   ): EncodingFacetMapping<FieldName, SignalRef> {
     // clone to prevent side effect to the original spec
     if (!isFacetMapping(facet)) {

src/compile/legend/properties.ts

@@ -21,11 +21,11 @@ export interface LegendRuleParams {
   legend: LegendInternal;
   channel: NonPositionScaleChannel;
   model: UnitModel;
-  markDef: MarkDef;
+  markDef: MarkDef<Mark, SignalRef>;
   encoding: Encoding<string>;
   fieldOrDatumDef: MarkPropFieldOrDatumDef<string>;
   legendConfig: LegendConfig<SignalRef>;
-  config: Config;
+  config: Config<SignalRef>;
   scaleType: ScaleType;
   orient: LegendOrient;
   legendType: LegendType;

src/compile/mark/encode/offset.ts

@@ -3,9 +3,12 @@
  */
 import {SignalRef} from 'vega-typings/types';
 import {getOffsetChannel, PolarPositionChannel, PositionChannel} from '../../../channel';
-import {MarkDef} from '../../../mark';
+import {Mark, MarkDef} from '../../../mark';
 
-export function getOffset(channel: PositionChannel | PolarPositionChannel, markDef: MarkDef): number | SignalRef {
+export function getOffset(
+  channel: PositionChannel | PolarPositionChannel,
+  markDef: MarkDef<Mark, SignalRef>
+): number | SignalRef {
   const offsetChannel = getOffsetChannel(channel);
 
   // TODO: in the future read from encoding channel too

src/compile/mark/encode/position-align.ts

@@ -1,4 +1,4 @@
-import {Align} from 'vega';
+import {Align, SignalRef} from 'vega';
 import {getVgPositionChannel} from '../../../channel';
 import {Config} from '../../../config';
 import {MarkDef} from '../../../mark';
@@ -20,7 +20,7 @@ const BASELINED_Y_CHANNEL = {
 export function vgAlignedPositionChannel(
   channel: 'x' | 'y' | 'radius' | 'theta',
   markDef: MarkDef,
-  config: Config,
+  config: Config<SignalRef>,
   defaultAlign: 'top' | 'middle' = 'middle'
 ) {
   if (channel === 'radius' || channel === 'theta') {

src/compile/mark/encode/position-range.ts

@@ -1,3 +1,4 @@
+import {SignalRef} from 'vega-typings/types';
 import {getMainRangeChannel, getSecondaryRangeChannel, getSizeChannel, getVgPositionChannel} from '../../../channel';
 import {isFieldOrDatumDef} from '../../../channeldef';
 import {MarkConfig} from '../../../mark';
@@ -165,7 +166,7 @@ export function position2Ref({
   });
 }
 
-function position2orSize(channel: 'x2' | 'y2' | 'radius2' | 'theta2', markDef: MarkConfig) {
+function position2orSize(channel: 'x2' | 'y2' | 'radius2' | 'theta2', markDef: MarkConfig<SignalRef>) {
   const sizeChannel = getSizeChannel(channel);
   const vgChannel = getVgPositionChannel(channel);
   if (markDef[vgChannel] !== undefined) {

src/compile/mark/encode/position-rect.ts

@@ -255,11 +255,11 @@ export function rectBinPosition({
   channel: 'x' | 'y' | 'theta' | 'radius';
   band: number;
   scaleName: string;
-  markDef: MarkDef<Mark>;
+  markDef: MarkDef<Mark, SignalRef>;
   spacing?: number;
   axisTranslate: number | SignalRef;
   reverse: boolean | SignalRef;
-  config: Config;
+  config: Config<SignalRef>;
 }) {
   const channel2 = getSecondaryRangeChannel(channel);
 
@@ -339,7 +339,7 @@ export function rectBinRef({
   markDef: MarkDef<Mark>;
   band: number;
   offset?: number | SignalRef;
-  config?: Config;
+  config?: Config<SignalRef>;
 }) {
   const r = ref.interpolatedSignalRef({
     scaleName,

src/compile/mark/encode/valueref.ts

@@ -79,7 +79,7 @@ export function wrapPositionInvalidTest({
   channel: PositionChannel | PolarPositionChannel;
   markDef: MarkDef<Mark>;
   ref: VgValueRef;
-  config: Config;
+  config: Config<SignalRef>;
 }): VgValueRef | VgValueRef[] {
   if (isPathMark(markDef.type)) {
     // path mark already use defined to skip points, no need to do it here.
@@ -204,8 +204,8 @@ export interface MidPointParams {
   channelDef: ChannelDef;
   channel2Def?: SecondaryChannelDef<string>;
 
-  markDef: MarkDef<Mark>;
-  config: Config;
+  markDef: MarkDef<Mark, SignalRef>;
+  config: Config<SignalRef>;
 
   scaleName: string;
   scale: ScaleComponent;

src/compile/mark/init.ts

@@ -1,8 +1,9 @@
-import {Orientation} from 'vega';
+import {Orientation, SignalRef} from 'vega';
 import {isBinned, isBinning} from '../../bin';
 import {isContinuousFieldOrDatumDef, isFieldDef, isNumericDataDef, TypedFieldDef} from '../../channeldef';
 import {Config} from '../../config';
 import {Encoding, isAggregate} from '../../encoding';
+import {replaceExprRefInIndex} from '../../expr';
 import * as log from '../../log';
 import {
   AREA,
@@ -24,7 +25,9 @@ import {QUANTITATIVE, TEMPORAL} from '../../type';
 import {contains, getFirstDefined} from '../../util';
 import {getMarkConfig, getMarkPropOrConfig} from '../common';
 
-export function initMarkdef(markDef: MarkDef, encoding: Encoding<string>, config: Config) {
+export function initMarkdef(originalMarkDef: MarkDef, encoding: Encoding<string>, config: Config<SignalRef>) {
+  const markDef = replaceExprRefInIndex(originalMarkDef) as MarkDef<Mark, SignalRef>;
+
   // set orient, which can be overridden by rules as sometimes the specified orient is invalid.
   const specifiedOrient = getMarkPropOrConfig('orient', markDef, config);
   markDef.orient = orient(markDef.type, encoding, specifiedOrient);
@@ -65,7 +68,7 @@ export function initMarkdef(markDef: MarkDef, encoding: Encoding<string>, config
   return markDef;
 }
 
-function cursor(markDef: MarkDef, encoding: Encoding<string>, config: Config) {
+function cursor(markDef: MarkDef<Mark, SignalRef>, encoding: Encoding<string>, config: Config<SignalRef>) {
   if (encoding.href || markDef.href || getMarkPropOrConfig('href', markDef, config)) {
     return 'pointer';
   }
@@ -82,7 +85,7 @@ function opacity(mark: Mark, encoding: Encoding<string>) {
   return undefined;
 }
 
-export function defaultFilled(markDef: MarkDef, config: Config, {graticule}: {graticule: boolean}) {
+export function defaultFilled(markDef: MarkDef, config: Config<SignalRef>, {graticule}: {graticule: boolean}) {
   if (graticule) {
     return false;
   }