From 80ae9515440a4328cf909af901299a21b1acd8a6 Mon Sep 17 00:00:00 2001 From: Tarek Sherif Date: Wed, 27 Nov 2019 19:51:16 -0500 Subject: [PATCH] Remove seer integration (#3940) --- docs/developer-guide/debugging.md | 12 -- modules/core/package.json | 3 +- modules/core/src/lib/layer-manager.js | 46 ------ modules/core/src/lib/layer.js | 3 - modules/core/src/lib/seer-integration.js | 135 ------------------ modules/core/src/lifecycle/create-props.js | 4 - test/modules/core/lib/index.js | 1 - .../modules/core/lib/seer-integration.spec.js | 26 ---- 8 files changed, 1 insertion(+), 229 deletions(-) delete mode 100644 modules/core/src/lib/seer-integration.js delete mode 100644 test/modules/core/lib/seer-integration.spec.js diff --git a/docs/developer-guide/debugging.md b/docs/developer-guide/debugging.md index 274a533f325..1d5ff38b50c 100644 --- a/docs/developer-guide/debugging.md +++ b/docs/developer-guide/debugging.md @@ -26,13 +26,6 @@ deck.log.priority = 2 | 3+ | Additional logging around layer lifecycle, prop diffing etc | -## Seer Integration - -deck.gl is integrated with the [Seer Chrome Extension](https://chrome.google.com/webstore/detail/seer/eogckabefmgphfgngjdmmlfbddmonfdh?hl=en). Simply installing Seer and rerunning your application opens up a new "Seer" tab in the Chrome developer tools, providing you with the ability to see all your deck.gl layers, inspect (and edit) their properties and attributes and check per layer timings, such as the latest GPU draw calls or attribute updates. - -Since luma.gl v4 also has a Seer integration, it is possible to follow links from deck.gl layer to luma.gl models inside Seer, enabling you to further drill down and understand what data is ultimately being generated and processed by the GPU. - - ## WebGL debugging using luma.gl For lower level debugging, including debugging of layer rendering and picking, deck.gl is built on luma.gl which has extensive debugging and instrumentation support for WebGL level code and GPU input values (shader uniforms and attributes). To enable debug logging simply issue the following commands in your browser console: @@ -56,8 +49,3 @@ In the browser console, setting `luma.log.priority` to various values will enabl | 1 | Minimal logging | | 2 and 3 | Will display all uniforms and attributes before each draw call, allowing you to be confident in what values your shaders are actually working on. | | 4 | Will trace every single gl call. - - -## Remarks - -* Seer remembers its "on/off" setting across application reloads. This is significant because it means that the Seer extension can be left installed even in heavy deck.gl applications with lots of layers, and turned on only during debugging, without any performance impact during normal usage. diff --git a/modules/core/package.json b/modules/core/package.json index 7407aa24595..a1454fb8123 100644 --- a/modules/core/package.json +++ b/modules/core/package.json @@ -37,7 +37,6 @@ "gl-matrix": "^3.0.0", "math.gl": "^3.0.0", "mjolnir.js": "^2.1.2", - "probe.gl": "^3.1.1", - "seer": "^0.2.4" + "probe.gl": "^3.1.1" } } diff --git a/modules/core/src/lib/layer-manager.js b/modules/core/src/lib/layer-manager.js index 386b25ee42b..02ce7f93a8e 100644 --- a/modules/core/src/lib/layer-manager.js +++ b/modules/core/src/lib/layer-manager.js @@ -20,7 +20,6 @@ import assert from '../utils/assert'; import {Timeline} from '@luma.gl/core'; -import seer from 'seer'; import Layer from './layer'; import {LIFECYCLE} from '../lifecycle/constants'; import log from '../utils/log'; @@ -30,14 +29,6 @@ import {Stats} from 'probe.gl'; import Viewport from '../viewports/viewport'; import {createProgramManager} from '../shaderlib'; -import { - setPropOverrides, - layerEditListener, - seerInitListener, - initLayerInSeer, - updateLayerInSeer -} from './seer-integration'; - const LOG_PRIORITY_LIFECYCLE = 2; const LOG_PRIORITY_LIFECYCLE_MINOR = 4; @@ -94,26 +85,15 @@ export default class LayerManager { this.activateViewport = this.activateViewport.bind(this); - // Seer integration - this._initSeer = this._initSeer.bind(this); - this._editSeer = this._editSeer.bind(this); - Object.seal(this); - - seerInitListener(this._initSeer); - layerEditListener(this._editSeer); } // Method to call when the layer manager is not needed anymore. - // Currently used in the componentWillUnmount lifecycle to unbind Seer listeners. finalize() { // Finalize all layers for (const layer of this.layers) { this._finalizeLayer(layer); } - - seer.removeListener(this._initSeer); - seer.removeListener(this._editSeer); } // Check if a redraw is needed @@ -310,12 +290,10 @@ export default class LayerManager { if (!oldLayer) { const err = this._initializeLayer(newLayer); error = error || err; - initLayerInSeer(newLayer); // Initializes layer in seer chrome extension (if connected) } else { this._transferLayerState(oldLayer, newLayer); const err = this._updateLayer(newLayer); error = error || err; - updateLayerInSeer(newLayer); // Updates layer in seer chrome extension (if connected) } generatedLayers.push(newLayer); @@ -432,28 +410,4 @@ export default class LayerManager { log.log(LOG_PRIORITY_LIFECYCLE, `finalizing ${layerName(layer)}`)(); return error; } - - // SEER INTEGRATION - - /** - * Called upon Seer initialization, manually sends layers data. - */ - _initSeer() { - this.layers.forEach(layer => { - initLayerInSeer(layer); - updateLayerInSeer(layer); - }); - } - - /** - * On Seer property edition, set override and update layers. - */ - _editSeer(payload) { - if (payload.type !== 'edit' || payload.valuePath[0] !== 'props') { - return; - } - - setPropOverrides(payload.itemKey, payload.valuePath.slice(1), payload.value); - this.updateLayers(); - } } diff --git a/modules/core/src/lib/layer.js b/modules/core/src/lib/layer.js index 43064ba2947..c2051d8c6a5 100644 --- a/modules/core/src/lib/layer.js +++ b/modules/core/src/lib/layer.js @@ -21,7 +21,6 @@ /* eslint-disable react/no-direct-mutation-state */ import {COORDINATE_SYSTEM} from './constants'; import AttributeManager from './attribute/attribute-manager'; -import {removeLayerInSeer} from './seer-integration'; import UniformTransitionManager from './uniform-transition-manager'; import {diffProps, validateProps} from '../lifecycle/props'; import {count} from '../utils/count'; @@ -631,8 +630,6 @@ export default class Layer extends Component { for (const extension of this.props.extensions) { extension.finalizeState.call(this, extension); } - // End lifecycle method - removeLayerInSeer(this.id); } // Calculates uniforms diff --git a/modules/core/src/lib/seer-integration.js b/modules/core/src/lib/seer-integration.js deleted file mode 100644 index 4f7c2f5d854..00000000000 --- a/modules/core/src/lib/seer-integration.js +++ /dev/null @@ -1,135 +0,0 @@ -import seer from 'seer'; - -/** - * Recursively set a nested property of an object given a properties array and a value - */ -const recursiveSet = (obj, path, value) => { - if (!obj) { - return; - } - - if (path.length > 1) { - recursiveSet(obj[path[0]], path.slice(1), value); - } else { - obj[path[0]] = value; - } -}; - -const overrides = new Map(); - -/** - * Create an override on the specify layer, indexed by a valuePath array. - * Do nothing in case Seer as not been initialized to prevent any preformance drawback. - */ -export const setPropOverrides = (id, valuePath, value) => { - if (!seer.isReady()) { - return; - } - - if (!overrides.has(id)) { - overrides.set(id, new Map()); - } - - const props = overrides.get(id); - props.set(valuePath, value); -}; - -/** - * Get the props overrides of a specific layer if Seer as been initialized - * Invalidates the data to be sure new ones are always picked up. - */ -export const applyPropOverrides = props => { - if (!seer.isReady() || !props.id) { - return; - } - - const overs = overrides.get(props.id); - if (!overs) { - return; - } - - overs.forEach((value, valuePath) => { - recursiveSet(props, valuePath, value); - // Invalidate data array if we have a data override - if (valuePath[0] === 'data') { - props.data = [...props.data]; - } - }); -}; - -/** - * Listen for deck.gl edit events - */ -export const layerEditListener = cb => { - if (!seer.isReady()) { - return; - } - - seer.listenFor('deck.gl', cb); -}; - -/** - * Listen for seer init events to resend data - */ -export const seerInitListener = cb => { - if (!seer.isReady()) { - return; - } - - seer.listenFor('init', cb); -}; - -export const initLayerInSeer = layer => { - if (!seer.isReady() || !layer) { - return; - } - - const badges = [layer.constructor.layerName]; - - seer.listItem('deck.gl', layer.id, { - badges, - // TODO: Seer currently only handles single model layers - links: layer.state && layer.state.model ? [`luma.gl:${layer.state.model.id}`] : undefined, - parent: layer.parent ? layer.parent.id : undefined - }); -}; - -/** - * Log layer's properties to Seer - */ -export const updateLayerInSeer = layer => { - if (!seer.isReady() || seer.throttle(`deck.gl:${layer.id}`, 1e3)) { - return; - } - - const data = logPayload(layer); - seer.multiUpdate('deck.gl', layer.id, data); -}; - -/** - * On finalize of a specify layer, remove it from seer - */ -export const removeLayerInSeer = id => { - if (!seer.isReady() || !id) { - return; - } - - seer.deleteItem('deck.gl', id); -}; - -function logPayload(layer) { - const data = [{path: 'objects.props', data: layer.props}]; - - const badges = [layer.constructor.layerName]; - - if (layer.state) { - if (layer.getAttributeManager()) { - const attrs = layer.getAttributeManager().getAttributes(); - data.push({path: 'objects.attributes', data: attrs}); - } - } - - data.push({path: 'badges', data: badges}); - - return data; -} diff --git a/modules/core/src/lifecycle/create-props.js b/modules/core/src/lifecycle/create-props.js index 556da485a3b..4b2eb1424a6 100644 --- a/modules/core/src/lifecycle/create-props.js +++ b/modules/core/src/lifecycle/create-props.js @@ -1,4 +1,3 @@ -import {applyPropOverrides} from '../lib/seer-integration'; import log from '../utils/log'; import {isAsyncIterable} from '../utils/iterable-utils'; import {parsePropTypes} from './prop-types'; @@ -43,9 +42,6 @@ export function createProps() { checkDeprecatedProps(layerName, propsInstance.updateTriggers, deprecatedProps); checkDeprecatedProps(layerName, propsInstance.transitions, deprecatedProps); - // SEER: Apply any overrides from the seer debug extension if it is active - applyPropOverrides(propsInstance); - // Props must be immutable Object.freeze(propsInstance); diff --git a/test/modules/core/lib/index.js b/test/modules/core/lib/index.js index 6c28972027e..349b151f773 100644 --- a/test/modules/core/lib/index.js +++ b/test/modules/core/lib/index.js @@ -28,7 +28,6 @@ import './layer-manager.spec'; import './tooltip.spec'; import './transition-manager.spec'; import './uniform-transition-manager.spec'; -import './seer-integration.spec'; import './effect.spec'; import './effect-manager.spec'; import './picking.spec'; diff --git a/test/modules/core/lib/seer-integration.spec.js b/test/modules/core/lib/seer-integration.spec.js deleted file mode 100644 index a075f49856d..00000000000 --- a/test/modules/core/lib/seer-integration.spec.js +++ /dev/null @@ -1,26 +0,0 @@ -import test from 'tape-catch'; - -import {window} from '@deck.gl/core/utils/globals'; -import {setPropOverrides, applyPropOverrides} from '@deck.gl/core/lib/seer-integration'; - -test('Seer overrides', t => { - const props = { - id: 'arc-layer', - opacity: {data: {value: 0.4}}, - one: 1 - }; - - window.__SEER_INITIALIZED__ = false; - - setPropOverrides('arc-layer', ['opacity', 'data', 'value'], 0.5); - applyPropOverrides(props); - t.equal(props.opacity.data.value, 0.4, 'The value should not have been overriden'); - - window.__SEER_INITIALIZED__ = true; - - setPropOverrides('arc-layer', ['opacity', 'data', 'value'], 0.5); - applyPropOverrides(props); - t.equal(props.opacity.data.value, 0.5, 'The value should now have been changed'); - - t.end(); -});