Custom Wildcard Field UI

src/components/data-pane/field-list.tsx

@@ -1,28 +1,33 @@
 import {ExpandedType} from 'compassql/build/src/query/expandedtype';
 import {PrimitiveType, Schema} from 'compassql/build/src/schema';
-import {isWildcard} from 'compassql/build/src/wildcard';
-import * as stringify from 'json-stable-stringify';
+import {isWildcard, isWildcardDef} from 'compassql/build/src/wildcard';
 import * as React from 'react';
 import * as CSSModules from 'react-css-modules';
 import {connect} from 'react-redux';
 import {OneOfFilter, RangeFilter} from 'vega-lite/build/src/filter';
 import {FilterAction} from '../../actions';
+import {CUSTOM_WILDCARD_ADD_FIELD, CustomWildcardAction} from '../../actions/custom-wildcard-field';
 import {DatasetSchemaChangeFieldType} from '../../actions/dataset';
 import {ActionHandler, createDispatchHandler} from '../../actions/redux-action';
 import {SPEC_FIELD_AUTO_ADD, SpecFieldAutoAdd} from '../../actions/shelf';
 import {FILTER_TOGGLE} from '../../actions/shelf/filter';
 import {FieldParentType} from '../../constants';
+import {CustomWildcardFieldDef} from '../../models/custom-wildcard-field';
 import {State} from '../../models/index';
 import {ShelfFieldDef} from '../../models/shelf';
 import {createDefaultFilter, filterHasField} from '../../models/shelf/filter';
 import {selectPresetWildcardFields, selectSchema, selectSchemaFieldDefs} from '../../selectors';
+import {selectCustomWildcardFieldDefs} from '../../selectors/index';
 import {selectFilters} from '../../selectors/shelf';
 import {Field} from '../field';
+import {DroppableField} from '../field/index';
 import * as styles from './field-list.scss';
 import {TypeChanger} from './type-changer';
