fix(widgets): widget bug bash (#9797)

* Add deck.gl widgets 9.2 test apps

Renamed and added new example apps for deck.gl widgets 9.2, including single and multi-view setups. Upgraded dependencies to @deck.gl/core, @deck.gl/layers, and @deck.gl/widgets v9.2.0-beta.1. Refactored LayerListWidget to extend Widget from @deck.gl/core.

* fix: zoom transitions in non-geo views

* fix: reset in multi-view apps

* add: button text to theme

* fix: animate and design fps widget

* fix: gimbal in non-default views and multi-views

* fix: timeline themed icon

* fix: stats update on redraw

* fix: loading status was flipped

* stylesheet

* Add --button-text-color CSS variable to docs

Documents the new --button-text-color variable in the widget styling reference, including its default value and link to CSS color documentation.

* types on IconButton

* Refactor widget types for view state support

Updated Widget and ResetViewWidget to support generic view state types using ViewOrViews and ViewStateMap. Matches `Deck`'s initialViewState type

* Update test/apps/widgets-multi-view-9.2/package.json

Co-authored-by: felixpalmer <[email protected]>

* Update test/apps/widgets-9.2/package.json

Co-authored-by: felixpalmer <[email protected]>

* Add documentation for widgets with multiple views

Introduces a new section explaining how to position widgets relative to deck.gl views using `viewId` and `placement` props. Provides example configuration and HTML structure, along with remarks and references to related guides.

* Add data filtering to GeoJsonLayer with timeline control

Introduces DataFilterExtension to the GeoJsonLayer, enabling dynamic filtering based on the 'scalerank' property. The timeline widget now updates the filter range interactively, allowing users to control visible features by time.

* Refactor button components for improved type safety and fix lints

* Add customizable --menu-gap CSS variable for menus

* Refactor IconMenu to use elements instead of icon functions

Updated IconMenu and related usage to accept JSX elements for icons instead of icon functions. Adjusted menu item definitions and rendering logic accordingly, and replaced inline menu styles with class-based styling and ButtonGroup/GroupedIconButton components for improved structure and maintainability.

---------

Co-authored-by: felixpalmer <[email protected]>

Author: chrisgervang

docs/api-reference/widgets/overview.md

@@ -125,6 +125,59 @@ new Deck({
 });
 ```
 
+### Using with Multiple Views
+
+Widgets with UI (e.g. a button or panel) can be positioned relative to the deck.gl view they are controlling, via the `viewId` and `placement` props. See [WidgetProps](../core/widget.md#widgetprops).
+
+The `viewId` controls which HTML container will mount to, and the `placement` prop will position it relative to the container it is in, like so:
+
+```ts
+new Deck({
+  views:[
+    new MapView({id: 'left-map'}),
+    new MapView({id: 'right-map'})
+  ],
+  widgets: [
+    new FullscreenWidget({placement: 'top-right'}),
+    new ZoomWidget({viewId: 'left-map'}),
+    new GimbalWidget({viewId: 'right-map'}),
+  ]
+})
+```
+
+This configuration will result in the following HTML structure:
+
+```html
+<!-- map container -->
+<div class="deck-widget-container">
+  <canvas id="deckgl-overlay">
+  <!-- size of full map container -->
+  <div>
+    <div class="top-right">
+      </FullscreenWidget>
+    </div>
+  </div>
+  <!-- size and position of the "left-map" view -->
+  <div>
+    <div class="top-left">
+      </ZoomWidget>
+    </div>
+  </div>
+  <!-- size and position of the "right-map" view -->
+  <div>
+    <div class="top-left">
+      </GimbalWidget>
+    </div>
+  </div>
+</div>
+```
+
+Remarks:
+
+* Widgets in the default container will be overlapped by view-specific widgets.
+* Widget UI with dynamic positioning, such as an `InfoWidget`, may not expose the `placement` prop as they control positioning internally.
+* For more information about using multiple deck.gl views, see the [Using Multiple Views](../../developer-guide/views.md#using-multiple-views) guide.
+
 ## Writing new Widgets
 
 A widget should inherit the `Widget` class. 

docs/api-reference/widgets/styling.md

@@ -131,6 +131,13 @@ Additionally, refer to each widget's API reference for variables specific to tha
 | `--button-backdrop-filter` | [Backdrop Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) | `unset` |
 | `--button-icon-idle` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(97, 97, 102, 1)` |
 | `--button-icon-hover` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(24, 24, 26, 1)` |
+| `--button-text-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(24, 24, 26, 1)` |
+
+### Menu
+
+| Name | Type | Default |
+| ---- | ---- | ------- |
+| `--menu-gap` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `4px` |
 
 ### Icon
 

modules/core/src/lib/deck.ts

@@ -476,7 +476,7 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
         this.canvas = null;
       }
 
-      log.log(`recreating animation loop for new device! id=${props.device.id}`);
+      log.log(`recreating animation loop for new device! id=${props.device.id}`)();
 
       this.animationLoop = this._createAnimationLoop(props.device, props);
       this.animationLoop.start();

modules/core/src/lib/widget.ts

@@ -8,6 +8,7 @@ import type {PickingInfo} from './picking/pick-info';
 import type {MjolnirPointerEvent, MjolnirGestureEvent} from 'mjolnir.js';
 import type Layer from './layer';
 import type {WidgetManager, WidgetPlacement} from './widget-manager';
+import type {ViewOrViews} from './view-manager';
 import {deepEqual} from '../utils/deep-equal';
 import {applyStyles, removeStyles} from '../utils/apply-styles';
 
@@ -19,7 +20,10 @@ export type WidgetProps = {
   className?: string;
 };
 
-export abstract class Widget<PropsT extends WidgetProps = WidgetProps> {
+export abstract class Widget<
+  PropsT extends WidgetProps = WidgetProps,
+  ViewsT extends ViewOrViews = null
+> {
   static defaultProps: Required<WidgetProps> = {
     id: 'widget',
     style: {},
@@ -43,7 +47,7 @@ export abstract class Widget<PropsT extends WidgetProps = WidgetProps> {
 
   // Populated by core when mounted
   widgetManager?: WidgetManager;
-  deck?: Deck<any>;
+  deck?: Deck<ViewsT>;
   rootElement?: HTMLDivElement | null;
 
   constructor(props: PropsT, defaultProps: Required<PropsT>) {

modules/widgets/src/fps-widget.tsx

@@ -3,7 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {Widget} from '@deck.gl/core';
+import {render} from 'preact';
 import type {WidgetPlacement, Deck, WidgetProps} from '@deck.gl/core';
+import {IconButton} from './lib/components/icon-button';
 
 /** Properties for the FpsWidget. */
 export type FpsWidgetProps = WidgetProps & {
@@ -42,25 +44,30 @@ export class FpsWidget extends Widget<FpsWidgetProps> {
 
   onAdd({}: {deck: Deck<any>; viewId: string | null}): void {
     this._lastFps = this._getFps();
-    this.updateHTML();
+    requestAnimationFrame(() => this._animate());
   }
 
   onRenderHTML(rootElement: HTMLElement): void {
     const fps = this._getFps();
-    // TODO - avoid changing the root element, instead create a child for better styling.
-    rootElement.innerText = `FPS:\n${fps}`;
-    rootElement.style.backgroundColor = 'white';
-    rootElement.style.fontFamily = 'monospace';
-    rootElement.style.fontSize = '8px';
-    rootElement.style.fontWeight = '700'; // Make font bolder on click
+    render(
+      <IconButton>
+        <div className="text">
+          FPS
+          <br />
+          {fps}
+        </div>
+      </IconButton>,
+      rootElement
+    );
   }
 
-  onRedraw({}: {viewports: any[]; layers: any[]}): void {
+  _animate(): void {
     const fps = this._getFps();
-    if (fps !== this._lastFps) {
+    if (this._lastFps !== fps) {
       this._lastFps = fps;
       this.updateHTML();
     }
+    requestAnimationFrame(() => this._animate());
   }
 
   _getFps(): number {

modules/widgets/src/fullscreen-widget.tsx

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 /* global document */
-import {Widget, type WidgetProps, type WidgetPlacement} from '@deck.gl/core';
+import {log, Widget, type WidgetProps, type WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 import {IconButton} from './lib/components/icon-button';
 
@@ -57,7 +57,9 @@ export class FullscreenWidget extends Widget<FullscreenWidgetProps> {
   onRenderHTML(rootElement: HTMLElement): void {
     render(
       <IconButton
-        onClick={this.handleClick.bind(this)}
+        onClick={() => {
+          this.handleClick().catch(err => log.error(err)());
+        }}
         label={this.fullscreen ? this.props.exitLabel : this.props.enterLabel}
         className={this.fullscreen ? 'deck-widget-fullscreen-exit' : 'deck-widget-fullscreen-enter'}
       />,

modules/widgets/src/gimbal-widget.tsx

@@ -31,6 +31,7 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
 
   className = 'deck-widget-gimbal';
   placement: WidgetPlacement = 'top-left';
+  viewports: {[id: string]: Viewport} = {};
 
   constructor(props: GimbalWidgetProps = {}) {
     super(props, GimbalWidget.defaultProps);
@@ -44,14 +45,18 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
   }
 
   onRenderHTML(rootElement: HTMLElement): void {
-    const {rotationOrbit, rotationX} = this.getNormalizedRotation();
+    const viewId = this.viewId || Object.values(this.viewports)[0]?.id || 'default-view';
+    const widgetViewport = this.viewports[viewId];
+    const {rotationOrbit, rotationX} = this.getNormalizedRotation(widgetViewport);
     // Note - we use CSS 3D transforms instead of SVG 2D transforms
     const ui = (
       <div className="deck-widget-button" style={{perspective: 100, pointerEvents: 'auto'}}>
         <button
           type="button"
           onClick={() => {
-            this.resetOrbitView();
+            for (const viewport of Object.values(this.viewports)) {
+              this.resetOrbitView(viewport);
+            }
           }}
           title={this.props.label}
           style={{position: 'relative', width: 26, height: 26}}
@@ -109,11 +114,12 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
   }
 
   onViewportChange(viewport: Viewport) {
+    this.viewports[viewport.id] = viewport;
     this.updateHTML();
   }
 
-  resetOrbitView() {
-    const viewId = this.getViewId();
+  resetOrbitView(viewport?: Viewport) {
+    const viewId = this.getViewId(viewport);
     const viewState = this.getViewState(viewId);
     if ('rotationOrbit' in viewState || 'rotationX' in viewState) {
       const nextViewState = {
@@ -130,8 +136,8 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
     }
   }
 
-  getNormalizedRotation() {
-    const viewState = this.getViewState(this.getViewId());
+  getNormalizedRotation(viewport?: Viewport): {rotationOrbit: number; rotationX: number} {
+    const viewState = this.getViewState(this.getViewId(viewport));
     const [rz, rx] = this.getRotation(viewState);
     const rotationOrbit = normalizeAndClampAngle(rz);
     const rotationX = normalizeAndClampAngle(rx);
@@ -147,8 +153,8 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
 
   // Move to Widget/WidgetManager?
 
-  getViewId() {
-    const viewId = this.viewId || 'OrbitView';
+  getViewId(viewport?: Viewport) {
+    const viewId = this.viewId || viewport?.id || 'OrbitView';
     return viewId;
   }
 

modules/widgets/src/info-widget.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-/* global document */
 import {Widget} from '@deck.gl/core';
 import type {Deck, PickingInfo, Viewport, WidgetProps} from '@deck.gl/core';
 import {render, JSX} from 'preact';

modules/widgets/src/lib/components/button-group.tsx

@@ -6,11 +6,11 @@ import type {ComponentChildren} from 'preact';
 
 export type ButtonGroupProps = {
   children: ComponentChildren;
-  orientation;
+  orientation: 'vertical' | 'horizontal';
 };
 
 /** Renders a group of buttons with Widget CSS */
 export const ButtonGroup = (props: ButtonGroupProps) => {
-  const {children, orientation} = props;
+  const {children, orientation = 'horizontal'} = props;
   return <div className={`deck-widget-button-group ${orientation}`}>{children}</div>;
 };

modules/widgets/src/lib/components/grouped-icon-button.tsx

@@ -2,23 +2,26 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {ComponentChildren, JSX} from 'preact';
+
 export type GroupedIconButtonProps = {
   className?: string;
-  label: string;
-  onClick: () => void;
+  label?: string;
+  onClick?: JSX.MouseEventHandler<HTMLButtonElement>;
+  children?: ComponentChildren;
 };
 
 /** Renders an icon button as part of a ButtonGroup */
-export const GroupedIconButton = props => {
-  const {className, label, onClick} = props;
+export const GroupedIconButton = (props: GroupedIconButtonProps) => {
+  const {className = '', label, onClick, children} = props;
   return (
     <button
-      className={`deck-widget-icon-button ${className || ''}`}
+      className={`deck-widget-icon-button ${className}`}
       type="button"
       onClick={onClick}
       title={label}
     >
-      <div className="deck-widget-icon" />
+      {children ? children : <div className="deck-widget-icon" />}
     </button>
   );
 };