@deck.gl-community/widgets 9.2.5 → 9.3.0-beta.1

package/src/widget-panels/reset-view-widget.tsx

@@ -0,0 +1,56 @@
+/** @jsxImportSource preact */
+import {Widget} from '@deck.gl/core';
+import {render} from 'preact';
+
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+
+export type ResetViewWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'top-left'. */
+  placement?: WidgetPlacement;
+  /** Tooltip message */
+  label?: string;
+  /** Callback invoked when the widget button is clicked */
+  onResetView?: () => void;
+};
+
+export class ResetViewWidget extends Widget<ResetViewWidgetProps> {
+  static defaultProps: Required<ResetViewWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'reset-view',
+    placement: 'top-left',
+    label: 'Resize to fit',
+    onResetView: undefined!
+  };
+
+  className = 'deck-widget-reset-view';
+  placement: WidgetPlacement = 'top-left';
+
+  constructor(props: ResetViewWidgetProps = {}) {
+    super(props);
+    this.setProps(this.props);
+  }
+
+  setProps(props: Partial<ResetViewWidgetProps>): void {
+    this.placement = props.placement ?? this.placement;
+    super.setProps(props);
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const label = this.props.label ?? 'Resize to fit';
+
+    render(
+      <div className="deck-widget-button">
+        <button
+          className="deck-widget-icon-button deck-widget-reset-focus"
+          type="button"
+          title={label}
+          aria-label={label}
+          onClick={() => this.props.onResetView?.()}
+        >
+          <div className="deck-widget-icon" />
+        </button>
+      </div>,
+      rootElement
+    );
+  }
+}

package/src/widget-panels/settings-panel.test.tsx