+import {CustomWildcardFieldEditor} from './wildcard-field-editor';
 
 
-export interface FieldListProps extends ActionHandler<SpecFieldAutoAdd | DatasetSchemaChangeFieldType | FilterAction> {
+export interface FieldListProps extends ActionHandler<
+  CustomWildcardAction | SpecFieldAutoAdd | DatasetSchemaChangeFieldType | FilterAction> {
   fieldDefs: ShelfFieldDef[];
   schema: Schema;
   filters: Array<RangeFilter | OneOfFilter>;
@@ -39,20 +44,8 @@ class FieldListBase extends React.PureComponent<FieldListProps, {}> {
   }
 
   public render() {
-    const {fieldDefs, schema} = this.props;
-    const fieldItems = fieldDefs.map(fieldDef => {
-      let primitiveType;
-      if (!isWildcard(fieldDef.field)) {
-        primitiveType = schema.primitiveType(fieldDef.field);
-      }
-      const hideTypeChanger = this.getValidTypes(primitiveType).length < 2;
-      const key = isWildcard(fieldDef.field) ? stringify(fieldDef) : fieldDef.field;
-      return (
-        <div key={key} styleName="field-list-item">
-          {this.renderComponent(fieldDef, hideTypeChanger, primitiveType)}
-        </div>
-      );
-    });
+    const {fieldDefs} = this.props;
+    const fieldItems = fieldDefs.map((fieldDef, index) => this.renderListItem(fieldDef, index));
     return (
       <div styleName='field-list'>
         {fieldItems}
@@ -87,38 +80,69 @@ class FieldListBase extends React.PureComponent<FieldListProps, {}> {
     return createDefaultFilter(fieldDef, domain);
   }
 
-  private renderComponent(fieldDef: ShelfFieldDef, hideTypeChanger: boolean, primitiveType: PrimitiveType) {
-    if (hideTypeChanger) {
-      return this.renderField(fieldDef);
-    } else {
-      const popupComponent = this.renderTypeChanger(fieldDef, primitiveType);
-      return this.renderField(fieldDef, popupComponent);
-    }
-  }
+  private renderListItem(fieldDef: ShelfFieldDef, index: number) {
+    const {schema, filters, handleAction} = this.props;
+
+    let popupComponent;
+    const isCustomWildcardField = isWildcardDef(fieldDef.field);
 
-  private renderTypeChanger(fieldDef: ShelfFieldDef, primitiveType: PrimitiveType) {
-    const {handleAction} = this.props;
     if (!isWildcard(fieldDef.field)) {
-      return (
-        <TypeChanger
-          field={fieldDef.field}
-          type={fieldDef.type}
-          validTypes={this.getValidTypes(primitiveType)}
-          handleAction={handleAction}
-        />
-      );
+      const primitiveType = schema.primitiveType(fieldDef.field);
+
+      if (this.getValidTypes(primitiveType).length < 2) {
+        popupComponent = this.renderTypeChanger(fieldDef, primitiveType);
+      }
+    } else {
+      if (isCustomWildcardField) {
+        popupComponent = (
+          <CustomWildcardFieldEditor
+            customWildcardFielddef={fieldDef as CustomWildcardFieldDef}
+            index={index}
+            handleAction={handleAction}
+          />
+        );
+      }
     }
-  }
 
-  private renderField(fieldDef: ShelfFieldDef, popupComponent?: JSX.Element) {
-    const {schema, filters} = this.props;
     const filter = {
       active: !isWildcard(fieldDef.field) && filterHasField(filters, fieldDef.field),
       onToggle: this.onFilterToggle
     };
 
-    return (
-      <Field
+    function onDrop(droppedFieldDef: ShelfFieldDef) {
+      const type = fieldDef.type;
+
+      if (droppedFieldDef.field === '*') {
+        window.alert('Cannot add COUNT');
+      } else if (type === droppedFieldDef.type) {
+        let fields: string[];
+        if (isWildcard(droppedFieldDef.field)) {
+          if (droppedFieldDef.field === '?') {
+            fields = schema.fieldNames()
+                       .filter(field => schema.vlType(field) === type);
+          } else {
+            fields = droppedFieldDef.field.enum.concat([]);
+          }
+        } else {
+          fields = [droppedFieldDef.field];
+        }
+
+        handleAction({
+          type: CUSTOM_WILDCARD_ADD_FIELD,
+          payload: {
+            fields,
+            index
+          }
+        });
+      } else {
+        window.alert('Cannot create a wildcard that mixes multiple types');
+      }
+    }
+
+    const FieldComponent = isCustomWildcardField ? DroppableField : Field;
+
+    const field = (
+      <FieldComponent
         fieldDef={fieldDef}
         isPill={true}
         draggable={true}
@@ -128,9 +152,30 @@ class FieldListBase extends React.PureComponent<FieldListProps, {}> {
         popupComponent={popupComponent}
         onDoubleClick={this.onAdd}
         onAdd={this.onAdd}
+        onDrop={isCustomWildcardField ? onDrop : undefined}
         schema={schema}
       />
     );
+
+    return (
+      <div key={index} styleName="field-list-item">
+        {field}
+      </div>
+    );
+  }
+
+  private renderTypeChanger(fieldDef: ShelfFieldDef, primitiveType: PrimitiveType) {
+    const {handleAction} = this.props;
+    if (!isWildcard(fieldDef.field)) {
+      return (
+        <TypeChanger
+          field={fieldDef.field}
+          type={fieldDef.type}
+          validTypes={this.getValidTypes(primitiveType)}
+          handleAction={handleAction}
+        />
+      );
+    }
   }
 
   private getValidTypes(primitiveType: PrimitiveType): ExpandedType[] {
@@ -170,8 +215,22 @@ export const PresetWildcardFieldList = connect(
   (state: State) => {
     return {
       fieldDefs: selectPresetWildcardFields(state),
-      schema: selectSchema(state)
+      schema: selectSchema(state),
+      filters: selectFilters(state)
     };
   },
   createDispatchHandler<SpecFieldAutoAdd>()
 )(FieldListRenderer);
+
+
+export const CustomWildcardFieldList = connect(
+  (state: State) => {
+    return {
+      // Somehow TS does not infer type that CustomWildcardFieldDefs can be a ShelfFieldDef
+      fieldDefs: selectCustomWildcardFieldDefs(state) as ShelfFieldDef[],
+      schema: selectSchema(state),
+      filters: selectFilters(state)
+    };
+  },
+  createDispatchHandler<SpecFieldAutoAdd | CustomWildcardAction>()
+)(FieldListRenderer);

src/components/data-pane/index.tsx

@@ -1,20 +1,27 @@
+import {Schema} from 'compassql/build/src/schema';
 import * as React from 'react';
 import * as CSSModules from 'react-css-modules';
 import {connect} from 'react-redux';
+import {CustomWildcardAction} from '../../actions/custom-wildcard-field';
+import {ActionHandler, createDispatchHandler} from '../../actions/redux-action';
 import {Dataset, State} from '../../models';
 import {VoyagerConfig} from '../../models/config';
 import {selectConfig, selectDataset} from '../../selectors/';
+import {selectSchema} from '../../selectors/dataset';
 import {DataSelector} from '../data-selector';
 import * as styles from './data-pane.scss';
-import {FieldList, PresetWildcardFieldList} from './field-list';
+import {CustomWildcardFieldList, FieldList, PresetWildcardFieldList} from './field-list';
+import {CustomWildcardFieldDropZone} from './wildcard-field-drop-zone';
 
-export interface DataPanelProps {
-  data: Dataset;
+export interface DataPanelProps extends ActionHandler<CustomWildcardAction> {
   config: VoyagerConfig;
+  data: Dataset;
+  schema: Schema;
 }
 
 export class DataPaneBase extends React.PureComponent<DataPanelProps, {}> {
   public render() {
+    const {schema, handleAction} = this.props;
     const {name} = this.props.data;
     const fieldCount = this.props.data.schema.fieldSchemas.length;
     const {showDataSourceSelector, manualSpecificationOnly} = this.props.config;
@@ -29,8 +36,14 @@ export class DataPaneBase extends React.PureComponent<DataPanelProps, {}> {
       <div styleName="data-pane-section">
         <h3>Wildcard Fields</h3>
         <PresetWildcardFieldList/>
+        <CustomWildcardFieldList/>
+        <CustomWildcardFieldDropZone
+          schema={schema}
+          handleAction={handleAction}
+        />
       </div>
     );
+
     return (
       <div className="pane" styleName="data-pane">
         <h2 styleName="data-pane-title">Data</h2>
@@ -54,8 +67,10 @@ export class DataPaneBase extends React.PureComponent<DataPanelProps, {}> {
 export const DataPane = connect(
   (state: State) => {
     return {
+      config: selectConfig(state),
       data: selectDataset(state),
-      config: selectConfig(state)
+      schema: selectSchema(state)
     };
-  }
+  },
+  createDispatchHandler<CustomWildcardAction>()
 )(CSSModules(DataPaneBase, styles));

src/components/data-pane/wildcard-field-drop-zone.scss

@@ -0,0 +1,23 @@
+.drop-zone {
+  color: white;
+  height: 24px;
+  text-align: center;
+  padding: 5px;
+}
+
+.drop-zone-is-over {
+  @extend .drop-zone;
+  border: 1px dashed #4CAF50;
+}
+
+.drop-zone-can-drop {
+  @extend .drop-zone;
+  font-size: 11px;
+  border: 1px dashed #8ebdc7;
+  padding: 0 .5em;
+  background-color: rgba(187,243,255,.9);
+  height: 20px;
+  line-height: 20px;
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+}