Add a checkbox to allow disable auto axis/scale inference (#68)

microsoft · Sep 21, 2018 · 1bd264c · 1bd264c
1 parent 6161ac2
commit 1bd264c
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 72 deletions.
diff --git a/sass/components/file_view.scss b/sass/components/file_view.scss
@@ -326,3 +326,21 @@
     }
   }
 }
+
+.charticulator__export-template-view {
+  .el-inference-item {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 2px;
+    .el-svg-icon {
+      display: inline-block;
+      vertical-align: top;
+      margin: 4px;
+    }
+
+    cursor: pointer;
+    &:hover {
+      background: $gray-210;
+    }
+  }
+}
diff --git a/src/app/template/index.ts b/src/app/template/index.ts
@@ -144,26 +144,32 @@ export class ChartTemplateBuilder {
             )) {
               if (mapping.type == "scale") {
                 const scaleMapping = mapping as Specification.ScaleMapping;
-                expressions.add(scaleMapping.expression);
-                if (item.kind == "glyph" || item.kind == "mark") {
-                  table = item.glyph.table;
-                  // Find the plot segment
-                  for (const ps of Prototypes.forEachObject(
-                    this.template.specification
-                  )) {
-                    if (
-                      ps.kind == "chart-element" &&
-                      Prototypes.isType(ps.object.classID, "plot-segment")
-                    ) {
-                      groupBy = (ps.chartElement as Specification.PlotSegment)
-                        .groupBy;
-                      break; // TODO: for now, we assume it's the first one
+                if (scaleMapping.scale == inference.objectID) {
+                  expressions.add(scaleMapping.expression);
+                  if (item.kind == "glyph" || item.kind == "mark") {
+                    table = item.glyph.table;
+                    // Find the plot segment
+                    for (const ps of Prototypes.forEachObject(
+                      this.template.specification
+                    )) {
+                      if (
+                        ps.kind == "chart-element" &&
+                        Prototypes.isType(ps.object.classID, "plot-segment")
+                      ) {
+                        groupBy = (ps.chartElement as Specification.PlotSegment)
+                          .groupBy;
+                        break; // TODO: for now, we assume it's the first one
+                      }
                     }
                   }
                 }
               }
             }
           }
+          if (expressions.size == 0) {
+            // Scale not used
+            continue;
+          }
           inference.scale.expressions = Array.from(expressions);
           if (!inference.dataSource) {
             inference.dataSource = {

diff --git a/src/app/views/file_view/export_view.tsx b/src/app/views/file_view/export_view.tsx
@@ -192,6 +192,56 @@ export class ExportTemplateView extends ContextedComponent<
     ));
   }
 
+  public renderInferences() {
+    const template = this.state.template;
+    if (template.inference.length == 0) {
+      return <p>(none)</p>;
+    }
+    return (
+      template.inference
+        // Only show axis and scale inferences
+        .filter(inference => inference.axis || inference.scale)
+        .map((inference, index) => {
+          let description = inference.description;
+          if (!description) {
+            if (inference.scale) {
+              const scaleName = findObjectById(
+                template.specification,
+                inference.objectID
+              ).properties.name;
+              description = `Auto domain and range for ${scaleName}`;
+            }
+            if (inference.axis) {
+              const objectName = findObjectById(
+                template.specification,
+                inference.objectID
+              ).properties.name;
+              description = `Auto axis range for ${objectName}/${inference.axis.property.toString()}`;
+            }
+          }
+          return (
+            <div
+              key={index}
+              className="el-inference-item"
+              onClick={() => {
+                inference.disableAuto = !inference.disableAuto;
+                this.setState({ template });
+              }}
+            >
+              <SVGImageIcon
+                url={
+                  inference.disableAuto
+                    ? R.getSVGIcon("checkbox/empty")
+                    : R.getSVGIcon("checkbox/checked")
+                }
+              />
+              <span className="el-text">{description}</span>
+            </div>
+          );
+        })
+    );
+  }
+
   public renderExposedProperties() {
     const result: JSX.Element[] = [];
     for (const p of this.state.template.properties) {
@@ -247,9 +297,11 @@ export class ExportTemplateView extends ContextedComponent<
 
   public render() {
     return (
-      <div>
+      <div className="charticulator__export-template-view">
         <h2>Data Mapping Slots</h2>
         {this.renderSlots()}
+        <h2>Axes and Scales</h2>
+        {this.renderInferences()}
         <h2>Exposed Properties</h2>
         {this.renderExposedProperties()}
         <h2>{this.props.exportKind} Properties</h2>

diff --git a/src/container/chart_template.ts b/src/container/chart_template.ts
@@ -230,32 +230,6 @@ export class ChartTemplate {
           inference.axis.expression,
           inference.dataSource.table
         );
-        let vector = getExpressionVector(
-          expression,
-          this.tableAssignment[inference.dataSource.table],
-          this.transformGroupBy(
-            inference.dataSource.groupBy,
-            inference.dataSource.table
-          )
-        );
-        if (inference.axis.additionalExpressions) {
-          for (const item of inference.axis.additionalExpressions) {
-            const expr = this.transformExpression(
-              item,
-              inference.dataSource.table
-            );
-            vector = vector.concat(
-              getExpressionVector(
-                expr,
-                this.tableAssignment[inference.dataSource.table],
-                this.transformGroupBy(
-                  inference.dataSource.groupBy,
-                  inference.dataSource.table
-                )
-              )
-            );
-          }
-        }
         const axisDataBinding = getProperty(
           object,
           axis.property
@@ -264,42 +238,72 @@ export class ChartTemplate {
         if (axisDataBinding.tickDataExpression) {
           axisDataBinding.tickDataExpression = null; // TODO: fixme
         }
-        if (axis.type == "categorical") {
-          const scale = new Scale.CategoricalScale();
-          scale.inferParameters(vector, "order");
-          axisDataBinding.categories = new Array<string>(scale.domain.size);
-          scale.domain.forEach((index, key) => {
-            axisDataBinding.categories[index] = key;
-          });
-        } else if (axis.type == "numerical") {
-          const scale = new Scale.LinearScale();
-          scale.inferParameters(vector);
-          axisDataBinding.domainMin = scale.domainMin;
-          axisDataBinding.domainMax = scale.domainMax;
-        }
-      }
-      if (inference.scale) {
-        const scale = inference.scale;
-        const expressions = scale.expressions.map(x =>
-          this.transformExpression(x, inference.dataSource.table)
-        );
-        const vectors = expressions.map(x =>
-          getExpressionVector(
-            x,
+        if (!inference.disableAuto) {
+          let vector = getExpressionVector(
+            expression,
             this.tableAssignment[inference.dataSource.table],
             this.transformGroupBy(
               inference.dataSource.groupBy,
               inference.dataSource.table
             )
-          )
-        );
-        const vector = vectors.reduce((a, b) => a.concat(b), []);
-        const scaleClass = Prototypes.ObjectClasses.Create(null, object, {
-          attributes: {}
-        }) as Prototypes.Scales.ScaleClass;
-        scaleClass.inferParameters(vector, {
-          reuseRange: true
-        });
+          );
+          if (inference.axis.additionalExpressions) {
+            for (const item of inference.axis.additionalExpressions) {
+              const expr = this.transformExpression(
+                item,
+                inference.dataSource.table
+              );
+              vector = vector.concat(
+                getExpressionVector(
+                  expr,
+                  this.tableAssignment[inference.dataSource.table],
+                  this.transformGroupBy(
+                    inference.dataSource.groupBy,
+                    inference.dataSource.table
+                  )
+                )
+              );
+            }
+          }
+          if (axis.type == "categorical") {
+            const scale = new Scale.CategoricalScale();
+            scale.inferParameters(vector, "order");
+            axisDataBinding.categories = new Array<string>(scale.domain.size);
+            scale.domain.forEach((index, key) => {
+              axisDataBinding.categories[index] = key;
+            });
+          } else if (axis.type == "numerical") {
+            const scale = new Scale.LinearScale();
+            scale.inferParameters(vector);
+            axisDataBinding.domainMin = scale.domainMin;
+            axisDataBinding.domainMax = scale.domainMax;
+          }
+        }
+      }
+      if (inference.scale) {
+        if (!inference.disableAuto) {
+          const scale = inference.scale;
+          const expressions = scale.expressions.map(x =>
+            this.transformExpression(x, inference.dataSource.table)
+          );
+          const vectors = expressions.map(x =>
+            getExpressionVector(
+              x,
+              this.tableAssignment[inference.dataSource.table],
+              this.transformGroupBy(
+                inference.dataSource.groupBy,
+                inference.dataSource.table
+              )
+            )
+          );
+          const vector = vectors.reduce((a, b) => a.concat(b), []);
+          const scaleClass = Prototypes.ObjectClasses.Create(null, object, {
+            attributes: {}
+          }) as Prototypes.Scales.ScaleClass;
+          scaleClass.inferParameters(vector, {
+            reuseRange: true
+          });
+        }
       }
       if (inference.nestedChart) {
         const { nestedChart } = inference;

diff --git a/src/core/specification/template.ts b/src/core/specification/template.ts
@@ -58,6 +58,9 @@ export interface Inference {
     table: string;
     groupBy?: Types.GroupBy;
   };
+  description?: string;
+  /** Disable any automatic domain/range/axis behavior */
+  disableAuto?: boolean;
 
   axis?: AxisInference;
   scale?: ScaleInference;