website bug fixes

visgl · Jun 3, 2019 · b72f908 · b72f908
1 parent be6b446
commit b72f908
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 81 deletions.
diff --git a/docs/layers/column-layer.md b/docs/layers/column-layer.md
@@ -34,7 +34,8 @@ const App = ({data, viewport}) => {
     pickable: true,
     elevationScale: 5000,
     getPosition: d => d.centroid,
-    getColor: d => [48, 128, d.value * 255, 255],
+    getFillColor: d => [48, 128, d.value * 255, 255],
+    getLineColor: [0, 0, 0],
     getElevation: d => d.value,
     onHover: ({object, x, y}) => {
       const tooltip = `height: ${object.value * 5000}m`;

diff --git a/docs/whats-new.md b/docs/whats-new.md
@@ -8,27 +8,27 @@ Release Date: 2019
 
 ### Post-processing Effects
 
-A new [PostProcessEffect](/docs/effects/post-process-effect.md) class, working with `@luma.gl/effects` module,  offers screen-space post-processing effects such as blur, noise, halftone, ink, etc.
+A new [PostProcessEffect](/docs/effects/post-process-effect.md) class, working with ` @luma.gl/effects` module,  offers screen-space post-processing effects such as blur, noise, halftone, ink, etc.
 
 <table style="border: 0;" align="center">
   <tbody>
     <tr>
       <td>
-        <img height=240 src="https://raw.github.com/uber-common/deck.gl-data/master/images/samples/post-processing/noise.jpg" />
+        <img style="max-height:240px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/samples/post-processing/noise.jpg" />
         <p><i>noise effect</i></p>
       </td>
       <td>
-        <img height=240 src="https://raw.github.com/uber-common/deck.gl-data/master/images/samples/post-processing/colorhalftone.gif" />
+        <img style="max-height:240px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/samples/post-processing/colorhalftone.gif" />
         <p><i>colorHalftone effect</i></p>
       </td>
     </tr>
     <tr>
       <td>
-        <img height=240 src="https://raw.github.com/uber-common/deck.gl-data/master/images/samples/post-processing/tiltshift.jpg" />
+        <img style="max-height:240px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/samples/post-processing/tiltshift.jpg" />
         <p><i>tiltShift effect</i></p>
       </td>
       <td>
-        <img height=240 src="https://raw.github.com/uber-common/deck.gl-data/master/images/samples/post-processing/zoomblur.jpg" />
+        <img style="max-height:240px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/samples/post-processing/zoomblur.jpg" />
         <p><i>zoomBlur effect</i></p>
       </td>
     </tr>
@@ -98,43 +98,43 @@ Release Date: April 19, 2019
   <tbody>
     <tr>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/bitmap-layer.png" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/bitmap-layer.png" />
         <p><i>BitmapLayer</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/column-layer.png" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/column-layer.png" />
         <p><i>ColumnLayer</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/tile-layer.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/tile-layer.gif" />
         <p><i>TileLayer</i></p>
       </td>
     </tr>
     <tr>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/s2-layer.png" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/s2-layer.png" />
         <p><i>S2Layer</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/h3-layer.png" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/h3-layer.png" />
         <p><i>H3HexagonLayer</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/h3-cluster-layer.png" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/h3-cluster-layer.png" />
         <p><i>H3ClusterLayer</i></p>
       </td>
     </tr>
     <tr>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/trips-layer.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/trips-layer.gif" />
         <p><i>TripsLayer</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/mesh-layer.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/mesh-layer.gif" />
         <p><i>ScenegraphLayer</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/great-circle-layer.png" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/great-circle-layer.png" />
         <p><i>GreatCircleLayer</i></p>
       </td>
     </tr>
@@ -188,21 +188,21 @@ We are releasing [loaders.gl](https://uber-web.github.io/loaders.gl/) as a major
   <tbody>
     <tr>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/ambient-light.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/ambient-light.gif" />
         <p><i>Ambient Light</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/point-light.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/point-light.gif" />
         <p><i>Point Light</i></p>
       </td>
     </tr>
     <tr>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/directional-light.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/directional-light.gif" />
         <p><i>Directional Light</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/camera-light.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/camera-light.gif" />
         <p><i>Camera Light</i></p>
       </td>
     </tr>
@@ -239,15 +239,15 @@ Release Date: Jan 29, 2019
   <tbody>
     <tr>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/deck64-sdf.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/deck64-sdf.gif" />
         <p><i>SDF font in TextLayer</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/deck64-scatterplot.jpg" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/deck64-scatterplot.jpg" />
         <p><i>Stroke and fill in ScatterplotLayer</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/deck64-isoband.jpg" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/deck64-isoband.jpg" />
         <p><i>Isoband in ContourLayer</i></p>
       </td>
     </tr>
@@ -297,11 +297,11 @@ Release Date: Oct 15, 2018
   <tbody>
     <tr>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/new-projection-mode.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/new-projection-mode.gif" />
         <p><i>32-bit High-Precision Projection</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/mapbox-layers.jpg" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/mapbox-layers.jpg" />
         <p><i>Mixing Mapbox and deck.gl Layers</i></p>
       </td>
     </tr>
@@ -329,15 +329,15 @@ Release date: Sep 7, 2018
   <tbody>
     <tr>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/json-layers-thumb.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/json-layers-thumb.gif" />
         <p><i>JSON API</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/minimap-thumb.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/minimap-thumb.gif" />
         <p><i>Enhanced Multi-View API</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/contour-layer-cell-resize.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/contour-layer-cell-resize.gif" />
         <p><i>ContourLayer</i></p>
       </td>
     </tr>
@@ -388,15 +388,15 @@ Release date: July 18, 2018
   <tbody>
     <tr>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/attribute-transition.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/attribute-transition.gif" />
         <p><i>GeoJson Transition</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/viewstateTransitionsFlyTo.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/viewstateTransitionsFlyTo.gif" />
         <p><i>ViewState flyTo Transitions</i></p>
       </td>
       <td>
-        <img height=200 src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/GPUAcceleratedScreenGridAggregation.gif" />
+        <img style="max-height:200px" src="https://raw.github.com/uber-common/deck.gl-data/master/images/whats-new/GPUAcceleratedScreenGridAggregation.gif" />
         <p><i>GPU Accelerated ScreenGrid Layer</i></p>
       </td>
     </tr>

diff --git a/website/contents/pages.js b/website/contents/pages.js
@@ -160,6 +160,11 @@ export const showcasePages = generatePath([
     name: 'Overview',
     content: 'markdown/showcase.md'
   },
+  {
+    name: 'The Bad Bet',
+    external:
+      'https://features.propublica.org/the-bad-bet/how-illinois-bet-on-video-gambling-and-lost/'
+  },
   {
     name: 'SandDance',
     external: 'https://microsoft.github.io/SandDance/'

diff --git a/website/src/components/demos/layer-demos.js b/website/src/components/demos/layer-demos.js
@@ -45,7 +45,9 @@ export const ColumnLayerDemo = createLayerDemoClass({
     pickable: true,
     elevationScale: 5000,
     getPosition: d => d.centroid,
-    getColor: d => [48, 128, d.value * 255, 255],
+    getFillColor: d => [48, 128, d.value * 255, 255],
+    getLineColor: [0, 0, 0],
+    getLineWidth: 20,
     getElevation: d => d.value
   }
 });

diff --git a/website/src/static/images/showcase-propublica.jpg b/website/src/static/images/showcase-propublica.jpg
diff --git a/website/src/static/markdown/examples.md b/website/src/static/markdown/examples.md
@@ -80,7 +80,7 @@
     </div>
     <div class="thumb">
       <div class="bg-black" data-title="Taxi Trips in NYC" data-name="TripsLayer">
-        <a href="#/examples/custom-layers/trip-routes">
+        <a href="#/examples/core-layers/trips-layer">
           <img src="images/demo-thumb-trip.jpg" />
         </a>
         </div>

diff --git a/website/src/static/markdown/showcase.md b/website/src/static/markdown/showcase.md
@@ -1,6 +1,21 @@
 *Would you like us to feature your project? [Let us know](https://github.com/uber/deck.gl/issues)!*
 
 <div>
+  <div class="thumb">
+    <div data-title="The Bad Bet" >
+      <a href="https://features.propublica.org/the-bad-bet/how-illinois-bet-on-video-gambling-and-lost/" target="_blank" rel="noopener noreferrer">
+        <img src="images/showcase-propublica.jpg" />
+      </a>
+    </div>
+  </div>
+  <div class="thumb-desc">
+    <div>
+      <a href="https://features.propublica.org/the-bad-bet/how-illinois-bet-on-video-gambling-and-lost/" target="_blank" rel="noopener noreferrer"><h2>The Bad Bet</h2></a>
+      <p class="credit">By <a href="https://www.propublica.org/Illinois">ProPublica</a></p>
+      <p>Data journalists use deck.gl to visualize how the revenue generated by video gambling machines in Illinois grow over time and how those revenues failed to meet the projections of legislators.</p>
+    </div>
+  </div>
+
   <div class="thumb">
     <div data-title="SandDance" >
       <a href="https://microsoft.github.io/SandDance/" target="_blank" rel="noopener noreferrer">

diff --git a/website/src/stylesheets/_gallery.scss b/website/src/stylesheets/_gallery.scss
@@ -117,6 +117,9 @@
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
   margin: 24px;
   padding: 12px 24px;
+  max-height: 96%;
+  overflow-x: hidden;
+  overflow-y: auto;
   outline: none;
 
   hr {

diff --git a/website/src/utils/format-utils.js b/website/src/utils/format-utils.js
@@ -2,14 +2,19 @@ import {rgb} from 'd3-color';
 
 export const normalizeParam = p => {
   if (p.type === 'function') {
-    let displayValue = p.value.toString();
-    // pretty print function code:
-    // convert `function funcName(d) {...}` to `d => {...}`
-    displayValue = displayValue.replace(/^function (\w+)?\((\w*?)\)/, '$2 =>');
-    // convert `function funcName(d, i) {...}` to `(d, i) => {...}`
-    displayValue = displayValue.replace(/^function (\w+)?(\(.*?\))/, '$2 =>');
-    // convert `d => {return 1}` to `d => 1`
-    displayValue = displayValue.replace(/\{\s*return\s*(.*?);?\s*\}$/, '$1');
+    let displayValue = String(p.value);
+    if (Array.isArray(p.value)) {
+      displayValue = `[${displayValue}]`;
+    }
+    if (typeof p.value === 'function') {
+      // pretty print function code:
+      // convert `function funcName(d) {...}` to `d => {...}`
+      displayValue = displayValue.replace(/^function (\w+)?\((\w*?)\)/, '$2 =>');
+      // convert `function funcName(d, i) {...}` to `(d, i) => {...}`
+      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.type === 'json') {
@@ -37,11 +42,8 @@ export const readableInteger = x => {
   return `${x.toFixed(1)}M`;
 };
 
-export function rgbToHex(rgb) {
-  return rgb.slice(0, 3).reduce(
-    (acc, v) => `${acc}${v < 16 ? '0' : ''}${v.toString(16)}`,
-    '#'
-  );
+export function rgbToHex(rgbArr) {
+  return rgbArr.slice(0, 3).reduce((acc, v) => `${acc}${v < 16 ? '0' : ''}${v.toString(16)}`, '#');
 }
 
 export function colorToRGBArray(color) {

diff --git a/website/src/utils/layer-params.js b/website/src/utils/layer-params.js
@@ -1,13 +1,10 @@
-const blackList = [
-  'coordinateSystem',
-  'modelMatrix'
-];
+const blackList = ['coordinateSystem', 'modelMatrix'];
 
 /* eslint-disable complexity */
 /*
  * infer parameter type from a prop
  */
-export function propToParam(key, value) {
+export function propToParam(key, propType, value) {
   if (blackList.indexOf(key) >= 0) {
     return null;
   }
@@ -18,38 +15,30 @@ export function propToParam(key, value) {
     value
   };
 
-  switch (typeof value) {
-  case 'boolean':
-    return {...param, type: 'checkbox'};
-  case 'number':
-    if (/pixels|width|height|size|scale|radius|limit/i.test(key)) {
-      param.max = 100;
-      param.step = 1;
-    } else {
-      param.max = 1;
-      param.step = 0.01;
-    }
-    return {...param, type: 'range', min: 0};
-  case 'function':
-    if (key.indexOf('get') === 0) {
-      // is accessor
+  const type = propType.type === 'unknown' ? typeof value : propType.type;
+
+  switch (type) {
+    case 'boolean':
+      return {...param, type: 'checkbox'};
+    case 'number':
+      param.min = 'min' in propType ? propType.min : 0;
+      param.max = 'max' in propType ? propType.max : 100;
+      return {...param, type: 'range', step: param.max === 100 ? 1 : 0.01};
+    case 'accessor':
       return {...param, type: 'function'};
-    }
-    break;
-  case 'string':
-    if (/\.(png|jpg|jpeg|gif)/i.test(value)) {
-      return {...param, type: 'link'};
-    }
-    break;
-  case 'object':
-    if (/color/i.test(key) && value && Number.isFinite(value[0])) {
+    case 'string':
+      if (/\.(png|jpg|jpeg|gif)/i.test(value)) {
+        return {...param, type: 'link'};
+      }
+      break;
+    case 'color':
       return {...param, type: 'color'};
-    }
-    if (/mapping|domain|range/i.test(key)) {
-      return {...param, type: 'json'};
-    }
-    break;
-  default:
+    case 'object':
+      if (/mapping|domain|range/i.test(key)) {
+        return {...param, type: 'json'};
+      }
+      break;
+    default:
   }
   return null;
 }
@@ -67,7 +56,7 @@ export function getLayerParams(layer, propParameters = {}) {
     if (propParameters[key]) {
       paramsArray.push({name: key, ...propParameters[key]});
     } else {
-      const param = propToParam(key, layer.props[key]);
+      const param = propToParam(key, layer.constructor._propTypes[key], layer.props[key]);
       if (param) {
         paramsArray.push(param);
       }