From 7e2ea652c32fbc159cdae55317af525114ef1c4e Mon Sep 17 00:00:00 2001 From: Rachel Powers <508861+Ryex@users.noreply.github.com> Date: Wed, 17 Apr 2024 00:19:01 -0700 Subject: [PATCH] more performant search --- www/src/ts/virtual_machine/device.ts | 319 ++++++++++----------------- 1 file changed, 116 insertions(+), 203 deletions(-) diff --git a/www/src/ts/virtual_machine/device.ts b/www/src/ts/virtual_machine/device.ts index d4d9aa1..57fae23 100644 --- a/www/src/ts/virtual_machine/device.ts +++ b/www/src/ts/virtual_machine/device.ts @@ -34,7 +34,11 @@ import "@shoelace-style/shoelace/dist/components/drawer/drawer.js"; import "@shoelace-style/shoelace/dist/components/icon/icon.js"; import SlInput from "@shoelace-style/shoelace/dist/components/input/input.js"; -import { parseIntWithHexOrBinary, parseNumber, structuralEqual } from "../utils"; +import { + parseIntWithHexOrBinary, + parseNumber, + structuralEqual, +} from "../utils"; import SlSelect from "@shoelace-style/shoelace/dist/components/select/select.js"; import SlDrawer from "@shoelace-style/shoelace/dist/components/drawer/drawer.js"; import { DeviceDB, DeviceDBEntry } from "./device_db"; @@ -78,7 +82,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { align-items: center; flex-wrap: wrap; } - .device-card{ + .device-card { --padding: var(--sl-spacing-small); } .device-name::part(input) { @@ -134,56 +138,30 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { } activeIc?.pins?.forEach((id, index) => { if (this.deviceID == id) { - badges.push(html`d${index}`); + badges.push( + html`d${index}`, + ); } }, this); return html` - +
- + Id - + Name - + - + Hash - + ${badges.map((badge) => badge)}
@@ -195,20 +173,12 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { const inputIdBase = `vmDeviceCard${this.deviceID}Field`; return html` ${fields.map(([name, field], _index, _fields) => { - return html` - ${name} - - ${field.field_type} - `; + return html` + ${name} + + ${field.field_type} + `; })} `; } @@ -219,28 +189,17 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { const inputIdBase = `vmDeviceCard${this.deviceID}Slot${slotIndex}Field`; return html` - ${slotIndex} : ${slot.typ} + ${slotIndex} : ${slot.typ}
${fields.map( - ([name, field], _index, _fields) => html` - - ${name} - - ${field.field_type} - - `, + ([name, field], _index, _fields) => html` + + ${name} + + ${field.field_type} + + `, )}
@@ -264,26 +223,19 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { return html`
${this.connections.map((connection, index, _conns) => { - const conn = - typeof connection === "object" ? connection.CableNetwork : null; - return html` - - Connection:${index} - ${vmNetworks.map( - (net) => - html`Network ${net}`, - )} - ${conn?.typ} - - `; + const conn = + typeof connection === "object" ? connection.CableNetwork : null; + return html` + + Connection:${index} + ${vmNetworks.map( + (net) => + html`Network ${net}`, + )} + ${conn?.typ} + + `; })}
`; @@ -294,23 +246,16 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { return html`
${pins?.map( - (pin, index) => - html` - d${index} - ${visibleDevices.map( - (device, _index) => - html` - Device ${device.id} : ${device.name ?? device.prefabName} - `, - )} - `, + (pin, index) => + html` + d${index} + ${visibleDevices.map( + (device, _index) => + html` + Device ${device.id} : ${device.name ?? device.prefabName} + `, + )} + `, )}
`; @@ -440,10 +385,7 @@ export class VMDeviceList extends BaseElement { protected render(): HTMLTemplateResult { const deviceCards: HTMLTemplateResult[] = this.devices.map( (id, _index, _ids) => - html``, + html``, ); const result = html`
@@ -489,8 +431,9 @@ export class VMAddDeviceButton extends BaseElement { @query(".device-search-input") accessor searchInput: SlInput; private _deviceDB: DeviceDB; - private _strutures: Map; - + private _strutures: Map = new Map(); + private _datapoints: [string, string][] = []; + private _haystack: string[] = []; get deviceDB() { return this._deviceDB; } @@ -507,6 +450,18 @@ export class VMAddDeviceButton extends BaseElement { ) .map((entry) => [entry.name, entry]), ); + + const datapoints: [string, string][] = []; + for (const entry of this._strutures.values()) { + datapoints.push( + [entry.name, entry.name], + [entry.title, entry.name], + [entry.desc, entry.name], + ); + } + const haystack: string[] = datapoints.map((data) => data[0]); + this._datapoints = datapoints; + this._haystack = haystack; this.performSearch(); } @@ -528,19 +483,17 @@ export class VMAddDeviceButton extends BaseElement { performSearch() { if (this.filter) { - const datapoints: [string, string][] = []; - for (const entry of this._strutures.values()) { - datapoints.push( - [entry.name, entry.name], - [entry.title, entry.name], - [entry.desc, entry.name], - ); - } - const haystack: string[] = datapoints.map((data) => data[0]); const uf = new uFuzzy({}); - const [_idxs, info, order] = uf.search(haystack, this._filter, 0, 1e3); + const [_idxs, info, order] = uf.search( + this._haystack, + this._filter, + 0, + 1e3, + ); - const filtered = order?.map((infoIdx) => datapoints[info.idx[infoIdx]]); + const filtered = order?.map( + (infoIdx) => this._datapoints[info.idx[infoIdx]], + ); const names = filtered ?.map((data) => data[1]) @@ -548,8 +501,7 @@ export class VMAddDeviceButton extends BaseElement { this._searchResults = names.map((name) => this._strutures.get(name)!); } else { - // this._searchResults = - // [] ?? this._strutures ? [...this._strutures.values()] : []; + // clear our results and prefilter if the filter is empty this._searchResults = []; } } @@ -569,12 +521,10 @@ export class VMAddDeviceButton extends BaseElement { renderSearchResults(): HTMLTemplateResult { const renderedResults: HTMLTemplateResult[] = this._searchResults?.map( - (result) => - html``, + (result) => html` + + + `, ); return html`${renderedResults}`; } @@ -585,33 +535,20 @@ export class VMAddDeviceButton extends BaseElement { render() { return html` - + Add Device - + Search Structures "
${this.renderSearchResults()}
- { - this.drawer.hide(); + { + this.drawer.hide(); }} - > + > Close @@ -771,17 +708,12 @@ export class VmDeviceTemplate extends BaseElement { const fields = Object.entries(this.fields); return html` ${fields.map(([name, field], _index, _fields) => { - return html` - - ${name} - ${field.field_type} - - `; + return html` + + ${name} + ${field.field_type} + + `; })} `; } @@ -815,26 +747,19 @@ export class VmDeviceTemplate extends BaseElement { return html`
${connections.map((connection, index, _conns) => { - const conn = - typeof connection === "object" ? connection.CableNetwork : null; - return html` - - Connection:${index} - ${vmNetworks.map( - (net) => - html`Network ${net}`, - )} - ${conn?.typ} - - `; + const conn = + typeof connection === "object" ? connection.CableNetwork : null; + return html` + + Connection:${index} + ${vmNetworks.map( + (net) => + html`Network ${net}`, + )} + ${conn?.typ} + + `; })}
`; @@ -859,22 +784,14 @@ export class VmDeviceTemplate extends BaseElement {
- +
${device?.name} ${device?.hash}
- Add + Add
@@ -887,12 +804,8 @@ export class VmDeviceTemplate extends BaseElement { ${this.renderFields()} ${this.renderSlots()} - ${this.renderReagents()} - ${this.renderNetworks()} + ${this.renderReagents()} + ${this.renderNetworks()} ${this.renderPins()}