WIP -- Value Def Customization UI

package.json

@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "ajv": "^5.2.2",
-    "compassql": "0.20.2",
+    "compassql": "0.20.3",
     "font-awesome": "^4.7.0",
     "font-awesome-sass-loader": "^1.0.3",
     "isomorphic-fetch": "^2.2.1",

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

@@ -5,6 +5,7 @@ import * as CSSModules from 'react-css-modules';
 import {ConnectDropTarget, DropTarget, DropTargetCollector, DropTargetSpec} from 'react-dnd';
 import * as TetherComponent from 'react-tether';
 import {contains} from 'vega-lite/build/src/util';
+import {isValueDef} from '../../../node_modules/vega-lite/build/src/fielddef';
 import {ActionHandler} from '../../actions/index';
 import {
   SPEC_FIELD_ADD, SPEC_FIELD_MOVE, SPEC_FIELD_REMOVE, SPEC_FUNCTION_ADD_WILDCARD,
@@ -21,6 +22,7 @@ import * as styles from './encoding-shelf.scss';
 import {FieldCustomizer} from './field-customizer';
 import {FunctionPicker, FunctionPickerWildcardHandler} from './function-picker';
 import {CUSTOMIZABLE_ENCODING_CHANNELS} from './property-editor-schema';
+import {ValueCustomizer} from './value-customizer';
 
 /**
  * Props for react-dnd of EncodingShelf
@@ -50,7 +52,7 @@ export interface EncodingShelfState {
 }
 class EncodingShelfBase extends React.PureComponent<
   EncodingShelfProps, EncodingShelfState
-> implements FunctionPickerWildcardHandler {
+  > implements FunctionPickerWildcardHandler {
   private fieldCustomizer: HTMLElement;
   private encodingShelf: HTMLElement;
 
@@ -79,7 +81,7 @@ class EncodingShelfBase extends React.PureComponent<
   }
 
   public render() {
-    const {id, connectDropTarget, fieldDef, handleAction} = this.props;
+    const {id, connectDropTarget, fieldDef, valueDef, handleAction} = this.props;
 
     const isWildcardShelf = isWildcard(id.channel);
     const channelName = isWildcardShelf ? 'any' : id.channel;
@@ -91,27 +93,35 @@ class EncodingShelfBase extends React.PureComponent<
             attachment="top left"
             targetAttachment="bottom left"
           >
-            {(fieldDef && !isWildcardChannelId(id) && contains(CUSTOMIZABLE_ENCODING_CHANNELS, id.channel)) ?
+            {(!isWildcardChannelId(id) && contains(CUSTOMIZABLE_ENCODING_CHANNELS, id.channel)) ?
               <span onClick={this.toggleCustomizer} ref={this.fieldHandler}>
-                {channelName}{' '} <i className={'fa fa-caret-down'}/>
+                {channelName}{' '} <i className={'fa fa-caret-down'} />
               </span> :
               <span>
                 {channelName}
               </span>
             }
 
             {this.state.customizerIsOpened &&
-            <div ref={this.popupRefHandler}>
-              <FieldCustomizer
-                shelfId={id}
-                fieldDef={fieldDef}
-                handleAction={handleAction}
-              />
-            </div>
+              <div ref={this.popupRefHandler}>
+                { (!fieldDef && !valueDef) || isValueDef(valueDef) ?
+                  <ValueCustomizer
+                    shelfId={id}
+                    valueDef={valueDef}
+                    handleAction={handleAction}
+                  /> :
+                  <FieldCustomizer
+                    shelfId={id}
+                    fieldDef={fieldDef}
+                    handleAction={handleAction}
+                  />
+                }
+              </div>
             }
           </TetherComponent>
         </div>
-        {fieldDef ? this.renderField() : this.renderFieldPlaceholder()}
+        {valueDef && valueDef.value ? this.renderFieldPlaceholder() : fieldDef ? this.renderField() :
+          this.renderFieldPlaceholder()}
       </div>
     );
   }

src/components/encoding-pane/property-editor-schema.ts

@@ -59,7 +59,8 @@ export interface PropertyEditorSchema {
 }
 
 // Currently supported customizble encoding channels that display caret in customizer UI
-export const CUSTOMIZABLE_ENCODING_CHANNELS = [Channel.X, Channel.Y, Channel.COLOR, Channel.SIZE, Channel.SHAPE];
+export const CUSTOMIZABLE_ENCODING_CHANNELS = [Channel.X, Channel.Y, Channel.COLOR, Channel.SIZE, Channel.SHAPE,
+  Channel.TEXT];
 
 // ------------------------------------------------------------------------------
 // Channel-Field Indexes for custom encoding
@@ -232,7 +233,28 @@ function getSupportedScaleTypes(channel: Channel, fieldDef: ShelfFieldDef): stri
   }
 }
 
-function generateSelectSchema(propertyKey: string, enumVals: string[], title: string) {
+export function generateColorPickerSchema(propertyKey: string, title: string) {
+  const schema: ObjectSchema = {
+    type: 'object',
+    properties: {
+      [propertyKey]: {
+        type: 'string',
+        title: title,
+        default: '#151ce6'
+      }
+    }
+  };
+
+  const uiSchema: UISchema = {
+    [propertyKey]: {
+      'ui:widget': 'color'
+    }
+  };
+
+  return {schema, uiSchema};
+}
+
+export function generateSelectSchema(propertyKey: string, enumVals: string[], title: string) {
   const schema: ObjectSchema = {
     type: 'object',
     properties: {
@@ -255,8 +277,8 @@ function generateSelectSchema(propertyKey: string, enumVals: string[], title: st
   return {schema, uiSchema};
 }
 
-function generateTextBoxSchema(propKey: string, placeHolderText: string, title: string,
-                               primitiveType: 'string' | 'number') {
+export function generateTextBoxSchema(propKey: string, placeHolderText: string, title: string,
+                                      primitiveType: 'string' | 'number') {
   const schema: ObjectSchema = {
     type: 'object',
     properties: {
@@ -276,6 +298,25 @@ function generateTextBoxSchema(propKey: string, placeHolderText: string, title:
   return {schema, uiSchema};
 }
 
+export function generateSliderSchema(propKey: string, min: number, max: number) {
+  const schema: ObjectSchema = {
+    type: 'object',
+    properties: {
+      [propKey]: {
+        title: propKey,
+        type: 'number'
+      } as SchemaProperty
+    }
+  };
+  const uiSchema: UISchema = {
+    [propKey]: {
+      "ui:widget": "range"
+    }
+  };
+
+  return {schema, uiSchema};
+}
+
 export function getFieldPropertyGroupIndex(shelfId: ShelfId, fieldDef: ShelfFieldDef) {
   if (fieldDef && (shelfId.channel === Channel.X || shelfId.channel === Channel.Y)) {
     switch (fieldDef.type) {
@@ -306,7 +347,7 @@ export function getFieldPropertyGroupIndex(shelfId: ShelfId, fieldDef: ShelfFiel
   }
 }
 
-export function generateFormData(shelfId: ShelfId, fieldDef: ShelfFieldDef) {
+export function generateFieldDefFormData(shelfId: ShelfId, fieldDef: ShelfFieldDef) {
   const index = getFieldPropertyGroupIndex(shelfId, fieldDef);
   const formDataIndex = {};
   for (const key of Object.keys(index)) {

src/components/encoding-pane/property-editor.tsx

@@ -7,7 +7,7 @@ import {Channel} from 'vega-lite/build/src/channel';
 import {ActionHandler} from '../../actions';
 import {SPEC_FIELD_NESTED_PROP_CHANGE, SPEC_FIELD_PROP_CHANGE, SpecEncodingAction} from '../../actions/shelf';
 import {isWildcardChannelId, ShelfFieldDef, ShelfId} from '../../models/shelf/spec';
-import {generateFormData, generatePropertyEditorSchema, isContinuous} from './property-editor-schema';
+import {generateFieldDefFormData, generatePropertyEditorSchema, isContinuous} from './property-editor-schema';
 import * as styles from './property-editor.scss';
 
 export interface PropertyEditorProps extends ActionHandler<SpecEncodingAction> {
@@ -31,7 +31,7 @@ export class PropertyEditorBase extends React.PureComponent<PropertyEditorProps,
     if (!isWildcardChannelId(shelfId)) {
       const {schema, uiSchema} = generatePropertyEditorSchema(prop, nestedProp, propTab, fieldDef,
         shelfId.channel as Channel);
-      const formData = generateFormData(shelfId, fieldDef);
+      const formData = generateFieldDefFormData(shelfId, fieldDef);
       return (
         <div styleName="property-editor">
           <Form

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

@@ -0,0 +1,55 @@
+.value-customizer {
+  background-color: #eee;
+  border-bottom: 5px solid #eee;
+  border-radius: 3px;
+  width: 190px;
+
+  select {
+    font-size: 10px;
+  }
+
+  fieldset {
+    border: 0;
+    padding-bottom: 10px;
+    padding-top: 10px;
+  }
+
+  form {
+    height: 3.1em;
+  }
+
+  select option{
+    font-size: 10px;
+  }
+
+  option {
+    font-size: 11px;
+  }
+
+  label {
+    display: inline-block;
+    font-size: 11px !important; // cannot access react-form's css attributes, so have to use important
+    padding-right: 10px;
+    text-align: left;
+    width: 75px;
+  }
+
+  ul {
+    border-bottom: 1px solid #aaa;
+    margin: 0 0;
+    padding: 2px;
+    height: 18px;
+  }
+
+  li {
+    display: inline-block;
+    border: 1px solid transparent;
+    border-bottom: none;
+    bottom: -1px;
+    position: relative;
+    list-style: none;
+    padding: 2px 10px;
+    cursor: pointer;
+    font-size: 12px;
+  }
+}

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import * as CSSModules from 'react-css-modules';
+import Form from 'react-jsonschema-form';
+import {debounce} from 'throttle-debounce';
+import {Channel} from '../../../node_modules/vega-lite/build/src/channel';
+import {ActionHandler, SPEC_VALUE_CHANGE, SpecEncodingAction} from "../../actions";
+import {ShelfId, ShelfValueDef} from "../../models";
+import * as styles from './value-customizer.scss';
+import {generateValueDefFormData, generateValueEditorSchema} from './value-editor-schema';
+
+export interface ValueCustomizerProps extends ActionHandler<SpecEncodingAction> {
+  shelfId: ShelfId;
+  valueDef: ShelfValueDef;
+}
+
+export class ValueCustomizerBase extends React.PureComponent<ValueCustomizerProps, {}> {
+
+  constructor(props: ValueCustomizerProps) {
+    super(props);
+    this.changeValue = this.changeValue.bind(this);
+    this.changeValue = debounce(500, this.changeValue);
+  }
+  public render() {
+    const {shelfId, valueDef} = this.props;
+    // TODO: refactor to generic function to generate schema & uischema
+    const formData = generateValueDefFormData(shelfId, valueDef) || {};
+    const {schema, uiSchema} = generateValueEditorSchema(shelfId.channel as Channel);
+    return (
+      <div styleName="value-customizer">
+        <Form
+          schema={schema}
+          uiSchema={uiSchema}
+          formData={formData}
+          onChange={this.changeValue}
+        >
+          <button type="submit" style={{display: 'none'}}>Submit</button>
+        </Form>
+      </div>
+    );
+  }
+
+  protected changeValue(result: any) {
+    const value = result.formData[Object.keys(result.formData)[0]].toString();
+    const {shelfId, handleAction} = this.props;
+    const valueDef: ShelfValueDef = {value};
+
+    handleAction({
+      type: SPEC_VALUE_CHANGE,
+      payload: {
+        shelfId,
+        valueDef
+      }
+    });
+  }
+}
+
+export const ValueCustomizer = CSSModules(ValueCustomizerBase, styles);

src/components/encoding-pane/value-editor-schema.ts

@@ -0,0 +1,25 @@
+import {Channel} from "vega-lite/build/src/channel";
+import {ShelfId, ShelfValueDef} from "../../models";
+import {generateColorPickerSchema, generateSelectSchema,
+  generateSliderSchema, generateTextBoxSchema} from "./property-editor-schema";
+
+const SHAPE_VALUES = ['circle', 'square', 'cross', 'diamond', 'triangle-up', 'triangle-down', ];
+
+export function generateValueDefFormData(shelfId: ShelfId, valueDef: ShelfValueDef) {
+  return {[shelfId.channel.toString()]: valueDef ? valueDef.value : undefined};
+}
+
+export function generateValueEditorSchema(channel: Channel): any {
+  switch (channel) {
+    case 'color':
+      return generateColorPickerSchema(channel, undefined);
+    case 'shape':
+      return generateSelectSchema(channel, SHAPE_VALUES, undefined);
+    case 'text':
+      return generateTextBoxSchema(channel, 'Some Text...', undefined, 'string');
+    case 'size':
+      return generateSliderSchema(channel, 1, 100);
+    default:
+      return {};
+  }
+}

src/components/plot/index.tsx

@@ -24,7 +24,7 @@ import * as styles from './plot.scss';
 
 export interface PlotProps extends ActionHandler<
   ShelfAction | BookmarkAction | ShelfPreviewAction | ResultAction | LogAction
-> {
+  > {
   data: InlineData;
   filters: ShelfFilter[];
   fieldInfos?: PlotFieldInfo[];
@@ -137,7 +137,7 @@ export class PlotBase extends React.PureComponent<PlotProps, PlotState> {
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
         >
-          <VegaLite spec={spec} logger={this.plotLogger} data={data}/>
+          <VegaLite spec={spec} logger={this.plotLogger} data={data} />
         </div>
         {notesDiv}
       </div>
@@ -249,14 +249,16 @@ export class PlotBase extends React.PureComponent<PlotProps, PlotState> {
 
   private renderSortButton(channel: 'x' | 'y') {
     const {spec} = this.props;
-    const channelDef = spec.encoding[channel];
-    if (isFieldDef(channelDef) && isDiscrete(channelDef)) {
-      return <i
-        title='Sort'
-        className="fa fa-sort-alpha-asc"
-        styleName={channel === 'x' ? 'sort-x-command' : 'command'}
-        onClick={this.onSort.bind(this, channel)}
-      />;
+    if (spec.encoding) {
+      const channelDef = spec.encoding[channel];
+      if (isFieldDef(channelDef) && isDiscrete(channelDef)) {
+        return <i
+          title='Sort'
+          className="fa fa-sort-alpha-asc"
+          styleName={channel === 'x' ? 'sort-x-command' : 'command'}
+          onClick={this.onSort.bind(this, channel)}
+        />;
+      }
     }
     return undefined;
   }

src/queries/alternative-encodings.ts

@@ -1,6 +1,7 @@
 
 import {Query} from 'compassql/build/src/query/query';
 import {isWildcard, SHORT_WILDCARD} from 'compassql/build/src/wildcard';
+import {isValueQuery} from '../../node_modules/compassql/build/src/query/encoding';
 import {QueryCreator} from './base';
 import {makeWildcard} from './common';
 
@@ -16,7 +17,7 @@ export const alternativeEncodings: QueryCreator = {
         ...query.spec,
         mark: makeWildcard(mark),
         encodings: encodings.map(encQ => {
-          if (isWildcard(encQ.channel)) {
+          if (isWildcard(encQ.channel) || isValueQuery(encQ)) {
             return encQ;
           }
           return {