fix performance

packages/backend/src/postgres.ts

@@ -97,7 +97,7 @@ class MyCustomLogger implements Logger {
 
 	@bindThis
 	public logQuery(query: string, parameters?: any[]) {
-		sqlLogger.info(this.highlight(query).substring(0, 100));
+		sqlLogger.info(this.highlight(query));
 	}
 
 	@bindThis

packages/frontend/src/components/grid/MkDataCell.vue

@@ -53,7 +53,6 @@
 import {
 	computed,
 	defineAsyncComponent,
-	getCurrentInstance,
 	nextTick,
 	onMounted,
 	onUnmounted,
@@ -101,7 +100,7 @@ const needsContentCentering = computed(() => {
 	}
 });
 
-watch(() => [cell, cell.value.value], () => {
+watch(() => [cell.value.value], () => {
 	// 中身がセットされた直後はサイズが分からないので、次のタイミングで更新する
 	nextTick(emitContentSizeChanged);
 }, { immediate: true });
@@ -112,10 +111,6 @@ watch(() => cell.value.selected, () => {
 	}
 });
 
-watch(() => cell.value.value, (newValue) => {
-	emitValueChange(newValue);
-});
-
 function onCellDoubleClick(ev: MouseEvent) {
 	switch (ev.type) {
 		case 'dblclick': {

packages/frontend/src/components/grid/MkDataRow.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, toRefs, watch } from 'vue';
+import { toRefs } from 'vue';
 import { GridEventEmitter, GridSetting, Size } from '@/components/grid/grid.js';
 import MkDataCell from '@/components/grid/MkDataCell.vue';
 import MkNumberCell from '@/components/grid/MkNumberCell.vue';

packages/frontend/src/components/grid/MkGrid.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue';
 import { DataSource, GridEventEmitter, GridSetting, GridState, Size } from '@/components/grid/grid.js';
 import MkDataRow from '@/components/grid/MkDataRow.vue';
 import MkHeaderRow from '@/components/grid/MkHeaderRow.vue';
@@ -649,9 +649,15 @@ function onChangeCellValue(sender: GridCell, newValue: CellValue) {
 }
 
 function onChangeCellContentSize(sender: GridCell, contentSize: Size) {
-	cells.value[sender.address.row].cells[sender.address.col].contentSize = contentSize;
+	const _cells = cells.value;
-	if (sender.column.setting.width === 'auto') {
+	if (_cells.length > sender.address.row && _cells[sender.address.row].cells.length > sender.address.col) {
-		calcLargestCellWidth(sender.column);
+		const currentSize = _cells[sender.address.row].cells[sender.address.col].contentSize;
+		if (currentSize.width !== contentSize.width || currentSize.height !== contentSize.height) {
+			_cells[sender.address.row].cells[sender.address.col].contentSize = contentSize;
+			if (sender.column.setting.width === 'auto') {
+				calcLargestCellWidth(sender.column);
+			}
+		}
 	}
 }
 
@@ -686,9 +692,12 @@ function onHeaderCellChangeWidth(sender: GridColumn, width: string) {
 function onHeaderCellChangeContentSize(sender: GridColumn, newSize: Size) {
 	switch (state.value) {
 		case 'normal': {
-			columns.value[sender.index].contentSize = newSize;
+			const currentSize = columns.value[sender.index].contentSize;
-			if (sender.setting.width === 'auto') {
+			if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
-				calcLargestCellWidth(sender);
+				columns.value[sender.index].contentSize = newSize;
+				if (sender.setting.width === 'auto') {
+					calcLargestCellWidth(sender);
+				}
 			}
 			break;
 		}
@@ -924,7 +933,7 @@ function refreshColumnsSetting() {
 
 function refreshData() {
 	if (_DEV_) {
-		console.log('[grid][refresh-data]');
+		console.log('[grid][refresh-data][begin]');
 	}
 
 	const _data: DataSource[] = data.value;
@@ -954,6 +963,10 @@ function refreshData() {
 	rows.value = _rows;
 	columns.value = _cols;
 	cells.value = _cells;
+
+	if (_DEV_) {
+		console.log('[grid][refresh-data][end]');
+	}
 }
 
 /**
@@ -967,51 +980,34 @@ function refreshData() {
  * そこで、新しい値とセルが持つ値を突き合わせ、変更があった場合のみ値を更新し、セルそのものは使いまわしつつ値を最新化する。
  */
 function patchData(newItems: DataSource[]) {
-	const gridRows = [...cells.value];
+	if (_DEV_) {
-	if (gridRows.length > newItems.length) {
+		console.log(`[grid][patch-data][begin] new:${newItems.length} old:${cells.value.length}`);
-		// 行数が減った場合
+	}
 
+	const _cells = [...cells.value];
+	const _rows = [...rows.value];
+	const _cols = columns.value;
+
+	if (_cells.length != newItems.length) {
 		// 状態が壊れるかもしれないので選択を全解除
 		unSelectionRangeAll();
 
-		const diff = gridRows
+		const oldOrigins = _cells.map(it => it.origin);
-			.map((it, idx) => ({ origin: it.origin, idx }))
-			.filter(it => !newItems.includes(it.origin))
-			.map(it => it.idx);
-		const newRows = rows.value.filter((_, idx) => !diff.includes(idx));
-		const newCells = gridRows.filter((_, idx) => !diff.includes(idx));
-
-		// 行数が減ったので再度採番
-		for (let rowIdx = 0; rowIdx < newRows.length; rowIdx++) {
-			newRows[rowIdx].index = rowIdx;
-			for (const cell of newCells[rowIdx].cells) {
-				cell.address.row = rowIdx;
-			}
-		}
-
-		rows.value = newRows;
-		cells.value = newCells;
-	} else if (gridRows.length < newItems.length) {
-		// 行数が増えた場合
-
-		// 状態が壊れるかもしれないので選択を全解除
-		unSelectionRangeAll();
-
-		const oldOrigins = gridRows.map(it => it.origin);
 		const newRows = Array.of<GridRow>();
 		const newCells = Array.of<RowHolder>();
+
 		for (const it of newItems) {
 			const idx = oldOrigins.indexOf(it);
 			if (idx >= 0) {
 				// 既存の行
-				newRows.push(rows.value[idx]);
+				newRows.push(_rows[idx]);
-				newCells.push(gridRows[idx]);
+				newCells.push(_cells[idx]);
 			} else {
 				// 新規の行
 				const newRow = createRow(newRows.length);
 				newRows.push(newRow);
 				newCells.push({
-					cells: columns.value.map(col => {
+					cells: _cols.map(col => {
 						const cell = createCell(col, newRow, it[col.setting.bindTo]);
 						cell.violation = cellValidation(cell, cell.value);
 						return cell;
@@ -1021,7 +1017,7 @@ function patchData(newItems: DataSource[]) {
 			}
 		}
 
-		// 行数が増えたので再度採番
+		// 行数が変わっているので再度番地を振り直す
 		for (let rowIdx = 0; rowIdx < newCells.length; rowIdx++) {
 			newRows[rowIdx].index = rowIdx;
 			for (const cell of newCells[rowIdx].cells) {
@@ -1033,9 +1029,8 @@ function patchData(newItems: DataSource[]) {
 		cells.value = newCells;
 	} else {
 		// 行数が変わらない場合
-		const _cols = columns.value;
+		for (let rowIdx = 0; rowIdx < _cells.length; rowIdx++) {
-		for (let rowIdx = 0; rowIdx < gridRows.length; rowIdx++) {
+			const oldCells = _cells[rowIdx].cells;
-			const oldCells = gridRows[rowIdx].cells;
 			const newItem = newItems[rowIdx];
 			for (let colIdx = 0; colIdx < oldCells.length; colIdx++) {
 				const _col = _cols[colIdx];
@@ -1049,6 +1044,16 @@ function patchData(newItems: DataSource[]) {
 			}
 		}
 	}
+
+	// セル値が書き換わっており、バリデーションの結果も変わっているので外部に通知する必要がある
+	emitGridEvent({
+		type: 'cell-validation',
+		all: cells.value.flatMap(it => it.cells).map(it => it.violation).filter(it => !it.valid),
+	});
+
+	if (_DEV_) {
+		console.log('[grid][patch-data][end]');
+	}
 }
 
 // endregion

packages/frontend/src/components/grid/grid-event.ts

@@ -43,7 +43,7 @@ export type GridCellValueChangeEvent = {
 
 export type GridCellValidationEvent = {
 	type: 'cell-validation';
-	violation: ValidateViolation;
+	violation?: ValidateViolation;
 	all: ValidateViolation[];
 };
 

packages/frontend/src/pages/admin/custom-emojis-grid.list.vue

@@ -12,13 +12,13 @@
 	<div
 		style="overflow-y: scroll; padding-top: 8px; padding-bottom: 8px;"
 	>
-		<MkGrid :data="convertedGridItems" :columnSettings="columnSettings"/>
+		<MkGrid :data="gridItems" :columnSettings="columnSettings"/>
 	</div>
 
 	<div class="_gaps">
 		<div :class="$style.pages">
-			<button>&lt;</button>
+			<button @click="onLatestButtonClicked">&lt;</button>
-			<button>&gt;</button>
+			<button @click="onOldestButtonClicked">&gt;</button>
 		</div>
 
 		<div :class="$style.buttons">
@@ -66,7 +66,8 @@ const { customEmojis } = toRefs(props);
 const query = ref('');
 const gridItems = ref<GridItem[]>([]);
 
-const convertedGridItems = computed(() => gridItems.value.map(it => it as Record<string, any>));
+const latest = computed(() => customEmojis.value.length > 0 ? customEmojis.value[0]?.id : undefined);
+const oldest = computed(() => customEmojis.value.length > 0 ? customEmojis.value[customEmojis.value.length - 1]?.id : undefined);
 
 watch(customEmojis, refreshGridItems);
 
@@ -74,6 +75,14 @@ function onSearchButtonClicked() {
 	emit('operation:search', query.value, undefined, undefined);
 }
 
+async function onLatestButtonClicked() {
+	emit('operation:search', query.value, latest.value, undefined);
+}
+
+async function onOldestButtonClicked() {
+	emit('operation:search', query.value, undefined, oldest.value);
+}
+
 function refreshGridItems() {
 	gridItems.value = customEmojis.value.map(it => fromEmojiDetailed(it));
 }

packages/frontend/src/pages/admin/custom-emojis-grid.vue

@@ -32,6 +32,7 @@ import * as Misskey from 'misskey-js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import * as os from '@/os.js';
 import MkTab from '@/components/MkTab.vue';
 import XListComponent from '@/pages/admin/custom-emojis-grid.list.vue';
 import XRegisterComponent from '@/pages/admin/custom-emojis-grid.register.vue';
@@ -44,12 +45,19 @@ const modeTab = ref<PageMode>('list');
 const query = ref<string>();
 
 async function refreshCustomEmojis(query?: string, sinceId?: string, untilId?: string) {
-	customEmojis.value = await misskeyApi('admin/emoji/list', {
+	const emojis = await misskeyApi('admin/emoji/list', {
 		limit: 100,
 		query,
 		sinceId,
 		untilId,
 	});
+
+	if (sinceId) {
+		// 通常はID降順だが、sinceIdを設定すると昇順での並び替えとなるので、逆順にする必要がある
+		emojis.reverse();
+	}
+
+	customEmojis.value = emojis;
 }
 
 async function onOperationSearch(q: string, sinceId?: string, untilId?: string) {