560 lines
19 KiB
TypeScript
560 lines
19 KiB
TypeScript
// file: kb_app/frontend/ts/demo_pipeline2.ts
|
|
|
|
import * as bootstrap from "bootstrap";
|
|
import "simplebar";
|
|
import ResizeObserver from "resize-observer-polyfill";
|
|
import * as echarts from "echarts";
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
import { debug, takeoverConsole } from "@fltsci/tauri-plugin-tracing";
|
|
|
|
import type { KbDemoPipeline2CatalogPayload } from "./bindings/KbDemoPipeline2CatalogPayload.ts";
|
|
import type { KbDemoPipeline2BackfillTokenRequest } from "./bindings/KbDemoPipeline2BackfillTokenRequest.ts";
|
|
import type { KbDemoPipeline2BackfillPoolRequest } from "./bindings/KbDemoPipeline2BackfillPoolRequest.ts";
|
|
import type { KbDemoPipeline2BackfillPayload } from "./bindings/KbDemoPipeline2BackfillPayload.ts";
|
|
import type { KbDemoPipeline2PairCandlesRequest } from "./bindings/KbDemoPipeline2PairCandlesRequest.ts";
|
|
import type { KbDemoPipeline2PairCandlesPayload } from "./bindings/KbDemoPipeline2PairCandlesPayload.ts";
|
|
|
|
(window as Window & typeof globalThis & { bootstrap?: typeof bootstrap }).bootstrap = bootstrap;
|
|
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
|
|
|
|
interface PairCandle {
|
|
id: number | null;
|
|
pair_id: number;
|
|
timeframe_seconds: number;
|
|
bucket_start_unix: number;
|
|
bucket_end_unix: number;
|
|
open_price_quote_per_base: number;
|
|
high_price_quote_per_base: number;
|
|
low_price_quote_per_base: number;
|
|
close_price_quote_per_base: number;
|
|
trade_count: number;
|
|
buy_count: number;
|
|
sell_count: number;
|
|
base_volume_raw: string | null;
|
|
quote_volume_raw: string | null;
|
|
first_trade_signature: string | null;
|
|
last_trade_signature: string | null;
|
|
created_at: string;
|
|
updated_at: string;
|
|
}
|
|
|
|
function appendLogLine(textarea: HTMLTextAreaElement, line: string): void {
|
|
const now = new Date();
|
|
const timestamp = now.toLocaleTimeString("fr-CH", { hour12: false });
|
|
|
|
const lines = textarea.value === "" ? [] : textarea.value.split("\n");
|
|
lines.push(`[${timestamp}] ${line}`);
|
|
|
|
textarea.value = lines.slice(-300).join("\n");
|
|
textarea.scrollTop = textarea.scrollHeight;
|
|
}
|
|
|
|
function setEmptyChart(
|
|
chart: echarts.ECharts,
|
|
chartMeta: HTMLElement,
|
|
message: string,
|
|
): void {
|
|
chartMeta.textContent = message;
|
|
|
|
chart.setOption({
|
|
animation: false,
|
|
title: {
|
|
text: message,
|
|
left: "center",
|
|
top: "middle",
|
|
textStyle: {
|
|
fontSize: 14,
|
|
fontWeight: "normal",
|
|
},
|
|
},
|
|
tooltip: {},
|
|
xAxis: { show: false, type: "category", data: [] },
|
|
yAxis: { show: false, type: "value" },
|
|
series: [],
|
|
}, true);
|
|
}
|
|
|
|
function readPositiveIntegerInput(
|
|
input: HTMLInputElement,
|
|
logTextarea: HTMLTextAreaElement,
|
|
label: string,
|
|
): number | undefined {
|
|
const text = input.value.trim();
|
|
if (text === "") {
|
|
appendLogLine(logTextarea, `[ui] ${label} is required`);
|
|
return undefined;
|
|
}
|
|
|
|
const parsed = Number.parseInt(text, 10);
|
|
if (Number.isNaN(parsed) || parsed <= 0) {
|
|
appendLogLine(logTextarea, `[ui] invalid ${label} '${text}'`);
|
|
return undefined;
|
|
}
|
|
|
|
return parsed;
|
|
}
|
|
|
|
function refreshPairSelect(
|
|
catalog: KbDemoPipeline2CatalogPayload,
|
|
select: HTMLSelectElement,
|
|
): void {
|
|
const previousValue = select.value;
|
|
|
|
select.innerHTML = "";
|
|
const emptyOption = document.createElement("option");
|
|
emptyOption.value = "";
|
|
emptyOption.textContent = "Aucune";
|
|
select.appendChild(emptyOption);
|
|
|
|
for (const pair of catalog.pairs) {
|
|
const option = document.createElement("option");
|
|
option.value = pair.pairId.toString();
|
|
option.textContent = `#${pair.pairId.toString()} ${pair.symbol ?? ""} ${pair.poolAddress}`.trim();
|
|
if (option.value === previousValue) {
|
|
option.selected = true;
|
|
}
|
|
select.appendChild(option);
|
|
}
|
|
}
|
|
|
|
function renderCatalogTextareas(
|
|
catalog: KbDemoPipeline2CatalogPayload,
|
|
tokensTextarea: HTMLTextAreaElement,
|
|
poolsTextarea: HTMLTextAreaElement,
|
|
pairsTextarea: HTMLTextAreaElement,
|
|
): void {
|
|
tokensTextarea.value = JSON.stringify(catalog.tokens, null, 2);
|
|
poolsTextarea.value = JSON.stringify(catalog.pools, null, 2);
|
|
pairsTextarea.value = JSON.stringify(catalog.pairs, null, 2);
|
|
}
|
|
|
|
function parseCandlesJson(raw: string): PairCandle[] {
|
|
if (raw.trim() === "") {
|
|
return [];
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(raw) as PairCandle[];
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function parseVolume(text: string | null, fallback: number): number {
|
|
if (text === null || text.trim() === "") {
|
|
return Number(fallback);
|
|
}
|
|
|
|
const parsed = Number.parseFloat(text);
|
|
if (Number.isNaN(parsed)) {
|
|
return Number(fallback);
|
|
}
|
|
|
|
return parsed;
|
|
}
|
|
|
|
function renderCandlesChart(
|
|
chart: echarts.ECharts,
|
|
chartMeta: HTMLElement,
|
|
pairId: number,
|
|
timeframeSeconds: number,
|
|
candles: PairCandle[],
|
|
): void {
|
|
if (candles.length === 0) {
|
|
setEmptyChart(chart, chartMeta, "Aucune candle disponible.");
|
|
return;
|
|
}
|
|
|
|
const sorted = [...candles].sort(
|
|
(left, right) => left.bucket_start_unix - right.bucket_start_unix,
|
|
);
|
|
|
|
const categoryData = sorted.map((candle) =>
|
|
new Date(Number(candle.bucket_start_unix) * 1000).toLocaleString("fr-CH", {
|
|
hour12: false,
|
|
year: "2-digit",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
}),
|
|
);
|
|
|
|
const ohlcData = sorted.map((candle) => [
|
|
candle.open_price_quote_per_base,
|
|
candle.close_price_quote_per_base,
|
|
candle.low_price_quote_per_base,
|
|
candle.high_price_quote_per_base,
|
|
]);
|
|
|
|
const volumeData = sorted.map((candle) =>
|
|
parseVolume(candle.quote_volume_raw, candle.trade_count),
|
|
);
|
|
|
|
chartMeta.textContent =
|
|
`Pair #${pairId.toString()} • timeframe ${timeframeSeconds.toString()}s • ${sorted.length} candles`;
|
|
|
|
chart.setOption({
|
|
animation: false,
|
|
legend: {
|
|
data: ["OHLC", "Volume"],
|
|
top: 0,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
},
|
|
},
|
|
axisPointer: {
|
|
link: [{ xAxisIndex: "all" }],
|
|
},
|
|
grid: [
|
|
{ left: 60, right: 24, top: 40, height: "58%" },
|
|
{ left: 60, right: 24, top: "74%", height: "16%" },
|
|
],
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: categoryData,
|
|
boundaryGap: true,
|
|
axisLine: { onZero: false },
|
|
splitLine: { show: false },
|
|
min: "dataMin",
|
|
max: "dataMax",
|
|
},
|
|
{
|
|
type: "category",
|
|
gridIndex: 1,
|
|
data: categoryData,
|
|
boundaryGap: true,
|
|
axisLine: { onZero: false },
|
|
axisTick: { show: false },
|
|
splitLine: { show: false },
|
|
axisLabel: { show: false },
|
|
min: "dataMin",
|
|
max: "dataMax",
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
scale: true,
|
|
splitArea: { show: false },
|
|
},
|
|
{
|
|
gridIndex: 1,
|
|
scale: true,
|
|
splitNumber: 2,
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "inside",
|
|
xAxisIndex: [0, 1],
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
{
|
|
show: true,
|
|
type: "slider",
|
|
xAxisIndex: [0, 1],
|
|
bottom: 6,
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "OHLC",
|
|
type: "candlestick",
|
|
data: ohlcData,
|
|
},
|
|
{
|
|
name: "Volume",
|
|
type: "bar",
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
data: volumeData,
|
|
},
|
|
],
|
|
}, true);
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
void takeoverConsole();
|
|
debug("demo_pipeline2 window loaded");
|
|
|
|
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
|
Array.from(tooltipTriggerList).map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl));
|
|
|
|
const refreshCatalogButton = document.querySelector<HTMLButtonElement>("#demoPipeline2RefreshCatalogButton");
|
|
const tokensTextarea = document.querySelector<HTMLTextAreaElement>("#demoPipeline2TokensTextarea");
|
|
const poolsTextarea = document.querySelector<HTMLTextAreaElement>("#demoPipeline2PoolsTextarea");
|
|
const pairsTextarea = document.querySelector<HTMLTextAreaElement>("#demoPipeline2PairsTextarea");
|
|
|
|
const httpRoleInput = document.querySelector<HTMLInputElement>("#demoPipeline2HttpRoleInput");
|
|
const mintInput = document.querySelector<HTMLInputElement>("#demoPipeline2MintInput");
|
|
const mintSignatureLimitInput = document.querySelector<HTMLInputElement>("#demoPipeline2MintSignatureLimitInput");
|
|
const mintPoolLimitInput = document.querySelector<HTMLInputElement>("#demoPipeline2MintPoolLimitInput");
|
|
const backfillMintButton = document.querySelector<HTMLButtonElement>("#demoPipeline2BackfillMintButton");
|
|
|
|
const poolInput = document.querySelector<HTMLInputElement>("#demoPipeline2PoolInput");
|
|
const poolSignatureLimitInput = document.querySelector<HTMLInputElement>("#demoPipeline2PoolSignatureLimitInput");
|
|
const backfillPoolButton = document.querySelector<HTMLButtonElement>("#demoPipeline2BackfillPoolButton");
|
|
|
|
const pairSelect = document.querySelector<HTMLSelectElement>("#demoPipeline2PairSelect");
|
|
const timeframeSelect = document.querySelector<HTMLSelectElement>("#demoPipeline2TimeframeSelect");
|
|
const customTimeframeInput = document.querySelector<HTMLInputElement>("#demoPipeline2CustomTimeframeInput");
|
|
const preferMaterializedInput = document.querySelector<HTMLInputElement>("#demoPipeline2PreferMaterializedInput");
|
|
const loadCandlesButton = document.querySelector<HTMLButtonElement>("#demoPipeline2LoadCandlesButton");
|
|
|
|
const backfillSummaryTextarea = document.querySelector<HTMLTextAreaElement>("#demoPipeline2BackfillSummaryTextarea");
|
|
const chartElement = document.querySelector<HTMLDivElement>("#demoPipeline2Chart");
|
|
const chartMeta = document.querySelector<HTMLDivElement>("#demoPipeline2ChartMeta");
|
|
|
|
const clearLogButton = document.querySelector<HTMLButtonElement>("#demoPipeline2ClearLogButton");
|
|
const logTextarea = document.querySelector<HTMLTextAreaElement>("#demoPipeline2LogTextarea");
|
|
|
|
if (
|
|
!refreshCatalogButton ||
|
|
!tokensTextarea ||
|
|
!poolsTextarea ||
|
|
!pairsTextarea ||
|
|
!httpRoleInput ||
|
|
!mintInput ||
|
|
!mintSignatureLimitInput ||
|
|
!mintPoolLimitInput ||
|
|
!backfillMintButton ||
|
|
!poolInput ||
|
|
!poolSignatureLimitInput ||
|
|
!backfillPoolButton ||
|
|
!pairSelect ||
|
|
!timeframeSelect ||
|
|
!customTimeframeInput ||
|
|
!preferMaterializedInput ||
|
|
!loadCandlesButton ||
|
|
!backfillSummaryTextarea ||
|
|
!chartElement ||
|
|
!chartMeta ||
|
|
!clearLogButton ||
|
|
!logTextarea
|
|
) {
|
|
console.error("demo_pipeline2 DOM is incomplete");
|
|
return;
|
|
}
|
|
|
|
const safeTokensTextarea = tokensTextarea;
|
|
const safePoolsTextarea = poolsTextarea;
|
|
const safePairsTextarea = pairsTextarea;
|
|
|
|
|
|
const safePairSelect = pairSelect;
|
|
const safeChartElement = chartElement;
|
|
const safeChartMeta = chartMeta;
|
|
|
|
const safeLogTextarea = logTextarea;
|
|
|
|
const chart = echarts.init(safeChartElement);
|
|
setEmptyChart(chart, safeChartMeta, "Aucune candle disponible.");
|
|
window.addEventListener("resize", () => chart.resize());
|
|
|
|
clearLogButton.addEventListener("click", () => {
|
|
logTextarea.value = "";
|
|
});
|
|
|
|
let currentCatalog: KbDemoPipeline2CatalogPayload | null = null;
|
|
|
|
async function refreshCatalog(): Promise<void> {
|
|
appendLogLine(safeLogTextarea, "[ui] refreshing local catalog");
|
|
|
|
try {
|
|
const catalog = await invoke<KbDemoPipeline2CatalogPayload>("demo_pipeline2_get_catalog");
|
|
currentCatalog = catalog;
|
|
|
|
renderCatalogTextareas(catalog, safeTokensTextarea, safePoolsTextarea, safePairsTextarea);
|
|
refreshPairSelect(catalog, safePairSelect);
|
|
|
|
appendLogLine(
|
|
safeLogTextarea,
|
|
`[ui] catalog refreshed: ${catalog.tokens.length} tokens, ${catalog.pools.length} pools, ${catalog.pairs.length} pairs`,
|
|
);
|
|
} catch (error) {
|
|
appendLogLine(safeLogTextarea, `[ui] catalog refresh error: ${String(error)}`);
|
|
}
|
|
}
|
|
|
|
refreshCatalogButton.addEventListener("click", () => {
|
|
void refreshCatalog();
|
|
});
|
|
|
|
backfillMintButton.addEventListener("click", async () => {
|
|
const tokenMint = mintInput.value.trim();
|
|
if (tokenMint === "") {
|
|
appendLogLine(logTextarea, "[ui] token mint is required");
|
|
return;
|
|
}
|
|
|
|
const mintSignatureLimit = readPositiveIntegerInput(
|
|
mintSignatureLimitInput,
|
|
logTextarea,
|
|
"mintSignatureLimit",
|
|
);
|
|
if (mintSignatureLimit === undefined) {
|
|
return;
|
|
}
|
|
|
|
const poolSignatureLimit = readPositiveIntegerInput(
|
|
mintPoolLimitInput,
|
|
logTextarea,
|
|
"poolSignatureLimit",
|
|
);
|
|
if (poolSignatureLimit === undefined) {
|
|
return;
|
|
}
|
|
|
|
const httpRoleText = httpRoleInput.value.trim();
|
|
const httpRole = httpRoleText === "" ? null : httpRoleText;
|
|
|
|
appendLogLine(
|
|
logTextarea,
|
|
`[ui] launching token backfill for '${tokenMint}' with role '${httpRole ?? "history_backfill"}'`,
|
|
);
|
|
|
|
const request: KbDemoPipeline2BackfillTokenRequest = {
|
|
tokenMint,
|
|
httpRole,
|
|
mintSignatureLimit,
|
|
poolSignatureLimit,
|
|
};
|
|
|
|
try {
|
|
const payload = await invoke<KbDemoPipeline2BackfillPayload>(
|
|
"demo_pipeline2_backfill_token_mint",
|
|
{ request },
|
|
);
|
|
|
|
backfillSummaryTextarea.value = payload.summaryJson;
|
|
currentCatalog = payload.catalog;
|
|
renderCatalogTextareas(payload.catalog, tokensTextarea, poolsTextarea, pairsTextarea);
|
|
refreshPairSelect(payload.catalog, pairSelect);
|
|
|
|
appendLogLine(logTextarea, `[ui] token backfill completed for '${payload.objectKey}'`);
|
|
} catch (error) {
|
|
appendLogLine(logTextarea, `[ui] token backfill error: ${String(error)}`);
|
|
}
|
|
});
|
|
|
|
backfillPoolButton.addEventListener("click", async () => {
|
|
const poolAddress = poolInput.value.trim();
|
|
if (poolAddress === "") {
|
|
appendLogLine(logTextarea, "[ui] pool address is required");
|
|
return;
|
|
}
|
|
|
|
const poolSignatureLimit = readPositiveIntegerInput(
|
|
poolSignatureLimitInput,
|
|
logTextarea,
|
|
"poolSignatureLimit",
|
|
);
|
|
if (poolSignatureLimit === undefined) {
|
|
return;
|
|
}
|
|
|
|
const httpRoleText = httpRoleInput.value.trim();
|
|
const httpRole = httpRoleText === "" ? null : httpRoleText;
|
|
|
|
appendLogLine(
|
|
logTextarea,
|
|
`[ui] launching pool backfill for '${poolAddress}' with role '${httpRole ?? "history_backfill"}'`,
|
|
);
|
|
|
|
const request: KbDemoPipeline2BackfillPoolRequest = {
|
|
poolAddress,
|
|
httpRole,
|
|
poolSignatureLimit,
|
|
};
|
|
|
|
try {
|
|
const payload = await invoke<KbDemoPipeline2BackfillPayload>(
|
|
"demo_pipeline2_backfill_pool_address",
|
|
{ request },
|
|
);
|
|
|
|
backfillSummaryTextarea.value = payload.summaryJson;
|
|
currentCatalog = payload.catalog;
|
|
renderCatalogTextareas(payload.catalog, tokensTextarea, poolsTextarea, pairsTextarea);
|
|
refreshPairSelect(payload.catalog, pairSelect);
|
|
|
|
appendLogLine(logTextarea, `[ui] pool backfill completed for '${payload.objectKey}'`);
|
|
} catch (error) {
|
|
appendLogLine(logTextarea, `[ui] pool backfill error: ${String(error)}`);
|
|
}
|
|
});
|
|
|
|
loadCandlesButton.addEventListener("click", async () => {
|
|
const pairIdText = pairSelect.value.trim();
|
|
if (pairIdText === "") {
|
|
appendLogLine(logTextarea, "[ui] pair selection is required");
|
|
return;
|
|
}
|
|
|
|
const parsedPairId = Number.parseInt(pairIdText, 10);
|
|
if (Number.isNaN(parsedPairId) || parsedPairId <= 0) {
|
|
appendLogLine(logTextarea, `[ui] invalid pair id '${pairIdText}'`);
|
|
return;
|
|
}
|
|
|
|
let timeframeSeconds = Number.parseInt(timeframeSelect.value.trim(), 10);
|
|
const customTimeframeText = customTimeframeInput.value.trim();
|
|
if (customTimeframeText !== "") {
|
|
const parsedCustom = Number.parseInt(customTimeframeText, 10);
|
|
if (Number.isNaN(parsedCustom) || parsedCustom <= 0) {
|
|
appendLogLine(logTextarea, `[ui] invalid custom timeframe '${customTimeframeText}'`);
|
|
return;
|
|
}
|
|
timeframeSeconds = parsedCustom;
|
|
}
|
|
|
|
appendLogLine(
|
|
logTextarea,
|
|
`[ui] loading candles for pair '${parsedPairId}' timeframe '${timeframeSeconds}s'`,
|
|
);
|
|
|
|
const request: KbDemoPipeline2PairCandlesRequest = {
|
|
pairId: parsedPairId,
|
|
timeframeSeconds,
|
|
preferMaterialized: preferMaterializedInput.checked,
|
|
};
|
|
|
|
try {
|
|
const payload = await invoke<KbDemoPipeline2PairCandlesPayload>(
|
|
"demo_pipeline2_get_pair_candles",
|
|
{ request },
|
|
);
|
|
|
|
const candles = parseCandlesJson(payload.candlesJson);
|
|
renderCandlesChart(
|
|
chart,
|
|
chartMeta,
|
|
payload.pairId,
|
|
payload.timeframeSeconds,
|
|
candles,
|
|
);
|
|
|
|
appendLogLine(
|
|
logTextarea,
|
|
`[ui] loaded ${candles.length} candles for pair '${payload.pairId.toString()}'`,
|
|
);
|
|
} catch (error) {
|
|
appendLogLine(logTextarea, `[ui] load candles error: ${String(error)}`);
|
|
setEmptyChart(chart, chartMeta, "Erreur lors du chargement des candles.");
|
|
}
|
|
});
|
|
|
|
await refreshCatalog();
|
|
|
|
if (currentCatalog !== null && currentCatalog.pairs.length > 0) {
|
|
pairSelect.value = currentCatalog.pairs[0].pairId.toString();
|
|
}
|
|
});
|