Skip to content

Use filter worker in data-table #3808

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
balloob merged 6 commits into from
Sep 30, 2019
Merged

Use filter worker in data-table #3808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
50700de
Filter worker
bramkragten Sep 25, 2019
c2596e8
Remove template for worker
bramkragten Sep 25, 2019
e2abc1f
Move files
bramkragten Sep 25, 2019
479da5d
Sort to worker + debounce filter
bramkragten Sep 27, 2019
75db6da
Improve performance
bramkragten Sep 30, 2019
6f3fbe2
Update ha-data-table.ts
bramkragten Sep 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/common/util/render-status.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
export const afterNextRender = (cb: () => void): void => {
requestAnimationFrame(() => setTimeout(cb, 0));
};

export const nextRender = () => {
return new Promise((resolve) => {
afterNextRender(resolve);
});
};
187 changes: 84 additions & 103 deletions src/components/ha-data-table.ts → src/components/data-table/ha-data-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { repeat } from "lit-html/directives/repeat";
import deepClone from "deep-clone-simple";

import {
MDCDataTableAdapter,
MDCDataTableFoundation,
} from "../../mdc-data-table/index"; // Because mdc-data-table published ts files, temporary load them from own repo, outside src so our linters won't complain
} from "../../../mdc-data-table/index"; // Because mdc-data-table published ts files, temporary load them from own repo, outside src so our linters won't complain

