@deck.gl-community/widgets 9.2.5 → 9.3.1-alpha.0

package/src/widget-panels/worker-modules.d.ts

@@ -0,0 +1,7 @@
+declare module '*?worker' {
+  const WorkerFactory: {
+    new (): Worker;
+  };
+
+  export default WorkerFactory;
+}

package/src/widget-panels/y-zoom-widget.test.tsx

@@ -0,0 +1,101 @@
+import {afterEach, describe, expect, it, vi} from 'vitest';
+
+import {YZoomWidget} from './y-zoom-widget';
+
+type MockViewportOptions = {
+  id?: string;
+  zoomY?: number;
+  zoomX?: number;
+  minZoom?: number | [number, number];
+  maxZoom?: number | [number, number];
+  target?: [number, number, number];
+};
+
+/**
+ * Creates a minimal orthographic viewport-shaped object for widget tests.
+ */
+function createViewport(options: MockViewportOptions = {}) {
+  return {
+    id: options.id ?? 'main',
+    zoomY: options.zoomY ?? 0,
+    zoomX: options.zoomX ?? 0,
+    minZoom: options.minZoom,
+    maxZoom: options.maxZoom,
+    target: options.target ?? [0, 0, 0]
+  } as any;
+}
+
+/**
+ * Builds a widget instance with a spyable HTML update path.
+ */
+function createWidget(props: ConstructorParameters<typeof YZoomWidget>[0] = {}) {
+  const widget = new YZoomWidget(props);
+  const updateHTMLSpy = vi.spyOn(widget, 'updateHTML').mockImplementation(() => undefined);
+  return {widget, updateHTMLSpy};
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.body.innerHTML = '';
+});
+
+describe('YZoomWidget', () => {
+  it('does not re-render for viewport updates when Y zoom and bounds are unchanged', () => {
+    const {widget, updateHTMLSpy} = createWidget();
+    const viewport = createViewport({zoomY: 2, minZoom: [-5, -3], maxZoom: [5, 4]});
+
+    widget.onViewportChange(viewport);
+    widget.onViewportChange(viewport);
+
+    expect(updateHTMLSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('re-renders when Y zoom changes', () => {
+    const {widget, updateHTMLSpy} = createWidget();
+
+    widget.onViewportChange(createViewport({zoomY: 1, minZoom: [-5, -3], maxZoom: [5, 4]}));
+    widget.onViewportChange(createViewport({zoomY: 2, minZoom: [-5, -3], maxZoom: [5, 4]}));
+
+    expect(updateHTMLSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('re-renders when effective zoom bounds change without changing Y zoom', () => {
+    const {widget, updateHTMLSpy} = createWidget();
+
+    widget.onViewportChange(createViewport({zoomY: 1, minZoom: [-5, -3], maxZoom: [5, 4]}));
+    widget.onViewportChange(createViewport({zoomY: 1, minZoom: [-5, -2], maxZoom: [5, 4]}));
+
+    expect(updateHTMLSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('only re-renders once across repeated identical viewport updates', () => {
+    const {widget, updateHTMLSpy} = createWidget();
+    const viewport = createViewport({zoomY: 1.5, minZoom: [-5, -3], maxZoom: [5, 4]});
+
+    widget.onViewportChange(viewport);
+    widget.onViewportChange(viewport);
+    widget.onViewportChange(viewport);
+
+    expect(updateHTMLSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not double re-render when a widget-driven zoom is followed by the matching viewport callback', () => {
+    const {widget, updateHTMLSpy} = createWidget();
+    const viewport = createViewport({zoomY: 1, zoomX: 0, minZoom: [-5, -3], maxZoom: [5, 4]});
+    const deck = {
+      _onViewStateChange: vi.fn()
+    } as any;
+
+    widget.deck = deck;
+    widget.onViewportChange(viewport);
+    updateHTMLSpy.mockClear();
+
+    (widget as any).updateViewState(viewport, 2);
+    widget.onViewportChange(
+      createViewport({zoomY: 2, zoomX: 0, minZoom: [-5, -3], maxZoom: [5, 4]})
+    );
+
+    expect(updateHTMLSpy).toHaveBeenCalledTimes(1);
+    expect(deck._onViewStateChange).toHaveBeenCalledTimes(1);
+  });
+});

package/src/widget-panels/y-zoom-widget.tsx

@@ -0,0 +1,376 @@
+/** @jsxImportSource preact */
+import {OrthographicViewport, Widget} from '@deck.gl/core';
+import {render} from 'preact';
+
+import {IconButton, makeTextIcon} from '../widget-components/icon-button';
+
+import type {Deck, OrthographicViewState, WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import type {JSX} from 'preact';
+
+export type YZoomWidgetProps = WidgetProps & {
+  contentBounds?: [[number, number], [number, number]];
+  viewId?: string | null;
+  targetViewId?: string | null;
+  placement?: WidgetPlacement;
+  minZoom?: number;
+  maxZoom?: number;
+  step?: number;
+};
+
+const DEFAULT_ZOOM_LIMITS = {min: -20, max: 20} as const;
+
+type RenderedZoomState = {
+  clampedZoom: number;
+  minZoom: number;
+  maxZoom: number;
+};
+
+const WRAPPER_STYLE: JSX.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '4px',
+  background: 'var(--button-background)',
+  border: '1px solid var(--button-stroke)',
+  boxShadow: 'var(--button-shadow)',
+  borderRadius: 'var(--button-corner-radius)',
+  margin: 'var(--widget-margin) 0',
+  padding: '4px 2px',
+  width: 'var(--button-size)',
+  boxSizing: 'border-box',
+  userSelect: 'none',
+  pointerEvents: 'auto'
+};
+
+const ZOOM_BUTTON_STYLE: JSX.CSSProperties = {
+  boxShadow: 'none'
+};
+
+const SLIDER_CONTAINER_STYLE: JSX.CSSProperties = {
+  display: 'flex',
+  alignItems: 'stretch',
+  height: '120px',
+  padding: '2px 0'
+};
+
+const VERTICAL_SLIDER_STYLE: JSX.CSSProperties = {
+  writingMode: 'vertical-lr',
+  height: '120px',
+  width: '14px',
+  margin: 0,
+  padding: 0
+};
+
+function cloneViewState(viewState: unknown): Record<string, unknown> {
+  return viewState && typeof viewState === 'object'
+    ? {...(viewState as Record<string, unknown>)}
+    : {};
+}
+
+function hasViewManager(deck: Deck): boolean {
+  return Boolean((deck as Deck & {viewManager?: unknown}).viewManager);
+}
+
+function stopEventPropagation(event: Event) {
+  event.stopPropagation();
+  if (
+    typeof (event as {stopImmediatePropagation?: () => void}).stopImmediatePropagation ===
+    'function'
+  ) {
+    event.stopImmediatePropagation();
+  }
+}
+
+function getZoomLimitForAxis(
+  limit: OrthographicViewState['minZoom' | 'maxZoom'] | undefined,
+  axisIndex: 0 | 1
+): number | undefined {
+  if (Array.isArray(limit)) {
+    const [x, y] = limit;
+    return axisIndex === 0 ? x : (y ?? x);
+  }
+  return typeof limit === 'number' && Number.isFinite(limit) ? limit : undefined;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+
+export class YZoomWidget extends Widget<YZoomWidgetProps> {
+  static override defaultProps = {
+    ...Widget.defaultProps,
+    id: 'y-zoom',
+    viewId: null,
+    targetViewId: null,
+    placement: 'top-left',
+    minZoom: undefined,
+    maxZoom: undefined,
+    step: 0.1
+  } satisfies Required<WidgetProps> & Required<Pick<YZoomWidgetProps, 'step'>> & YZoomWidgetProps;
+
+  placement: WidgetPlacement = 'top-left';
+  className = 'deck-widget-y-zoom';
+  step: number;
+  currentZoom = 0;
+  inferredMinZoom: number | null = null;
+  inferredMaxZoom: number | null = null;
+  lastRenderedZoomState: RenderedZoomState | null = null;
+
+  constructor(props: YZoomWidgetProps = {}) {
+    super({...YZoomWidget.defaultProps, ...props});
+    this.viewId = props.viewId ?? null;
+    this.placement = props.placement ?? 'top-left';
+    this.step = props.step ?? YZoomWidget.defaultProps.step;
+  }
+
+  override setProps(props: Partial<YZoomWidgetProps>): void {
+    if (props.viewId !== undefined) {
+      this.viewId = props.viewId;
+    }
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    if (props.step !== undefined) {
+      this.step = props.step;
+    }
+    super.setProps(props);
+  }
+
+  override onAdd({deck, viewId}: {deck: Deck; viewId: string | null}): void {
+    this.deck = deck;
+    if (this.viewId === undefined) {
+      this.viewId = viewId;
+    }
+  }
+
+  override onRemove(): void {
+    this.deck = undefined;
+  }
+
+  override onRenderHTML(rootElement: HTMLElement): void {
+    const {minZoom, maxZoom, clampedZoom} = this.getRenderedZoomState();
+    this.lastRenderedZoomState = {minZoom, maxZoom, clampedZoom};
+
+    const handleInput = (event: Event) => {
+      stopEventPropagation(event);
+      this.handleZoomTo(Number((event.target as HTMLInputElement).value));
+    };
+
+    const addVerticalOrient = (element: HTMLInputElement | null) => {
+      element?.setAttribute('orient', 'vertical');
+    };
+
+    const stopPointerPropagation: JSX.PointerEventHandler<HTMLElement> = (event) => {
+      stopEventPropagation(event as unknown as Event);
+    };
+
+    const stopWheelPropagation: JSX.WheelEventHandler<HTMLElement> = (event) => {
+      stopEventPropagation(event as unknown as Event);
+    };
+
+    const stopMousePropagation: JSX.MouseEventHandler<HTMLElement> = (event) => {
+      stopEventPropagation(event as unknown as Event);
+    };
+
+    render(
+      <div className="deck-widget-button-group" style={WRAPPER_STYLE}>
+        <IconButton
+          icon={makeTextIcon('—')}
+          style={ZOOM_BUTTON_STYLE}
+          title="zoom out"
+          onClick={() => this.handleZoomDelta(-this.step)}
+        />
+        <div
+          style={SLIDER_CONTAINER_STYLE}
+          onPointerDown={stopPointerPropagation}
+          onPointerMove={stopPointerPropagation}
+          onPointerUp={stopPointerPropagation}
+          onWheel={stopWheelPropagation}
+          onMouseDown={stopMousePropagation}
+          onMouseMove={stopMousePropagation}
+          onMouseUp={stopMousePropagation}
+        >
+          <input
+            ref={addVerticalOrient}
+            type="range"
+            min={String(minZoom)}
+            max={String(maxZoom)}
+            step={String(this.step)}
+            value={String(clampedZoom)}
+            aria-label="Adjust Y-axis zoom"
+            style={VERTICAL_SLIDER_STYLE}
+            onInput={handleInput}
+            onChange={handleInput}
+            onPointerDown={stopPointerPropagation}
+            onPointerMove={stopPointerPropagation}
+            onPointerUp={stopPointerPropagation}
+            onWheel={stopWheelPropagation}
+            onMouseDown={stopMousePropagation}
+            onMouseMove={stopMousePropagation}
+            onMouseUp={stopMousePropagation}
+          />
+        </div>
+        <IconButton
+          icon={makeTextIcon('＋')}
+          style={ZOOM_BUTTON_STYLE}
+          title="zoom in"
+          onClick={() => this.handleZoomDelta(this.step)}
+        />
+      </div>,
+      rootElement
+    );
+  }
+
+  override onViewportChange(viewport: OrthographicViewport): void {
+    const targetViewId = this.props.targetViewId ?? this.viewId;
+    if (targetViewId && targetViewId !== viewport.id) return;
+
+    const viewState = this.getViewportViewState(viewport);
+    const zoomY = viewport.zoomY;
+    this.currentZoom = zoomY;
+
+    if (this.props.minZoom === undefined) {
+      const minZoom = getZoomLimitForAxis(viewState.minZoom, 1);
+      if (Number.isFinite(minZoom)) {
+        this.inferredMinZoom = minZoom;
+      }
+    }
+
+    if (this.props.maxZoom === undefined) {
+      const maxZoom = getZoomLimitForAxis(viewState.maxZoom, 1);
+      if (Number.isFinite(maxZoom)) {
+        this.inferredMaxZoom = maxZoom;
+      }
+    }
+
+    this.updateHTMLIfRenderedStateChanged();
+  }
+
+  /**
+   * Returns the effective min/max bounds and the clamped zoom value currently shown in the slider.
+   */
+  private getRenderedZoomState(): RenderedZoomState {
+    const {minZoom, maxZoom} = this.getZoomBounds();
+    return {
+      minZoom,
+      maxZoom,
+      clampedZoom: clamp(this.currentZoom, minZoom, maxZoom)
+    };
+  }
+
+  /**
+   * Re-renders the widget only when the displayed slider state changed.
+   */
+  private updateHTMLIfRenderedStateChanged(): void {
+    const nextState = this.getRenderedZoomState();
+    const previousState = this.lastRenderedZoomState;
+    if (
+      previousState &&
+      previousState.clampedZoom === nextState.clampedZoom &&
+      previousState.minZoom === nextState.minZoom &&
+      previousState.maxZoom === nextState.maxZoom
+    ) {
+      return;
+    }
+    this.lastRenderedZoomState = nextState;
+    this.updateHTML();
+  }
+
+  /**
+   * Resolves the slider min/max bounds from explicit props or inferred viewport limits.
+   */
+  private getZoomBounds(): {minZoom: number; maxZoom: number} {
+    const minZoom = this.props.minZoom ?? this.inferredMinZoom ?? Number.NEGATIVE_INFINITY;
+    const maxZoom = this.props.maxZoom ?? this.inferredMaxZoom ?? Number.POSITIVE_INFINITY;
+
+    if (minZoom > maxZoom) {
+      return {minZoom: maxZoom, maxZoom: minZoom};
+    }
+    return {
+      minZoom: Number.isFinite(minZoom) ? minZoom : DEFAULT_ZOOM_LIMITS.min,
+      maxZoom: Number.isFinite(maxZoom) ? maxZoom : DEFAULT_ZOOM_LIMITS.max
+    };
+  }
+
+  private getTargetViewports(): OrthographicViewport[] {
+    const deck = this.deck;
+    if (!deck) {
+      return [];
+    }
+    if (this.viewId) {
+      if (hasViewManager(deck)) {
+        const viewport = (deck as Deck & {viewManager?: any}).viewManager?.getViewport(
+          this.props.targetViewId ?? this.viewId
+        );
+        return viewport ? [viewport] : [];
+      }
+      return [];
+    }
+    return deck.getViewports() as OrthographicViewport[];
+  }
+
+  private getViewportViewState(viewport: OrthographicViewport): OrthographicViewState {
+    const deck = this.deck;
+    const viewManager =
+      deck && hasViewManager(deck) ? (deck as Deck & {viewManager?: any}).viewManager : null;
+    const viewId = this.viewId || viewport.id;
+    if (viewManager) {
+      try {
+        return {...viewManager.getViewState(viewId)} as OrthographicViewState;
+      } catch (err) {
+        return cloneViewState(viewManager.viewState) as OrthographicViewState;
+      }
+    }
+    return cloneViewState(viewport) as OrthographicViewState;
+  }
+
+  private handleZoomDelta(delta: number) {
+    const {minZoom, maxZoom} = this.getZoomBounds();
+
+    for (const viewport of this.getTargetViewports()) {
+      const zoomY = viewport.zoomY;
+      const nextZoom = clamp(zoomY + delta, minZoom, maxZoom);
+      this.updateViewState(viewport, nextZoom);
+    }
+  }
+
+  private handleZoomTo(zoom: number) {
+    const {minZoom, maxZoom} = this.getZoomBounds();
+    const nextZoom = clamp(zoom, minZoom, maxZoom);
+
+    for (const viewport of this.getTargetViewports()) {
+      this.updateViewState(viewport, nextZoom);
+    }
+  }
+
+  private updateViewState(viewport: OrthographicViewport, nextZoomY: number) {
+    if (!this.deck) {
+      return;
+    }
+
+    const {contentBounds} = this.props;
+    const viewState = this.getViewportViewState(viewport);
+    const zoomX = viewport.zoomX;
+    const newViewState = {...viewState, zoom: [zoomX, nextZoomY]};
+    if (contentBounds) {
+      const targetY = viewport.target?.[1] ?? 0;
+      const minY = contentBounds[0][1];
+      const maxY = contentBounds[1][1];
+      if (targetY < minY || targetY > maxY) {
+        const nextViewport = new OrthographicViewport({...viewport, zoomY: nextZoomY});
+        const anchor = [contentBounds[0][0], Math.max(minY, Math.min(maxY, targetY))];
+        const anchorPixels = viewport.project(anchor);
+        newViewState.target = nextViewport.panByPosition(anchor, anchorPixels).target;
+      }
+    }
+
+    const viewId = this.viewId || viewport.id || 'default-view';
+    this.currentZoom = nextZoomY;
+    this.updateHTMLIfRenderedStateChanged();
+
+    // @ts-expect-error Using private method until a public alternative is available
+    this.deck._onViewStateChange({viewId, viewState: newViewState, interactionState: {}});
+  }
+}

package/src/widgets/heap-memory-widget.tsx

@@ -0,0 +1,223 @@
+/** @jsxImportSource preact */
+import {Widget} from '@deck.gl/core';
+import {render} from 'preact';
+import {useEffect, useMemo, useState} from 'preact/hooks';
+
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import type {JSX} from 'preact';
+
+type HeapMemoryInfo = {
+  jsHeapSizeLimit: number;
+  totalJSHeapSize: number;
+  usedJSHeapSize: number;
+};
+
+export type HeapMemoryWidgetProps = WidgetProps & {
+  placement?: WidgetPlacement;
+  /** How frequently to poll the heap usage, in milliseconds. */
+  pollIntervalMs?: number;
+};
+
+const DEFAULT_MEMORY_INFO: HeapMemoryInfo = {
+  jsHeapSizeLimit: 0,
+  totalJSHeapSize: 0,
+  usedJSHeapSize: 0
+};
+
+function clampRatio(value: number): number {
+  if (!Number.isFinite(value) || value <= 0) {
+    return 0;
+  }
+  if (value >= 1) {
+    return 1;
+  }
+  return value;
+}
+
+function formatGigabytesValue(bytes: number): string {
+  if (!Number.isFinite(bytes)) {
+    return '0.00';
+  }
+  const gigabytes = bytes / 1024 / 1024 / 1024;
+  return gigabytes.toFixed(2);
+}
+
+type HeapMemoryWidgetViewProps = {
+  pollIntervalMs: number;
+};
+
+function HeapMemoryWidgetView({pollIntervalMs}: HeapMemoryWidgetViewProps) {
+  const [memoryInfo, setMemoryInfo] = useState<HeapMemoryInfo>(DEFAULT_MEMORY_INFO);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const updateMemory = () => {
+      if (!isMounted || typeof window === 'undefined') {
+        return;
+      }
+      const memory = (window.performance as Performance & {memory?: HeapMemoryInfo}).memory;
+      if (!memory) {
+        return;
+      }
+
+      setMemoryInfo({
+        jsHeapSizeLimit: memory.jsHeapSizeLimit ?? 0,
+        totalJSHeapSize: memory.totalJSHeapSize ?? 0,
+        usedJSHeapSize: memory.usedJSHeapSize ?? 0
+      });
+    };
+
+    updateMemory();
+    const interval = window.setInterval(updateMemory, Math.max(500, pollIntervalMs));
+    return () => {
+      isMounted = false;
+      window.clearInterval(interval);
+    };
+  }, [pollIntervalMs]);
+
+  const {jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize} = memoryInfo;
+
+  const {usedRatio, reservedRatio} = useMemo(() => {
+    const limit = jsHeapSizeLimit || 0;
+    if (!limit) {
+      return {usedRatio: 0, reservedRatio: 0} as const;
+    }
+    const used = clampRatio(usedJSHeapSize / limit);
+    const total = clampRatio(totalJSHeapSize / limit);
+
+    return {
+      usedRatio: used,
+      reservedRatio: Math.max(0, total - used)
+    } as const;
+  }, [jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize]);
+
+  const gradient = useMemo(() => {
+    const usedColor =
+      usedRatio < 0.5
+        ? 'rgba(107, 114, 128, 0.55)'
+        : usedRatio < 0.8
+          ? 'rgba(234, 179, 8, 0.6)'
+          : 'rgba(239, 68, 68, 0.7)';
+    const reservedColor = 'rgba(148, 163, 184, 0.35)';
+    const remainingColor = 'rgba(226, 232, 240, 0.35)';
+
+    const usedPercent = (usedRatio * 100).toFixed(2);
+    const reservedEnd = ((usedRatio + reservedRatio) * 100).toFixed(2);
+
+    return `linear-gradient(90deg, ${usedColor} 0%, ${usedColor} ${usedPercent}%, ${reservedColor} ${usedPercent}%, ${reservedColor} ${reservedEnd}%, ${remainingColor} ${reservedEnd}%, ${remainingColor} 100%)`;
+  }, [reservedRatio, usedRatio]);
+
+  const hasMemoryInfo = jsHeapSizeLimit > 0;
+  const valueText = hasMemoryInfo ? formatGigabytesValue(usedJSHeapSize) : 'N/A';
+  const title = hasMemoryInfo ? `Heap Size: ${valueText}GB` : 'Heap Size unavailable';
+
+  const buttonStyle: JSX.CSSProperties = {
+    position: 'relative',
+    padding: 0,
+    borderRadius: 'var(--button-corner-radius)',
+    backgroundImage: gradient,
+    backgroundColor: 'var(--button-background)',
+    color: 'var(--deck-widget-text-color, #111827)',
+    border: '1px solid var(--button-stroke)',
+    boxShadow: 'var(--button-shadow)',
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    gap: '0px',
+    fontSize: '10px',
+    fontWeight: 700,
+    userSelect: 'none',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '100% 100%',
+    width: '100%',
+    height: '100%'
+  };
+
+  return (
+    <div className="deck-widget-button">
+      <button
+        className="deck-widget-icon-button deck-widget-heap-memory"
+        type="button"
+        title={title}
+        aria-label="Heap size"
+        style={buttonStyle}
+      >
+        <span
+          style={{
+            lineHeight: 1.05,
+            fontSize: '10px',
+            textShadow: '0 1px 1px rgba(255, 255, 255, 0.35)'
+          }}
+        >
+          {valueText}
+        </span>
+        <span
+          style={{
+            lineHeight: 1,
+            fontSize: '9px',
+            textShadow: '0 1px 1px rgba(255, 255, 255, 0.35)'
+          }}
+        >
+          GB
+        </span>
+      </button>
+    </div>
+  );
+}
+
+export class HeapMemoryWidget extends Widget<HeapMemoryWidgetProps> {
+  static override defaultProps = {
+    ...Widget.defaultProps,
+    id: 'heap-memory',
+    placement: 'top-right',
+    pollIntervalMs: 2000
+  } satisfies Required<WidgetProps> &
+    Required<Pick<HeapMemoryWidgetProps, 'placement' | 'pollIntervalMs'>> &
+    HeapMemoryWidgetProps;
+
+  placement: WidgetPlacement = HeapMemoryWidget.defaultProps.placement;
+  className = 'deck-widget-heap-memory';
+
+  #pollIntervalMs = HeapMemoryWidget.defaultProps.pollIntervalMs;
+  #rootElement: HTMLElement | null = null;
+
+  constructor(props: HeapMemoryWidgetProps = {}) {
+    super({...HeapMemoryWidget.defaultProps, ...props});
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    if (props.pollIntervalMs !== undefined) {
+      this.#pollIntervalMs = props.pollIntervalMs;
+    }
+  }
+
+  override setProps(props: Partial<HeapMemoryWidgetProps>): void {
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    if (props.pollIntervalMs !== undefined) {
+      this.#pollIntervalMs = props.pollIntervalMs;
+    }
+    super.setProps(props);
+  }
+
+  override onRenderHTML(rootElement: HTMLElement): void {
+    this.#rootElement = rootElement;
+    const className = ['deck-widget', this.className, this.props.className]
+      .filter(Boolean)
+      .join(' ');
+
+    rootElement.className = className;
+
+    render(<HeapMemoryWidgetView pollIntervalMs={this.#pollIntervalMs} />, rootElement);
+  }
+
+  override onRemove(): void {
+    if (this.#rootElement) {
+      render(null, this.#rootElement);
+    }
+  }
+}