@@ -0,0 +1,286 @@
+/** @jsxImportSource preact */
+import {render} from 'preact';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+
+import {SettingsPanel} from './settings-panel';
+import {AccordeonPanel, TabbedPanel} from './widget-containers';
+
+import type {SettingsSchema, SettingsState} from '../lib/settings/settings';
+
+const TEST_SCHEMA: SettingsSchema = {
+  title: 'Test settings',
+  sections: [
+    {
+      id: 'visibility',
+      name: 'Visibility',
+      settings: [
+        {
+          name: 'flags.enabled',
+          label: 'Enabled',
+          type: 'boolean',
+          description: 'Enable rendering for this layer.'
+        },
+        {
+          name: 'render.opacity',
+          label: 'Opacity',
+          type: 'number',
+          min: 0,
+          max: 1,
+          step: 0.1,
+          description: 'Adjust alpha for rendered paths.'
+        }
+      ]
+    },
+    {
+      id: 'mode',
+      name: 'Mode',
+      settings: [
+        {
+          name: 'mode',
+          label: 'Mode',
+          type: 'select',
+          options: ['all', 'critical-path', 'selected-only'],
+          description: 'Control which traces remain visible.'
+        }
+      ]
+    }
+  ]
+};
+
+const INITIAL_SETTINGS: SettingsState = {
+  flags: {enabled: true},
+  render: {opacity: 0.4},
+  mode: 'all'
+};
+
+function renderSettingsPanel(options?: {
+  settings?: SettingsState;
+  onSettingsChange?: (settings: SettingsState) => void;
+}) {
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+
+  const panel = new SettingsPanel({
+    label: 'Visualization settings',
+    schema: TEST_SCHEMA,
+    settings: options?.settings ?? INITIAL_SETTINGS,
+    onSettingsChange: options?.onSettingsChange
+  });
+
+  render(panel.content, root);
+  const cleanup = () => {
+    render(null, root);
+    root.remove();
+  };
+
+  return {
+    root,
+    cleanup
+  };
+}
+
+function getRequiredInput(root: ParentNode, selector: string): HTMLInputElement {
+  const input = root.querySelector<HTMLInputElement>(selector);
+  if (!input) {
+    throw new Error(`Expected input matching selector: ${selector}`);
+  }
+  return input;
+}
+
+function getRequiredButton(root: ParentNode, selector: string): HTMLButtonElement {
+  const button = root.querySelector<HTMLButtonElement>(selector);
+  if (!button) {
+    throw new Error(`Expected button matching selector: ${selector}`);
+  }
+  return button;
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('SettingsPanel', () => {
+  it('creates section panels with stable ids and preserves section order', () => {
+    const panels = SettingsPanel.createSectionPanels({
+      schema: TEST_SCHEMA,
+      settings: INITIAL_SETTINGS
+    });
+
+    expect(Object.keys(panels)).toEqual(['visibility', 'mode']);
+    expect(panels.visibility?.title).toBe('Visibility');
+    expect(panels.mode?.title).toBe('Mode');
+  });
+
+  // eslint-disable-next-line max-statements
+  it('emits updated settings for nested boolean, clamped numeric, and select values', async () => {
+    const handleSettingsChange = vi.fn<(settings: SettingsState) => void>();
+    const {root, cleanup} = renderSettingsPanel({onSettingsChange: handleSettingsChange});
+
+    const sectionToggles = root.querySelectorAll('button[aria-expanded]');
+    const visibilityToggle = sectionToggles[0] as HTMLButtonElement;
+    const modeToggle = sectionToggles[1] as HTMLButtonElement;
+
+    visibilityToggle.click();
+    await Promise.resolve();
+
+    const checkbox = getRequiredInput(root, 'input[type="checkbox"]');
+    expect(checkbox.checked).toBe(true);
+    checkbox.checked = false;
+    checkbox.dispatchEvent(new Event('input', {bubbles: true}));
+    await Promise.resolve();
+
+    expect(handleSettingsChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        flags: expect.objectContaining({enabled: false})
+      })
+    );
+
+    const numberInput = getRequiredInput(root, 'input[type="number"]');
+    numberInput.value = '2';
+    numberInput.dispatchEvent(new Event('input', {bubbles: true}));
+    await Promise.resolve();
+
+    expect(handleSettingsChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        render: expect.objectContaining({opacity: 1})
+      })
+    );
+
+    modeToggle.click();
+    await Promise.resolve();
+
+    expect(root.querySelector('select')).toBeNull();
+
+    const selectButton = getRequiredButton(root, '#settings-widget-input-mode');
+    selectButton.click();
+    await Promise.resolve();
+
+    const option = Array.from(
+      document.body.querySelectorAll<HTMLButtonElement>('[role="option"]')
+    ).find((button) => button.textContent?.includes('critical-path'));
+    expect(option).toBeTruthy();
+    option?.click();
+    await Promise.resolve();
+
+    expect(handleSettingsChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        mode: 'critical-path'
+      })
+    );
+
+    cleanup();
+  });
+
+  it('uses deck widget theme CSS variables for the settings controls', async () => {
+    const {root, cleanup} = renderSettingsPanel();
+    const sectionToggle = getRequiredButton(root, 'button[aria-expanded]');
+    sectionToggle.click();
+    await Promise.resolve();
+
+    const numberInput = getRequiredInput(root, 'input[type="number"]');
+    expect(numberInput.getAttribute('style')).toContain('var(--button-backdrop-filter');
+
+    cleanup();
+  });
+
+  // eslint-disable-next-line max-statements
+  it('renders a reusable settings panel for sidebar and modal containers', async () => {
+    const handleSettingsChange = vi.fn<(settings: SettingsState) => void>();
+    const {root, cleanup} = renderSettingsPanel({onSettingsChange: handleSettingsChange});
+
+    expect(root.textContent).toContain('Visibility');
+    expect(root.textContent).toContain('Mode');
+
+    const visibilityToggle = root.querySelectorAll('button[aria-expanded]')[0] as HTMLButtonElement;
+    visibilityToggle.click();
+    await Promise.resolve();
+
+    const checkbox = getRequiredInput(root, 'input[type="checkbox"]');
+    checkbox.checked = false;
+    checkbox.dispatchEvent(new Event('input', {bubbles: true}));
+    await Promise.resolve();
+
+    expect(handleSettingsChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        flags: expect.objectContaining({enabled: false})
+      })
+    );
+
+    cleanup();
+  });
+
+  it('composes section panels into tabs without duplicating section titles in the body', async () => {
+    const handleSettingsChange = vi.fn<(settings: SettingsState) => void>();
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+
+    const panel = new TabbedPanel({
+      id: 'settings-tabs',
+      title: 'Settings tabs',
+      panels: SettingsPanel.createSectionPanels({
+        schema: TEST_SCHEMA,
+        settings: INITIAL_SETTINGS,
+        onSettingsChange: handleSettingsChange
+      })
+    });
+
+    render(panel.content, root);
+
+    expect(root.textContent?.match(/Visibility/g)).toHaveLength(1);
+    expect(root.textContent).toContain('Mode');
+
+    const checkbox = getRequiredInput(root, 'input[type="checkbox"]');
+    checkbox.checked = false;
+    checkbox.dispatchEvent(new Event('input', {bubbles: true}));
+    await Promise.resolve();
+
+    expect(handleSettingsChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        flags: expect.objectContaining({enabled: false})
+      })
+    );
+
+    render(null, root);
+    root.remove();
+  });
+
+  it('composes section panels into accordion items without duplicating section titles in the body', async () => {
+    const handleSettingsChange = vi.fn<(settings: SettingsState) => void>();
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+
+    const panel = new AccordeonPanel({
+      id: 'settings-accordion',
+      title: 'Settings accordion',
+      panels: SettingsPanel.createSectionPanels({
+        schema: TEST_SCHEMA,
+        settings: INITIAL_SETTINGS,
+        onSettingsChange: handleSettingsChange
+      })
+    });
+
+    render(panel.content, root);
+
+    const visibilityButton = Array.from(root.querySelectorAll('button')).find((button) =>
+      button.textContent?.includes('Visibility')
+    );
+    visibilityButton?.dispatchEvent(new Event('pointerdown', {bubbles: true}));
+    await Promise.resolve();
+
+    expect(root.textContent?.match(/Visibility/g)).toHaveLength(1);
+
+    const checkbox = getRequiredInput(root, 'input[type="checkbox"]');
+    checkbox.checked = false;
+    checkbox.dispatchEvent(new Event('input', {bubbles: true}));
+    await Promise.resolve();
+
+    expect(handleSettingsChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        flags: expect.objectContaining({enabled: false})
+      })
+    );
+
+    render(null, root);
+    root.remove();
+  });
+});