feat(widgets) Add StatsWidget (#9623)

Author: ibgreen-openai

modules/widgets/package.json

@@ -45,7 +45,8 @@
     "preact": "^10.17.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.1.0"
+    "@deck.gl/core": "^9.1.0",
+    "@luma.gl/core": "^9.1.9"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }

modules/widgets/src/index.ts

@@ -19,6 +19,7 @@ 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';
@@ -35,6 +36,7 @@ export type {FpsWidgetProps} from './fps-widget';
 export type {ScaleWidgetProps} from './scale-widget';
 export type {ThemeWidgetProps} from './theme-widget';
 export type {InfoWidgetProps} from './info-widget';
+export type {StatsWidgetProps} from './stats-widget';
 export type {ContextMenuWidgetProps} from './context-menu-widget';
 export type {SplitterWidgetProps} from './splitter-widget';
 export type {TimelineWidgetProps} from './timeline-widget';

modules/widgets/src/stats-widget.tsx

@@ -0,0 +1,166 @@
+import {Widget, WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import {luma} from '@luma.gl/core';
+import {render} from 'preact';
+import type {Stats, Stat} from '@probe.gl/stats';
+
+const RIGHT_ARROW = '\u25b6';
+const DOWN_ARROW = '\u2b07';
+
+const DEFAULT_COUNT_FORMATTER = (stat: Stat): string => `${stat.name}: ${stat.count}`;
+
+function formatTime(time: number): string {
+  return time < 1000 ? `${time.toFixed(2)}ms` : `${(time / 1000).toFixed(2)}s`;
+}
+
+function formatMemory(bytes: number): string {
+  const mb = bytes / 1e6;
+  return `${mb.toFixed(1)} MB`;
+}
+
+export const DEFAULT_FORMATTERS: Record<string, (stat: Stat) => string> = {
+  count: DEFAULT_COUNT_FORMATTER,
+  averageTime: (stat: Stat) => `${stat.name}: ${formatTime(stat.getAverageTime())}`,
+  totalTime: (stat: Stat) => `${stat.name}: ${formatTime(stat.time)}`,
+  fps: (stat: Stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
+  memory: (stat: Stat) => `${stat.name}: ${formatMemory(stat.count)}`
+};
+
+export type StatsWidgetProps = WidgetProps & {
+  type?: 'deck' | 'luma' | 'device' | 'custom';
+  /** Stats object to visualize. */
+  stats?: Stats;
+  /** Title shown in the header of the pop-up. Defaults to stats.id. */
+  title?: string;
+  /** How many redraws to wait between updates. */
+  framesPerUpdate?: number;
+  /** Custom formatters for stat values. */
+  formatters?: Record<string, string | ((stat: Stat) => string)>;
+  /** Whether to reset particular stats after each update. */
+  resetOnUpdate?: Record<string, boolean>;
+};
+
+/** Displays probe.gl stats in a floating pop-up. */
+export class StatsWidget extends Widget<StatsWidgetProps> {
+  static defaultProps: Required<StatsWidgetProps> = {
+    ...Widget.defaultProps,
+    type: 'deck',
+    stats: undefined!,
+    title: 'Stats',
+    framesPerUpdate: 1,
+    formatters: {},
+    resetOnUpdate: {},
+    id: 'stats'
+  };
+
+  className = 'deck-widget-stats';
+  placement = 'top-left' as WidgetPlacement;
+
+  private _counter = 0;
+  private _formatters: Record<string, (stat: Stat) => string>;
+  private _resetOnUpdate: Record<string, boolean>;
+  collapsed: boolean = true;
+  _stats: Stats;
+
+  constructor(props: StatsWidgetProps = {}) {
+    super(props, StatsWidget.defaultProps);
+    this._formatters = {...DEFAULT_FORMATTERS};
+    this.setProps(props);
+    this._resetOnUpdate = {...this.props.resetOnUpdate};
+    this._stats = this.props.stats;
+  }
+
+  setProps(props: Partial<StatsWidgetProps>): void {
+    super.setProps(props);
+    this._stats = this._getStats();
+    if (props.formatters) {
+      for (const name in props.formatters) {
+        const f = props.formatters[name];
+        this._formatters[name] =
+          typeof f === 'string' ? DEFAULT_FORMATTERS[f] || DEFAULT_COUNT_FORMATTER : f;
+      }
+    }
+    if (props.resetOnUpdate) {
+      this._resetOnUpdate = {...props.resetOnUpdate};
+    }
+  }
+
+  onAdd(): void {
+    this._stats = this._getStats();
+    this.updateHTML();
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const stats = this._stats;
+    const collapsed = this.collapsed;
+    const title = this.props.title || stats?.id || 'Stats';
+    const items: JSX.Element[] = [];
+
+    if (!collapsed && stats) {
+      stats.forEach(stat => {
+        const lines = this._getLines(stat);
+        if (this._resetOnUpdate && this._resetOnUpdate[stat.name]) {
+          stat.reset();
+        }
+        lines.forEach((line, i) => {
+          items.push(
+            <div key={`${stat.name}-${i}`} style={{whiteSpace: 'pre'}}>
+              {line}
+            </div>
+          );
+        });
+      });
+    }
+
+    render(
+      <div className="deck-widget-stats-container" style={{cursor: 'default'}}>
+        <div
+          className="deck-widget-stats-header"
+          style={{cursor: 'pointer', pointerEvents: 'auto'}}
+          onClick={this._toggleCollapsed}
+        >
+          {collapsed ? RIGHT_ARROW : DOWN_ARROW} {title}
+        </div>
+        {!collapsed && <div className="deck-widget-stats-content deck-widget-common">{items}</div>}
+      </div>,
+      rootElement
+    );
+  }
+
+  onRedraw(): void {
+    const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
+    if (this._counter++ % framesPerUpdate === 0) {
+      console.log('Redrawing stats widget');
+      this.updateHTML();
+    }
+  }
+
+  protected _getStats(): Stats {
+    switch (this.props.type) {
+      case 'deck':
+        // @ts-expect-error stats is protected
+        return this.deck?.stats;
+      case 'luma':
+        return Array.from(luma.stats.stats.values())[0];
+      case 'device':
+        // @ts-expect-error is protected
+        const device = this.deck?.device;
+        const stats = device?.statsManager.stats.values();
+        return stats ? Array.from(stats)[0] : undefined;
+      case 'custom':
+        return this.props.stats;
+      default:
+        throw new Error(`Unknown stats type: ${this.props.type}`);
+    }
+  }
+
+  protected _toggleCollapsed = (): void => {
+    this.collapsed = !this.collapsed;
+    this.updateHTML();
+  };
+
+  protected _getLines(stat: Stat): string[] {
+    const formatter =
+      this._formatters[stat.name] || this._formatters[stat.type || ''] || DEFAULT_COUNT_FORMATTER;
+    return formatter(stat).split('\n');
+  }
+}

modules/widgets/src/stylesheet.css

@@ -250,3 +250,29 @@
   pointer-events: auto;
   cursor: pointer;
 }
+
+/**
+ * Reusable styles for widgets
+ */
+.deck-widget-common {
+  font-family:
+    'SF Mono',
+    /* macOS */
+    'Menlo',
+    /* macOS */
+    'Consolas',
+    /* Windows */
+    'DejaVu Sans Mono',
+    /* Linux */
+    'Liberation Mono',
+    /* Linux */
+    monospace;
+  background-color: var(--button-background, #fff);
+  color: #333;
+}
+
+.deck-widget-stats-container {
+  font-size: 0.7rem;
+  /* Approximately 14px */
+  line-height: 1.6;
+}

test/apps/widgets-example-9.2/app.ts

@@ -20,7 +20,8 @@ import {
   _SplitterWidget,
   _TimelineWidget,
   _ViewSelectorWidget,
-  _ContextMenuWidget
+  _ContextMenuWidget,
+  _StatsWidget
 } from '@deck.gl/widgets';
 import '@deck.gl/widgets/stylesheet.css';
 
@@ -136,7 +137,8 @@ const deck = new Deck({
       viewId2: 'right-map',
       orientation: 'vertical',
       onChange: ratio => deck.setProps({views: getViewsForSplit(ratio * 100)})
-    })
+    }),
+    new _StatsWidget({type: 'luma'})
   ]
 });