Ability to debounce inputs going to the backend (#913)

added debouncer to slow updates to the backend

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/widgets/WidgetRow.vue

@@ -4,63 +4,53 @@
 <template>
 	<div :class="`widget-${direction}`">
 		<template v-for="([component, nextIsSuffix], index) in widgetsAndNextSiblingIsSuffix" :key="index">
-			<CheckboxInput v-if="component.props.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
+			<CheckboxInput v-if="component.props.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(index, value)" />
 			<ColorInput
 				v-if="component.props.kind === 'ColorInput'"
 				v-bind="component.props"
 				v-model:open="open"
-				@update:value="(value: unknown) => updateLayout(component.widgetId, value)"
+				@update:value="(value: unknown) => updateLayout(index, value)"
 				:sharpRightCorners="nextIsSuffix"
 			/>
 			<DropdownInput
 				v-if="component.props.kind === 'DropdownInput'"
 				v-bind="component.props"
 				v-model:open="open"
-				@update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)"
+				@update:selectedIndex="(value: number) => updateLayout(index, value)"
 				:sharpRightCorners="nextIsSuffix"
 			/>
 			<FontInput
 				v-if="component.props.kind === 'FontInput'"
 				v-bind="component.props"
 				v-model:open="open"
-				@changeFont="(value: unknown) => updateLayout(component.widgetId, value)"
+				@changeFont="(value: unknown) => updateLayout(index, value)"
 				:sharpRightCorners="nextIsSuffix"
 			/>
-			<ParameterExposeButton v-if="component.props.kind === 'ParameterExposeButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
+			<ParameterExposeButton v-if="component.props.kind === 'ParameterExposeButton'" v-bind="component.props" :action="() => updateLayout(index, undefined)" />
-			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
+			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(index, undefined)" :sharpRightCorners="nextIsSuffix" />
 			<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
-			<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(component.widgetId, value)" />
+			<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(index, value)" />
 			<NumberInput
 				v-if="component.props.kind === 'NumberInput'"
 				v-bind="component.props"
-				@update:value="(value: number) => updateLayout(component.widgetId, value)"
+				@update:value="debouncer((value: number) => updateLayout(index, value)).updateValue"
-				:incrementCallbackIncrease="() => updateLayout(component.widgetId, 'Increment')"
+				:incrementCallbackIncrease="() => updateLayout(index, 'Increment')"
-				:incrementCallbackDecrease="() => updateLayout(component.widgetId, 'Decrement')"
+				:incrementCallbackDecrease="() => updateLayout(index, 'Decrement')"
 				:sharpRightCorners="nextIsSuffix"
 			/>
-			<OptionalInput v-if="component.props.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
+			<OptionalInput v-if="component.props.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(index, value)" />
-			<PivotAssist v-if="component.props.kind === 'PivotAssist'" v-bind="component.props" @update:position="(value: string) => updateLayout(component.widgetId, value)" />
+			<PivotAssist v-if="component.props.kind === 'PivotAssist'" v-bind="component.props" @update:position="(value: string) => updateLayout(index, value)" />
 			<PopoverButton v-if="component.props.kind === 'PopoverButton'" v-bind="component.props">
 				<TextLabel :bold="true">{{ (component.props as any).header }}</TextLabel>
 				<TextLabel :multiline="true">{{ (component.props as any).text }}</TextLabel>
 			</PopoverButton>
-			<RadioInput
+			<RadioInput v-if="component.props.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(index, value)" :sharpRightCorners="nextIsSuffix" />
-				v-if="component.props.kind === 'RadioInput'"
-				v-bind="component.props"
-				@update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)"
-				:sharpRightCorners="nextIsSuffix"
-			/>
 			<Separator v-if="component.props.kind === 'Separator'" v-bind="component.props" />
 			<SwatchPairInput v-if="component.props.kind === 'SwatchPairInput'" v-bind="component.props" />