import {
BaseElement,
Expand All @@ -19,14 +20,19 @@ import {
PropertyValues,
} from "@material/mwc-base/base-element";

import memoizeOne from "memoize-one";
// eslint-disable-next-line import/no-webpack-loader-syntax
// @ts-ignore
// tslint:disable-next-line: no-implicit-dependencies
import sortFilterWorker from "workerize-loader!./sort_filter_worker";

import "./ha-icon";
import "../common/search/search-input";
import "./ha-checkbox";
import "../ha-icon";
import "../../common/search/search-input";
import "../ha-checkbox";
// tslint:disable-next-line
import { HaCheckbox } from "./ha-checkbox";
import { fireEvent } from "../common/dom/fire_event";
import { HaCheckbox } from "../ha-checkbox";
import { fireEvent } from "../../common/dom/fire_event";
import { nextRender } from "../../common/util/render-status";
import { debounce } from "../../common/util/debounce";

declare global {
// for fire event
Expand Down Expand Up @@ -57,13 +63,16 @@ export interface DataTabelColumnContainer {
[key: string]: DataTabelColumnData;
}

export interface DataTabelColumnData {
title: string;
type?: "numeric";
export interface DataTabelSortColumnData {
sortable?: boolean;
filterable?: boolean;
filterKey?: string;
direction?: SortingDirection;
}

export interface DataTabelColumnData extends DataTabelSortColumnData {
title: string;
type?: "numeric";
template?: (data: any) => TemplateResult;
}

Expand All @@ -89,93 +98,25 @@ export class HaDataTable extends BaseElement {
@property({ type: String }) private _filter = "";
@property({ type: String }) private _sortColumn?: string;
@property({ type: String }) private _sortDirection: SortingDirection = null;

private _filterSortData = memoizeOne(
(
data: DataTabelRowData[],
columns: DataTabelColumnContainer,
filter: string,
direction: SortingDirection,
sortColumn?: string
) =>
sortColumn
? this._memSortData(
this._memFilterData(data, columns, filter),
columns,
direction,
sortColumn
)
: this._memFilterData(data, columns, filter)
);

private _memFilterData = memoizeOne(
(
data: DataTabelRowData[],
columns: DataTabelColumnContainer,
filter: string
) => {
if (!filter) {
return data;
}
const ucFilter = filter.toUpperCase();
return data.filter((row) => {
return Object.entries(columns).some((columnEntry) => {
const [key, column] = columnEntry;
if (column.filterable) {
if (
(column.filterKey ? row[key][column.filterKey] : row[key])
.toUpperCase()
.includes(ucFilter)
) {
return true;
}
}
return false;
});
});
}
@property({ type: Array }) private _filteredData: DataTabelRowData[] = [];
private _sortColumns: {
[key: string]: DataTabelSortColumnData;
} = {};
private curRequest = 0;
private _worker: any | undefined;

private _debounceSearch = debounce(
Copy link
Copy Markdown
Member Author

@bramkragten bramkragten Sep 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd love to do this without debounce and the 200ms delay, but couldn't get it to work, if you could guide me :-)

Copy link
Copy Markdown
Member

@balloob balloob Sep 30, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need this now we also have the other debounce ?

(ev) => {
this._filter = ev.detail.value;
},
200,
false
);

private _memSortData = memoizeOne(
(
data: DataTabelRowData[],
columns: DataTabelColumnContainer,
direction: SortingDirection,
sortColumn: string
) => {
const sorted = [...data];
const column = columns[sortColumn];
return sorted.sort((a, b) => {
let sort = 1;
if (direction === "desc") {
sort = -1;
}

let valA = column.filterKey
? a[sortColumn][column.filterKey]
: a[sortColumn];

let valB = column.filterKey
? b[sortColumn][column.filterKey]
: b[sortColumn];

if (typeof valA === "string") {
valA = valA.toUpperCase();
}
if (typeof valB === "string") {
valB = valB.toUpperCase();
}

if (valA < valB) {
return sort * -1;
}
if (valA > valB) {
return sort * 1;
}
return 0;
});
}
);
protected firstUpdated() {
super.firstUpdated();
this._worker = sortFilterWorker();
}

protected updated(properties: PropertyValues) {
super.updated(properties);
Expand All @@ -192,6 +133,25 @@ export class HaDataTable extends BaseElement {
break;
}
}

const clonedColumns: DataTabelColumnContainer = deepClone(this.columns);
Object.values(clonedColumns).forEach((column: DataTabelColumnData) => {
Copy link
Copy Markdown
Member

@balloob balloob Sep 30, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we memoize this, so we only create the sorted columns once ?

Copy link
Copy Markdown
Member Author

@bramkragten bramkragten Sep 30, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We only do it now if the columns are changed, so memoize would do the same?

Copy link
Copy Markdown
Member

@balloob balloob Sep 30, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok!

delete column.title;
delete column.type;
delete column.template;
});

this._sortColumns = clonedColumns;
}

if (
properties.has("data") ||
properties.has("columns") ||
properties.has("_filter") ||
properties.has("_sortColumn") ||
properties.has("_sortDirection")
) {
this._filterData();
}
}

Expand Down Expand Up @@ -261,13 +221,7 @@ export class HaDataTable extends BaseElement {
</thead>
<tbody class="mdc-data-table__content">
${repeat(
this._filterSortData(
this.data,
this.columns,
this._filter,
this._sortDirection,
this._sortColumn
),
this._filteredData!,
(row: DataTabelRowData) => row[this.id],
(row: DataTabelRowData) => html`
<tr
Expand Down Expand Up @@ -356,6 +310,33 @@ export class HaDataTable extends BaseElement {
};
}

private async _filterData() {
const startTime = new Date().getTime();
this.curRequest++;
const curRequest = this.curRequest;

const filterProm = this._worker.filterSortData(
this.data,
this._sortColumns,
this._filter,
this._sortDirection,
this._sortColumn
);

const [data] = await Promise.all([filterProm, nextRender]);

const curTime = new Date().getTime();
const elapsed = curTime - startTime;

if (elapsed < 100) {
await new Promise((resolve) => setTimeout(resolve, 100 - elapsed));
}
if (this.curRequest !== curRequest) {
return;
}
this._filteredData = data;
}

private _getRowIdAtIndex(rowIndex: number): string {
return this.rowElements[rowIndex].getAttribute("data-row-id")!;
}
Expand Down Expand Up @@ -420,7 +401,7 @@ export class HaDataTable extends BaseElement {
}

private _handleSearchChange(ev: CustomEvent): void {
this._filter = ev.detail.value;
this._debounceSearch(ev);
Copy link
Copy Markdown
Member

@balloob balloob Sep 27, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can do something like this:

const startTime = new Date().getTime();
const curRequest = this.curRequest;
this.curRequest++;

const data = await this.worker.filterAndSortData(this.rawData);
if (this.curRequest != curRequest) return;

// optionally, make sure we wait up to 100ms before starting to render
const curTime = new Date().getTime();
const elapsed = curTime - startTime;
if (elapsed < 100) {
  await new Promise(resolve => setTimeout(resolve, 100 - elapsed))
  if (this.curRequest != curRequest) return;
} 

this.data = data;

}

static get styles(): CSSResult {
Expand Down
107 changes: 107 additions & 0 deletions src/components/data-table/sort_filter_worker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import {
DataTabelColumnContainer,
DataTabelColumnData,
DataTabelRowData,
SortingDirection,
} from "./ha-data-table";

import memoizeOne from "memoize-one";

export const filterSortData = memoizeOne(
async (
data: DataTabelRowData[],
columns: DataTabelColumnContainer,
filter: string,
direction: SortingDirection,
sortColumn?: string
) =>
sortColumn
? _memSortData(
await _memFilterData(data, columns, filter),
columns,
direction,
sortColumn
)
: _memFilterData(data, columns, filter)
);

const _memFilterData = memoizeOne(
async (
data: DataTabelRowData[],
columns: DataTabelColumnContainer,
filter: string
) => {
if (!filter) {
return data;
}
return filterData(data, columns, filter.toUpperCase());
}
);

const _memSortData = memoizeOne(
(
data: DataTabelRowData[],
columns: DataTabelColumnContainer,
direction: SortingDirection,
sortColumn: string
) => {
return sortData(data, columns[sortColumn], direction, sortColumn);
}
);

export const filterData = (
data: DataTabelRowData[],
columns: DataTabelColumnContainer,
filter: string
) =>
data.filter((row) => {
return Object.entries(columns).some((columnEntry) => {
const [key, column] = columnEntry;
if (column.filterable) {
if (
(column.filterKey ? row[key][column.filterKey] : row[key])
.toUpperCase()
.includes(filter)
) {
return true;
}
}
return false;
});
});

export const sortData = (
data: DataTabelRowData[],
column: DataTabelColumnData,
direction: SortingDirection,
sortColumn: string
) =>
data.sort((a, b) => {
let sort = 1;
if (direction === "desc") {
sort = -1;
}

let valA = column.filterKey
? a[sortColumn][column.filterKey]
: a[sortColumn];

let valB = column.filterKey
? b[sortColumn][column.filterKey]
: b[sortColumn];

if (typeof valA === "string") {
valA = valA.toUpperCase();
}
if (typeof valB === "string") {
valB = valB.toUpperCase();
}

if (valA < valB) {
return sort * -1;
}
if (valA > valB) {
return sort * 1;
}
return 0;
});
4 changes: 2 additions & 2 deletions src/panels/config/devices/ha-config-devices-dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";

import "../../../components/ha-card";
import "../../../components/ha-data-table";
import "../../../components/data-table/ha-data-table";
import "../../../components/entity/ha-state-icon";
import "../../../layouts/hass-subpage";
import "../../../resources/ha-style";
Expand All @@ -28,7 +28,7 @@ import {
DataTabelColumnContainer,
RowClickedEvent,
DataTabelRowData,
} from "../../../components/ha-data-table";
} from "../../../components/data-table/ha-data-table";
// tslint:disable-next-line
import { DeviceRegistryEntry } from "../../../data/device_registry";
import { EntityRegistryEntry } from "../../../data/entity_registry";
Expand Down
Loading