From 148f64c2618e68a8f9e4d8943316c6ed095b9f35 Mon Sep 17 00:00:00 2001
From: pjsier <pjsier@gmail.com>
Date: Tue, 10 Oct 2017 10:30:06 -0500
Subject: [PATCH] Restrict data function types, reorder buttons

Checking the Mapbox style spec properties to see whether or not
exponential should be allowed as the property type, defaulting to
categorical which appears to work for either type. Also re-orders zoom
and data function buttons, aligning zoom right if data not supplied.
---
 src/components/fields/ZoomSpecField.jsx | 23 ++++++++++++++++-------
 src/styles/_components.scss             |  5 +++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx
index 44686dc1..b045c057 100644
--- a/src/components/fields/ZoomSpecField.jsx
+++ b/src/components/fields/ZoomSpecField.jsx
@@ -47,7 +47,7 @@ export default class ZoomSpecProperty  extends React.Component {
     const lastStop = stops[stops.length - 1]
     if (typeof lastStop[0] === "object") {
       stops.push([
-        {zoom: lastStop[0].zoom, value: lastStop[0].value},
+        {zoom: lastStop[0].zoom + 1, value: lastStop[0].value},
         lastStop[1]
       ])
     }
@@ -89,10 +89,19 @@ export default class ZoomSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
+  getDataFunctionTypes(functionType) {
+    if (functionType === "interpolated") {
+      return ["categorical", "interval", "exponential"]
+    }
+    else {
+      return ["categorical", "interval"]
+    }
+  }
+
   makeDataFunction() {
     const dataFunc = {
       property: "",
-      type: "exponential",
+      type: "categorical",
       stops: [
         [{zoom: 6, value: 0}, this.props.value],
         [{zoom: 10, value: 0}, this.props.value]
@@ -180,13 +189,13 @@ export default class ZoomSpecProperty  extends React.Component {
         <div className="maputnik-data-spec-property-group">
           <DocLabel
             label="Type"
-            doc={"Select a type of data scale (default is 'exponential')."}
+            doc={"Select a type of data scale (default is 'categorical')."}
           />
           <div className="maputnik-data-spec-property-input">
             <SelectInput
-              value={this.props.value.type || "exponential"}
+              value={this.props.value.type}
               onChange={propVal => this.changeDataProperty("type", propVal)}
-              options={["exponential", "interval", "categorical", "identity"]}
+              options={this.getDataFunctionTypes(this.props.fieldSpec.function)}
             />
           </div>
         </div>
@@ -307,7 +316,7 @@ function MakeFunctionButtons(props) {
       />
     </Button>
 
-    if (props.fieldSpec['property-function']) {
+    if (props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(props.fieldSpec['function']) !== -1) {
       makeDataButton = <Button
         className="maputnik-make-data-function"
         onClick={props.onDataClick}
@@ -319,7 +328,7 @@ function MakeFunctionButtons(props) {
         />
       </Button>
     }
-    return <div>{makeZoomButton}{makeDataButton}</div>
+    return <div>{makeDataButton}{makeZoomButton}</div>
   }
   else {
     return null
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 67310214..12415faa 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -40,6 +40,7 @@
 
 .maputnik-doc-target:hover .maputnik-doc-popup {
   display: block;
+  text-align: left;
 }
 
 // BUTTON
@@ -112,6 +113,10 @@
     display: inline-block;
     width: 15%;
   }
+
+  .maputnik-input-block-action > div {
+    text-align: right;
+  }
 }
 
 // SPACE HELPER