tweak website input styling

website/package.json

@@ -13,8 +13,8 @@
     "lint": "eslint src --ignore-pattern workers"
   },
   "dependencies": {
-    "@loaders.gl/las": "^1.3.1",
     "@loaders.gl/draco": "^1.3.1",
+    "@loaders.gl/las": "^1.3.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@tweenjs/tween.js": "^16.7.0",
     "autobind-decorator": "^1.3.3",
@@ -27,7 +27,6 @@
     "marked": "^0.3.6",
     "pbf": "^3.2.0",
     "prop-types": "^15.5.8",
-    "supercluster": "^6.0.1",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
     "react-map-gl": "^5.0.0",
@@ -40,6 +39,7 @@
     "stats.js": "^0.17.0",
     "styletron-engine-atomic": "^1.4.0",
     "styletron-react": "^5.2.0",
+    "supercluster": "^6.0.1",
     "tagmap.js": "^1.1.1"
   },
   "devDependencies": {

website/src/components/demos/layer-demo-base.js

@@ -34,6 +34,10 @@ export default function createLayerDemoClass(settings) {
     if (params) {
       Object.keys(params).forEach(key => {
         props[key] = params[key].value;
+        if (key.startsWith('get')) {
+          props.updateTriggers = props.updateTriggers || {};
+          props.updateTriggers[key] = props[key];
+        }
       });
     }
 

website/src/components/input.js

@@ -2,7 +2,6 @@ import React, {PureComponent} from 'react';
 import autobind from 'autobind-decorator';
 
 export default class GenericInput extends PureComponent {
-
   @autobind _onChange(evt) {
     const {value, type} = evt.target;
     let newValue = value;
@@ -21,24 +20,36 @@ export default class GenericInput extends PureComponent {
     return this.props.onChange(this.props.name, newValue);
   }
 
+  @autobind _resetFunction() {
+    return this.props.onChange(this.props.name, this.props.altValue);
+  }
+
   render() {
     const {displayName, type, displayValue} = this.props;
     const props = {...this.props};
     delete props.displayName;
     delete props.displayValue;
+    delete props.altType;
+    delete props.altValue;
 
     if (type === 'link') {
-      return (<div className="input">
-        <label>{displayName}</label>
-        <a href={displayValue} target="_new">{displayValue}</a>
-      </div>);
+      return (
+        <div className="input">
+          <label>{displayName}</label>
+          <a href={displayValue} target="_new">
+            {displayValue}
+          </a>
+        </div>
+      );
     }
     if (type === 'function' || type === 'json') {
-      // non-editable
-      return (<div className="input">
-        <label>{displayName}</label>
-        <input type="text" disabled value={displayValue} />
-      </div>);
+      const editable = 'altValue' in this.props;
+      return (
+        <div className="input">
+          <label>{displayName}</label>
+          <button type="text" disabled={!editable} onClick={ this._resetFunction }>{displayValue}</button>
+        </div>
+      );
     }
 
     if (type === 'checkbox') {
@@ -48,11 +59,10 @@ export default class GenericInput extends PureComponent {
     return (
       <div className="input">
         <label>{displayName}</label>
-        <div className="tooltip">{displayName}: {displayValue}</div>
-        <input
-          {...props}
-          value={displayValue}
-          onChange={ this._onChange }/>
+        <div className="tooltip">
+          {displayName}: {displayValue}
+        </div>
+        <input {...props} value={displayValue} onChange={this._onChange} />
       </div>
     );
   }

website/src/stylesheets/_gallery.scss

@@ -121,6 +121,7 @@
   max-height: 96%;
   overflow-x: hidden;
   overflow-y: auto;
+  overflow-y: overlay;
   outline: none;
 
   hr {
@@ -140,6 +141,10 @@
     position: relative;
     width: 100%;
 
+    &:last-child {
+      margin-bottom: 20px;
+    }
+
     >* {
       vertical-align: middle;
       white-space: nowrap;
@@ -149,15 +154,29 @@
       width: 40%;
       margin-right: 10%;
       color: $black-40;
-      margin-bottom: 4px;
+      margin-top: 2px;
+      margin-bottom: 2px;
     }
-    input, a {
+    input, a, button {
+      background: #fff;
       font-size: 0.9em;
+      text-transform: none;
+      text-overflow: ellipsis;
+      overflow: hidden;
       display: inline-block;
       padding: 0 4px;
       width: 50%;
       height: 20px;
       line-height: 1.833;
+      text-align: left;
+    }
+    button {
+      color: initial;
+    }
+    button:disabled {
+      color: #aaa;
+      cursor: default;
+      background: #eee;
     }
     input {
       border: solid 1px #ccc;
@@ -267,9 +286,7 @@ code {
       transition: margin-top 300ms;
     }
     .options-panel {
-      .input, hr {
-        display: none;
-      }
+      overflow-y: hidden;
     }
   }
 }
@@ -330,6 +347,11 @@ code {
   .markdown-body {
     padding: 40px 12px 96px;
   }
+  .markdown .demo:not(:hover) .options-panel {
+    .input, hr {
+      display: none;
+    }
+  }
 }
 
 .icon-demo {

website/src/utils/format-utils.js

@@ -14,8 +14,13 @@ export const normalizeParam = p => {
       displayValue = displayValue.replace(/^function (\w+)?(\(.*?\))/, '$2 =>');
       // convert `d => {return 1}` to `d => 1`
       displayValue = displayValue.replace(/\{\s*return\s*(.*?);?\s*\}$/, '$1');
+      return {...p, displayValue};
+    }
+    if (p.altType) {
+      p.type = p.altType;
+    } else {
+      return {...p, displayValue};
     }
-    return {...p, displayValue};
   }
   if (p.type === 'json') {
     return {...p, displayValue: JSON.stringify(p.value)};

website/src/utils/layer-params.js

@@ -24,19 +24,35 @@ export function propToParam(key, propType, value) {
       param.min = propType && 'min' in propType ? propType.min : 0;
       param.max = propType && 'max' in propType ? propType.max : 100;
       return {...param, type: 'range', step: param.max === 100 ? 1 : 0.01};
-    case 'accessor':
-      return {...param, type: 'function'};
-    case 'string':
-      if (/\.(png|jpg|jpeg|gif)/i.test(value)) {
-        return {...param, type: 'link'};
+    case 'accessor': {
+      const result = {...param, type: 'function'};
+      let altValue = propType.value;
+      let altType = typeof altValue;
+      if (Array.isArray(altValue) && key.endsWith('Color')) {
+        altType = 'color';
       }
-      break;
+      if (altType === 'boolean' || altType === 'color') {
+        result.altType = altType;
+        result.altValue = altValue;
+      }
+      if (altType === 'number') {
+        result.altType = 'range';
+        result.altValue = altValue;
+        result.step = 1;
+        result.min = 0;
+        result.max = 100;
+      }
+      return result;
+    }
     case 'color':
       return {...param, type: 'color'};
     case 'object':
       if (/mapping|domain|range/i.test(key)) {
         return {...param, type: 'json'};
       }
+      if (propType.async) {
+        return {...param, type: 'link'};
+      }
       break;
     default:
   }
@@ -57,7 +73,11 @@ export function getLayerParams(layer, propParameters = {}) {
       paramsArray.push({name: key, ...propParameters[key]});
     } else {
       const LAYER_PROPTYPES = layer.constructor._propTypes[key];
-      const param = propToParam(key, LAYER_PROPTYPES, layer.props[key]);
+      const param = propToParam(
+        key,
+        LAYER_PROPTYPES,
+        layer.props._asyncPropOriginalValues[key] || layer.props[key]
+      );
       if (param) {
         paramsArray.push(param);
       }