Merge pull request #1461 from vega/cameron.yick/vega-interpreter-control

feat(editor): Add setting for using editor with `expressionInterpreter` enabled

Author: hydrosquall

package-lock.json

@@ -63,11 +63,12 @@
     "redux-localstorage": "^0.4.1",
     "redux-thunk": "^2.4.2",
     "tippy.js": "^6.3.7",
-    "vega-cli": "5.30.0",
     "tslib": "^2.7.0",
+    "vega-cli": "5.30.0",
     "vega-datasets": "^2.9.0",
-    "vega-lite": "5.21.0",
     "vega-embed": "^6.26.0",
+    "vega-interpreter": "^1.1.0",
+    "vega-lite": "5.21.0",
     "vega-schema-url-parser": "^2.2.0",
     "vega-themes": "^2.15.0",
     "vega-tooltip": "^0.34.0",

package.json

@@ -46,6 +46,7 @@ export const SET_DECORATION = 'SET_DECORATION' as const;
 export const SET_COMPILED_EDITOR_REFERENCE = 'SET_COMPILED_EDITOR_REFERENCE' as const;
 export const SET_EDITOR_FOCUS = 'SET_EDITOR_FOCUS' as const;
 export const SET_BACKGROUND_COLOR = 'SET_BACKGROUND_COLOR' as const;
+export const SET_EXPRESSION_INTERPRETER = 'SET_EXPRESSION_INTERPRETER' as const;
 
 export const ERROR = 'ERROR' as const;
 export const WARN = 'WARN' as const;
@@ -100,7 +101,8 @@ export type Action =
   | AddError
   | AddWarning
   | AddInfo
-  | AddDebug;
+  | AddDebug
+  | SetExpressionInterpreter;
 
 export function setMode(mode: Mode) {
   return {
@@ -511,3 +513,12 @@ export function addDebug(debug: string) {
 }
 
 export type AddDebug = ReturnType<typeof addDebug>;
+
+export function setExpressionInterpreter(value: boolean) {
+  return {
+    type: SET_EXPRESSION_INTERPRETER,
+    expressionInterpreter: value,
+  };
+}
+
+export type SetExpressionInterpreter = ReturnType<typeof setExpressionInterpreter>;

src/actions/editor.ts

@@ -21,6 +21,7 @@ export function mapStateToProps(state: State) {
     vegaSpec: state.vegaSpec,
     view: state.view,
     backgroundColor: state.backgroundColor,
+    expressionInterpreter: state.expressionInterpreter,
   };
 }
 

src/components/renderer/index.tsx

@@ -12,6 +12,7 @@ import addProjections from '../../utils/addProjections';
 import {dispatchingLogger} from '../../utils/logger';
 import {Popup} from '../popup';
 import './index.css';
+import {expressionInterpreter as vegaInterpreter} from 'vega-interpreter';
 
 // Add additional projections
 addProjections(vega.projection);
@@ -126,16 +127,23 @@ class Editor extends React.PureComponent<Props, State> {
   }
 
   public initView() {
-    const {vegaSpec, vegaLiteSpec, normalizedVegaLiteSpec, config, baseURL, mode, setView, setRuntime, hoverEnable} =
-      this.props;
-
-    let runtime: vega.Runtime;
-    if (mode === Mode.VegaLite) {
-      // In vl mode, we compile Vega-Lite spec along with config to Vega spec
-      runtime = vega.parse(vegaSpec);
-    } else {
-      runtime = vega.parse(vegaSpec, config as VgConfig);
-    }
+    const {
+      vegaSpec,
+      vegaLiteSpec,
+      normalizedVegaLiteSpec,
+      config,
+      baseURL,
+      mode,
+      setView,
+      setRuntime,
+      hoverEnable,
+      expressionInterpreter,
+    } = this.props;
+
+    const parseOptions = expressionInterpreter ? {ast: true} : {};
+
+    // In vl mode, we compile Vega-Lite spec along with config to Vega spec
+    const runtime = vega.parse(vegaSpec, mode === Mode.VegaLite ? {} : (config as VgConfig), parseOptions);
 
     const loader = vega.loader();
     const originalLoad = loader.load.bind(loader);
@@ -163,15 +171,15 @@ class Editor extends React.PureComponent<Props, State> {
 
       this.props.view.finalize();
     }
-
     const hover = typeof hoverEnable === 'boolean' ? hoverEnable : mode === Mode.Vega;
     const view = new vega.View(runtime, {
       hover,
       loader,
+      expr: expressionInterpreter ? vegaInterpreter : undefined,
     });
 
     view.runAfter(this.runAfter, true);
-    (view as any).logger(dispatchingLogger);
+    view.logger(dispatchingLogger);
 
     const debug = (window as any).VEGA_DEBUG;
     debug.view = view;
@@ -284,7 +292,8 @@ class Editor extends React.PureComponent<Props, State> {
       !deepEqual(prevProps.logLevel, this.props.logLevel) ||
       !deepEqual(prevProps.mode, this.props.mode) ||
       !deepEqual(prevProps.hoverEnable, this.props.hoverEnable) ||
-      !deepEqual(prevProps.tooltipEnable, this.props.tooltipEnable)
+      !deepEqual(prevProps.tooltipEnable, this.props.tooltipEnable) ||
+      prevProps.expressionInterpreter !== this.props.expressionInterpreter
     ) {
       this.initView();
     }

src/components/renderer/renderer.tsx

@@ -11,6 +11,7 @@ export function mapStateToProps(state: State) {
     renderer: state.renderer,
     tooltipEnable: state.tooltipEnable,
     backgroundColor: state.backgroundColor,
+    expressionInterpreter: state.expressionInterpreter,
   };
 }
 
@@ -23,6 +24,7 @@ export function mapDispatchToProps(dispatch: Dispatch<EditorActions.Action>) {
       setSettingsState: EditorActions.setSettingsState,
       setTooltip: EditorActions.setTooltip,
       setBackgroundColor: EditorActions.setBackgroundColor,
+      setExpressionInterpreter: EditorActions.setExpressionInterpreter,
     },
     dispatch,
   );

