@deck.gl/widgets 9.2.11 → 9.3.0-alpha.1

package/src/themes.ts

@@ -30,6 +30,13 @@ export type DeckWidgetTheme = {
   '--menu-shadow'?: string;
   '--menu-text'?: string;
   '--menu-item-hover'?: string;
+  // scrollbar
+  '--range-step-button-size'?: string;
+  '--range-track-size'?: string;
+  '--range-thumb-size'?: string;
+  '--range-track-color'?: string;
+  '--range-thumb-color'?: string;
+  '--range-decoration-active-color'?: string;
 };
 
 export const LightTheme = {
@@ -52,7 +59,13 @@ export const LightTheme = {
   '--menu-border': 'unset',
   '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
   '--menu-text': 'rgb(24, 24, 26, 1)',
-  '--menu-item-hover': 'rgba(0, 0, 0, 0.08)'
+  '--menu-item-hover': 'rgba(0, 0, 0, 0.08)',
+  '--range-step-button-size': '24px',
+  '--range-track-size': '16px',
+  '--range-thumb-size': '10px',
+  '--range-track-color': '#d8d8e5',
+  '--range-thumb-color': '#616166',
+  '--range-decoration-active-color': '#f8dd50'
 } as const satisfies Required<DeckWidgetTheme>;
 
 export const DarkTheme = {
@@ -75,7 +88,13 @@ export const DarkTheme = {
   '--menu-border': 'unset',
   '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
   '--menu-text': 'rgb(215, 214, 229, 1)',
-  '--menu-item-hover': 'rgba(255, 255, 255, 0.1)'
+  '--menu-item-hover': 'rgba(255, 255, 255, 0.1)',
+  '--range-step-button-size': '24px',
+  '--range-track-size': '16px',
+  '--range-thumb-size': '10px',
+  '--range-track-color': '#2c2c30',
+  '--range-thumb-color': '#9e9da8',
+  '--range-decoration-active-color': '#dd7d2c'
 } as const satisfies Required<DeckWidgetTheme>;
 
 export const LightGlassTheme = {
@@ -99,7 +118,13 @@ export const LightGlassTheme = {
   '--menu-border': '1px solid rgba(255, 255, 255, 0.6)',
   '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
   '--menu-text': 'rgb(24, 24, 26, 1)',
-  '--menu-item-hover': 'rgba(0, 0, 0, 0.08)'
+  '--menu-item-hover': 'rgba(0, 0, 0, 0.08)',
+  '--range-step-button-size': '24px',
+  '--range-track-size': '16px',
+  '--range-thumb-size': '10px',
+  '--range-track-color': 'rgba(215, 214, 229, 0.3)',
+  '--range-thumb-color': 'rgba(97, 97, 102, 1)',
+  '--range-decoration-active-color': 'rgba(255, 215, 0, 0.6)'
 } as const satisfies Required<DeckWidgetTheme>;
 
 export const DarkGlassTheme = {
@@ -123,5 +148,11 @@ export const DarkGlassTheme = {
   '--menu-border': '1px solid rgba(18, 18, 20, 0.75)',
   '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
   '--menu-text': 'rgb(215, 214, 229, 1)',
-  '--menu-item-hover': 'rgba(255, 255, 255, 0.1)'
+  '--menu-item-hover': 'rgba(255, 255, 255, 0.1)',
+  '--range-step-button-size': '24px',
+  '--range-track-size': '16px',
+  '--range-thumb-size': '10px',
+  '--range-track-color': 'rgba(24, 24, 26, 0.3)',
+  '--range-thumb-color': 'rgba(158, 157, 168, 1)',
+  '--range-decoration-active-color': 'rgba(255, 145, 0, 0.6)'
 } as const satisfies Required<DeckWidgetTheme>;

package/src/timeline-widget.tsx

@@ -3,30 +3,50 @@
 // Copyright (c) vis.gl contributors
 
 import {Widget, type WidgetPlacement, type WidgetProps} from '@deck.gl/core';
+import type {Timeline} from '@luma.gl/engine';
 import {render} from 'preact';
 import {IconButton} from './lib/components/icon-button';
+import {RangeInput} from './lib/components/range-input';
 
 export type TimelineWidgetProps = WidgetProps & {
   /** Widget positioning within the view. Default 'bottom-left'. */
   placement?: WidgetPlacement;
   /** View to attach to and interact with. Required when using multiple views. */
   viewId?: string | null;
+  /** Timeline instance to manipulate. */
+  timeline?: Timeline | null;
   /** Slider timeRange [min, max]. */
   timeRange?: [number, number];
-  /** Slider step. */
+  /** Slider step.
+   * @default 1
+   */
   step?: number;
-  /** Initial slider value. */
+  /** Initial slider value.
+   * @default `timeRange[0]`
+   */
   initialTime?: number;
   /** Callback when value changes. */
   onTimeChange?: (value: number) => void;
-  /** Play interval in milliseconds. */
+  /** Start playing automatically
+   * @default false
+   */
+  autoPlay?: boolean;
+  /** Start from the beginning whentime reaches the end
+   * @default false
+   */
+  loop?: boolean;
+  /** Play interval in milliseconds.
+   * @default 1000
+   */
   playInterval?: number;
+  /** Callback to get label from time value */
+  formatLabel?: (value: number) => string;
 };
 
 export class TimelineWidget extends Widget<TimelineWidgetProps> {
   id = 'timeline';
   className = 'deck-widget-timeline';
-  placement: WidgetPlacement = 'bottom-left';
+  placement: WidgetPlacement = 'fill';
 
   private playing = false;
   private timerId: number | null = null;
@@ -37,21 +57,25 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
     id: 'timeline',
     placement: 'bottom-left',
     viewId: null,
+    timeline: null,
     timeRange: [0, 100],
     step: 1,
     initialTime: undefined!,
     onTimeChange: () => {},
-    playInterval: 1000
+    autoPlay: false,
+    loop: false,
+    playInterval: 1000,
+    formatLabel: String
   };
 
   constructor(props: TimelineWidgetProps = {}) {
     super(props);
     this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
+    this.props.timeline?.setTime(this.currentTime);
     this.setProps(this.props);
   }
 
   setProps(props: Partial<TimelineWidgetProps>): void {
-    this.placement = props.placement ?? this.placement;
     this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
@@ -59,6 +83,7 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
   onAdd(): void {
     this.playing = false;
     this.timerId = null;
+    if (this.props.autoPlay) this.play();
   }
 
   onRemove(): void {
@@ -66,19 +91,43 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
   }
 
   onRenderHTML(rootElement: HTMLElement): void {
+    const {timeRange, step, formatLabel} = this.props;
+    const currentTime = this.currentTime;
+
+    rootElement.dataset.placement = this.props.placement;
+
     render(
-      <div style={{display: 'flex', alignItems: 'center', pointerEvents: 'auto'}}>
-        <IconButton label={this.playing ? 'Pause' : 'Play'} onClick={this.handlePlayPause}>
-          <div className="text">{this.playing ? '⏸' : '▶'}</div>
-        </IconButton>
-        <input
-          type="range"
-          className="timeline-slider"
-          min={this.props.timeRange[0]}
-          max={this.props.timeRange[1]}
-          step={this.props.step}
-          value={this.currentTime}
-          onInput={this.handleSliderChange}
+      <div className="deck-widget-button-group">
+        {this.playing ? (
+          <IconButton
+            label="Pause"
+            className="deck-widget-timeline-pause"
+            onClick={this.handlePlayPause}
+          />
+        ) : (
+          <IconButton
+            label="Play"
+            className="deck-widget-timeline-play"
+            onClick={this.handlePlayPause}
+          />
+        )}
+        <RangeInput
+          min={timeRange[0]}
+          max={timeRange[1]}
+          orientation="horizontal"
+          step={step}
+          value={[currentTime, currentTime]}
+          onChange={this.handleTimeChange}
+          decorations={[
+            {
+              position: [currentTime, currentTime + step],
+              element: (
+                <div className="deck-widget-timeline-label deck-widget-timeline-label--current">
+                  {formatLabel(currentTime)}
+                </div>
+              )
+            }
+          ]}
         />
       </div>,
       rootElement
@@ -89,25 +138,24 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
     if (this.playing) {
       this.stop();
     } else {
-      this.start();
+      this.play();
     }
   };
 
-  private handleSliderChange = (e: Event): void => {
-    const input = e.target as HTMLInputElement;
-    const val = Number(input.value);
-    this.currentTime = val;
-    this.props.onTimeChange(val);
+  private handleTimeChange = ([value]: [number, number]): void => {
+    this.currentTime = value;
+    this.props.timeline?.setTime(value);
+    this.props.onTimeChange(value);
     this.updateHTML();
   };
 
-  private start(): void {
+  public play(): void {
     this.playing = true;
     this.updateHTML();
     this.tick();
   }
 
-  private stop(): void {
+  public stop(): void {
     this.playing = false;
     if (this.timerId !== null) {
       window.clearTimeout(this.timerId);
@@ -117,16 +165,31 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
   }
 
   private tick = (): void => {
-    const [min, max] = this.props.timeRange;
-    let next = this.currentTime + this.props.step;
-    if (next > max) {
-      next = min;
+    const {
+      timeRange: [min, max],
+      step,
+      loop
+    } = this.props;
+    if (step > 0) {
+      let next = Math.floor(this.currentTime / step) * step + step;
+      if (next > max) {
+        if (this.currentTime < max) {
+          next = max;
+        } else if (loop) {
+          next = min;
+        } else {
+          next = max;
+          this.playing = false;
+        }
+      }
+      this.currentTime = next;
+      this.props.onTimeChange(next);
+      this.updateHTML();
     }
-    this.currentTime = next;
-    this.props.onTimeChange(next);
-    this.updateHTML();
     if (this.playing) {
       this.timerId = window.setTimeout(this.tick, this.props.playInterval);
+    } else {
+      this.timerId = null;
     }
   };
 }

package/src/zoom-widget.tsx

@@ -3,10 +3,10 @@
 // Copyright (c) vis.gl contributors
 
 import {Widget, FlyToInterpolator, LinearInterpolator} from '@deck.gl/core';
-import type {Viewport, WidgetProps, WidgetPlacement} from '@deck.gl/core';
+import type {WidgetProps, WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 import {ButtonGroup} from './lib/components/button-group';
-import {GroupedIconButton} from './lib/components/grouped-icon-button';
+import {IconButton} from './lib/components/icon-button';
 
 export type ZoomWidgetProps = WidgetProps & {
   /** Widget positioning within the view. Default 'top-left'. */
@@ -37,7 +37,6 @@ export class ZoomWidget extends Widget<ZoomWidgetProps> {
 
   className = 'deck-widget-zoom';
   placement: WidgetPlacement = 'top-left';
-  viewports: {[id: string]: Viewport} = {};
 
   constructor(props: ZoomWidgetProps = {}) {
     super(props);
@@ -53,12 +52,12 @@ export class ZoomWidget extends Widget<ZoomWidgetProps> {
   onRenderHTML(rootElement: HTMLElement): void {
     const ui = (
       <ButtonGroup orientation={this.props.orientation}>
-        <GroupedIconButton
+        <IconButton
           onClick={() => this.handleZoomIn()}
           label={this.props.zoomInLabel}
           className="deck-widget-zoom-in"
         />
-        <GroupedIconButton
+        <IconButton
           onClick={() => this.handleZoomOut()}
           label={this.props.zoomOutLabel}
           className="deck-widget-zoom-out"
@@ -68,14 +67,21 @@ export class ZoomWidget extends Widget<ZoomWidgetProps> {
     render(ui, rootElement);
   }
 
-  onViewportChange(viewport: Viewport) {
-    this.viewports[viewport.id] = viewport;
-  }
+  handleZoom(viewId: string, nextZoom: number) {
+    // Respect minZoom/maxZoom constraints from the view state
+    const viewState = this.getViewState(viewId);
+    if (viewState) {
+      const {minZoom, maxZoom} = viewState as any;
+      if (Number.isFinite(minZoom)) {
+        nextZoom = Math.max(minZoom, nextZoom);
+      }
+      if (Number.isFinite(maxZoom)) {
+        nextZoom = Math.min(maxZoom, nextZoom);
+      }
+    }
 
-  handleZoom(viewport: Viewport, nextZoom: number) {
-    const viewId = this.viewId || viewport?.id || 'default-view';
     const nextViewState: Record<string, unknown> = {
-      ...viewport,
+      ...viewState,
       zoom: nextZoom
     };
     if (this.props.transitionDuration > 0) {
@@ -91,20 +97,18 @@ export class ZoomWidget extends Widget<ZoomWidgetProps> {
   }
 
   handleZoomIn() {
-    for (const viewport of Object.values(this.viewports)) {
-      this.handleZoom(viewport, viewport.zoom + 1);
+    const viewIds = this.viewId ? [this.viewId] : (this.deck?.getViews().map(v => v.id) ?? []);
+    for (const viewId of viewIds) {
+      const viewState = this.getViewState(viewId);
+      this.handleZoom(viewId, (viewState.zoom as number) + 1);
     }
   }
 
   handleZoomOut() {
-    for (const viewport of Object.values(this.viewports)) {
-      this.handleZoom(viewport, viewport.zoom - 1);
+    const viewIds = this.viewId ? [this.viewId] : (this.deck?.getViews().map(v => v.id) ?? []);
+    for (const viewId of viewIds) {
+      const viewState = this.getViewState(viewId);
+      this.handleZoom(viewId, (viewState.zoom as number) - 1);
     }
   }
-
-  /** @todo - move to deck or widget manager */
-  private setViewState(viewId: string, viewState: Record<string, unknown>): void {
-    // @ts-ignore Using private method temporary until there's a public one
-    this.deck._onViewStateChange({viewId, viewState, interactionState: {}});
-  }
 }

package/dist/lib/components/grouped-icon-button.d.ts

@@ -1,10 +0,0 @@
-import type { ComponentChildren, JSX } from 'preact';
-export type GroupedIconButtonProps = {
-    className?: string;
-    label?: string;
-    onClick?: JSX.MouseEventHandler<HTMLButtonElement>;
-    children?: ComponentChildren;
-};
-/** Renders an icon button as part of a ButtonGroup */
-export declare const GroupedIconButton: (props: GroupedIconButtonProps) => JSX.Element;
-//# sourceMappingURL=grouped-icon-button.d.ts.map

package/dist/lib/components/grouped-icon-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"grouped-icon-button.d.ts","sourceRoot":"","sources":["../../../src/lib/components/grouped-icon-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,iBAAiB,EAAE,GAAG,EAAC,MAAM,QAAQ,CAAC;AAEnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,gBAY9D,CAAC"}

package/dist/lib/components/grouped-icon-button.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-/** Renders an icon button as part of a ButtonGroup */
-export const GroupedIconButton = (props) => {
-    const { className = '', label, onClick, children } = props;
-    return (_jsx("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick: onClick, title: label, children: children ? children : _jsx("div", { className: "deck-widget-icon" }) }));
-};
-//# sourceMappingURL=grouped-icon-button.js.map

package/dist/lib/components/grouped-icon-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grouped-icon-button.js","sourceRoot":"","sources":["../../../src/lib/components/grouped-icon-button.tsx"],"names":[],"mappings":";AAaA,sDAAsD;AACtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACjE,MAAM,EAAC,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAC,GAAG,KAAK,CAAC;IACzD,OAAO,CACL,iBACE,SAAS,EAAE,2BAA2B,SAAS,EAAE,EACjD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,YAEX,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,kBAAkB,GAAG,GACpD,CACV,CAAC;AACJ,CAAC,CAAC"}

package/dist/lib/components/simple-menu.d.ts

@@ -1,16 +0,0 @@
-import type { JSX } from 'preact';
-export type SimpleMenuProps = {
-    menuItems: {
-        key: string;
-        label: string;
-    }[];
-    onItemSelected: (key: string) => void;
-    position: {
-        x: number;
-        y: number;
-    };
-    style?: JSX.CSSProperties;
-};
-/** Renders a simple dropdown menu at an arbitrary position */
-export declare const SimpleMenu: (props: SimpleMenuProps) => JSX.Element;
-//# sourceMappingURL=simple-menu.d.ts.map

package/dist/lib/components/simple-menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"simple-menu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/simple-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,QAAQ,CAAC;AAqBhC,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACjC,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,UAAU,UAAW,eAAe,gBAsBhD,CAAC"}

package/dist/lib/components/simple-menu.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-const MENU_STYLE = {
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    background: 'white',
-    border: '1px solid #ccc',
-    borderRadius: '4px',
-    marginTop: 'var(--menu-gap, 4px)',
-    zIndex: 100
-};
-const MENU_ITEM_STYLE = {
-    background: 'white',
-    border: 'none',
-    padding: '4px',
-    cursor: 'pointer',
-    pointerEvents: 'auto'
-};
-/** Renders a simple dropdown menu at an arbitrary position */
-export const SimpleMenu = (props) => {
-    const { menuItems, onItemSelected, position, style } = props;
-    const styleOverride = {
-        ...MENU_STYLE,
-        ...style,
-        left: `${position.x}px`,
-        top: `${position.y}px`
-    };
-    return (_jsx("div", { style: styleOverride, children: menuItems.map(({ key, label }) => (_jsx("button", { style: { ...MENU_ITEM_STYLE, display: 'block' }, onClick: _ => onItemSelected(key), children: label }, key))) }));
-};
-//# sourceMappingURL=simple-menu.js.map

package/dist/lib/components/simple-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"simple-menu.js","sourceRoot":"","sources":["../../../src/lib/components/simple-menu.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,GAAsB;IACpC,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,CAAC;IACP,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,gBAAgB;IACxB,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,sBAAsB;IACjC,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,eAAe,GAAsB;IACzC,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,SAAS;IACjB,aAAa,EAAE,MAAM;CACtB,CAAC;AASF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACnD,MAAM,EAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC;IAC3D,MAAM,aAAa,GAAsB;QACvC,GAAG,UAAU;QACb,GAAG,KAAK;QACR,IAAI,EAAE,GAAG,QAAQ,CAAC,CAAC,IAAI;QACvB,GAAG,EAAE,GAAG,QAAQ,CAAC,CAAC,IAAI;KACvB,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,aAAa,YACtB,SAAS,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAE,EAAE,CAAC,CAC/B,iBAEE,KAAK,EAAE,EAAC,GAAG,eAAe,EAAE,OAAO,EAAE,OAAO,EAAC,EAC7C,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,YAEhC,KAAK,IAJD,GAAG,CAKD,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}

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

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

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

@@ -1,52 +0,0 @@
-import type {JSX} from 'preact';
-
-const MENU_STYLE: JSX.CSSProperties = {
-  position: 'absolute',
-  top: '100%',
-  left: 0,
-  background: 'white',
-  border: '1px solid #ccc',
-  borderRadius: '4px',
-  marginTop: 'var(--menu-gap, 4px)',
-  zIndex: 100
-};
-
-const MENU_ITEM_STYLE: JSX.CSSProperties = {
-  background: 'white',
-  border: 'none',
-  padding: '4px',
-  cursor: 'pointer',
-  pointerEvents: 'auto'
-};
-
-export type SimpleMenuProps = {
-  menuItems: {key: string; label: string}[];
-  onItemSelected: (key: string) => void;
-  position: {x: number; y: number};
-  style?: JSX.CSSProperties;
-};
-
-/** Renders a simple dropdown menu at an arbitrary position */
-export const SimpleMenu = (props: SimpleMenuProps) => {
-  const {menuItems, onItemSelected, position, style} = props;
-  const styleOverride: JSX.CSSProperties = {
-    ...MENU_STYLE,
-    ...style,
-    left: `${position.x}px`,
-    top: `${position.y}px`
-  };
-
-  return (
-    <div style={styleOverride}>
-      {menuItems.map(({key, label}) => (
-        <button
-          key={key}
-          style={{...MENU_ITEM_STYLE, display: 'block'}}
-          onClick={_ => onItemSelected(key)}
-        >
-          {label}
-        </button>
-      ))}
-    </div>
-  );
-};