@deck.gl/widgets 9.2.0-beta.2 → 9.2.0-beta.4

package/src/compass-widget.tsx

@@ -7,6 +7,7 @@ import type {Viewport, WidgetPlacement, WidgetProps} from '@deck.gl/core';
 import {render} from 'preact';
 
 export type CompassWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
   /** View to attach to and interact with. Required when using multiple views. */
   viewId?: string | null;
@@ -28,7 +29,6 @@ export class CompassWidget extends Widget<CompassWidgetProps> {
 
   className = 'deck-widget-compass';
   placement: WidgetPlacement = 'top-left';
-  viewId?: string | null = null;
   viewports: {[id: string]: Viewport} = {};
 
   constructor(props: CompassWidgetProps = {}) {

package/src/context-menu-widget.tsx

@@ -1,6 +1,10 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* global document */
-import {Widget, WidgetProps} from '@deck.gl/core';
-import type {Deck, PickingInfo} from '@deck.gl/core';
+import {Widget} from '@deck.gl/core';
+import type {Deck, PickingInfo, WidgetProps} from '@deck.gl/core';
 import {render} from 'preact';
 import {SimpleMenu} from './lib/components/simple-menu';
 
@@ -50,7 +54,7 @@ export class ContextMenuWidget extends Widget<ContextMenuWidgetProps> {
   constructor(props: ContextMenuWidgetProps) {
     super(props, ContextMenuWidget.defaultProps);
     this.pickInfo = null;
-    this.setProps(props);
+    this.setProps(this.props);
   }
 
   onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {

package/src/fps-widget.tsx

@@ -2,13 +2,17 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Widget, WidgetProps} from '@deck.gl/core';
-import type {WidgetPlacement, Deck} from '@deck.gl/core';
+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 & {
   /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
 };
 
 /**
@@ -18,7 +22,8 @@ export class FpsWidget extends Widget<FpsWidgetProps> {
   static defaultProps: Required<FpsWidgetProps> = {
     ...Widget.defaultProps,
     id: 'fps',
-    placement: 'top-left'
+    placement: 'top-left',
+    viewId: null
   };
 
   className = 'deck-widget-fps';
@@ -28,41 +33,45 @@ export class FpsWidget extends Widget<FpsWidgetProps> {
 
   constructor(props: FpsWidgetProps = {}) {
     super(props, FpsWidget.defaultProps);
-    this.placement = props.placement ?? this.placement;
+    this.setProps(this.props);
   }
 
   setProps(props: Partial<FpsWidgetProps>): void {
-    if (props.placement) {
-      this.placement = props.placement;
-    }
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
 
   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 {
     // @ts-expect-error protected
-    return Math.round(this.deck.metrics.fps ?? 0);
+    return Math.round(this.deck?.metrics.fps ?? 0);
   }
 }

package/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';
 
@@ -13,6 +13,8 @@ export type FullscreenWidgetProps = WidgetProps & {
   id?: string;
   /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
   /** Tooltip message when out of fullscreen. */
   enterLabel?: string;
   /** Tooltip message when fullscreen. */
@@ -29,6 +31,7 @@ export class FullscreenWidget extends Widget<FullscreenWidgetProps> {
     ...Widget.defaultProps,
     id: 'fullscreen',
     placement: 'top-left',
+    viewId: null,
     enterLabel: 'Enter Fullscreen',
     exitLabel: 'Exit Fullscreen',
     container: undefined!
@@ -40,7 +43,7 @@ export class FullscreenWidget extends Widget<FullscreenWidgetProps> {
 
   constructor(props: FullscreenWidgetProps = {}) {
     super(props, FullscreenWidget.defaultProps);
-    this.placement = props.placement ?? this.placement;
+    this.setProps(this.props);
   }
 
   onAdd(): void {
@@ -54,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'}
       />,
@@ -64,6 +69,7 @@ export class FullscreenWidget extends Widget<FullscreenWidgetProps> {
 
   setProps(props: Partial<FullscreenWidgetProps>) {
     this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
 

package/src/geocoder-widget.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Widget, WidgetProps} from '@deck.gl/core';
-import type {WidgetPlacement, Viewport} from '@deck.gl/core';
+import {Widget} from '@deck.gl/core';
+import type {WidgetPlacement, Viewport, WidgetProps} from '@deck.gl/core';
 import {FlyToInterpolator, LinearInterpolator} from '@deck.gl/core';
 import {render} from 'preact';
 import {DropdownMenu} from './lib/components/dropdown-menu';
@@ -24,11 +24,12 @@ const CURRENT_LOCATION = 'current';
 
 /** Properties for the GeocoderWidget */
 export type GeocoderWidgetProps = WidgetProps & {
-  viewId?: string;
+  viewId?: string | null;
   /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
   /** Tooltip message */
   label?: string;
+  /** View state reset transition duration in ms. 0 disables the transition */
   transitionDuration?: number;
   /** Geocoding service selector, for declarative usage */
   geocoder?: 'google' | 'mapbox' | 'opencage' | 'coordinates' | 'custom';
@@ -49,7 +50,7 @@ export class GeocoderWidget extends Widget<GeocoderWidgetProps> {
   static defaultProps: Required<GeocoderWidgetProps> = {
     ...Widget.defaultProps,
     id: 'geocoder',
-    viewId: undefined!,
+    viewId: null,
     placement: 'top-left',
     label: 'Geocoder',
     transitionDuration: 200,
@@ -68,18 +69,17 @@ export class GeocoderWidget extends Widget<GeocoderWidgetProps> {
 
   constructor(props: GeocoderWidgetProps = {}) {
     super(props, GeocoderWidget.defaultProps);
-    this.placement = this.props.placement ?? this.placement;
     this.setProps(this.props);
-    this.geocoder = getGeocoder(this.props);
   }
 
   setProps(props: Partial<GeocoderWidgetProps>): void {
-    super.setProps(props);
     this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     this.geocoder = getGeocoder(this.props);
     if (this.geocoder.requiresApiKey && !this.props.apiKey) {
       throw new Error(`API key is required for the ${this.geocoder.name} geocoder`);
     }
+    super.setProps(props);
   }
 
   onRenderHTML(rootElement: HTMLElement): void {

package/src/gimbal-widget.tsx

@@ -12,7 +12,7 @@ export type GimbalWidgetProps = WidgetProps & {
   viewId?: string | null;
   /** Tooltip message. */
   label?: string;
-  /** Width of gimbal lines */
+  /** Width of gimbal lines. */
   strokeWidth?: number;
   /** Transition duration in ms when resetting rotation. */
   transitionDuration?: number;
@@ -23,7 +23,7 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
     ...Widget.defaultProps,
     id: 'gimbal',
     placement: 'top-left',
-    viewId: undefined!,
+    viewId: null,
     label: 'Gimbal',
     strokeWidth: 1.5,
     transitionDuration: 200
@@ -31,7 +31,7 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
 
   className = 'deck-widget-gimbal';
   placement: WidgetPlacement = 'top-left';
-  viewId?: string | null = null;
+  viewports: {[id: string]: Viewport} = {};
 
   constructor(props: GimbalWidgetProps = {}) {
     super(props, GimbalWidget.defaultProps);
@@ -45,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}}
@@ -110,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 = {
@@ -131,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);
@@ -148,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;
   }
 

package/src/index.ts

@@ -5,25 +5,31 @@
 // Navigation widgets
 export {ZoomWidget} from './zoom-widget';
 export {ResetViewWidget} from './reset-view-widget';
+export {GimbalWidget} from './gimbal-widget';
 
 // Geospatial widgets
 export {CompassWidget} from './compass-widget';
-export {GimbalWidget} from './gimbal-widget';
 export {ScaleWidget as _ScaleWidget} from './scale-widget';
 export {GeocoderWidget as _GeocoderWidget} from './geocoder-widget';
 
-// Utility widgets
+// View widgets
 export {FullscreenWidget} from './fullscreen-widget';
+export {SplitterWidget as _SplitterWidget} from './splitter-widget';
+export {ViewSelectorWidget as _ViewSelectorWidget} from './view-selector-widget';
+
+// Information widgets
+export {InfoWidget as _InfoWidget} from './info-widget';
+export {ContextMenuWidget as _ContextMenuWidget} from './context-menu-widget';
+
+// Control widgets
+export {TimelineWidget as _TimelineWidget} from './timeline-widget';
+
+// Utility widgets
 export {ScreenshotWidget} from './screenshot-widget';
+export {ThemeWidget as _ThemeWidget} from './theme-widget';
 export {LoadingWidget as _LoadingWidget} from './loading-widget';
 export {FpsWidget as _FpsWidget} from './fps-widget';
-export {ThemeWidget as _ThemeWidget} from './theme-widget';
-export {InfoWidget as _InfoWidget} from './info-widget';
 export {StatsWidget as _StatsWidget} from './stats-widget';
-export {ContextMenuWidget as _ContextMenuWidget} from './context-menu-widget';
-export {SplitterWidget as _SplitterWidget} from './splitter-widget';
-export {TimelineWidget as _TimelineWidget} from './timeline-widget';
-export {ViewSelectorWidget as _ViewSelectorWidget} from './view-selector-widget';
 
 export type {FullscreenWidgetProps} from './fullscreen-widget';
 export type {CompassWidgetProps} from './compass-widget';
@@ -46,8 +52,7 @@ export type {GimbalWidgetProps} from './gimbal-widget';
 export {LightTheme, DarkTheme, LightGlassTheme, DarkGlassTheme} from './themes';
 export type {DeckWidgetTheme} from './themes';
 
-// Experimental exports
-
+// Experimental preact components
 export {ButtonGroup as _ButtonGroup, type ButtonGroupProps} from './lib/components/button-group';
 export {IconButton as _IconButton, type IconButtonProps} from './lib/components/icon-button';
 export {

package/src/info-widget.tsx

@@ -1,33 +1,37 @@
-/* global document */
-import {Widget, WidgetProps} from '@deck.gl/core';
-import type {Deck, PickingInfo, Viewport} from '@deck.gl/core';
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Widget} from '@deck.gl/core';
+import type {Deck, PickingInfo, Viewport, WidgetProps} from '@deck.gl/core';
 import {render, JSX} from 'preact';
 
 export type InfoWidgetProps = WidgetProps & {
-  /** View to attach to and interact with. Required when using multiple views. */
+  /** View to attach to and interact with. Required when using multiple views */
   viewId?: string | null;
-  /** InfoWidget mode */
+  /** Determines the interaction mode of the widget */
   mode: 'click' | 'hover' | 'static';
-  /** Get the popup contents from the selected element */
-  getTooltip?: (info: PickingInfo, widget: InfoWidget) => any;
-  /** Position at which to place popup (clicked point: [longitude, latitude]). */
+  /** Function to generate the popup contents from the selected element */
+  getTooltip?: (info: PickingInfo, widget: InfoWidget) => InfoWidgetProps | null;
+  /** Position at which to place popup (clicked point: [longitude, latitude]) */
   position: [number, number];
-  /** Text of popup */
+  /** Text content of popup */
   text?: string;
   /** Visibility of info widget */
   visible?: boolean;
   /** Minimum offset (in pixels) to keep the popup away from the canvas edges. */
   minOffset?: number;
+  /** Callback triggered when the widget is clicked. */
   onClick?: (widget: InfoWidget, info: PickingInfo) => boolean;
 };
 
 export class InfoWidget extends Widget<InfoWidgetProps> {
   static defaultProps: Required<InfoWidgetProps> = {
     ...Widget.defaultProps,
+    id: 'info',
     position: [0, 0],
     text: '',
     visible: false,
-    // Set default minOffset if not provided
     minOffset: 0,
     viewId: null,
     mode: 'hover',
@@ -37,19 +41,15 @@ export class InfoWidget extends Widget<InfoWidgetProps> {
 
   className = 'deck-widget-info';
   placement = 'fill' as const;
-  viewId?: string | null = null;
   viewport?: Viewport;
 
   constructor(props: InfoWidgetProps) {
     super(props, InfoWidget.defaultProps);
-    props.position = props.position || [0, 0];
-    props.text = props.text || '';
-    props.visible = props.visible || false;
-    // Set default minOffset if not provided
-    props.minOffset = props.minOffset ?? 0;
+    this.setProps(this.props);
   }
 
   setProps(props: Partial<InfoWidgetProps>) {
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
 
@@ -72,7 +72,7 @@ export class InfoWidget extends Widget<InfoWidgetProps> {
       this.setProps({
         visible: tooltip !== null,
         ...tooltip,
-        style: {zIndex: 1, ...tooltip?.style}
+        style: {zIndex: '1', ...tooltip?.style}
       });
     }
   }

package/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>;
 };

package/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>
   );
 };

package/src/lib/components/icon-button.tsx

@@ -2,19 +2,18 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {ComponentChildren} from 'preact';
+import type {ComponentChildren, JSX} from 'preact';
 
 export type IconButtonProps = {
-  className: string;
-  label: string;
-  onClick: (event?) => unknown;
-  /** Optional icon or element to render inside the button */
+  className?: string;
+  label?: string;
+  onClick?: JSX.MouseEventHandler<HTMLButtonElement>;
   children?: ComponentChildren;
 };
 
 /** Renders a button component with widget CSS */
 export const IconButton = (props: IconButtonProps) => {
-  const {className, label, onClick, children} = props;
+  const {className = '', label, onClick, children} = props;
   return (
     <div className="deck-widget-button">
       <button

package/src/lib/components/icon-menu.tsx

@@ -1,31 +1,14 @@
 import type {JSX} from 'preact';
 import {useState, useRef, useEffect} from 'preact/hooks';
 import {IconButton} from './icon-button';
-
-const MENU_STYLE: JSX.CSSProperties = {
-  position: 'absolute',
-  top: '100%',
-  left: 0,
-  background: 'white',
-  border: '1px solid #ccc',
-  borderRadius: '4px',
-  marginTop: '4px',
-  zIndex: 100
-};
-
-const MENU_ITEM_STYLE: JSX.CSSProperties = {
-  background: 'white',
-  border: 'none',
-  padding: '4px',
-  cursor: 'pointer',
-  pointerEvents: 'auto'
-};
+import {ButtonGroup} from './button-group';
+import {GroupedIconButton} from './grouped-icon-button';
 
 export type IconMenuProps<KeyType = string> = {
   className: string;
-  icon?: () => JSX.Element;
+  icon?: JSX.Element;
   label?: string;
-  menuItems: {value: KeyType; icon: () => JSX.Element; label: string}[];
+  menuItems: {value: KeyType; icon: JSX.Element; label: string}[];
   initialItem: KeyType;
   onItemSelected: (item: KeyType) => void;
 };
@@ -61,27 +44,26 @@ export function IconMenu<KeyType extends string>(props: IconMenuProps<KeyType>)
 
   const selectedMenuItem = props.menuItems.find(item => item.value === selectedItem);
   const label = props.label || selectedMenuItem?.label || '';
-  const Icon = (props.icon || selectedMenuItem?.icon)!;
+  const icon = (props.icon || selectedMenuItem?.icon)!;
 
   return (
     <div style={{position: 'relative', display: 'inline-block'}} ref={containerRef}>
       <IconButton className={props.className} label={label} onClick={handleButtonClick}>
-        <Icon />
+        {icon}
       </IconButton>
       {menuOpen && (
-        <div style={MENU_STYLE}>
-          <div style={{display: 'flex', flexDirection: 'column'}}>
+        <div className="deck-widget-icon-menu">
+          <ButtonGroup orientation="vertical">
             {props.menuItems.map(item => (
-              <button
+              <GroupedIconButton
                 key={item.value}
-                style={MENU_ITEM_STYLE}
-                title={item.label}
+                label={item.label}
                 onClick={() => handleSelectItem(item.value)}
               >
                 {item.icon}
-              </button>
+              </GroupedIconButton>
             ))}
-          </div>
+          </ButtonGroup>
         </div>
       )}
     </div>

package/src/lib/components/simple-menu.tsx

@@ -7,7 +7,7 @@ const MENU_STYLE: JSX.CSSProperties = {
   background: 'white',
   border: '1px solid #ccc',
   borderRadius: '4px',
-  marginTop: '4px',
+  marginTop: 'var(--menu-gap, 4px)',
   zIndex: 100
 };
 

package/src/loading-widget.tsx

@@ -2,15 +2,17 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {WidgetPlacement, Layer} from '@deck.gl/core';
+import type {WidgetPlacement, Layer, WidgetProps} from '@deck.gl/core';
 import {render} from 'preact';
-import {Widget, WidgetProps} from '@deck.gl/core';
+import {Widget} from '@deck.gl/core';
 import {IconButton} from './lib/components/icon-button';
 
 /** Properties for the LoadingWidget */
 export type LoadingWidgetProps = WidgetProps & {
   /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
+  /** View to attach to and interact with. Required when using multiple views */
+  viewId?: string | null;
   /** Tooltip message when loading */
   label?: string;
 };
@@ -23,6 +25,7 @@ export class LoadingWidget extends Widget<LoadingWidgetProps> {
     ...Widget.defaultProps,
     id: 'loading',
     placement: 'top-left',
+    viewId: null,
     label: 'Loading layer data'
   };
 
@@ -32,11 +35,12 @@ export class LoadingWidget extends Widget<LoadingWidgetProps> {
 
   constructor(props: LoadingWidgetProps = {}) {
     super(props, LoadingWidget.defaultProps);
-    this.placement = props.placement ?? this.placement;
+    this.setProps(this.props);
   }
 
   setProps(props: Partial<LoadingWidgetProps>) {
     this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
 
@@ -45,7 +49,7 @@ export class LoadingWidget extends Widget<LoadingWidgetProps> {
       // TODO(ibgreen) - this should not be a button, but styling is so nested that it is easier to reuse this component.
       this.loading && (
         <IconButton
-          className="deck-widget-spinner-icon"
+          className="deck-widget-spinner"
           label={this.props.label}
           onClick={this.handleClick.bind(this)}
         />
@@ -55,7 +59,7 @@ export class LoadingWidget extends Widget<LoadingWidgetProps> {
   }
 
   onRedraw({layers}: {layers: Layer[]}): void {
-    const loading = !layers.some(layer => !layer.isLoaded);
+    const loading = layers.some(layer => !layer.isLoaded);
     if (loading !== this.loading) {
       this.loading = loading;
       this.updateHTML();