LayerSettings: column based functions and defaults for #38

tgve · Apr 24, 2021 · 08a4815 · 08a4815
1 parent f588f36
commit 08a4815
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 26 deletions.
diff --git a/src/Welcome.js b/src/Welcome.js
@@ -301,12 +301,22 @@ export default class Welcome extends React.Component {
       getColor: getColorArray(cn || colorName)
     }, layerOptions);
 
+    // generate a domain
+    const domain = generateDomain(data, columnNameOrIndex);
+    const getValue = (d) => 
+    // initialazied with 1 so +columnNameOrIndex is safe
+    d.properties[+columnNameOrIndex ?
+      Object.keys(d.properties)[columnNameOrIndex] : columnNameOrIndex]
+
     if (layerStyle === 'heatmap') {
       options.getPosition = d => d.geometry.coordinates
       // options.getWeight = d => d.properties[columnNameOrIndex]
+      options.updateTriggers = {
+        // even if nulls
+        getWeight: [typeof(options.getWeight) === 'function' &&
+        data.map(d => options.getWeight(d))]
+      }
     }
-    // generate a domain
-    const domain = generateDomain(data, columnNameOrIndex);
     if (geomType === 'linestring') {
       layerStyle = "line"
       // https://github.com/uber/deck.gl/blob/master/docs/layers/line-layer.md
@@ -355,10 +365,6 @@ export default class Welcome extends React.Component {
 
     if (geomType === "polygon" || geomType === "multipolygon" ||
       layerStyle === 'geojson') {
-      const getValue = (d) => 
-      // initialazied with 1 so +columnNameOrIndex is safe
-      d.properties[+columnNameOrIndex ?
-        Object.keys(d.properties)[columnNameOrIndex] : columnNameOrIndex]
       const fill =  (d) => colorScale(
         +getValue(d) ? +getValue(d) : getValue(d),
         domain, 180, cn || this.state.colorName
@@ -392,8 +398,11 @@ export default class Welcome extends React.Component {
       //   d.properties.result.includes("gain from") ? 45 : 1
       options.getScale = 20
       options.updateTriggers = {
-        getRotationAngle: [data.map(d => d.properties[columnNameOrIndex])]
-        // TODOT: getWidth: 
+        // TODO: get the functions & spread them
+        getRotationAngle: [typeof(options.getRotationAngle) === 'function' &&
+          data.map(d => options.getRotationAngle(d))],
+        getWidth: [typeof(options.getWidth) === 'function' &&
+          data.map(d => options.getWidth(d))]
       }
     }
     const alayer = generateDeckLayer(

diff --git a/src/components/settings/LayerSettings.jsx b/src/components/settings/LayerSettings.jsx
@@ -85,8 +85,11 @@ export default function LayerSettings(props) {
           single={true}
           values={columnNames.map(e => ({ id: humanize(e), value: e }))}
           onSelectCallback={(selected) => {
+            console.log(key);
             const newValues = {...values, 
-            [key]: (d) => d.properties[selected[0].value]}
+              //is it resetting a key?
+            [key]: (d) => selected.length ? 
+            d.properties[selected[0].value] : options[key].default}
             setValues(newValues)
             typeof onLayerOptionsCallback === 'function' &&
               onLayerOptionsCallback(newValues)

diff --git a/src/components/settings/settingsUtils.js b/src/components/settings/settingsUtils.js
@@ -7,18 +7,18 @@ const addOptionsToObject = (opt, obj) => {
 }
 
 const makeObject = (type, min, max, def, step) => {
-  return({type, min, max, default: def, step})
+  return ({ type, min, max, default: def, step })
 }
 
 const getLayerProps = (name) => {
-  if(!isString(name)) return null
+  if (!isString(name)) return null
 
   const options = {
-    pickable: {type: 'boolean', value: true},
+    pickable: { type: 'boolean', value: true },
   }
   if (name === 'hex') {
     const hexObject = {
-      extruded: {type: 'boolean', value: true},
+      extruded: { type: 'boolean', value: true },
       // key: [type, min, max, step, default]
       radius: makeObject('number', 50, 1000, 100, 50),
       elevationScale: makeObject('number', 2, 8, 4, 2),
@@ -36,9 +36,9 @@ const getLayerProps = (name) => {
     return addOptionsToObject(options, scatterObj)
   } else if (name === 'geojson') {
     const geojsonObject = {
-      stroked: {type: 'boolean', value: false},
-      filled: {type: 'boolean', value: true},
-      lineWidthScale: makeObject('number', 20, 100, 20,5),
+      stroked: { type: 'boolean', value: false },
+      filled: { type: 'boolean', value: true },
+      lineWidthScale: makeObject('number', 20, 100, 20, 5),
       lineWidthMinPixels: makeObject('number', 2, 20, 2, 2),
       // getFillColor: [160, 160, 180, 200],
       // getLineColor: [255, 160, 180, 200],
@@ -55,12 +55,12 @@ const getLayerProps = (name) => {
       // iconMapping: mapping,
       // sizeScale: 'number',
       // getPosition: d => d.geometry.coordinates,
-      wrapLongitude: {type: 'boolean', value: false},
+      wrapLongitude: { type: 'boolean', value: false },
       // getIcon: d => 'marker-1',
       // getSize: d => 5,
       // getColor: d => [Math.sqrt(d.exits), 140, 0],
     }
-   return iconObject
+    return iconObject
   } else if (name === 'sgrid') {
     const sgridObject = {
       // getPosition: d => d.geometry.coordinates,
@@ -76,7 +76,7 @@ const getLayerProps = (name) => {
       elevationScale: makeObject('number', 4, 10, 4, 2),
     }
     return addOptionsToObject(options, gridObject)
-   } // else if (name === 'line') {
+  } // else if (name === 'line') {
   //   const lineObject = {
 
   //   }
@@ -95,11 +95,13 @@ const getLayerProps = (name) => {
   //   const pathObject = {
   //   }
   //   return addOptionsToObject(options, pathObject)
-  // } else if (name === 'heatmap') {
-  //   const heatObject = {
-
-  //   }
-  //   return addOptionsToObject(options, heatObject);
+  // } 
+  else if (name === 'heatmap') {
+    const heatObject = {
+      getWeight: { type: 'column', value: 'number', default: 1}
+    }
+    return addOptionsToObject(options, heatObject);
+  }
   // } else if (name === "scatterplot") {
   //   const scatterObject = {
   //   }
@@ -110,8 +112,8 @@ const getLayerProps = (name) => {
   //   return addOptionsToObject(options, textObject);
   else if (name === "barvis") {
     const barvisObject = {
-      getRotationAngle: {type: 'column', value: 'number'},
-      getWidth: {type: 'column', value: 'number'}
+      getRotationAngle: { type: 'column', value: 'number', default: 1},
+      getWidth: { type: 'column', value: 'number', default: 1}
     }
     return addOptionsToObject(options, barvisObject);
   }