-			<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
+			<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(index, value)" />
-			<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
+			<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(index, undefined)" :sharpRightCorners="nextIsSuffix" />
-			<BreadcrumbTrailButtons v-if="component.props.kind === 'BreadcrumbTrailButtons'" v-bind="component.props" :action="(index: number) => updateLayout(component.widgetId, index)" />
+			<BreadcrumbTrailButtons v-if="component.props.kind === 'BreadcrumbTrailButtons'" v-bind="component.props" :action="(index: number) => updateLayout(index, index)" />
-			<TextInput
+			<TextInput v-if="component.props.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(index, value)" :sharpRightCorners="nextIsSuffix" />
-				v-if="component.props.kind === 'TextInput'"
-				v-bind="component.props"
-				@commitText="(value: string) => updateLayout(component.widgetId, value)"
-				:sharpRightCorners="nextIsSuffix"
-			/>
 			<TextLabel v-if="component.props.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ (component.props as any).value }}</TextLabel>
 		</template>
 	</div>
@@ -126,6 +116,7 @@
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
+import { debouncer } from "@/components/widgets/debounce";
 import type { Widget } from "@/wasm-communication/messages";
 import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
 
@@ -169,30 +160,33 @@ export default defineComponent({
 			if (isWidgetRow(this.widgetData)) return "row";
 			return "ERROR";
 		},
-		widgetsAndNextSiblingIsSuffix(): [Widget, boolean][] {
+		widgets() {
 			let widgets: Widget[] = [];
 			if (isWidgetColumn(this.widgetData)) widgets = this.widgetData.columnWidgets;
 			if (isWidgetRow(this.widgetData)) widgets = this.widgetData.rowWidgets;
-
+			return widgets;
-			return widgets.map((widget, index): [Widget, boolean] => {
+		},
+		widgetsAndNextSiblingIsSuffix(): [Widget, boolean][] {
+			return this.widgets.map((widget, index): [Widget, boolean] => {
 				// A suffix widget is one that joins up with this widget at the end with only a 1px gap.
 				// It uses the CSS sibling selector to give its own left edge corners zero radius.
 				// But this JS is needed to set its preceding sibling widget's right edge corners to zero radius.
-				const nextSiblingIsSuffix = SUFFIX_WIDGETS.includes(widgets[index + 1]?.props.kind);
+				const nextSiblingIsSuffix = SUFFIX_WIDGETS.includes(this.widgets[index + 1]?.props.kind);
 
 				return [widget, nextSiblingIsSuffix];
 			});
 		},
 	},
 	methods: {
-		updateLayout(widgetId: bigint, value: unknown) {
+		updateLayout(index: number, value: unknown) {
-			this.editor.instance.updateLayout(this.layoutTarget, widgetId, value);
+			this.editor.instance.updateLayout(this.layoutTarget, this.widgets[index].widgetId, value);
 		},
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		withoutValue(props: Record<string, any>): Record<string, unknown> {
 			const { value: _, ...rest } = props;
 			return rest;
 		},
+		debouncer,
 	},
 	components: {
 		BreadcrumbTrailButtons,

frontend/src/components/widgets/debounce.ts

@@ -0,0 +1,31 @@
+export type Debouncer = ReturnType<typeof debouncer>;
+
+export type DebouncerOptions = {
+	debounceTime: number;
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function debouncer<T>(callFn: (value: T) => unknown, { debounceTime = 60 }: Partial<DebouncerOptions> = {}) {
+	let currentValue: T | undefined;
+
+	const emitValue = (): void => {
+		if (currentValue === undefined) {
+			throw new Error("Tried to emit undefined value from debouncer. This should never be possible");
+		}
+		const emittingValue = currentValue;
+		currentValue = undefined;
+		callFn(emittingValue);
+	};
+
+	const updateValue = (newValue: T): void => {
+		if (currentValue !== undefined) {
+			currentValue = newValue;
+			return;
+		}
+
+		currentValue = newValue;
+		setTimeout(emitValue, debounceTime);
+	};
+
+	return { updateValue };
+}