src/components/sidebar/index.tsx

@@ -103,6 +103,8 @@ class Sidebar extends Component<any, any> {
       setLogLevel,
       setTooltip,
       tooltipEnable,
+      expressionInterpreter,
+      setExpressionInterpreter,
     } = this.props;
 
     const hover = typeof this.props.hoverEnable !== 'boolean' ? 'Auto' : this.props.hoverEnable ? 'On' : 'Off';
@@ -200,6 +202,29 @@ class Sidebar extends Component<any, any> {
           </a>{' '}
           handler.
         </p>
+        <div className="expression-interpreter">
+          <label>
+            <input
+              onChange={(e) => setExpressionInterpreter(e.target.checked)}
+              type="checkbox"
+              name=""
+              id="expressionInterpreter"
+              checked={expressionInterpreter}
+            />
+            Expression Interpreter
+          </label>
+        </div>
+        <p className="settings-description">
+          Enables the{' '}
+          <a href="https://vega.github.io/vega/usage/interpreter/" rel="noopener noreferrer" target="_blank">
+            Expression Interpreter
+          </a>
+          , which is{' '}
+          <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" rel="noopener noreferrer" target="_blank">
+            CSP
+          </a>{' '}
+          compliant.
+        </p>
       </div>
     );
   }

src/components/sidebar/renderer.tsx

@@ -62,6 +62,8 @@ export type State = {
   debugs: string[];
   themeName: string;
   backgroundColor: string;
+  /** https://vega.github.io/vega/usage/interpreter/ */
+  expressionInterpreter: boolean;
 } & typeof dataflowInitialState;
 
 export const DEFAULT_STATE: State = {
@@ -110,5 +112,6 @@ export const DEFAULT_STATE: State = {
   debugs: [],
   infos: [],
   backgroundColor: '#ffffff',
+  expressionInterpreter: false,
   ...dataflowInitialState,
 };

src/constants/default-state.ts

@@ -43,6 +43,7 @@ import {
   SET_VEGA_EXAMPLE,
   SET_VEGA_LITE_EXAMPLE,
   SET_VIEW,
+  SET_EXPRESSION_INTERPRETER,
   SHOW_LOGS,
   TOGGLE_AUTO_PARSE,
   TOGGLE_COMPILED_VEGA_SPEC,
@@ -328,6 +329,7 @@ export default (state: State = DEFAULT_STATE, action: Action): State => {
         warns: [],
         infos: [],
         debugs: [],
+        expressionInterpreter: false,
       };
     case SET_MODE_ONLY:
       return {
@@ -528,6 +530,13 @@ export default (state: State = DEFAULT_STATE, action: Action): State => {
         ...state,
         editorFocus: action.editorFocus,
       };
+
+    case SET_EXPRESSION_INTERPRETER:
+      return {
+        ...state,
+        expressionInterpreter: action.expressionInterpreter,
+      };
+
     case RECEIVE_CURRENT_USER:
       return {
         ...state,