website: WebGPU scatterplot example (#9715)

Author: ibgreen-openai

examples/website/point-cloud/package.json

@@ -12,7 +12,7 @@
     "@loaders.gl/las": "^4.2.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "deck.gl": "^9.0.0",
+    "deck.gl": "^9.2.0-alpha.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

website/src/examples/point-cloud-layer.js

@@ -37,7 +37,7 @@ class PointCloudDemo extends Component {
 
   render() {
     return <div style={{width: '100%', height: '100%', background: '#ecdbce'}}>
-      <App key={this.props.device?.type} onLoad={this._onLoad} device={this.props.device} />
+      <App key={this.props.device?.type} device={this.props.device} onLoad={this._onLoad} />
     </div>;
   }
 }

website/src/examples/scatterplot-layer.js

@@ -2,27 +2,29 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import React, {Component} from 'react';
-import {MAPBOX_STYLES, DATA_URI, GITHUB_TREE} from '../constants/defaults';
-import {readableInteger} from '../utils/format-utils';
+import React, { Component } from 'react';
+import { MAPBOX_STYLES, DATA_URI, GITHUB_TREE } from '../constants/defaults';
+import { readableInteger } from '../utils/format-utils';
 import App from 'website-examples/scatterplot/app';
 
-import {makeExample} from '../components';
+import { makeExample } from '../components';
 
 class ScatterPlotDemo extends Component {
   static title = 'Every Person in New York City';
 
   static code = `${GITHUB_TREE}/examples/website/scatterplot`;
 
+  static hasDeviceTabs = true;
+
   static data = {
     url: `${DATA_URI}/scatterplot-data.txt`,
     worker: '/workers/scatterplot-data-decoder.js'
   };
 
   static parameters = {
-    colorM: {displayName: 'Male', type: 'color', value: [0, 128, 255]},
-    colorF: {displayName: 'Female', type: 'color', value: [255, 0, 128]},
-    radius: {displayName: 'Radius', type: 'range', value: 10, step: 0.1, min: 1, max: 20}
+    colorM: { displayName: 'Male', type: 'color', value: [0, 128, 255] },
+    colorF: { displayName: 'Female', type: 'color', value: [255, 0, 128] },
+    radius: { displayName: 'Radius', type: 'range', value: 10, step: 0.1, min: 1, max: 20 }
   };
 
   static mapStyle = MAPBOX_STYLES.LIGHT;
@@ -43,11 +45,12 @@ class ScatterPlotDemo extends Component {
   }
 
   render() {
-    const {params, data} = this.props;
+    const { params, data } = this.props;
 
     return (
       <App
-        {...this.props}
+        key={this.props.device?.type}
+        device={this.props.device}
         data={data}
         maleColor={params.colorM.value}
         femaleColor={params.colorF.value}