support drag-and-drop to change query display orders

This commit is contained in:
MaysWind
2026-01-07 23:08:30 +08:00
parent d462d0164c
commit ab88b0bf44
4 changed files with 364 additions and 362 deletions
+35 -27
View File
@@ -28,7 +28,7 @@ export class InsightsExplorerBasicInfo implements InsightsExplorerInfoResponse {
public name: string;
public displayOrder: number;
public hidden: boolean;
public data: Record<string, string | number | string[]> = {};
public data: Record<string, string | number | object[]> = {};
private constructor(id: string, name: string, displayOrder: number, hidden: boolean) {
this.id = id;
@@ -98,9 +98,9 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
this.chartSortingType = chartSortingType;
}
public get data(): Record<string, string | number | string[]> {
public get data(): Record<string, string | number | object[]> {
return {
queries: this.queries.map(q => q.toJson()),
queries: this.queries.map(q => q.toJsonObject()),
timezoneUsedForDateRange: this.timezoneUsedForDateRange,
chartType: this.chartType,
categoryDimension: this.categoryDimension,
@@ -139,10 +139,10 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
if (data) {
if (Array.isArray(data['queries'])) {
const textualQueries = data['queries'] as string[];
const queryItems = data['queries'] as object[];
for (const textualQuery of textualQueries) {
const query = TransactionExplorerQuery.parse(textualQuery);
for (const queryItem of queryItems) {
const query = TransactionExplorerQuery.parse(queryItem);
if (query) {
queries.push(query);
@@ -190,13 +190,13 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
);
}
public static createNewExplorer(name?: string): InsightsExplorer {
public static createNewExplorer(newQueryId: string): InsightsExplorer {
return new InsightsExplorer(
'',
name || '',
'',
0,
false,
[TransactionExplorerQuery.create()],
[TransactionExplorerQuery.create(newQueryId)],
InsightsExplorer.Default.timezoneUsedForDateRange,
InsightsExplorer.Default.chartType,
InsightsExplorer.Default.categoryDimension,
@@ -209,14 +209,14 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
export interface InsightsExplorerCreateRequest {
readonly name: string;
readonly data: Record<string, string | number | string[]>;
readonly data: Record<string, string | number | object[]>;
readonly clientSessionId?: string;
}
export interface InsightsExplorerModifyRequest {
readonly id: string;
readonly name: string;
readonly data: Record<string, string | number | string[]>;
readonly data: Record<string, string | number | object[]>;
readonly hidden: boolean;
readonly clientSessionId?: string;
}
@@ -244,7 +244,7 @@ export interface InsightsExplorerInfoResponse {
readonly name: string;
readonly displayOrder: number;
readonly hidden: boolean;
readonly data: Record<string, string | number | string[]>;
readonly data: Record<string, string | number | object[]>;
}
interface ExpressionNode {
@@ -253,10 +253,12 @@ interface ExpressionNode {
}
export class TransactionExplorerQuery {
public id: string;
public name: string;
public conditions: TransactionExplorerConditionWithRelation[];
private constructor(name: string, conditions: TransactionExplorerConditionWithRelation[]) {
private constructor(id: string, name: string, conditions: TransactionExplorerConditionWithRelation[]) {
this.id = id;
this.name = name;
this.conditions = conditions;
}
@@ -450,7 +452,7 @@ export class TransactionExplorerQuery {
return finalTokens;
}
public clone(): TransactionExplorerQuery {
public clone(newId: string): TransactionExplorerQuery {
const clonedConditions: TransactionExplorerConditionWithRelation[] = [];
for (const condition of this.conditions) {
@@ -463,29 +465,35 @@ export class TransactionExplorerQuery {
clonedConditions.push(clonedCondition);
}
return new TransactionExplorerQuery(this.name, clonedConditions);
return new TransactionExplorerQuery(newId, this.name, clonedConditions);
}
public toJson(): string {
return JSON.stringify({
public toJsonObject(): object {
return {
id: this.id,
name: this.name,
conditions: this.conditions.map(condition => condition.toJsonObject())
});
};
}
public static create(): TransactionExplorerQuery {
return new TransactionExplorerQuery("", []);
public static create(id: string): TransactionExplorerQuery {
return new TransactionExplorerQuery(id, "", []);
}
public static parse(json: string): TransactionExplorerQuery | null {
const parsed = JSON.parse(json);
const nameFieldValue = parsed['name'] as unknown;
const conditionsFieldValue = parsed['conditions'] as unknown;
if (typeof nameFieldValue !== 'string' || !Array.isArray(conditionsFieldValue)) {
public static parse(obj: object): TransactionExplorerQuery | null {
if (!('id' in obj) || !('name' in obj) || !('conditions' in obj)) {
return null;
}
const idFieldValue = obj['id'] as unknown;
const nameFieldValue = obj['name'] as unknown;
const conditionsFieldValue = obj['conditions'] as unknown;
if (typeof idFieldValue !== 'string' || typeof nameFieldValue !== 'string' || !Array.isArray(conditionsFieldValue)) {
return null;
}
const id: string = idFieldValue;
const name: string = nameFieldValue;
const conditions: TransactionExplorerConditionWithRelation[] = [];
@@ -505,7 +513,7 @@ export class TransactionExplorerQuery {
conditions.push(condition);
}
return new TransactionExplorerQuery(name, conditions);
return new TransactionExplorerQuery(id, name, conditions);
}
}