usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix performance

This commit is contained in:
samunohito 2024-02-04 09:24:10 +09:00
parent b37a27e154
commit 4cb7e984aa
7 changed files with 73 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/backend/src/postgres.ts
View File

@ -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

7
packages/frontend/src/components/grid/MkDataCell.vue
View File

@ -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': {

2
packages/frontend/src/components/grid/MkDataRow.vue
View File

@ -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';

89
packages/frontend/src/components/grid/MkGrid.vue
View File

@ -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;
if (sender.column.setting.width === 'auto') {
calcLargestCellWidth(sender.column);
const _cells = cells.value;
if (_cells.length > sender.address.row && _cells[sender.address.row].cells.length > sender.address.col) {
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;
if (sender.setting.width === 'auto') {
calcLargestCellWidth(sender);
const currentSize = columns.value[sender.index].contentSize;
if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
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 (gridRows.length > newItems.length) {
// 行数が減った場合
if (_DEV_) {
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
.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 oldOrigins = _cells.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]);
newCells.push(gridRows[idx]);
newRows.push(_rows[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 < gridRows.length; rowIdx++) {
const oldCells = gridRows[rowIdx].cells;
for (let rowIdx = 0; rowIdx < _cells.length; rowIdx++) {
const oldCells = _cells[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

2
packages/frontend/src/components/grid/grid-event.ts
View File

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

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

@ -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>&gt;</button>
<button @click="onLatestButtonClicked">&lt;</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));
}

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

@ -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) {