json module bug fixes (#3253)

modules/json/src/json-layer/json-layer.js

@@ -2,6 +2,8 @@ import {CompositeLayer} from '@deck.gl/core';
 import {getJSONLayers} from '../parsers/convert-json';
 
 const defaultProps = {
+  // Optionally accept JSON strings by parsing them
+  fetch: dataString => JSON.parse(dataString),
   configuration: []
 };
 
@@ -12,14 +14,11 @@ export default class JSONLayer extends CompositeLayer {
     };
   }
 
-  updateState({props, oldProps}) {
-    const layersChanged =
-      props.data !== oldProps.data || props.configuration !== oldProps.configuration;
+  updateState({props, oldProps, changeFlags}) {
+    const layersChanged = changeFlags.dataChanged || props.configuration !== oldProps.configuration;
 
     if (layersChanged) {
-      // Optionally accept JSON strings by parsing them
-      const data = typeof props.data === 'string' ? JSON.parse(props.data) : props.data;
-      this.state.layers = getJSONLayers(data, props.configuration);
+      this.state.layers = getJSONLayers(props.data, props.configuration);
     }
   }
 

modules/json/src/parsers/convert-json.js

@@ -169,7 +169,7 @@ function parseCSV(text) {
 
   for (const row of csv) {
     for (const key in row) {
-      const number = parseFloat(row[key]) || 0;
+      const number = parseFloat(row[key]);
       if (!Number.isNaN(number)) {
         row[key] = number;
       }

test/modules/json/json-converter.spec.js

@@ -1,5 +1,5 @@
 import test from 'tape-catch';
-import {_JSONConverter as JSONConverter} from '@deck.gl/json';
+import {_JSONConverter as JSONConverter, _JSONLayer as JSONLayer} from '@deck.gl/json';
 
 import {COORDINATE_SYSTEM} from '@deck.gl/core';
 import GL from '@luma.gl/constants';
@@ -23,16 +23,32 @@ export const JSON_DATA = {
     latitude: 37.8,
     zoom: 12
   },
+  mapStyle: {},
+  views: [
+    {
+      type: 'MapView',
+      height: '50%',
+      controller: true
+    },
+    {
+      type: 'FirstPersonView',
+      y: '50%',
+      height: '50%'
+    }
+  ],
   layers: [
     {
       type: 'ScatterplotLayer',
       data: [{position: [-122.45, 37.8]}],
+      getPosition: 'position',
       getColor: [255, 0, 0, 255],
       getRadius: 1000
     },
     {
       type: 'TextLayer',
-      data: [{position: [-122.45, 37.8], text: 'Hello World'}]
+      data: [[-122.45, 37.8]],
+      getPosition: '-',
+      getText: d => 'Hello World'
     }
   ]
 };
@@ -54,5 +70,12 @@ test('JSONConverter#convert', t => {
 
   const deckProps = jsonConverter.convertJsonToDeckProps(JSON_DATA);
   t.ok(deckProps, 'JSONConverter converted correctly');
+
+  t.is(deckProps.views.length, 2, 'JSONConverter converted views');
+
+  const layer = deckProps.layers[0];
+  t.is(layer && layer.constructor, JSONLayer, 'JSONConverter created JSONLayer');
+  t.is(layer.props.data.length, 2, 'JSONLayer has data');
+
   t.end();
 });

test/modules/json/json-layer.spec.js

@@ -1,26 +1,108 @@
 import test from 'tape-catch';
 import {_JSONLayer as JSONLayer} from '@deck.gl/json';
+import {testLayer, testInitializeLayer} from '@deck.gl/test-utils';
 
-const JSON_DATA = [
-  {
-    type: 'ScatterplotLayer',
-    data: [{position: [-122.45, 37.8]}],
-    getColor: [255, 0, 0, 255],
-    getRadius: 1000
-  },
-  {
-    type: 'TextLayer',
-    data: [{position: [-122.45, 37.8], text: 'Hello World'}]
-  }
-];
+import {configuration, JSON_DATA} from './json-converter.spec';
 
 test('JSONLayer#import', t => {
   t.ok(JSONLayer, 'JSONLayer imported');
   t.end();
 });
 
 test('JSONLayer#create', t => {
-  const jsonLayer = new JSONLayer({data: JSON_DATA});
+  const jsonLayer = new JSONLayer({data: JSON_DATA.layers});
   t.ok(jsonLayer, 'JSONLayer created');
   t.end();
 });
+
+test('JSONLayer#lifecycle', t => {
+  testLayer({
+    Layer: JSONLayer,
+    testCases: [
+      {
+        title: 'empty',
+        props: {
+          data: JSON_DATA.layers
+        }
+      },
+      {
+        title: 'string data',
+        updateProps: {
+          configuration
+        },
+        onAfterUpdate: ({subLayers}) => {
+          t.is(subLayers.length, 2, 'Sublayers rendered');
+          t.is(typeof subLayers[0].props.getPosition, 'function', 'Accessor populated');
+          t.is(typeof subLayers[1].props.getPosition, 'function', 'Accessor populated');
+        }
+      },
+      {
+        title: 'array data',
+        updateProps: {data: JSON.stringify(JSON_DATA.layers)},
+        onAfterUpdate: ({subLayers}) => {
+          t.is(subLayers.length, 2, 'Sublayers rendered');
+        }
+      }
+    ],
+    onError: t.notOk
+  });
+
+  t.end();
+});
+
+test('JSONLayer#fetch', t => {
+  // polyfill/hijack fetch
+  /* global global, window */
+  const _global = typeof global !== 'undefined' ? global : window;
+  const fetch = _global.fetch;
+
+  const data = {
+    'data.json': JSON.stringify([{position: [-122.45, 37.8], text: 'Hello World'}]),
+    'data.csv': `lon,lat,text
+-122.45,37.78,"Hello World"
+`
+  };
+  _global.fetch = url =>
+    Promise.resolve({
+      text: () => data[url]
+    });
+
+  const jsonLayer = new JSONLayer({
+    configuration,
+    data: [
+      {
+        type: 'TextLayer',
+        data: 'data.json'
+      },
+      {
+        type: 'TextLayer',
+        data: 'data.csv',
+        getPosition: d => [d.lon, d.lat],
+        getText: d => d.text
+      }
+    ]
+  });
+
+  testInitializeLayer({layer: jsonLayer, onError: t.notOk});
+
+  // Wait for fetch to resolve
+  _global.setTimeout(() => {
+    const subLayers = jsonLayer.renderLayers();
+
+    t.deepEqual(
+      subLayers[0].props.data,
+      [{position: [-122.45, 37.8], text: 'Hello World'}],
+      'JSON parsed successfully'
+    );
+    t.deepEqual(
+      subLayers[1].props.data,
+      [[-122.45, 37.78, 'Hello World']],
+      'CSV parsed successfully'
+    );
+
+    t.end();
+  }, 0);
+
+  // restore fetcch
+  _global.fetch = fetch;
+});

test/modules/json/utils/get.spec.js

@@ -58,6 +58,12 @@ const GET_TEST_CASES = [
     key: 'a.b.c',
     result: 2
   },
+  {
+    title: 'nested object, same key, invalid path',
+    container: {a: {}},
+    key: 'a.b.c',
+    result: undefined
+  },
   {
     title: 'nested object, array key',
     container: {a: {b: {c: 2}}},
@@ -66,11 +72,6 @@ const GET_TEST_CASES = [
   }
 ];
 
-test('get#import', t => {
-  t.ok(typeof get === 'function', 'get imported OK');
-  t.end();
-});
-
 test('container#get', t => {
   for (const tc of GET_TEST_CASES) {
     const result = get(tc.container, tc.key);

test/modules/json/utils/shallow-equal-objects.spec.js

@@ -2,11 +2,26 @@ import test from 'tape-catch';
 import {shallowEqualObjects} from '@deck.gl/json/utils/shallow-equal-objects';
 
 const TEST_CASES = [
+  {
+    a: 10,
+    b: 10,
+    output: true
+  },
   {
     a: {longitude: -70, latitude: 40.7, zoom: 12},
     b: {longitude: -70, latitude: 40.7, zoom: 12},
     output: true
   },
+  {
+    a: {longitude: -70, latitude: 40.7, zoom: 12},
+    b: null,
+    output: false
+  },
+  {
+    a: {longitude: -70, latitude: 40.7, zoom: 12, position: [0, 0, 0]},
+    b: {longitude: -70, latitude: 40.7, zoom: 12},
+    output: false
+  },
   {
     a: {longitude: -70, latitude: 40.7, zoom: 12, position: [0, 0, 0]},
     b: {longitude: -70, latitude: 40.7, zoom: 12, position: [0, 0, 0]},