Add mainspec prop to read mark from main view

Remove ../node_modules prefix

Author: ssharif6

src/components/encoding-pane/encoding-shelf.tsx

@@ -7,6 +7,7 @@ import * as TetherComponent from 'react-tether';
 import {SHAPE} from 'vega-lite/build/src/channel';
 import {POINT, TEXT} from 'vega-lite/build/src/mark';
 import {contains} from 'vega-lite/build/src/util';
+import {TopLevelFacetedUnitSpec} from '../../../node_modules/vega-lite/build/src/spec';
 import {ActionHandler} from '../../actions/index';
 import {
   SPEC_FIELD_ADD, SPEC_FIELD_MOVE, SPEC_FIELD_REMOVE, SPEC_FUNCTION_ADD_WILDCARD,
@@ -46,6 +47,8 @@ export interface EncodingShelfPropsBase extends ActionHandler<SpecEncodingAction
   schema: Schema;
 
   mark: ShelfMark;
+
+  mainSpec: TopLevelFacetedUnitSpec;
 }
 
 interface EncodingShelfProps extends EncodingShelfPropsBase, EncodingShelfDropTargetProps {};
@@ -84,7 +87,7 @@ class EncodingShelfBase extends React.PureComponent<
   }
 
   public render() {
-    const {id, connectDropTarget, fieldDef, valueDef, handleAction, mark} = this.props;
+    const {id, connectDropTarget, fieldDef, mainSpec, valueDef, handleAction, mark} = this.props;
 
     const isWildcardShelf = isWildcard(id.channel);
     return connectDropTarget(
@@ -103,6 +106,7 @@ class EncodingShelfBase extends React.PureComponent<
                     valueDef={valueDef}
                     handleAction={handleAction}
                     mark={mark}
+                    mainSpec={mainSpec}
                   /> :
                   <FieldCustomizer
                     shelfId={id}

src/components/encoding-pane/index.tsx

@@ -5,6 +5,7 @@ import * as CSSModules from 'react-css-modules';
 import {connect} from 'react-redux';
 import {Channel} from 'vega-lite/build/src/channel';
 import {FieldOneOfPredicate, FieldRangePredicate} from 'vega-lite/build/src/predicate';
+import {TopLevelFacetedUnitSpec} from 'vega-lite/build/src/spec';
 import {FilterAction} from '../../actions';
 import {ActionHandler} from '../../actions/index';
 import {createDispatchHandler} from '../../actions/redux-action';
@@ -13,7 +14,7 @@ import {ShelfAction, SPEC_CLEAR} from '../../actions/shelf';
 import {ShelfUnitSpec, State} from '../../models';
 import {VoyagerConfig} from '../../models/config';
 import {isShelfFieldDef, isShelfValueDef, ShelfFieldDef} from '../../models/shelf';
-import {selectConfig, selectDataset, selectShelfPreview} from '../../selectors';
+import {selectConfig, selectDataset, selectMainSpec, selectShelfPreview} from '../../selectors';
 import {selectSchemaFieldDefs} from '../../selectors/index';
 import {selectFilters, selectShelfSpec} from '../../selectors/shelf';
 import {FilterPane} from '../filter-pane';
@@ -34,6 +35,8 @@ interface EncodingPanelProps extends ActionHandler<ShelfAction | ResultAsyncActi
   fieldDefs: ShelfFieldDef[];
 
   config: VoyagerConfig;
+
+  mainSpec: TopLevelFacetedUnitSpec;
 }
 
 class EncodingPanelBase extends React.PureComponent<EncodingPanelProps, {}> {
@@ -108,7 +111,7 @@ class EncodingPanelBase extends React.PureComponent<EncodingPanelProps, {}> {
   private encodingShelf(channel: Channel) {
     // This one can't be wildcard, thus we use VL's Channel, not our ShelfChannel
 
-    const {handleAction, spec, specPreview, schema} = this.props;
+    const {handleAction, mainSpec, spec, specPreview, schema} = this.props;
     const {encoding} = specPreview || spec;
     const {mark} = specPreview || spec;
     const encodingChannel = encoding[channel];
@@ -121,6 +124,7 @@ class EncodingPanelBase extends React.PureComponent<EncodingPanelProps, {}> {
         handleAction={handleAction}
         valueDef={isShelfValueDef(encodingChannel) ? encodingChannel : undefined}
         mark={mark}
+        mainSpec={mainSpec}
       />
     );
   }
@@ -135,7 +139,7 @@ class EncodingPanelBase extends React.PureComponent<EncodingPanelProps, {}> {
   }
 
   private wildcardShelf(index: number) {
-    const {handleAction, spec, specPreview, schema} = this.props;
+    const {handleAction, spec, specPreview, schema, mainSpec} = this.props;
     const {anyEncodings} = specPreview || spec;
     const {mark} = specPreview || spec;
     const id = {
@@ -152,6 +156,7 @@ class EncodingPanelBase extends React.PureComponent<EncodingPanelProps, {}> {
         handleAction={handleAction}
         valueDef={undefined} // don't support constant value for wildcard shelf
         mark = {mark}
+        mainSpec={mainSpec}
       />
     );
   }
@@ -181,7 +186,8 @@ export const EncodingPane = connect(
       schema: selectDataset(state).schema,
       fieldDefs: selectSchemaFieldDefs(state),
       specPreview: selectShelfPreview(state).spec,
-      config: selectConfig(state)
+      config: selectConfig(state),
+      mainSpec: selectMainSpec(state)
     };
   },
   createDispatchHandler<ShelfAction>()

src/components/encoding-pane/value-customizer.tsx

@@ -3,6 +3,7 @@ import * as CSSModules from 'react-css-modules';
 import Form from 'react-jsonschema-form';
 import {debounce} from 'throttle-debounce';
 import {Channel} from 'vega-lite/build/src/channel';
+import {TopLevelFacetedUnitSpec} from 'vega-lite/build/src/spec';
 import {ActionHandler, SPEC_VALUE_CHANGE, SpecEncodingAction} from "../../actions";
 import {ShelfId, ShelfMark, ShelfValueDef} from "../../models";
 import * as styles from './value-customizer.scss';
@@ -12,6 +13,7 @@ export interface ValueCustomizerProps extends ActionHandler<SpecEncodingAction>
   shelfId: ShelfId;
   valueDef: ShelfValueDef;
   mark: ShelfMark;
+  mainSpec: TopLevelFacetedUnitSpec;
 }
 
 export class ValueCustomizerBase extends React.PureComponent<ValueCustomizerProps, {}> {
@@ -24,7 +26,7 @@ export class ValueCustomizerBase extends React.PureComponent<ValueCustomizerProp
   }
 
   public render() {
-    const {shelfId, valueDef, mark} = this.props;
+    const {shelfId, valueDef} = this.props;
     const formData = generateValueDefFormData(shelfId, valueDef) || {};
     const {schema, uiSchema} = generateValueEditorSchema(shelfId.channel as Channel);
     return (
@@ -35,20 +37,17 @@ export class ValueCustomizerBase extends React.PureComponent<ValueCustomizerProp
           formData={formData}
           onChange={this.changeValue}
         >
-          {mark !== '?' &&
-            <a onClick={this.resetValue}>Reset</a>
-          }
+          <a onClick={this.resetValue}>Reset</a>
           <button type="submit" style={{display: 'none'}}>Submit</button>
         </Form>
       </div>
     );
   }
 
   protected resetValue(e: any) {
-    // read default values of mark from VL
-    // Then call SPEC_VALUE_CHANGE with the corresponding valueDef
-    const {shelfId, handleAction, mark} = this.props;
-    const value = getDefaultsForChannel(shelfId.channel as Channel, mark);
+    const {shelfId, handleAction, mark, mainSpec} = this.props;
+    // If mark is set to auto, read from main spec
+    const value = getDefaultsForChannel(shelfId.channel as Channel, mark === '?' ? mainSpec.mark as ShelfMark : mark);
     const valueDef: ShelfValueDef = {value};
 
     handleAction({

src/selectors/shelf.ts

@@ -4,10 +4,10 @@ import {FieldOneOfPredicate, FieldRangePredicate} from 'vega-lite/build/src/pred
 import {GenericState, State, UndoableStateBase} from '../models/index';
 // tslint:enable:no-unused-variable
 
+import {isAutoCountQuery, isFieldQuery} from 'compassql/build/src/query/encoding';
 import {Query} from 'compassql/build/src/query/query';
 import {SpecQuery} from 'compassql/build/src/query/spec';
 import {createSelector} from 'reselect';
-import {isAutoCountQuery, isFieldQuery} from '../../node_modules/compassql/build/src/query/encoding';
 import {PlotTabState} from '../models';
 import {ShelfFilter} from '../models/shelf/filter';
 import {getDefaultGroupBy, Shelf, ShelfGroupBy, toQuery} from '../models/shelf/index';